create-near-app 7.0.3 → 8.1.0

package/templates/frontend/vite-react/src/styles/globals.css

@@ -0,0 +1,88 @@
+@import 'bootstrap';
+@import 'bootstrap-icons';
+
+:root {
+  --max-width: 1100px;
+  --border-radius: 12px;
+
+  --foreground-rgb: 0, 0, 0;
+  --background-start-rgb: 214, 219, 220;
+  --background-end-rgb: 255, 255, 255;
+
+  --primary-glow: conic-gradient(
+    from 180deg at 50% 50%,
+    #16abff33 0deg,
+    #0885ff33 55deg,
+    #54d6ff33 120deg,
+    #0071ff33 160deg,
+    transparent 360deg
+  );
+  --secondary-glow: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
+
+  --tile-start-rgb: 239, 245, 249;
+  --tile-end-rgb: 228, 232, 233;
+  --tile-border: conic-gradient(#00000080, #00000040, #00000030, #00000020, #00000010, #00000010, #00000080);
+
+  --callout-rgb: 238, 240, 241;
+  --callout-border-rgb: 172, 175, 176;
+  --card-rgb: 180, 185, 188;
+  --card-border-rgb: 131, 134, 135;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background-start-rgb: 0, 0, 0;
+    --background-end-rgb: 0, 0, 0;
+
+    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
+    --secondary-glow: linear-gradient(to bottom right, rgba(1, 65, 255, 0), rgba(1, 65, 255, 0), rgba(1, 65, 255, 0.3));
+
+    --tile-start-rgb: 2, 13, 46;
+    --tile-end-rgb: 2, 5, 19;
+    --tile-border: conic-gradient(#ffffff80, #ffffff40, #ffffff30, #ffffff20, #ffffff10, #ffffff10, #ffffff80);
+
+    --callout-rgb: 20, 20, 20;
+    --callout-border-rgb: 108, 108, 108;
+    --card-rgb: 100, 100, 100;
+    --card-border-rgb: 200, 200, 200;
+  }
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
+  font-family:
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Noto Sans,
+    Ubuntu,
+    Droid Sans,
+    Helvetica Neue,
+    sans-serif;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+}

package/templates/frontend/vite-react/src/wallets/near.js

@@ -0,0 +1,228 @@
+// wallet selector
+import '@near-wallet-selector/modal-ui/styles.css';
+
+import { setupBitteWallet } from '@near-wallet-selector/bitte-wallet';
+import { setupWalletSelector } from '@near-wallet-selector/core';
+import { setupEthereumWallets } from '@near-wallet-selector/ethereum-wallets';
+import { setupLedger } from '@near-wallet-selector/ledger';
+import { setupMeteorWallet } from '@near-wallet-selector/meteor-wallet';
+import { setupModal } from '@near-wallet-selector/modal-ui';
+import { setupMyNearWallet } from '@near-wallet-selector/my-near-wallet';
+import { setupSender } from '@near-wallet-selector/sender';
+import { setupHereWallet } from '@near-wallet-selector/here-wallet';
+import { setupNearMobileWallet } from '@near-wallet-selector/near-mobile-wallet';
+import { setupWelldoneWallet } from '@near-wallet-selector/welldone-wallet';
+import { Buffer } from 'buffer';
+
+
+// near api js
+import { providers, utils } from 'near-api-js';
+import { createContext } from 'react';
+
+// ethereum wallets
+import { wagmiConfig, web3Modal } from '@/wallets/web3modal';
+
+const THIRTY_TGAS = '30000000000000';
+const NO_DEPOSIT = '0';
+
+export class Wallet {
+  /**
+   * @constructor
+   * @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));
+   */
+  constructor({ networkId = 'testnet', createAccessKeyFor = undefined }) {
+    this.createAccessKeyFor = createAccessKeyFor;
+    this.networkId = networkId;
+  }
+
+  /**
+   * To be called when the website loads
+   * @param {Function} accountChangeHook - a function that is called when the user signs in or out#
+   * @returns {Promise<string>} - the accountId of the signed-in user
+   */
+  startUp = async (accountChangeHook) => {
+    this.selector = setupWalletSelector({
+      network: this.networkId,
+      modules: [
+        setupMeteorWallet(),
+        setupEthereumWallets({ wagmiConfig, web3Modal, alwaysOnboardDuringSignIn: true }),
+        setupLedger(),
+        setupBitteWallet(),
+        setupHereWallet(),
+        setupSender(),
+        setupNearMobileWallet(),
+        setupWelldoneWallet(),
+        setupMyNearWallet(),
+      ],
+    });
+
+    const walletSelector = await this.selector;
+    const isSignedIn = walletSelector.isSignedIn();
+    const accountId = isSignedIn ? walletSelector.store.getState().accounts[0].accountId : '';
+
+    walletSelector.store.observable.subscribe(async (state) => {
+      const signedAccount = state?.accounts.find((account) => account.active)?.accountId;
+      accountChangeHook(signedAccount || '');
+    });
+
+    return accountId;
+  };
+
+  /**
+   * Displays a modal to login the user
+   */
+  signIn = async () => {
+    const modal = setupModal(await this.selector, { contractId: this.createAccessKeyFor });
+    modal.show();
+  };
+
+  /**
+   * Logout the user
+   */
+  signOut = async () => {
+    const selectedWallet = await (await this.selector).wallet();
+    selectedWallet.signOut();
+  };
+
+  /**
+   * Makes a read-only call to a contract
+   * @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 url = `https://rpc.${this.networkId}.near.org`;
+    const provider = new providers.JsonRpcProvider({ url });
+
+    const res = await provider.query({
+      request_type: 'call_function',
+      account_id: contractId,
+      method_name: method,
+      args_base64: Buffer.from(JSON.stringify(args)).toString('base64'),
+      finality: 'optimistic',
+    });
+    return JSON.parse(Buffer.from(res.result).toString());
+  };
+
+  /**
+   * Makes a call to a contract
+   * @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 }) => {
+    // Sign a transaction with the "FunctionCall" action
+    const selectedWallet = await (await this.selector).wallet();
+    const outcome = await selectedWallet.signAndSendTransaction({
+      receiverId: contractId,
+      actions: [
+        {
+          type: 'FunctionCall',
+          params: {
+            methodName: method,
+            args,
+            gas,
+            deposit,
+          },
+        },
+      ],
+    });
+
+    return providers.getTransactionLastResult(outcome);
+  };
+
+  /**
+   * Makes a call to a contract
+   * @param {string} txhash - the transaction hash
+   * @returns {Promise<JSON.value>} - the result of the transaction
+   */
+  getTransactionResult = async (txhash) => {
+    const walletSelector = await this.selector;
+    const { network } = walletSelector.options;
+    const provider = new providers.JsonRpcProvider({ url: network.nodeUrl });
+
+    // Retrieve transaction result from the network
+    const transaction = await provider.txStatus(txhash, 'unnused');
+    return providers.getTransactionLastResult(transaction);
+  };
+
+  /**
+   * Gets the balance of an account
+   * @param {string} accountId - the account id to get the balance of
+   * @param {boolean} format - whether to format the balance
+   * @returns {Promise<number>} - the balance of the account
+   *
+   */
+  getBalance = async (accountId, format = false) => {
+    const walletSelector = await this.selector;
+    const { network } = walletSelector.options;
+    const provider = new providers.JsonRpcProvider({ url: network.nodeUrl });
+
+    // Retrieve account state from the network
+    const account = await provider.query({
+      request_type: 'view_account',
+      account_id: accountId,
+      finality: 'final',
+    });
+
+    // Format the amount if needed
+    if (format) {
+      return account.amount ? utils.format.formatNearAmount(account.amount) : '0';
+    } else {
+      return 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/vite-react/src/wallets/web3modal.js

@@ -0,0 +1,42 @@
+import { injected,walletConnect } from '@wagmi/connectors';
+import { createConfig,http, reconnect } from '@wagmi/core';
+import { createWeb3Modal } from '@web3modal/wagmi';
+
+import { EVMWalletChain,NetworkId } from '@/config';
+
+// 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/vite-react/vite.config.js

@@ -0,0 +1,27 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import eslint from 'vite-plugin-eslint';
+import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), eslint()],
+  resolve: {
+    alias: {
+      '@': '/src',
+      buffer: 'buffer',
+    },
+  },
+  optimizeDeps: {
+    esbuildOptions: {
+      define: {
+        global: 'globalThis'
+      },
+      plugins: [
+        NodeGlobalsPolyfillPlugin({
+          buffer: true
+        })
+      ]
+    }
+  }
+})

package/dist/package-json.js

@@ -1,130 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildPackagetson = void 0;
-function buildPackagetson({ contract, frontend, tests, projectName }) {
-    const result = basePackage({
-        contract, frontend, tests, projectName,
-    });
-    return result;
-}
-exports.buildPackagetson = buildPackagetson;
-function basePackage({ contract, frontend, tests, projectName }) {
-    const hasFrontend = frontend !== 'none';
-    return {
-        'name': projectName,
-        'version': '1.0.0',
-        'license': '(MIT AND Apache-2.0)',
-        'scripts': {
-            ...startScript(hasFrontend),
-            ...deployScript(contract),
-            ...buildScript(hasFrontend),
-            ...buildContractScript(contract),
-            'test': 'npm run test:unit && npm run test:integration',
-            ...unitTestScripts(contract),
-            ...integrationTestScripts(contract, tests),
-            ...npmInstallScript(contract, hasFrontend, tests),
-        },
-        'devDependencies': {
-            'near-cli': '^3.3.0',
-        },
-        'dependencies': {}
-    };
-}
-const startScript = (hasFrontend) => hasFrontend ? {
-    'start': 'cd frontend && npm run dev'
-} : {};
-const buildScript = (hasFrontend) => hasFrontend ? {
-    'build': 'npm run build:contract && npm run build:web',
-    'build:web': 'cd frontend && npm run build',
-} : {
-    'build': 'npm run build:contract',
-};
-const buildContractScriptName = 'build:contract';
-const buildContractScript = (contract) => {
-    switch (contract) {
-        case 'ts':
-            return {
-                [buildContractScriptName]: 'cd contract && npm run build',
-            };
-        case 'rs':
-            return {
-                [buildContractScriptName]: 'cd contract && ./build.sh',
-            };
-        case 'none':
-            return {
-                [buildContractScriptName]: 'echo "No contract to build"',
-            };
-    }
-};
-const deployScript = (contract) => {
-    switch (contract) {
-        case 'ts':
-            return {
-                'deploy': 'cd contract && npm run deploy',
-            };
-        case 'rs':
-            return {
-                'deploy': 'cd contract && ./deploy.sh',
-            };
-        case 'none':
-            return {
-                'deploy': 'echo "No contract to deploy"',
-            };
-    }
-};
-const unitTestScripts = (contract) => {
-    switch (contract) {
-        case 'ts':
-            return { 'test:unit': 'cd contract && npm test' };
-        case 'rs':
-            return { 'test:unit': 'cd contract && cargo test' };
-        case 'none':
-            return { 'test:unit': 'echo "No contract to test"' };
-    }
-};
-const integrationTestScripts = (contract, tests) => {
-    if (contract === 'none') {
-        return { 'test:integration': 'echo "No contract to test"' };
-    }
-    let wasm_path = '';
-    switch (contract) {
-        case 'ts':
-            wasm_path = 'contract/build/hello_near.wasm';
-            break;
-        case 'rs':
-            wasm_path = 'contract/target/wasm32-unknown-unknown/release/hello_near.wasm';
-            break;
-    }
-    let run_test = '';
-    switch (tests) {
-        case 'ts':
-            run_test = `npm test -- -- "./${wasm_path}"`;
-            break;
-        case 'rs':
-            run_test = `cargo run --example integration-tests "../${wasm_path}"`;
-            break;
-    }
-    return {
-        'test:integration': `npm run ${buildContractScriptName} && cd integration-tests && ${run_test}`,
-    };
-};
-const npmInstallScript = (contract, hasFrontend, tests) => {
-    const frontend_install = hasFrontend ? 'cd frontend && npm install && cd ..' : 'echo no frontend';
-    const test_install = (contract !== 'none' && tests === 'ts') ? 'cd integration-tests && npm install && cd ..' : 'echo no ts test';
-    let contract_install = '';
-    switch (contract) {
-        case 'ts':
-            contract_install = 'cd contract && npm install';
-            break;
-        case 'rs':
-            contract_install = 'echo rs contract';
-            break;
-        case 'none':
-            contract_install = 'echo no contract';
-            break;
-    }
-    return {
-        'postinstall': `${frontend_install} && ${test_install} && ${contract_install}`
-    };
-};
-//# sourceMappingURL=package-json.js.map

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

@@ -1,42 +0,0 @@
-{
-  "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",
-    "bootstrap-icons": "^1.11.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-app/src/app/hello-components/page.js

@@ -1,46 +0,0 @@
-import dynamic from 'next/dynamic';
-
-import styles from '@/app/app.module.css';
-import { Cards } from '@/components/cards';
-import { Components } from '@/config';
-
-const Component = dynamic(() => import('@/components/vm'), {
-  ssr: false,
-  loading: () => <p>Loading Component...</p>,
-});
-
-
-export default function HelloComponents() {
-  return (
-    <>
-      <main className={styles.main}>
-        <div className={styles.description}>
-          <p>
-            Loading components from: &nbsp;
-            <code className={styles.code}>{Components.socialDB}</code>
-          </p>
-        </div>
-        <div className={styles.center}>
-          <h1>
-            <code>Multi-chain</code> Components Made Simple
-          </h1>
-        </div>
-        <div className="row">
-          <div className="col-6">
-            <Component src={Components.HelloNear} />
-            <p className="my-4">&nbsp;</p>
-            <Component src={Components.LoveNear} />
-          </div>
-          <div className="col-6">
-            <Component src={Components.Lido} />
-          </div>
-        </div>
-        <hr />
-
-        <div className={styles.grid}>
-          <Cards />
-        </div>
-      </main>
-    </>
-  );
-}

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

@@ -1,43 +0,0 @@
-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/components/next-app/src/components/vm.js

@@ -1,31 +0,0 @@
-'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 } = useContext(NearContext);
-  const { initNear } = useInitNear();
-
-  useEffect(() => {
-    wallet && initNear && initNear({ networkId: NetworkId, selector: wallet.selector, config: { allowOtherContracts: true } });
-  }, [wallet, initNear]);
-
-  const href = wallet.networkId === 'mainnet' ?
-    `https://near.social/mob.near/widget/WidgetSource?src=${src}` :
-    `https://test.near.social/eugenethedream/widget/WidgetSource?src=${src}`;
-
-  return (
-    <div>
-      <EthersProviderContext.Provider value={ethersContext}>
-        <Widget src={src} />
-      </EthersProviderContext.Provider>
-      <p className="mt-4 small"> <span className="text-secondary">Source:</span> <a href={href}> {src} </a> </p>
-    </div>
-  );
-}