从前端开发角度理解如何与 Substrate 协作

Pallet_staking: {  {    Constants:  { //不可变的常量, 节点启动时就写入链上,除非整个链升级否则无法更改
        min_staking_amount: u32        .....    }    Storages:  {  //  可变存储量, 等价于整个链的各种state, 是链的主要数据                  // 在运行中通过Call中的方法来CRUD                    // 任何时刻的state, 都会被区块链以区块的形式存储下来,                     // 因此, 在区块链中所有state的历史变化都是可查的         Record: (Acc, u32, u64),        ....    }    Calls: {          //类似一个实例化的interface, 主要用于操作Storage        // 一般会返回一个Result枚举类型, T或者Error的一种,         // T是泛型, 类似typescript中的Any, 但实际实例化时, 会给T确定一个类型        Staking(Acc, u32) -> Result<T, Error>        ....     }
    Events: {  //本质是一个枚举, Call运行中或运行完毕dispatch一个或者多个事件                // 虽然不是强制, 但是Call运行完毕dispatch一个事件则是最佳做法                //类似subquery等数据工具, 就非常依赖链上的Event来进行历史采集       StakingSuccessed(Record),       .....
    }
    Errors: { // 本质也是一个枚举, 一个Call要么只能返回一个T                // 或者dispatch一个Event, 要么只能返回Error      InsufficientBalance(Acc, Balance)    }
}

{  "magicNumber": 1635018093,  "metadata": {    "v13": {      "modules": [        ....  // 主要关注的部分, 详细请见下文      ],      "extrinsic": {        "version": 4,        "signedExtensions": [          "CheckSpecVersion",          "CheckTxVersion",          "CheckGenesis",          "CheckMortality",          "CheckNonce",          "CheckWeight",          "ChargeTransactionPayment"        ]      }    }  }}

        {          "name": "TemplateModule",          "**storage**": {            "prefix": "TemplateModule",            "items": [              {                "name": "Something",                "modifier": "Optional",                "type": {                  "plain": "u32"                },                "fallback": "0x00",                "docs": []              }            ]          },          "**calls**": [            {              "name": "do_something",              "args": [                {                  "name": "something",                  "type": "u32"                }              ],              "docs": [                " An example dispatchable that takes a singles value as a parameter, writes the value to",                " storage and emits an event. This function must be dispatched by a signed extrinsic."              ]            },            {              "name": "cause_error",              "args": [],              "docs": [                " An example dispatchable that may throw a custom error."              ]            }          ],          "**events**": [            {              "name": "SomethingStored",              "args": [                "u32",                "AccountId"              ],              "docs": [                " Event documentation should end with an array that provides descriptive names for event",                " parameters. [something, who]"              ]            }          ],          "**constants**": [],          "**errors**": [            {              "name": "NoneValue",              "docs": [                " Error names should be descriptive."              ]            },            {              "name": "StorageOverflow",              "docs": [                " Errors should have helpful documentation associated with them."              ]            }          ],          "index": 8        },

    const { ApiPromise, WsProvider } = require('@polkadot/api');        // Construct    const wsProvider = new WsProvider('ws://127.0.0.1:9944');    // 如没有运行 node-template，也可试连到波卡主网上： `wss://rpc.polkadot.io`.    const api = await ApiPromise.create({ provider: wsProvider });

    const { magicNumber, metadata } = await api.rpc.state.getMetadata();        console.log("Magic number: " + magicNumber);    console.log("Metadata: " + metadata.raw);

    // api.consts.<pallet 名称>.<常量名称>. 比如:    const main = async() => {      const existentialDeposit = await api.consts.balances.existentialDeposit    }

读取`storage`:

    // api.query.<pallet 名称>.<存储名称>. 比如:    const main = async() => {      const acct = await api.query.system.account(alice.address);    }

//调用`call`( 或者说 **发送交易**)      await api.tx.balances.transfer(dest.address, amt)      .signAndSend(src, res => {        console.log(`Tx status: ${res.status}`);      });

        // Subscribe to balance changes for 2 accounts, ADDR1 & ADDR2 (already defined)        const unsub = await api.query.system.account.multi([ADDR1, ADDR2], (balances) => {        const [{ data: balance1 }, { data: balance2 }] = balances;                console.log(`The balances are ${balance1.free} and ${balance2.free}`);        });

        // Subscribe to the timestamp, our index and balance        const unsub = await api.queryMulti([         api.query.timestamp.now,         [api.query.system.account, ADDR]        ], ([now, { nonce, data: balance }]) => {         console.log(`${now}: balance of ${balance.free} and a nonce of ${nonce}`);        });

    以上的开发模式有两点要注意：        - 作查询时，传入一个 回调函数 (callback)。这是个订阅函数。你在这里更新你 react 的 state 的话，就不会出现为什么链上数据改了，而前端没有更新数据的问题。    - `unsub`：这个 `unsub` 是一个函数，用来取消这个订阅的。如果是 react/前端开发，你在 `ComponentWillUnmount()`，或 `useEffect()` 里，就会 call 这个取消订阅函数。整个模式类似以下：

        useEffect(() => {         let unsub = null;                 const asyncFetch = async () => {           unsub = await api.query.pallet.storage(             param,             result => console.log(`Result: ${result}`)           );         };                 asyncFetch();                 return () => {           unsub && unsub()         }        }, [api, keyring]);

        // Create alice (carry-over from the keyring section)        const alice = keyring.addFromUri('//Alice');                // Make a transfer from Alice to BOB, waiting for inclusion        const unsub = await api.tx.balances         .transfer(BOB, 12345)         .signAndSend(alice, (result) => {           console.log(`Current status is ${result.status}`);                   if (result.status.isInBlock) {             console.log(`Transaction included at blockHash ${result.status.asInBlock}`);           } else if (result.status.isFinalized) {             console.log(`Transaction finalized at blockHash ${result.status.asFinalized}`);             unsub();           }         });

发起交易 -> 输入交易信息 -> 用户对交易进行签名 -> 区块链确认签名正确 -> 执行交易 ->返回事件或者错误

import {  web3Accounts,  web3Enable,  web3FromAddress,  web3ListRpcProviders,  web3UseRpcProvider} from '@polkadot/extension-dapp';
// 这一步在所有动作之前完成, const allInjected = await web3Enable('cambio network');
if (extensions.length === 0) {    // 如果钱包插件没有安装, 或者没能获得授权,  应该做处理    return;}

const allAccounts = await web3Accounts()