Sequence Embedded Wallet SDKは、React NativeでSequenceのEmbedded WalletやIndexerと完全に連携して利用できます。

SDKの利用例やテンプレートのダウンロードは、Embedded Wallet React Native Demoリポジトリでご覧いただけます。

​
ビデオプレビュー

​
ご自身の認証情報／キーでのセットアップ

プロジェクトのアクセスキーやその他の認証情報／キーの取得方法は、こちらのガイドをご参照ください：https://docs.sequence.xyz/solutions/builder/embedded-wallet/

​
./iosおよび./androidフォルダごとの認証情報／キーの設定手順

​
iOS

Expoを使用する場合、ios > infoPlistのapp.jsonファイルでGIDClientIDを設定できます。

手動の場合は、Googleサインイン用にInfo.plistファイルでGIDClientIDを設定します。

​
Android

Expoを使用する場合、android > intentFiltersのapp.jsonファイルでintent-filterを設定できます。

手動の場合は、Googleサインイン用にAndroidManifest.xmlファイルでintent-filterを設定します。

​
統合の詳細

1

ethersやその他の暗号関連パッケージ用のshimのセットアップ

まず、shimsのセットアップとreact-native-quick-cryptoからethers用にpbkdf2を登録する方法について、cryptoSetup.tsの内容を確認しましょう。

import { install } from "react-native-quick-crypto";

install();



import "react-native-url-polyfill/auto";

import { ReadableStream } from "web-streams-polyfill";

globalThis.ReadableStream = ReadableStream;



import crypto from "react-native-quick-crypto";

global.getRandomValues = crypto.getRandomValues;



export * from "@ethersproject/shims";



import * as ethers from "ethers";



ethers.pbkdf2.register(

  (

    password: Uint8Array,

    salt: Uint8Array,

    iterations: number,

    keylen: number,

    algo: "sha256" | "sha512"

  ) => {

    console.info("Using react-native-quick-crypto for pbkdf2");

    return ethers.hexlify(

      new Uint8Array(

        crypto.pbkdf2Sync(

          password,

          salt,

          iterations,

          keylen,

          algo === "sha256" ? "SHA-256" : "SHA-512"

        )

      )

    );

  }

);



export * from "ethers";

次に、cryptoSetup.tsをアプリのライフサイクルの早い段階で必ずインポートしてください。このデモでは、App.tsxの冒頭でインポート・設定されています。

次に、一部のshim用のエイリアスをbabel-plugin-module-resolver（開発用依存）を使ってbabel.config.jsで設定する必要があります。エイリアスの更新方法は、babel.config.jsのコードスニペットをご覧ください。

2

Sequence WaaSの初期化

export const sequenceWaas = new SequenceWaaS(

  {

    network: initialNetwork,

    projectAccessKey: projectAccessKey,

    waasConfigKey: waasConfigKey,

  },

  localStorage,

  null,

  new KeychainSecureStoreBackend()

);

（詳細はwaasSetup.tsファイルをご参照ください）

3

サインイン

初期化済みのSequence WaaSインスタンスがあれば、メール、Google、Appleでサインインできます。Googleのコード例は下記をご覧いただき、詳細はApp.tsxファイルをご確認ください。

const redirectUri = `${iosRedirectUri}:/oauthredirect`;



const scopes = ["openid", "profile", "email"];

const request = new AuthRequest({

  clientId,

  scopes,

  redirectUri,

  usePKCE: true,

  extraParams: {

    audience: webClientId,

    include_granted_scopes: "true",

  },

});



const result = await request.promptAsync({

  authorizationEndpoint: `https://accounts.google.com/o/oauth2/v2/auth`,

});



if (result.type === "cancel") {

  return undefined;

}



const serverAuthCode = result?.params?.code;



const configForTokenExchange: AccessTokenRequestConfig = {

  code: serverAuthCode,

  redirectUri,

  clientId: iosClientId,

  extraParams: {

    code_verifier: request?.codeVerifier || "",

    audience: webClientId,

  },

};



const tokenResponse = await exchangeCodeAsync(configForTokenExchange, {

  tokenEndpoint: "https://oauth2.googleapis.com/token",

});



const userInfo = await fetchUserInfo(tokenResponse.accessToken);



const idToken = tokenResponse.idToken;



if (!idToken) {

  throw new Error("No idToken");

}



try {

  const signInResult = await sequenceWaas.signIn(

    {

      idToken: idToken,

    },

    randomName()

  );



  console.log("signInResult", JSON.stringify(signInResult));

} catch (e) {

  console.log("error", JSON.stringify(e));

}
4

ウォレット操作

サインイン後は、sequenceWaasインスタンスを使ってトランザクション送信やメッセージ署名などのウォレット操作が可能です。下記のコードスニペットをご覧いただき、詳細はApp.tsxファイルをご確認ください。

// Signing a message

const signature = await sequenceWaas.signMessage({ message: "your message" });



// Sending a txn

const txn = await sequenceWaas.sendTransaction({

  transactions: [

    {

      to: walletAddress,

      value: 0,

    },

  ],

});
5

Ethers v6アップデートの移行メモ

  • react-native-quick-crypto-ethers-patch.jsや関連設定は不要になりました。ethers v6ではreact-native-quick-cryptoパッケージからpbkdf2関数を直接登録できるためです。（関連コードはcryptoSetup.tsをご参照ください。）
  • ethers移行ガイドを参考に、コードベースをethers v6へ移行できます。

​
依存パッケージ

​
必要なSequenceパッケージ

  • @0xsequence/waas
  • @0xsequence/react-native

​
その他必要な依存／shim

​
共通

  • ethers

  • ethersproject/shims

  • expo

  • react-native-quick-crypto

  • react-native-mmkv

  • react-native-keychain

  • babel-plugin-module-resolver（開発用依存）

​
Apple・Googleログイン用

  • expo-web-browser
  • expo-auth-session
  • @invertase/react-native-apple-authentication

​
メールログイン用

  • react-native-url-polyfill
  • web-streams-polyfill