Solana 核心概念：快速构建简单的dApp应用（一）

Web3 概念

什么是 Web3？

Web2 的局限性

• 账户由平台（如微信、淘宝）托管
• 数据隐私可能被泄露或滥用

Web3 的核心组成

• 钱包：用户直接管理的账户工具
• 代币：基于区块链的资产形式
• 常用服务：在线商品交易、全球支付、跨境支付等

Web3 的特点

• 用户直接拥有账户，无需中间商
• 支持去中心化交易和互动

什么是 Solana？

Solana 是新一代的区块链，与比特币、以太坊相比具有创新性。

Solana 的三大优势

• 交易速度快：1-2秒内完成
• 交易费用低：约 $0.00025\; 0.00025~$0.00025 0.0005每笔交易
• 高度去中心化：增加安全性与可靠性

应用场景

• 实时性高的 Web3 应用，比如支付、交易所等

学习 Solana 开发需要的环境

我们在学习 Solana 不需要掌握区块链相关的很多知识，或者是具备 Rust 等编程语言。你只需要有一台电脑并且可以安装 Nodejs 以及掌握基础的 Nodejs、TypeScript就可以了。

• 所需技能：基础的 Nodejs 和 TypeScript 知识
• 工具安装
  • 安装 Nodejs v20.18.2
  • 下载相关依赖库（如：@solana/web3.js）

密钥对与账户管理

密钥对的基本概念

• 组成：私钥 + 公钥
• 作用：
  • 公钥用于共享和接收交易
  • 私钥用于验证账户权限，需妥善保管

创建密钥，代码如下所示：

import { Keypair } from "@solana/web3.js"

const keypair = Keypair.generate()
const publicKey = keypair.publicKey.toBase58()
const secretKey = keypair.secretKey
console.log(`公钥1：${publicKey}`)
console.log(`私钥1：${secretKey}`)

import { Keypair } from "@solana/web3.js"

const secretKey = keypair.secretKey
const keypair = Keypair.fromSecretKey(Uint8Array.from(secretKey))
console.log(`公钥2：${keypair.publicKey.toBase58()}`)
console.log(`私钥2：${keypair.secretKey}`)

Sol 代币与网络交互

Sol 的作用

• Solana 网络的原生代币，用于支付交易费用
• 1 sol = 10亿 lamport（solana里面最小的计量单位lamport）

连接网络

import { Connection, clusterApiUrl } from '@solana/web3.js'

// devnet,testnet,mainnet
const connection = new Connection(clusterApiUrl('devnet'))

领取测试代币

• 使用 faucet.solana.com/

通过代码领取测试代币

import { airdropIfRequired } from '@solana-developers/helpers'

await airdropIfRequired(connection, publicKey, amount, minBalance)

Solana 区块浏览器

用途

• 查询链上交易信息
• 查看交易时间、区块号、交易费等

常用 Solana 浏览器

• explorer.solana.com
• solscan.io

Solana 钱包与适配器

钱包概念

• 查询链上资产交易信息
• 查看交易时间、区块号、交易费等

常用钱包

• Phantom（幻影钱包）
• Solflare（太阳耀斑）
• Backpack（背包）
• Okx（欧易）

钱包适配器

• @solana/wallet-adapter-base
• @solana/wallet-adapter-wallets
• @solana/wallet-adapter-react
• @solana/wallet-adapter-react-ui

构建dApp并连接钱包

创建项目

npx create-next-app solana-wallet-connect

集成钱包

import { ConnectionProvider, WalletProvider } from '@solana/wallet-adapter-react'
import { WalletAdapterNetwork } from '@solana/wallet-adapter-base'
// import { WalletMultiButton, WalletDisconnectButton, WalletModalProvider } from '@solana/wallet-adapter-react-ui'
import { clusterApiUrl } from '@solana/web3.js'
import dynamic from "next/dynamic"
import '@solana/wallet-adapter-react-ui/styles.css'

// 动态导入钱包组件
const WalletMultiButton = dynamic(async () => (await import('@solana/wallet-adapter-react-ui')).WalletMultiButton, {
  ssr: false,
})

const WalletDisconnectButton = dynamic(
  async () => (await import('@solana/wallet-adapter-react-ui')).WalletDisconnectButton,
  { ssr: false }
)

const WalletModalProvider = dynamic(async () => (await import('@solana/wallet-adapter-react-ui')).WalletModalProvider, {
  ssr: false,
})

export default function Wallets() {
    // 定义网络
    const network = WalletAdapterNetwork.Devnet
    // 获取网络
    const endpoint = useMemo(() => clusterApiUrl(network), [network])
    // 钱包
    const wallets = useMemo(
        () => [], [])

    return (
        <ConnectProvider endpoint={endpoint}>
            <WalletProvider wallets={wallets} autoConnect>
                <WalletModalProvider>
                    <WalletMultiButton />
                    <WalletDisconnectButton />
                </WalletModalProvider>
            </Walletprovider>
        </ConnectProvider>
    )
}

访问账户信息

读取账户余额

import { useWallet, useConnection } from '@solana/wallet-adapter-react'

const WalletBalance = () => {
    const { connection } = useConnection()
    const { publicKey } = useWallet()
    const [balance, setBalance] = useState(0)

    useEffect(() => {
      const getBalance = async () => {
        if (!publicKey) return
        const balance = await connection.getBalance(publicKey)
        setBalance(balance)
        console.log(`钱包余额：${balance / LAMPORTS_PER_SOL} SOL`)
        return balance
      };

      getBalance()
    }, [connection, publicKey])
    
    return (
      <div className="flex flex-col gap-2">
        <div>
          <b>地址：</b>
          {publicKey?.toBase58()}
        </div>
        <div>
          <b>余额：</b>
          {balance / LAMPORTS_PER_SOL} SOL
        </div>
      </div>
    )
 }

实时监听余额变化

import { useConnection } from '@solana/wallet-adapter-react'
import { LAMPORTS_PER_SOL } from '@solana/web3.js'

const { connection } = useConnection()
connection.onAccountChange(publicKey, updatedAccountInfo => {
    setBalance(updatedAccountInfo.lamports / LAMPORTS_PER_SOL)
})

发送交易

创建交易

const tx = new Transaction()
tx.add(SystemProgram.transfer({
    fromPubkey, 
    toPubkey, 
    lamports
}))

发送交易

const signature = await sendTransaction(tx, connection)
console.log(`Transaction sent: ${signature}`)

具体代码实现

直接移步到github仓库下载查看：github.com/jackchen012...

总结

• 理解 Web3 和 Solana 的核心概念
• 掌握密钥对和账户的管理
• 使用钱包工具进行安全交互
• 构建简单的 dApp，并实现钱包连接和交易功能