LnBridge available chains and tokens (#537)

* update development env graphql endpoint * rename dynamicStyle * remove .env.test * improve select component disabled style * add no-data status for chain-select and token-select * lnbridge available chains and tokens
helix-bridge · Oct 19, 2023 · 9673448 · 9673448
1 parent d924b96
commit 9673448
Show file tree

Hide file tree

Showing 9 changed files with 84 additions and 66 deletions.
diff --git a/packages/apps/.env.development b/packages/apps/.env.development
@@ -1,2 +1,3 @@
-NEXT_PUBLIC_GRAPHQL_ENDPOINT=https://apollo-stg.helixbridge.app/graphql
+# NEXT_PUBLIC_GRAPHQL_ENDPOINT=https://apollo-stg.helixbridge.app/graphql
+NEXT_PUBLIC_GRAPHQL_ENDPOINT=https://apollo-test.helixbridge.app/graphql
 NEXT_PUBLIC_APP_ENV=development
diff --git a/packages/apps/.env.test b/packages/apps/.env.test
diff --git a/packages/apps/src/app/globals.css b/packages/apps/src/app/globals.css
@@ -74,7 +74,7 @@ body {
   }
 
   .select {
-    @apply hover:border-primary focus-within:border-primary rounded border transition duration-300 disabled:cursor-not-allowed disabled:opacity-60 lg:active:translate-y-1;
+    @apply hover:border-primary focus-within:border-primary rounded border transition duration-300 disabled:cursor-not-allowed disabled:opacity-60 lg:active:translate-y-1 lg:disabled:translate-y-0;
   }
 }
 

diff --git a/packages/apps/src/components/balance-input.tsx b/packages/apps/src/components/balance-input.tsx
@@ -32,7 +32,7 @@ export function BalanceInput({
 }) {
   const spanRef = useRef<HTMLSpanElement | null>(null);
   const inputRef = useRef<HTMLInputElement | null>(null);
-  const [textStyle, setTextStyle] = useState("text-sm font-normal");
+  const [dynamicStyle, setDynamicStyle] = useState("text-sm font-normal");
 
   const insufficient = balance !== undefined && (value?.formatted || 0n) > balance ? true : false;
   const exceeded = limit !== undefined && (value?.formatted || 0n) > limit ? true : false;
@@ -43,25 +43,25 @@ export function BalanceInput({
       const spanWidth = spanRef.current?.clientWidth || 0;
       const percent = (spanWidth / inputWidth) * 100;
       if (percent < 10) {
-        setTextStyle("text-[3.75rem] font-extralight");
+        setDynamicStyle("text-[3.75rem] font-extralight");
       } else if (percent < 20) {
-        setTextStyle("text-[3rem] font-extralight");
+        setDynamicStyle("text-[3rem] font-extralight");
       } else if (percent < 30) {
-        setTextStyle("text-[2.25rem] font-extralight");
+        setDynamicStyle("text-[2.25rem] font-extralight");
       } else if (percent < 40) {
-        setTextStyle("text-[1.875rem] font-light");
+        setDynamicStyle("text-[1.875rem] font-light");
       } else if (percent < 50) {
-        setTextStyle("text-[1.5rem] font-light");
+        setDynamicStyle("text-[1.5rem] font-light");
       } else if (percent < 60) {
-        setTextStyle("text-[1.25rem] font-light");
+        setDynamicStyle("text-[1.25rem] font-light");
       } else if (percent < 70) {
-        setTextStyle("text-[1.125rem] font-normal");
+        setDynamicStyle("text-[1.125rem] font-normal");
       } else if (percent < 80) {
-        setTextStyle("text-[1rem] font-normal");
+        setDynamicStyle("text-[1rem] font-normal");
       } else if (percent < 90) {
-        setTextStyle("text-[0.875rem] font-medium");
+        setDynamicStyle("text-[0.875rem] font-medium");
       } else {
-        setTextStyle("text-[0.75rem] font-medium");
+        setDynamicStyle("text-[0.75rem] font-medium");
       }
     }
   }, [value, dynamic]);
@@ -83,7 +83,7 @@ export function BalanceInput({
             : placeholder ?? "Enter an amount"
         }
         className={`h-12 w-full rounded bg-transparent text-white transition-[font-size,font-weight,line-height] duration-300 ${
-          dynamic && value?.value ? `leading-none ${textStyle}` : "text-sm font-normal"
+          dynamic && value?.value ? `leading-none ${dynamicStyle}` : "text-sm font-normal"
         }`}
         onChange={(e) => {
           if (e.target.value) {

diff --git a/packages/apps/src/components/chain-select.tsx b/packages/apps/src/components/chain-select.tsx
@@ -20,19 +20,25 @@ export default function ChainSelect({ options, value, placeholder, className, on
       sameWidth
       onClear={() => onChange(undefined)}
     >
-      {options.map((option) => {
-        return (
-          <button
-            key={option.id}
-            onClick={() => {
-              onChange(option);
-            }}
-            className="py-small px-large text-start text-sm transition-colors hover:bg-white/10"
-          >
-            {option.name}
-          </button>
-        );
-      })}
+      {options.length ? (
+        options.map((option) => {
+          return (
+            <button
+              key={option.id}
+              onClick={() => {
+                onChange(option);
+              }}
+              className="py-small px-large text-start text-sm transition-colors hover:bg-white/10"
+            >
+              {option.name}
+            </button>
+          );
+        })
+      ) : (
+        <div className="py-small px-large">
+          <span className="text-sm text-white/50">No data</span>
+        </div>
+      )}
     </ISelect>
   );
 }
diff --git a/packages/apps/src/components/lnrelayer-overview.tsx b/packages/apps/src/components/lnrelayer-overview.tsx
@@ -11,7 +11,7 @@ import RelayersTable from "./relayers-table";
 import CountdownRefresh from "@/ui/countdown-refresh";
 import { getParsedCrossChain } from "@/utils/cross-chain";
 
-const { defaultSourceOptions, defaultTargetChains, availableTargetChains } = getParsedCrossChain();
+const { defaultSourceChains, defaultTargetChains, availableTargetChains } = getParsedCrossChain();
 const pageSize = 12;
 
 export default function LnRelayerOverview() {
@@ -59,7 +59,7 @@ export default function LnRelayerOverview() {
             <ChainSelect
               className="px-middle border-line w-40 py-[7px]"
               placeholder="Source chain"
-              options={defaultSourceOptions.map(({ chain }) => chain)}
+              options={defaultSourceChains}
               onChange={(value) => {
                 setSourceChain(value);
                 setTargetChain(undefined);

diff --git a/packages/apps/src/components/relayer-register.tsx b/packages/apps/src/components/relayer-register.tsx
@@ -37,7 +37,7 @@ enum Step {
 }
 const Modal = dynamic(() => import("@/ui/modal"), { ssr: false });
 
-const { availableTargetChains, defaultTargetChains, availableBridges, availableTokens, defaultSourceOptions } =
+const { availableTargetChains, defaultSourceChains, defaultTargetChains, availableBridges, availableTokens } =
   getParsedCrossChain();
 
 export default function RelayerRegister() {
@@ -145,7 +145,7 @@ export default function RelayerRegister() {
                 <LabelItem label="From" className="flex-1">
                   <ChainSelect
                     className="px-middle bg-app-bg border-transparent py-2"
-                    options={defaultSourceOptions.map(({ chain }) => chain)}
+                    options={defaultSourceChains}
                     placeholder="Source chain"
                     onChange={(value) => {
                       setSourceChain(value);

diff --git a/packages/apps/src/components/token-select.tsx b/packages/apps/src/components/token-select.tsx
@@ -32,21 +32,27 @@ export default function TokenSelect({
       sameWidth
       onClear={() => onChange(undefined)}
     >
-      {options.map((option) => (
-        <button
-          key={option.symbol}
-          onClick={() => {
-            onChange(option);
-          }}
-          className="py-small px-large hover:text-primary gap-middle flex items-center text-start text-sm transition hover:opacity-80"
-        >
-          <Image width={28} height={28} alt="Token" src={getTokenLogoSrc(option.logo)} className="rounded-full" />
-          <div className="flex flex-col">
-            <span>{option.symbol}</span>
-            <PrettyAddress address={option.address} copyable className="text-xs font-light text-white/50" />
-          </div>
-        </button>
-      ))}
+      {options.length ? (
+        options.map((option) => (
+          <button
+            key={option.symbol}
+            onClick={() => {
+              onChange(option);
+            }}
+            className="py-small px-large hover:text-primary gap-middle flex items-center text-start text-sm transition hover:opacity-80"
+          >
+            <Image width={28} height={28} alt="Token" src={getTokenLogoSrc(option.logo)} className="rounded-full" />
+            <div className="flex flex-col">
+              <span>{option.symbol}</span>
+              <PrettyAddress address={option.address} copyable className="text-xs font-light text-white/50" />
+            </div>
+          </button>
+        ))
+      ) : (
+        <div className="py-small px-large">
+          <span className="text-sm text-white/50">No data</span>
+        </div>
+      )}
     </ISelect>
   );
 }
diff --git a/packages/apps/src/utils/cross-chain.ts b/packages/apps/src/utils/cross-chain.ts
@@ -20,8 +20,10 @@ let defaultBridge: BridgeCategory | undefined;
 
 let availableTargetOptions: AvailableTargets = {};
 let availableBridges: AvailableBridges = {};
-let availableTokens: AvailableTokens = {};
 
+// For LnRelayer (LnBridge)
+let availableTokens: AvailableTokens = {};
+let defaultSourceChains: ChainConfig[] = [];
 let defaultTargetChains: ChainConfig[] = [];
 let availableTargetChains: AvailableTargetChains = {};
 
@@ -40,13 +42,26 @@ getChainsConfig().forEach((sourceChain) => {
         defaultTargetValue = defaultTargetValue ?? { chain: targetChain, token: targetToken };
         defaultBridge = defaultBridge ?? cross.bridge.category;
 
-        defaultTargetChains = defaultTargetChains.filter((c) => c.id !== targetChain.id).concat(targetChain);
-        availableTargetChains = {
-          ...availableTargetChains,
-          [sourceChain.network]: (availableTargetChains[sourceChain.network] || [])
-            .filter((c) => c.network !== cross.target.network)
-            .concat(targetChain),
-        };
+        if (cross.bridge.category === "lnbridgev20-default" || cross.bridge.category === "lnbridgev20-opposite") {
+          defaultSourceChains = defaultSourceChains.filter((c) => c.id !== sourceChain.id).concat(sourceChain);
+          defaultTargetChains = defaultTargetChains.filter((c) => c.id !== targetChain.id).concat(targetChain);
+          availableTargetChains = {
+            ...availableTargetChains,
+            [sourceChain.network]: (availableTargetChains[sourceChain.network] || [])
+              .filter((c) => c.network !== cross.target.network)
+              .concat(targetChain),
+          };
+
+          availableTokens = {
+            ...availableTokens,
+            [sourceChain.network]: {
+              ...availableTokens[sourceChain.network],
+              [cross.target.network]: (availableTokens[sourceChain.network]?.[cross.target.network] || [])
+                .filter((t) => t.symbol !== sourceToken.symbol)
+                .concat(sourceToken),
+            },
+          };
+        }
 
         availableTargetOptions = {
           ...availableTargetOptions,
@@ -73,16 +88,6 @@ getChainsConfig().forEach((sourceChain) => {
             },
           },
         };
-
-        availableTokens = {
-          ...availableTokens,
-          [sourceChain.network]: {
-            ...availableTokens[sourceChain.network],
-            [cross.target.network]: (availableTokens[sourceChain.network]?.[cross.target.network] || [])
-              .filter((t) => t.symbol !== sourceToken.symbol)
-              .concat(sourceToken),
-          },
-        };
       }
     });
   });
@@ -99,6 +104,7 @@ if (defaultSourceValue) {
 
 defaultSourceOptions.sort((a, b) => a.chain.network.localeCompare(b.chain.network));
 defaultTargetOptions.sort((a, b) => a.chain.network.localeCompare(b.chain.network));
+defaultSourceChains.sort((a, b) => a.network.localeCompare(b.network));
 defaultTargetChains.sort((a, b) => a.network.localeCompare(b.network));
 
 export function getParsedCrossChain() {
@@ -111,6 +117,7 @@ export function getParsedCrossChain() {
     availableTargetOptions,
     availableBridges,
     availableTokens,
+    defaultSourceChains,
     defaultTargetChains,
     availableTargetChains,
   };
-Original file line number
+Diff line change
@@ Expand Up / @@ -74,7 +74,7 @@ body { @@
       }
       .select {
-        @apply hover:border-primary focus-within:border-primary rounded border transition duration-300 disabled:cursor-not-allowed disabled:opacity-60 lg:active:translate-y-1;
+        @apply hover:border-primary focus-within:border-primary rounded border transition duration-300 disabled:cursor-not-allowed disabled:opacity-60 lg:active:translate-y-1 lg:disabled:translate-y-0;
       }
     }
@@ Expand Down @@