From 266257d4f7425621de7365ec5a31155c80ebc2c3 Mon Sep 17 00:00:00 2001
From: Mimi Tran <80493680+mimi-imtbl@users.noreply.github.com>
Date: Wed, 13 Nov 2024 10:29:49 +1100
Subject: [PATCH] [NO CHANGELOG] [Add Tokens Widget] Fetch chains from squid
 sdk (#2384)

---
 .../widgets/add-tokens/AddTokensWidget.tsx    | 18 +++++++--------
 .../add-tokens/functions/fetchChains.ts       | 22 ++++---------------
 .../src/widgets/add-tokens/utils/config.ts    |  2 --
 .../src/widgets/add-tokens/views/Review.tsx   |  8 -------
 4 files changed, 12 insertions(+), 38 deletions(-)

diff --git a/packages/checkout/widgets-lib/src/widgets/add-tokens/AddTokensWidget.tsx b/packages/checkout/widgets-lib/src/widgets/add-tokens/AddTokensWidget.tsx
index 42d386dd91..e6bc90f588 100644
--- a/packages/checkout/widgets-lib/src/widgets/add-tokens/AddTokensWidget.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/add-tokens/AddTokensWidget.tsx
@@ -126,17 +126,15 @@ export default function AddTokensWidget({
   }, [toTokenAddress, toAmount]);
 
   useEffect(() => {
-    (async () => {
-      const chainsResponse = await fetchChains();
+    if (!squid) return;
 
-      addTokensDispatch({
-        payload: {
-          type: AddTokensActions.SET_CHAINS,
-          chains: chainsResponse,
-        },
-      });
-    })();
-  }, []);
+    addTokensDispatch({
+      payload: {
+        type: AddTokensActions.SET_CHAINS,
+        chains: fetchChains(squid),
+      },
+    });
+  }, [squid]);
 
   useEffect(() => {
     if (!squid || !chains || !fromProvider || fetchingBalances.current) return;
diff --git a/packages/checkout/widgets-lib/src/widgets/add-tokens/functions/fetchChains.ts b/packages/checkout/widgets-lib/src/widgets/add-tokens/functions/fetchChains.ts
index 8297e8ad2f..35a2441cb6 100644
--- a/packages/checkout/widgets-lib/src/widgets/add-tokens/functions/fetchChains.ts
+++ b/packages/checkout/widgets-lib/src/widgets/add-tokens/functions/fetchChains.ts
@@ -1,5 +1,5 @@
+import { Squid } from '@0xsquid/sdk';
 import { Chain } from '../types';
-import { SQUID_API_BASE_URL } from '../utils/config';
 
 type SquidChain = {
   chainId: string;
@@ -9,10 +9,6 @@ type SquidChain = {
   nativeCurrency: SquidNativeCurrency;
 };
 
-type SquidChains = {
-  chains: SquidChain[];
-};
-
 export type SquidNativeCurrency = {
   name: string;
   symbol: string;
@@ -20,20 +16,10 @@ export type SquidNativeCurrency = {
   icon: string;
 };
 
-export const fetchChains = async (): Promise<Chain[]> => {
-  const url = `${SQUID_API_BASE_URL}/chains`;
-
-  const response = await fetch(url, {
-    method: 'GET',
-    headers: {
-      // eslint-disable-next-line @typescript-eslint/naming-convention
-      'Content-Type': 'application/json',
-    },
-  });
-
-  const data: SquidChains = await response.json();
+export const fetchChains = (squid: Squid): Chain[] => {
+  const { chains } = squid;
 
-  return data.chains.map((chain: SquidChain) => ({
+  return chains.map((chain: SquidChain) => ({
     id: chain.chainId.toString(),
     name: chain.networkName,
     iconUrl: chain.chainIconURI,
diff --git a/packages/checkout/widgets-lib/src/widgets/add-tokens/utils/config.ts b/packages/checkout/widgets-lib/src/widgets/add-tokens/utils/config.ts
index 8bc0f58d9e..93ee26afe0 100644
--- a/packages/checkout/widgets-lib/src/widgets/add-tokens/utils/config.ts
+++ b/packages/checkout/widgets-lib/src/widgets/add-tokens/utils/config.ts
@@ -1,7 +1,5 @@
 export const SQUID_SDK_BASE_URL = 'https://apiplus.squidrouter.com';
 
-export const SQUID_API_BASE_URL = 'https://api.squidrouter.com/v1';
-
 export const SQUID_NATIVE_TOKEN = '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE';
 
 export const FIXED_HANDOVER_DURATION = 2000;
diff --git a/packages/checkout/widgets-lib/src/widgets/add-tokens/views/Review.tsx b/packages/checkout/widgets-lib/src/widgets/add-tokens/views/Review.tsx
index 781cbca328..0b7f58f22f 100644
--- a/packages/checkout/widgets-lib/src/widgets/add-tokens/views/Review.tsx
+++ b/packages/checkout/widgets-lib/src/widgets/add-tokens/views/Review.tsx
@@ -455,10 +455,6 @@ export function Review({
                   <Sticker.FramedImage
                     use={<img src={fromChain?.iconUrl} alt={fromChain?.name} />}
                     emphasized
-                    sx={{
-                      bottom: 'base.spacing.x2',
-                      right: 'base.spacing.x2',
-                    }}
                   />
                 </Sticker>
                 <Stack sx={{ flex: 1 }} gap="0px">
@@ -596,10 +592,6 @@ export function Review({
                   <Sticker.FramedImage
                     use={<img src={toChain?.iconUrl} alt={toChain?.name} />}
                     emphasized
-                    sx={{
-                      bottom: 'base.spacing.x2',
-                      right: 'base.spacing.x2',
-                    }}
                   />
                 </Sticker>
                 <Stack sx={{ flex: 1 }} gap="0px">