Skip to content

Commit

Permalink
Merge pull request #23 from Amira1502/update-hooks
Browse files Browse the repository at this point in the history
update near ws
  • Loading branch information
gagdiez authored Feb 12, 2025
2 parents 9d49a94 + 3d0298f commit 9ec85eb
Show file tree
Hide file tree
Showing 5 changed files with 72 additions and 279 deletions.
34 changes: 20 additions & 14 deletions frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,29 +13,35 @@
},
"dependencies": {
"@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",
"@near-wallet-selector/bitte-wallet": "^8.10.0",
"@near-wallet-selector/core": "^8.10.0",
"@near-wallet-selector/ethereum-wallets": "^8.10.0",
"@near-wallet-selector/here-wallet": "^8.10.0",
"@near-wallet-selector/hot-wallet": "^8.10.0",
"@near-wallet-selector/ledger": "^8.10.0",
"@near-wallet-selector/meteor-wallet": "^8.10.0",
"@near-wallet-selector/meteor-wallet-app": "^8.10.0",
"@near-wallet-selector/modal-ui": "^8.10.0",
"@near-wallet-selector/my-near-wallet": "^8.10.0",
"@near-wallet-selector/near-mobile-wallet": "^8.10.0",
"@near-wallet-selector/nightly": "^8.10.0",
"@near-wallet-selector/react-hook": "^8.9.15",
"@near-wallet-selector/sender": "^8.10.0",
"@near-wallet-selector/welldone-wallet": "^8.10.0",
"@web3modal/wagmi": "^5.1.11",
"bootstrap": "^5",
"bootstrap-icons": "^1.11.3",
"near-api-js": "^4.0.3",
"near-api-js": "^5.0.1",
"next": "14.2.5",
"react": "^18",
"react-dom": "^18",
"wagmi": "^2.13.3"
},
"devDependencies": {
"@types/node": "^22.10.1",
"encoding": "^0.1.13",
"eslint": "^9",
"eslint-config-next": "14.2.3"
"eslint": "^9.16.0",
"eslint-config-next": "15.0.3",
"pino-pretty": "^13.0.0"
}
}
14 changes: 6 additions & 8 deletions frontend/src/components/Navigation.jsx
Original file line number Diff line number Diff line change
@@ -1,26 +1,24 @@
import Image from "next/image";
import Link from "next/link";
import { useEffect, useState, useContext } from "react";

import { NearContext } from "@/context";
import { useEffect, useState } from "react";
import NearLogo from "/public/near-logo.svg";
import { useWalletSelector } from '@near-wallet-selector/react-hook';

export const Navigation = () => {
const { signedAccountId, wallet } = useContext(NearContext);
const { signedAccountId, signIn, signOut } = useWalletSelector();
const [action, setAction] = useState(() => {});
const [label, setLabel] = useState("Loading...");

useEffect(() => {
if (!wallet) return;

if (signedAccountId) {
setAction(() => wallet.signOut);
setAction(() => signOut);
setLabel(`Logout ${signedAccountId}`);
} else {
setAction(() => wallet.signIn);
setAction(() => signIn);
setLabel("Login");
}
}, [signedAccountId, wallet]);
}, [signedAccountId]);

return (
<nav className="navbar navbar-expand-lg">
Expand Down
63 changes: 39 additions & 24 deletions frontend/src/pages/_app.js
Original file line number Diff line number Diff line change
@@ -1,32 +1,47 @@
import { useEffect, useState } from "react";
import '@/styles/globals.css';

import "@/styles/globals.css";
import { NearContext } from "@/context";
import { Navigation } from "@/components/Navigation";
import '@near-wallet-selector/modal-ui/styles.css';
import { setupMyNearWallet } from '@near-wallet-selector/my-near-wallet';
import { setupMeteorWallet } from '@near-wallet-selector/meteor-wallet';
import { setupMeteorWalletApp } from '@near-wallet-selector/meteor-wallet-app';
import { setupBitteWallet } from '@near-wallet-selector/bitte-wallet';
import { setupEthereumWallets } from '@near-wallet-selector/ethereum-wallets';
import { setupHotWallet } from '@near-wallet-selector/hot-wallet';
import { setupLedger } from '@near-wallet-selector/ledger';
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';
import { HelloNearContract, NetworkId } from '@/config';
import { WalletSelectorProvider } from '@near-wallet-selector/react-hook';
import { Navigation } from '@/components/Navigation';
import { wagmiConfig, web3Modal } from '@/wallets/web3modal';

import { Wallet } from "@/wallets/near";
import { NetworkId, GuestbookNearContract } from "@/config";

// 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({
createAccessKeyFor: GuestbookNearContract,
networkId: NetworkId,
});

export default function MyApp({ Component, pageProps }) {
const [signedAccountId, setSignedAccountId] = useState("");

const walletSelectorConfig = {
network: NetworkId,
createAccessKeyFor: HelloNearContract,
modules: [
setupEthereumWallets({ wagmiConfig, web3Modal, alwaysOnboardDuringSignIn: true }),
setupBitteWallet(),
setupMeteorWallet(),
setupMeteorWalletApp({contractId: HelloNearContract}),
setupHotWallet(),
setupLedger(),
setupSender(),
setupHereWallet(),
setupNearMobileWallet(),
setupWelldoneWallet(),
setupMyNearWallet(),
],
}

useEffect(() => {
wallet.startUp(setSignedAccountId);
}, []);
export default function App({ Component, pageProps }) {

return (
<NearContext.Provider value={{ wallet, signedAccountId }}>
<WalletSelectorProvider config={walletSelectorConfig}>
<Navigation />
<Component {...pageProps} />
</NearContext.Provider>
</WalletSelectorProvider>
);
}
}
13 changes: 7 additions & 6 deletions frontend/src/pages/index.js
Original file line number Diff line number Diff line change
@@ -1,29 +1,30 @@
import { utils } from "near-api-js";
import { useState, useEffect, useContext } from "react";
import { useState, useEffect } from "react";

import Form from "@/components/Form";
import SignIn from "@/components/SignIn";
import Messages from "@/components/Messages";
import styles from "@/styles/app.module.css";

import { NearContext } from "@/context";
import { GuestbookNearContract } from "@/config";
import { useWalletSelector } from '@near-wallet-selector/react-hook';


export default function Home() {
const { signedAccountId, wallet } = useContext(NearContext);
const { signedAccountId, viewFunction, callFunction } = useWalletSelector();
const [messages, setMessages] = useState([]);

useEffect(() => {
getLast10Messages().then((messages) => setMessages(messages.reverse()));
}, []);

const getLast10Messages = async () => {
const total_messages = await wallet.viewMethod({
const total_messages = await viewFunction({
contractId: GuestbookNearContract,
method: "total_messages",
});
const from_index = total_messages >= 10 ? total_messages - 10 : 0;
return wallet.viewMethod({
return viewFunction({
contractId: GuestbookNearContract,
method: "get_messages",
args: { from_index: String(from_index), limit: "10" },
Expand All @@ -39,7 +40,7 @@ export default function Home() {

// Add message to the guest book
const deposit = utils.format.parseNearAmount(donation.value);
wallet.callMethod({
callFunction({
contractId: GuestbookNearContract,
method: "add_message",
args: { text: message.value },
Expand Down
Loading

0 comments on commit 9ec85eb

Please sign in to comment.