npm - create-near-app - Versions diffs - 6.0.0-beta.2 → 6.0.0-beta.3 - Mend

create-near-app 6.0.0-beta.2 → 6.0.0-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (150) hide show

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

@@ -0,0 +1,64 @@
+'use client'
+import { DocsCard, HelloComponentsCard } from '@/components/cards';
+import { useWallet } from '@/wallets/wallet-selector';
+import { useState, useEffect } from 'react'
+import { HelloNearContract, NetworkId } from '../../config';
+import styles from '../app.module.css'
+// Contract that the app will interact with
+const CONTRACT = HelloNearContract[NetworkId];
+export default function HelloNear({ }) {
+  const { signedAccountId, viewMethod, callMethod } = useWallet()
+  const [greeting, setGreeting] = useState('loading...')
+  const [loggedIn, setLoggedIn] = useState(false)
+  const [showSpinner, setShowSpinner] = useState(false)
+  useEffect(() => {
+    viewMethod && viewMethod(CONTRACT, 'get_greeting', {}).then(
+      greeting => setGreeting(greeting)
+    )
+  }, [viewMethod])
+  useEffect(() => {
+    setLoggedIn(!!signedAccountId)
+  }, [signedAccountId])
+  const saveGreeting = async () => {
+    setShowSpinner(true)
+    await callMethod(CONTRACT, 'set_greeting', { greeting });
+    setShowSpinner(false)
+  }
+  return (
+    <main className={styles.main}>
+      <div className={styles.description}>
+        <p>
+          Interacting with the contract: &nbsp;
+          <code className={styles.code}>{CONTRACT}</code>
+        </p>
+      </div>
+      <div className={styles.center}>
+        <h1 className="w-100"> The contract says: <code>{greeting}</code> </h1>
+        <div className="input-group" hidden={!loggedIn}>
+          <input type="text" className="form-control w-20" placeholder="Store a new greeting" onChange={t => { setGreeting(t.target.value) }} />
+          <div className="input-group-append">
+            <button className="btn btn-secondary" onClick={saveGreeting}>
+              <span hidden={showSpinner}> Save </span>
+              <i className="spinner-border spinner-border-sm" hidden={!showSpinner}></i>
+            </button>
+          </div>
+        </div>
+        <div className='w-100 text-end align-text-center' hidden={loggedIn}>
+          <p className='m-0'> Please login to change the greeting </p>
+        </div>
+      </div>
+      <div className={styles.grid}>
+        <DocsCard />
+        <HelloComponentsCard />
+      </div>
+    </main>
+  )
+}

package/templates/frontend/next/src/app/layout.js ADDED Viewed

@@ -0,0 +1,22 @@
+'use client'
+import './globals.css'
+import '@near-wallet-selector/modal-ui/styles.css';
+import { ComponentMap, NetworkId } from '@/config';
+import { Navigation } from '@/components/navigation';
+import { initWallet } from '@/wallets/wallet-selector';
+export default function RootLayout({ children }) {
+  const createAccessKeyFor = ComponentMap[NetworkId].socialDB;
+  initWallet({ createAccessKeyFor });
+  return (
+    <html lang="en">
+      <body>
+        <Navigation />
+        {children}
+      </body>
+    </html>
+  )
+}

package/templates/frontend/next/src/app/page.js ADDED Viewed

@@ -0,0 +1,37 @@
+import Image from 'next/image'
+import styles from './app.module.css'
+import { DocsCard, HelloComponentsCard, HelloNearCard } from '@/components/cards'
+export default function Home({ }) {
+  return (
+    <main className={styles.main}>
+      <div className={styles.description}> </div>
+      <div className={styles.center}>
+        <Image
+          className={styles.logo}
+          src="/near.svg"
+          alt="Next.js Logo"
+          width={110 * 1.5}
+          height={28 * 1.5}
+          priority
+        />
+        <h3 className="ms-2 me-3 text-dark"> + </h3>
+        <Image
+          className={styles.logo}
+          src="/next.svg"
+          alt="Next.js Logo"
+          width={300 * .58}
+          height={61 * .58}
+          priority
+        />
+      </div>
+      <div className={styles.grid}>
+        <HelloComponentsCard />
+        <HelloNearCard />
+        <DocsCard />
+      </div>
+    </main>
+  )
+}

package/templates/frontend/next/src/components/cards.js ADDED Viewed

@@ -0,0 +1,46 @@
+import styles from '../app/app.module.css';
+export const DocsCard = () => {
+  return (
+    <a
+      href="https://docs.near.org/develop/integrate/quickstart-frontend"
+      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>
+    </a>);
+}
+export const HelloNearCard = () => {
+  return (
+    <a
+      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>
+    </a>
+  );
+}
+export const HelloComponentsCard = () => {
+  return (
+    <a
+      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>
+    </a>
+  )
+}

package/templates/frontend/next/src/components/navigation.js ADDED Viewed

@@ -0,0 +1,36 @@
+import Image from 'next/image';
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import NearLogo from 'public/near-logo.svg';
+import { useWallet } from '@/wallets/wallet-selector';
+export const Navigation = () => {
+  const { signedAccountId, logOut, logIn } = useWallet()
+  const [action, setAction] = useState(() => { })
+  const [label, setLabel] = useState('Loading...')
+  useEffect(() => {
+    if (signedAccountId) {
+      setAction(() => logOut)
+      setLabel(`Logout ${signedAccountId}`)
+    } else {
+      setAction(() => logIn)
+      setLabel('Login')
+    }
+  }, [signedAccountId, logOut, logIn, setAction, setLabel]);
+  return (
+    <nav className="navbar navbar-expand-lg">
+      <div className="container-fluid">
+        <Link href="/" passHref legacyBehavior>
+          <Image priority src={NearLogo} alt="NEAR" width="30" height="24" className="d-inline-block align-text-top" />
+        </Link>
+        <div className='navbar-nav pt-1'>
+          <button className="btn btn-secondary" onClick={action} > {label} </button>
+        </div>
+      </div>
+    </nav>
+  );
+}

package/templates/frontend/next/src/components/vm-component.js ADDED Viewed

@@ -0,0 +1,26 @@
+'use client';
+import { useEffect } from 'react';
+import { useInitNear, Widget, EthersProviderContext } from 'near-social-vm';
+import { useWallet } from '@/wallets/wallet-selector';
+import { useEthersProviderContext } from '@/wallets/web3-wallet';
+import { NetworkId } from '@/config';
+export default function Component({ src }) {
+  const ethersContext = useEthersProviderContext();
+  const { selector } = useWallet();
+  const { initNear } = useInitNear();
+  useEffect(() => {
+    initNear && selector && initNear({ networkId: NetworkId, selector });
+  }, [initNear, selector]);
+  return (
+    <div>
+      <EthersProviderContext.Provider value={ethersContext}>
+        <Widget src={src} />
+      </EthersProviderContext.Provider>
+      <p className="mt-4 small"> <span className="text-secondary">Source:</span> <a href={`https://near.social/mob.near/widget/WidgetSource?src=${src}`}> {src} </a> </p>
+    </div>
+  );
+}

package/templates/frontend/next/src/config.js ADDED Viewed

@@ -0,0 +1,21 @@
+export const NetworkId = 'testnet';
+export const HelloNearContract = {
+  mainnet: 'hello.near-examples.near',
+  testnet: 'hello.near-examples.testnet',
+}
+export const ComponentMap = {
+  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',
+  }
+}

package/templates/frontend/next/src/wallets/wallet-selector.js ADDED Viewed

@@ -0,0 +1,128 @@
+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 { NetworkId } from '@/config';
+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 initWallet({ createAccessKeyFor }) {
+  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(() => {
+    console.log('initWallet')
+    const selector = setupWalletSelector({
+      network: NetworkId,
+      modules: [setupMyNearWallet(), setupHereWallet()]
+    })
+    setSelector(selector);
+    setStoreSelector({ selector });
+  }, []);
+  useEffect(() => {
+    console.log('selector then')
+    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) => {
+          console.log("accounts", accounts)
+          const signedAccountId = accounts.find((account) => account.active)?.accountId || '';
+          setAuth({ signedAccountId });
+        });
+    })
+  }, [selector, setAuth]);
+  useEffect(() => {
+    console.log('actions')
+    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 });
+  }, [selector, setAuth]);
+  useEffect(() => {
+    console.log('methods')
+    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]);
+}

package/templates/frontend/{gateway/src/data/web3.ts → next/src/wallets/web3-wallet.ts} RENAMED Viewed

@@ -1,3 +1,4 @@
+'use client';
 import type { EIP1193Provider } from '@web3-onboard/core';
 import injectedModule from '@web3-onboard/injected-wallets';
 import ledgerModule from '@web3-onboard/ledger';
@@ -6,8 +7,6 @@ import walletConnectModule from '@web3-onboard/walletconnect';
 import { useEffect, useState } from 'react';
 import { singletonHook } from 'react-singleton-hook';
-import icon from '@/assets/images/near-icon.svg';
 const web3onboardKey = 'web3-onboard:connectedWallets';
 const wcV2InitOptions: any = {
@@ -231,8 +230,8 @@ export const onboard = init({
   ],
   appMetadata: {
     name: 'NEAR',
-    icon: icon.content,
-    description: 'NEAR - BOS',
+    icon: '/next.svg',
+    description: 'NEAR',
   },
   theme: 'dark',
   containerElements: {
@@ -258,8 +257,6 @@ export const useEthersProviderContext = singletonHook(defaultEthersProviderConte
       const walletsSub = onboard.state.select('wallets');
-      // TODO: do we need to unsubscribe?
-      // const { unsubscribe } = walletsSub.subscribe((wallets) => {
       walletsSub.subscribe((wallets) => {
         const connectedWallets = wallets.map(({ label }) => label);
         localStorage.setItem(web3onboardKey, JSON.stringify(connectedWallets));
@@ -289,4 +286,4 @@ export const useEthersProviderContext = singletonHook(defaultEthersProviderConte
   }, [wallet]);
   return ethersProvider;
-});
+});

package/templates/frontend/vanilla/.babelrc ADDED Viewed

@@ -0,0 +1,7 @@
+{
+  "presets": ["@babel/preset-env", ["@babel/preset-react", {"runtime": "automatic"}]],
+  "plugins": [
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-transform-class-properties"
+  ]
+}

package/templates/frontend/vanilla/package.json CHANGED Viewed

@@ -3,27 +3,41 @@
   "version": "1.0.0",
   "license": "(MIT AND Apache-2.0)",
   "scripts": {
-    "start": "parcel index.html --open",
-    "dev": "parcel index.html --open",
-    "build": "parcel build index.html --public-url ./"
+    "dev": "webpack serve --open"
   },
   "devDependencies": {
-    "buffer": "^6.0.0",
-    "events": "^3.3.0",
+    "@babel/core": "^7.23.2",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-class-properties": "^7.18.6",
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.22.15",
+    "babel-loader": "^9.1.3",
+    "buffer": "^6.0.3",
+    "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.8.1",
+    "html-webpack-plugin": "^5.5.3",
     "https-browserify": "^1.0.0",
-    "nodemon": "^2.0.16",
-    "parcel": "^2.7.0",
     "process": "^0.11.10",
-    "punycode": "^1.4.1",
-    "stream-http": "^3.1.0",
-    "url": "^0.11.0"
+    "stream-http": "^3.2.0",
+    "style-loader": "^3.3.3",
+    "url": "^0.11.3",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
   },
   "dependencies": {
     "@near-wallet-selector/core": "^8.7.0",
-    "@near-wallet-selector/ledger": "^8.7.0",
+    "@near-wallet-selector/here-wallet": "^8.7.0",
     "@near-wallet-selector/modal-ui": "^8.7.0",
     "@near-wallet-selector/my-near-wallet": "^8.7.0",
-    "@near-wallet-selector/near-wallet": "^8.7.0",
-    "near-api-js": "^2.1.4"
+    "crypto-browserify": "^3.12.0",
+    "near-api-js": "^2.1.4",
+    "near-social-vm": "github:NearSocial/VM#2.5.2",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.18.0",
+    "semantic-ui-react": "^2.1.4",
+    "stream": "^0.0.2"
   }
 }

package/templates/frontend/vanilla/{assets → src/assets}/global.css RENAMED Viewed

@@ -12,40 +12,47 @@ html {
   --primary: #FF585D;
   --secondary: #0072CE;
-  background-color: var(--bg);
   color: var(--fg);
-  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Droid Sans, Helvetica Neue, sans-serif;
   font-size: calc(0.9em + 0.5vw);
   line-height: 1.3;
 }
 body {
   margin: 0;
-  padding: 1em;
+  height: 100vh;
+  background: linear-gradient(to bottom, transparent, rgb(var(--shadow))) rgb(var(--light-gray));
+  background-color: var(--shadow) !important;
 }
-main {
-  margin: 0 auto;
-  max-width: 26em;
+a {
+  color: var(--fg) !important;
+  text-decoration: none !important;
 }
-main.please-wait {}
+.container{
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  padding: 2rem;
+  padding-top: 0;
+}
 h1 {
-  background-image: url(./logo-black.svg);
-  background-position: center 1em;
-  background-repeat: no-repeat;
-  background-size: auto 1.5em;
-  margin-top: 0;
-  padding: 3.5em 0 0;
   text-align: center;
   font-size: 1.5em;
 }
 .greeting {
   color: var(--secondary);
   text-decoration: underline;
 }
-h2 {
+.alert{
+  max-width: 410px;
+  font-size: 13px;
   text-align: center;
 }
@@ -53,22 +60,6 @@ h2 {
   pointer-events: none;
 }
-ul.information  {
-  margin: 2em 0 2em 0;
-  padding: 0;
-  text-align: left;
-  font-size: 0.8em;
-}
-.information li:first-child {
-  border-top: 1px solid var(--light-gray);
-}
-.information li {
-  padding: 0.5em 0;
-  border-bottom: 1px solid var(--light-gray);
-  list-style: none;
-}
 .change {
   display: flex;
   flex-direction: column;
@@ -76,7 +67,6 @@ ul.information  {
   justify-content: space-evenly;
   align-items: stretch;
   font-size: 1em;
-  border: 2px solid var(--light-gray);
   padding: 0.5em;
 }
 .change > div {
@@ -90,12 +80,6 @@ ul.information  {
   border-bottom-right-radius: 0;
   border-top-right-radius: 0;
 }
-.change label {
-  display: block;
-  text-align: left;
-  margin-right: 10px;
-  padding-bottom: 0.5em;
-}
 .change button {
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
@@ -122,30 +106,15 @@ button, input {
   outline: none;
 }
-main.please-wait .change button {
+.please-wait .change button {
   position: relative;
   pointer-events: none;
-  background-color: white;
 }
-main.please-wait .change button span {
+.please-wait .change button span {
   visibility: hidden;
 }
-button {
-  background-color: var(--secondary);
-  border-radius: 5px;
-  border: none;
-  color: #efefef;
-  cursor: pointer;
-  padding: 0.3em 0.75em;
-  transition: transform 30ms;
-}
-button:hover, button:focus {
-  box-shadow: 0 0 10em rgba(255, 255, 255, 0.2) inset;
-}
 input {
-  background-color: var(--light-gray);
   border: none;
   border-radius: 5px 0 0 5px;
   caret-color: var(--primary);
@@ -184,8 +153,8 @@ li {
   }
 }
-main.please-wait .loader,
-main.please-wait .loader:after{
+.please-wait .loader,
+.please-wait .loader:after{
   display: inline-block;
 }
 .loader,