LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@flowcadence

How to Configure FCL

Last updated at Posted at 2024-11-29

Previous << Authentication
Next >> Wallet Discovery

Configuration

FCLには、FCLのさまざまな側面の設定ができる仕組みがあります。(FCLの観点から考えると)ここで主な考え方は、Flow Blockchainのインスタンスを違う場所（ローカルエミュレータからテストネット、メインネット）へ移動させた時に、あなたが変更しないといけない唯一のことは（FCLの観点から再度考え）設定のみであるということです。

Setting Configuration Values

値は一度セットすればいいだけでです。 私たちはこれをできるだけ早い段階で行うことをお勧めします。 コンフィグレーションに値をセットするには、config インスタンス上でputメソッドを呼び出す必要があります。putメソッドはconfigインスタンスを返しますので、チェイニングすることができます。

import * as fcl from '@onflow/fcl';

fcl
  /* returns the config instance */
  .config()
  /* configures "foo" to be "bar" */
  .put('foo', 'bar')
  /* configures "baz" to be "buz" */
  .put('baz', 'buz');

Getting Configuration Values

configインスタンスは非同期のgetメソッドを持っています。また、コンフィグレーションが希望する内容を含んでなかった状態に備えてフォールバック値を渡すことができます。

import * as fcl from '@onflow/fcl';

fcl.config().put('foo', 'bar').put('woot', 5).put('rawr', 7);

const FALLBACK = 1;

async function addStuff() {
  var woot = await fcl.config().get('woot', FALLBACK); /* will be 5 -- set in the config before */
  var rawr = await fcl.config().get('rawr', FALLBACK); /* will be 7 -- set in the config before */
  var hmmm = await fcl.config().get('hmmm', FALLBACK); /* will be 1 -- uses fallback because this isnt in the config */

  return woot + rawr + hmmm;
}

addStuff().then((d) => console.log(d)); // 13 (5 + 7 + 1)

Common Configuration Keys

  • accessNode.api -- 通信したいFlow BlockchainのAccess NodeのAPI URL
  • app.detail.title - アプリケーションのタイトル。ウォレットやその他のサービスから要求されることがあります。WalletConnectプラグインとWallet Discoveryサービスで使用されています。(INTRODUCED @onflow/fcl@0.0.68)
  • app.detail.icon - アプリケーションアイコンのURL。ウォレットやその他のサービスから要求されることがあります。WalletConnectプラグインとWallet Discoveryサービスで使用されています。(INTRODUCED @onflow/fcl@0.0.68)
  • app.detail.description - アプリケーションの説明。ウォレットやその他のサービスから要求されることがあります。WalletConnectプラグインとWallet Discoveryサービスで使用されています。(INTRODUCED @onflow/fcl@1.11.0)
  • app.detail.url - アプリケーションのURL。ウォレットやその他のサービスから要求されることがあります。WalletConnectプラグインとWallet Discoveryサービスで使用されています。(INTRODUCED @onflow/fcl@1.11.0)
  • challenge.handshake -- FCLにウォレットまたはWallet Discoveryメカニズムを指定します (DEPRECATED @onflow/fcl@0.0.68)
  • discovery.wallet -- FCLにウォレットまたはWallet Discoveryメカニズムを指定します(INTRODUCED @onflow/fcl@0.0.68)
  • discovery.wallet.method -- どの戦略(タブ、ポップアップ、iFrame)でウォレットを見せるかを指定します : IFRAME/RPC, POP/RPC, TAB/RPC, HTTP/POST, EXT/RPC
  • env -- 保存されたやり取りと合わせて使用します。 指定可能な値：local, testnet, mainnet (DEPRECATED @onflow/fcl@1.0.0)
  • fcl.limit -- トランザクションで指定されていない場合のfallbackとしてcompute limitを指定します。整数で指定します。
  • flow.network (recommended) -- 接続するネットワーク及び、testnetおよびmainnetのFCLCryptoContractのアドレス提供に使用します。指定可能な値：local、testnet、mainnet (INTRODUCED @onflow/fcl@1.0.0)
  • service.OpenID.scopes - WalletやOpenID serviceに使われるOpen ID (INTRODUCED @onflow/fcl@0.0.68)
  • walletconnect.projectId -- あなたのアプリである WalletConnect のプロジェクトID。 アプリケーションのプロジェクトIDを取得するには、WalletConnect Cloudを参照してください。 (INTRODUCED @onflow/fcl@1.11.0)

Using Contracts in Scripts and Transactions

Address Replacement

コンフィグレーションの0xで始まるキーはFCLのスクリプトおよびトランザクション内で置き換えられます。これにより、アプリケーションをFlow Blockchainの異なるインスタンスに向けた場合でも、１箇所変更するのみで、スクリプトまたはトランザクションのCadenceコードを変更する必要がなくなります。

import * as fcl from '@onflow/fcl';

fcl.config().put('0xFungibleToken', '0xf233dcee88fe0abe');

async function myScript() {
  return fcl
    .send([
      fcl.script`
      import FungibleToken from 0xFungibleToken // will be replaced with 0xf233dcee88fe0abe because of the configuration

      access(all) fun main() { /* Rest of the script goes here */ }
    `,
    ])
    .then(fcl.decode);
}

async function myTransaction() {
  return fcl
    .send([
      fcl.transaction`
      import FungibleToken from 0xFungibleToken // will be replaced with 0xf233dcee88fe0abe because of the configuration

      transaction { /* Rest of the transaction goes here */ }
    `,
    ])
    .then(fcl.decode);
}

Example

import * as fcl from '@onflow/fcl';

fcl
  .config()
  .put('flow.network', 'testnet')
  .put('accessNode.api', 'https://rest-testnet.onflow.org')
  .put('discovery.wallet', 'https://fcl-discovery.onflow.org/testnet/authn')
  .put('walletconnect.projectId', 'YOUR_PROJECT_ID')
  .put('app.detail.title', 'Test Harness')
  .put('app.detail.icon', 'https://i.imgur.com/r23Zhvu.png')
  .put('app.detail.description', 'A test harness for FCL')
  .put('app.detail.url', 'https://myapp.com')
  .put('0xFlowToken', '0x7e60df042a9c0868');

Using Flow.json

よりシンプルに、より柔軟にスマートコントラクトのインポートをスクリプトやトランザクションの中で行う方法は、FCLのconfig.loadメソッドを使用する方法です。これは、コントラクトの設定をflow.jsonファイルから読み込み、あなたのimportシンタックスをクリーンかつ、FCLが、違うネットワークでも正しいコントラクトのアドレスを使う事ができるようにします。config.load を使用するには、まずflow.json ファイルをインポートし、それをパラメータとして config.load に渡す必要があります。

import { config } from '@onflow/fcl';
import flowJSON from '../flow.json';

config({
  'flow.network': 'testnet',
  'accessNode.api': 'https://rest-testnet.onflow.org',
  'discovery.wallet': `https://fcl-discovery.onflow.org/testnet/authn`,
}).load({ flowJSON });

あなたのflow.jsonがこういうのだったとしましょう:

{
  "contracts": {
		"HelloWorld": "cadence/contracts/HelloWorld.cdc"
	}
}

で、スクリプトとトランザクションであなたがすべきことはこちらです :

import "HelloWorld"

FCLはコントラクト名を自動で、使用しているネットワークのコントラクトアドレスに置き換えます。

注意：決して秘密鍵をflow.jsonに置かないでください。代わりに、key/location syntaxを使用して、キーを別の git が無視するファイルに分けるべきです。

Last updated on Nov 20, 2024 by Chase Fleming

翻訳元

Previous << Authentication

Flow BlockchainのCadence version1.0ドキュメント (How to Configure FCL)

Next >> Wallet Discovery

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?