GRIN/nym
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(wallet-buy-nym): buy page new ui

Browse Source
This commit is contained in:
pierre
2022-11-22 16:47:22 +01:00
committed by durch
parent a33e848d6d
commit e9ba34ba52
1 changed files with 105 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nym-wallet/src/components/Buy/Tutorial.tsx
+105 -76
View File
@@ -1,90 +1,119 @@
import React, { useState } from 'react';
import { Box, Button, Stack, Typography, Grid, Link } from '@mui/material';
import { Button, Stack, Typography, Grid, Link } from '@mui/material';
import { Tune as TuneIcon, BorderColor as BorderColorIcon, Paid as PaidIcon } from '@mui/icons-material';
import { NymCard } from '../NymCard';
import { ModalDivider } from '../Modals/ModalDivider';
import { SignMessageModal } from './SignMessageModal';
const borderColor = 'rgba(141, 147, 153, 0.2)';
const TutorialStep = ({
step,
title,
text,
icon,
divider,
}: {
step: number;
title: string;
text: string | React.ReactNode;
icon: React.ReactNode;
divider?: boolean;
}) => (
<Grid
item
md={4}
pb={2}
pr={1}
sx={{
borderRight: divider ? `1px solid ${borderColor}` : null,
}}
>
<Stack gap={2}>
<Stack direction="row" gap={1} alignItems="center">
{icon}
<Typography fontWeight={600} fontSize="12px">
{`STEP ${step}`}
</Typography>
</Stack>
<Typography fontWeight={600} variant="h6">
{title}
</Typography>
{typeof text === 'string' ? (
<Typography sx={{ color: (t) => t.palette.nym.text.muted }}>{text}</Typography>
) : (
text
)}
</Stack>
</Grid>
);
export const Tutorial = () => {
const [showSignModal, setShowSignModal] = useState(false);
return (
<Box>
<NymCard borderless title="Buy NYM with BTC without KYC" sx={{ mt: 4 }}>
<Typography mb={2}>
Follow below 3 steps to quickly and easily to buy NYM tokens. You can purchase up to 1000 Swiss Francs per day
without KYC.
</Typography>
{showSignModal && <SignMessageModal onClose={() => setShowSignModal(false)} />}
<Stack direction="row" justifyContent="space-between" sx={{ mb: 3, mt: 2 }}>
<Box>
<Typography variant="h5" sx={{ fontWeight: 600, mb: 1 }}>
How to buy NYM with Bity?
</Typography>
<Typography variant="subtitle1">Follow these 3 steps below to quickly and easily buy NYM tokens</Typography>
</Box>
<Button variant="contained" color="primary" onClick={() => {}}>
<Grid
container
spacing={2}
mb={3}
mt={3}
sx={{
border: `1px solid ${borderColor}`,
borderRadius: '8px',
}}
>
<TutorialStep
step={1}
title="Define purchase details"
icon={<TuneIcon fontSize="small" />}
text={
<Typography sx={{ color: (t) => t.palette.nym.text.muted }}>
Click on{' '}
<Typography display="inline" fontWeight={600}>
Buy NYM
</Typography>{' '}
button and follow the steps in the browser window that opens. You will be asked for purchase details i.e.
amount, wallet address, etc.
</Typography>
}
divider
/>
<TutorialStep
step={2}
title="Sign a message with your Nym wallet"
icon={<BorderColorIcon fontSize="small" />}
text={
<Typography sx={{ color: (t) => t.palette.nym.text.muted }}>
When asked for signature, copy the message and sign it using{' '}
<Typography display="inline" fontWeight={600}>
Sign message
</Typography>{' '}
button bellow. Then copy and paste your signature back in the browser window.
</Typography>
}
divider
/>
<TutorialStep
step={3}
title="Make BTC tx and receive NYM"
icon={<PaidIcon fontSize="small" />}
text="Send BTC to the given address. When the transaction is confirmed your purchased NYM tokens will be
transfered in your wallet."
/>
</Grid>
<Stack direction="row" gap={2} justifyContent="flex-end" mt={5}>
<Button variant="outlined" size="large" onClick={() => {}}>
Sign message
</Button>
<Button variant="contained" size="large" onClick={() => {}}>
Buy Nym
</Button>
</Stack>
<Box sx={{ flexGrow: 1 }}>
<Grid container spacing={2}>
<Grid item md={4}>
<NymCard title="1. Define the purchase amount" sx={{ height: 440 }} sxTitle={{ fontSize: 16 }} borderless>
<ModalDivider />
<Typography>
Click on{' '}
<Typography display="inline" fontWeight={600}>
Buy NYM button to go to Bity’s website.
</Typography>{' '}
Select the amount and currency for your purchase. Follow the steps and provide the required info i.e.{' '}
<Typography display="inline" fontWeight={600}>
IBAN, wallet address, etc.
</Typography>
</Typography>
</NymCard>
</Grid>
<Grid item md={4}>
<NymCard
title="2. Sign a message with your Nym wallet"
sx={{ height: 440 }}
sxTitle={{ fontSize: 16 }}
borderless
>
<ModalDivider />
<Typography>
When asked for signature, copy Bity’s message and{' '}
{/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
<Link
component="button"
variant="body1"
sx={{ fontWeight: 600 }}
onClick={() => setShowSignModal(true)}
>
sign it using this link
</Link>
{'. '}
Then{' '}
<Typography display="inline" fontWeight={600}>
copy and paste your signature on Bity website
</Typography>{' '}
as shown above.
</Typography>
</NymCard>
</Grid>
<Grid item md={4}>
<NymCard
title="3. Transfer funds and receive NYM"
sx={{ height: 440 }}
sxTitle={{ fontSize: 16 }}
borderless
>
<ModalDivider />
<Typography>
Make the transfer to Bity’s address. Once Bity receives the amount and transaction is confirmed they
will{' '}
<Typography display="inline" fontWeight={600}>
deposit NYM tokens to your wallet.
</Typography>
</Typography>
</NymCard>
</Grid>
</Grid>
</Box>
</Box>
</NymCard>
);
};