@mysten/dapp-kit 0.14.53 → 0.15.0

package/src/components/ConnectButton.tsx

@@ -1,6 +1,7 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
+import type { WalletWithRequiredFeatures } from '@mysten/wallet-standard';
 import type { ButtonHTMLAttributes, ReactNode } from 'react';
 
 import { useCurrentAccount } from '../hooks/wallet/useCurrentAccount.js';
@@ -11,10 +12,13 @@ import { Button } from './ui/Button.js';
 
 type ConnectButtonProps = {
 	connectText?: ReactNode;
+	/** Filter the wallets shown in the connect modal */
+	walletFilter?: (wallet: WalletWithRequiredFeatures) => boolean;
 } & ButtonHTMLAttributes<HTMLButtonElement>;
 
 export function ConnectButton({
 	connectText = 'Connect Wallet',
+	walletFilter,
 	...buttonProps
 }: ConnectButtonProps) {
 	const currentAccount = useCurrentAccount();
@@ -22,6 +26,7 @@ export function ConnectButton({
 		<AccountDropdownMenu currentAccount={currentAccount} />
 	) : (
 		<ConnectModal
+			walletFilter={walletFilter}
 			trigger={
 				<StyleMarker>
 					<Button {...buttonProps}>{connectText}</Button>

package/src/components/connect-modal/ConnectModal.tsx

@@ -7,7 +7,9 @@ import clsx from 'clsx';
 import { useState } from 'react';
 import type { ReactNode } from 'react';
 
+import { DEFAULT_WALLET_FILTER } from '../../constants/walletDefaults.js';
 import { useConnectWallet } from '../../hooks/wallet/useConnectWallet.js';
+import { useWallets } from '../../hooks/wallet/useWallets.js';
 import { getWalletUniqueIdentifier } from '../../utils/walletUtils.js';
 import { BackIcon } from '../icons/BackIcon.js';
 import { CloseIcon } from '../icons/CloseIcon.js';
@@ -44,12 +46,23 @@ type UncontrolledModalProps = {
 type ConnectModalProps = {
 	/** The trigger button that opens the dialog. */
 	trigger: NonNullable<ReactNode>;
+
+	/** Filter the wallets shown in the modal. */
+	walletFilter?: (wallet: WalletWithRequiredFeatures) => boolean;
 } & (ControlledModalProps | UncontrolledModalProps);
 
-export function ConnectModal({ trigger, open, defaultOpen, onOpenChange }: ConnectModalProps) {
+export function ConnectModal({
+	trigger,
+	open,
+	defaultOpen,
+	onOpenChange,
+	walletFilter = DEFAULT_WALLET_FILTER,
+}: ConnectModalProps) {
 	const [isModalOpen, setModalOpen] = useState(open ?? defaultOpen);
 	const [currentView, setCurrentView] = useState<ConnectModalView>();
 	const [selectedWallet, setSelectedWallet] = useState<WalletWithRequiredFeatures>();
+
+	const wallets = useWallets().filter(walletFilter);
 	const { mutate, isError } = useConnectWallet();
 
 	const resetSelection = () => {
@@ -113,6 +126,7 @@ export function ConnectModal({ trigger, open, defaultOpen, onOpenChange }: Conne
 										<Heading as="h2">Connect a Wallet</Heading>
 									</Dialog.Title>
 									<WalletList
+										wallets={wallets}
 										selectedWalletName={getWalletUniqueIdentifier(selectedWallet)}
 										onPlaceholderClick={() => setCurrentView('getting-started')}
 										onSelect={(wallet) => {

package/src/components/connect-modal/wallet-list/WalletList.tsx

@@ -3,7 +3,6 @@
 
 import type { WalletWithRequiredFeatures } from '@mysten/wallet-standard';
 
-import { useWallets } from '../../../hooks/wallet/useWallets.js';
 import { getWalletUniqueIdentifier } from '../../../utils/walletUtils.js';
 import { SuiIcon } from '../../icons/SuiIcon.js';
 import * as styles from './WalletList.css.js';
@@ -13,10 +12,15 @@ type WalletListProps = {
 	selectedWalletName?: string;
 	onPlaceholderClick: () => void;
 	onSelect: (wallet: WalletWithRequiredFeatures) => void;
+	wallets: WalletWithRequiredFeatures[];
 };
 
-export function WalletList({ selectedWalletName, onPlaceholderClick, onSelect }: WalletListProps) {
-	const wallets = useWallets();
+export function WalletList({
+	selectedWalletName,
+	onPlaceholderClick,
+	onSelect,
+	wallets,
+}: WalletListProps) {
 	return (
 		<ul className={styles.container}>
 			{wallets.length > 0 ? (

package/src/hooks/wallet/useSignAndExecuteTransaction.ts

@@ -18,7 +18,7 @@ import {
 	WalletNotConnectedError,
 } from '../../errors/walletErrors.js';
 import type { PartialBy } from '../../types/utilityTypes.js';
-import { useSuiClient } from '../useSuiClient.js';
+import { useSuiClientContext } from '../useSuiClient.js';
 import { useCurrentAccount } from './useCurrentAccount.js';
 import { useCurrentWallet } from './useCurrentWallet.js';
 import { useReportTransactionEffects } from './useReportTransactionEffects.js';
@@ -77,7 +77,7 @@ export function useSignAndExecuteTransaction<
 > {
 	const { currentWallet, supportedIntents } = useCurrentWallet();
 	const currentAccount = useCurrentAccount();
-	const client = useSuiClient();
+	const { client, network } = useSuiClientContext();
 	const { mutate: reportTransactionEffects } = useReportTransactionEffects();
 
 	const executeTransaction: ({
@@ -119,7 +119,6 @@ export function useSignAndExecuteTransaction<
 					'No wallet account is selected to sign the transaction with.',
 				);
 			}
-			const chain = signTransactionArgs.chain ?? signerAccount?.chains[0];
 
 			if (
 				!currentWallet.features['sui:signTransaction'] &&
@@ -130,6 +129,7 @@ export function useSignAndExecuteTransaction<
 				);
 			}
 
+			const chain = signTransactionArgs.chain ?? `sui:${network}`;
 			const { signature, bytes } = await signTransaction(currentWallet, {
 				...signTransactionArgs,
 				transaction: {
@@ -143,7 +143,7 @@ export function useSignAndExecuteTransaction<
 					},
 				},
 				account: signerAccount,
-				chain: signTransactionArgs.chain ?? signerAccount.chains[0],
+				chain,
 			});
 
 			const result = await executeTransaction({ bytes, signature });

package/src/hooks/wallet/useSignPersonalMessage.ts

@@ -15,10 +15,11 @@ import {
 } from '../..//errors/walletErrors.js';
 import { walletMutationKeys } from '../../constants/walletMutationKeys.js';
 import type { PartialBy } from '../../types/utilityTypes.js';
+import { useSuiClientContext } from '../useSuiClient.js';
 import { useCurrentAccount } from './useCurrentAccount.js';
 import { useCurrentWallet } from './useCurrentWallet.js';
 
-type UseSignPersonalMessageArgs = PartialBy<SuiSignPersonalMessageInput, 'account'>;
+type UseSignPersonalMessageArgs = PartialBy<SuiSignPersonalMessageInput, 'account' | 'chain'>;
 
 type UseSignPersonalMessageResult = SuiSignPersonalMessageOutput;
 
@@ -51,6 +52,7 @@ export function useSignPersonalMessage({
 > {
 	const { currentWallet } = useCurrentWallet();
 	const currentAccount = useCurrentAccount();
+	const { network } = useSuiClientContext();
 
 	return useMutation({
 		mutationKey: walletMutationKeys.signPersonalMessage(mutationKey),
@@ -71,6 +73,7 @@ export function useSignPersonalMessage({
 				return await signPersonalMessageFeature.signPersonalMessage({
 					...signPersonalMessageArgs,
 					account: signerAccount,
+					chain: signPersonalMessageArgs.chain ?? `sui:${network}`,
 				});
 			}
 

package/src/hooks/wallet/useSignTransaction.ts

@@ -14,7 +14,7 @@ import {
 	WalletNotConnectedError,
 } from '../../errors/walletErrors.js';
 import type { PartialBy } from '../../types/utilityTypes.js';
-import { useSuiClient } from '../useSuiClient.js';
+import { useSuiClientContext } from '../useSuiClient.js';
 import { useCurrentAccount } from './useCurrentAccount.js';
 import { useCurrentWallet } from './useCurrentWallet.js';
 import { useReportTransactionEffects } from './useReportTransactionEffects.js';
@@ -59,7 +59,7 @@ export function useSignTransaction({
 > {
 	const { currentWallet } = useCurrentWallet();
 	const currentAccount = useCurrentAccount();
-	const client = useSuiClient();
+	const { client, network } = useSuiClientContext();
 
 	const { mutate: reportTransactionEffects } = useReportTransactionEffects();
 
@@ -86,6 +86,7 @@ export function useSignTransaction({
 				);
 			}
 
+			const chain = signTransactionArgs.chain ?? `sui:${network}`;
 			const { bytes, signature } = await signTransaction(currentWallet, {
 				...signTransactionArgs,
 				transaction: {
@@ -99,7 +100,7 @@ export function useSignTransaction({
 					},
 				},
 				account: signerAccount,
-				chain: signTransactionArgs.chain ?? signerAccount.chains[0],
+				chain,
 			});
 
 			return {
@@ -109,7 +110,7 @@ export function useSignTransaction({
 					reportTransactionEffects({
 						effects,
 						account: signerAccount,
-						chain: signTransactionArgs.chain ?? signerAccount.chains[0],
+						chain,
 					});
 				},
 			};

package/src/hooks/wallet/useUnsafeBurnerWallet.ts

@@ -98,7 +98,7 @@ function registerUnsafeBurnerWallet(suiClient: SuiClient) {
 					on: this.#on,
 				},
 				'sui:signPersonalMessage': {
-					version: '1.0.0',
+					version: '1.1.0',
 					signPersonalMessage: this.#signPersonalMessage,
 				},
 				'sui:signTransactionBlock': {