@solana/react 6.3.1 → 6.3.2-canary-20260313112147

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solana/react",
-  "version": "6.3.1",
+  "version": "6.3.2-canary-20260313112147",
   "description": "React hooks for building Solana apps",
   "homepage": "https://www.solanakit.com/api#solanareact",
   "exports": {
@@ -33,7 +33,8 @@
   "types": "./dist/types/index.d.ts",
   "type": "commonjs",
   "files": [
-    "./dist/"
+    "./dist/",
+    "./src/"
   ],
   "sideEffects": false,
   "keywords": [
@@ -61,13 +62,13 @@
     "@wallet-standard/react": "^1.0.1",
     "@wallet-standard/ui": "^1.0.1",
     "@wallet-standard/ui-registry": "^1.0.1",
-    "@solana/addresses": "6.3.1",
-    "@solana/promises": "6.3.1",
-    "@solana/signers": "6.3.1",
-    "@solana/transaction-messages": "6.3.1",
-    "@solana/errors": "6.3.1",
-    "@solana/keys": "6.3.1",
-    "@solana/transactions": "6.3.1"
+    "@solana/errors": "6.3.2-canary-20260313112147",
+    "@solana/keys": "6.3.2-canary-20260313112147",
+    "@solana/addresses": "6.3.2-canary-20260313112147",
+    "@solana/signers": "6.3.2-canary-20260313112147",
+    "@solana/promises": "6.3.2-canary-20260313112147",
+    "@solana/transaction-messages": "6.3.2-canary-20260313112147",
+    "@solana/transactions": "6.3.2-canary-20260313112147"
   },
   "peerDependencies": {
     "react": ">=18"

package/src/SelectedWalletAccountContextProvider.tsx

@@ -0,0 +1,147 @@
+import type { UiWallet, UiWalletAccount } from '@wallet-standard/react';
+import {
+    getUiWalletAccountStorageKey,
+    uiWalletAccountBelongsToUiWallet,
+    uiWalletAccountsAreSame,
+    useWallets,
+} from '@wallet-standard/react';
+import React from 'react';
+
+import { SelectedWalletAccountContext, SelectedWalletAccountState } from './selectedWalletAccountContext';
+
+export type SelectedWalletAccountContextProviderProps = {
+    filterWallets: (wallet: UiWallet) => boolean;
+    stateSync: {
+        deleteSelectedWallet: () => void;
+        getSelectedWallet: () => string | null;
+        storeSelectedWallet: (accountKey: string) => void;
+    };
+} & { children: React.ReactNode };
+
+/**
+ * Returns the saved wallet account when its corresponding wallet, and account is available.
+ * @param wallets All wallets available to select in the app
+ * @param savedWalletKey The saved wallet account storage key
+ * @returns The saved wallet account, or undefined if not found
+ */
+function findSavedWalletAccount(
+    wallets: readonly UiWallet[],
+    savedWalletKey: string | null,
+): UiWalletAccount | undefined {
+    if (!savedWalletKey) {
+        return;
+    }
+    const [savedWalletName, savedWalletAddress] = savedWalletKey.split(':');
+    if (!savedWalletName || !savedWalletAddress) {
+        return;
+    }
+    for (const wallet of wallets) {
+        if (wallet.name !== savedWalletName) continue;
+        for (const account of wallet.accounts) {
+            if (account.address === savedWalletAddress) {
+                return account;
+            }
+        }
+    }
+}
+
+/**
+ * Saves the selected wallet account's storage key to a persistant storage. In future
+ * sessions it will try to return that same wallet account, or at least one from the same brand of
+ * wallet if the wallet from which it came is still in the Wallet Standard registry.
+ * @param children The child components that will have access to the selected wallet account context
+ * @param filterWallets A function to filter which wallets are available in the app
+ * @param stateSync An object with methods to synchronize the selected wallet account state with persistent storage
+ * @returns A React component that provides the selected wallet account context to its children
+ */
+export function SelectedWalletAccountContextProvider({
+    children,
+    filterWallets,
+    stateSync,
+}: SelectedWalletAccountContextProviderProps) {
+    const wallets = useWallets();
+    const filteredWallets = React.useMemo(() => wallets.filter(filterWallets), [wallets, filterWallets]);
+    const wasSetterInvokedRef = React.useRef(false);
+
+    const [selectedWalletAccount, setSelectedWalletAccountInternal] = React.useState<SelectedWalletAccountState>(() => {
+        const savedWalletKey = stateSync.getSelectedWallet();
+        const savedWalletAccount = findSavedWalletAccount(filteredWallets, savedWalletKey);
+        return savedWalletAccount;
+    });
+
+    // Public setter: mark the per-instance ref synchronously to avoid races, then schedule state update.
+    // useCallback stabilises the setter for consumers.
+    const setSelectedWalletAccount: React.Dispatch<React.SetStateAction<SelectedWalletAccountState>> =
+        React.useCallback(
+            setStateAction => {
+                wasSetterInvokedRef.current = true;
+                setSelectedWalletAccountInternal(prevSelectedWalletAccount => {
+                    const nextWalletAccount =
+                        typeof setStateAction === 'function'
+                            ? setStateAction(prevSelectedWalletAccount)
+                            : setStateAction;
+                    return nextWalletAccount;
+                });
+            },
+            [setSelectedWalletAccountInternal],
+        );
+
+    //Sync to persistant storage when selectedWalletAccount changes
+    React.useEffect(() => {
+        if (!wasSetterInvokedRef.current) return;
+
+        const accountKey = selectedWalletAccount ? getUiWalletAccountStorageKey(selectedWalletAccount) : undefined;
+
+        if (accountKey) {
+            stateSync.storeSelectedWallet(accountKey);
+        } else {
+            stateSync.deleteSelectedWallet();
+        }
+    }, [selectedWalletAccount, stateSync]);
+
+    //Auto-restore saved wallet account if it appears later,
+    //and if the user hasn't made an explicit choice yet.
+    React.useEffect(() => {
+        if (wasSetterInvokedRef.current) return;
+        const savedWalletKey = stateSync.getSelectedWallet();
+        const savedAccount = findSavedWalletAccount(filteredWallets, savedWalletKey);
+        if (savedAccount && selectedWalletAccount && uiWalletAccountsAreSame(savedAccount, selectedWalletAccount)) {
+            return;
+        }
+        if (savedAccount) {
+            setSelectedWalletAccountInternal(savedAccount);
+        }
+    }, [filteredWallets, stateSync, selectedWalletAccount]);
+
+    const walletAccount = React.useMemo(() => {
+        if (!selectedWalletAccount) return;
+        for (const wallet of filteredWallets) {
+            for (const account of wallet.accounts) {
+                if (uiWalletAccountsAreSame(account, selectedWalletAccount)) {
+                    return account;
+                }
+            }
+            if (uiWalletAccountBelongsToUiWallet(selectedWalletAccount, wallet) && wallet.accounts[0]) {
+                return wallet.accounts[0];
+            }
+        }
+    }, [selectedWalletAccount, filteredWallets]);
+
+    React.useEffect(() => {
+        // If there is a selected wallet account but the wallet to which it belongs has since
+        // disconnected, clear the selected wallet. This is an automatic cleanup and should not
+        // mark the 'wasSetterInvoked' ref (so we use the internal setter).
+        // Cleanup shouldn't be run if user has made a selection or selectedWalletAccount/walletAccount are loading or undefined
+        if (!selectedWalletAccount) return; //still loading ...
+        if (wasSetterInvokedRef.current) return; //user made a selection
+        if (!walletAccount) {
+            setSelectedWalletAccountInternal(undefined);
+        }
+    }, [selectedWalletAccount, walletAccount]);
+
+    return (
+        <SelectedWalletAccountContext.Provider value={[walletAccount, setSelectedWalletAccount, filteredWallets]}>
+            {children}
+        </SelectedWalletAccountContext.Provider>
+    );
+}

package/src/chain.ts

@@ -0,0 +1,7 @@
+import { IdentifierArray } from '@wallet-standard/base';
+
+type AssertSolanaChain<T> = T extends `solana:${string}` ? T : never;
+
+export type OnlySolanaChains<T extends IdentifierArray> = T extends IdentifierArray
+    ? AssertSolanaChain<T[number]>
+    : never;

package/src/index.ts

@@ -0,0 +1,14 @@
+/**
+ * This package contains React hooks for building Solana apps.
+ *
+ * @packageDocumentation
+ */
+export * from './useSignAndSendTransaction';
+export * from './useSignIn';
+export * from './useSignMessage';
+export * from './useSignTransaction';
+export * from './useWalletAccountMessageSigner';
+export * from './useWalletAccountTransactionSigner';
+export * from './useWalletAccountTransactionSendingSigner';
+export * from './SelectedWalletAccountContextProvider';
+export * from './selectedWalletAccountContext';

package/src/selectedWalletAccountContext.ts

@@ -0,0 +1,21 @@
+import { UiWallet, UiWalletAccount } from '@wallet-standard/react';
+import React, { createContext } from 'react';
+
+export type SelectedWalletAccountState = UiWalletAccount | undefined;
+
+export type SelectedWalletAccountContextValue = readonly [
+    selectedWalletAccount: SelectedWalletAccountState,
+    setSelectedWalletAccount: React.Dispatch<React.SetStateAction<SelectedWalletAccountState>>,
+    filteredWallets: UiWallet[],
+];
+
+export const SelectedWalletAccountContext = /*#__PURE__*/ createContext<SelectedWalletAccountContextValue>([
+    undefined,
+    () => {},
+    [],
+]);
+
+export function useSelectedWalletAccount() {
+    const ctx = React.useContext(SelectedWalletAccountContext);
+    return ctx;
+}

package/src/test-renderer.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { act, create, ReactTestRenderer } from 'react-test-renderer';
+
+type Result<T> =
+    | {
+          __type: 'error';
+          current: Error;
+          reset: () => void;
+      }
+    | {
+          __type: 'result';
+          current?: T;
+      };
+
+type TestComponentProps<THookReturn> = {
+    executor(): THookReturn;
+    resultRef: Result<THookReturn>;
+};
+
+function TestComponentHookRenderer<THookFn extends (...args: never) => unknown>({
+    executor,
+    resultRef,
+}: TestComponentProps<ReturnType<THookFn>>) {
+    resultRef.current = executor();
+    return null;
+}
+
+function TestComponent<THookFn extends (...args: never) => unknown>({
+    executor,
+    resultRef,
+}: TestComponentProps<ReturnType<THookFn>>) {
+    return (
+        <ErrorBoundary
+            fallbackRender={({ error, resetErrorBoundary }) => {
+                resultRef.__type = 'error';
+                resultRef.current = error;
+                (resultRef as Extract<typeof resultRef, { __type: 'error' }>).reset = resetErrorBoundary;
+                return null;
+            }}
+            onReset={() => {
+                resultRef.__type = 'result';
+                delete resultRef.current;
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                delete (resultRef as any).reset;
+            }}
+        >
+            <TestComponentHookRenderer executor={executor} resultRef={resultRef} />
+        </ErrorBoundary>
+    );
+}
+
+export function renderHook<THookReturn>(executor: () => THookReturn): {
+    rerenderHook(nextExecutor: () => THookReturn): void;
+    result: Readonly<Result<THookReturn>>;
+} {
+    const result = { __type: 'result' } as Result<THookReturn>;
+    let testRenderer: ReactTestRenderer;
+    void act(() => {
+        testRenderer = create(<TestComponent executor={executor} resultRef={result} />);
+    });
+    return {
+        rerenderHook(nextExecutor) {
+            void act(() => {
+                testRenderer.update(<TestComponent executor={nextExecutor} resultRef={result} />);
+            });
+        },
+        result,
+    };
+}

package/src/useSignAndSendTransaction.ts

@@ -0,0 +1,168 @@
+import {
+    SolanaSignAndSendTransaction,
+    SolanaSignAndSendTransactionFeature,
+    SolanaSignAndSendTransactionInput,
+    SolanaSignAndSendTransactionOutput,
+} from '@solana/wallet-standard-features';
+import {
+    WALLET_STANDARD_ERROR__FEATURES__WALLET_ACCOUNT_CHAIN_UNSUPPORTED,
+    WalletStandardError,
+} from '@wallet-standard/errors';
+import { getWalletAccountFeature, type UiWalletAccount } from '@wallet-standard/ui';
+import { getWalletAccountForUiWalletAccount_DO_NOT_USE_OR_YOU_WILL_BE_FIRED } from '@wallet-standard/ui-registry';
+import { useCallback } from 'react';
+
+import { OnlySolanaChains } from './chain';
+
+type Input = Readonly<
+    Omit<SolanaSignAndSendTransactionInput, 'account' | 'chain' | 'options'> & {
+        options?: Readonly<{
+            minContextSlot?: bigint;
+        }>;
+    }
+>;
+type Output = SolanaSignAndSendTransactionOutput;
+
+/**
+ * Use this to get a function capable of signing a serialized transaction with the private key of a
+ * {@link UiWalletAccount} and sending it to the network for processing.
+ *
+ * @param chain The identifier of the chain the transaction is destined for. Wallets may use this to
+ * simulate the transaction for the user.
+ *
+ * @example
+ * ```tsx
+ * import { getBase58Decoder } from '@solana/codecs-strings';
+ * import { useSignAndSendTransaction } from '@solana/react';
+ *
+ * function SignAndSendTransactionButton({ account, transactionBytes }) {
+ *     const signAndSendTransaction = useSignAndSendTransaction(account, 'solana:devnet');
+ *     return (
+ *         <button
+ *             onClick={async () => {
+ *                 try {
+ *                     const { signature } = await signAndSendTransaction({
+ *                         transaction: transactionBytes,
+ *                     });
+ *                     const base58TransactionSignature = getBase58Decoder().decode(signature);
+ *                     window.alert(
+ *                         `View transaction: https://explorer.solana.com/tx/${base58TransactionSignature}?cluster=devnet`,
+ *                     );
+ *                 } catch (e) {
+ *                     console.error('Failed to send transaction', e);
+ *                 }
+ *             }}
+ *         >
+ *             Sign and Send Transaction
+ *         </button>
+ *     );
+ * }
+ * ```
+ */
+export function useSignAndSendTransaction<TWalletAccount extends UiWalletAccount>(
+    uiWalletAccount: TWalletAccount,
+    chain: OnlySolanaChains<TWalletAccount['chains']>,
+): (input: Input) => Promise<Output>;
+export function useSignAndSendTransaction<TWalletAccount extends UiWalletAccount>(
+    uiWalletAccount: TWalletAccount,
+    chain: `solana:${string}`,
+): (input: Input) => Promise<Output>;
+export function useSignAndSendTransaction<TWalletAccount extends UiWalletAccount>(
+    uiWalletAccount: TWalletAccount,
+    chain: `solana:${string}`,
+): (input: Input) => Promise<Output> {
+    const signAndSendTransactions = useSignAndSendTransactions(uiWalletAccount, chain);
+    return useCallback(
+        async input => {
+            const [result] = await signAndSendTransactions(input);
+            return result;
+        },
+        [signAndSendTransactions],
+    );
+}
+
+/**
+ * Use this to get a function capable of signing one or more serialized transactions with the private
+ * key of a {@link UiWalletAccount} and sending them to the network for processing. This supports
+ * wallets that allow batching multiple transactions in a single request.
+ *
+ * @example
+ * ```tsx
+ * import { useSignAndSendTransactions } from '@solana/react';
+ *
+ * function SignAndSendTransactionsButton({ account, transactionBytes1, transactionBytes2 }) {
+ *     const signAndSendTransactions = useSignAndSendTransactions(account, 'solana:devnet');
+ *     return (
+ *         <button
+ *             onClick={async () => {
+ *                 try {
+ *                     const [first, second] = await signAndSendTransactions(
+ *                         { transaction: transactionBytes1 },
+ *                         { transaction: transactionBytes2 },
+ *                     );
+ *                     window.alert(
+ *                         `Transaction signatures: ${first.signature.toString()}, ${second.signature.toString()}`,
+ *                     );
+ *                 } catch (e) {
+ *                     console.error('Failed to send transactions', e);
+ *                 }
+ *             }}
+ *         >
+ *             Sign and Send Transactions
+ *         </button>
+ *     );
+ * }
+ * ```
+ */
+export function useSignAndSendTransactions<TWalletAccount extends UiWalletAccount>(
+    uiWalletAccount: TWalletAccount,
+    chain: OnlySolanaChains<TWalletAccount['chains']>,
+): (...inputs: readonly Input[]) => Promise<readonly Output[]>;
+export function useSignAndSendTransactions<TWalletAccount extends UiWalletAccount>(
+    uiWalletAccount: TWalletAccount,
+    chain: `solana:${string}`,
+): (...inputs: readonly Input[]) => Promise<readonly Output[]>;
+export function useSignAndSendTransactions<TWalletAccount extends UiWalletAccount>(
+    uiWalletAccount: TWalletAccount,
+    chain: `solana:${string}`,
+): (...inputs: readonly Input[]) => Promise<readonly Output[]> {
+    if (!uiWalletAccount.chains.includes(chain)) {
+        throw new WalletStandardError(WALLET_STANDARD_ERROR__FEATURES__WALLET_ACCOUNT_CHAIN_UNSUPPORTED, {
+            address: uiWalletAccount.address,
+            chain,
+            featureName: SolanaSignAndSendTransaction,
+            supportedChains: [...uiWalletAccount.chains],
+            supportedFeatures: [...uiWalletAccount.features],
+        });
+    }
+    const signAndSendTransactionFeature = getWalletAccountFeature(
+        uiWalletAccount,
+        SolanaSignAndSendTransaction,
+    ) as SolanaSignAndSendTransactionFeature[typeof SolanaSignAndSendTransaction];
+    const account = getWalletAccountForUiWalletAccount_DO_NOT_USE_OR_YOU_WILL_BE_FIRED(uiWalletAccount);
+    return useCallback(
+        async (...inputs) => {
+            if (inputs.length === 0) {
+                return [];
+            }
+            const inputsWithChainAndAccount = inputs.map(({ options, ...rest }) => {
+                const minContextSlot = options?.minContextSlot;
+                return {
+                    ...rest,
+                    account,
+                    chain,
+                    ...(minContextSlot != null
+                        ? {
+                              options: {
+                                  minContextSlot: Number(minContextSlot),
+                              },
+                          }
+                        : null),
+                };
+            });
+            const results = await signAndSendTransactionFeature.signAndSendTransaction(...inputsWithChainAndAccount);
+            return results;
+        },
+        [account, chain, signAndSendTransactionFeature],
+    );
+}

package/src/useSignIn.ts

@@ -0,0 +1,124 @@
+import { Address } from '@solana/addresses';
+import {
+    SolanaSignIn,
+    SolanaSignInFeature,
+    SolanaSignInInput,
+    SolanaSignInOutput,
+} from '@solana/wallet-standard-features';
+import {
+    getWalletAccountFeature,
+    getWalletFeature,
+    UiWallet,
+    UiWalletAccount,
+    UiWalletHandle,
+} from '@wallet-standard/ui';
+import {
+    getOrCreateUiWalletAccountForStandardWalletAccount_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
+    getWalletAccountForUiWalletAccount_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
+    getWalletForHandle_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
+} from '@wallet-standard/ui-registry';
+import { useCallback } from 'react';
+
+type Input = SolanaSignInInput;
+type Output = Omit<SolanaSignInOutput, 'account' | 'signatureType'> &
+    Readonly<{
+        account: UiWalletAccount;
+    }>;
+
+/**
+ * Use the ['Sign In With Solana'](https://phantom.app/learn/developers/sign-in-with-solana) feature
+ * of a {@link UiWallet} or {@link UiWalletAccount}.
+ *
+ * @returns A function that you can call to sign in with the particular wallet and address specified
+ * by the supplied {@link UiWalletAccount}
+ *
+ * @example
+ * ```tsx
+ * import { useSignIn } from '@solana/react';
+ *
+ * function SignInButton({ wallet }) {
+ *     const csrfToken = useCsrfToken();
+ *     const signIn = useSignIn(wallet);
+ *     return (
+ *         <button
+ *             onClick={async () => {
+ *                 try {
+ *                     const { account, signedMessage, signature } = await signIn({
+ *                         requestId: csrfToken,
+ *                     });
+ *                     // Authenticate the user, typically on the server, by verifying that
+ *                     // `signedMessage` was signed by the person who holds the private key for
+ *                     // `account.publicKey`.
+ *                     //
+ *                     // Authorize the user, also on the server, by decoding `signedMessage` as the
+ *                     // text of a Sign In With Solana message, verifying that it was not modified
+ *                     // from the values your application expects, and that its content is sufficient
+ *                     // to grant them access.
+ *                     window.alert(`You are now signed in with the address ${account.address}`);
+ *                 } catch (e) {
+ *                     console.error('Failed to sign in', e);
+ *                 }
+ *             }}
+ *         >
+ *             Sign In
+ *         </button>
+ *     );
+ * }
+ * ```
+ */
+export function useSignIn(uiWalletAccount: UiWalletAccount): (input?: Omit<Input, 'address'>) => Promise<Output>;
+/**
+ * @returns A function that you can call to sign in with the supplied {@link UiWallet}
+ */
+export function useSignIn(uiWallet: UiWallet): (input?: Input) => Promise<Output>;
+export function useSignIn(uiWalletHandle: UiWalletHandle): (input?: Input) => Promise<Output> {
+    const signIns = useSignIns(uiWalletHandle);
+    return useCallback(
+        async input => {
+            const [result] = await signIns(input);
+            return result;
+        },
+        [signIns],
+    );
+}
+
+function useSignIns(
+    uiWalletHandle: UiWalletHandle,
+): (...inputs: readonly (Input | undefined)[]) => Promise<readonly Output[]> {
+    let signMessageFeature: SolanaSignInFeature[typeof SolanaSignIn];
+    if ('address' in uiWalletHandle && typeof uiWalletHandle.address === 'string') {
+        getWalletAccountForUiWalletAccount_DO_NOT_USE_OR_YOU_WILL_BE_FIRED(uiWalletHandle as UiWalletAccount);
+        signMessageFeature = getWalletAccountFeature(
+            uiWalletHandle as UiWalletAccount,
+            SolanaSignIn,
+        ) as SolanaSignInFeature[typeof SolanaSignIn];
+    } else {
+        signMessageFeature = getWalletFeature(uiWalletHandle, SolanaSignIn) as SolanaSignInFeature[typeof SolanaSignIn];
+    }
+    const wallet = getWalletForHandle_DO_NOT_USE_OR_YOU_WILL_BE_FIRED(uiWalletHandle);
+    return useCallback(
+        async (...inputs) => {
+            const inputsWithAddressAndChainId = inputs.map(input => ({
+                ...input,
+                // Prioritize the `UiWalletAccount` address if it exists.
+                ...('address' in uiWalletHandle ? { address: uiWalletHandle.address as Address } : null),
+            }));
+            const results = await signMessageFeature.signIn(...inputsWithAddressAndChainId);
+            const resultsWithoutSignatureType = results.map(
+                ({
+                    account,
+                    signatureType: _, // Solana signatures are always of type `ed25519` so drop this property.
+                    ...rest
+                }) => ({
+                    ...rest,
+                    account: getOrCreateUiWalletAccountForStandardWalletAccount_DO_NOT_USE_OR_YOU_WILL_BE_FIRED(
+                        wallet,
+                        account,
+                    ),
+                }),
+            );
+            return resultsWithoutSignatureType;
+        },
+        [signMessageFeature, uiWalletHandle, wallet],
+    );
+}

package/src/useSignMessage.ts

@@ -0,0 +1,78 @@
+import {
+    SolanaSignMessage,
+    SolanaSignMessageFeature,
+    SolanaSignMessageInput,
+    SolanaSignMessageOutput,
+} from '@solana/wallet-standard-features';
+import { getWalletAccountFeature, UiWalletAccount } from '@wallet-standard/ui';
+import { getWalletAccountForUiWalletAccount_DO_NOT_USE_OR_YOU_WILL_BE_FIRED } from '@wallet-standard/ui-registry';
+import { useCallback } from 'react';
+
+type Input = Omit<SolanaSignMessageInput, 'account'>;
+type Output = Omit<SolanaSignMessageOutput, 'signatureType'>;
+
+/**
+ * Use this to get a function capable of signing a message with the private key of a
+ * {@link UiWalletAccount}
+ *
+ * @example
+ * ```tsx
+ * import { useSignMessage } from '@solana/react';
+ *
+ * function SignMessageButton({ account, messageBytes }) {
+ *     const signMessage = useSignMessage(account);
+ *     return (
+ *         <button
+ *             onClick={async () => {
+ *                 try {
+ *                     const { signature } = await signMessage({
+ *                         message: messageBytes,
+ *                     });
+ *                     window.alert(`Signature bytes: ${signature.toString()}`);
+ *                 } catch (e) {
+ *                     console.error('Failed to sign message', e);
+ *                 }
+ *             }}
+ *         >
+ *             Sign Message
+ *         </button>
+ *     );
+ * }
+ * ```
+ */
+export function useSignMessage<TWalletAccount extends UiWalletAccount>(
+    ...config: Parameters<typeof useSignMessages<TWalletAccount>>
+): (input: Input) => Promise<Output> {
+    const signMessages = useSignMessages(...config);
+    return useCallback(
+        async input => {
+            const [result] = await signMessages(input);
+            return result;
+        },
+        [signMessages],
+    );
+}
+
+function useSignMessages<TWalletAccount extends UiWalletAccount>(
+    uiWalletAccount: TWalletAccount,
+): (...inputs: readonly Input[]) => Promise<readonly Output[]> {
+    const signMessageFeature = getWalletAccountFeature(
+        uiWalletAccount,
+        SolanaSignMessage,
+    ) as SolanaSignMessageFeature[typeof SolanaSignMessage];
+    const account = getWalletAccountForUiWalletAccount_DO_NOT_USE_OR_YOU_WILL_BE_FIRED(uiWalletAccount);
+    return useCallback(
+        async (...inputs) => {
+            const inputsWithAccount = inputs.map(input => ({ ...input, account }));
+            const results = await signMessageFeature.signMessage(...inputsWithAccount);
+            const resultsWithoutSignatureType = results.map(
+                ({
+                    signatureType: _, // Solana signatures are always of type `ed25519` so drop this property.
+                    ...rest
+                }) => rest,
+            );
+            return resultsWithoutSignatureType;
+        },
+        [signMessageFeature, account],
+    );
+}

package/src/useSignTransaction.ts

@@ -0,0 +1,164 @@
+import {
+    SolanaSignTransaction,
+    SolanaSignTransactionFeature,
+    SolanaSignTransactionInput,
+    SolanaSignTransactionOutput,
+} from '@solana/wallet-standard-features';
+import {
+    WALLET_STANDARD_ERROR__FEATURES__WALLET_ACCOUNT_CHAIN_UNSUPPORTED,
+    WalletStandardError,
+} from '@wallet-standard/errors';
+import { getWalletAccountFeature, UiWalletAccount } from '@wallet-standard/ui';
+import { getWalletAccountForUiWalletAccount_DO_NOT_USE_OR_YOU_WILL_BE_FIRED } from '@wallet-standard/ui-registry';
+import { useCallback } from 'react';
+
+import { OnlySolanaChains } from './chain';
+
+type Input = Readonly<
+    Omit<SolanaSignTransactionInput, 'account' | 'chain' | 'options'> & {
+        options?: Readonly<{
+            minContextSlot?: bigint;
+        }>;
+    }
+>;
+type Output = SolanaSignTransactionOutput;
+
+/**
+ * Use this to get a function capable of signing a serialized transaction with the private key of a
+ * {@link UiWalletAccount}
+ *
+ * @param chain The identifier of the chain the transaction is destined for. Wallets may use this to
+ * simulate the transaction for the user.
+ *
+ * @example
+ * ```tsx
+ * import { useSignTransaction } from '@solana/react';
+ *
+ * function SignTransactionButton({ account, transactionBytes }) {
+ *     const signTransaction = useSignTransaction(account, 'solana:devnet');
+ *     return (
+ *         <button
+ *             onClick={async () => {
+ *                 try {
+ *                     const { signedTransaction } = await signTransaction({
+ *                         transaction: transactionBytes,
+ *                     });
+ *                     window.alert(`Signed transaction bytes: ${signedTransaction.toString()}`);
+ *                 } catch (e) {
+ *                     console.error('Failed to sign transaction', e);
+ *                 }
+ *             }}
+ *         >
+ *             Sign Transaction
+ *         </button>
+ *     );
+ * }
+ * ```
+ */
+export function useSignTransaction<TWalletAccount extends UiWalletAccount>(
+    uiWalletAccount: TWalletAccount,
+    chain: OnlySolanaChains<TWalletAccount['chains']>,
+): (input: Input) => Promise<Output>;
+export function useSignTransaction<TWalletAccount extends UiWalletAccount>(
+    uiWalletAccount: TWalletAccount,
+    chain: `solana:${string}`,
+): (input: Input) => Promise<Output>;
+export function useSignTransaction<TWalletAccount extends UiWalletAccount>(
+    uiWalletAccount: TWalletAccount,
+    chain: `solana:${string}`,
+): (input: Input) => Promise<Output> {
+    const signTransactions = useSignTransactions(uiWalletAccount, chain);
+    return useCallback(
+        async input => {
+            const [result] = await signTransactions(input);
+            return result;
+        },
+        [signTransactions],
+    );
+}
+
+/**
+ * Use this to get a function capable of signing one or more serialized transactions with the private
+ * key of a {@link UiWalletAccount}. This supports batching multiple transactions in a single wallet
+ * prompt when the wallet implementation allows it.
+ *
+ * @example
+ * ```tsx
+ * import { useSignTransactions } from '@solana/react';
+ *
+ * function SignTransactionsButton({ account, transactionBytes1, transactionBytes2 }) {
+ *     const signTransactions = useSignTransactions(account, 'solana:devnet');
+ *     return (
+ *         <button
+ *             onClick={async () => {
+ *                 try {
+ *                     const [first, second] = await signTransactions(
+ *                         { transaction: transactionBytes1 },
+ *                         { transaction: transactionBytes2 },
+ *                     );
+ *                     window.alert(
+ *                         `First transaction bytes: ${first.signedTransaction.toString()}, second transaction bytes: ${second.signedTransaction.toString()}`,
+ *                     );
+ *                 } catch (e) {
+ *                     console.error('Failed to sign transactions', e);
+ *                 }
+ *             }}
+ *         >
+ *             Sign Transactions
+ *         </button>
+ *     );
+ * }
+ * ```
+ */
+export function useSignTransactions<TWalletAccount extends UiWalletAccount>(
+    uiWalletAccount: TWalletAccount,
+    chain: OnlySolanaChains<TWalletAccount['chains']>,
+): (...inputs: readonly Input[]) => Promise<readonly Output[]>;
+export function useSignTransactions<TWalletAccount extends UiWalletAccount>(
+    uiWalletAccount: TWalletAccount,
+    chain: `solana:${string}`,
+): (...inputs: readonly Input[]) => Promise<readonly Output[]>;
+export function useSignTransactions<TWalletAccount extends UiWalletAccount>(
+    uiWalletAccount: TWalletAccount,
+    chain: `solana:${string}`,
+): (...inputs: readonly Input[]) => Promise<readonly Output[]> {
+    if (!uiWalletAccount.chains.includes(chain)) {
+        throw new WalletStandardError(WALLET_STANDARD_ERROR__FEATURES__WALLET_ACCOUNT_CHAIN_UNSUPPORTED, {
+            address: uiWalletAccount.address,
+            chain,
+            featureName: SolanaSignTransaction,
+            supportedChains: [...uiWalletAccount.chains],
+            supportedFeatures: [...uiWalletAccount.features],
+        });
+    }
+    const signTransactionFeature = getWalletAccountFeature(
+        uiWalletAccount,
+        SolanaSignTransaction,
+    ) as SolanaSignTransactionFeature[typeof SolanaSignTransaction];
+    const account = getWalletAccountForUiWalletAccount_DO_NOT_USE_OR_YOU_WILL_BE_FIRED(uiWalletAccount);
+    return useCallback(
+        async (...inputs) => {
+            if (inputs.length === 0) {
+                return [];
+            }
+            const inputsWithAccountAndChain = inputs.map(({ options, ...rest }) => {
+                const minContextSlot = options?.minContextSlot;
+                return {
+                    ...rest,
+                    account,
+                    chain,
+                    ...(minContextSlot != null
+                        ? {
+                              options: {
+                                  minContextSlot: Number(minContextSlot),
+                              },
+                          }
+                        : null),
+                };
+            });
+            const results = await signTransactionFeature.signTransaction(...inputsWithAccountAndChain);
+            return results;
+        },
+        [signTransactionFeature, account, chain],
+    );
+}

package/src/useWalletAccountMessageSigner.ts

@@ -0,0 +1,98 @@
+import { Address, address } from '@solana/addresses';
+import { bytesEqual } from '@solana/codecs-core';
+import { SOLANA_ERROR__SIGNER__WALLET_MULTISIGN_UNIMPLEMENTED, SolanaError } from '@solana/errors';
+import { SignatureBytes } from '@solana/keys';
+import { getAbortablePromise } from '@solana/promises';
+import { MessageModifyingSigner, SignableMessage } from '@solana/signers';
+import type { UiWalletAccount } from '@wallet-standard/ui';
+import { useMemo } from 'react';
+
+import { useSignMessage } from './useSignMessage';
+
+/**
+ * Use this to get a {@link MessageSigner} capable of signing messages with the private key of a
+ * {@link UiWalletAccount}
+ *
+ * @returns A {@link MessageModifyingSigner}. This is a conservative assumption based on the fact
+ * that your application can not control whether or not the wallet will modify the message before
+ * signing it. Otherwise this method could more specifically return a {@link MessageSigner} or a
+ * {@link MessagePartialSigner}.
+ *
+ * @example
+ * ```tsx
+ * import { useWalletAccountMessageSigner } from '@solana/react';
+ * import { createSignableMessage } from '@solana/signers';
+ *
+ * function SignMessageButton({ account, text }) {
+ *     const messageSigner = useWalletAccountMessageSigner(account);
+ *     return (
+ *         <button
+ *             onClick={async () => {
+ *                 try {
+ *                     const signableMessage = createSignableMessage(text);
+ *                     const [signedMessage] = await messageSigner.modifyAndSignMessages([signableMessage]);
+ *                     const messageWasModified = signableMessage.content !== signedMessage.content;
+ *                     const signatureBytes = signedMessage.signatures[messageSigner.address];
+ *                     window.alert(
+ *                         `Signature bytes: ${signatureBytes.toString()}${
+ *                             messageWasModified ? ' (message was modified)' : ''
+ *                         }`,
+ *                     );
+ *                 } catch (e) {
+ *                     console.error('Failed to sign message', e);
+ *                 }
+ *             }}
+ *         >
+ *             Sign Message: {text}
+ *         </button>
+ *     );
+ * }
+ * ```
+ */
+export function useWalletAccountMessageSigner<TWalletAccount extends UiWalletAccount>(
+    uiWalletAccount: TWalletAccount,
+): MessageModifyingSigner<TWalletAccount['address']> {
+    const signMessage = useSignMessage(uiWalletAccount);
+    return useMemo(
+        () => ({
+            address: address(uiWalletAccount.address),
+            async modifyAndSignMessages(messages, config) {
+                config?.abortSignal?.throwIfAborted();
+                if (messages.length > 1) {
+                    throw new SolanaError(SOLANA_ERROR__SIGNER__WALLET_MULTISIGN_UNIMPLEMENTED);
+                }
+                if (messages.length === 0) {
+                    return messages;
+                }
+                const { content: originalMessage, signatures: originalSignatureMap } = messages[0];
+                const input = {
+                    message: originalMessage,
+                };
+                const { signedMessage, signature } = await getAbortablePromise(signMessage(input), config?.abortSignal);
+                const messageWasModified =
+                    originalMessage.length !== signedMessage.length ||
+                    originalMessage.some((originalByte, ii) => originalByte !== signedMessage[ii]);
+                const originalSignature = originalSignatureMap[uiWalletAccount.address as Address<string>] as
+                    | SignatureBytes
+                    | undefined;
+                const signatureIsNew = originalSignature === undefined || !bytesEqual(originalSignature, signature);
+                if (!signatureIsNew && !messageWasModified) {
+                    // We already had this exact signature, and the message wasn't modified.
+                    // Don't replace the existing message object.
+                    return messages;
+                }
+                const nextSignatureMap = messageWasModified
+                    ? { [uiWalletAccount.address]: signature }
+                    : { ...originalSignatureMap, [uiWalletAccount.address]: signature };
+                const outputMessages = Object.freeze([
+                    Object.freeze({
+                        content: signedMessage,
+                        signatures: Object.freeze(nextSignatureMap),
+                    }) as SignableMessage,
+                ]);
+                return outputMessages;
+            },
+        }),
+        [uiWalletAccount, signMessage],
+    );
+}

package/src/useWalletAccountTransactionSendingSigner.ts

@@ -0,0 +1,101 @@
+import { address } from '@solana/addresses';
+import { SOLANA_ERROR__SIGNER__WALLET_MULTISIGN_UNIMPLEMENTED, SolanaError } from '@solana/errors';
+import { SignatureBytes } from '@solana/keys';
+import { getAbortablePromise } from '@solana/promises';
+import { TransactionSendingSigner } from '@solana/signers';
+import { getTransactionEncoder } from '@solana/transactions';
+import { UiWalletAccount } from '@wallet-standard/ui';
+import { useMemo, useRef } from 'react';
+
+import { OnlySolanaChains } from './chain';
+import { useSignAndSendTransaction } from './useSignAndSendTransaction';
+
+/**
+ * Use this to get a {@link TransactionSendingSigner} capable of signing a serialized transaction
+ * with the private key of a {@link UiWalletAccount} and sending it to the network for processing.
+ *
+ * @param chain The identifier of the chain the transaction is destined for. Wallets may use this to
+ * simulate the transaction for the user.
+ *
+ * @example
+ * ```tsx
+ * import { useWalletAccountTransactionSendingSigner } from '@solana/react';
+ * import {
+ *     appendTransactionMessageInstruction,
+ *     createSolanaRpc,
+ *     getBase58Decoder,
+ *     pipe,
+ *     setTransactionMessageFeePayerSigner,
+ *     setTransactionMessageLifetimeUsingBlockhash,
+ *     signAndSendTransactionMessageWithSigners,
+ * } from '@solana/kit';
+ *
+ * function RecordMemoButton({ account, rpc, text }) {
+ *     const signer = useWalletAccountTransactionSendingSigner(account, 'solana:devnet');
+ *     return (
+ *         <button
+ *             onClick={async () => {
+ *                 try {
+ *                     const { value: latestBlockhash } = await createSolanaRpc('https://api.devnet.solana.com')
+ *                         .getLatestBlockhash()
+ *                         .send();
+ *                     const message = pipe(
+ *                         createTransactionMessage({ version: 'legacy' }),
+ *                         m => setTransactionMessageFeePayerSigner(signer, m),
+ *                         m => setTransactionMessageLifetimeUsingBlockhash(latestBlockhash, m),
+ *                         m => appendTransactionMessageInstruction(getAddMemoInstruction({ memo: text }), m),
+ *                     );
+ *                     const signatureBytes = await signAndSendTransactionMessageWithSigners(message);
+ *                     const base58Signature = getBase58Decoder().decode(signature);
+ *                     window.alert(`View transaction: https://explorer.solana.com/tx/${base58Signature}?cluster=devnet`);
+ *                 } catch (e) {
+ *                     console.error('Failed to record memo', e);
+ *                 }
+ *             }}
+ *         >
+ *             Record Memo
+ *         </button>
+ *     );
+ * }
+ * ```
+ */
+export function useWalletAccountTransactionSendingSigner<TWalletAccount extends UiWalletAccount>(
+    uiWalletAccount: TWalletAccount,
+    chain: OnlySolanaChains<TWalletAccount['chains']>,
+): TransactionSendingSigner<TWalletAccount['address']>;
+export function useWalletAccountTransactionSendingSigner<TWalletAccount extends UiWalletAccount>(
+    uiWalletAccount: TWalletAccount,
+    chain: `solana:${string}`,
+): TransactionSendingSigner<TWalletAccount['address']>;
+export function useWalletAccountTransactionSendingSigner<TWalletAccount extends UiWalletAccount>(
+    uiWalletAccount: TWalletAccount,
+    chain: `solana:${string}`,
+): TransactionSendingSigner<TWalletAccount['address']> {
+    const encoderRef = useRef<ReturnType<typeof getTransactionEncoder> | null>(null);
+    const signAndSendTransaction = useSignAndSendTransaction(uiWalletAccount, chain);
+    return useMemo(
+        () => ({
+            address: address(uiWalletAccount.address),
+            async signAndSendTransactions(transactions, config = {}) {
+                const { abortSignal, ...options } = config;
+                abortSignal?.throwIfAborted();
+                const transactionEncoder = (encoderRef.current ||= getTransactionEncoder());
+                if (transactions.length > 1) {
+                    throw new SolanaError(SOLANA_ERROR__SIGNER__WALLET_MULTISIGN_UNIMPLEMENTED);
+                }
+                if (transactions.length === 0) {
+                    return [];
+                }
+                const [transaction] = transactions;
+                const wireTransactionBytes = transactionEncoder.encode(transaction);
+                const inputWithOptions = {
+                    ...options,
+                    transaction: wireTransactionBytes as Uint8Array,
+                };
+                const { signature } = await getAbortablePromise(signAndSendTransaction(inputWithOptions), abortSignal);
+                return Object.freeze([signature as SignatureBytes]);
+            },
+        }),
+        [signAndSendTransaction, uiWalletAccount.address],
+    );
+}

package/src/useWalletAccountTransactionSigner.ts

@@ -0,0 +1,146 @@
+import { address } from '@solana/addresses';
+import { bytesEqual } from '@solana/codecs-core';
+import { SOLANA_ERROR__SIGNER__WALLET_MULTISIGN_UNIMPLEMENTED, SolanaError } from '@solana/errors';
+import { getAbortablePromise } from '@solana/promises';
+import { TransactionModifyingSigner } from '@solana/signers';
+import { getCompiledTransactionMessageDecoder } from '@solana/transaction-messages';
+import {
+    assertIsTransactionWithinSizeLimit,
+    getTransactionCodec,
+    getTransactionLifetimeConstraintFromCompiledTransactionMessage,
+    Transaction,
+    TransactionWithinSizeLimit,
+    TransactionWithLifetime,
+} from '@solana/transactions';
+import { UiWalletAccount } from '@wallet-standard/ui';
+import { useMemo, useRef } from 'react';
+
+import { OnlySolanaChains } from './chain';
+import { useSignTransaction } from './useSignTransaction';
+
+/**
+ * Use this to get a {@link TransactionSigner} capable of signing serialized transactions with the
+ * private key of a {@link UiWalletAccount}
+ *
+ * @returns A {@link TransactionModifyingSigner}. This is a conservative assumption based on the
+ * fact that your application can not control whether or not the wallet will modify the transaction
+ * before signing it (eg. to add guard instructions, or a priority fee budget). Otherwise this
+ * method could more specifically return a {@link TransactionSigner} or a
+ * {@link TransactionPartialSigner}.
+ *
+ * @example
+ * ```tsx
+ * import { useWalletAccountTransactionSigner } from '@solana/react';
+ *
+ * function SignTransactionButton({ account, transaction }) {
+ *     const transactionSigner = useWalletAccountTransactionSigner(account, 'solana:devnet');
+ *     return (
+ *         <button
+ *             onClick={async () => {
+ *                 try {
+ *                     const [{ signatures }] = await transactionSigner.modifyAndSignTransactions([transaction]);
+ *                     const signatureBytes = signatures[transactionSigner.address];
+ *                     window.alert(`Signature bytes: ${signatureBytes.toString()}`);
+ *                 } catch (e) {
+ *                     console.error('Failed to sign transaction', e);
+ *                 }
+ *             }}
+ *         >
+ *             Sign Transaction
+ *         </button>
+ *     );
+ * }
+ * ```
+ */
+export function useWalletAccountTransactionSigner<TWalletAccount extends UiWalletAccount>(
+    uiWalletAccount: TWalletAccount,
+    chain: OnlySolanaChains<TWalletAccount['chains']>,
+): TransactionModifyingSigner<TWalletAccount['address']>;
+export function useWalletAccountTransactionSigner<TWalletAccount extends UiWalletAccount>(
+    uiWalletAccount: TWalletAccount,
+    chain: `solana:${string}`,
+): TransactionModifyingSigner<TWalletAccount['address']>;
+export function useWalletAccountTransactionSigner<TWalletAccount extends UiWalletAccount>(
+    uiWalletAccount: TWalletAccount,
+    chain: `solana:${string}`,
+): TransactionModifyingSigner<TWalletAccount['address']> {
+    const encoderRef = useRef<ReturnType<typeof getTransactionCodec> | null>(null);
+    const signTransaction = useSignTransaction(uiWalletAccount, chain);
+    return useMemo(
+        () => ({
+            address: address(uiWalletAccount.address),
+            async modifyAndSignTransactions(transactions, config = {}) {
+                const { abortSignal, ...options } = config;
+                abortSignal?.throwIfAborted();
+                const transactionCodec = (encoderRef.current ||= getTransactionCodec());
+                if (transactions.length > 1) {
+                    throw new SolanaError(SOLANA_ERROR__SIGNER__WALLET_MULTISIGN_UNIMPLEMENTED);
+                }
+                if (transactions.length === 0) {
+                    return transactions as readonly (Transaction &
+                        TransactionWithinSizeLimit &
+                        TransactionWithLifetime)[];
+                }
+                const [transaction] = transactions;
+                const wireTransactionBytes = transactionCodec.encode(transaction);
+                const inputWithOptions = {
+                    ...options,
+                    transaction: wireTransactionBytes as Uint8Array,
+                };
+                const { signedTransaction } = await getAbortablePromise(signTransaction(inputWithOptions), abortSignal);
+                const decodedSignedTransaction = transactionCodec.decode(
+                    signedTransaction,
+                ) as (typeof transactions)[number];
+
+                assertIsTransactionWithinSizeLimit(decodedSignedTransaction);
+
+                const existingLifetime =
+                    'lifetimeConstraint' in transaction
+                        ? (transaction as TransactionWithLifetime).lifetimeConstraint
+                        : undefined;
+
+                if (existingLifetime) {
+                    if (bytesEqual(decodedSignedTransaction.messageBytes, transaction.messageBytes)) {
+                        // If the transaction has identical bytes, the lifetime won't have changed
+                        return Object.freeze([
+                            {
+                                ...decodedSignedTransaction,
+                                lifetimeConstraint: existingLifetime,
+                            },
+                        ]);
+                    }
+
+                    // If the transaction has changed, check the lifetime constraint field
+                    const compiledTransactionMessage = getCompiledTransactionMessageDecoder().decode(
+                        decodedSignedTransaction.messageBytes,
+                    );
+                    const currentToken =
+                        'blockhash' in existingLifetime ? existingLifetime.blockhash : existingLifetime.nonce;
+
+                    if (compiledTransactionMessage.lifetimeToken === currentToken) {
+                        return Object.freeze([
+                            {
+                                ...decodedSignedTransaction,
+                                lifetimeConstraint: existingLifetime,
+                            },
+                        ]);
+                    }
+                }
+
+                // If we get here then there is no existing lifetime, or the lifetime has changed. We need to attach a new lifetime
+                const compiledTransactionMessage = getCompiledTransactionMessageDecoder().decode(
+                    decodedSignedTransaction.messageBytes,
+                );
+                const lifetimeConstraint =
+                    await getTransactionLifetimeConstraintFromCompiledTransactionMessage(compiledTransactionMessage);
+                return Object.freeze([
+                    {
+                        ...decodedSignedTransaction,
+                        lifetimeConstraint,
+                    },
+                ]);
+            },
+        }),
+        [uiWalletAccount.address, signTransaction],
+    );
+}