diff --git a/frontend/package.json b/frontend/package.json index af4dfeb..2738cbe 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -12,23 +12,26 @@ "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": { @@ -36,10 +39,10 @@ } }, "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 index c16430c..463eae0 100644 --- 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 index fa5beed..3450314 100644 --- 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 index ad90f05..1262160 100644 --- 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} - 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'; + } }; /**