From a2b8c4f7fd024a9eadf985c815cefd265a0a6731 Mon Sep 17 00:00:00 2001 From: Felipe Mendes Date: Mon, 3 Apr 2023 11:26:42 -0300 Subject: [PATCH] feat: UI create card list component (#200) * feat: add nfa card base structure * feat: add needed data on lastNFAsPaginated query * fix: nfa preview for multiple colors at the same time * feat: setup nfa card style * feat: apply NFAcard in NFAList --- ui/graphql/queries.graphql | 6 ++ ui/src/components/index.ts | 1 + ui/src/components/nfa-card/index.ts | 1 + ui/src/components/nfa-card/nfa-card.styles.ts | 78 +++++++++++++++ ui/src/components/nfa-card/nfa-card.tsx | 77 +++++++++++++++ .../explore/list-nfas/nfa-list/nfa-list.tsx | 23 +---- ui/src/views/mint/nft-card/svg-preview.tsx | 94 +++++++++---------- 7 files changed, 214 insertions(+), 66 deletions(-) create mode 100644 ui/src/components/nfa-card/index.ts create mode 100644 ui/src/components/nfa-card/nfa-card.styles.ts create mode 100644 ui/src/components/nfa-card/nfa-card.tsx diff --git a/ui/graphql/queries.graphql b/ui/graphql/queries.graphql index 37fdea4..b648cff 100644 --- a/ui/graphql/queries.graphql +++ b/ui/graphql/queries.graphql @@ -9,6 +9,12 @@ query lastNFAsPaginated($pageSize: Int, $skip: Int) { tokenId description name + ENS + color + logo + accessPoints { + id + } } } diff --git a/ui/src/components/index.ts b/ui/src/components/index.ts index 17f0000..82ef219 100644 --- a/ui/src/components/index.ts +++ b/ui/src/components/index.ts @@ -5,3 +5,4 @@ export * from './card'; export * from './spinner'; export * from './toast'; export * from './step'; +export * from './nfa-card'; diff --git a/ui/src/components/nfa-card/index.ts b/ui/src/components/nfa-card/index.ts new file mode 100644 index 0000000..f8fa163 --- /dev/null +++ b/ui/src/components/nfa-card/index.ts @@ -0,0 +1 @@ +export * from './nfa-card'; diff --git a/ui/src/components/nfa-card/nfa-card.styles.ts b/ui/src/components/nfa-card/nfa-card.styles.ts new file mode 100644 index 0000000..23e1f57 --- /dev/null +++ b/ui/src/components/nfa-card/nfa-card.styles.ts @@ -0,0 +1,78 @@ +import { Link } from 'react-router-dom'; + +import { dripStitches } from '@/theme'; + +const { styled } = dripStitches; + +export const NFACardStyles = { + Container: styled(Link, { + display: 'flex', + flexDirection: 'column', + width: '14.6875rem', + padding: 0, + overflow: 'hidden', + cursor: 'pointer', + border: '1px solid $slate6', + borderRadius: '$lg', + + svg: { + position: 'relative', + transition: 'transform 0.4s ease-in-out 0s', + }, + '&:hover': { + svg: { + transform: 'scale(1.12)', + }, + }, + }), + Body: styled('div', { + display: 'flex', + position: 'relative', + flexDirection: 'column', + padding: '$3 $4', + gap: '$2', + borderTop: '1px solid $slate6', + backgroundColor: 'black', // TODO: are we going to add black as theme color? + }), + Badge: styled('span', { + height: 'fit-content', + width: 'fit-content', + fontSize: '$xs', + fontWeight: '$bold', + padding: '$0h $2', + borderRadius: '$full', + + variants: { + verified: { + true: { + backgroundColor: '$green3', + color: '$green11', + }, + false: { + backgroundColor: '$red3', + color: '$red11', + }, + }, + }, + }), + Title: styled('h1', { + all: 'unset', + fontSize: '$xl', + fontWeight: '$medium', + lineHeight: 1.4, + }), + Content: styled('span', { + all: 'unset', + color: '$slate11', + fontSize: '$sm', + lineHeight: 1.43, + + variants: { + highlight: { + true: { + color: '$slate12', + }, + }, + }, + }), +}; diff --git a/ui/src/components/nfa-card/nfa-card.tsx b/ui/src/components/nfa-card/nfa-card.tsx new file mode 100644 index 0000000..465de52 --- /dev/null +++ b/ui/src/components/nfa-card/nfa-card.tsx @@ -0,0 +1,77 @@ +import { useMemo } from 'react'; +import { To } from 'react-router-dom'; + +import { lastNFAsPaginatedQuery } from '@/graphclient'; +import { forwardStyledRef } from '@/theme'; +import { SVGPreview } from '@/views/mint/nft-card/svg-preview'; + +import { Flex } from '../layout'; +import { NFACardStyles as S } from './nfa-card.styles'; + +type BadgeProps = { + verified: boolean; +}; + +const Badge: React.FC = ({ verified }: BadgeProps) => { + const text = useMemo( + () => (verified ? 'Verified' : 'Unverified'), + [verified] + ); + + return {text}; +}; + +export type NFACardProps = Omit< + React.ComponentPropsWithRef, + 'to' +> & { + data: lastNFAsPaginatedQuery['tokens'][0]; + to?: To; +}; + +export const NFACard: React.FC = forwardStyledRef< + HTMLAnchorElement, + NFACardProps + // TODO: Set default path to NFA page +>(({ data, to = `/create-ap/${data.tokenId}`, ...props }, ref) => { + const { name, color, ENS, logo, accessPoints } = data; + + const apCounter = useMemo(() => accessPoints?.length ?? 0, [accessPoints]); + + const parsedColor = useMemo( + () => `#${('000000' + color.toString(16)).slice(-6)}`, + [color] + ); + + return ( + + + + + + {/* TODO: treat names bigger than space in layout when designs are done */} + {data.name} + {/* TODO: set correct value when it gets available on contract side */} + 0.5} /> + + + + {apCounter} + Access Points + + + + ); +}); diff --git a/ui/src/views/explore/list-nfas/nfa-list/nfa-list.tsx b/ui/src/views/explore/list-nfas/nfa-list/nfa-list.tsx index ed982c4..7422491 100644 --- a/ui/src/views/explore/list-nfas/nfa-list/nfa-list.tsx +++ b/ui/src/views/explore/list-nfas/nfa-list/nfa-list.tsx @@ -3,7 +3,7 @@ import { useQuery } from '@apollo/client'; import { useEffect, useState } from 'react'; import { Link } from 'react-router-dom'; -import { Button, Card, Flex, NoResults } from '@/components'; +import { Button, Card, Flex, NFACard, NoResults } from '@/components'; import { lastNFAsPaginatedDocument, totalTokensDocument } from '@/graphclient'; import { FleekERC721 } from '@/integrations/ethereum/contracts'; @@ -67,30 +67,15 @@ export const NFAList = () => { Next page -
+ {dataMintedTokens && dataMintedTokens.tokens.length > 0 ? ( dataMintedTokens.tokens.map((mint) => ( - - - - - Open NFA on Opensea - - Create AP - - + )) ) : ( )} -
+ ); }; diff --git a/ui/src/views/mint/nft-card/svg-preview.tsx b/ui/src/views/mint/nft-card/svg-preview.tsx index 738eebf..bf0340d 100644 --- a/ui/src/views/mint/nft-card/svg-preview.tsx +++ b/ui/src/views/mint/nft-card/svg-preview.tsx @@ -17,7 +17,7 @@ export const SVGPreview: React.FC = ({ ens = '', css = '', size, -}) => { +}: SVGPreviewProps) => { return ( = ({ opacity="0.2" width="1065" height="1065" - fill="url(#background-radial)" + fill={`url(#${color}-background-radial)`} /> @@ -43,84 +43,84 @@ export const SVGPreview: React.FC = ({ {name} {ens} @@ -142,9 +142,9 @@ export const SVGPreview: React.FC = ({ width="955.733" height="832.558" filterUnits="userSpaceOnUse" - color-interpolation-filters="sRGB" + colorInterpolationFilters="sRGB" > - + @@ -158,34 +158,34 @@ export const SVGPreview: React.FC = ({ gradientUnits="userSpaceOnUse" > - + - - + + - - + + - - + +