10469222915

Committed 20 Aug 2024 09:45AM UTC coverage: 72.702% (-2.6%) from 75.272%

Build # 10469222915

Build Type

push

github

Committed by

web-flow

Commit Message

Update Wallet Selector and NearAPI (#532)

Run Details

880 of 1395 branches covered (63.08%)

Branch coverage included in aggregate %.

1192 of 1455 relevant lines covered (81.92%)

13.2 hits per line

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

5.05

/packages/react/src/MintbaseWalletContext.tsx

import React, {
  createContext,
  useCallback,
  useContext,
  useEffect,
  useMemo,
  useState,
} from 'react';
import {
  registerWalletAccountsSubscriber,
  connectWalletSelector,
  disconnectFromWalletSelector,
  pollForWalletConnection,
  signMessage,
  setupMintbaseWalletSelector,
} from './wallet/wallet';
import type { WalletSelectorComponents } from './wallet/wallet';

import type {
  WalletSelector,
  AccountState,
  VerifiedOwner,
  VerifyOwnerParams,
  WalletModuleFactory,
} 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/wallet and @mintbase-js/sdk

export type MintbaseWalletContext = {
  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>;
}

interface ContextProviderType {
  children: React.ReactNode;
  callbackUrl?: string;
  network?: string; onlyMbWallet?: boolean;
  contractAddress?: string;
  additionalWallets?: Array<WalletModuleFactory>;
  successUrl?: string;
  failureUrl?: string;
}


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

export const MintbaseWalletContextProvider: React.FC<ContextProviderType> = ({
  children,
  network,
  contractAddress,
  additionalWallets,
  onlyMbWallet,
  callbackUrl,
  successUrl,
  failureUrl,
}): JSX.Element => {
  const [errorMessage, setErrorMessage] = useState<string>('');
  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 selectedNetwork =  network;
  const selectedContract = contractAddress;

  const setupMbWallet = async (): Promise<WalletSelectorComponents> => {
    const isOnlyMbWallet = !!onlyMbWallet || !!(additionalWallets && additionalWallets.length > 0);

    return await setupMintbaseWalletSelector(
      callbackUrl,
      isOnlyMbWallet,
      selectedNetwork,
      selectedContract,
      isOnlyMbWallet ? { additionalWallets } : undefined,
      successUrl, failureUrl,
    );
  };

  const setup = useCallback(async () => {
    const components = await setupMbWallet();

    setIsWalletSelectorSetup(true);
    setComponents(components);
  }, []);

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

  const setupWallet = async (): Promise<WalletSelectorComponents> => {
    const components = await setupMbWallet();

    return components;
  };

  // call setup on wallet selector


  useEffect(() => {
    setupWallet();

    setup().catch((err: Error) => {
      if (err || err.message.length > 0) {
        setErrorMessage((err as Error).message);
      }
    });

    // Add the event listener here
    const closeButton = document?.getElementsByClassName('close-button')[0];
    closeButton?.addEventListener('click', onCloseModal);

    // Cleanup the event listener on unmount
    return (): void => {
      closeButton?.removeEventListener('click', onCloseModal);
    };
  }, [setup]);

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

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

    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) {
      if (err) {
        setErrorMessage((err as Error).message);
      }
    }
  };

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

  const contextVal = useMemo<MintbaseWalletContext>(
    () => ({
      selector: selector,
      modal: modal,
      accounts: accounts,
      activeAccountId:
        accounts.find((account) => account.active)?.accountId || null,
      isConnected: accounts && accounts.length > 0,
      isWaitingForConnection: isWaitingForConnection,
      isWalletSelectorSetup: isWalletSelectorSetup,
      errorMessage: errorMessage,
      connect,
      disconnect,
      signMessage,
    }),
    [selector, modal, accounts],
  );

  return (
    <MintbaseWalletContext.Provider value={contextVal}>
      {children}
    </MintbaseWalletContext.Provider>
  );
};

export const useMbWallet = (): MintbaseWalletContext => useContext(MintbaseWalletContext);

1	import React, {	3✔
2	createContext,
3	useCallback,
4	useContext,
5	useEffect,
6	useMemo,
7	useState,
8	} from 'react';
9	import {	3✔
10	registerWalletAccountsSubscriber,
11	connectWalletSelector,
12	disconnectFromWalletSelector,
13	pollForWalletConnection,
14	signMessage,
15	setupMintbaseWalletSelector,
16	} from './wallet/wallet';
17	import type { WalletSelectorComponents } from './wallet/wallet';
18
19	import type {
20	WalletSelector,
21	AccountState,
22	VerifiedOwner,
23	VerifyOwnerParams,
24	WalletModuleFactory,
25	} from '@near-wallet-selector/core';
26	import type { WalletSelectorModal } from '@near-wallet-selector/modal-ui';
27
28	// This is heavily based on
29	// https://github.com/near/wallet-selector/blob/main/examples/react/contexts/WalletSelectorContext.tsx
30	// but uses wrappers from @mintbase-js/wallet and @mintbase-js/sdk
31
32	export type MintbaseWalletContext = {
33	selector: WalletSelector;
34	modal: WalletSelectorModal;
35	accounts: AccountState[];
36	activeAccountId: string \| null;
37	isConnected: boolean;
38	isWaitingForConnection: boolean;
39	isWalletSelectorSetup: boolean;
40	errorMessage: string \| null;
41	connect: () => Promise<void>;
42	disconnect: () => Promise<void>;
43	signMessage: (params: VerifyOwnerParams) => Promise<VerifiedOwner>;
44	}
45
46	interface ContextProviderType {
47	children: React.ReactNode;
48	callbackUrl?: string;
49	network?: string; onlyMbWallet?: boolean;
50	contractAddress?: string;
51	additionalWallets?: Array<WalletModuleFactory>;
52	successUrl?: string;
53	failureUrl?: string;
54	}
55
56
57	export const MintbaseWalletContext = createContext<MintbaseWalletContext \| null>(null);	3✔
58
59	export const MintbaseWalletContextProvider: React.FC<ContextProviderType> = ({	3✔
60	children,
61	network,
62	contractAddress,
63	additionalWallets,
64	onlyMbWallet,
65	callbackUrl,
66	successUrl,
67	failureUrl,
68	}): JSX.Element => {
69	const [errorMessage, setErrorMessage] = useState<string>('');	×
70	const [components, setComponents] = useState<WalletSelectorComponents \| null>(	×
71	null,
72	);
73	const [accounts, setAccounts] = useState<AccountState[]>([]);	×
74	const [isWaitingForConnection, setIsWaitingForConnection] =
75	useState<boolean>(false);	×
76	const [isWalletSelectorSetup, setIsWalletSelectorSetup] =
77	useState<boolean>(false);	×
78
79
80	const selectedNetwork = network;	×
81	const selectedContract = contractAddress;	×
82
83	const setupMbWallet = async (): Promise<WalletSelectorComponents> => {	×
84	const isOnlyMbWallet = !!onlyMbWallet \|\| !!(additionalWallets && additionalWallets.length > 0);	×
85
86	return await setupMintbaseWalletSelector(	×
87	callbackUrl,
88	isOnlyMbWallet,
89	selectedNetwork,
90	selectedContract,
91	isOnlyMbWallet ? { additionalWallets } : undefined,	×
92	successUrl, failureUrl,
93	);
94	};
95
96	const setup = useCallback(async () => {	×
97	const components = await setupMbWallet();	×
98
99	setIsWalletSelectorSetup(true);	×
100	setComponents(components);	×
101	}, []);
102
103	const onCloseModal = (): void => {	×
104	setIsWaitingForConnection(false);	×
105	};
106
107	const setupWallet = async (): Promise<WalletSelectorComponents> => {	×
108	const components = await setupMbWallet();	×
109
110	return components;	×
111	};
112
113	// call setup on wallet selector
114
115
116	useEffect(() => {	×
117	setupWallet();	×
118
119	setup().catch((err: Error) => {	×
120	if (err \|\| err.message.length > 0) {	×
121	setErrorMessage((err as Error).message);	×
122	}
123	});
124
125	// Add the event listener here
126	const closeButton = document?.getElementsByClassName('close-button')[0];	×
127	closeButton?.addEventListener('click', onCloseModal);	×
128
129	// Cleanup the event listener on unmount
130	return (): void => {	×
131	closeButton?.removeEventListener('click', onCloseModal);	×
132	};
133	}, [setup]);
134
135	// subscribe to account state changes
136	useEffect(() => {	×
137	if (!components) {	×
138	return undefined;	×
139	}
140
141	const subscription = registerWalletAccountsSubscriber(	×
142	(accounts: AccountState[]) => {
143	setAccounts(accounts);	×
144	},
145	);
146
147	return (): void => {	×
148	subscription.unsubscribe();	×
149	};
150	}, [components]);
151
152	const { selector, modal } = components \|\| {};	×
153
154	const connect = async (): Promise<void> => {	×
155	setIsWaitingForConnection(true);	×
156
157	setErrorMessage(null);	×
158	connectWalletSelector();	×
159
160	try {	×
161	const accounts = await pollForWalletConnection();	×
162	setIsWaitingForConnection(false);	×
163	setAccounts(accounts);	×
164	} catch (err: unknown) {
165	if (err) {	×
166	setErrorMessage((err as Error).message);	×
167	}
168	}
169	};
170
171	const disconnect = async (): Promise<void> => {	×
172	await disconnectFromWalletSelector();	×
173	setIsWaitingForConnection(false);	×
174	};
175
176	const contextVal = useMemo<MintbaseWalletContext>(	×
177	() => ({	×
178	selector: selector,
179	modal: modal,
180	accounts: accounts,
181	activeAccountId:
182	accounts.find((account) => account.active)?.accountId \|\| null,	×
183	isConnected: accounts && accounts.length > 0,	×
184	isWaitingForConnection: isWaitingForConnection,
185	isWalletSelectorSetup: isWalletSelectorSetup,
186	errorMessage: errorMessage,
187	connect,
188	disconnect,
189	signMessage,
190	}),
191	[selector, modal, accounts],
192	);
193
194	return (	×
195	<MintbaseWalletContext.Provider value={contextVal}>
196	{children}
197	</MintbaseWalletContext.Provider>
198	);
199	};
200
201	export const useMbWallet = (): MintbaseWalletContext => useContext(MintbaseWalletContext);	3✔

Mintbase / mintbase-js / 10469222915

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