Fix for build

GianGuaz256 · Oct 8, 2021 · 3da7240 · 3da7240
1 parent ba9146c
commit 3da7240
Show file tree

Hide file tree

Showing 17 changed files with 2,422 additions and 389 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,3 +1,4 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/core-web-vitals",
+  "rules": { "@next/next/no-document-import-in-page": "off" }
 }
diff --git a/components/CardComponent.tsx b/components/CardComponent.tsx
@@ -77,6 +77,7 @@ const CardDetailToken = (props: Props) => {
                                     src="https://ipfs.io/ipfs/QmeWK2BwtsEsSmRDMwmwCT5PADbyku2Xik5sXtsVQVC9Gw?filename=HE-SLEEP.jpeg"
                                     width={320}
                                     height={320}
+                                    alt="Image Card Component"
                                 />
                             </div>
                             <div className="w-full">

diff --git a/components/CardComponentButton.tsx b/components/CardComponentButton.tsx
@@ -9,7 +9,8 @@ type Props = {
     uri: string;
     index: string;
     modify: boolean;
-    onClick: () => void;
+    onClick?: () => void;
+    onClickUpdate?: () => void;
 }
 
 const CardDetailTokenWithButton = (props: Props) => {
@@ -77,13 +78,14 @@ const CardDetailTokenWithButton = (props: Props) => {
                                 src="https://ipfs.io/ipfs/QmeWK2BwtsEsSmRDMwmwCT5PADbyku2Xik5sXtsVQVC9Gw?filename=HE-SLEEP.jpeg"
                                 width={320}
                                 height={320}
+                                alt="Image Card Component"
                             />
                         </div>
                         {props.modify? (
                             <div className="w-full">
                                 <div className="w-full flex justify-around p-4">
-                                    <button onClick={()=>{props.onClick}} className="mb-2 md:mb-0 border px-8 py-4 text-sm shadow-sm font-medium tracking-wider text-black rounded-xl hover:shadow-lg hover:bg-blue-400">View</button>
-                                    <button onClick={()=>{props.onClick}} className="mb-2 md:mb-0 border px-8 py-4 text-sm shadow-sm font-medium tracking-wider text-black rounded-xl hover:shadow-lg hover:bg-yellow-400">Update</button>
+                                    <button onClick={props.onClick} className="mb-2 md:mb-0 border px-8 py-4 text-sm shadow-sm font-medium tracking-wider text-black rounded-xl hover:shadow-lg hover:bg-blue-400">View</button>
+                                    <button onClick={props.onClickUpdate} className="mb-2 md:mb-0 border px-8 py-4 text-sm shadow-sm font-medium tracking-wider text-black rounded-xl hover:shadow-lg hover:bg-yellow-400">Update</button>
                                 </div>               
                             </div>
                         ) : (

diff --git a/components/ModalItem.tsx b/components/ModalItem.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { Data } from "../utils/web3calls";
+import { Data, getDynamicTokenData } from "../utils/web3calls";
 import Image from 'next/image'
 import axios from "axios";
 
@@ -17,14 +17,22 @@ const Modal = (props: Props) => {
         description: '',
         error: '',
     });
+    const [dynamicData, setDynamicData] = useState<string[]>([])
 
     const { title, image, description, error } = values;
 
     useEffect(()=>{
         console.log(props)
         loadData();
+        getDynamicData()
     }, [])
 
+    const getDynamicData = async() => {
+        const data:string[] = await getDynamicTokenData(props.token.id);
+        setDynamicData(data);
+        console.log(data);
+    }
+
     const loadData = async() => {
         setLoading(true);
         return await axios.get(props.token.uri)
@@ -47,34 +55,32 @@ const Modal = (props: Props) => {
 
     return(
         <>
-        <div className="min-w-screen h-screen animated fadeIn faster  fixed  left-0 top-0 flex justify-center items-center inset-0 z-50 outline-none focus:outline-none bg-no-repeat bg-center bg-cover" id="modal-id">
+        <div className="min-w-screen h-screen animated fadeIn faster fixed left-0 top-0 flex justify-center items-center inset-0 z-50 outline-none focus:outline-none bg-no-repeat bg-center bg-cover" id="modal-id">
             <div className="absolute bg-black opacity-80 inset-0 z-0"></div>
-            <div className="w-full  max-w-lg p-5 relative mx-auto my-auto rounded-xl shadow-lg  bg-white ">
+            <div className="w-full border border-yellow-500 p-5 absolute mx-auto my-auto rounded-xl shadow-lg  bg-white ">
                 <div className="">
-                    <div className="text-center p-5 flex-auto justify-center">
+                    <div className="text-center p-5 flex-auto justify-center border border-black">
                         <div className="w-full flex flex-col justify-center items-center text-center h-20 px-6 py-4">
                             <div className="font-bold text-lg">{`${title} #${props.token.id.toString()}`}</div>
                         </div>
                         <div className="flex items-center justify-center w-full overflow-y-hidden bg-center">
                             <Image 
+                                alt="Image of the Card"
                                 src={'https://ipfs.io/ipfs/QmeWK2BwtsEsSmRDMwmwCT5PADbyku2Xik5sXtsVQVC9Gw?filename=HE-SLEEP.jpeg'}
                                 width={320}
                                 height={320}
                             />
                         </div>
                         <div className="w-full">
-                            <div className="w-full flex justify-between mb-2 p-4">
-                                <a className="flex w-full mb-2" href="#" onClick={()=>{}}>
-                                    <p>{description}</p>
-                                </a> 
+                            <div className="w-full text-center mb-2 p-4">
+                                <p>{description}</p>
                             </div>               
                         </div>   
                     </div>
-                    <div className="p-3  mt-2 text-center space-x-4 md:block">
-                        <button onClick={props.onClick} className="mb-2 md:mb-0 bg-white px-5 py-2 text-sm shadow-sm font-medium tracking-wider border text-gray-600 rounded-full hover:shadow-lg hover:bg-gray-100">
-                            Cancel
+                    <div className="p-3 mt-2 text-center space-x-4 md:block">
+                        <button onClick={props.onClick} className="mb-2 md:mb-0 bg-white px-10 py-4 text-sm shadow-sm font-medium tracking-wider border rounded-xl hover:shadow-lg hover:bg-gray-100">
+                            Close
                         </button>
-                        <button className="mb-2 md:mb-0 bg-red-500 border border-red-500 px-5 py-2 text-sm shadow-sm font-medium tracking-wider text-white rounded-full hover:shadow-lg hover:bg-red-600">Delete</button>
                     </div>
                 </div>
             </div>

diff --git a/components/ModalItemUpdate.tsx b/components/ModalItemUpdate.tsx
@@ -0,0 +1,55 @@
+import { useEffect, useState } from "react";
+import { Data, getDynamicTokenData } from "../utils/web3calls";
+import Image from 'next/image'
+import axios from "axios";
+
+type Props = {
+    onClick: () => void;
+    token: Data;
+}
+
+const ModalUpdate = (props: Props) => {
+
+
+    useEffect(()=>{
+        //
+    }, [])
+
+    return(
+        <>
+        <div className="min-w-screen h-screen animated fadeIn faster fixed left-0 top-0 flex justify-center items-center inset-0 z-50 outline-none focus:outline-none bg-no-repeat bg-center bg-cover" id="modal-id">
+            <div className="absolute bg-black opacity-80 inset-0 z-0"></div>
+            <div className="w-full border border-yellow-500 p-5 absolute mx-auto my-auto rounded-xl shadow-lg  bg-white ">
+                <div className="">
+                    <div className="text-center p-5 flex-auto justify-center border border-black">
+                        <div className="w-full flex flex-col justify-center items-center text-center h-20 px-6 py-4">
+                            <div className="font-bold text-lg">Ciao</div>
+                        </div>
+                        <div className="flex items-center justify-center w-full overflow-y-hidden bg-center">
+                            <Image 
+                                alt="Image of the Card"
+                                src={'https://ipfs.io/ipfs/QmeWK2BwtsEsSmRDMwmwCT5PADbyku2Xik5sXtsVQVC9Gw?filename=HE-SLEEP.jpeg'}
+                                width={320}
+                                height={320}
+                            />
+                        </div>
+                        <div className="w-full">
+                            <div className="w-full text-center mb-2 p-4">
+                                <p>Ciao</p>
+                            </div>               
+                        </div>   
+                    </div>
+                    <div className="p-3 mt-2 text-center space-x-4 md:block">
+                        <button onClick={props.onClick} className="mb-2 md:mb-0 bg-white px-10 py-4 text-sm shadow-sm font-medium tracking-wider border rounded-xl hover:shadow-lg hover:bg-gray-100">
+                            Close
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        </>
+    )
+
+}
+
+export default ModalUpdate;
diff --git a/components/headerLoggedIn/headerIn.js b/components/headerLoggedIn/headerIn.js
@@ -2,15 +2,13 @@
 /** @jsx jsx */
 import { jsx, Container, Flex, Link } from 'theme-ui';
 import { Link as ScrollLink } from 'react-scroll';
-import Logo from '../logo';
 import { DrawerProvider } from '../../contexts/drawer/drawer.provider';
 import MobileDrawer from './mobileDrawer';
 import MENU_DATA from './headerIn.data';
-import logoDark from '../../assets/logo.svg';
 import React, { useState } from 'react';
 import { useRouter } from 'next/router';
-import { useMoralis } from 'react-moralis';
 import Moralis from 'moralis'
+import Image from 'next/image'
 
 export default function HeaderIn({ className, logoutSite }) {
 
@@ -58,22 +56,30 @@ export default function HeaderIn({ className, logoutSite }) {
               </ScrollLink>
             ))}
             <Link sx={styles.btn} to="">
-              <div class="relative inline-block text-left">
+              <div className="relative inline-block text-left">
               <div>
-                <button type="button" onClick={()=>{setIsClicked(!isClicked)}} class="inline-flex justify-center w-full border border-gray-300 shadow-sm rounded-full bg-white text-sm font-medium text-black" id="menu-button" aria-expanded="true" aria-haspopup="true">
-                  <img class="h-10 w-10 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""></img>
+                <button type="button" onClick={()=>{setIsClicked(!isClicked)}} className="inline-flex justify-center w-full border border-gray-300 shadow-sm rounded-full bg-white text-sm font-medium text-black" id="menu-button" aria-expanded="true" aria-haspopup="true">
+                  <div className="h-10 w-10 rounded-full ring-2 ring-white">
+                    <Image 
+                      src={"https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"}
+                      alt=""
+                      layout="fill"
+                      style={{borderRadius: '100%'}}
+                    />
+                  </div>
+                  {/*<img className="h-10 w-10 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""></img>*/}
                 </button>
               </div>
               {isClicked? (
-              <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabIndex="-1">
-                <div class="py-1" role="none">
+              <div className="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabIndex="-1">
+                <div className="py-1" role="none">
                   <form method="POST" action="#" role="none">
-                    <button type="submit" class="text-gray-700 block w-full text-left px-4 py-2 text-sm" role="menuitem" tabIndex="-1" id="menu-item-3">
+                    <button type="submit" className="text-gray-700 block w-full text-left px-4 py-2 text-sm" role="menuitem" tabIndex="-1" id="menu-item-3">
                       Update Profile
                     </button>
                   </form>
                   <form method="POST" action="#" role="none">
-                    <button type="submit" onClick={()=>{logoutFromWallet()}} class="text-gray-700 block w-full text-left px-4 py-2 text-sm" role="menuitem" tabIndex="-1" id="menu-item-3">
+                    <button type="submit" onClick={()=>{logoutFromWallet()}} className="text-gray-700 block w-full text-left px-4 py-2 text-sm" role="menuitem" tabIndex="-1" id="menu-item-3">
                       Sign out
                     </button>
                   </form>

diff --git a/components/headerLoggedIn/mobileDrawer.js b/components/headerLoggedIn/mobileDrawer.js
@@ -61,12 +61,12 @@ const MobileDrawer = () => {
             ))}
           </Box>
           <ScrollLink>
-            <button type="button" class="py-2 px-10 inline-flex justify-center w-full border border-gray-300 shadow-sm rounded-md bg-white text-sm font-medium text-gray-700 hover:bg-gray-50" id="menu-button" aria-expanded="true" aria-haspopup="true">
+            <button type="button" className="py-2 px-10 inline-flex justify-center w-full border border-gray-300 shadow-sm rounded-md bg-white text-sm font-medium text-gray-700 hover:bg-gray-50" id="menu-button" aria-expanded="true" aria-haspopup="true">
               Update Profile
             </button>
           </ScrollLink>
           <ScrollLink>
-            <button type="button" onClick={()=>{logoutFromWallet()}} class="py-2 px-10 inline-flex justify-center w-full border border-gray-300 shadow-sm rounded-md bg-white text-sm font-medium text-gray-700 hover:bg-gray-50" id="menu-button" aria-expanded="true" aria-haspopup="true">
+            <button type="button" onClick={()=>{logoutFromWallet()}} className="py-2 px-10 inline-flex justify-center w-full border border-gray-300 shadow-sm rounded-md bg-white text-sm font-medium text-gray-700 hover:bg-gray-50" id="menu-button" aria-expanded="true" aria-haspopup="true">
               Sign out
             </button>
           </ScrollLink>

diff --git a/components/layout.js → components/layout.tsx b/components/layout.js → components/layout.tsx
@@ -11,22 +11,26 @@ import HeaderLoggedIn from './headerLoggedIn/headerIn';
 import Footer from './footer/footer';
 import { useMoralis } from 'react-moralis'
 
+type Props = {
+  children: React.ReactNode;
+  logged: boolean;
+  modalOpen?: boolean;
+}
 
-
-export default function Layout({ children, logged }) {
+export default function Layout(props: Props) {
 
   const { authenticate, isAuthenticated, user} = useMoralis();
 
   useEffect(()=>{
     console.log(isAuthenticated)
-    if(isAuthenticated && (logged == true)){
+    if(isAuthenticated && (props.logged == true)){
       setLoggedIn(true)
     }
-  })
+  }, [isAuthenticated, props.logged])
 
   const [loggedIn, setLoggedIn] = useState(false);
-  const isSticky = useStickyState('isSticky');
-  const isLoggedIn = useStickyState('logged');
+  const isSticky = useStickyState('isSticky' as any);
+  const isLoggedIn = useStickyState('logged' as any);
   const dispatch = useStickyDispatch();
   const setSticky = useCallback(() => dispatch({ type: 'SET_STICKY' }), [
     dispatch,
@@ -38,7 +42,7 @@ export default function Layout({ children, logged }) {
     dispatch,
   ]);
 
-  const onWaypointPositionChange = ({ currentPosition }) => {
+  const onWaypointPositionChange = (currentPosition: any) => {
     if (currentPosition === 'above') {
       setSticky();
     }
@@ -51,22 +55,22 @@ export default function Layout({ children, logged }) {
     <React.Fragment>
       {loggedIn ? (
         <>
-        <Sticky enabled={isSticky} innerZ={991}>
+        <Sticky enabled={isSticky} innerZ={40}>
           <HeaderLoggedIn 
             logoutSite={()=>setLoggedOut()} 
             className={`${isSticky ? 'sticky' : 'unSticky'}`} />
         </Sticky>
         <Waypoint
           onEnter={removeSticky}
           // onLeave={setSticky}
-          onPositionChange={onWaypointPositionChange}
+          onPositionChange={(obj)=>{onWaypointPositionChange(obj)}}
         />
         <main
           sx={{
             variant: 'layout.main',
           }}
         >
-          {children}
+          {props.children}
         </main>
         </>
       ) : (
@@ -77,14 +81,14 @@ export default function Layout({ children, logged }) {
         <Waypoint
           onEnter={removeSticky}
           // onLeave={setSticky}
-          onPositionChange={onWaypointPositionChange}
+          onPositionChange={(obj)=>{onWaypointPositionChange(obj)}}
         />
         <main
           sx={{
             variant: 'layout.main',
           }}
         >
-          {children}
+          {props.children}
         </main>
         <Footer />
         </>

diff --git a/components/seo.js b/components/seo.js
@@ -2,10 +2,10 @@ import React from 'react';
 import Head from 'next/head';
 
 export default function Seo({
-  description = 'Collection of free top of the line startup landing templates built using react/ next js. Free to download, simply edit and deploy! Updated weekly!',
-  author = 'RedQ, Inc.',
+  description = 'We think NFTs go far beyond static content. Every digital asset has a unique story it needs to tell, and that is why we created the first marketplace where you can buy NFTs and create your own story out of them.',
+  author = 'Guazzo Gianmarco',
   meta,
-  title = 'Startup Crypto Classic Landing',
+  title = 'Dynamic NFT Marketplace',
 }) {
   const metaData = [
     {

diff --git a/custom.d.ts b/custom.d.ts
@@ -0,0 +1,19 @@
+declare module '*.svg' {
+    const content: any;
+    export default content;
+}
+
+declare module '*.png' {
+    const content: any;
+    export default content;
+}
+
+declare module '*.jpg' {
+    const content: any;
+    export default content;
+}
+
+declare module '*.jpeg' {
+    const content: any;
+    export default content;
+}