create-near-app 8.0.0 → 8.2.0

package/templates/frontend/vite-react/src/styles/app.module.css

@@ -0,0 +1,226 @@
+.main {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  padding: 6rem;
+  min-height: 100vh;
+}
+
+.description {
+  display: inherit;
+  justify-content: inherit;
+  align-items: inherit;
+  font-size: 0.85rem;
+  max-width: var(--max-width);
+  width: 100%;
+  z-index: 2;
+  font-family: var(--font-mono);
+}
+
+.description a {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.description p {
+  position: relative;
+  margin: 0;
+  padding: 1rem;
+  background-color: rgba(var(--callout-rgb), 0.5);
+  border: 1px solid rgba(var(--callout-border-rgb), 0.3);
+  border-radius: var(--border-radius);
+}
+
+.code {
+  font-weight: 700;
+  font-family: var(--font-mono);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(25%, auto));
+  max-width: 100%;
+  width: var(--max-width);
+}
+
+.card {
+  padding: 1rem 1.2rem;
+  border-radius: var(--border-radius);
+  background: rgba(var(--card-rgb), 0);
+  border: 1px solid rgba(var(--card-border-rgb), 0);
+  transition:
+    background 200ms,
+    border 200ms;
+}
+
+.card span {
+  display: inline-block;
+  transition: transform 200ms;
+}
+
+.card h2 {
+  font-weight: 600;
+  margin-bottom: 0.7rem;
+}
+
+.card p {
+  margin: 0;
+  opacity: 0.6;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  max-width: 30ch;
+}
+
+.center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  padding: 4rem 0;
+  width: 100%;
+}
+
+.center::before {
+  background: var(--secondary-glow);
+  border-radius: 50%;
+  width: 480px;
+  height: 360px;
+  margin-left: -400px;
+}
+
+.center::after {
+  background: var(--primary-glow);
+  width: 240px;
+  height: 180px;
+  z-index: -1;
+}
+
+.center::before,
+.center::after {
+  content: '';
+  left: 50%;
+  position: absolute;
+  filter: blur(45px);
+  transform: translateZ(0);
+  opacity: 0.3;
+}
+
+.logo {
+  position: relative;
+}
+
+/* Enable hover only on non-touch devices */
+@media (hover: hover) and (pointer: fine) {
+  .card:hover {
+    background: rgba(var(--card-rgb), 0.1);
+    border: 1px solid rgba(var(--card-border-rgb), 0.15);
+  }
+
+  .card:hover span {
+    transform: translateX(4px);
+  }
+}
+
+@media (prefers-reduced-motion) {
+  .card:hover span {
+    transform: none;
+  }
+}
+
+/* Mobile */
+@media (max-width: 700px) {
+  .content {
+    padding: 4rem;
+  }
+
+  .grid {
+    grid-template-columns: 1fr;
+    margin-bottom: 120px;
+    max-width: 320px;
+    text-align: center;
+  }
+
+  .card {
+    padding: 1rem 2.5rem;
+  }
+
+  .card h2 {
+    margin-bottom: 0.5rem;
+  }
+
+  .center {
+    padding: 8rem 0 6rem;
+  }
+
+  .center::before {
+    transform: none;
+    height: 300px;
+  }
+
+  .description {
+    font-size: 0.8rem;
+  }
+
+  .description a {
+    padding: 1rem;
+  }
+
+  .description p,
+  .description div {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+  }
+
+  .description p {
+    align-items: center;
+    inset: 0 0 auto;
+    padding: 2rem 1rem 1.4rem;
+    border-radius: 0;
+    border: none;
+    border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
+    background: linear-gradient(to bottom, rgba(var(--background-start-rgb), 1), rgba(var(--callout-rgb), 0.5));
+    background-clip: padding-box;
+    backdrop-filter: blur(24px);
+  }
+
+  .description div {
+    align-items: flex-end;
+    pointer-events: none;
+    inset: auto 0 0;
+    padding: 2rem;
+    height: 200px;
+    background: linear-gradient(to bottom, transparent 0%, rgb(var(--background-end-rgb)) 40%);
+    z-index: 1;
+  }
+}
+
+/* Tablet and Smaller Desktop */
+@media (min-width: 701px) and (max-width: 1120px) {
+  .grid {
+    grid-template-columns: repeat(2, 50%);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  .reactLogo {
+    filter: drop-shadow(0 0 0.3rem #ffffff70);
+  }
+
+  .logo {
+    filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
+  }
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(360deg);
+  }
+
+  to {
+    transform: rotate(0deg);
+  }
+}

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/web3modal.js

@@ -0,0 +1,35 @@
+import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
+import { createAppKit } from "@reown/appkit/react";
+import { nearTestnet } from "@reown/appkit/networks";
+import { reconnect } from "@wagmi/core";
+
+// Get a project ID at https://cloud.reown.com
+const projectId = "30147604c5f01d0bc4482ab0665b5697";
+
+export const wagmiAdapter = new WagmiAdapter({
+  projectId,
+  networks: [nearTestnet],
+});
+
+export const web3Modal = createAppKit({
+  adapters: [wagmiAdapter],
+  projectId,
+  networks: [nearTestnet],
+  enableWalletConnect: true,
+  features: {
+    analytics: true,
+    swaps: false,
+    onramp: false,
+    email: false, // Smart accounts (Safe contract) not available on NEAR Protocol, only EOA.
+    socials: false, // Smart accounts (Safe contract) not available on NEAR Protocol, only EOA.
+  },
+  coinbasePreference: "eoaOnly", // Smart accounts (Safe contract) not available on NEAR Protocol, only EOA.
+  allWallets: "SHOW",
+});
+
+// force reconnecting if the user has already signed in with an ethereum wallet
+// this is a workaround until `ethereum-wallets` supports the `reconnect` method
+if (typeof window !== "undefined") {
+  const recentWallets = localStorage.getItem("near-wallet-selector:recentlySignedInWallets");
+  recentWallets && recentWallets.includes("ethereum-wallets") && reconnect(wagmiAdapter.wagmiConfig)
+} 

package/templates/frontend/vite-react/vite.config.js

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { nodePolyfills } from 'vite-plugin-node-polyfills'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [nodePolyfills(), react()],
+  resolve: {
+    alias: {
+      '@': '/src',
+      buffer: 'buffer',
+    },
+  },
+})

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/next-app/src/wallets/near.js

@@ -1,216 +0,0 @@
-import { createContext } from 'react';
-
-// near api js
-import { providers, utils } from 'near-api-js';
-
-// wallet selector
-import '@near-wallet-selector/modal-ui/styles.css';
-import { setupModal } from '@near-wallet-selector/modal-ui';
-import { setupWalletSelector } from '@near-wallet-selector/core';
-import { setupHereWallet } from '@near-wallet-selector/here-wallet';
-import { setupMyNearWallet } from '@near-wallet-selector/my-near-wallet';
-import { setupLedger } from '@near-wallet-selector/ledger';
-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';
-
-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: [
-        setupMyNearWallet(),
-        setupHereWallet(),
-        setupLedger(),
-        setupMeteorWallet(),
-        setupSender(),
-        setupBitteWallet(),
-        setupEthereumWallets({ wagmiConfig, web3Modal, alwaysOnboardDuringSignIn: true }),
-      ],
-    });
-
-    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
-   * @returns {Promise<number>} - the balance of the account
-   *  
-   */
-  getBalance = 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 account = await provider.query({
-      request_type: 'view_account',
-      account_id: accountId,
-      finality: 'final',
-    });
-    // return amount on NEAR
-    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: '',
-});