wip

components/Credit/Address.tsx

@@ -0,0 +1,177 @@
+import React, { ChangeEvent, useCallback, useEffect, useState } from 'react';
+import { type Address, isAddress } from 'viem';
+import ContentPasteIcon from '@mui/icons-material/ContentPaste';
+import {
+  Avatar,
+  Box,
+  Button,
+  IconButton,
+  Input,
+  Radio,
+  Step,
+  StepContent,
+  StepLabel,
+  Stepper,
+  Typography,
+} from '@mui/material';
+import Link from 'next/link';
+import { formatWallet } from '../../utils/utils';
+import { App } from '.';
+
+type Props = {
+  value?: Address;
+  app: App;
+  onNextStep: () => void;
+  onChange: (a?: Address) => void;
+};
+
+const Address = ({ value, app, onNextStep, onChange }: Props) => {
+  const [hasOpenedApp, setHasOpenedApp] = useState(false);
+  const [address, setAddress] = useState<Address | undefined>();
+  const [pasteButtonSupported, setPasteButtonSupported] = useState(false);
+
+  useEffect(() => {
+    async function checkClipboardSupport() {
+      if (!navigator.clipboard) return;
+      try {
+        setPasteButtonSupported(!!(await navigator.clipboard.readText()));
+      } catch (e) {
+        setPasteButtonSupported(false);
+      }
+    }
+    checkClipboardSupport();
+  }, []);
+
+  useEffect(() => setAddress(value), [value]);
+
+  useEffect(() => {
+    onChange(localStorage.getItem(`${app.name}_usdtDepositAddress`) as Address);
+  }, [onChange, app.name]);
+
+  const handleChange = useCallback(
+    (value_?: string) => {
+      setAddress(value_ as Address);
+      localStorage.setItem(`${app.name}_usdtDepositAddress`, value_ || '');
+    },
+    [app.name],
+  );
+
+  const handleInputChange = useCallback(
+    ({ target: { value: value_ } }: ChangeEvent<HTMLInputElement>) => {
+      handleChange(value_);
+    },
+    [handleChange],
+  );
+
+  const handleChangeClick = useCallback(() => {
+    onChange(undefined);
+    handleChange(undefined);
+  }, [handleChange, onChange]);
+
+  const handleNext = useCallback(() => {
+    onChange(address);
+    onNextStep();
+  }, [address, onChange, onNextStep]);
+
+  return (
+    <>
+      <Box display="flex" flexDirection="column" gap={2}>
+        {value ? (
+          <Box display="flex" alignItems="center" border={1} borderRadius={1} borderColor="grey.300" p={1}>
+            <Radio checked />{' '}
+            <Typography variant="subtitle1" color="primary.main">
+              {formatWallet(address)}
+            </Typography>
+            <Button onClick={handleChangeClick} sx={{ ml: 'auto' }}>
+              Change
+            </Button>
+          </Box>
+        ) : (
+          <>
+            <Box display="flex" alignItems="center" gap={1}>
+              <Avatar
+                src={app.imgURL}
+                alt={app.name}
+                sx={({ palette }) => ({
+                  width: 32,
+                  height: 32,
+                  border: 1,
+                  borderColor: palette.mode === 'light' ? 'grey.300' : 'grey.200',
+                })}
+              />
+              <Typography fontSize={24} fontWeight={700}>
+                {app.name} receiving address
+              </Typography>
+            </Box>
+
+            <Typography fontSize={16} fontWeight={500}>
+              Search for the address in your app where you want to receive the borrowed funds, then copy and paste it
+              below.
+            </Typography>
+            <Typography fontWeight={700} fontSize={16}>
+              Where do I find the address?
+            </Typography>
+            <Stepper
+              activeStep={hasOpenedApp ? (address ? app.steps.length : app.steps.length - 1) : 0}
+              orientation="vertical"
+              sx={{
+                '& .MuiStepConnector-line': {
+                  display: 'none',
+                },
+              }}
+            >
+              <Step>
+                <StepLabel>
+                  <Link href={app.link} target="_blank" rel="noopener noreferrer">
+                    <Button
+                      variant="outlined"
+                      onClick={() => {
+                        setHasOpenedApp(true);
+                      }}
+                    >
+                      Open {app.name}
+                    </Button>
+                  </Link>
+                </StepLabel>
+                <StepContent></StepContent>
+              </Step>
+              {app.steps.map((step) => (
+                <Step key={step}>
+                  <StepLabel>{step}</StepLabel>
+                </Step>
+              ))}
+            </Stepper>
+            <Box display="flex" mb={2}>
+              <Input
+                value={address}
+                onChange={handleInputChange}
+                placeholder="Deposit Address"
+                fullWidth
+                error={address && !isAddress(address)}
+              />
+              {pasteButtonSupported && (
+                <IconButton
+                  onClick={() => {
+                    navigator.clipboard.readText().then((text) => {
+                      if (!isAddress(text)) return;
+                      handleChange(text);
+                      localStorage.setItem(`${app.name}_usdtDepositAddress`, text);
+                    });
+                  }}
+                >
+                  <ContentPasteIcon />
+                </IconButton>
+              )}
+            </Box>
+          </>
+        )}
+      </Box>
+
+      <Button variant="contained" onClick={handleNext} disabled={!address || !isAddress(address)} sx={{ mt: 'auto' }}>
+        Next
+      </Button>
+    </>
+  );
+};
+
+export default Address;

components/Credit/AppsList.tsx → components/Credit/Apps.tsx

@@ -1,11 +1,19 @@
 import React from 'react';
-import { apps } from '.';
 import { Avatar, Box, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography } from '@mui/material';
+import { ChevronRight } from '@mui/icons-material';
+import { apps } from '.';
+
+type Props = {
+  onNextStep: () => void;
+  onChange: (i: number) => void;
+};
 
-const AppsList = ({ nextStep, setWalletIndex }: { nextStep: () => void; setWalletIndex: (i: number) => void }) => {
+const Apps = ({ onNextStep, onChange }: Props) => {
   return (
     <Box>
-      <Typography fontSize={20} fontWeight={700}></Typography>
+      <Typography fontSize={20} fontWeight={700}>
+        Select card provider
+      </Typography>
       <List
         sx={{
           '& > :last-child': {
@@ -19,8 +27,8 @@ const AppsList = ({ nextStep, setWalletIndex }: { nextStep: () => void; setWalle
             disablePadding
             key={name}
             onClick={() => {
-              nextStep();
-              setWalletIndex(index);
+              onNextStep();
+              onChange(index);
             }}
             sx={({ palette }) => ({
               borderBottom: 1,
@@ -31,6 +39,7 @@ const AppsList = ({ nextStep, setWalletIndex }: { nextStep: () => void; setWalle
               <ListItemIcon>
                 <Avatar
                   src={imgURL}
+                  alt={name}
                   sx={({ palette }) => ({
                     width: 32,
                     height: 32,
@@ -40,6 +49,7 @@ const AppsList = ({ nextStep, setWalletIndex }: { nextStep: () => void; setWalle
                 />
               </ListItemIcon>
               <ListItemText primary={name} primaryTypographyProps={{ fontWeight: 400, fontSize: 16 }} />
+              <ChevronRight />
             </ListItemButton>
           </ListItem>
         ))}
@@ -48,4 +58,4 @@ const AppsList = ({ nextStep, setWalletIndex }: { nextStep: () => void; setWalle
   );
 };
 
-export default AppsList;
+export default Apps;