Uniqys Transaction Proxy Documentation

クライアントライブラリ

本サービスの提供しているクライアント(フロントエンド)ライブラリについて説明します。

ライブラリの導入

npmのパッケージとなっているので、お好みのパッケージマネージャで追加してください。

npm install --save tx-proxy-lib
1

使い方

本ライブラリは、Web3のProviderとして動作するProxyProviderを提供しています。 Providerとして設定し、トランザクションを発行する(eth_sendTransaction を行う)ことで動作します。 署名後に呼び出されるハンドラにおいて、デベロッパのAPIサーバを呼び出し、実際のトランザクションのハッシュを返すようにします。

import { ProxyProvider, senderPlaceholder } from 'tx-proxy-lib'

// Providerの準備
const baseProvider = Web3.givenProvider
const proxyAddress = '0xXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
const proxyProvider = new ProxyProvider(
  baseProvider, // ベースとなるProvider
  proxyAddress, // Proxyコントラクトのアドレス
  // トランザクションを発行するハンドラ, 実際のトランザクションのハッシュを Promise<string> で返してください。
  async signedTxForProxy => {
    // ユーザの署名されたトランザクションをデベロッパのAPIサーバに送信します
    const res = await axios.post('your end point', signedTxForProxy))

    // トランザクションハッシュを返却します
    return res.data.transactionHash
  }
)
const web3 = new Web3(proxyProvider)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

トランザクションの発行

トランザクションのオプションで proxy: true を設定して呼び出すとProxyを利用したトランザクションが発行されます。 メソッドの第一引数は senderPlaceholder を指定する必要があります。

// トランザクションの発行(コントラクトの実行)
// 通常と同じようにWeb3の機能を使ってトランザクションを発行できます
const contract = new web3.eth.Contract(abi, contractAddress)
// 第一引数にはプレースホルダとしてsenderPlaceholder(=address(0))を指定します。
const promiEvent = contract.methods.foo(senderPlaceholder, arg).send({ from: userAddress, proxy: true })
1
2
3
4
5

Proxyを利用しない場合

ProxyProviderはトランザクションのオプションで proxy が設定されていない、またはfalseが設定されている場合はプロキシを行いません。 この場合、トランザクションの発行にはgasに相当するETHが必要です。

// トランザクションの発行(コントラクトの実行)
const promiEvent = contract.methods.foo(senderPlaceholder, arg).send({ from: userAddress })
1
2
// OR
const promiEvent = contract.methods.foo(senderPlaceholder, arg).send({ from: userAddress, proxy: false })
1
2

Agentの利用

スマートコントラクトで説明している用に、DAppがTxProxyを経由した呼び出しに対応するためにはコントラクトでの対応が必要です。 デプロイ済みのDAppなどでこの対応ができない場合は、AgentProviderを利用することでユーザの代わりとなるAgentを経由してDAppを呼び出させることが可能です。 この場合、署名を行うユーザアドレスと、DApp側で認識されるアドレスが異なる(DAppからはAgentコントラクトのアドレスが msg.sender となる)のに注意が必要です。

import { AgentProvider } from 'tx-proxy-lib'

// Providerの準備
const baseProvider = Web3.givenProvider
const agentManagerAddress = '0xXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
const agentProvider = new AgentProvider(
  baseProvider, // ベースとなるProvider
  agentManagerAddress, // AgentManagerコントラクトのアドレス
)
const web3 = new Web3(agentProvider)
1
2
3
4
5
6
7
8
9
10

また、ProxyProviderと組み合わせる場合は、AgentProviderのbaseProviderがProxyProviderとなるようにします。

import { ProxyProvider, AgentProvider } from 'tx-proxy-lib'

// Providerの準備
const baseProvider = Web3.givenProvider
const proxyProvider = new ProxyProvider(baseProvider, proxyAddress, handler)
const agentProvider = new AgentProvider(proxyProvider, agentManagerAddress)
const web3 = new Web3(agentProvider)
1
2
3
4
5
6
7

Agentの作成と参照

AgentProviderからアクセスできるmanagerから、Agentの作成と参照が可能です。

// ProxyProviderを設定している場合はproxy: trueを設定してproxy経由での作成も可能です
const promiEvent = agentProvider.manager.newAgent({ from: userAddress })
1
2
// もしAgentが作成されていない場合はundefinedが返ります
const agentAddress = agentProvider.manager.agentOf(userAddress)
1
2

トランザクションの発行

トランザクションのオプションで agent: true を設定して呼び出すとAgentを利用したトランザクションが発行されます。 ProxyProviderを設定している場合は proxy: true を設定してProxyを利用することも可能です。 Agentが作成されていない場合はエラーとなります。

// トランザクションの発行(コントラクトの実行)
// 通常と同じようにWeb3の機能を使ってトランザクションを発行できます
const contract = new web3.eth.Contract(abi, contractAddress)
const promiEvent = contract.methods.bar(arg).send({ from: userAddress, agent: true })
1
2
3
4

← API →