wip: migrating to new version of ws

frontend/src/components/navigation.js

@@ -1,12 +1,12 @@
 import Image from 'next/image';
 import Link from 'next/link';
-import { useContext, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import NearLogo from '/public/near-logo.svg';
-import { NearContext } from '@/pages/_app';
+import { useWalletSelector } from '@near-wallet-selector/react-hook'
 
 export const Navigation = () => {
-  const { signedAccountId, walletSelector, modal } = useContext(NearContext);
+  const { signedAccountId, walletSelector, modal } = useWalletSelector();
   const [action, setAction] = useState(() => { });
   const [label, setLabel] = useState('Loading...');
 

frontend/src/pages/_app.js

@@ -1,59 +1,31 @@
-import '@/styles/globals.css';
-import '@near-wallet-selector/modal-ui/styles.css';
-
-import { createContext, useEffect, useState } from 'react';
+import { useEffect } from 'react';
 
+import '@/styles/globals.css';
 import { Navigation } from '@/components/navigation';
-import { setupWalletSelector } from '@near-wallet-selector/core';
-import { setupModal } from '@near-wallet-selector/modal-ui';
+
+import '@near-wallet-selector/modal-ui/styles.css';
+import { useWalletSelector } from '@near-wallet-selector/react-hook'
 import { setupMyNearWallet } from '@near-wallet-selector/my-near-wallet';
 import { setupMeteorWallet } from '@near-wallet-selector/meteor-wallet';
 
-import { HelloNearContract, NetworkId } from '@/config';
-
-/**
- * @typedef NearContext
- * @property {import('@near-wallet-selector/core').WalletSelector} selector The wallet selector
- * @property {string} signedAccountId The AccountId of the signed user
- * @property {import('@near-wallet-selector/modal-ui').Modal} modal The modal to show
- */
-
-/** @type {import ('react').Context<NearContext>} */
-export const NearContext = createContext({
-  walletSelector: undefined,
-  signedAccountId: '',
-  modal: undefined,
-});
-
-// 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('');
-  const [walletSelector, setSelector] = useState(null);
-  const [modal, setModal] = useState(null);
+
+  const { setupWalletSelector } = useWalletSelector();
 
   useEffect(() => {
     setupWalletSelector({
       network: NetworkId,
+      createAccessKeyFor: HelloNearContract,
       modules: [
         setupMyNearWallet(),
         setupMeteorWallet(),
       ],
-    }).then(
-      walletSelector => {
-        const modal = setupModal(walletSelector, { contractId: '' });
-        walletSelector.subscribeOnAccountChange((accountId) => setSignedAccountId(accountId));
-        setSelector(walletSelector);
-        setModal(modal);
-      }
-    )
+    })
   }, []);
 
-  return (
-    <NearContext.Provider value={{ walletSelector, modal, signedAccountId }}>
+  return (<>
       <Navigation />
       <Component {...pageProps} />
-    </NearContext.Provider>
+    </>
   );
 }

frontend/src/pages/hello-near/index.js

@@ -1,16 +1,12 @@
-import { useContext, useEffect, useState } from 'react';
-
 import { Cards } from '@/components/cards';
-import styles from '@/styles/app.module.css';
-import { NearContext } from '../_app';
 
-import { HelloNearContract } from '../../config';
+import { useEffect, useState } from 'react';
+import { useWalletSelector } from '@near-wallet-selector/react-hook'
 
-// Contract that the app will interact with
-const CONTRACT = HelloNearContract;
+import { HelloNearContract } from '../../config';
 
 export default function HelloNear() {
-  const { signedAccountId, walletSelector } = useContext(NearContext);
+  const { signedAccountId, walletSelector } = useWalletSelector();
 
   const [greeting, setGreeting] = useState('loading...');
   const [newGreeting, setNewGreeting] = useState('');
@@ -19,7 +15,7 @@ export default function HelloNear() {
 
   useEffect(() => {
     if (!walletSelector) return;
-    walletSelector.viewMethod({ contractId: CONTRACT, method: 'get_greeting' }).then((greeting) => setGreeting(greeting));
+    walletSelector.viewMethod({ contractId: HelloNearContract, method: 'get_greeting' }).then((greeting) => setGreeting(greeting));
   }, [walletSelector]);
 
   useEffect(() => {
@@ -28,9 +24,9 @@ export default function HelloNear() {
 
   const saveGreeting = async () => {
     // Try to store greeting, revert if it fails
-    walletSelector.callMethod({ contractId: CONTRACT, method: 'set_greeting', args: { greeting: newGreeting } })
+    walletSelector.callMethod({ contractId: HelloNearContract, method: 'set_greeting', args: { greeting: newGreeting } })
       .then(async () => {
-        const greeting = await walletSelector.viewMethod({ contractId: CONTRACT, method: 'get_greeting' });
+        const greeting = await walletSelector.viewMethod({ contractId: HelloNearContract, method: 'get_greeting' });
         setGreeting(greeting);
       });
 
@@ -46,7 +42,7 @@ export default function HelloNear() {
       <div className={styles.description}>
         <p>
           Interacting with the contract: &nbsp;
-          <code className={styles.code}>{CONTRACT}</code>
+          <code className={styles.code}>{HelloNearContract}</code>
         </p>
       </div>