create-near-app 7.0.3 → 8.0.0

package/dist/app.js

@@ -39,14 +39,13 @@ const show = __importStar(require("./messages"));
     const prompt = await (0, user_input_1.promptAndGetConfig)();
     if (prompt === undefined)
         return;
-    const { config: { projectName, contract, frontend, components, install, }, projectPath, } = prompt;
+    const { config: { projectName, contract, frontend, 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, components, projectPath, templatesDir }) {
+async function createProject({ contract, frontend, projectPath, templatesDir }) {
     if (contract !== 'none') {
         await createContract({ contract, projectPath, templatesDir });
     }
     else {
-        await createGateway({ frontend, components, projectPath, templatesDir });
+        await createGateway({ frontend, projectPath, templatesDir });
     }
     return true;
 }
@@ -48,14 +48,10 @@ async function createContract({ contract, projectPath, templatesDir }) {
     fs_1.default.mkdirSync(projectPath, { recursive: true });
     await copyDir(sourceContractDir, projectPath);
 }
-async function createGateway({ frontend, components, projectPath, templatesDir }) {
+async function createGateway({ frontend, 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

@@ -16,7 +16,7 @@ const welcome = () => (0, exports.show)((0, chalk_1.default) `
 👋 {bold {green Welcome to Near!}} Learn more: https://docs.near.org/
 🔧 Let's get your project ready.
 {blue ======================================================}
-(${tracking_1.trackingMessage})`);
+(${tracking_1.trackingMessage})\n`);
 exports.welcome = welcome;
 const setupFailed = () => (0, exports.show)((0, chalk_1.default) `{bold {red ==========================================}}
 {red ⛔️ There was a problem during the project setup}.

package/dist/tracking.js

@@ -5,27 +5,44 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.trackUsage = exports.trackingMessage = void 0;
 const chalk_1 = __importDefault(require("chalk"));
-const mixpanel_1 = __importDefault(require("mixpanel"));
-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`;
+const POSTHOG_API_KEY = 'phc_95PGQnbyatmj2TBRPWYfhbHfqB6wgZj5QRL8WY9gW20';
+const POSTHOG_API_URL = 'https://eu.i.posthog.com/capture';
+exports.trackingMessage = chalk_1.default.italic('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, components, contract) => {
+const trackUsage = async (frontend, 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');
+        console.log('PostHog logging is skipped in CI env');
         return;
     }
-    try {
-        const mixPanelProperties = {
-            frontend,
-            components,
-            contract,
+    const payload = {
+        distinct_id: 'create-near-app',
+        event: 'error',
+        properties: {
+            engine: process.versions.node,
             os: process.platform,
-            nodeVersion: process.versions.node,
-            timestamp: new Date().toString()
-        };
-        tracker.track('CNA', mixPanelProperties);
+        },
+        timestamp: new Date(),
+    };
+    if (contract !== 'none') {
+        payload.event = 'contract';
+        payload.properties.language = contract;
+    }
+    if (frontend !== 'none') {
+        payload.event = 'frontend';
+        payload.properties.framework = frontend;
+    }
+    const headers = new Headers();
+    headers.append('Content-Type', 'application/json');
+    try {
+        await fetch(POSTHOG_API_URL, {
+            method: 'POST',
+            body: JSON.stringify({
+                api_key: POSTHOG_API_KEY,
+                ...payload,
+            }),
+            headers,
+        });
     }
     catch (e) {
         console.error('Warning: problem while sending tracking data. Error: ', e);

package/dist/user-input.js

@@ -39,14 +39,13 @@ async function getUserArgs() {
         .argument('[projectName]')
         .option('--frontend [next-page|next-app|none]')
         .option('--contract [ts|rs|none]')
-        .option('--components')
         .option('--install')
         .addHelpText('after', 'You can create a frontend or a contract with tests');
     commander_1.program.parse();
     const options = commander_1.program.opts();
     const [projectName] = commander_1.program.args;
-    const { contract, frontend, install, components } = options;
-    return { contract, frontend, components, projectName, install, error: undefined };
+    const { contract, frontend, install } = options;
+    return { contract, frontend, projectName, install, error: undefined };
 }
 exports.getUserArgs = getUserArgs;
 const appChoices = [
@@ -63,10 +62,6 @@ const frontendChoices = [
     { 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',
     name: 'app',
@@ -79,12 +74,6 @@ const frontendPrompt = {
     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',
@@ -114,19 +103,19 @@ async function getUserAnswers() {
     const { app } = await promptUser(appPrompt);
     if (app === 'gateway') {
         // If gateway, ask for the framework to use
-        const { frontend, components, projectName, install } = await promptUser([frontendPrompt, componentsPrompt, namePrompts, npmPrompt]);
-        return { frontend, components, contract: 'none', projectName, install, error: undefined };
+        const { frontend, projectName, install } = await promptUser([frontendPrompt, namePrompts, npmPrompt]);
+        return { frontend, contract: 'none', projectName, install, error: undefined };
     }
     else {
         // If platform is Window, return the error
         if (process.platform === 'win32') {
-            return { frontend: 'none', components: false, contract: 'none', projectName: '', install: false, error: show.windowsWarning };
+            return { frontend: 'none', contract: 'none', projectName: '', install: false, error: show.windowsWarning };
         }
         // 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', components: false, contract, projectName, install, error: undefined };
+        return { frontend: 'none', contract, projectName, install, error: undefined };
     }
 }
 exports.getUserAnswers = getUserAnswers;
@@ -139,7 +128,7 @@ async function promptAndGetConfig() {
         args = await getUserAnswers();
     }
     if (args.error) {
-        (0, tracking_1.trackUsage)('none', false, 'none');
+        (0, tracking_1.trackUsage)('none', 'none');
         return args.error();
     }
     // Homogenizing terminal args with prompt args
@@ -148,8 +137,8 @@ async function promptAndGetConfig() {
     if (!validateUserArgs(args))
         return;
     // track user input
-    const { frontend, components, contract } = args;
-    (0, tracking_1.trackUsage)(frontend, components, contract);
+    const { frontend, contract } = args;
+    (0, tracking_1.trackUsage)(frontend, contract);
     let path = (0, exports.projectPath)(args.projectName);
     if (fs_1.default.existsSync(path)) {
         return show.directoryExists(path);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-near-app",
-  "version": "7.0.3",
+  "version": "8.0.0",
   "description": "Quickly scaffold your dApp on NEAR Blockchain",
   "main": "index.js",
   "engines": {
@@ -27,16 +27,15 @@
     "chalk": "^4.1.2",
     "commander": "^11.0.0",
     "cross-spawn": "^7.0.3",
-    "mixpanel": "^0.18.0",
     "ncp": "^2.0.0",
     "prompts": "^2.4.2",
     "semver": "^7.5.3"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.22.5",
     "@babel/core": "^7.23.2",
-    "@babel/plugin-transform-react-jsx": "^7.22.15",
+    "@babel/eslint-parser": "^7.22.5",
     "@babel/plugin-syntax-flow": "^7.22.5",
+    "@babel/plugin-transform-react-jsx": "^7.22.15",
     "@commitlint/cli": "^17.6.6",
     "@commitlint/config-conventional": "^17.6.6",
     "@release-it/conventional-changelog": "^5.1.1",

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

@@ -12,26 +12,34 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@near-wallet-selector/core": "^8.9.12",
-    "@near-wallet-selector/here-wallet": "^8.9.12",
-    "@near-wallet-selector/ledger": "^8.9.12",
-    "@near-wallet-selector/meteor-wallet": "^8.9.12",
-    "@near-wallet-selector/modal-ui": "^8.9.12",
-    "@near-wallet-selector/my-near-wallet": "^8.9.12",
-    "@near-wallet-selector/bitte-wallet": "^8.9.12",
-    "@near-wallet-selector/sender": "^8.9.12",
+    "@near-js/providers": "^1.0.0",
+    "@near-wallet-selector/bitte-wallet": "^8.9.13",
+    "@near-wallet-selector/core": "^8.9.13",
+    "@near-wallet-selector/ethereum-wallets": "^8.9.13",
+    "@near-wallet-selector/here-wallet": "^8.9.13",
+    "@near-wallet-selector/ledger": "^8.9.13",
+    "@near-wallet-selector/meteor-wallet": "^8.9.13",
+    "@near-wallet-selector/modal-ui": "^8.9.13",
+    "@near-wallet-selector/my-near-wallet": "^8.9.13",
+    "@near-wallet-selector/sender": "^8.9.13",
+    "@web3modal/wagmi": "^5.1.10",
     "bootstrap": "^5",
     "bootstrap-icons": "^1.11.3",
     "near-api-js": "^4.0.3",
-    "next": "14.2.3",
+    "next": "14.2.13",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "wagmi": "^2.12.16"
   },
-  "resolutions": {
-    "near-api-js": "4.0.4"
+  "overrides": {
+    "@near-wallet-selector/ethereum-wallets": {
+      "near-api-js": "4.0.3"
+    }
   },
   "devDependencies": {
+    "encoding": "^0.1.13",
     "eslint": "^8",
-    "eslint-config-next": "14.2.3"
+    "eslint-config-next": "14.2.13",
+    "pino-pretty": "^11.2.2"
   }
 }

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

@@ -4,7 +4,7 @@ import { useState, useEffect, useContext } from 'react';
 import styles from '@/app/app.module.css';
 import { Cards } from '@/components/cards';
 
-import { NearContext } from '@/context';
+import { NearContext } from '@/wallets/near';
 import { HelloNearContract } from '@/config';
 
 // Contract that the app will interact with

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

@@ -3,13 +3,12 @@
 import { useEffect, useState } from 'react';
 
 import '@/app/globals.css';
-import { NearContext } from '@/context';
 import { Navigation } from '@/components/navigation';
-import { NetworkId, HelloNearContract } from '@/config';
+import { NetworkId } from '@/config';
 
-import { Wallet } from '@/wallets/near';
+import { NearContext, Wallet } from '@/wallets/near';
 
-const wallet = new Wallet({ networkId: NetworkId, createAccessKeyFor: HelloNearContract });
+const wallet = new Wallet({ networkId: NetworkId });
 
 // Layout Component
 export default function RootLayout({ children }) {

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

@@ -2,7 +2,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { useEffect, useState, useContext } from 'react';
 
-import { NearContext } from '@/context';
+import { NearContext } from '@/wallets/near';
 import NearLogo from '/public/near-logo.svg';
 
 export const Navigation = () => {

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

@@ -3,5 +3,22 @@ const contractPerNetwork = {
   testnet: 'hello.near-examples.testnet',
 };
 
+// Chains for EVM Wallets 
+const evmWalletChains = {
+  mainnet: {
+    chainId: 397,
+    name: "Near Mainnet",
+    explorer: "https://eth-explorer.near.org",
+    rpc: "https://eth-rpc.mainnet.near.org",
+  },
+  testnet: {
+    chainId: 398,
+    name: "Near Testnet",
+    explorer: "https://eth-explorer-testnet.near.org",
+    rpc: "https://eth-rpc.testnet.near.org",
+  },
+}
+
 export const NetworkId = 'testnet';
-export const HelloNearContract = contractPerNetwork[NetworkId];
+export const HelloNearContract = contractPerNetwork[NetworkId];
+export const EVMWalletChain = evmWalletChains[NetworkId];

package/templates/frontend/next-app/src/wallets/near.js

@@ -1,8 +1,7 @@
 import { createContext } from 'react';
-import { distinctUntilChanged, map } from 'rxjs';
 
 // near api js
-import { providers } from 'near-api-js';
+import { providers, utils } from 'near-api-js';
 
 // wallet selector
 import '@near-wallet-selector/modal-ui/styles.css';
@@ -15,6 +14,10 @@ import { setupMeteorWallet } from '@near-wallet-selector/meteor-wallet';
 import { setupSender } from '@near-wallet-selector/sender';
 import { setupBitteWallet } from '@near-wallet-selector/bitte-wallet';
 
+// ethereum wallets
+import { wagmiConfig, web3Modal } from '@/wallets/web3modal';
+import { setupEthereumWallets } from "@near-wallet-selector/ethereum-wallets";
+
 const THIRTY_TGAS = '30000000000000';
 const NO_DEPOSIT = '0';
 
@@ -48,6 +51,7 @@ export class Wallet {
         setupMeteorWallet(),
         setupSender(),
         setupBitteWallet(),
+        setupEthereumWallets({ wagmiConfig, web3Modal, alwaysOnboardDuringSignIn: true }),
       ],
     });
 
@@ -55,15 +59,10 @@ export class Wallet {
     const isSignedIn = walletSelector.isSignedIn();
     const accountId = isSignedIn ? walletSelector.store.getState().accounts[0].accountId : '';
 
-    walletSelector.store.observable
-      .pipe(
-        map(state => state.accounts),
-        distinctUntilChanged()
-      )
-      .subscribe(accounts => {
-        const signedAccount = accounts.find((account) => account.active)?.accountId;
-        accountChangeHook(signedAccount);
-      });
+    walletSelector.store.observable.subscribe(async (state) => {
+      const signedAccount = state?.accounts.find(account => account.active)?.accountId;
+      accountChangeHook(signedAccount || '');
+    });
 
     return accountId;
   };
@@ -152,6 +151,12 @@ export class Wallet {
     return providers.getTransactionLastResult(transaction);
   };
 
+  /**
+   * Gets the balance of an account
+   * @param {string} accountId - the account id to get the balance of
+   * @returns {Promise<number>} - the balance of the account
+   *  
+   */
   getBalance = async (accountId) => {
     const walletSelector = await this.selector;
     const { network } = walletSelector.options;
@@ -167,12 +172,44 @@ export class Wallet {
     return account.amount ? Number(utils.format.formatNearAmount(account.amount)) : 0;
   };
 
+  /**
+   * Signs and sends transactions
+   * @param {Object[]} transactions - the transactions to sign and send
+   * @returns {Promise<Transaction[]>} - the resulting transactions
+   * 
+   */
   signAndSendTransactions = async ({ transactions }) => {
     const selectedWallet = await (await this.selector).wallet();
     return selectedWallet.signAndSendTransactions({ transactions });
   };
+
+  /**
+   * 
+   * @param {string} accountId
+   * @returns {Promise<Object[]>} - the access keys for the
+   */
+  getAccessKeys = async (accountId) => {
+    const walletSelector = await this.selector;
+    const { network } = walletSelector.options;
+    const provider = new providers.JsonRpcProvider({ url: network.nodeUrl });
+
+    // Retrieve account state from the network
+    const keys = await provider.query({
+      request_type: 'view_access_key_list',
+      account_id: accountId,
+      finality: 'final',
+    });
+    return keys.keys;
+  };
 }
 
+/**
+ * @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-app/src/wallets/web3modal.js

@@ -0,0 +1,44 @@
+import { NetworkId, EVMWalletChain } from '@/config';
+import { reconnect, http, createConfig } from "@wagmi/core";
+import { walletConnect, injected } from "@wagmi/connectors";
+import { createWeb3Modal } from "@web3modal/wagmi";
+
+// Config
+const near = {
+  id: EVMWalletChain.chainId,
+  name: EVMWalletChain.name,
+  nativeCurrency: {
+    decimals: 18,
+    name: "NEAR",
+    symbol: "NEAR",
+  },
+  rpcUrls: {
+    default: { http: [EVMWalletChain.rpc] },
+    public: { http: [EVMWalletChain.rpc] },
+  },
+  blockExplorers: {
+    default: {
+      name: "NEAR Explorer",
+      url: EVMWalletChain.explorer,
+    },
+  },
+  testnet: NetworkId === "testnet",
+};
+
+// Get your projectId at https://cloud.reown.com
+const projectId = '5bb0fe33763b3bea40b8d69e4269b4ae';
+
+export const wagmiConfig = createConfig({
+  chains: [near],
+  transports: { [near.id]: http() },
+  connectors: [
+    walletConnect({ projectId, showQrModal: false }),
+    injected({ shimDisconnect: true }),
+  ],
+});
+
+// Preserve login state on page reload
+reconnect(wagmiConfig);
+
+// Modal for login
+export const web3Modal = createWeb3Modal({ wagmiConfig, projectId });

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

@@ -12,26 +12,34 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@near-wallet-selector/core": "^8.9.12",
-    "@near-wallet-selector/here-wallet": "^8.9.12",
-    "@near-wallet-selector/ledger": "^8.9.12",
-    "@near-wallet-selector/meteor-wallet": "^8.9.12",
-    "@near-wallet-selector/modal-ui": "^8.9.12",
-    "@near-wallet-selector/my-near-wallet": "^8.9.12",
-    "@near-wallet-selector/bitte-wallet": "^8.9.12",
-    "@near-wallet-selector/sender": "^8.9.12",
+    "@near-js/providers": "^1.0.0",
+    "@near-wallet-selector/bitte-wallet": "^8.9.13",
+    "@near-wallet-selector/core": "^8.9.13",
+    "@near-wallet-selector/ethereum-wallets": "^8.9.13",
+    "@near-wallet-selector/here-wallet": "^8.9.13",
+    "@near-wallet-selector/ledger": "^8.9.13",
+    "@near-wallet-selector/meteor-wallet": "^8.9.13",
+    "@near-wallet-selector/modal-ui": "^8.9.13",
+    "@near-wallet-selector/my-near-wallet": "^8.9.13",
+    "@near-wallet-selector/sender": "^8.9.13",
+    "@web3modal/wagmi": "^5.1.10",
     "bootstrap": "^5",
     "bootstrap-icons": "^1.11.3",
     "near-api-js": "^4.0.3",
-    "next": "14.2.3",
+    "next": "14.2.13",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "wagmi": "^2.12.16"
   },
-  "resolutions": {
-    "near-api-js": "4.0.4"
+  "overrides": {
+    "@near-wallet-selector/ethereum-wallets": {
+      "near-api-js": "4.0.3"
+    }
   },
   "devDependencies": {
+    "encoding": "^0.1.13",
     "eslint": "^8",
-    "eslint-config-next": "14.2.3"
+    "eslint-config-next": "14.2.13",
+    "pino-pretty": "^11.2.2"
   }
 }

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

@@ -2,7 +2,7 @@ import Image from 'next/image';
 import Link from 'next/link';
 import { useEffect, useState, useContext } from 'react';
 
-import { NearContext } from '@/context';
+import { NearContext } from '@/wallets/near';
 import NearLogo from '/public/near-logo.svg';
 
 export const Navigation = () => {

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

@@ -3,5 +3,22 @@ const contractPerNetwork = {
   testnet: 'hello.near-examples.testnet',
 };
 
+// Chains for EVM Wallets 
+const evmWalletChains = {
+  mainnet: {
+    chainId: 397,
+    name: "Near Mainnet",
+    explorer: "https://eth-explorer.near.org",
+    rpc: "https://eth-rpc.mainnet.near.org",
+  },
+  testnet: {
+    chainId: 398,
+    name: "Near Testnet",
+    explorer: "https://eth-explorer-testnet.near.org",
+    rpc: "https://eth-rpc.testnet.near.org",
+  },
+}
+
 export const NetworkId = 'testnet';
-export const HelloNearContract = contractPerNetwork[NetworkId];
+export const HelloNearContract = contractPerNetwork[NetworkId];
+export const EVMWalletChain = evmWalletChains[NetworkId];

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

@@ -1,13 +1,12 @@
 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';
+import { Wallet, NearContext } from '@/wallets/near';
+import { NetworkId } from '@/config';
 
-const wallet = new Wallet({ createAccessKeyFor: HelloNearContract, networkId: NetworkId });
+const wallet = new Wallet({ networkId: NetworkId });
 
 export default function MyApp({ Component, pageProps }) {
   const [signedAccountId, setSignedAccountId] = useState('');

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

@@ -1,6 +1,6 @@
 import { useState, useEffect, useContext } from 'react';
 
-import { NearContext } from '@/context';
+import { NearContext } from '@/wallets/near';
 import styles from '@/styles/app.module.css';
 import { HelloNearContract } from '../../config';
 import { Cards } from '@/components/cards';