DEV Community

Marques Traylor
Marques Traylor

Posted on

ShadowGas UI

I have finished the UI (Light Station) for my ShadowGas smart contract. The UI is in ReactJS and contains the Store and Transfer features of the contract.

After cloning the repo, setting up your environment, and deploying the contract, to run the UI in your local environment:

cd client

yarn install

yarn start
Enter fullscreen mode Exit fullscreen mode

This will open up a new web page in your default browser at localhost:3000 and you should be taken to the Connect page of the UI.


Connect

Alt Text

Connect with your MetaMask wallet

Alt Text

After accepting the connection via MetaMask pop-up, press the confirm button

Alt Text

Wrong Network

Alt Text

Default network is Kovan, change it in the client/src/App.js file (see below)

Alt Text

Balances

Alt Text

Store/Transfer

Alt Text

Verify transaction in MetaMask

Alt Text

Alt Text

Alt Text

Balances automagically updates
Alt Text

Transaction Failed

Alt Text


Check out my other posts on the ShadowGas smart contract:

Store - https://dev.to/traylorboy/shadowgas-store-40m9
Transfer - https://dev.to/traylorboy/shadowgas-transfer-59jg
Trade - https://dev.to/traylorboy/shadowgas-trade-1a5a
1.1.0 - https://dev.to/traylorboy/shadowgas-v1-1-0-3100

Repo: https://github.com/TraylorBoy/ShadowGas

I am working on the Trade feature for the UI, after that is finished v2.0.0 will be released!

Top comments (0)