Interact with ERC20 Smart Contract Wallet and DEX

Connect

Here is a DEX project I coded at Moralis Academy, following instructor Filip Martinsson. The project was coded in Solidity and most recently, I unit tested it using Hardaht and developed the Dapp using React, which I also learned at Moralis. After a young Moralis dev looked at my project, he made some suggenstions so I updated this Dapp, as it uses now Web3-React to create an account, signers and provider and I also re-factored the code, to create smaller components, which where missing. The Dapp has taking me a long time to develop and it's not perfect by any means.

There are issues with useEffect re-renders and a few other issues but overall, it works, except now, the widthraw ETH is not adding the ETH back to Metamask wallet. Regardles, I need to finish it and move on. Conversely, one can send tokens, receive, approve and buy and sell tokens using the DEX contract. I would have to send you some of my RealToken, RETK token or one can easily trade any other token like DAI or LINK.

Lastly, some kinks...it's not what I wanted by the connect button has to be clicked to updated the token balances. I set up a refresh button which clears up some of the re-renders but it also softly disconnects the Dapp from Metamask, hence the re-clicking of the connect button. The DEX might have to be refreshed the first time and then it should be fine


Link to my ERC20, RETK token contract
Link to my DEX contract

ERC20 DEX Wallet

Address: -

Name: -

Symbol: -

Total Supply: -

Account Info

Address: -

Balance: - -

Send


recipient
amount

Approve DEX


approve this DEX
amount

Approve Spender

Approve another address to spend your tokens
approve the spender
amount

Allowance

Check allowance amount between the owner address, the Metamask account and DEX address 0x5FbDB2315678afecb367f032d93F642f64180aa3
owner
spender

Transfer From


sender
recipient
amount

Recent ERC20 Token Wallet Transactions

DEX UI

To trade, add ERC20 tokens into DEX on the Ropsten testnet blockchain. Deposit the amount of tokens, deposit ETH to make transactions and withdraw tokens.

Add token to trade


add token to DEX
Token List

Deposit token into DEX


deposit tokens into DEX
token symbol

Deposit ETH to pay for trading


deposit ETH to DEX

Withdraw tokens from DEX

Tokens will be withdrawn from this exchange to your wallet
widthraw tokens from DEX
token symbol
DEX ETH Balance
Address: -
Amount: _ ETH

DEX Token Balances

DEX TRADING

First, the symbol or tiker of a token like DAI must be added from a Metamask account. Then, once can deposit an amount. The DEX needs to be approved by the DEX wallet at the top of the Dapp. ETH must also be deposited into the DEX.

In the DEX trading section, one can make sell and buy orders. Trades and history should appear or refresh the page.

Side 0 is a BUY and Side 1 is a SELL


Prices in ETH

Limit SELL Orders


ticker example: LINK, ETH, etc
amount of tokens to sell
Price per token
ETH

Limit BUY Orders


ticker example: LINK, ETH, etc
amount of tokens to buy
Price per token
ETH

Market SELL Orders


ticker example: LINK, ETH, etc
amount of tokens to sell

Market BUY Order


ticker example: LINK, ETH, etc
amount of tokens to buy
Order Book Sells: 0
Order Book Buys: 0

Sell
Buy
LIMIT ORDERS
MARKET ORDERS

Smart contracts and DEX project

I created this project while at the Moralis Academy, Solidity course. Initially, I finished the smart contracts in summer of 2020 but it took me some time to learn React, web3, Truffle, Ganche, Hardhat, Ethers js, etc... March 14, 2022

It is now May 6th, 2022. I had to revisit this project as I mentioned above...it needed improvements such as moving logic into smaller components and getting rid of buttons for getting balances but that also introduced some issues such as re-rendeing from useEffect. I think this has allowed me to understand better how Dapps should work for users.