feat(wallet-buy): tutorial

nym-wallet/src/components/Buy/Tutorial.stories.tsx

@@ -1,10 +1,15 @@
 import React from 'react';
 
 import { Tutorial } from './Tutorial';
+import { MockBuyContextProvider } from '../../context/mocks/buy';
 
 export default {
-  title: 'Buy/Page',
+  title: 'Buy/Tutorial',
   component: Tutorial,
 };
 
-export const BuyPage = () => <Tutorial />;
+export const TutorialPage = () => (
+  <MockBuyContextProvider>
+    <Tutorial />
+  </MockBuyContextProvider>
+);

nym-wallet/src/components/Buy/Tutorial.tsx

@@ -1,24 +1,90 @@
-import React from 'react';
-import { Box, Button, Stack, Typography } from '@mui/material';
+import React, { useState } from 'react';
+import { Box, Button, Stack, Typography, Grid, Link } from '@mui/material';
 import { NymCard } from '../NymCard';
+import { ModalDivider } from '../Modals/ModalDivider';
+import { SignMessageModal } from './SignMessageModal';
 
-export const Tutorial = () => (
-  <Box>
-    <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>
+export const Tutorial = () => {
+  const [showSignModal, setShowSignModal] = useState(false);
+
+  return (
+    <Box>
+      {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={() => {}}>
+          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>
-      <Button variant="contained" color="primary" onClick={() => {}}>
-        Buy Nym
-      </Button>
-    </Stack>
-    <Stack direction="row" alignItems="center" justifyContent="space-between" gap={1}>
-      <NymCard title="1. Define the purchase amount">Card 1</NymCard>
-      <NymCard title="2. Sign a message with your Nym wallet">Card 2</NymCard>
-      <NymCard title="3. Transfer funds and receive NYM">Card 3</NymCard>
-    </Stack>
-  </Box>
-);
+    </Box>
+  );
+};

nym-wallet/src/components/Nav.tsx

@@ -1,7 +1,14 @@
 import React, { useState, useContext } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { List, ListItem, ListItemIcon, ListItemText } from '@mui/material';
-import { AccountBalanceWalletOutlined, ArrowBack, ArrowForward, Description, Settings } from '@mui/icons-material';
+import {
+  AccountBalanceWalletOutlined,
+  ArrowBack,
+  ArrowForward,
+  Description,
+  Settings,
+  Toll,
+} from '@mui/icons-material';
 import { AppContext } from '../context/main';
 import { Delegate, Bonding } from '../svg-icons';
 
@@ -57,7 +64,7 @@ export const Nav = () => {
     {
       label: 'Buy',
       route: '/buy',
-      Icon: Bonding,
+      Icon: Toll,
       onClick: () => navigate('/buy'),
     },
   ]);

nym-wallet/src/components/NymCard.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Card, CardContent, CardHeader } from '@mui/material';
+import { Card, CardContent, CardHeader, SxProps } from '@mui/material';
 import { styled, Theme } from '@mui/material/styles';
 import { Title } from './Title';
 
@@ -18,15 +18,17 @@ export const NymCard: React.FC<{
   noPadding?: boolean;
   borderless?: boolean;
   dataTestid?: string;
-}> = ({ title, subheader, Action, Icon, noPadding, borderless, children, dataTestid }) => (
-  <Card variant="outlined" sx={{ overflow: 'auto', ...(borderless && { border: 'none', dropShadow: 'none' }) }}>
+  sx?: SxProps;
+  sxTitle?: SxProps;
+}> = ({ title, subheader, Action, Icon, noPadding, borderless, children, dataTestid, sx, sxTitle }) => (
+  <Card variant="outlined" sx={{ overflow: 'auto', ...(borderless && { border: 'none', dropShadow: 'none' }), ...sx }}>
     <CardHeader
       sx={{
         p: 3,
-        color: 'text.primary',
+        color: (theme: Theme) => theme.palette.text.primary,
         '& .MuiCardHeader-title h5': { fontSize: '1.25rem' },
       }}
-      title={<Title title={title} Icon={Icon} />}
+      title={<Title title={title} Icon={Icon} sx={sxTitle} />}
       subheader={subheader}
       data-testid={dataTestid || title}
       subheaderTypographyProps={{ variant: 'subtitle1' }}

nym-wallet/src/components/Title.tsx

@@ -1,10 +1,14 @@
 import React from 'react';
-import { Box, Typography } from '@mui/material';
+import { Box, SxProps, Typography } from '@mui/material';
 
-export const Title: React.FC<{ title: string | React.ReactNode; Icon?: React.ReactNode }> = ({ title, Icon }) => (
+export const Title: React.FC<{ title: string | React.ReactNode; Icon?: React.ReactNode; sx?: SxProps }> = ({
+  title,
+  Icon,
+  sx,
+}) => (
   <Box width="100%" display="flex" alignItems="center">
     {Icon}
-    <Typography width="100%" variant="h5" sx={{ fontWeight: 600 }}>
+    <Typography width="100%" variant="h5" sx={{ fontWeight: 600, ...sx }}>
       {title}
     </Typography>
   </Box>

nym-wallet/src/pages/buy/index.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { Tutorial } from '../../components/Buy/Tutorial';
+import { MockBuyContextProvider } from '../../context/mocks/buy';
+
+export default {
+  title: 'Buy/Page',
+  component: Tutorial,
+};
+
+export const BuyPage = () => (
+  <MockBuyContextProvider>
+    <Tutorial />
+  </MockBuyContextProvider>
+);