feat: navbar (#183)
* feat: add navbar * style: change bg color navbar * chore: connect wallet button custom. added navigation links * style: change list nfa styles * style: list nfas style change * refactor: add forward-styled-ref and replace button creation (#188) * choer: update import * style: create fleek loco custom icon * style: changes based on new designs --------- Co-authored-by: Felipe Mendes <zo.fmendes@gmail.com>
This commit is contained in:
Camila Sosa Morales
GitHub
parent
4682be82e9
commit
d037565bfb
|
|
@ -1,30 +1,26 @@
|
|||
import { HashRouter, Route, Routes, Navigate } from 'react-router-dom';
|
||||
import { themeGlobals } from '@/theme/globals';
|
||||
import { ComponentsTest, Home, Mint } from './views';
|
||||
import { ConnectKitButton } from 'connectkit';
|
||||
import { ComponentsTest, CreateAP, Home, Mint } from './views';
|
||||
import { MintTest } from './views/mint-test';
|
||||
import { ToastProvider } from './components';
|
||||
import { CreateAP } from './views/access-point';
|
||||
import { AppPage, ToastProvider } from './components';
|
||||
|
||||
export const App = () => {
|
||||
themeGlobals();
|
||||
return (
|
||||
<>
|
||||
<div style={{ position: 'absolute', top: '1.25rem', left: '1.25rem' }}>
|
||||
{/* TODO remove after adding NavBar */}
|
||||
<ConnectKitButton />
|
||||
</div>
|
||||
<ToastProvider />
|
||||
<HashRouter>
|
||||
<Routes>
|
||||
<Route path="/home" element={<Home />} />
|
||||
<Route path="/mint" element={<Mint />} />
|
||||
<Route path="/create-ap/:id" element={<CreateAP />} />
|
||||
{/** TODO remove for release */}
|
||||
<Route path="/components-test" element={<ComponentsTest />} />
|
||||
<Route path="/mint-test" element={<MintTest />} />
|
||||
<Route path="*" element={<Navigate to="/home" />} />
|
||||
</Routes>
|
||||
<ToastProvider />
|
||||
<AppPage>
|
||||
<Routes>
|
||||
<Route path="/" element={<Home />} />
|
||||
<Route path="/mint" element={<Mint />} />
|
||||
<Route path="/create-ap/:id" element={<CreateAP />} />
|
||||
{/** TODO remove for release */}
|
||||
<Route path="/components-test" element={<ComponentsTest />} />
|
||||
<Route path="/mint-test" element={<MintTest />} />
|
||||
<Route path="*" element={<Navigate to="/" />} />
|
||||
</Routes>
|
||||
</AppPage>
|
||||
</HashRouter>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import { dripStitches } from '../../../theme';
|
||||
import { CSS } from '@stitches/react';
|
||||
|
||||
type StyledButtonProps = React.ComponentProps<typeof StyledButton>;
|
||||
import { dripStitches } from '../../../theme';
|
||||
|
||||
type StyledButtonProps = React.ComponentPropsWithRef<typeof StyledButton>;
|
||||
export interface ButtonProps extends StyledButtonProps {
|
||||
/**
|
||||
* If `true`, the button will show a spinner.
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
import { forwardStyledRef } from '@/theme';
|
||||
|
||||
import { ButtonProps, StyledButton } from './button.styles';
|
||||
import { ButtonContent } from './button-content';
|
||||
import { ButtonSpinner } from './button-spinner';
|
||||
import { forwardRef } from 'react';
|
||||
|
||||
export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
export const Button = forwardStyledRef<HTMLButtonElement, ButtonProps>(
|
||||
(props, ref) => {
|
||||
const {
|
||||
isActive,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
import { IconStyles as IS } from '../icon.styles';
|
||||
|
||||
export const BetaTag: React.FC<IS.CustomProps> = (props) => (
|
||||
<IS.Custom
|
||||
{...props}
|
||||
viewBox="0 0 43 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect width="43" height="18" rx="9" fill="#10243E" />
|
||||
<path
|
||||
d="M8.89273 14V5.36H12.3187C12.9027 5.36 13.3807 5.478 13.7527 5.714C14.1287 5.946 14.4067 6.244 14.5867 6.608C14.7707 6.972 14.8627 7.348 14.8627 7.736C14.8627 8.212 14.7487 8.616 14.5207 8.948C14.2967 9.28 13.9907 9.504 13.6027 9.62V9.32C14.1467 9.444 14.5587 9.702 14.8387 10.094C15.1227 10.486 15.2647 10.932 15.2647 11.432C15.2647 11.944 15.1667 12.392 14.9707 12.776C14.7747 13.16 14.4827 13.46 14.0947 13.676C13.7107 13.892 13.2347 14 12.6667 14H8.89273ZM10.3567 12.638H12.4867C12.7387 12.638 12.9647 12.588 13.1647 12.488C13.3647 12.384 13.5207 12.24 13.6327 12.056C13.7487 11.868 13.8067 11.646 13.8067 11.39C13.8067 11.158 13.7567 10.95 13.6567 10.766C13.5567 10.582 13.4107 10.436 13.2187 10.328C13.0267 10.216 12.7967 10.16 12.5287 10.16H10.3567V12.638ZM10.3567 8.81H12.3007C12.5087 8.81 12.6947 8.77 12.8587 8.69C13.0227 8.61 13.1527 8.492 13.2487 8.336C13.3447 8.18 13.3927 7.988 13.3927 7.76C13.3927 7.46 13.2967 7.21 13.1047 7.01C12.9127 6.81 12.6447 6.71 12.3007 6.71H10.3567V8.81ZM19.409 14.18C18.753 14.18 18.177 14.038 17.681 13.754C17.185 13.47 16.797 13.076 16.517 12.572C16.241 12.068 16.103 11.488 16.103 10.832C16.103 10.124 16.239 9.51 16.511 8.99C16.783 8.466 17.161 8.06 17.645 7.772C18.129 7.484 18.689 7.34 19.325 7.34C19.997 7.34 20.567 7.498 21.035 7.814C21.507 8.126 21.857 8.568 22.085 9.14C22.313 9.712 22.399 10.386 22.343 11.162H20.909V10.634C20.905 9.93 20.781 9.416 20.537 9.092C20.293 8.768 19.909 8.606 19.385 8.606C18.793 8.606 18.353 8.79 18.065 9.158C17.777 9.522 17.633 10.056 17.633 10.76C17.633 11.416 17.777 11.924 18.065 12.284C18.353 12.644 18.773 12.824 19.325 12.824C19.681 12.824 19.987 12.746 20.243 12.59C20.503 12.43 20.703 12.2 20.843 11.9L22.271 12.332C22.023 12.916 21.639 13.37 21.119 13.694C20.603 14.018 20.033 14.18 19.409 14.18ZM17.177 11.162V10.07H21.635V11.162H17.177ZM27.4798 14C27.0518 14.08 26.6318 14.114 26.2198 14.102C25.8118 14.094 25.4458 14.02 25.1218 13.88C24.7978 13.736 24.5518 13.51 24.3838 13.202C24.2358 12.922 24.1578 12.636 24.1498 12.344C24.1418 12.052 24.1378 11.722 24.1378 11.354V5.72H25.5778V11.27C25.5778 11.53 25.5798 11.758 25.5838 11.954C25.5918 12.15 25.6338 12.31 25.7098 12.434C25.8538 12.674 26.0838 12.808 26.3998 12.836C26.7158 12.864 27.0758 12.848 27.4798 12.788V14ZM22.9618 8.654V7.52H27.4798V8.654H22.9618ZM30.6852 14.18C30.2172 14.18 29.8212 14.092 29.4972 13.916C29.1732 13.736 28.9272 13.498 28.7592 13.202C28.5952 12.906 28.5132 12.58 28.5132 12.224C28.5132 11.912 28.5652 11.632 28.6692 11.384C28.7732 11.132 28.9332 10.916 29.1492 10.736C29.3652 10.552 29.6452 10.402 29.9892 10.286C30.2492 10.202 30.5532 10.126 30.9012 10.058C31.2532 9.99 31.6332 9.928 32.0412 9.872C32.4532 9.812 32.8832 9.748 33.3312 9.68L32.8152 9.974C32.8192 9.526 32.7192 9.196 32.5152 8.984C32.3112 8.772 31.9672 8.666 31.4832 8.666C31.1912 8.666 30.9092 8.734 30.6372 8.87C30.3652 9.006 30.1752 9.24 30.0672 9.572L28.7472 9.158C28.9072 8.61 29.2112 8.17 29.6592 7.838C30.1112 7.506 30.7192 7.34 31.4832 7.34C32.0592 7.34 32.5652 7.434 33.0012 7.622C33.4412 7.81 33.7672 8.118 33.9792 8.546C34.0952 8.774 34.1652 9.008 34.1892 9.248C34.2132 9.484 34.2252 9.742 34.2252 10.022V14H32.9592V12.596L33.1692 12.824C32.8772 13.292 32.5352 13.636 32.1432 13.856C31.7552 14.072 31.2692 14.18 30.6852 14.18ZM30.9732 13.028C31.3012 13.028 31.5812 12.97 31.8132 12.854C32.0452 12.738 32.2292 12.596 32.3652 12.428C32.5052 12.26 32.5992 12.102 32.6472 11.954C32.7232 11.77 32.7652 11.56 32.7732 11.324C32.7852 11.084 32.7912 10.89 32.7912 10.742L33.2352 10.874C32.7992 10.942 32.4252 11.002 32.1132 11.054C31.8012 11.106 31.5332 11.156 31.3092 11.204C31.0852 11.248 30.8872 11.298 30.7152 11.354C30.5472 11.414 30.4052 11.484 30.2892 11.564C30.1732 11.644 30.0832 11.736 30.0192 11.84C29.9592 11.944 29.9292 12.066 29.9292 12.206C29.9292 12.366 29.9692 12.508 30.0492 12.632C30.1292 12.752 30.2452 12.848 30.3972 12.92C30.5532 12.992 30.7452 13.028 30.9732 13.028Z"
|
||||
fill="#52A9FF"
|
||||
/>
|
||||
</IS.Custom>
|
||||
);
|
||||
|
|
@ -0,0 +1,193 @@
|
|||
import { IconStyles as IS } from '../icon.styles';
|
||||
|
||||
export const FleekLogo: React.FC<IS.CustomProps> = (props) => (
|
||||
<IS.Custom
|
||||
{...props}
|
||||
viewBox="0 0 190 307"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<mask
|
||||
id="mask0_405_242"
|
||||
style={{ maskType: 'alpha' }}
|
||||
maskUnits="userSpaceOnUse"
|
||||
x="0"
|
||||
y="0"
|
||||
width="190"
|
||||
height="307"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M185.723 0.562608C187.422 -1.06048 190.006 1.1527 188.677 3.09299L129.242 89.8622C128.306 91.2276 129.377 93.0695 131.021 92.9251L165.96 89.857C167.7 89.7042 168.749 91.7454 167.616 93.08L107.653 163.772C106.521 165.107 107.57 167.147 109.309 166.995L146.932 163.691C148.773 163.53 149.787 165.786 148.448 167.063L3.32123 305.671C1.62178 307.295 -0.96231 305.081 0.366724 303.141L60.5835 215.23C61.5188 213.865 60.4489 212.022 58.8045 212.167L23.118 215.301C21.3843 215.453 20.3335 213.425 21.4535 212.088L79.6533 142.605C80.7733 141.268 79.7225 139.238 77.9888 139.391L42.112 142.542C40.272 142.703 39.258 140.447 40.5961 139.17L185.723 0.562608Z"
|
||||
fill="black"
|
||||
/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_405_242)">
|
||||
<g filter="url(#filter0_bdiiiii_405_242)">
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M185.723 0.562608C187.422 -1.06048 190.006 1.1527 188.677 3.09299L129.242 89.8622C128.306 91.2276 129.377 93.0695 131.021 92.9251L165.96 89.857C167.7 89.7042 168.749 91.7454 167.616 93.08L107.653 163.772C106.521 165.107 107.57 167.147 109.309 166.995L146.932 163.691C148.773 163.53 149.787 165.786 148.448 167.063L3.32123 305.671C1.62178 307.295 -0.96231 305.081 0.366724 303.141L60.5835 215.23C61.5188 213.865 60.4489 212.022 58.8045 212.167L23.118 215.301C21.3843 215.453 20.3335 213.425 21.4535 212.088L79.6533 142.605C80.7733 141.268 79.7225 139.238 77.9888 139.391L42.112 142.542C40.272 142.703 39.258 140.447 40.5961 139.17L185.723 0.562608Z"
|
||||
fill="black"
|
||||
/>
|
||||
</g>
|
||||
<g style={{ mixBlendMode: 'overlay' }}>
|
||||
<rect
|
||||
x="-5.9873"
|
||||
y="-6.84302"
|
||||
width="205.297"
|
||||
height="317.354"
|
||||
fill="url(#paint0_linear_405_242)"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<filter
|
||||
id="filter0_bdiiiii_405_242"
|
||||
x="-84.6094"
|
||||
y="-84.6094"
|
||||
width="358.263"
|
||||
height="475.453"
|
||||
filterUnits="userSpaceOnUse"
|
||||
colorInterpolationFilters="sRGB"
|
||||
>
|
||||
<feFlood floodOpacity="0" result="BackgroundImageFix" />
|
||||
<feGaussianBlur in="BackgroundImageFix" stdDeviation="42.3047" />
|
||||
<feComposite
|
||||
in2="SourceAlpha"
|
||||
operator="in"
|
||||
result="effect1_backgroundBlur_405_242"
|
||||
/>
|
||||
<feColorMatrix
|
||||
in="SourceAlpha"
|
||||
type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||||
result="hardAlpha"
|
||||
/>
|
||||
<feOffset dy="8.46094" />
|
||||
<feGaussianBlur stdDeviation="21.1523" />
|
||||
<feComposite in2="hardAlpha" operator="out" />
|
||||
<feColorMatrix
|
||||
type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
|
||||
/>
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in2="effect1_backgroundBlur_405_242"
|
||||
result="effect2_dropShadow_405_242"
|
||||
/>
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in="SourceGraphic"
|
||||
in2="effect2_dropShadow_405_242"
|
||||
result="shape"
|
||||
/>
|
||||
<feColorMatrix
|
||||
in="SourceAlpha"
|
||||
type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||||
result="hardAlpha"
|
||||
/>
|
||||
<feOffset dy="8.46094" />
|
||||
<feGaussianBlur stdDeviation="12.6914" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix
|
||||
type="matrix"
|
||||
values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0"
|
||||
/>
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in2="shape"
|
||||
result="effect3_innerShadow_405_242"
|
||||
/>
|
||||
<feColorMatrix
|
||||
in="SourceAlpha"
|
||||
type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||||
result="hardAlpha"
|
||||
/>
|
||||
<feOffset dy="-84.6094" />
|
||||
<feGaussianBlur stdDeviation="42.3047" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix
|
||||
type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
|
||||
/>
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in2="effect3_innerShadow_405_242"
|
||||
result="effect4_innerShadow_405_242"
|
||||
/>
|
||||
<feColorMatrix
|
||||
in="SourceAlpha"
|
||||
type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||||
result="hardAlpha"
|
||||
/>
|
||||
<feOffset dy="-8.46094" />
|
||||
<feGaussianBlur stdDeviation="4.23047" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix
|
||||
type="matrix"
|
||||
values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"
|
||||
/>
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in2="effect4_innerShadow_405_242"
|
||||
result="effect5_innerShadow_405_242"
|
||||
/>
|
||||
<feColorMatrix
|
||||
in="SourceAlpha"
|
||||
type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||||
result="hardAlpha"
|
||||
/>
|
||||
<feOffset dy="42.3047" />
|
||||
<feGaussianBlur stdDeviation="42.3047" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix
|
||||
type="matrix"
|
||||
values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"
|
||||
/>
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in2="effect5_innerShadow_405_242"
|
||||
result="effect6_innerShadow_405_242"
|
||||
/>
|
||||
<feColorMatrix
|
||||
in="SourceAlpha"
|
||||
type="matrix"
|
||||
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
|
||||
result="hardAlpha"
|
||||
/>
|
||||
<feOffset dy="2.11523" />
|
||||
<feGaussianBlur stdDeviation="2.11523" />
|
||||
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
|
||||
<feColorMatrix
|
||||
type="matrix"
|
||||
values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.8 0"
|
||||
/>
|
||||
<feBlend
|
||||
mode="normal"
|
||||
in2="effect6_innerShadow_405_242"
|
||||
result="effect7_innerShadow_405_242"
|
||||
/>
|
||||
</filter>
|
||||
<linearGradient
|
||||
id="paint0_linear_405_242"
|
||||
x1="115.907"
|
||||
y1="25.2346"
|
||||
x2="53.0354"
|
||||
y2="288.271"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#FFE702" />
|
||||
<stop offset="0.333333" stopColor="#FF3DCF" />
|
||||
<stop offset="0.661458" stopColor="#36DCFF" />
|
||||
<stop offset="0.854167" stopColor="#49F0A1" />
|
||||
<stop offset="1" stopColor="#58FF5A" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</IS.Custom>
|
||||
);
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import { IconStyles as IS } from '../icon.styles';
|
||||
|
||||
export const FleekName: React.FC<IS.CustomProps> = (props) => (
|
||||
<IS.Custom
|
||||
{...props}
|
||||
viewBox="0 0 64 21"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5.00733 20.8822C4.54266 20.8822 4.17479 20.7564 3.90373 20.5047C3.65203 20.2336 3.52618 19.8657 3.52618 19.4011V8.77167H1.89983C1.53196 8.77167 1.24154 8.67487 1.02857 8.48125C0.815594 8.26828 0.709106 7.98754 0.709106 7.63903C0.709106 7.27117 0.815594 6.99043 1.02857 6.79681C1.24154 6.6032 1.53196 6.50639 1.89983 6.50639H4.3684L3.52618 7.29053V6.24502C3.52618 4.32824 4.00054 2.88582 4.94924 1.91775C5.89795 0.930321 7.28229 0.349481 9.10226 0.175228L10.0026 0.117145C10.3317 0.0784216 10.5931 0.126825 10.7867 0.262355C10.9803 0.397884 11.1062 0.572136 11.1642 0.78511C11.2223 0.998086 11.2223 1.22074 11.1642 1.45308C11.1255 1.66605 11.0287 1.85967 10.8738 2.03392C10.7189 2.20817 10.5253 2.30498 10.293 2.32434L9.74118 2.35338C8.59886 2.45019 7.76632 2.77933 7.24357 3.34081C6.72081 3.88293 6.45943 4.71547 6.45943 5.83843V6.97107L6.05284 6.50639H9.27651C9.6831 6.50639 9.9832 6.6032 10.1768 6.79681C10.3898 6.99043 10.4963 7.27117 10.4963 7.63903C10.4963 7.98754 10.3898 8.26828 10.1768 8.48125C9.9832 8.67487 9.6831 8.77167 9.27651 8.77167H6.45943V19.4011C6.45943 20.3885 5.9754 20.8822 5.00733 20.8822ZM17.3212 20.9403C15.811 20.9403 14.6686 20.5047 13.8942 19.6334C13.1391 18.7428 12.7616 17.4649 12.7616 15.7998V1.48212C12.7616 0.998086 12.8874 0.63022 13.1391 0.378522C13.3908 0.126825 13.749 0.000976562 14.2137 0.000976562C14.6783 0.000976562 15.0365 0.126825 15.2882 0.378522C15.5593 0.63022 15.6948 0.998086 15.6948 1.48212V15.6256C15.6948 16.5937 15.8884 17.3197 16.2756 17.8037C16.6822 18.2684 17.2631 18.5008 18.0182 18.5008C18.1924 18.5008 18.3473 18.5008 18.4828 18.5008C18.6184 18.4814 18.7539 18.462 18.8894 18.4427C19.1218 18.4233 19.2863 18.4911 19.3831 18.646C19.4799 18.7815 19.5284 19.0719 19.5284 19.5172C19.5284 19.9238 19.4412 20.2433 19.267 20.4756C19.0927 20.6886 18.812 20.8241 18.4248 20.8822C18.2505 20.9016 18.0666 20.9112 17.873 20.9112C17.6793 20.9306 17.4954 20.9403 17.3212 20.9403Z"
|
||||
fill="#ECEDEE"
|
||||
/>
|
||||
<path
|
||||
d="M27.6141 20.9403C26.0652 20.9403 24.7292 20.6499 23.6063 20.069C22.5027 19.4688 21.6411 18.6266 21.0215 17.5424C20.4213 16.4388 20.1212 15.1319 20.1212 13.6217C20.1212 12.1502 20.4213 10.8627 21.0215 9.7591C21.6217 8.65551 22.4446 7.79392 23.4901 7.17436C24.5356 6.5548 25.7263 6.24502 27.0623 6.24502C28.0497 6.24502 28.9306 6.40959 29.7051 6.73873C30.4795 7.04851 31.1378 7.51318 31.6799 8.13275C32.2414 8.73295 32.6577 9.46868 32.9288 10.3399C33.2192 11.2112 33.3644 12.189 33.3644 13.2732C33.3644 13.6023 33.2676 13.854 33.074 14.0283C32.8804 14.1832 32.5899 14.2606 32.2027 14.2606H22.4446V12.46H31.3895L30.8958 12.8666C30.8958 11.8985 30.7506 11.0757 30.4602 10.398C30.1891 9.72038 29.7729 9.2073 29.2114 8.8588C28.6693 8.49093 27.9916 8.307 27.1784 8.307C26.2684 8.307 25.494 8.51997 24.8551 8.94593C24.2355 9.37187 23.7612 9.9624 23.432 10.7175C23.1029 11.4726 22.9383 12.3535 22.9383 13.3603V13.5346C22.9383 15.2384 23.3352 16.5259 24.129 17.3972C24.9422 18.2491 26.1136 18.675 27.6431 18.675C28.2239 18.675 28.8338 18.5976 29.4728 18.4427C30.131 18.2878 30.7506 18.0264 31.3314 17.6585C31.6606 17.4649 31.951 17.3778 32.2027 17.3972C32.4738 17.4165 32.6867 17.5036 32.8416 17.6585C33.0159 17.8134 33.1224 18.007 33.1611 18.2394C33.1998 18.4717 33.1611 18.7137 33.0449 18.9654C32.9288 19.1978 32.7255 19.4107 32.435 19.6044C31.7768 20.0497 31.012 20.3885 30.1407 20.6208C29.2695 20.8338 28.4272 20.9403 27.6141 20.9403Z"
|
||||
fill="#ECEDEE"
|
||||
/>
|
||||
<path
|
||||
d="M42.632 20.9403C41.0831 20.9403 39.7471 20.6499 38.6242 20.069C37.5206 19.4688 36.659 18.6266 36.0394 17.5424C35.4392 16.4388 35.1391 15.1319 35.1391 13.6217C35.1391 12.1502 35.4392 10.8627 36.0394 9.7591C36.6396 8.65551 37.4625 7.79392 38.508 7.17436C39.5535 6.5548 40.7442 6.24502 42.0802 6.24502C43.0676 6.24502 43.9485 6.40959 44.723 6.73873C45.4975 7.04851 46.1557 7.51318 46.6979 8.13275C47.2593 8.73295 47.6756 9.46868 47.9467 10.3399C48.2371 11.2112 48.3823 12.189 48.3823 13.2732C48.3823 13.6023 48.2855 13.854 48.0919 14.0283C47.8983 14.1832 47.6078 14.2606 47.2206 14.2606H37.4625V12.46H46.4074L45.9137 12.8666C45.9137 11.8985 45.7685 11.0757 45.4781 10.398C45.207 9.72038 44.7908 9.2073 44.2293 8.8588C43.6872 8.49093 43.0095 8.307 42.1963 8.307C41.2864 8.307 40.5119 8.51997 39.873 8.94593C39.2534 9.37187 38.7791 9.9624 38.4499 10.7175C38.1208 11.4726 37.9562 12.3535 37.9562 13.3603V13.5346C37.9562 15.2384 38.3531 16.5259 39.1469 17.3972C39.9601 18.2491 41.1315 18.675 42.661 18.675C43.2419 18.675 43.8517 18.5976 44.4907 18.4427C45.149 18.2878 45.7685 18.0264 46.3494 17.6585C46.6785 17.4649 46.9689 17.3778 47.2206 17.3972C47.4917 17.4165 47.7047 17.5036 47.8595 17.6585C48.0338 17.8134 48.1403 18.007 48.179 18.2394C48.2177 18.4717 48.179 18.7137 48.0628 18.9654C47.9467 19.1978 47.7434 19.4107 47.453 19.6044C46.7947 20.0497 46.0299 20.3885 45.1586 20.6208C44.2874 20.8338 43.4452 20.9403 42.632 20.9403Z"
|
||||
fill="#ECEDEE"
|
||||
/>
|
||||
<path
|
||||
d="M52.4514 20.8822C51.9867 20.8822 51.6285 20.7564 51.3768 20.5047C51.1251 20.2336 50.9993 19.8657 50.9993 19.4011V1.48212C50.9993 0.998086 51.1251 0.63022 51.3768 0.378522C51.6285 0.126825 51.9867 0.000976562 52.4514 0.000976562C52.916 0.000976562 53.2742 0.126825 53.5259 0.378522C53.797 0.63022 53.9325 0.998086 53.9325 1.48212V12.6923H53.9906L59.4215 7.29053C59.7312 6.98075 60.012 6.73873 60.2637 6.56448C60.5154 6.39023 60.8445 6.3031 61.2511 6.3031C61.6577 6.3031 61.9675 6.40959 62.1804 6.62256C62.3934 6.83554 62.4999 7.09692 62.4999 7.4067C62.4999 7.69712 62.3547 7.99722 62.0643 8.307L56.314 13.9992V12.6343L62.587 18.8783C62.8968 19.1881 63.042 19.4979 63.0227 19.8076C63.0033 20.1174 62.8775 20.3788 62.6451 20.5918C62.4128 20.7854 62.1224 20.8822 61.7739 20.8822C61.3285 20.8822 60.9704 20.7951 60.6993 20.6208C60.4476 20.4466 60.1475 20.1852 59.799 19.8367L53.9906 14.2025H53.9325V19.4011C53.9325 20.3885 53.4388 20.8822 52.4514 20.8822Z"
|
||||
fill="#ECEDEE"
|
||||
/>
|
||||
</IS.Custom>
|
||||
);
|
||||
|
|
@ -1,2 +1,6 @@
|
|||
export * from './metamask-icon';
|
||||
export * from './ethereum-icon';
|
||||
export * from './fleek-name-icon';
|
||||
export * from './beta-tag-icon';
|
||||
export * from './error-icon';
|
||||
export * from './fleek-logo-icon';
|
||||
|
|
|
|||
|
|
@ -5,16 +5,23 @@ import { AiOutlineCheck } from '@react-icons/all-files/ai/AiOutlineCheck';
|
|||
import { AiOutlineDown } from '@react-icons/all-files/ai/AiOutlineDown';
|
||||
import { BiSearch } from '@react-icons/all-files/bi/BiSearch';
|
||||
import { IoCloudUploadSharp } from '@react-icons/all-files/io5/IoCloudUploadSharp';
|
||||
import { MetamaskIcon, EthereumIcon } from './custom';
|
||||
import {
|
||||
MetamaskIcon,
|
||||
EthereumIcon,
|
||||
ErrorIcon,
|
||||
FleekName,
|
||||
BetaTag,
|
||||
FleekLogo,
|
||||
} from './custom';
|
||||
import { IoCheckmarkCircleSharp } from '@react-icons/all-files/io5/IoCheckmarkCircleSharp';
|
||||
import { AiOutlineTwitter } from '@react-icons/all-files/ai/AiOutlineTwitter';
|
||||
import { ErrorIcon } from './custom/error';
|
||||
import { IoClose } from '@react-icons/all-files/io5/IoClose';
|
||||
import { AiFillCheckCircle } from '@react-icons/all-files/ai/AiFillCheckCircle';
|
||||
import { BiGitBranch } from '@react-icons/all-files/bi/BiGitBranch';
|
||||
|
||||
export const IconLibrary = Object.freeze({
|
||||
back: IoArrowBackCircleSharp,
|
||||
betaTag: BetaTag,
|
||||
branch: BiGitBranch,
|
||||
check: AiOutlineCheck,
|
||||
'check-circle': IoCheckmarkCircleSharp,
|
||||
|
|
@ -22,6 +29,8 @@ export const IconLibrary = Object.freeze({
|
|||
close: IoClose,
|
||||
error: ErrorIcon,
|
||||
ethereum: EthereumIcon,
|
||||
fleekLogo: FleekLogo,
|
||||
fleekName: FleekName,
|
||||
github: IoLogoGithub,
|
||||
info: IoInformationCircleSharp,
|
||||
upload: IoCloudUploadSharp,
|
||||
|
|
|
|||
|
|
@ -4,16 +4,19 @@ import { IconLibrary, IconName, IconType } from './icon-library';
|
|||
|
||||
export type IconProps = {
|
||||
name: IconName;
|
||||
iconElementCss?: React.CSSProperties;
|
||||
} & React.ComponentProps<typeof IconStyles.Container>;
|
||||
|
||||
export const Icon: React.FC<IconProps> = forwardRef<HTMLSpanElement, IconProps>(
|
||||
(props, ref) => {
|
||||
const { name, ...rest } = props;
|
||||
const { name, iconElementCss, ...rest } = props;
|
||||
const IconElement: IconType<typeof name> = IconLibrary[name];
|
||||
|
||||
return (
|
||||
<IconStyles.Container {...rest} ref={ref}>
|
||||
<IconElement style={{ width: '1em', height: '1em' }} />
|
||||
<IconElement
|
||||
style={{ width: '1em', height: '1em', ...iconElementCss }}
|
||||
/>
|
||||
</IconStyles.Container>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
export * from './grid.styles';
|
||||
export * from './flex.styles';
|
||||
export * from './stepper';
|
||||
export * from './nav-bar';
|
||||
export * from './page';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
import { Button, Flex, Icon } from '@/components';
|
||||
import { ConnectKitButton, Avatar } from 'connectkit';
|
||||
|
||||
export const ConnectWalletButton = () => {
|
||||
return (
|
||||
<ConnectKitButton.Custom>
|
||||
{({ isConnected, show, truncatedAddress, address, ensName }) => {
|
||||
return (
|
||||
<Button onClick={show}>
|
||||
{isConnected && !!address && !!truncatedAddress ? (
|
||||
<Flex css={{ gap: '$2' }}>
|
||||
<Avatar address={address} size={20} />
|
||||
<span>{ensName || truncatedAddress}</span>
|
||||
</Flex>
|
||||
) : (
|
||||
'Connect Wallet'
|
||||
)}
|
||||
</Button>
|
||||
);
|
||||
}}
|
||||
</ConnectKitButton.Custom>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1 @@
|
|||
export * from './nav-bar';
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import { dripStitches } from '@/theme';
|
||||
import { Flex } from '../flex.styles';
|
||||
|
||||
const { styled } = dripStitches;
|
||||
export abstract class NavBarStyles {
|
||||
static readonly Container = styled('header', {
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
backgroundColor: 'black',
|
||||
zIndex: '$sticky',
|
||||
height: '$22',
|
||||
});
|
||||
|
||||
static readonly Content = styled('div', {
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
maxWidth: '$7xl',
|
||||
margin: '0 auto',
|
||||
alignItems: 'center',
|
||||
padding: '$6',
|
||||
});
|
||||
|
||||
static readonly Navigation = styled(Flex, {
|
||||
gap: '$10',
|
||||
flexGrow: 4,
|
||||
justifyContent: 'center',
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { Button } from '@/components/core';
|
||||
import { Logo } from '@/components/logo/logo';
|
||||
|
||||
import { ConnectWalletButton } from './connect-wallet-button';
|
||||
import { NavBarStyles as Styles } from './nav-bar.styles';
|
||||
|
||||
export const NavBar: React.FC = () => {
|
||||
return (
|
||||
<Styles.Container>
|
||||
<Styles.Content>
|
||||
<Logo />
|
||||
|
||||
<Styles.Navigation>
|
||||
<Button as={Link} to="/" variant="link" color="gray">
|
||||
Explore
|
||||
</Button>
|
||||
<Button as={Link} to="/mint" variant="link" color="gray">
|
||||
Create
|
||||
</Button>
|
||||
<Button as={Link} to="/" variant="link" color="gray">
|
||||
Learn
|
||||
</Button>
|
||||
</Styles.Navigation>
|
||||
<ConnectWalletButton />
|
||||
</Styles.Content>
|
||||
</Styles.Container>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { NavBar } from '@/components';
|
||||
import { PageStyles as PS } from './page.styles';
|
||||
|
||||
export type AppPageProps = {
|
||||
children: React.ReactNode;
|
||||
};
|
||||
|
||||
export const AppPage: React.FC<AppPageProps> = ({ children }: AppPageProps) => {
|
||||
return (
|
||||
<PS.Container>
|
||||
<NavBar />
|
||||
<PS.Content as="main">{children}</PS.Content>
|
||||
</PS.Container>
|
||||
);
|
||||
};
|
||||
|
||||
AppPage.displayName = 'AppPage';
|
||||
|
|
@ -0,0 +1 @@
|
|||
export * from './app-page';
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
import { dripStitches } from '@/theme';
|
||||
|
||||
const { styled } = dripStitches;
|
||||
|
||||
export abstract class PageStyles {
|
||||
public static readonly Container = styled('div', {
|
||||
minHeight: '100vh',
|
||||
position: 'relative',
|
||||
});
|
||||
|
||||
public static readonly Content = styled('div', {
|
||||
width: '100%',
|
||||
minHeight: '85vh',
|
||||
maxWidth: '$7xl',
|
||||
margin: '0 auto',
|
||||
padding: '$10',
|
||||
display: 'grid',
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
export * from './logo';
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import { dripStitches } from '@/theme';
|
||||
import { Flex } from '../layout';
|
||||
|
||||
const { styled } = dripStitches;
|
||||
export abstract class LogoStyles {
|
||||
static readonly Container = styled(Flex, {
|
||||
cursor: 'pointer',
|
||||
flex: 1,
|
||||
});
|
||||
|
||||
static readonly Logo = styled('img', {
|
||||
width: '$6',
|
||||
height: 'auto',
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import { Icon } from '../core/icon';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { LogoStyles as LS } from './logo.styles';
|
||||
|
||||
export const Logo = () => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<LS.Container onClick={() => navigate('/home')}>
|
||||
<Icon
|
||||
name="fleekLogo"
|
||||
css={{ fontSize: '$2xl' }}
|
||||
iconElementCss={{ height: '$6' }}
|
||||
/>
|
||||
<Icon name="fleekName" css={{ fontSize: '$6xl', mr: '$3' }} />
|
||||
<Icon name="betaTag" css={{ fontSize: '$5xl' }} />
|
||||
</LS.Container>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
import { StyledComponent } from '@stitches/react/types/styled-component';
|
||||
import { forwardRef, ForwardRefRenderFunction } from 'react';
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
export const forwardStyledRef = <T, P = {}>(
|
||||
render: ForwardRefRenderFunction<T, P>
|
||||
): StyledComponent<T, P> => forwardRef<T, P>(render) as StyledComponent<T, P>;
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
export * from './themes';
|
||||
export * from './foundations';
|
||||
export * from './key-frames';
|
||||
export * from './forward-styled-ref';
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { NFAList } from './nfa-list/nfa-list';
|
|||
|
||||
export const Home = () => {
|
||||
return (
|
||||
<Flex css={{ flexDirection: 'column', margin: '$60' }}>
|
||||
<Flex css={{ flexDirection: 'column' }}>
|
||||
<h1>Home</h1>
|
||||
<Link to="/mint">
|
||||
<u>Mint NFA!</u>
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ export const NFAList = () => {
|
|||
};
|
||||
|
||||
return (
|
||||
<Flex css={{ flexDirection: 'column', margin: '$5', gap: '$2' }}>
|
||||
<Flex css={{ flexDirection: 'column', my: '$5', gap: '$2' }}>
|
||||
<Flex css={{ gap: '$2' }}>
|
||||
{/* TODO this will be remove when we have pagination component */}
|
||||
<span>items per page: {pageSize}</span>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
export * from './home';
|
||||
export * from './mint';
|
||||
export * from './components-test';
|
||||
export * from './access-point';
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@ export const MintStepper = () => {
|
|||
transaction: { isSuccess },
|
||||
} = Mint.useTransactionContext();
|
||||
|
||||
|
||||
if (!isSuccess) {
|
||||
return (
|
||||
<Stepper.Root initialStep={1}>
|
||||
|
|
|
|||
|
|
@ -5,8 +5,7 @@ import { Mint as MintContext } from './mint.context';
|
|||
export const Mint = () => (
|
||||
<Flex
|
||||
css={{
|
||||
height: '100%',
|
||||
flexDirection: 'column',
|
||||
flexGrow: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
|
|
|
|||
Loading…
Reference in New Issue