From 25247d0300dd334bccc61bd494a42417c756ba79 Mon Sep 17 00:00:00 2001 From: George Marshall Date: Tue, 25 Jul 2023 09:05:37 -0700 Subject: [PATCH] Updating Icon types and component to use TS Box component (#19990) --- .../__snapshots__/beta-header.test.js.snap | 2 +- ...ge-container-header.component.test.js.snap | 2 +- .../custom-spending-cap.test.js.snap | 2 +- .../ledger-instruction-field.test.js.snap | 2 +- .../customize-nonce.test.js.snap | 2 +- .../__snapshots__/eth-sign-modal.test.js.snap | 6 +- .../export-private-key-modal.test.js.snap | 2 +- .../transaction-confirmed.test.js.snap | 2 +- .../__snapshots__/nft-details.test.js.snap | 6 +- ...ecurity-provider-banner-alert.test.js.snap | 6 +- .../blockaid-banner-alert.test.js.snap | 14 ++--- .../selected-account-component.test.js.snap | 2 +- .../signature-request.test.js.snap | 4 +- ...action-activity-log.component.test.js.snap | 8 +-- .../__snapshots__/avatar-favicon.test.js.snap | 2 +- .../__snapshots__/avatar-icon.test.js.snap | 2 +- .../__snapshots__/banner-alert.test.js.snap | 2 +- .../__snapshots__/button-icon.test.tsx.snap | 2 +- .../button-icon/button-icon.types.ts | 5 +- .../checkbox/checkbox.types.ts | 2 +- .../icon/__snapshots__/icon.test.tsx.snap | 2 +- .../component-library/icon/icon.stories.tsx | 3 +- .../component-library/icon/icon.test.tsx | 6 +- ui/components/component-library/icon/icon.tsx | 63 ++++++++++--------- .../component-library/icon/icon.types.ts | 17 ++++- ui/components/component-library/icon/index.ts | 6 +- .../__snapshots__/picker-network.test.js.snap | 2 +- .../__snapshots__/tag-url.test.js.snap | 2 +- .../text-field-search.test.js.snap | 2 +- .../__snapshots__/jwt-dropdown.test.js.snap | 2 +- .../account-list-item.test.js.snap | 2 +- .../__snapshots__/account-picker.test.js.snap | 2 +- .../activity-list-item.test.js.snap | 2 +- .../__snapshots__/app-header.test.js.snap | 6 +- .../connected-site-menu.test.js.snap | 6 +- .../detected-token-banner.test.js.snap | 2 +- .../import-token-link.test.js.snap | 8 +-- .../network-list-item.test.js.snap | 2 +- .../error-message.component.test.js.snap | 4 +- ...irm-approve-content.component.test.js.snap | 8 +-- .../confirm-send-ether.test.js.snap | 6 +- .../__snapshots__/index.test.js.snap | 2 +- .../add-ethereum-chain.test.js.snap | 20 +++--- .../__snapshots__/error.test.js.snap | 2 +- .../__snapshots__/success.test.js.snap | 2 +- .../switch-ethereum-chain.test.js.snap | 2 +- .../__snapshots__/index.test.tsx.snap | 2 +- .../__snapshots__/account-list.test.js.snap | 8 +-- .../__snapshots__/custody.test.js.snap | 2 +- .../__snapshots__/reveal-seed.test.js.snap | 2 +- .../snap-account-detail-page.test.tsx.snap | 6 +- .../__snapshots__/snap-card.test.tsx.snap | 2 +- .../__snapshots__/metametrics.test.js.snap | 10 +-- .../onboarding-app-header.test.js.snap | 2 +- .../review-recovery-phrase.test.js.snap | 2 +- .../__snapshots__/send-gas-row.test.js.snap | 4 +- .../dropdown-search-list.test.js.snap | 2 +- .../exchange-rate-display.test.js.snap | 2 +- .../list-with-search.test.js.snap | 2 +- .../main-quote-summary.test.js.snap | 2 +- .../__snapshots__/selected-token.test.js.snap | 4 +- .../view-quote-price-difference.test.js.snap | 8 +-- .../__snapshots__/view-quote.test.js.snap | 4 +- .../token-allowance.test.js.snap | 6 +- 64 files changed, 174 insertions(+), 152 deletions(-) diff --git a/ui/components/app/beta-header/__snapshots__/beta-header.test.js.snap b/ui/components/app/beta-header/__snapshots__/beta-header.test.js.snap index 56524a2b9..3e0c260d1 100644 --- a/ui/components/app/beta-header/__snapshots__/beta-header.test.js.snap +++ b/ui/components/app/beta-header/__snapshots__/beta-header.test.js.snap @@ -28,7 +28,7 @@ exports[`Beta Header should match snapshot 1`] = ` data-testid="beta-header-close" > diff --git a/ui/components/app/confirm-page-container/confirm-page-container-header/__snapshots__/confirm-page-container-header.component.test.js.snap b/ui/components/app/confirm-page-container/confirm-page-container-header/__snapshots__/confirm-page-container-header.component.test.js.snap index 788540730..6bcd678b7 100644 --- a/ui/components/app/confirm-page-container/confirm-page-container-header/__snapshots__/confirm-page-container-header.component.test.js.snap +++ b/ui/components/app/confirm-page-container/confirm-page-container-header/__snapshots__/confirm-page-container-header.component.test.js.snap @@ -14,7 +14,7 @@ exports[`Confirm Detail Row Component should match snapshot 1`] = ` style="visibility: hidden;" > diff --git a/ui/components/app/ledger-instruction-field/__snapshots__/ledger-instruction-field.test.js.snap b/ui/components/app/ledger-instruction-field/__snapshots__/ledger-instruction-field.test.js.snap index f198b593f..24031c4a1 100644 --- a/ui/components/app/ledger-instruction-field/__snapshots__/ledger-instruction-field.test.js.snap +++ b/ui/components/app/ledger-instruction-field/__snapshots__/ledger-instruction-field.test.js.snap @@ -10,7 +10,7 @@ exports[`LedgerInstructionField Component rendering should render properly with class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-info box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-primary-muted box--rounded-sm" >
diff --git a/ui/components/app/modals/customize-nonce/__snapshots__/customize-nonce.test.js.snap b/ui/components/app/modals/customize-nonce/__snapshots__/customize-nonce.test.js.snap index 309780a8f..7dc9032a9 100644 --- a/ui/components/app/modals/customize-nonce/__snapshots__/customize-nonce.test.js.snap +++ b/ui/components/app/modals/customize-nonce/__snapshots__/customize-nonce.test.js.snap @@ -24,7 +24,7 @@ exports[`Customize Nonce should match snapshot 1`] = ` class="box mm-button-icon mm-button-icon--size-sm customize-nonce-modal__close box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-default box--background-color-transparent box--rounded-lg" > diff --git a/ui/components/app/modals/eth-sign-modal/__snapshots__/eth-sign-modal.test.js.snap b/ui/components/app/modals/eth-sign-modal/__snapshots__/eth-sign-modal.test.js.snap index 0850fa7a0..1e96bdb57 100644 --- a/ui/components/app/modals/eth-sign-modal/__snapshots__/eth-sign-modal.test.js.snap +++ b/ui/components/app/modals/eth-sign-modal/__snapshots__/eth-sign-modal.test.js.snap @@ -9,7 +9,7 @@ exports[`Eth Sign Modal should match snapshot 1`] = ` class="box box--margin-bottom-4 box--display-flex box--flex-direction-row box--justify-content-center" > @@ -44,7 +44,7 @@ exports[`Eth Sign Modal should match snapshot 1`] = ` class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-danger box--margin-top-6 box--margin-bottom-6 box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-error-muted box--rounded-sm" >
diff --git a/ui/components/app/modals/export-private-key-modal/__snapshots__/export-private-key-modal.test.js.snap b/ui/components/app/modals/export-private-key-modal/__snapshots__/export-private-key-modal.test.js.snap index e424c1b24..6df657baa 100644 --- a/ui/components/app/modals/export-private-key-modal/__snapshots__/export-private-key-modal.test.js.snap +++ b/ui/components/app/modals/export-private-key-modal/__snapshots__/export-private-key-modal.test.js.snap @@ -105,7 +105,7 @@ exports[`Export PrivateKey Modal should match snapshot 1`] = ` class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-danger box--margin-top-4 box--margin-right-5 box--margin-left-5 box--padding-1 box--sm:padding-3 box--lg:padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-error-muted box--rounded-sm" >
diff --git a/ui/components/app/modals/transaction-confirmed/__snapshots__/transaction-confirmed.test.js.snap b/ui/components/app/modals/transaction-confirmed/__snapshots__/transaction-confirmed.test.js.snap index 5368bd397..b4b6ed440 100644 --- a/ui/components/app/modals/transaction-confirmed/__snapshots__/transaction-confirmed.test.js.snap +++ b/ui/components/app/modals/transaction-confirmed/__snapshots__/transaction-confirmed.test.js.snap @@ -12,7 +12,7 @@ exports[`Transaction Confirmed should match snapshot 1`] = ` class="transaction-confirmed__content" >
@@ -30,7 +30,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = ` data-testid="nft-options__button" > @@ -195,7 +195,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = ` data-testid="nft-address-copy" > diff --git a/ui/components/app/security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap b/ui/components/app/security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap index 54139024c..db26f9e91 100644 --- a/ui/components/app/security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap +++ b/ui/components/app/security-provider-banner-alert/__snapshots__/security-provider-banner-alert.test.js.snap @@ -6,7 +6,7 @@ exports[`Security Provider Banner Alert should match snapshot 1`] = ` class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-danger box--margin-top-4 box--margin-right-4 box--margin-left-4 box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-error-muted box--rounded-sm" >
@@ -34,7 +34,7 @@ exports[`Security Provider Banner Alert should match snapshot 1`] = ` [seeDetails]

@@ -62,7 +62,7 @@ exports[`Security Provider Banner Alert should match snapshot 1`] = ` class="mm-box mm-text mm-text--body-sm mm-box--margin-top-2 mm-box--align-items-center mm-box--color-text-alternative" > [securityProviderAdviceBy] diff --git a/ui/components/app/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap b/ui/components/app/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap index ca18324d9..23b9c5825 100644 --- a/ui/components/app/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap +++ b/ui/components/app/security-provider-banner-alert/blockaid-banner-alert/__snapshots__/blockaid-banner-alert.test.js.snap @@ -5,7 +5,7 @@ exports[`Blockaid Banner Alert should render 'danger' UI when ppomResponse.resul class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-danger box--margin-top-4 box--margin-right-4 box--margin-left-4 box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-error-muted box--rounded-sm" >
@@ -24,7 +24,7 @@ exports[`Blockaid Banner Alert should render 'danger' UI when ppomResponse.resul class="mm-box mm-text mm-text--body-sm mm-box--margin-top-2 mm-box--align-items-center mm-box--color-text-alternative" > @@ -51,7 +51,7 @@ exports[`Blockaid Banner Alert should render 'warning' UI when ppomResponse.resu class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-warning box--margin-top-4 box--margin-right-4 box--margin-left-4 box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-warning-muted box--rounded-sm" >
@@ -70,7 +70,7 @@ exports[`Blockaid Banner Alert should render 'warning' UI when ppomResponse.resu class="mm-box mm-text mm-text--body-sm mm-box--margin-top-2 mm-box--align-items-center mm-box--color-text-alternative" > @@ -98,7 +98,7 @@ exports[`Blockaid Banner Alert should render details when provided 1`] = ` class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-warning box--margin-top-4 box--margin-right-4 box--margin-left-4 box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-warning-muted box--rounded-sm" >
@@ -126,7 +126,7 @@ exports[`Blockaid Banner Alert should render details when provided 1`] = ` See details

@@ -155,7 +155,7 @@ exports[`Blockaid Banner Alert should render details when provided 1`] = ` class="mm-box mm-text mm-text--body-sm mm-box--margin-top-2 mm-box--align-items-center mm-box--color-text-alternative" > diff --git a/ui/components/app/selected-account/__snapshots__/selected-account-component.test.js.snap b/ui/components/app/selected-account/__snapshots__/selected-account-component.test.js.snap index 6031f8d0b..32e618365 100644 --- a/ui/components/app/selected-account/__snapshots__/selected-account-component.test.js.snap +++ b/ui/components/app/selected-account/__snapshots__/selected-account-component.test.js.snap @@ -33,7 +33,7 @@ exports[`SelectedAccount Component should match snapshot 1`] = ` class="selected-account__copy" >
diff --git a/ui/components/app/signature-request/__snapshots__/signature-request.test.js.snap b/ui/components/app/signature-request/__snapshots__/signature-request.test.js.snap index c7cdfac65..ae126915e 100644 --- a/ui/components/app/signature-request/__snapshots__/signature-request.test.js.snap +++ b/ui/components/app/signature-request/__snapshots__/signature-request.test.js.snap @@ -185,7 +185,7 @@ exports[`Signature Request Component render should match snapshot when we are us class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-favicon mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1" >
@@ -960,7 +960,7 @@ exports[`Signature Request Component render should match snapshot when we want t class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-favicon mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1" >
diff --git a/ui/components/app/transaction-activity-log/__snapshots__/transaction-activity-log.component.test.js.snap b/ui/components/app/transaction-activity-log/__snapshots__/transaction-activity-log.component.test.js.snap index f99da1fac..31d7667af 100644 --- a/ui/components/app/transaction-activity-log/__snapshots__/transaction-activity-log.component.test.js.snap +++ b/ui/components/app/transaction-activity-log/__snapshots__/transaction-activity-log.component.test.js.snap @@ -20,7 +20,7 @@ exports[`TransactionActivityLog Component should match snapshot 1`] = ` class="transaction-activity-log-icon transaction-activity-log__activity-icon" >
@@ -42,7 +42,7 @@ exports[`TransactionActivityLog Component should match snapshot 1`] = ` class="transaction-activity-log-icon transaction-activity-log__activity-icon" >
@@ -64,7 +64,7 @@ exports[`TransactionActivityLog Component should match snapshot 1`] = ` class="transaction-activity-log-icon transaction-activity-log__activity-icon" >
@@ -86,7 +86,7 @@ exports[`TransactionActivityLog Component should match snapshot 1`] = ` class="transaction-activity-log-icon transaction-activity-log__activity-icon" >
diff --git a/ui/components/component-library/avatar-favicon/__snapshots__/avatar-favicon.test.js.snap b/ui/components/component-library/avatar-favicon/__snapshots__/avatar-favicon.test.js.snap index 9addad983..393fc286c 100644 --- a/ui/components/component-library/avatar-favicon/__snapshots__/avatar-favicon.test.js.snap +++ b/ui/components/component-library/avatar-favicon/__snapshots__/avatar-favicon.test.js.snap @@ -7,7 +7,7 @@ exports[`AvatarFavicon should render correctly 1`] = ` data-testid="avatar-favicon" >
diff --git a/ui/components/component-library/avatar-icon/__snapshots__/avatar-icon.test.js.snap b/ui/components/component-library/avatar-icon/__snapshots__/avatar-icon.test.js.snap index f3d2944ec..8b644dbc8 100644 --- a/ui/components/component-library/avatar-icon/__snapshots__/avatar-icon.test.js.snap +++ b/ui/components/component-library/avatar-icon/__snapshots__/avatar-icon.test.js.snap @@ -7,7 +7,7 @@ exports[`AvatarIcon should render correctly 1`] = ` data-testid="avatar-icon" > diff --git a/ui/components/component-library/banner-alert/__snapshots__/banner-alert.test.js.snap b/ui/components/component-library/banner-alert/__snapshots__/banner-alert.test.js.snap index 47a6ef8f8..28da219ef 100644 --- a/ui/components/component-library/banner-alert/__snapshots__/banner-alert.test.js.snap +++ b/ui/components/component-library/banner-alert/__snapshots__/banner-alert.test.js.snap @@ -7,7 +7,7 @@ exports[`BannerAlert should render BannerAlert element correctly 1`] = ` data-testid="bannerAlert" >
diff --git a/ui/components/component-library/button-icon/__snapshots__/button-icon.test.tsx.snap b/ui/components/component-library/button-icon/__snapshots__/button-icon.test.tsx.snap index 8a527a095..5cf8a575a 100644 --- a/ui/components/component-library/button-icon/__snapshots__/button-icon.test.tsx.snap +++ b/ui/components/component-library/button-icon/__snapshots__/button-icon.test.tsx.snap @@ -8,7 +8,7 @@ exports[`ButtonIcon should render button element correctly 1`] = ` data-testid="button-icon" > diff --git a/ui/components/component-library/button-icon/button-icon.types.ts b/ui/components/component-library/button-icon/button-icon.types.ts index 70250075d..3c64ba9bf 100644 --- a/ui/components/component-library/button-icon/button-icon.types.ts +++ b/ui/components/component-library/button-icon/button-icon.types.ts @@ -1,6 +1,5 @@ import type { BoxProps } from '../../ui/box/box.d'; -import { IconName } from '../icon'; -import type { IconProps } from '../icon'; +import { IconName, IconProps } from '../icon'; import { IconColor } from '../../../helpers/constants/design-system'; export enum ButtonIconSize { @@ -42,7 +41,7 @@ export interface ButtonIconProps extends BoxProps { /** * iconProps accepts all the props from Icon */ - iconProps?: IconProps; + iconProps?: IconProps<'span'>; /** * The size of the ButtonIcon. * Possible values could be 'ButtonIconSize.Sm' 24px, 'ButtonIconSize.Lg' 32px, diff --git a/ui/components/component-library/checkbox/checkbox.types.ts b/ui/components/component-library/checkbox/checkbox.types.ts index cc7871b8c..412c40311 100644 --- a/ui/components/component-library/checkbox/checkbox.types.ts +++ b/ui/components/component-library/checkbox/checkbox.types.ts @@ -63,7 +63,7 @@ export interface CheckboxStyleUtilityProps extends StyleUtilityProps { /* * iconProps - additional props to be spread to the Icon component used for the Checkbox */ - iconProps?: IconProps; + iconProps?: IconProps<'span'>; } export type CheckboxProps = diff --git a/ui/components/component-library/icon/__snapshots__/icon.test.tsx.snap b/ui/components/component-library/icon/__snapshots__/icon.test.tsx.snap index a99ac6393..93a83b525 100644 --- a/ui/components/component-library/icon/__snapshots__/icon.test.tsx.snap +++ b/ui/components/component-library/icon/__snapshots__/icon.test.tsx.snap @@ -3,7 +3,7 @@ exports[`Icon should render correctly 1`] = `
diff --git a/ui/components/component-library/icon/icon.stories.tsx b/ui/components/component-library/icon/icon.stories.tsx index aa24122c7..a20fa83a6 100644 --- a/ui/components/component-library/icon/icon.stories.tsx +++ b/ui/components/component-library/icon/icon.stories.tsx @@ -16,8 +16,6 @@ import { BorderRadius, } from '../../../helpers/constants/design-system'; -import Box from '../../ui/box/box'; - import { ButtonIcon, ButtonLink, @@ -28,6 +26,7 @@ import { TEXT_FIELD_SIZES, ButtonIconSize, BUTTON_LINK_SIZES, + Box, } from '..'; import { Icon } from './icon'; diff --git a/ui/components/component-library/icon/icon.test.tsx b/ui/components/component-library/icon/icon.test.tsx index 32174a8a4..c0edf89d3 100644 --- a/ui/components/component-library/icon/icon.test.tsx +++ b/ui/components/component-library/icon/icon.test.tsx @@ -129,13 +129,13 @@ describe('Icon', () => { , ); expect(getByTestId('icon-color-default')).toHaveClass( - 'box--color-icon-default', + 'mm-box--color-icon-default', ); expect(getByTestId('icon-color-alternative')).toHaveClass( - 'box--color-icon-alternative', + 'mm-box--color-icon-alternative', ); expect(getByTestId('icon-color-muted')).toHaveClass( - 'box--color-icon-muted', + 'mm-box--color-icon-muted', ); }); }); diff --git a/ui/components/component-library/icon/icon.tsx b/ui/components/component-library/icon/icon.tsx index d4dbd7d92..20f537e67 100644 --- a/ui/components/component-library/icon/icon.tsx +++ b/ui/components/component-library/icon/icon.tsx @@ -1,35 +1,42 @@ import React from 'react'; import classnames from 'classnames'; -import Box from '../../ui/box/box'; - import { IconColor, Display } from '../../../helpers/constants/design-system'; -import { IconProps, IconSize } from './icon.types'; +import { Box, BoxProps } from '../box'; +import type { PolymorphicRef } from '../box'; -export const Icon = ({ - name, - size = IconSize.Md, - color = IconColor.inherit, - className = '', - style, - ...props -}: IconProps) => ( - +import { IconSize, IconProps, IconComponent } from './icon.types'; + +export const Icon: IconComponent = React.forwardRef( + ( + { + name, + size = IconSize.Md, + color = IconColor.inherit, + className = '', + style, + ...props + }: IconProps, + ref?: PolymorphicRef, + ) => ( + )} + /> + ), ); diff --git a/ui/components/component-library/icon/icon.types.ts b/ui/components/component-library/icon/icon.types.ts index af1282d66..f5d9ff22a 100644 --- a/ui/components/component-library/icon/icon.types.ts +++ b/ui/components/component-library/icon/icon.types.ts @@ -1,6 +1,12 @@ -import type { BoxProps } from '../../ui/box/box.d'; +import React from 'react'; + import { IconColor } from '../../../helpers/constants/design-system'; +import type { + StyleUtilityProps, + PolymorphicComponentPropWithRef, +} from '../box'; + export enum IconSize { Xs = 'xs', Sm = 'sm', @@ -171,7 +177,7 @@ export enum IconName { Wifi = 'wifi', } -export interface IconProps extends BoxProps { +export interface IconStyleUtilityProps extends StyleUtilityProps { /** * The name of the icon to display. Use the IconName enum * Search for an icon: https://metamask.github.io/metamask-storybook/?path=/story/components-componentlibrary-icon--default-story @@ -198,3 +204,10 @@ export interface IconProps extends BoxProps { */ style?: React.CSSProperties; } + +export type IconProps = + PolymorphicComponentPropWithRef; + +export type IconComponent = ( + props: IconProps, +) => React.ReactElement | null; diff --git a/ui/components/component-library/icon/index.ts b/ui/components/component-library/icon/index.ts index d122b4696..ad2e63746 100644 --- a/ui/components/component-library/icon/index.ts +++ b/ui/components/component-library/icon/index.ts @@ -1,3 +1,7 @@ export { Icon } from './icon'; export { IconName, IconSize } from './icon.types'; -export type { IconProps } from './icon.types'; +export type { + IconProps, + IconComponent, + IconStyleUtilityProps, +} from './icon.types'; diff --git a/ui/components/component-library/picker-network/__snapshots__/picker-network.test.js.snap b/ui/components/component-library/picker-network/__snapshots__/picker-network.test.js.snap index 510227656..42534287b 100644 --- a/ui/components/component-library/picker-network/__snapshots__/picker-network.test.js.snap +++ b/ui/components/component-library/picker-network/__snapshots__/picker-network.test.js.snap @@ -17,7 +17,7 @@ exports[`PickerNetwork should render the label inside the PickerNetwork 1`] = ` Imported

diff --git a/ui/components/component-library/tag-url/__snapshots__/tag-url.test.js.snap b/ui/components/component-library/tag-url/__snapshots__/tag-url.test.js.snap index 5407e13ac..24d8a9a18 100644 --- a/ui/components/component-library/tag-url/__snapshots__/tag-url.test.js.snap +++ b/ui/components/component-library/tag-url/__snapshots__/tag-url.test.js.snap @@ -10,7 +10,7 @@ exports[`TagUrl should render the label inside the TagUrl 1`] = ` class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-favicon mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1" >
diff --git a/ui/components/component-library/text-field-search/__snapshots__/text-field-search.test.js.snap b/ui/components/component-library/text-field-search/__snapshots__/text-field-search.test.js.snap index 4f2c22dc7..92792636b 100644 --- a/ui/components/component-library/text-field-search/__snapshots__/text-field-search.test.js.snap +++ b/ui/components/component-library/text-field-search/__snapshots__/text-field-search.test.js.snap @@ -6,7 +6,7 @@ exports[`TextFieldSearch should render correctly 1`] = ` class="box mm-text-field mm-text-field--size-md mm-text-field--truncate mm-text-field-search box--padding-left-4 box--display-inline-flex box--flex-direction-row box--align-items-center box--background-color-background-default box--rounded-sm box--border-width-1 box--border-style-solid" >
diff --git a/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap b/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap index e2bb2b4a6..e15f761c4 100644 --- a/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap +++ b/ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap @@ -132,7 +132,7 @@ exports[`AccountListItem renders AccountListItem component and shows account nam data-testid="account-list-item-menu-button" > diff --git a/ui/components/multichain/account-picker/__snapshots__/account-picker.test.js.snap b/ui/components/multichain/account-picker/__snapshots__/account-picker.test.js.snap index 49accc5e5..a0dfbafe9 100644 --- a/ui/components/multichain/account-picker/__snapshots__/account-picker.test.js.snap +++ b/ui/components/multichain/account-picker/__snapshots__/account-picker.test.js.snap @@ -31,7 +31,7 @@ exports[`AccountPicker renders properly 1`] = ` Account 1 diff --git a/ui/components/multichain/activity-list-item/__snapshots__/activity-list-item.test.js.snap b/ui/components/multichain/activity-list-item/__snapshots__/activity-list-item.test.js.snap index a84226530..7bbb0b960 100644 --- a/ui/components/multichain/activity-list-item/__snapshots__/activity-list-item.test.js.snap +++ b/ui/components/multichain/activity-list-item/__snapshots__/activity-list-item.test.js.snap @@ -47,7 +47,7 @@ exports[`ActivityListItem should match snapshot with props 1`] = ` class="mm-box mm-box--display-inline-flex" > diff --git a/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap b/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap index fc0fc5c4b..640729436 100644 --- a/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap +++ b/ui/components/multichain/app-header/__snapshots__/app-header.test.js.snap @@ -222,7 +222,7 @@ exports[`App Header should match snapshot 1`] = ` Chain 5

@@ -283,7 +283,7 @@ exports[`App Header should match snapshot 1`] = ` Test Account @@ -304,7 +304,7 @@ exports[`App Header should match snapshot 1`] = ` data-testid="account-options-menu-button" > diff --git a/ui/components/multichain/connected-site-menu/__snapshots__/connected-site-menu.test.js.snap b/ui/components/multichain/connected-site-menu/__snapshots__/connected-site-menu.test.js.snap index b6538b1d9..83a1eef2c 100644 --- a/ui/components/multichain/connected-site-menu/__snapshots__/connected-site-menu.test.js.snap +++ b/ui/components/multichain/connected-site-menu/__snapshots__/connected-site-menu.test.js.snap @@ -19,7 +19,7 @@ exports[`Connected Site Menu should render the site menu in connected state 1`] class="mm-box mm-badge-wrapper mm-box--display-inline-block" >
diff --git a/ui/components/multichain/import-token-link/__snapshots__/import-token-link.test.js.snap b/ui/components/multichain/import-token-link/__snapshots__/import-token-link.test.js.snap index 73c678f61..4439d2bce 100644 --- a/ui/components/multichain/import-token-link/__snapshots__/import-token-link.test.js.snap +++ b/ui/components/multichain/import-token-link/__snapshots__/import-token-link.test.js.snap @@ -13,7 +13,7 @@ exports[`Import Token Link should match snapshot for goerli chainId 1`] = ` data-testid="import-token-button" > Import tokens @@ -27,7 +27,7 @@ exports[`Import Token Link should match snapshot for goerli chainId 1`] = ` data-testid="refresh-list-button" > Refresh list @@ -50,7 +50,7 @@ exports[`Import Token Link should match snapshot for mainnet chainId 1`] = ` data-testid="import-token-button" > Import tokens @@ -64,7 +64,7 @@ exports[`Import Token Link should match snapshot for mainnet chainId 1`] = ` data-testid="refresh-list-button" > Refresh list diff --git a/ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap b/ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap index a32760c67..5bbb6b8fc 100644 --- a/ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap +++ b/ui/components/multichain/network-list-item/__snapshots__/network-list-item.test.js.snap @@ -28,7 +28,7 @@ exports[`NetworkListItem renders properly 1`] = ` class="box mm-button-icon mm-button-icon--size-sm multichain-network-list-item__delete box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-error-default box--background-color-transparent box--rounded-lg" > diff --git a/ui/components/ui/error-message/__snapshots__/error-message.component.test.js.snap b/ui/components/ui/error-message/__snapshots__/error-message.component.test.js.snap index 387889742..63bf4bafa 100644 --- a/ui/components/ui/error-message/__snapshots__/error-message.component.test.js.snap +++ b/ui/components/ui/error-message/__snapshots__/error-message.component.test.js.snap @@ -6,7 +6,7 @@ exports[`ErrorMessage Component should render a message from props.errorMessage class="error-message" >
@@ -258,7 +258,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr class="confirm-approve-content__card-header__symbol" >
@@ -443,7 +443,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr class="confirm-approve-content__card-header__symbol" >
@@ -628,7 +628,7 @@ exports[`ConfirmApproveContent Component should render Confirm approve page corr class="confirm-approve-content__card-header__symbol" >
diff --git a/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap b/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap index 1a04516b3..6590df11c 100644 --- a/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap +++ b/ui/pages/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap @@ -84,7 +84,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send style="visibility: initial;" >
@@ -352,7 +352,7 @@ exports[`ConfirmSendEther should render correct information for for confirm send Site suggested diff --git a/ui/pages/confirm-signature-request/__snapshots__/index.test.js.snap b/ui/pages/confirm-signature-request/__snapshots__/index.test.js.snap index c9e8f1f75..faf175d6c 100644 --- a/ui/pages/confirm-signature-request/__snapshots__/index.test.js.snap +++ b/ui/pages/confirm-signature-request/__snapshots__/index.test.js.snap @@ -184,7 +184,7 @@ exports[`Confirm Signature Request Component render should match snapshot 1`] = class="mm-box mm-text mm-avatar-base mm-avatar-base--size-md mm-avatar-favicon mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1" >
diff --git a/ui/pages/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap b/ui/pages/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap index a428e168c..e294686d8 100644 --- a/ui/pages/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap +++ b/ui/pages/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap @@ -85,7 +85,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 1`] = ` tabindex="0" >
@@ -110,7 +110,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 1`] = ` tabindex="0" >
@@ -135,7 +135,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 1`] = ` tabindex="0" > @@ -160,7 +160,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 1`] = ` tabindex="0" > @@ -292,7 +292,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 2`] = ` tabindex="0" > @@ -317,7 +317,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 2`] = ` tabindex="0" > @@ -342,7 +342,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 2`] = ` tabindex="0" > @@ -367,7 +367,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 2`] = ` tabindex="0" > @@ -417,7 +417,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 2`] = ` class="box mm-button-icon mm-button-icon--size-sm callout__close-button box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-default box--background-color-transparent box--rounded-lg" > @@ -460,7 +460,7 @@ exports[`add-ethereum-chain confirmation should match snapshot 2`] = ` class="box mm-button-icon mm-button-icon--size-sm callout__close-button box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-default box--background-color-transparent box--rounded-lg" > diff --git a/ui/pages/confirmation/templates/__snapshots__/error.test.js.snap b/ui/pages/confirmation/templates/__snapshots__/error.test.js.snap index ccb7cdb0e..cca61aa89 100644 --- a/ui/pages/confirmation/templates/__snapshots__/error.test.js.snap +++ b/ui/pages/confirmation/templates/__snapshots__/error.test.js.snap @@ -23,7 +23,7 @@ exports[`error template matches the snapshot 1`] = ` class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-icon mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-error-default mm-box--background-color-error-muted mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1" > diff --git a/ui/pages/confirmation/templates/__snapshots__/success.test.js.snap b/ui/pages/confirmation/templates/__snapshots__/success.test.js.snap index 9f126239a..061cad948 100644 --- a/ui/pages/confirmation/templates/__snapshots__/success.test.js.snap +++ b/ui/pages/confirmation/templates/__snapshots__/success.test.js.snap @@ -23,7 +23,7 @@ exports[`success template matches the snapshot 1`] = ` class="mm-box mm-text mm-avatar-base mm-avatar-base--size-xl mm-avatar-icon mm-text--body-lg-medium mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-success-default mm-box--background-color-success-muted mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1" > diff --git a/ui/pages/confirmation/templates/__snapshots__/switch-ethereum-chain.test.js.snap b/ui/pages/confirmation/templates/__snapshots__/switch-ethereum-chain.test.js.snap index 14430aa1c..3a8bb05f1 100644 --- a/ui/pages/confirmation/templates/__snapshots__/switch-ethereum-chain.test.js.snap +++ b/ui/pages/confirmation/templates/__snapshots__/switch-ethereum-chain.test.js.snap @@ -251,7 +251,7 @@ exports[`switch-ethereum-chain confirmation should show alert if there are pendi class="box mm-button-icon mm-button-icon--size-sm callout__close-button box--display-inline-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-default box--background-color-transparent box--rounded-lg" > diff --git a/ui/pages/create-account/connect-hardware/__snapshots__/index.test.tsx.snap b/ui/pages/create-account/connect-hardware/__snapshots__/index.test.tsx.snap index c91962937..a52088d2b 100644 --- a/ui/pages/create-account/connect-hardware/__snapshots__/index.test.tsx.snap +++ b/ui/pages/create-account/connect-hardware/__snapshots__/index.test.tsx.snap @@ -22,7 +22,7 @@ exports[`ConnectHardwareForm should match snapshot 1`] = ` data-testid="hardware-connect-close-btn" > diff --git a/ui/pages/institutional/connect-custody/__snapshots__/account-list.test.js.snap b/ui/pages/institutional/connect-custody/__snapshots__/account-list.test.js.snap index 21d5935ac..0430157d0 100644 --- a/ui/pages/institutional/connect-custody/__snapshots__/account-list.test.js.snap +++ b/ui/pages/institutional/connect-custody/__snapshots__/account-list.test.js.snap @@ -56,7 +56,7 @@ exports[`CustodyAccountList renders accounts 1`] = ` > 0x123...7890 @@ -74,7 +74,7 @@ exports[`CustodyAccountList renders accounts 1`] = ` class="custody-account-list__item__clipboard" > @@ -131,7 +131,7 @@ exports[`CustodyAccountList renders accounts 1`] = ` > 0x098...4321 @@ -149,7 +149,7 @@ exports[`CustodyAccountList renders accounts 1`] = ` class="custody-account-list__item__clipboard" > diff --git a/ui/pages/institutional/custody/__snapshots__/custody.test.js.snap b/ui/pages/institutional/custody/__snapshots__/custody.test.js.snap index eaacf6107..c6aaf4ac1 100644 --- a/ui/pages/institutional/custody/__snapshots__/custody.test.js.snap +++ b/ui/pages/institutional/custody/__snapshots__/custody.test.js.snap @@ -36,7 +36,7 @@ exports[`CustodyPage renders CustodyPage 2`] = ` class="box mm-button-icon mm-button-icon--size-sm box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-default box--background-color-transparent box--rounded-lg" > diff --git a/ui/pages/keychains/__snapshots__/reveal-seed.test.js.snap b/ui/pages/keychains/__snapshots__/reveal-seed.test.js.snap index 0d6c31b91..1c97baf36 100644 --- a/ui/pages/keychains/__snapshots__/reveal-seed.test.js.snap +++ b/ui/pages/keychains/__snapshots__/reveal-seed.test.js.snap @@ -57,7 +57,7 @@ exports[`Reveal Seed Page should match snapshot 1`] = ` class="box mm-banner-base mm-banner-alert mm-banner-alert--severity-danger box--padding-3 box--padding-left-2 box--display-flex box--gap-2 box--flex-direction-row box--background-color-error-muted box--rounded-sm" >
diff --git a/ui/pages/keyring-snaps/snap-account-detail-page/__snapshots__/snap-account-detail-page.test.tsx.snap b/ui/pages/keyring-snaps/snap-account-detail-page/__snapshots__/snap-account-detail-page.test.tsx.snap index 3aa813a67..b1fa7113f 100644 --- a/ui/pages/keyring-snaps/snap-account-detail-page/__snapshots__/snap-account-detail-page.test.tsx.snap +++ b/ui/pages/keyring-snaps/snap-account-detail-page/__snapshots__/snap-account-detail-page.test.tsx.snap @@ -17,7 +17,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = ` Create a Snap Account

@@ -92,7 +92,7 @@ exports[`SnapAccountDetails should take a snapshot 1`] = ` class="mm-box mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center" > diff --git a/ui/pages/keyring-snaps/snap-card/__snapshots__/snap-card.test.tsx.snap b/ui/pages/keyring-snaps/snap-card/__snapshots__/snap-card.test.tsx.snap index 8ebecf618..e8f1fc13e 100644 --- a/ui/pages/keyring-snaps/snap-card/__snapshots__/snap-card.test.tsx.snap +++ b/ui/pages/keyring-snaps/snap-card/__snapshots__/snap-card.test.tsx.snap @@ -44,7 +44,7 @@ exports[`SnapCard should render 1`] = ` class="mm-box mm-box--display-flex mm-box--justify-content-space-between" > diff --git a/ui/pages/onboarding-flow/metametrics/__snapshots__/metametrics.test.js.snap b/ui/pages/onboarding-flow/metametrics/__snapshots__/metametrics.test.js.snap index 8bde23f94..ed23cc0d8 100644 --- a/ui/pages/onboarding-flow/metametrics/__snapshots__/metametrics.test.js.snap +++ b/ui/pages/onboarding-flow/metametrics/__snapshots__/metametrics.test.js.snap @@ -24,14 +24,14 @@ exports[`Onboarding Metametrics Component should match snapshot 1`] = `

  • Always allow you to opt-out via Settings
  • Send anonymized click and pageview events @@ -41,7 +41,7 @@ exports[`Onboarding Metametrics Component should match snapshot 1`] = ` class="box box--flex-direction-row" > @@ -62,7 +62,7 @@ exports[`Onboarding Metametrics Component should match snapshot 1`] = ` class="box box--flex-direction-row" > @@ -83,7 +83,7 @@ exports[`Onboarding Metametrics Component should match snapshot 1`] = ` class="box box--flex-direction-row" > diff --git a/ui/pages/onboarding-flow/onboarding-app-header/__snapshots__/onboarding-app-header.test.js.snap b/ui/pages/onboarding-flow/onboarding-app-header/__snapshots__/onboarding-app-header.test.js.snap index fbec275c4..9a9afaad8 100644 --- a/ui/pages/onboarding-flow/onboarding-app-header/__snapshots__/onboarding-app-header.test.js.snap +++ b/ui/pages/onboarding-flow/onboarding-app-header/__snapshots__/onboarding-app-header.test.js.snap @@ -213,7 +213,7 @@ exports[`OnboardingAppHeader should match snapshot 1`] = `
diff --git a/ui/pages/onboarding-flow/recovery-phrase/__snapshots__/review-recovery-phrase.test.js.snap b/ui/pages/onboarding-flow/recovery-phrase/__snapshots__/review-recovery-phrase.test.js.snap index 20dd89441..8331a05d8 100644 --- a/ui/pages/onboarding-flow/recovery-phrase/__snapshots__/review-recovery-phrase.test.js.snap +++ b/ui/pages/onboarding-flow/recovery-phrase/__snapshots__/review-recovery-phrase.test.js.snap @@ -600,7 +600,7 @@ exports[`Review Recovery Phrase Component should match snapshot after reveal rec class="button__icon" > diff --git a/ui/pages/send/send-content/send-gas-row/__snapshots__/send-gas-row.test.js.snap b/ui/pages/send/send-content/send-gas-row/__snapshots__/send-gas-row.test.js.snap index f97cefbc4..467786c51 100644 --- a/ui/pages/send/send-content/send-gas-row/__snapshots__/send-gas-row.test.js.snap +++ b/ui/pages/send/send-content/send-gas-row/__snapshots__/send-gas-row.test.js.snap @@ -31,7 +31,7 @@ exports[`SendGasRow Component render should match snapshot 1`] = ` tabindex="0" > @@ -84,7 +84,7 @@ exports[`SendGasRow Component render should match snapshot 1`] = ` tabindex="0" > diff --git a/ui/pages/swaps/dropdown-search-list/__snapshots__/dropdown-search-list.test.js.snap b/ui/pages/swaps/dropdown-search-list/__snapshots__/dropdown-search-list.test.js.snap index be5ea2352..6057b37ee 100644 --- a/ui/pages/swaps/dropdown-search-list/__snapshots__/dropdown-search-list.test.js.snap +++ b/ui/pages/swaps/dropdown-search-list/__snapshots__/dropdown-search-list.test.js.snap @@ -37,7 +37,7 @@ exports[`DropdownSearchList renders the component with initial props 1`] = ` diff --git a/ui/pages/swaps/exchange-rate-display/__snapshots__/exchange-rate-display.test.js.snap b/ui/pages/swaps/exchange-rate-display/__snapshots__/exchange-rate-display.test.js.snap index bdd3b3dfa..1f3820d2e 100644 --- a/ui/pages/swaps/exchange-rate-display/__snapshots__/exchange-rate-display.test.js.snap +++ b/ui/pages/swaps/exchange-rate-display/__snapshots__/exchange-rate-display.test.js.snap @@ -31,7 +31,7 @@ exports[`ExchangeRateDisplay renders the component with initial props 1`] = ` @@ -66,7 +66,7 @@ exports[`SelectedToken renders the component with no token selected 1`] = ` diff --git a/ui/pages/swaps/view-quote/__snapshots__/view-quote-price-difference.test.js.snap b/ui/pages/swaps/view-quote/__snapshots__/view-quote-price-difference.test.js.snap index ce2ad6d17..511674337 100644 --- a/ui/pages/swaps/view-quote/__snapshots__/view-quote-price-difference.test.js.snap +++ b/ui/pages/swaps/view-quote/__snapshots__/view-quote-price-difference.test.js.snap @@ -36,7 +36,7 @@ exports[`View Price Quote Difference displays a fiat error when calculationError tabindex="0" > @@ -94,7 +94,7 @@ exports[`View Price Quote Difference displays an error when in high bucket 1`] = tabindex="0" > @@ -152,7 +152,7 @@ exports[`View Price Quote Difference displays an error when in medium bucket 1`] tabindex="0" > @@ -210,7 +210,7 @@ exports[`View Price Quote Difference should match snapshot 1`] = ` tabindex="0" > diff --git a/ui/pages/swaps/view-quote/__snapshots__/view-quote.test.js.snap b/ui/pages/swaps/view-quote/__snapshots__/view-quote.test.js.snap index d9ed7df32..75b44c0ee 100644 --- a/ui/pages/swaps/view-quote/__snapshots__/view-quote.test.js.snap +++ b/ui/pages/swaps/view-quote/__snapshots__/view-quote.test.js.snap @@ -63,7 +63,7 @@ exports[`ViewQuote renders the component with EIP-1559 enabled 2`] = ` @@ -312,7 +312,7 @@ exports[`TokenAllowancePage should match snapshot 1`] = ` class="box mm-button-icon mm-button-icon--size-lg box--display-flex box--flex-direction-row box--justify-content-center box--align-items-center box--color-icon-muted box--background-color-transparent box--rounded-lg" > @@ -383,7 +383,7 @@ exports[`TokenAllowancePage should match snapshot 1`] = ` tabindex="0" >