From 5c3cda75f9bdd6eb1d68c48d7e7153f770438be5 Mon Sep 17 00:00:00 2001 From: Guillermo Alejandro Gallardo Diez Date: Wed, 21 Jan 2026 11:08:35 +0100 Subject: [PATCH] feat: remove all further mentions of wallet selector --- docs/primitives/dao.md | 30 ++++++------- docs/primitives/dex.md | 18 ++++---- docs/primitives/ft/ft.md | 42 +++++++++---------- docs/primitives/linkdrop/linkdrop.md | 36 ++++++++-------- docs/primitives/nft/nft.md | 24 +++++------ docs/smart-contracts/release/upgrade.md | 2 +- docs/web3-apps/quickstart.md | 8 ++-- website/package.json | 22 ++-------- .../src/components/Academy/CheckContract.jsx | 4 +- website/src/components/Academy/CheckLogin.jsx | 4 +- website/src/components/UI/ImgNft/index.jsx | 2 +- website/src/components/faucet/index.js | 6 +-- .../CreateDaoForm.jsx | 6 +-- .../tools/FungibleToken/CreateTokenForm.jsx | 6 +-- .../tools/Linkdrops/CreateNFTDrop.jsx | 6 +-- .../tools/Linkdrops/CreateTokenDrop.jsx | 6 +-- .../tools/NonFungibleToken/MintNFT.jsx | 4 +- .../components/tools/hooks/useLinkdrops.js | 6 +-- website/src/components/tools/index.jsx | 6 +-- website/src/pages/claim/NFTPreview.jsx | 4 +- website/src/pages/claim/linkdrop.jsx | 8 ++-- website/src/theme/NavbarItem/login-button.js | 4 +- website/src/theme/Root.js | 33 ++------------- 23 files changed, 121 insertions(+), 166 deletions(-) diff --git a/docs/primitives/dao.md b/docs/primitives/dao.md index 75be9a56e17..0d8949a2c38 100644 --- a/docs/primitives/dao.md +++ b/docs/primitives/dao.md @@ -35,13 +35,13 @@ You can create a DAO by interacting with the `sputnik-dao` contract: ```js - import { useWalletSelector } from "@near-wallet-selector/react-hook"; + import { useNearWallet } from "near-connect-hooks"; const DAO_FACTORY_CONTRACT_ADDRESS = 'sputnik-dao.near'; - const { callMethod } = useWalletSelector(); + const { callFunction } = useNearWallet(); - await callMethod({ + await callFunction({ contractId: DAO_FACTORY_CONTRACT_ADDRESS, method: 'create', args: { @@ -197,12 +197,12 @@ Query the list of DAOs existing in Sputnik Dao. ```js - import { useWalletSelector } from "@near-wallet-selector/react-hook"; + import { useNearWallet } from "near-connect-hooks"; const DAO_FACTORY_CONTRACT_ADDRESS = 'sputnik-dao.near'; - const { viewMethod } = useWalletSelector(); + const { viewFunction } = useNearWallet(); - await viewMethod({ + await viewFunction({ method: 'get_dao_list', args: {}, contractId: DAO_FACTORY_CONTRACT_ADDRESS, @@ -257,12 +257,12 @@ These snippets will enable you to query the proposals existing in a particular D ```js - import { useWalletSelector } from "@near-wallet-selector/react-hook"; + import { useNearWallet } from "near-connect-hooks"; const DAO_CONTRACT_ADDRESS = 'nearweek-news-contribution.sputnik-dao.near'; - const { viewMethod } = useWalletSelector(); + const { viewFunction } = useNearWallet(); - await viewMethod({ + await viewFunction({ method: 'get_proposals', args: { from_index: 9262, limit: 2 }, contractId: DAO_CONTRACT_ADDRESS, @@ -388,13 +388,13 @@ Create a proposal so other users can vote in favor or against it. ```js - import { useWalletSelector } from "@near-wallet-selector/react-hook"; + import { useNearWallet } from "near-connect-hooks"; const DAO_CONTRACT_ADDRESS = 'primitives.sputnik-dao.near'; - const { callMethod } = useWalletSelector(); + const { callFunction } = useNearWallet(); - await callMethod({ + await callFunction({ contractId: DAO_CONTRACT_ADDRESS, method: 'add_proposal', args: { @@ -716,13 +716,13 @@ These snippet will enable your users to cast a vote for proposal of a particular ```js - import { useWalletSelector } from "@near-wallet-selector/react-hook"; + import { useNearWallet } from "near-connect-hooks"; const DAO_CONTRACT_ADDRESS = 'primitives.sputnik-dao.near'; - const { callMethod } = useWalletSelector(); + const { callFunction } = useNearWallet(); - await callMethod({ + await callFunction({ contractId: DAO_CONTRACT_ADDRESS, method: 'act_proposal', args: { id: 0, action: 'VoteApprove' }, diff --git a/docs/primitives/dex.md b/docs/primitives/dex.md index b5cd21561b2..31cafb0f9f2 100644 --- a/docs/primitives/dex.md +++ b/docs/primitives/dex.md @@ -173,13 +173,13 @@ Query your deposit balances by calling the `get_deposits` method: ```js - import { useWalletSelector } from "@near-wallet-selector/react-hook"; + import { useNearWallet } from "near-connect-hooks"; const AMM_CONTRACT_ADDRESS = 'v2.ref-finance.near'; - const { viewMethod } = useWalletSelector(); + const { viewFunction } = useNearWallet(); - await viewMethod({ + await viewFunction({ method: 'get_deposits', args: { account_id: 'bob.near', @@ -290,13 +290,13 @@ DEXs work by having multiple pools of token pairs (e.g. NEAR-USDC) that users ca ```js - import { useWalletSelector } from "@near-wallet-selector/react-hook"; + import { useNearWallet } from "near-connect-hooks"; const AMM_CONTRACT_ADDRESS = 'v2.ref-finance.near'; - const { viewMethod } = useWalletSelector(); + const { viewFunction } = useNearWallet(); - await viewMethod({ + await viewFunction({ method: 'get_pools', args: { from_index: 0, @@ -473,13 +473,13 @@ In order to swap a token for another, you need to [have funds](#deposit-funds), ```js - import { useWalletSelector } from "@near-wallet-selector/react-hook"; + import { useNearWallet } from "near-connect-hooks"; const AMM_CONTRACT_ADDRESS = 'v2.ref-finance.near'; - const { callMethod } = useWalletSelector(); + const { callFunction } = useNearWallet(); - await callMethod({ + await callFunction({ contractId: AMM_CONTRACT_ADDRESS, method: 'swap', args: { diff --git a/docs/primitives/ft/ft.md b/docs/primitives/ft/ft.md index bd0c794ac1c..5240fa85d6e 100644 --- a/docs/primitives/ft/ft.md +++ b/docs/primitives/ft/ft.md @@ -38,11 +38,11 @@ Here is how to directly interact with the factory contract through your applicat ```js - import { useWalletSelector } from "@near-wallet-selector/react-hook"; + import { useNearWallet } from "near-connect-hooks"; const TOKEN_FACTORY_ADDRESS = 'token.primitives.near'; - const { callMethod } = useWalletSelector(); + const { callFunction } = useNearWallet(); const args = { args: { @@ -59,7 +59,7 @@ Here is how to directly interact with the factory contract through your applicat account_id: 'bob.near', }; - await callMethod({ + await callFunction({ contractId: TOKEN_FACTORY_ADDRESS, method: 'create_token', args, @@ -172,13 +172,13 @@ You can query the FT's metadata by calling the `ft_metadata`. ```js - import { useWalletSelector } from "@near-wallet-selector/react-hook"; + import { useNearWallet } from "near-connect-hooks"; const TOKEN_CONTRACT_ADDRESS = 'token.v2.ref-finance.near'; - const { viewMethod } = useWalletSelector(); + const { viewFunction } = useNearWallet(); - await viewMethod({ + await viewFunction({ method: 'ft_metadata', args: {}, contractId: TOKEN_CONTRACT_ADDRESS, @@ -249,13 +249,13 @@ To know how many coins a user has you will need to query the method `ft_balance_ ::: ```js - import { useWalletSelector } from "@near-wallet-selector/react-hook"; + import { useNearWallet } from "near-connect-hooks"; const TOKEN_CONTRACT_ADDRESS = 'token.v2.ref-finance.near'; - const { viewMethod } = useWalletSelector(); + const { viewFunction } = useNearWallet(); - await viewMethod({ + await viewFunction({ method: 'ft_balance_of', args: { account_id: 'bob.near', @@ -310,13 +310,13 @@ By calling this `storage_deposit` the user can register themselves or **register ```js - import { useWalletSelector } from "@near-wallet-selector/react-hook"; + import { useNearWallet } from "near-connect-hooks"; const TOKEN_CONTRACT_ADDRESS = 'token.v2.ref-finance.near'; - const { callMethod } = useWalletSelector(); + const { callFunction } = useNearWallet(); - await callMethod({ + await callFunction({ contractId: TOKEN_CONTRACT_ADDRESS, method: 'storage_deposit', args: { @@ -357,13 +357,13 @@ To send FT to another account you will use the `ft_transfer` method, indicating ```js - import { useWalletSelector } from "@near-wallet-selector/react-hook"; + import { useNearWallet } from "near-connect-hooks"; const TOKEN_CONTRACT_ADDRESS = 'token.v2.ref-finance.near'; - const { callMethod } = useWalletSelector(); + const { callFunction } = useNearWallet(); - await callMethod({ + await callFunction({ contractId: TOKEN_CONTRACT_ADDRESS, method: 'ft_transfer', args: { @@ -434,13 +434,13 @@ Let's assume that you need to deposit FTs on [Ref Finance](https://rhea.finance/ ```js - import { useWalletSelector } from "@near-wallet-selector/react-hook"; + import { useNearWallet } from "near-connect-hooks"; const TOKEN_CONTRACT_ADDRESS = 'token.v2.ref-finance.near'; - const { callMethod } = useWalletSelector(); + const { callFunction } = useNearWallet(); - await callMethod({ + await callFunction({ contractId: TOKEN_CONTRACT_ADDRESS, method: 'ft_transfer_call', args: { @@ -549,11 +549,11 @@ While the FT standard does not define a `burn` method, you can simply transfer t ```js - import { useWalletSelector } from "@near-wallet-selector/react-hook"; + import { useNearWallet } from "near-connect-hooks"; - const { callMethod } = useWalletSelector(); + const { callFunction } = useNearWallet(); - await callMethod({ + await callFunction({ contractId: 'token.v2.ref-finance.near', method: 'ft_transfer', args: { diff --git a/docs/primitives/linkdrop/linkdrop.md b/docs/primitives/linkdrop/linkdrop.md index 5b50ea35583..1c0ebeb4f71 100644 --- a/docs/primitives/linkdrop/linkdrop.md +++ b/docs/primitives/linkdrop/linkdrop.md @@ -68,14 +68,14 @@ The contract will create a drop and **return the numerical ID** that identifies ```js -import { useWalletSelector } from "@near-wallet-selector/react-hook"; +import { useNearWallet } from "near-connect-hooks"; const KEYPOM_CONTRACT_ADDRESS = "v2.keypom.near"; const DROP_AMOUNT = "10000000000000000000000"; // 0.1 NEAR -const { callMethod } = useWalletSelector(); +const { callFunction } = useNearWallet(); -await callMethod({ +await callFunction({ contractId: KEYPOM_CONTRACT_ADDRESS, method: "create_drop", args: { @@ -129,15 +129,15 @@ The contract will then create a drop and **return the numerical ID** that identi ```js -import { useWalletSelector } from "@near-wallet-selector/react-hook"; +import { useNearWallet } from "near-connect-hooks"; const KEYPOM_CONTRACT_ADDRESS = "v2.keypom.near"; const NFT_CONTRACT_ADDRESS = "nft.primitives.near"; const DROP_AMOUNT = "10000000000000000000000"; -const { callMethod, accountId } = useWalletSelector(); +const { callFunction, accountId } = useNearWallet(); -await callMethod({ +await callFunction({ contractId: KEYPOM_CONTRACT_ADDRESS, method: "create_drop", args: { @@ -179,15 +179,15 @@ Having the Drop ID, you now need to transfer the NFT to the linkdrop contract, s ```js -import { useWalletSelector } from "@near-wallet-selector/react-hook"; +import { useNearWallet } from "near-connect-hooks"; const KEYPOM_CONTRACT_ADDRESS = "v2.keypom.near"; const NFT_CONTRACT_ADDRESS = "nft.primitives.near"; const NFT_TOKEN_ID = "1"; -const { callMethod } = useWalletSelector(); +const { callFunction } = useNearWallet(); -await callMethod({ +await callFunction({ contractId: NFT_CONTRACT_ADDRESS, method: "nft_transfer_call", args: { @@ -242,15 +242,15 @@ The contract will then create a drop and **return the numerical ID** that identi ```js -import { useWalletSelector } from "@near-wallet-selector/react-hook"; +import { useNearWallet } from "near-connect-hooks"; const KEYPOM_CONTRACT_ADDRESS = "v2.keypom.near"; const FT_CONTRACT_ADDRESS = "ft.primitives.near"; const DROP_AMOUNT = "10000000000000000000000"; -const { callMethod, accountId } = useWalletSelector(); +const { callFunction, accountId } = useNearWallet(); -await callMethod({ +await callFunction({ contractId: KEYPOM_CONTRACT_ADDRESS, method: "create_drop", args: { @@ -298,14 +298,14 @@ To transfer FTs to an account, you need to first [register](./ft#registering-a-u ```js -import { useWalletSelector } from "@near-wallet-selector/react-hook"; +import { useNearWallet } from "near-connect-hooks"; const KEYPOM_CONTRACT_ADDRESS = "v2.keypom.near"; const FT_CONTRACT_ADDRESS = "ft.primitives.near"; -const { callMethod } = useWalletSelector(); +const { callFunction } = useNearWallet(); -await callMethod({ +await callFunction({ contractId: FT_CONTRACT_ADDRESS, method: "ft_transfer", args: { @@ -352,16 +352,16 @@ Function call drops can be thought as the abstract version of other drops: you c ```js -import { useWalletSelector } from "@near-wallet-selector/react-hook"; +import { useNearWallet } from "near-connect-hooks"; const KEYPOM_CONTRACT_ADDRESS = "v2.keypom.near"; const NFT_CONTRACT_ADDRESS = "nft.primitives.near"; const NFT_TOKEN_ID = "1"; const DROP_AMOUNT = "10000000000000000000000"; -const { callMethod } = useWalletSelector(); +const { callFunction } = useNearWallet(); -await callMethod({ +await callFunction({ contractId: KEYPOM_CONTRACT_ADDRESS, method: "create_drop", args: { diff --git a/docs/primitives/nft/nft.md b/docs/primitives/nft/nft.md index a1338d0abd4..9f3ad79cb65 100644 --- a/docs/primitives/nft/nft.md +++ b/docs/primitives/nft/nft.md @@ -94,13 +94,13 @@ Here is how to directly interact with the factory contract through your applicat ```js - import { useWalletSelector } from "@near-wallet-selector/react-hook"; + import { useNearWallet } from "near-connect-hooks"; const CONTRACT_ADDRESS = 'nft.primitives.near'; - const { callMethod } = useWalletSelector(); + const { callFunction } = useNearWallet(); - await callMethod({ + await callFunction({ contractId: CONTRACT_ADDRESS, method: 'nft_mint', args: { @@ -213,13 +213,13 @@ You can query the NFT's information and metadata by calling the `nft_token`. ```js - import { useWalletSelector } from "@near-wallet-selector/react-hook"; + import { useNearWallet } from "near-connect-hooks"; const CONTRACT_ADDRESS = 'nft.primitives.near'; - const { viewMethod } = useWalletSelector(); + const { viewFunction } = useNearWallet(); - const response = await viewMethod({ + const response = await viewFunction({ contractId: CONTRACT_ADDRESS, method: 'nft_token', args: { @@ -371,13 +371,13 @@ In both cases, it is necessary to invoke the `nft_transfer` method, indicating t ```js - import { useWalletSelector } from "@near-wallet-selector/react-hook"; + import { useNearWallet } from "near-connect-hooks"; const CONTRACT_ADDRESS = 'nft.primitives.near'; - const { callMethod } = useWalletSelector(); + const { callFunction } = useNearWallet(); - await callMethod({ + await callFunction({ contractId: CONTRACT_ADDRESS, method: 'nft_transfer', args: { @@ -523,11 +523,11 @@ While the NFT standard does not define a `burn` method, you can simply transfer ```js - import { useWalletSelector } from "@near-wallet-selector/react-hook"; + import { useNearWallet } from "near-connect-hooks"; - const { callMethod } = useWalletSelector(); + const { callFunction } = useNearWallet(); - await callMethod({ + await callFunction({ contractId: 'nft.primitives.near', method: 'nft_transfer', args: { diff --git a/docs/smart-contracts/release/upgrade.md b/docs/smart-contracts/release/upgrade.md index e31886c0654..b5e099acdf1 100644 --- a/docs/smart-contracts/release/upgrade.md +++ b/docs/smart-contracts/release/upgrade.md @@ -74,7 +74,7 @@ near contract call-function as-transaction update_contract fi const code = fs.readFileSync("./path/to/wasm.wasm"); // Call the update_contract method -await wallet.callMethod({ +await wallet.callFunction({ contractId: guestBook, method: "update_contract", args: code, diff --git a/docs/web3-apps/quickstart.md b/docs/web3-apps/quickstart.md index 7884284925e..c67364ea8bf 100644 --- a/docs/web3-apps/quickstart.md +++ b/docs/web3-apps/quickstart.md @@ -103,19 +103,19 @@ Login if you haven't done it yet and you will see a simple form that allows you ### Function Call Hooks Just like the [navigation bar](#navigation-bar), we use the `useNearWallet` hook to get functions that allow us to call methods on the contract: -- `viewMethod` is used to call functions that are read-only -- `callMethod` is used to call functions that modify the state of the contract +- `viewFunction` is used to call functions that are read-only +- `callFunction` is used to call functions that modify the state of the contract #### Calling Read-Only Methods -For example, when we want to fetch the current greeting stored in the contract, we use `viewMethod` inside a `useEffect` hook: +For example, when we want to fetch the current greeting stored in the contract, we use `viewFunction` inside a `useEffect` hook: #### Calling Change Methods -On the other hand, when the user submits a new greeting, we use `callMethod` to send a transaction to the contract: +On the other hand, when the user submits a new greeting, we use `callFunction` to send a transaction to the contract: diff --git a/website/package.json b/website/package.json index f0f0d9a71ab..f125983d5ff 100644 --- a/website/package.json +++ b/website/package.json @@ -39,25 +39,7 @@ "@docusaurus/theme-mermaid": "3.9.2", "@feelback/react": "^0.3.4", "@mermaid-js/layout-elk": "^0.2.0", - "@near-js/accounts": "2.3.1", - "@near-js/crypto": "2.3.1", - "@near-js/providers": "2.3.1", - "@near-js/signers": "2.3.1", - "@near-js/tokens": "2.3.1", - "@near-wallet-selector/bitte-wallet": "^9.5.4", - "@near-wallet-selector/core": "^9.5.4", - "@near-wallet-selector/ethereum-wallets": "^9.5.4", - "@near-wallet-selector/hot-wallet": "^8.10.1", - "@near-wallet-selector/intear-wallet": "^9.5.4", - "@near-wallet-selector/ledger": "^9.5.4", - "@near-wallet-selector/meteor-wallet": "^9.5.4", - "@near-wallet-selector/meteor-wallet-app": "^9.5.4", - "@near-wallet-selector/modal-ui": "^9.5.4", - "@near-wallet-selector/nightly": "^9.5.4", - "@near-wallet-selector/react-hook": "^9.5.4", - "@near-wallet-selector/sender": "^9.5.4", - "@near-wallet-selector/welldone-wallet": "^9.5.4", - "@saucelabs/theme-github-codeblock": "^0.2.3", + "@saucelabs/theme-github-codeblock": "^0.3.0", "axios": "^1.12.0", "clsx": "^1.1.1", "crypto-browserify": "^3.12.1", @@ -67,6 +49,8 @@ "lodash": "^4.17.21", "lucide-react": "^0.555.0", "monaco-editor": "^0.55.1", + "near-api-js": "^7.0.0", + "near-connect-hooks": "^1.0.2", "posthog-js": "^1.257.2", "process": "^0.11.10", "react": "^18.2.0", diff --git a/website/src/components/Academy/CheckContract.jsx b/website/src/components/Academy/CheckContract.jsx index 103ad68694e..9d8d112b81e 100644 --- a/website/src/components/Academy/CheckContract.jsx +++ b/website/src/components/Academy/CheckContract.jsx @@ -1,4 +1,4 @@ -import { useWalletSelector } from "@near-wallet-selector/react-hook"; +import { useNearWallet } from "near-connect-hooks"; import { useEffect, useState } from "react"; import { useAcademyProgress } from "./AcademyProgressContext"; import './CheckContract.scss'; @@ -11,7 +11,7 @@ const CheckContract = ({ course, method }) => { return
Error: No course provided.
; } - const { signedAccountId, signIn, callFunction } = useWalletSelector(); + const { signedAccountId, signIn, callFunction } = useNearWallet(); const { incrementCompletedLessons } = useAcademyProgress(course); const localStorageKey = `academy-quiz-${course}-${method}`; diff --git a/website/src/components/Academy/CheckLogin.jsx b/website/src/components/Academy/CheckLogin.jsx index b501c09b3d0..e9ac2b174f6 100644 --- a/website/src/components/Academy/CheckLogin.jsx +++ b/website/src/components/Academy/CheckLogin.jsx @@ -1,4 +1,4 @@ -import { useWalletSelector } from "@near-wallet-selector/react-hook"; +import { useNearWallet } from "near-connect-hooks"; import { useEffect } from "react"; import { useAcademyProgress } from "./AcademyProgressContext"; @@ -7,7 +7,7 @@ const CheckLogin = ({course}) => { return
Error: No course provided.
; } - const {signedAccountId, signIn} = useWalletSelector(); + const {signedAccountId, signIn} = useNearWallet(); const {incrementCompletedLessons} = useAcademyProgress(course); const localStorageKey = `academy-quiz-${course}-check-login`; diff --git a/website/src/components/UI/ImgNft/index.jsx b/website/src/components/UI/ImgNft/index.jsx index f6a5890f327..827820b765f 100644 --- a/website/src/components/UI/ImgNft/index.jsx +++ b/website/src/components/UI/ImgNft/index.jsx @@ -3,7 +3,7 @@ import { useEffect, useState } from 'react'; import RoundedImage from './RoundedImage'; export const ImgNft = ({ nft }) => { - // const { wallet } = useWalletSelector(); + // const { wallet } = useNearWallet(); const [imageUrl, setImageUrl] = useState(''); useEffect(() => { diff --git a/website/src/components/faucet/index.js b/website/src/components/faucet/index.js index e146b5bd316..8c79479c5f5 100644 --- a/website/src/components/faucet/index.js +++ b/website/src/components/faucet/index.js @@ -1,12 +1,10 @@ -import { Account } from '@near-js/accounts'; -import { JsonRpcProvider } from '@near-js/providers'; -import { KeyPairSigner } from '@near-js/signers'; +import { Account, JsonRpcProvider, KeyPairSigner } from 'near-api-js'; import { useState } from 'react'; import './faucet.scss'; import Card from '../UI/Card'; import Button from '../UI/Button'; import Input from '../UI/Input'; -import { NEAR } from '@near-js/tokens'; +import { NEAR } from 'near-api-js/tokens'; async function createAndDeleteTmpAcc(beneficiary) { diff --git a/website/src/components/tools/DecentralizedOrganization/CreateDaoForm.jsx b/website/src/components/tools/DecentralizedOrganization/CreateDaoForm.jsx index 7e00a96e4bd..647b4590637 100644 --- a/website/src/components/tools/DecentralizedOrganization/CreateDaoForm.jsx +++ b/website/src/components/tools/DecentralizedOrganization/CreateDaoForm.jsx @@ -1,12 +1,12 @@ /* eslint-disable @typescript-eslint/no-non-null-assertion */ -import { useWalletSelector } from '@near-wallet-selector/react-hook'; +import { useNearWallet } from 'near-connect-hooks'; import React, { useCallback, useEffect, useMemo } from 'react'; import { Controller, useFieldArray, useForm } from 'react-hook-form'; import { toast } from 'react-toastify'; import styles from './CreateDaoForm.module.scss'; // import LabelWithTooltip from '../Shared/LabelWithTooltip'; -import { NEAR } from '@near-js/tokens'; +import { NEAR } from 'near-api-js/tokens'; import Card from '../../UI/Card'; const KILOBYTE = 1024; @@ -70,7 +70,7 @@ const CreateDaoForm = ({ reload }) => { control: control, }); - const { signedAccountId, callFunction, getBalance } = useWalletSelector(); + const { signedAccountId, callFunction, getBalance } = useNearWallet(); const data = watch(); diff --git a/website/src/components/tools/FungibleToken/CreateTokenForm.jsx b/website/src/components/tools/FungibleToken/CreateTokenForm.jsx index 31205620a7d..5f7e8119dcb 100644 --- a/website/src/components/tools/FungibleToken/CreateTokenForm.jsx +++ b/website/src/components/tools/FungibleToken/CreateTokenForm.jsx @@ -1,10 +1,10 @@ -import { NEAR } from '@near-js/tokens'; +import { NEAR } from 'near-api-js/tokens'; import { useCallback, useEffect, useState } from 'react'; import { Controller, useForm } from 'react-hook-form'; import { toast } from 'react-toastify'; import styles from './FungibleToken.module.scss'; -import { useWalletSelector } from '@near-wallet-selector/react-hook'; +import { useNearWallet } from 'near-connect-hooks'; import Card from '../../UI/Card'; import Button from '../../UI/Button'; import Input from '../../UI/Input'; @@ -41,7 +41,7 @@ const CreateTokenForm = ({ reload = () => { } }) => { mode: 'onSubmit' }); - const { viewFunction, callFunction, getBalance, signedAccountId, signIn } = useWalletSelector(); + const { viewFunction, callFunction, getBalance, signedAccountId, signIn } = useNearWallet(); const [requiredDeposit, setRequiredDeposit] = useState('0'); const [deposit, setDeposit] = useState('0'); const [step, setStep] = useState('form'); diff --git a/website/src/components/tools/Linkdrops/CreateNFTDrop.jsx b/website/src/components/tools/Linkdrops/CreateNFTDrop.jsx index 85e6a682717..ea5f33d171c 100644 --- a/website/src/components/tools/Linkdrops/CreateNFTDrop.jsx +++ b/website/src/components/tools/Linkdrops/CreateNFTDrop.jsx @@ -1,8 +1,8 @@ import { useState } from 'react'; import styles from './CreateDrop.module.scss'; -import { NEAR } from '@near-js/tokens'; +import { NEAR } from 'near-api-js/tokens'; import { generateAndStore } from '../hooks/useLinkdrops'; -import { useWalletSelector } from '@near-wallet-selector/react-hook'; +import { useNearWallet } from 'near-connect-hooks'; import { ImgNft } from '../../UI/ImgNft'; import Button from '../../UI/Button'; import Input from '../../UI/Input'; @@ -22,7 +22,7 @@ const CreateNFTDrop = ({ user_collections, reload }) => { const [isSubmitting, setIsSubmitting] = useState(false); const [errors, setErrors] = useState({}); const [expandedAccordions, setExpandedAccordions] = useState({}); - const { signedAccountId, signAndSendTransactions } = useWalletSelector(); + const { signedAccountId, signAndSendTransactions } = useNearWallet(); console.log(user_collections); diff --git a/website/src/components/tools/Linkdrops/CreateTokenDrop.jsx b/website/src/components/tools/Linkdrops/CreateTokenDrop.jsx index 73cb100bb3d..3cfc2a0bdde 100644 --- a/website/src/components/tools/Linkdrops/CreateTokenDrop.jsx +++ b/website/src/components/tools/Linkdrops/CreateTokenDrop.jsx @@ -1,9 +1,9 @@ import { useState } from 'react'; import styles from './CreateDrop.module.scss'; -import { useWalletSelector } from '@near-wallet-selector/react-hook'; +import { useNearWallet } from 'near-connect-hooks'; import { toast } from 'react-toastify'; import { generateAndStore } from '../hooks/useLinkdrops'; -import { NEAR } from '@near-js/tokens'; +import { NEAR } from 'near-api-js/tokens'; import Card from '../../UI/Card'; import Button from '../../UI/Button'; import Input from '../../UI/Input'; @@ -40,7 +40,7 @@ const CreateTokenDrop = ({ user_fts, reload }) => { const [isSubmitting, setIsSubmitting] = useState(false); const [selectedToken, setSelectedToken] = useState(user_fts?.[0] || null); - const { signAndSendTransactions, signedAccountId } = useWalletSelector(); + const { signAndSendTransactions, signedAccountId } = useNearWallet(); const validateForm = () => { const newErrors = {}; diff --git a/website/src/components/tools/NonFungibleToken/MintNFT.jsx b/website/src/components/tools/NonFungibleToken/MintNFT.jsx index 99cf766833d..7cf09b36313 100644 --- a/website/src/components/tools/NonFungibleToken/MintNFT.jsx +++ b/website/src/components/tools/NonFungibleToken/MintNFT.jsx @@ -1,6 +1,6 @@ import { useState, useCallback, useEffect } from 'react'; import styles from './MintNFT.module.scss'; -import { useWalletSelector } from '@near-wallet-selector/react-hook'; +import { useNearWallet } from 'near-connect-hooks'; import { toast } from 'react-toastify'; import Button from '../../UI/Button'; import Input from '../../UI/Input'; @@ -23,7 +23,7 @@ const MintNFT = ({ reload }) => { const [step, setStep] = useState('form'); const [imagePreview, setImagePreview] = useState(null); - const { callFunction, signedAccountId, signIn } = useWalletSelector(); + const { callFunction, signedAccountId, signIn } = useNearWallet(); const validateImage = (file) => { if (!file) return 'Image is required'; diff --git a/website/src/components/tools/hooks/useLinkdrops.js b/website/src/components/tools/hooks/useLinkdrops.js index e172ef0e2ae..a3e0f3cc306 100644 --- a/website/src/components/tools/hooks/useLinkdrops.js +++ b/website/src/components/tools/hooks/useLinkdrops.js @@ -1,5 +1,5 @@ -import { useWalletSelector } from '@near-wallet-selector/react-hook'; -import { KeyPair } from '@near-js/crypto'; +import { useNearWallet } from 'near-connect-hooks'; +import { KeyPair } from 'near-api-js'; import { useCallback, useEffect, useState } from 'react'; const KEYPOM_CONTRACT_ADDRESS = "v2.keypom.testnet" @@ -32,7 +32,7 @@ export const generateAndStore = (dropName, dropsNumber) => { const useLinkdrops = () => { - const { signedAccountId, viewFunction } = useWalletSelector(); + const { signedAccountId, viewFunction } = useNearWallet(); const [drops, setDrops] = useState([]); const fetchDropData = useCallback(async () => { diff --git a/website/src/components/tools/index.jsx b/website/src/components/tools/index.jsx index e46b02f515e..876c2efd2da 100644 --- a/website/src/components/tools/index.jsx +++ b/website/src/components/tools/index.jsx @@ -5,11 +5,11 @@ import DAO from './DecentralizedOrganization'; import TabItem from '@theme/TabItem'; import NearIconSvg from '@site/static/assets/site/near_icon.svg'; import { useCallback, useEffect, useState } from 'react'; -import { useWalletSelector } from '@near-wallet-selector/react-hook'; +import { useNearWallet } from 'near-connect-hooks'; import Linkdrops from './Linkdrops'; import useLinkdrops from './hooks/useLinkdrops'; import whiteList from './white-list.json'; -import { NEAR } from '@near-js/tokens'; +import { NEAR } from 'near-api-js/tokens'; const API_NEAR_BLOCKS = 'https://api-testnet.nearblocks.io'; @@ -26,7 +26,7 @@ const NearToken = { }; const Tools = () => { - const { getBalance, viewFunction, signedAccountId } = useWalletSelector(); + const { getBalance, viewFunction, signedAccountId } = useNearWallet(); const [allFT, setAllFT] = useState([NearToken]); const [loadingFT, setLoadingFT] = useState(false); diff --git a/website/src/pages/claim/NFTPreview.jsx b/website/src/pages/claim/NFTPreview.jsx index b20b11c544c..40c7df0640f 100644 --- a/website/src/pages/claim/NFTPreview.jsx +++ b/website/src/pages/claim/NFTPreview.jsx @@ -1,11 +1,11 @@ import React, { useEffect, useState } from 'react'; -import { useWalletSelector } from '@near-wallet-selector/react-hook'; +import { useNearWallet } from 'near-connect-hooks'; import NftImage from './shared/NftImage'; const NFTPreview = ({ nft }) => { const [infoNft, setInfoNft] = useState(undefined); const [isLoading, setIsLoading] = useState(true); - const { viewFunction } = useWalletSelector(); + const { viewFunction } = useNearWallet(); useEffect(() => { const fetchNftInfo = async () => { diff --git a/website/src/pages/claim/linkdrop.jsx b/website/src/pages/claim/linkdrop.jsx index f5aa0891be0..1798ace2264 100644 --- a/website/src/pages/claim/linkdrop.jsx +++ b/website/src/pages/claim/linkdrop.jsx @@ -1,7 +1,7 @@ import React, { useEffect, useState } from 'react'; -import { useWalletSelector } from '@near-wallet-selector/react-hook'; -import { KeyPair } from '@near-js/crypto'; -import { NEAR } from '@near-js/tokens'; +import { useNearWallet } from 'near-connect-hooks'; +import { KeyPair } from 'near-api-js'; +import { NEAR } from 'near-api-js/tokens'; import FTPreview from './FTPreview'; import NFTPreview from './NFTPreview'; import NearPreview from './NearPreview'; @@ -16,7 +16,7 @@ const Claim = () => { const [error, setError] = useState(null); const contract_id = 'v2.keypom.testnet'; - const { signedAccountId, signIn, viewFunction } = useWalletSelector(); + const { signedAccountId, signIn, viewFunction } = useNearWallet(); useEffect(() => { const params = new URLSearchParams(window.location.search); diff --git a/website/src/theme/NavbarItem/login-button.js b/website/src/theme/NavbarItem/login-button.js index b8fb470138d..00b8b4708c8 100644 --- a/website/src/theme/NavbarItem/login-button.js +++ b/website/src/theme/NavbarItem/login-button.js @@ -1,10 +1,10 @@ import React from 'react'; import { useState, useEffect } from 'react'; -import { useWalletSelector } from '@near-wallet-selector/react-hook'; +import { useNearWallet } from 'near-connect-hooks'; import styles from './btn.module.css'; export default function LoginButton(props) { - const { signedAccountId, signIn, signOut } = useWalletSelector(); + const { signedAccountId, signIn, signOut } = useNearWallet(); const [action, setAction] = useState(() => { }); const [label, setLabel] = useState('Loading...'); diff --git a/website/src/theme/Root.js b/website/src/theme/Root.js index 28f33cd4020..57928d8bdb1 100644 --- a/website/src/theme/Root.js +++ b/website/src/theme/Root.js @@ -9,38 +9,11 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import 'react-toastify/dist/ReactToastify.css'; // wallet selector -import '@near-wallet-selector/modal-ui/styles.css'; -import { setupBitteWallet } from '@near-wallet-selector/bitte-wallet'; -import { setupIntearWallet } from '@near-wallet-selector/intear-wallet'; -import { setupHotWallet } from '@near-wallet-selector/hot-wallet'; -import { setupLedger } from '@near-wallet-selector/ledger'; -import { setupMeteorWallet } from '@near-wallet-selector/meteor-wallet'; -import { setupNightly } from '@near-wallet-selector/nightly'; -import { WalletSelectorProvider } from '@near-wallet-selector/react-hook'; -import { setupSender } from '@near-wallet-selector/sender'; +import { NearProvider } from 'near-connect-hooks'; import { AcademyProgressProvider } from '../components/Academy/AcademyProgressContext'; -// import { setupMeteorWalletApp } from '@near-wallet-selector/meteor-wallet-app'; -import { setupWelldoneWallet } from '@near-wallet-selector/welldone-wallet'; const networkId = 'testnet'; -const walletSelectorConfig = { - network: {networkId: networkId, nodeUrl: 'https://test.rpc.fastnear.com'}, - modules: [ - // setupEthereumWallets({ wagmiConfig, web3Modal, alwaysOnboardDuringSignIn: true }), - setupMeteorWallet(), - setupBitteWallet(), - setupHotWallet(), - setupIntearWallet(), - // setupMeteorWalletApp(), - setupSender(), - setupNightly(), - setupLedger(), - setupWelldoneWallet() - ], -}; - - function initializeGleap() { if (typeof window !== "undefined") { const gleapSdkToken = "K2v3kvAJ5XtPzNYSgk4Ulpe5ptgBkIMv"; @@ -112,11 +85,11 @@ function Root({ children, location }) { return ( - + {children} - + ); }