Update useApproval hook to take address instead of ethers contract ob…

…ject
decentdao · May 6, 2024 · 718fd50 · 718fd50
1 parent c9d9cbe
commit 718fd50
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 24 deletions.
diff --git a/src/components/ui/modals/UnwrapToken.tsx b/src/components/ui/modals/UnwrapToken.tsx
@@ -8,7 +8,6 @@ import { useAccount, useWalletClient } from 'wagmi';
 import * as Yup from 'yup';
 import VotesERC20WrapperAbi from '../../../assets/abi/VotesERC20Wrapper';
 import { useERC20LinearToken } from '../../../hooks/DAO/loaders/governance/useERC20LinearToken';
-import useSafeContracts from '../../../hooks/safe/useSafeContracts';
 import useApproval from '../../../hooks/utils/useApproval';
 import { useFormHelpers } from '../../../hooks/utils/useFormHelpers';
 import { useTransaction } from '../../../hooks/utils/useTransaction';
@@ -21,7 +20,6 @@ export function UnwrapToken({ close }: { close: () => void }) {
   const { governance, governanceContracts } = useFractal();
   const azoriusGovernance = governance as AzoriusGovernance;
   const { address: account } = useAccount();
-  const baseContracts = useSafeContracts();
   const { loadERC20TokenAccountData } = useERC20LinearToken({ onMount: false });
 
   const [, pending, contractCallViem] = useTransaction();
@@ -30,9 +28,7 @@ export function UnwrapToken({ close }: { close: () => void }) {
     approveTransaction,
     pending: approvalPending,
   } = useApproval(
-    baseContracts?.votesTokenMasterCopyContract?.asSigner.attach(
-      governanceContracts.underlyingTokenAddress!,
-    ),
+    governanceContracts.underlyingTokenAddress,
     azoriusGovernance.votesToken?.address,
   );
 

diff --git a/src/components/ui/modals/WrapToken.tsx b/src/components/ui/modals/WrapToken.tsx
@@ -9,7 +9,6 @@ import * as Yup from 'yup';
 import VotesERC20WrapperAbi from '../../../assets/abi/VotesERC20Wrapper';
 import { logError } from '../../../helpers/errorLogging';
 import { useERC20LinearToken } from '../../../hooks/DAO/loaders/governance/useERC20LinearToken';
-import useSafeContracts from '../../../hooks/safe/useSafeContracts';
 import useApproval from '../../../hooks/utils/useApproval';
 import { useFormHelpers } from '../../../hooks/utils/useFormHelpers';
 import { useTransaction } from '../../../hooks/utils/useTransaction';
@@ -30,7 +29,6 @@ export function WrapToken({ close }: { close: () => void }) {
     value: '',
     bigintValue: 0n,
   });
-  const baseContracts = useSafeContracts();
 
   const { loadERC20TokenAccountData } = useERC20LinearToken({ onMount: false });
   const [, pending, contractCallViem] = useTransaction();
@@ -39,9 +37,7 @@ export function WrapToken({ close }: { close: () => void }) {
     approveTransaction,
     pending: approvalPending,
   } = useApproval(
-    baseContracts?.votesTokenMasterCopyContract?.asSigner.attach(
-      governanceContracts.underlyingTokenAddress!,
-    ),
+    governanceContracts.underlyingTokenAddress,
     azoriusGovernance.votesToken?.address,
     userBalance.bigintValue,
   );
@@ -89,8 +85,7 @@ export function WrapToken({ close }: { close: () => void }) {
   const handleFormSubmit = useCallback(
     (amount: BigIntValuePair) => {
       const { votesTokenContractAddress } = governanceContracts;
-      if (!votesTokenContractAddress || !signer || !account || !baseContracts || !walletClient)
-        return;
+      if (!votesTokenContractAddress || !signer || !account || !walletClient) return;
 
       const wrapperTokenContract = getContract({
         abi: VotesERC20WrapperAbi,
@@ -119,7 +114,6 @@ export function WrapToken({ close }: { close: () => void }) {
       close,
       t,
       loadERC20TokenAccountData,
-      baseContracts,
       walletClient,
     ],
   );

diff --git a/src/hooks/utils/useApproval.tsx b/src/hooks/utils/useApproval.tsx
@@ -1,37 +1,50 @@
-import { VotesERC20 } from '@fractal-framework/fractal-contracts';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { maxUint256 } from 'viem';
-import { useAccount } from 'wagmi';
+import { getAddress, getContract, maxUint256 } from 'viem';
+import { useAccount, useWalletClient } from 'wagmi';
+import VotesERC20Abi from '../../assets/abi/VotesERC20';
 import { useTransaction } from './useTransaction';
 
-const useApproval = (tokenContract?: VotesERC20, spenderAddress?: string, userBalance?: bigint) => {
+const useApproval = (tokenAddress?: string, spenderAddress?: string, userBalance?: bigint) => {
   const { address: account } = useAccount();
   const [allowance, setAllowance] = useState(0n);
   const [approved, setApproved] = useState(false);
-  const [contractCall, pending] = useTransaction();
+  const [, pending, contractCallViem] = useTransaction();
   const { t } = useTranslation('treasury');
+  const { data: walletClient } = useWalletClient();
+
+  const tokenContract = useMemo(() => {
+    if (!walletClient || !tokenAddress) {
+      return;
+    }
+
+    return getContract({
+      abi: VotesERC20Abi,
+      address: getAddress(tokenAddress),
+      client: walletClient,
+    });
+  }, [tokenAddress, walletClient]);
 
   const fetchAllowance = useCallback(async () => {
-    if (!tokenContract || !account || !spenderAddress) return;
+    if (!account || !spenderAddress || !tokenContract) return;
 
-    const userAllowance = (await tokenContract.allowance(account, spenderAddress)).toBigInt();
+    const userAllowance = await tokenContract.read.allowance([account, getAddress(spenderAddress)]);
     setAllowance(userAllowance);
   }, [account, tokenContract, spenderAddress]);
 
   const approveTransaction = useCallback(async () => {
     if (!tokenContract || !account || !spenderAddress) return;
 
-    contractCall({
-      contractFn: () => tokenContract.approve(spenderAddress, maxUint256),
+    contractCallViem({
+      contractFn: () => tokenContract.write.approve([getAddress(spenderAddress), maxUint256]),
       pendingMessage: t('approvalPendingMessage'),
       failedMessage: t('approvalFailedMessage'),
       successMessage: t('approvalSuccessMessage'),
       successCallback: () => {
         setApproved(true);
       },
     });
-  }, [account, contractCall, tokenContract, spenderAddress, t]);
+  }, [account, contractCallViem, tokenContract, spenderAddress, t]);
 
   useEffect(() => {
     fetchAllowance();