@mysten/dapp-kit 1.0.5 → 1.0.6

package/dist/themes/themeContract.d.ts

@@ -0,0 +1,141 @@
+declare const themeContractValues: {
+    blurs: {
+        modalOverlay: string;
+    };
+    backgroundColors: {
+        primaryButton: string;
+        primaryButtonHover: string;
+        outlineButtonHover: string;
+        walletItemHover: string;
+        walletItemSelected: string;
+        modalOverlay: string;
+        modalPrimary: string;
+        modalSecondary: string;
+        iconButton: string;
+        iconButtonHover: string;
+        dropdownMenu: string;
+        dropdownMenuSeparator: string;
+    };
+    borderColors: {
+        outlineButton: string;
+    };
+    colors: {
+        primaryButton: string;
+        outlineButton: string;
+        body: string;
+        bodyMuted: string;
+        bodyDanger: string;
+        iconButton: string;
+    };
+    radii: {
+        small: string;
+        medium: string;
+        large: string;
+        xlarge: string;
+    };
+    shadows: {
+        primaryButton: string;
+        walletItemSelected: string;
+    };
+    fontWeights: {
+        normal: string;
+        medium: string;
+        bold: string;
+    };
+    fontSizes: {
+        small: string;
+        medium: string;
+        large: string;
+        xlarge: string;
+    };
+    typography: {
+        fontFamily: string;
+        fontStyle: string;
+        lineHeight: string;
+        letterSpacing: string;
+    };
+};
+export type ThemeVars = typeof themeContractValues;
+/**
+ * A custom theme that is enabled when various conditions are
+ */
+export type DynamicTheme = {
+    /**
+     * An optional media query required for the given theme to be enabled. This is useful
+     * when you want the theme of your application to automatically switch depending on
+     * a media feature.
+     *
+     * @example '(prefers-color-scheme: dark)'
+     */
+    mediaQuery?: string;
+    /**
+     * An optional CSS selector required for the given theme to be enabled. This is useful
+     * when you have a manual theme switcher on your application that sets a top-level
+     * class name or data-attribute to control the current theme.
+     *
+     * @example '.data-dark'
+     */
+    selector?: string;
+    /** The theme definitions that will be set when the selector and mediaQuery criteria are matched. */
+    variables: ThemeVars;
+};
+export type Theme = ThemeVars | DynamicTheme[];
+export declare const themeVars: {
+    blurs: {
+        modalOverlay: `var(--${string})`;
+    };
+    backgroundColors: {
+        primaryButton: `var(--${string})`;
+        primaryButtonHover: `var(--${string})`;
+        outlineButtonHover: `var(--${string})`;
+        walletItemHover: `var(--${string})`;
+        walletItemSelected: `var(--${string})`;
+        modalOverlay: `var(--${string})`;
+        modalPrimary: `var(--${string})`;
+        modalSecondary: `var(--${string})`;
+        iconButton: `var(--${string})`;
+        iconButtonHover: `var(--${string})`;
+        dropdownMenu: `var(--${string})`;
+        dropdownMenuSeparator: `var(--${string})`;
+    };
+    borderColors: {
+        outlineButton: `var(--${string})`;
+    };
+    colors: {
+        primaryButton: `var(--${string})`;
+        outlineButton: `var(--${string})`;
+        body: `var(--${string})`;
+        bodyMuted: `var(--${string})`;
+        bodyDanger: `var(--${string})`;
+        iconButton: `var(--${string})`;
+    };
+    radii: {
+        small: `var(--${string})`;
+        medium: `var(--${string})`;
+        large: `var(--${string})`;
+        xlarge: `var(--${string})`;
+    };
+    shadows: {
+        primaryButton: `var(--${string})`;
+        walletItemSelected: `var(--${string})`;
+    };
+    fontWeights: {
+        normal: `var(--${string})`;
+        medium: `var(--${string})`;
+        bold: `var(--${string})`;
+    };
+    fontSizes: {
+        small: `var(--${string})`;
+        medium: `var(--${string})`;
+        large: `var(--${string})`;
+        xlarge: `var(--${string})`;
+    };
+    typography: {
+        fontFamily: `var(--${string})`;
+        fontStyle: `var(--${string})`;
+        lineHeight: `var(--${string})`;
+        letterSpacing: `var(--${string})`;
+    };
+};
+export {};
+//# sourceMappingURL=themeContract.d.ts.map

package/dist/themes/themeContract.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeContract.d.ts","sourceRoot":"","sources":["../../src/themes/themeContract.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDxB,CAAC;AAEF,MAAM,MAAM,SAAS,GAAG,OAAO,mBAAmB,CAAC;AAEnD;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG;IAC1B;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,oGAAoG;IACpG,SAAS,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,KAAK,GAAG,SAAS,GAAG,YAAY,EAAE,CAAC;AAE/C,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGrB,CAAC"}

package/dist/types/utilityTypes.d.ts

@@ -0,0 +1,2 @@
+export type PartialBy<T, K extends keyof T> = Omit<T, K> & Partial<T>;
+//# sourceMappingURL=utilityTypes.d.ts.map

package/dist/types/utilityTypes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utilityTypes.d.ts","sourceRoot":"","sources":["../../src/types/utilityTypes.ts"],"names":[],"mappings":"AAGA,MAAM,MAAM,SAAS,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC"}

package/dist/types.d.ts

@@ -0,0 +1,3 @@
+export type { SignedPersonalMessage, SignedTransaction } from '@mysten/wallet-standard';
+export type { ThemeVars } from './themes/themeContract.js';
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAGA,YAAY,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACxF,YAAY,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/utils/assertUnreachable.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Utility for compile-time exhaustiveness checking.
+ */
+export declare function assertUnreachable(value: never): never;
+//# sourceMappingURL=assertUnreachable.d.ts.map

package/dist/utils/assertUnreachable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"assertUnreachable.d.ts","sourceRoot":"","sources":["../../src/utils/assertUnreachable.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAErD"}

package/dist/utils/stateStorage.d.ts

@@ -0,0 +1,3 @@
+import type { StateStorage } from 'zustand/middleware';
+export declare function createInMemoryStore(): StateStorage;
+//# sourceMappingURL=stateStorage.d.ts.map

package/dist/utils/stateStorage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stateStorage.d.ts","sourceRoot":"","sources":["../../src/utils/stateStorage.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAEvD,wBAAgB,mBAAmB,IAAI,YAAY,CAalD"}

package/dist/utils/walletUtils.d.ts

@@ -0,0 +1,4 @@
+import type { Wallet, WalletWithFeatures, WalletWithRequiredFeatures } from '@mysten/wallet-standard';
+export declare function getRegisteredWallets<AdditionalFeatures extends Wallet['features']>(preferredWallets: string[], walletFilter?: (wallet: WalletWithRequiredFeatures) => boolean): WalletWithFeatures<import("@mysten/wallet-standard").StandardConnectFeature & import("@mysten/wallet-standard").StandardEventsFeature & AdditionalFeatures>[];
+export declare function getWalletUniqueIdentifier(wallet?: Wallet): string | undefined;
+//# sourceMappingURL=walletUtils.d.ts.map

package/dist/utils/walletUtils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"walletUtils.d.ts","sourceRoot":"","sources":["../../src/utils/walletUtils.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAEX,MAAM,EACN,kBAAkB,EAClB,0BAA0B,EAC1B,MAAM,yBAAyB,CAAC;AAGjC,wBAAgB,oBAAoB,CAAC,kBAAkB,SAAS,MAAM,CAAC,UAAU,CAAC,EACjF,gBAAgB,EAAE,MAAM,EAAE,EAC1B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,0BAA0B,KAAK,OAAO,iKAmB9D;AAED,wBAAgB,yBAAyB,CAAC,MAAM,CAAC,EAAE,MAAM,sBAExD"}

package/dist/walletStore.d.ts

@@ -0,0 +1,45 @@
+import type { Wallet, WalletAccount, WalletWithRequiredFeatures } from '@mysten/wallet-standard';
+import type { StateStorage } from 'zustand/middleware';
+type WalletConnectionStatus = 'disconnected' | 'connecting' | 'connected';
+export type WalletActions = {
+    setAccountSwitched: (selectedAccount: WalletAccount) => void;
+    setConnectionStatus: (connectionStatus: WalletConnectionStatus) => void;
+    setWalletConnected: (wallet: WalletWithRequiredFeatures, connectedAccounts: readonly WalletAccount[], selectedAccount: WalletAccount | null, supportedIntents?: string[]) => void;
+    updateWalletAccounts: (accounts: readonly WalletAccount[]) => void;
+    setWalletDisconnected: () => void;
+    setWalletRegistered: (updatedWallets: WalletWithRequiredFeatures[]) => void;
+    setWalletUnregistered: (updatedWallets: WalletWithRequiredFeatures[], unregisteredWallet: Wallet) => void;
+};
+export type WalletStore = ReturnType<typeof createWalletStore>;
+export type StoreState = {
+    autoConnectEnabled: boolean;
+    wallets: WalletWithRequiredFeatures[];
+    accounts: readonly WalletAccount[];
+    currentWallet: WalletWithRequiredFeatures | null;
+    currentAccount: WalletAccount | null;
+    lastConnectedAccountAddress: string | null;
+    lastConnectedWalletName: string | null;
+    connectionStatus: WalletConnectionStatus;
+    supportedIntents: string[];
+} & WalletActions;
+type WalletConfiguration = {
+    autoConnectEnabled: boolean;
+    wallets: WalletWithRequiredFeatures[];
+    storage: StateStorage;
+    storageKey: string;
+};
+export declare function createWalletStore({ wallets, storage, storageKey, autoConnectEnabled, }: WalletConfiguration): Omit<import("zustand").StoreApi<StoreState>, "setState" | "persist"> & {
+    setState(partial: StoreState | Partial<StoreState> | ((state: StoreState) => StoreState | Partial<StoreState>), replace?: false | undefined): unknown;
+    setState(state: StoreState | ((state: StoreState) => StoreState), replace: true): unknown;
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<StoreState, unknown, unknown>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: StoreState) => void) => () => void;
+        onFinishHydration: (fn: (state: StoreState) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<StoreState, unknown, unknown>>;
+    };
+};
+export {};
+//# sourceMappingURL=walletStore.d.ts.map

package/dist/walletStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"walletStore.d.ts","sourceRoot":"","sources":["../src/walletStore.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAEjG,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAKvD,KAAK,sBAAsB,GAAG,cAAc,GAAG,YAAY,GAAG,WAAW,CAAC;AAE1E,MAAM,MAAM,aAAa,GAAG;IAC3B,kBAAkB,EAAE,CAAC,eAAe,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7D,mBAAmB,EAAE,CAAC,gBAAgB,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACxE,kBAAkB,EAAE,CACnB,MAAM,EAAE,0BAA0B,EAClC,iBAAiB,EAAE,SAAS,aAAa,EAAE,EAC3C,eAAe,EAAE,aAAa,GAAG,IAAI,EACrC,gBAAgB,CAAC,EAAE,MAAM,EAAE,KACvB,IAAI,CAAC;IACV,oBAAoB,EAAE,CAAC,QAAQ,EAAE,SAAS,aAAa,EAAE,KAAK,IAAI,CAAC;IACnE,qBAAqB,EAAE,MAAM,IAAI,CAAC;IAClC,mBAAmB,EAAE,CAAC,cAAc,EAAE,0BAA0B,EAAE,KAAK,IAAI,CAAC;IAC5E,qBAAqB,EAAE,CACtB,cAAc,EAAE,0BAA0B,EAAE,EAC5C,kBAAkB,EAAE,MAAM,KACtB,IAAI,CAAC;CACV,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAE/D,MAAM,MAAM,UAAU,GAAG;IACxB,kBAAkB,EAAE,OAAO,CAAC;IAC5B,OAAO,EAAE,0BAA0B,EAAE,CAAC;IACtC,QAAQ,EAAE,SAAS,aAAa,EAAE,CAAC;IACnC,aAAa,EAAE,0BAA0B,GAAG,IAAI,CAAC;IACjD,cAAc,EAAE,aAAa,GAAG,IAAI,CAAC;IACrC,2BAA2B,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3C,uBAAuB,EAAE,MAAM,GAAG,IAAI,CAAC;IACvC,gBAAgB,EAAE,sBAAsB,CAAC;IACzC,gBAAgB,EAAE,MAAM,EAAE,CAAC;CAC3B,GAAG,aAAa,CAAC;AAElB,KAAK,mBAAmB,GAAG;IAC1B,kBAAkB,EAAE,OAAO,CAAC;IAC5B,OAAO,EAAE,0BAA0B,EAAE,CAAC;IACtC,OAAO,EAAE,YAAY,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,wBAAgB,iBAAiB,CAAC,EACjC,OAAO,EACP,OAAO,EACP,UAAU,EACV,kBAAkB,GAClB,EAAE,mBAAmB;;;;;;;;;;;;EAuFrB"}

package/docs/index.md

@@ -0,0 +1,93 @@
+# Sui dApp Kit (Legacy)
+
+> Legacy dApp Kit API reference for the deprecated @mysten/dapp-kit package using JSON RPC.
+
+> **Warning:** **Deprecated - JSON RPC Only**: This legacy version of `@mysten/dapp-kit` only works with the
+> deprecated JSON RPC API and will not be updated to support gRPC or GraphQL. For new projects, use
+> [`@mysten/dapp-kit-core` and `@mysten/dapp-kit-react`](/dapp-kit).
+
+The Sui dApp Kit is a set of React components, hooks, and utilities to help you build an app for the
+Sui ecosystem. Its hooks and components provide an interface for querying data from the Sui network
+and connecting to Sui wallets.
+
+### Core features
+
+Some of the core features of the dApp Kit include:
+
+- Query hooks to get the information your app needs
+- Automatic wallet state management
+- Support for all Sui wallets
+- Pre-built React components
+- Lower level hooks for custom components
+
+## Install
+
+To use the Sui dApp Kit in your project, run the following command in your project root:
+
+```sh npm2yarn
+npm i --save @mysten/dapp-kit @mysten/sui @tanstack/react-query
+```
+
+## Setting up providers
+
+To use the hooks and components in the dApp Kit, wrap your app with the providers shown in the
+following example. The props available on the providers are covered in more detail in their
+respective pages.
+
+```tsx
+
+// Config options for the networks you want to connect to
+const { networkConfig } = createNetworkConfig({
+	localnet: { url: getFullnodeUrl('localnet') },
+	mainnet: { url: getFullnodeUrl('mainnet') },
+});
+const queryClient = new QueryClient();
+
+function App() {
+	return (
+		<QueryClientProvider client={queryClient}>
+			<SuiClientProvider networks={networkConfig} defaultNetwork="localnet">
+				<WalletProvider>
+					<YourApp />
+				</WalletProvider>
+			</SuiClientProvider>
+		</QueryClientProvider>
+	);
+}
+```
+
+## Using UI components to connect to a wallet
+
+The dApp Kit provides a set of flexible UI components that you can use to connect and manage wallet
+accounts from your app. The components are built on top of
+[Radix UI](https://www.radix-ui.com/primitives) and are customizable.
+
+To use the provided UI components, import the dApp Kit CSS stylesheet into your app. For more
+information regarding customization options, check out the respective documentation pages for the
+components and [themes](/dapp-kit/legacy/themes).
+
+```tsx
+
+```
+
+## Using hooks to make RPC calls
+
+The dApp Kit provides a set of hooks for making RPC calls to the Sui blockchain. The hooks are thin
+wrappers around `useQuery` from `@tanstack/react-query`. For more comprehensive documentation on how
+to use these query hooks, check out the
+[react-query documentation](https://tanstack.com/query/latest/docs/react/overview).
+
+```tsx
+
+function MyComponent() {
+	const { data, isPending, error, refetch } = useSuiClientQuery('getOwnedObjects', {
+		owner: '0x123',
+	});
+
+	if (isPending) {
+		return <div>Loading...</div>;
+	}
+
+	return <pre>{JSON.stringify(data, null, 2)}</pre>;
+}
+```

package/docs/llms-index.md

@@ -0,0 +1,22 @@
+# dApp Kit (Legacy)
+> Build Sui dapps in React with @mysten/dapp-kit
+
+- [Sui dApp Kit (Legacy)](..md): Legacy dApp Kit API reference for the deprecated @mysten/dapp-kit package using JSON RPC.
+- [SuiClientProvider](./sui-client-provider.md): React provider for managing the active SuiJsonRpcClient in legacy dApp Kit.
+- [RPC Hooks](./rpc-hooks.md): React hooks for querying the Sui blockchain using JSON RPC methods.
+- [WalletProvider](./wallet-provider.md): React context provider for wallet connections in legacy dApp Kit.
+- [ConnectButton](./wallet-components/ConnectButton.md): Legacy React button component for connecting and disconnecting a Sui wallet.
+- [ConnectModal](./wallet-components/ConnectModal.md): Legacy React modal component that guides users through connecting their wallet.
+- [useWallets](./wallet-hooks/useWallets.md): Legacy React hook to list available wallet extensions sorted by priority.
+- [useAccounts](./wallet-hooks/useAccounts.md): Legacy React hook to list connected wallet accounts authorized by the app.
+- [useCurrentWallet](./wallet-hooks/useCurrentWallet.md): Legacy React hook to get the currently connected wallet and connection status.
+- [useCurrentAccount](./wallet-hooks/useCurrentAccount.md): Legacy React hook to get the currently selected wallet account.
+- [useAutoConnectWallet](./wallet-hooks/useAutoConnectWallet.md): Legacy React hook to check the auto-connection status for the last connected wallet.
+- [useConnectWallet](./wallet-hooks/useConnectWallet.md): Legacy React mutation hook to establish a connection with a specific wallet.
+- [useDisconnectWallet](./wallet-hooks/useDisconnectWallet.md): Legacy React mutation hook to disconnect from the currently connected wallet.
+- [useSwitchAccount](./wallet-hooks/useSwitchAccount.md): Legacy React mutation hook to switch the active wallet account.
+- [useSignPersonalMessage](./wallet-hooks/useSignPersonalMessage.md): Legacy React hook to sign a personal message with the connected wallet.
+- [useSignTransaction](./wallet-hooks/useSignTransaction.md): Legacy React hook to sign a transaction without executing it on the Sui network.
+- [useSignAndExecuteTransaction](./wallet-hooks/useSignAndExecuteTransaction.md): Legacy React hook to sign and execute a transaction block on the Sui network.
+- [Slush Integration](./slush.md): Integrate Slush wallet with the legacy dApp Kit WalletProvider.
+- [Themes](./themes.md): Theming API for customizing the appearance of legacy dApp Kit components.

package/docs/rpc-hooks.md

@@ -0,0 +1,166 @@
+# RPC Hooks
+
+> React hooks for querying the Sui blockchain using JSON RPC methods.
+
+Sui dApp Kit ships with hooks for each of the RPC methods defined in the
+[JSON RPC specification](https://docs.sui.io/sui-api-ref).
+
+## `useSuiClientQuery`
+
+Load data from the Sui RPC using the `useSuiClientQuery` hook. This hook is a wrapper around the
+[`useQuery`](https://tanstack.com/query/latest/docs/react/guides/queries) hook from
+@tanstack/react-query.
+
+The hook takes the RPC method name as the first argument and any parameters as the second argument.
+You can pass any additional `useQuery` options as the third argument. You can read the
+[useQuery documentation](https://tanstack.com/query/latest/docs/react/guides/queries) for more
+details on the full set of options available.
+
+```tsx
+
+function MyComponent() {
+	const { data, isPending, isError, error, refetch } = useSuiClientQuery(
+		'getOwnedObjects',
+		{ owner: '0x123' },
+		{
+			gcTime: 10000,
+		},
+	);
+
+	if (isPending) {
+		return <div>Loading...</div>;
+	}
+
+	if (isError) {
+		return <div>Error: {error.message}</div>;
+	}
+
+	return <pre>{JSON.stringify(data, null, 2)}</pre>;
+}
+```
+
+## `useSuiClientQueries`
+
+You can fetch a variable number of Sui RPC queries using the `useSuiClientQueries` hook. This hook
+is a wrapper around the
+[`useQueries`](https://tanstack.com/query/latest/docs/react/reference/useQueries) hook from
+@tanstack/react-query.
+
+The `queries` value is an array of query option objects identical to the `useSuiClientQuery` hook.
+
+The `combine` parameter is optional. Use this parameter to combine the results of the queries into a
+single value. The result is structurally shared to be as referentially stable as possible.
+
+```tsx
+
+function MyComponent() {
+	const { data, isPending, isError } = useSuiClientQueries({
+		queries: [
+			{
+				method: 'getAllBalances',
+				params: {
+					owner: '0x123',
+				},
+			},
+			{
+				method: 'queryTransactionBlocks',
+				params: {
+					filter: {
+						FromAddress: '0x123',
+					},
+				},
+			},
+		],
+		combine: (result) => {
+			return {
+				data: result.map((res) => res.data),
+				isSuccess: result.every((res) => res.isSuccess),
+				isPending: result.some((res) => res.isPending),
+				isError: result.some((res) => res.isError),
+			};
+		},
+	});
+
+	if (isPending) {
+		return <div>Loading...</div>;
+	}
+
+	if (isError) {
+		return <div>Fetching Error</div>;
+	}
+
+	return <pre>{JSON.stringify(data, null, 2)}</pre>;
+}
+```
+
+## `useSuiClientInfiniteQuery`
+
+For RPC methods that support pagination, dApp Kit also implements a `useSuiClientInfiniteQuery`
+hook. For more details check out the
+[`useInfiniteQuery` documentation](https://tanstack.com/query/latest/docs/react/guides/infinite-queries).
+
+```tsx
+
+function MyComponent() {
+	const { data, isPending, isError, error, isFetching, fetchNextPage, hasNextPage } =
+		useSuiClientInfiniteQuery('getOwnedObjects', {
+			owner: '0x123',
+		});
+
+	if (isPending) {
+		return <div>Loading...</div>;
+	}
+
+	if (isError) {
+		return <div>Error: {error.message}</div>;
+	}
+
+	return <pre>{JSON.stringify(data, null, 2)}</pre>;
+}
+```
+
+## `useSuiClientMutation`
+
+For RPC methods that mutate state, dApp Kit implements a `useSuiClientMutation` hook. Use this hook
+with any RPC method to imperatively call the RPC method. For more details, check out the
+[`useMutation` documentation](https://tanstack.com/query/latest/docs/react/guides/mutations).
+
+```tsx
+
+function MyComponent() {
+	const { mutate } = useSuiClientMutation('dryRunTransactionBlock');
+
+	return (
+		<Button
+			onClick={() => {
+				mutate({
+					transactionBlock: tx,
+				});
+			}}
+		>
+			Dry run transaction
+		</Button>
+	);
+}
+```
+
+## `useResolveSuiNSName`
+
+To get the SuiNS name for a given address, use the `useResolveSuiNSName` hook.
+
+```tsx
+
+function MyComponent() {
+	const { data, isPending } = useResolveSuiNSName('0x123');
+
+	if (isPending) {
+		return <div>Loading...</div>;
+	}
+
+	if (data) {
+		return <div>Domain name is: {data}</div>;
+	}
+
+	return <div>Domain name not found</div>;
+}
+```

package/docs/slush.md

@@ -0,0 +1,29 @@
+# Slush Integration
+
+> Integrate Slush wallet with the legacy dApp Kit WalletProvider.
+
+The dApp Kit provides out-of-the-box opt-in support for the [Slush wallet](/slush-wallet/dapp).
+
+## Setup
+
+To enable support for Slush wallets, pass the `slushWallet` object to the `WalletProvider`
+component. This object has the following properties:
+
+- **`name`:** The name of your app, shown to the user when connecting to the app.
+
+```tsx
+function App({ children }) {
+	return (
+		<WalletProvider
+			slushWallet={{
+				name: 'Your dApp name',
+			}}
+		>
+			{children}
+		</WalletProvider>
+	);
+}
+```
+
+> In the connect modal, users with the Slush Wallet extension installed will only see the extension.
+> If they do not have it, the connection defaults to the Slush web app.