Merge pull request #254 from yearn/feat/veyfi-gauges-merged-vote-tab

feat: Migrate vote tab to wagmi
yearn · Jun 27, 2023 · 4afa420 · 4afa420
2 parents 5d7bb3b + bc1da6e
commit 4afa420
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 22 deletions.
diff --git a/apps/common/utils/toWagmiProvider.tsx b/apps/common/utils/toWagmiProvider.tsx
@@ -48,7 +48,7 @@ export function assertAddress(addr: string | TAddress | undefined, name?: string
 	assert(!isEth(addr), `${name || 'Address'} is 0xE`);
 }
 
-export function assertAddresses(addresses: string[] | TAddress[] | undefined[], name?: string): asserts addresses is TAddress[] {
+export function assertAddresses(addresses: (string | TAddress | undefined)[], name?: string): asserts addresses is TAddress[] {
 	addresses.forEach((addr): void => assertAddress(addr, name));
 }
 

diff --git a/apps/veyfi/components/VoteTab.tsx b/apps/veyfi/components/VoteTab.tsx
@@ -1,34 +1,40 @@
-import {useState} from 'react';
+import {useCallback, useState} from 'react';
 import Link from 'next/link';
-import {useTransaction} from '@veYFI/hooks/useTransaction';
-import * as VotingEscrowActions from '@veYFI/utils/actions/votingEscrow';
+import {delegateVote} from '@veYFI/utils/actions/votingEscrow';
+import {SNAPSHOT_DELEGATE_REGISTRY_ADDRESS} from '@veYFI/utils/constants';
 import {validateAddress, validateNetwork} from '@veYFI/utils/validations';
 import {Button} from '@yearn-finance/web-lib/components/Button';
 import {useWeb3} from '@yearn-finance/web-lib/contexts/useWeb3';
 import {toAddress} from '@yearn-finance/web-lib/utils/address';
+import {defaultTxStatus} from '@yearn-finance/web-lib/utils/web3/transaction';
 import {Input} from '@common/components/Input';
 
-import type {ethers} from 'ethers';
 import type {ReactElement} from 'react';
 import type {TAddress} from '@yearn-finance/web-lib/types';
 
 function VoteTab(): ReactElement {
 	const [delegateAddress, set_delegateAddress] = useState('');
 	const {provider, address, isActive, chainID} = useWeb3();
-	const [delegateVote, delegateVoteStatus] = useTransaction(VotingEscrowActions.delegateVote);
 
-	const web3Provider = provider as ethers.providers.Web3Provider;
+	const [delegateVoteStatus, set_delegateVoteStatus] = useState(defaultTxStatus);
+
 	const userAddress = address as TAddress;
 
 	const {isValid: isValidNetwork} = validateNetwork({supportedNetwork: 1, walletNetwork: chainID});
 	const {isValid: isValidDelegateAddress, error: delegateAddressError} = validateAddress({address: delegateAddress});
 
-	const executeDelegateVote = (): void => {
+	const handleExecuteDelegateVote = useCallback(async (): Promise<void> => {
 		if (!userAddress || !isValidDelegateAddress) {
 			return;
 		}
-		delegateVote(web3Provider, userAddress, toAddress(delegateAddress));
-	};
+
+		await delegateVote({
+			connector: provider,
+			contractAddress: SNAPSHOT_DELEGATE_REGISTRY_ADDRESS,
+			statusHandler: set_delegateVoteStatus,
+			delegateAddress: toAddress(delegateAddress)
+		});
+	}, [delegateAddress, isValidDelegateAddress, provider, userAddress]);
 
 	return (
 		<div className={'grid grid-cols-1 gap-6 md:grid-cols-2 md:gap-16'}>
@@ -66,9 +72,9 @@ function VoteTab(): ReactElement {
 					/>
 					<Button 
 						className={'w-full md:mt-7'}
-						onClick={executeDelegateVote}
-						isBusy={delegateVoteStatus.loading}
-						disabled={!isActive || !isValidNetwork || !isValidDelegateAddress || delegateVoteStatus.loading}
+						onClick={handleExecuteDelegateVote}
+						isBusy={delegateVoteStatus.pending}
+						disabled={!isActive || !isValidNetwork || !isValidDelegateAddress || delegateVoteStatus.pending}
 					>
 						{'Submit'}
 					</Button>

diff --git a/apps/veyfi/utils/actions/votingEscrow.ts b/apps/veyfi/utils/actions/votingEscrow.ts
@@ -1,13 +1,15 @@
 import {ethers} from 'ethers';
 import {handleTx} from '@yearn-finance/web-lib/utils/web3/transaction';
+import {assertAddresses, handleTx as handleTxWagmi} from '@common/utils/toWagmiProvider';
 
 import SNAPSHOT_DELEGATE_REGISTRY_ABI from '../abi/SnapshotDelegateRegistry.abi';
 import VEYFI_ABI from '../abi/veYFI.abi';
-import {SNAPSHOT_DELEGATE_REGISTRY_ADDRESS, YEARN_SNAPSHOT_SPACE} from '../constants';
+import {YEARN_SNAPSHOT_SPACE} from '../constants';
 
 import type {TAddress} from '@yearn-finance/web-lib/types';
 import type {TSeconds} from '@yearn-finance/web-lib/utils/time';
 import type {TTxResponse} from '@yearn-finance/web-lib/utils/web3/transaction';
+import type {TWriteTransaction} from '@common/utils/toWagmiProvider';
 
 export async function approveLock(
 	provider: ethers.providers.JsonRpcProvider,
@@ -79,12 +81,14 @@ export async function withdrawLocked(
 	return await handleTx(votingEscrowContract.withdraw());
 }
 
-export async function delegateVote(
-	provider: ethers.providers.Web3Provider,
-	accountAddress: TAddress,
-	delegateAddress: TAddress
-): Promise<TTxResponse> {
-	const signer = provider.getSigner(accountAddress);
-	const delegateRegistryContract = new ethers.Contract(SNAPSHOT_DELEGATE_REGISTRY_ADDRESS, SNAPSHOT_DELEGATE_REGISTRY_ABI, signer);
-	return await handleTx(delegateRegistryContract.setDelegate(ethers.utils.formatBytes32String(YEARN_SNAPSHOT_SPACE), delegateAddress));
+type TDelegateVote = TWriteTransaction & {delegateAddress: TAddress};
+export async function delegateVote(props: TDelegateVote): Promise<TTxResponse> {
+	assertAddresses([props.delegateAddress, props.contractAddress]);
+
+	return await handleTxWagmi(props, {
+		address: props.contractAddress,
+		abi: SNAPSHOT_DELEGATE_REGISTRY_ABI,
+		functionName: 'setDelegate',
+		args: [ethers.utils.formatBytes32String(YEARN_SNAPSHOT_SPACE), props.delegateAddress]
+	});
 }