update mobile nav and gallery improvements

EdwardsVO · May 19, 2022 · 7b0e44d · 7b0e44d
1 parent decc55c
commit 7b0e44d
Show file tree

Hide file tree

Showing 9 changed files with 139 additions and 92 deletions.
diff --git a/blockchain/NEARprotocol/nft-mintos-contract/mint.sh b/blockchain/NEARprotocol/nft-mintos-contract/mint.sh
@@ -3,19 +3,19 @@ CONTRACT=dev-1651543210027-92386991020888
 USERID=mzterdox.testnet
 echo 'Minting nfts...'
 
-near call $CONTRACT nft_mint '{"token_id": "101", "receiver_id": "'$USERID'","metadata": {"title": "NFT Title", "description":"NFT Description", "media": "https://ipfs.infura.io/ipfs/QmcHkMAknB68W2iqhuGXwJifaf7eQEP92SdNt97ieJGNHY"}}' --accountId $USERID  --amount 3
+near call $CONTRACT nft_mint '{"token_id": "201", "receiver_id": "'$USERID'","metadata": {"title": "NFT Title", "description":"NFT Description", "media": "https://ipfs.infura.io/ipfs/QmcHkMAknB68W2iqhuGXwJifaf7eQEP92SdNt97ieJGNHY"}}' --accountId $USERID  --amount 3
 
-near call $CONTRACT nft_mint '{"token_id": "102", "receiver_id": "'$USERID'","metadata": {"title": "NFT Title", "description":"NFT Description", "media": "https://ipfs.infura.io/ipfs/QmcHkMAknB68W2iqhuGXwJifaf7eQEP92SdNt97ieJGNHY"}}' --accountId $USERID  --amount 3
+near call $CONTRACT nft_mint '{"token_id": "202", "receiver_id": "'$USERID'","metadata": {"title": "NFT Title", "description":"NFT Description", "media": "https://ipfs.infura.io/ipfs/QmcHkMAknB68W2iqhuGXwJifaf7eQEP92SdNt97ieJGNHY"}}' --accountId $USERID  --amount 3
 
-near call $CONTRACT nft_mint '{"token_id": "103", "receiver_id": "'$USERID'","metadata": {"title": "NFT Title", "description":"NFT Description", "media": "https://ipfs.infura.io/ipfs/QmcHkMAknB68W2iqhuGXwJifaf7eQEP92SdNt97ieJGNHY"}}' --accountId $USERID  --amount 3
+near call $CONTRACT nft_mint '{"token_id": "203", "receiver_id": "'$USERID'","metadata": {"title": "NFT Title", "description":"NFT Description", "media": "https://ipfs.infura.io/ipfs/QmcHkMAknB68W2iqhuGXwJifaf7eQEP92SdNt97ieJGNHY"}}' --accountId $USERID  --amount 3
 
-near call $CONTRACT nft_mint '{"token_id": "104", "receiver_id": "'$USERID'","metadata": {"title": "NFT Title", "description":"NFT Description", "media": "https://ipfs.infura.io/ipfs/QmcHkMAknB68W2iqhuGXwJifaf7eQEP92SdNt97ieJGNHY"}}' --accountId $USERID  --amount 3
+near call $CONTRACT nft_mint '{"token_id": "204", "receiver_id": "'$USERID'","metadata": {"title": "NFT Title", "description":"NFT Description", "media": "https://ipfs.infura.io/ipfs/QmcHkMAknB68W2iqhuGXwJifaf7eQEP92SdNt97ieJGNHY"}}' --accountId $USERID  --amount 3
 
-near call $CONTRACT nft_mint '{"token_id": "105", "receiver_id": "'$USERID'","metadata": {"title": "NFT Title", "description":"NFT Description", "media": "https://ipfs.infura.io/ipfs/QmcHkMAknB68W2iqhuGXwJifaf7eQEP92SdNt97ieJGNHY"}}' --accountId $USERID  --amount 3
+near call $CONTRACT nft_mint '{"token_id": "205", "receiver_id": "'$USERID'","metadata": {"title": "NFT Title", "description":"NFT Description", "media": "https://ipfs.infura.io/ipfs/QmcHkMAknB68W2iqhuGXwJifaf7eQEP92SdNt97ieJGNHY"}}' --accountId $USERID  --amount 3
 
-near call $CONTRACT nft_mint '{"token_id": "106", "receiver_id": "'$USERID'","metadata": {"title": "NFT Title", "description":"NFT Description", "media": "https://ipfs.infura.io/ipfs/QmcHkMAknB68W2iqhuGXwJifaf7eQEP92SdNt97ieJGNHY"}}' --accountId $USERID  --amount 3
+near call $CONTRACT nft_mint '{"token_id": "206", "receiver_id": "'$USERID'","metadata": {"title": "NFT Title", "description":"NFT Description", "media": "https://ipfs.infura.io/ipfs/QmcHkMAknB68W2iqhuGXwJifaf7eQEP92SdNt97ieJGNHY"}}' --accountId $USERID  --amount 3
 
-near call $CONTRACT nft_mint '{"token_id": "107", "receiver_id": "'$USERID'","metadata": {"title": "NFT Title", "description":"NFT Description", "media": "https://ipfs.infura.io/ipfs/QmcHkMAknB68W2iqhuGXwJifaf7eQEP92SdNt97ieJGNHY"}}' --accountId $USERID  --amount 3
+near call $CONTRACT nft_mint '{"token_id": "207", "receiver_id": "'$USERID'","metadata": {"title": "NFT Title", "description":"NFT Description", "media": "https://ipfs.infura.io/ipfs/QmcHkMAknB68W2iqhuGXwJifaf7eQEP92SdNt97ieJGNHY"}}' --accountId $USERID  --amount 3
 
-near call $CONTRACT nft_mint '{"token_id": "108", "receiver_id": "'$USERID'","metadata": {"title": "NFT Title", "description":"NFT Description", "media": "https://ipfs.infura.io/ipfs/QmcHkMAknB68W2iqhuGXwJifaf7eQEP92SdNt97ieJGNHY"}}' --accountId $USERID  --amount 3
+near call $CONTRACT nft_mint '{"token_id": "208", "receiver_id": "'$USERID'","metadata": {"title": "NFT Title", "description":"NFT Description", "media": "https://ipfs.infura.io/ipfs/QmcHkMAknB68W2iqhuGXwJifaf7eQEP92SdNt97ieJGNHY"}}' --accountId $USERID  --amount 3
 
diff --git a/blockchain/NEARprotocol/nft-mintos-contract/sale.sh b/blockchain/NEARprotocol/nft-mintos-contract/sale.sh
@@ -5,20 +5,20 @@ USERID=mzterdox.testnet
 
 echo 'Putting nfts on sale...'
 
-near call $CONTRACT nft_approve '{"token_id": "101", "account_id":"'$MARKETCONTRACT'","msg":"{\"sale_conditions\": \"4000000000000000000000000\"}" }' --accountId $USERID --amount 3
+near call $CONTRACT nft_approve '{"token_id": "201", "account_id":"'$MARKETCONTRACT'","msg":"{\"sale_conditions\": \"4000000000000000000000000\"}" }' --accountId $USERID --amount 3
 
-near call $CONTRACT nft_approve '{"token_id": "102", "account_id":"'$MARKETCONTRACT'","msg":"{\"sale_conditions\": \"5000000000000000000000000\"}" }' --accountId $USERID --amount 3
+near call $CONTRACT nft_approve '{"token_id": "202", "account_id":"'$MARKETCONTRACT'","msg":"{\"sale_conditions\": \"5000000000000000000000000\"}" }' --accountId $USERID --amount 3
 
-near call $CONTRACT nft_approve '{"token_id": "103", "account_id":"'$MARKETCONTRACT'","msg":"{\"sale_conditions\": \"6000000000000000000000000\"}" }' --accountId $USERID --amount 3
+near call $CONTRACT nft_approve '{"token_id": "203", "account_id":"'$MARKETCONTRACT'","msg":"{\"sale_conditions\": \"6000000000000000000000000\"}" }' --accountId $USERID --amount 3
 
-near call $CONTRACT nft_approve '{"token_id": "104", "account_id":"'$MARKETCONTRACT'","msg":"{\"sale_conditions\": \"7000000000000000000000000\"}" }' --accountId $USERID --amount 3
+near call $CONTRACT nft_approve '{"token_id": "204", "account_id":"'$MARKETCONTRACT'","msg":"{\"sale_conditions\": \"7000000000000000000000000\"}" }' --accountId $USERID --amount 3
 
-near call $CONTRACT nft_approve '{"token_id": "105", "account_id":"'$MARKETCONTRACT'","msg":"{\"sale_conditions\": \"8000000000000000000000000\"}" }' --accountId $USERID --amount 3
+near call $CONTRACT nft_approve '{"token_id": "205", "account_id":"'$MARKETCONTRACT'","msg":"{\"sale_conditions\": \"8000000000000000000000000\"}" }' --accountId $USERID --amount 3
 
-near call $CONTRACT nft_approve '{"token_id": "106", "account_id":"'$MARKETCONTRACT'","msg":"{\"sale_conditions\": \"9000000000000000000000000\"}" }' --accountId $USERID --amount 3
+near call $CONTRACT nft_approve '{"token_id": "206", "account_id":"'$MARKETCONTRACT'","msg":"{\"sale_conditions\": \"9000000000000000000000000\"}" }' --accountId $USERID --amount 3
 
-near call $CONTRACT nft_approve '{"token_id": "107", "account_id":"'$MARKETCONTRACT'","msg":"{\"sale_conditions\": \"10000000000000000000000000\"}" }' --accountId $USERID --amount 3
+near call $CONTRACT nft_approve '{"token_id": "207", "account_id":"'$MARKETCONTRACT'","msg":"{\"sale_conditions\": \"10000000000000000000000000\"}" }' --accountId $USERID --amount 3
 
-near call $CONTRACT nft_approve '{"token_id": "108", "account_id":"'$MARKETCONTRACT'","msg":"{\"sale_conditions\": \"11000000000000000000000000\"}" }' --accountId $USERID --amount 3
+near call $CONTRACT nft_approve '{"token_id": "208", "account_id":"'$MARKETCONTRACT'","msg":"{\"sale_conditions\": \"11000000000000000000000000\"}" }' --accountId $USERID --amount 3
 
 
diff --git a/frontend/components/Gallery/GalleryInfo.tsx b/frontend/components/Gallery/GalleryInfo.tsx
@@ -105,11 +105,11 @@ export default function GalleryInfo() {
               tokens={searchBarTokens}
             />
           </div>
-          <div className="mt-5 flex space-x-4">
+          {/* <div className="mt-5 flex space-x-4">
             {categories.map((category, i) => (
               <Category categories={category} key={i} />
             ))}
-          </div>
+          </div> */}
           <div className="flex justify-between mt-5">
             <div>
               <h2 className="text-figma-400 font-semibold text-xl">
@@ -136,7 +136,7 @@ export default function GalleryInfo() {
           <div
             className={`mt-3 ${
               view === 'grid'
-                ? 'grid grid-cols-2 gap-3 md:grid-cols-3 lg:flex lg:flex-wrap lg:justify-between'
+                ? 'grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid lg:grid-cols-5 lg:justify-between'
                 : 'text-center md:grid md:grid-cols-3 md:gap-3 lg:grid lg:grid-cols-5 lg:gap-6'
             } text-center`}
           >
@@ -149,7 +149,7 @@ export default function GalleryInfo() {
                   <NFTGalleryPreview
                     key={nft.token.token_id}
                     data={nft}
-                    className={`mt-3 ${
+                    className={`mt-3 lg:mt-0 ${
                       view === 'grid'
                         ? 'w-36 h-36 lg:w-72 lg:h-72 md:w-52 md:h-52 '
                         : 'w-72 h-72 md:w-52 md:h-52 lg:h-72 lg:w-72 '

diff --git a/frontend/components/LandingdApp/Landing.tsx b/frontend/components/LandingdApp/Landing.tsx
@@ -51,11 +51,11 @@ export default function Landing() {
         <div className="mt-2 lg:hidden">
           <SearchBar />
         </div>
-        <div className="mt-5 flex space-x-4">
+        {/* <div className="mt-5 flex space-x-4">
           {categories.map((category, i) => (
             <Category categories={category} key={i} />
           ))}
-        </div>
+        </div> */}
         <div className="mt-8 grid grid-cols-2 gap-3 lg:grid-cols-4 lg:gap-5">
           {categories.map((category, i) => (
             <NFTPreview key={i} data={category} />

diff --git a/frontend/components/Layout.tsx b/frontend/components/Layout.tsx
@@ -47,7 +47,7 @@ function Layout({ children }: LayoutProps) {
       <div className="lg:hidden">
         <MobileNav />
       </div>
-      {children}
+      <div className="pt-16">{children}</div>
       {/* Mobile navs goes on the footer of the page, so no footer will be shown on this screen size. */}
       <div className="hidden lg:block">
         <Footer />

diff --git a/frontend/components/NFT/NFTGalleryPreview.tsx b/frontend/components/NFT/NFTGalleryPreview.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import WholeToken from '../../models/WholeToken';
 import Token from '../../models/Token';
 import { ONE_NEAR_IN_YOCTO, toFixed } from '../utils';
+import useUser from '../../hooks/useUser';
 
 interface NFTGalleryPreviewProps {
   data?: WholeToken;
@@ -14,21 +15,41 @@ export default function NFTGalleryPreview({
   className,
 }: NFTGalleryPreviewProps) {
   const router = useRouter();
+  const [user] = useUser();
+  const [isLogged, setIsLogged] = React.useState(true);
 
+  const checkUser = () => {
+    if (user) {
+      setIsLogged(true);
+    } else {
+      setIsLogged(false);
+    }
+  };
+
+  // React.useEffect(() => {
+  //   if (user) {
+  //     setIsLogged(true);
+  //   } else {
+  //     setIsLogged(false);
+  //   }
+  // }, []);
   return (
     <button
       type="button"
+      className="group"
       onClick={() => router.push(`/app/nft/${data?.token?.token_id}`)}
+      onMouseEnter={() => checkUser()}
+      onMouseLeave={() => setIsLogged(true)}
     >
-      <div className=" bg-figma-700 rounded-md drop-shadow-lg shadow-black">
+      <div className=" bg-figma-700 rounded-md drop-shadow-lg shadow-black group-hover:bg-gray-100/[.7]">
         <div className="p-4">
           <img
             src={
               data?.token?.metadata?.media ||
               'http://cdn.onlinewebfonts.com/svg/img_24787.png'
             }
             alt="peng"
-            className={`rounded-lg object-cover lg:h-72 lg:w-72 md:object-cover lg:object-fill lg:mx-auto ${className}`}
+            className={`rounded-lg object-cover lg:max-h-56 lg:w-56 md:object-cover lg:object-fill lg:mx-auto ${className}`}
           />
           <div className="lg:mx-2">
             <div className="mt-1">
@@ -45,18 +66,29 @@ export default function NFTGalleryPreview({
                 {data?.token?.owner_id}
               </h1>
             </div>
-            <div className="mt-2">
-              <div className="w-full p-px bg-figma-800 rounded-2xl drop-shadow-lg border border-figma-300">
-                {data?.sale?.sale_conditions ? (
-                  <div>
-                    {`${
-                      Number(data?.sale?.sale_conditions) / ONE_NEAR_IN_YOCTO
-                    } N`}
+            <div className="divide-y-4 divide-gray-200">
+              {isLogged ? (
+                <div className="mt-2">
+                  <div className="w-full p-px bg-figma-800 rounded-2xl drop-shadow-lg border border-figma-300 group-hover:bg-gray-100/[.7] group-hover:border-gray-600/[.05]">
+                    {data?.sale?.sale_conditions ? (
+                      <div>
+                        {`${
+                          Number(data?.sale?.sale_conditions) /
+                          ONE_NEAR_IN_YOCTO
+                        } N`}
+                      </div>
+                    ) : (
+                      <button>Put On Sale</button>
+                    )}
                   </div>
-                ) : (
-                  <button>Put On Sale</button>
-                )}
-              </div>
+                </div>
+              ) : (
+                <div className="flex justify-start">
+                  <button className="text-figma-100 font-semibold text-md py-1.5">
+                    Connect
+                  </button>
+                </div>
+              )}
             </div>
           </div>
         </div>

diff --git a/frontend/components/common/MobileNav.tsx b/frontend/components/common/MobileNav.tsx
@@ -27,8 +27,8 @@ export default function MobileNav() {
   }
 
   return (
-    <div className="w-full sticky px-6 rounded-t-2xl">
-      <div className="flex w-full justify-between items-center mt-3">
+    <div className="w-full fixed z-50 bg-figma-200">
+      <div className="flex w-full justify-between items-center mt-3 px-6">
         <div
           className={`menu-btn w-0 ${showMenu ? 'open' : ''}`}
           onClick={onMenuClick}
@@ -54,52 +54,67 @@ export default function MobileNav() {
           )}
         </div>
       </div>
-      {showMenu ? (
-        <div className="bg-figma-200 text-gray-600 min-h-screen flex justify-center text-lg">
-          <div className="mt-4">
-            <h2
-              className={`mt-2 ${
-                currentPage === '/app'
-                  ? 'text-figma-100 underline underline-offset-8 decoration-figma-100 decoration-4'
-                  : ''
-              }`}
-              onClick={() => router.push('/app')}
-            >
-              Home
-            </h2>
-            <h2
-              className={`mt-2 ${
-                currentPage === '/app/gallery'
-                  ? 'text-figma-100 underline underline-offset-8 decoration-figma-100 decoration-4'
-                  : ''
-              }`}
-              onClick={() => router.push('/app/gallery')}
-            >
-              Gallery
-            </h2>
-            <h2
-              className={`mt-2 ${
-                currentPage === '/app/mint'
-                  ? 'text-figma-100 underline underline-offset-8 decoration-figma-100 decoration-4'
-                  : ''
-              }`}
-              onClick={() => router.push('/app/mint')}
-            >
-              Mint
-            </h2>
-            <h2
-              className={`mt-2 ${
-                currentPage === '/app/profile'
-                  ? 'text-figma-100 underline underline-offset-8 decoration-figma-100 decoration-4'
-                  : ''
-              }`}
-              onClick={() => router.push('/app/profile')}
-            >
-              Profile
-            </h2>
+      <div>
+        {showMenu ? (
+          <div className="bg-gray-600/[.7] text-gray-600 min-h-screen flex text-lg absolute w-full">
+            <div className="px-6 bg-gray-100 w-3/4 border-t-2 border-t-gray-200">
+              <h2
+                className={`mt-2 ${
+                  currentPage === '/app'
+                    ? 'text-figma-100 un derline underline-offset-8 decoration-figma-100 decoration-4'
+                    : ''
+                }`}
+                onClick={() => router.push('/app')}
+              >
+                Home
+              </h2>
+              <h2
+                className={`mt-2 ${
+                  currentPage === '/app/gallery'
+                    ? 'text-figma-100 underline underline-offset-8 decoration-figma-100 decoration-4'
+                    : ''
+                }`}
+                onClick={() => router.push('/app/gallery')}
+              >
+                Gallery
+              </h2>
+              <h2
+                className={`mt-2 ${
+                  currentPage === '/app/mint'
+                    ? 'text-figma-100 underline underline-offset-8 decoration-figma-100 decoration-4'
+                    : ''
+                }`}
+                onClick={() => router.push('/app/mint')}
+              >
+                Mint
+              </h2>
+              <h2
+                className={`mt-2 ${
+                  currentPage === '/app/profile'
+                    ? 'text-figma-100 underline underline-offset-8 decoration-figma-100 decoration-4'
+                    : ''
+                }`}
+                onClick={() => router.push('/app/profile')}
+              >
+                Profile
+              </h2>
+              {user ? (
+                <button className="mt-2" onClick={() => onClick()}>
+                  Logout
+                </button>
+              ) : (
+                <h2
+                  className="mt-2
+                  "
+                  onClick={() => logIn()}
+                >
+                  Login
+                </h2>
+              )}
+            </div>
           </div>
-        </div>
-      ) : null}
+        ) : null}
+      </div>
       <LogOutModal setOpen={setShowModal} isOpen={showModal} />
     </div>
   );

diff --git a/frontend/components/common/Navbar.tsx b/frontend/components/common/Navbar.tsx
@@ -5,7 +5,7 @@ import { useNear } from '../../hooks/useNear';
 import useUser from '../../hooks/useUser';
 import LogOutIcon from '../icons/LogOutIcon';
 import Token from '../../models/Token';
-import { initContract } from '../near/near';
+//
 
 export default function Navbar() {
   const router = useRouter();
@@ -27,7 +27,7 @@ export default function Navbar() {
 
   const logOut = async () => {
     await setUser('');
-    router.push('/')
+    router.push('/');
     await nearContext.walletConnection.signOut();
   };
 
@@ -38,7 +38,7 @@ export default function Navbar() {
   };
 
   return (
-    <div className="bg-white w-full drop-shadow-md">
+    <div className="bg-white w-full drop-shadow-md fixed z-50">
       <div className="flex justify-between p-4">
         <div className="mr-44">
           <img src="/logo.png" alt="logo" className="w-36" />

diff --git a/frontend/styles/globals.css b/frontend/styles/globals.css
@@ -28,8 +28,8 @@ a {
 }
 
 .menu-btn__burger {
-  width: 40px;
-  height: 4px;
+  width: 25px;
+  height: 2px;
   background: #473EA8;
   border-radius: 5px;
   box-shadow: 0 2px 5px rgba(20, 6, 1, 0.2);
@@ -39,20 +39,20 @@ a {
 .menu-btn__burger::before, .menu-btn__burger::after {
  content:'';
  position: absolute;
- width: 40px;
- height: 4px;
+ width: 25px;
+ height: 2px;
  background: #473EA8;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(20, 6, 1, 0.2);
  transition: all .2s ease-in-out;
 }
 
 .menu-btn__burger::before {
-  transform: translateY(-16px);
+  transform: translateY(-9px);
 }
 
 .menu-btn__burger::after {
-  transform: translateY(16px);
+  transform: translateY(9px);
 }
 
 /* Animation */