Merge pull request #16 from subsquid/develop

release
subsquid · May 20, 2024 · cc19824 · cc19824
2 parents b641b25 + 304d93f
commit cc19824
Show file tree

Hide file tree

Showing 27 changed files with 1,755 additions and 1,438 deletions.
diff --git a/package.json b/package.json
@@ -24,9 +24,9 @@
     "@mui/icons-material": "^5.15.14",
     "@mui/lab": "^5.0.0-alpha.169",
     "@mui/material": "^5.15.14",
-    "@rainbow-me/rainbowkit": "^1.3.6",
+    "@rainbow-me/rainbowkit": "^2.0.8",
     "@sentry/react": "^7.108.0",
-    "@tanstack/react-query": "^5.28.9",
+    "@tanstack/react-query": "^5.37.1",
     "@types/ms": "^0.7.34",
     "axios": "^1.6.8",
     "base58-universal": "^2.0.0",
@@ -43,6 +43,7 @@
     "material-ui-popup-state": "^5.1.0",
     "notistack": "^3.0.1",
     "pretty-bytes": "^6.1.1",
+    "qs": "^6.12.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.3",
@@ -51,8 +52,8 @@
     "recharts": "^2.12.3",
     "use-element-position": "^1.0.13",
     "use-local-storage-state": "^19.2.0",
-    "viem": "^1.21.1",
-    "wagmi": "^1.4.13",
+    "viem": "^2.10.9",
+    "wagmi": "^2.9.2",
     "yup": "^1.4.0"
   },
   "devDependencies": {

diff --git a/src/App.tsx b/src/App.tsx
@@ -5,11 +5,11 @@ import { RainbowKitProvider } from '@rainbow-me/rainbowkit';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { SnackbarProvider } from 'notistack';
 import { BrowserRouter } from 'react-router-dom';
-import { WagmiConfig } from 'wagmi';
+import { WagmiProvider } from 'wagmi';
 
 import { queryClient } from '@api/client';
 import { Alert } from '@components/Alert';
-import { chains, wagmiConfig } from '@network/config';
+import { wagmiConfig } from '@network/config';
 
 import { AppRoutes } from './AppRoutes';
 import { useCreateTheme, useThemeState } from './theme';
@@ -19,10 +19,10 @@ function App() {
   const theme = useCreateTheme(themeName);
 
   return (
-    <WagmiConfig config={wagmiConfig}>
+    <WagmiProvider config={wagmiConfig}>
       <QueryClientProvider client={queryClient}>
         <ThemeProvider theme={theme}>
-          <RainbowKitProvider modalSize="compact" chains={chains}>
+          <RainbowKitProvider modalSize="compact">
             <SnackbarProvider
               hideIconVariant
               preventDuplicate
@@ -40,7 +40,7 @@ function App() {
           </RainbowKitProvider>
         </ThemeProvider>
       </QueryClientProvider>
-    </WagmiConfig>
+    </WagmiProvider>
   );
 }
 

diff --git a/src/api/contracts/claim.ts b/src/api/contracts/claim.ts
@@ -1,7 +1,8 @@
 import { useState } from 'react';
 
 import { encodeFunctionData } from 'viem';
-import { useContractWrite, usePublicClient, useWalletClient } from 'wagmi';
+import { waitForTransactionReceipt } from 'viem/actions';
+import { useWriteContract, useClient } from 'wagmi';
 
 import { REWARD_TREASURY_CONTRACT_ABI } from '@api/contracts/reaward-treasury.abi';
 import { errorMessage, TxResult, WriteContractRes } from '@api/contracts/utils';
@@ -17,16 +18,15 @@ export type ClaimRequest = {
 
 function useClaimFromWallet() {
   const contracts = useContracts();
-  const { writeAsync } = useContractWrite({
-    address: contracts.REWARD_TREASURY,
-    abi: REWARD_TREASURY_CONTRACT_ABI,
-    functionName: 'claimFor',
-  });
+  const { writeContractAsync } = useWriteContract({});
 
   return async ({ wallet }: ClaimRequest): Promise<TxResult> => {
     try {
       return {
-        tx: await writeAsync({
+        tx: await writeContractAsync({
+          address: contracts.REWARD_TREASURY,
+          abi: REWARD_TREASURY_CONTRACT_ABI,
+          functionName: 'claimFor',
           args: [contracts.REWARD_DISTRIBUTION, wallet.id as `0x${string}`],
         }),
       };
@@ -38,9 +38,8 @@ function useClaimFromWallet() {
 
 function useClaimFromVestingContract() {
   const contracts = useContracts();
-  const publicClient = usePublicClient();
-  const { data: walletClient } = useWalletClient();
   const { address: account } = useAccount();
+  const { writeContractAsync } = useWriteContract({});
 
   return async ({ wallet }: ClaimRequest): Promise<TxResult> => {
     try {
@@ -50,28 +49,23 @@ function useClaimFromVestingContract() {
         args: [contracts.REWARD_DISTRIBUTION, account as `0x${string}`],
       });
 
-      const { request } = await publicClient.simulateContract({
-        account,
-        address: wallet.id as `0x${string}`,
-        abi: VESTING_CONTRACT_ABI,
-        functionName: 'execute',
-        args: [contracts.REWARD_TREASURY, data],
-      });
-
-      const tx = await walletClient?.writeContract(request);
-      if (!tx) {
-        return { error: 'unknown error' };
-      }
-
-      return { tx: { hash: tx } };
-    } catch (e: any) {
+      return {
+        tx: await writeContractAsync({
+          account,
+          address: wallet.id as `0x${string}`,
+          abi: VESTING_CONTRACT_ABI,
+          functionName: 'execute',
+          args: [contracts.REWARD_TREASURY, data],
+        }),
+      };
+    } catch (e: unknown) {
       return { error: errorMessage(e) };
     }
   };
 }
 
 export function useClaim() {
-  const client = usePublicClient();
+  const client = useClient();
   const { setWaitHeight } = useSquidNetworkHeightHooks();
   const [isLoading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -94,7 +88,7 @@ export function useClaim() {
       return { success: false, failedReason: res.error };
     }
 
-    const receipt = await client.waitForTransactionReceipt({ hash: res.tx.hash });
+    const receipt = await waitForTransactionReceipt(client!, { hash: res.tx });
     setWaitHeight(receipt.blockNumber, []);
 
     setLoading(false);

diff --git a/src/api/contracts/gateway-registration/useRegisterGateway.ts b/src/api/contracts/gateway-registration/useRegisterGateway.ts
@@ -2,7 +2,7 @@ import { useState } from 'react';
 
 import { logger } from '@logger';
 import { encodeFunctionData } from 'viem';
-import { useContractWrite, usePublicClient, useWalletClient } from 'wagmi';
+import { usePublicClient, useWriteContract } from 'wagmi';
 
 import { AccountType } from '@api/subsquid-network-squid';
 import { useSquidNetworkHeightHooks } from '@hooks/useSquidNetworkHeightHooks.ts';
@@ -25,17 +25,20 @@ export interface RegisterGatewayRequest extends GetawayMetadata {
 
 function useRegisterGatewayFromWallet() {
   const contracts = useContracts();
-  const { writeAsync } = useContractWrite({
-    address: contracts.GATEWAY_REGISTRATION,
-    abi: GATEWAY_REGISTRATION_CONTRACT_ABI,
-    functionName: 'register',
-  });
+  const { writeContractAsync } = useWriteContract({});
 
   return async ({ peerId, ...rest }: RegisterGatewayRequest): Promise<TxResult> => {
     logger.debug(`registering gateway via worker contract...`);
 
     try {
-      return { tx: await writeAsync({ args: [peerIdToHex(peerId), encodeGatewayMetadata(rest)] }) };
+      return {
+        tx: await writeContractAsync({
+          address: contracts.GATEWAY_REGISTRATION,
+          abi: GATEWAY_REGISTRATION_CONTRACT_ABI,
+          functionName: 'register',
+          args: [peerIdToHex(peerId), encodeGatewayMetadata(rest)],
+        }),
+      };
     } catch (e: unknown) {
       return {
         error: errorMessage(e),
@@ -46,9 +49,8 @@ function useRegisterGatewayFromWallet() {
 
 function useRegisterGatewayFromVestingContract() {
   const contracts = useContracts();
-  const publicClient = usePublicClient();
-  const { data: walletClient } = useWalletClient();
   const { address: account } = useAccount();
+  const { writeContractAsync } = useWriteContract({});
 
   return async ({ peerId, source, ...rest }: RegisterGatewayRequest): Promise<TxResult> => {
     try {
@@ -58,21 +60,16 @@ function useRegisterGatewayFromVestingContract() {
         args: [peerIdToHex(peerId), encodeGatewayMetadata(rest)], // encodeMetadata(rest)
       });
 
-      const { request } = await publicClient.simulateContract({
-        account,
-        address: source.id as `0x${string}`,
-        abi: VESTING_CONTRACT_ABI,
-        functionName: 'execute',
-        args: [contracts.GATEWAY_REGISTRATION, data],
-      });
-
-      const tx = await walletClient?.writeContract(request);
-      if (!tx) {
-        return { error: 'unknown error' };
-      }
-
-      return { tx: { hash: tx } };
-    } catch (e: any) {
+      return {
+        tx: await writeContractAsync({
+          account,
+          address: source.id as `0x${string}`,
+          abi: VESTING_CONTRACT_ABI,
+          functionName: 'execute',
+          args: [contracts.GATEWAY_REGISTRATION, data],
+        }),
+      };
+    } catch (e: unknown) {
       return { error: errorMessage(e) };
     }
   };
@@ -103,7 +100,11 @@ export function useRegisterGateway() {
       return { success: false, failedReason: error };
     }
 
-    const receipt = await client.waitForTransactionReceipt({ hash: tx.hash });
+    if (!client) {
+      return { success: false, failedReason: 'missing client' };
+    }
+
+    const receipt = await client.waitForTransactionReceipt({ hash: tx });
     setWaitHeight(receipt.blockNumber, ['myGateways', { address }]);
     setLoading(false);
     setError(null);

diff --git a/src/api/contracts/gateway-registration/useStakeGateway.ts b/src/api/contracts/gateway-registration/useStakeGateway.ts
@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { logger } from '@logger';
 import Decimal from 'decimal.js';
 import { encodeFunctionData } from 'viem';
-import { useContractWrite, usePublicClient, useWalletClient } from 'wagmi';
+import { usePublicClient, useWriteContract } from 'wagmi';
 
 import { AccountType, SourceWallet } from '@api/subsquid-network-squid';
 import { BlockchainGateway } from '@api/subsquid-network-squid/gateways-graphql';
@@ -27,11 +27,7 @@ type StakeGatewayRequest = {
 
 function useStakeFromWallet() {
   const contracts = useContracts();
-  const { writeAsync } = useContractWrite({
-    address: contracts.GATEWAY_REGISTRATION,
-    abi: GATEWAY_REGISTRATION_CONTRACT_ABI,
-    functionName: 'stake',
-  });
+  const { writeContractAsync } = useWriteContract({});
 
   const [approveSqd] = useApproveSqd();
 
@@ -42,7 +38,10 @@ function useStakeFromWallet() {
   }: StakeGatewayRequest) => {
     try {
       return {
-        tx: await writeAsync({
+        tx: await writeContractAsync({
+          address: contracts.GATEWAY_REGISTRATION,
+          abi: GATEWAY_REGISTRATION_CONTRACT_ABI,
+          functionName: 'stake',
           args: [toSqd(amount), BigInt(durationBlocks), autoExtension],
         }),
       };
@@ -76,9 +75,8 @@ function useStakeFromWallet() {
 
 function useStakeFromVestingContract() {
   const contracts = useContracts();
-  const publicClient = usePublicClient();
-  const { data: walletClient } = useWalletClient();
   const { address: account } = useAccount();
+  const { writeContractAsync } = useWriteContract({});
 
   return async ({
     amount,
@@ -93,21 +91,16 @@ function useStakeFromVestingContract() {
         args: [toSqd(amount), BigInt(durationBlocks), autoExtension],
       });
 
-      const { request } = await publicClient.simulateContract({
-        account,
-        address: wallet.id as `0x${string}`,
-        abi: VESTING_CONTRACT_ABI,
-        functionName: 'execute',
-        args: [contracts.GATEWAY_REGISTRATION, data, toSqd(amount)],
-      });
-
-      const tx = await walletClient?.writeContract(request);
-      if (!tx) {
-        return { error: 'unknown error' };
-      }
-
-      return { tx: { hash: tx } };
-    } catch (e: any) {
+      return {
+        tx: await writeContractAsync({
+          account,
+          address: wallet.id as `0x${string}`,
+          abi: VESTING_CONTRACT_ABI,
+          functionName: 'execute',
+          args: [contracts.GATEWAY_REGISTRATION, data, toSqd(amount)],
+        }),
+      };
+    } catch (e: unknown) {
       return { error: errorMessage(e) };
     }
   };
@@ -137,7 +130,11 @@ export function useStakeGateway() {
       return { success: false, failedReason: res.error };
     }
 
-    const receipt = await client.waitForTransactionReceipt({ hash: res.tx.hash });
+    if (!client) {
+      return { success: false, failedReason: 'missing client' };
+    }
+
+    const receipt = await client.waitForTransactionReceipt({ hash: res.tx });
     setWaitHeight(receipt.blockNumber, []);
 
     setLoading(false);