[NO CHANGELOG] Upgrade biome design-tokens to 0.4.4 and react to 0.27…

….2 (#2219) Co-authored-by: tim <[email protected]>
immutable · Sep 26, 2024 · 36c88a5 · 36c88a5
1 parent 0b23fce
commit 36c88a5
Show file tree

Hide file tree

Showing 15 changed files with 130 additions and 66 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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<string, string>;
 }
 
-const status: Record<StatusType, AllIconKeys> = {
+const status: Record<StatusType, AllDualVariantIconKeys> = {
   [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
@@ -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' } : {}}
       >
-        <MenuItem.Icon
-          icon={icon}
-          variant={iconVariant}
-        />
+        {isDualVariantIcon(icon) ? (
+          <MenuItem.Icon
+            icon={icon}
+            variant={iconVariant}
+          />
+        ) : (
+          <MenuItem.Icon icon={icon} />
+        )}
         <MenuItem.Label size="medium">
           {heading}
         </MenuItem.Label>
         <MenuItem.IntentIcon
-          icon={intentIcon}
+          icon={intentIcon as AllSingleVariantIconKeys}
         />
         <MenuItem.Caption testId={`menu-item-caption-${testId}`}>
           {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
@@ -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<RC extends ReactElement | undefined = undefined>({
 }: FiatOptionProps<RC>) {
   const { t } = useTranslation();
 
-  const icon: Record<FiatOptionType, IconProps['icon']> = {
+  const icon: Record<FiatOptionType, AllDualVariantIconKeys> = {
     [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
@@ -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<RC extends ReactElement | undefined = undefined>({
 }: OptionProps<RC>) {
   const { t } = useTranslation();
 
-  const icon: Record<OptionTypes, IconProps['icon']> = {
+  const icon: Record<OptionTypes, AllDualVariantIconKeys> = {
     [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
@@ -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<RC extends ReactElement | undefined = undefined>({
 }: PaymentOptionProps<RC>) {
   const { t } = useTranslation();
 
-  const icon: Record<SalePaymentTypes, IconProps['icon']> = {
+  const icon: Record<SalePaymentTypes, AllDualVariantIconKeys> = {
     [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
@@ -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) ? (
+        <ButtCon
+          variant="tertiary"
+          iconVariant="bold"
+          size="small"
+          icon={ctaIcon}
+          iconSx={{
+            ...(isCopied ? isCopiedIconStyle : {}),
+          }}
+          onClick={handleIconClick}
+          sx={{
+            cursor: 'pointer',
+            ...(isCopied ? isCopiedStyle : {}),
+          }}
+        />
+      ) : (
+        <ButtCon
+          variant="tertiary"
+          size="small"
+          icon={ctaIcon as AllDualVariantIconKeys}
+          iconSx={{
+            ...(isCopied ? isCopiedIconStyle : {}),
+          }}
+          onClick={handleIconClick}
+          sx={{
+            cursor: 'pointer',
+            ...(isCopied ? isCopiedStyle : {}),
+          }}
+        />
+      )}
 
-      <ButtCon
-        variant="tertiary"
-        iconVariant="bold"
-        size="small"
-        icon={ctaIcon}
-        iconSx={{
-          ...(isCopied ? isCopiedIconStyle : {}),
-        }}
-        onClick={handleIconClick}
-        sx={{
-          cursor: 'pointer',
-          ...(isCopied ? isCopiedStyle : {}),
-        }}
-      />
       <MenuItem.Label>{t('views.SETTINGS.walletAddress.label')}</MenuItem.Label>
       <MenuItem.Caption testId="wallet-address">
         {abbreviateWalletAddress(walletAddress)}

diff --git 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
@@ -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
@@ -17,7 +17,7 @@ function Message() {
   return (
     <CardStack title="Message">
       <Sticker
-        style={{ width: '100%' }}
+        sx={{ width: '100%' }}
         position={{ x: 'right', y: 'top' }}
       >
         <Form>
@@ -36,6 +36,7 @@ function Message() {
         <Sticker.FramedIcon
           icon="Close"
           circularFrame
+          emphasized
           sx={{
             cursor: 'pointer',
           }}

diff --git a/packages/x-provider/src/sample-app/package.json b/packages/x-provider/src/sample-app/package.json
@@ -14,7 +14,7 @@
     ]
   },
   "dependencies": {
-    "@biom3/react": "^0.25.0",
+    "@biom3/react": "^0.27.3",
     "@imtbl/sdk": "0.0.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",

diff --git a/sdk/package.json b/sdk/package.json
@@ -9,8 +9,8 @@
     "@0xsequence/abi": "^1.4.3",
     "@0xsequence/core": "^1.4.3",
     "@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/abi": "^5.7.0",
     "@ethersproject/abstract-provider": "^5.7.0",
     "@ethersproject/abstract-signer": "^5.7.0",
@@ -162,7 +162,7 @@
   },
   "repository": "immutable/ts-immutable-sdk.git",
   "resolutions": {
-    "@biom3/design-tokens": "^0.4.2",
+    "@biom3/design-tokens": "^0.4.4",
     "@openzeppelin/contracts": "3.4.2-solc-0.7"
   },
   "scripts": {
@@ -178,4 +178,4 @@
   },
   "type": "module",
   "types": "./dist/index.d.ts"
-}
+}