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,