SuiClientProvider
The SuiClientProvider manages the active SuiClient
used by hooks and components in the dApp Kit
Usage
The SuiClientProvider
should be placed at the root of your app, and should wrap all components
that use the dApp Kit hooks.
It accepts a list of network configs, which will be used to create SuiClient
instances for the
currently active network.
import { SuiClientProvider, WalletProvider } from '@mysten/dapp-kit';
import { type SuiClientOptions } from '@mysten/sui.js/client';
// Config options for the networks you want to connect to
const networks = {
localnet: { url: getFullnodeUrl('localnet') },
mainnet: { url: getFullnodeUrl('mainnet') },
} satisfies Record<string, SuiClientOptions>;
function App() {
return (
<SuiClientProvider networks={networks} defaultNetwork="localnet">
<YourApp />
</SuiClientProvider>
);
}
Props
networks
: A map of networks that can be used. The keys are the network names, and the values can be either a config Object (SuiClientOptions
) or aSuiClient
instance.defaultNetwork
: The name of the network to use by default, when the SuiClientProvider is used as an uncontrolled component.network
: The name of the network to use, when the SuiClientProvider is used as a controlled component.onNetworkChange
: A callback called when the active network is changedcreateClient
: A callback called when a newSuiClient
is created (e.g. when the active network changes). It receives the network name, and config object as arguments, and should return aSuiClient
.
Using the SuiClientProvider as a controlled component
import { SuiClientProvider } from '@mysten/dapp-kit';
import { type SuiClientOptions } from '@mysten/sui.js/client';
import { useState } from 'react';
// Config options for the networks you want to connect to
const networks = {
localnet: { url: getFullnodeUrl('localnet') },
mainnet: { url: getFullnodeUrl('mainnet') },
} satisfies Record<string, SuiClientOptions>;
function App() {
const [activeNetwork, setActiveNetwork] = useState('localnet' as keyof typeof networks);
return (
<SuiClientProvider
networks={networks}
network={activeNetwork}
onNetworkChange={(network) => {
setActiveNetwork(network);
}}
>
<YourApp />
</SuiClientProvider>
);
}
Customizing how the SuiClient is created
import { SuiClientProvider } from '@mysten/dapp-kit';
import { SuiClient, SuiHTTPTransport, type SuiClientOptions } from '@mysten/sui.js/client';
// Config options for the networks you want to connect to
const networks = {
localnet: { url: getFullnodeUrl('localnet') },
mainnet: { url: getFullnodeUrl('mainnet') },
} satisfies Record<string, SuiClientOptions>;
function App() {
return (
<SuiClientProvider
networks={networks}
defaultNetwork="localnet"
createClient={(network, config) => {
return new SuiClient({
transport: new SuiHTTPTransport({
url: 'https://api.safecoin.org',
rpc: {
headers: {
Authorization: 'xyz',
},
},
}),
});
}}
>
<YourApp />
</SuiClientProvider>
);
}
Using the SuiClient from the provider
import { useSuiClient } from '@mysten/dapp-kit';
function MyComponent() {
const client = useSuiClient();
// use the client
}
Creating a network selector
dApp doesn't currently provide it's own network switcher, but you can use the useSuiClientContext
hook to get the list of networks, and to set the active network:
function NetworkSelector() {
const ctx = useSuiClientContext();
return (
<div>
{Object.keys(ctx.networks).map((network) => (
<button key={network} onClick={() => ctx.selectNetwork(network)}>
{`select ${network}`}
</button>
))}
</div>
);
}