diff --git a/nym-wallet/src/components/Receive/ReceiveModal.tsx b/nym-wallet/src/components/Receive/ReceiveModal.tsx index 7a01cb5980..02e6e6a344 100644 --- a/nym-wallet/src/components/Receive/ReceiveModal.tsx +++ b/nym-wallet/src/components/Receive/ReceiveModal.tsx @@ -1,10 +1,11 @@ import React, { useContext } from 'react'; import { AppContext } from 'src/context'; -import { Box, Stack, SxProps } from '@mui/material'; +import { Box, Stack, SxProps, Typography, alpha, useTheme } from '@mui/material'; import QRCode from 'qrcode.react'; import { ClientAddress } from '@nymproject/react/client-address/ClientAddress'; import { ModalListItem } from '../Modals/ModalListItem'; import { SimpleModal } from '../Modals/SimpleModal'; +import { ArrowDownward } from '@mui/icons-material'; export const ReceiveModal = ({ onClose, @@ -16,51 +17,145 @@ export const ReceiveModal = ({ backdropProps?: object; }) => { const { clientDetails } = useContext(AppContext); + const theme = useTheme(); + + const isLightMode = theme.palette.mode === 'light'; + const highlightColor = theme.palette.nym.highlight; + const darkBgColor = theme.palette.background.default; + return ( - - - ) - } - /> - + + + Your address + + + + {clientDetails?.client_address && ( + + + + )} + + + + (t.palette.mode === 'dark' ? t.palette.background.default : 'rgba(251, 110, 78, 5%)'), - borderRadius: '0px 0px 16px 16px', + width: '100%', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + pt: 1, + pb: 5, + mt: 2, + bgcolor: isLightMode + ? alpha(highlightColor, 0.06) + : alpha(darkBgColor, 0.7), + borderRadius: '0 0 16px 16px', }} > - t.palette.mode === 'dark' - ? `1px solid ${t.palette.nym.nymWallet.modal.border}` - : `1px solid ${t.palette.nym.highlight}`, - bgcolor: (t) => (t.palette.mode === 'dark' ? 'transparent' : 'white'), - borderRadius: 2, - p: 3, + position: 'relative', + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + width: '200px', + height: '200px', }} > - {clientDetails && } + + + + {clientDetails && ( + + )} + - + + + Scan this QR code with a compatible wallet to receive NYM tokens + + ); -}; +}; \ No newline at end of file diff --git a/sdk/typescript/packages/react-components/src/components/currency/CurrencyFormField.tsx b/sdk/typescript/packages/react-components/src/components/currency/CurrencyFormField.tsx index 72646dc488..3d6331fe91 100644 --- a/sdk/typescript/packages/react-components/src/components/currency/CurrencyFormField.tsx +++ b/sdk/typescript/packages/react-components/src/components/currency/CurrencyFormField.tsx @@ -130,12 +130,6 @@ export const CurrencyFormField: FCWithChildren<{ InputProps={{ readOnly, required, - endAdornment: showCoinMark && ( - - {denom === 'nym' && } - {denom !== 'nym' && NYMT} - - ), ...{ min: MIN_VALUE, max: MAX_VALUE,