@mintbase-js/react
This package contains React helpers for interacting with Mintbase JS.
## Summary
- WalletContextProvider : the provider that will wrap the wallets to make it work in your application
- Hooks: a variety of hooks to make data fetching and transactions from our SDK/Data modules super easy in your React apps.
@mintbase-js/react relies on React and React Dom version v18.2.0 due to @near-wallet-selector/modal-uinpm install @mintbase-js/react
yarn add @mintbase-js/react
pnpm add @mintbase-js/react
ALSO RECOMMENDED TO DO: you can set network and contractAddress (the one from your dapp/mintbase store) straight on the WalletContextProvider too like this:
app.tsx
1
<WalletContextProvider network="mainnet" contractAddress="mycontract.mintbase1.near">
2
<Component {...pageProps} />
3
</WalletContextProvider>
WalletContextProvider is the provider you should wrap on your regular app.tsx/app.jsx file so that your application can work with our Wallet Selector:
Example usage in React Apps:
- Its important to install
@near-wallet-selector/modal-ui - Next.js example:
app.tsx
1
import type { AppProps } from 'next/app';
2
import { WalletContextProvider } from '@mintbase-js/react';
3
import '@near-wallet-selector/modal-ui/styles.css';
4
5
function MyApp({ Component, pageProps }: AppProps): JSX.Element {
6
return (
7
<WalletContextProvider>
8
<Component {...pageProps} />
9
</WalletContextProvider>
10
);
11
}
The WalletContext provides methods for:
- 1.
- 2.Interacting with @mintbase-js/sdk
The following props are provided to consumers of the
WalletContext.Provider:NearWalletConnector.ts
1
export type WalletContext = {
2
// a reference to the near wallet selector
3
selector: WalletSelector;
4
5
// the modal window that can be opened and closed
6
modal: WalletSelectorModal;
7
8
// an array of connected accounts
9
accounts: AccountState[];
10
11
// the current active account e.g. cooluser5.near
12
activeAccountId: string | null;
13
14
// wether or not a wallet is connected, can be derived from presense of activeAccountId
15
isConnected: boolean;
16
17
// true when the wallet selector modal is opened via connect() method
18
isWaitingForConnection: boolean;
19
20
// null when no error present, contains error messages from wallet selector otherwise
21
errorMessage: string | null;
22
23
// used to open the modal and connect to a NEAR account
24
connect: () => Promise<void>;
25
26
// disconnect entirely from NEAR account
27
disconnect: () => Promise<void>;
28
29
// can be used to sign messages used to verify wallet ownership
30
signMessage: (params: VerifyOwnerParams) => Promise<VerifiedOwner>;
31
}
32
Example usage in React components:
NearWalletConnector.ts
1
import { useWallet } from '@mintbase-js/react'
2
3
const NearWalletConnector = () => {
4
const {
5
connect,
6
disconnect,
7
activeAccountId,
8
selector,
9
isConnected,
10
errorMessage,
11
} = useWallet();
12
13
const signTxn = async () => {
14
const wallet = await selector.wallet();
15
// ... call mintbase SDK methods with wallet as signingOption arg
16
}
17
18
if (errorMessage) {
19
return (
20
<div>
21
<p>Major bummer! Could not connect to NEAR {errorMessage}</p>
22
<button onClick={connect}>Try Again</button>
23
</div>
24
)
25
}
26
27
if (!isConnected) {
28
return <button onClick={connect}>Connect To NEAR</button>
29
}
30
31
return (
32
<div>
33
<p>You are connected as {activeAccountId}</p>
34
<button onClick={signTxn}>Transaction</button>
35
<button onClick={disconnect}>Disconnect</button>
36
</div>
37
)
38
}
a variety of hooks to make data fetching and transactions from our SDK/Data modules super easy in your React apps.
hook name | description | params |
|---|---|---|
useOwnedNftsByStore | hook to fetch owned nfts by store (contractAddress) | ownerId: string,contractAddress: string,pagination: { limit: number; offset?: number} |
useTokenById | hook to fetch token by Id | tokenId: string,contractAddress: string |
Last modified 27d ago