通过plasmo的wallet扩展添加新钱包

typescript 复制代码
//添加bip39库、zustand库、ethers
pnpm add bip39
pnpm add zustand
pnpm add ethers

全局状态管理zustand,管理钱包助记词和私钥:

typescript 复制代码
//新增stores\wallet.ts文件
import * as bip39 from 'bip39';
import { HDNodeWallet } from 'ethers';
import { create } from 'zustand';

interface WalletStore {
  mnemonic: string | null
  address: string | null
  wallet: HDNodeWallet | null
  setMnemonic: (mnemonic: string | null) => void
  setAddress: (address: string | null) => void
  createWallet: () => Promise<void>
}

const DEFAULT_DERIVATION_PATH = "m/44'/60'/0'/0/0"

export const useWalletStore = create<WalletStore>((set) => ({
  address: null,
  mnemonic: null,
  wallet: null,
  setMnemonic: (mnemonic) => set({ mnemonic }),
  setAddress: (address) => set({ address }),
  createWallet: async () => {
    const mnemonic = await bip39.generateMnemonic(128)
    set({ mnemonic })
    const wallet = HDNodeWallet.fromPhrase(
      mnemonic,
      "",
      DEFAULT_DERIVATION_PATH
      )
      const walletObj = {...wallet, privateKey: wallet.privateKey}
    set({ wallet: walletObj as HDNodeWallet })
  }
}))

在popup.tsx中,点击按钮即可生成新钱包,可以去小狐狸上添加验证。

typescript 复制代码
import { useWalletStore } from "~stores/wallet";

function IndexPopup() {

  const { createWallet, wallet } = useWalletStore()

  return (
    <div className="plasmo-flex plasmo-items-center plasmo-justify-center plasmo-h-16 plasmo-w-40">
      <button onClick={async () => await createWallet()}>创建钱包</button>
      <div>{JSON.stringify(wallet)}</div>
    </div>
  )
}

export default IndexPopup

一些相关理论:

typescript 复制代码
通过BIP39协议生成助记词:
1.通过generateMnemonic API 生成一段128位的二进制随机数,即Entropy(熵)。
2.对熵进行哈希运算,截取前4位,作为校验和
3.组合熵和校验和,形成132位的二进制数。
4.分成12段,每一段是11位。
5.每一段对应词库里的一个单词,最终可以形成12个单词。(如果最开始是生成256位的二进制随机数,那么就能得到24个单词)

BIP44 派生路径: m/44'/60'/0'/0/0
m:HD树的根节点,master
44':表示BIP44协议
60':当前代币类型,60代表的是以太坊
0':账户的索引,第0个账户
0:外部链/内部链,0代表外部收款地址,在链上暴露,可以用来收款。1代表内部链,不暴露,用来找零
0:钱包地址的索引
相关推荐
清汤饺子35 分钟前
AI 编程新范式:Spec First 的四件套,让 AI 不再是"热情但跑偏的实习生"
前端·javascript·后端
坐吃山猪36 分钟前
TypeScript编程04-函数
javascript·ubuntu·typescript
LXXgalaxy37 分钟前
小程序文件上传怎么做?一套可复用的 UniApp 上传+预览 Demo
javascript·vue.js·uni-app
Cobyte1 小时前
2.响应式系统基础:依赖追踪的基础 —— 发布订阅模式(前端应用最广的设计模式)
前端·javascript·vue.js
xuankuxiaoyao1 小时前
VUE.JS实践--事件对象和计算属性
javascript·vue.js·ecmascript
朝阳5811 小时前
M3U8 下载助手油猴脚本 - 完全使用指南
前端·javascript·windows
早點睡3901 小时前
ReactNative项目OpenHarmony三方库集成实战:react-native-sensors(设备传感器)
javascript·react native·react.js
kadog1 小时前
GraphX:基于 WebGL 区间算术的 GPU 加速隐函数绘图器
前端·javascript·数学建模·webgl
上单带刀不带妹1 小时前
UniApp 页面跳转完全指南:5 种路由方式详解与实战对比
前端·javascript·vue.js·uni-app·跨端开发
Можно1 小时前
深入理解 UniApp 生命周期钩子:从页面到组件的全流程掌控
前端·javascript·vue.js