chore: add the links to the components for sdk and site

Author: Jade Hamilton

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

@@ -23,6 +23,12 @@ export type SignerSet = {
  * This hook is used to create a SolanaSigner instance.
  * It is used to sign transactions and messages for the Solana blockchain.
  *
+ * ```tsx
+ * import { useSolanaSigner } from "@account-kit/react";
+ *
+ * const signer = useSolanaSigner({});
+ * ```
+ *
  * @param {object} opts - The options for the useSolanaSigner hook.
  * @param {SignerSet} [opts.signerSet] - The signer set to use.
  * @returns {object} A SolanaSigner instance.

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

@@ -67,17 +67,75 @@ export type SolanaTransactionHookParams = {
  * This is the hook that will be used to send a transaction.
  *
  * @example
- * ```ts
-  const {mutate} = useSolanaTransaction({
-    policyId: "<policyId>",
-});
+ * ```ts twoslash
+import React from "react";
+import { useSolanaTransaction } from "@account-kit/react";
+import { Connection } from "@solana/web3.js";
  
-mutate({
-  transfer: {
-    amount: <amount:number>,
-    toAddress: "<toAddress>",
-  },
- * ```
+function MyComponent() {
+  const connection = new Connection(
+    "https://solana-devnet.g.alchemy.com/v2/<API_KEY>",
+    {
+      wsEndpoint: "wss://api.devnet.solana.com",
+      commitment: "confirmed",
+    }
+  );
+  const policyId = "<policyId>";
+ 
+  const {
+    mutate: doTransaction,
+    isPending,
+    signer,
+    reset,
+    data: { hash: txHash = null } = {},
+  } = useSolanaTransaction({
+    connection,
+    // Used if we have a alchemy sponsor
+    policyId,
+  });
+ 
+  if (!signer) {
+    return <div>Loading alchemy signer...</div>;
+  }
+ 
+  return (
+    <div>
+      Solana Address: {signer.address}
+      <button
+        onClick={() =>
+          doTransaction({
+            transfer: {
+              amount: 1000000,
+              toAddress: "<ToSolanaAddress>",
+            },
+          })
+        }
+      >
+        {" "}
+        Go make Transfer{" "}
+      </button>
+      {
+        !!txHash &&
+        <button onClick={() => reset()}> Reset </button>
+      }
+      { !!txHash && <a href={`https://explorer.solana.com/tx/${txHash}?cluster=devnet`} target="_blank"> Go To Tracker </a> }
+    </div>
+  );
+}
+ * ``` 
+ * 
+ * This hook:
+ * 
+ * - Signs the transaction and broadcasts it to the network via the Connection passed in
+ * - Returns a mutate to fire and forget a transaction, either a transfer or list of web3 instructions
+ * - Provides the state for the result of the txHash that results after the broadcast
+ * - Has an isPending to know if the transaction is currently sending
+ * - Has the signer, so we can see if we had provided an alchemy signer in the app. (A signer could have been passed in instead of provided)
+ * - Has other onMutation hooks that could be passed in as the mutation: argument for the hook
+ * 
+ * Note: This example assumes that the alchemy signer is defined higher up in the React tree. If this is not the case this transaction will not work. Instead, one could pass down the signer as a parameter for the hook
+ * Note: This example uses the connection passed in, but there is a AlchemySolanaWeb3Context if we would like do input as a provider.
+ * 
  * @param {SolanaTransactionHookParams} opts Options for the hook to get setup, The transaction is required.
  * @returns {SolanaTransaction} The transaction hook.
  */

docs/docs.yml

@@ -149,6 +149,12 @@ navigation:
                     path: wallets/pages/reference/account-kit/react/hooks/useSignTypedData.mdx
                   - page: useWaitForUserOperationTransaction
                     path: wallets/pages/reference/account-kit/react/hooks/useWaitForUserOperationTransaction.mdx
+              - section: Solana Actions
+                contents:
+                  - page: useSolanaTransaction
+                    path: wallets/pages/reference/account-kit/react/hooks/useSolanaTransaction.mdx
+                  - page: useSolanaSigner
+                    path: wallets/pages/reference/account-kit/react/hooks/useSolanaSigner.mdx
               - section: Bundler/RPC Client
                 contents:
                   - page: useBundlerClient

site/pages/react/quickstart.mdx

@@ -394,4 +394,69 @@ export default function Home() {
     </main>
   );
 }
+c;
+```
+
+## Other examples
+
+### Sending a solana transaction
+
+This is with the assumption that we have logged in, and we want a component to send a transaction
+
+```tsx twoslash
+import React from "react";
+import { useSolanaTransaction } from "@account-kit/react";
+import { Connection } from "@solana/web3.js";
+
+function MyComponent() {
+  const connection = new Connection(
+    "https://solana-devnet.g.alchemy.com/v2/<API_KEY>",
+    {
+      wsEndpoint: "wss://api.devnet.solana.com",
+      commitment: "confirmed",
+    }
+  );
+
+  const {
+    mutate: doTransaction,
+    isPending,
+    signer,
+    reset,
+    data: { hash: txHash = null } = {},
+  } = useSolanaTransaction({
+    connection,
+  });
+
+  if (!signer) {
+    return <div>Loading alchemy signer...</div>;
+  }
+
+  return (
+    <div>
+      <button
+        onClick={() =>
+          doTransaction({
+            transfer: {
+              amount: 1000000,
+              toAddress: "<ToSolanaAddress>",
+            },
+          })
+        }
+      >
+        {" "}
+        Go make Transfer{" "}
+      </button>
+      {!!txHash && <button onClick={() => reset()}> Reset </button>}
+      {!!txHash && (
+        <a
+          href={`https://explorer.solana.com/tx/${txHash}?cluster=devnet`}
+          target="_blank"
+        >
+          {" "}
+          Go To Tracker{" "}
+        </a>
+      )}
+    </div>
+  );
+}
 ```

site/pages/reference/account-kit/react/hooks/useSolanaTransaction.mdx

@@ -53,6 +53,7 @@ const hookGroupings = {
     "useClientActions",
     "useChain",
   ],
+  "Solana Actions": ["useSolanaTransaction", "useSolanaSignMessage"],
   "Bundler/RPC Client": ["useBundlerClient"],
   Utilities: [
     "useAlchemyAccountContext",