import { Body, Drawer, Box, Button, Heading, CloudImage, } from '@biom3/react'; import { useCallback, useState } from 'react'; import { Environment } from '@imtbl/config'; import { useTranslation } from 'react-i18next'; import { ETH_TOKEN_SYMBOL } from '../../lib'; import { getRemoteImage } from '../../lib/utils'; import { containerStyles, headingTextStyles, bodyTextStyles, actionButtonStyles, actionButtonContainerStyles, } from './NotEnoughGasStyles'; type NotEnoughGasProps = { environment: Environment; visible?: boolean; walletAddress: string; tokenSymbol: string; onCloseDrawer?: () => void; onAddCoinsClick?: () => void; }; export function NotEnoughGas({ environment, onCloseDrawer, visible, walletAddress, tokenSymbol, onAddCoinsClick, }: NotEnoughGasProps) { const { t } = useTranslation(); const [isCopied, setIsCopied] = useState(false); const notEnoughEth = getRemoteImage(environment, '/notenougheth.svg'); const notEnoughImx = getRemoteImage(environment, '/notenoughimx.svg'); const heading = t('drawers.notEnoughGas.content.heading', { token: tokenSymbol.toUpperCase(), }); const body = t('drawers.notEnoughGas.content.body', { token: tokenSymbol.toUpperCase(), }); const handleCopy = useCallback(() => { if (walletAddress && walletAddress !== '') { navigator.clipboard.writeText(walletAddress); } setIsCopied(true); setTimeout(() => { setIsCopied(false); }, 3000); }, [walletAddress]); return ( )} /> {heading} {body} {tokenSymbol === ETH_TOKEN_SYMBOL ? ( ) : ( )} ); }