3641052425

Build Type

push

github

Committed by Sérgio

Commit Message

merge

Run Details

173 of 224 branches covered (77.23%)

Branch coverage included in aggregate %.

417 of 444 relevant lines covered (93.92%)

3.07 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

87.5

/packages/react/src/WalletContext.tsx

import { createContext, useCallback, useContext, useEffect, useState } from 'react';
import {
  registerWalletAccountsSubscriber,
  setupWalletSelectorComponents,
  connectWalletSelector,
  disconnectFromWalletSelector,
  pollForWalletConnection,
  signMessage,
} from '@mintbase-js/auth';
import type { WalletSelectorComponents } from '@mintbase-js/auth';
import { WalletSelector, AccountState, VerifiedOwner, VerifyOwnerParams } from '@near-wallet-selector/core';
import type { WalletSelectorModal } from '@near-wallet-selector/modal-ui';

// This is heavily based on
// https://github.com/near/wallet-selector/blob/main/examples/react/contexts/WalletSelectorContext.tsx
// but uses wrappers from @mintbase-js/auth and @mintbase-js/sdk
export type WalletContext = {
  selector: WalletSelector;
  modal: WalletSelectorModal;
  accounts: AccountState[];
  activeAccountId: string | null;
  isConnected: boolean;
  isWaitingForConnection: boolean;
  isWalletSelectorSetup: boolean;
  errorMessage: string | null;
  connect: () => Promise<void>;
  disconnect: () => Promise<void>;
  signMessage: (params: VerifyOwnerParams) => Promise<VerifiedOwner>;
}

export type WalletSetupComponents = {
  selector: WalletSelector;
  modal: WalletSelectorModal;
}

export const WalletContext = createContext<WalletContext | null>(null);

export const WalletContextProvider: React.FC<React.PropsWithChildren> = (
  { children },
) => {
  const [errorMessage, setErrorMessage] = useState<string>(null);
  const [components, setComponents] = useState<WalletSelectorComponents | null>(null);
  const [accounts, setAccounts] = useState<AccountState[]>([]);
  const [isWaitingForConnection, setIsWaitingForConnection] = useState<boolean>(false);
  const [isWalletSelectorSetup, setIsWalletSelectorSetup] = useState<boolean>(false);

  const setup = useCallback(async () => {
    const components = await setupWalletSelectorComponents();
    setIsWalletSelectorSetup(true);
    setComponents(components);
  }, []);

  // call setup on wallet selector
  useEffect(() => {
    setup().catch((err: unknown) => {
      setErrorMessage((err as Error).message || err as string);
    });
  }, [setup]);

  const onCloseModal = (): void => {
    setIsWaitingForConnection(false);
  };

  if (typeof window !== 'undefined') {
    const closeButton = document?.getElementsByClassName('close-button')[0];
    if (!closeButton) {
      console.warn('Attempting to bind handler to non-existent className .close-button');
    } else {
      closeButton?.addEventListener('click', onCloseModal);
    }
  }

  // subscribe to account state changes
  useEffect(() => {
    if (!components) {
      return;
    }

    const subscription = registerWalletAccountsSubscriber(
      (accounts: AccountState[]) => {
        setAccounts(accounts);
      });

    // eslint-disable-next-line consistent-return
    return (): void =>
      subscription.unsubscribe();

  }, [components]);

  const {
    selector,
    modal,
  } = components || {};


  const connect = async (): Promise<void> => {
    setIsWaitingForConnection(true);
    setErrorMessage(null);
    connectWalletSelector();

    try {
      const accounts = await pollForWalletConnection();
      setIsWaitingForConnection(false);
      setAccounts(accounts);
    } catch (err: unknown) {
      setErrorMessage((err as Error).message || err as string);
    }
  };

  const disconnect = async(): Promise<void> => {
    await disconnectFromWalletSelector();
    setIsWaitingForConnection(false);
  };


  return (
    <WalletContext.Provider value={{
      selector,
      modal,
      accounts,
      activeAccountId: accounts
        .find((account) => account.active)?.accountId || null,
      isConnected: accounts && accounts.length > 0,
      isWaitingForConnection,
      isWalletSelectorSetup,
      errorMessage,
      connect,
      disconnect,
      signMessage,
    }}>
      {children}
    </WalletContext.Provider>
  );
};

// FIXME: add return type
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
export const useWallet = () => useContext(WalletContext);

1	import { createContext, useCallback, useContext, useEffect, useState } from 'react';	1✔
2	import {	1✔
3	registerWalletAccountsSubscriber,
4	setupWalletSelectorComponents,
5	connectWalletSelector,
6	disconnectFromWalletSelector,
7	pollForWalletConnection,
8	signMessage,
9	} from '@mintbase-js/auth';
10	import type { WalletSelectorComponents } from '@mintbase-js/auth';
11	import { WalletSelector, AccountState, VerifiedOwner, VerifyOwnerParams } from '@near-wallet-selector/core';
12	import type { WalletSelectorModal } from '@near-wallet-selector/modal-ui';
13
14	// This is heavily based on
15	// https://github.com/near/wallet-selector/blob/main/examples/react/contexts/WalletSelectorContext.tsx
16	// but uses wrappers from @mintbase-js/auth and @mintbase-js/sdk
17	export type WalletContext = {
18	selector: WalletSelector;
19	modal: WalletSelectorModal;
20	accounts: AccountState[];
21	activeAccountId: string \| null;
22	isConnected: boolean;
23	isWaitingForConnection: boolean;
24	isWalletSelectorSetup: boolean;
25	errorMessage: string \| null;
26	connect: () => Promise<void>;
27	disconnect: () => Promise<void>;
28	signMessage: (params: VerifyOwnerParams) => Promise<VerifiedOwner>;
29	}
30
31	export type WalletSetupComponents = {
32	selector: WalletSelector;
33	modal: WalletSelectorModal;
34	}
35
36	export const WalletContext = createContext<WalletContext \| null>(null);	1✔
37
38	export const WalletContextProvider: React.FC<React.PropsWithChildren> = (	1✔
39	{ children },
40	) => {
41	const [errorMessage, setErrorMessage] = useState<string>(null);	16✔
42	const [components, setComponents] = useState<WalletSelectorComponents \| null>(null);	16✔
43	const [accounts, setAccounts] = useState<AccountState[]>([]);	16✔
44	const [isWaitingForConnection, setIsWaitingForConnection] = useState<boolean>(false);	16✔
45	const [isWalletSelectorSetup, setIsWalletSelectorSetup] = useState<boolean>(false);	16✔
46
47	const setup = useCallback(async () => {	16✔
48	const components = await setupWalletSelectorComponents();	4✔
49	setIsWalletSelectorSetup(true);	3✔
50	setComponents(components);	3✔
51	}, []);
52
53	// call setup on wallet selector
54	useEffect(() => {	16✔
55	setup().catch((err: unknown) => {	4✔
56	setErrorMessage((err as Error).message \|\| err as string);	1✔
57	});
58	}, [setup]);
59
60	const onCloseModal = (): void => {	16✔
61	setIsWaitingForConnection(false);	×
62	};
63
64	if (typeof window !== 'undefined') {	16✔
65	const closeButton = document?.getElementsByClassName('close-button')[0];	16!
66	if (!closeButton) {	16!
67	console.warn('Attempting to bind handler to non-existent className .close-button');	16✔
68	} else {
69	closeButton?.addEventListener('click', onCloseModal);	×
70	}
71	}
72
73	// subscribe to account state changes
74	useEffect(() => {	16✔
75	if (!components) {	7✔
76	return;	4✔
77	}
78
79	const subscription = registerWalletAccountsSubscriber(	3✔
80	(accounts: AccountState[]) => {
81	setAccounts(accounts);	3✔
82	});
83
84	// eslint-disable-next-line consistent-return
85	return (): void =>	3✔
86	subscription.unsubscribe();	3✔
87
88	}, [components]);
89
90	const {
91	selector,
92	modal,
93	} = components \|\| {};	16✔
94
95
96	const connect = async (): Promise<void> => {	16✔
97	setIsWaitingForConnection(true);	2✔
98	setErrorMessage(null);	2✔
99	connectWalletSelector();	2✔
100
101	try {	2✔
102	const accounts = await pollForWalletConnection();	2✔
103	setIsWaitingForConnection(false);	1✔
104	setAccounts(accounts);	1✔
105	} catch (err: unknown) {
106	setErrorMessage((err as Error).message \|\| err as string);	1!
107	}
108	};
109
110	const disconnect = async(): Promise<void> => {	16✔
111	await disconnectFromWalletSelector();	1✔
112	setIsWaitingForConnection(false);	1✔
113	};
114
115
116	return (	16✔
117	<WalletContext.Provider value={{
118	selector,
119	modal,
120	accounts,
121	activeAccountId: accounts	79✔
122	.find((account) => account.active)?.accountId \|\| null,	6✔
123	isConnected: accounts && accounts.length > 0,	32✔
124	isWaitingForConnection,
125	isWalletSelectorSetup,
126	errorMessage,
127	connect,
128	disconnect,
129	signMessage,
130	}}>
131	{children}
132	</WalletContext.Provider>
133	);
134	};
135
136	// FIXME: add return type
137	// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
138	export const useWallet = () => useContext(WalletContext);	15✔

Mintbase / mintbase-js / 3641052425

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous