Skip to content

Commit

Permalink
fix(rainbow): fix rainbow modal problem
Browse files Browse the repository at this point in the history
  • Loading branch information
@hamidroohi92
hamidroohi92 committed Aug 24, 2024
1 parent b0512c6 commit d88a489
Show file tree
Hide file tree
Showing 9 changed files with 181 additions and 172 deletions.
2 changes: 1 addition & 1 deletion src/app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export const metadata: Metadata = {

export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" className="h-[100vh] w-[100vw] overflow-hidden">
<html lang="en" className="h-[100vh] w-[100vw]">
<body
className={`${inter.className} h-[100vh] w-[100vw] overflow-hidden bg-[#F2F3F5] text-base font-normal text-[#121619]`}
>
Expand Down
9 changes: 4 additions & 5 deletions src/components/accountButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
"use client";

import DisconnectButton from "./disconnetButton";
import data from "../data/data.json";
import Image from "next/image";
Expand All @@ -22,14 +20,15 @@ export default function AccountButton() {
activeSenderWallet,
activeRecipientWallet,
setSender,
activeSenderAccount,
sourceAssetBalance,
setActiveSenderAccount,
setActiveRecipientAccount,
setActiveSenderWallet,
setActiveRecipientWallet,
} = useTransfer();

const [sourceAssetOptions, setSourceAssetOptions] = useState(defaultSourceAssetOptions);
const { sourceAssetBalance } = useTransfer();
const [subMenu, setSubMenu] = useState(false);
const handleToggleSubMenu = useCallback(() => {
setSubMenu((prev) => !prev);
Expand All @@ -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"
>
<span className="block h-[24px] w-[24px] bg-[url('/images/icons/assethub-icon.svg')] bg-contain bg-center bg-no-repeat" />
<p className="text-[14px] leading-[24px]">{sender && toShortAdrress(sender.address)}</p>
<p className="text-[14px] leading-[24px]">{address && toShortAdrress(address.toString())}</p>
<span className="block h-[16px] w-[16px] bg-[url('/images/icons/downarrow-icon.svg')] bg-contain bg-center bg-no-repeat" />
</div>
{subMenu && (
<div className="absolute right-[-21px] top-[calc(100%+20px)] flex w-[290px] flex-col gap-[20px] rounded-[10px] bg-white p-[20px]">
<div className="flex items-center gap-[10px]">
<span className="block h-[30px] w-[30px] bg-[url('/images/icons/assethub-icon.svg')] bg-contain bg-center bg-no-repeat" />
<p className="text-[16px] font-bold leading-[24px]">{sender && toShortAdrress(sender.address)}</p>
<p className="text-[16px] font-bold leading-[24px]">{address && toShortAdrress(address.toString())}</p>
<span className="block h-[18px] w-[18px] bg-[url('/images/icons/copy-icon.svg')] bg-contain bg-center bg-no-repeat" />
</div>
<DisconnectButton />
Expand Down
290 changes: 143 additions & 147 deletions src/components/appBox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -21,11 +20,8 @@ export default function AppBox() {
const { defaultSourceChainOptions } = parseCross();
const [selectedAsset, setSelectedAsset] = useState(supportedTokenList[0]);
const [allowedChain, setAllowedChain] = useState<any>([]);
const { defaultSourceAssetOptions } = parseCross();
// const [sourceAssetOptions, setSourceAssetOptions] = useState(defaultSourceAssetOptions);
const [amount, setAmount] = useState<string>("0");
const [successModal, setSuccessModal] = useState<boolean>(false);
const [pendingModal, setPendingModal] = useState<boolean>(false);

const {
sender,
Expand All @@ -34,7 +30,6 @@ export default function AppBox() {
setRecipient,
sourceAssetBalance,
sourceAsset,
targetAsset,
setTargetAsset,
setTransferAmount,
transferAmount,
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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],
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -320,146 +314,148 @@ export default function AppBox() {
});

return (
<animated.section
style={style}
className="flex h-fit w-[400px] flex-col gap-[20px] rounded-[20px] bg-white p-[20px]"
>
<animated.div
style={trails[0]}
className="flex h-[95px] flex-col gap-[10px] rounded-[10px] bg-[#F2F3F5] p-[20px]"
>
<div>
<p className="text-[12px] leading-[15.22px] text-[#12161980]">Token</p>
</div>
<div className="flex items-center gap-[10px]">
{supportedTokenList.map((item: any) => (
<div
className="flex items-center gap-[10px] duration-500"
key={item.name}
style={{
maxWidth: selectedAsset.name === item.name ? "5vw" : "30px",
transitionDelay: selectedAsset.name === item.name ? "0.3s" : "0s",
}}
onClick={() => {
setSelectedAsset(item);
}}
>
<Image
src={getAssetIconSrc(item.icon)}
width={30}
height={30}
alt="item.name"
style={{ borderRadius: "50%" }}
/>
<p className="overflow-hidden text-[18px] font-[700] leading-[23px]">{item.name}</p>
</div>
))}
</div>
</animated.div>
<animated.div
style={trails[1]}
className="flex h-[95px] flex-col gap-[10px] rounded-[10px] bg-[#F2F3F5] p-[10px]"
>
<div className="flex items-center justify-between">
<p className="text-[12px] leading-[15.22px] text-[#12161980]">Sender</p>
<ChainSelectInput options={allowedChain} who="sender" />
</div>
<input
type="text"
value={sender?.address}
onChange={handleSenderAddressChange}
className="h-[24px] text-ellipsis whitespace-nowrap border-none bg-transparent text-[14px] font-[700] leading-[24px] outline-none"
/>
</animated.div>
<animated.div
style={trails[2]}
className="z-[-1] flex h-[95px] flex-col gap-[10px] rounded-[10px] bg-[#F2F3F5] p-[10px]"
<>
<animated.section
style={style}
className="flex h-fit w-[400px] flex-col gap-[20px] rounded-[20px] bg-white p-[20px]"
>
<div className="flex items-center justify-between">
<p className="text-[12px] leading-[15.22px] text-[#12161980]">Recipient</p>
<ChainSelectInput options={allowedChain} who="target" />
</div>
<input
type="text"
value={recipient?.address}
onChange={handleRecipientAddressChange}
className="h-[24px] text-ellipsis whitespace-nowrap border-none bg-transparent text-[14px] font-[700] leading-[24px] outline-none"
/>
</animated.div>
<animated.div style={trails[3]}>
<div className="flex h-[95px] flex-col gap-[10px] rounded-[10px] bg-[#F2F3F5] p-[10px]">
<animated.div
style={trails[0]}
className="flex h-[95px] flex-col gap-[10px] rounded-[10px] bg-[#F2F3F5] p-[20px]"
>
<div>
<p className="text-[12px] leading-[15.22px] text-[#12161980]">Amount</p>
<p className="text-[12px] leading-[15.22px] text-[#12161980]">Token</p>
</div>
<div className="flex items-center justify-center gap-[10px]">
<input
type="text"
value={transferAmount?.input}
onChange={handleInputChange}
className="h-[24px] flex-grow text-ellipsis whitespace-nowrap border-none bg-transparent text-[14px] font-[700] leading-[24px] outline-none"
/>
<button
onClick={() => {
if (sourceAssetBalance?.amount && assetSupply) {
if (assetLimit && assetSupply.gte(assetLimit)) {
setTransferAmount({ valid: !(min && min.gt(BN_ZERO)), input: "0", amount: BN_ZERO });
} else if (assetLimit) {
const remaining = assetLimit.sub(assetSupply);
const amount = remaining.lte(sourceAssetBalance?.amount) ? remaining : sourceAssetBalance?.amount;
const input = formatUnits(BigInt(amount.toString()), sourceAsset.decimals);
setTransferAmount({ valid: !(min && min.gt(amount)), input, amount });
<div className="flex items-center gap-[10px]">
{supportedTokenList.map((item: any) => (
<div
className="flex items-center gap-[10px] duration-500"
key={item.name}
style={{
maxWidth: selectedAsset.name === item.name ? "5vw" : "30px",
transitionDelay: selectedAsset.name === item.name ? "0.3s" : "0s",
}}
onClick={() => {
setSelectedAsset(item);
}}
>
<Image
src={getAssetIconSrc(item.icon)}
width={30}
height={30}
alt="item.name"
style={{ borderRadius: "50%" }}
/>
<p className="overflow-hidden text-[18px] font-[700] leading-[23px]">{item.name}</p>
</div>
))}
</div>
</animated.div>
<animated.div
style={trails[1]}
className="flex h-[95px] flex-col gap-[10px] rounded-[10px] bg-[#F2F3F5] p-[10px]"
>
<div className="flex items-center justify-between">
<p className="text-[12px] leading-[15.22px] text-[#12161980]">Sender</p>
<ChainSelectInput options={allowedChain} who="sender" />
</div>
<input
type="text"
value={sender?.address}
onChange={handleSenderAddressChange}
className="h-[24px] text-ellipsis whitespace-nowrap border-none bg-transparent text-[14px] font-[700] leading-[24px] outline-none"
/>
</animated.div>
<animated.div
style={trails[2]}
className="z-[-1] flex h-[95px] flex-col gap-[10px] rounded-[10px] bg-[#F2F3F5] p-[10px]"
>
<div className="flex items-center justify-between">
<p className="text-[12px] leading-[15.22px] text-[#12161980]">Recipient</p>
<ChainSelectInput options={allowedChain} who="target" />
</div>
<input
type="text"
value={recipient?.address}
onChange={handleRecipientAddressChange}
className="h-[24px] text-ellipsis whitespace-nowrap border-none bg-transparent text-[14px] font-[700] leading-[24px] outline-none"
/>
</animated.div>
<animated.div style={trails[3]}>
<div className="flex h-[95px] flex-col gap-[10px] rounded-[10px] bg-[#F2F3F5] p-[10px]">
<div>
<p className="text-[12px] leading-[15.22px] text-[#12161980]">Amount</p>
</div>
<div className="flex items-center justify-center gap-[10px]">
<input
type="text"
value={transferAmount?.input}
onChange={handleInputChange}
className="h-[24px] flex-grow text-ellipsis whitespace-nowrap border-none bg-transparent text-[14px] font-[700] leading-[24px] outline-none"
/>
<button
onClick={() => {
if (sourceAssetBalance?.amount && assetSupply) {
if (assetLimit && assetSupply.gte(assetLimit)) {
setTransferAmount({ valid: !(min && min.gt(BN_ZERO)), input: "0", amount: BN_ZERO });
} else if (assetLimit) {
const remaining = assetLimit.sub(assetSupply);
const amount = remaining.lte(sourceAssetBalance?.amount) ? remaining : sourceAssetBalance?.amount;
const input = formatUnits(BigInt(amount.toString()), sourceAsset.decimals);
setTransferAmount({ valid: !(min && min.gt(amount)), input, amount });
} else {
setTransferAmount({
amount: sourceAssetBalance?.amount,
valid: !(min && min.gt(sourceAssetBalance?.amount)),
input: formatUnits(BigInt(sourceAssetBalance?.amount.toString()), sourceAsset.decimals),
});
}
} else {
setTransferAmount({
amount: sourceAssetBalance?.amount,
valid: !(min && min.gt(sourceAssetBalance?.amount)),
input: formatUnits(BigInt(sourceAssetBalance?.amount.toString()), sourceAsset.decimals),
});
setTransferAmount({ valid: !(min && min.gt(BN_ZERO)), input: "0", amount: BN_ZERO });
}
} else {
setTransferAmount({ valid: !(min && min.gt(BN_ZERO)), input: "0", amount: BN_ZERO });
}
}}
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
</button>
}}
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
</button>
</div>
</div>
</div>
{sourceAssetBalance && (
<p className="mt-[5px] text-[12px] leading-[15px] text-[#12161980]">
Balance: {formatBalance(sourceAssetBalance.amount, sourceAsset.decimals)} {sourceAsset.name}
</p>
)}
{requireLimit ? (
<p className="mt-[5px] text-[12px] leading-[15px] text-[#FF0083]">
{`* Limit: ${formatBalance(assetLimit ?? BN_ZERO, sourceAsset?.decimals ?? 0)}, supply: ${formatBalance(
(assetSupply ?? BN_ZERO).add(transferAmount?.amount ?? BN_ZERO),
sourceAsset?.decimals ?? 0,
)}.`}
</p>
) : requireMin ? (
<p className="mt-[5px] text-[12px] leading-[15px] text-[#FF0083]">
{`* At least ${formatBalance(min ?? BN_ZERO, sourceAsset?.decimals ?? 0)} ${
sourceAsset.symbol
} for tx fee.`}
</p>
) : insufficient ? (
<p className="mt-[5px] text-[12px] leading-[15px] text-[#FF0083]">* Insufficient.</p>
) : null}
</animated.div>
<animated.div className="flex w-full" style={trails[4]}>
<button
onClick={handleSend}
disabled={!sender || (!needSwitchNetwork && disabledSend)}
className="h-[34px] w-full flex-shrink-0 rounded-[10px] bg-[#FF0083] text-[14px] leading-[24px] text-white disabled:opacity-50"
>
Send
</button>
</animated.div>
{sourceAssetBalance && (
<p className="mt-[5px] text-[12px] leading-[15px] text-[#12161980]">
Balance: {formatBalance(sourceAssetBalance.amount, sourceAsset.decimals)} {sourceAsset.name}
</p>
)}
{requireLimit ? (
<p className="mt-[5px] text-[12px] leading-[15px] text-[#FF0083]">
{`* Limit: ${formatBalance(assetLimit ?? BN_ZERO, sourceAsset?.decimals ?? 0)}, supply: ${formatBalance(
(assetSupply ?? BN_ZERO).add(transferAmount?.amount ?? BN_ZERO),
sourceAsset?.decimals ?? 0,
)}.`}
</p>
) : requireMin ? (
<p className="mt-[5px] text-[12px] leading-[15px] text-[#FF0083]">
{`* At least ${formatBalance(min ?? BN_ZERO, sourceAsset?.decimals ?? 0)} ${
sourceAsset.symbol
} for tx fee.`}
</p>
) : insufficient ? (
<p className="mt-[5px] text-[12px] leading-[15px] text-[#FF0083]">* Insufficient.</p>
) : null}
</animated.div>
<animated.div className="flex w-full" style={trails[4]}>
<button
onClick={handleSend}
disabled={!sender || (!needSwitchNetwork && disabledSend)}
className="h-[34px] w-full flex-shrink-0 rounded-[10px] bg-[#FF0083] text-[14px] leading-[24px] text-white disabled:opacity-50"
>
Send
</button>
</animated.div>
</animated.section>

<SuccessModal visible={successModal} onClose={handleCloseSuccessModal} />
<PendingModal visible={busy} />
</animated.section>
</>
);
}

Expand Down
Loading

0 comments on commit d88a489

Please sign in to comment.