From fce08284bd60959ca9b8b44527a3f84157cf1175 Mon Sep 17 00:00:00 2001
From: Charlie McKenzie <charlie@dreamoftrees.com>
Date: Fri, 19 Apr 2024 12:04:58 +1000
Subject: [PATCH] fix: [GPR-594] Updates to cloud image component image resizer
 url based on environment (#1684)

---
 .../ChangedYourMindDrawer/ChangedYourMindDrawer.tsx       | 2 ++
 .../src/components/NotEnoughGas/NotEnoughGas.tsx          | 3 ++-
 .../src/components/NotEnoughImx/NotEnoughImx.tsx          | 2 ++
 .../components/Transactions/NotEnoughEthToWithdraw.tsx    | 8 ++++++--
 .../UnableToConnectDrawer/UnableToConnectDrawer.tsx       | 2 ++
 packages/checkout/widgets-lib/src/lib/constants.ts        | 6 ++++++
 6 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/packages/checkout/widgets-lib/src/components/ChangedYourMindDrawer/ChangedYourMindDrawer.tsx b/packages/checkout/widgets-lib/src/components/ChangedYourMindDrawer/ChangedYourMindDrawer.tsx
index af1ef87b05..1c8f98f81e 100644
--- a/packages/checkout/widgets-lib/src/components/ChangedYourMindDrawer/ChangedYourMindDrawer.tsx
+++ b/packages/checkout/widgets-lib/src/components/ChangedYourMindDrawer/ChangedYourMindDrawer.tsx
@@ -11,6 +11,7 @@ import { Checkout } from '@imtbl/checkout-sdk';
 import { Environment } from '@imtbl/config';
 import { getRemoteImage } from 'lib/utils';
 import { useTranslation } from 'react-i18next';
+import { IMAGE_RESIZER_URL } from '../../lib';
 
 export interface ChangedYourMindDrawerProps {
   visible: boolean;
@@ -57,6 +58,7 @@ export function ChangedYourMindDrawer({
         >
           <CloudImage
             imageUrl={walletErrorRedUrl}
+            imageResizeServiceUrl={IMAGE_RESIZER_URL[checkout.config.environment]}
             sx={{ paddingTop: 'base.spacing.x4', paddingBottom: 'base.spacing.x9' }}
           />
           <ButtCon
diff --git a/packages/checkout/widgets-lib/src/components/NotEnoughGas/NotEnoughGas.tsx b/packages/checkout/widgets-lib/src/components/NotEnoughGas/NotEnoughGas.tsx
index 4832a55f2d..f7bf87f481 100644
--- a/packages/checkout/widgets-lib/src/components/NotEnoughGas/NotEnoughGas.tsx
+++ b/packages/checkout/widgets-lib/src/components/NotEnoughGas/NotEnoughGas.tsx
@@ -3,7 +3,7 @@ import {
   Drawer, Box, Button, Heading, CloudImage,
 } from '@biom3/react';
 import { useCallback, useState } from 'react';
-import { ETH_TOKEN_SYMBOL } from 'lib';
+import { ETH_TOKEN_SYMBOL, IMAGE_RESIZER_URL } from 'lib';
 import { Environment } from '@imtbl/config';
 import { getRemoteImage } from 'lib/utils';
 import { useTranslation } from 'react-i18next';
@@ -71,6 +71,7 @@ NotEnoughGasProps) {
                 ? notEnoughEth
                 : notEnoughImx
             }
+          imageResizeServiceUrl={IMAGE_RESIZER_URL[environment]}
           sx={{ w: '90px', h: tokenSymbol === ETH_TOKEN_SYMBOL ? '110px' : '90px' }}
         />
         <Heading
diff --git a/packages/checkout/widgets-lib/src/components/NotEnoughImx/NotEnoughImx.tsx b/packages/checkout/widgets-lib/src/components/NotEnoughImx/NotEnoughImx.tsx
index cf707251e4..71d63286a5 100644
--- a/packages/checkout/widgets-lib/src/components/NotEnoughImx/NotEnoughImx.tsx
+++ b/packages/checkout/widgets-lib/src/components/NotEnoughImx/NotEnoughImx.tsx
@@ -12,6 +12,7 @@ import {
   actionButtonContainerStyles,
   logoContainerStyles,
 } from './NotEnoughImxStyles';
+import { IMAGE_RESIZER_URL } from '../../lib';
 
 type NotEnoughImxProps = {
   environment: Environment;
@@ -45,6 +46,7 @@ export function NotEnoughImx({
         <Box testId="not-enough-gas-bottom-sheet" sx={containerStyles}>
           <CloudImage
             imageUrl={imxLogo}
+            imageResizeServiceUrl={IMAGE_RESIZER_URL[environment]}
             sx={{ w: 'base.icon.size.600', h: 'base.icon.size.600' }}
           />
           <Heading
diff --git a/packages/checkout/widgets-lib/src/components/Transactions/NotEnoughEthToWithdraw.tsx b/packages/checkout/widgets-lib/src/components/Transactions/NotEnoughEthToWithdraw.tsx
index 7f45e4d9b3..e16c145f20 100644
--- a/packages/checkout/widgets-lib/src/components/Transactions/NotEnoughEthToWithdraw.tsx
+++ b/packages/checkout/widgets-lib/src/components/Transactions/NotEnoughEthToWithdraw.tsx
@@ -2,7 +2,7 @@ import {
   Body,
   Box, Button, CloudImage, Drawer, Heading,
 } from '@biom3/react';
-import { ETH_TOKEN_SYMBOL } from 'lib';
+import { ETH_TOKEN_SYMBOL, IMAGE_RESIZER_URL } from 'lib';
 import { useTranslation } from 'react-i18next';
 import { useContext } from 'react';
 import { BridgeContext } from 'widgets/bridge/context/BridgeContext';
@@ -37,7 +37,11 @@ export function NotEnoughEthToWithdraw({
 
       <Drawer.Content>
         <Box testId="not-enough-eth-drawer" sx={containerStyles}>
-          <CloudImage imageUrl={ethLogo} sx={{ w: 'base.icon.size.600', h: 'base.icon.size.600' }} />
+          <CloudImage
+            imageUrl={ethLogo}
+            imageResizeServiceUrl={IMAGE_RESIZER_URL[checkout.config.environment]}
+            sx={{ w: 'base.icon.size.600', h: 'base.icon.size.600' }}
+          />
           <Heading
             size="small"
             sx={contentTextStyles}
diff --git a/packages/checkout/widgets-lib/src/components/UnableToConnectDrawer/UnableToConnectDrawer.tsx b/packages/checkout/widgets-lib/src/components/UnableToConnectDrawer/UnableToConnectDrawer.tsx
index 19dbd83371..58dd1f04b4 100644
--- a/packages/checkout/widgets-lib/src/components/UnableToConnectDrawer/UnableToConnectDrawer.tsx
+++ b/packages/checkout/widgets-lib/src/components/UnableToConnectDrawer/UnableToConnectDrawer.tsx
@@ -11,6 +11,7 @@ import { Checkout } from '@imtbl/checkout-sdk';
 import { Environment } from '@imtbl/config';
 import { getRemoteImage } from 'lib/utils';
 import { useTranslation } from 'react-i18next';
+import { IMAGE_RESIZER_URL } from '../../lib';
 
 export interface UnableToConnectDrawerProps {
   visible: boolean;
@@ -57,6 +58,7 @@ export function UnableToConnectDrawer({
         >
           <CloudImage
             imageUrl={walletErrorYellowUrl}
+            imageResizeServiceUrl={IMAGE_RESIZER_URL[checkout.config.environment]}
             sx={{ paddingTop: 'base.spacing.x4', paddingBottom: 'base.spacing.x9' }}
           />
           <ButtCon
diff --git a/packages/checkout/widgets-lib/src/lib/constants.ts b/packages/checkout/widgets-lib/src/lib/constants.ts
index 3261176c6c..fa2a68c5f3 100644
--- a/packages/checkout/widgets-lib/src/lib/constants.ts
+++ b/packages/checkout/widgets-lib/src/lib/constants.ts
@@ -108,4 +108,10 @@ export const PASSPORT_URL = {
   [Environment.PRODUCTION]: 'https://passport.immutable.com/',
 };
 
+export const IMAGE_RESIZER_URL = {
+  [ENV_DEVELOPMENT]: 'https://image-resizer-cache.dev.immutable.com',
+  [Environment.SANDBOX]: 'https://image-resizer-cache.dev.immutable.com',
+  [Environment.PRODUCTION]: 'https://image-resizer-cache.prod.immutable.com',
+};
+
 export const WITHDRAWAL_CLAIM_GAS_LIMIT = 91000;