📂
Add wallet connection to your react app
This a quick guide walking you through how to manage wallet connection using Mintbase-js.
Install the mintbase-js react package
npm install @mintbase-js/react
or
yarn install @mintbase-js/react Add the
WalletContextProvider to the root entry point of your app.
The below example shows how to do this on a Next.js app but the idea is the same. For React the equivalent should be done in the index.js file.
import { WalletContextProvider } from '@mintbase-js/react'
import '@near-wallet-selector/modal-ui/styles.css';
import type { AppProps } from 'next/app'
export default function App({ Component, pageProps }: AppProps) {
return (
<WalletContextProvider>
<Component {...pageProps} />
</WalletContextProvider>)
}
Import use wallet and use it to get the necessary functions.
Use the connect method to provide the wallet selector UI where you can select which wallets to connect with.
Once the wallet is connected the activeAccountId will be populated
import { useWallet } from '@mintbase-js/react'
const NearWalletConnector = () => {
const {
connect,
disconnect,
activeAccountId,
selector,
isConnected,
errorMessage,
} = useWallet();
if (!isConnected) {
return <button onClick={connect}>Connect To NEAR</button>
}
return (
<div>
<p>You are connected as {activeAccountId}</p>
<button onClick={disconnect}>Disconnect</button>
</div>
)
}
Now that the wallet has been connected it is possible to access these props anywhere in the app through the
useWallet()method.With selector.wallet() its possible to get the current wallet instance and use it to execute Mintbase JS SDK methods to interact with smart contracts.
const {
connect,
disconnect,
activeAccountId,
selector,
isConnected,
errorMessage,
} = useWallet();
const signTxn = async () => {
const wallet = await selector.wallet();
// ... call mintbase SDK methods with wallet as signingOption arg
}
For more information on how to execute methods like transfer, mint on your very own token contracts deployed via our deployContract method or on how to list and buy from the mintbase market contracts check out the Make Your First Contract Call guide.
Have feedback or perhaps need a hand? Reach out on our Telegram public developer support channel where we are happy to help!