@solana/react 2.0.0-20241006045741

package/LICENSE

@@ -0,0 +1,20 @@
+Copyright (c) 2023 Solana Labs, Inc
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,311 @@
+[![npm][npm-image]][npm-url]
+[![npm-downloads][npm-downloads-image]][npm-url]
+[![semantic-release][semantic-release-image]][semantic-release-url]
+<br />
+[![code-style-prettier][code-style-prettier-image]][code-style-prettier-url]
+
+[code-style-prettier-image]: https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square
+[code-style-prettier-url]: https://github.com/prettier/prettier
+[npm-downloads-image]: https://img.shields.io/npm/dm/@solana/react/rc.svg?style=flat
+[npm-image]: https://img.shields.io/npm/v/@solana/react/rc.svg?style=flat
+[npm-url]: https://www.npmjs.com/package/@solana/react/v/rc
+[semantic-release-image]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
+[semantic-release-url]: https://github.com/semantic-release/semantic-release
+
+# @solana/react
+
+This package contains React hooks for building Solana apps.
+
+## Hooks
+
+### `useSignIn(uiWalletAccount, chain)`
+
+Given a `UiWallet` or `UiWalletAccount` this hook returns a function that you can call to trigger a wallet's [&lsquo;Sign In With Solana&rsquo;](https://phantom.app/learn/developers/sign-in-with-solana) feature.
+
+#### 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>
+    );
+}
+```
+
+### `useWalletAccountMessageSigner(uiWalletAccount)`
+
+Given a `UiWalletAccount`, this hook returns an object that conforms to the `MessageModifyingSigner` interface of `@solana/signers`.
+
+#### 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>
+    );
+}
+```
+
+> [!NOTE]
+> The type `MessageModifyingSigner` is returned from this hook instead of `MessageSigner` or `MessagePartialSigner`. 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.
+
+### `useWalletAccountTransactionSigner(uiWalletAccount, chain)`
+
+Given a `UiWalletAccount` and a chain that begins with `solana:`, this hook returns an object that conforms to the `TransactionModifyingSigner` interface of `@solana/signers`.
+
+#### 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>
+    );
+}
+```
+
+> [!NOTE]
+> The type `TransactionModifyingSigner` is returned from this hook instead of `TransactionSigner` or `TransactionPartialSigner`. 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).
+
+### `useWalletAccountTransactionSendingSigner(uiWalletAccount, chain)`
+
+Given a `UiWalletAccount` and a chain that begins with `solana:`, this hook returns an object that conforms to the `TransactionSendingSigner` interface of `@solana/signers`.
+
+#### Example
+
+```tsx
+import { useWalletAccountTransactionSendingSigner } from '@solana/react';
+import {
+    appendTransactionMessageInstruction,
+    createSolanaRpc,
+    getBase58Decoder,
+    pipe,
+    setTransactionMessageFeePayerSigner,
+    setTransactionMessageLifetimeUsingBlockhash,
+    signAndSendTransactionMessageWithSigners,
+} from '@solana/web3.js';
+
+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>
+    );
+}
+```
+
+### `useSignMessage(uiWalletAccount)`
+
+Given a `UiWalletAccount`, this hook returns a function you can call to sign a byte array.
+
+#### Arguments
+
+A config object with the following properties:
+
+-   `message`: A `Uint8Array` of bytes to sign
+
+#### Returns
+
+An object with the following properties:
+
+-   `signature`: The 64-byte Ed25519 signature as a `Uint8Array`
+-   `signedMessage`: The `Uint8Array` of bytes signed by the wallet. These bytes might differ from the input bytes if the wallet modified the message
+
+#### 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>
+    );
+}
+```
+
+### `useSignTransaction(uiWalletAccount, chain)`
+
+Given a `UiWalletAccount` and a chain that begins with `solana:`, this hook returns a function you can call to sign a serialized transaction.
+
+#### Arguments
+
+A config object 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 object 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 { 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>
+    );
+}
+```
+
+### `useSignAndSendTransaction(uiWalletAccount, chain)`
+
+Given a `UiWalletAccount` and a chain that begins with `solana:`, this hook returns a function you can call to sign and send a serialized transaction.
+
+#### Arguments
+
+A config object 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
+
+That function returns an object with the following properties:
+
+-   `signature`: A `Uint8Array` of bytes representing the signature of the sent transaction.
+
+#### 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>
+    );
+}
+```

package/dist/index.browser.cjs

@@ -0,0 +1,294 @@
+'use strict';
+
+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 addresses = require('@solana/addresses');
+var errors$1 = require('@solana/errors');
+var promises = require('@solana/promises');
+var transactions = require('@solana/transactions');
+
+// src/useSignAndSendTransaction.ts
+function useSignAndSendTransaction(uiWalletAccount, chain) {
+  const signAndSendTransactions = useSignAndSendTransactions(uiWalletAccount, chain);
+  return react.useCallback(
+    async (input) => {
+      const [result] = await signAndSendTransactions(input);
+      return result;
+    },
+    [signAndSendTransactions]
+  );
+}
+function useSignAndSendTransactions(uiWalletAccount, chain) {
+  if (!uiWalletAccount.chains.includes(chain)) {
+    throw new errors.WalletStandardError(errors.WALLET_STANDARD_ERROR__FEATURES__WALLET_ACCOUNT_CHAIN_UNSUPPORTED, {
+      address: uiWalletAccount.address,
+      chain,
+      featureName: walletStandardFeatures.SolanaSignAndSendTransaction,
+      supportedChains: [...uiWalletAccount.chains],
+      supportedFeatures: [...uiWalletAccount.features]
+    });
+  }
+  const signAndSendTransactionFeature = ui.getWalletAccountFeature(
+    uiWalletAccount,
+    walletStandardFeatures.SolanaSignAndSendTransaction
+  );
+  const account = uiRegistry.getWalletAccountForUiWalletAccount_DO_NOT_USE_OR_YOU_WILL_BE_FIRED(uiWalletAccount);
+  return react.useCallback(
+    async (...inputs) => {
+      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]
+  );
+}
+function useSignIn(uiWalletHandle) {
+  const signIns = useSignIns(uiWalletHandle);
+  return react.useCallback(
+    async (input) => {
+      const [result] = await signIns(input);
+      return result;
+    },
+    [signIns]
+  );
+}
+function useSignIns(uiWalletHandle) {
+  let signMessageFeature;
+  if ("address" in uiWalletHandle && typeof uiWalletHandle.address === "string") {
+    uiRegistry.getWalletAccountForUiWalletAccount_DO_NOT_USE_OR_YOU_WILL_BE_FIRED(uiWalletHandle);
+    signMessageFeature = ui.getWalletAccountFeature(
+      uiWalletHandle,
+      walletStandardFeatures.SolanaSignIn
+    );
+  } else {
+    signMessageFeature = ui.getWalletFeature(uiWalletHandle, walletStandardFeatures.SolanaSignIn);
+  }
+  const wallet = uiRegistry.getWalletForHandle_DO_NOT_USE_OR_YOU_WILL_BE_FIRED(uiWalletHandle);
+  return react.useCallback(
+    async (...inputs) => {
+      const inputsWithAddressAndChainId = inputs.map((input) => ({
+        ...input,
+        // Prioritize the `UiWalletAccount` address if it exists.
+        ..."address" in uiWalletHandle ? { address: uiWalletHandle.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: uiRegistry.getOrCreateUiWalletAccountForStandardWalletAccount_DO_NOT_USE_OR_YOU_WILL_BE_FIRED(
+            wallet,
+            account
+          )
+        })
+      );
+      return resultsWithoutSignatureType;
+    },
+    [signMessageFeature, uiWalletHandle, wallet]
+  );
+}
+function useSignMessage(...config) {
+  const signMessages = useSignMessages(...config);
+  return react.useCallback(
+    async (input) => {
+      const [result] = await signMessages(input);
+      return result;
+    },
+    [signMessages]
+  );
+}
+function useSignMessages(uiWalletAccount) {
+  const signMessageFeature = ui.getWalletAccountFeature(
+    uiWalletAccount,
+    walletStandardFeatures.SolanaSignMessage
+  );
+  const account = uiRegistry.getWalletAccountForUiWalletAccount_DO_NOT_USE_OR_YOU_WILL_BE_FIRED(uiWalletAccount);
+  return react.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]
+  );
+}
+function useSignTransaction(uiWalletAccount, chain) {
+  const signTransactions = useSignTransactions(uiWalletAccount, chain);
+  return react.useCallback(
+    async (input) => {
+      const [result] = await signTransactions(input);
+      return result;
+    },
+    [signTransactions]
+  );
+}
+function useSignTransactions(uiWalletAccount, chain) {
+  if (!uiWalletAccount.chains.includes(chain)) {
+    throw new errors.WalletStandardError(errors.WALLET_STANDARD_ERROR__FEATURES__WALLET_ACCOUNT_CHAIN_UNSUPPORTED, {
+      address: uiWalletAccount.address,
+      chain,
+      featureName: walletStandardFeatures.SolanaSignAndSendTransaction,
+      supportedChains: [...uiWalletAccount.chains],
+      supportedFeatures: [...uiWalletAccount.features]
+    });
+  }
+  const signTransactionFeature = ui.getWalletAccountFeature(
+    uiWalletAccount,
+    walletStandardFeatures.SolanaSignTransaction
+  );
+  const account = uiRegistry.getWalletAccountForUiWalletAccount_DO_NOT_USE_OR_YOU_WILL_BE_FIRED(uiWalletAccount);
+  return react.useCallback(
+    async (...inputs) => {
+      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]
+  );
+}
+function useWalletAccountMessageSigner(uiWalletAccount) {
+  const signMessage = useSignMessage(uiWalletAccount);
+  return react.useMemo(
+    () => ({
+      address: addresses.address(uiWalletAccount.address),
+      async modifyAndSignMessages(messages, config) {
+        config?.abortSignal?.throwIfAborted();
+        if (messages.length > 1) {
+          throw new errors$1.SolanaError(errors$1.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 promises.getAbortablePromise(signMessage(input), config?.abortSignal);
+        const messageWasModified = originalMessage.length !== signedMessage.length || originalMessage.some((originalByte, ii) => originalByte !== signedMessage[ii]);
+        const originalSignature = originalSignatureMap[uiWalletAccount.address];
+        const signatureIsNew = !originalSignature?.every((originalByte, ii) => originalByte === signature[ii]);
+        if (!signatureIsNew && !messageWasModified) {
+          return messages;
+        }
+        const nextSignatureMap = messageWasModified ? { [uiWalletAccount.address]: signature } : { ...originalSignatureMap, [uiWalletAccount.address]: signature };
+        const outputMessages = Object.freeze([
+          Object.freeze({
+            content: signedMessage,
+            signatures: Object.freeze(nextSignatureMap)
+          })
+        ]);
+        return outputMessages;
+      }
+    }),
+    [uiWalletAccount, signMessage]
+  );
+}
+function useWalletAccountTransactionSigner(uiWalletAccount, chain) {
+  const encoderRef = react.useRef();
+  const signTransaction = useSignTransaction(uiWalletAccount, chain);
+  return react.useMemo(
+    () => ({
+      address: addresses.address(uiWalletAccount.address),
+      async modifyAndSignTransactions(transactions$1, config = {}) {
+        const { abortSignal, ...options } = config;
+        abortSignal?.throwIfAborted();
+        const transactionCodec = encoderRef.current ||= transactions.getTransactionCodec();
+        if (transactions$1.length > 1) {
+          throw new errors$1.SolanaError(errors$1.SOLANA_ERROR__SIGNER__WALLET_MULTISIGN_UNIMPLEMENTED);
+        }
+        if (transactions$1.length === 0) {
+          return transactions$1;
+        }
+        const [transaction] = transactions$1;
+        const wireTransactionBytes = transactionCodec.encode(transaction);
+        const inputWithOptions = {
+          ...options,
+          transaction: wireTransactionBytes
+        };
+        const { signedTransaction } = await promises.getAbortablePromise(signTransaction(inputWithOptions), abortSignal);
+        const decodedSignedTransaction = transactionCodec.decode(
+          signedTransaction
+        );
+        return Object.freeze([decodedSignedTransaction]);
+      }
+    }),
+    [uiWalletAccount.address, signTransaction]
+  );
+}
+function useWalletAccountTransactionSendingSigner(uiWalletAccount, chain) {
+  const encoderRef = react.useRef();
+  const signAndSendTransaction = useSignAndSendTransaction(uiWalletAccount, chain);
+  return react.useMemo(
+    () => ({
+      address: addresses.address(uiWalletAccount.address),
+      async signAndSendTransactions(transactions$1, config = {}) {
+        const { abortSignal, ...options } = config;
+        abortSignal?.throwIfAborted();
+        const transactionEncoder = encoderRef.current ||= transactions.getTransactionEncoder();
+        if (transactions$1.length > 1) {
+          throw new errors$1.SolanaError(errors$1.SOLANA_ERROR__SIGNER__WALLET_MULTISIGN_UNIMPLEMENTED);
+        }
+        if (transactions$1.length === 0) {
+          return [];
+        }
+        const [transaction] = transactions$1;
+        const wireTransactionBytes = transactionEncoder.encode(transaction);
+        const inputWithOptions = {
+          ...options,
+          transaction: wireTransactionBytes
+        };
+        const { signature } = await promises.getAbortablePromise(signAndSendTransaction(inputWithOptions), abortSignal);
+        return Object.freeze([signature]);
+      }
+    }),
+    [signAndSendTransaction, uiWalletAccount.address]
+  );
+}
+
+exports.useSignAndSendTransaction = useSignAndSendTransaction;
+exports.useSignIn = useSignIn;
+exports.useSignMessage = useSignMessage;
+exports.useSignTransaction = useSignTransaction;
+exports.useWalletAccountMessageSigner = useWalletAccountMessageSigner;
+exports.useWalletAccountTransactionSendingSigner = useWalletAccountTransactionSendingSigner;
+exports.useWalletAccountTransactionSigner = useWalletAccountTransactionSigner;
+//# sourceMappingURL=index.browser.cjs.map
+//# sourceMappingURL=index.browser.cjs.map