feat: [CM-644] Updates to widget chain icons (#1823)

immutable · May 28, 2024 · 2b0f2db · 2b0f2db
1 parent 717babf
commit 2b0f2db
Show file tree

Hide file tree

Showing 15 changed files with 118 additions and 75 deletions.
diff --git a/packages/checkout/sdk-sample-app/src/pages/PassportLoginCallback.tsx b/packages/checkout/sdk-sample-app/src/pages/PassportLoginCallback.tsx
@@ -0,0 +1,9 @@
+import { useEffect } from 'react';
+import { passport } from '../passport';
+
+export function PassportLoginCallback() {
+  useEffect(() => {
+    passport?.loginCallback();
+  }, [passport])
+  return(<></>);
+}
diff --git a/packages/checkout/widgets-lib/src/components/Transactions/TransactionDetails.tsx b/packages/checkout/widgets-lib/src/components/Transactions/TransactionDetails.tsx
@@ -1,16 +1,19 @@
 import {
-  Box, Icon, Body, EllipsizedText,
+  Box, Icon, Body, EllipsizedText, FramedImage,
 } from '@biom3/react';
 import { ChainSlug } from '@imtbl/checkout-sdk';
-import { logoColour, networkIcon, networkName } from 'lib';
+import { networkName } from 'lib';
 import { getChainIdBySlug } from 'lib/chains';
 import { Transaction } from 'lib/clients';
+import { Environment } from '@imtbl/config';
+import { getChainImage } from '../../lib/utils';
 
 export interface TransactionDetailsProps {
   transaction: Transaction;
+  environment: Environment;
 }
 
-export function TransactionDetails({ transaction }: TransactionDetailsProps) {
+export function TransactionDetails({ transaction, environment }: TransactionDetailsProps) {
   const fromChain = getChainIdBySlug(transaction.details.from_chain as ChainSlug);
   const toChain = getChainIdBySlug(transaction.details.to_chain as ChainSlug);
   return (
@@ -20,13 +23,17 @@ export function TransactionDetails({ transaction }: TransactionDetailsProps) {
       gap: 'base.spacing.x2',
     }}
     >
-      <Icon
-        icon={networkIcon[fromChain] as any}
+      <FramedImage
         sx={{
-          w: 'base.icon.size.250',
-          fill: logoColour[fromChain],
+          w: 'base.icon.size.400',
+          h: 'base.icon.size.400',
         }}
-        variant="bold"
+        use={(
+          <img
+            src={getChainImage(environment, fromChain)}
+            alt={networkName[fromChain]}
+          />
+        )}
       />
       <Box sx={{
         display: 'flex',
@@ -52,13 +59,17 @@ export function TransactionDetails({ transaction }: TransactionDetailsProps) {
         }}
       />
       <Box sx={{ flexGrow: '1' }} />
-      <Icon
-        icon={networkIcon[toChain] as any}
+      <FramedImage
         sx={{
-          w: 'base.icon.size.250',
-          fill: logoColour[toChain],
+          w: 'base.icon.size.400',
+          h: 'base.icon.size.400',
         }}
-        variant="bold"
+        use={(
+          <img
+            src={getChainImage(environment, toChain)}
+            alt={networkName[toChain]}
+          />
+        )}
       />
       <Box sx={{
         display: 'flex',

diff --git a/packages/checkout/widgets-lib/src/components/Transactions/TransactionItem.tsx b/packages/checkout/widgets-lib/src/components/Transactions/TransactionItem.tsx
@@ -8,6 +8,7 @@ import {
 import { UserJourney, useAnalytics } from 'context/analytics-provider/SegmentAnalyticsProvider';
 import { Transaction } from 'lib/clients/checkoutApiType';
 import { MouseEvent, useMemo, useState } from 'react';
+import { Environment } from '@imtbl/config';
 import { containerStyles } from './transactionItemStyles';
 import { TransactionDetails } from './TransactionDetails';
 
@@ -23,6 +24,7 @@ type TransactionItemProps = {
   amount: string,
   icon: string,
   defaultTokenImage: string,
+  environment: Environment,
 };
 
 export function TransactionItem({
@@ -33,6 +35,7 @@ export function TransactionItem({
   amount,
   icon,
   defaultTokenImage,
+  environment,
 }: TransactionItemProps) {
   const { track } = useAnalytics();
   const [iconError, setIconError] = useState<boolean>(false);
@@ -130,7 +133,7 @@ export function TransactionItem({
               px: 'base.spacing.x2',
             }}
           />
-          <TransactionDetails transaction={transaction} />
+          <TransactionDetails transaction={transaction} environment={environment} />
         </Accordion.ExpandedContent>
       </Accordion>
     </Box>

diff --git a/packages/checkout/widgets-lib/src/components/Transactions/TransactionItemWithdrawPending.tsx b/packages/checkout/widgets-lib/src/components/Transactions/TransactionItemWithdrawPending.tsx
@@ -13,6 +13,7 @@ import { useContext, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { BridgeWidgetViews } from 'context/view-context/BridgeViewContextTypes';
 import { ViewActions, ViewContext } from 'context/view-context/ViewContext';
+import { Environment } from '@imtbl/config';
 import { actionsContainerStyles, actionsLayoutStyles, containerStyles } from './transactionItemStyles';
 import { TransactionDetails } from './TransactionDetails';
 
@@ -23,6 +24,7 @@ type TransactionItemWithdrawPendingProps = {
   amount: string,
   icon: string,
   defaultTokenImage: string,
+  environment: Environment,
 };
 
 export function TransactionItemWithdrawPending({
@@ -32,6 +34,7 @@ export function TransactionItemWithdrawPending({
   amount,
   icon,
   defaultTokenImage,
+  environment,
 }: TransactionItemWithdrawPendingProps) {
   const { viewDispatch } = useContext(ViewContext);
   const { track } = useAnalytics();
@@ -189,7 +192,7 @@ export function TransactionItemWithdrawPending({
               px: 'base.spacing.x2',
             }}
           />
-          <TransactionDetails transaction={transaction} />
+          <TransactionDetails transaction={transaction} environment={environment} />
         </Accordion.ExpandedContent>
       </Accordion>
     </Box>

diff --git a/packages/checkout/widgets-lib/src/components/Transactions/TransactionList.tsx b/packages/checkout/widgets-lib/src/components/Transactions/TransactionList.tsx
@@ -41,6 +41,7 @@ export function TransactionList({
   const { cryptoFiatState } = useContext(CryptoFiatContext);
   const { t } = useTranslation();
   const [link, setLink] = useState('');
+  const { environment } = checkout.config;
 
   useEffect(() => {
     if (!checkout) return;
@@ -87,26 +88,28 @@ export function TransactionList({
               return (
                 <TransactionItemWithdrawPending
                   key={hash}
-                  label={token.name}
+                  label={token.symbol}
                   transaction={transaction}
                   fiatAmount={`${t('views.TRANSACTIONS.fiatPricePrefix')}${fiat}`}
                   amount={amount}
                   icon={getTransactionItemIcon(transaction)}
                   defaultTokenImage={defaultTokenImage}
+                  environment={environment}
                 />
               );
             }
 
             return (
               <TransactionItem
                 key={hash}
-                label={token.name}
+                label={token.symbol}
                 details={{ text: t('views.TRANSACTIONS.status.inProgress.stepInfo'), link, hash }}
                 transaction={transaction}
                 fiatAmount={`${t('views.TRANSACTIONS.fiatPricePrefix')}${fiat}`}
                 amount={amount}
                 icon={getTransactionItemIcon(transaction)}
                 defaultTokenImage={defaultTokenImage}
+                environment={environment}
               />
             );
           })}

diff --git a/packages/checkout/widgets-lib/src/lib/utils.ts b/packages/checkout/widgets-lib/src/lib/utils.ts
@@ -154,6 +154,10 @@ export function getRemoteImage(environment: Environment | undefined, path: strin
   return `${CHECKOUT_CDN_BASE_URL[environment ?? Environment.PRODUCTION]}/v1/blob/img${path}`;
 }
 
+export function getChainImage(environment: Environment | undefined, chainId: ChainId) {
+  return getRemoteImage(environment, `/chains/${chainId}.png`);
+}
+
 export function getEthTokenImage(environment: Environment | undefined) {
   return getRemoteImage(environment, '/tokens/eth.svg');
 }

diff --git a/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeReviewSummary.tsx b/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeReviewSummary.tsx
@@ -16,7 +16,7 @@ import {
   isPassportProvider,
   isWalletConnectProvider,
 } from 'lib/provider';
-import { calculateCryptoToFiat, isNativeToken } from 'lib/utils';
+import { calculateCryptoToFiat, getChainImage, isNativeToken } from 'lib/utils';
 import {
   DEFAULT_QUOTE_REFRESH_INTERVAL,
   DEFAULT_TOKEN_DECIMALS,
@@ -26,7 +26,7 @@ import {
   addChainChangedListener,
   getL1ChainId,
   getL2ChainId,
-  networkIcon,
+  networkName,
   removeChainChangedListener,
 } from 'lib';
 import { useInterval } from 'lib/hooks/useInterval';
@@ -41,7 +41,6 @@ import { NetworkSwitchDrawer } from 'components/NetworkSwitchDrawer/NetworkSwitc
 import { Web3Provider } from '@ethersproject/providers';
 import { useWalletConnect } from 'lib/hooks/useWalletConnect';
 import { NotEnoughGas } from 'components/NotEnoughGas/NotEnoughGas';
-import { networkIconStyles } from './WalletNetworkButtonStyles';
 import {
   arrowIconStyles,
   arrowIconWrapperStyles,
@@ -52,6 +51,7 @@ import {
   topMenuItemStyles,
   wcStickerLogoStyles,
   wcWalletLogoStyles,
+  networkIconStyles,
 } from './BridgeReviewSummaryStyles';
 import { BridgeActions, BridgeContext } from '../context/BridgeContext';
 import {
@@ -76,6 +76,7 @@ export function BridgeReviewSummary() {
     },
     bridgeDispatch,
   } = useContext(BridgeContext);
+  const { environment } = checkout.config;
 
   const { track } = useAnalytics();
 
@@ -477,9 +478,14 @@ export function BridgeReviewSummary() {
           </Body>
         </MenuItem.Label>
         {fromNetwork && (
-          <MenuItem.IntentIcon
-            icon={networkIcon[fromNetwork] as any}
-            sx={networkIconStyles(fromNetwork)}
+          <MenuItem.FramedImage
+            use={(
+              <img
+                src={getChainImage(environment, fromNetwork)}
+                alt={networkName[fromNetwork]}
+              />
+            )}
+            sx={networkIconStyles}
           />
         )}
       </MenuItem>
@@ -524,9 +530,14 @@ export function BridgeReviewSummary() {
           </Body>
         </MenuItem.Label>
         {toNetwork && (
-          <MenuItem.IntentIcon
-            icon={networkIcon[toNetwork] as any}
-            sx={networkIconStyles(toNetwork)}
+          <MenuItem.FramedImage
+            use={(
+              <img
+                src={getChainImage(environment, toNetwork)}
+                alt={networkName[toNetwork]}
+              />
+            )}
+            sx={networkIconStyles}
           />
         )}
       </MenuItem>

diff --git a/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeReviewSummaryStyles.ts b/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeReviewSummaryStyles.ts
@@ -67,3 +67,10 @@ export const rawImageStyle = {
   padding: '6px',
   left: 'base.spacing.x3',
 };
+
+export const networkIconStyles = {
+  position: 'absolute',
+  right: 'base.spacing.x3',
+  w: 'base.icon.size.400',
+  h: 'base.icon.size.400',
+};
diff --git a/packages/checkout/widgets-lib/src/widgets/bridge/components/NetworkItem.tsx b/packages/checkout/widgets-lib/src/widgets/bridge/components/NetworkItem.tsx
@@ -1,19 +1,21 @@
 import { ChainId, ChainName } from '@imtbl/checkout-sdk';
 import { MenuItem } from '@biom3/react';
-import { networkIcon } from 'lib';
-import { networkItemStyles } from './NetworkItemStyles';
+import { Environment } from '@imtbl/config';
+import { getChainImage } from '../../../lib/utils';
 
 export interface BridgeNetworkProps {
   testId: string;
   chainId: ChainId;
   chainName: ChainName;
   onNetworkClick: (chainId: ChainId) => Promise<void>;
+  environment: Environment;
 }
 export function NetworkItem({
   testId,
   chainId,
   chainName,
   onNetworkClick,
+  environment,
 }: BridgeNetworkProps) {
   return (
     <MenuItem
@@ -25,10 +27,8 @@ export function NetworkItem({
       }}
       sx={{ marginBottom: 'base.spacing.x1' }}
     >
-      <MenuItem.FramedIcon
-        icon={networkIcon[chainId] as any}
-        circularFrame
-        sx={networkItemStyles(chainId)}
+      <MenuItem.FramedImage
+        use={<img src={getChainImage(environment, chainId)} alt={chainName} />}
       />
       <MenuItem.Label size="medium">{chainName}</MenuItem.Label>
     </MenuItem>

diff --git a/packages/checkout/widgets-lib/src/widgets/bridge/components/NetworkItemStyles.ts b/packages/checkout/widgets-lib/src/widgets/bridge/components/NetworkItemStyles.ts
diff --git a/packages/checkout/widgets-lib/src/widgets/bridge/components/WalletAndNetworkSelector.tsx b/packages/checkout/widgets-lib/src/widgets/bridge/components/WalletAndNetworkSelector.tsx
@@ -52,6 +52,7 @@ export function WalletAndNetworkSelector() {
   } = useContext(BridgeContext);
   const { viewDispatch } = useContext(ViewContext);
   const { providers } = useInjectedProviders({ checkout });
+  const { environment } = checkout.config;
 
   const { track } = useAnalytics();
 
@@ -491,6 +492,7 @@ export function WalletAndNetworkSelector() {
               setFromWalletDrawerOpen(true);
             }}
             onNetworkClick={() => setFromNetworkDrawerOpen(true)}
+            environment={environment}
           />
 
           <Box>
@@ -540,6 +542,7 @@ export function WalletAndNetworkSelector() {
             chainName={imtblZkEvmNetworkName}
             onNetworkClick={fromNetworkDrawerOpen ? handleFromNetworkSelection : handleToNetworkSelection}
             chainId={imtblZkEvmNetworkChainId}
+            environment={environment}
           />
           {/** If selecting from network, show L1 option for everything but Passport */}
           {(toNetworkDrawerOpen || fromWallet?.providerDetail.info.rdns !== WalletProviderRdns.PASSPORT) && (
@@ -549,6 +552,7 @@ export function WalletAndNetworkSelector() {
               chainName={l1NetworkName}
               onNetworkClick={fromNetworkDrawerOpen ? handleFromNetworkSelection : handleToNetworkSelection}
               chainId={l1NetworkChainId}
+              environment={environment}
             />
           )}
         </Drawer.Content>
@@ -580,6 +584,7 @@ export function WalletAndNetworkSelector() {
             onNetworkClick={() => {
               setToNetworkDrawerOpen(true);
             }}
+            environment={environment}
           />
           <Box sx={submitButtonWrapperStyles}>
             <Button