Merge pull request #362 from reservoirprotocol/ted/update-chain-icons-for-single-chain-mode

Add chain icon to token selector in single chain mode

Author: ted-palmer

.changeset/orange-sloths-search.md

@@ -0,0 +1,5 @@
+---
+'@reservoir0x/relay-kit-ui': patch
+---
+
+Add chain icon to token selector in single chain mode

packages/ui/src/components/common/TokenSelector/triggers/SwapWidgetTokenTrigger.tsx

@@ -4,19 +4,22 @@ import {
   Button,
   Flex,
   Text,
-  Box
+  Box,
+  ChainTokenIcon
 } from '../../../../components/primitives/index.js'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faChevronDown, faCoins } from '@fortawesome/free-solid-svg-icons'
 
 type SwapWidgetTokenTriggerProps = {
   token?: Token
   locked?: boolean
+  isSingleChainLocked?: boolean
 }
 
 export const SwapWidgetTokenTrigger: FC<SwapWidgetTokenTriggerProps> = ({
   token,
-  locked
+  locked,
+  isSingleChainLocked
 }) => {
   const isValidTokenLogo = token?.logoURI && token.logoURI !== 'missing.png'
 
@@ -44,7 +47,13 @@ export const SwapWidgetTokenTrigger: FC<SwapWidgetTokenTriggerProps> = ({
       }}
     >
       <Flex align="center" css={{ gap: '2' }}>
-        {isValidTokenLogo ? (
+        {isSingleChainLocked ? (
+          <ChainTokenIcon
+            chainId={token.chainId}
+            tokenlogoURI={token.logoURI}
+            css={{ width: 24, height: 24 }}
+          />
+        ) : isValidTokenLogo ? (
           <img
             alt={token.name}
             src={token.logoURI}

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

@@ -439,6 +439,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                                       token.chainId === fromToken?.chainId
                                   ).length === 1)
                               }
+                              isSingleChainLocked={isSingleChainLocked}
                             />
                           </div>
                         }
@@ -750,6 +751,7 @@ const SwapWidget: FC<SwapWidgetProps> = ({
                                       token.chainId === toToken?.chainId
                                   ).length === 1)
                               }
+                              isSingleChainLocked={isSingleChainLocked}
                             />
                           </div>
                         }