feat: solana demo

account-kit/react/src/hooks/index.ts

@@ -22,6 +22,7 @@ export * from "./useSignTypedData.js";
 export * from "./useSmartAccountClient.js";
 export * from "./useSolanaSigner.js";
 export * from "./useSolanaTransaction.js";
+export * from "./useSolanaConnection.js";
 export * from "./useUiConfig.js";
 export * from "./useUser.js";
 export * from "./useWaitForUserOperationTransaction.js";

account-kit/react/src/hooks/useSolanaConnection.ts

@@ -0,0 +1,55 @@
+"use client";
+
+import * as solanaNetwork from "../solanaNetwork.js";
+import { SolanaSigner } from "@account-kit/signer";
+import { useSolanaSigner } from "./useSolanaSigner.js";
+import { getSolanaConnection, watchSolanaConnection } from "@account-kit/core";
+import { useSyncExternalStore } from "react";
+import { useAlchemyAccountContext } from "./useAlchemyAccountContext.js";
+
+/**
+ * Returned from the solana connection.
+ */
+export interface SolanaConnection {
+  /** The solana signer used to send the transaction */
+  readonly signer: SolanaSigner | null;
+  /** The solana connection used to send the transaction */
+  readonly connection: solanaNetwork.Connection | null;
+}
+
+/**
+ * The parameters for the SolanaConnectionHookParams hook.
+ */
+export type SolanaConnectionHookParams = {
+  signer?: SolanaSigner;
+};
+
+/**
+ * This hook is used for establishing a connection to Solana and returns the connection object and the signer object.
+ *
+ * @example
+ * ```ts
+  const {connection} = useSolanaConnection();
+
+ * ```
+ * @param {SolanaConnectionHookParams} opts Options for the hook to get setup
+ * @returns {SolanaConnection} The transaction hook.
+ */
+export function useSolanaConnection(
+  opts: SolanaConnectionHookParams = {}
+): SolanaConnection {
+  const { config } = useAlchemyAccountContext();
+  const fallbackSigner: null | SolanaSigner = useSolanaSigner();
+  const connection =
+    useSyncExternalStore(
+      watchSolanaConnection(config),
+      () => getSolanaConnection(config),
+      () => getSolanaConnection(config)
+    )?.connection || null;
+  const signer: null | SolanaSigner = opts?.signer || fallbackSigner;
+
+  return {
+    connection,
+    signer,
+  };
+}

account-kit/react/src/hooks/useSolanaTransaction.ts

@@ -7,22 +7,43 @@ import type { BaseHookMutationArgs } from "../types.js";
 import {
   PublicKey,
   SystemProgram,
+  Transaction,
   TransactionInstruction,
+  VersionedTransaction,
 } from "@solana/web3.js";
 import { useSolanaSigner } from "./useSolanaSigner.js";
 import { getSolanaConnection, watchSolanaConnection } from "@account-kit/core";
 import { useSyncExternalStore } from "react";
 import { useAlchemyAccountContext } from "./useAlchemyAccountContext.js";
+import type { PromiseOrValue } from "../../../../aa-sdk/core/dist/types/types.js";
 
+/** Used right before we send the transaction out, this is going to be the signer. */
+export type PreSend = (
+  this: void,
+  transaction: VersionedTransaction | Transaction
+) => PromiseOrValue<VersionedTransaction | Transaction>;
+/**
+ * Used in the sendTransaction, will transform either the instructions (or the transfer -> instructions) into a transaction
+ */
+export type TransformInstruction = (
+  this: void,
+  instructions: TransactionInstruction[]
+) => PromiseOrValue<Transaction | VersionedTransaction>;
+export type SolanaTransactionParamOptions = {
+  preSend?: PreSend;
+  transformInstruction?: TransformInstruction;
+};
 export type SolanaTransactionParams =
   | {
       transfer: {
         amount: number;
         toAddress: string;
       };
+      transactionComponents?: SolanaTransactionParamOptions;
     }
   | {
       instructions: TransactionInstruction[];
+      transactionComponents?: SolanaTransactionParamOptions;
     };
 /**
  * We wanted to make sure that this will be using the same useMutation that the
@@ -97,34 +118,84 @@ export function useSolanaTransaction(
     () => getSolanaConnection(config)
   );
   const mutation = useMutation({
-    mutationFn: async (params: SolanaTransactionParams) => {
-      if (!signer) throw new Error("Not ready");
-      if (!connection) throw new Error("Not ready");
-      const instructions =
-        "instructions" in params
-          ? params.instructions
-          : [
-              SystemProgram.transfer({
-                fromPubkey: new PublicKey(signer.address),
-                toPubkey: new PublicKey(params.transfer.toAddress),
-                lamports: params.transfer.amount,
-              }),
-            ];
-      const policyId =
-        "policyId" in opts ? opts.policyId : backupConnection?.policyId;
-      const transaction = policyId
-        ? await signer.addSponsorship(instructions, connection, policyId)
-        : await signer.createTransfer(instructions, connection);
+    mutationFn: async ({
+      transactionComponents: {
+        preSend,
+        transformInstruction = mapTransformInstructions.default,
+      } = {},
+      ...params
+    }: SolanaTransactionParams) => {
+      const instructions = getInstructions();
+      let transaction: VersionedTransaction | Transaction =
+        await transformInstruction(instructions);
 
-      await signer.addSignature(transaction);
+      transaction = (await preSend?.(transaction)) || transaction;
 
-      const hash = await solanaNetwork.broadcast(connection, transaction);
+      if (needsSignerToSign()) {
+        await signer?.addSignature(transaction);
+      }
+
+      const localConnection = connection || missing("connection");
+      const hash = await solanaNetwork.broadcast(localConnection, transaction);
       return { hash };
+
+      function getInstructions() {
+        if ("instructions" in params) {
+          return params.instructions;
+        }
+        return [
+          SystemProgram.transfer({
+            fromPubkey: new PublicKey(
+              signer?.address || missing("signer.address")
+            ),
+            toPubkey: new PublicKey(params.transfer.toAddress),
+            lamports: params.transfer.amount,
+          }),
+        ];
+      }
+
+      function needsSignerToSign() {
+        if ("message" in transaction) {
+          const message = transaction.message;
+          return message.staticAccountKeys.some(
+            (key, index) =>
+              key.toBase58() === signer?.address &&
+              message?.isAccountSigner(index)
+          );
+        }
+        return transaction.instructions.some((x) =>
+          x.keys.some(
+            (x) => x.pubkey.toBase58() === signer?.address && x.isSigner
+          )
+        );
+      }
     },
     ...opts.mutation,
   });
   const signer: null | SolanaSigner = opts?.signer || fallbackSigner;
   const connection = opts?.connection || backupConnection?.connection || null;
+  const policyId =
+    "policyId" in opts ? opts.policyId : backupConnection?.policyId;
+  const mapTransformInstructions: Record<string, TransformInstruction> = {
+    async addSponsorship(instructions: TransactionInstruction[]) {
+      return await (signer || missing("signer")).addSponsorship(
+        instructions,
+        connection || missing("connection"),
+        policyId || missing("policyId")
+      );
+    },
+    async createTransaction(instructions: TransactionInstruction[]) {
+      return await (signer || missing("signer")).createTransaction(
+        instructions,
+        connection || missing("connection")
+      );
+    },
+    get default() {
+      return policyId
+        ? mapTransformInstructions.addSponsorship
+        : mapTransformInstructions.createTransaction;
+    },
+  };
 
   return {
     connection,
@@ -134,3 +205,7 @@ export function useSolanaTransaction(
     sendTransactionAsync: mutation.mutateAsync,
   };
 }
+
+function missing(message: string): never {
+  throw new Error(message);
+}

account-kit/react/src/index.ts

@@ -68,5 +68,9 @@ export {
   useSolanaTransaction,
   type SolanaTransaction,
 } from "./hooks/useSolanaTransaction.js";
+export {
+  useSolanaConnection,
+  type SolanaConnection,
+} from "./hooks/useSolanaConnection.js";
 
 export { useSolanaSignMessage } from "./hooks/useSolanaSignMessage.js";

account-kit/signer/src/solanaSigner.ts

@@ -88,17 +88,17 @@ export class SolanaSigner {
     return toBytes(this.formatSignatureForSolana(signature));
   }
 
-  async createTransfer(
+  async createTransaction(
     instructions: TransactionInstruction[],
     connection: Connection,
     version?: "versioned"
   ): Promise<VersionedTransaction>;
-  async createTransfer(
+  async createTransaction(
     instructions: TransactionInstruction[],
     connection: Connection,
     version?: "legacy"
   ): Promise<Transaction>;
-  async createTransfer(
+  async createTransaction(
     instructions: TransactionInstruction[],
     connection: Connection
   ): Promise<VersionedTransaction>;
@@ -111,7 +111,7 @@ export class SolanaSigner {
    * @param {"versioned" | "legacy"} [version] - The version of the transaction
    * @returns {Promise<Transaction | VersionedTransaction>} The transfer transaction
    */
-  async createTransfer(
+  async createTransaction(
     instructions: TransactionInstruction[],
     connection: Connection,
     version?: string

docs/pages/reference/aa-sdk/core/classes/LocalAccountSigner/getAddress.mdx

@@ -18,7 +18,9 @@ import { LocalAccountSigner } from "@aa-sdk/core";
 import { LocalAccountSigner } from "@aa-sdk/core";
 import { generatePrivateKey } from "viem";
 
-const signer = LocalAccountSigner.mnemonicToAccountSigner(generatePrivateKey());
+const signer = LocalAccountSigner.privateKeyToAccountSigner(
+  generatePrivateKey()
+);
 const address = await signer.getAddress();
 ```
 

docs/pages/reference/aa-sdk/core/classes/LocalAccountSigner/signMessage.mdx

@@ -18,7 +18,9 @@ import { LocalAccountSigner } from "@aa-sdk/core";
 import { LocalAccountSigner } from "@aa-sdk/core";
 import { generatePrivateKey } from "viem";
 
-const signer = LocalAccountSigner.mnemonicToAccountSigner(generatePrivateKey());
+const signer = LocalAccountSigner.privateKeyToAccountSigner(
+  generatePrivateKey()
+);
 const signature = await signer.signMessage("Hello, world!");
 ```
 

docs/pages/reference/aa-sdk/core/classes/LocalAccountSigner/signTypedData.mdx

@@ -18,7 +18,9 @@ import { LocalAccountSigner } from "@aa-sdk/core";
 import { LocalAccountSigner } from "@aa-sdk/core";
 import { generatePrivateKey } from "viem";
 
-const signer = LocalAccountSigner.mnemonicToAccountSigner(generatePrivateKey());
+const signer = LocalAccountSigner.privateKeyToAccountSigner(
+  generatePrivateKey()
+);
 const signature = await signer.signTypedData({
   domain: {},
   types: {},

docs/pages/reference/account-kit/react/hooks/useSolanaConnection.mdx

@@ -0,0 +1,32 @@
+---
+# This file is autogenerated
+title: useSolanaConnection
+description: Overview of the useSolanaConnection method
+slug: wallets/reference/account-kit/react/hooks/useSolanaConnection
+---
+
+This hook is used for establishing a connection to Solana and returns the connection object and the signer object.
+
+## Import
+
+```ts
+import { useSolanaConnection } from "@account-kit/react";
+```
+
+## Usage
+
+```ts
+const { connection } = useSolanaConnection();
+```
+
+## Parameters
+
+### opts
+
+`SolanaConnectionHookParams`
+Options for the hook to get setup
+
+## Returns
+
+`SolanaConnection`
+The transaction hook.

docs/pages/reference/account-kit/signer/classes/SolanaSigner/createTransaction.mdx

@@ -0,0 +1,39 @@
+---
+# This file is autogenerated
+title: createTransaction
+description: Overview of the createTransaction method
+slug: wallets/reference/account-kit/signer/classes/SolanaSigner/createTransaction
+---
+
+Creates a transfer transaction. Used for the SolanaCard example.
+
+## Import
+
+```ts
+import { SolanaSigner } from "@account-kit/signer";
+```
+
+## Parameters
+
+### instructions
+
+`TransactionInstruction[]`
+
+- The instructions to add to the transaction
+
+### connection
+
+`Connection`
+
+- The connection to use for the transaction
+
+### version
+
+`"versioned" | "legacy"`
+
+- The version of the transaction
+
+## Returns
+
+`Promise<Transaction | VersionedTransaction>`
+The transfer transaction

examples/ui-demo/package.json

@@ -16,11 +16,16 @@
     "@account-kit/infra": "^4.2.0",
     "@account-kit/logging": "^4.2.0",
     "@account-kit/react": "^4.2.0",
+    "@metaplex-foundation/umi": "^1.2.0",
+    "@metaplex-foundation/umi-bundle-defaults": "^1.2.0",
+    "@metaplex-foundation/umi-rpc-web3js": "^1.2.0",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-toast": "^1.2.1",
     "@radix-ui/react-tooltip": "^1.1.2",
+    "@solana/spl-token": "^0.4.13",
+    "@solana/spl-token-metadata": "^0.1.6",
     "@solana/web3.js": "^1.98.0",
     "@t3-oss/env-core": "^0.7.1",
     "@t3-oss/env-nextjs": "^0.7.1",

examples/ui-demo/src/app/config.tsx

@@ -115,7 +115,7 @@ export const alchemyConfig = () => {
       enablePopupOauth: true,
       solana: {
         connection: solanaConnection,
-        // policyId: process.env.NEXT_PUBLIC_PAYMASTER_POLICY_ID,
+        policyId: process.env.NEXT_PUBLIC_SOLANA_POLICY_ID,
       },
     },
     {