logos-messaging/examples.waku.org
1
0
Fork 0
mirror of https://github.com/logos-messaging/examples.waku.org.git synced 2026-01-08 15:53:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

combine to useContract

Browse Source
This commit is contained in:
Sasha 2023-10-28 10:14:42 +02:00
parent 1e8b2af982
commit 3ce6a7d9e9
No known key found for this signature in database
3 changed files with 41 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
examples/rln-js/src/app/home/components/Header.tsx
View File

@ -1,18 +1,15 @@
import { Block, BlockTypes } from "@/components/Block"; import { Block, BlockTypes } from "@/components/Block";
import { Title } from "@/components/Title"; import { Title } from "@/components/Title";
import { Button } from "@/components/Button";
import { Status } from "@/components/Status"; import { Status } from "@/components/Status";
import { useStore, useWallet } from "@/hooks"; import { useStore } from "@/hooks";
export const Header: React.FunctionComponent<{}> = () => { export const Header: React.FunctionComponent<{}> = () => {
const { appStatus } = useStore(); const { appStatus } = useStore();
const { onConnectWallet } = useWallet();
return ( return (
<> <>
<Block className="mb-5" type={BlockTypes.FlexHorizontal}> <Block className="mb-5" type={BlockTypes.FlexHorizontal}>
<Title>Waku RLN</Title> <Title>Waku RLN</Title>
<Button onClick={onConnectWallet}>Connect Wallet</Button>
</Block> </Block>
<Status text="Application status" mark={appStatus} /> <Status text="Application status" mark={appStatus} />
</> </>

54
examples/rln-js/src/hooks/useContract.ts
View File

@ -8,25 +8,51 @@ type UseContractResult = {
export const useContract = (): UseContractResult => { export const useContract = (): UseContractResult => {
const { rln } = useRLN(); const { rln } = useRLN();
const { setLastMembershipID } = useStore(); const { setEthAccount, setChainID, setLastMembershipID } = useStore();
const onFetchContract = React.useCallback(async () => { const onFetchContract = React.useCallback(async () => {
if (!rln?.rlnContract || !rln?.rlnInstance) { const fetchAccounts = new Promise<void>(async (resolve) => {
console.log("Cannot fetch contract info, no contract found."); if (!rln) {
return; console.log("Cannot fetch wallet, not provider found.");
} resolve();
return;
}
// disable button try {
await rln.rlnContract.fetchMembers(rln.rlnInstance); const accounts = await rln.ethProvider.send("eth_requestAccounts", []);
// enable button setEthAccount(accounts[0] || "");
rln.rlnContract.subscribeToMembers(rln.rlnInstance); const network = await rln.ethProvider.getNetwork();
setChainID(network.chainId);
} catch (error) {
console.error("Failed to connect to account: ", error);
}
resolve();
});
const last = rln.rlnContract.members.at(-1); const fetchContract = new Promise<void>(async (resolve) => {
if (!rln?.rlnContract || !rln?.rlnInstance) {
console.log("Cannot fetch contract info, no contract found.");
resolve();
return;
}
if (last) { try {
setLastMembershipID(last.index.toNumber()); await rln.rlnContract.fetchMembers(rln.rlnInstance);
} rln.rlnContract.subscribeToMembers(rln.rlnInstance);
}, [rln, setLastMembershipID]);
const last = rln.rlnContract.members.at(-1);
if (last) {
setLastMembershipID(last.index.toNumber());
}
} catch (error) {
console.error("Failed to fetch contract state: ", error);
}
resolve();
});
await Promise.any([fetchAccounts, fetchContract]);
}, [rln, setEthAccount, setChainID, setLastMembershipID]);
return { return {
onFetchContract, onFetchContract,

18
examples/rln-js/src/hooks/useWallet.ts
View File

@ -5,7 +5,6 @@ import { useRLN } from "./useRLN";
import { SIGNATURE_MESSAGE } from "@/constants"; import { SIGNATURE_MESSAGE } from "@/constants";
type UseWalletResult = { type UseWalletResult = {
onConnectWallet: () => void;
onGenerateCredentials: () => void; onGenerateCredentials: () => void;
}; };
@ -37,22 +36,6 @@ export const useWallet = (): UseWalletResult => {
}; };
}, [setEthAccount, setChainID]); }, [setEthAccount, setChainID]);
const onConnectWallet = React.useCallback(async () => {
if (!rln?.ethProvider) {
console.log("Cannot connect wallet, no provider found.");
return;
}
try {
const accounts = await rln.ethProvider.send("eth_requestAccounts", []);
setEthAccount(accounts[0] || "");
const network = await rln.ethProvider.getNetwork();
setChainID(network.chainId);
} catch (error) {
console.error("Failed to connect to account: ", error);
}
}, [rln, setEthAccount, setChainID]);
const onGenerateCredentials = React.useCallback(async () => { const onGenerateCredentials = React.useCallback(async () => {
if (!rln?.ethProvider) { if (!rln?.ethProvider) {
console.log("Cannot generate credentials, no provider found."); console.log("Cannot generate credentials, no provider found.");
@ -70,7 +53,6 @@ export const useWallet = (): UseWalletResult => {
}, [rln, setCredentials]); }, [rln, setCredentials]);
return { return {
onConnectWallet,
onGenerateCredentials, onGenerateCredentials,
}; };
}; };