FIN4Xplorer

The smart contracts are located at FIN4Contracts.

---

FIN4Xplorer is a decentralised design for a bottom-up and multidimensional finance system with the aim of making communities healthier, more social, and sustainable. It is part of the FLAG-ERA-funded project FuturICT 2.0.

ℹ️ Explanatory video

FIN4Xplorer allows any person, organisation, and public institution to create tokens, which stand for a positive action. Users can claim and prove these actions, for which they receive said tokens. By designing the system to be open to markets tailored to the respective actions, incentives are generated. The main characteristics of this system are its decentralization, immutability, rewards, and bottom-up approach.

Setup

Dependencies

# basics
sudo apt-get install git build-essential python

# node v10
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
source ~/.bashrc
nvm install 10.0.0
nvm use 10.0.0

# on macOS: to prevent gyp related errors
npm explore npm -g -- npm install node-gyp@latest
# on macOS: if you get "gyp: No Xcode or CLT version detected!", try un- and then reinstalling the XCode Command Line Tools:
sudo rm -r -f /Library/Developer/CommandLineTools
xcode-select --install

# project
npm install # might require more than 1GB of memory to run

Install the MetaMask browser extension.

config.json

The file src/config/config.json has to be added and filled. If no Infura API key is given, contract events won't be received and reload is necessary to update the frontend.

{
    "FAUCET_SERVER_URL": "",
    "INFURA_API_KEY": ""
}

Faucet server

The faucet server, can send users Ether if they request it. If an URL is added to config.json, the box On the blockchain on Home will show the option Request Ether. Note that the faucet URL has to be HTTPS if your deployment is also served via HTTPS.

Required files

To run the app, the compiled smart contracts that will be interacted with as well as the address of the deployed Fin4Main smart contract must be known.

The JSON-files of the smart contracts are expected to be located in src/build/contracts. They can get there either automatically be setting the config.json in the FIN4Contracts repository accordingly and running truffle compile, or have to be manually placed there, e.g. via scp -r git/FIN4Xplorer/src/build ubuntu@your-server-ip:/home/ubuntu/FIN4Xplorer/src.

The address of the Fin4Main contract is expected to reside in src/config/deployment-info.js. As with the compiled contracts, this can happen automatically upon truffle migrate in the FIN4Contracts repository, or has to be manually inserted.

Serving the GUI

Serving via React-app-default port 3000. Serving via HTTPS is recommended. If only HTTP, some features won't work. Location requests and permissions to use the webcam for QR code scanning are blocked (meaning the user doesn't even see the prompt to allow it or not) by by modern browsers on sites not using HTTPS.

Development mode

npm start

Production mode

The npm run build command often crashes because of memory issues. If his happens, try running this before: export NODE_OPTIONS=--max_old_space_size=1500 with the value being a bit less then you have available (check using the free command). Another thing to try is to modify scripts.build in package.json like so: "react-scripts --max_old_space_size=4096 build". It can also help to close all other programs on your computer. If this doesn't work, try an older version of react-scripts or try building locally and then scp-ing the build folder onto the host machine. Note that it will package deployment-info.js as you have it locally, make sure it has the correct Fin4Main address in it. If you scp a locally built build-folder, there is no need to also scp the src/build folder with the contract ABIs as that is packed already.

npm run build
npm install -g serve
serve -s build -l 3000 # default port would be 5000

Serving the DApp in production mode instead of development mode also solves an issue with sub-sites (e.g. /tokens) on mobile DApp browsers (observed in MetaMask on Android) where it would only show cannot GET /URL on reloading.

Serving via localhost

To expose specific local ports temporarily to the public can be useful during development. For instance to test the DApp on mobile without having to deploy it on a testnet first and getting your code-changes to your server etc.

One way of doing so, is using localtunnel.me:

npm install -g localtunnel

Running these commands in two terminal windows will make both your local Ganache as well as your DApp available via public URLs. If you don't specify --subdomain you will get a randomized one each time.

lt --port 3000 --subdomain finfour
lt --port 7545 --subdomain finfour-ganache

This should result in:

your url is: https://finfour.localtunnel.me
your url is: https://finfour-ganache.localtunnel.me

The Ganache-URL can now be used to set up a custom network in your mobile DApp-browser App. Then make sure to restore the mobile wallet using the seed phrase from your local Ganache, otherwise you won't have any ETH. Now you should be able to open and use the DApp at the generated localtunnel-URL.

Using the Dapp

If running locally, choose "import using account seed phrase" in MetaMask and use the MNEMONIC from Ganache. Create a network with http://127.0.0.1:7545 as custom RPC. If running on Rinkeby, select that as your network in MetaMask and create or restore your respective account.

Once correctly connected the warnings should disappear and you are good to go.