5930279229

Committed 21 Aug 2023 06:52PM UTC coverage: 83.106% (-0.3%) from 83.379%

Build # 5930279229

Build Type

Pull #390

github

Committed by

rubenmarcus

Commit Message

providers

Pull Request Pull Request #390: Feat add wallet package 4

Run Details

613 of 838 branches covered (73.15%)

Branch coverage included in aggregate %.

10 of 10 new or added lines in 1 file covered. (100.0%)

912 of 997 relevant lines covered (91.47%)

4.82 hits per line

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

76.8

/packages/react/src/WalletContext.tsx

/* eslint-disable @typescript-eslint/explicit-function-return-type */
import React, {
  createContext,
  useCallback,
  useContext,
  useEffect,
  useMemo,
  useState,
} from 'react';
import {
  registerWalletAccountsSubscriber,
  setupWalletSelectorComponents,
  connectWalletSelector,
  disconnectFromWalletSelector,
  pollForWalletConnection,
  signMessage,
} from '@mintbase-js/auth/lib/wallet';
import type { WalletSelectorComponents } from '@mintbase-js/auth/lib/wallet';
import {
  type WalletSelector,
  type AccountState,
  type VerifiedOwner,
  type VerifyOwnerParams,
  type WalletModuleFactory,
  setupWalletSelector,
} from '@near-wallet-selector/core';
import type { WalletSelectorModal } from '@near-wallet-selector/modal-ui';
import type { Network } from '@mintbase-js/sdk';
import { mbjs } from '@mintbase-js/sdk';

// 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<{ children: React.ReactNode; network?: Network; contractAddress?: string; additionalWallets?: Array<WalletModuleFactory>; isMintbaseWallet?: boolean}> = ({
  children, network, contractAddress, additionalWallets, isMintbaseWallet = false,
}): 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 [mbWalletUsername, setMbWalletUsername] =
    useState<string>('');
  const [isConnected, setIsConnected] = useState(false);

  const [mbWalletSelector, setWalletMb] = useState(null);
  const selectedNetwork =   network || mbjs.keys.network;
  const selectedContract = contractAddress || mbjs.keys.contractAddress;


  const setup = useCallback(async () => {
    const components = await setupWalletSelectorComponents(
      selectedNetwork,
      selectedContract,
      {
        additionalWallets,
      },
    );

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

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

  const setupWallet = async () => {
    const components = await setupWalletSelectorComponents(
      selectedNetwork,
      selectedContract,
      {
        additionalWallets,
      },
    );

    console.log(components, additionalWallets, 'components');

    return components;
  };


  const setupMintbaseWallet = async () => {
      
      
    const res = await setupWalletSelector({
      network: network,
      debug: mbjs.keys.debugMode,
      modules: [
        ...additionalWallets,
      ],
    });

    setWalletMb(res);

    console.log(res, 'selector')
  
    return res;
  };


  useEffect(() => {


    if (isMintbaseWallet) {

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

  
    const handleUsernameChange = (event) => {

      console.log(event, event.detail, event.detail[0]);
      const newUsername = event.detail[0].accountId;
      setMbWalletUsername(newUsername);
      setIsConnected(true);

      setAccounts(event.detail[0]);

    
      console.log(isConnected, isMintbaseWallet, mbWalletUsername, accounts, 'mb wallet');
    };

    // Listen for the custom event
    window.addEventListener('mbWalletLogin', handleUsernameChange);

    // Cleanup the event listener when the component unmounts
    return () => {
      window.removeEventListener('mbWalletLogin', handleUsernameChange);
    };
  }, []);


  // 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 () => {
      closeButton?.removeEventListener('click', onCloseModal);
    };
  }, [setup]);

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

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

        console.log(accounts, 'accounts 1');
        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);
      console.log(accounts, 'accounts 2');
      setAccounts(accounts);
    } catch (err: unknown) {
      if (err) {
        setErrorMessage((err as Error).message);
      }
    }
  };

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

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

  return (
    <WalletContext.Provider value={walletSelectorContextValue}>
      {children}
    </WalletContext.Provider>
  );
};

export const useWallet = (): WalletContext => useContext(WalletContext);

1	/* eslint-disable @typescript-eslint/explicit-function-return-type */
2	import React, {	1✔
3	createContext,
4	useCallback,
5	useContext,
6	useEffect,
7	useMemo,
8	useState,
9	} from 'react';
10	import {	1✔
11	registerWalletAccountsSubscriber,
12	setupWalletSelectorComponents,
13	connectWalletSelector,
14	disconnectFromWalletSelector,
15	pollForWalletConnection,
16	signMessage,
17	} from '@mintbase-js/auth/lib/wallet';
18	import type { WalletSelectorComponents } from '@mintbase-js/auth/lib/wallet';
19	import {	1✔
20	type WalletSelector,
21	type AccountState,
22	type VerifiedOwner,
23	type VerifyOwnerParams,
24	type WalletModuleFactory,
25	setupWalletSelector,
26	} from '@near-wallet-selector/core';
27	import type { WalletSelectorModal } from '@near-wallet-selector/modal-ui';
28	import type { Network } from '@mintbase-js/sdk';
29	import { mbjs } from '@mintbase-js/sdk';	1✔
30
31	// This is heavily based on
32	// https://github.com/near/wallet-selector/blob/main/examples/react/contexts/WalletSelectorContext.tsx
33	// but uses wrappers from @mintbase-js/auth and @mintbase-js/sdk
34	export type WalletContext = {
35	selector: WalletSelector;
36	modal: WalletSelectorModal;
37	accounts: AccountState[];
38	activeAccountId: string \| null;
39	isConnected: boolean;
40	isWaitingForConnection: boolean;
41	isWalletSelectorSetup: boolean;
42	errorMessage: string \| null;
43	connect: () => Promise<void>;
44	disconnect: () => Promise<void>;
45	signMessage: (params: VerifyOwnerParams) => Promise<VerifiedOwner>;
46	}
47
48	export type WalletSetupComponents = {
49	selector: WalletSelector;
50	modal: WalletSelectorModal;
51	}
52
53	export const WalletContext = createContext<WalletContext \| null>(null);	1✔
54
55	export const WalletContextProvider: React.FC<{ children: React.ReactNode; network?: Network; contractAddress?: string; additionalWallets?: Array<WalletModuleFactory>; isMintbaseWallet?: boolean}> = ({	1✔
56	children, network, contractAddress, additionalWallets, isMintbaseWallet = false,	13✔
57	}): JSX.Element => {
58	const [errorMessage, setErrorMessage] = useState<string>('');	13✔
59	const [components, setComponents] = useState<WalletSelectorComponents \| null>(	13✔
60	null,
61	);
62	const [accounts, setAccounts] = useState<AccountState[]>([]);	13✔
63	const [isWaitingForConnection, setIsWaitingForConnection] =
64	useState<boolean>(false);	13✔
65	const [isWalletSelectorSetup, setIsWalletSelectorSetup] =
66	useState<boolean>(false);	13✔
67
68	const [mbWalletUsername, setMbWalletUsername] =
69	useState<string>('');	13✔
70	const [isConnected, setIsConnected] = useState(false);	13✔
71
72	const [mbWalletSelector, setWalletMb] = useState(null);	13✔
73	const selectedNetwork = network \|\| mbjs.keys.network;	13✔
74	const selectedContract = contractAddress \|\| mbjs.keys.contractAddress;	13✔
75
76
77	const setup = useCallback(async () => {	13✔
78	const components = await setupWalletSelectorComponents(	3✔
79	selectedNetwork,
80	selectedContract,
81	{
82	additionalWallets,
83	},
84	);
85
86	setIsWalletSelectorSetup(true);	3✔
87	setComponents(components);	3✔
88	}, []);
89
90	const onCloseModal = (): void => {	13✔
91	setIsWaitingForConnection(false);	×
92	};
93
94	const setupWallet = async () => {	13✔
95	const components = await setupWalletSelectorComponents(	3✔
96	selectedNetwork,
97	selectedContract,
98	{
99	additionalWallets,
100	},
101	);
102
103	console.log(components, additionalWallets, 'components');	3✔
104
105	return components;	3✔
106	};
107
108
109	const setupMintbaseWallet = async () => {	13✔
110
111
112	const res = await setupWalletSelector({	×
113	network: network,
114	debug: mbjs.keys.debugMode,
115	modules: [
116	...additionalWallets,
117	],
118	});
119
120	setWalletMb(res);	×
121
122	console.log(res, 'selector')	×
123
124	return res;	×
125	};
126
127
128	useEffect(() => {	13✔
129
130
131	if (isMintbaseWallet) {	3!
132
133	setupMintbaseWallet().catch((err: Error) => {	×
134	if (err \|\| err.message.length > 0) {	×
135	setErrorMessage((err as Error).message);	×
136	}
137	});
138
139	}
140
141
142	const handleUsernameChange = (event) => {	3✔
143
144	console.log(event, event.detail, event.detail[0]);	×
145	const newUsername = event.detail[0].accountId;	×
146	setMbWalletUsername(newUsername);	×
147	setIsConnected(true);	×
148
149	setAccounts(event.detail[0]);	×
150
151
152	console.log(isConnected, isMintbaseWallet, mbWalletUsername, accounts, 'mb wallet');	×
153	};
154
155	// Listen for the custom event
156	window.addEventListener('mbWalletLogin', handleUsernameChange);	3✔
157
158	// Cleanup the event listener when the component unmounts
159	return () => {	3✔
160	window.removeEventListener('mbWalletLogin', handleUsernameChange);	3✔
161	};
162	}, []);
163
164
165	// call setup on wallet selector
166	useEffect(() => {	13✔
167	setupWallet();	3✔
168
169	setup().catch((err: Error) => {	3✔
170	if (err \|\| err.message.length > 0) {	×
171	setErrorMessage((err as Error).message);	×
172	}
173	});
174
175	// Add the event listener here
176	const closeButton = document?.getElementsByClassName('close-button')[0];	3!
177	closeButton?.addEventListener('click', onCloseModal);	3!
178
179	// Cleanup the event listener on unmount
180	return () => {	3✔
181	closeButton?.removeEventListener('click', onCloseModal);	3!
182	};
183	}, [setup]);
184
185	// subscribe to account state changes
186	useEffect(() => {	13✔
187	if (!components) {	6✔
188	return undefined;	3✔
189	}
190
191	const subscription = registerWalletAccountsSubscriber(	3✔
192	(accounts: AccountState[]) => {
193
194	console.log(accounts, 'accounts 1');	3✔
195	setAccounts(accounts);	3✔
196	},
197	);
198
199	return (): void => {	3✔
200	subscription.unsubscribe();	3✔
201	};
202	}, [components]);
203
204	const { selector, modal } = components \|\| {};	13✔
205
206	const connect = async (): Promise<void> => {	13✔
207	setIsWaitingForConnection(true);	2✔
208
209	setErrorMessage(null);	2✔
210	connectWalletSelector();	2✔
211
212	try {	2✔
213	const accounts = await pollForWalletConnection();	2✔
214	setIsWaitingForConnection(false);	1✔
215	console.log(accounts, 'accounts 2');	1✔
216	setAccounts(accounts);	1✔
217	} catch (err: unknown) {
218	if (err) {	1✔
219	setErrorMessage((err as Error).message);	1✔
220	}
221	}
222	};
223
224	const disconnect = async (): Promise<void> => {	13✔
225	await disconnectFromWalletSelector();	1✔
226	setIsWaitingForConnection(false);	1✔
227	};
228
229	const walletSelectorContextValue = useMemo<WalletContext>(	13✔
230	() => ({	10✔
231	selector: isMintbaseWallet? mbWalletSelector : selector,	10!
232	modal: modal,
233	accounts: accounts,
234	activeAccountId: isMintbaseWallet ? mbWalletUsername :	10!
235	accounts.find((account) => account.active)?.accountId \|\| null,	4✔
236	isConnected: isMintbaseWallet ? isConnected : accounts && accounts.length > 0,	30!
237	isWaitingForConnection: isWaitingForConnection,
238	isWalletSelectorSetup: isWalletSelectorSetup,
239	errorMessage: errorMessage,
240	connect,
241	disconnect,
242	signMessage,
243	}),
244	[selector, modal, accounts, isMintbaseWallet, isConnected, mbWalletUsername, mbWalletSelector],
245	);
246
247	return (	13✔
248	<WalletContext.Provider value={walletSelectorContextValue}>
249	{children}
250	</WalletContext.Provider>
251	);
252	};
253
254	export const useWallet = (): WalletContext => useContext(WalletContext);	10✔

Mintbase / mintbase-js / 5930279229

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