-
+
+ {!connected ? (
+
+ setConnectModal(true)} />
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+ {!sender ? (
+
{
+ handleCloseMenu();
+ setConnectModal(true);
+ }}
+ />
+ ) : (
+
+
+ {data.social.map((item: any) => (
+
+
+
+
+
);
}
diff --git a/src/components/pendingModal.tsx b/src/components/pendingModal.tsx
new file mode 100644
index 0000000..2aab8fd
--- /dev/null
+++ b/src/components/pendingModal.tsx
@@ -0,0 +1,33 @@
+import { useTrail, animated } from "@react-spring/web";
+import Image from "next/image";
+
+export default function PendingModal({ visible }: { visible: boolean }) {
+ const trails = useTrail(2, {
+ from: { transform: "translateX(-100%)", opacity: 0 },
+ to: { opacity: visible ? 1 : 0, transform: visible ? "translateX(0)" : "translateX(-100%)" },
+ });
+ return (
+ <>
+ {visible && (
+
+
+
+
+
+
+ Transaction is being Processed
+
+
+
+
+ )}
+
+ );
+}
diff --git a/src/components/successModal.tsx b/src/components/successModal.tsx
new file mode 100644
index 0000000..f77c0ae
--- /dev/null
+++ b/src/components/successModal.tsx
@@ -0,0 +1,45 @@
+import { useTransfer } from "@/hooks";
+import { formatBalance } from "@/utils";
+import Image from "next/image";
+import { useTrail, animated } from "@react-spring/web";
+
+export default function SuccessModal({ visible, onClose }: { visible: boolean; onClose: () => void }) {
+ const { sourceAsset, transferAmount } = useTransfer();
+
+ const trails = useTrail(3, {
+ from: { transform: "translateX(-100%)", opacity: 0 },
+ to: { opacity: visible ? 1 : 0, transform: visible ? "translateX(0)" : "translateX(-100%)" },
+ });
+ return (
+ <>
+ {visible && (
+
+
+
+
+
+
+ Success !
+
+ You send {formatBalance(transferAmount.amount, sourceAsset.decimals)} {sourceAsset.name}
+
+
+
+
+ OK
+
+
+ Detail
+
+
+
+
+
+ )}
+
+ );
+}
diff --git a/src/components/walletButton.tsx b/src/components/walletButton.tsx
new file mode 100644
index 0000000..5d98a5f
--- /dev/null
+++ b/src/components/walletButton.tsx
@@ -0,0 +1,135 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import WalletSelectionModal from "./walletSelectionModal";
+import { useTransfer } from "@/hooks";
+import { getChainLogoSrc, parseCross } from "@/utils";
+import { ChainConfig } from "@/types";
+import Image from "next/image";
+import data from "../data/data.json";
+
+export default function WalletButton({ openModal }: { openModal: () => void }) {
+ const [subMenu, setSubMenu] = useState
(false);
+ const [tab, setTab] = useState("evm");
+ const { sourceChain, setSourceChain } = useTransfer();
+ const { defaultSourceChainOptions } = parseCross();
+ const [sourceChainOptions, _setSourceChainOptions] = useState([...defaultSourceChainOptions]);
+
+ const sourceChainRef = useRef(sourceChain);
+
+ const _setSourceChain = useCallback(
+ (chain: ChainConfig | undefined) => {
+ setSourceChain((prev) => chain ?? prev);
+ sourceChainRef.current = chain ?? sourceChainRef.current;
+ },
+ [setSourceChain],
+ );
+
+ const handleToggleSubMenu = useCallback(() => {
+ setSubMenu(!subMenu);
+ }, [subMenu]);
+
+ useEffect(() => {
+ window.addEventListener("click", () => {
+ console.log("hi");
+ setSubMenu(false);
+ });
+ }, []);
+
+ console.log(subMenu);
+ return (
+
+
{
+ e.stopPropagation();
+ handleToggleSubMenu();
+ }}
+ className="flex h-[36px] w-[190px] cursor-pointer items-center gap-[5px] rounded-[10px] bg-white px-[10px] hover:shadow-lg lg:w-fit lg:justify-center"
+ >
+
+
Connect Wallet
+
+
{
+ e.stopPropagation();
+ }}
+ style={{ maxHeight: subMenu ? "100vh" : "0" }}
+ className="absolute right-0 top-[calc(100%+20px)] z-50 flex h-fit w-[500px] flex-col gap-[40px] overflow-hidden rounded-[10px] bg-white duration-700"
+ >
+
+ {sourceChainOptions.map((chain) => (
+
{
+ if (chain.id !== undefined) {
+ _setSourceChain(chain);
+ setSubMenu(false);
+ }
+ }}
+ >
+
+
+ {chain.name.includes("Polkadot") ? chain.name.replace(" AssetHub", "") : chain.name}
+
+
+ ))}
+
+
+
+
{
+ setTab("evm");
+ }}
+ className="-mb-[1px] w-[150px] cursor-pointer rounded-[10px_10px_0_0] p-[10px] text-center"
+ style={{
+ borderTop: tab === "evm" ? "1px solid #FF0083" : "none",
+ borderRight: tab === "evm" ? "1px solid #FF0083" : "none",
+ borderLeft: tab === "evm" ? "1px solid #FF0083" : "none",
+ borderBottom: "none",
+ backgroundColor: tab === "evm" ? "white" : "transparent",
+ }}
+ >
+ EVM wallet
+
+
{
+ setTab("substrate");
+ }}
+ className="-mb-[1px] w-[150px] cursor-pointer rounded-[10px_10px_0_0] p-[10px] text-center"
+ style={{
+ borderBottom: "none",
+ borderTop: tab === "substrate" ? "1px solid #FF0083" : "none",
+ borderRight: tab === "substrate" ? "1px solid #FF0083" : "none",
+ borderLeft: tab === "substrate" ? "1px solid #FF0083" : "none",
+ backgroundColor: tab === "substrate" ? "#fff" : "transparent",
+ }}
+ >
+ Substrate wallet
+
+
+
+ {data.wallets[tab === "evm" ? "evm" : "substrate"].map((item: any) => (
+
+ ))}
+
+
+
+
+
+
+
+
+ {switchWallet
+ ? "The selected source chain is not supported by current wallet, please change you wallet"
+ : "Select a wallet Type"}
+
+
+ {
+ setActiveSenderWallet(WalletID.TALISMAN);
+ connectTalisman();
+ onClose();
+ }}
+ >
+ Talisman
+
+ {
+ setActiveSenderWallet(WalletID.EVM);
+ openConnectModal?.();
+ onClose();
+ }}
+ >
+ EVM wallets
+
+
+
+
+ Cancel
+
+
+
+
+
+
{`© ${new Date().getFullYear()} Darwinia Network`}
+
+
+
+
+
+
+
+
+
+
+
+
+ {children}
+
+ );
+}
diff --git a/src/old_components/header.tsx b/src/old_components/header.tsx
new file mode 100644
index 0000000..6a45158
--- /dev/null
+++ b/src/old_components/header.tsx
@@ -0,0 +1,14 @@
+import Image from "next/image";
+import Link from "next/link";
+
+export default function Header() {
+ return (
+
+ );
+}
diff --git a/src/components/input-alert.tsx b/src/old_components/input-alert.tsx
similarity index 100%
rename from src/components/input-alert.tsx
rename to src/old_components/input-alert.tsx
diff --git a/src/components/label.tsx b/src/old_components/label.tsx
similarity index 100%
rename from src/components/label.tsx
rename to src/old_components/label.tsx
diff --git a/src/components/page-wrap.tsx b/src/old_components/page-wrap.tsx
similarity index 100%
rename from src/components/page-wrap.tsx
rename to src/old_components/page-wrap.tsx
diff --git a/src/components/switch-cross.tsx b/src/old_components/switch-cross.tsx
similarity index 100%
rename from src/components/switch-cross.tsx
rename to src/old_components/switch-cross.tsx
diff --git a/src/components/transfer-section.tsx b/src/old_components/transfer-section.tsx
similarity index 100%
rename from src/components/transfer-section.tsx
rename to src/old_components/transfer-section.tsx
diff --git a/src/components/transfer.tsx b/src/old_components/transfer.tsx
similarity index 98%
rename from src/components/transfer.tsx
rename to src/old_components/transfer.tsx
index c4e4c73..34e24fa 100644
--- a/src/components/transfer.tsx
+++ b/src/old_components/transfer.tsx
@@ -253,11 +253,11 @@ export default function Transfer() {
updateTargetNativeBalance,
]);
- useEffect(() => {
- const options = availableSourceAssetOptions[sourceChain.network] || [];
- setSourceAssetOptions(options);
- _setSourceAsset(options.at(0));
- }, [sourceChain, _setSourceAsset]);
+ // useEffect(() => {
+ // const options = availableSourceAssetOptions[sourceChain.network] || [];
+ // setSourceAssetOptions(options);
+ // _setSourceAsset(options.at(0));
+ // }, [sourceChain, _setSourceAsset]);
useEffect(() => {
const options = availableTargetChainOptions[sourceChain.network]?.[sourceAsset.symbol] || [];
diff --git a/src/ui/input-select.tsx b/src/ui/input-select.tsx
index 9792748..a81348d 100644
--- a/src/ui/input-select.tsx
+++ b/src/ui/input-select.tsx
@@ -14,7 +14,7 @@ import {
import Image from "next/image";
import { ChangeEventHandler, PropsWithChildren, ReactElement, useEffect, useRef } from "react";
import Input from "./input";
-import { InputAlert } from "@/components/input-alert";
+import { InputAlert } from "@/old_components/input-alert";
interface Props {
alert?: string;
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 1b93872..c6c9529 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -58,6 +58,17 @@ const config: Config = {
height: "16px",
},
},
+ bouncing: {
+ "0%": {
+ transform: "scale(1)",
+ },
+ "50%": {
+ transform: "scale(1.2)",
+ },
+ "100%": {
+ transform: "scale(1)",
+ },
+ },
},
animation: {
"notification-enter": "rightenter 400ms ease-out",
@@ -65,6 +76,7 @@ const config: Config = {
"notification-fadeout": "notificationfadeout 200ms ease-out forwards",
"count-loading-small": "countloadingsmall 1200ms cubic-bezier(0, 0.5, 0.5, 1) infinite",
"count-loading-large": "countloadinglarge 1200ms cubic-bezier(0, 0.5, 0.5, 1) infinite",
+ "pending-bounce": "bouncing 1.5s ease-in-out infinite",
},
},
},