From 36c88a532650bf2d75ff68205afaf495ca902f83 Mon Sep 17 00:00:00 2001 From: Ji Young Lee <641712+jiyounglee@users.noreply.github.com> Date: Fri, 27 Sep 2024 09:30:59 +1000 Subject: [PATCH] [NO CHANGELOG] Upgrade biome design-tokens to 0.4.4 and react to 0.27.2 (#2219) Co-authored-by: tim --- .../wallets-connect-with-nextjs/package.json | 2 +- packages/checkout/sdk-sample-app/package.json | 4 +- packages/checkout/widgets-lib/package.json | 4 +- .../src/components/Status/StatusBox.tsx | 5 +- .../src/views/top-up/TopUpMenuItem.tsx | 20 ++++-- .../add-funds/components/FiatOption.tsx | 4 +- .../widgets/add-funds/components/Option.tsx | 8 ++- .../widgets/sale/components/PaymentOption.tsx | 4 +- .../WalletAddress/WalletAddress.tsx | 56 +++++++++------ .../checkout/widgets-sample-app/package.json | 4 +- packages/passport/sdk-sample-app/package.json | 4 +- .../sdk-sample-app/src/components/Message.tsx | 3 +- .../x-provider/src/sample-app/package.json | 2 +- sdk/package.json | 8 +-- yarn.lock | 68 ++++++++++++++----- 15 files changed, 130 insertions(+), 66 deletions(-) diff --git a/examples/passport/wallets-connect-with-nextjs/package.json b/examples/passport/wallets-connect-with-nextjs/package.json index 3047661b3e..9512f8efaf 100644 --- a/examples/passport/wallets-connect-with-nextjs/package.json +++ b/examples/passport/wallets-connect-with-nextjs/package.json @@ -2,7 +2,7 @@ "name": "@examples/wallets-connect-with-nextjs", "version": "0.1.0", "dependencies": { - "@biom3/react": "^0.26.2", + "@biom3/react": "^0.27.3", "@ethersproject/providers": "^5.7.2", "@imtbl/sdk": "latest", "@tanstack/react-query": "^5.51.11", diff --git a/packages/checkout/sdk-sample-app/package.json b/packages/checkout/sdk-sample-app/package.json index 0401b459d7..343aba5e89 100644 --- a/packages/checkout/sdk-sample-app/package.json +++ b/packages/checkout/sdk-sample-app/package.json @@ -14,8 +14,8 @@ ] }, "dependencies": { - "@biom3/design-tokens": "^0.4.2", - "@biom3/react": "^0.25.0", + "@biom3/design-tokens": "^0.4.4", + "@biom3/react": "^0.27.3", "@ethersproject/providers": "^5.7.2", "@imtbl/checkout-sdk": "0.0.0", "@imtbl/checkout-widgets": "0.0.0", diff --git a/packages/checkout/widgets-lib/package.json b/packages/checkout/widgets-lib/package.json index ff82d800a1..82fea551ca 100644 --- a/packages/checkout/widgets-lib/package.json +++ b/packages/checkout/widgets-lib/package.json @@ -15,8 +15,8 @@ }, "dependencies": { "@0xsquid/sdk": "^2.8.24", - "@biom3/design-tokens": "^0.4.2", - "@biom3/react": "^0.25.0", + "@biom3/design-tokens": "^0.4.4", + "@biom3/react": "^0.27.3", "@ethersproject/bignumber": "^5.7.0", "@ethersproject/providers": "^5.7.2", "@imtbl/bridge-sdk": "0.0.0", diff --git a/packages/checkout/widgets-lib/src/components/Status/StatusBox.tsx b/packages/checkout/widgets-lib/src/components/Status/StatusBox.tsx index 067c56880d..10445a4d35 100644 --- a/packages/checkout/widgets-lib/src/components/Status/StatusBox.tsx +++ b/packages/checkout/widgets-lib/src/components/Status/StatusBox.tsx @@ -1,5 +1,6 @@ import { - AllIconKeys, Body, Box, Icon, + AllDualVariantIconKeys, + Body, Box, Icon, } from '@biom3/react'; import { statusBoxStyles, statusLogoFill } from './StatusViewStyles'; @@ -11,7 +12,7 @@ export interface StatusViewProps { iconStyles?: Record; } -const status: Record = { +const status: Record = { [StatusType.SUCCESS]: 'TickWithCircle', [StatusType.WARNING]: 'Shield', [StatusType.FAILURE]: 'CloseWithCircle', diff --git a/packages/checkout/widgets-lib/src/views/top-up/TopUpMenuItem.tsx b/packages/checkout/widgets-lib/src/views/top-up/TopUpMenuItem.tsx index 3ac63a2789..1a052cebb1 100644 --- a/packages/checkout/widgets-lib/src/views/top-up/TopUpMenuItem.tsx +++ b/packages/checkout/widgets-lib/src/views/top-up/TopUpMenuItem.tsx @@ -1,5 +1,7 @@ -import { Box, MenuItem, IconProps } from '@biom3/react'; -import { ReactNode } from 'react'; +import { + AllSingleVariantIconKeys, Box, type IconProps, isDualVariantIcon, MenuItem, +} from '@biom3/react'; +import type { ReactNode } from 'react'; export interface TopUpMenuItemProps { testId: string; @@ -25,15 +27,19 @@ export function TopUpMenuItem({ onClick={!isDisabled ? onClick : undefined} sx={isDisabled ? { opacity: '0.5', cursor: 'not-allowed' } : {}} > - + {isDualVariantIcon(icon) ? ( + + ) : ( + + )} {heading} {caption} diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/components/FiatOption.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/components/FiatOption.tsx index 5b3e8fd6dd..505ebf4189 100644 --- a/packages/checkout/widgets-lib/src/widgets/add-funds/components/FiatOption.tsx +++ b/packages/checkout/widgets-lib/src/widgets/add-funds/components/FiatOption.tsx @@ -1,4 +1,4 @@ -import { IconProps, MenuItem, MenuItemSize } from '@biom3/react'; +import { AllDualVariantIconKeys, MenuItem, MenuItemSize } from '@biom3/react'; import { ReactElement } from 'react'; import { useTranslation } from 'react-i18next'; import { FiatOptionType } from '../types'; @@ -20,7 +20,7 @@ export function FiatOption({ }: FiatOptionProps) { const { t } = useTranslation(); - const icon: Record = { + const icon: Record = { [FiatOptionType.DEBIT]: 'BankCard', [FiatOptionType.CREDIT]: 'BankCard', }; diff --git a/packages/checkout/widgets-lib/src/widgets/add-funds/components/Option.tsx b/packages/checkout/widgets-lib/src/widgets/add-funds/components/Option.tsx index e1f80078e3..d0160ea8c2 100644 --- a/packages/checkout/widgets-lib/src/widgets/add-funds/components/Option.tsx +++ b/packages/checkout/widgets-lib/src/widgets/add-funds/components/Option.tsx @@ -1,5 +1,7 @@ -import { IconProps, MenuItem, MenuItemSize } from '@biom3/react'; -import { ReactElement } from 'react'; +import { + type AllDualVariantIconKeys, MenuItem, type MenuItemSize, +} from '@biom3/react'; +import type { ReactElement } from 'react'; import { useTranslation } from 'react-i18next'; export enum OptionTypes { @@ -27,7 +29,7 @@ export function Option({ }: OptionProps) { const { t } = useTranslation(); - const icon: Record = { + const icon: Record = { [OptionTypes.SWAP]: 'Coins', [OptionTypes.DEBIT]: 'BankCard', [OptionTypes.CREDIT]: 'BankCard', diff --git a/packages/checkout/widgets-lib/src/widgets/sale/components/PaymentOption.tsx b/packages/checkout/widgets-lib/src/widgets/sale/components/PaymentOption.tsx index 03bfd4c478..97c2958d3a 100644 --- a/packages/checkout/widgets-lib/src/widgets/sale/components/PaymentOption.tsx +++ b/packages/checkout/widgets-lib/src/widgets/sale/components/PaymentOption.tsx @@ -1,4 +1,4 @@ -import { IconProps, MenuItem, MenuItemSize } from '@biom3/react'; +import { AllDualVariantIconKeys, MenuItem, MenuItemSize } from '@biom3/react'; import { SalePaymentTypes } from '@imtbl/checkout-sdk'; import { ReactElement } from 'react'; import { useTranslation } from 'react-i18next'; @@ -24,7 +24,7 @@ export function PaymentOption({ }: PaymentOptionProps) { const { t } = useTranslation(); - const icon: Record = { + const icon: Record = { [SalePaymentTypes.CRYPTO]: 'Coins', [SalePaymentTypes.DEBIT]: 'BankCard', [SalePaymentTypes.CREDIT]: 'BankCard', diff --git a/packages/checkout/widgets-lib/src/widgets/wallet/components/WalletAddress/WalletAddress.tsx b/packages/checkout/widgets-lib/src/widgets/wallet/components/WalletAddress/WalletAddress.tsx index 151f76e161..bee739b063 100644 --- a/packages/checkout/widgets-lib/src/widgets/wallet/components/WalletAddress/WalletAddress.tsx +++ b/packages/checkout/widgets-lib/src/widgets/wallet/components/WalletAddress/WalletAddress.tsx @@ -1,16 +1,18 @@ import { - MenuItem, ButtCon, AllIconKeys, SxProps, + type AllDualVariantIconKeys, type AllIconKeys, ButtCon, + isDualVariantIcon, + MenuItem, type SxProps, } from '@biom3/react'; -import { Web3Provider } from '@ethersproject/providers'; +import type { Web3Provider } from '@ethersproject/providers'; import { useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; -import { getWalletLogoByName } from '../../../../lib/logoUtils'; -import { abbreviateWalletAddress } from '../../../../lib/utils'; -import { getWalletProviderNameByProvider, isPassportProvider } from '../../../../lib/provider'; import { UserJourney, useAnalytics, } from '../../../../context/analytics-provider/SegmentAnalyticsProvider'; +import { getWalletLogoByName } from '../../../../lib/logoUtils'; +import { getWalletProviderNameByProvider, isPassportProvider } from '../../../../lib/provider'; +import { abbreviateWalletAddress } from '../../../../lib/utils'; const isCopiedStyle: SxProps = { background: 'base.color.status.success.bright', @@ -75,21 +77,37 @@ export function WalletAddress({ logo={getWalletLogoByName(getWalletProviderNameByProvider(provider))} sx={{ backgroundColor: 'base.color.translucent.standard.200' }} /> + {isDualVariantIcon(ctaIcon) ? ( + + ) : ( + + )} - {t('views.SETTINGS.walletAddress.label')} {abbreviateWalletAddress(walletAddress)} diff --git a/packages/checkout/widgets-sample-app/package.json b/packages/checkout/widgets-sample-app/package.json index c191e7a959..2db4fa3932 100644 --- a/packages/checkout/widgets-sample-app/package.json +++ b/packages/checkout/widgets-sample-app/package.json @@ -14,8 +14,8 @@ ] }, "dependencies": { - "@biom3/design-tokens": "^0.4.2", - "@biom3/react": "^0.25.0", + "@biom3/design-tokens": "^0.4.4", + "@biom3/react": "^0.27.3", "@ethersproject/providers": "^5.7.2", "@imtbl/checkout-sdk": "0.0.0", "@imtbl/checkout-widgets": "0.0.0", diff --git a/packages/passport/sdk-sample-app/package.json b/packages/passport/sdk-sample-app/package.json index 08e65c7361..7d9dbe5a40 100644 --- a/packages/passport/sdk-sample-app/package.json +++ b/packages/passport/sdk-sample-app/package.json @@ -2,8 +2,8 @@ "name": "@imtbl/passport-sdk-sample-app", "version": "0.1.0", "dependencies": { - "@biom3/design-tokens": "^0.4.2", - "@biom3/react": "^0.25.0", + "@biom3/design-tokens": "^0.4.4", + "@biom3/react": "^0.27.3", "@imtbl/blockchain-data": "0.0.0", "@imtbl/config": "0.0.0", "@imtbl/generated-clients": "0.0.0", diff --git a/packages/passport/sdk-sample-app/src/components/Message.tsx b/packages/passport/sdk-sample-app/src/components/Message.tsx index 6875db7559..734b55226f 100644 --- a/packages/passport/sdk-sample-app/src/components/Message.tsx +++ b/packages/passport/sdk-sample-app/src/components/Message.tsx @@ -17,7 +17,7 @@ function Message() { return (
@@ -36,6 +36,7 @@ function Message() {