diff --git a/package-lock.json b/package-lock.json index 79ec955..7a70a14 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@polkadot/api": "^12.3.1", "@polkadot/react-identicon": "^3.6.3", "@rainbow-me/rainbowkit": "^1.1.3", + "@react-spring/web": "^9.5.0", "@talismn/connect-wallets": "^1.2.3", "next": "13.5.4", "react": "^18", @@ -3937,6 +3938,73 @@ "wagmi": "~1.0.1 || ~1.1.0 || ~1.2.0 || ~1.3.0 || ~1.4.0" } }, + "node_modules/@react-spring/animated": { + "version": "9.5.5", + "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.5.5.tgz", + "integrity": "sha512-glzViz7syQ3CE6BQOwAyr75cgh0qsihm5lkaf24I0DfU63cMm/3+br299UEYkuaHNmfDfM414uktiPlZCNJbQA==", + "dependencies": { + "@react-spring/shared": "~9.5.5", + "@react-spring/types": "~9.5.5" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@react-spring/core": { + "version": "9.5.5", + "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.5.5.tgz", + "integrity": "sha512-shaJYb3iX18Au6gkk8ahaF0qx0LpS0Yd+ajb4asBaAQf6WPGuEdJsbsNSgei1/O13JyEATsJl20lkjeslJPMYA==", + "dependencies": { + "@react-spring/animated": "~9.5.5", + "@react-spring/rafz": "~9.5.5", + "@react-spring/shared": "~9.5.5", + "@react-spring/types": "~9.5.5" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/react-spring/donate" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@react-spring/rafz": { + "version": "9.5.5", + "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.5.5.tgz", + "integrity": "sha512-F/CLwB0d10jL6My5vgzRQxCNY2RNyDJZedRBK7FsngdCmzoq3V4OqqNc/9voJb9qRC2wd55oGXUeXv2eIaFmsw==" + }, + "node_modules/@react-spring/shared": { + "version": "9.5.5", + "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.5.5.tgz", + "integrity": "sha512-YwW70Pa/YXPOwTutExHZmMQSHcNC90kJOnNR4G4mCDNV99hE98jWkIPDOsgqbYx3amIglcFPiYKMaQuGdr8dyQ==", + "dependencies": { + "@react-spring/rafz": "~9.5.5", + "@react-spring/types": "~9.5.5" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@react-spring/types": { + "version": "9.5.5", + "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.5.5.tgz", + "integrity": "sha512-7I/qY8H7Enwasxr4jU6WmtNK+RZ4Z/XvSlDvjXFVe7ii1x0MoSlkw6pD7xuac8qrHQRm9BTcbZNyeeKApYsvCg==" + }, + "node_modules/@react-spring/web": { + "version": "9.5.0", + "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.5.0.tgz", + "integrity": "sha512-fq33Og23zCLxH7HELdOyAk0pWtwbSsk8MzPenN2JZMYI1dElB208r4CedM78TPY99YWIY2XRJ45VxbikxVeWLQ==", + "dependencies": { + "@react-spring/animated": "~9.5.0", + "@react-spring/core": "~9.5.0", + "@react-spring/shared": "~9.5.0", + "@react-spring/types": "~9.5.0" + }, + "peerDependencies": { + "react": "^16.8.0 || >=17.0.0 || >=18.0.0", + "react-dom": "^16.8.0 || >=17.0.0 || >=18.0.0" + } + }, "node_modules/@rushstack/eslint-patch": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.5.1.tgz", @@ -14552,6 +14620,56 @@ "react-remove-scroll": "2.5.4" } }, + "@react-spring/animated": { + "version": "9.5.5", + "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.5.5.tgz", + "integrity": "sha512-glzViz7syQ3CE6BQOwAyr75cgh0qsihm5lkaf24I0DfU63cMm/3+br299UEYkuaHNmfDfM414uktiPlZCNJbQA==", + "requires": { + "@react-spring/shared": "~9.5.5", + "@react-spring/types": "~9.5.5" + } + }, + "@react-spring/core": { + "version": "9.5.5", + "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.5.5.tgz", + "integrity": "sha512-shaJYb3iX18Au6gkk8ahaF0qx0LpS0Yd+ajb4asBaAQf6WPGuEdJsbsNSgei1/O13JyEATsJl20lkjeslJPMYA==", + "requires": { + "@react-spring/animated": "~9.5.5", + "@react-spring/rafz": "~9.5.5", + "@react-spring/shared": "~9.5.5", + "@react-spring/types": "~9.5.5" + } + }, + "@react-spring/rafz": { + "version": "9.5.5", + "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.5.5.tgz", + "integrity": "sha512-F/CLwB0d10jL6My5vgzRQxCNY2RNyDJZedRBK7FsngdCmzoq3V4OqqNc/9voJb9qRC2wd55oGXUeXv2eIaFmsw==" + }, + "@react-spring/shared": { + "version": "9.5.5", + "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.5.5.tgz", + "integrity": "sha512-YwW70Pa/YXPOwTutExHZmMQSHcNC90kJOnNR4G4mCDNV99hE98jWkIPDOsgqbYx3amIglcFPiYKMaQuGdr8dyQ==", + "requires": { + "@react-spring/rafz": "~9.5.5", + "@react-spring/types": "~9.5.5" + } + }, + "@react-spring/types": { + "version": "9.5.5", + "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.5.5.tgz", + "integrity": "sha512-7I/qY8H7Enwasxr4jU6WmtNK+RZ4Z/XvSlDvjXFVe7ii1x0MoSlkw6pD7xuac8qrHQRm9BTcbZNyeeKApYsvCg==" + }, + "@react-spring/web": { + "version": "9.5.0", + "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.5.0.tgz", + "integrity": "sha512-fq33Og23zCLxH7HELdOyAk0pWtwbSsk8MzPenN2JZMYI1dElB208r4CedM78TPY99YWIY2XRJ45VxbikxVeWLQ==", + "requires": { + "@react-spring/animated": "~9.5.0", + "@react-spring/core": "~9.5.0", + "@react-spring/shared": "~9.5.0", + "@react-spring/types": "~9.5.0" + } + }, "@rushstack/eslint-patch": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.5.1.tgz", diff --git a/package.json b/package.json index 396df1a..b0f9970 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "@polkadot/api": "^12.3.1", "@polkadot/react-identicon": "^3.6.3", "@rainbow-me/rainbowkit": "^1.1.3", + "@react-spring/web": "^9.5.0", "@talismn/connect-wallets": "^1.2.3", "next": "13.5.4", "react": "^18", diff --git a/public/images/asset/dot.svg b/public/images/asset/dot.svg new file mode 100644 index 0000000..9d5bad6 --- /dev/null +++ b/public/images/asset/dot.svg @@ -0,0 +1,14 @@ + + + diff --git a/src/components/appBox.tsx b/src/components/appBox.tsx index 6d7c551..a1404cf 100644 --- a/src/components/appBox.tsx +++ b/src/components/appBox.tsx @@ -15,6 +15,7 @@ import { WalletID } from "@/types"; import { useAccount, useNetwork, useSwitchNetwork } from "wagmi"; import notification from "@/ui/notification"; import { supportedTokenList } from "@/config/tokens"; +import { useTrail, animated, useSpring } from "@react-spring/web"; export default function AppBox() { const { defaultSourceChainOptions } = parseCross(); @@ -266,8 +267,6 @@ export default function AppBox() { ]); useEffect(() => { - console.log("hellooooooooooooooooooooooooooooooooooooooooooooooooooooooo"); - console.log(selectedAsset); let sourceChainOptions: any = []; for (const item of selectedAsset.allowedSource) { for (const chain of defaultSourceChainOptions) { @@ -276,7 +275,6 @@ export default function AppBox() { } } } - console.log("source chain options", sourceChainOptions); setAllowedChain([...sourceChainOptions]); setSourceChain(sourceChainOptions[0]); setTargetChain(sourceChainOptions[1]); @@ -311,28 +309,57 @@ export default function AppBox() { } }, [targetChain]); + const trails = useTrail(5, { + from: { transform: "translateX(-100%)", opacity: 0 }, + to: { opacity: 1, transform: "translateX(0)" }, + }); + + const style = useSpring({ + from: { opacity: 0, transform: "translateY(-100%)" }, + to: { opacity: 1, transform: "translateY(0)" }, + }); + return ( -
-
+ +

Token

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

{item.name}

} + item.name +

{item.name}

))}
-
-
+ +

Sender

@@ -343,8 +370,11 @@ export default function AppBox() { onChange={handleSenderAddressChange} className="h-[24px] text-ellipsis whitespace-nowrap border-none bg-transparent text-[14px] font-[700] leading-[24px] outline-none" /> -
-
+ +

Recipient

@@ -355,8 +385,8 @@ export default function AppBox() { onChange={handleRecipientAddressChange} className="h-[24px] text-ellipsis whitespace-nowrap border-none bg-transparent text-[14px] font-[700] leading-[24px] outline-none" /> -
-
+ +

Amount

@@ -389,7 +419,7 @@ export default function AppBox() { setTransferAmount({ valid: !(min && min.gt(BN_ZERO)), input: "0", amount: BN_ZERO }); } }} - className="h-[26px] w-fit flex-shrink-0 rounded-[5px] bg-[#FF00831A] px-[15px] text-[12px] font-bold text-[#FF0083]" + 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 @@ -416,18 +446,20 @@ export default function AppBox() { ) : insufficient ? (

* Insufficient.

) : null} -
+ + + + - -
+ ); } diff --git a/src/components/chainSelectInput.tsx b/src/components/chainSelectInput.tsx index 362ed82..b757c44 100644 --- a/src/components/chainSelectInput.tsx +++ b/src/components/chainSelectInput.tsx @@ -65,6 +65,9 @@ export default function ChainSelectInput({ who, options }: { who: string; option // _setSourceAsset(options.at(0)); // }, [sourceChain, _setSourceAsset]); const [open, setOpen] = useState(false); + + const name = "Polkadot AssetHub"; + console.log(name.replace("assetHub", "")); return (
-

{who === "sender" ? sourceChain.name : targetChain.name}

+

+ {who === "sender" + ? sourceChain.name.includes("Polkadot") + ? sourceChain.name.replace(" AssetHub", "") + : sourceChain.name + : targetChain.name.includes("Polkadot") + ? targetChain.name.replace(" AssetHub", "") + : targetChain.name} +

- {open && ( -
+
+
{options.map((item) => (
_setSourceChain(item) : () => _setTargetChain(item)} > {item.name} -

{item.name}

+

+ {item.name.includes("Polkadot") ? item.name.replace(" AssetHub", "") : item.name} +

))}
- )} +
); } diff --git a/src/components/footer.tsx b/src/components/footer.tsx index 2d9e503..d06b3e1 100644 --- a/src/components/footer.tsx +++ b/src/components/footer.tsx @@ -1,14 +1,17 @@ import Link from "next/link"; import data from "../data/data.json"; + export default function Footer() { return (
-

@ 2024 Paralink powerd by Darwinia Network

+

+ @ 2024 Paralink powerd by Darwinia Network +

{data.social.map((item: any) => ( diff --git a/src/components/header.tsx b/src/components/header.tsx index 8bc9013..1c72b28 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -10,6 +10,7 @@ import ChainButton from "./chainButton"; import { useAccount } from "wagmi"; import { useTransfer } from "@/hooks"; import { parseCross } from "@/utils"; +import { animated, useTrail } from "@react-spring/web"; export default function Header() { const { sender } = useTransfer(); @@ -23,14 +24,23 @@ export default function Header() { setShowMenu(false); }, []); + const trails = useTrail(3, { + from: { opacity: 0 }, + to: { opacity: 1 }, + }); + return (
- - Paralink logo - + + + Paralink logo + +
- {!sender ? : } - + {!sender ? : } + + +
diff --git a/src/config/chains/assethub-polkadot-chain.ts b/src/config/chains/assethub-polkadot-chain.ts index 12cf260..933be1f 100644 --- a/src/config/chains/assethub-polkadot-chain.ts +++ b/src/config/chains/assethub-polkadot-chain.ts @@ -95,6 +95,36 @@ export const assethubPolkadotChain: ChainConfig = { }, ], }, + { + icon: "dot.svg", + id: 23, + name: "DOT", + symbol: "DOT", + decimals: 10, + origin: { + parachainId: ParachainID.ASSETHUB_POLKADOT, + palletInstance: 50, + id: 23, + }, + cross: [ + { + target: { network: "darwinia", symbol: "DOT" }, + fee: { + amount: bnToBn(20000), + asset: { + local: { id: 1984 }, + origin: { + parachainId: ParachainID.ASSETHUB_POLKADOT, + palletInstance: 50, + id: 1984, + }, + }, + }, + section: "polkadotXcm", + method: "limitedReserveTransferAssets", + }, + ], + }, ], wallets: [WalletID.TALISMAN], addressType: "substrate", diff --git a/src/config/chains/darwinia-chain.ts b/src/config/chains/darwinia-chain.ts index 0c4aa21..ff6e933 100644 --- a/src/config/chains/darwinia-chain.ts +++ b/src/config/chains/darwinia-chain.ts @@ -125,6 +125,36 @@ export const darwiniaChain: ChainConfig = { }, ], }, + { + icon: "dot.svg", + id: 1028, + name: "DOT", + symbol: "DOT", + decimals: 10, + origin: { + parachainId: ParachainID.ASSETHUB_POLKADOT, + palletInstance: 50, + id: 23, + }, + cross: [ + { + target: { network: "assethub-polkadot", symbol: "PINK" }, + fee: { + amount: bnToBn(700000), + asset: { + local: { id: 1027 }, + origin: { + parachainId: ParachainID.ASSETHUB_POLKADOT, + palletInstance: 50, + id: 1984, + }, + }, + }, + section: "xTokens", + method: "transferMultiassets", + }, + ], + }, ], wallets: [WalletID.EVM, WalletID.TALISMAN], addressType: "evm", diff --git a/src/config/tokens/index.ts b/src/config/tokens/index.ts index 6d4c008..89a42c1 100644 --- a/src/config/tokens/index.ts +++ b/src/config/tokens/index.ts @@ -14,4 +14,9 @@ export const supportedTokenList = [ icon: "pink.jpg", allowedSource: ["Darwinia", "Polkadot AssetHub"], }, + { + name: "DOT", + icon: "dot.svg", + allowedSource: ["Darwinia", "Polkadot AssetHub"], + }, ]; diff --git a/src/data/data.json b/src/data/data.json index c8e1780..00e2607 100644 --- a/src/data/data.json +++ b/src/data/data.json @@ -33,22 +33,22 @@ "social": [ { "name": "x", - "url": "/", + "url": "https://twitter.com/DarwiniaNetwork", "icon": "/images/icons/x-icon.svg" }, { "name": "telegram", - "url": "/", + "url": "https://t.me/DarwiniaNetwork", "icon": "/images/icons/telegram-icon.svg" }, { "name": "github", - "url": "/", + "url": "https://github.com/darwinia-network", "icon": "/images/icons/github-icon.svg" }, { "name": "email", - "url": "/", + "url": "mailto:hello@darwinia.network", "icon": "/images/icons/email-icon.svg" } ]