diff --git a/src/app/layout.tsx b/src/app/layout.tsx index ac1fbd7..d65ef54 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -17,7 +17,7 @@ export const metadata: Metadata = { export default function RootLayout({ children }: { children: React.ReactNode }) { return ( - + diff --git a/src/components/accountButton.tsx b/src/components/accountButton.tsx index 2d90349..4003800 100644 --- a/src/components/accountButton.tsx +++ b/src/components/accountButton.tsx @@ -1,5 +1,3 @@ -"use client"; - import DisconnectButton from "./disconnetButton"; import data from "../data/data.json"; import Image from "next/image"; @@ -22,6 +20,8 @@ export default function AccountButton() { activeSenderWallet, activeRecipientWallet, setSender, + activeSenderAccount, + sourceAssetBalance, setActiveSenderAccount, setActiveRecipientAccount, setActiveSenderWallet, @@ -29,7 +29,6 @@ export default function AccountButton() { } = useTransfer(); const [sourceAssetOptions, setSourceAssetOptions] = useState(defaultSourceAssetOptions); - const { sourceAssetBalance } = useTransfer(); const [subMenu, setSubMenu] = useState(false); const handleToggleSubMenu = useCallback(() => { setSubMenu((prev) => !prev); @@ -42,14 +41,14 @@ export default function AccountButton() { className="relative flex h-[36px] w-fit cursor-pointer items-center justify-center gap-[5px] rounded-[10px] bg-white px-[10px] duration-300 hover:shadow-lg" > -

{sender && toShortAdrress(sender.address)}

+

{address && toShortAdrress(address.toString())}

{subMenu && (
-

{sender && toShortAdrress(sender.address)}

+

{address && toShortAdrress(address.toString())}

diff --git a/src/components/appBox.tsx b/src/components/appBox.tsx index a1404cf..524e3f4 100644 --- a/src/components/appBox.tsx +++ b/src/components/appBox.tsx @@ -10,7 +10,6 @@ import { formatBalance, getAssetIconSrc, isExceedingCrossChainLimit, isValidAddr import { useTransfer } from "@/hooks"; import { BN, BN_ZERO, bnToBn } from "@polkadot/util"; import { formatUnits, parseUnits } from "viem"; -import { InputAlert } from "@/old_components/input-alert"; import { WalletID } from "@/types"; import { useAccount, useNetwork, useSwitchNetwork } from "wagmi"; import notification from "@/ui/notification"; @@ -21,11 +20,8 @@ export default function AppBox() { const { defaultSourceChainOptions } = parseCross(); const [selectedAsset, setSelectedAsset] = useState(supportedTokenList[0]); const [allowedChain, setAllowedChain] = useState([]); - const { defaultSourceAssetOptions } = parseCross(); // const [sourceAssetOptions, setSourceAssetOptions] = useState(defaultSourceAssetOptions); - const [amount, setAmount] = useState("0"); const [successModal, setSuccessModal] = useState(false); - const [pendingModal, setPendingModal] = useState(false); const { sender, @@ -34,7 +30,6 @@ export default function AppBox() { setRecipient, sourceAssetBalance, sourceAsset, - targetAsset, setTargetAsset, setTransferAmount, transferAmount, @@ -62,10 +57,13 @@ export default function AppBox() { } = useTransfer(); const handleCloseSuccessModal = useCallback(() => { setSuccessModal(false); - }, []); - - const handleClosePendingModal = useCallback(() => { - setPendingModal(false); + setTransferAmount({ valid: true, input: "", amount: BN_ZERO }); + updateSourceAssetBalance(); + updateTargetAssetBalance(); + updateTargetAssetSupply(); + updateSourceNativeBalance(); + updateTargetNativeBalance(); + updateFeeBalanceOnSourceChain(); }, []); const sourceChainRef = useRef(sourceChain); @@ -130,6 +128,8 @@ export default function AppBox() { const { switchNetwork } = useSwitchNetwork(); const { address } = useAccount(); + console.log("lists: -------------------", sender, activeSenderWallet, activeSenderAccount, address); + const needSwitchNetwork = useMemo( () => activeSenderWallet === WalletID.EVM && chain && chain.id !== sourceChain.id, [chain, sourceChain, activeSenderWallet], @@ -221,13 +221,7 @@ export default function AppBox() { const callback = { successCb: () => { setBusy(false); - setTransferAmount({ valid: true, input: "", amount: BN_ZERO }); - updateSourceAssetBalance(); - updateTargetAssetBalance(); - updateTargetAssetSupply(); - updateSourceNativeBalance(); - updateTargetNativeBalance(); - updateFeeBalanceOnSourceChain(); + setSuccessModal(true); }, failedCb: () => { setBusy(false); @@ -320,146 +314,148 @@ export default function AppBox() { }); return ( - - -
-

Token

-
-
- {supportedTokenList.map((item: any) => ( -
{ - setSelectedAsset(item); - }} - > - item.name -

{item.name}

-
- ))} -
- - -
-

Sender

- -
- - - + -
-

Recipient

- -
- - - -
+
-

Amount

+

Token

-
- - + }} + className="duration-300s h-[26px] w-fit flex-shrink-0 rounded-[5px] bg-[#FF00831A] px-[15px] text-[12px] font-bold text-[#FF0083] hover:shadow-lg" + > + Max + +
-
- {sourceAssetBalance && ( -

- Balance: {formatBalance(sourceAssetBalance.amount, sourceAsset.decimals)} {sourceAsset.name} -

- )} - {requireLimit ? ( -

- {`* Limit: ${formatBalance(assetLimit ?? BN_ZERO, sourceAsset?.decimals ?? 0)}, supply: ${formatBalance( - (assetSupply ?? BN_ZERO).add(transferAmount?.amount ?? BN_ZERO), - sourceAsset?.decimals ?? 0, - )}.`} -

- ) : requireMin ? ( -

- {`* At least ${formatBalance(min ?? BN_ZERO, sourceAsset?.decimals ?? 0)} ${ - sourceAsset.symbol - } for tx fee.`} -

- ) : insufficient ? ( -

* Insufficient.

- ) : null} - - - - + {sourceAssetBalance && ( +

+ Balance: {formatBalance(sourceAssetBalance.amount, sourceAsset.decimals)} {sourceAsset.name} +

+ )} + {requireLimit ? ( +

+ {`* Limit: ${formatBalance(assetLimit ?? BN_ZERO, sourceAsset?.decimals ?? 0)}, supply: ${formatBalance( + (assetSupply ?? BN_ZERO).add(transferAmount?.amount ?? BN_ZERO), + sourceAsset?.decimals ?? 0, + )}.`} +

+ ) : requireMin ? ( +

+ {`* At least ${formatBalance(min ?? BN_ZERO, sourceAsset?.decimals ?? 0)} ${ + sourceAsset.symbol + } for tx fee.`} +

+ ) : insufficient ? ( +

* Insufficient.

+ ) : null} + + + + + - + ); } diff --git a/src/components/chainButton.tsx b/src/components/chainButton.tsx index 1d0f107..513725f 100644 --- a/src/components/chainButton.tsx +++ b/src/components/chainButton.tsx @@ -1,5 +1,4 @@ import { useCallback, useRef, useState } from "react"; -import data from "../data/data.json"; import Image from "next/image"; import { useTransfer } from "@/hooks"; import { getChainLogoSrc, parseCross } from "@/utils"; @@ -22,8 +21,9 @@ export default function ChainButton() { const [subMenu, setSubMenu] = useState(false); const handleToggleSubMenu = useCallback(() => { - setSubMenu((prev) => !prev); - }, []); + setSubMenu(!subMenu); + }, [subMenu]); + return (
{sourceChainOptions.map((chain) => ( diff --git a/src/components/disconnetButton.tsx b/src/components/disconnetButton.tsx index 46955c7..eeb7582 100644 --- a/src/components/disconnetButton.tsx +++ b/src/components/disconnetButton.tsx @@ -1,7 +1,9 @@ import { useTransfer } from "@/hooks"; import { MouseEventHandler, useCallback } from "react"; +import { useDisconnect } from "wagmi"; export default function DisconnectButton() { + const { disconnect } = useDisconnect(); const { sender, sourceChain, @@ -21,13 +23,14 @@ export default function DisconnectButton() { setSender(undefined); setActiveSenderWallet(undefined); setActiveSenderAccount(undefined); + disconnect(); }, [setSender, setActiveSenderWallet, setActiveSenderAccount], ); return (
diff --git a/src/components/walletSelectionModal.tsx b/src/components/walletSelectionModal.tsx index 7cb8beb..830eddc 100644 --- a/src/components/walletSelectionModal.tsx +++ b/src/components/walletSelectionModal.tsx @@ -47,13 +47,13 @@ export default function WalletSelectionModal({ visible, onClose }: { visible: bo console.log("options", senderOptions); - useEffect(() => { - if (activeSenderWallet) { - const address = senderOptions[0].address; - const valid = address ? isValidAddress(address, sourceChain.addressType) : true; - setSender({ valid, address }); - } - }, [activeSenderWallet]); + // useEffect(() => { + // if (activeSenderWallet) { + // const address = senderOptions[0].address; + // const valid = address ? isValidAddress(address, sourceChain.addressType) : true; + // setSender({ valid, address }); + // } + // }, [activeSenderWallet]); return ( <> {visible && (