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を設定します。
統合の詳細
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のコードスニペットをご覧ください。
Sequence WaaSの初期化
export const sequenceWaas = new SequenceWaaS(
{
network: initialNetwork,
projectAccessKey: projectAccessKey,
waasConfigKey: waasConfigKey,
},
localStorage,
null,
new KeychainSecureStoreBackend()
);
（詳細はwaasSetup.tsファイルをご参照ください）
サインイン
初期化済みの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));
}
ウォレット操作
サインイン後は、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,
},
],
});
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
Apple・Googleログイン用
- expo-web-browser
- expo-auth-session
- @invertase/react-native-apple-authentication
メールログイン用
- react-native-url-polyfill
- web-streams-polyfill
