[dapp-kit] Add ability to configure networks to SuiClientProvider

sdk/dapp-kit/src/components/SuiClientProvider.tsx

@@ -2,29 +2,72 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { SuiClient, getFullnodeUrl } from '@mysten/sui.js/client';
-import { SuiClientContext } from '../hooks/useSuiClient.js';
-import { useMemo } from 'react';
+import type { SuiClientOptions } from '@mysten/sui.js/client';
+import { createContext, useMemo, useState } from 'react';
 
-export interface SuiClientProviderProps {
+type NetworkConfig = SuiClient | SuiClientOptions;
+type NetworkConfigs<T extends NetworkConfig = NetworkConfig> = Record<string, T>;
+
+export interface SuiClientProviderContext {
+	client: SuiClient;
+	queryKey: (key: unknown[]) => unknown[];
+	networks: NetworkConfigs;
+	selectNetwork: (network: string) => void;
+}
+
+export const SuiClientContext = createContext<SuiClientProviderContext | undefined>(undefined);
+
+export interface SuiClientProviderProps<T extends NetworkConfigs> {
+	networks?: T;
+	createClient?: (name: keyof T, config: T[keyof T]) => SuiClient;
+	defaultNetwork?: keyof T;
 	children: React.ReactNode;
-	client?: SuiClient;
-	url?: string;
-	queryKeyPrefix: string;
 }
 
-export const SuiClientProvider = (props: SuiClientProviderProps) => {
-	const ctx = useMemo(() => {
-		const client =
-			props.client ??
-			new SuiClient({
-				url: props.url ?? getFullnodeUrl('devnet'),
-			});
+export function SuiClientProvider<T extends NetworkConfigs>(props: SuiClientProviderProps<T>) {
+	const networks = useMemo(
+		() =>
+			props.networks ??
+			({
+				devnet: { url: getFullnodeUrl('devnet') },
+			} as unknown as T),
+		[props.networks],
+	);
+	const [selectedNetwork, setSelectedNetwork] = useState<keyof T>(
+		props.defaultNetwork ?? Object.keys(networks)[0],
+	);
+
+	const createClient = useMemo(() => {
+		if (props.createClient) {
+			return props.createClient;
+		}
 
+		return (_name: keyof T, config: T[keyof T]) => {
+			if (config instanceof SuiClient) {
+				return config;
+			}
+
+			return new SuiClient(config);
+		};
+	}, [props.createClient]);
+
+	const [client, setClient] = useState<SuiClient>(() => {
+		return createClient(selectedNetwork, networks[selectedNetwork]);
+	});
+
+	const ctx = useMemo((): SuiClientProviderContext => {
 		return {
 			client,
-			queryKey: (key: unknown[]) => [props.queryKeyPrefix, ...key],
+			queryKey: (key: unknown[]) => [selectedNetwork, ...key],
+			networks,
+			selectNetwork: (network: keyof T) => {
+				if (network !== selectedNetwork) {
+					setSelectedNetwork(network);
+					setClient(createClient(network, networks[network]));
+				}
+			},
 		};
-	}, [props.client, props.url, props.queryKeyPrefix]);
+	}, [client, setClient, createClient, selectedNetwork, networks]);
 
 	return <SuiClientContext.Provider value={ctx}>{props.children}</SuiClientContext.Provider>;
-};
+}

sdk/dapp-kit/src/hooks/useSuiClient.ts

@@ -1,16 +1,8 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import type { SuiClient } from '@mysten/sui.js/client';
-import { createContext, useContext } from 'react';
-
-export const SuiClientContext = createContext<
-	| {
-			client: SuiClient;
-			queryKey: (key: unknown[]) => unknown[];
-	  }
-	| undefined
->(undefined);
+import { useContext } from 'react';
+import { SuiClientContext } from '../components/SuiClientProvider.js';
 
 export function useSuiClientContext() {
 	const suiClient = useContext(SuiClientContext);

sdk/dapp-kit/test/components/SuiClientProvider.test.tsx

@@ -0,0 +1,102 @@
+// Copyright (c) Mysten Labs, Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { act, render, screen } from '@testing-library/react';
+import { SuiClientProvider } from '../../src/components/SuiClientProvider.js';
+import { useSuiClient, useSuiClientContext } from 'dapp-kit/src/index.js';
+import { SuiClient } from '@mysten/sui.js/client';
+import { useState } from 'react';
+
+describe('SuiClientProvider', () => {
+	it('renders without crashing', () => {
+		render(
+			<SuiClientProvider>
+				<div>Test</div>
+			</SuiClientProvider>,
+		);
+		expect(screen.getByText('Test').textContent).toEqual('Test');
+	});
+
+	it('provides a SuiClient instance to its children', () => {
+		const ChildComponent = () => {
+			const client = useSuiClient();
+			expect(client).toBeInstanceOf(SuiClient);
+			return <div>Test</div>;
+		};
+
+		render(
+			<SuiClientProvider>
+				<ChildComponent />
+			</SuiClientProvider>,
+		);
+	});
+
+	it('can accept pre-configured SuiClients', () => {
+		const suiClient = new SuiClient({ url: 'http://localhost:8080' });
+		const ChildComponent = () => {
+			const client = useSuiClient();
+			expect(client).toBeInstanceOf(SuiClient);
+			expect(client).toBe(suiClient);
+			return <div>Test</div>;
+		};
+
+		render(
+			<SuiClientProvider networks={{ localnet: suiClient }}>
+				<ChildComponent />
+			</SuiClientProvider>,
+		);
+
+		expect(screen.getByText('Test').textContent).toEqual('Test');
+	});
+
+	test('can create sui clients with custom options', () => {
+		function NetworkSelector() {
+			const ctx = useSuiClientContext();
+
+			return (
+				<div>
+					{Object.keys(ctx.networks).map((network) => (
+						<button key={network} onClick={() => ctx.selectNetwork(network)}>
+							select {network}
+						</button>
+					))}
+				</div>
+			);
+		}
+		function CustomConfigProvider() {
+			const [selectedNetwork, setSelectedNetwork] = useState<string>();
+
+			return (
+				<SuiClientProvider
+					networks={{
+						a: {
+							url: 'http://localhost:8080',
+							custom: setSelectedNetwork,
+						},
+						b: {
+							url: 'http://localhost:8080',
+							custom: setSelectedNetwork,
+						},
+					}}
+					createClient={(name, { custom, ...config }) => {
+						custom(name);
+						return new SuiClient(config);
+					}}
+				>
+					<div>{selectedNetwork}</div>
+					<NetworkSelector />
+				</SuiClientProvider>
+			);
+		}
+
+		const { container } = render(<CustomConfigProvider />);
+
+		expect(container.firstChild?.textContent).toEqual('a');
+
+		act(() => {
+			const button = screen.getByText('select b');
+			button.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+		});
+		expect(container.firstChild?.textContent).toEqual('b');
+	});
+});

sdk/dapp-kit/test/test-utils.tsx

@@ -6,10 +6,6 @@ import { SuiClientProvider } from 'dapp-kit/src';
 
 export function createSuiClientContextWrapper(client: SuiClient) {
 	return function SuiClientContextWrapper({ children }: { children: React.ReactNode }) {
-		return (
-			<SuiClientProvider queryKeyPrefix="devnet" client={client}>
-				{children}
-			</SuiClientProvider>
-		);
+		return <SuiClientProvider networks={{ test: client }}>{children}</SuiClientProvider>;
 	};
 }