Merge pull request #41 from gnosis/fix/tx-crash

Fix/tx crash
gnosis · Jan 14, 2025 · f0ae885 · f0ae885
2 parents 631ee2c + 73e9c9c
commit f0ae885
Show file tree

Hide file tree

Showing 29 changed files with 3,524 additions and 3,882 deletions.
diff --git a/packages/app/abi/token.ts b/packages/app/abi/token.ts
diff --git a/packages/app/abi/tokenLock.ts b/packages/app/abi/tokenLock.ts
@@ -0,0 +1,136 @@
+export const TOKEN_LOCK_ABI = [
+    {
+      type: "function",
+      name: "balanceOf",
+      constant: true,
+      stateMutability: "view",
+      payable: false,
+      inputs: [
+        {
+          type: "address",
+        },
+      ],
+      outputs: [
+        {
+          type: "uint256",
+        },
+      ],
+    },
+    {
+      type: "function",
+      name: "decimals",
+      constant: true,
+      stateMutability: "view",
+      payable: false,
+      inputs: [],
+      outputs: [
+        {
+          type: "uint256",
+        },
+      ],
+    },
+    {
+      type: "function",
+      name: "deposit",
+      constant: false,
+      payable: false,
+      inputs: [
+        {
+          type: "uint256",
+          name: "amount",
+        },
+      ],
+      outputs: [],
+    },
+    {
+      type: "function",
+      name: "depositDeadline",
+      constant: true,
+      stateMutability: "view",
+      payable: false,
+      inputs: [],
+      outputs: [
+        {
+          type: "uint256",
+        },
+      ],
+    },
+    {
+      type: "function",
+      name: "lockDuration",
+      constant: true,
+      stateMutability: "view",
+      payable: false,
+      inputs: [],
+      outputs: [
+        {
+          type: "uint256",
+        },
+      ],
+    },
+    {
+      type: "function",
+      name: "token",
+      constant: true,
+      stateMutability: "view",
+      payable: false,
+      inputs: [],
+      outputs: [
+        {
+          type: "address",
+        },
+      ],
+    },
+    {
+      type: "function",
+      name: "name",
+      constant: true,
+      stateMutability: "view",
+      payable: false,
+      inputs: [],
+      outputs: [
+        {
+          type: "string",
+        },
+      ],
+    },
+    {
+      type: "function",
+      name: "symbol",
+      constant: true,
+      stateMutability: "view",
+      payable: false,
+      inputs: [],
+      outputs: [
+        {
+          type: "string",
+        },
+      ],
+    },
+    {
+      type: "function",
+      name: "totalSupply",
+      constant: true,
+      stateMutability: "view",
+      payable: false,
+      inputs: [],
+      outputs: [
+        {
+          type: "uint256",
+        },
+      ],
+    },
+    {
+      type: "function",
+      name: "withdraw",
+      constant: false,
+      payable: false,
+      inputs: [
+        {
+          type: "uint256",
+          name: "amount",
+        },
+      ],
+      outputs: [],
+    },
+  ]
diff --git a/packages/app/app/layout.tsx b/packages/app/app/layout.tsx
@@ -0,0 +1,29 @@
+import "../styles/globals.css"
+import { ProvideConfig } from "../components"
+import { headers } from "next/headers"
+import ContextProvider from "../context"
+import { Metadata } from "next"
+
+export const metadata: Metadata = {
+  title: "Gnosis Lock",
+  description: "Gnosis Lock",
+}
+
+export default async function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+    const headersObj = await headers();
+    const cookies = headersObj.get('cookie')
+
+  return (
+    <html lang="en">
+      <body>
+        <ContextProvider cookies={cookies}>
+          <ProvideConfig>{children}</ProvideConfig>
+        </ContextProvider>
+      </body>
+    </html>
+  )
+}
diff --git a/packages/app/pages/index.tsx → packages/app/app/page.tsx b/packages/app/pages/index.tsx → packages/app/app/page.tsx
@@ -1,4 +1,4 @@
-import type { NextPage } from "next"
+"use client"
 import Head from "next/head"
 import styles from "../styles/Home.module.css"
 import { CHAINS } from "../config"
@@ -15,19 +15,17 @@ import {
   StatsLocked,
   StatsWithdraw,
 } from "../components"
-import { useNetwork } from "wagmi"
 import UseGNOBanner from "../components/UseGnoBanner"
+import { useChainId } from "wagmi"
 
 const isProd =
   typeof window !== "undefined" && window.location.hostname === "lock.gnosis.io"
 
-const Home: NextPage = () => {
+export default function Page() {
   const config = useTokenLockConfig()
-  const network = useNetwork()
+  const chainId = useChainId()
 
-  const connectedChainId = network.chain?.id
-  const connected =
-    connectedChainId && CHAINS.some(({ id }) => id === connectedChainId)
+  const connected = chainId && CHAINS.some(({ id }) => id === chainId)
 
   const depositPeriodOngoing = config.depositDeadline.getTime() > Date.now()
   const lockPeriodOngoing =
@@ -84,7 +82,7 @@ const Home: NextPage = () => {
         <div className={styles.footerContainer}>
           <div className={styles.left}>
             <span>LGNO contract: </span>
-            {connectedChainId === 100 ? (
+            {chainId === 100 ? (
               <a
                 href="https://blockscout.com/xdai/mainnet/address/0xd4Ca39f78Bf14BfaB75226AC833b1858dB16f9a1"
                 target="_blank"
@@ -175,5 +173,3 @@ const Home: NextPage = () => {
     </div>
   )
 }
-
-export default Home
diff --git a/packages/app/components/Connect/index.tsx b/packages/app/components/Connect/index.tsx
@@ -1,31 +1,31 @@
+"use client"
 import { useRef, useState } from "react"
 import useOnClickOutside from "use-onclickoutside"
 import copy from "copy-to-clipboard"
-import { useAccount, useDisconnect, useEnsName, useNetwork } from "wagmi"
+import { useAccount, useDisconnect, useEnsName, usePublicClient } from "wagmi"
 import truncateEthAddress from "truncate-eth-address"
 import Identicon from "./Identicon"
 import Button from "../Button"
 import cls from "./index.module.css"
 import IconButton, { IconLinkButton } from "../IconButton"
-import { useWeb3Modal } from "@web3modal/wagmi/react"
+import { useAppKit } from "@reown/appkit/react"
 
 const Connect: React.FC = () => {
-  const network = useNetwork()
+  const publicClient = usePublicClient()
   const { address, isConnected, connector } = useAccount()
   const { data: ensName } = useEnsName({
     address,
   })
 
-  const { open } = useWeb3Modal()
+  const { open } = useAppKit()
 
   const { disconnect } = useDisconnect()
 
   const [showDropdown, setShowDropdown] = useState(false)
   const ref = useRef(null)
   useOnClickOutside(ref, () => setShowDropdown(false))
 
-  const explorer =
-    network.chain?.blockExplorers && network.chain?.blockExplorers.default
+  const explorer = publicClient?.chain?.blockExplorers?.default
 
   return (
     <>
@@ -89,7 +89,7 @@ const Connect: React.FC = () => {
                   Network
                   <div className={cls.dropdownListFlex}>
                     <div className={cls.dropdownNetworkJewel} />
-                    {network.chain?.name || "Unsupported network"}
+                    {publicClient?.chain?.name || "Unsupported network"}
                   </div>
                 </div>
                 {connector?.id !== "gnosisSafe" && (

diff --git a/packages/app/components/ConnectHint.tsx b/packages/app/components/ConnectHint.tsx
@@ -1,20 +1,20 @@
-import { useAccount, useConnect, useSwitchNetwork } from "wagmi"
+import { useAccount, useSwitchChain, useChainId } from "wagmi"
 import { CHAINS } from "../config"
 import Card from "./Card"
 import Button from "./Button"
-import { useWeb3Modal } from "@web3modal/wagmi/react"
+import { useAppKit } from "@reown/appkit/react"
 
 const ConnectHint: React.FC = () => {
   const { isConnected } = useAccount()
-  const { switchNetwork, data: chain } = useSwitchNetwork()
+  const chainId = useChainId()
+  const { switchChain } = useSwitchChain()
 
-  const { open } = useWeb3Modal()
+  const { open } = useAppKit()
 
-  const connectedChainId = chain?.id
   const connectedToUnsupportedChain =
-    isConnected && !CHAINS.some(({ id }) => id === connectedChainId)
+    isConnected && !CHAINS.some(({ id }) => id === chainId)
 
-  if (connectedChainId && !connectedToUnsupportedChain) {
+  if (chainId && !connectedToUnsupportedChain) {
     return null
   }
 
@@ -28,8 +28,8 @@ const ConnectHint: React.FC = () => {
       {connectedToUnsupportedChain && (
         <Button
           primary
-          onClick={switchNetwork && (() => switchNetwork(CHAINS[0].id))}
-          disabled={!switchNetwork}
+          onClick={switchChain && (() => switchChain({ chainId: CHAINS[0].id }))}
+          disabled={!switchChain}
         >
           Switch Wallet To {CHAINS[0].name}
         </Button>

diff --git a/packages/app/components/Deposit.tsx b/packages/app/components/Deposit.tsx
@@ -1,18 +1,23 @@
 import { BigNumber } from "ethers"
 import { useEffect, useMemo, useState } from "react"
-import { useAccount, useWaitForTransaction } from "wagmi"
+import {
+  useAccount,
+  useChainId,
+  useWaitForTransactionReceipt,
+  useWriteContract,
+} from "wagmi"
 import { CONTRACT_ADDRESSES } from "../config"
 import Balance from "./Balance"
 import Button from "./Button"
 import Card from "./Card"
 import AmountInput from "./AmountInput"
 import Spinner from "./Spinner"
-import { useTokenContractRead, useTokenContractWrite } from "./tokenContract"
-import { useTokenLockContractWrite } from "./tokenLockContract"
-import useChainId from "./useChainId"
+import { useTokenContractRead } from "./tokenContract"
 import useTokenLockConfig from "./useTokenLockConfig"
 import utility from "../styles/utility.module.css"
 import Notice from "./Notice"
+import { erc20Abi } from "viem"
+import { TOKEN_LOCK_ABI } from "../abi/tokenLock"
 
 const Deposit: React.FC = () => {
   const [amount, setAmount] = useState<BigNumber | undefined>(undefined)
@@ -43,33 +48,46 @@ const Deposit: React.FC = () => {
   })
 
   const {
-    isLoading: approveLoading,
-    write: approve,
-    data: approveData,
-    error: approveError,
-  } = useTokenContractWrite("approve", [contractAddress, amount?.toBigInt()])
-  const approveWait = useWaitForTransaction({
-    hash: approveData?.hash,
+    data: hash,
+    error: txError,
+    isPending,
+    writeContract,
+  } = useWriteContract()
+  const { tokenAddress } = useTokenLockConfig()
+
+  function approve() {
+    writeContract({
+      address: tokenAddress as `0x${string}`,
+      abi: erc20Abi,
+      functionName: "approve",
+      args: [contractAddress as `0x${string}`, amount?.toBigInt() || BigInt(0)],
+    })
+  }
+
+  const approveWait = useWaitForTransactionReceipt({
+    hash: hash,
   })
-  const {
-    isLoading: depositLoading,
-    write: deposit,
-    writeAsync: depositAsync,
-    data: depositData,
-    error: depositError,
-  } = useTokenLockContractWrite("deposit", [amount?.toBigInt()])
-  const depositWait = useWaitForTransaction({
-    hash: depositData?.hash,
+
+  function deposit() {
+    writeContract({
+      address: CONTRACT_ADDRESSES[chainId] as `0x${string}`,
+      abi: TOKEN_LOCK_ABI,
+      functionName: "deposit",
+      args: [amount?.toBigInt()],
+    })
+  }
+
+  const depositWait = useWaitForTransactionReceipt({
+    hash: hash,
   })
 
   const needsAllowance =
     amount && amount.gt(0) && allowance && BigNumber.from(allowance).lt(amount)
 
-  const approvePending = approveLoading || approveWait.isLoading
-  const depositPending = depositLoading || depositWait.isLoading
+  const approvePending = isPending || approveWait.isLoading
+  const depositPending = isPending || depositWait.isLoading
 
-  const error =
-    approveError || approveWait.error || depositError || depositWait.error
+  const error = txError || approveWait.error || depositWait.error
 
   // clear input after successful deposit
   const depositedBlock = depositWait.data?.blockHash

diff --git a/packages/app/components/DepositAndWithdraw.tsx b/packages/app/components/DepositAndWithdraw.tsx
@@ -1,3 +1,4 @@
+"use client"
 import clsx from "clsx"
 import { useState } from "react"
 import Deposit from "./Deposit"