diff --git a/ui/src/app.tsx b/ui/src/app.tsx index e2aec21..5b8ebf5 100644 --- a/ui/src/app.tsx +++ b/ui/src/app.tsx @@ -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 ( <> -
- {/* TODO remove after adding NavBar */} - -
- - - } /> - } /> - } /> - {/** TODO remove for release */} - } /> - } /> - } /> - + + + + } /> + } /> + } /> + {/** TODO remove for release */} + } /> + } /> + } /> + + ); diff --git a/ui/src/components/core/button/button.styles.ts b/ui/src/components/core/button/button.styles.ts index 44e2694..b757325 100644 --- a/ui/src/components/core/button/button.styles.ts +++ b/ui/src/components/core/button/button.styles.ts @@ -1,7 +1,8 @@ -import { dripStitches } from '../../../theme'; import { CSS } from '@stitches/react'; -type StyledButtonProps = React.ComponentProps; +import { dripStitches } from '../../../theme'; + +type StyledButtonProps = React.ComponentPropsWithRef; export interface ButtonProps extends StyledButtonProps { /** * If `true`, the button will show a spinner. diff --git a/ui/src/components/core/button/button.tsx b/ui/src/components/core/button/button.tsx index a629df8..fbe402a 100644 --- a/ui/src/components/core/button/button.tsx +++ b/ui/src/components/core/button/button.tsx @@ -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( +export const Button = forwardStyledRef( (props, ref) => { const { isActive, diff --git a/ui/src/components/core/icon/custom/beta-tag-icon.tsx b/ui/src/components/core/icon/custom/beta-tag-icon.tsx new file mode 100644 index 0000000..f9ff9a1 --- /dev/null +++ b/ui/src/components/core/icon/custom/beta-tag-icon.tsx @@ -0,0 +1,16 @@ +import { IconStyles as IS } from '../icon.styles'; + +export const BetaTag: React.FC = (props) => ( + + + + +); diff --git a/ui/src/components/core/icon/custom/error.tsx b/ui/src/components/core/icon/custom/error-icon.tsx similarity index 100% rename from ui/src/components/core/icon/custom/error.tsx rename to ui/src/components/core/icon/custom/error-icon.tsx diff --git a/ui/src/components/core/icon/custom/fleek-logo-icon.tsx b/ui/src/components/core/icon/custom/fleek-logo-icon.tsx new file mode 100644 index 0000000..54dcd44 --- /dev/null +++ b/ui/src/components/core/icon/custom/fleek-logo-icon.tsx @@ -0,0 +1,193 @@ +import { IconStyles as IS } from '../icon.styles'; + +export const FleekLogo: React.FC = (props) => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); diff --git a/ui/src/components/core/icon/custom/fleek-name-icon.tsx b/ui/src/components/core/icon/custom/fleek-name-icon.tsx new file mode 100644 index 0000000..8602420 --- /dev/null +++ b/ui/src/components/core/icon/custom/fleek-name-icon.tsx @@ -0,0 +1,27 @@ +import { IconStyles as IS } from '../icon.styles'; + +export const FleekName: React.FC = (props) => ( + + + + + + +); diff --git a/ui/src/components/core/icon/custom/index.ts b/ui/src/components/core/icon/custom/index.ts index e0ce0d3..fd31bc3 100644 --- a/ui/src/components/core/icon/custom/index.ts +++ b/ui/src/components/core/icon/custom/index.ts @@ -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'; diff --git a/ui/src/components/core/icon/icon-library.tsx b/ui/src/components/core/icon/icon-library.tsx index 112148e..b075dda 100644 --- a/ui/src/components/core/icon/icon-library.tsx +++ b/ui/src/components/core/icon/icon-library.tsx @@ -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, diff --git a/ui/src/components/core/icon/icon.tsx b/ui/src/components/core/icon/icon.tsx index 4596dc5..3a23a1d 100644 --- a/ui/src/components/core/icon/icon.tsx +++ b/ui/src/components/core/icon/icon.tsx @@ -4,16 +4,19 @@ import { IconLibrary, IconName, IconType } from './icon-library'; export type IconProps = { name: IconName; + iconElementCss?: React.CSSProperties; } & React.ComponentProps; export const Icon: React.FC = forwardRef( (props, ref) => { - const { name, ...rest } = props; + const { name, iconElementCss, ...rest } = props; const IconElement: IconType = IconLibrary[name]; return ( - + ); } diff --git a/ui/src/components/layout/index.ts b/ui/src/components/layout/index.ts index 3ca6365..8e3e9fa 100644 --- a/ui/src/components/layout/index.ts +++ b/ui/src/components/layout/index.ts @@ -1,3 +1,5 @@ export * from './grid.styles'; export * from './flex.styles'; export * from './stepper'; +export * from './nav-bar'; +export * from './page'; diff --git a/ui/src/components/layout/nav-bar/connect-wallet-button.tsx b/ui/src/components/layout/nav-bar/connect-wallet-button.tsx new file mode 100644 index 0000000..1e2988d --- /dev/null +++ b/ui/src/components/layout/nav-bar/connect-wallet-button.tsx @@ -0,0 +1,23 @@ +import { Button, Flex, Icon } from '@/components'; +import { ConnectKitButton, Avatar } from 'connectkit'; + +export const ConnectWalletButton = () => { + return ( + + {({ isConnected, show, truncatedAddress, address, ensName }) => { + return ( + + ); + }} + + ); +}; diff --git a/ui/src/components/layout/nav-bar/index.ts b/ui/src/components/layout/nav-bar/index.ts new file mode 100644 index 0000000..9b71b48 --- /dev/null +++ b/ui/src/components/layout/nav-bar/index.ts @@ -0,0 +1 @@ +export * from './nav-bar'; diff --git a/ui/src/components/layout/nav-bar/nav-bar.styles.ts b/ui/src/components/layout/nav-bar/nav-bar.styles.ts new file mode 100644 index 0000000..d847160 --- /dev/null +++ b/ui/src/components/layout/nav-bar/nav-bar.styles.ts @@ -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', + }); +} diff --git a/ui/src/components/layout/nav-bar/nav-bar.tsx b/ui/src/components/layout/nav-bar/nav-bar.tsx new file mode 100644 index 0000000..7d660c6 --- /dev/null +++ b/ui/src/components/layout/nav-bar/nav-bar.tsx @@ -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 ( + + + + + + + + + + + + + ); +}; diff --git a/ui/src/components/layout/page/app-page.tsx b/ui/src/components/layout/page/app-page.tsx new file mode 100644 index 0000000..038a057 --- /dev/null +++ b/ui/src/components/layout/page/app-page.tsx @@ -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 = ({ children }: AppPageProps) => { + return ( + + + {children} + + ); +}; + +AppPage.displayName = 'AppPage'; diff --git a/ui/src/components/layout/page/index.ts b/ui/src/components/layout/page/index.ts new file mode 100644 index 0000000..4fc222e --- /dev/null +++ b/ui/src/components/layout/page/index.ts @@ -0,0 +1 @@ +export * from './app-page'; diff --git a/ui/src/components/layout/page/page.styles.ts b/ui/src/components/layout/page/page.styles.ts new file mode 100644 index 0000000..7c67440 --- /dev/null +++ b/ui/src/components/layout/page/page.styles.ts @@ -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', + }); +} diff --git a/ui/src/components/logo/index.ts b/ui/src/components/logo/index.ts new file mode 100644 index 0000000..147e5bd --- /dev/null +++ b/ui/src/components/logo/index.ts @@ -0,0 +1 @@ +export * from './logo'; diff --git a/ui/src/components/logo/logo.styles.ts b/ui/src/components/logo/logo.styles.ts new file mode 100644 index 0000000..62590f0 --- /dev/null +++ b/ui/src/components/logo/logo.styles.ts @@ -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', + }); +} diff --git a/ui/src/components/logo/logo.tsx b/ui/src/components/logo/logo.tsx new file mode 100644 index 0000000..f5630dd --- /dev/null +++ b/ui/src/components/logo/logo.tsx @@ -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 ( + navigate('/home')}> + + + + + ); +}; diff --git a/ui/src/theme/forward-styled-ref.ts b/ui/src/theme/forward-styled-ref.ts new file mode 100644 index 0000000..413ce6d --- /dev/null +++ b/ui/src/theme/forward-styled-ref.ts @@ -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 = ( + render: ForwardRefRenderFunction +): StyledComponent => forwardRef(render) as StyledComponent; diff --git a/ui/src/theme/index.ts b/ui/src/theme/index.ts index bdbfceb..5c1c2bf 100644 --- a/ui/src/theme/index.ts +++ b/ui/src/theme/index.ts @@ -1,3 +1,4 @@ export * from './themes'; export * from './foundations'; export * from './key-frames'; +export * from './forward-styled-ref'; diff --git a/ui/src/views/home/home.tsx b/ui/src/views/home/home.tsx index 35377b1..8c731d7 100644 --- a/ui/src/views/home/home.tsx +++ b/ui/src/views/home/home.tsx @@ -4,7 +4,7 @@ import { NFAList } from './nfa-list/nfa-list'; export const Home = () => { return ( - +

Home

Mint NFA! diff --git a/ui/src/views/home/nfa-list/nfa-list.tsx b/ui/src/views/home/nfa-list/nfa-list.tsx index f8c879a..3b81970 100644 --- a/ui/src/views/home/nfa-list/nfa-list.tsx +++ b/ui/src/views/home/nfa-list/nfa-list.tsx @@ -52,7 +52,7 @@ export const NFAList = () => { }; return ( - + {/* TODO this will be remove when we have pagination component */} items per page: {pageSize} diff --git a/ui/src/views/index.ts b/ui/src/views/index.ts index 5bc4755..ddacf9c 100644 --- a/ui/src/views/index.ts +++ b/ui/src/views/index.ts @@ -1,3 +1,4 @@ export * from './home'; export * from './mint'; export * from './components-test'; +export * from './access-point'; diff --git a/ui/src/views/mint/mint-stepper.tsx b/ui/src/views/mint/mint-stepper.tsx index e532c57..e650068 100644 --- a/ui/src/views/mint/mint-stepper.tsx +++ b/ui/src/views/mint/mint-stepper.tsx @@ -12,7 +12,6 @@ export const MintStepper = () => { transaction: { isSuccess }, } = Mint.useTransactionContext(); - if (!isSuccess) { return ( diff --git a/ui/src/views/mint/mint.tsx b/ui/src/views/mint/mint.tsx index 61b402e..23ddf03 100644 --- a/ui/src/views/mint/mint.tsx +++ b/ui/src/views/mint/mint.tsx @@ -5,8 +5,7 @@ import { Mint as MintContext } from './mint.context'; export const Mint = () => (