From 3e520214c9d386f9db35a15a48c2c58a26962c32 Mon Sep 17 00:00:00 2001 From: Garrett Bear Date: Mon, 24 Apr 2023 07:19:19 -0700 Subject: [PATCH] update icons to ts enum version (#18698) Co-authored-by: Nidhi Kumari Co-authored-by: George Marshall Co-authored-by: Brad Decker Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com> --- .../custom-spending-cap-tooltip.js | 2 +- ui/pages/add-nft/add-nft.js | 12 ++++----- ui/pages/asset/components/asset-breadcrumb.js | 10 +++---- ui/pages/asset/components/asset-options.js | 13 +++++----- .../confirm-approve-content.component.js | 12 ++++----- .../confirm-decrypt-message.component.js | 7 ++--- ui/pages/confirmation/confirmation.js | 9 +++---- ui/pages/home/home.component.js | 26 +++++++++---------- .../compliance-feature-page.js | 14 +++++----- ui/pages/notifications/notifications.js | 12 ++++----- .../create-password/create-password.js | 7 ++--- .../metametrics/metametrics.js | 22 ++++++++-------- .../recovery-phrase/review-recovery-phrase.js | 7 ++--- .../skip-srp-backup-popover.js | 10 +++---- .../permissions-connect.component.js | 10 +++---- .../permissions-redirect.component.js | 10 +++---- .../add-recipient/add-recipient.component.js | 7 ++--- .../add-recipient/domain-input.component.js | 20 +++++++------- .../contact-list-tab.component.js | 14 +++++----- .../view-contact/view-contact.component.js | 14 +++++----- .../flask/snaps-list-tab/snap-list-tab.js | 15 +++++------ .../custom-content-search.js | 10 ++----- .../networks-list-item/networks-list-item.js | 14 +++++----- .../settings-search-list.js | 7 ++--- .../settings-search/settings-search.js | 7 ++--- ui/pages/settings/settings.component.js | 14 ++++------ ui/pages/token-allowance/token-allowance.js | 7 ++--- ui/pages/token-details/token-details-page.js | 12 ++++----- 28 files changed, 141 insertions(+), 183 deletions(-) diff --git a/ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js b/ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js index 49aebd8e4..ad5033a97 100644 --- a/ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js +++ b/ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js @@ -33,7 +33,7 @@ export const CustomSpendingCapTooltip = ({ ) : ( diff --git a/ui/pages/add-nft/add-nft.js b/ui/pages/add-nft/add-nft.js index 1463896b0..c4c40895e 100644 --- a/ui/pages/add-nft/add-nft.js +++ b/ui/pages/add-nft/add-nft.js @@ -37,10 +37,10 @@ import { MetaMetricsTokenEventSource, } from '../../../shared/constants/metametrics'; import { - ICON_NAMES, - ICON_SIZES, -} from '../../components/component-library/icon/deprecated'; -import { ButtonIcon } from '../../components/component-library/button-icon/deprecated'; + ButtonIcon, + IconName, + ButtonIconSize, +} from '../../components/component-library'; export default function AddNft() { const t = useI18nContext(); @@ -163,8 +163,8 @@ export default function AddNft() { setNftAddFailed(false)} diff --git a/ui/pages/asset/components/asset-breadcrumb.js b/ui/pages/asset/components/asset-breadcrumb.js index 2f8517ac8..42218ef43 100644 --- a/ui/pages/asset/components/asset-breadcrumb.js +++ b/ui/pages/asset/components/asset-breadcrumb.js @@ -2,18 +2,18 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Icon, - ICON_NAMES, - ICON_SIZES, -} from '../../../components/component-library/icon/deprecated'; + IconName, + IconSize, +} from '../../../components/component-library'; const AssetBreadcrumb = ({ accountName, assetName, onBack }) => { return ( )} )} diff --git a/ui/pages/home/home.component.js b/ui/pages/home/home.component.js index 335baaf3e..4001d0ca1 100644 --- a/ui/pages/home/home.component.js +++ b/ui/pages/home/home.component.js @@ -35,11 +35,11 @@ import { } from '../../helpers/constants/design-system'; import { SECOND } from '../../../shared/constants/time'; import { - ICON_NAMES, - ICON_SIZES, -} from '../../components/component-library/icon/deprecated'; -import { ButtonIcon } from '../../components/component-library/button-icon/deprecated'; -import { Text } from '../../components/component-library'; + ButtonIcon, + ButtonIconSize, + IconName, + Text, +} from '../../components/component-library'; import { ASSET_ROUTE, @@ -354,8 +354,8 @@ export default class Home extends PureComponent { {t('newNftAddedMessage')} @@ -377,8 +377,8 @@ export default class Home extends PureComponent { {t('removeNftMessage')} @@ -397,8 +397,8 @@ export default class Home extends PureComponent { {t('newNetworkAdded', [newNetworkAddedName])} clearNewNetworkAdded()} className="home__new-network-notification-close" @@ -432,8 +432,8 @@ export default class Home extends PureComponent { setNewTokensImported('')} className="home__new-tokens-imported-notification-close" diff --git a/ui/pages/institutional/compliance-feature-page/compliance-feature-page.js b/ui/pages/institutional/compliance-feature-page/compliance-feature-page.js index acc8e63f4..9820ff691 100644 --- a/ui/pages/institutional/compliance-feature-page/compliance-feature-page.js +++ b/ui/pages/institutional/compliance-feature-page/compliance-feature-page.js @@ -13,12 +13,12 @@ import { Color, FLEX_DIRECTION, } from '../../../helpers/constants/design-system'; -import { ButtonIcon } from '../../../components/component-library/button-icon/deprecated'; -import { Text } from '../../../components/component-library'; import { - ICON_NAMES, - ICON_SIZES, -} from '../../../components/component-library/icon/deprecated'; + ButtonIcon, + ButtonIconSize, + IconName, + Text, +} from '../../../components/component-library'; import Box from '../../../components/ui/box'; import ComplianceSettings from '../../../components/institutional/compliance-settings'; @@ -44,8 +44,8 @@ const ComplianceFeaturePage = () => { > history.push(DEFAULT_ROUTE)} diff --git a/ui/pages/notifications/notifications.js b/ui/pages/notifications/notifications.js index 5e37225e1..013f51d94 100644 --- a/ui/pages/notifications/notifications.js +++ b/ui/pages/notifications/notifications.js @@ -17,10 +17,10 @@ import { import Button from '../../components/ui/button'; import { useI18nContext } from '../../hooks/useI18nContext'; import { - ICON_SIZES, - ICON_NAMES, -} from '../../components/component-library/icon/deprecated'; -import { ButtonIcon } from '../../components/component-library/button-icon/deprecated'; + ButtonIcon, + ButtonIconSize, + IconName, +} from '../../components/component-library'; import { Color } from '../../helpers/constants/design-system'; export function NotificationItem({ notification, snaps, onItemClick }) { @@ -91,8 +91,8 @@ export default function Notifications() {
history.push(DEFAULT_ROUTE)} /> diff --git a/ui/pages/onboarding-flow/create-password/create-password.js b/ui/pages/onboarding-flow/create-password/create-password.js index b67b5dd3b..83dcc54a3 100644 --- a/ui/pages/onboarding-flow/create-password/create-password.js +++ b/ui/pages/onboarding-flow/create-password/create-password.js @@ -35,10 +35,7 @@ import { MetaMetricsEventCategory, MetaMetricsEventName, } from '../../../../shared/constants/metametrics'; -import { - Icon, - ICON_NAMES, -} from '../../../components/component-library/icon/deprecated'; +import { Icon, IconName } from '../../../components/component-library'; export default function CreatePassword({ createNewAccount, @@ -236,7 +233,7 @@ export default function CreatePassword({ titleDetail={ isValid && (
- +
) } diff --git a/ui/pages/onboarding-flow/metametrics/metametrics.js b/ui/pages/onboarding-flow/metametrics/metametrics.js index c6caadf56..dc35855ec 100644 --- a/ui/pages/onboarding-flow/metametrics/metametrics.js +++ b/ui/pages/onboarding-flow/metametrics/metametrics.js @@ -26,9 +26,9 @@ import { import { MetaMetricsContext } from '../../../contexts/metametrics'; import { Icon, - ICON_NAMES, - ICON_SIZES, -} from '../../../components/component-library/icon/deprecated'; + IconName, + IconSize, +} from '../../../components/component-library'; import Box from '../../../components/ui/box/box'; @@ -99,7 +99,7 @@ export default function OnboardingMetametrics() {
  • @@ -107,7 +107,7 @@ export default function OnboardingMetametrics() {
  • @@ -117,8 +117,8 @@ export default function OnboardingMetametrics() { {t('onboardingMetametricsNeverCollect', [ @@ -137,8 +137,8 @@ export default function OnboardingMetametrics() { {t('onboardingMetametricsNeverCollectIP', [ @@ -156,8 +156,8 @@ export default function OnboardingMetametrics() { {t('onboardingMetametricsNeverSellData', [ diff --git a/ui/pages/onboarding-flow/recovery-phrase/review-recovery-phrase.js b/ui/pages/onboarding-flow/recovery-phrase/review-recovery-phrase.js index 6a2e732b5..c3e049c12 100644 --- a/ui/pages/onboarding-flow/recovery-phrase/review-recovery-phrase.js +++ b/ui/pages/onboarding-flow/recovery-phrase/review-recovery-phrase.js @@ -23,10 +23,7 @@ import { MetaMetricsEventName, } from '../../../../shared/constants/metametrics'; import { MetaMetricsContext } from '../../../contexts/metametrics'; -import { - Icon, - ICON_NAMES, -} from '../../../components/component-library/icon/deprecated'; +import { Icon, IconName } from '../../../components/component-library'; import RecoveryPhraseChips from './recovery-phrase-chips'; export default function RecoveryPhrase({ secretRecoveryPhrase }) { @@ -126,7 +123,7 @@ export default function RecoveryPhrase({ secretRecoveryPhrase }) { }} icon={ } diff --git a/ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.js b/ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.js index deb482023..e3017cc86 100644 --- a/ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.js +++ b/ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.js @@ -25,9 +25,9 @@ import { import { MetaMetricsContext } from '../../../contexts/metametrics'; import { Icon, - ICON_NAMES, - ICON_SIZES, -} from '../../../components/component-library/icon/deprecated'; + IconName, + IconSize, +} from '../../../components/component-library'; export default function SkipSRPBackup({ handleClose }) { const [checked, setChecked] = useState(false); @@ -86,8 +86,8 @@ export default function SkipSRPBackup({ handleClose }) { margin={4} > diff --git a/ui/pages/permissions-connect/permissions-connect.component.js b/ui/pages/permissions-connect/permissions-connect.component.js index 4eaf97c6c..62d04a903 100644 --- a/ui/pages/permissions-connect/permissions-connect.component.js +++ b/ui/pages/permissions-connect/permissions-connect.component.js @@ -9,11 +9,7 @@ import { ENVIRONMENT_TYPE_NOTIFICATION } from '../../../shared/constants/app'; import { MILLISECOND } from '../../../shared/constants/time'; import { DEFAULT_ROUTE } from '../../helpers/constants/routes'; import PermissionPageContainer from '../../components/app/permission-page-container'; -import { - Icon, - ICON_NAMES, - ICON_SIZES, -} from '../../components/component-library/icon/deprecated'; +import { Icon, IconName, IconSize } from '../../components/component-library'; import ChooseAccount from './choose-account'; import PermissionsRedirect from './redirect'; ///: BEGIN:ONLY_INCLUDE_IN(flask) @@ -283,9 +279,9 @@ export default class PermissionConnect extends Component { onClick={() => this.goBack()} > {t('back')}
diff --git a/ui/pages/permissions-connect/redirect/permissions-redirect.component.js b/ui/pages/permissions-connect/redirect/permissions-redirect.component.js index 5df81a7cd..308e71925 100644 --- a/ui/pages/permissions-connect/redirect/permissions-redirect.component.js +++ b/ui/pages/permissions-connect/redirect/permissions-redirect.component.js @@ -12,9 +12,9 @@ import { import { I18nContext } from '../../../contexts/i18n'; import { Icon, - ICON_NAMES, - ICON_SIZES, -} from '../../../components/component-library/icon/deprecated'; + IconName, + IconSize, +} from '../../../components/component-library'; export default function PermissionsRedirect({ subjectMetadata }) { const t = useContext(I18nContext); @@ -42,8 +42,8 @@ export default function PermissionsRedirect({ subjectMetadata }) { justifyContent={JustifyContent.center} >
diff --git a/ui/pages/send/send-content/add-recipient/add-recipient.component.js b/ui/pages/send/send-content/add-recipient/add-recipient.component.js index f1e5da55b..7190c6dc8 100644 --- a/ui/pages/send/send-content/add-recipient/add-recipient.component.js +++ b/ui/pages/send/send-content/add-recipient/add-recipient.component.js @@ -8,10 +8,7 @@ import RecipientGroup from '../../../../components/app/contact-list/recipient-gr import { ellipsify } from '../../send.utils'; import Button from '../../../../components/ui/button'; import Confusable from '../../../../components/ui/confusable'; -import { - Icon, - ICON_NAMES, -} from '../../../../components/component-library/icon/deprecated'; +import { Icon, IconName } from '../../../../components/component-library'; export default class AddRecipient extends Component { static propTypes = { @@ -184,7 +181,7 @@ export default class AddRecipient extends Component { className="send__select-recipient-wrapper__list__link" onClick={useContactListForRecipientSearch} > - + {t('backToAll')} ) : ( @@ -130,11 +130,11 @@ export default class DomainInput extends Component { )}
) : ( @@ -160,9 +160,7 @@ export default class DomainInput extends Component { this.props.scanQrCode(); } }} - iconName={ - userInput ? ICON_NAMES.CLOSE : ICON_NAMES.SCAN_BARCODE - } + iconName={userInput ? IconName.Close : IconName.ScanBarcode} ariaLabel={t(userInput ? 'close' : 'scanQrCode')} color={ userInput ? IconColor.iconDefault : IconColor.primaryDefault diff --git a/ui/pages/settings/contact-list-tab/contact-list-tab.component.js b/ui/pages/settings/contact-list-tab/contact-list-tab.component.js index 46d3155bc..02cce6a37 100644 --- a/ui/pages/settings/contact-list-tab/contact-list-tab.component.js +++ b/ui/pages/settings/contact-list-tab/contact-list-tab.component.js @@ -13,10 +13,10 @@ import { } from '../../../helpers/utils/settings-search'; import { Icon, - ICON_NAMES, - ICON_SIZES, -} from '../../../components/component-library/icon/deprecated'; -import { Color } from '../../../helpers/constants/design-system'; + IconName, + IconSize, +} from '../../../components/component-library'; +import { IconColor } from '../../../helpers/constants/design-system'; import EditContact from './edit-contact'; import AddContact from './add-contact'; import ViewContact from './view-contact'; @@ -79,10 +79,10 @@ export default class ContactListTab extends Component {

{t('buildContactList')}

diff --git a/ui/pages/settings/contact-list-tab/view-contact/view-contact.component.js b/ui/pages/settings/contact-list-tab/view-contact/view-contact.component.js index 8a28efe00..5045b9565 100644 --- a/ui/pages/settings/contact-list-tab/view-contact/view-contact.component.js +++ b/ui/pages/settings/contact-list-tab/view-contact/view-contact.component.js @@ -4,12 +4,12 @@ import { Redirect } from 'react-router-dom'; import Identicon from '../../../../components/ui/identicon'; import Button from '../../../../components/ui/button/button.component'; -import { - ICON_NAMES, - ICON_SIZES, -} from '../../../../components/component-library/icon/deprecated'; -import { ButtonIcon } from '../../../../components/component-library/button-icon/deprecated'; +import { + ButtonIcon, + ButtonIconSize, + IconName, +} from '../../../../components/component-library'; import Tooltip from '../../../../components/ui/tooltip'; import { useI18nContext } from '../../../../hooks/useI18nContext'; @@ -74,8 +74,8 @@ function ViewContact({ onClick={() => { handleCopy(checkSummedAddress); }} - iconName={copied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY} - size={ICON_SIZES.LG} + iconName={copied ? IconName.CopySuccess : IconName.Copy} + size={ButtonIconSize.Lg} color={IconColor.primaryDefault} /> diff --git a/ui/pages/settings/flask/snaps-list-tab/snap-list-tab.js b/ui/pages/settings/flask/snaps-list-tab/snap-list-tab.js index f745b3ff0..6fcfbab2f 100644 --- a/ui/pages/settings/flask/snaps-list-tab/snap-list-tab.js +++ b/ui/pages/settings/flask/snaps-list-tab/snap-list-tab.js @@ -6,6 +6,7 @@ import { useI18nContext } from '../../../../hooks/useI18nContext'; import { JustifyContent, AlignItems, + IconColor, Color, TEXT_ALIGN, FLEX_DIRECTION, @@ -15,15 +16,13 @@ import Box from '../../../../components/ui/box'; import { SNAPS_VIEW_ROUTE } from '../../../../helpers/constants/routes'; import { getSnapsList } from '../../../../selectors'; import { handleSettingsRefs } from '../../../../helpers/utils/settings-search'; -import { - Icon, - ICON_NAMES, - ICON_SIZES, -} from '../../../../components/component-library/icon/deprecated'; import { BannerTip, BannerTipLogoType, ButtonLink, + Icon, + IconName, + IconSize, Text, } from '../../../../components/component-library'; @@ -79,10 +78,10 @@ const SnapListTab = () => { alignItems={AlignItems.center} > handleSearch('')} > - + )} diff --git a/ui/pages/settings/networks-tab/networks-list-item/networks-list-item.js b/ui/pages/settings/networks-tab/networks-list-item/networks-list-item.js index 00c615a18..cd8ef4b12 100644 --- a/ui/pages/settings/networks-tab/networks-list-item/networks-list-item.js +++ b/ui/pages/settings/networks-tab/networks-list-item/networks-list-item.js @@ -18,9 +18,9 @@ import UrlIcon from '../../../../components/ui/url-icon'; import { handleSettingsRefs } from '../../../../helpers/utils/settings-search'; import { Icon, - ICON_NAMES, - ICON_SIZES, -} from '../../../../components/component-library/icon/deprecated'; + IconName, + IconSize, +} from '../../../../components/component-library'; import { IconColor } from '../../../../helpers/constants/design-system'; const NetworksListItem = ({ @@ -79,9 +79,9 @@ const NetworksListItem = ({ }} > {isCurrentRpcTarget ? ( - + ) : ( - + )} {network.chainId in CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP ? ( )} diff --git a/ui/pages/settings/settings-search-list/settings-search-list.js b/ui/pages/settings/settings-search-list/settings-search-list.js index 696b969cc..fc659c794 100644 --- a/ui/pages/settings/settings-search-list/settings-search-list.js +++ b/ui/pages/settings/settings-search-list/settings-search-list.js @@ -3,10 +3,7 @@ import PropTypes from 'prop-types'; import classnames from 'classnames'; import { highlightSearchedText } from '../../../helpers/utils/settings-search'; import { I18nContext } from '../../../contexts/i18n'; -import { - Icon, - ICON_NAMES, -} from '../../../components/component-library/icon/deprecated'; +import { Icon, IconName } from '../../../components/component-library'; import { Size } from '../../../helpers/constants/design-system'; export default function SettingsSearchList({ results, onClickSetting }) { @@ -48,7 +45,7 @@ export default function SettingsSearchList({ results, onClickSetting }) { {tabMessage(t)} diff --git a/ui/pages/settings/settings-search/settings-search.js b/ui/pages/settings/settings-search/settings-search.js index 28e0314a0..b3f3eb77c 100644 --- a/ui/pages/settings/settings-search/settings-search.js +++ b/ui/pages/settings/settings-search/settings-search.js @@ -9,10 +9,7 @@ import TextField from '../../../components/ui/text-field'; import { I18nContext } from '../../../contexts/i18n'; import SearchIcon from '../../../components/ui/icon/search-icon'; import { isEqualCaseInsensitive } from '../../../../shared/modules/string-utils'; -import { - Icon, - ICON_NAMES, -} from '../../../components/component-library/icon/deprecated'; +import { Icon, IconName } from '../../../components/component-library'; import { IconColor } from '../../../helpers/constants/design-system'; ///: BEGIN:ONLY_INCLUDE_IN(flask) import { getSnapsRouteObjects } from '../../../selectors'; @@ -88,7 +85,7 @@ export default function SettingsSearch({ onClick={() => handleSearch('')} style={{ cursor: 'pointer' }} > - + )} diff --git a/ui/pages/settings/settings.component.js b/ui/pages/settings/settings.component.js index 57ba8833d..25a8d9dd1 100644 --- a/ui/pages/settings/settings.component.js +++ b/ui/pages/settings/settings.component.js @@ -27,11 +27,7 @@ import { import { getSettingsRoutes } from '../../helpers/utils/settings-search'; import AddNetwork from '../../components/app/add-network/add-network'; -import { ButtonIcon } from '../../components/component-library/button-icon/deprecated'; -import { - Icon, - ICON_NAMES, -} from '../../components/component-library/icon/deprecated'; +import { ButtonIcon, Icon, IconName } from '../../components/component-library'; import { Color, DISPLAY } from '../../helpers/constants/design-system'; import SettingsTab from './settings-tab'; import AlertsTab from './alerts-tab'; @@ -125,7 +121,7 @@ class SettingsPage extends PureComponent { {currentPath !== SETTINGS_ROUTE && ( history.push(backRoute)} @@ -263,7 +259,7 @@ class SettingsPage extends PureComponent { const tabs = [ { content: t('general'), - icon: , + icon: , key: GENERAL_ROUTE, }, { @@ -273,7 +269,7 @@ class SettingsPage extends PureComponent { }, { content: t('contacts'), - icon: , + icon: , key: CONTACT_LIST_ROUTE, }, ///: BEGIN:ONLY_INCLUDE_IN(flask) @@ -292,7 +288,7 @@ class SettingsPage extends PureComponent { }, { content: t('alerts'), - icon: , + icon: , key: ALERTS_ROUTE, }, { diff --git a/ui/pages/token-allowance/token-allowance.js b/ui/pages/token-allowance/token-allowance.js index 10cc6ced0..9fe4244ef 100644 --- a/ui/pages/token-allowance/token-allowance.js +++ b/ui/pages/token-allowance/token-allowance.js @@ -61,10 +61,7 @@ import { import { ConfirmPageContainerNavigation } from '../../components/app/confirm-page-container'; import { useSimulationFailureWarning } from '../../hooks/useSimulationFailureWarning'; import SimulationErrorMessage from '../../components/ui/simulation-error-message'; -import { - Icon, - ICON_NAMES, -} from '../../components/component-library/icon/deprecated'; +import { Icon, IconName } from '../../components/component-library'; import LedgerInstructionField from '../../components/app/ledger-instruction-field/ledger-instruction-field'; import { SECURITY_PROVIDER_MESSAGE_SEVERITIES } from '../../components/app/security-provider-banner-message/security-provider-banner-message.constants'; import SecurityProviderBannerMessage from '../../components/app/security-provider-banner-message/security-provider-banner-message'; @@ -448,7 +445,7 @@ export default function TokenAllowance({ )} } + symbol={} title={t('transactionFee')} showEdit showAdvanceGasFeeOptions diff --git a/ui/pages/token-details/token-details-page.js b/ui/pages/token-details/token-details-page.js index 91a088b3d..a6628017a 100644 --- a/ui/pages/token-details/token-details-page.js +++ b/ui/pages/token-details/token-details-page.js @@ -26,10 +26,10 @@ import { } from '../../helpers/constants/design-system'; import { isEqualCaseInsensitive } from '../../../shared/modules/string-utils'; import { - ICON_SIZES, - ICON_NAMES, -} from '../../components/component-library/icon/deprecated'; -import { ButtonIcon } from '../../components/component-library/button-icon/deprecated'; + ButtonIcon, + ButtonIconSize, + IconName, +} from '../../components/component-library'; export default function TokenDetailsPage() { const dispatch = useDispatch(); @@ -139,11 +139,11 @@ export default function TokenDetailsPage() { > handleCopy(token.address)} color={IconColor.primaryDefault} - size={ICON_SIZES.SM} + size={ButtonIconSize.Sm} />