diff --git a/trade.renegade.fi/app/(desktop)/[base]/[quote]/deposit-button.tsx b/trade.renegade.fi/app/(desktop)/[base]/[quote]/deposit-button.tsx
index a393c754..c6c99c63 100644
--- a/trade.renegade.fi/app/(desktop)/[base]/[quote]/deposit-button.tsx
+++ b/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,7 +40,7 @@ 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"],
})
@@ -47,30 +48,22 @@ export default function DepositButton() {
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,7 +77,7 @@ export default function DepositButton() {
"🚀 ~ DepositButton ~ hasInsufficientBalance:",
hasInsufficientBalance
)
- const needsApproval = allowance === BigInt(0) && !txIsSuccess
+ const needsApproval = allowance === BigInt(0) && approveStatus !== "success"
const isDisabled =
(accountId && !baseTokenAmount) ||
@@ -92,8 +85,11 @@ export default function DepositButton() {
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={}
diff --git a/trade.renegade.fi/app/providers.tsx b/trade.renegade.fi/app/providers.tsx
index 8f259696..b0482bbe 100644
--- a/trade.renegade.fi/app/providers.tsx
+++ b/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({
-
-
-
-
-
-
- {children}
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+ {children}
+
+
+
+
+
+
diff --git a/trade.renegade.fi/components/modals/token-select-modal.tsx b/trade.renegade.fi/components/modals/token-select-modal.tsx
index bd740ddf..9c1b0a61 100644
--- a/trade.renegade.fi/components/modals/token-select-modal.tsx
+++ b/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"],
})
diff --git a/trade.renegade.fi/components/steppers/create-stepper/steps/default-step.tsx b/trade.renegade.fi/components/steppers/create-stepper/steps/default-step.tsx
index 4ebb884d..1b4e8068 100644
--- a/trade.renegade.fi/components/steppers/create-stepper/steps/default-step.tsx
+++ b/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,8 +9,10 @@ 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()
@@ -20,40 +20,38 @@ export function DefaultStep() {
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() {