Get Started

まずはサンプルアプリケーションを使ってみましょう。

事前準備

サンプルアプリケーションの動作のために、yarnとndenvを使用しています。

セットアップ

リポジトリをクローンし、Node.jsのインストールを行います。

git clone git@github.com:uniqys/TxProxy.git
cd TxProxy
ndenv install
1
2
3

Node.jsのインストールが完了したら、以下のシェルスクリプトでサンプルアプリケーションを実行することができます。

cd sample
./setup.sh
./start.sh [your access token]
1
2
3

setup.sh では、パッケージのインストールとサンプルコントラクトのデプロイを行います。 デプロイに必要なアカウントの生成およびテストネットのETHの取得が行われます。 途中、アカウントを保存する際のパスワードが要求されるので、任意のパスワードを設定してください。

start.sh では、アクセストークンを使用してサンプルアプリケーションを動作させます。 サンプルアプリケーションのサーバーがTransaction ProxyのAPIを使用するためのアクセストークンを設定する必要があります。

アクセストークンは、マネジメントコンソールから取得することができます。

動作について

このサンプルアプリケーションは、メッセージを書き込むシンプルなDAppです。 Post Messageをクリックすることで、メッセージが書き込まれます。

本サービスの提供しているライブラリを用いて、トランザクションを署名し、代理発行を行います。

// sample/app/frontend/components/Messages.vue L152

async created () {
  const network = await this.web3.eth.net.getId()
  const contract = new this.web3.eth.Contract(artifact.abi, artifact.networks[network].address)
  // set proxy provider
  const base = this.web3.currentProvider
  const proxy = new ProxyProvider(base, tx => this.sendTx(tx))
  const agent = new AgentProvider(proxy)
  this.agentManager = agent.manager
  contract.setProvider(agent)
  this.contract = contract
}
1
2
3
4
5
6
7
8
9
10
11
12
13

EthereumのネットワークはRopstenを選択してください。

Settingsの send transaction via TxProxy が有効になった状態では、Transaction Proxy経由でトランザクションが実行されます。 この際に、手元のWeb3で署名が行われ、サンプルのAPIサーバへ署名済みトランザクションを送信、サーバから本サービスへ転送されます。 アカウントがETHを持っている場合は、この設定を無効にすることで、通常通りのトランザクションとして、本サービスを経由せずトランザクションが実行できます。

また、new Agentをクリックすることで、Transaction ProxyのAgentが作成されます。 Agentを作成することで、Settingsの use Agent for existing contract を有効にすることができます。 これにより、Agentを経由して、既存のコントラクトに対応することが可能です。

// sample/contract/contracts/Messages.sol

// TxProxy対応のメソッド
function postMessage(address _x, string _message) public {
    address _sender = sender(_x);
    _postMessage(_sender, _message);
}

// 通常のメソッド
function postMessageTraditional(string _message) public {
    _postMessage(msg.sender, _message);
}
1
2
3
4
5
6
7
8
9
10
11
12

APIサーバは、以下のように署名済みのトランザクションを受け取り、本サービスのAPIを呼び出しています。 この際に、アクセストークンが使用されています。

// sample/app/server/app.ts

.post('/proxy', BodyParser(), async (ctx) => {
  const tx = ctx.request.body as SignedTxForProxy
  logger('proxy request from %s', tx.from)
  // NOTE: check user login?
  try {
    const res = await txProxy.post('/proxy', tx)
    if (!res.data.transactionHash) {
      logger('invalid response: %o', res.data)
      ctx.throw(500)
    }
    ctx.body = { transactionHash: res.data.transactionHash }
  } catch (err) {
    logger('failed proxy tx: %d %s', err.response.status, err.response.data)
    ctx.throw(500, err.response.data)
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18