Skip to content

Commit

Permalink
cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
@sehyunc
sehyunc committed Oct 9, 2024
1 parent d074714 commit 7191ed8
Show file tree
Hide file tree
Showing 3 changed files with 40 additions and 130 deletions.
89 changes: 21 additions & 68 deletions components/dialogs/transfer/default-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -81,33 +80,34 @@ export function DefaultForm({
form: UseFormReturn<z.infer<typeof formSchema>>
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<string[]>([])
const [currentStep, setCurrentStep] = React.useState(0)
const [steps, setSteps] = React.useState<string[]>([])

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)
Expand Down Expand Up @@ -169,7 +169,6 @@ export function DefaultForm({
data: approveHash,
writeContractAsync: handleApprove,
status: approveStatus,
reset: resetApprove,
} = useWriteErc20Approve({
mutation: {
onError: (error) => catchError(error, "Couldn't approve"),
Expand All @@ -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)
Expand All @@ -218,55 +210,20 @@ 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)
// form.reset()
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<typeof formSchema>) {
// setSteps([])
// setCurrentStep(0)
// resetMutations()
const isAmountSufficient = checkAmount(
queryClient,
values.amount,
Expand Down Expand Up @@ -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 &&
Expand All @@ -337,7 +291,6 @@ export function DefaultForm({
})
return
}
// TODO: Check if balance is sufficient
const isBalanceSufficient = checkBalance({
amount: values.amount,
mint: values.mint,
Expand Down
53 changes: 8 additions & 45 deletions components/dialogs/transfer/usdc-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -84,9 +85,11 @@ export function USDCForm({
form: UseFormReturn<z.infer<typeof formSchema>>
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<string[]>([])
Expand All @@ -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)

Expand Down Expand Up @@ -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"),
Expand Down Expand Up @@ -232,7 +231,6 @@ export function USDCForm({
data: swapHash,
sendTransaction: handleSwap,
status: swapStatus,
reset: resetSwap,
} = useSendTransaction({
mutation: {
onError: (error) => catchError(error, "Couldn't swap"),
Expand Down Expand Up @@ -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"),
Expand All @@ -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)
Expand All @@ -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<typeof formSchema>) {
resetMutations()
const isAmountSufficient = checkAmount(
queryClient,
snapshot.swapRequired
Expand Down
28 changes: 11 additions & 17 deletions components/dialogs/transfer/weth-form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -91,19 +93,17 @@ export function WETHForm({
form: UseFormReturn<z.infer<typeof formSchema>>
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<string[]>([])
const isTradePage = usePathname().includes("/trade")
const queryClient = useQueryClient()
const router = useRouter()
const [currentStep, setCurrentStep] = React.useState(0)
const [steps, setSteps] = React.useState<string[]>([])
const [unwrapRequired, setUnwrapRequired] = React.useState(false)

const mint = useWatch({
control: form.control,
name: "mint",
Expand All @@ -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),
Expand Down Expand Up @@ -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 &&
Expand All @@ -396,7 +391,6 @@ export function WETHForm({
})
return
}
// TODO: Check if balance is sufficient
const isBalanceSufficient = checkBalance({
amount: values.amount,
mint: values.mint,
Expand Down

0 comments on commit 7191ed8

Please sign in to comment.