From 89c3053c66cee09aec74e1d716612392ef8c99b4 Mon Sep 17 00:00:00 2001 From: Alex Plutta Date: Sat, 4 Dec 2021 23:12:05 +0100 Subject: [PATCH 1/7] added ustTokenBalance hook --- .../src/hooks/useTokenBalance/ERC20.json | 222 ++++++++++++++++++ .../hooks/src/hooks/useTokenBalance/index.ts | 1 + .../hooks/useTokenBalance/useTokenBalance.ts | 34 +++ .../src/stories/UseTokenBalance.stories.tsx | 32 +++ 4 files changed, 289 insertions(+) create mode 100644 packages/hooks/src/hooks/useTokenBalance/ERC20.json create mode 100644 packages/hooks/src/hooks/useTokenBalance/index.ts create mode 100644 packages/hooks/src/hooks/useTokenBalance/useTokenBalance.ts create mode 100644 packages/hooks/src/stories/UseTokenBalance.stories.tsx diff --git a/packages/hooks/src/hooks/useTokenBalance/ERC20.json b/packages/hooks/src/hooks/useTokenBalance/ERC20.json new file mode 100644 index 00000000..405d6b36 --- /dev/null +++ b/packages/hooks/src/hooks/useTokenBalance/ERC20.json @@ -0,0 +1,222 @@ +[ + { + "constant": true, + "inputs": [], + "name": "name", + "outputs": [ + { + "name": "", + "type": "string" + } + ], + "payable": false, + "stateMutability": "view", + "type": "function" + }, + { + "constant": false, + "inputs": [ + { + "name": "_spender", + "type": "address" + }, + { + "name": "_value", + "type": "uint256" + } + ], + "name": "approve", + "outputs": [ + { + "name": "", + "type": "bool" + } + ], + "payable": false, + "stateMutability": "nonpayable", + "type": "function" + }, + { + "constant": true, + "inputs": [], + "name": "totalSupply", + "outputs": [ + { + "name": "", + "type": "uint256" + } + ], + "payable": false, + "stateMutability": "view", + "type": "function" + }, + { + "constant": false, + "inputs": [ + { + "name": "_from", + "type": "address" + }, + { + "name": "_to", + "type": "address" + }, + { + "name": "_value", + "type": "uint256" + } + ], + "name": "transferFrom", + "outputs": [ + { + "name": "", + "type": "bool" + } + ], + "payable": false, + "stateMutability": "nonpayable", + "type": "function" + }, + { + "constant": true, + "inputs": [], + "name": "decimals", + "outputs": [ + { + "name": "", + "type": "uint8" + } + ], + "payable": false, + "stateMutability": "view", + "type": "function" + }, + { + "constant": true, + "inputs": [ + { + "name": "_owner", + "type": "address" + } + ], + "name": "balanceOf", + "outputs": [ + { + "name": "balance", + "type": "uint256" + } + ], + "payable": false, + "stateMutability": "view", + "type": "function" + }, + { + "constant": true, + "inputs": [], + "name": "symbol", + "outputs": [ + { + "name": "", + "type": "string" + } + ], + "payable": false, + "stateMutability": "view", + "type": "function" + }, + { + "constant": false, + "inputs": [ + { + "name": "_to", + "type": "address" + }, + { + "name": "_value", + "type": "uint256" + } + ], + "name": "transfer", + "outputs": [ + { + "name": "", + "type": "bool" + } + ], + "payable": false, + "stateMutability": "nonpayable", + "type": "function" + }, + { + "constant": true, + "inputs": [ + { + "name": "_owner", + "type": "address" + }, + { + "name": "_spender", + "type": "address" + } + ], + "name": "allowance", + "outputs": [ + { + "name": "", + "type": "uint256" + } + ], + "payable": false, + "stateMutability": "view", + "type": "function" + }, + { + "payable": true, + "stateMutability": "payable", + "type": "fallback" + }, + { + "anonymous": false, + "inputs": [ + { + "indexed": true, + "name": "owner", + "type": "address" + }, + { + "indexed": true, + "name": "spender", + "type": "address" + }, + { + "indexed": false, + "name": "value", + "type": "uint256" + } + ], + "name": "Approval", + "type": "event" + }, + { + "anonymous": false, + "inputs": [ + { + "indexed": true, + "name": "from", + "type": "address" + }, + { + "indexed": true, + "name": "to", + "type": "address" + }, + { + "indexed": false, + "name": "value", + "type": "uint256" + } + ], + "name": "Transfer", + "type": "event" + } +] diff --git a/packages/hooks/src/hooks/useTokenBalance/index.ts b/packages/hooks/src/hooks/useTokenBalance/index.ts new file mode 100644 index 00000000..ee2387a8 --- /dev/null +++ b/packages/hooks/src/hooks/useTokenBalance/index.ts @@ -0,0 +1 @@ +export { useTokenBalance } from './useTokenBalance'; diff --git a/packages/hooks/src/hooks/useTokenBalance/useTokenBalance.ts b/packages/hooks/src/hooks/useTokenBalance/useTokenBalance.ts new file mode 100644 index 00000000..975287cf --- /dev/null +++ b/packages/hooks/src/hooks/useTokenBalance/useTokenBalance.ts @@ -0,0 +1,34 @@ +import React, { useContext } from 'react'; +import { ethers } from 'ethers'; +import { Web3Context } from '../../Provider'; +import ERC20 from './ERC20.json'; + +export const useTokenBalance = (address: string, owner: string) => { + const [isLoading, setIsLoading] = React.useState(true); + const [balance, setBalance] = React.useState(null); + + const { provider } = useContext(Web3Context); + + React.useEffect(() => { + getTokenBalance(); + }); + + const getTokenBalance = async () => { + if (provider === undefined) { + return; + } + const contract = new ethers.Contract(address, ERC20, provider); + const balanceFuture = contract.balanceOf(owner); + const decimalsFuture = contract.decimals(); + + const [resolvedBalance, resolvedDecimals] = await Promise.all([balanceFuture, decimalsFuture]); + + const balanceAsNumber = Number.parseInt(resolvedBalance); + const displayBalance = (balanceAsNumber / 10 ** resolvedDecimals).toFixed(3); + + setBalance(displayBalance); + setIsLoading(false); + }; + + return [isLoading, balance]; +}; diff --git a/packages/hooks/src/stories/UseTokenBalance.stories.tsx b/packages/hooks/src/stories/UseTokenBalance.stories.tsx new file mode 100644 index 00000000..5a3db4da --- /dev/null +++ b/packages/hooks/src/stories/UseTokenBalance.stories.tsx @@ -0,0 +1,32 @@ +import { storiesOf } from '@storybook/react'; +import React from 'react'; +import { Provider, useWallet } from '..'; +import { useTokenBalance } from '../hooks/useTokenBalance'; + +const Default = () => { + const { connectWallet, connected } = useWallet(); + + if (connected) { + return ; + } + + return ; +}; + +storiesOf('useTokenBalance', module).add('Default', () => ( + + + +)); + +const BalanceOfDai = () => { + const owner = '0x503828976D22510aad0201ac7EC88293211D23Da'; + const address = '0x6B175474E89094C44Da98b954EedeAC495271d0F'; + const [loading, balance] = useTokenBalance(address, owner); + + return ( + <> +

{loading ? 'Loading...' : balance}

+ + ); +}; From 33a2ee46c977968d2c9237afe2cf956ca9e1fabc Mon Sep 17 00:00:00 2001 From: Alex Plutta Date: Sat, 4 Dec 2021 23:20:29 +0100 Subject: [PATCH 2/7] added error handling --- .../hooks/useTokenBalance/useTokenBalance.ts | 35 ++++++++++++------- .../src/stories/UseTokenBalance.stories.tsx | 32 ++++++++++++++++- 2 files changed, 54 insertions(+), 13 deletions(-) diff --git a/packages/hooks/src/hooks/useTokenBalance/useTokenBalance.ts b/packages/hooks/src/hooks/useTokenBalance/useTokenBalance.ts index 975287cf..d044d1ca 100644 --- a/packages/hooks/src/hooks/useTokenBalance/useTokenBalance.ts +++ b/packages/hooks/src/hooks/useTokenBalance/useTokenBalance.ts @@ -6,6 +6,7 @@ import ERC20 from './ERC20.json'; export const useTokenBalance = (address: string, owner: string) => { const [isLoading, setIsLoading] = React.useState(true); const [balance, setBalance] = React.useState(null); + const [hasError, setHasError] = React.useState(false); const { provider } = useContext(Web3Context); @@ -15,20 +16,30 @@ export const useTokenBalance = (address: string, owner: string) => { const getTokenBalance = async () => { if (provider === undefined) { + setHasError(true); + setIsLoading(false); return; } - const contract = new ethers.Contract(address, ERC20, provider); - const balanceFuture = contract.balanceOf(owner); - const decimalsFuture = contract.decimals(); - - const [resolvedBalance, resolvedDecimals] = await Promise.all([balanceFuture, decimalsFuture]); - - const balanceAsNumber = Number.parseInt(resolvedBalance); - const displayBalance = (balanceAsNumber / 10 ** resolvedDecimals).toFixed(3); - - setBalance(displayBalance); - setIsLoading(false); + try { + const contract = new ethers.Contract(address, ERC20, provider); + const balanceFuture = contract.balanceOf(owner); + const decimalsFuture = contract.decimals(); + + const [resolvedBalance, resolvedDecimals] = await Promise.all([ + balanceFuture, + decimalsFuture, + ]); + + const balanceAsNumber = Number.parseInt(resolvedBalance); + const displayBalance = (balanceAsNumber / 10 ** resolvedDecimals).toFixed(3); + + setBalance(displayBalance); + setIsLoading(false); + } catch (e) { + setHasError(true); + setIsLoading(false); + } }; - return [isLoading, balance]; + return [isLoading, balance, hasError]; }; diff --git a/packages/hooks/src/stories/UseTokenBalance.stories.tsx b/packages/hooks/src/stories/UseTokenBalance.stories.tsx index 5a3db4da..62c2f751 100644 --- a/packages/hooks/src/stories/UseTokenBalance.stories.tsx +++ b/packages/hooks/src/stories/UseTokenBalance.stories.tsx @@ -7,7 +7,13 @@ const Default = () => { const { connectWallet, connected } = useWallet(); if (connected) { - return ; + return ( + <> + + + + + ); } return ; @@ -30,3 +36,27 @@ const BalanceOfDai = () => { ); }; + +const UnknownOwner = () => { + const owner = ''; + const address = '0x6B175474E89094C44Da98b954EedeAC495271d0F'; + const [loading, balance, hasError] = useTokenBalance(address, owner); + + return ( + <> +

{loading ? 'Loading...' : 'Error ' + hasError}

+ + ); +}; + +const UnknownContract = () => { + const owner = '0x503828976D22510aad0201ac7EC88293211D23Da'; + const address = ''; + const [loading, balance, hasError] = useTokenBalance(address, owner); + + return ( + <> +

{loading ? 'Loading...' : 'Error ' + hasError}

+ + ); +}; From 02332a6d0adb18115f09f92456c8edfd65195fb6 Mon Sep 17 00:00:00 2001 From: Alex Plutta Date: Sun, 5 Dec 2021 22:43:31 +0100 Subject: [PATCH 3/7] export useTokenBalance from /hooks directory --- packages/hooks/src/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts index 97f2fd0e..1108e220 100644 --- a/packages/hooks/src/index.ts +++ b/packages/hooks/src/index.ts @@ -1,3 +1,4 @@ export { useWallet } from './hooks'; +export { useTokenBalance } from './hooks/useTokenBalance'; export { Provider, Web3Context } from './Provider'; export type { ProviderProps, Web3ContextType } from './Provider'; From f39c6bc738ede55bfdfbc8a43fc0656e3e1d0214 Mon Sep 17 00:00:00 2001 From: Alex Plutta Date: Sun, 5 Dec 2021 22:53:16 +0100 Subject: [PATCH 4/7] . change hasError to errorMsg . rename ERC20 to ERC20.json . change name of args of useTokenBalance.ts --- .../{ERC20.json => ERC20ABI.json} | 0 .../hooks/useTokenBalance/useTokenBalance.ts | 25 ++++++++++++------- 2 files changed, 16 insertions(+), 9 deletions(-) rename packages/hooks/src/hooks/useTokenBalance/{ERC20.json => ERC20ABI.json} (100%) diff --git a/packages/hooks/src/hooks/useTokenBalance/ERC20.json b/packages/hooks/src/hooks/useTokenBalance/ERC20ABI.json similarity index 100% rename from packages/hooks/src/hooks/useTokenBalance/ERC20.json rename to packages/hooks/src/hooks/useTokenBalance/ERC20ABI.json diff --git a/packages/hooks/src/hooks/useTokenBalance/useTokenBalance.ts b/packages/hooks/src/hooks/useTokenBalance/useTokenBalance.ts index d044d1ca..0a7b8290 100644 --- a/packages/hooks/src/hooks/useTokenBalance/useTokenBalance.ts +++ b/packages/hooks/src/hooks/useTokenBalance/useTokenBalance.ts @@ -1,12 +1,17 @@ import React, { useContext } from 'react'; import { ethers } from 'ethers'; import { Web3Context } from '../../Provider'; -import ERC20 from './ERC20.json'; +import ERC20 from './ERC20ABI.json'; -export const useTokenBalance = (address: string, owner: string) => { +/** + * @param contractAddress -> the address of the ERC20 token contract + * @param ownerAddress -> the address of the owner which balance should be fetched + + */ +export const useTokenBalance = (contractAddress: string, ownerAddress: string) => { const [isLoading, setIsLoading] = React.useState(true); - const [balance, setBalance] = React.useState(null); - const [hasError, setHasError] = React.useState(false); + const [balance, setBalance] = React.useState(); + const [errorMsg, setErrorMsg] = React.useState(false); const { provider } = useContext(Web3Context); @@ -16,13 +21,15 @@ export const useTokenBalance = (address: string, owner: string) => { const getTokenBalance = async () => { if (provider === undefined) { - setHasError(true); + setErrorMsg( + 'provider is undefined. Please make sure to you the hook within the Web3Context Provider ' + ); setIsLoading(false); return; } try { - const contract = new ethers.Contract(address, ERC20, provider); - const balanceFuture = contract.balanceOf(owner); + const contract = new ethers.Contract(contractAddress, ERC20, provider); + const balanceFuture = contract.balanceOf(ownerAddress); const decimalsFuture = contract.decimals(); const [resolvedBalance, resolvedDecimals] = await Promise.all([ @@ -36,10 +43,10 @@ export const useTokenBalance = (address: string, owner: string) => { setBalance(displayBalance); setIsLoading(false); } catch (e) { - setHasError(true); + setErrorMsg(e); setIsLoading(false); } }; - return [isLoading, balance, hasError]; + return [isLoading, balance, errorMsg]; }; From 99e2bd23ec926267d445bf84aac1816f74885661 Mon Sep 17 00:00:00 2001 From: Alex Plutta Date: Sun, 5 Dec 2021 23:06:18 +0100 Subject: [PATCH 5/7] . use constants in stories . use rinkeby instead of mainnet --- .../src/stories/UseTokenBalance.stories.tsx | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/packages/hooks/src/stories/UseTokenBalance.stories.tsx b/packages/hooks/src/stories/UseTokenBalance.stories.tsx index 62c2f751..68a4efa9 100644 --- a/packages/hooks/src/stories/UseTokenBalance.stories.tsx +++ b/packages/hooks/src/stories/UseTokenBalance.stories.tsx @@ -3,6 +3,8 @@ import React from 'react'; import { Provider, useWallet } from '..'; import { useTokenBalance } from '../hooks/useTokenBalance'; +const SOME_OWNER = '0x6B175474E89094C44Da98b954EedeAC495271d0F'; +const DAI_STABLECOIN_ADDRESS = '0x6B175474E89094C44Da98b954EedeAC495271d0F'; const Default = () => { const { connectWallet, connected } = useWallet(); @@ -20,15 +22,13 @@ const Default = () => { }; storiesOf('useTokenBalance', module).add('Default', () => ( - + )); const BalanceOfDai = () => { - const owner = '0x503828976D22510aad0201ac7EC88293211D23Da'; - const address = '0x6B175474E89094C44Da98b954EedeAC495271d0F'; - const [loading, balance] = useTokenBalance(address, owner); + const [loading, balance] = useTokenBalance(DAI_STABLECOIN_ADDRESS, SOME_OWNER); return ( <> @@ -38,9 +38,7 @@ const BalanceOfDai = () => { }; const UnknownOwner = () => { - const owner = ''; - const address = '0x6B175474E89094C44Da98b954EedeAC495271d0F'; - const [loading, balance, hasError] = useTokenBalance(address, owner); + const [loading, balance, hasError] = useTokenBalance(DAI_STABLECOIN_ADDRESS, ''); return ( <> @@ -50,9 +48,7 @@ const UnknownOwner = () => { }; const UnknownContract = () => { - const owner = '0x503828976D22510aad0201ac7EC88293211D23Da'; - const address = ''; - const [loading, balance, hasError] = useTokenBalance(address, owner); + const [loading, balance, hasError] = useTokenBalance('', SOME_OWNER); return ( <> From 3e5b4547454c14a60e45f110a26c855f8319c91b Mon Sep 17 00:00:00 2001 From: Alex Plutta Date: Mon, 6 Dec 2021 21:06:57 +0100 Subject: [PATCH 6/7] change order of hook's return values --- .../src/hooks/useTokenBalance/useTokenBalance.ts | 16 ++++++++-------- .../src/stories/UseTokenBalance.stories.tsx | 10 +++++----- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/hooks/src/hooks/useTokenBalance/useTokenBalance.ts b/packages/hooks/src/hooks/useTokenBalance/useTokenBalance.ts index 0a7b8290..6eaa5ca2 100644 --- a/packages/hooks/src/hooks/useTokenBalance/useTokenBalance.ts +++ b/packages/hooks/src/hooks/useTokenBalance/useTokenBalance.ts @@ -9,9 +9,9 @@ import ERC20 from './ERC20ABI.json'; */ export const useTokenBalance = (contractAddress: string, ownerAddress: string) => { - const [isLoading, setIsLoading] = React.useState(true); const [balance, setBalance] = React.useState(); - const [errorMsg, setErrorMsg] = React.useState(false); + const [loading, setLoading] = React.useState(true); + const [error, setError] = React.useState(false); const { provider } = useContext(Web3Context); @@ -21,10 +21,10 @@ export const useTokenBalance = (contractAddress: string, ownerAddress: string) = const getTokenBalance = async () => { if (provider === undefined) { - setErrorMsg( + setError( 'provider is undefined. Please make sure to you the hook within the Web3Context Provider ' ); - setIsLoading(false); + setLoading(false); return; } try { @@ -41,12 +41,12 @@ export const useTokenBalance = (contractAddress: string, ownerAddress: string) = const displayBalance = (balanceAsNumber / 10 ** resolvedDecimals).toFixed(3); setBalance(displayBalance); - setIsLoading(false); + setLoading(false); } catch (e) { - setErrorMsg(e); - setIsLoading(false); + setError(e); + setLoading(false); } }; - return [isLoading, balance, errorMsg]; + return [balance, loading, error]; }; diff --git a/packages/hooks/src/stories/UseTokenBalance.stories.tsx b/packages/hooks/src/stories/UseTokenBalance.stories.tsx index 68a4efa9..7bccaea6 100644 --- a/packages/hooks/src/stories/UseTokenBalance.stories.tsx +++ b/packages/hooks/src/stories/UseTokenBalance.stories.tsx @@ -28,7 +28,7 @@ storiesOf('useTokenBalance', module).add('Default', () => ( )); const BalanceOfDai = () => { - const [loading, balance] = useTokenBalance(DAI_STABLECOIN_ADDRESS, SOME_OWNER); + const [balance, loading, error] = useTokenBalance(DAI_STABLECOIN_ADDRESS, SOME_OWNER); return ( <> @@ -38,21 +38,21 @@ const BalanceOfDai = () => { }; const UnknownOwner = () => { - const [loading, balance, hasError] = useTokenBalance(DAI_STABLECOIN_ADDRESS, ''); + const [balance, loading, error] = useTokenBalance(DAI_STABLECOIN_ADDRESS, ''); return ( <> -

{loading ? 'Loading...' : 'Error ' + hasError}

+

{loading ? 'Loading...' : 'Error ' + error}

); }; const UnknownContract = () => { - const [loading, balance, hasError] = useTokenBalance('', SOME_OWNER); + const [balance, loading, error] = useTokenBalance('', SOME_OWNER); return ( <> -

{loading ? 'Loading...' : 'Error ' + hasError}

+

{loading ? 'Loading...' : 'Error ' + error}

); }; From d68c84d710f7c72ddae1df9ac5c0960cb9353fab Mon Sep 17 00:00:00 2001 From: Dhaiwat Pandya Date: Tue, 7 Dec 2021 09:44:46 +0530 Subject: [PATCH 7/7] Refactor and fix useTokenBalance --- .../hooks/useTokenBalance/useTokenBalance.ts | 93 +++++++++---------- .../src/stories/UseTokenBalance.stories.tsx | 66 +++++-------- tsconfig.json | 3 +- 3 files changed, 72 insertions(+), 90 deletions(-) diff --git a/packages/hooks/src/hooks/useTokenBalance/useTokenBalance.ts b/packages/hooks/src/hooks/useTokenBalance/useTokenBalance.ts index 6eaa5ca2..8f3ac16c 100644 --- a/packages/hooks/src/hooks/useTokenBalance/useTokenBalance.ts +++ b/packages/hooks/src/hooks/useTokenBalance/useTokenBalance.ts @@ -1,52 +1,51 @@ -import React, { useContext } from 'react'; import { ethers } from 'ethers'; -import { Web3Context } from '../../Provider'; -import ERC20 from './ERC20ABI.json'; - -/** - * @param contractAddress -> the address of the ERC20 token contract - * @param ownerAddress -> the address of the owner which balance should be fetched - - */ -export const useTokenBalance = (contractAddress: string, ownerAddress: string) => { - const [balance, setBalance] = React.useState(); - const [loading, setLoading] = React.useState(true); - const [error, setError] = React.useState(false); - - const { provider } = useContext(Web3Context); - - React.useEffect(() => { - getTokenBalance(); - }); - - const getTokenBalance = async () => { - if (provider === undefined) { - setError( - 'provider is undefined. Please make sure to you the hook within the Web3Context Provider ' - ); - setLoading(false); - return; - } - try { - const contract = new ethers.Contract(contractAddress, ERC20, provider); - const balanceFuture = contract.balanceOf(ownerAddress); - const decimalsFuture = contract.decimals(); - - const [resolvedBalance, resolvedDecimals] = await Promise.all([ - balanceFuture, - decimalsFuture, - ]); - - const balanceAsNumber = Number.parseInt(resolvedBalance); - const displayBalance = (balanceAsNumber / 10 ** resolvedDecimals).toFixed(3); +import { useContext, useEffect, useState } from 'react'; +import { Web3Context } from '../..'; +import ERC20ABI from './ERC20ABI.json'; +import { BigNumber } from '@ethersproject/bignumber'; + +interface Props { + tokenAddress: string; + accountAddress: string; +} + +export function useTokenBalance({ tokenAddress, accountAddress }: Props) { + const context = useContext(Web3Context); + const provider = context?.provider; + + const [balance, setBalance] = useState(); + const [decimals, setDecimals] = useState(); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(false); + + const getBalance = async () => { + const contract = new ethers.Contract(tokenAddress, ERC20ABI, provider!); + const balance = await contract.balanceOf(accountAddress); + const decimals = await contract.decimals(); + setBalance(balance); + setDecimals(decimals); + }; - setBalance(displayBalance); - setLoading(false); - } catch (e) { - setError(e); + useEffect(() => { + if (tokenAddress && accountAddress && provider) { + setError(false); + setLoading(true); + try { + getBalance(); + } catch (error) { + console.error(error); + setError(true); + } setLoading(false); } + }, [tokenAddress, accountAddress]); + + return { + balance: balance?.toString(), // The balance in wei + loading, + error, + decimals, + formattedBalance: balance && ethers.utils.formatUnits(balance, decimals), // The balance in ethers eg. 0.01 ETH, 20 GTC, etc. + balanceInBigNumber: balance, }; - - return [balance, loading, error]; -}; +} diff --git a/packages/hooks/src/stories/UseTokenBalance.stories.tsx b/packages/hooks/src/stories/UseTokenBalance.stories.tsx index 7bccaea6..29f28fb9 100644 --- a/packages/hooks/src/stories/UseTokenBalance.stories.tsx +++ b/packages/hooks/src/stories/UseTokenBalance.stories.tsx @@ -1,58 +1,40 @@ import { storiesOf } from '@storybook/react'; import React from 'react'; -import { Provider, useWallet } from '..'; -import { useTokenBalance } from '../hooks/useTokenBalance'; +import { Button } from '@chakra-ui/react'; +import { Provider, useTokenBalance, useWallet } from '..'; + +const GTC_ADDRESS = '0xde30da39c46104798bb5aa3fe8b9e0e1f348163f'; -const SOME_OWNER = '0x6B175474E89094C44Da98b954EedeAC495271d0F'; -const DAI_STABLECOIN_ADDRESS = '0x6B175474E89094C44Da98b954EedeAC495271d0F'; const Default = () => { - const { connectWallet, connected } = useWallet(); + const { connection, connectWallet, disconnectWallet, connected } = useWallet(); + const { balance, formattedBalance, loading, error } = useTokenBalance({ + tokenAddress: GTC_ADDRESS, + accountAddress: connection.userAddress!, // you can test using 0x0ED6Cec17F860fb54E21D154b49DAEFd9Ca04106 + }); if (connected) { return ( - <> - - - - +
+ +

{connection.ens || connection.userAddress}

+ {error ? ( +

Error occured while trying to fetch balance.

+ ) : loading ? ( +

Loading...

+ ) : ( +

+ GTC balance: {balance} wei, {formattedBalance} GTC +

+ )} +
); } return ; }; -storiesOf('useTokenBalance', module).add('Default', () => ( - +storiesOf('UseTokenBalance', module).add('Default', () => ( + )); - -const BalanceOfDai = () => { - const [balance, loading, error] = useTokenBalance(DAI_STABLECOIN_ADDRESS, SOME_OWNER); - - return ( - <> -

{loading ? 'Loading...' : balance}

- - ); -}; - -const UnknownOwner = () => { - const [balance, loading, error] = useTokenBalance(DAI_STABLECOIN_ADDRESS, ''); - - return ( - <> -

{loading ? 'Loading...' : 'Error ' + error}

- - ); -}; - -const UnknownContract = () => { - const [balance, loading, error] = useTokenBalance('', SOME_OWNER); - - return ( - <> -

{loading ? 'Loading...' : 'Error ' + error}

- - ); -}; diff --git a/tsconfig.json b/tsconfig.json index af81a7a3..253e8c62 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -17,7 +17,8 @@ "pretty": true, "sourceMap": true, "strict": true, - "target": "es5" + "target": "es5", + "resolveJsonModule": true }, "exclude": ["node_modules"], "include": ["./packages/*/src"]