Merge pull request #365 from reservoirprotocol/ted/relay-6298-remove-route-selector-from-single-chain-mode

Hide route selector in fee breakdown in single chain mode

Author: ted-palmer

.changeset/plenty-buckets-act.md

@@ -0,0 +1,5 @@
+---
+'@reservoir0x/relay-kit-ui': patch
+---
+
+Hide route selector in fee breakdown in single chain mode

packages/ui/src/components/widgets/FeeBreakdown.tsx

@@ -23,6 +23,7 @@ type Props = Pick<
   | 'canonicalTimeEstimate'
 > & {
   toChain?: RelayChain
+  isSingleChainLocked?: boolean
 }
 
 const formatSwapRate = (rate: number) => {
@@ -40,7 +41,8 @@ const FeeBreakdown: FC<Props> = ({
   useExternalLiquidity,
   setUseExternalLiquidity,
   timeEstimate,
-  canonicalTimeEstimate
+  canonicalTimeEstimate,
+  isSingleChainLocked
 }) => {
   const swapRate = price?.details?.rate
   const originGasFee = feeBreakdown?.breakdown?.find(
@@ -86,16 +88,20 @@ const FeeBreakdown: FC<Props> = ({
         mb: '6px'
       }}
     >
-      <SwapRouteSelector
-        chain={toChain}
-        supportsExternalLiquidity={supportsExternalLiquidity}
-        externalLiquidtySelected={useExternalLiquidity}
-        onExternalLiquidityChange={(selected) => {
-          setUseExternalLiquidity(selected)
-        }}
-        canonicalTimeEstimate={canonicalTimeEstimate?.formattedTime}
-      />
-      <Box css={{ height: 1, background: 'gray5', width: '100%' }} />
+      {!isSingleChainLocked ? (
+        <>
+          <SwapRouteSelector
+            chain={toChain}
+            supportsExternalLiquidity={supportsExternalLiquidity}
+            externalLiquidtySelected={useExternalLiquidity}
+            onExternalLiquidityChange={(selected) => {
+              setUseExternalLiquidity(selected)
+            }}
+            canonicalTimeEstimate={canonicalTimeEstimate?.formattedTime}
+          />
+          <Box css={{ height: 1, background: 'gray5', width: '100%' }} />
+        </>
+      ) : null}
       <Flex
         justify="between"
         css={{

packages/ui/src/components/widgets/SwapWidget/index.tsx

@@ -417,9 +417,9 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                           isSingleChainLocked
                             ? [lockChainId]
                             : fromToken?.chainId !== undefined &&
-                                fromToken?.chainId === lockChainId
-                              ? [fromToken?.chainId]
-                              : undefined
+                              fromToken?.chainId === lockChainId
+                            ? [fromToken?.chainId]
+                            : undefined
                         }
                         restrictedTokensList={tokens?.filter(
                           (token) => token.chainId === fromToken?.chainId
@@ -765,9 +765,9 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                           isSingleChainLocked
                             ? [lockChainId]
                             : toToken?.chainId !== undefined &&
-                                toToken?.chainId === lockChainId
-                              ? [toToken?.chainId]
-                              : undefined
+                              toToken?.chainId === lockChainId
+                            ? [toToken?.chainId]
+                            : undefined
                         }
                         restrictedTokensList={tokens?.filter(
                           (token) => token.chainId === toToken?.chainId
@@ -883,6 +883,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                       })
                     }}
                     canonicalTimeEstimate={canonicalTimeEstimate}
+                    isSingleChainLocked={isSingleChainLocked}
                   />
                   <WidgetErrorWell
                     hasInsufficientBalance={hasInsufficientBalance}