MyBitDapp-FrontEnd

🎨 The Front End that supports the MyBit Platform™

MyBit offers a fast, secure and cost-effective investing experience. Powered by Ethereum.

The MyBit Decentralized Application (DApp) enables anyone to invest directly in revenue generating assets.

Versions

0.0.1.alpha Note, this is an Alpha version which may not be well tested. Features in this version are not final.

• The Assets Funding Hub Contract Interface via web3
• ETH and MYB Account data view
• The Assets Portfolio and Revenue Contract Explorer
• IPFS (A peer-to-peer hypermedia protocol) testflight

Tools Used

Now.sh

Next.js

Styled Components

Express

Read before you contribute

Environment Variables

Please create a .env file in the root of the project. See here about environment variables.

Some of these env. variables are required, some aren't. Please read through each of them to understand what to do.

• REACT_APP_CIVIC_APP_ID | CIVIC_PRIVATE_KEY | CIVIC_APP_SECRET Not required but civic won't work in a development environment, only once your PR is deployed to our server. Fortunately civic's API is good so you can use the current implementation anywhere you need it and trust it will work. Meanwhile Civic is disabled in dev.

• REACT_APP_INFURA_API_KEY (Prefix REACT_ so it can be used in react code) Free to generate at infura's website. Required.

• BUCKET_REGION | AWS_ACCESS_KEY | BUCKET_NAME | AWS_SECRET_KEY Currently the application won't work without these.

• AIRTABLE_KEY Create a free account at airtable and copy our table, then use your own API key. Required.

Contexts

The application is built around a series of Contexts (See React Context) in conjunction with HOCs to provide different data to different components across the appliacation.

The following Contexts are available:

• Metamask
• Blockchain
• Airtable
• Kyber
• Notifications
• Civic

So if you need any of the information inside these contexts you can use the with high order component each of them provides.

File Structure

Patterns

Styling

As said previously we use Styled Components but we also use a set of standards and a way to style inside the application. You will notice some of our files don't yet follow these standards, refactoring is gradually being done, these decisions were made recently.

Theme provider

We use Styled Components Theme Provider component to have access to our own theme properties. See this file with the declaration and an example of using it here.

Standards for naming

Each styled component is ideally declared inside its own file and for this reason the name of that file, say you are customising a button and your component is call Navbarthen this new styled component file would be named navBarButton.js. So you keep the name of the Main component attached to each styled component file used inside it.

In this case the main styled component Navbar could be declared in a different file using navBarWrapper.js and then used inside /NavBar/index.js like so: ´´.

So the folder structure would be:

NavBar/index.js
NavBar/navBarWrapper.js
NavBar/navBarButton.js

index.js:

<NavBarWrapper>
   <NavBarButton>
     Hello
  </NavBarButton>
</NavBarWrapper>

Standards for writing css

We use a mobile first approach. See more about it here.

See this document as a good reference on thinking in Styled Components.

Server

Global folders for your convenience

Using babel.

The following folders are available from anywhere (but /server):

• static
• components
• constants
• utils
• ui

User Documentation

MyBit follows user-centered design and documentation. For User Flow docs check this page.

To run

Installing the dependencies with yarn

yarn install

Development server

yarn dev

Production server

yarn build
yarn now-start

Powered with

MyBit Platform™ CHE-177.186.963