カスタム構成オプション
構成セクションでは、SequenceConnect
ラッパーにオプションを渡すことで Web SDK をカスタマイズできます。
開発者は SequenceConnect
ラッパーに構成オプションを渡すことで Web SDK の体験をカスタマイズできます。
これらのオプションを使ってキットを設定する方法は次の通りです。
構成の概要
利用可能な構成カスタマイズオプションは以下の通りです。詳細はこちらをご覧ください。
カスタムスタイリングとデザイン
Web SDK の接続モーダルの見た目は、defaultTheme
構成オプションにカスタムテーマオブジェクトを指定することでカスタマイズできます。カスタムスタイリングの実装例は以下の通りです。
利用可能なテーマ変数
カスタマイズできるテーマ変数は以下の通りです。
これらの変数は任意の組み合わせで上書きでき、値は有効な CSS カラー形式(rgba、hex、名前付きカラーなど)で指定できます。
利用可能なオプション
Sequence アプリ開発
appName
型 | デフォルト値 |
---|---|
string | 未定義 |
ユーザーには表示されない内部ソフトウェア用の名前です。
projectAccessKey
型 | デフォルト値 |
---|---|
string | 未定義 |
Sequence Builder から取得できる、必要なプロジェクトアクセスキーです。
ethAuth
as EthAuthSettings
waasConfigKey
型 | デフォルト値 |
---|---|
string | 未定義 |
WaaS ウォレット用に Sequence Builder で設定された Embedded Wallet 構成キーです。
ネットワーク
chainIds
型 | デフォルト値 |
---|---|
number[] | 未定義 |
チェーン ID のリスト。例:[1, 137]
defaultChainId
型 | デフォルト値 |
---|---|
number | 未定義 |
署名やトランザクションで最初に使われるチェーン ID です。
UI
モーダルインターフェースを拡張するユーザーインターフェース関連のパラメータです。
サインインモーダルの構成(signIn
)
signIn
オブジェクトはサインインモーダルの設定に使います。
signIn.logoUrl
型 | デフォルト値 |
---|---|
string | 未定義 |
サインインモーダルに表示するロゴの URL です。
signIn.projectName
型 | デフォルト値 |
---|---|
string | 未定義 |
サインインモーダルに表示するプロジェクト名です。
signIn.useMock
型 | デフォルト値 |
---|---|
boolean | 未定義 |
true
に設定すると wagmi mock connector を使い、ライブのブロックチェーンリクエストができなくなります。
position
型 | デフォルト値 |
---|---|
string | center |
position パラメータは各種モーダルの画面上の位置を決定します。指定できる値は以下の通りです。
- center
- middle-right
- middle-left
- top-center
- top-right
- top-left
- bottom-center
- bottom-right
- bottom-left
defaultTheme
型 | デフォルト値 |
---|---|
string または object | dark |
defaultTheme はモーダルのスタイリングに使われるカラーパレットを決定します。指定できる値は以下の通りです。
- ‘light’
- ‘dark’
- object
特定の色はテーマオーバーライドオブジェクトを渡すことで上書きできます。Sequence Builder には Web SDK の色を試せる便利なプレイグラウンドがあります。
ウォレット
ウォレット構成オプションに関するパラメータです。
disableAnalytics
型 | デフォルト値 |
---|---|
boolean | 未定義 |
Sequence Builder プロジェクトに接続されているアナリティクス機能のオン・オフを切り替える方法です。
displayedAssets
型 | デフォルト値 |
---|---|
[{ contractAddress: string, chainId: number }, …] | 未定義 |
このオプションを設定すると、ゲーム内ウォレットモーダルのメイン画面に表示するアセットを指定できます。 表示するアセットのリストを渡すことで、指定したアセットのみがメイン画面に表示されます。 何も指定しない場合は、保有しているすべてのアセットがメイン画面に表示されます。
enableConfirmationModal
型 | デフォルト値 |
---|---|
boolean | 未定義 |
トランザクション送信時に確認モーダルを有効にします。
サインインプロバイダー
ユーザーのウォレット接続を作成するための各種サインインプロバイダー:
walletConnect
型 | デフォルト値 | |
---|---|---|
false | { projectId: string } | undefined |
google
型 | デフォルト値 | |
---|---|---|
false | { clientId: string } | undefined |
apple
型 | デフォルト値 | |
---|---|---|
false | { clientId: string, redirectURI: string } | undefined |
email
型 | デフォルト値 | |
---|---|---|
boolean | { legacyEmailAuth: boolean } | undefined |
ユニバーサルデフォルトコネクタの作成
通常はSequenceKitでEmbedded Walletsの利用を推奨していますが、代替としてユニバーサルウォレット構成もご利用いただけます。wagmiのconnectors
変数を作成する際、@0xsequence/kit
パッケージからgetDefaultConnectors
関数をインポートし、こちらで取得したWallet Connect ID、デフォルトのチェーンID、アプリ名、projectAccessKey
を含めて設定してください。その後はクイックスタートの手順に従って統合を進めてください。