Zenn
🦔

Hedgehog 【open-source, client-side Ethereum wallet】vo2

2023/02/15に公開
npm
JavaScript
Ethereum
Web3
tech

はじめに

Hedgehogについて解説する第二弾です。今回は実際のプロジェクトにHedgehogを導入する際のセットアップについて解説します。
https://audiusproject.github.io/hedgehog-docs/#client-side-setup

How To

Audius側が提供しているdemoのソースコードを見ていきますが、概観を説明するので読み込まずとも理解できるかと思います。
https://github.com/AudiusProject/hedgehog

クライアント側の設定

認証情報

"POST /authentication"
3つのカラム情報(iv, cipherText, lookupKey)を持つレコードを作成します。

"GET /authentication"
lookupkeyを取得します

ユーザー情報

"POST /users"
2つのカラム情報（userName, walletAddress）を持つレコードを作成します。

makeRequestToService

const { Hedgehog, /*WalletManager, Authentication */ } = require('@audius/hedgehog')
const axios = require('axios')

const makeRequestToService = async (axiosRequestObj) => {
  axiosRequestObj.baseURL = 'http://hedgehog.base-url.com'

  try {
    const resp = await axios(axiosRequestObj)
    if (resp.status === 200) {
      return resp.data
    } else {
      throw new Error(`Server returned error: ${resp.status.toString()} ${resp.data['error']}`)
    }
  } catch (e) {
    console.error(e)
    throw new Error(`Server returned error: ${e.response.status.toString()} ${e.response.data['error']}`)
  }
}

まずはヘルパー関数です。作成したサーバーに対してXHRを行いステータスを受け取ります。

XMLHttpRequest (XHR) は、非同期なデータの通信を実現するための API です。
https://hakuhin.jp/js/xmlhttprequest.html#XHR_00 より

/**
 * @param {Object} obj contains {iv, cipherText, lookupKey}
 */
const setAuthFn = async (obj) => {
  await makeRequestToService({
    url: '/authentication',
    method: 'post',
    data: obj
  })
}

/**
 * @param {Object} obj contains {walletAddress, username}
 */
const setUserFn = async (obj) => {
  await makeRequestToService({
    url: '/user',
    method: 'post',
    data: obj
  })
}

/**
 * @param {Object} obj contains {lookupKey}
 */
const getFn = async (obj) => {
  return makeRequestToService({
    url: '/authentication',
    method: 'get',
    params: obj
  })
}

setAuthFn
認証情報(iv, cipherText, lookupKey)を登録します。

getFn
認証情報(lookupkey)を取得します。

setUserFn
ユーザー情報(userName, walletAddress)を登録します。

使用方法

const hedgehog = new Hedgehog(getFn, setAuthFn, setUserFn)

// wallet is an `ethereumjs-wallet` object that can be used to sign transactions
let wallet = null

try {
  if (hedgehog.isLoggedIn()) {
    wallet = hedgehog.getWallet()
  }
  else {
    // Prompt user for username/password input for login or signup
    wallet = await hedgehog.login('username', 'password')
    // or
    wallet = await hedgehog.signUp('username', 'password')
  }
}
catch(e) {
  console.error(e)
}

以下のような流れで処理を行っています。

アカウントの資金管理

HedgehogはMetamaskと同様にクライアントサイドでウォレットを作成・管理するため、ウォレットへの資金供給の問題は依然として存在します。ブロックチェーンから情報の読み取りだけ行う場合は取引手数料はかかりませんが、情報を書き込む場合には手数料が発生してきます。(popupが表示されるアレです)

Hedgehogはトランザクションごとに逐一承認が必要である手間を軽減しようとしています。
主に二つの手段が考えられます。

  1. ウォレット作成時に資金を付与する
  2. EIP-712を活用する

ウォレット作成時に資金を付与する
ウォレット作成とともに少額のトークンを付与することで、トランザクションにかかる費用を負担することが出来ます。

EIP-712を活用する
従来Metamaskの承認popupはデータがそのまま表示されていたため、ユーザーがトランザクションが正しいか分かりずらいものになっていました。EIP712はその点を改善しトランザクションを検証しやすくしているプロトコルです。
EIP712の詳しい内容については後日別記事で書こうと思います。

感想

Node Packageで提供されているので、web3の技術理解がなくともウォレットを作れる感がありました。
次回は簡単なデモを作ってみたいと思います。

Discussion