76 lines
2.1 KiB
TypeScript
76 lines
2.1 KiB
TypeScript
import { useEffect, useMemo, useRef, useState } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
import { Button, Flex, Icon, NFAPreview } from '@/components';
|
|
import { parseNumberToHexColor } from '@/utils/color';
|
|
|
|
import { IndexedNFA } from '../indexed-nfa.context';
|
|
import { IndexedNFAStyles as S } from '../indexed-nfa.styles';
|
|
|
|
const Preview: React.FC = () => {
|
|
const { nfa } = IndexedNFA.useContext();
|
|
|
|
const color = useMemo(
|
|
() => `#${parseNumberToHexColor(nfa.color ?? '')}`,
|
|
[nfa]
|
|
);
|
|
|
|
return (
|
|
<NFAPreview
|
|
color={color}
|
|
logo={nfa.logo}
|
|
ens={nfa.ENS}
|
|
name={nfa.name}
|
|
size="100%"
|
|
css={{
|
|
borderRadius: '$lg',
|
|
border: '1px solid $slate6',
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
|
|
const CreateAccessPoint: React.FC = () => {
|
|
const { nfa } = IndexedNFA.useContext();
|
|
return (
|
|
<S.Aside.CreateAccessPoint.Container>
|
|
<S.Aside.CreateAccessPoint.Heading>
|
|
Host NFA Frontend
|
|
</S.Aside.CreateAccessPoint.Heading>
|
|
{/* TODO: replace with correct text */}
|
|
|
|
<S.Aside.CreateAccessPoint.Text>
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae
|
|
ante erat. Sed quis finibus diam.
|
|
</S.Aside.CreateAccessPoint.Text>
|
|
|
|
<Flex css={{ gap: '$3' }}>
|
|
<Button as={Link} to={`/create-ap/${nfa.tokenId}`} colorScheme="blue">
|
|
Host NFA Frontend
|
|
</Button>
|
|
<S.Aside.CreateAccessPoint.Extra href="">
|
|
{/* TODO: place correct href */}
|
|
Learn more
|
|
<Icon name="chevron-right" />
|
|
</S.Aside.CreateAccessPoint.Extra>
|
|
</Flex>
|
|
</S.Aside.CreateAccessPoint.Container>
|
|
);
|
|
};
|
|
|
|
export const IndexedNFAAsideFragment: React.FC = () => {
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
const [top, setTop] = useState<number>();
|
|
|
|
useEffect(() => {
|
|
setTop(ref.current?.getBoundingClientRect().top);
|
|
}, [ref]);
|
|
|
|
return (
|
|
<S.Aside.Container ref={ref} css={{ top }}>
|
|
<Preview />
|
|
<CreateAccessPoint />
|
|
</S.Aside.Container>
|
|
);
|
|
};
|