fix: [GPR-594] Updates to cloud image component image resizer url bas…

…ed on environment (#1684)
immutable · Apr 19, 2024 · fce0828 · fce0828
1 parent a48e2b9
commit fce0828
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;