Mudassir

.yarnrc.yml

@@ -8,4 +8,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
     spec: "@yarnpkg/plugin-typescript"
 
-yarnPath: .yarn/releases/yarn-3.2.3.cjs
+yarnPath: .yarn/releases/yarn-1.22.19.cjs

package.json

@@ -32,5 +32,8 @@
   "devDependencies": {
     "husky": "^8.0.1",
     "lint-staged": "^13.0.3"
+  },
+  "dependencies": {
+    "react-router-dom": "^6.9.0"
   }
 }

packages/nextjs/components/Footer.tsx

@@ -1,4 +1,4 @@
-import { hardhat } from "wagmi/chains";
+// import { hardhat } from "wagmi/chains";
 import { CurrencyDollarIcon } from "@heroicons/react/24/outline";
 import { HeartIcon } from "@heroicons/react/24/outline";
 import { SwitchTheme } from "~~/components/SwitchTheme";
@@ -16,54 +16,28 @@ export const Footer = () => {
     <div className="min-h-0 p-5 mb-11 lg:mb-0">
       <div>
         <div className="fixed flex justify-between items-center w-full z-20 p-4 bottom-0 left-0 pointer-events-none">
-          <div className="flex space-x-2 pointer-events-auto">
+          {/* <div className="flex space-x-2 pointer-events-auto">
             {ethPrice > 0 && (
               <div className="btn btn-primary btn-sm font-normal cursor-auto">
                 <CurrencyDollarIcon className="h-4 w-4 mr-0.5" />
                 <span>{ethPrice}</span>
               </div>
             )}
             {scaffoldConfig.targetNetwork.id === hardhat.id && <Faucet />}
-          </div>
+          </div> */}
           <SwitchTheme className="pointer-events-auto" />
         </div>
       </div>
       <div className="w-full">
         <ul className="menu menu-horizontal w-full">
           <div className="flex justify-center items-center gap-2 text-sm w-full">
             <div>
-              <a
-                href="https://github.com/scaffold-eth/se-2"
-                target="_blank"
-                rel="noreferrer"
-                className="underline underline-offset-2"
-              >
-                Fork me
-              </a>
-            </div>
-            <span>·</span>
-            <div>
-              Built with <HeartIcon className="inline-block h-4 w-4" /> at 🏰{" "}
-              <a
-                href="https://buidlguidl.com/"
-                target="_blank"
-                rel="noreferrer"
-                className="underline underline-offset-2"
-              >
-                BuidlGuidl
-              </a>
-            </div>
-            <span>·</span>
-            <div>
-              <a
-                href="https://t.me/joinchat/KByvmRe5wkR-8F_zz6AjpA"
-                target="_blank"
-                rel="noreferrer"
-                className="underline underline-offset-2"
-              >
-                Support
-              </a>
+              Built with <HeartIcon className="inline-block h-4 w-4" />
             </div>
+            {/* <span>·</span> */}
+            {/* <div>
+              Support
+            </div> */}
           </div>
         </ul>
       </div>

packages/nextjs/components/Header.tsx

@@ -2,8 +2,8 @@ import React, { useCallback, useRef, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import { Bars3Icon, BugAntIcon, SparklesIcon } from "@heroicons/react/24/outline";
-import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
+import { Bars3Icon } from "@heroicons/react/24/outline";
+import { RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
 import { useOutsideClick } from "~~/hooks/scaffold-eth";
 
 const NavLink = ({ href, children }: { href: string; children: React.ReactNode }) => {
@@ -14,9 +14,8 @@ const NavLink = ({ href, children }: { href: string; children: React.ReactNode }
     <Link
       href={href}
       passHref
-      className={`${
-        isActive ? "bg-secondary shadow-md" : ""
-      } hover:bg-secondary hover:shadow-md focus:bg-secondary py-1.5 px-3 text-sm rounded-full gap-2`}
+      className={`${isActive ? "bg-secondary shadow-md" : ""
+        } hover:bg-secondary hover:shadow-md focus:bg-secondary py-1.5 px-3 text-sm rounded-full gap-2`}
     >
       {children}
     </Link>
@@ -40,22 +39,22 @@ export const Header = () => {
         <NavLink href="/">Home</NavLink>
       </li>
       <li>
-        <NavLink href="/debug">
-          <BugAntIcon className="h-4 w-4" />
-          Debug Contracts
-        </NavLink>
+        <NavLink href="/fraction">Fraction</NavLink>
       </li>
       <li>
-        <NavLink href="/example-ui">
-          <SparklesIcon className="h-4 w-4" />
-          Example UI
-        </NavLink>
+        <NavLink href="/assemble">Assemble</NavLink>
+      </li>
+      <li>
+        <NavLink href="/mint">Mint</NavLink>
+      </li>
+      <li>
+        <NavLink href="/burn">Burn</NavLink>
       </li>
     </>
   );
 
   return (
-    <div className="sticky lg:static top-0 navbar bg-base-100 min-h-0 flex-shrink-0 justify-between z-20 shadow-md shadow-secondary">
+    <div className="sticky lg:static top-0 navbar bg-base-100 min-h-10 flex-shrink-0 justify-between z-20 shadow-md shadow-secondary">
       <div className="navbar-start w-auto lg:w-1/2">
         <div className="lg:hidden dropdown" ref={burgerMenuRef}>
           <button
@@ -78,20 +77,19 @@ export const Header = () => {
             </ul>
           )}
         </div>
-        <div className="hidden lg:flex items-center gap-2 ml-4 mr-6">
-          <Link href="/" passHref className="flex relative w-10 h-10">
-            <Image alt="SE2 logo" className="cursor-pointer" fill src="/logo.svg" />
+        <div className="hidden lg:flex items-center gap-2 ml-10 mr-6">
+          <Link href="/" passHref className="flex relative w-15 h-15">
+            {/* <Image alt="bricks" className="cursor-pointer" fill src="/logo.svg" /> */}
+            <div className="flex flex-col">
+              <span className="font-bold leading-tight">BRICKS</span>
+              <span className="text-xs">Fractional Nfts</span>
+            </div>
           </Link>
-          <div className="flex flex-col">
-            <span className="font-bold leading-tight">Scaffold-eth</span>
-            <span className="text-xs">Ethereum dev stack</span>
-          </div>
         </div>
-        <ul className="hidden lg:flex lg:flex-nowrap menu menu-horizontal px-1 gap-2">{navLinks}</ul>
+        <ul className="hidden lg:flex lg:flex-nowrap menu menu-horizontal px-20 gap-5">{navLinks}</ul>
       </div>
       <div className="navbar-end flex-grow mr-4">
         <RainbowKitCustomConnectButton />
-        <FaucetButton />
       </div>
     </div>
   );

packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton.tsx

@@ -53,8 +53,8 @@ export const RainbowKitCustomConnectButton = () => {
                 <div className="px-2 flex justify-end items-center">
                   <div className="flex justify-center items-center border-1 rounded-lg">
                     <div className="flex flex-col items-center">
-                      <Balance address={account.address} className="min-h-0 h-auto" />
-                      <span className="text-xs" style={{ color: networkColor }}>
+                      {/* <Balance address={account.address} className="min-h-0 h-auto" /> */}
+                      <span className="text-s m-2" style={{ color: networkColor}}>
                         {chain.name}
                       </span>
                     </div>

packages/nextjs/pages/_app.tsx

@@ -1,7 +1,9 @@
+import * as React from 'react'
 import { useEffect } from "react";
 import type { AppProps } from "next/app";
 import { RainbowKitProvider } from "@rainbow-me/rainbowkit";
 import "@rainbow-me/rainbowkit/styles.css";
+import { ChakraProvider } from '@chakra-ui/react'
 import NextNProgress from "nextjs-progressbar";
 import { Toaster } from "react-hot-toast";
 import { WagmiConfig } from "wagmi";
@@ -13,6 +15,7 @@ import { useAppStore } from "~~/services/store/store";
 import { wagmiClient } from "~~/services/web3/wagmiClient";
 import { appChains } from "~~/services/web3/wagmiConnectors";
 import "~~/styles/globals.css";
+import { BrowserRouter } from 'react-router-dom';
 
 const ScaffoldEthApp = ({ Component, pageProps }: AppProps) => {
   const price = useEthPrice();
@@ -31,7 +34,10 @@ const ScaffoldEthApp = ({ Component, pageProps }: AppProps) => {
         <div className="flex flex-col min-h-screen">
           <Header />
           <main className="relative flex flex-col flex-1">
-            <Component {...pageProps} />
+
+            <ChakraProvider>
+              <Component {...pageProps} />
+            </ChakraProvider>
           </main>
           <Footer />
         </div>

packages/nextjs/pages/assemble.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import {
+  Button,
+} from '@chakra-ui/react'
+function assemble ()  {
+  return (
+    <>
+      <div className="flex items-center flex-col flex-grow justify-center">
+        <Button colorScheme="blue" size-lg >Assemble</Button>
+      </div>
+    </>
+  )
+}
+
+export default assemble

packages/nextjs/pages/burn.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const burn = () => {
+  return (
+    <div>
+      Burn
+    </div>
+  )
+}
+
+export default burn

packages/nextjs/pages/fraction.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import { useDisclosure } from '@chakra-ui/react'
+import {
+  Button,
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+} from '@chakra-ui/react'
+function fraction() {
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  return (
+    <>
+      <div className="flex items-center flex-col flex-grow justify-center">
+        <Button colorScheme="blue" size-lg onClick={onOpen}>Fraction</Button>
+        <Modal isOpen={isOpen} onClose={onClose}>
+          <ModalOverlay />
+          <ModalContent>
+            <ModalHeader>Burn</ModalHeader>
+            <ModalCloseButton />
+            <ModalFooter>
+              <Button colorScheme="blue" mr={3} onClick={onClose}>
+                No
+              </Button>
+              <Button variant='ghost'>Yes</Button>
+            </ModalFooter>
+          </ModalContent>
+        </Modal>
+      </div>
+    </>
+  )
+}
+
+export default fraction

packages/nextjs/pages/home.tsx

@@ -0,0 +1,109 @@
+import React from 'react'
+import { Card, CardBody, CardFooter, Image, Stack, Heading, Text, Divider, Button, ButtonGroup, CardHeader, SimpleGrid } from '@chakra-ui/react'
+const home = () => {
+    return (
+        <div>
+            <div className="flex items-center flex-col flex-grow pt-10">
+                <div className="px-5">
+                    <h1 className="text-center mb-8">
+                        <span className="block text-2xl mb-2">Welcome to Bricks</span>
+                        <span className="block text-4xl font-bold">The protocol to combine, fractionalize, and trade NFTs.</span>
+                    </h1>
+                    <p className="text-center text-lg">
+                        Transform your NFT collection into a tradable asset with guaranteed liquidity
+                    </p>
+                </div>
+
+                <div className="flex-grow bg-base-300 w-full mt-16 px-8 py-12">
+                    <div className="flex justify-center items-center gap-20 flex-col sm:flex-row">
+                        <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
+                            <p>
+                                Buy and sell fractions of NFTs
+                            </p>
+                            {/* <div>Explore Live Vaults</div> */}
+                            <div className='mt-4 px-4 py-3 bg-base-300 rounded-xl'><Button colorScheme="blue">Explore</Button></div>
+                        </div>
+                        <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
+                            <Card maxW='sm'>
+                                <CardBody>
+                                    <Image
+                                        src='https://nftnow.com/wp-content/uploads/2022/04/Fractional-Doodle-Pickle.png'
+                                        alt='Bored Ape'
+                                        borderRadius='lg'
+                                    />
+                                    <Stack mt='6' spacing='3'>
+                                        <Heading size='md'>Doodle Pickle</Heading>
+                                        <Text>
+                                            Doodle Pickle Yatch Club.
+                                        </Text>
+                                        <Text color='blue.600' fontSize='2xl'>
+                                            $450
+                                        </Text>
+                                    </Stack>
+                                </CardBody>
+                            </Card>
+                        </div>
+                    </div>
+                </div>
+                <div className="px-5">
+                    <h1 className="text-center mb-8">
+                        <span className="block text-2xl pt-5 mb-2">Key Features</span>
+                    </h1>
+                    <p className="text-center text-lg mb-4">
+                        Built by NFT collectors, Bricks brings a revolutionary and unique way to combine your NFT collection, tokenize it and make it tradable.
+                    </p>
+                    <div className="bg-base-300 p-5 rounded-xl items-center justify-center">
+                        <SimpleGrid spacing={4} templateColumns='repeat(auto-fill, minmax(200px, 1fr))'>
+                            <Card>
+                            <CardHeader>
+                                <Heading size='md'> Vault - 1</Heading>
+                            </CardHeader>
+                            <CardBody>
+                                <Text>Some detail about the vault.</Text>
+                            </CardBody>
+                            <CardFooter>
+                                <Button colorScheme="blue">View here</Button>
+                            </CardFooter>
+                        </Card>
+                            <Card>
+                                <CardHeader>
+                                    <Heading size='md'> Vault - 2</Heading>
+                                </CardHeader>
+                                <CardBody>
+                                    <Text>Some detail about the vault.</Text>
+                                </CardBody>
+                                <CardFooter>
+                                    <Button colorScheme="blue">View here</Button>
+                                </CardFooter>
+                            </Card>
+                            <Card>
+                                <CardHeader>
+                                    <Heading size='md'> Vault - 3</Heading>
+                                </CardHeader>
+                                <CardBody>
+                                    <Text>Some detail about the vault.</Text>
+                                </CardBody>
+                                <CardFooter>
+                                    <Button colorScheme="blue">View here</Button>
+                                </CardFooter>
+                            </Card>
+                            <Card>
+                                <CardHeader>
+                                    <Heading size='md'> Vault - 4</Heading>
+                                </CardHeader>
+                                <CardBody>
+                                    <Text>Some detail about the vault.</Text>
+                                </CardBody>
+                                <CardFooter>
+                                    <Button colorScheme="blue">View here</Button>
+                                </CardFooter>
+                            </Card>
+                        </SimpleGrid>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default home