Migrate wagmi v1 and add toasts (#11)

* wip: migrate wagmi v1 * wip: remove jsbi/bignumber * fix: currency amount using jsbi * fix: approval for 0 is 0n * fix: typo * feat: add toasts
dove-protocol · May 10, 2023 · 7d8774a · 7d8774a · vercel · May 10, 2023
1 parent c863625
commit 7d8774a
Show file tree

Hide file tree

Showing 30 changed files with 1,166 additions and 971 deletions.
diff --git a/components/AmmTabContent.tsx b/components/AmmTabContent.tsx
@@ -168,7 +168,7 @@ const SwapTabContent = () => {
     PAIR_ADDRESS[expectedChainId as ChainId]
   );
 
-  console.log(PAIR_ADDRESS[expectedChainId as ChainId], approveVoucherStateA);
+  // console.log(PAIR_ADDRESS[expectedChainId as ChainId], approveVoucherStateA);
 
   const { approve: approveVoucherB, state: approveVoucherStateB } = useApproval(
     burnAmounts[Field.CURRENCY_B],

diff --git a/components/DammTabContent.tsx b/components/DammTabContent.tsx
@@ -1,5 +1,4 @@
 import * as Tabs from "@radix-ui/react-tabs";
-import JSBI from "jsbi";
 import Image from "next/image";
 import {
   BiCheckCircle,
@@ -11,7 +10,7 @@ import {
   BiStats,
   BiTimeFive,
 } from "react-icons/bi";
-import { goerli } from "wagmi";
+import { goerli } from "viem/chains";
 import shallow from "zustand/shallow";
 import { dammTabsData } from "../constants/tabs";
 import useDammData from "../lib/hooks/data/useDammData";
@@ -405,16 +404,12 @@ const DammTabContent = () => {
                     formatCurrencyAmount(
                       CurrencyAmount.fromRawAmount(
                         currencies[Field.CURRENCY_A],
-                        data?.reserve0.equalTo("0") ||
-                          data?.totalSupply.equalTo("0")
-                          ? JSBI.BigInt(0)
-                          : JSBI.divide(
-                              JSBI.multiply(
-                                withdrawAmounts[Field.CURRENCY_A]?.numerator,
-                                data.reserve0.numerator
-                              ),
+                        data?.reserve0.equalTo(0n) ||
+                          data?.totalSupply.equalTo(0n)
+                          ? 0n
+                          : (withdrawAmounts[Field.CURRENCY_A]?.numerator *
+                              data.reserve0.numerator) /
                               data?.totalSupply.numerator
-                            )
                       ),
                       6
                     )}
@@ -442,16 +437,12 @@ const DammTabContent = () => {
                     formatCurrencyAmount(
                       CurrencyAmount.fromRawAmount(
                         currencies[Field.CURRENCY_B],
-                        data?.reserve1.equalTo("0") ||
-                          data?.totalSupply.equalTo("0")
-                          ? JSBI.BigInt(0)
-                          : JSBI.divide(
-                              JSBI.multiply(
-                                withdrawAmounts[Field.CURRENCY_A]?.numerator,
-                                data.reserve1.numerator
-                              ),
+                        data?.reserve1.equalTo(0n) ||
+                          data?.totalSupply.equalTo(0n)
+                          ? 0n
+                          : (withdrawAmounts[Field.CURRENCY_A]?.numerator *
+                              data.reserve1.numerator) /
                               data?.totalSupply.numerator
-                            )
                       ),
                       6
                     )}

diff --git a/components/HistoryTabContent.tsx b/components/HistoryTabContent.tsx
@@ -1,10 +1,7 @@
-import React from "react";
-import { useState } from "react";
-import * as Switch from "@radix-ui/react-switch";
+import { BiHistory, BiLinkExternal, BiShuffle } from "react-icons/bi";
+import { useNetwork } from "wagmi";
 import { useUserStore } from "../state/user/useUserStore";
 import TabContentContainer from "./TabContentContainer";
-import { BiCog, BiHistory, BiLinkExternal, BiShuffle } from "react-icons/bi";
-import { useNetwork } from "wagmi";
 
 const HistoryTabContent = () => {
   const allToastContents = useUserStore((state) => state.allToastContents);
@@ -44,7 +41,7 @@ const HistoryTabContent = () => {
         ))
       ) : (
         <div className="flex h-40 w-full items-center justify-center">
-          <p className="text-white">No previous transactions</p>
+          <p className="text-white">No previous transactions.</p>
         </div>
       )}
 

diff --git a/components/PageWrapper.tsx b/components/PageWrapper.tsx
@@ -2,7 +2,8 @@ import * as Tabs from "@radix-ui/react-tabs";
 import { useEffect, useRef } from "react";
 import { BiCog } from "react-icons/bi";
 import { GiPeaceDove } from "react-icons/gi";
-import { goerli, useSwitchNetwork } from "wagmi";
+import { goerli } from "viem/chains";
+import { useSwitchNetwork } from "wagmi";
 import { arbitrumGoerli, polygonMumbai } from "wagmi/dist/chains";
 import DammTabContent from "../components/DammTabContent";
 import SettingsTabContent from "../components/SettingsTabContent";

diff --git a/lib/hooks/burn/useBurn.ts b/lib/hooks/burn/useBurn.ts
@@ -1,5 +1,5 @@
-import { BigNumber, utils } from "ethers";
 import { useMemo } from "react";
+import { parseEther } from "viem";
 import { useNetwork } from "wagmi";
 import { ChainId, Currency, CurrencyAmount, PAIR_ADDRESS } from "../../../sdk";
 import {
@@ -9,6 +9,7 @@ import {
   usePreparePairYeetVouchers,
 } from "../../../src/generated";
 import { ApprovalState } from "../useApproval";
+import useToast from "../useToast";
 
 export default function useBurn(
   voucher1ToBurn: CurrencyAmount<Currency> | undefined,
@@ -35,12 +36,10 @@ export default function useBurn(
   const { config } = usePreparePairBurnVouchers({
     address: pairAddress as `0x${string}`,
     args: [
-      BigNumber.from(voucher1ToBurn?.quotient.toString() || 0),
-      BigNumber.from(voucher2ToBurn?.quotient.toString() || 0),
+      BigInt(voucher1ToBurn?.quotient.toString() || 0),
+      BigInt(voucher2ToBurn?.quotient.toString() || 0),
     ],
-    overrides: {
-      value: utils.parseEther("0.1"),
-    },
+    value: parseEther("0.1"),
     enabled:
       !!voucher1ToBurn &&
       !!voucher2ToBurn &&
@@ -53,8 +52,8 @@ export default function useBurn(
   const { config: yeetConfig } = usePreparePairYeetVouchers({
     address: pairAddress as `0x${string}`,
     args: [
-      BigNumber.from(voucher1ToBurn?.quotient.toString() || 0),
-      BigNumber.from(voucher2ToBurn?.quotient.toString() || 0),
+      BigInt(voucher1ToBurn?.quotient.toString() || 0),
+      BigInt(voucher2ToBurn?.quotient.toString() || 0),
     ],
     enabled:
       !!voucher1ToBurn &&
@@ -63,13 +62,14 @@ export default function useBurn(
       approvalState2 === ApprovalState.APPROVED,
   });
 
-  console.log(
-    "yeetConfig",
-    voucher1ToBurn?.quotient.toString(),
-    voucher2ToBurn?.quotient.toString()
-  );
+  const { write: yeetWrite, data } = usePairYeetVouchers(yeetConfig);
 
-  const { write: yeetWrite } = usePairYeetVouchers(yeetConfig);
+  useToast(
+    data?.hash,
+    "Yeeting vouchers...",
+    "Vouchers yeeted!",
+    "Failed to yeet vouchers"
+  );
 
   return {
     burn: () => write?.(),

diff --git a/lib/hooks/data/useAmmData.ts b/lib/hooks/data/useAmmData.ts
@@ -65,8 +65,8 @@ export default function useAmmData(
 
   return {
     data: {
-      reserve0: CurrencyAmount.fromRawAmount(currency1, data[0].toString()),
-      reserve1: CurrencyAmount.fromRawAmount(currency1, data[1].toString()),
+      reserve0: CurrencyAmount.fromRawAmount(currency1, data[0].result as bigint),
+      reserve1: CurrencyAmount.fromRawAmount(currency1, data[1].result as bigint),
     },
     balances: amounts,
   };

diff --git a/lib/hooks/data/useDammData.ts b/lib/hooks/data/useDammData.ts
@@ -79,19 +79,25 @@ export default function useDammData(
 
   return {
     data: {
-      reserve0: CurrencyAmount.fromRawAmount(currency1, data[0].toString()),
-      reserve1: CurrencyAmount.fromRawAmount(currency2, data[1].toString()),
+      reserve0: CurrencyAmount.fromRawAmount(
+        currency1,
+        data[0].result as bigint
+      ),
+      reserve1: CurrencyAmount.fromRawAmount(
+        currency2,
+        data[1].result as bigint
+      ),
       totalSupply: CurrencyAmount.fromRawAmount(
         totalSupplyCurrency,
-        data[2].toString()
+        data[2].result as bigint
       ),
       marked0: CurrencyAmount.fromRawAmount(
         currency1,
-        data[3].marked0.toString()
+        (data[3].result as [bigint, bigint])[0] as bigint
       ),
       marked1: CurrencyAmount.fromRawAmount(
         currency2,
-        data[3].marked1.toString()
+        (data[3].result as [bigint, bigint])[1] as bigint
       ),
     },
   };

diff --git a/lib/hooks/mint/useMint.ts b/lib/hooks/mint/useMint.ts
@@ -1,11 +1,11 @@
-import { BigNumber } from "ethers";
 import { useAccount } from "wagmi";
 import { Currency, CurrencyAmount } from "../../../sdk";
 import {
   useErc20MockMint,
   usePrepareErc20MockMint,
 } from "../../../src/generated";
 import { wrapAddress } from "../../utils/wrapAddress";
+import useToast from "../useToast";
 
 export default function useMint(
   amountToMint: CurrencyAmount<Currency> | undefined,
@@ -17,16 +17,18 @@ export default function useMint(
 
   const { config } = usePrepareErc20MockMint({
     address: amountToMint?.currency.isToken
-      ? amountToMint.currency.address as `0x${string}`
+      ? (amountToMint.currency.address as `0x${string}`)
       : undefined,
     args: [
       wrapAddress(account ?? address),
-      BigNumber.from(amountToMint?.numerator.toString() || "0"),
+      BigInt(amountToMint?.numerator.toString() || "0"),
     ],
     enabled: !!amountToMint && (!!address || !!account),
   });
 
-  const { write } = useErc20MockMint(config);
+  const { write, data } = useErc20MockMint(config);
+
+  useToast(data?.hash, "Minting...", "Minted!", "Failed to mint");
 
   return {
     mint: () => write?.(),

diff --git a/lib/hooks/provide/useProvideLiquidity.ts b/lib/hooks/provide/useProvideLiquidity.ts
@@ -1,4 +1,4 @@
-import { BigNumber, ethers } from "ethers";
+import { ethers } from "ethers";
 import { useAccount } from "wagmi";
 import {
   ChainId,
@@ -13,6 +13,7 @@ import {
 } from "../../../src/generated";
 import { wrapAddress } from "../../utils/wrapAddress";
 import { ApprovalState } from "../useApproval";
+import useToast from "../useToast";
 
 export default function useProvideLiquidity(
   amount1: CurrencyAmount<Currency> | undefined,
@@ -26,8 +27,8 @@ export default function useProvideLiquidity(
     args: [
       amount1?.currency.isToken ? wrapAddress(amount1.currency.address) : "0x",
       amount2?.currency.isToken ? wrapAddress(amount2.currency.address) : "0x",
-      BigNumber.from(amount1?.numerator.toString() ?? "0"),
-      BigNumber.from(amount2?.numerator.toString() ?? "0"),
+      BigInt(amount1?.numerator.toString() ?? "0"),
+      BigInt(amount2?.numerator.toString() ?? "0"),
     ],
   });
 
@@ -36,12 +37,12 @@ export default function useProvideLiquidity(
     args: [
       amount1?.currency.isToken ? wrapAddress(amount1.currency.address) : "0x",
       amount2?.currency.isToken ? wrapAddress(amount2.currency.address) : "0x",
-      BigNumber.from(amount1?.numerator.toString() ?? "0"),
-      BigNumber.from(amount2?.numerator.toString() ?? "0"),
-      quoteData?.amountA ?? BigNumber.from("0"),
-      quoteData?.amountB ?? BigNumber.from("0"),
+      BigInt(amount1?.numerator.toString() ?? "0"),
+      BigInt(amount2?.numerator.toString() ?? "0"),
+      quoteData?.[0] ?? BigInt("0"),
+      quoteData?.[1] ?? BigInt("0"),
       address ?? "0x",
-      ethers.constants.MaxUint256,
+      ethers.MaxUint256,
     ],
     enabled:
       !!amount1 &&
@@ -50,7 +51,14 @@ export default function useProvideLiquidity(
       approvalState2 === ApprovalState.APPROVED,
   });
 
-  const { write } = useL1RouterAddLiquidity(config);
+  const { write, data } = useL1RouterAddLiquidity(config);
+
+  useToast(
+    data?.hash,
+    "Adding Liquidity...",
+    "Added Liquidity!",
+    "Failed to add liquidity"
+  );
 
   return {
     provide: () => write?.(),

diff --git a/lib/hooks/swap/useSwap.ts b/lib/hooks/swap/useSwap.ts
@@ -1,4 +1,4 @@
-import { BigNumber, ethers } from "ethers";
+import { ethers } from "ethers";
 import { useMemo } from "react";
 import { useAccount, useNetwork } from "wagmi";
 import {
@@ -16,6 +16,7 @@ import {
   usePrepareL2RouterSwapExactTokensForTokensSimple,
 } from "../../../src/generated";
 import { ApprovalState } from "../useApproval";
+import useToast from "../useToast";
 
 export default function useSwap(
   amountIn: CurrencyAmount<Currency> | undefined,
@@ -66,7 +67,7 @@ export default function useSwap(
   const { data: amountOutData } = useL2RouterGetAmountOut({
     address: routerAddress as `0x${string}`,
     args: [
-      BigNumber.from(amountIn?.numerator.toString() ?? 0),
+      BigInt(amountIn?.numerator.toString() ?? 0),
       amountIn?.currency.isToken
         ? (amountIn?.currency.address as `0x${string}`)
         : "0x",
@@ -77,20 +78,22 @@ export default function useSwap(
   const { config } = usePrepareL2RouterSwapExactTokensForTokensSimple({
     address: routerAddress as `0x${string}`,
     args: [
-      BigNumber.from(amountIn?.numerator.toString() ?? 0),
-      BigNumber.from(amountOutData?.toString() ?? 0),
+      BigInt(amountIn?.numerator.toString() ?? 0),
+      BigInt(amountOutData?.toString() ?? 0),
       amountIn?.currency.isToken
         ? (amountIn?.currency.address as `0x${string}`)
         : "0x",
       isToken0 ? token1Data ?? "0x" : token0Data ?? "0x",
       address ?? "0x",
-      ethers.constants.MaxUint256, // TODO: use deadline
+      ethers.MaxUint256, // TODO: use deadline
     ],
     enabled:
       !!amountIn && !!amountOutData && approvalState === ApprovalState.APPROVED,
   });
 
-  const { write } = useL2RouterSwapExactTokensForTokensSimple(config);
+  const { write, data } = useL2RouterSwapExactTokensForTokensSimple(config);
+
+  useToast(data?.hash, "Swapping...", "Swapped!", "Failed to swap");
 
   return {
     swap: () => write?.(),

diff --git a/lib/hooks/sync/useFinalizeSyncL1.ts b/lib/hooks/sync/useFinalizeSyncL1.ts
@@ -4,6 +4,7 @@ import {
   useDoveFinalizeSyncFromL2,
   usePrepareDoveFinalizeSyncFromL2,
 } from "../../../src/generated";
+import useToast from "../useToast";
 
 export default function useFinalizeSyncL1(
   expectedChainId: ChainId | undefined
@@ -38,10 +39,17 @@ export default function useFinalizeSyncL1(
   const { config } = usePrepareDoveFinalizeSyncFromL2({
     address: DOVE_ADDRESS[ChainId.ETHEREUM_GOERLI] as `0x${string}`,
     args: [HL_DOMAIN[expectedChainId as ChainId], data?.syncs[0]?.syncId ?? 0],
-    enabled: !!expectedChainId && data?.syncs[0]?.status === "PENDING_FINAlIZE",
+    enabled: !!expectedChainId && data?.syncs[0]?.status === "PENDING_FINALIZE",
   });
 
-  const { write } = useDoveFinalizeSyncFromL2(config);
+  const { write, data: finalizeData } = useDoveFinalizeSyncFromL2(config);
+
+  useToast(
+    finalizeData?.hash,
+    "Finalizing sync from L2...",
+    "Finalized sync from L2!",
+    "Failed to finalize sync from L2"
+  );
 
   return {
     finalizeSync: () => write?.(),