diff --git a/packages/checkout/widgets-lib/src/components/CoinSelector/CoinSelector.tsx b/packages/checkout/widgets-lib/src/components/CoinSelector/CoinSelector.tsx index fc9ec3b05d..bd804fa270 100644 --- 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({ - {options.length === 0 && ({noCoins})} - {options.map(({ + {optionsLoading && options.length === 0 && ( + + + + + + )} + {!optionsLoading && options.length === 0 && ({noCoins})} + {!optionsLoading && options.map(({ onClick, icon, name, symbol, balance, id, testId, }) => ( setCoinSelectorOpen(false)} /> diff --git a/packages/checkout/widgets-lib/src/resources/text/textConfig.ts b/packages/checkout/widgets-lib/src/resources/text/textConfig.ts index 8aa14cf234..8fd1a388c5 100644 --- 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 index e02c64182f..e5f976de3f 100644 --- 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 index e0d5b9bf7a..cb516b53c1 100644 --- 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} - {isTokenBalancesLoading && ( - - )} - {!isTokenBalancesLoading && ( + {(!defaultTokenAddress || !isTokenBalancesLoading) && ( )} + {defaultTokenAddress && isTokenBalancesLoading && ( + + )} {gasFee && ( - - - {fees.title} - - - setShowFeeBreakdown(true)} - /> - + setShowFeeBreakdown(true)} + sx={gasAmountAccordionStyles} + > + + + {fees.title} + + + + + + )} @@ -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 index f8a051c6bf..dddcafd024 100644 --- 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 index 7271d53e3c..40cb2025bb 100644 --- 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() { )} {gasFee && ( - setShowFeeBreakdown(true)} sx={bottomMenuItemStyles} > - - {fees.heading} - - } - price={`${estimates?.token?.symbol} ${tokenValueFormat(gasFee)}` ?? '-'} - fiatAmount={`${fiatPricePrefix}${gasFeeFiatValue}`} - /> - setShowFeeBreakdown(true)} - /> - + + + {fees.heading} + + + + + + )}