tx with wallet

Author: gin-lsl

docs/course/demos/solana-memo-call.tsx

@@ -1,8 +1,19 @@
 import React, { useState } from 'react';
 import { BrowserLink, ConnectButton, Connector, useAccount } from '@ant-design/web3';
 import { useConnection, useWallet } from '@ant-design/web3-solana';
-import { PublicKey, Transaction, TransactionInstruction } from '@solana/web3.js';
-import { Button, Card, ConfigProvider, Flex, Form, Input, message, Space } from 'antd';
+import {
+  LAMPORTS_PER_SOL,
+  PublicKey,
+  SystemProgram,
+  Transaction,
+  TransactionInstruction,
+} from '@solana/web3.js';
+import { Button, Card, ConfigProvider, Flex, Form, Input, InputNumber, message, Space } from 'antd';
+
+type FormModel = {
+  memo: string;
+  amount: number;
+};
 
 const MEMO_PROGRAM_ID = new PublicKey('MemoSq4gqABAXKb96qnH8TysNcWxMyWCqXgDLGmfcHr');
 
@@ -14,30 +25,37 @@ export default function MemoTx() {
   const { publicKey, sendTransaction } = useWallet();
   const [signatures, setSignatures] = useState<string[]>([]);
 
-  const writeMemo = async (memo: string) => {
+  const writeMemo = async (values: FormModel) => {
     if (!publicKey) {
       messageApi.error('Please connect wallet first');
       return;
     }
 
+    // Create a transaction instruction to transfer 0.1 SOL
+    const transferIns = SystemProgram.transfer({
+      fromPubkey: publicKey,
+      toPubkey: new PublicKey('4wztJ4CAH4GbAUopZrVk7nLvoAC3KAF6ttMMWfnBRG1t'),
+      lamports: values.amount * LAMPORTS_PER_SOL,
+    });
+
     // Create a transaction instruction to write memo
-    const ins = new TransactionInstruction({
+    const memoIns = new TransactionInstruction({
       programId: MEMO_PROGRAM_ID,
       keys: [{ pubkey: publicKey, isSigner: true, isWritable: false }],
-      data: Buffer.from(memo, 'utf-8'),
+      data: Buffer.from(values.memo, 'utf-8'),
     });
 
-    const tx = new Transaction().add(ins);
+    const tx = new Transaction().add(transferIns, memoIns);
 
     // Send transaction via wallet （通过钱包发送交易）
-    // Once the transaction is sent, the signature will be returned （发送交易后会返回签名）
+    // Once the transaction is confirmed, the signature will be returned （交易确认后会返回签名）
     const signature = await sendTransaction?.(tx, connection);
 
     setSignatures([...signatures, signature]);
 
     messageApi.info(
       <Space>
-        <span>Memo sent with signature: </span>
+        <span>Transaction sent with signature: </span>
         <BrowserLink type="transaction" address={signature} ellipsis target="_blank" />
       </Space>,
       60,
@@ -46,16 +64,19 @@ export default function MemoTx() {
 
   return (
     <Flex gap={16} flex={1}>
-      <Form
+      <Form<FormModel>
         style={{ flex: 1 }}
         layout="vertical"
         disabled={!publicKey}
-        onFinish={(values) => {
-          writeMemo(values.memo);
-        }}
+        initialValues={{ amount: 0.1, memo: 'Hello, Solana!' }}
+        onFinish={writeMemo}
       >
+        <Form.Item name="amount" label="Amount" required rules={[{ required: true }]}>
+          <InputNumber min={0.1} precision={1} step={0.1} style={{ width: 400 }} />
+        </Form.Item>
+
         <Form.Item name="memo" label="Memo" required rules={[{ required: true }]}>
-          <Input.TextArea />
+          <Input.TextArea style={{ width: 400 }} />
         </Form.Item>
 
         <Space>

docs/course/demos/solana-tx.tsx docs/course/demos/solana-tx-without-wallet.tsx

@@ -18,7 +18,7 @@ const programId = new PublicKey('MemoSq4gqABAXKb96qnH8TysNcWxMyWCqXgDLGmfcHr');
 
 export default function App() {
   const [amount, setAmount] = useState(0.1);
-  const [memo, setMemo] = useState('Hello Ant Design Web3 - Solana!');
+  const [memo, setMemo] = useState('Hello, Web3!');
 
   const writeMemo = async () => {
     const keypair = Keypair.generate();

docs/course/intro-call-contract-solana.zh-CN.md

@@ -24,7 +24,7 @@ Memo Program 是 Solana 上的一个示例程序，它是一个简单的合约
 
 所谓的直接调用合约，是指不使用钱包，而是直接使用私钥来签署交易。这种方式适用于一些简单的场景，比如在测试网络上进行一些调试。
 
-<code src="./demos/solana-tx.tsx"></code>
+<code src="./demos/solana-tx-without-wallet.tsx"></code>
 
 在上面的代码中，我们并没有使用任何 `@ant-design/web3-solana` 中的内容，实际调用位于 `writeMemo` 函数。
 
@@ -54,7 +54,9 @@ Memo Program 是 Solana 上的一个示例程序，它是一个简单的合约
 
 而在创建 memo 指令时，由于 @solana/web3.js 中没有提供对应的函数，所以我们选择手动构造转账指令对象。我们需要指明要调用的合约（Memo）的地址（[MemoSq4gqABAXKb96qnH8TysNcWxMyWCqXgDLGmfcHr](https://solscan.io/account/MemoSq4gqABAXKb96qnH8TysNcWxMyWCqXgDLGmfcHr?cluster=devnet)）、参与这条指令的公钥、以及要传递的数据（这里是一个字符串，但是转为了 Buffer）。注意：参与者账户必须是交易的签名者，所以 `isSigner` 值为 `true`。具体文档可以在这里找到：https://spl.solana.com/memo#operational-notes
 
-最后，我们使用 `sendAndConfirmTransaction` 方法来发送交易。这个方法会将交易发送到网络，并等待确认。如果交易成功，它会返回一个 TransactionSignature 对象。实际上是一个字符串，表示交易的哈希值，我们可以通过它去区块链浏览器上查看交易的详情。
+最后，我们使用 `sendAndConfirmTransaction` 方法来发送交易。这个方法会将交易发送到网络，并等待确认。注意我们调用它的时候，传入了密钥对，这样它就可以使用私钥来签名交易。
+
+如果交易成功，它会返回一个 TransactionSignature 对象。实际上是一个字符串，表示交易的哈希值，我们可以通过它去区块链浏览器上查看交易的详情。
 
 让我们点击【Send】按钮，运行一下代码，看看效果吧！
 
@@ -64,4 +66,16 @@ Memo Program 是 Solana 上的一个示例程序，它是一个简单的合约
 
 ## 使用钱包调用合约
 
+在 dApp 开发中，我们通常会使用钱包来管理用户的密钥对。这样可以更加安全，也更加方便。于是，用户可以通过钱包来签署交易，而不是将自己的私钥暴露给 dApp。
+
 <code src="./demos/solana-tx-with-wallet.tsx"></code>
+
+相比第一节中直接调用合约的代码，这里做了些删减，去掉了生成密钥对、请求测试币空投等步骤。我们直接使用钱包中的密钥对来签署交易。
+
+具体交易处理逻辑在 `writeMemo` 中，和之前的逻辑基本一致。同样创建了一个转账指令和一个 memo 指令，然后将它们添加到交易中。
+
+不同的是，我们使用了 `useWallet` hook 来获取钱包提供的 `sendTransaction` 方法。这个方法会将交易发送到网络，并等待确认。注意我们调用它的时候，并没有传入密钥对。
+
+## 其他
+
+在上面两个示例中，我们在创建 Memo 指令时，均通过手动构造 `TransactionInstruction` 对象进行。这样做虽然可以让我们更加灵活，但是也增加了一些工作量。如果你想要更加简单的方式，可以使用 `@solana/spl-memo` 提供的 `createMemoInstruction` 方法。具体代码可在此处找到：[@solana/spl-memo](https://github.com/solana-program/memo/blob/main/clients/js-legacy/src/index.ts)。