jimmychu0807

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

//...

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

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

// This module's storage items.
decl_storage! {
  trait Store for Module as TemplateModule {
    Something get(fn something): Option;
  }
}

jimmychu0807

{
  ...,
  "CUSTOM_TYPES": {
    "Price": {
      "dollars": "u32",
      "cents": "u32",
      "currency": "Vec"
    },
  }
}

jimmychu0807

const val = await api.query.templateModule.something();

jimmychu0807

api.tx.my_pallet.dispatch_call(params).signAndSend(accountPair, 回調函數)

jimmychu0807

{
  "PROVIDER_SOCKET": "ws://<你的 ws/wss 地址>"
}

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

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

//...

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