This project is to demostrate the work of React+Redux+Metamask in typescript by implementing a Crypto Swap Demo.
The application can let you:
- connect with Metamask for login
- connect to CoinGecko API to get the real time price of USDC/WBTC/ETH
- swap between USDC/WBTC/ETH with dummy data in the wallet in Redux (no blockchain transactions)
- keyboard navigation support through TAB
Start with Create React App, using the Redux and Redux Toolkit template.
npx create-react-app crypto-swap-demo --template redux-typescript
The template will come with redux slice pattern.
After installation you will need to eject CRA:
npm run eject
React applications are commonly built as a SPA (Single Page Application) with URL dynamically rewriting. react-router is essential and also connected-react-router for Redux binding with react-router.
After deployed on Github page, without server-side support, the web application will get a 404 fail if user do a browser refresh on some path (non-root path). To solve this, either use HashRouter with HashHistory in react-router, or do a trick with 404 handling. This project uses the latter one.
webpack comes with CRA (Create React App) for bunlding. Also babel and other webpack plugins. You may refer to package.json for detail.
This project uses SCSS modules so node-sass is required for devDependency.
By default the number in JS is a 64bits double with 53bits mantissa which is dangerous for decimal calculation (BTC is expensive!). Thus you may want to have a library to help you to calculate and format the numbers.
In particular, since CoinGecko API only provides a limited list of vs_currency for coin pairs (no WBTC and USDC in the list), to get the price of WBTC/USDC you will need to get the price of WBTC and USDC in USD first and then calculate the price for the WBTC/USDC:
WBTC/USDC = WBTC/USD * USD/USDC = (WBTC/USD) / (USDC/USD)
ethers.js is used to connect Metamask and handle further tasks on ethereum if necessary.
dev run:
npm start
build for web application (on Github page, here)
npm run build:github
There are 2 pages in this application.
No matter which pages or what path you are at, if you dont have Metamask connected, you will be redirected to the Connect Wallet Page. Click the button to connect Metamask to continue.
Once you have Metamask connected, no matter which pages or what path you are at, you will be redirected to the Swap Page. In Swap Page there are 2 components. On the left hand side it's Crypto Balances Component, on the right hand side it's Crypto Swap Component.
In Crypto Balance Component you may check the crypto balance in your dummy wallet, with the market value of your crypto asset calculated in USD. You may click on the button with right arrow to start swapping cryptos.
For example you can set a certain amount of Ethereum: The swapped crypto amount will be reflected immediately.
You can choose another pair, say, ETH/WBTC.
The Review Button will only be active when the coin pair is different pair and the amount of crypto being swapped is not zero. Click Review Button to continue.
Now you will be able to review the transaction details, what and how much you will receive and how much is the fee. If no problem, click Approve Swap Button to continue. If not, you may click either the Cancel Button or the X Button to cancel the transaction.
Note that if the received amount < 0 (i.e. transaction fee > swapped amount), you cannot approve the transaction (technically you can, but why?)
This is the final step for swapping. You will need to click Confirm Button to continue, or, click either the Cancel Button or the X Button to cancel the transaction.
Success! You can now see 8.45 ETH is swapped to WBTC.