add demo

docs/course/demos/solana-tx.tsx

@@ -0,0 +1,72 @@
+import React, { useState } from 'react';
+import { solanaDevnet, SolanaWeb3ConfigProvider } from '@ant-design/web3-solana';
+
+import '@solana/web3.js';
+
+import {
+  clusterApiUrl,
+  Connection,
+  Keypair,
+  LAMPORTS_PER_SOL,
+  PublicKey,
+  sendAndConfirmRawTransaction,
+  sendAndConfirmTransaction,
+  SystemProgram,
+  Transaction,
+  TransactionInstruction,
+} from '@solana/web3.js';
+import { Button, Input } from 'antd';
+
+const devnetEndpoint = `https://api.zan.top/node/v1/solana/devnet/${YOUR_ZAN_API_KEY}`;
+
+// const connection = new Connection(clusterApiUrl('devnet'));
+const connection = new Connection(devnetEndpoint);
+const programId = new PublicKey('MemoSq4gqABAXKb96qnH8TysNcWxMyWCqXgDLGmfcHr');
+
+export default function App() {
+  const [memo, setMemo] = useState('test');
+
+  const writeMemo = async () => {
+    const keypair = Keypair.generate();
+    console.log('public_key:', keypair.publicKey.toBase58());
+
+    const airdropSignature = await connection.requestAirdrop(keypair.publicKey, LAMPORTS_PER_SOL);
+    console.log('airdrop_signature:', airdropSignature);
+
+    const latestBlockhash = await connection.getLatestBlockhash();
+    await connection.confirmTransaction(
+      {
+        signature: airdropSignature,
+        blockhash: latestBlockhash.blockhash,
+        lastValidBlockHeight: latestBlockhash.lastValidBlockHeight,
+      },
+      'finalized',
+    );
+
+    const tx = new Transaction()
+      .add(
+        SystemProgram.transfer({
+          fromPubkey: keypair.publicKey,
+          toPubkey: new PublicKey('4wztJ4CAH4GbAUopZrVk7nLvoAC3KAF6ttMMWfnBRG1t'),
+          lamports: 0.5 * LAMPORTS_PER_SOL,
+        }),
+      )
+      .add(
+        new TransactionInstruction({
+          keys: [{ pubkey: keypair.publicKey, isSigner: true, isWritable: false }],
+          programId: programId,
+          data: Buffer.from(memo, 'utf-8'),
+        }),
+      );
+
+    const signature = await sendAndConfirmTransaction(connection, tx, [keypair]);
+    console.log('signature:', signature);
+  };
+
+  return (
+    <div>
+      <Input.TextArea value={memo} onChange={(e) => setMemo(e.target.value)} />
+      <Button onClick={writeMemo}>Send Memo</Button>
+    </div>
+  );
+}

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

@@ -2,11 +2,11 @@
 nav: Course
 group:
   title: What is DApp?
-order: 3
+order: 4
 ---
 
-# Call Solana Memo Contract
+# Interact with Solana Contract
 
-Memo Program 是 Solana 上的一个示例程序，它是一个简单的合约，用于在交易中添加备注信息。在这个示例中，我们将演示如何使用 Ant Design Web3 连接 Solana 网络，并调用 Memo 合约。
+> TODO
 
-<code src="./demos/solana-memo.tsx"></code>
+<code src="./demos/solana-tx-with-wallet.tsx"></code>

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

@@ -1,12 +1,29 @@
 ---
-nav: Course
+nav: 课程
 group:
-  title: What is DApp?
-order: 3
+  title: DApp 是什么？
+order: 4
 ---
 
-# Call Solana Memo Contract
+# 与 Solana 合约交互
 
-Memo Program 是 Solana 上的一个示例程序，它是一个简单的合约，用于在交易中添加备注信息。在这个示例中，我们将演示如何使用 Ant Design Web3 连接 Solana 网络，并调用 Memo 合约。
+DApp 与区块链合约的交互是 DApp 的核心功能之一。实现这一点并不困难，但是需要写一些逻辑。在这个示例中，我们将演示如何使用 Ant Design Web3 连接 Solana 网络，并调用 Memo 合约。
 
-<code src="./demos/solana-memo.tsx"></code>
+Memo Program 是 Solana 上的一个示例程序，它是一个简单的合约，用于在交易中添加备注信息。
+
+我们接下来通过两种方式来演示如何与 Solana 合约交互：
+
+1. 不使用钱包，直接调用合约
+2. 使用钱包调用合约
+
+无论使用哪种方式，都需要用到 `@solana/web3.js`，一个 Solana 官方提供的，用于与 Solana 区块链进行交互的 JavaScript 库。
+
+<NormalInstallDependencies packageNames="@solana/web3.js" save="true"></NormalInstallDependencies>
+
+## 直接调用合约
+
+<code src="./demos/solana-tx.tsx"></code>
+
+## 使用钱包调用合约
+
+<code src="./demos/solana-tx-with-wallet.tsx"></code>