fix(chain selection): fix target chain selection

ringecosystem · Aug 13, 2024 · 134ac00 · 134ac00
1 parent 53ed4c6
commit 134ac00
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 15 deletions.
diff --git a/src/components/appBox.tsx b/src/components/appBox.tsx
@@ -49,7 +49,7 @@ export default function AppBox() {
       <div 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 selectedChain={senderSelectedChain} setSelectedChain={setSenderSelectedChain} />
+          <ChainSelectInput who="sender" />
         </div>
         <input
           type="text"
@@ -63,7 +63,7 @@ export default function AppBox() {
       <div 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]">Recipient</p>
-          <ChainSelectInput selectedChain={recipientSelectedChain} setSelectedChain={setRecipientSelectedChain} />
+          <ChainSelectInput who="target" />
         </div>
         <input
           type="text"

diff --git a/src/components/chainSelectInput.tsx b/src/components/chainSelectInput.tsx
@@ -2,30 +2,68 @@
 
 import Image from "next/image";
 import data from "../data/data.json";
-import { useCallback, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useTransfer } from "@/hooks";
 import { getChainLogoSrc, parseCross } from "@/utils";
-import { ChainConfig } from "@/types";
+import { Asset, ChainConfig } from "@/types";
 
 export interface chainType {
   name: string;
   logo: string;
 }
 
-export default function ChainSelectInput() {
-  const { sourceChain, setSourceChain } = useTransfer();
-  const { defaultSourceChainOptions } = parseCross();
+export default function ChainSelectInput({ who }: { who: string }) {
+  const { sourceChain, setSourceChain, sourceAsset, setTargetChain, setSourceAsset, targetChain } = useTransfer();
+  const {
+    defaultSourceChainOptions,
+    defaultTargetChainOptions,
+    availableTargetChainOptions,
+    availableSourceAssetOptions,
+    defaultSourceAssetOptions,
+  } = parseCross();
   const [sourceChainOptions, _setSourceChainOptions] = useState(defaultSourceChainOptions);
+  const [sourceAssetOptions, setSourceAssetOptions] = useState(defaultSourceAssetOptions);
+  const [targetChainOptions, setTargetChainOptions] = useState(defaultTargetChainOptions);
 
+  const targetChainRef = useRef(targetChain);
+  const sourceAssetRef = useRef(sourceAsset);
   const sourceChainRef = useRef(sourceChain);
 
+  const _setTargetChain = useCallback(
+    (chain: ChainConfig | undefined) => {
+      setTargetChain((prev) => chain ?? prev);
+      targetChainRef.current = chain ?? targetChainRef.current;
+    },
+    [setTargetChain],
+  );
+
+  useEffect(() => {
+    const options = availableTargetChainOptions[sourceChain.network]?.[sourceAsset.symbol] || [];
+    setTargetChainOptions(options);
+    _setTargetChain(options.at(0));
+  }, [sourceChain, sourceAsset, _setTargetChain]);
+
   const _setSourceChain = useCallback(
     (chain: ChainConfig | undefined) => {
       setSourceChain((prev) => chain ?? prev);
       sourceChainRef.current = chain ?? sourceChainRef.current;
     },
     [setSourceChain],
   );
+
+  const _setSourceAsset = useCallback(
+    (asset: Asset | undefined) => {
+      setSourceAsset((prev) => asset ?? prev);
+      sourceAssetRef.current = asset ?? sourceAssetRef.current;
+    },
+    [setSourceAsset],
+  );
+
+  useEffect(() => {
+    const options = availableSourceAssetOptions[sourceChain.network] || [];
+    setSourceAssetOptions(options);
+    _setSourceAsset(options.at(0));
+  }, [sourceChain, _setSourceAsset]);
   const [open, setOpen] = useState<boolean>(false);
   return (
     <div
@@ -35,18 +73,30 @@ export default function ChainSelectInput() {
       }}
     >
       <div className="flex items-center justify-center gap-[5px]">
-        <Image src={getChainLogoSrc(sourceChain.logo)} width={20} height={20} alt={sourceChain.name} />
-        <p className="text-[12px] leading-[15px]">{sourceChain.name}</p>
+        <Image
+          src={getChainLogoSrc(who === "sender" ? sourceChain.logo : targetChain.logo)}
+          width={20}
+          height={20}
+          alt={who === "sender" ? sourceChain.name : targetChain.name}
+        />
+        <p className="text-[12px] leading-[15px]">{who === "sender" ? sourceChain.name : targetChain.name}</p>
         <span className="block h-[16px] w-[16px] bg-[url('/images/icons/downarrow-icon.svg')] bg-contain bg-center bg-no-repeat" />
       </div>
       {open && (
         <div className="absolute left-[-10px] right-[-10px] top-[calc(100%+10px)] z-10 flex h-fit flex-col gap-[10px] rounded-[10px] bg-white p-[10px] shadow-lg">
-          {sourceChainOptions.map((item) => (
-            <div key={item.name} className="flex items-center gap-[5px]" onClick={() => _setSourceChain(item)}>
-              <Image src={getChainLogoSrc(item.logo)} width={20} height={20} alt={item.name} />
-              <p className="text-[12px] leading-[15px]">{item.name}</p>
-            </div>
-          ))}
+          {who === "sender"
+            ? sourceChainOptions.map((item) => (
+                <div key={item.name} className="flex items-center gap-[5px]" onClick={() => _setSourceChain(item)}>
+                  <Image src={getChainLogoSrc(item.logo)} width={20} height={20} alt={item.name} />
+                  <p className="text-[12px] leading-[15px]">{item.name}</p>
+                </div>
+              ))
+            : targetChainOptions.map((item) => (
+                <div key={item.name} className="flex items-center gap-[5px]" onClick={() => _setTargetChain(item)}>
+                  <Image src={getChainLogoSrc(item.logo)} width={20} height={20} alt={item.name} />
+                  <p className="text-[12px] leading-[15px]">{item.name}</p>
+                </div>
+              ))}
         </div>
       )}
     </div>