• Home
  • Features
  • Pricing
  • Docs
  • Announcements
  • Sign In

Mintbase / mintbase-js / 10469222915

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

push

github

web-flow
Update Wallet Selector and NearAPI (#532)

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
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✔
STATUS · Troubleshooting · Open an Issue · Sales · Support · CAREERS · ENTERPRISE · START FREE · SCHEDULE DEMO
ANNOUNCEMENTS · TWITTER · TOS & SLA · Supported CI Services · What's a CI service? · Automated Testing

© 2025 Coveralls, Inc