feat: show external urls when assets has no supported chains (#4017)

osmosis-labs · Dec 18, 2024 · 1ddc917 · 1ddc917
1 parent 0e24d9e
commit 1ddc917
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/packages/web/components/bridge/amount-and-review-screen.tsx b/packages/web/components/bridge/amount-and-review-screen.tsx
@@ -139,6 +139,10 @@ export const AmountAndReviewScreen = observer(
     const { supportedAssetsByChainId: counterpartySupportedAssetsByChainId } =
       supportedAssets;
 
+    const hasNoSupportedChains =
+      !supportedAssets.isLoading &&
+      supportedAssets.supportedChains.length === 0;
+
     /** Filter for bridges for the current to/from chain/asset selection. */
     const supportedBridgeInfo = useMemo<SupportedBridgeInfo>(() => {
       if (!fromAsset || !toAsset || !fromChain || !toChain)
@@ -283,6 +287,7 @@ export const AmountAndReviewScreen = observer(
               isLoadingAssetsInOsmosis={isLoadingAssetsInOsmosis}
               bridgesSupportedAssets={supportedAssets}
               supportedBridgeInfo={supportedBridgeInfo}
+              hasNoSupportedChains={hasNoSupportedChains}
               fromChain={fromChain}
               setFromChain={setFromChain}
               toChain={toChain}

diff --git a/packages/web/components/bridge/amount-screen.tsx b/packages/web/components/bridge/amount-screen.tsx
@@ -84,6 +84,7 @@ interface AmountScreenProps {
 
   bridgesSupportedAssets: ReturnType<typeof useBridgesSupportedAssets>;
   supportedBridgeInfo: SupportedBridgeInfo;
+  hasNoSupportedChains: boolean;
 
   fromChain: BridgeChainWithDisplayInfo | undefined;
   setFromChain: (chain: BridgeChainWithDisplayInfo) => void;
@@ -125,6 +126,7 @@ export const AmountScreen = observer(
       isLoading: isLoadingSupportedAssets,
     },
     supportedBridgeInfo,
+    hasNoSupportedChains,
 
     fromChain,
     setFromChain,
@@ -829,7 +831,7 @@ export const AmountScreen = observer(
      * - Quoting is disabled for the current selection, meaning providers can't provide quotes but they may provide external URLs
      */
     if (
-      !isLoading &&
+      (!isLoading || hasNoSupportedChains) &&
       (areAssetTransfersDisabled ||
         !fromChain ||
         !fromAsset ||
@@ -840,11 +842,22 @@ export const AmountScreen = observer(
     ) {
       return (
         <>
-          {chainSelection}
+          {!hasNoSupportedChains && chainSelection}
           <OnlyExternalBridgeSuggest
             direction={direction}
             toChain={toChain}
-            toAsset={toAsset}
+            toAsset={
+              // If we haven't supported a chain, we can't suggest an asset
+              // so we use the canonical asset as a fallback
+              canonicalAsset && !toAsset && hasNoSupportedChains
+                ? {
+                    address: canonicalAsset?.coinMinimalDenom,
+                    decimals: canonicalAsset?.coinDecimals,
+                    denom: canonicalAsset?.coinDenom,
+                    coinGeckoId: canonicalAsset?.coinGeckoId,
+                  }
+                : toAsset
+            }
             canonicalAssetDenom={canonicalAsset?.coinDenom}
             fromChain={fromChain}
             fromAsset={fromAsset}