@do-killer/dodo-wallet
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.23 • Public • Published

    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

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

    alias 不能使用不同依赖的包

    yarn link dodo-wallet 后,dodo-wallet 下的文件会使用最近一层的 node_modules,外部的文件使用自身项目的 node_modules 。导致两者不唯一。使用 alias ,确保使用的是同一个包.

    // config-overrides.js (for create-react-app)
    const path = require('path');
    const {
      override,
      addWebpackAlias,
    } = require('customize-cra');
    
    const webpackAlias = {
      src: path.resolve(__dirname, 'src'),
    };
    if (process.env.NODE_ENV !== 'production') {
      // avoid Link leading to depends on errors
      const reactLinkPackages = [
        'react',
        'react-dom',
        'react-router-dom',
        'react-redux',
        'styled-components',
        'react-i18next',
        'redux',
      ];
      reactLinkPackages.forEach((pkg) => {
        webpackAlias[pkg] = path.resolve(__dirname, `node_modules/${pkg}`);
      });
    }
    
    const overrides = [
      addWebpackAlias(webpackAlias)
    ];
    
    module.exports = override(...overrides);

    执行

    yarn
    yarn link @dodoex-io/wallet
    yarn run start
    

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

    Add new chain

    • chainConfig.ts
    • wallet.ts registerArbitrumNetworkWithMetamask()
    • src/components/images/networks-logo/CHAIN.svg
    • NetworkMismatchDialog.ts registerMap
    • WalletsPage.ts Network networkKeyMap networkMatchChainNameMap chainLogoMap list handleChange
    • utils/wallet.ts getChainIdWithNetworkName getNetworkNameWithChainId isETHOrBSCChain ChainType getChainType validNetworkList

    Tips

    1. peerDependencies 的包直接使用 yarn add -P @owen05/dodo-sdk-v2 安装后再调用 yarn 安装之后该包会被删掉,导致 build 报错。参考 How to handle peer dependencies when developing modules 使用 install-peers-cli 和 prepare 脚本来在 yarn 之后执行 peers 的安装,而 prepare 脚本在包被其他项目安装时不会被执行,避免了安装重复的包。

    Keywords

    none

    Install

    npm i @do-killer/dodo-wallet

    DownloadsWeekly Downloads

    33

    Version

    1.1.23

    License

    MIT

    Unpacked Size

    561 kB

    Total Files

    57

    Last publish

    Collaborators

    • dodo-killer