immutable · glomotion · Sep 27, 2023 · Sep 25, 2023 · Sep 25, 2023 · Sep 26, 2023
@@ -14,7 +14,7 @@
     ]
   },
   "dependencies": {
-    "@biom3/react": "^0.9.17-beta",
+    "@biom3/react": "^0.10.8",
     "@imtbl/checkout-sdk": "0.0.0",
     "@imtbl/config": "0.0.0",
     "ethers": "^5.7.2",

@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@biom3/design-tokens": "0.2.4-beta",
-    "@biom3/react": "^0.9.17-beta",
+    "@biom3/react": "^0.10.8",
     "@ethersproject/providers": "^5.7.2",
     "@imtbl/bridge-sdk": "0.0.0",
     "@imtbl/checkout-sdk": "0.0.0",

@@ -17,6 +17,7 @@ import { ConnectionStatus } from '../../context/connect-loader-context/ConnectLo
 import {
   ConnectLoaderTestComponent,
 } from '../../context/connect-loader-context/test-components/ConnectLoaderTestComponent';
+import { CryptoFiatProvider } from '../../context/crypto-fiat-context/CryptoFiatProvider';
 
 describe('Top Up View', () => {
   const connectLoaderState = {
@@ -356,10 +357,6 @@ describe('Top Up View', () => {
         .as('getExchangeFeeEstimateStub')
         .onFirstCall()
         .rejects();
-      cy.stub(Checkout.prototype, 'gasEstimate')
-        .as('gasEstimateStub')
-        .onFirstCall()
-        .rejects();
 
       mount(
         <ConnectLoaderTestComponent
@@ -384,5 +381,36 @@ describe('Top Up View', () => {
       cySmartGet('menu-item-caption-bridge').contains('$-.-- USD');
       cySmartGet('menu-item-caption-onramp').contains('-.--%');
     });
+
+    it('should show shimmer for fees for onramp, swap and bridge', () => {
+      // @NOTE: return a promise that never resolves...
+      cy.stub(Checkout.prototype, 'gasEstimate')
+        .as('gasEstimateStub')
+        .returns(new Promise(() => {}));
+
+      mount(
+        <ConnectLoaderTestComponent
+          initialStateOverride={connectLoaderState}
+        >
+          <WalletWidgetTestComponent
+            initialStateOverride={baseWalletState}
+            cryptoConversionsOverride={cryptoConversions}
+          >
+            <CryptoFiatProvider environment={Environment.SANDBOX}>
+              <TopUpView
+                showOnrampOption
+                showSwapOption
+                showBridgeOption
+                widgetEvent={IMTBLWidgetEvents.IMTBL_WALLET_WIDGET_EVENT}
+                onCloseButtonClick={() => {}}
+              />
+
+            </CryptoFiatProvider>
+          </WalletWidgetTestComponent>
+        </ConnectLoaderTestComponent>,
+      );
+      cySmartGet('fee-percentage-shimmer__shimmer').should('be.visible');
+      cySmartGet('fees-shimmer__shimmer').should('have.length', 2).and('be.visible');
+    });
   });
 });
@@ -1,4 +1,6 @@
-import { Box, Heading, Icon } from '@biom3/react';
+import {
+  Body, Box, Heading,
+} from '@biom3/react';
 import {
   IMTBLWidgetEvents,
 } from '@imtbl/checkout-widgets';
@@ -205,11 +207,7 @@ export function TopUpView({
   const renderFees = (fees: string, feesLoading: boolean): ReactNode => {
     if (feesLoading) {
       return (
-        <>
-          {' '}
-          <Icon icon="Loading" />
-          {` ${fiatSymbol.toLocaleUpperCase()}`}
-        </>
+        <Body size="xSmall" shimmer={1} testId="fees-shimmer" />
       );
     }
     return (` $${fees} ${fiatSymbol.toLocaleUpperCase()}`);
@@ -218,11 +216,7 @@ export function TopUpView({
   const renderFeePercentage = (fees: string, feesLoading: boolean): ReactNode => {
     if (feesLoading) {
       return (
-        <>
-          {' '}
-          <Icon icon="Loading" />
-          {' %'}
-        </>
+        <Body size="xSmall" shimmer={1} testId="fee-percentage-shimmer" />
       );
     }
     return (` ${fees}%`);

@@ -8,7 +8,7 @@ function WalletWebView() {
   };
 
   return (
-    <imtbl-wallet widgetConfig={JSON.stringify(config)} />
+    <imtbl-wallet widgetConfig={JSON.stringify(config)} walletProvider="metamask" />
   );
 }
 

@@ -1,28 +1,18 @@
 import {
-  Body,
-  Box,
   Heading,
-  Icon,
   MenuItem,
-  OverflowPopoverMenu,
-  PriceDisplay,
 } from '@biom3/react';
 import {
   useContext, useEffect, useMemo, useState,
 } from 'react';
 import { IMTBLWidgetEvents } from '@imtbl/checkout-widgets';
 import { TokenFilterTypes, TokenInfo } from '@imtbl/checkout-sdk';
 import {
-  balanceItemContainerStyle,
-  balanceItemCoinBoxStyle,
-  balanceItemPriceBoxStyle,
   ShowMenuItem,
 } from './BalanceItemStyles';
 import { BalanceInfo } from '../../functions/tokenBalances';
 import { WalletContext } from '../../context/WalletContext';
-import {
-  orchestrationEvents,
-} from '../../../../lib/orchestrationEvents';
+import { orchestrationEvents } from '../../../../lib/orchestrationEvents';
 import { getL1ChainId, getL2ChainId } from '../../../../lib/networkUtils';
 import { formatZeroAmount, tokenValueFormat } from '../../../../lib/utils';
 import { ConnectLoaderContext } from '../../../../context/connect-loader-context/ConnectLoaderContext';
@@ -34,7 +24,10 @@ export interface BalanceItemProps {
   bridgeToL2OnClick: (address?: string) => void;
 }
 
-export function BalanceItem({ balanceInfo, bridgeToL2OnClick }: BalanceItemProps) {
+export function BalanceItem({
+  balanceInfo,
+  bridgeToL2OnClick,
+}: BalanceItemProps) {
   const { connectLoaderState } = useContext(ConnectLoaderContext);
   const { checkout, provider } = connectLoaderState;
   const fiatAmount = `≈ USD $${formatZeroAmount(balanceInfo.fiatAmount)}`;
@@ -43,17 +36,22 @@ export function BalanceItem({ balanceInfo, bridgeToL2OnClick }: BalanceItemProps
   const [isOnRampEnabled, setIsOnRampEnabled] = useState<boolean>();
   const [isBridgeEnabled, setIsBridgeEnabled] = useState<boolean>();
   const [isSwapEnabled, setIsSwapEnabled] = useState<boolean>();
-  const { eventTargetState: { eventTarget } } = useContext(EventTargetContext);
-  const [onRampAllowedTokens, setOnRampAllowedTokens] = useState<TokenInfo[]>([]);
+  const {
+    eventTargetState: { eventTarget },
+  } = useContext(EventTargetContext);
+  const [onRampAllowedTokens, setOnRampAllowedTokens] = useState<TokenInfo[]>(
+    [],
+  );
 
   const isPassport = isPassportProvider(provider);
 
   useEffect(() => {
     const getOnRampAllowedTokens = async () => {
       if (!checkout) return;
-      const onRampAllowedTokensResult = await checkout.getTokenAllowList(
-        { type: TokenFilterTypes.ONRAMP, chainId: getL2ChainId(checkout.config) },
-      );
+      const onRampAllowedTokensResult = await checkout.getTokenAllowList({
+        type: TokenFilterTypes.ONRAMP,
+        chainId: getL2ChainId(checkout.config),
+      });
       setOnRampAllowedTokens(onRampAllowedTokensResult.tokens);
     };
     getOnRampAllowedTokens();
@@ -77,71 +75,68 @@ export function BalanceItem({ balanceInfo, bridgeToL2OnClick }: BalanceItemProps
   }, [network, supportedTopUps, checkout, isPassport]);
 
   const showAddMenuItem = useMemo(
-    () => Boolean(isOnRampEnabled
-    && onRampAllowedTokens.length > 0
-    && onRampAllowedTokens.find((token) => token.address?.toLowerCase() === balanceInfo.address?.toLowerCase())),
+    () => Boolean(
+      isOnRampEnabled
+          && onRampAllowedTokens.length > 0
+          && onRampAllowedTokens.find(
+            (token) => token.address?.toLowerCase()
+              === balanceInfo.address?.toLowerCase(),
+          ),
+    ),
     [isOnRampEnabled, onRampAllowedTokens],
   );
 
   return (
-    <Box
-      testId={`balance-item-${balanceInfo.symbol}`}
-      sx={balanceItemContainerStyle}
-    >
-      <Box sx={balanceItemCoinBoxStyle}>
-        <Icon icon="Coins" sx={{ width: 'base.icon.size.300' }} />
-        <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-          <Body>{balanceInfo.symbol}</Body>
-          <Body size="small">{balanceInfo.description}</Body>
-        </Box>
-      </Box>
-      <Box sx={balanceItemPriceBoxStyle}>
-        <PriceDisplay
-          testId={`balance-item-${balanceInfo.symbol}`}
-          use={<Heading size="xSmall" />}
-          price={tokenValueFormat(balanceInfo.balance)}
-          fiatAmount={fiatAmount}
-        />
-        {(isOnRampEnabled || isSwapEnabled || isBridgeEnabled) && (
-          <OverflowPopoverMenu size="small" testId="token-menu">
-            <MenuItem
-              testId="balance-item-add-option"
-              sx={ShowMenuItem(showAddMenuItem)}
-              onClick={() => {
-                orchestrationEvents.sendRequestOnrampEvent(eventTarget, IMTBLWidgetEvents.IMTBL_WALLET_WIDGET_EVENT, {
-                  tokenAddress: balanceInfo.address ?? '',
-                  amount: '',
-                });
-              }}
-            >
-              <MenuItem.Icon icon="Add" />
-              <MenuItem.Label>{`Add ${balanceInfo.symbol}`}</MenuItem.Label>
-            </MenuItem>
-            <MenuItem
-              testId="balance-item-swap-option"
-              sx={ShowMenuItem(isSwapEnabled)}
-              onClick={() => {
-                orchestrationEvents.sendRequestSwapEvent(eventTarget, IMTBLWidgetEvents.IMTBL_WALLET_WIDGET_EVENT, {
-                  fromTokenAddress: balanceInfo.address ?? '',
-                  toTokenAddress: '',
-                  amount: '',
-                });
-              }}
-            >
-              <MenuItem.Icon icon="Exchange" />
-              <MenuItem.Label>{`Swap ${balanceInfo.symbol}`}</MenuItem.Label>
-            </MenuItem>
-            <MenuItem
-              testId="balance-item-move-option"
-              sx={ShowMenuItem(isBridgeEnabled)}
-              onClick={() => bridgeToL2OnClick(balanceInfo.address)}
-            >
-              <MenuItem.Icon icon="Minting" />
-              <MenuItem.Label>{`Move ${balanceInfo.symbol}`}</MenuItem.Label>
-            </MenuItem>
-          </OverflowPopoverMenu>
-        )}
-      </Box>
-    </Box>
+    <MenuItem testId={`balance-item-${balanceInfo.symbol}`} emphasized>
+      <MenuItem.FramedIcon icon="Coins" circularFrame />
+      <MenuItem.Label>{balanceInfo.symbol}</MenuItem.Label>
+      <MenuItem.Caption>{balanceInfo.description}</MenuItem.Caption>
+      <MenuItem.PriceDisplay
+        testId={`balance-item-${balanceInfo.symbol}`}
+        use={<Heading size="xSmall" />}
+        price={tokenValueFormat(balanceInfo.balance)}
+        fiatAmount={fiatAmount}
+      />
+      {(isOnRampEnabled || isSwapEnabled || isBridgeEnabled) && (
+      <MenuItem.OverflowPopoverMenu size="small" testId="token-menu">
+        <MenuItem
+          testId="balance-item-add-option"
+          sx={ShowMenuItem(showAddMenuItem)}
+          onClick={() => {
+            orchestrationEvents.sendRequestOnrampEvent(eventTarget, IMTBLWidgetEvents.IMTBL_WALLET_WIDGET_EVENT, {
+              tokenAddress: balanceInfo.address ?? '',
+              amount: '',
+            });
+          }}
+        >
+          <MenuItem.Icon icon="Add" />
+          <MenuItem.Label>{`Add ${balanceInfo.symbol}`}</MenuItem.Label>
+        </MenuItem>
+        <MenuItem
+          testId="balance-item-swap-option"
+          sx={ShowMenuItem(isSwapEnabled)}
+          onClick={() => {
+            orchestrationEvents.sendRequestSwapEvent(eventTarget, IMTBLWidgetEvents.IMTBL_WALLET_WIDGET_EVENT, {
+              fromTokenAddress: balanceInfo.address ?? '',
+              toTokenAddress: '',
+              amount: '',
+            });
+          }}
+        >
+          <MenuItem.Icon icon="Exchange" />
+          <MenuItem.Label>{`Swap ${balanceInfo.symbol}`}</MenuItem.Label>
+        </MenuItem>
+        <MenuItem
+          testId="balance-item-move-option"
+          sx={ShowMenuItem(isBridgeEnabled)}
+          onClick={() => bridgeToL2OnClick(balanceInfo.address)}
+        >
+          <MenuItem.Icon icon="Minting" />
+          <MenuItem.Label>{`Move ${balanceInfo.symbol}`}</MenuItem.Label>
+        </MenuItem>
+      </MenuItem.OverflowPopoverMenu>
+      )}
+    </MenuItem>
+
   );
 }
@@ -16,12 +16,13 @@ import { text } from '../../../../resources/text/textConfig';
 
 interface TotalTokenBalanceProps {
   totalBalance: number;
+  loading: boolean;
 }
 
 export function TotalTokenBalance(props: TotalTokenBalanceProps) {
   const { viewDispatch } = useContext(ViewContext);
   const { totalTokenBalance } = text.views[WalletWidgetViews.WALLET_BALANCES];
-  const { totalBalance } = props;
+  const { totalBalance, loading } = props;
   return (
     <Box sx={totalTokenBalanceStyle}>
       <Box sx={totalTokenBalanceValueStyle}>
@@ -42,13 +43,15 @@ export function TotalTokenBalance(props: TotalTokenBalanceProps) {
         </Box>
       </Box>
       <Box sx={totalTokenBalanceValueStyle}>
-        <Body size="medium" weight="bold">
+        <Body testId="total-token-balance-value" weight="bold" shimmer={loading ? 1 : 0} shimmerSx={{ minw: '100px' }}>
           {totalTokenBalance.totalHeading}
         </Body>
-        <Body testId="total-token-balance" size="medium" weight="bold">
+        {!loading && (
+        <Body testId="total-token-balance" weight="bold">
           &asymp; USD $
           {totalBalance.toFixed(2)}
         </Body>
+        )}
       </Box>
     </Box>
   );