create-near-app 6.0.2 → 6.1.0

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

@@ -0,0 +1,95 @@
+@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/next-page/src/wallets/wallet-selector.js

@@ -0,0 +1,120 @@
+import { create as createStore } from 'zustand';
+import { distinctUntilChanged, map } from 'rxjs';
+import { providers } from 'near-api-js';
+import { setupWalletSelector } from '@near-wallet-selector/core';
+import { setupModal } from '@near-wallet-selector/modal-ui';
+import { setupMyNearWallet } from '@near-wallet-selector/my-near-wallet';
+import { setupHereWallet } from '@near-wallet-selector/here-wallet';
+
+import { useEffect, useState } from 'react';
+
+export const useWallet = createStore(set => ({
+  signedAccountId: '',
+  logOut: undefined,
+  logIn: undefined,
+  selector: undefined,
+  viewMethod: undefined,
+  callMethod: undefined,
+  setLogActions: ({ logOut, logIn }) => set({ logOut, logIn }),
+  setAuth: ({ signedAccountId }) => set({ signedAccountId }),
+  setMethods: ({ viewMethod, callMethod }) => set({ viewMethod, callMethod }),
+  setStoreSelector: ({ selector }) => set({ selector }),
+}));
+
+export function useInitWallet({ createAccessKeyFor, networkId }) {
+  const setAuth = useWallet(store => store.setAuth);
+  const setLogActions = useWallet(store => store.setLogActions);
+  const setMethods = useWallet(store => store.setMethods);
+  const setStoreSelector = useWallet(store => store.setStoreSelector);
+  const [selector, setSelector] = useState(undefined);
+
+  useEffect(() => {
+    const selector = setupWalletSelector({
+      network: networkId,
+      modules: [setupMyNearWallet(), setupHereWallet()]
+    });
+
+    setSelector(selector);
+    setStoreSelector({ selector });
+  }, [networkId, setStoreSelector]);
+
+  useEffect(() => {
+    if (!selector) return;
+
+    selector.then(walletSelector => {
+      const accounts = walletSelector.store.getState().accounts;
+      const signedAccountId = accounts.find((account) => account.active)?.accountId || '';
+      setAuth({ signedAccountId });
+
+      walletSelector.store.observable
+        .pipe(
+          map((state) => state.accounts),
+          distinctUntilChanged()
+        )
+        .subscribe((accounts) => {
+          const signedAccountId = accounts.find((account) => account.active)?.accountId || '';
+          setAuth({ signedAccountId });
+        });
+    });
+  }, [selector, setAuth]);
+
+  useEffect(() => {
+    if (!selector) return;
+
+    // defined logOut and logIn actions
+    const logOut = async () => {
+      const wallet = await (await selector).wallet();
+      await wallet.signOut();
+      setAuth({ signedAccountId: '' });
+    };
+
+    const logIn = async () => {
+      const modal = setupModal(await selector, { contractId: createAccessKeyFor });
+      modal.show();
+    };
+
+    setLogActions({ logOut, logIn });
+  }, [createAccessKeyFor, selector, setAuth, setLogActions]);
+
+  useEffect(() => {
+    if (!selector) return;
+
+    const viewMethod = async (contractId, method, args = {}) => {
+      const { network } = (await selector).options;
+      const provider = new providers.JsonRpcProvider({ url: network.nodeUrl });
+
+      let 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());
+    };
+
+    const callMethod = async (contractId, method, args = {}, gas = '30000000000000', deposit = 0) => {
+      const wallet = await (await selector).wallet();
+
+      const outcome = await wallet.signAndSendTransaction({
+        receiverId: contractId,
+        actions: [
+          {
+            type: 'FunctionCall',
+            params: {
+              methodName: method,
+              args,
+              gas,
+              deposit,
+            },
+          },
+        ],
+      });
+
+      return providers.getTransactionLastResult(outcome);
+    };
+
+    setMethods({ viewMethod, callMethod });
+
+  }, [selector, setMethods]);
+}

package/templates/frontend/next-page/src/wallets/web3-wallet.ts

@@ -0,0 +1,289 @@
+'use client';
+import type { EIP1193Provider } from '@web3-onboard/core';
+import injectedModule from '@web3-onboard/injected-wallets';
+import ledgerModule from '@web3-onboard/ledger';
+import { init, useConnectWallet } from '@web3-onboard/react';
+import walletConnectModule from '@web3-onboard/walletconnect';
+import { useEffect, useState } from 'react';
+import { singletonHook } from 'react-singleton-hook';
+
+const web3onboardKey = 'web3-onboard:connectedWallets';
+
+const wcV2InitOptions: any = {
+  version: 2,
+  projectId: '72b7b3359ab477e339a070f615806aa6',
+  requiredChains: [1, 56],
+};
+
+const walletConnect = walletConnectModule(wcV2InitOptions);
+const ledger = ledgerModule(wcV2InitOptions);
+const injected = injectedModule();
+
+// initialize Onboard
+export const onboard = init({
+  wallets: [injected, walletConnect, ledger],
+  chains: [
+    {
+      id: 1,
+      token: 'ETH',
+      label: 'Ethereum Mainnet',
+      rpcUrl: 'https://rpc.ankr.com/eth',
+    },
+    {
+      id: 3,
+      token: 'ETH',
+      label: 'Ropsten - Ethereum Testnet',
+      rpcUrl: 'https://rpc.ankr.com/eth_ropsten',
+    },
+    {
+      id: 5,
+      token: 'ETH',
+      label: 'Goerli - Ethereum Testnet',
+      rpcUrl: 'https://rpc.ankr.com/eth_goerli',
+    },
+    {
+      id: 10,
+      token: 'ETH',
+      label: 'Optimism',
+      rpcUrl: 'https://rpc.ankr.com/optimism',
+    },
+    {
+      id: 420,
+      token: 'ETH',
+      label: 'Optimism Goerli Testnet',
+      rpcUrl: 'https://optimism-goerli.publicnode.com',
+    },
+    {
+      id: 56,
+      token: 'BNB',
+      label: 'Binance Smart Chain Mainnet',
+      rpcUrl: 'https://bsc.publicnode.com',
+    },
+    {
+      id: 97,
+      token: 'tBNB',
+      label: 'Binance Smart Chain Testnet',
+      rpcUrl: 'https://bsc-testnet.publicnode.com',
+    },
+    {
+      id: 1313161554,
+      token: 'ETH',
+      label: 'Aurora Mainnet',
+      rpcUrl: 'https://mainnet.aurora.dev',
+    },
+    {
+      id: 1313161555,
+      token: 'ETH',
+      label: 'Aurora Testnet',
+      rpcUrl: 'https://testnet.aurora.dev',
+    },
+    {
+      id: 137,
+      token: 'MATIC',
+      label: 'Polygon Mainnet',
+      rpcUrl: 'https://rpc.ankr.com/polygon',
+    },
+    {
+      id: 80001,
+      token: 'MATIC',
+      label: 'Polygon Testnet Mumbai',
+      rpcUrl: 'https://rpc.ankr.com/polygon_mumbai',
+    },
+    {
+      id: 280,
+      token: 'ETH',
+      label: 'zkSync Era Testnet',
+      rpcUrl: 'https://testnet.era.zksync.dev',
+    },
+    {
+      id: 324,
+      token: 'ETH',
+      label: 'zkSync Era Mainnet',
+      rpcUrl: 'https://zksync2-mainnet.zksync.io',
+    },
+    {
+      id: 1101,
+      token: 'ETH',
+      label: 'Polygon zkEVM',
+      rpcUrl: 'https://zkevm-rpc.com',
+    },
+    {
+      id: 1442,
+      token: 'ETH',
+      label: 'Polygon zkEVM Testnet',
+      rpcUrl: 'https://rpc.public.zkevm-test.net',
+    },
+    {
+      id: 42161,
+      token: 'ETH',
+      label: 'Arbitrum One Mainnet',
+      rpcUrl: 'https://arb1.arbitrum.io/rpc',
+    },
+    {
+      id: 42170,
+      token: 'ETH',
+      label: 'Arbitrum Nova',
+      rpcUrl: 'https://nova.arbitrum.io/rpc',
+    },
+    {
+      id: 421613,
+      token: 'AGOR',
+      label: 'Arbitrum Goerli',
+      rpcUrl: 'https://goerli-rollup.arbitrum.io/rpc',
+    },
+    {
+      id: 25,
+      token: 'CRO',
+      label: 'Cronos Mainnet Beta',
+      rpcUrl: 'https://evm.cronos.org',
+    },
+    {
+      id: 338,
+      token: 'TCRO',
+      label: 'Cronos Testnet',
+      rpcUrl: 'https://evm-t3.cronos.org',
+    },
+    {
+      id: 100,
+      token: 'XDAI',
+      label: 'Gnosis',
+      rpcUrl: 'https://rpc.ankr.com/gnosis',
+    },
+    {
+      id: 10200,
+      token: 'XDAI',
+      label: 'Gnosis Chiado Testnet',
+      rpcUrl: 'https://rpc.chiadochain.net',
+    },
+    {
+      id: 42220,
+      token: 'CELO',
+      label: 'Celo Mainnet',
+      rpcUrl: 'https://rpc.ankr.com/celo',
+    },
+    {
+      id: 44787,
+      token: 'CELO',
+      label: 'Celo Alfajores Testnet',
+      rpcUrl: 'https://alfajores-forno.celo-testnet.org',
+    },
+    {
+      id: 43114,
+      token: 'AVAX',
+      label: 'Avalanche C-Chain',
+      rpcUrl: 'https://rpc.ankr.com/avalanche',
+    },
+    {
+      id: 43113,
+      token: 'AVAX',
+      label: 'Avalanche Fuji Testnet',
+      rpcUrl: 'https://rpc.ankr.com/avalanche_fuji',
+    },
+    {
+      id: 250,
+      token: 'FTM',
+      label: 'Fantom Opera',
+      rpcUrl: 'https://rpc.ankr.com/fantom',
+    },
+    {
+      id: 4002,
+      token: 'FTM',
+      label: 'Fantom Testnet',
+      rpcUrl: 'https://rpc.ankr.com/fantom_testnet',
+    },
+    {
+      id: 1284,
+      token: 'GLMR',
+      label: 'Moonbeam',
+      rpcUrl: 'https://rpc.ankr.com/moonbeam',
+    },
+    {
+      id: 61,
+      token: 'ETC',
+      label: 'Ethereum Classic Mainnet',
+      rpcUrl: 'https://etc.rivet.link',
+    },
+    {
+      id: 84531,
+      token: 'ETH',
+      label: 'Base Goerli Testnet',
+      rpcUrl: 'https://goerli.base.org',
+    },
+    {
+      id: 8453,
+      token: 'ETH',
+      label: 'Base',
+      rpcUrl: 'https://mainnet.base.org',
+    },
+    {
+      id: 5001,
+      token: 'MNT',
+      label: 'Mantle Testnet',
+      rpcUrl: 'https://rpc.testnet.mantle.xyz',
+    },
+    {
+      id: 5000,
+      token: 'MNT',
+      label: 'Mantle',
+      rpcUrl: 'https://rpc.mantle.xyz',
+    },
+  ],
+  appMetadata: {
+    name: 'NEAR',
+    icon: '/next.svg',
+    description: 'NEAR',
+  },
+  theme: 'dark',
+  containerElements: {
+    // connectModal: '#near-social-navigation-bar',
+    // accountCenter: "#near-social-web3-account",
+  },
+});
+
+type EthersProviderContext = {
+  provider?: EIP1193Provider;
+  useConnectWallet: typeof useConnectWallet;
+};
+
+const defaultEthersProviderContext: EthersProviderContext = { useConnectWallet };
+
+export const useEthersProviderContext = singletonHook(defaultEthersProviderContext, () => {
+  const [{ wallet }] = useConnectWallet();
+  const [ethersProvider, setEthersProvider] = useState(defaultEthersProviderContext);
+
+  useEffect(() => {
+    (async () => {
+      if (typeof localStorage === 'undefined') return;
+
+      const walletsSub = onboard.state.select('wallets');
+
+      walletsSub.subscribe((wallets) => {
+        const connectedWallets = wallets.map(({ label }) => label);
+        localStorage.setItem(web3onboardKey, JSON.stringify(connectedWallets));
+      });
+
+      const previouslyConnectedWallets = JSON.parse(localStorage.getItem(web3onboardKey) || '[]');
+
+      if (previouslyConnectedWallets) {
+        // You can also auto connect "silently" and disable all onboard modals to avoid them flashing on page load
+        await onboard.connectWallet({
+          autoSelect: {
+            label: previouslyConnectedWallets[0],
+            disableModals: true,
+          },
+        });
+      }
+    })();
+  }, []);
+
+  useEffect(() => {
+    if (!wallet) return;
+
+    setEthersProvider({
+      provider: wallet.provider,
+      useConnectWallet,
+    });
+  }, [wallet]);
+
+  return ethersProvider;
+});