feat: update example

near-examples · Sep 30, 2024 · 1724e6f · 1724e6f
1 parent 5282d05
commit 1724e6f
Show file tree

Hide file tree

Showing 14 changed files with 196 additions and 163 deletions.
diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
@@ -1,3 +1,10 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": [
+    "next/core-web-vitals" // extended set of recommended rules from Next.js
+  ],
+  "plugins": ["simple-import-sort"],
+  "root": true,
+  "rules": {
+    "simple-import-sort/imports": "warn"
+  }
 }
diff --git a/frontend/next.config.js b/frontend/next.config.js
@@ -1,14 +1,6 @@
-const isProduction = process.env.NODE_ENV === 'production'
-
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  images: {
-    unoptimized: true,
-  },
-  basePath: isProduction ? '/hello-near-examples' : '',
-  output: "export",
-  distDir: 'build',
   reactStrictMode: true,
-}
+};
 
-module.exports = nextConfig;
+module.exports = nextConfig;
diff --git a/frontend/package.json b/frontend/package.json
@@ -16,25 +16,33 @@
     "@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",
-    "@web3modal/wagmi": "^5.1.9",
+    "@near-wallet-selector/sender": "^8.9.13",
+    "@web3modal/wagmi": "^5.1.10",
     "bootstrap": "^5",
     "bootstrap-icons": "^1.11.3",
-    "near-api-js": "^5",
+    "near-api-js": "^4.0.3",
     "next": "14.2.13",
     "react": "^18",
     "react-dom": "^18",
-    "wagmi": "^2.12.14"
+    "wagmi": "^2.12.16"
   },
-  "resolutions": {
-    "near-api-js": "4.0.3"
+  "overrides": {
+    "@near-wallet-selector/ethereum-wallets": {
+      "near-api-js": "4.0.3"
+    }
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.25.4",
+    "@babel/preset-react": "^7.24.7",
     "encoding": "^0.1.13",
-    "eslint": "^9",
+    "eslint": "^8.57.1",
     "eslint-config-next": "14.2.13",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
     "pino-pretty": "^11.2.2"
   }
 }
diff --git a/frontend/src/components/cards.js b/frontend/src/components/cards.js
@@ -8,7 +8,7 @@ export const Cards = () => {
       <Link
         href="https://docs.near.org/build/web3-apps/quickstart"
         className={styles.card}
-        target='_blank'
+        target="_blank"
         rel="noopener noreferrer"
       >
         <h2>
@@ -17,16 +17,12 @@ export const Cards = () => {
         <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"
-      >
+      <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>
     </div>
   );
-};
+};
diff --git a/frontend/src/components/navigation.js b/frontend/src/components/navigation.js
@@ -1,13 +1,13 @@
 import Image from 'next/image';
 import Link from 'next/link';
-import { useEffect, useState, useContext } from 'react';
+import { useContext,useEffect, useState } from 'react';
 
-import { NearContext } from '@/context';
 import NearLogo from '/public/near-logo.svg';
+import { NearContext } from '@/wallets/near';
 
 export const Navigation = () => {
   const { signedAccountId, wallet } = useContext(NearContext);
-  const [action, setAction] = useState(() => { });
+  const [action, setAction] = useState(() => {});
   const [label, setLabel] = useState('Loading...');
 
   useEffect(() => {
@@ -28,10 +28,12 @@ export const Navigation = () => {
         <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 className="navbar-nav pt-1">
+          <button className="btn btn-secondary" onClick={action}>
+            {label}
+          </button>
         </div>
       </div>
     </nav>
   );
-};
+};
diff --git a/frontend/src/config.js b/frontend/src/config.js
@@ -3,22 +3,22 @@ const contractPerNetwork = {
   testnet: 'hello.near-examples.testnet',
 };
 
-// Chains for EVM Wallets 
+// 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",
+    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",
+    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 EVMWalletChain = evmWalletChains[NetworkId];
+export const EVMWalletChain = evmWalletChains[NetworkId];
diff --git a/frontend/src/context.js b/frontend/src/context.js
diff --git a/frontend/src/pages/_app.js b/frontend/src/pages/_app.js
@@ -1,18 +1,19 @@
+import '@/styles/globals.css';
+
 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 } from '@/config';
+import { NearContext,Wallet } from '@/wallets/near';
 
 const wallet = new Wallet({ networkId: NetworkId });
 
 export default function MyApp({ Component, pageProps }) {
   const [signedAccountId, setSignedAccountId] = useState('');
 
-  useEffect(() => { wallet.startUp(setSignedAccountId) }, []);
+  useEffect(() => {
+    wallet.startUp(setSignedAccountId);
+  }, []);
 
   return (
     <NearContext.Provider value={{ wallet, signedAccountId }}>

diff --git a/frontend/src/pages/hello-near/index.js b/frontend/src/pages/hello-near/index.js
@@ -1,9 +1,10 @@
-import { useState, useEffect, useContext } from 'react';
+import { useContext,useEffect, useState } from 'react';
 
-import { NearContext } from '@/context';
+import { Cards } from '@/components/cards';
 import styles from '@/styles/app.module.css';
+import { NearContext } from '@/wallets/near';
+
 import { HelloNearContract } from '../../config';
-import { Cards } from '@/components/cards';
 
 // Contract that the app will interact with
 const CONTRACT = HelloNearContract;
@@ -19,9 +20,7 @@ export default function HelloNear() {
   useEffect(() => {
     if (!wallet) return;
 
-    wallet.viewMethod({ contractId: CONTRACT, method: 'get_greeting' }).then(
-      greeting => setGreeting(greeting)
-    );
+    wallet.viewMethod({ contractId: CONTRACT, method: 'get_greeting' }).then((greeting) => setGreeting(greeting));
   }, [wallet]);
 
   useEffect(() => {
@@ -30,11 +29,9 @@ export default function HelloNear() {
 
   const saveGreeting = async () => {
     setShowSpinner(true);
-    try {
-      await wallet.callMethod({ contractId: CONTRACT, method: 'set_greeting', args: { greeting: newGreeting } });
-      const greeting = await wallet.viewMethod({ contractId: CONTRACT, method: 'get_greeting' });
-      setGreeting(greeting);
-    } catch (e) { console.error(e); }
+    await wallet.callMethod({ contractId: CONTRACT, method: 'set_greeting', args: { greeting: newGreeting } });
+    const greeting = await wallet.viewMethod({ contractId: CONTRACT, method: 'get_greeting' });
+    setGreeting(greeting);
     setShowSpinner(false);
   };
 
@@ -56,15 +53,12 @@ export default function HelloNear() {
             type="text"
             className="form-control w-20"
             placeholder="Store a new greeting"
-            onChange={t => setNewGreeting(t.target.value)}
+            onChange={(t) => setNewGreeting(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>
+              <i className="spinner-border spinner-border-sm" hidden={!showSpinner}></i>
             </button>
           </div>
         </div>
@@ -75,4 +69,4 @@ export default function HelloNear() {
       <Cards />
     </main>
   );
-}
+}
diff --git a/frontend/src/pages/index.js b/frontend/src/pages/index.js
@@ -2,30 +2,23 @@ import Image from 'next/image';
 
 import NearLogo from '/public/near.svg';
 import NextLogo from '/public/next.svg';
-import styles from '@/styles/app.module.css';
 import { Cards } from '@/components/cards';
+import styles from '@/styles/app.module.css';
 
 export default function Home() {
   return (
     <main className={styles.main}>
       <div className={styles.description}> </div>
 
       <div className={styles.center}>
-        <Image
-          className={styles.logo}
-          src={NearLogo}
-          alt="NEAR Logo"
-          width={110 * 1.5}
-          height={28 * 1.5}
-          priority
-        />
+        <Image className={styles.logo} src={NearLogo} alt="NEAR Logo" width={110 * 1.5} height={28 * 1.5} priority />
         <h3 className="ms-2 me-3 text-dark"> + </h3>
         <Image
           className={styles.logo}
           src={NextLogo}
           alt="Next.js Logo"
-          width={300 * .58}
-          height={61 * .58}
+          width={300 * 0.58}
+          height={61 * 0.58}
           priority
         />
       </div>
@@ -35,4 +28,4 @@ export default function Home() {
       </div>
     </main>
   );
-}
+}
diff --git a/frontend/src/styles/app.module.css b/frontend/src/styles/app.module.css
@@ -51,7 +51,9 @@
   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;
+  transition:
+    background 200ms,
+    border 200ms;
 }
 
 .card span {
@@ -180,9 +182,7 @@
     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: linear-gradient(to bottom, rgba(var(--background-start-rgb), 1), rgba(var(--callout-rgb), 0.5));
     background-clip: padding-box;
     backdrop-filter: blur(24px);
   }
@@ -193,9 +193,7 @@
     inset: auto 0 0;
     padding: 2rem;
     height: 200px;
-    background: linear-gradient(to bottom,
-        transparent 0%,
-        rgb(var(--background-end-rgb)) 40%);
+    background: linear-gradient(to bottom, transparent 0%, rgb(var(--background-end-rgb)) 40%);
     z-index: 1;
   }
 }
@@ -225,4 +223,4 @@
   to {
     transform: rotate(0deg);
   }
-}
+}