1
import React from "react";
2
import { useSolanaTransaction } from "@account-kit/react";
3
4
function MyComponent() {
5
  const {
6
    sendTransaction,
7
    isPending,
8
    signer,
9
    reset,
10
    data: { hash: txHash = null } = {},
11
  } = useSolanaTransaction({});
12
13
  if (!signer) {
14
    return <div>Loading alchemy signer...</div>;
15
  }
16
17
  return (
18
    <div>
19
      Solana Address {signer.address}
20
      <button
21
        onClick={() =>
22
          sendTransaction({
23
            transfer: {
24
              amount: 1000000,
25
              toAddress: "<ToSolanaAddress>",
26
            },
27
          })
28
        }
29
      >
30
        Go make Transfer
31
      </button>
32
      {!!txHash && <button onClick={() => reset()}> Reset </button>}
33
      {!!txHash && (
34
        <a
35
          href={`https://explorer.solana.com/tx/${txHash}?cluster=devnet`}
36
          target="_blank"
37
        >
38
          View transaction
39
        </a>
40
      )}
41
    </div>
42
  );
43
}

1
import React from "react";
2
import { useSolanaTransaction } from "@account-kit/react";
3
import { PublicKey, SystemProgram } from "@solana/web3.js";
4
5
function MyComponent() {
6
  const {
7
    sendTransaction,
8
    isPending,
9
    signer,
10
    reset,
11
    data: { hash: txHash = null } = {},
12
  } = useSolanaTransaction({});
13
14
  if (!signer) {
15
    return <div>Loading alchemy signer...</div>;
16
  }
17
18
  return (
19
    <div>
20
      Solana Address {signer.address}
21
      <button
22
        onClick={() =>
23
          sendTransaction({
24
            instructions: [
25
              SystemProgram.transfer({
26
                fromPubkey: new PublicKey(signer.address),
27
                toPubkey: new PublicKey("<ToAddress>"),
28
                lamports: someValue, // ex: lamports: 50000000 - 0.05 SOL
29
              }),
30
              SystemProgram.transfer({
31
                fromPubkey: new PublicKey(signer.address),
32
                toPubkey: new PublicKey("<ToAddress>"),
33
                lamports: someValue2,
34
              }),
35
            ],
36
          })
37
        }
38
      >
39
        Go make Transfer
40
      </button>
41
      {!!txHash && <button onClick={() => reset()}> Reset </button>}
42
      {!!txHash && (
43
        <a
44
          href={`https://explorer.solana.com/tx/${txHash}?cluster=devnet`}
45
          target="_blank"
46
        >
47
          Go To Tracker
48
        </a>
49
      )}
50
    </div>
51
  );
52
}

1
import { useSolanaSignMessage } from "@account-kit/react";
2
import { SolanaSigner } from "@account-kit/signer";
3
4
function MyComponent() {
5
  const {
6
    signer,
7
    data,
8
    signMessage,
9
    data: signedMessage,
10
    reset,
11
  } = useSolanaSignMessage({});
12
13
  if (!signer) {
14
    return <div>Loading signer...</div>;
15
  }
16
17
  return (
18
    <div>
19
      <button onClick={() => signMessage({ message: "Here is my message" })}>
20
        {" Sign "}
21
      </button>
22
      Message Signed: {signedMessage}
23
    </div>
24
  );
25
}

1
import {
2
  Transaction,
3
  VersionedTransaction,
4
  Keypair,
5
  PublicKey,
6
  SystemProgram,
7
} from "@solana/web3.js";
8
9
import {
10
  ExtensionType,
11
  LENGTH_SIZE,
12
  TOKEN_2022_PROGRAM_ID,
13
  TYPE_SIZE,
14
  createInitializeMetadataPointerInstruction,
15
  getMintLen,
16
} from "@solana/spl-token";
17
import { pack, TokenMetadata } from "@solana/spl-token-metadata";
18
const stakeAccount = Keypair.generate();
19
const publicKey = new PublicKey(signer.address);
20
const metaData: (readonly [string, string])[] = [];
21
const tokenMetadata: TokenMetadata = {
22
  updateAuthority: publicKey,
23
  mint: stakeAccount.publicKey,
24
  name: "Alchemy Duck",
25
  symbol: "ALCHDUCK",
26
  uri: "https://bafybeigtvzjqalevyw67xdhr7am5r3jxe5kjbg4pi2jv3nxvhelptwksoe.ipfs.dweb.link?filename=duckImage.png",
27
  additionalMetadata: metaData,
28
};
29
const mintLen = getMintLen([ExtensionType.MetadataPointer]);
30
const metadataLen = TYPE_SIZE + LENGTH_SIZE + pack(tokenMetadata).length;
31
const mintLamports = await connection.getMinimumBalanceForRentExemption(
32
  mintLen + metadataLen,
33
);
34
35
const mint = stakeAccount.publicKey;
36
const instructions = [
37
  SystemProgram.createAccount({
38
    fromPubkey: publicKey,
39
    newAccountPubkey: mint,
40
    space: mintLen,
41
    lamports: mintLamports,
42
    programId: TOKEN_2022_PROGRAM_ID,
43
  }),
44
  createInitializeMetadataPointerInstruction(
45
    mint,
46
    publicKey,
47
    mint,
48
    TOKEN_2022_PROGRAM_ID,
49
  ),
50
];
51
/**
52
 * Send a transaction with a custom `preSend` hook to add an extra signer.
53
 */
54
const tx = await sendTransactionAsync({
55
  instructions, // Standard transaction instructions
56
  transactionComponents: {
57
    preSend: getAddStakeSignatureFn(stakeAccount), // Add secondary signer before sending
58
  },
59
});
60
61
/**
62
 * Returns a preSend hook that appends a signature from the provided `stakeAccount`.
63
 *
64
 * @param stakeAccount - The Keypair used to sign the transaction
65
 * @returns A function that accepts a transaction and returns a signed transaction
66
 */
67
function getAddStakeSignatureFn(stakeAccount: Keypair) {
68
  return async (transaction: Transaction | VersionedTransaction) => {
69
    if ("version" in transaction) {
70
      transaction.sign([stakeAccount]); // Add stake account's signature for v0 transactions
71
    }
72
    return transaction;
73
  };
74
}