jimmychu0807

mkdir ui-tutorial
cd ui-tutorial

# -- 安装 Rust 及 Substrate
#   更详细的安装指引可参考:
#   https://substrate.dev/docs/en/overview/getting-started
curl https://getsubstrate.io -sSf | bash

# -- 下载 Substrate Node Template，编译并运行起来
git clone https://github.com/substrate-developer-hub/substrate-node-template node-template

jimmychu0807

import { useSubstrate } from './substrate-lib';
import { TxButton } from './substrate-lib/components';

//...

function main (props) {
  //...
  return (
    <Grid.Column>
      <h1>Template Module</h1>

jimmychu0807

//...
import { SubstrateContextProvider, useSubstrate } from './substrate-lib';
import { DeveloperConsole } from './substrate-lib/components';

//...
function Main() {
  const [accountAddress, setAccountAddress] = useState(null);
  const { apiState, keyring, keyringState } = useSubstrate();
  const accountPair =
    accountAddress &&

jimmychu0807

api.tx.my_pallet.dispatch_call(params).signAndSend(accountPair, 回调函数)

jimmychu0807

target/release/node-template purge-chain --dev

jimmychu0807

const accountPair = keyring.getPair(accountAddress);

jimmychu0807

useEffect(() => {
  let unsubscribe;
  api.query.templateModule.something(newValue => {
    // The storage value is an Option<u32>
    // So we have to check whether it is None first
    // There is also unwrapOr
    if (newValue.isNone) {
      setCurrentValue('<None>');
    } else {
      setCurrentValue(newValue.unwrap().toNumber());

jimmychu0807

{
  //外部交易函数
  //  这个参看回 `pallet/template/src/lib.rs` 的名字
  tx: api.tx.<模块名字>.<extrinsic 名字>
  //外部交易函数的输入参数数组
  params: [...]
}

jimmychu0807

let unsubscribe;
api.query.templateModule.something(function(val) {
  // 回调函数
  // 在这里设置 UI 里使用的变量。
}).then(unsub => {
  //取消订阅函数
  unsubscribe = unsub;
})

jimmychu0807

api.query.<pallet_名字>.<pallet 存储名字>(回调函数)