fix: button display

eccentricexit · May 5, 2021 · bc82fd3 · bc82fd3
1 parent 859e400
commit bc82fd3
Show file tree

Hide file tree

Showing 5 changed files with 191 additions and 37 deletions.
diff --git a/src/abis/erc20.json → src/abis/erc20.ovm.json b/src/abis/erc20.json → src/abis/erc20.ovm.json
@@ -1,4 +1,20 @@
 [
+  {
+    "inputs": [
+      {
+        "internalType": "uint256",
+        "name": "_initialSupply",
+        "type": "uint256"
+      },
+      {
+        "internalType": "string",
+        "name": "_name",
+        "type": "string"
+      }
+    ],
+    "stateMutability": "nonpayable",
+    "type": "constructor"
+  },
   {
     "anonymous": false,
     "inputs": [
@@ -66,7 +82,31 @@
     "outputs": [
       {
         "internalType": "uint256",
-        "name": "remaining",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "",
+        "type": "address"
+      },
+      {
+        "internalType": "address",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "name": "allowances",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
         "type": "uint256"
       }
     ],
@@ -82,15 +122,15 @@
       },
       {
         "internalType": "uint256",
-        "name": "_value",
+        "name": "_amount",
         "type": "uint256"
       }
     ],
     "name": "approve",
     "outputs": [
       {
         "internalType": "bool",
-        "name": "success",
+        "name": "",
         "type": "bool"
       }
     ],
@@ -109,7 +149,52 @@
     "outputs": [
       {
         "internalType": "uint256",
-        "name": "balance",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "name": "balances",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
+        "type": "uint256"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "name",
+    "outputs": [
+      {
+        "internalType": "string",
+        "name": "",
+        "type": "string"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "inputs": [],
+    "name": "totalSupply",
+    "outputs": [
+      {
+        "internalType": "uint256",
+        "name": "",
         "type": "uint256"
       }
     ],
@@ -125,15 +210,15 @@
       },
       {
         "internalType": "uint256",
-        "name": "_value",
+        "name": "_amount",
         "type": "uint256"
       }
     ],
     "name": "transfer",
     "outputs": [
       {
         "internalType": "bool",
-        "name": "success",
+        "name": "",
         "type": "bool"
       }
     ],
@@ -154,19 +239,19 @@
       },
       {
         "internalType": "uint256",
-        "name": "_value",
+        "name": "_amount",
         "type": "uint256"
       }
     ],
     "name": "transferFrom",
     "outputs": [
       {
         "internalType": "bool",
-        "name": "success",
+        "name": "",
         "type": "bool"
       }
     ],
     "stateMutability": "nonpayable",
     "type": "function"
   }
-]
+]
diff --git a/src/abis/metaTxProxy.json → src/abis/metaTxProxy.ovm.json b/src/abis/metaTxProxy.json → src/abis/metaTxProxy.ovm.json
@@ -149,6 +149,32 @@
     "stateMutability": "view",
     "type": "function"
   },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "_newGovernor",
+        "type": "address"
+      }
+    ],
+    "name": "changeGovernor",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "_newRelayer",
+        "type": "address"
+      }
+    ],
+    "name": "changeRelayer",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
   {
     "inputs": [],
     "name": "domainSeparatorV4",
@@ -209,7 +235,7 @@
     ],
     "name": "execute",
     "outputs": [],
-    "stateMutability": "payable",
+    "stateMutability": "nonpayable",
     "type": "function"
   },
   {
@@ -263,6 +289,19 @@
     "stateMutability": "view",
     "type": "function"
   },
+  {
+    "inputs": [],
+    "name": "relayer",
+    "outputs": [
+      {
+        "internalType": "address",
+        "name": "",
+        "type": "address"
+      }
+    ],
+    "stateMutability": "view",
+    "type": "function"
+  },
   {
     "inputs": [
       {

diff --git a/src/app.tsx b/src/app.tsx
@@ -2,8 +2,8 @@ import { Input, Button, Stack, Card, Flex, Alert, Text } from 'bumbag';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { ethers } from 'ethers';
 import { useDebounce, useWallet } from './hooks';
-import erc20Abi from './abis/erc20.json';
-import metaTxProxyAbi from './abis/metaTxProxy.json';
+import erc20Abi from './abis/erc20.ovm.json';
+import metaTxProxyAbi from './abis/metaTxProxy.ovm.json';
 import { buildRequest, buildTypedData } from './utils';
 import { UnsupportedChainIdError } from '@web3-react/core';
 
@@ -44,7 +44,9 @@ const App = (): JSX.Element => {
   );
 
   const [brcode, setBrcode] = useState('');
-  const [brcodePreview, setBrcodePreview] = useState();
+  const [brcodePreview, setBrcodePreview] = useState<
+    { tokenAmountRequired: string } | undefined
+  >();
   const onBrcodeReceived = useCallback((event) => {
     setBrcode(event.target.value || '');
   }, []);
@@ -63,6 +65,25 @@ const App = (): JSX.Element => {
     })();
   }, [debouncedBrcode]);
 
+  const [allowance, setAllowance] = useState<ethers.BigNumber | undefined>();
+  useEffect(() => {
+    (async () => {
+      if (!account || !erc20 || !metaTxProxy) return;
+
+      setAllowance(await erc20.allowances(account, metaTxProxy.address));
+    })();
+  }, [account, erc20, metaTxProxy]);
+  const allowanceEnough = useMemo(() => {
+    if (!allowance || !brcodePreview) return false;
+    return allowance.gte(
+      ethers.BigNumber.from(brcodePreview.tokenAmountRequired)
+    );
+  }, [allowance, brcodePreview]);
+  const increaseAllowance = useCallback(async () => {
+    if (!erc20 || !brcodePreview || !metaTxProxy) return;
+    erc20.approve(metaTxProxy.address, brcodePreview.tokenAmountRequired);
+  }, [brcodePreview, erc20, metaTxProxy]);
+
   const generatePixInvoice = useCallback(async () => {
     try {
       const {
@@ -166,18 +187,24 @@ const App = (): JSX.Element => {
           />
           <Flex alignX="right">
             <Button onClick={generatePixInvoice}>Generate Pix Invoice</Button>
-            {active ? (
-              library &&
-              account && (
-                <Button palette="primary" onClick={onRequestPay}>
-                  Pay
-                </Button>
-              )
-            ) : (
-              <Button palette="primary" onClick={onConnectWallet}>
-                Connect
+            {allowance && brcodePreview && !allowanceEnough && (
+              <Button palette="primary" onClick={increaseAllowance}>
+                Unlock Token
               </Button>
             )}
+            {brcodePreview &&
+              (active ? (
+                library &&
+                account && (
+                  <Button palette="primary" onClick={onRequestPay}>
+                    Pay
+                  </Button>
+                )
+              ) : (
+                <Button palette="primary" onClick={onConnectWallet}>
+                  Connect
+                </Button>
+              ))}
           </Flex>
         </Stack>
       </Card>

diff --git a/src/hooks/eager-connect.tsx b/src/hooks/eager-connect.tsx
@@ -2,22 +2,25 @@ import { useState, useEffect } from 'react';
 import { useWeb3React } from '@web3-react/core';
 import { injected } from '../connectors';
 
-export default function useEagerConnect(): boolean {
+export default function useEagerConnect() {
   const { activate, active } = useWeb3React();
+
   const [tried, setTried] = useState(false);
 
   useEffect(() => {
     (async () => {
-      if (tried) return;
-      try {
-        if (await injected.isAuthorized()) activate(injected, undefined, false);
-      } catch {
-        setTried(true);
-      }
+      const isAuthorized = await injected.isAuthorized();
+      if (isAuthorized)
+        activate(injected, undefined, true).catch(() => {
+          setTried(true);
+        });
+      else setTried(true);
     })();
-  }, [activate, tried]);
 
-  // If the connection worked, wait until we get confirmation of that to flip the flag.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // intentionally only running on mount (make sure it's only mounted once :))
+
+  // if the connection worked, wait until we get confirmation of that to flip the flag
   useEffect(() => {
     if (!tried && active) setTried(true);
   }, [tried, active]);

diff --git a/src/hooks/inactive-listener.tsx b/src/hooks/inactive-listener.tsx
@@ -2,26 +2,26 @@ import { useEffect } from 'react';
 import { useWeb3React } from '@web3-react/core';
 import { injected } from '../connectors';
 
-export default function useInactiveListener(suppress = false): void {
+export default function useInactiveListener(suppress = false) {
   const { active, error, activate } = useWeb3React();
 
   useEffect(() => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const { ethereum } = window as any;
     if (ethereum && ethereum.on && !active && !error && !suppress) {
-      const handleConnect = (): void => {
+      const handleConnect = () => {
         console.log("Handling 'connect' event");
         activate(injected);
       };
-      const handleChainChanged = (chainId: string | number): void => {
+      const handleChainChanged = (chainId: string | number) => {
         console.log("Handling 'chainChanged' event with payload", chainId);
         activate(injected);
       };
-      const handleAccountsChanged = (accounts: string[]): void => {
+      const handleAccountsChanged = (accounts: string[]) => {
         console.log("Handling 'accountsChanged' event with payload", accounts);
         if (accounts.length > 0) activate(injected);
       };
-      const handleNetworkChanged = (networkId: string | number): void => {
+      const handleNetworkChanged = (networkId: string | number) => {
         console.log("Handling 'networkChanged' event with payload", networkId);
         activate(injected);
       };