Feat/use token balance

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"
+  }
+]

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

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

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

@@ -0,0 +1,45 @@
+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 | string>(null);
+  const [hasError, setHasError] = React.useState(false);
+
+  const { provider } = useContext(Web3Context);
+
+  React.useEffect(() => {
+    getTokenBalance();
+  });
+
+  const getTokenBalance = async () => {
+    if (provider === undefined) {
+      setHasError(true);
+      setIsLoading(false);
+      return;
+    }
+    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, hasError];
+};

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

@@ -0,0 +1,62 @@
+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 (
+      <>
+        <BalanceOfDai />
+        <UnknownOwner />
+        <UnknownContract />
+      </>
+    );
+  }
+
+  return <button onClick={connectWallet}>Connect Wallet</button>;
+};
+
+storiesOf('useTokenBalance', module).add('Default', () => (
+  <Provider network='mainnet'>
+    <Default />
+  </Provider>
+));
+
+const BalanceOfDai = () => {
+  const owner = '0x503828976D22510aad0201ac7EC88293211D23Da';
+  const address = '0x6B175474E89094C44Da98b954EedeAC495271d0F';
+  const [loading, balance] = useTokenBalance(address, owner);
+
+  return (
+    <>
+      <p>{loading ? 'Loading...' : balance}</p>
+    </>
+  );
+};
+
+const UnknownOwner = () => {
+  const owner = '';
+  const address = '0x6B175474E89094C44Da98b954EedeAC495271d0F';
+  const [loading, balance, hasError] = useTokenBalance(address, owner);
+
+  return (
+    <>
+      <p>{loading ? 'Loading...' : 'Error ' + hasError}</p>
+    </>
+  );
+};
+
+const UnknownContract = () => {
+  const owner = '0x503828976D22510aad0201ac7EC88293211D23Da';
+  const address = '';
+  const [loading, balance, hasError] = useTokenBalance(address, owner);
+
+  return (
+    <>
+      <p>{loading ? 'Loading...' : 'Error ' + hasError}</p>
+    </>
+  );
+};