create-near-app 6.4.4 → 7.0.0-beta.0

package/dist/app.js

@@ -34,13 +34,14 @@ const show = __importStar(require("./messages"));
     const prompt = await (0, user_input_1.promptAndGetConfig)();
     if (prompt === undefined)
         return;
-    const { config: { projectName, contract, frontend, install, }, projectPath, } = prompt;
+    const { config: { projectName, contract, frontend, components, install, }, projectPath, } = prompt;
     show.creatingApp();
     let createSuccess;
     try {
         createSuccess = await (0, make_1.createProject)({
             contract,
             frontend,
+            components,
             templatesDir: path_1.default.resolve(__dirname, '../templates'),
             projectPath,
         });

package/dist/make.js

@@ -32,12 +32,12 @@ const cross_spawn_1 = __importDefault(require("cross-spawn"));
 const fs_1 = __importDefault(require("fs"));
 const ncp_1 = require("ncp");
 const path_1 = __importDefault(require("path"));
-async function createProject({ contract, frontend, projectPath, templatesDir }) {
+async function createProject({ contract, frontend, components, projectPath, templatesDir }) {
     if (contract !== 'none') {
         await createContract({ contract, projectPath, templatesDir });
     }
     else {
-        await createGateway({ frontend, projectPath, templatesDir });
+        await createGateway({ frontend, components, projectPath, templatesDir });
     }
     return true;
 }
@@ -48,10 +48,14 @@ async function createContract({ contract, projectPath, templatesDir }) {
     fs_1.default.mkdirSync(projectPath, { recursive: true });
     await copyDir(sourceContractDir, projectPath);
 }
-async function createGateway({ frontend, projectPath, templatesDir }) {
+async function createGateway({ frontend, components, projectPath, templatesDir }) {
     const sourceFrontendDir = path_1.default.resolve(`${templatesDir}/frontend/${frontend}`);
     fs_1.default.mkdirSync(projectPath, { recursive: true });
     await copyDir(sourceFrontendDir, projectPath);
+    if (components) {
+        const sourceComponentsDir = path_1.default.resolve(`${templatesDir}/frontend/components/${frontend}`);
+        await copyDir(sourceComponentsDir, projectPath);
+    }
 }
 // Wrap `ncp` tool to wait for the copy to finish when using `await`
 function copyDir(source, dest) {

package/dist/messages.js

@@ -34,7 +34,7 @@ const frontendTemplates = {
 };
 const successFrontendToText = (frontend) => frontend === 'none'
     ? ''
-    : (0, chalk_1.default) `a gateway using ${frontendTemplates[frontend]}`;
+    : (0, chalk_1.default) `a web-app using ${frontendTemplates[frontend]}`;
 exports.successFrontendToText = successFrontendToText;
 const setupSuccess = (projectName, contract, frontend, install) => (0, exports.show)((0, chalk_1.default) `
 {green ======================================================}
@@ -72,10 +72,10 @@ const gatewayInstructions = (projectName, frontend, install) => frontend === 'no
          {blue cd {bold ${projectName}}}
 ${!install
         ? (0, chalk_1.default) `   - {inverse Install all dependencies}
-         {blue pnpm {bold install}}`
+         {blue npm {bold install}}`
         : 'Then:'}
    - {inverse Start your app}:
-         {blue pnpm {bold run dev}}`;
+         {blue npm {bold run dev}}`;
 exports.gatewayInstructions = gatewayInstructions;
 const argsError = (msg) => (0, exports.show)((0, chalk_1.default) `{red Arguments error: {white ${msg}}}
 

package/dist/tracking.js

@@ -10,7 +10,7 @@ const MIXPANEL_TOKEN = '24177ef1ec09ffea5cb6f68909c66a61';
 const tracker = mixpanel_1.default.init(MIXPANEL_TOKEN);
 exports.trackingMessage = (0, chalk_1.default) `Near collects anonymous information on the commands used. No personal information that could identify you is shared`;
 // TODO: track different failures & install usage
-const trackUsage = async (frontend, contract) => {
+const trackUsage = async (frontend, components, contract) => {
     // prevents logging from CI
     if (process.env.NEAR_ENV === 'ci' || process.env.NODE_ENV === 'ci') {
         console.log('Mixpanel logging is skipped in CI env');
@@ -19,6 +19,7 @@ const trackUsage = async (frontend, contract) => {
     try {
         const mixPanelProperties = {
             frontend,
+            components,
             contract,
             os: process.platform,
             nodeVersion: process.versions.node,

package/dist/user-input.js

@@ -46,20 +46,24 @@ async function getUserArgs() {
     const options = commander_1.program.opts();
     const [projectName] = commander_1.program.args;
     const { contract, frontend, install } = options;
-    return { contract, frontend, projectName, install };
+    return { contract, frontend, components: false, projectName, install };
 }
 exports.getUserArgs = getUserArgs;
 const appChoices = [
-    { title: 'A Near Gateway (Web App)', description: 'A multi-chain App that talks with Near contracts and Near components', value: 'gateway' },
-    { title: 'A Near Smart Contract', description: 'A smart contract to be deployed in the Near Blockchain', value: 'contract' },
+    { title: 'A Web App', description: 'A Web App that talks with Near contracts', value: 'gateway' },
+    { title: 'A Smart Contract', description: 'A smart contract to be deployed in the Near Blockchain', value: 'contract' },
 ];
 const contractChoices = [
     { title: 'JS/TS Contract', description: 'A Near contract written in javascript/typescript', value: 'ts' },
     { title: 'Rust Contract', description: 'A Near contract written in Rust', value: 'rs' },
 ];
 const frontendChoices = [
-    { title: 'NextJs (Classic)', description: 'A composable app built using Next.js, React and Near components', value: 'next-page' },
-    { title: 'NextJS (App Router)', description: 'A composable app built using Next.js, React and Near components', value: 'next-app' },
+    { title: 'NextJs (Classic)', description: 'A web-app built using Next.js Page Router', value: 'next-page' },
+    { title: 'NextJS (App Router)', description: 'A web-app built using Next.js new App Router', value: 'next-app' },
+];
+const componentChoices = [
+    { title: 'No', value: false },
+    { title: 'Yes', value: true },
 ];
 const appPrompt = {
     type: 'select',
@@ -70,9 +74,15 @@ const appPrompt = {
 const frontendPrompt = {
     type: 'select',
     name: 'frontend',
-    message: 'Select a framework for your frontend (Gateway)',
+    message: 'Select a framework for your frontend',
     choices: frontendChoices,
 };
+const componentsPrompt = {
+    type: 'select',
+    name: 'components',
+    message: 'Are you planning in using on-chain NEAR Components (aka BOS Components)?',
+    choices: componentChoices,
+};
 const contractPrompt = [
     {
         type: 'select',
@@ -102,15 +112,15 @@ async function getUserAnswers() {
     const { app } = await promptUser(appPrompt);
     if (app === 'gateway') {
         // If gateway, ask for the framework to use
-        const { frontend, projectName, install } = await promptUser([frontendPrompt, namePrompts, npmPrompt]);
-        return { frontend, contract: 'none', projectName, install };
+        const { frontend, components, projectName, install } = await promptUser([frontendPrompt, componentsPrompt, namePrompts, npmPrompt]);
+        return { frontend, components, contract: 'none', projectName, install };
     }
     else {
         // If contract, ask for the language for the contract
         let { contract } = await promptUser(contractPrompt);
         const { projectName } = await promptUser(namePrompts);
         const install = contract === 'ts' ? (await promptUser(npmPrompt)).install : false;
-        return { frontend: 'none', contract, projectName, install };
+        return { frontend: 'none', components: false, contract, projectName, install };
     }
 }
 exports.getUserAnswers = getUserAnswers;
@@ -135,8 +145,8 @@ async function promptAndGetConfig() {
     if (!validateUserArgs(args))
         return;
     // track user input
-    const { frontend, contract } = args;
-    (0, tracking_1.trackUsage)(frontend, contract);
+    const { frontend, components, contract } = args;
+    (0, tracking_1.trackUsage)(frontend, components, contract);
     let path = (0, exports.projectPath)(args.projectName);
     if (fs_1.default.existsSync(path)) {
         return show.directoryExists(path);
@@ -160,7 +170,6 @@ const validateUserArgs = (args) => {
         return false;
     }
     if ((args.contract === 'none') === (args.frontend === 'none')) {
-        console.log(args.contract, args.frontend);
         show.argsError('Please create a contract OR a frontend');
         return false;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-near-app",
-  "version": "6.4.4",
+  "version": "7.0.0-beta.0",
   "description": "Quickly scaffold your dApp on NEAR Blockchain",
   "main": "index.js",
   "engines": {

package/templates/frontend/components/next-app/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "hello-near",
+  "version": "1.0.0",
+  "private": true,
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@near-wallet-selector/core": "^8.9.7",
+    "@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",
+    "bootstrap": "^5.3.3",
+    "ieee754": "^1.2.1",
+    "near-api-js": "^3.0.4",
+    "near-social-vm": "github:gagdiez/VM",
+    "next": "14.2.0",
+    "pino-pretty": "^11.0.0",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "overrides": {
+    "near-api-js": "^3.0.4"
+  },
+  "devDependencies": {
+    "eslint": "^8.57.0",
+    "eslint-config-next": "14.2.2"
+  }
+}

package/templates/frontend/{next-app → components/next-app}/src/app/hello-components/page.js

@@ -1,14 +1,16 @@
-'use client';
 import dynamic from 'next/dynamic';
 
 import styles from '@/app/app.module.css';
-import { DocsCard, HelloNearCard } from '@/components/cards';
+import { Cards } from '@/components/cards';
 import { Components } from '@/config';
 
-const Component = dynamic(() => import('@/components/vm-component'), { ssr: false });
+const Component = dynamic(() => import('@/components/vm'), {
+  ssr: false,
+  loading: () => <p>Loading Component...</p>,
+});
 
-export default function HelloComponents() {
 
+export default function HelloComponents() {
   return (
     <>
       <main className={styles.main}>
@@ -19,9 +21,11 @@ export default function HelloComponents() {
           </p>
         </div>
         <div className={styles.center}>
-          <h1> <code>Multi-chain</code> Components Made Simple </h1>
+          <h1>
+            <code>Multi-chain</code> Components Made Simple
+          </h1>
         </div>
-        <div className='row'>
+        <div className="row">
           <div className="col-6">
             <Component src={Components.HelloNear} />
             <p className="my-4">&nbsp;</p>
@@ -34,10 +38,9 @@ export default function HelloComponents() {
         <hr />
 
         <div className={styles.grid}>
-          <DocsCard />
-          <HelloNearCard />
+          <Cards />
         </div>
       </main>
     </>
   );
-}
+}

package/templates/frontend/components/next-app/src/components/cards.js

@@ -0,0 +1,43 @@
+import Link from 'next/link';
+
+import styles from '@/app/app.module.css';
+
+export const Cards = () => {
+  return (
+    <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>
+
+      <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>
+
+      <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>
+    </div>
+  );
+};

package/templates/frontend/{next-app/src/components/vm-component.js → components/next-app/src/components/vm.js}

@@ -1,13 +1,15 @@
-import { Widget, EthersProviderContext } from 'near-social-vm';
-import { useEthersProviderContext } from '@/wallets/web3-wallet';
-import { useInitNear } from 'near-social-vm';
-import { useEffect } from 'react';
-import { useStore } from '@/app/layout';
+'use client';
+
+import { useEffect, useContext } from 'react';
+import { useInitNear, Widget, EthersProviderContext } from 'near-social-vm';
+
+import { NearContext } from '@/context';
 import { NetworkId } from '@/config';
+import { useEthersProviderContext } from '@/wallets/eth';
 
 export default function Component({ src }) {
   const ethersContext = useEthersProviderContext();
-  const { wallet } = useStore();
+  const { wallet } = useContext(NearContext);
   const { initNear } = useInitNear();
 
   useEffect(() => {

package/templates/frontend/components/next-app/src/config.js

@@ -0,0 +1,23 @@
+const contractPerNetwork = {
+  mainnet: 'hello.near-examples.near',
+  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];

package/templates/frontend/components/next-page/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "hello-near",
+  "version": "1.0.0",
+  "private": true,
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@near-wallet-selector/core": "^8.9.7",
+    "@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",
+    "bootstrap": "^5.3.3",
+    "ieee754": "^1.2.1",
+    "near-api-js": "^3.0.4",
+    "near-social-vm": "github:gagdiez/VM",
+    "next": "14.2.0",
+    "pino-pretty": "^11.0.0",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "overrides": {
+    "near-api-js": "^3.0.4"
+  },
+  "devDependencies": {
+    "eslint": "^8.57.0",
+    "eslint-config-next": "14.2.2"
+  }
+}

package/templates/frontend/components/next-page/src/components/cards.js

@@ -0,0 +1,43 @@
+import Link from 'next/link';
+
+import styles from '@/styles/app.module.css';
+
+export const Cards = () => {
+  return (
+    <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>
+
+      <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>
+
+      <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>
+    </div>
+  );
+};

package/templates/frontend/{next-page/src/components/vm-component.js → components/next-page/src/components/vm.js}

@@ -1,13 +1,13 @@
-import { useEffect } from 'react';
+import { useEffect, useContext } from 'react';
 import { useInitNear, Widget, EthersProviderContext } from 'near-social-vm';
 
-import { useEthersProviderContext } from '@/wallets/web3-wallet';
+import { NearContext } from '@/context';
 import { NetworkId } from '@/config';
-import { useStore } from '@/layout';
+import { useEthersProviderContext } from '@/wallets/eth';
 
 export default function Component({ src }) {
   const ethersContext = useEthersProviderContext();
-  const { wallet } = useStore();
+  const { wallet } = useContext(NearContext);
   const { initNear } = useInitNear();
 
   useEffect(() => {

package/templates/frontend/components/next-page/src/config.js

@@ -0,0 +1,23 @@
+const contractPerNetwork = {
+  mainnet: 'hello.near-examples.near',
+  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];

package/templates/frontend/{next-page → components/next-page}/src/pages/hello-components/index.js

@@ -1,10 +1,10 @@
 import dynamic from 'next/dynamic';
 
 import styles from '@/styles/app.module.css';
-import { DocsCard, HelloNearCard } from '@/components/cards';
+import { Cards } from '@/components/cards';
 import { Components } from '@/config';
 
-const Component = dynamic(() => import('@/components/vm-component'), {
+const Component = dynamic(() => import('@/components/vm'), {
   ssr: false,
   loading: () => <p>Loading Component...</p>,
 });
@@ -38,8 +38,7 @@ export default function HelloComponents() {
         <hr />
 
         <div className={styles.grid}>
-          <DocsCard />
-          <HelloNearCard />
+          <Cards />
         </div>
       </main>
     </>

package/templates/frontend/next-app/package.json

@@ -16,26 +16,17 @@
     "@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",
     "near-api-js": "^3.0.4",
-    "near-social-vm": "github:gagdiez/VM" ,
-    "next": "14.2.0",
-    "pino-pretty": "^11.0.0",
+    "next": "14.2.3",
     "react": "^18",
-    "react-dom": "^18",
-    "zustand": "^4.5.2"
+    "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"
   }
 }

package/templates/frontend/next-app/src/app/globals.css

@@ -1,5 +1,4 @@
 @import 'bootstrap';
-@import 'bootstrap-icons';
 
 :root {
   --max-width: 1100px;

package/templates/frontend/next-app/src/app/hello-near/page.js

@@ -1,17 +1,17 @@
 'use client';
+import { useState, useEffect, useContext } from 'react';
 
-import { DocsCard, HelloComponentsCard } from '@/components/cards';
-import { useState, useEffect } from 'react';
-import { HelloNearContract } from '../../config';
-import styles from '../app.module.css';
+import styles from '@/app/app.module.css';
+import { Cards } from '@/components/cards';
 
-import { useStore } from '../layout';
+import { NearContext } from '@/context';
+import { HelloNearContract } from '@/config';
 
 // Contract that the app will interact with
 const CONTRACT = HelloNearContract;
 
 export default function HelloNear() {
-  const { signedAccountId, wallet } = useStore();
+  const { signedAccountId, wallet } = useContext(NearContext);
 
   const [greeting, setGreeting] = useState('loading...');
   const [newGreeting, setNewGreeting] = useState('loading...');
@@ -62,8 +62,7 @@ export default function HelloNear() {
         </div>
       </div>
       <div className={styles.grid}>
-        <DocsCard />
-        <HelloComponentsCard />
+        <Cards />
       </div>
     </main>
   );

package/templates/frontend/next-app/src/app/layout.js

@@ -1,40 +1,29 @@
 'use client';
 
-// react
-import { useEffect } from 'react';
-import { create as createStore } from 'zustand';
+import { useEffect, useState } from 'react';
 
-// app
-import './globals.css';
+import '@/app/globals.css';
+import { NearContext } from '@/context';
 import { Navigation } from '@/components/navigation';
 import { NetworkId, HelloNearContract } from '@/config';
 
-// wallet-selector
-import { Wallet } from '@/wallets/near-wallet';
+import { Wallet } from '@/wallets/near';
 
-// store to share wallet and signedAccountId
-export const useStore = createStore((set) => ({
-  wallet: undefined,
-  signedAccountId: '',
-  setWallet: (wallet) => set({ wallet }),
-  setSignedAccountId: (signedAccountId) => set({ signedAccountId })
-}));
+const wallet = new Wallet({ networkId: NetworkId, createAccessKeyFor: HelloNearContract });
 
 // Layout Component
 export default function RootLayout({ children }) {
-  const { setWallet, setSignedAccountId } = useStore();
+  const [signedAccountId, setSignedAccountId] = useState('');
 
-  useEffect(() => {
-    const wallet = new Wallet({ networkId: NetworkId, createAccessKeyFor: HelloNearContract });
-    wallet.startUp(setSignedAccountId);
-    setWallet(wallet);
-  }, []);
+  useEffect(() => { wallet.startUp(setSignedAccountId); }, []);
 
   return (
     <html lang="en">
       <body>
-        <Navigation />
-        {children}
+        <NearContext.Provider value={{ wallet, signedAccountId }}>
+          <Navigation />
+          {children}
+        </NearContext.Provider>
       </body>
     </html>
   );

package/templates/frontend/next-app/src/app/page.js

@@ -3,7 +3,7 @@ import Image from 'next/image';
 import NearLogo from '/public/near.svg';
 import NextLogo from '/public/next.svg';
 import styles from './app.module.css';
-import { DocsCard, HelloComponentsCard, HelloNearCard } from '@/components/cards';
+import { Cards } from '@/components/cards';
 
 export default function Home() {
   return (
@@ -31,9 +31,7 @@ export default function Home() {
       </div>
 
       <div className={styles.grid}>
-        <HelloComponentsCard />
-        <HelloNearCard />
-        <DocsCard />
+        <Cards />
       </div>
     </main>
   );

package/templates/frontend/next-app/src/components/cards.js

@@ -1,48 +1,32 @@
 import Link from 'next/link';
 
-import styles from '../app/app.module.css';
+import styles from '@/app/app.module.css';
 
-export const DocsCard = () => {
+export const Cards = () => {
   return (
-    <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>);
-};
+    <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>
   );
 };

package/templates/frontend/next-app/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 { NearContext } from '@/context';
 import NearLogo from '/public/near-logo.svg';
-import { useStore } from '@/app/layout';
 
 export const Navigation = () => {
-  const { signedAccountId, wallet } = useStore();
+  const { signedAccountId, wallet } = useContext(NearContext);
   const [action, setAction] = useState(() => { });
   const [label, setLabel] = useState('Loading...');
 

package/templates/frontend/next-app/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];

package/templates/frontend/next-app/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: ''
+});

package/templates/frontend/{next-page/src/wallets/near-wallet.js → next-app/src/wallets/near.js}

@@ -1,4 +1,3 @@
-
 // near api js
 import { providers } from 'near-api-js';
 
@@ -16,8 +15,9 @@ const NO_DEPOSIT = '0';
 export class Wallet {
   /**
    * @constructor
-   * @param {string} networkId - the network id to connect to
-   * @param {string} createAccessKeyFor - the contract to create an access key for
+   * @param {Object} options - the options for the wallet
+   * @param {string} options.networkId - the network id to connect to
+   * @param {string} options.createAccessKeyFor - the contract to create an access key for
    * @example
    * const wallet = new Wallet({ networkId: 'testnet', createAccessKeyFor: 'contractId' });
    * wallet.startUp((signedAccountId) => console.log(signedAccountId));
@@ -73,15 +73,15 @@ export class Wallet {
 
   /**
    * Makes a read-only call to a contract
-   * @param {string} contractId - the contract's account id
-   * @param {string} method - the method to call
-   * @param {Object} args - the arguments to pass to the method
+   * @param {Object} options - the options for the call
+   * @param {string} options.contractId - the contract's account id
+   * @param {string} options.method - the method to call
+   * @param {Object} options.args - the arguments to pass to the method
    * @returns {Promise<JSON.value>} - the result of the method call
    */
   viewMethod = async ({ contractId, method, args = {} }) => {
-    const walletSelector = await this.selector;
-    const { network } = walletSelector.options;
-    const provider = new providers.JsonRpcProvider({ url: network.nodeUrl });
+    const url = `https://rpc.${this.networkId}.near.org`;
+    const provider = new providers.JsonRpcProvider({ url });
 
     let res = await provider.query({
       request_type: 'call_function',
@@ -96,11 +96,12 @@ export class Wallet {
 
   /**
    * Makes a call to a contract
-   * @param {string} contractId - the contract's account id
-   * @param {string} method - the method to call
-   * @param {Object} args - the arguments to pass to the method
-   * @param {string} gas - the amount of gas to use
-   * @param {string} deposit - the amount of yoctoNEAR to deposit
+   * @param {Object} options - the options for the call
+   * @param {string} options.contractId - the contract's account id
+   * @param {string} options.method - the method to call
+   * @param {Object} options.args - the arguments to pass to the method
+   * @param {string} options.gas - the amount of gas to use
+   * @param {string} options.deposit - the amount of yoctoNEAR to deposit
    * @returns {Promise<Transaction>} - the resulting transaction
    */
   callMethod = async ({ contractId, method, args = {}, gas = THIRTY_TGAS, deposit = NO_DEPOSIT }) => {

package/templates/frontend/next-page/.eslintrc.json

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

package/templates/frontend/next-page/package.json

@@ -16,29 +16,17 @@
     "@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",
     "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"
   }
 }

package/templates/frontend/next-page/src/components/cards.js

@@ -1,48 +1,32 @@
 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/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>);
-};
+    <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>
   );
 };

package/templates/frontend/next-page/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 { NearContext } from '@/context';
 import NearLogo from '/public/near-logo.svg';
-import { useStore } from '@/layout';
 
 export const Navigation = () => {
-  const { signedAccountId, wallet } = useStore();
+  const { signedAccountId, wallet } = useContext(NearContext);
   const [action, setAction] = useState(() => { });
   const [label, setLabel] = useState('Loading...');
 

package/templates/frontend/next-page/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];

package/templates/frontend/next-page/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: ''
+});

package/templates/frontend/next-page/src/pages/_app.js

@@ -1,10 +1,23 @@
-import RootLayout from '@/layout';
+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>
   );
-}
+}

package/templates/frontend/next-page/src/pages/hello-near/index.js

@@ -1,15 +1,15 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useContext } from 'react';
 
-import { useStore } from '@/layout';
+import { NearContext } from '@/context';
 import styles from '@/styles/app.module.css';
 import { HelloNearContract } from '../../config';
-import { DocsCard, HelloComponentsCard } from '@/components/cards';
+import { Cards } from '@/components/cards';
 
 // Contract that the app will interact with
 const CONTRACT = HelloNearContract;
 
 export default function HelloNear() {
-  const { signedAccountId, wallet } = useStore();
+  const { signedAccountId, wallet } = useContext(NearContext);
 
   const [greeting, setGreeting] = useState('loading...');
   const [newGreeting, setNewGreeting] = useState('loading...');
@@ -70,11 +70,7 @@ export default function HelloNear() {
           <p className="m-0"> Please login to change the greeting </p>
         </div>
       </div>
-
-      <div className={styles.grid}>
-        <DocsCard />
-        <HelloComponentsCard />
-      </div>
+      <Cards />
     </main>
   );
 }

package/templates/frontend/next-page/src/pages/index.js

@@ -3,7 +3,7 @@ import Image from 'next/image';
 import NearLogo from '/public/near.svg';
 import NextLogo from '/public/next.svg';
 import styles from '@/styles/app.module.css';
-import { DocsCard, HelloComponentsCard, HelloNearCard } from '@/components/cards';
+import { Cards } from '@/components/cards';
 
 export default function Home() {
   return (
@@ -31,9 +31,7 @@ export default function Home() {
       </div>
 
       <div className={styles.grid}>
-        <HelloComponentsCard />
-        <HelloNearCard />
-        <DocsCard />
+        <Cards />
       </div>
     </main>
   );

package/templates/frontend/next-page/src/styles/globals.css

@@ -1,5 +1,4 @@
 @import 'bootstrap';
-@import 'bootstrap-icons';
 
 :root {
   --max-width: 1100px;

package/templates/frontend/{next-app/src/wallets/near-wallet.js → next-page/src/wallets/near.js}

@@ -1,4 +1,3 @@
-
 // near api js
 import { providers } from 'near-api-js';
 
@@ -16,8 +15,9 @@ const NO_DEPOSIT = '0';
 export class Wallet {
   /**
    * @constructor
-   * @param {string} networkId - the network id to connect to
-   * @param {string} createAccessKeyFor - the contract to create an access key for
+   * @param {Object} options - the options for the wallet
+   * @param {string} options.networkId - the network id to connect to
+   * @param {string} options.createAccessKeyFor - the contract to create an access key for
    * @example
    * const wallet = new Wallet({ networkId: 'testnet', createAccessKeyFor: 'contractId' });
    * wallet.startUp((signedAccountId) => console.log(signedAccountId));
@@ -73,15 +73,15 @@ export class Wallet {
 
   /**
    * Makes a read-only call to a contract
-   * @param {string} contractId - the contract's account id
-   * @param {string} method - the method to call
-   * @param {Object} args - the arguments to pass to the method
+   * @param {Object} options - the options for the call
+   * @param {string} options.contractId - the contract's account id
+   * @param {string} options.method - the method to call
+   * @param {Object} options.args - the arguments to pass to the method
    * @returns {Promise<JSON.value>} - the result of the method call
    */
   viewMethod = async ({ contractId, method, args = {} }) => {
-    const walletSelector = await this.selector;
-    const { network } = walletSelector.options;
-    const provider = new providers.JsonRpcProvider({ url: network.nodeUrl });
+    const url = `https://rpc.${this.networkId}.near.org`;
+    const provider = new providers.JsonRpcProvider({ url });
 
     let res = await provider.query({
       request_type: 'call_function',
@@ -96,11 +96,12 @@ export class Wallet {
 
   /**
    * Makes a call to a contract
-   * @param {string} contractId - the contract's account id
-   * @param {string} method - the method to call
-   * @param {Object} args - the arguments to pass to the method
-   * @param {string} gas - the amount of gas to use
-   * @param {string} deposit - the amount of yoctoNEAR to deposit
+   * @param {Object} options - the options for the call
+   * @param {string} options.contractId - the contract's account id
+   * @param {string} options.method - the method to call
+   * @param {Object} options.args - the arguments to pass to the method
+   * @param {string} options.gas - the amount of gas to use
+   * @param {string} options.deposit - the amount of yoctoNEAR to deposit
    * @returns {Promise<Transaction>} - the resulting transaction
    */
   callMethod = async ({ contractId, method, args = {}, gas = THIRTY_TGAS, deposit = NO_DEPOSIT }) => {

package/templates/frontend/next-page/src/layout.js

@@ -1,33 +0,0 @@
-import { useEffect } from 'react';
-import { create as createStore } from 'zustand';
-
-import { Wallet } from '@/wallets/near-wallet';
-import { Navigation } from '@/components/navigation';
-import { NetworkId, HelloNearContract } from '@/config';
-
-// Store to share wallet and signed account
-export const useStore = createStore((set) => ({
-  wallet: undefined,
-  signedAccountId: '',
-  setWallet: (wallet) => set({ wallet }),
-  setSignedAccountId: (signedAccountId) => set({ signedAccountId })
-}));
-
-export default function RootLayout({ children }) {
-
-  const { setWallet, setSignedAccountId } = useStore();
-
-  useEffect(() => {
-    // create wallet instance
-    const wallet = new Wallet({ createAccessKeyFor: HelloNearContract, networkId: NetworkId });
-    wallet.startUp(setSignedAccountId);
-    setWallet(wallet);
-  }, []);
-
-  return (
-    <>
-      <Navigation />
-      {children}
-    </>
-  );
-}

package/templates/frontend/next-page/src/pages/_document.js

@@ -1,17 +0,0 @@
-import Document, { Html, Head, Main, NextScript } from 'next/document';
-
-class MyDocument extends Document {
-  render() {
-    return (
-      <Html lang="en">
-        <Head />
-        <body>
-          <Main />
-          <NextScript />
-        </body>
-      </Html>
-    );
-  }
-}
-
-export default MyDocument;