Merge pull request #13 from gagdiez/main

Removed components by default

frontend/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

frontend/README.md

@@ -20,7 +20,16 @@ You can start editing the page by modifying `app/page.js`. The page auto-updates
 
 This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
 
-## Learn More
+## Learn More about NEAR
+
+To learn more about NEAR, take a look at the following resources:
+
+- [NEAR Documentation](https://docs.near.org) - learn about NEAR.
+- [Frontend Docs](https://docs.near.org/build/web3-apps/quickstart) - learn about this example.
+
+You can check out [the NEAR repository](https://github.com/near) - your feedback and contributions are welcome!
+
+## Learn More about Next.js
 
 To learn more about Next.js, take a look at the following resources:
 

frontend/next.config.js

@@ -5,10 +5,10 @@ const nextConfig = {
   images: {
     unoptimized: true,
   },
-  basePath: isProduction? '/hello-near-examples' : '',
+  basePath: isProduction ? '/hello-near-examples' : '',
   output: "export",
   distDir: 'build',
   reactStrictMode: true,
 }
 
-module.exports = nextConfig;
+module.exports = nextConfig;

frontend/package.json

@@ -16,29 +16,18 @@
     "@near-wallet-selector/here-wallet": "^8.9.7",
     "@near-wallet-selector/modal-ui": "^8.9.7",
     "@near-wallet-selector/my-near-wallet": "^8.9.7",
-    "@web3-onboard/core": "^2.21.5",
-    "@web3-onboard/injected-wallets": "^2.10.15",
-    "@web3-onboard/ledger": "^2.6.0",
-    "@web3-onboard/react": "^2.8.16",
-    "@web3-onboard/walletconnect": "^2.5.4",
-    "base64-js": "^1.5.1",
-    "ieee754": "^1.2.1",
+    "bootstrap": "^5",
+    "bootstrap-icons": "^1.11.3",
     "near-api-js": "^3.0.4",
-    "near-social-vm": "github:gagdiez/VM" ,
-    "next": "14.2.0",
-    "pino-pretty": "^11.0.0",
-    "react": "^18.2.0",
-    "react-bootstrap": "^2.10.2",
-    "react-bootstrap-icons": "^1.11.4",
-    "react-dom": "^18.2.0",
-    "react-singleton-hook": "^4.0.1",
-    "zustand": "^4.5.2"
+    "next": "14.2.3",
+    "react": "^18",
+    "react-dom": "^18"
   },
   "overrides": {
     "near-api-js": "^3.0.4"
   },
   "devDependencies": {
-    "eslint": "^8.57.0",
-    "eslint-config-next": "14.2.2"
+    "eslint": "^8",
+    "eslint-config-next": "14.2.3"
   }
 }

frontend/src/components/cards.js

@@ -1,45 +1,32 @@
-import Link from "next/link";
+import Link from 'next/link';
 
-import styles from "../styles/app.module.css";
+import styles from '@/styles/app.module.css';
 
-export const DocsCard = () => {
+export const Cards = () => {
   return (
-    <Link
-      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>
-    </Link>
-  );
-};
+    <div className={styles.grid}>
+      <Link
+        href="https://docs.near.org/build/web3-apps/quickstart"
+        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>
+      </Link>
 
-export const HelloNearCard = () => {
-  return (
-    <Link 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>
-    </Link>
-  );
-};
-
-export const HelloComponentsCard = () => {
-  return (
-    <Link
-      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>
-    </Link>
+      <Link
+        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>
+      </Link>
+    </div>
   );
-};
+};

frontend/src/components/navigation.js

@@ -1,12 +1,12 @@
 import Image from 'next/image';
 import Link from 'next/link';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useContext } from 'react';
 
-import Logo from '/public/near-logo.svg'
-import { useStore } from '@/layout';
+import { NearContext } from '@/context';
+import NearLogo from '/public/near-logo.svg';
 
 export const Navigation = () => {
-  const { signedAccountId, wallet } = useStore();
+  const { signedAccountId, wallet } = useContext(NearContext);
   const [action, setAction] = useState(() => { });
   const [label, setLabel] = useState('Loading...');
 
@@ -20,13 +20,13 @@ export const Navigation = () => {
       setAction(() => wallet.signIn);
       setLabel('Login');
     }
-  }, [signedAccountId, wallet, setAction, setLabel]);
+  }, [signedAccountId, wallet]);
 
   return (
     <nav className="navbar navbar-expand-lg">
       <div className="container-fluid">
         <Link href="/" passHref legacyBehavior>
-          <Image priority src={Logo} alt="NEAR" width="30" height="24" className="d-inline-block align-text-top" />
+          <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>

frontend/src/config.js

@@ -3,21 +3,5 @@ const contractPerNetwork = {
   testnet: 'hello.near-examples.testnet',
 };
 
-const componentsPerNetwork = {
-  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',
-  }
-};
-
 export const NetworkId = 'testnet';
-export const HelloNearContract = contractPerNetwork[NetworkId];
-export const Components = componentsPerNetwork[NetworkId];
+export const HelloNearContract = contractPerNetwork[NetworkId];

frontend/src/context.js

@@ -0,0 +1,13 @@
+import { createContext } from 'react';
+
+/**
+ * @typedef NearContext
+ * @property {import('./wallets/near').Wallet} wallet Current wallet
+ * @property {string} signedAccountId The AccountId of the signed user
+ */
+
+/** @type {import ('react').Context<NearContext>} */
+export const NearContext = createContext({
+  wallet: undefined,
+  signedAccountId: ''
+});

frontend/src/pages/_app.js

@@ -1,10 +1,23 @@
-import RootLayout from "@/layout";
-import "@/styles/globals.css";
+import { useEffect, useState } from 'react';
+
+import '@/styles/globals.css';
+import { NearContext } from '@/context';
+import { Navigation } from '@/components/navigation';
+
+import { Wallet } from '@/wallets/near';
+import { NetworkId, HelloNearContract } from '@/config';
+
+const wallet = new Wallet({ createAccessKeyFor: HelloNearContract, networkId: NetworkId });
 
 export default function MyApp({ Component, pageProps }) {
+  const [signedAccountId, setSignedAccountId] = useState('');
+
+  useEffect(() => { wallet.startUp(setSignedAccountId) }, []);
+
   return (
-    <RootLayout>
+    <NearContext.Provider value={{ wallet, signedAccountId }}>
+      <Navigation />
       <Component {...pageProps} />
-    </RootLayout>
+    </NearContext.Provider>
   );
-}
+}