jeffemmett
/
non-fungible-apps
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: nfa icon error image

This commit is contained in:
Camila Sosa Morales 2023-05-10 12:11:21 -03:00
parent 130ef2589c
commit 36223a7620
2 changed files with 45 additions and 232 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
ui/src/components/nfa-icon/nfa-icon.tsx
View File

@ -11,7 +11,10 @@ export const NFAIcon: React.FC<NFAIconProps> = ({
}: NFAIconProps) => { }: NFAIconProps) => {
return ( return (
<NS.Container css={{ backgroundColor: color }}> <NS.Container css={{ backgroundColor: color }}>
<NS.Image src={image} /> <NS.Image
src={image}
onErrorCapture={(event) => (event.currentTarget.style.display = 'none')}
/>
</NS.Container> </NS.Container>
); );
}; };

272
ui/src/views/indexed-nfa/fragments/main.fragment.tsx
View File

@ -3,18 +3,11 @@ import React, { useState } from 'react';
import Rectangle1 from '@/assets/Rectangle-199.png'; import Rectangle1 from '@/assets/Rectangle-199.png';
import Rectangle2 from '@/assets/Rectangle-200.png'; import Rectangle2 from '@/assets/Rectangle-200.png';
import Rectangle3 from '@/assets/Rectangle-201.png'; import Rectangle3 from '@/assets/Rectangle-201.png';
import { import { Combobox, Flex, ResolvedAddress, Text } from '@/components';
Combobox, import { getTimeSince } from '@/utils';
Flex,
Icon,
IconName,
ResolvedAddress,
Text,
} from '@/components';
import { getDate, getRepositoryFromURL, getTimeSince } from '@/utils';
import { IndexedNFAStyles as S } from '../indexed-nfa.styles';
import { IndexedNFA } from '../indexed-nfa.context'; import { IndexedNFA } from '../indexed-nfa.context';
import { IndexedNFAStyles as S } from '../indexed-nfa.styles';
type SortItem = { type SortItem = {
value: string; value: string;
@ -63,147 +56,12 @@ const Header: React.FC = () => {
)} )}
</Combobox> </Combobox>
</Flex> </Flex>
{/* </Flex>
<HeaderData label="Owner">
<ResolvedAddress>{nfa.owner.id}</ResolvedAddress>
</HeaderData>
<S.Main.Divider.Elipse />
<HeaderData label="Created">{getDate(nfa.createdAt)}</HeaderData>
<S.Main.Divider.Elipse />
<HeaderData label="Access Points">
{nfa.accessPoints?.length ?? 0}
</HeaderData>
</Flex> */}
{/* <S.Main.Divider.Line /> */}
</> </>
); );
}; };
// const Description: React.FC = () => { //TODO remove
// const { nfa } = IndexedNFA.useContext();
// return (
// <>
// <S.Main.SectionHeading css={{ marginTop: 0 }}>
// Description
// </S.Main.SectionHeading>
// <S.Main.DataContainer as={S.Main.Paragraph}>
// {nfa.description}
// </S.Main.DataContainer>
// </>
// );
// };
// type DataWrapperProps = React.PropsWithChildren<{
// label: string | number;
// }>;
// const DataWrapper: React.FC<DataWrapperProps> = ({
// children,
// label,
// }: DataWrapperProps) => (
// <S.Main.DataContainer key={label} css={{ flex: 1, minWidth: '45%' }}>
// <Text css={{ color: '$slate12', fontWeight: 700 }}>{children || '-'}</Text>
// <Text css={{ color: '$slate11' }}>{label}</Text>
// </S.Main.DataContainer>
// );
// const Traits: React.FC = () => {
// const { nfa } = IndexedNFA.useContext();
// const traitsToShow = useMemo(() => {
// return [
// [nfa.ENS, 'ENS'],
// [getRepositoryFromURL(nfa.gitRepository.id), 'Repository'],
// ['', 'Version'],
// [nfa.externalURL, 'Domain'],
// ];
// }, [nfa]);
// return (
// <>
// <S.Main.SectionHeading>Traits</S.Main.SectionHeading>
// <S.Main.DataList>
// {traitsToShow.map(([value, label]) => (
// <DataWrapper key={label} label={label}>
// {value}
// </DataWrapper>
// ))}
// </S.Main.DataList>
// </>
// );
// };
// type VerificationBannerProps = {
// verified: boolean;
// };
// const VerificationBanner: React.FC<VerificationBannerProps> = ({
// verified,
// }: VerificationBannerProps) => {
// const [text, icon] = useMemo<[string, IconName]>(() => {
// if (verified)
// return ['This Non Fungible Application is Verified.', 'verified'];
// return ['This Non Fungible Application is not Verified.', 'error'];
// }, [verified]);
// return (
// <S.Main.VerificationBanner verified={verified}>
// {text}
// <Icon
// name={icon}
// css={{
// fontSize: '3.5rem',
// color: '$black',
// position: 'absolute',
// right: 'calc(8% - 1.75rem)',
// zIndex: 1,
// }}
// />
// </S.Main.VerificationBanner>
// );
// };
// const Verification: React.FC = () => {
// const { nfa } = IndexedNFA.useContext();
// return (
// <>
// <S.Main.SectionHeading>Verification</S.Main.SectionHeading>
// <VerificationBanner verified={nfa.verified} />
// <S.Main.DataList>
// <DataWrapper label="Verifier">
// {nfa.verifier ? (
// <ResolvedAddress>{nfa.verifier?.id}</ResolvedAddress>
// ) : (
// '-'
// )}
// </DataWrapper>
// <DataWrapper label="Repository">
// {getRepositoryFromURL(nfa.gitRepository.id)}
// </DataWrapper>
// </S.Main.DataList>
// </>
// );
// };
const thumbnailMocks = [Rectangle1, Rectangle2, Rectangle3]; const thumbnailMocks = [Rectangle1, Rectangle2, Rectangle3];
// TODO: replace mocks with fetched data
const apMocks = new Array(20).fill(0).map((_, index) => ({
thumbnail:
thumbnailMocks[
Math.floor(
Math.random() * (Math.floor(2) - Math.ceil(0) + 1) + Math.ceil(0)
)
],
domain: `domain${index}.com`,
owner: '0x7ED735b7095C05d78dF169F991f2b7f1A1F1A049',
createdAt: `${Math.floor(Math.random() * 30)}m ago`,
}));
const AccessPointsListFragment: React.FC = () => { const AccessPointsListFragment: React.FC = () => {
const { const {
@ -212,94 +70,46 @@ const AccessPointsListFragment: React.FC = () => {
return ( return (
<S.Main.AccessPoint.List> <S.Main.AccessPoint.List>
{accessPoints.map((item, index) => ( {accessPoints && accessPoints?.length > 0 ? (
<S.Main.AccessPoint.Grid key={index}> accessPoints.map((item, index) => (
<S.Main.AccessPoint.Thumbnail> <S.Main.AccessPoint.Grid key={index}>
<img src={Rectangle1} /> <S.Main.AccessPoint.Thumbnail>
</S.Main.AccessPoint.Thumbnail> <img
<S.Main.AccessPoint.Data.Container> src={
<S.Main.AccessPoint.Title>{item.id}</S.Main.AccessPoint.Title> thumbnailMocks[
<Flex Math.floor(
css={{ gap: '$2h', alignItems: 'center', textAlign: 'center' }} Math.random() * (Math.floor(2) - Math.ceil(0) + 1) +
> Math.ceil(0)
<Text css={{ color: '$slate11' }}> )
<ResolvedAddress>{item.owner.id}</ResolvedAddress> ]
</Text> }
<S.Main.Divider.Elipse /> />
<Text css={{ color: '$slate11' }}>220 views</Text> </S.Main.AccessPoint.Thumbnail>
<S.Main.Divider.Elipse /> <S.Main.AccessPoint.Data.Container>
<Text css={{ color: '$slate11' }}> <S.Main.AccessPoint.Title>{item.id}</S.Main.AccessPoint.Title>
{getTimeSince(item.createdAt)} <Flex
</Text> css={{ gap: '$2h', alignItems: 'center', textAlign: 'center' }}
</Flex> >
</S.Main.AccessPoint.Data.Container> <Text css={{ color: '$slate11' }}>
</S.Main.AccessPoint.Grid> <ResolvedAddress>{item.owner.id}</ResolvedAddress>
))} </Text>
<S.Main.Divider.Elipse />
{/* TODO get from bunny CDN */}
<Text css={{ color: '$slate11' }}>220 views</Text>
<S.Main.Divider.Elipse />
<Text css={{ color: '$slate11' }}>
{getTimeSince(item.createdAt)}
</Text>
</Flex>
</S.Main.AccessPoint.Data.Container>
</S.Main.AccessPoint.Grid>
))
) : (
<div>No access points found</div>
)}
</S.Main.AccessPoint.List> </S.Main.AccessPoint.List>
); );
}; };
// const AccessPoints: React.FC = () => {
// const {
// nfa: { accessPoints },
// } = IndexedNFA.useContext();
// return (
// <>
// <S.Main.SectionHeading>Frontends</S.Main.SectionHeading>
// <S.Main.Table.Container>
// <S.Main.Table.Root>
// <colgroup>
// <col span={1} style={{ width: '9.5%' }} />
// <col span={1} style={{ width: '32.5%' }} />
// <col span={1} style={{ width: '32.5%' }} />
// <col span={1} style={{ width: '16%' }} />
// <col span={1} style={{ width: '9.5%' }} />
// </colgroup>
// <S.Main.Table.Head>
// <S.Main.Table.Row>
// <S.Main.Table.Data>
// <S.Main.Table.Marker />
// </S.Main.Table.Data>
// <S.Main.Table.Data>Domain</S.Main.Table.Data>
// <S.Main.Table.Data>Owner</S.Main.Table.Data>
// <S.Main.Table.Data>Created</S.Main.Table.Data>
// <S.Main.Table.Data />
// </S.Main.Table.Row>
// </S.Main.Table.Head>
// <S.Main.Table.Body>
// {accessPoints && accessPoints.length > 0 ? (
// accessPoints.map((item) => (
// <S.Main.Table.Row key={item.id}>
// <S.Main.Table.Data align="center">
// <S.Main.Table.Marker
// variant={item.contentVerified ? 'active' : 'inactive'}
// />
// </S.Main.Table.Data>
// <S.Main.Table.Data>{item.id}</S.Main.Table.Data>
// <S.Main.Table.Data>
// <ResolvedAddress>{item.owner.id}</ResolvedAddress>
// </S.Main.Table.Data>
// <S.Main.Table.Data>
// {getTimeSince(item.createdAt)}
// </S.Main.Table.Data>
// <S.Main.Table.Data>
// <Icon name="external-link" />
// </S.Main.Table.Data>
// </S.Main.Table.Row>
// ))
// ) : (
// <S.Main.Table.Row>
// <S.Main.Table.Data align="center" colSpan={5}>
// <Text>No results</Text>
// </S.Main.Table.Data>
// </S.Main.Table.Row>
// )}
// </S.Main.Table.Body>
// </S.Main.Table.Root>
// </S.Main.Table.Container>
// </>
// );
// };
export const IndexedNFAMainFragment: React.FC = () => { export const IndexedNFAMainFragment: React.FC = () => {
return ( return (