Merge pull request #24 from near-examples/update

feat: update packages
near-examples · Dec 2, 2024 · 4860bf0 · 4860bf0
2 parents 3b9d74e + b4b8e8b
commit 4860bf0
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 32 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -12,34 +12,37 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@near-js/providers": "^1.0.0",
-    "@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/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",
-    "@near-wallet-selector/sender": "^8.9.13",
-    "@web3modal/wagmi": "^5.1.10",
+    "@near-js/providers": "^1.0.1",
+    "@near-wallet-selector/bitte-wallet": "^8.9.14",
+    "@near-wallet-selector/core": "^8.9.14",
+    "@near-wallet-selector/ethereum-wallets": "^8.9.14",
+    "@near-wallet-selector/here-wallet": "^8.9.14",
+    "@near-wallet-selector/ledger": "^8.9.14",
+    "@near-wallet-selector/meteor-wallet": "^8.9.14",
+    "@near-wallet-selector/modal-ui": "^8.9.14",
+    "@near-wallet-selector/my-near-wallet": "^8.9.14",
+    "@near-wallet-selector/near-mobile-wallet": "^8.9.14",
+    "@near-wallet-selector/sender": "^8.9.14",
+    "@near-wallet-selector/welldone-wallet": "^8.9.14",
+    "@web3modal/wagmi": "^5.1.11",
     "bootstrap": "^5",
     "bootstrap-icons": "^1.11.3",
-    "near-api-js": "^4.0.3",
-    "next": "14.2.13",
+    "near-api-js": "^5.0.1",
+    "next": "15.0.3",
     "react": "^18",
     "react-dom": "^18",
-    "wagmi": "^2.12.16"
+    "wagmi": "^2.13.3"
   },
   "overrides": {
     "@near-wallet-selector/ethereum-wallets": {
       "near-api-js": "4.0.3"
     }
   },
   "devDependencies": {
-    "@types/node": "^22.7.4",
+    "@types/node": "^22.10.1",
     "encoding": "^0.1.13",
-    "eslint": "^8.57.1",
-    "eslint-config-next": "14.2.13",
-    "pino-pretty": "^11.2.2"
+    "eslint": "^9.16.0",
+    "eslint-config-next": "15.0.3",
+    "pino-pretty": "^13.0.0"
   }
 }
diff --git a/frontend/src/pages/_app.js b/frontend/src/pages/_app.js
@@ -3,11 +3,16 @@ import '@/styles/globals.css';
 import { useEffect, useState } from 'react';
 
 import { Navigation } from '@/components/navigation';
-import { NetworkId } from '@/config';
+import { HelloNearContract, NetworkId } from '@/config';
 import { NearContext, Wallet } from '@/wallets/near';
 
+
+// Wallet instance
 const wallet = new Wallet({ networkId: NetworkId });
 
+// Optional: Create an access key so the user does not need to sign transactions. Read more about access keys here: https://docs.near.org/concepts/protocol/access-keys
+//const wallet = new Wallet({ networkId: NetworkId, createAccessKeyFor: HelloNearContract });
+
 export default function MyApp({ Component, pageProps }) {
   const [signedAccountId, setSignedAccountId] = useState('');
 

diff --git a/frontend/src/pages/hello-near/index.js b/frontend/src/pages/hello-near/index.js
@@ -28,10 +28,15 @@ export default function HelloNear() {
   }, [signedAccountId]);
 
   const saveGreeting = async () => {
+    wallet.callMethod({ contractId: CONTRACT, method: 'set_greeting', args: { greeting: newGreeting } })
+      .then(async () => {
+        const greeting = await wallet.viewMethod({ contractId: CONTRACT, method: 'get_greeting' });
+        setGreeting(greeting);
+      });
+
     setShowSpinner(true);
-    await wallet.callMethod({ contractId: CONTRACT, method: 'set_greeting', args: { greeting: newGreeting } });
-    const greeting = await wallet.viewMethod({ contractId: CONTRACT, method: 'get_greeting' });
-    setGreeting(greeting);
+    await new Promise(resolve => setTimeout(resolve, 300));
+    setGreeting(newGreeting);
     setShowSpinner(false);
   };
 

diff --git a/frontend/src/wallets/near.js b/frontend/src/wallets/near.js
@@ -9,6 +9,11 @@ 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';
+
+
 // near api js
 import { providers, utils } from 'near-api-js';
 import { createContext } from 'react';
@@ -43,12 +48,15 @@ export class Wallet {
     this.selector = setupWalletSelector({
       network: this.networkId,
       modules: [
-        setupMyNearWallet(),
-        setupLedger(),
         setupMeteorWallet(),
-        setupSender(),
-        setupBitteWallet(),
         setupEthereumWallets({ wagmiConfig, web3Modal, alwaysOnboardDuringSignIn: true }),
+        setupLedger(),
+        setupBitteWallet(),
+        setupHereWallet(),
+        setupSender(),
+        setupNearMobileWallet(),
+        setupWelldoneWallet(),
+        setupMyNearWallet(),
       ],
     });
 
@@ -151,10 +159,11 @@ export class Wallet {
   /**
    * 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) => {
+  getBalance = async (accountId, format = false) => {
     const walletSelector = await this.selector;
     const { network } = walletSelector.options;
     const provider = new providers.JsonRpcProvider({ url: network.nodeUrl });
@@ -166,12 +175,12 @@ export class Wallet {
       finality: 'final',
     });
 
-    // Format the amout and remove commas
-    const amountString = utils.format.formatNearAmount(account.amount);
-    const amount = Number(amountString.replace(/,/g, "").trim());
-
-    // Return amount in NEAR
-    return account.amount ? amount : 0;
+    // Format the amount if needed
+    if (format) {
+      return account.amount ? utils.format.formatNearAmount(account.amount) : '0';
+    } else {
+      return account.amount || '0';
+    }
   };
 
   /**