1.0.64 • Published 3 years ago

@do-killer/dodo-wallet2 v1.0.64

Weekly downloads
-
License
MIT
Repository
-
Last release
3 years ago

dodo-web 项目抽出来的钱包模块,意图独立钱包相关的逻辑,方便维护升级,也希望可以在将来的其他项目中直接引用,目前是 Init 版本,仅规范了一些用法和一部分监听逻辑

使用(可参照 example)

初始化

import { initWallet, WalletReducer } from 'dodo-wallet';
import { createStore, combineReducers, compose, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import mixpanel from 'mixpanel-browser';
import { enUS as walletEnUS, zhCN as walletZhCN } from 'dodo-wallet';

mixpanel.init('8b3e8750fd267914f7911af086a5e5d7');

// ... 处理多语言

const store = createStore(combineReducers(WalletReducer), undefined, compose(applyMiddleware(thunkMiddleware)));
initWallet({
  walletConfig: {
    ETH_NETWORK: 'mainnet',
    PORTIS_ID: 'portis'
  },
  customChainConfig: {},
  projectStore: store,
  projectMixpanel: mixpanel,
});

initWallet 初始化一些环境变量级别的配置和项目本身的 Store,参数说明:

walletConfig: {
  ETH_NETWORK, // 初始化web3Modal以及指定默认ChainId
  PORTIS_ID    // 初始化Portis
}
customChainConfig // 选填,自定义配置,目前支持multicallAddr字段,用于打包RPC查询请求
store // 项目的Store,WalletReducer在项目初始化store的时候要放到Reducers里,```state.dodoWallet```就是钱包的reducer

API

Hooks

useDODOWallet(); // 自动连接浏览器插件钱包,监听TokenList变化和ProxyAddress变化加载TokenList的Balance和Allowance
useBlockNumberTimer(); // 轮询区块高度,每13秒查询一次
useBalancesTimer(); // 轮询ETH余额,每13秒查询一次

Actions,举例两个特殊的 Action,setTokens setProxyAddress,他们除了更新 Reducer 数据外,还会触发一些其他的逻辑。使用useDODOWallet()时,初始 Store 里的 Tokens 和 ProxyAddress 是undefined,当 Tokens 和 ProxyAddress 发生改变时会去查询 Balance 和 Allowance,意味着只要有 TokenList,并且连接钱包成功获取到钱包地址,那么就会去加载一次全部 Token 的 Balance,同时如果存在 ProxyAddress,那么就会加载一次全部的 Allowance。这里没有轮询的逻辑,如果需要更新数据则需要手动执行loadTokenBalancesloadTokenAllowances

Selectors,如果是一次性的查询,可以直接用getCurrentAccount()方法获取到当前连接到的钱包地址,如果需要 Hooks 监听状态变化,则可以使用useSelector(getCurrentAccount)

web3,定义了一些 web3 方法,如connectToWallet连接钱包。也可以通过getWeb3()来直接获取一个 web3 实例。

开发流程

根目录执行yarn安装依赖和本地打包 package 文件

建立本地 package 软链接

yarn link

cd dodo-wallet\node_modules\react
yarn link

cd dodo-wallet\node_modules\react-dom
yarn link

cd dodo-wallet\node_modules\react-redux
yarn link

cd dodo-wallet\node_modules\styled-components
yarn link

cd dodo-wallet\node_modules\react-i18next
yarn link

进入到example/路径或 dodo-web 项目下

执行

yarn
yarn link dodo-wallet react react-dom react-redux react-i18next styled-components
yarn run start

运行 example,默认写了 3000 端口,浏览器打开页面进行调试