Skip to content

Commit

Permalink
Merge pull request #103 from Mloweedgar/v1
Browse files Browse the repository at this point in the history 
feat: add a confirmation popup when transferring tokens
  • Loading branch information
@OlhaD
OlhaD authored Dec 27, 2023
2 parents 40a139e + 40d7d6b commit 59e5132
Show file tree
Hide file tree
Showing 3 changed files with 334 additions and 100 deletions.
230 changes: 130 additions & 100 deletions src/pages/SendTokens/SendTokensForm/SendTokensForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import SelectWallet from './SelectWallet';
import AddCircleIcon from '@mui/icons-material/AddCircle';
import CloseIcon from '@mui/icons-material/Close';
import { StyledBox, StyledButton } from './SendTokensFormStyled';
import ConfirmDialog from './confirmDialog/ConfirmDialog';

const SendTokensForm = (props) => {
const {
Expand All @@ -24,11 +25,26 @@ const SendTokensForm = (props) => {
const [createWalletErrorMessage, setCreateWalletErrorMessage] = useState('');

const [isSubmitBtnDisabled, setIsSubmitButtonDisabled] = useState(true);
const [showConfirmationDialog, setShowConfirmationDialog] = useState(false);

useEffect(() => {
isSubmitButtonDisabled();
}, [receiverWallet, senderWallet, showCreateWallet]);

const handleConfirmationDialogOpen = e => {
e.preventDefault();
setShowConfirmationDialog(true);
};

const handleConfirmationDialogClose = () => {
setShowConfirmationDialog(false);
};

const handleConfirmSubmit = () => {
handleSubmit();
handleConfirmationDialogClose();
};

const handleChangeSenderWallet = useCallback((wallet) => {
// sender wallet is not selected / was deselected
if (!wallet) {
Expand Down Expand Up @@ -85,8 +101,7 @@ const SendTokensForm = (props) => {
return true;
};

const handleSubmit = (e) => {
e.preventDefault();
const handleSubmit = () => {

const tokensAmount = tokensAmountRef.current.value;

Expand All @@ -112,105 +127,120 @@ const SendTokensForm = (props) => {
};

return (
<StyledBox>
<form onSubmit={handleSubmit}>
<Grid container spacing={8}>
<Grid item xs={6}>
<SelectWallet
wallet={senderWallet}
onChangeWallet={handleChangeSenderWallet}
label={'Sender Wallet'}
/>
</Grid>
<Grid item xs={6}></Grid>
<Grid item xs={6}>
<SelectWallet
wallet={receiverWallet}
onChangeWallet={handleChangeReceiverWallet}
label={'Receiver Wallet'}
createdWalletName={createdWalletName}
/>
</Grid>
<Grid item xs={4} sx={{ display: 'flex', alignItems: 'center' }}>
<a
onClick={() => setShowCreateWallet(true)}
style={{ color: 'green', cursor: 'pointer', marginLeft: '1rem' }}
>
+ Create Managed Wallet
</a>
</Grid>
<Grid item xs={2}></Grid>

{showCreateWallet && (
<>
<Grid item xs={4}>
<TextField
id="wallet-name"
label="Managed Wallet Name"
type="text"
required
error={createWalletError}
helperText={createWalletErrorMessage}
sx={{ width: '100%' }}
InputLabelProps={{
shrink: true,
}}
onChange={(event) =>
setCreateWalletError(!event.target.value)
}
inputRef={createWalletNameRef}
/>
</Grid>
<Grid item xs={1}>
{/* Create wallet */}
<IconButton
aria-label="delete"
color="primary"
onClick={handleCreateWallet}
>
<AddCircleIcon fontSize="large" />
</IconButton>
</Grid>
<Grid item xs={1}>
{/* Cancel creating wallet */}
<IconButton
aria-label="delete"
color="primary"
onClick={() => {
setShowCreateWallet(false);
setCreateWalletError(false);
}}
>
<CloseIcon fontSize="large" />
</IconButton>
</Grid>
<Grid item xs={6}></Grid>
</>
)}
<Grid item xs={12}>
<TextField
id="token-amount"
label="Token Amount"
type="number"
InputProps={{ inputProps: { min: 0, max: 10000 } }}
defaultValue={1}
inputRef={tokensAmountRef}
onChange={() => isSubmitButtonDisabled()}
/>
</Grid>
<Grid item xs={12}>
<StyledButton
type="submit"
variant="contained"
color="primary"
disabled={isSubmitBtnDisabled}
>
Submit
</StyledButton>
<>
<StyledBox>
<form onSubmit={handleConfirmationDialogOpen}>
<Grid container spacing={8}>
<Grid item xs={6}>
<SelectWallet
wallet={senderWallet}
onChangeWallet={handleChangeSenderWallet}
label={'Sender Wallet'}
/>
</Grid>
<Grid item xs={6}></Grid>
<Grid item xs={6}>
<SelectWallet
wallet={receiverWallet}
onChangeWallet={handleChangeReceiverWallet}
label={'Receiver Wallet'}
createdWalletName={createdWalletName}
/>
</Grid>
<Grid item xs={4} sx={{ display: 'flex', alignItems: 'center' }}>
<a
onClick={() => setShowCreateWallet(true)}
style={{
color: 'green',
cursor: 'pointer',
marginLeft: '1rem',
}}
>
+ Create Managed Wallet
</a>
</Grid>
<Grid item xs={2}></Grid>

{showCreateWallet && (
<>
<Grid item xs={4}>
<TextField
id="wallet-name"
label="Managed Wallet Name"
type="text"
required
error={createWalletError}
helperText={createWalletErrorMessage}
sx={{ width: '100%' }}
InputLabelProps={{
shrink: true,
}}
onChange={(event) =>
setCreateWalletError(!event.target.value)
}
inputRef={createWalletNameRef}
/>
</Grid>
<Grid item xs={1}>
{/* Create wallet */}
<IconButton
aria-label="delete"
color="primary"
onClick={handleCreateWallet}
>
<AddCircleIcon fontSize="large" />
</IconButton>
</Grid>
<Grid item xs={1}>
{/* Cancel creating wallet */}
<IconButton
aria-label="delete"
color="primary"
onClick={() => {
setShowCreateWallet(false);
setCreateWalletError(false);
}}
>
<CloseIcon fontSize="large" />
</IconButton>
</Grid>
<Grid item xs={6}></Grid>
</>
)}
<Grid item xs={12}>
<TextField
id="token-amount"
label="Token Amount"
type="number"
InputProps={{ inputProps: { min: 0, max: 10000 } }}
defaultValue={1}
inputRef={tokensAmountRef}
onChange={() => isSubmitButtonDisabled()}
/>
</Grid>
<Grid item xs={12}>
<StyledButton
type="submit"
variant="contained"
color="primary"
disabled={isSubmitBtnDisabled}
>
Submit
</StyledButton>
</Grid>
</Grid>
</Grid>
</form>
</StyledBox>
</form>
</StyledBox>
<ConfirmDialog
open={showConfirmationDialog}
onClose={handleConfirmationDialogClose}
onConfirm={handleConfirmSubmit}
senderWallet={senderWallet}
receiverWallet={receiverWallet}
tokensAmount={tokensAmountRef}

/>
</>
);
};

Expand Down
94 changes: 94 additions & 0 deletions src/pages/SendTokens/SendTokensForm/confirmDialog/ConfirmDialog.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
import React from 'react';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogContent from '@mui/material/DialogContent';
import Typography from '@mui/material/Typography';
import { AvatarSvgIcon, ArrowSvgIcon, TokenICon } from './SvgIcon';
import { Box, Stack, IconButton } from '@mui/material';


// Consolidated styles for reuse throughout the component
const styles = {
TokenICon: {
margin: '0',
height: '50px',
width: '50px'
},
avatarIcon: {
borderRadius: '50%',
backgroundColor: 'rgba(128, 128, 128, 0.438)',
width: '50px',
alignItems: 'center',
justifyContent: 'center'
},
walletInfo: {
fontSize: '15px',
fontWeight: '500'
},
dialogContent: {
padding: '20px 50px 50px 50px'
},
questionText: {
fontSize: '14px',
fontWeight: '700'
},
actionStack: {
position: 'absolute',
bottom: 0,
right: '50px',
margin: '16px',
marginBottom: '20px'
}
};

// Component to render a token icon at a specific position
const TokenIConPositioned = ({ top, left, zIndex }) => (
<div style={{ position: 'absolute', top, left, zIndex }}>
<TokenICon sx={styles.TokenICon} />
</div>
);

// Component to display wallet information
const WalletInfo = ({ wallet }) => (
<Stack direction="row" alignItems="center" style={{ justifyContent: 'spaceAround', gap: '4px' }}>
<Stack direction="row" alignItems="center" sx={styles.avatarIcon}>
<AvatarSvgIcon />
</Stack>
<Typography variant="p" sx={styles.walletInfo}>{wallet}</Typography>
</Stack>
);

export default function ConfirmDialog({ open, onConfirm, onClose, receiverWallet, senderWallet, tokensAmount }) {
return (
<Dialog open={open} onClose={onClose} maxWidth="lg">
<DialogContent sx={styles.dialogContent}>
<Typography variant="p" sx={styles.questionText}>
Are you sure to make this transfer?
</Typography>

<TokenIConPositioned top='34%' left='42%' zIndex={2} />
<TokenIConPositioned top='30%' left='40%' zIndex={1} />
<TokenIConPositioned top='37%' left='39%' zIndex={3} />

<Box mt={15} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
<Stack direction="row" spacing={6} mt={40}>
<WalletInfo wallet={senderWallet} />
<IconButton disableRipple>
<ArrowSvgIcon />
</IconButton>
<WalletInfo wallet={receiverWallet} />
</Stack>

<Typography variant="p" mt={0} mb={10} style={{ color: 'rgb(110, 175, 13)', fontWeight: '500' }}>
{tokensAmount.current.value}
</Typography>

<Stack direction="row" mb={10} spacing={2} sx={styles.actionStack}>
<Button variant="outlined" sx={{ color: 'rgb(110, 175, 13)' }} onClick={onClose}>No</Button>
<Button variant="contained" sx={{ backgroundColor: 'rgb(110, 175, 13)' }} onClick={onConfirm}>Yes</Button>
</Stack>
</Box>
</DialogContent>
</Dialog>
);
}
Loading

0 comments on commit 59e5132

Please sign in to comment.