From 6003b71686c24a6e09029d224c3db1d100425dd7 Mon Sep 17 00:00:00 2001
From: Ji Young Lee <ji.younglee@immutable.com>
Date: Wed, 4 Dec 2024 15:52:07 +1100
Subject: [PATCH] Upgrade biome3/react to 0.28.13 Add tooltip

---
 packages/checkout/widgets-lib/package.json    |  2 +-
 .../src/components/RawImage/RawImage.tsx      |  2 +-
 .../components/SimpleLayout/SimpleLayout.tsx  |  2 +-
 .../src/lib/squid/components/SquidIcon.tsx    |  2 +-
 .../components/SelectedRouteOption.tsx        | 19 ++++--
 sdk/package.json                              |  4 +-
 yarn.lock                                     | 61 ++++++++++++++++++-
 7 files changed, 79 insertions(+), 13 deletions(-)

diff --git a/packages/checkout/widgets-lib/package.json b/packages/checkout/widgets-lib/package.json
index 64083cdd91..ad234f4660 100644
--- a/packages/checkout/widgets-lib/package.json
+++ b/packages/checkout/widgets-lib/package.json
@@ -16,7 +16,7 @@
   "dependencies": {
     "@0xsquid/sdk": "^2.8.25",
     "@biom3/design-tokens": "^0.4.4",
-    "@biom3/react": "^0.27.12",
+    "@biom3/react": "0.28.13",
     "@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/RawImage/RawImage.tsx b/packages/checkout/widgets-lib/src/components/RawImage/RawImage.tsx
index 7be964dc3b..d42e9886ab 100644
--- a/packages/checkout/widgets-lib/src/components/RawImage/RawImage.tsx
+++ b/packages/checkout/widgets-lib/src/components/RawImage/RawImage.tsx
@@ -26,7 +26,7 @@ export function RawImage({
         src={src}
         alt={alt}
         className="CloudImage"
-        style={useConvertSxToEmotionStyles(imageStyles)}
+        // style={useConvertSxToEmotionStyles(imageStyles)} TODO: fix this
         loading="lazy"
       />
     </Box>
diff --git a/packages/checkout/widgets-lib/src/components/SimpleLayout/SimpleLayout.tsx b/packages/checkout/widgets-lib/src/components/SimpleLayout/SimpleLayout.tsx
index c2128442fb..100a102b29 100644
--- a/packages/checkout/widgets-lib/src/components/SimpleLayout/SimpleLayout.tsx
+++ b/packages/checkout/widgets-lib/src/components/SimpleLayout/SimpleLayout.tsx
@@ -1,5 +1,5 @@
 import { Box, BoxProps } from '@biom3/react';
-import merge from 'ts-deepmerge';
+import { merge } from 'ts-deepmerge';
 import {
   simpleLayoutStyle,
   headerStyle,
diff --git a/packages/checkout/widgets-lib/src/lib/squid/components/SquidIcon.tsx b/packages/checkout/widgets-lib/src/lib/squid/components/SquidIcon.tsx
index 80e7cf106f..a2fef0ef37 100644
--- a/packages/checkout/widgets-lib/src/lib/squid/components/SquidIcon.tsx
+++ b/packages/checkout/widgets-lib/src/lib/squid/components/SquidIcon.tsx
@@ -1,5 +1,5 @@
 import { DeeplyNestedSx, SvgIcon } from '@biom3/react';
-import merge from 'ts-deepmerge';
+import { merge } from 'ts-deepmerge';
 
 export function SquidIcon({
   sx = {},
diff --git a/packages/checkout/widgets-lib/src/widgets/add-tokens/components/SelectedRouteOption.tsx b/packages/checkout/widgets-lib/src/widgets/add-tokens/components/SelectedRouteOption.tsx
index 80960ed193..d2a92d72f5 100644
--- a/packages/checkout/widgets-lib/src/widgets/add-tokens/components/SelectedRouteOption.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/add-tokens/components/SelectedRouteOption.tsx
@@ -3,6 +3,7 @@ import {
   MenuItem,
   Stack,
   Sticker,
+  Tooltip,
 } from '@biom3/react';
 import {
   MouseEvent,
@@ -148,12 +149,18 @@ export function SelectedRouteOption({
       selected={withSelectedWallet}
     >
       {chain && (
-        <Sticker position={{ x: 'right', y: 'bottom' }}>
-          <Sticker.FramedImage
-            use={<img src={chain.iconUrl} alt={chain.name} />}
-            size="xSmall"
-            sx={{ bottom: 'base.spacing.x2', right: 'base.spacing.x2' }}
-          />
+        <Sticker position={{ x: 'rightInside', y: 'bottomInside' }}>
+          <Tooltip size="small">
+            <Tooltip.Target>
+              <Sticker.FramedImage
+                use={<img src={chain.iconUrl} alt={chain.name} />}
+                size="xSmall"
+              />
+            </Tooltip.Target>
+            <Tooltip.Content id="route_tooltip_content">
+              {chain.name}
+            </Tooltip.Content>
+          </Tooltip>
 
           <MenuItem.FramedImage
             circularFrame
diff --git a/sdk/package.json b/sdk/package.json
index ae7d42e4fe..3dee626971 100644
--- a/sdk/package.json
+++ b/sdk/package.json
@@ -10,7 +10,7 @@
     "@0xsequence/core": "^1.4.3",
     "@0xsquid/sdk": "^2.8.25",
     "@biom3/design-tokens": "^0.4.4",
-    "@biom3/react": "^0.27.12",
+    "@biom3/react": "0.28.13",
     "@ethersproject/abi": "^5.7.0",
     "@ethersproject/abstract-provider": "^5.7.0",
     "@ethersproject/abstract-signer": "^5.7.0",
@@ -178,4 +178,4 @@
   },
   "type": "module",
   "types": "./dist/index.d.ts"
-}
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 83063b1457..347673f115 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2528,6 +2528,42 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@biom3/design-tokens@npm:~0.4.6":
+  version: 0.4.6
+  resolution: "@biom3/design-tokens@npm:0.4.6"
+  dependencies:
+    lodash.get: ^4.4.2
+  checksum: ffe69decdfb72e96780d909464edc9d6f021b06da0afcf56656a008c8a2b0ffc9bd90f2d8a392bd366ccf4747f363d8092840087f7363c574c3c79e5c8a8fdf7
+  languageName: node
+  linkType: hard
+
+"@biom3/react@npm:0.28.13":
+  version: 0.28.13
+  resolution: "@biom3/react@npm:0.28.13"
+  dependencies:
+    "@biom3/design-tokens": ~0.4.6
+    "@imtbl/image-resizer-utils": ~0.0.3
+    csstype: ^3.1.3
+    hls.js: ^1.5.11
+    localforage: ^1.10.0
+    lodash.debounce: ^4.0.8
+    lodash.get: ^4.4.2
+    lodash.isequal: ^4.5.0
+    lodash.throttle: ^4.1.1
+    react-is: ^18.2.0
+    react-keyed-flatten-children: ^3.0.0
+    ts-deepmerge: ^7.0.2
+  peerDependencies:
+    "@emotion/react": ^11.11.4
+    "@rive-app/react-canvas-lite": ^4.9.0
+    embla-carousel-react: ^8.0.4
+    framer-motion: ^10.12.12
+    react: ^18.3.0
+    react-dom: ^18.3.0
+  checksum: dda1f2671e6877092c1fb3d19b2edc379f3fdc5d8d1f79105624ce1eaed0653feebfdbe0039ff0091a0f13ddd386b16108dcb1d9914320b4725704f53401886a
+  languageName: node
+  linkType: hard
+
 "@biom3/react@npm:^0.25.21":
   version: 0.25.21
   resolution: "@biom3/react@npm:0.25.21"
@@ -4658,7 +4694,7 @@ __metadata:
     "@0xsquid/sdk": ^2.8.25
     "@0xsquid/squid-types": ^0.1.108
     "@biom3/design-tokens": ^0.4.4
-    "@biom3/react": ^0.27.12
+    "@biom3/react": 0.28.13
     "@ethersproject/bignumber": ^5.7.0
     "@ethersproject/providers": ^5.7.2
     "@imtbl/bridge-sdk": 0.0.0
@@ -4871,6 +4907,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@imtbl/image-resizer-utils@npm:~0.0.3":
+  version: 0.0.3
+  resolution: "@imtbl/image-resizer-utils@npm:0.0.3"
+  dependencies:
+    buffer: ^6.0.3
+  checksum: bf1d4fa3d8dd8d7eba96c2a88983beb1753f01369d434a1a6b218fd58da4811178fa19a4afc433c4136d677171e47cb18648326c4906ce3c3c020d0a6a11ee34
+  languageName: node
+  linkType: hard
+
 "@imtbl/metrics@0.0.0, @imtbl/metrics@workspace:packages/internal/metrics":
   version: 0.0.0-use.local
   resolution: "@imtbl/metrics@workspace:packages/internal/metrics"
@@ -19150,6 +19195,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"csstype@npm:^3.1.3":
+  version: 3.1.3
+  resolution: "csstype@npm:3.1.3"
+  checksum: 8db785cc92d259102725b3c694ec0c823f5619a84741b5c7991b8ad135dfaa66093038a1cc63e03361a6cd28d122be48f2106ae72334e067dd619a51f49eddf7
+  languageName: node
+  linkType: hard
+
 "d@npm:1, d@npm:^1.0.1":
   version: 1.0.1
   resolution: "d@npm:1.0.1"
@@ -38571,6 +38623,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ts-deepmerge@npm:^7.0.2":
+  version: 7.0.2
+  resolution: "ts-deepmerge@npm:7.0.2"
+  checksum: 285e81ead8677f14884d28c0289129554fb67502e93e78b06186dc87fac7398585dcd76c550c1bd6d1d9203a2aa28226868ff45e4bba49c765784d6500be3bf7
+  languageName: node
+  linkType: hard
+
 "ts-essentials@npm:^7.0.1":
   version: 7.0.3
   resolution: "ts-essentials@npm:7.0.3"