From cda25b9a3bca06a241bab6c78a1fe4dec485c4ba Mon Sep 17 00:00:00 2001 From: Camila Sosa Morales Date: Wed, 10 May 2023 11:44:40 -0300 Subject: [PATCH] feat: UI refactor card header (#250) * reactor: refactor card header * feat: custom card component * chore: animation on create ap success card * chore: remove old file * chore: global responsiveness (#251) * Update ui/src/components/card/card.tsx Co-authored-by: Felipe Mendes --------- Co-authored-by: Felipe Mendes --- ui/src/components/card/card.styles.ts | 6 +- ui/src/components/card/card.tsx | 24 +--- .../card/custom-card/custom-card.styles.ts | 18 +++ .../card/custom-card/custom-card.tsx | 65 +++++++++++ ui/src/components/card/custom-card/index.ts | 1 + ui/src/components/card/index.ts | 1 + ui/src/components/layout/page/page.styles.ts | 7 +- .../resolved-address.styles.ts | 3 +- ui/src/theme/foundations/media.ts | 1 + .../ap-form-step/create-ap-form.tsx | 34 ++---- .../ap-record-step/ap-record-body.tsx | 9 +- .../ap-record-step/ap-record-header.tsx | 24 +--- .../ap-record-step/ap-record-step.tsx | 6 +- .../views/access-point/create-ap-preview.tsx | 34 ++---- .../create-ap-success.styles.ts | 13 +++ .../create-ap-success.tsx | 29 ++--- .../access-point/create-ap-success/index.ts | 1 + .../display-text/display-text.styles.ts | 5 +- .../display-text/display-text.tsx | 2 +- .../github-connect/github-connect-step.tsx | 19 ++-- .../repo-configuration-header.tsx | 4 +- .../repo-configuration.tsx | 6 +- .../github-repository-selection.styles.ts | 14 ++- .../github-repository-selection.tsx | 32 +----- ui/src/views/mint/mint-card/index.ts | 1 - ui/src/views/mint/mint-card/mint-card.tsx | 35 ------ ui/src/views/mint/mint.styles.ts | 9 +- .../mint/nfa-step/form-step/mint-form.tsx | 30 +++-- .../nfa-step/verify-step/select-verifier.tsx | 74 ++++++++++++ .../verify-step/verify-nfa-step.styles.ts | 22 ++++ .../nfa-step/verify-step/verify-nfa-step.tsx | 105 +++--------------- ui/src/views/mint/nft-card/nft-card.tsx | 31 +++--- ui/src/views/mint/wallet-step/wallet-step.tsx | 27 ++--- 33 files changed, 349 insertions(+), 343 deletions(-) create mode 100644 ui/src/components/card/custom-card/custom-card.styles.ts create mode 100644 ui/src/components/card/custom-card/custom-card.tsx create mode 100644 ui/src/components/card/custom-card/index.ts create mode 100644 ui/src/views/access-point/create-ap-success/create-ap-success.styles.ts rename ui/src/views/access-point/{ => create-ap-success}/create-ap-success.tsx (51%) create mode 100644 ui/src/views/access-point/create-ap-success/index.ts delete mode 100644 ui/src/views/mint/mint-card/index.ts delete mode 100644 ui/src/views/mint/mint-card/mint-card.tsx create mode 100644 ui/src/views/mint/nfa-step/verify-step/select-verifier.tsx create mode 100644 ui/src/views/mint/nfa-step/verify-step/verify-nfa-step.styles.ts diff --git a/ui/src/components/card/card.styles.ts b/ui/src/components/card/card.styles.ts index 495ebdf..9dc6fe8 100644 --- a/ui/src/components/card/card.styles.ts +++ b/ui/src/components/card/card.styles.ts @@ -11,10 +11,8 @@ export abstract class CardStyles { borderWidth: '$default', }); - static readonly Heading = styled('h3', { - color: '$slate12', - fontSize: '$xl', - fontWeight: '$medium', + static readonly Header = styled('div', { + width: '$full', }); static readonly Body = styled('div', { diff --git a/ui/src/components/card/card.tsx b/ui/src/components/card/card.tsx index 7c2043d..1f3f11f 100644 --- a/ui/src/components/card/card.tsx +++ b/ui/src/components/card/card.tsx @@ -1,7 +1,6 @@ /* eslint-disable react/display-name */ import React, { forwardRef } from 'react'; -import { Flex } from '../layout'; import { CardStyles } from './card.styles'; export abstract class Card { @@ -15,18 +14,12 @@ export abstract class Card { } ); - static readonly Heading = forwardRef( - ({ title, leftIcon, rightIcon, css, ...props }, ref) => { + static readonly Header = CardStyles.Header; + ({ children, ...props }, ref) => { return ( - - - {leftIcon} - - {title} - - - {rightIcon} - + + {children} + ); } ); @@ -57,12 +50,7 @@ export namespace Card { typeof CardStyles.Container >; - export type HeadingProps = { - title: string; - css?: React.CSSProperties; - leftIcon?: React.ReactNode; - rightIcon?: React.ReactNode; - } & React.ComponentProps; + export type HeadingProps = React.ComponentProps; export type BodyProps = React.ComponentProps; diff --git a/ui/src/components/card/custom-card/custom-card.styles.ts b/ui/src/components/card/custom-card/custom-card.styles.ts new file mode 100644 index 0000000..7bdeaee --- /dev/null +++ b/ui/src/components/card/custom-card/custom-card.styles.ts @@ -0,0 +1,18 @@ +import { Card, Flex } from '@/components'; +import { styled } from '@/theme'; + +export const CustomCardStyles = { + Container: styled(Card.Container, { + maxWidth: '$107h', + }), + Title: { + Container: styled(Flex, { + justifyContent: 'space-between', + }), + Text: styled('h3', { + color: '$slate12', + fontSize: '$xl', + fontWeight: '$medium', + }), + }, +}; diff --git a/ui/src/components/card/custom-card/custom-card.tsx b/ui/src/components/card/custom-card/custom-card.tsx new file mode 100644 index 0000000..e21e21e --- /dev/null +++ b/ui/src/components/card/custom-card/custom-card.tsx @@ -0,0 +1,65 @@ +import { Card, Flex, Icon, IconButton } from '@/components'; +import { forwardStyledRef } from '@/theme'; + +import { CardStyles } from '../card.styles'; +import { CustomCardStyles as S } from './custom-card.styles'; + +export const CustomCardContainer = S.Container; + +export abstract class CustomCardHeader { + static readonly Default = forwardStyledRef< + HTMLHeadingElement, + CustomCard.HeadingProps + >(({ title, onClickBack, ...props }, ref) => { + return ( + + + + {onClickBack && ( + } + onClick={onClickBack} + /> + )} + {title} + + } + /> + + + ); + }); + + static readonly Success = forwardStyledRef< + HTMLHeadingElement, + Omit + >(({ title, ...props }, ref) => { + return ( + + + + {title} + + + ); + }); +} + +export namespace CustomCard { + export type ContainerProps = React.ComponentProps; + + export type HeadingProps = { + title: string; + onClickBack?: () => void; + } & React.ComponentProps; +} diff --git a/ui/src/components/card/custom-card/index.ts b/ui/src/components/card/custom-card/index.ts new file mode 100644 index 0000000..cf9457d --- /dev/null +++ b/ui/src/components/card/custom-card/index.ts @@ -0,0 +1 @@ +export * from './custom-card'; diff --git a/ui/src/components/card/index.ts b/ui/src/components/card/index.ts index 1e13f64..5c11835 100644 --- a/ui/src/components/card/index.ts +++ b/ui/src/components/card/index.ts @@ -1 +1,2 @@ export * from './card'; +export * from './custom-card'; diff --git a/ui/src/components/layout/page/page.styles.ts b/ui/src/components/layout/page/page.styles.ts index 55e7f81..356b316 100644 --- a/ui/src/components/layout/page/page.styles.ts +++ b/ui/src/components/layout/page/page.styles.ts @@ -10,8 +10,11 @@ export abstract class PageStyles { width: '100%', minHeight: '85vh', maxWidth: '$6xl', - padding: '0 $6', + padding: '$6', margin: '0 auto', - display: 'grid', + + '@md': { + padding: '0 $6', + }, }); } diff --git a/ui/src/components/resolved-address/resolved-address.styles.ts b/ui/src/components/resolved-address/resolved-address.styles.ts index 5b3fb23..472da1a 100644 --- a/ui/src/components/resolved-address/resolved-address.styles.ts +++ b/ui/src/components/resolved-address/resolved-address.styles.ts @@ -1,3 +1,4 @@ +import { Text } from '@/components'; import { keyframes, styled } from '@/theme'; const Loading = keyframes({ @@ -13,7 +14,7 @@ const Loading = keyframes({ }); export const ResolvedAddressStyles = { - Container: styled('span', { + Container: styled(Text, { '&[data-loading="true"]': { animation: `${Loading} 1s ease-in-out infinite`, }, diff --git a/ui/src/theme/foundations/media.ts b/ui/src/theme/foundations/media.ts index 116f217..08d8c86 100644 --- a/ui/src/theme/foundations/media.ts +++ b/ui/src/theme/foundations/media.ts @@ -1,5 +1,6 @@ export const media = { // Breakpoints + xs: '(min-width: 375px)', sm: '(min-width: 640px)', md: '(min-width: 768px)', lg: '(min-width: 1024px)', diff --git a/ui/src/views/access-point/ap-form-step/create-ap-form.tsx b/ui/src/views/access-point/ap-form-step/create-ap-form.tsx index cce66db..bd7b219 100644 --- a/ui/src/views/access-point/ap-form-step/create-ap-form.tsx +++ b/ui/src/views/access-point/ap-form-step/create-ap-form.tsx @@ -1,4 +1,10 @@ -import { Card, Flex, Icon, IconButton, Stepper } from '@/components'; +import { + Card, + CustomCardContainer, + CustomCardHeader, + Flex, + Stepper, +} from '@/components'; import { CreateAccessPointFormBody } from './create-ap-form-body'; @@ -6,28 +12,8 @@ export const CreateAccessPointForm: React.FC = () => { const { prevStep } = Stepper.useContext(); return ( - - } - css={{ mr: '$2' }} - onClick={prevStep} - /> - } - rightIcon={ - } - /> - } - /> + + { - + ); }; diff --git a/ui/src/views/access-point/ap-record-step/ap-record-body.tsx b/ui/src/views/access-point/ap-record-step/ap-record-body.tsx index e14bd96..01308c8 100644 --- a/ui/src/views/access-point/ap-record-step/ap-record-body.tsx +++ b/ui/src/views/access-point/ap-record-step/ap-record-body.tsx @@ -1,6 +1,6 @@ import { useEffect, useMemo } from 'react'; -import { Button, Card, Grid, SpinnerDot, Stepper, Text } from '@/components'; +import { Button, Card, Flex, SpinnerDot, Stepper, Text } from '@/components'; import { bunnyCDNActions, useAppDispatch, useBunnyCDNStore } from '@/store'; import { useAccessPointFormContext } from '../ap-form-step'; @@ -49,9 +49,10 @@ export const APRecordCardBody: React.FC = () => { ) : ( - @@ -73,7 +74,7 @@ export const APRecordCardBody: React.FC = () => { > I added the record - + )} ); diff --git a/ui/src/views/access-point/ap-record-step/ap-record-header.tsx b/ui/src/views/access-point/ap-record-step/ap-record-header.tsx index 02b6bfd..65c18f4 100644 --- a/ui/src/views/access-point/ap-record-step/ap-record-header.tsx +++ b/ui/src/views/access-point/ap-record-step/ap-record-header.tsx @@ -1,29 +1,9 @@ -import { Card, Icon, IconButton, Stepper } from '@/components'; +import { CustomCardHeader, Stepper } from '@/components'; export const APRecordCardHeader: React.FC = () => { const { prevStep } = Stepper.useContext(); return ( - } - css={{ mr: '$2' }} - onClick={prevStep} - /> - } - rightIcon={ - } - /> - } - /> + ); }; diff --git a/ui/src/views/access-point/ap-record-step/ap-record-step.tsx b/ui/src/views/access-point/ap-record-step/ap-record-step.tsx index 450a9f2..24534e1 100644 --- a/ui/src/views/access-point/ap-record-step/ap-record-step.tsx +++ b/ui/src/views/access-point/ap-record-step/ap-record-step.tsx @@ -1,13 +1,13 @@ -import { Card } from '@/components'; +import { CustomCardContainer } from '@/components'; import { APRecordCardBody } from './ap-record-body'; import { APRecordCardHeader } from './ap-record-header'; export const APRecordStep: React.FC = () => { return ( - + - + ); }; diff --git a/ui/src/views/access-point/create-ap-preview.tsx b/ui/src/views/access-point/create-ap-preview.tsx index 069248b..9076b0d 100644 --- a/ui/src/views/access-point/create-ap-preview.tsx +++ b/ui/src/views/access-point/create-ap-preview.tsx @@ -5,9 +5,9 @@ import { useAccount } from 'wagmi'; import { Button, Card, + CustomCardContainer, + CustomCardHeader, Flex, - Icon, - IconButton, ResolvedAddress, Stepper, Text, @@ -40,7 +40,9 @@ export const AccessPointDataFragment: React.FC = () => { label="Owner" value={ address ? ( - {address || ''} + + {address} + ) : ( 'Please connect to wallet' ) @@ -111,28 +113,8 @@ export const CreateAccessPointPreview: React.FC = () => { }, [writeStatus, transactionStatus]); return ( - - } - css={{ mr: '$2' }} - onClick={prevStep} - /> - } - rightIcon={ - } - /> - } - /> + + @@ -148,6 +130,6 @@ export const CreateAccessPointPreview: React.FC = () => { - + ); }; diff --git a/ui/src/views/access-point/create-ap-success/create-ap-success.styles.ts b/ui/src/views/access-point/create-ap-success/create-ap-success.styles.ts new file mode 100644 index 0000000..0a3eb6a --- /dev/null +++ b/ui/src/views/access-point/create-ap-success/create-ap-success.styles.ts @@ -0,0 +1,13 @@ +import { CustomCardContainer } from '@/components'; +import { keyframes, styled } from '@/theme'; + +const CardKeyFrames = keyframes({ + '0%': { opacity: 0 }, + '100%': { opacity: 1 }, +}); + +export const CreateApSuccessStyles = { + Container: styled(CustomCardContainer, { + animation: `${CardKeyFrames} 0.5s ease-in-out 0s`, + }), +}; diff --git a/ui/src/views/access-point/create-ap-success.tsx b/ui/src/views/access-point/create-ap-success/create-ap-success.tsx similarity index 51% rename from ui/src/views/access-point/create-ap-success.tsx rename to ui/src/views/access-point/create-ap-success/create-ap-success.tsx index 66218d1..588f38a 100644 --- a/ui/src/views/access-point/create-ap-success.tsx +++ b/ui/src/views/access-point/create-ap-success/create-ap-success.tsx @@ -1,29 +1,14 @@ -import { Button, Card, Flex, Icon, IconButton, Text } from '@/components'; +import { Button, Card, CustomCardHeader, Flex, Icon, Text } from '@/components'; -import { CreateAccessPoint } from './create-ap.context'; -import { AccessPointDataFragment } from './create-ap-preview'; +import { CreateAccessPoint } from '../create-ap.context'; +import { AccessPointDataFragment } from '../create-ap-preview'; +import { CreateApSuccessStyles as S } from './create-ap-success.styles'; export const CreateAccessPointSuccess: React.FC = () => { const { nfa } = CreateAccessPoint.useContext(); return ( - - - } - rightIcon={ - } - /> - } - /> + + @@ -42,6 +27,6 @@ export const CreateAccessPointSuccess: React.FC = () => { - + ); }; diff --git a/ui/src/views/access-point/create-ap-success/index.ts b/ui/src/views/access-point/create-ap-success/index.ts new file mode 100644 index 0000000..7868982 --- /dev/null +++ b/ui/src/views/access-point/create-ap-success/index.ts @@ -0,0 +1 @@ +export * from './create-ap-success'; diff --git a/ui/src/views/access-point/display-text/display-text.styles.ts b/ui/src/views/access-point/display-text/display-text.styles.ts index 644be97..f7f26fe 100644 --- a/ui/src/views/access-point/display-text/display-text.styles.ts +++ b/ui/src/views/access-point/display-text/display-text.styles.ts @@ -1,7 +1,6 @@ +import { Flex, Text } from '@/components'; import { styled } from '@/theme'; -import { Flex } from '../../../components/layout'; - export const DisplayTextStyles = { Container: styled(Flex, { flexDirection: 'column', @@ -13,7 +12,7 @@ export const DisplayTextStyles = { fontSize: '$xs', //TODO add variants }), - Input: styled('span', { + Input: styled(Text, { backgroundColor: '$slate1', borderColor: '$slate1', color: '$slate12', diff --git a/ui/src/views/access-point/display-text/display-text.tsx b/ui/src/views/access-point/display-text/display-text.tsx index 5c6f7de..e8f8272 100644 --- a/ui/src/views/access-point/display-text/display-text.tsx +++ b/ui/src/views/access-point/display-text/display-text.tsx @@ -11,7 +11,7 @@ export const DisplayText: React.FC = ({ return ( {label} - {value} + {value} ); }; diff --git a/ui/src/views/mint/github-step/steps/github-connect/github-connect-step.tsx b/ui/src/views/mint/github-step/steps/github-connect/github-connect-step.tsx index a69030b..b47922c 100644 --- a/ui/src/views/mint/github-step/steps/github-connect/github-connect-step.tsx +++ b/ui/src/views/mint/github-step/steps/github-connect/github-connect-step.tsx @@ -1,5 +1,10 @@ -import { Card, Grid, Stepper } from '@/components'; -import { MintCardHeader } from '@/views/mint/mint-card'; +import { + Card, + CustomCardContainer, + CustomCardHeader, + Flex, + Stepper, +} from '@/components'; import { GithubButton } from './github-button'; @@ -7,10 +12,10 @@ export const GithubConnect: React.FC = () => { const { prevStep } = Stepper.useContext(); return ( - - + + - + { After connecting your GitHub, your repositories will show here. - + - + ); }; diff --git a/ui/src/views/mint/github-step/steps/github-repo-configuration/repo-configuration-header.tsx b/ui/src/views/mint/github-step/steps/github-repo-configuration/repo-configuration-header.tsx index d9f47c1..10e99de 100644 --- a/ui/src/views/mint/github-step/steps/github-repo-configuration/repo-configuration-header.tsx +++ b/ui/src/views/mint/github-step/steps/github-repo-configuration/repo-configuration-header.tsx @@ -1,5 +1,5 @@ +import { CustomCardHeader } from '@/components'; import { Mint } from '@/views/mint/mint.context'; -import { MintCardHeader } from '@/views/mint/mint-card'; import { useMintFormContext } from '@/views/mint/nfa-step/form-step'; export const RepoConfigurationHeader: React.FC = () => { @@ -22,7 +22,7 @@ export const RepoConfigurationHeader: React.FC = () => { }; return ( - diff --git a/ui/src/views/mint/github-step/steps/github-repo-configuration/repo-configuration.tsx b/ui/src/views/mint/github-step/steps/github-repo-configuration/repo-configuration.tsx index 9e3a7ba..5c9ca9a 100644 --- a/ui/src/views/mint/github-step/steps/github-repo-configuration/repo-configuration.tsx +++ b/ui/src/views/mint/github-step/steps/github-repo-configuration/repo-configuration.tsx @@ -1,13 +1,13 @@ -import { Card } from '@/components'; +import { CustomCardContainer } from '@/components'; import { RepoConfigurationBody } from './repo-configuration-body'; import { RepoConfigurationHeader } from './repo-configuration-header'; export const GithubRepoConfiguration: React.FC = () => { return ( - + - + ); }; diff --git a/ui/src/views/mint/github-step/steps/github-repository-selection/github-repository-selection.styles.ts b/ui/src/views/mint/github-step/steps/github-repository-selection/github-repository-selection.styles.ts index b7b8110..8663fe2 100644 --- a/ui/src/views/mint/github-step/steps/github-repository-selection/github-repository-selection.styles.ts +++ b/ui/src/views/mint/github-step/steps/github-repository-selection/github-repository-selection.styles.ts @@ -1,13 +1,21 @@ -import { Card, Flex, Icon } from '@/components'; +import { + Card, + CustomCardContainer, + CustomCardHeader, + Flex, + Icon, +} from '@/components'; import { styled } from '@/theme'; export const GithubRepositorySelectionStyles = { Card: { - Wrapper: styled(Card.Container, { - maxWidth: '$107h', + Wrapper: styled(CustomCardContainer, { maxHeight: '$95h', pr: '$3h', }), + Header: styled(CustomCardHeader.Default, { + pr: '$3h', + }), Body: styled(Card.Body, { pt: '$4', }), diff --git a/ui/src/views/mint/github-step/steps/github-repository-selection/github-repository-selection.tsx b/ui/src/views/mint/github-step/steps/github-repository-selection/github-repository-selection.tsx index 5fb69ba..841aa88 100644 --- a/ui/src/views/mint/github-step/steps/github-repository-selection/github-repository-selection.tsx +++ b/ui/src/views/mint/github-step/steps/github-repository-selection/github-repository-selection.tsx @@ -1,14 +1,6 @@ import React, { useState } from 'react'; -import { - Card, - Flex, - Icon, - IconButton, - InputGroup, - InputGroupText, - Spinner, -} from '@/components'; +import { Flex, InputGroup, InputGroupText, Spinner } from '@/components'; import { useDebounce } from '@/hooks/use-debounce'; import { useGithubStore } from '@/store'; import { Mint } from '@/views/mint/mint.context'; @@ -55,27 +47,9 @@ export const GithubRepositoryConnection: React.FC = () => { return ( - } - css={{ mr: '$2' }} - onClick={handlePrevStepClick} - /> - } - rightIcon={ - } - /> - } + onClickBack={handlePrevStepClick} /> diff --git a/ui/src/views/mint/mint-card/index.ts b/ui/src/views/mint/mint-card/index.ts deleted file mode 100644 index 805d982..0000000 --- a/ui/src/views/mint/mint-card/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './mint-card'; diff --git a/ui/src/views/mint/mint-card/mint-card.tsx b/ui/src/views/mint/mint-card/mint-card.tsx deleted file mode 100644 index 7c33573..0000000 --- a/ui/src/views/mint/mint-card/mint-card.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { Card, Icon, IconButton } from '@/components'; - -type MintCardHeaderProps = { - title: string; - onClickBack: () => void; -}; - -export const MintCardHeader: React.FC = ({ - title, - onClickBack, -}: MintCardHeaderProps) => { - return ( - } - css={{ mr: '$2' }} - onClick={onClickBack} - /> - } - rightIcon={ - } - /> - } - /> - ); -}; diff --git a/ui/src/views/mint/mint.styles.ts b/ui/src/views/mint/mint.styles.ts index 1df6f03..f0b0796 100644 --- a/ui/src/views/mint/mint.styles.ts +++ b/ui/src/views/mint/mint.styles.ts @@ -6,7 +6,14 @@ export const MintStyles = { height: '100%', justifyContent: 'center', - '@media (min-width: 1024px)': { + '@md': { + //to align on center + position: 'absolute', + top: '50%', + transform: 'translateY(-50%)', + }, + + '@lg': { flexDirection: 'row', }, }), diff --git a/ui/src/views/mint/nfa-step/form-step/mint-form.tsx b/ui/src/views/mint/nfa-step/form-step/mint-form.tsx index 563bbfc..fad983d 100644 --- a/ui/src/views/mint/nfa-step/form-step/mint-form.tsx +++ b/ui/src/views/mint/nfa-step/form-step/mint-form.tsx @@ -1,11 +1,17 @@ import { useAccount } from 'wagmi'; -import { Button, Card, Grid, Stepper } from '@/components'; +import { + Button, + Card, + CustomCardContainer, + CustomCardHeader, + Flex, + Stepper, +} from '@/components'; import { AppLog } from '@/utils'; import { parseColorToNumber } from '@/utils/color'; import { Mint } from '../../mint.context'; -import { MintCardHeader } from '../../mint-card'; import { AppDescriptionField, AppNameField, @@ -78,20 +84,24 @@ export const MintFormStep: React.FC = () => { }; return ( - - + + - - + - + - + - + ); }; diff --git a/ui/src/views/mint/nfa-step/verify-step/select-verifier.tsx b/ui/src/views/mint/nfa-step/verify-step/select-verifier.tsx new file mode 100644 index 0000000..dec452e --- /dev/null +++ b/ui/src/views/mint/nfa-step/verify-step/select-verifier.tsx @@ -0,0 +1,74 @@ +import { useQuery } from '@apollo/client'; +import { useEffect, useMemo } from 'react'; + +import { getVerifiersDocument } from '@/../.graphclient'; +import { Form, ResolvedAddress } from '@/components'; +import { useENSStore } from '@/store'; + +import { useMintFormContext } from '../form-step'; + +// TODO: remove mocked items after graphql api is fixed +const mockedItems = [ + '0xdBb04e00D5ec8C9e3aeF811D315Ee7C147c5DBFD', + '0x7ED735b7095C05d78dF169F991f2b7f1A1F1A049', +]; + +export const SelectVerifier: React.FC = () => { + const { + form: { verifier }, + } = useMintFormContext(); + + const { + value: [selectedVerifier, setSelectedVerifier], + } = verifier; + + const { addressMap } = useENSStore(); + + const { data } = useQuery(getVerifiersDocument); + + const items = useMemo(() => { + if (!data) return []; + + const verifiers = data.verifiers + .map((verifier) => verifier.id.toString()) + .concat(mockedItems); + + return verifiers.map((verifier) => ({ + address: verifier, + ens: addressMap[verifier]?.value, + })); + }, [data, addressMap]); + + useEffect(() => { + if (!selectedVerifier && items.length > 0) { + setSelectedVerifier(items[0].address); + } + }, [selectedVerifier, setSelectedVerifier, items]); + + return ( + + item.address} + queryKey={['address', 'ens']} + > + {({ Field, Options }) => ( + <> + + {(selected) => + selected ? ( + {selected.address} + ) : ( + 'Select a Verifier' + ) + } + + + {(item) => {item.address}} + + + )} + + + ); +}; diff --git a/ui/src/views/mint/nfa-step/verify-step/verify-nfa-step.styles.ts b/ui/src/views/mint/nfa-step/verify-step/verify-nfa-step.styles.ts new file mode 100644 index 0000000..056a3f3 --- /dev/null +++ b/ui/src/views/mint/nfa-step/verify-step/verify-nfa-step.styles.ts @@ -0,0 +1,22 @@ +import { Card, Flex, Text } from '@/components'; +import { styled } from '@/theme'; + +export const VerifyNfaStepStyles = { + Body: { + Container: styled(Flex, { + flexDirection: 'column', + gap: '$6', + }), + Text: styled(Text, { + color: '$slate11', + fontSize: '$sm', + }), + VerifyContainer: styled(Card.Text, { + p: '$4', + textAlign: 'left', + flexDirection: 'row', + justifyContent: 'space-between', + borderRadius: '$lg', + }), + }, +}; diff --git a/ui/src/views/mint/nfa-step/verify-step/verify-nfa-step.tsx b/ui/src/views/mint/nfa-step/verify-step/verify-nfa-step.tsx index 6878c2f..dbafcfd 100644 --- a/ui/src/views/mint/nfa-step/verify-step/verify-nfa-step.tsx +++ b/ui/src/views/mint/nfa-step/verify-step/verify-nfa-step.tsx @@ -1,88 +1,17 @@ -import { useQuery } from '@apollo/client'; -import { useEffect, useMemo } from 'react'; - -import { getVerifiersDocument } from '@/../.graphclient'; import { Button, Card, - Flex, - Form, - ResolvedAddress, + CustomCardContainer, + CustomCardHeader, Stepper, Switch, Text, } from '@/components'; -import { useENSStore } from '@/store'; import { Mint } from '../../mint.context'; -import { MintCardHeader } from '../../mint-card'; import { useMintFormContext } from '../form-step'; - -// TODO: remove mocked items after graphql api is fixed -const mockedItems = [ - '0xdBb04e00D5ec8C9e3aeF811D315Ee7C147c5DBFD', - '0x7ED735b7095C05d78dF169F991f2b7f1A1F1A049', -]; - -const SelectVerifier: React.FC = () => { - const { - form: { verifier }, - } = useMintFormContext(); - - const { - value: [selectedVerifier, setSelectedVerifier], - } = verifier; - - const { addressMap } = useENSStore(); - - const { data } = useQuery(getVerifiersDocument); - - const items = useMemo(() => { - if (!data) return []; - - const verifiers = data.verifiers - .map((verifier) => verifier.id.toString()) - .concat(mockedItems); - - return verifiers.map((verifier) => ({ - address: verifier, - ens: addressMap[verifier]?.value, - })); - }, [data, addressMap]); - - useEffect(() => { - if (!selectedVerifier && items.length > 0) { - setSelectedVerifier(items[0].address); - } - }, [selectedVerifier, setSelectedVerifier, items]); - - return ( - - item.address} - queryKey={['address', 'ens']} - > - {({ Field, Options }) => ( - <> - - {(selected) => - selected ? ( - {selected.address} - ) : ( - 'Select a Verifier' - ) - } - - - {(item) => {item.address}} - - - )} - - - ); -}; +import { SelectVerifier } from './select-verifier'; +import { VerifyNfaStepStyles as S } from './verify-nfa-step.styles'; export const VerifyNFAStep: React.FC = () => { const { prevStep } = Stepper.useContext(); @@ -100,30 +29,22 @@ export const VerifyNFAStep: React.FC = () => { }; return ( - - + + - - + + 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. - - + + Verify NFA - + - + - + ); }; diff --git a/ui/src/views/mint/nft-card/nft-card.tsx b/ui/src/views/mint/nft-card/nft-card.tsx index e98c678..2280076 100644 --- a/ui/src/views/mint/nft-card/nft-card.tsx +++ b/ui/src/views/mint/nft-card/nft-card.tsx @@ -1,4 +1,11 @@ -import { Button, Card, Grid } from '@/components'; +import { + Button, + Card, + CustomCardContainer, + CustomCardHeader, + Flex, + Text, +} from '@/components'; import { NFAPreview } from '@/components'; import { useMintFormContext } from '../nfa-step/form-step'; @@ -16,8 +23,6 @@ type NftCardProps = { export const NftCard: React.FC = ({ title, - leftIcon, - rightIcon, message, buttonText, leftIconButton, @@ -43,23 +48,21 @@ export const NftCard: React.FC = ({ } = useMintFormContext(); return ( - + - - - {message} + + + {message} - + - + ); }; diff --git a/ui/src/views/mint/wallet-step/wallet-step.tsx b/ui/src/views/mint/wallet-step/wallet-step.tsx index f3bef32..ce75314 100644 --- a/ui/src/views/mint/wallet-step/wallet-step.tsx +++ b/ui/src/views/mint/wallet-step/wallet-step.tsx @@ -1,23 +1,18 @@ -import { Card, Grid, Icon, IconButton } from '@/components'; +import { + Card, + CustomCardContainer, + CustomCardHeader, + Flex, +} from '@/components'; import { ConnectWalletButton } from './connect-wallet-button'; export const WalletStep: React.FC = () => { return ( - - } - /> - } - /> + + - + { > Connect with the wallet you want to mint & own the NFA. - + - + ); };