Changes

app/ThemeProvider.js

@@ -0,0 +1,23 @@
+// React
+import React, { createContext, useState, useContext } from 'react';
+
+// Create a context for the theme
+const ThemeContext = createContext();
+
+// Create a provider that will hold the state and enable it to be modified
+export const ThemeProvider = ({ children }) => {
+  const [theme, setTheme] = useState('light');
+
+  const toggleTheme = () => {
+    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+// Create a custom hook that will allow our components to easily access and modify the theme
+export const useTheme = () => useContext(ThemeContext);

app/config.js

@@ -0,0 +1,21 @@
+export const NetworkId = 'testnet';
+
+export const HelloNearContract = {
+  mainnet: 'hello.near-examples.near',
+  testnet: 'hello.near-examples.testnet',
+}
+
+export const ComponentMap = {
+  mainnet: {
+    socialDB: 'social.near',
+    Lido: 'zavodil.near/widget/Lido',
+    HelloNear: 'gagdiez.near/widget/HelloNear',
+    LoveNear: 'gagdiez.near/widget/LoveNear',
+  },
+  testnet: {
+    socialDB: 'v1.social08.testnet',
+    Lido: 'influencer.testnet/widget/Lido',
+    HelloNear: 'influencer.testnet/widget/HelloNear',
+    LoveNear: 'influencer.testnet/widget/LoveNear',
+  }
+} 

app/context/ThemeProvider.js

@@ -0,0 +1,23 @@
+// React
+import React, { createContext, useState, useContext } from 'react';
+
+// Create a context for the theme
+const ThemeContext = createContext();
+
+// Create a provider that will hold the state and enable it to be modified
+export const ThemeProvider = ({ children }) => {
+  const [theme, setTheme] = useState('light');
+
+  const toggleTheme = () => {
+    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+// Create a custom hook that will allow our components to easily access and modify the theme
+export const useTheme = () => useContext(ThemeContext);

app/frontend/cards.js

@@ -0,0 +1,46 @@
+import styles from '../contracts/app.module.css';
+
+export const DocsCard = () => {
+  return (
+    <a
+      href="https://docs.near.org/develop/integrate/quickstart-frontend"
+      className={styles.card}
+      target='_blank'
+      rel="noopener noreferrer"
+    >
+      <h2>
+        Near Docs <span>-&gt;</span>
+      </h2>
+      <p>Learn how this application works, and what you can build on Near.</p>
+    </a>);
+};
+
+export const HelloNearCard = () => {
+  return (
+    <a
+      href="/hello-near"
+      className={styles.card}
+      rel="noopener noreferrer"
+    >
+      <h2>
+        Near Integration <span>-&gt;</span>
+      </h2>
+      <p>Discover how simple it is to interact with a Near smart contract.</p>
+    </a>
+  );
+};
+
+export const HelloComponentsCard = () => {
+  return (
+    <a
+      href="/hello-components"
+      className={styles.card}
+      rel="noopener noreferrer"
+    >
+      <h2>
+        Web3 Components <span>-&gt;</span>
+      </h2>
+      <p>See how Web3 components can help you to create multi-chain apps.</p>
+    </a>
+  );
+};

app/frontend/layouts/NormalMode.tsx

@@ -1,12 +1,10 @@
 import React from 'react';
-import NormalModeHome from './../components/NormalMode/NormalModeHome';
-import NormalModeMarketplaceProductPage from './../components/NormalMode/NormalModeMarketplaceProductPage';
 
 export const NormalMode = () => {
     return (
         <div>
-            <NormalModeHome />
-            <NormalModeMarketplaceProductPage />
+            <Marketplace />
+            <
         </div>
     )
 }

app/frontend/navigation.js

@@ -0,0 +1,36 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+
+import NearLogo from 'public/near-logo.svg';
+import { useWallet } from '../wallets/wallet-selector';
+
+export const Navigation = () => {
+
+  const { signedAccountId, logOut, logIn } = useWallet();
+  const [action, setAction] = useState(() => { });
+  const [label, setLabel] = useState('Loading...');
+
+  useEffect(() => {
+    if (signedAccountId) {
+      setAction(() => logOut);
+      setLabel(`Logout ${signedAccountId}`);
+    } else {
+      setAction(() => logIn);
+      setLabel('Login');
+    }
+  }, [signedAccountId, logOut, logIn, setAction, setLabel]);
+
+  return (
+    <nav className="navbar navbar-expand-lg">
+      <div className="container-fluid">
+        <Link href="/" passHref legacyBehavior>
+          <Image priority src={NearLogo} alt="NEAR" width="30" height="24" className="d-inline-block align-text-top" />
+        </Link>
+        <div className='navbar-nav pt-1'>
+          <button className="btn btn-secondary" onClick={action} > {label} </button>
+        </div>
+      </div>
+    </nav>
+  );
+};