Shop chests

components/Header.tsx

@@ -43,11 +43,11 @@ function Header({ network }: {network: 'sui' | 'eth'}) {
           		  </ul>
               </li>
               <li className="nav-item dropdown">
-                <Link className={`nav-link ${router.pathname == "/city/stickers" ? "active" : ""}`} href="/city/stickers">Shop</Link>
+                <Link className={`nav-link ${router.pathname == "/city/marketplace" ? "active" : ""}`} href="/city/marketplace">Shop</Link>
                 <ul className="dropdown-menu">
-          			  <li><Link className={`dropdown-item ${router.pathname == "/city/launchpad" ? "active" : ""}`} href="/city/launchpad">Launchpad</Link></li>
-          			  <li style={{pointerEvents: 'none'}}><Link className="dropdown-item" href="/">Marketplace</Link></li>
-          		  </ul>
+                    <li><Link className={`dropdown-item ${router.pathname == "/city/launchpad" ? "active" : ""}`} href="/city/launchpad">Launchpad</Link></li>
+                    <li><Link className={`dropdown-item ${router.pathname == "/city/marketplace" ? "active" : ""}`} href="/city/marketplace">Marketplace</Link></li>
+                </ul>
               </li>
             </>}
           </ul>

pages/city/launchpad.tsx

@@ -10,7 +10,6 @@ const Vault = () => {
           </video>
         </div>
         <div className="col-7">
-          <h3 className="text-white">Access Free Mint</h3>
           <div className='shadow p-3 mb-3 rounded d-flex' style={{background: '#fff'}}>
             <div className="col col-auto d-flex justify-content-center px-2">
               <svg
@@ -71,7 +70,7 @@ const Vault = () => {
               <button className='btn btn-primary btn-lg'>Join</button>
             </div>
           </div>
-          <div className='shadow p-3 mb-3 rounded d-flex' style={{background: 'rgba(255,255,255,0.6)', opacity: 0.6, pointerEvents: 'none'}}>
+          {/* <div className='shadow p-3 mb-3 rounded d-flex' style={{background: 'rgba(255,255,255,0.6)', opacity: 0.6, pointerEvents: 'none'}}>
             <div className="col col-auto d-flex justify-content-center px-2">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="40" enableBackground="new 0 0 64 64"><path d="M32,2C15.431,2,2,15.432,2,32c0,16.568,13.432,30,30,30c16.568,0,30-13.432,30-30C62,15.432,48.568,2,32,2z M25.025,50  l-0.02-0.02L24.988,50L11,35.6l7.029-7.164l6.977,7.184l21-21.619L53,21.199L25.025,50z" fill="#43a047"/></svg>
             </div>
@@ -81,7 +80,7 @@ const Vault = () => {
             <div className='col text-end'>
               <button className='btn btn-success btn-lg'>FREE MINT</button>
             </div>
-          </div>
+          </div> */}
           <div style={{borderTop: '1px solid rgba(255,255,255,0.7)'}}>
             <div className="d-flex justify-content-center pt-4">
               <div className="text-white pt-4 h5 text-end pe-4">

pages/city/marketplace.tsx

@@ -0,0 +1,26 @@
+import Layout from '../../components/Layout'
+import VaultCard, {VaultCardType} from "../../components/VaultCard/VaultCard";
+import {Suspense, useEffect} from "react";
+import BabylonLoader from "../../components/BabylonLoader";
+import HomeScene from "../../scenes/ChestScene";
+
+const MarketPlace = () => {
+    useEffect(() => {
+        document?.body.classList.add('babylon-page');
+
+        return function cleanup() {
+            document?.body.classList.remove('babylon-page');
+        };
+    }, []);
+
+    return (
+        <div className="container pt-5 mt-5">
+            <Suspense fallback={<BabylonLoader isConnected={true} />}>
+                <HomeScene />
+            </Suspense>
+        </div>
+    )
+}
+
+MarketPlace.getLayout = (page: React.ReactElement) => <Layout>{page}</Layout>
+export default MarketPlace;