From 7191ed80641789cee42403a05cae05c0fcb4c002 Mon Sep 17 00:00:00 2001 From: sehyunc <41171808+sehyunc@users.noreply.github.com> Date: Tue, 8 Oct 2024 19:06:19 -0700 Subject: [PATCH] cleanup --- components/dialogs/transfer/default-form.tsx | 89 +++++--------------- components/dialogs/transfer/usdc-form.tsx | 53 ++---------- components/dialogs/transfer/weth-form.tsx | 28 +++--- 3 files changed, 40 insertions(+), 130 deletions(-) diff --git a/components/dialogs/transfer/default-form.tsx b/components/dialogs/transfer/default-form.tsx index 28de5c8d..15762796 100644 --- a/components/dialogs/transfer/default-form.tsx +++ b/components/dialogs/transfer/default-form.tsx @@ -3,8 +3,7 @@ import * as React from "react" import { usePathname, useRouter } from "next/navigation" import { VisuallyHidden } from "@radix-ui/react-visually-hidden" -import { Token, UpdateType } from "@renegade-fi/react" -import { useBalances } from "@renegade-fi/react" +import { Token, UpdateType, useBackOfQueueWallet } from "@renegade-fi/react" import { useQueryClient } from "@tanstack/react-query" import { AlertCircle, Check, Loader2 } from "lucide-react" import { UseFormReturn, useWatch } from "react-hook-form" @@ -19,8 +18,8 @@ import { checkAmount, checkBalance, formSchema, + isMaxBalance, } from "@/components/dialogs/transfer/helpers" -import { isMaxBalance } from "@/components/dialogs/transfer/helpers" import { MaxBalancesWarning } from "@/components/dialogs/transfer/max-balances-warning" import { TransferStatusDisplay } from "@/components/dialogs/transfer/transfer-status-display" import { useIsMaxBalances } from "@/components/dialogs/transfer/use-is-max-balances" @@ -81,33 +80,34 @@ export function DefaultForm({ form: UseFormReturn> header: React.ReactNode }) { - const isDesktop = useMediaQuery("(min-width: 1024px)") + const { address } = useAccount() const { checkChain } = useCheckChain() - const router = useRouter() - const pathname = usePathname() - const isTradePage = pathname.includes("/trade") + const isDesktop = useMediaQuery("(min-width: 1024px)") + const { data: maintenanceMode } = useMaintenanceMode() + const isTradePage = usePathname().includes("/trade") const queryClient = useQueryClient() + const router = useRouter() const { setSide } = useSide() - const { data: maintenanceMode } = useMaintenanceMode() - const [steps, setSteps] = React.useState([]) const [currentStep, setCurrentStep] = React.useState(0) + const [steps, setSteps] = React.useState([]) const mint = useWatch({ control: form.control, name: "mint", }) + const isMaxBalances = useIsMaxBalances(mint) const baseToken = mint ? Token.findByAddress(mint as `0x${string}`) : undefined - const { address } = useAccount() - const isMaxBalances = useIsMaxBalances(mint) // Ensure price is loaded usePriceQuery(baseToken?.address || "0x") - const renegadeBalances = useBalances() - const renegadeBalance = baseToken - ? renegadeBalances.get(baseToken.address)?.amount - : undefined + const { data: renegadeBalance } = useBackOfQueueWallet({ + query: { + select: (data) => + data.balances.find((balance) => balance.mint === mint)?.amount, + }, + }) const formattedRenegadeBalance = baseToken ? formatUnits(renegadeBalance ?? BigInt(0), baseToken.decimals) @@ -169,7 +169,6 @@ export function DefaultForm({ data: approveHash, writeContractAsync: handleApprove, status: approveStatus, - reset: resetApprove, } = useWriteErc20Approve({ mutation: { onError: (error) => catchError(error, "Couldn't approve"), @@ -190,17 +189,10 @@ export function DefaultForm({ ) // Deposit - const { - handleDeposit, - status: depositStatus, - reset: resetDeposit, - } = useDeposit() + const { handleDeposit, status: depositStatus } = useDeposit() - const { - status: depositTaskStatus, - setTaskId: setDepositTaskId, - reset: resetDepositTask, - } = useWaitForTask() + const { status: depositTaskStatus, setTaskId: setDepositTaskId } = + useWaitForTask() const handleDepositSuccess = (data: any) => { setDepositTaskId(data.taskId) @@ -218,19 +210,12 @@ export function DefaultForm({ } // Withdraw - const { - handleWithdraw, - status: withdrawStatus, - reset: resetWithdraw, - } = useWithdraw({ + const { handleWithdraw, status: withdrawStatus } = useWithdraw({ amount, mint, }) - const { - status: withdrawTaskStatus, - setTaskId: setWithdrawTaskId, - reset: resetWithdrawTask, - } = useWaitForTask() + const { status: withdrawTaskStatus, setTaskId: setWithdrawTaskId } = + useWaitForTask() const handleWithdrawSuccess = (data: any) => { setWithdrawTaskId(data.taskId) @@ -238,35 +223,7 @@ export function DefaultForm({ onSuccess?.() } - const resetMutations = React.useCallback(() => { - resetApprove() - resetDeposit() - resetWithdraw() - resetDepositTask() - resetWithdrawTask() - }, [ - resetApprove, - resetDeposit, - resetDepositTask, - resetWithdraw, - resetWithdrawTask, - ]) - - React.useEffect(() => { - const { unsubscribe } = form.watch((_, { name }) => { - if (name === "amount" || name === "mint") { - setSteps([]) - setCurrentStep(0) - resetMutations() - } - }) - return () => unsubscribe() - }, [form, resetMutations]) - async function onSubmit(values: z.infer) { - // setSteps([]) - // setCurrentStep(0) - // resetMutations() const isAmountSufficient = checkAmount( queryClient, values.amount, @@ -320,9 +277,6 @@ export function DefaultForm({ }) } } else { - const renegadeBalance = renegadeBalances.get( - values.mint as `0x${string}`, - )?.amount // User is allowed to withdraw whole balance even if amount is < MIN_TRANSFER_AMOUNT if ( !isAmountSufficient && @@ -337,7 +291,6 @@ export function DefaultForm({ }) return } - // TODO: Check if balance is sufficient const isBalanceSufficient = checkBalance({ amount: values.amount, mint: values.mint, diff --git a/components/dialogs/transfer/usdc-form.tsx b/components/dialogs/transfer/usdc-form.tsx index 807adf9e..fb3bd364 100644 --- a/components/dialogs/transfer/usdc-form.tsx +++ b/components/dialogs/transfer/usdc-form.tsx @@ -73,7 +73,8 @@ const USDCE = ADDITIONAL_TOKENS["USDC.e"] const QUOTE_STALE_TIME = 1000 * 60 * 1 // 1 minute -// Assume direction is deposit and mint is WETH +// Assume direction is deposit and mint is USDC +const baseToken = Token.findByTicker("USDC") export function USDCForm({ className, form, @@ -84,9 +85,11 @@ export function USDCForm({ form: UseFormReturn> header: React.ReactNode }) { - const isDesktop = useMediaQuery("(min-width: 1024px)") - const { data: maintenanceMode } = useMaintenanceMode() + const { address } = useAccount() const { checkChain } = useCheckChain() + const isMaxBalances = useIsMaxBalances(baseToken.address) + const { data: maintenanceMode } = useMaintenanceMode() + const isDesktop = useMediaQuery("(min-width: 1024px)") const queryClient = useQueryClient() const { setSide } = useSide() const [steps, setSteps] = React.useState([]) @@ -100,9 +103,6 @@ export function USDCForm({ control: form.control, name: "amount", }) - const baseToken = Token.findByTicker("USDC") - const { address } = useAccount() - const isMaxBalances = useIsMaxBalances(mint) // Ensure price is loaded usePriceQuery(baseToken.address) @@ -201,7 +201,6 @@ export function USDCForm({ writeContract: handleApproveSwap, status: approveSwapStatus, data: approveSwapHash, - reset: resetApproveSwap, } = useWriteErc20Approve({ mutation: { onError: (error) => catchError(error, "Couldn't approve swap"), @@ -232,7 +231,6 @@ export function USDCForm({ data: swapHash, sendTransaction: handleSwap, status: swapStatus, - reset: resetSwap, } = useSendTransaction({ mutation: { onError: (error) => catchError(error, "Couldn't swap"), @@ -278,7 +276,6 @@ export function USDCForm({ writeContract: handleApprove, status: approveStatus, data: approveHash, - reset: resetApprove, } = useWriteErc20Approve({ mutation: { onError: (error) => catchError(error, "Couldn't approve deposit"), @@ -305,17 +302,9 @@ export function USDCForm({ ) // Deposit - const { - handleDeposit, - status: depositStatus, - reset: resetDeposit, - } = useDeposit() + const { handleDeposit, status: depositStatus } = useDeposit() - const { - status: depositTaskStatus, - setTaskId, - reset: resetDepositTask, - } = useWaitForTask() + const { status: depositTaskStatus, setTaskId } = useWaitForTask() const handleDepositSuccess = (data: any) => { setTaskId(data.taskId) @@ -328,33 +317,7 @@ export function USDCForm({ setSide(Side.BUY) } - const resetMutations = React.useCallback(() => { - resetApproveSwap() - resetSwap() - resetApprove() - resetDeposit() - resetDepositTask() - }, [ - resetApprove, - resetApproveSwap, - resetSwap, - resetDeposit, - resetDepositTask, - ]) - - React.useEffect(() => { - const { unsubscribe } = form.watch((value, { name, type }) => { - if (name === "amount") { - setSteps([]) - setCurrentStep(0) - resetMutations() - } - }) - return () => unsubscribe() - }, [form, resetMutations]) - async function onSubmit(values: z.infer) { - resetMutations() const isAmountSufficient = checkAmount( queryClient, snapshot.swapRequired diff --git a/components/dialogs/transfer/weth-form.tsx b/components/dialogs/transfer/weth-form.tsx index 9c74993f..ef3b6765 100644 --- a/components/dialogs/transfer/weth-form.tsx +++ b/components/dialogs/transfer/weth-form.tsx @@ -78,7 +78,9 @@ import { useSide } from "@/providers/side-provider" import { WrapEthWarning } from "./wrap-eth-warning" -// Assume direction is deposit and mint is WETH +// Assume mint is WETH +const baseToken = Token.findByTicker("WETH") + export function WETHForm({ className, direction, @@ -91,19 +93,17 @@ export function WETHForm({ form: UseFormReturn> header: React.ReactNode }) { - const isDesktop = useMediaQuery("(min-width: 1024px)") - const baseToken = Token.findByTicker("WETH") const { address } = useAccount() const { checkChain } = useCheckChain() - const router = useRouter() - const pathname = usePathname() - const isTradePage = pathname.includes("/trade") - const queryClient = useQueryClient() + const isMaxBalances = useIsMaxBalances(baseToken.address) + const isDesktop = useMediaQuery("(min-width: 1024px)") const { data: maintenanceMode } = useMaintenanceMode() - const [steps, setSteps] = React.useState([]) + const isTradePage = usePathname().includes("/trade") + const queryClient = useQueryClient() + const router = useRouter() const [currentStep, setCurrentStep] = React.useState(0) + const [steps, setSteps] = React.useState([]) const [unwrapRequired, setUnwrapRequired] = React.useState(false) - const mint = useWatch({ control: form.control, name: "mint", @@ -112,15 +112,13 @@ export function WETHForm({ control: form.control, name: "amount", }) - const isMaxBalances = useIsMaxBalances(mint) - const { data: renegadeBalances } = useBackOfQueueWallet({ + const { data: renegadeBalance } = useBackOfQueueWallet({ query: { select: (data) => - new Map(data.balances.map((balance) => [balance.mint, balance])), + data.balances.find((balance) => balance.mint === mint)?.amount, }, }) - const renegadeBalance = renegadeBalances?.get(baseToken.address)?.amount const formattedRenegadeBalance = formatEther(renegadeBalance ?? BigInt(0)) const renegadeBalanceLabel = formatNumber( renegadeBalance ?? BigInt(0), @@ -379,9 +377,6 @@ export function WETHForm({ }) } } else { - const renegadeBalance = renegadeBalances?.get( - values.mint as `0x${string}`, - )?.amount // User is allowed to withdraw whole balance even if amount is < MIN_TRANSFER_AMOUNT if ( !isAmountSufficient && @@ -396,7 +391,6 @@ export function WETHForm({ }) return } - // TODO: Check if balance is sufficient const isBalanceSufficient = checkBalance({ amount: values.amount, mint: values.mint,