fix: WT-1970 Bridge widget design feedback (#1294)

immutable · Dec 19, 2023 · 1d6575b · 1d6575b
1 parent 5986f4c
commit 1d6575b
Show file tree

Hide file tree

Showing 9 changed files with 83 additions and 59 deletions.
diff --git a/packages/checkout/widgets-lib/src/components/CoinSelector/CoinSelector.tsx b/packages/checkout/widgets-lib/src/components/CoinSelector/CoinSelector.tsx
@@ -2,21 +2,23 @@ import {
   Body,
   Drawer,
   Box,
+  MenuItem,
 } from '@biom3/react';
 import { CoinSelectorOption, CoinSelectorOptionProps } from './CoinSelectorOption';
-import { selectOptionsContainerStyles } from './CoinSelectorStyles';
+import { selectOptionsContainerStyles, selectOptionsLoadingIconStyles } from './CoinSelectorStyles';
 import { text } from '../../resources/text/textConfig';
 
 type CoinSelectorProps = {
   onCloseDrawer?: () => void;
   heading: string;
   options: CoinSelectorOptionProps[];
+  optionsLoading?: boolean;
   children?: any;
   visible?: boolean;
 };
 
 export function CoinSelector({
-  heading, options, children, onCloseDrawer, visible,
+  heading, options, optionsLoading, children, onCloseDrawer, visible,
 }: CoinSelectorProps) {
   const { noCoins } = text.drawers.coinSelector;
   return (
@@ -26,8 +28,15 @@ export function CoinSelector({
       </Drawer.Target>
       <Drawer.Content>
         <Box sx={selectOptionsContainerStyles}>
-          {options.length === 0 && (<Body sx={{ padding: 'base.spacing.x4' }}>{noCoins}</Body>)}
-          {options.map(({
+          {optionsLoading && options.length === 0 && (
+            <Box sx={selectOptionsLoadingIconStyles}>
+              <MenuItem shimmer emphasized testId="balance-item-shimmer--1" />
+              <MenuItem shimmer emphasized testId="balance-item-shimmer--2" />
+              <MenuItem shimmer emphasized testId="balance-item-shimmer--3" />
+            </Box>
+          )}
+          {!optionsLoading && options.length === 0 && (<Body sx={{ padding: 'base.spacing.x4' }}>{noCoins}</Body>)}
+          {!optionsLoading && options.map(({
             onClick, icon, name, symbol, balance, id, testId,
           }) => (
             <CoinSelectorOption

diff --git a/packages/checkout/widgets-lib/src/components/CoinSelector/CoinSelectorStyles.tsx b/packages/checkout/widgets-lib/src/components/CoinSelector/CoinSelectorStyles.tsx
@@ -3,3 +3,9 @@ export const selectOptionsContainerStyles = {
   flexDirection: 'column',
   gap: '2px',
 };
+
+export const selectOptionsLoadingIconStyles = {
+  display: 'flex',
+  flexDirection: 'column',
+  rowGap: 'base.spacing.x2',
+};
diff --git a/packages/checkout/widgets-lib/src/components/FormComponents/SelectForm/SelectForm.tsx b/packages/checkout/widgets-lib/src/components/FormComponents/SelectForm/SelectForm.tsx
@@ -9,6 +9,7 @@ import { CoinSelectorOptionProps } from '../../CoinSelector/CoinSelectorOption';
 interface SelectFormProps {
   testId: string;
   options: CoinSelectorOptionProps[];
+  optionsLoading?: boolean;
   textAlign?: 'left' | 'right';
   subtext?: string;
   errorMessage?: string;
@@ -21,6 +22,7 @@ interface SelectFormProps {
 export function SelectForm({
   testId,
   options,
+  optionsLoading,
   subtext,
   onSelectChange,
   textAlign,
@@ -52,6 +54,7 @@ export function SelectForm({
       <CoinSelector
         heading={coinSelectorHeading}
         options={coinSelectorOptions}
+        optionsLoading={optionsLoading ?? false}
         visible={coinSelectorOpen}
         onCloseDrawer={() => setCoinSelectorOpen(false)}
       />

diff --git a/packages/checkout/widgets-lib/src/resources/text/textConfig.ts b/packages/checkout/widgets-lib/src/resources/text/textConfig.ts
@@ -385,7 +385,7 @@ export const text = {
         title: 'Move coins',
       },
       fees: {
-        title: 'Gas Fee',
+        title: 'Estimated fees',
         fiatPricePrefix: '~ USD $',
       },
       content: {
@@ -417,7 +417,7 @@ export const text = {
         heading: 'To',
       },
       fees: {
-        heading: 'Gas fee',
+        heading: 'Estimated fees',
       },
       submitButton: {
         buttonText: 'Confirm move',

diff --git a/packages/checkout/widgets-lib/src/widgets/bridge/BridgeWidget.cy.tsx b/packages/checkout/widgets-lib/src/widgets/bridge/BridgeWidget.cy.tsx
@@ -554,14 +554,12 @@ describe('BridgeWidget', () => {
       cySmartGet('bridge-token-select__target').click();
       cySmartGet('bridge-token-coin-selector__option-imx').click();
       cySmartGet('bridge-amount-text__input').type('1').blur();
-      cySmartGet('bridge-gas-fee__priceDisplay__price').should('have.text', 'IMX 0.210000');
+      cySmartGet('bridge-gas-fee__priceDisplay').should('have.text', 'IMX 0.210000~ USD $ 0.32');
       cySmartGet('bridge-form-button').click();
 
       // Review screen
-      cySmartGet('bridge-review-summary-from-amount__priceDisplay__price').should('have.text', 'IMX 1');
-      cySmartGet('bridge-review-summary-from-amount__priceDisplay__fiatAmount').should('have.text', '~ USD $1.50');
-      cySmartGet('bridge-review-summary-gas-amount__priceDisplay__price').should('have.text', 'IMX 0.210000');
-      cySmartGet('bridge-review-summary-gas-amount__priceDisplay__fiatAmount').should('have.text', '~ USD $0.32');
+      cySmartGet('bridge-review-summary-from-amount__priceDisplay').should('have.text', 'IMX 1~ USD $1.50');
+      cySmartGet('bridge-review-summary-gas-amount__priceDisplay').should('have.text', 'IMX 0.210000~ USD $0.32');
       cySmartGet('bridge-review-summary-from-address__label').should('include.text', '0x0987...4321');
       cySmartGet('bridge-review-summary-to-address__label').should('include.text', '0x1234...7890');
       cySmartGet('bridge-review-summary__submit-button').click();
@@ -663,14 +661,12 @@ describe('BridgeWidget', () => {
       cySmartGet('bridge-token-select__target').click();
       cySmartGet('bridge-token-coin-selector__option-eth').click();
       cySmartGet('bridge-amount-text__input').type('0.1').blur();
-      cySmartGet('bridge-gas-fee__priceDisplay__price').should('have.text', 'ETH 0.002100');
+      cySmartGet('bridge-gas-fee__priceDisplay').should('have.text', 'ETH 0.002100~ USD $ 4.20');
       cySmartGet('bridge-form-button').click();
 
       // // Review screen
-      cySmartGet('bridge-review-summary-from-amount__priceDisplay__price').should('have.text', 'ETH 0.1');
-      cySmartGet('bridge-review-summary-from-amount__priceDisplay__fiatAmount').should('have.text', '~ USD $200.00');
-      cySmartGet('bridge-review-summary-gas-amount__priceDisplay__price').should('have.text', 'ETH 0.002100');
-      cySmartGet('bridge-review-summary-gas-amount__priceDisplay__fiatAmount').should('have.text', '~ USD $4.20');
+      cySmartGet('bridge-review-summary-from-amount__priceDisplay').should('have.text', 'ETH 0.1~ USD $200.00');
+      cySmartGet('bridge-review-summary-gas-amount__priceDisplay').should('have.text', 'ETH 0.002100~ USD $4.20');
       cySmartGet('bridge-review-summary-from-address__label').should('include.text', '0x1234...7890');
       cySmartGet('bridge-review-summary-to-address__label').should('include.text', '0x0987...4321');
       cySmartGet('bridge-review-summary__submit-button').click();

diff --git a/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeForm.tsx b/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeForm.tsx
@@ -1,9 +1,11 @@
 import {
+  Accordion,
+  Body,
   Box,
   Button,
   Heading,
-  MenuItem,
   OptionKey,
+  PriceDisplay,
 } from '@biom3/react';
 import {
   GasEstimateBridgeToL2Result,
@@ -36,6 +38,7 @@ import {
   bridgeFormButtonContainerStyles,
   bridgeFormWrapperStyles,
   formInputsContainerStyles,
+  gasAmountAccordionStyles,
   gasAmountHeadingStyles,
 } from './BridgeFormStyles';
 import { CoinSelectorOptionProps } from '../../../components/CoinSelector/CoinSelectorOption';
@@ -423,14 +426,12 @@ export function BridgeForm(props: BridgeFormProps) {
         >
           {content.title}
         </Heading>
-        {isTokenBalancesLoading && (
-          <TokenSelectShimmer sx={formInputsContainerStyles} />
-        )}
-        {!isTokenBalancesLoading && (
+        {(!defaultTokenAddress || !isTokenBalancesLoading) && (
           <Box sx={formInputsContainerStyles}>
             <SelectForm
               testId="bridge-token"
               options={tokensOptions}
+              optionsLoading={isTokenBalancesLoading}
               coinSelectorHeading={bridgeForm.from.selectorTitle}
               selectedOption={selectedOption}
               subtext={tokenBalanceSubtext}
@@ -454,21 +455,28 @@ export function BridgeForm(props: BridgeFormProps) {
             />
           </Box>
         )}
+        {defaultTokenAddress && isTokenBalancesLoading && (
+          <TokenSelectShimmer sx={formInputsContainerStyles} />
+        )}
         {gasFee && (
           <Box sx={{ paddingY: 'base.spacing.x2' }}>
-            <MenuItem testId="bridge-gas-fee" emphasized size="small">
-              <MenuItem.Label sx={gasAmountHeadingStyles}>
-                {fees.title}
-              </MenuItem.Label>
-              <MenuItem.PriceDisplay
-                fiatAmount={`${fees.fiatPricePrefix} ${gasFeeFiatValue}`}
-                price={`${estimates?.token?.symbol} ${tokenValueFormat(gasFee)}`}
-              />
-              <MenuItem.StatefulButtCon
-                icon="ChevronExpand"
-                onClick={() => setShowFeeBreakdown(true)}
-              />
-            </MenuItem>
+            <Accordion
+              targetClickOveride={() => setShowFeeBreakdown(true)}
+              sx={gasAmountAccordionStyles}
+            >
+              <Accordion.TargetLeftSlot>
+                <Body size="medium" sx={gasAmountHeadingStyles}>
+                  {fees.title}
+                </Body>
+              </Accordion.TargetLeftSlot>
+              <Accordion.TargetRightSlot>
+                <PriceDisplay
+                  testId="bridge-gas-fee__priceDisplay"
+                  fiatAmount={`${fees.fiatPricePrefix} ${gasFeeFiatValue}`}
+                  price={`${estimates?.token?.symbol} ${tokenValueFormat(gasFee)}`}
+                />
+              </Accordion.TargetRightSlot>
+            </Accordion>
           </Box>
         )}
       </Box>
@@ -511,10 +519,10 @@ export function BridgeForm(props: BridgeFormProps) {
           walletAddress={walletAddress}
           showAdjustAmount={isNativeToken(formToken?.token.address)}
           tokenSymbol={
-            from?.network === getL1ChainId(checkout?.config)
-              ? ETH_TOKEN_SYMBOL
-              : IMX_TOKEN_SYMBOL
-          }
+              from?.network === getL1ChainId(checkout?.config)
+                ? ETH_TOKEN_SYMBOL
+                : IMX_TOKEN_SYMBOL
+            }
           onAddCoinsClick={() => {
             viewDispatch({
               payload: {

diff --git a/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeFormStyles.ts b/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeFormStyles.ts
@@ -3,6 +3,7 @@ export const bridgeFormWrapperStyles = {
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'space-between',
+  paddingTop: 'base.spacing.x10',
 };
 
 export const formInputsContainerStyles = {
@@ -18,6 +19,10 @@ export const bridgeFormButtonContainerStyles = {
   paddingX: 'base.spacing.x4',
 };
 
+export const gasAmountAccordionStyles = {
+  backgroundColor: 'base.color.translucent.emphasis.100',
+};
+
 export const gasAmountHeadingStyles = {
   marginBottom: 'base.spacing.x4',
   color: 'base.color.text.secondary',

diff --git a/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeReviewSummary.tsx b/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeReviewSummary.tsx
@@ -8,8 +8,9 @@ import {
 } from 'react';
 import { BridgeWidgetViews } from 'context/view-context/BridgeViewContextTypes';
 import {
+  Accordion,
   Body,
-  Box, Button, Heading, Icon, MenuItem,
+  Box, Button, Heading, Icon, MenuItem, PriceDisplay,
 } from '@biom3/react';
 import {
   ChainId, GasEstimateBridgeToL2Result, GasEstimateType, WalletProviderName,
@@ -280,28 +281,23 @@ export function BridgeReviewSummary() {
         )}
       </MenuItem>
       {gasFee && (
-        <MenuItem
-          testId={`${testId}-gas-amount`}
-          size="small"
-          emphasized
+        <Accordion
+          targetClickOveride={() => setShowFeeBreakdown(true)}
           sx={bottomMenuItemStyles}
         >
-          <MenuItem.Label
-            size="small"
-            sx={gasAmountHeadingStyles}
-          >
-            {fees.heading}
-          </MenuItem.Label>
-          <MenuItem.PriceDisplay
-            use={<Body size="xSmall" />}
-            price={`${estimates?.token?.symbol} ${tokenValueFormat(gasFee)}` ?? '-'}
-            fiatAmount={`${fiatPricePrefix}${gasFeeFiatValue}`}
-          />
-          <MenuItem.StatefulButtCon
-            icon="ChevronExpand"
-            onClick={() => setShowFeeBreakdown(true)}
-          />
-        </MenuItem>
+          <Accordion.TargetLeftSlot>
+            <Body size="medium" sx={gasAmountHeadingStyles}>
+              {fees.heading}
+            </Body>
+          </Accordion.TargetLeftSlot>
+          <Accordion.TargetRightSlot>
+            <PriceDisplay
+              testId={`${testId}-gas-amount__priceDisplay`}
+              fiatAmount={`${fiatPricePrefix}${gasFeeFiatValue}`}
+              price={`${estimates?.token?.symbol} ${tokenValueFormat(gasFee)}` ?? '-'}
+            />
+          </Accordion.TargetRightSlot>
+        </Accordion>
       )}
       <Box
         sx={{

diff --git a/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeReviewSummaryStyles.ts b/packages/checkout/widgets-lib/src/widgets/bridge/components/BridgeReviewSummaryStyles.ts
@@ -9,6 +9,7 @@ export const topMenuItemStyles = {
 export const bottomMenuItemStyles = {
   borderTopLeftRadius: '0px',
   borderTopRightRadius: '0px',
+  backgroundColor: 'base.color.translucent.emphasis.100',
 };
 
 export const bridgeReviewWrapperStyles = {