Feat/use token balance

packages/hooks/src/hooks/useTokenBalance/ERC20ABI.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"
+  }
+]

packages/hooks/src/hooks/useTokenBalance/index.ts

@@ -0,0 +1 @@
+export { useTokenBalance } from './useTokenBalance';

packages/hooks/src/hooks/useTokenBalance/useTokenBalance.ts

@@ -0,0 +1,51 @@
+import { ethers } from 'ethers';
+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<BigNumber>();
+  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);
+  };
+
+  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,
+  };
+}

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';

packages/hooks/src/stories/UseTokenBalance.stories.tsx

@@ -0,0 +1,40 @@
+import { storiesOf } from '@storybook/react';
+import React from 'react';
+import { Button } from '@chakra-ui/react';
+import { Provider, useTokenBalance, useWallet } from '..';
+
+const GTC_ADDRESS = '0xde30da39c46104798bb5aa3fe8b9e0e1f348163f';
+
+const Default = () => {
+  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 (
+      <div>
+        <Button onClick={disconnectWallet}>Disconnect wallet</Button>
+        <p>{connection.ens || connection.userAddress}</p>
+        {error ? (
+          <p>Error occured while trying to fetch balance.</p>
+        ) : loading ? (
+          <p>Loading...</p>
+        ) : (
+          <p>
+            GTC balance: {balance} wei, {formattedBalance} GTC
+          </p>
+        )}
+      </div>
+    );
+  }
+
+  return <button onClick={connectWallet}>Connect Wallet</button>;
+};
+
+storiesOf('UseTokenBalance', module).add('Default', () => (
+  <Provider network='mainnet'>
+    <Default />
+  </Provider>
+));

tsconfig.json

@@ -17,7 +17,8 @@
     "pretty": true,
     "sourceMap": true,
     "strict": true,
-    "target": "es5"
+    "target": "es5",
+    "resolveJsonModule": true
   },
   "exclude": ["node_modules"],
   "include": ["./packages/*/src"]