From d96175fa3f92bd11985eaa979d13e53cc8821ac3 Mon Sep 17 00:00:00 2001 From: Camila Sosa Morales Date: Fri, 16 Dec 2022 11:27:39 -0300 Subject: [PATCH] feat: list minted sites (#42) * feat: add mintes sites list view * wip: add card but need styles * style: add style to site card component * style: add style to site card * fix: fix onClick propagation * chore: remove unused param * Apply suggestions from code review Co-authored-by: Felipe Mendes * Update list.tsx Co-authored-by: Felipe Mendes --- ui/src/components/card/card-attributes.tsx | 2 +- ui/src/components/card/card-site.tsx | 101 +++++++++++++++++++++ ui/src/components/card/index.ts | 1 + ui/src/components/tile-info/tile-info.tsx | 26 ++++-- ui/src/mocks/index.ts | 2 +- ui/src/mocks/list.ts | 39 ++++++++ ui/src/views/home/home.tsx | 7 +- ui/src/views/home/list.tsx | 31 +++++++ 8 files changed, 198 insertions(+), 11 deletions(-) create mode 100644 ui/src/components/card/card-site.tsx create mode 100644 ui/src/mocks/list.ts create mode 100644 ui/src/views/home/list.tsx diff --git a/ui/src/components/card/card-attributes.tsx b/ui/src/components/card/card-attributes.tsx index 934eed1..fc51e45 100644 --- a/ui/src/components/card/card-attributes.tsx +++ b/ui/src/components/card/card-attributes.tsx @@ -16,7 +16,7 @@ export const CardAttributes = ({ heading, info }: CardAttributesProps) => ( width="200px" > - + ); diff --git a/ui/src/components/card/card-site.tsx b/ui/src/components/card/card-site.tsx new file mode 100644 index 0000000..557ebfd --- /dev/null +++ b/ui/src/components/card/card-site.tsx @@ -0,0 +1,101 @@ +import { ImagePreview, TileInfo } from '@/components'; +import { SiteNFTDetail } from '@/types'; +import { useNavigate } from 'react-router-dom'; +import { + Box, + Card, + CardBody, + Heading, + LayoutProps, + Link, + Stack, +} from '@chakra-ui/react'; +import React from 'react'; + +interface CardSiteProps { + site: SiteNFTDetail; + tokenId?: string; // TODO add param and remove optional +} + +type InfoContainerProps = { + heading: string; + info: React.ReactNode; + width: LayoutProps['width']; +}; + +const InfoContainer = ({ heading, info, width }: InfoContainerProps) => ( + +); + +export const SiteCard: React.FC = ({ site, tokenId }) => { + const { name, owner, image, externalUrl } = site; + const navigate = useNavigate(); + return ( + { + navigate(`/detail?tokenId=${1}`); + }} + > + + + {name} + + e.stopPropagation()} + > + + + + + + + {/* TODO add param */} + + e.stopPropagation()} + > + {externalUrl} + + } + /> + + + + ); +}; + diff --git a/ui/src/components/card/index.ts b/ui/src/components/card/index.ts index 83e0c05..fcd6f16 100644 --- a/ui/src/components/card/index.ts +++ b/ui/src/components/card/index.ts @@ -1,2 +1,3 @@ export * from './card-attributes'; +export * from './card-site'; diff --git a/ui/src/components/tile-info/tile-info.tsx b/ui/src/components/tile-info/tile-info.tsx index 80ec6ff..fbc2c8c 100644 --- a/ui/src/components/tile-info/tile-info.tsx +++ b/ui/src/components/tile-info/tile-info.tsx @@ -8,22 +8,36 @@ import { type TileInfoProps = HeadingProps & { heading: string; - info: string; - width?: number; + info: React.ReactNode; + widthText?: number; + textAlignText?: 'center' | 'left'; + direction?: 'column' | 'row'; + alignItems?: string; }; export const TileInfo = forwardRef( - ({ heading, info, width = 250, ...headingProps }, ref) => ( - + ( + { + heading, + info, + widthText = 250, + textAlignText = 'center', + direction = 'column', + alignItems = 'center', + ...headingProps + }, + ref + ) => ( + {heading} {info} diff --git a/ui/src/mocks/index.ts b/ui/src/mocks/index.ts index fcb58a5..8b2343b 100644 --- a/ui/src/mocks/index.ts +++ b/ui/src/mocks/index.ts @@ -1,3 +1,3 @@ export * from './mint-site'; export * from './detail'; - +export * from './list'; diff --git a/ui/src/mocks/list.ts b/ui/src/mocks/list.ts new file mode 100644 index 0000000..1f413dc --- /dev/null +++ b/ui/src/mocks/list.ts @@ -0,0 +1,39 @@ +const listSites = [ + { + tokenId: 1, + name: 'Fleek Test App', + owner: '0x1b5b3e8a7c245d0f2d2b2e29ba11c03ef086c06e', + description: + 'Roronoa Zoro, also known as `Pirate Hunter` Zoro, is the combatant of the Straw Hat Pirates, one of their two swordsmen and one of the Senior Officers of the Straw Hat Grand Fleet. Formerly a bounty hunter, he is the second member of Luffy`s crew and the first to join it, doing so in the Romance Dawn Arc.', + image: + 'https://i.seadn.io/gae/Z0t4BsFONk8ebFnTtog3ricAhEpW_ZPhyhxcjHpofCmslJUc5jQ0OjxUuJbU5-3XE0rJZFf6JVdPFZYqtqyg2ri4gAGRpfwkFcidpw4?auto=format&w=1000', + externalUrl: 'https://onepiece.fandom.com/wiki/Roronoa_Zoro', + ens: 'zoro.eth', + commitHash: '6ea6ad16c46ae85faced7e50555ff7368422f57', + githubRepo: 'https://github.com/fleekxyz/contracts', + }, + { + tokenId: 2, + name: 'Fleek Test App', + owner: '0x1b5b3e8a7c245d0f2d2b2e29ba11c03ef086c06e', + description: + ' Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', + image: 'https://storageapi.fleek.co/fleek-team-bucket/site/fleek-logo.png', + externalUrl: 'https://fleek.co', + ens: 'fleek.eth', + commitHash: '6ea6ad16c46ae85faced7e50555ff7368422f57', + githubRepo: 'https://github.com/fleekxyz/contracts', + }, +]; + +export const fetchMintedSites = async () => { + //TODO get minted sites from api + return new Promise((resolved) => { + setTimeout(() => { + resolved({ + listSites, + }); + }, 2500); + }); +}; + diff --git a/ui/src/views/home/home.tsx b/ui/src/views/home/home.tsx index c47b48f..8ab8596 100644 --- a/ui/src/views/home/home.tsx +++ b/ui/src/views/home/home.tsx @@ -2,15 +2,16 @@ import React from 'react'; import { Heading, Button } from '@chakra-ui/react'; import { Link } from 'react-router-dom'; import { Flex } from '@chakra-ui/react'; +import { ListSites } from './list'; export const Home = () => { return ( - Welcome to Sites as NFTs by Fleek - {/* TODO add list sites */} - + ); }; diff --git a/ui/src/views/home/list.tsx b/ui/src/views/home/list.tsx new file mode 100644 index 0000000..0a56228 --- /dev/null +++ b/ui/src/views/home/list.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { Loading } from '@/components'; +import { fetchMintedSites } from '@/mocks'; +import { SiteNFTDetails } from '@/types'; +import { Grid, GridItem } from '@chakra-ui/react'; +import { useQuery } from 'react-query'; +import { SiteCard } from '@/components'; + +export const ListSites = () => { + const { data, isLoading } = useQuery, Error>( + 'fetchSites', + fetchMintedSites + ); + + if (isLoading) return ; + return ( + + {data && + data.listSites.map((site: SiteNFTDetails) => ( + + + + ))} + + ); +}; +