From da2f3f306df195b4d98db05ac02e1482bdf13a83 Mon Sep 17 00:00:00 2001 From: Mikhala <122326421+imx-mikhala@users.noreply.github.com> Date: Thu, 14 Dec 2023 13:05:38 +0800 Subject: [PATCH] WT-1934 Not enough gas drawer (#1284) --- .../components/NotEnoughGas/NotEnoughGas.tsx | 85 ++++++++++++------- .../NotEnoughGas/NotEnoughGasStyles.tsx | 12 +++ .../src/resources/text/textConfig.ts | 11 ++- .../src/views/top-up/TopUpView.tsx | 10 ++- .../src/widgets/bridge/BridgeWidget.tsx | 22 ++++- .../widgets/bridge/components/BridgeForm.tsx | 32 +++++-- .../src/widgets/on-ramp/OnRampWidget.tsx | 18 ++-- .../src/widgets/swap/SwapWidget.tsx | 18 ++-- .../src/widgets/wallet/WalletWidget.tsx | 18 ++-- .../widgets/wallet/views/WalletBalances.tsx | 1 + .../ui/marketplace-orchestrator/MainPage.tsx | 8 ++ 11 files changed, 169 insertions(+), 66 deletions(-) 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 + ? ( + + ) + : ( + + ) + }