From 60554ff53970005aa69eb9979a50d7e762499751 Mon Sep 17 00:00:00 2001 From: Jennifer Echenim Date: Mon, 5 Aug 2024 16:12:41 +0400 Subject: [PATCH] fix: token and chain select defaultValue bug --- .../modules/bridge/chain-select.tsx | 99 +++++++------------ .../src/components/modules/bridge/index.tsx | 68 +++++-------- .../modules/bridge/token-select.tsx | 9 +- .../modules/bridge/transfer-from-section.tsx | 4 +- .../modules/bridge/transfer-to-section.tsx | 6 +- .../components/providers/wallet-provider.tsx | 14 --- .../src/bridge/frontend/src/types/index.ts | 2 - 7 files changed, 75 insertions(+), 127 deletions(-) diff --git a/contracts/src/bridge/frontend/src/components/modules/bridge/chain-select.tsx b/contracts/src/bridge/frontend/src/components/modules/bridge/chain-select.tsx index 6b24dd7321..a83c78bd54 100644 --- a/contracts/src/bridge/frontend/src/components/modules/bridge/chain-select.tsx +++ b/contracts/src/bridge/frontend/src/components/modules/bridge/chain-select.tsx @@ -9,78 +9,51 @@ import { } from "../../ui/select"; import useCustomHookForm from "@/src/hooks/useCustomHookForm"; -export const ChainSelectFrom = ({ +export const ChainSelect = ({ form, chains, + name, }: { form: ReturnType; chains: Chain[]; + name: string; }) => { + console.log("🚀 ~ ChainSelect ~ ", name, form.getValues(name)); return ( ( - - - - - )} - /> - ); -}; - -export const ChainSelectTo = ({ - form, - chains, -}: { - form: ReturnType; - chains: Chain[]; -}) => { - return ( - ( - - - - - )} + name={name} + render={({ field }) => { + console.log("🚀 ~", name, field.value.value); + return ( + + + + + ); + }} /> ); }; diff --git a/contracts/src/bridge/frontend/src/components/modules/bridge/index.tsx b/contracts/src/bridge/frontend/src/components/modules/bridge/index.tsx index 37cb03a36a..47cffdfe73 100644 --- a/contracts/src/bridge/frontend/src/components/modules/bridge/index.tsx +++ b/contracts/src/bridge/frontend/src/components/modules/bridge/index.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useEffect } from "react"; import { CardHeader, CardTitle, @@ -10,7 +10,7 @@ import { Separator } from "../../ui/separator"; import { Form } from "@/src/components/ui/form"; import { toast } from "@/src/components/ui/use-toast"; import { DrawerDialog } from "../common/drawer-dialog"; -import { L1TOKENS, L2TOKENS } from "@/src/lib/constants"; +import { L1CHAINS, L1TOKENS, L2CHAINS, L2TOKENS } from "@/src/lib/constants"; import { useWatch } from "react-hook-form"; import useCustomHookForm from "@/src/hooks/useCustomHookForm"; import { useWalletStore } from "../../providers/wallet-provider"; @@ -21,39 +21,29 @@ import { SubmitButton } from "./submit-button"; import { SwitchNetworkButton } from "./switch-network-button"; import { TransferToSection } from "./transfer-to-section"; import { bridgeSchema } from "@/src/schemas/bridge"; -import { isAddress } from "ethers/lib/utils"; +import { handleStorage } from "@/src/lib/utils/walletUtils"; export default function Dashboard() { - const { - provider, - address, - walletConnected, - switchNetwork, - isL1ToL2, - fromChains, - toChains, - } = useWalletStore(); + const { provider, address, walletConnected, switchNetwork, isL1ToL2 } = + useWalletStore(); const { getNativeBalance, getTokenBalance, sendERC20, sendNative } = useContract(); const defaultValues = { - amount: "", - fromChain: fromChains[0].value, - toChain: toChains[0].value, - token: isL1ToL2 ? L1TOKENS[0].value : L2TOKENS[0].value, + fromChain: isL1ToL2 ? L1CHAINS[0] : L2CHAINS[0], + toChain: isL1ToL2 ? L2CHAINS[0] : L1CHAINS[0], + token: isL1ToL2 ? L1TOKENS[0] : L2TOKENS[0], receiver: address, + amount: "", }; const form = useCustomHookForm(bridgeSchema, { defaultValues }); - const { - handleSubmit, - control, - setValue, - reset, - setError, - formState: { errors }, - } = form; + const { handleSubmit, control, setValue, reset, setError, formState } = form; + + const tokens = isL1ToL2 ? L1TOKENS : L2TOKENS; + const fromChains = isL1ToL2 ? L1CHAINS : L2CHAINS; + const toChains = isL1ToL2 ? L2CHAINS : L1CHAINS; const textValues = useWatch({ control, @@ -64,24 +54,22 @@ export default function Dashboard() { const [loading, setLoading] = React.useState(false); const [fromTokenBalance, setFromTokenBalance] = React.useState(0); - const tokens = isL1ToL2 ? L1TOKENS : L2TOKENS; - const [open, setOpen] = React.useState(false); + useEffect(() => { + const storedReceiver = handleStorage.get("tenBridgeReceiver"); + if (storedReceiver) { + setValue("receiver", storedReceiver); + } + }, []); + React.useEffect(() => { const fetchTokenBalance = async (token: Token) => { setLoading(true); try { const balance = token.isNative - ? await getNativeBalance( - provider, - isAddress(receiver) ? receiver : address - ) - : await getTokenBalance( - token.address, - isAddress(receiver) ? receiver : address, - provider - ); + ? await getNativeBalance(provider, address) + : await getTokenBalance(token.address, address, provider); setFromTokenBalance(balance); } catch (error) { console.error(error); @@ -91,12 +79,11 @@ export default function Dashboard() { }; if (token) { - const selectedToken = tokens.find((t) => t.value === token); - if (selectedToken) { - fetchTokenBalance(selectedToken); + if (token) { + fetchTokenBalance(token); } } - }, [fromChain, token, amount, receiver, provider, tokens, isL1ToL2]); + }, [fromChain, token, amount, receiver, provider, isL1ToL2]); const onSubmit = React.useCallback( async (data: any) => { @@ -108,7 +95,6 @@ export default function Dashboard() { description: "Bridge transaction initiated", variant: ToastType.INFO, }); - const token = tokens.find((t) => t.value === transactionData.token); if (!token) throw new Error("Invalid token"); const sendTransaction = token.isNative ? sendNative : sendERC20; @@ -139,7 +125,7 @@ export default function Dashboard() { setLoading(false); } }, - [address, tokens, fromChain] + [address, token] ); const setAmount = React.useCallback( diff --git a/contracts/src/bridge/frontend/src/components/modules/bridge/token-select.tsx b/contracts/src/bridge/frontend/src/components/modules/bridge/token-select.tsx index 3afed14c60..70165aa5cc 100644 --- a/contracts/src/bridge/frontend/src/components/modules/bridge/token-select.tsx +++ b/contracts/src/bridge/frontend/src/components/modules/bridge/token-select.tsx @@ -14,10 +14,15 @@ export const TokenSelect = ({ form, tokens }: any) => { name="token" render={({ field }) => ( - - + diff --git a/contracts/src/bridge/frontend/src/components/modules/bridge/transfer-from-section.tsx b/contracts/src/bridge/frontend/src/components/modules/bridge/transfer-from-section.tsx index df0d25112c..80a2cc47cc 100644 --- a/contracts/src/bridge/frontend/src/components/modules/bridge/transfer-from-section.tsx +++ b/contracts/src/bridge/frontend/src/components/modules/bridge/transfer-from-section.tsx @@ -2,7 +2,7 @@ import { Chain, Token } from "@/src/types"; import { Separator } from "../../ui/separator"; import { Skeleton } from "../../ui/skeleton"; import { AmountInput } from "./amount-input"; -import { ChainSelectFrom } from "./chain-select"; +import { ChainSelect } from "./chain-select"; import { PercentageButtons } from "./percentage-buttons"; import { TokenSelect } from "./token-select"; import useCustomHookForm from "@/src/hooks/useCustomHookForm"; @@ -28,7 +28,7 @@ export const TransferFromSection = ({
Transfer from - +
diff --git a/contracts/src/bridge/frontend/src/components/modules/bridge/transfer-to-section.tsx b/contracts/src/bridge/frontend/src/components/modules/bridge/transfer-to-section.tsx index 59a5d48fd6..a1018af4a3 100644 --- a/contracts/src/bridge/frontend/src/components/modules/bridge/transfer-to-section.tsx +++ b/contracts/src/bridge/frontend/src/components/modules/bridge/transfer-to-section.tsx @@ -2,7 +2,7 @@ import { PlusIcon } from "lucide-react"; import { Button } from "../../ui/button"; import { Skeleton } from "../../ui/skeleton"; import TruncatedAddress from "../common/truncated-address"; -import { ChainSelectTo } from "./chain-select"; +import { ChainSelect } from "./chain-select"; import { Chain } from "@/src/types"; import { isAddress } from "ethers/lib/utils"; import useCustomHookForm from "@/src/hooks/useCustomHookForm"; @@ -26,7 +26,7 @@ export const TransferToSection = ({
Transfer to - +