@solana/react 5.3.0 → 5.4.0-canary-20260108180834

package/README.md

@@ -306,3 +306,179 @@ function SignAndSendTransactionButton({ account, transactionBytes }) {
     );
 }
 ```
+
+### `useSignTransactions(uiWalletAccount, chain)`
+
+Given a `UiWalletAccount` and a chain that begins with `solana:`, this hook returns a function you can call to sign one or more serialized transactions in a single request.
+
+#### Arguments
+
+One or more config objects with the following properties:
+
+- `options`: An object with the following properties:
+    - `minContextSlot`: A slot at which any blockhash/nonce in the transaction is known to exist. This may be used by the signer and/or RPC to determine the validity of the blockhashes/nonces it has observed.
+- `transaction`: A `Uint8Array` of bytes that conforms to the [Solana transaction schema](https://solana.com/docs/core/transactions#transaction)
+
+#### Returns
+
+An array of objects with the following properties:
+
+- `signedTransaction`: A `Uint8Array` of bytes that conforms to the [Solana transaction schema](https://solana.com/docs/core/transactions#transaction)
+
+#### Example
+
+```tsx
+import { useSignTransactions } from '@solana/react';
+
+function SignTransactionsButton({ account, transactionBytes1, transactionBytes2 }) {
+    const signTransactions = useSignTransactions(account, 'solana:devnet');
+    return (
+        <button
+            onClick={async () => {
+                try {
+                    const [{ signedTransaction: first }, { signedTransaction: second }] = await signTransactions(
+                        { transaction: transactionBytes1 },
+                        { transaction: transactionBytes2 },
+                    );
+                    window.alert(`Signed transaction bytes: ${first.toString()} and ${second.toString()}`);
+                } catch (e) {
+                    console.error('Failed to sign transactions', e);
+                }
+            }}
+        >
+            Sign Transactions
+        </button>
+    );
+}
+```
+
+### `useSignAndSendTransactions(uiWalletAccount, chain)`
+
+Given a `UiWalletAccount` and a chain that begins with `solana:`, this hook returns a function you can call to sign and send one or more serialized transactions in a single request.
+
+#### Arguments
+
+One or more config objects with the following properties:
+
+- `options`: An object with the following properties:
+    - `minContextSlot`: A slot at which any blockhash/nonce in the transaction is known to exist. This may be used by the signer and/or RPC to determine the validity of the blockhashes/nonces it has observed.
+- `transaction`: A `Uint8Array` of bytes that conforms to the [Solana transaction schema](https://solana.com/docs/core/transactions#transaction)
+
+#### Returns
+
+An array of objects with the following properties:
+
+- `signature`: A `Uint8Array` of bytes representing the signature of each sent transaction.
+
+#### Example
+
+```tsx
+import { getBase58Decoder } from '@solana/codecs-strings';
+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 },
+                    );
+                    const [firstSignature, secondSignature] = [first.signature, second.signature].map(signature =>
+                        getBase58Decoder().decode(signature),
+                    );
+                    window.alert(
+                        `View transactions: https://explorer.solana.com/tx/${firstSignature}?cluster=devnet and https://explorer.solana.com/tx/${secondSignature}?cluster=devnet`,
+                    );
+                } catch (e) {
+                    console.error('Error returned by signAndSendTransactions', e);
+                }
+            }}
+        >
+            Sign and Send Transactions
+        </button>
+    );
+}
+```
+
+### `useSelectedWalletAccount()`
+
+This hook returns the wallet account that is selected, a function to change the selection, and a list of wallets which pass a filter condition you have provided. This hook must be used in a React Component inside `SelectedWalletAccountContextProvider`.
+
+#### Arguments
+
+This hook doesn't take any arguments.
+
+#### Returns
+
+The function returns an array consisting of the following elements in the order given:
+
+- `SelectedWalletAccount`: This element could be a `UiWalletAccount` or `undefined`, and represents the selected wallet account.
+- `SetSelectedWalletAccount`: A setter function to set the SelectedWalletAccount state. It takes an argument which could be a callback function `(prevState)=>newState` or `newState`.
+- `filteredWallets`: List of filtered wallets using the function provided as `filterWallet` function in `SelectedWalletAccountContextProvider`
+
+#### Example
+
+```tsx
+import React from 'react';
+import { useSelectedWalletAccount } from '@solana/react';
+
+function WalletInfo() {
+    const [selectedAccount, setSelectedAccount, filteredWallets] = useSelectedWalletAccount();
+
+    if (!selectedAccount) {
+        return <div>No wallet selected</div>;
+    }
+
+    return (
+        <div>
+            <p>Address: {selectedAccount.address}</p>
+
+            <button onClick={() => setSelectedAccount(undefined)}>Clear selection</button>
+
+            <p>Available wallets: {filteredWallets.length}</p>
+        </div>
+    );
+}
+```
+
+### `SelectedWalletAccountContextProvider`
+
+This is a react context provider for `SelectedWalletAccountContext`. It provides its children access to the context by using either `useSelectedWalletAccount()` or `useContext(SelectedWalletAccountContext)`.
+
+#### Props
+
+The provider takes the following props:
+
+- `filterWallet`: a function used to filter supported wallets. For example you might use this to restrict your app to wallets that support `solana:mainnet`.
+- `stateSync`: an object to store the selected wallet, with these properties:
+    - `storeSelectedWallet`: a function used to store a selected wallet account identifier (as a string) into persistent storage. For example this might write to local storage in the browser. The string stored is `${walletName}:${accountAddress}`.
+    - `getSelectedWallet`: a function used to retrieve the persisted wallet account identifier from the persistent storage.
+    - `deleteSelectedWallet`: clears any persisted wallet account identifier from the persistent storage.
+
+#### Example
+
+```tsx
+import React from 'react';
+import { SelectedWalletAccountContextProvider } from '@solana/react';
+import type { UiWallet } from '@wallet-standard/react';
+
+const STORAGE_KEY = 'solana-wallet-account-id';
+
+export function App() {
+    return (
+        <SelectedWalletAccountContextProvider
+            filterWallet={(wallet: UiWallet) => wallet.accounts.length > 0}
+            stateSync={{
+                getSelectedWallet: () => localStorage.getItem(STORAGE_KEY),
+                storeSelectedWallet: accountKey => localStorage.setItem(STORAGE_KEY, accountKey),
+                deleteSelectedWallet: () => localStorage.removeItem(STORAGE_KEY),
+            }}
+        >
+            <WalletInfo />
+        </SelectedWalletAccountContextProvider>
+    );
+}
+```

package/dist/index.browser.cjs

@@ -4,17 +4,22 @@ var walletStandardFeatures = require('@solana/wallet-standard-features');
 var errors = require('@wallet-standard/errors');
 var ui = require('@wallet-standard/ui');
 var uiRegistry = require('@wallet-standard/ui-registry');
-var react = require('react');
+var React2 = require('react');
 var addresses = require('@solana/addresses');
 var errors$1 = require('@solana/errors');
 var promises = require('@solana/promises');
 var transactionMessages = require('@solana/transaction-messages');
 var transactions = require('@solana/transactions');
+var react = require('@wallet-standard/react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React2__default = /*#__PURE__*/_interopDefault(React2);
 
 // src/useSignAndSendTransaction.ts
 function useSignAndSendTransaction(uiWalletAccount, chain) {
   const signAndSendTransactions = useSignAndSendTransactions(uiWalletAccount, chain);
-  return react.useCallback(
+  return React2.useCallback(
     async (input) => {
       const [result] = await signAndSendTransactions(input);
       return result;
@@ -37,7 +42,7 @@ function useSignAndSendTransactions(uiWalletAccount, chain) {
     walletStandardFeatures.SolanaSignAndSendTransaction
   );
   const account = uiRegistry.getWalletAccountForUiWalletAccount_DO_NOT_USE_OR_YOU_WILL_BE_FIRED(uiWalletAccount);
-  return react.useCallback(
+  return React2.useCallback(
     async (...inputs) => {
       const inputsWithChainAndAccount = inputs.map(({ options, ...rest }) => {
         const minContextSlot = options?.minContextSlot;
@@ -60,7 +65,7 @@ function useSignAndSendTransactions(uiWalletAccount, chain) {
 }
 function useSignIn(uiWalletHandle) {
   const signIns = useSignIns(uiWalletHandle);
-  return react.useCallback(
+  return React2.useCallback(
     async (input) => {
       const [result] = await signIns(input);
       return result;
@@ -80,7 +85,7 @@ function useSignIns(uiWalletHandle) {
     signMessageFeature = ui.getWalletFeature(uiWalletHandle, walletStandardFeatures.SolanaSignIn);
   }
   const wallet = uiRegistry.getWalletForHandle_DO_NOT_USE_OR_YOU_WILL_BE_FIRED(uiWalletHandle);
-  return react.useCallback(
+  return React2.useCallback(
     async (...inputs) => {
       const inputsWithAddressAndChainId = inputs.map((input) => ({
         ...input,
@@ -109,7 +114,7 @@ function useSignIns(uiWalletHandle) {
 }
 function useSignMessage(...config) {
   const signMessages = useSignMessages(...config);
-  return react.useCallback(
+  return React2.useCallback(
     async (input) => {
       const [result] = await signMessages(input);
       return result;
@@ -123,7 +128,7 @@ function useSignMessages(uiWalletAccount) {
     walletStandardFeatures.SolanaSignMessage
   );
   const account = uiRegistry.getWalletAccountForUiWalletAccount_DO_NOT_USE_OR_YOU_WILL_BE_FIRED(uiWalletAccount);
-  return react.useCallback(
+  return React2.useCallback(
     async (...inputs) => {
       const inputsWithAccount = inputs.map((input) => ({ ...input, account }));
       const results = await signMessageFeature.signMessage(...inputsWithAccount);
@@ -141,7 +146,7 @@ function useSignMessages(uiWalletAccount) {
 }
 function useSignTransaction(uiWalletAccount, chain) {
   const signTransactions = useSignTransactions(uiWalletAccount, chain);
-  return react.useCallback(
+  return React2.useCallback(
     async (input) => {
       const [result] = await signTransactions(input);
       return result;
@@ -164,7 +169,7 @@ function useSignTransactions(uiWalletAccount, chain) {
     walletStandardFeatures.SolanaSignTransaction
   );
   const account = uiRegistry.getWalletAccountForUiWalletAccount_DO_NOT_USE_OR_YOU_WILL_BE_FIRED(uiWalletAccount);
-  return react.useCallback(
+  return React2.useCallback(
     async (...inputs) => {
       const inputsWithAccountAndChain = inputs.map(({ options, ...rest }) => {
         const minContextSlot = options?.minContextSlot;
@@ -190,7 +195,7 @@ function bytesEqual(bytes1, bytes2) {
 }
 function useWalletAccountMessageSigner(uiWalletAccount) {
   const signMessage = useSignMessage(uiWalletAccount);
-  return react.useMemo(
+  return React2.useMemo(
     () => ({
       address: addresses.address(uiWalletAccount.address),
       async modifyAndSignMessages(messages, config) {
@@ -226,9 +231,9 @@ function useWalletAccountMessageSigner(uiWalletAccount) {
   );
 }
 function useWalletAccountTransactionSigner(uiWalletAccount, chain) {
-  const encoderRef = react.useRef(null);
+  const encoderRef = React2.useRef(null);
   const signTransaction = useSignTransaction(uiWalletAccount, chain);
-  return react.useMemo(
+  return React2.useMemo(
     () => ({
       address: addresses.address(uiWalletAccount.address),
       async modifyAndSignTransactions(transactions$1, config = {}) {
@@ -291,9 +296,9 @@ function useWalletAccountTransactionSigner(uiWalletAccount, chain) {
   );
 }
 function useWalletAccountTransactionSendingSigner(uiWalletAccount, chain) {
-  const encoderRef = react.useRef(null);
+  const encoderRef = React2.useRef(null);
   const signAndSendTransaction = useSignAndSendTransaction(uiWalletAccount, chain);
-  return react.useMemo(
+  return React2.useMemo(
     () => ({
       address: addresses.address(uiWalletAccount.address),
       async signAndSendTransactions(transactions$1, config = {}) {
@@ -319,11 +324,110 @@ function useWalletAccountTransactionSendingSigner(uiWalletAccount, chain) {
     [signAndSendTransaction, uiWalletAccount.address]
   );
 }
+var SelectedWalletAccountContext = /* @__PURE__ */ React2.createContext([
+  void 0,
+  () => {
+  },
+  []
+]);
+function useSelectedWalletAccount() {
+  const ctx = React2__default.default.useContext(SelectedWalletAccountContext);
+  return ctx;
+}
+
+// src/SelectedWalletAccountContextProvider.tsx
+function findSavedWalletAccount(wallets, savedWalletKey) {
+  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;
+      }
+    }
+  }
+}
+function SelectedWalletAccountContextProvider({
+  children,
+  filterWallets,
+  stateSync
+}) {
+  const wallets = react.useWallets();
+  const filteredWallets = React2__default.default.useMemo(() => wallets.filter(filterWallets), [wallets, filterWallets]);
+  const wasSetterInvokedRef = React2__default.default.useRef(false);
+  const [selectedWalletAccount, setSelectedWalletAccountInternal] = React2__default.default.useState(() => {
+    const savedWalletKey = stateSync.getSelectedWallet();
+    const savedWalletAccount = findSavedWalletAccount(filteredWallets, savedWalletKey);
+    return savedWalletAccount;
+  });
+  const setSelectedWalletAccount = React2__default.default.useCallback(
+    (setStateAction) => {
+      wasSetterInvokedRef.current = true;
+      setSelectedWalletAccountInternal((prevSelectedWalletAccount) => {
+        const nextWalletAccount = typeof setStateAction === "function" ? setStateAction(prevSelectedWalletAccount) : setStateAction;
+        return nextWalletAccount;
+      });
+    },
+    [setSelectedWalletAccountInternal]
+  );
+  React2__default.default.useEffect(() => {
+    if (!wasSetterInvokedRef.current) return;
+    const accountKey = selectedWalletAccount ? react.getUiWalletAccountStorageKey(selectedWalletAccount) : void 0;
+    if (accountKey) {
+      stateSync.storeSelectedWallet(accountKey);
+    } else {
+      stateSync.deleteSelectedWallet();
+    }
+  }, [selectedWalletAccount, stateSync]);
+  React2__default.default.useEffect(() => {
+    if (wasSetterInvokedRef.current) return;
+    const savedWalletKey = stateSync.getSelectedWallet();
+    const savedAccount = findSavedWalletAccount(filteredWallets, savedWalletKey);
+    if (savedAccount && selectedWalletAccount && react.uiWalletAccountsAreSame(savedAccount, selectedWalletAccount)) {
+      return;
+    }
+    if (savedAccount) {
+      setSelectedWalletAccountInternal(savedAccount);
+    }
+  }, [filteredWallets, stateSync, selectedWalletAccount]);
+  const walletAccount = React2__default.default.useMemo(() => {
+    if (!selectedWalletAccount) return;
+    for (const wallet of filteredWallets) {
+      for (const account of wallet.accounts) {
+        if (react.uiWalletAccountsAreSame(account, selectedWalletAccount)) {
+          return account;
+        }
+      }
+      if (react.uiWalletAccountBelongsToUiWallet(selectedWalletAccount, wallet) && wallet.accounts[0]) {
+        return wallet.accounts[0];
+      }
+    }
+  }, [selectedWalletAccount, filteredWallets]);
+  React2__default.default.useEffect(() => {
+    if (!selectedWalletAccount) return;
+    if (wasSetterInvokedRef.current) return;
+    if (!walletAccount) {
+      setSelectedWalletAccountInternal(void 0);
+    }
+  }, [selectedWalletAccount, walletAccount]);
+  return /* @__PURE__ */ React2__default.default.createElement(SelectedWalletAccountContext.Provider, { value: [walletAccount, setSelectedWalletAccount, filteredWallets] }, children);
+}
 
+exports.SelectedWalletAccountContext = SelectedWalletAccountContext;
+exports.SelectedWalletAccountContextProvider = SelectedWalletAccountContextProvider;
+exports.useSelectedWalletAccount = useSelectedWalletAccount;
 exports.useSignAndSendTransaction = useSignAndSendTransaction;
+exports.useSignAndSendTransactions = useSignAndSendTransactions;
 exports.useSignIn = useSignIn;
 exports.useSignMessage = useSignMessage;
 exports.useSignTransaction = useSignTransaction;
+exports.useSignTransactions = useSignTransactions;
 exports.useWalletAccountMessageSigner = useWalletAccountMessageSigner;
 exports.useWalletAccountTransactionSendingSigner = useWalletAccountTransactionSendingSigner;
 exports.useWalletAccountTransactionSigner = useWalletAccountTransactionSigner;