From bc82fd3073496b8bab1ec3737b25bf96d6662f2e Mon Sep 17 00:00:00 2001 From: Matheus Alencar Date: Wed, 5 May 2021 01:56:46 -0300 Subject: [PATCH] fix: button display --- src/abis/{erc20.json => erc20.ovm.json} | 103 ++++++++++++++++-- ...{metaTxProxy.json => metaTxProxy.ovm.json} | 41 ++++++- src/app.tsx | 53 ++++++--- src/hooks/eager-connect.tsx | 21 ++-- src/hooks/inactive-listener.tsx | 10 +- 5 files changed, 191 insertions(+), 37 deletions(-) rename src/abis/{erc20.json => erc20.ovm.json} (63%) rename src/abis/{metaTxProxy.json => metaTxProxy.ovm.json} (90%) diff --git a/src/abis/erc20.json b/src/abis/erc20.ovm.json similarity index 63% rename from src/abis/erc20.json rename to src/abis/erc20.ovm.json index 5044102..cf4ca6f 100644 --- a/src/abis/erc20.json +++ b/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,7 +122,7 @@ }, { "internalType": "uint256", - "name": "_value", + "name": "_amount", "type": "uint256" } ], @@ -90,7 +130,7 @@ "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,7 +210,7 @@ }, { "internalType": "uint256", - "name": "_value", + "name": "_amount", "type": "uint256" } ], @@ -133,7 +218,7 @@ "outputs": [ { "internalType": "bool", - "name": "success", + "name": "", "type": "bool" } ], @@ -154,7 +239,7 @@ }, { "internalType": "uint256", - "name": "_value", + "name": "_amount", "type": "uint256" } ], @@ -162,11 +247,11 @@ "outputs": [ { "internalType": "bool", - "name": "success", + "name": "", "type": "bool" } ], "stateMutability": "nonpayable", "type": "function" } -] +] \ No newline at end of file diff --git a/src/abis/metaTxProxy.json b/src/abis/metaTxProxy.ovm.json similarity index 90% rename from src/abis/metaTxProxy.json rename to src/abis/metaTxProxy.ovm.json index 8180caa..a5ab164 100644 --- a/src/abis/metaTxProxy.json +++ b/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 index 4054fa8..d69f562 100644 --- 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(); + 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 => { /> - {active ? ( - library && - account && ( - - ) - ) : ( - )} + {brcodePreview && + (active ? ( + library && + account && ( + + ) + ) : ( + + ))} diff --git a/src/hooks/eager-connect.tsx b/src/hooks/eager-connect.tsx index 14a8de8..51c3ddf 100644 --- 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 index 19da6b5..3984539 100644 --- 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); };