diff --git a/packages/checkout/widgets-lib/src/components/NotEnoughGas/NotEnoughGas.tsx b/packages/checkout/widgets-lib/src/components/NotEnoughGas/NotEnoughGas.tsx index 4b5f505763..202eb6a67c 100644 --- a/packages/checkout/widgets-lib/src/components/NotEnoughGas/NotEnoughGas.tsx +++ b/packages/checkout/widgets-lib/src/components/NotEnoughGas/NotEnoughGas.tsx @@ -3,30 +3,47 @@ import { Drawer, Box, Button, FramedImage, Heading, Logo, } from '@biom3/react'; import { useCallback, useState } from 'react'; +import { ETH_TOKEN_SYMBOL } from 'lib'; import { containerStyles, contentTextStyles, actionButtonStyles, actionButtonContainerStyles, logoContainerStyles, + ethLogoStyles, + imxLogoStyles, } from './NotEnoughGasStyles'; import { text } from '../../resources/text/textConfig'; type NotEnoughGasProps = { - onCloseDrawer?: () => void; visible?: boolean; showHeaderBar?: boolean; walletAddress: string; showAdjustAmount: boolean; + tokenSymbol: string; + onCloseDrawer?: () => void; + onAddCoinsClick?: () => void; }; export function NotEnoughGas({ - onCloseDrawer, visible, showHeaderBar, walletAddress, showAdjustAmount, -}: NotEnoughGasProps) { + onCloseDrawer, + visible, + showHeaderBar, + walletAddress, + showAdjustAmount, + tokenSymbol, + onAddCoinsClick, +}: +NotEnoughGasProps) { const { content, buttons } = text.drawers.notEnoughGas; const [isCopied, setIsCopied] = useState(false); + const ethLogo = 'https://design-system.immutable.com/hosted-for-ds/currency-icons/currency--eth.svg'; + const imxLogo = 'https://design-system.immutable.com/hosted-for-ds/currency-icons/currency--imx.svg'; + const heading = tokenSymbol === ETH_TOKEN_SYMBOL ? `${content.eth.heading}` : `${content.imx.heading}`; + const body = tokenSymbol === ETH_TOKEN_SYMBOL ? `${content.eth.body}` : `${content.imx.body}`; + const handleCopy = useCallback(() => { if (walletAddress && walletAddress !== '') { navigator.clipboard.writeText(walletAddress); @@ -49,45 +66,55 @@ export function NotEnoughGas({ - {content.heading} + {heading} - {content.body} + {body} {showAdjustAmount && ( - + )} - + { + tokenSymbol === ETH_TOKEN_SYMBOL + ? ( + + ) + : ( + + ) + }