Loading...
; 119 | } 120 | returnBalance: {balance} AVAX
; 121 | }; 122 | ``` 123 | 124 | We derive our balance state from `account` and `provider` using `useEffect` hook. If the user changes their account their balance is recalculated. We use `provider.getBalance(account)` function to access user's AVAX balance and convert it to string using `formatEther` function. 125 | 126 | > In EVM balance of a ERC20 token is stored as a unsigned 256-bit integer. However, JavaScript `Number` type is a [double-precision 64-bit binary format IEEE 754][float] so balance of an account can be larger than JavaScript's numbers allow. `ethers` library represents these numbers as `BigNumber` type and `formatEther` utility function can be used to convert `BigNumber` to `String`. 127 | 128 | ## Balance of Custom ERC20 Token 129 | 130 | What is web3 without custom tokens? Let's bring our project's ERC20 token into our application. To do this, we will be using `ethers.Contract`. This class can be used to instantiate custom EVM contracts from their address and ABI. 131 | 132 | > `ethers.Contract` is a meta class under the hood, meaning it's a class that creates classes not instances! `Contract` class receives ABI and constructs a new class that has ABI's exported properties. 133 | 134 | For our purposes ERC20 token called 'DummyToken (DT)' has deployed to Avalanche Fuji testnet at `0x5E8F49F4062d3a163cED98261396821ae2996596`. We can use [SnowTrace block explorer][snowtrace] to inspect contract's methods and ABI, token contract on explorer can be found [here](https://testnet.snowtrace.io/address/0x5E8F49F4062d3a163cED98261396821ae2996596). We can import ABI as a regular JSON file and initialize contract! 135 | 136 | ```js 137 | import DummyTokenABI from "../../abi/dummyToken.abi.json"; // Path to ABI's JSON file 138 | 139 | const DUMMY_TOKEN_ADDRESS = "0x5E8F49F4062d3a163cED98261396821ae2996596"; 140 | const DUMMY_TOKEN = new ethers.Contract(DUMMY_TOKEN_ADDRESS, DummyTokenABI); 141 | ``` 142 | 143 | Then, we can read token balance using `balanceOf(address)` method similar to AVAX balance. 144 | 145 | ```js 146 | useEffect(() => { 147 | const getBalance = async () => { 148 | const dummyToken = DUMMY_TOKEN.connect(provider); 149 | const balance = await dummyToken.balanceOf(account); 150 | return ethers.utils.formatEther(balance); 151 | }; 152 | getBalance().then(setBalance).catch(console.error); 153 | }, [provider, account]); 154 | ``` 155 | 156 | As expected DummyToken balance turns out to be 0. Fortunately, DummyToken contract exports a function to obtain some tokens. 157 | 158 | ## Claiming DummyToken 159 | 160 | We can check if an account has claimed using a similar function `hasClaimed()` function and we can modify `useEffect` to check when the `AtaBalance` mounts. 161 | 162 | ```js 163 | const getBalanceAndClaimed = async () => { 164 | const dummyToken = DUMMY_TOKEN.connect(provider); 165 | const [balance, claimed] = await Promise.all([ 166 | dummyToken.balanceOf(account), 167 | dummyToken.hasClaimed(), 168 | ]); 169 | return [ethers.utils.formatEther(balance), claimed]; 170 | }; 171 | ``` 172 | 173 | > `Promise.all([awaitable1, awaitable2, ...])` can be used to await multiple async calls at the same time and receive resolved promises in order awaitables' order. 174 | 175 | If the user hasn't claimed we can a render a button that when pressed will invoke `claim()` method on the contract. Since, we are modifying state of blockchain it's not enough for us to use a [`Provider`][provider] as they provide a **readonly** view of blockchain. We will be using [`Signer`][signer] which can used to send transactions. 176 | 177 | ```js 178 | const claim = async () => { 179 | const signer = provider.getSigner(); 180 | const dummyToken = DUMMY_TOKEN.connect(signer); 181 | 182 | const tx = await dummyToken.claim(); 183 | await tx.wait(); 184 | }; 185 | ``` 186 | 187 | If we refresh the page we can see our funds arrive! However, it isn't such a good user experience if they have to refresh the page every time they make transaction. With some refactoring we can solve this issue. 188 | 189 | ```js 190 | const getBalanceAndClaimed = async (account, provider) => { 191 | const dummyToken = DUMMY_TOKEN.connect(provider); 192 | const [balance, claimed] = await Promise.all([ 193 | dummyToken.balanceOf(account), 194 | dummyToken.hasClaimed(account), 195 | ]); 196 | return [ethers.utils.formatEther(balance), claimed]; 197 | }; 198 | 199 | const DummyToken = ({ account, provider }) => { 200 | // `DummyToken` component state 201 | 202 | const claim = async () => { 203 | // ... 204 | await tx.wait(); 205 | 206 | getBalanceAndClaimed(account, provider) 207 | .then(/* set balance and claimed */) 208 | .catch(); 209 | }; 210 | 211 | useEffect(() => { 212 | getBalanceAndClaimed(account, provider) 213 | .then(/* set balance and claimed */) 214 | .catch(); 215 | }, [provider, account]); 216 | 217 | // ... 218 | }; 219 | ``` 220 | 221 | ## Adding DummyToken to MetaMask 222 | 223 | Even tough, users can claim their tokens, DummyToken doesn't show up in MetaMask wallet. We can remedy this situation by sending `wallet_watchAsset` request through global `ethereum` object. We provide address of the token, symbol, decimals and lastly image for MetaMask to use. 224 | 225 | ```js 226 | const addDummyTokenToMetaMask = async () => { 227 | if (!window.ethereum) { 228 | return false; 229 | } 230 | try { 231 | const added = await window.ethereum.request({ 232 | method: "wallet_watchAsset", 233 | params: { 234 | type: "ERC20", 235 | options: { 236 | address: DUMMY_TOKEN_ADDRESS, 237 | symbol: "DT", 238 | decimals: 18, 239 | image: "https://ata-token.netlify.app/opn.png", 240 | }, 241 | }, 242 | }); 243 | return added; 244 | } catch (error) { 245 | return false; 246 | } 247 | }; 248 | ``` 249 | 250 | ## Integrating Staking Contract 251 | 252 | ERC20 allocation staking is one of most common practices in web3 launchpads and DeFi applications. Usually, users lock some amount of funds into smart contract and receive certain amount of rewards funds in return as interest. In case of launchpads like [OpenPad][openpad] in addition to receiving interest users are able to invest in launchpad project. 253 | 254 | Lastly, for our application we will integrating a staking contact. DummyToken staking contract is deployed at `0xAC1BdE0464D932bf1097A9492dCa8c3144194890` and we can inspect the contract code and ABI [here](https://testnet.snowtrace.io/address/0xAC1BdE0464D932bf1097A9492dCa8c3144194890#code). 255 | 256 | Staking contract exports stake and reward token amount for a given address and also total staked token amounts. We can read these values like any other contract value using `stakedOf()`, `rewardOf()` and `totalStaked()` respectively. 257 | 258 | ```js 259 | const getStakingViews = async (account, provider) => { 260 | const signer = provider.getSigner(account); 261 | const staking = STAKING_CONTRACT.connect(signer); 262 | const [staked, reward, totalStaked] = await Promise.all([ 263 | staking.stakedOf(account), 264 | staking.rewardOf(account), 265 | staking.totalStaked(), 266 | ]); 267 | return { 268 | staked: ethers.utils.formatEther(staked), 269 | reward: ethers.utils.formatEther(reward), 270 | totalStaked: ethers.utils.formatEther(totalStaked), 271 | }; 272 | }; 273 | ``` 274 | 275 | ### Staking and Withdrawing Funds 276 | 277 | Users can stake their tokens using `stake(uint256 amount)` function and withdraw their locked funds using `withdraw(uint256 amount)` function. Most important of them all they can claim rewards using `claimReward()` function. Since these functions modify state of the contract we have to use a [`Signer`][signer]. 278 | 279 | We can write a simple form for user to fill out while staking and fire off relevant contract function when the form is submitted. 280 | 281 | ```js 282 | const Staking = ({ account, provider }) => { 283 | // ... 284 | const [stake, setStake] = useState(""); 285 | 286 | const handleStake = async event => { 287 | event.preventDefault(); // prevent page refresh when form is submitted 288 | const signer = provider.getSigner(account); 289 | const staking = STAKING_CONTRACT.connect(signer); 290 | 291 | const tx = await staking.stake(ethers.utils.parseEther(stake), { 292 | gasLimit: 1_000_000, 293 | }); 294 | await tx.wait(); 295 | }; 296 | // ... 297 | return ( 298 |Loading...
; 20 | } 21 | returnBalance: {balance} tBNB
; 22 | }; 23 | 24 | function App() { 25 | const [account, setAccount] = useState(null); 26 | 27 | const checkAccounts = async () => { 28 | if (!window.ethereum) { 29 | return null; 30 | } 31 | const [account] = await window.ethereum.request({ 32 | method: "eth_accounts", 33 | }); 34 | window.ethereum.on("accountsChanged", accounts => { 35 | setAccount(accounts[0]); 36 | }); 37 | return account; 38 | }; 39 | 40 | const requestAccounts = async () => { 41 | if (!window.ethereum) { 42 | return null; 43 | } 44 | const [account] = await window.ethereum.request({ 45 | method: "eth_requestAccounts", 46 | }); 47 | return account; 48 | }; 49 | 50 | useEffect(() => { 51 | checkAccounts().then(setAccount).catch(console.error); 52 | }, []); 53 | 54 | return ( 55 |
59 | Account:{" "}
60 | {account}
61 |
Loading...
68 |76 | DummyToken balance: {balance} DT 77 |
78 | {claimed ? ( 79 |You have already claimed your DT
80 | ) : ( 81 | 82 | )} 83 | 84 |Loading...
76 |84 | Staked: {views.staked} DT 85 |
86 |87 | Reward: {views.reward} DT 88 |
89 |90 | Total Staked: {views.totalStaked} DT 91 |
92 |