chore: UI verification step separate (#147)

* feat: add switch component

* chore: add verify step

* chore: move form-step folder

* chore: add text component

* chore: add nfa step to context

* chore: add text on Verify NFA Step

ui/src/components/core/button/button.styles.ts

@@ -161,6 +161,7 @@ export const StyledButton = styled('button', {
   verticalAlign: 'middle',
   userSelect: 'none',
   fontWeight: '$normal',
+  width: 'auto',
   '&:disabled': {
     cursor: 'not-allowed',
     opacity: '0.4',

ui/src/components/core/index.ts

@@ -4,3 +4,5 @@ export * from './icon';
 export * from './input';
 export * from './avatar';
 export * from './separator.styles';
+export * from './text';
+export * from './switch';

ui/src/components/core/switch/index.ts

@@ -0,0 +1 @@
+export * from './switch';

ui/src/components/core/switch/switch.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Switch as SwitchComponent } from '@headlessui/react';
+
+type SwitchProps = {
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+};
+
+export const Switch: React.FC<SwitchProps> = ({ checked, onChange }) => (
+  <SwitchComponent
+    checked={checked}
+    onChange={onChange}
+    className={`${checked ? 'bg-green4' : 'bg-red4'}
+          relative inline-flex h-[32px] w-[74px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75`}
+  >
+    <span
+      className={`absolute top-1 ${
+        checked ? 'right-3 text-green11' : 'text-red11 left-4'
+      }`}
+    >
+      {checked ? 'Yes' : 'No'}
+    </span>
+    <span
+      aria-hidden="true"
+      className={`${
+        checked ? 'bg-green11 translate-x-0' : 'bg-red11 translate-x-[2.625rem]'
+      }
+            absolute top-1 left-1 pointer-events-none inline-block h-[20px] w-[20px] transform rounded-full shadow-lg ring-0 transition duration-200 ease-in-out`}
+    />
+  </SwitchComponent>
+);

ui/src/components/core/text/index.ts

@@ -0,0 +1 @@
+export * from './text.styles';

ui/src/components/core/text/text.styles.ts

@@ -0,0 +1,5 @@
+import { dripStitches } from '@/theme';
+
+const { styled } = dripStitches;
+
+export const Text = styled('span');

ui/src/views/mint/form-step/fields/verify-nfa-field.tsx

@@ -1,29 +0,0 @@
-import { Card, Flex, Grid } from '@/components';
-import { Mint } from '@/views/mint/mint.context';
-
-export const VerifyNFAField = () => {
-  const { verifyNFA, setVerifyNFA } = Mint.useContext();
-
-  const handleVerifyNFAChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setVerifyNFA(e.target.checked);
-  };
-
-  return (
-    <Card.Text css={{ p: '$4', textAlign: 'left' }}>
-      {/* TODO replace for grid */}
-      <Flex css={{ gap: '$10' }}>
-        <Grid css={{ rowGap: '$1h' }}>
-          <span>Verify NFA</span>
-          <span>
-            Add Fleek as a controller to be verified, learn more here.
-          </span>
-        </Grid>
-        <input
-          type="checkbox"
-          checked={verifyNFA}
-          onChange={handleVerifyNFAChange}
-        />
-      </Flex>
-    </Card.Text>
-  );
-};

ui/src/views/mint/mint-stepper.tsx

@@ -1,46 +1,38 @@
 import { Stepper } from '@/components';
-import { FormStep } from './form-step';
 import { MintPreview } from './preview-step/mint-preview';
 import { GithubStep } from './github-step';
 import { MintStep } from './mint-step';
 import { WalletStep } from './wallet-step';
-import { Mint } from './mint.context';
-import { NftMinted } from './nft-minted';
+import { NFAStep } from './nfa-step';
 
 export const MintStepper = () => {
-  const { sucessMint } = Mint.useContext();
+  return (
+    <Stepper.Root initialStep={1}>
+      <Stepper.Container>
+        <Stepper.Step>
+          <MintStep header="Connect GitHub and select repository">
+            <GithubStep />
+          </MintStep>
+        </Stepper.Step>
 
-  if (!sucessMint) {
-    return (
-      <Stepper.Root initialStep={1}>
-        <Stepper.Container>
-          <Stepper.Step>
-            <MintStep header="Connect GitHub and select repository">
-              <GithubStep />
-            </MintStep>
-          </Stepper.Step>
+        <Stepper.Step>
+          <MintStep header="Connect your Ethereum Wallet to mint an NFA">
+            <WalletStep />
+          </MintStep>
+        </Stepper.Step>
 
-          <Stepper.Step>
-            <MintStep header="Connect your Ethereum Wallet to mint an NFA">
-              <WalletStep />
-            </MintStep>
-          </Stepper.Step>
+        <Stepper.Step>
+          <MintStep header="Finalize a few key things for your NFA">
+            <NFAStep />
+          </MintStep>
+        </Stepper.Step>
 
-          <Stepper.Step>
-            <MintStep header="Finalize a few key things for your NFA">
-              <FormStep />
-            </MintStep>
-          </Stepper.Step>
-
-          <Stepper.Step>
-            <MintStep header="Review your NFA and mint it on Polygon">
-              <MintPreview />
-            </MintStep>
-          </Stepper.Step>
-        </Stepper.Container>
-      </Stepper.Root>
-    );
-  }
-
-  return <NftMinted />;
+        <Stepper.Step>
+          <MintStep header="Review your NFA and mint it on Polygon">
+            <MintPreview />
+          </MintStep>
+        </Stepper.Step>
+      </Stepper.Container>
+    </Stepper.Root>
+  );
 };

ui/src/views/mint/mint.context.tsx

@@ -10,6 +10,7 @@ export type MintContext = {
   branchName: DropdownItem; //get value from DropdownItem to mint
   commitHash: string;
   githubStep: number;
+  nfaStep: number;
   appName: string;
   appDescription: string;
   appLogo: string;
@@ -18,6 +19,7 @@ export type MintContext = {
   domain: string;
   verifyNFA: boolean;
   setGithubStep: (step: number) => void;
+  setNfaStep: (step: number) => void;
   setSelectedUserOrg: (userOrg: ComboboxItem) => void;
   setRepositoryName: (repo: GithubState.Repository) => void;
   setBranchName: (branch: DropdownItem) => void;
@@ -55,6 +57,7 @@ export abstract class Mint {
     const [githubStep, setGithubStepContext] = useState(1);
 
     //NFA Details
+    const [nfaStep, setNfaStep] = useState(1);
     const [appName, setAppName] = useState('');
     const [appDescription, setAppDescription] = useState('');
     const [appLogo, setAppLogo] = useState('');
@@ -77,6 +80,7 @@ export abstract class Mint {
           branchName,
           commitHash,
           githubStep,
+          nfaStep,
           appName,
           appDescription,
           appLogo,
@@ -86,6 +90,7 @@ export abstract class Mint {
           verifyNFA,
           setSelectedUserOrg,
           setGithubStep,
+          setNfaStep,
           setRepositoryName,
           setBranchName,
           setCommitHash,

ui/src/views/mint/nfa-step/form-step/fields/app-description-field.tsx

@@ -1,5 +1,5 @@
 import { Form } from '@/components';
-import { Mint } from '../../mint.context';
+import { Mint } from '../../../mint.context';
 
 export const AppDescriptionField = () => {
   const { appDescription, setAppDescription } = Mint.useContext();

ui/src/views/mint/nfa-step/form-step/fields/app-name-field.tsx

@@ -1,5 +1,5 @@
 import { Form } from '@/components';
-import { Mint } from '../../mint.context';
+import { Mint } from '../../../mint.context';
 
 export const AppNameField = () => {
   const { appName, setAppName } = Mint.useContext();

ui/src/views/mint/nfa-step/form-step/fields/index.ts

@@ -2,4 +2,3 @@ export * from './logo-field';
 export * from './app-name-field';
 export * from './app-description-field';
 export * from './ens-domain-field';
-export * from './verify-nfa-field';

ui/src/views/mint/nfa-step/form-step/fields/logo-field/color-picker.tsx

@@ -2,7 +2,7 @@ import { Card, Flex } from '@/components';
 import { useRef } from 'react';
 // @ts-ignore
 import ColorThief from 'colorthief';
-import { Mint } from '../../../mint.context';
+import { Mint } from '../../../../mint.context';
 
 export const ColorPicker = () => {
   const { appLogo, logoColor, setLogoColor } = Mint.useContext();

ui/src/views/mint/nfa-step/form-step/fields/logo-field/logo-field.tsx

@@ -1,6 +1,6 @@
 import { Flex, Form } from '@/components';
 import { useState } from 'react';
-import { Mint } from '../../../mint.context';
+import { Mint } from '../../../../mint.context';
 import { fileToBase64, validateFileSize } from '../../form.utils';
 import { ColorPicker } from './color-picker';
 

ui/src/views/mint/nfa-step/form-step/mint-form.tsx

@@ -1,19 +1,18 @@
 import { Button, Card, Grid, Stepper } from '@/components';
-import { Mint } from '../mint.context';
+import { Mint } from '../../mint.context';
 import {
   LogoField,
   AppDescriptionField,
   AppNameField,
   EnsDomainField,
-  VerifyNFAField,
 } from './fields';
-import { MintCardHeader } from '../mint-card';
+import { MintCardHeader } from '../../mint-card';
 import { useAccount } from 'wagmi';
 import { parseColorToNumber } from './form.utils';
 
-export const FormStep = () => {
+export const MintFormStep = () => {
   const { address } = useAccount();
-  const { prevStep, nextStep } = Stepper.useContext();
+  const { nextStep } = Stepper.useContext();
   const {
     appName,
     appDescription,
@@ -25,6 +24,7 @@ export const FormStep = () => {
     logoColor,
     repositoryName,
     verifyNFA,
+    setNfaStep,
   } = Mint.useContext();
   const { setArgs } = Mint.useTransactionContext();
 
@@ -48,9 +48,13 @@ export const FormStep = () => {
     nextStep();
   };
 
+  const handlePrevStep = () => {
+    setNfaStep(1);
+  };
+
   return (
     <Card.Container css={{ width: '$107h' }}>
-      <MintCardHeader title="NFA Details" onClickBack={prevStep} />
+      <MintCardHeader title="NFA Details" onClickBack={handlePrevStep} />
       <Card.Body>
         <Grid
           css={{
@@ -62,7 +66,6 @@ export const FormStep = () => {
             <AppDescriptionField />
             <LogoField />
             <EnsDomainField />
-            <VerifyNFAField />
           </Grid>
           <Button
             disabled={!appName || !appDescription || !domain}

ui/src/views/mint/nfa-step/index.ts

@@ -0,0 +1 @@
+export * from './nfa-step';

ui/src/views/mint/nfa-step/nfa-step.tsx

@@ -0,0 +1,15 @@
+import { Mint } from '../mint.context';
+import { MintFormStep } from './form-step';
+import { VerifyNFAStep } from './verify-step';
+
+export const NFAStep = () => {
+  const { nfaStep } = Mint.useContext();
+
+  switch (nfaStep) {
+    default:
+    case 1:
+      return <VerifyNFAStep />;
+    case 2:
+      return <MintFormStep />;
+  }
+};

ui/src/views/mint/nfa-step/verify-step/index.ts

@@ -0,0 +1 @@
+export * from './verify-nfa-step';

ui/src/views/mint/nfa-step/verify-step/verify-nfa-step.tsx

@@ -0,0 +1,45 @@
+import { Button, Card, Flex, Stepper, Switch, Text } from '@/components';
+import { MintCardHeader } from '../../mint-card';
+import { Mint } from '../../mint.context';
+
+export const VerifyNFAStep = () => {
+  const { prevStep } = Stepper.useContext();
+  const { verifyNFA, setVerifyNFA, setNfaStep } = Mint.useContext();
+
+  const handleNextStep = () => {
+    setNfaStep(2);
+  };
+
+  return (
+    <Card.Container css={{ width: '$107h' }}>
+      <MintCardHeader title="Verify NFA" onClickBack={prevStep} />
+      <Card.Body>
+        <Flex css={{ flexDirection: 'column', gap: '$6' }}>
+          <Text css={{ color: '$slate11', fontSize: '$sm' }}>
+            Below you can allow Fleek to be added as a controller to your NFA.
+            This will allow Fleek to automatically verify your NFA and update
+            builds and other metadata. It will not allow Fleek to transfer or
+            burn your NFT. You can change this setting later on your NFA but
+            adding it now will save you a transaction in the future. We
+            recommend it so that your users can get verified NFAs.
+          </Text>
+          <Card.Text
+            css={{
+              p: '$4',
+              textAlign: 'left',
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+              borderRadius: '$lg',
+            }}
+          >
+            <Text css={{ color: '$slate12' }}>Verify NFA</Text>
+            <Switch checked={verifyNFA} onChange={setVerifyNFA} />
+          </Card.Text>
+          <Button colorScheme="blue" variant="solid" onClick={handleNextStep}>
+            Continue
+          </Button>
+        </Flex>
+      </Card.Body>
+    </Card.Container>
+  );
+};

ui/tailwind.config.js

@@ -10,10 +10,17 @@ module.exports = {
         slate7: 'rgba(58, 63, 66, 1)',
         slate11: 'rgba(155, 161, 166, 1)',
         slate12: 'rgba(236, 237, 238, 1)',
+        green4: 'rgba(17, 49, 35, 1)',
+        green11: 'rgba(76, 195, 138, 1)',
+        red4: 'rgba(72, 26, 29, 1)',
+        red11: 'rgba(255, 99, 105, 1)',
       },
       borderRadius: {
         xhl: '1.25rem',
       },
+      space: {
+        '1h': '0.375rem',
+      },
     },
   },
   plugins: [],