React Native Expo でトランザクションを送信する方法

タグ

React NativeSymbol

公開日

March 21, 2023

React Native Expo環境でsymbol-sdkを用いて、トランザクションを送信するまでを解説していきます。

まず、expoを用いて、プロジェクトを生成します。

$ expo init

今回は、templateにTypeScript blankを指定します。

使用するパッケージをインストールします。

$ npm i crypto-browserify stream-browserify events process symbol-sdk rxjs

cryptoモジュール等、Node.jsのモジュールはReact Nativeでは利用できないため、モジュールを代替するための設定を行います。

アプリケーションのディレクトリに、「metro.config.js」と「shim.js」を作成します。

metro.config.jsは、Expoアプリケーションで用いられる、JavaScriptバンドラである、metroの設定を行うためのファイルです。

metro.config.js

const { getDefaultConfig } = require('expo/metro-config');
const config = getDefaultConfig(__dirname);


module.exports = {
  ...config,
  resolver: {
    extraNodeModules: {
      crypto: require.resolve('crypto-browserify'),
      stream: require.resolve('stream-browserify')
    },
  },
};

extraNodeModulesで、パッケージ名と代替したいパッケージのマッピングを行います。

今回は、cryptoパッケージ、streamパッケージをbrowserifyされたモジュールへと置き換える設定を行います。

* 注意: crypto-browserifyではメッセージの暗号化などはできません。

参考:

Configuring Metro | Metro

A Metro config can be created in these three ways (ordered by priority):

facebook.github.io

shim.js

if (typeof __dirname === 'undefined') global.__dirname = '/';
if (typeof __filename === 'undefined') global.__filename = '';
if (typeof process === 'undefined') {
  global.process = require('process');
} else {
  const bProcess = require('process');
  for (var p in bProcess) {
    if (!(p in process)) {
      process[p] = bProcess[p];
    }
  }
}

if (typeof Buffer === 'undefined') global.Buffer = require('buffer').Buffer;

global.location = global.location || { port: 80 };
const isDev = typeof __DEV__ === 'boolean' && __DEV__;
process.env['NODE_ENV'] = isDev ? 'development' : 'production';
if (typeof localStorage !== 'undefined') {
  localStorage.debug = isDev ? '*' : '';
}

ここでは、Bufferやprocessといったモジュールの設定を行います。

最後に、App.tsxで、shim.jsを読み込むと準備完了です。

import "./shim";

実際に、Transactionを発生させてみます。

トランザクションを作って署名し、アナウンスをする関数を作成します。

設定値

const GENERATION_HASH =
  "49D6E1CE276A85B70EAFE52349AACCA389302E7A9754BCF1221E79494FC665A4";

const NODE_URL = "https://sym-test-04.opening-line.jp:3001";
const EPOCH_ADJUSTMENT = 1667250467;

送信者の秘密鍵、受信者のアドレスは所持しているアカウントから入力をお願いします。

const send = () => {
    const acc = Account.createFromPrivateKey(
      "[YOUR PRIVATE KEY]",
      NetworkType.TEST_NET
    );

    const tx = TransferTransaction.create(
      Deadline.create(EPOCH_ADJUSTMENT),
      Address.createFromRawAddress("[RECEIPIENT ADDRESS]"),
      [],
      PlainMessage.create("Hello Symbol"),
      NetworkType.TEST_NET
    ).setMaxFee(2000000);

    const signedTx = acc.sign(tx, GENERATION_HASH);

    const repo = new RepositoryFactoryHttp(NODE_URL);

    const transactionHttp = repo.createTransactionRepository();

    transactionHttp.announce(signedTx);
  };

ボタンを配置し、押下すると、send関数を実行します。

return (
    <View style={styles.container}>
      <Button onPress={send} title="SEND TRANSACTION" />
    </View>
  );

App.tsx

import "./shim";
import { Button, StyleSheet, View } from "react-native";
import {
  Account,
  Address,
  Deadline,
  NetworkType,
  PlainMessage,
  RepositoryFactoryHttp,
  TransferTransaction,
} from "symbol-sdk";

const GENERATION_HASH =
  "49D6E1CE276A85B70EAFE52349AACCA389302E7A9754BCF1221E79494FC665A4";

const NODE_URL = "https://sym-test-04.opening-line.jp:3001";
const EPOCH_ADJUSTMENT = 1667250467;

export default function App() {
  const send = () => {
    const acc = Account.createFromPrivateKey(
      "[YOUR PRIVATE KEY]",
      NetworkType.TEST_NET
    );

    const tx = TransferTransaction.create(
      Deadline.create(EPOCH_ADJUSTMENT),
      Address.createFromRawAddress("[RECEIPIENT ADDRESS]"),
      [],
      PlainMessage.create("Hello Symbol"),
      NetworkType.TEST_NET
    ).setMaxFee(2000000);

    const signedTx = acc.sign(tx, GENERATION_HASH);

    const repo = new RepositoryFactoryHttp(NODE_URL);

    const transactionHttp = repo.createTransactionRepository();

    transactionHttp.announce(signedTx);
  };

  return (
    <View style={styles.container}>
      <Button onPress={send} title="SEND TRANSACTION" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#eee",
    alignItems: "center",
    justifyContent: "center",
  },
});

画面は以下の画像のようになります。

SEND TRANSACTION ボタンをタップすると、トランザクションが生成・署名・アナウンスされます。

Symbol Block Explorer

testnet.symbol.fyi

以上の手順で、React Native Expo環境でSymbolブロックチェーン上にトランザクションを発行することができます。