trade: Upgrade wagmi, viem, connectkit

trade.renegade.fi/app/(desktop)/[base]/[quote]/deposit-button.tsx

@@ -1,22 +1,23 @@
-import { useDeposit } from "@/contexts/Deposit/deposit-context"
-import { useRenegade } from "@/contexts/Renegade/renegade-context"
-import { env } from "@/env.mjs"
-import {
-  useErc20Allowance,
-  useErc20Approve,
-  useErc20BalanceOf,
-  usePrepareErc20Approve,
-} from "@/generated"
 import { ArrowForwardIcon } from "@chakra-ui/icons"
 import { Button, useDisclosure } from "@chakra-ui/react"
 import { Token } from "@renegade-fi/renegade-js"
+import { useQueryClient } from '@tanstack/react-query'
+import { useEffect } from 'react'
 import { toast } from "sonner"
 import { formatUnits, parseUnits } from "viem"
-import { useAccount, useWaitForTransaction } from "wagmi"
+import { useAccount, useBlockNumber } from 'wagmi'
 
-import { useButton } from "@/hooks/use-button"
-import { CreateStepper } from "@/components/steppers/create-stepper/create-stepper"
 import { renegade } from "@/app/providers"
+import { CreateStepper } from "@/components/steppers/create-stepper/create-stepper"
+import { useDeposit } from "@/contexts/Deposit/deposit-context"
+import { useRenegade } from "@/contexts/Renegade/renegade-context"
+import { env } from "@/env.mjs"
+import {
+  useReadErc20Allowance,
+  useReadErc20BalanceOf,
+  useWriteErc20Approve
+} from "@/generated"
+import { useButton } from "@/hooks/use-button"
 
 const MAX_INT = BigInt(
   "115792089237316195423570985008687907853269984665640564039457584007913129639935"
@@ -39,38 +40,30 @@ export default function DepositButton() {
   const { address } = useAccount()
 
   // Get L1 ERC20 balance
-  const { data: l1Balance } = useErc20BalanceOf({
+  const { data: l1Balance, queryKey: l1BalanceQueryKey } = useReadErc20BalanceOf({
     address: Token.findAddressByTicker(baseTicker) as `0x${string}`,
     args: [address ?? "0x"],
   })
   // TODO: Adjust decimals
   console.log("Balance on L1: ", formatUnits(l1Balance ?? BigInt(0), 18))
 
   // Get L1 ERC20 Allowance
-  const { data: allowance } = useErc20Allowance({
+  const { data: allowance, queryKey: allowanceQueryKey } = useReadErc20Allowance({
     address: Token.findAddressByTicker(baseTicker) as `0x${string}`,
-    args: [
-      address ? address : "0x",
-      env.NEXT_PUBLIC_DARKPOOL_CONTRACT as `0x${string}`,
-    ],
-    watch: true,
+    args: [address ?? "0x", env.NEXT_PUBLIC_DARKPOOL_CONTRACT as `0x${string}`],
   })
   console.log(`${baseTicker} allowance: `, allowance)
 
+  const queryClient = useQueryClient()
+  const { data: blockNumber } = useBlockNumber({ watch: true })
+  useEffect(() => {
+    queryClient.invalidateQueries({ queryKey: l1BalanceQueryKey })
+    queryClient.invalidateQueries({ queryKey: allowanceQueryKey })
+  }, [allowanceQueryKey, blockNumber, l1BalanceQueryKey, queryClient])
+
+
   // L1 ERC20 Approval
-  const { config } = usePrepareErc20Approve({
-    address: Token.findAddressByTicker(baseTicker) as `0x${string}`,
-    args: [env.NEXT_PUBLIC_DARKPOOL_CONTRACT as `0x${string}`, MAX_INT],
-  })
-  const {
-    write: approve,
-    isLoading: approveIsLoading,
-    data: approveData,
-  } = useErc20Approve(config)
-  const { isLoading: txIsLoading, isSuccess: txIsSuccess } =
-    useWaitForTransaction({
-      hash: approveData?.hash,
-    })
+  const { writeContract: approve, status: approveStatus } = useWriteErc20Approve()
 
   const hasRpcConnectionError = typeof allowance === "undefined"
   console.log(
@@ -84,16 +77,19 @@ export default function DepositButton() {
     "🚀 ~ DepositButton ~ hasInsufficientBalance:",
     hasInsufficientBalance
   )
-  const needsApproval = allowance === BigInt(0) && !txIsSuccess
+  const needsApproval = allowance === BigInt(0) && approveStatus !== "success"
 
   const isDisabled =
     (accountId && !baseTokenAmount) ||
     hasRpcConnectionError ||
     hasInsufficientBalance
 
   const handleApprove = async () => {
-    if (!accountId || !approve) return
-    approve()
+    if (!accountId) return
+    approve({
+      address: Token.findAddressByTicker(baseTicker) as `0x${string}`,
+      args: [env.NEXT_PUBLIC_DARKPOOL_CONTRACT as `0x${string}`, MAX_INT],
+    })
   }
 
   const handleClick = async () => {
@@ -146,7 +142,7 @@ export default function DepositButton() {
         transition="0.15s"
         backgroundColor="transparent"
         isDisabled={isDisabled}
-        isLoading={approveIsLoading || txIsLoading}
+        isLoading={approveStatus === "pending"}
         loadingText="Approving"
         onClick={handleClick}
         rightIcon={<ArrowForwardIcon />}

trade.renegade.fi/app/providers.tsx

@@ -1,10 +1,5 @@
 "use client"
 
-import { PropsWithChildren, useEffect } from "react"
-import { AppProvider } from "@/contexts/App/app-context"
-import { ExchangeProvider } from "@/contexts/Exchange/exchange-context"
-import { RenegadeProvider } from "@/contexts/Renegade/renegade-context"
-import { env } from "@/env.mjs"
 import { menuAnatomy } from "@chakra-ui/anatomy"
 import { CacheProvider } from "@chakra-ui/next-js"
 import {
@@ -16,14 +11,26 @@ import {
   type ThemeConfig,
 } from "@chakra-ui/react"
 import { Renegade } from "@renegade-fi/renegade-js"
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ConnectKitProvider, getDefaultConfig } from "connectkit"
+import { PropsWithChildren, useEffect } from "react"
 import { IntercomProvider } from "react-use-intercom"
 import { Toaster } from "sonner"
 import { createPublicClient, http } from "viem"
-import { WagmiConfig, createConfig } from "wagmi"
+import { createConfig, WagmiProvider } from "wagmi"
 
+import { AppProvider } from "@/contexts/App/app-context"
+import { ExchangeProvider } from "@/contexts/Exchange/exchange-context"
+import { RenegadeProvider } from "@/contexts/Renegade/renegade-context"
+import { env } from "@/env.mjs"
 import { stylusDevnetEc2 } from "@/lib/chain"
 
+/*
+ * ┌────────────────────────┐
+ * │    Chakra Config       |
+ * └────────────────────────┘
+ */
+
 const { definePartsStyle, defineMultiStyleConfig } =
   createMultiStyleConfigHelpers(menuAnatomy.keys)
 
@@ -170,19 +177,29 @@ const components = {
 }
 const theme = extendTheme({ config, styles, colors, components })
 
+/*
+ * ┌────────────────────────┐
+ * │    Wallet Config       |
+ * └────────────────────────┘
+ */
 const wagmiConfig = createConfig(
   getDefaultConfig({
-    alchemyId: "",
-    walletConnectProjectId: env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID,
-    appName: "Renegade | On-Chain Dark Pool",
     appDescription:
       "On-chain dark pool. MPC-based cryptocurrency DEX for anonymous crosses at midpoint prices.",
-    appUrl: "https://renegade.fi",
+    appName: "Renegade | On-Chain Dark Pool",
     appIcon: "https://www.renegade.fi/glyph_light.svg",
+    appUrl: "https://renegade.fi",
     chains: [stylusDevnetEc2],
+    ssr: true,
+    transports: {
+      [stylusDevnetEc2.id]: http()
+    },
+    walletConnectProjectId: env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID,
   })
 )
 
+const queryClient = new QueryClient()
+
 export const client = createPublicClient({
   chain: stylusDevnetEc2,
   transport: http(),
@@ -215,28 +232,33 @@ export function Providers({
         <CacheProvider>
           <ChakraProvider theme={theme}>
             <ColorModeScript initialColorMode={theme.config.initialColorMode} />
-            <WagmiConfig config={wagmiConfig}>
-              <ConnectKitProvider
-                mode="dark"
-                customTheme={{
-                  "--ck-overlay-background": "rgba(0, 0, 0, 0.25)",
-                  "--ck-overlay-backdrop-filter": "blur(8px)",
-                  "--ck-font-family": "Favorit Extended",
-                  "--ck-border-radius": "10px",
-                  "--ck-body-background": "#1e1e1e",
-                  "--ck-spinner-color": "#ffffff",
-                }}
-              >
-                <RenegadeProvider>
-                  <ExchangeProvider>
-                    <AppProvider tokenIcons={icons}>
-                      <Toaster position="bottom-center" />
-                      {children}
-                    </AppProvider>
-                  </ExchangeProvider>
-                </RenegadeProvider>
-              </ConnectKitProvider>
-            </WagmiConfig>
+            <WagmiProvider config={wagmiConfig}>
+              <QueryClientProvider client={queryClient}>
+
+
+
+                <ConnectKitProvider
+                  mode="dark"
+                  customTheme={{
+                    "--ck-overlay-background": "rgba(0, 0, 0, 0.25)",
+                    "--ck-overlay-backdrop-filter": "blur(8px)",
+                    "--ck-font-family": "Favorit Extended",
+                    "--ck-border-radius": "10px",
+                    "--ck-body-background": "#1e1e1e",
+                    "--ck-spinner-color": "#ffffff",
+                  }}
+                >
+                  <RenegadeProvider>
+                    <ExchangeProvider>
+                      <AppProvider tokenIcons={icons}>
+                        <Toaster position="bottom-center" />
+                        {children}
+                      </AppProvider>
+                    </ExchangeProvider>
+                  </RenegadeProvider>
+                </ConnectKitProvider>
+              </QueryClientProvider>
+            </WagmiProvider>
           </ChakraProvider>
         </CacheProvider>
       </IntercomProvider>

trade.renegade.fi/components/modals/token-select-modal.tsx

@@ -18,15 +18,15 @@ import { Token } from "@renegade-fi/renegade-js"
 import Image from "next/image"
 import { useMemo, useState } from "react"
 import SimpleBar from "simplebar-react"
+import { formatUnits } from "viem/utils"
+import { useAccount } from "wagmi"
 
+import { useReadErc20BalanceOf } from "@/generated"
 import { useBalance } from "@/hooks/use-balance"
 import { useDebounce } from "@/hooks/use-debounce"
 import { DISPLAYED_TICKERS, TICKER_TO_NAME } from "@/lib/tokens"
 
-import { useErc20BalanceOf } from "@/generated"
 import "simplebar-react/dist/simplebar.min.css"
-import { formatUnits } from "viem/utils"
-import { useAccount } from "wagmi"
 
 const ROW_HEIGHT = "56px"
 interface TokenSelectModalProps {
@@ -130,9 +130,9 @@ const Row = ({ ticker, tokenName, onRowClick }: RowProps) => {
   const { address } = useAccount()
   const { tokenIcons, view } = useApp()
   const balances = useBalance()
-  const { data: erc20Balance } = useErc20BalanceOf({
+  const { data: erc20Balance } = useReadErc20BalanceOf({
     address: Token.findAddressByTicker(ticker) as `0x${string}`,
-    args: [address ?? "0x"], // Ensure `address` is defined in your context or passed as a prop
+    args: [address ?? "0x"],
   })
 
 

trade.renegade.fi/components/steppers/create-stepper/steps/default-step.tsx

@@ -1,5 +1,3 @@
-import { useApp } from "@/contexts/App/app-context"
-import { useRenegade } from "@/contexts/Renegade/renegade-context"
 import { Button, Flex, HStack, ModalBody, Text } from "@chakra-ui/react"
 import { Keychain } from "@renegade-fi/renegade-js"
 import { Unplug } from "lucide-react"
@@ -11,49 +9,49 @@ import {
   useSignMessage as useSignMessageWagmi,
 } from "wagmi"
 
-import { useStepper } from "@/components/steppers/create-stepper/create-stepper"
 import { client } from "@/app/providers"
+import { useStepper } from "@/components/steppers/create-stepper/create-stepper"
+import { useApp } from "@/contexts/App/app-context"
+import { useRenegade } from "@/contexts/Renegade/renegade-context"
 
 export function DefaultStep() {
   const { setIsOnboarding, setIsSigningIn } = useApp()
   const [, setSeed] = useLocalStorage<string | undefined>("seed", undefined)
   const { onClose } = useStepper()
   const { address } = useAccountWagmi()
   const { accountId, setAccount } = useRenegade()
-  const { isLoading, signMessage } = useSignMessageWagmi({
-    message: "Unlock your Renegade account.\nTestnet v0",
-    async onSuccess(data, variables) {
-      setIsSigningIn(true)
-      // If Cloudflare is down, Smart Contract accounts cannot be verified
-      // EOA accounts can be verified using verifyMessage util
-      const valid = await client
-        .verifyMessage({
-          address: address ?? `0x`,
-          message: variables.message,
-          signature: data,
-        })
-        .then((res) => {
-          if (!res) {
-            return verifyMessage({
-              address: address ?? `0x`,
-              message: variables.message,
-              signature: data,
-            })
-          }
-          return res
-        })
-      if (!valid) {
-        throw new Error("Invalid signature")
-      }
-      setAccount(accountId, new Keychain({ seed: data })).then(() =>
-        setSeed(data)
-      )
-      setIsOnboarding(false)
-      onClose()
-    },
-    onError() {
-      setIsSigningIn(false)
-    },
+  const { signMessage, status } = useSignMessageWagmi({
+    mutation: {
+      async onSuccess(data, variables) {
+        setIsSigningIn(true)
+        // If Cloudflare is down, Smart Contract accounts cannot be verified
+        // EOA accounts can be verified using verifyMessage util
+        const valid = await client
+          .verifyMessage({
+            address: address ?? `0x`,
+            message: variables.message,
+            signature: data,
+          })
+          .then((res) => {
+            if (!res) {
+              return verifyMessage({
+                address: address ?? `0x`,
+                message: variables.message,
+                signature: data,
+              })
+            }
+            return res
+          })
+        if (!valid) {
+          throw new Error("Invalid signature")
+        }
+        setAccount(accountId, new Keychain({ seed: data })).then(() =>
+          setSeed(data)
+        )
+        setIsOnboarding(false)
+        onClose()
+      },
+    }
   })
   const { disconnect } = useDisconnectWagmi()
 
@@ -68,22 +66,24 @@ export function DefaultStep() {
           <div>
             <Button
               width="100%"
-              height={isLoading ? "56px" : "40px"}
+              height={status === 'pending' ? "56px" : "40px"}
               color="white.90"
               fontWeight="800"
               transition="0.2s"
-              isLoading={isLoading}
+              isLoading={status === 'pending'}
               loadingText="Signing in to Renegade"
               onClick={() => {
-                signMessage()
+                signMessage({
+                  message: "Unlock your Renegade account.\nTestnet v0",
+                })
               }}
             >
               <Text>Sign in to Renegade</Text>
             </Button>
             <Flex
               justifyContent="center"
-              height={isLoading ? "0px" : "auto"}
-              opacity={isLoading ? 0 : 1}
+              height={status === 'pending' ? "0px" : "auto"}
+              opacity={status === 'pending' ? 0 : 1}
               transition="0.2s"
             >
               <Button