For release updates, see the repo

Configuration(設定)

FCLには、FCLのさまざまな側面(aspect)を設定できる仕組みがあります。Flow Blockchainのインスタンスを（ローカルのエミュレーターからテストネット、メインネットへと）移動させる時、あなたが必要なFCLの実装はコンフィグレーションだけで済みます。

Setting Configuration Values

値の設定は一度だけ行います。この設定はできるだけ早い段階に行うのがお勧めです。設定値をセットするには、config インスタンス上でputメソッドを呼び出す必要があります。putメソッドはconfigインスタンスを返しますので、チェイニングができます。

または、JSONオブジェクトを直接渡してコンフィグをセットすることもできます。

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

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

// OR

fcl.config({
  foo: 'bar',
  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

Name	Example	Description
`accessNode.api` (required)	`https://rest-testnet.onflow.org`	Flow Blockchainの通信したいAccess NodeのAPI URL。利用可能なすべてのアクセスノードのエンドポイントはこちらでご確認ください。
`app.detail.title`	`Cryptokitties`	アプリケーションのタイトルは、ウォレットやその他のサービスから要求されることがあります。WalletConnectプラグインとWallet Discoveryサービスで使用されています。
`app.detail.icon`	`https://fcl-discovery.onflow.org/images/blocto.png`	あなたのアプリケーションのアイコンURLは、ウォレットやその他サービスから要求されます。WalletConnectプラグインとWallet Discoveryサービスで使用されています。
`app.detail.description`	`Cryptokitties is a blockchain game`	あなたのアプリケーションの説明は、ウォレットやその他サービスから要求されます。WalletConnectプラグインとWallet Discoveryサービスで使用されています。
`app.detail.url`	`https://cryptokitties.co`	あなたのアプリケーションURLは、ウォレットやその他サービスから要求されます。WalletConnectプラグインとウWallet Discoveryサービスで使用されています。
`challenge.handshake`	DEPRECATED	代わりに`discovery.wallet`を使用してください。
`discovery.authn.endpoint`	`https://fcl-discovery.onflow.org/api/testnet/authn`	設定可能な代替Wallet Discoveryメカニズムのエンドポイント。詳細については、discoveryをご覧ください。
`discovery.wallet` (required)	`https://fcl-discovery.onflow.org/testnet/authn`	FCLにウォレットまたはWallet Discoveryメカニズムを指定します。
`discovery.wallet.method`	`IFRAME/RPC`, `POP/RPC`, `TAB/RPC`, `HTTP/POST`, or `EXT/RPC`	どの戦略(タブ、ポップアップ、iFrame)でウォレットを見せるかを指定します
`fcl.limit`	`100`	トランザクションで指定されていない場合のfallbackとしてcompute limitを指定します。整数で指定します。
`flow.network` (recommended)	`testnet`	接続するネットワーク及び、`testnet`および`mainnet`のFCLCryptoContractのアドレス提供に使用します。指定可能な値：`local`、`testnet`、`mainnet`。
`walletconnect.projectId`	`YOUR_PROJECT_ID`	あなたのアプリである WalletConnect のプロジェクトID。アプリケーションのプロジェクトIDを取得するには、WalletConnect Cloudを参照してください。

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('walletconnect.projectId', 'YOUR_PROJECT_ID')
  .put('accessNode.api', 'https://rest-testnet.onflow.org')
  .put('discovery.wallet', 'https://fcl-discovery.onflow.org/testnet/authn')
  .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('service.OpenID.scopes', 'email email_verified name zoneinfo')
  .put('0xFlowToken', '0x7e60df042a9c0868');

Using Flow.json

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

Setting Up

1. Define Your Contracts in flow.json

以下は複数のネットワークのエイリアスを持つflow.jsonファイルの例です。

{
  "contracts": {
    "HelloWorld": {
      "source": "./cadence/contracts/HelloWorld.cdc",
      "aliases": {
        "testnet": "0x1cf0e2f2f715450",
        "mainnet": "0xf8d6e0586b0a20c7"
      }
    }
  }
}

source: Points to the contract file in your project.
aliases: Maps each network to the correct contract address.

2. Configure FCL

flow.jsonファイルを読み込み、FCLで使えるように設定する。

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

config({
  'flow.network': 'testnet', // Choose your network, e.g., testnet or mainnet
  'accessNode.api': 'https://rest-testnet.onflow.org', // Access node for the network
  'discovery.wallet': `https://fcl-discovery.onflow.org/testnet/authn`, // Wallet discovery
}).load({ flowJSON });

この設定により、FCLは選択されたネットワーク（testnetやmainnetなど）に基づいて、自動的に正しいコントラクトアドレスを使用します。

3. Use Contract Names in Scripts and Transactions

flow.jsonの設定が完了したら、Cadenceスクリプトまたはトランザクションで、名前だけでスマートコントラクトをインポートすることができます。

import "HelloWorld"

access(all) fun main(): String {
    return HelloWorld.sayHello()
}

FCLは"HelloWorld"をflow.jsonの設定から正しいアドレスに置き換えます。

注意：秘密鍵をflow.jsonに保存するのはやめてください。代わりに、key/location syntaxを使用して、機密性の高いキーを別の.gitignoreで保護されたファイルに保管します。

Wallet Interactions(サインイン,サイン)

これらのメソッドは、ユーザーを認証したり、ユーザーのトランザクションを承認するために、dappsがFCL対応のウォレットとやりとりできるようにします。

⚠️These methods are async.

authenticate

⚠️This method can only be used in web browsers.

このメソッドを呼び出すと、FCLをサポートするウォレットを介して現在のユーザーが認証処理をします。一度実行されると、FCLは設定されたdiscovery.walletエンドポイントと通信を行い、ユーザーに認証に使用するウォレットを選択させます。ウォレットプロバイダーがユーザーを認証すると、FCLは今後のその使用や認証のためにcurrent userオブジェクトに値をセットします。

Note
⚠️discovery.walletの値はこのメソッドが呼び出される前にconfigurationにセットされてなくてはなりません。FCL Configurationの項目をご覧ください。

📣 デフォルトのdiscovery endpointは、ユーザーが対応するウォレットを選択できるように、iframeオーバーレイを開きます。
Usage

import * as fcl from '@onflow/fcl';
fcl
  .config()
  .put('accessNode.api', 'https://rest-testnet.onflow.org')
  .put('discovery.wallet', 'https://fcl-discovery.onflow.org/testnet/authn');
// anywhere on the page
fcl.authenticate();

Note

⚠️ authenticateは、discovery から返されたサービスをfcl.authenticate({ service })を使うことにより受け取ることもできます。

unauthenticate

⚠️This method can only be used in web browsers.

現在のユーザーをログアウトさせ、current userオブジェクトの値にnullにセットします。

Note

⚠️current userは先に認証されていなければなりません。

Usage

import * as fcl from '@onflow/fcl';
fcl.config().put('accessNode.api', 'https://rest-testnet.onflow.org');
// first authenticate to set current user
fcl.authenticate();
// ... somewhere else & sometime later
fcl.unauthenticate();
// fcl.currentUser.loggedIn === null

reauthenticate

⚠️This method can only be used in web browsers.

current userに対して、先にfcl.unauthenticate()を呼び出し、再度fcl.authenticate()を呼び出す処理を簡便にした方法です。

Note

⚠️current userは先に認証されていなければなりません。

Usage

import * as fcl from '@onflow/fcl';
// first authenticate to set current user
fcl.authenticate();
// ... somewhere else & sometime later
fcl.reauthenticate();
// logs out user and opens up login/sign-up flow

signUp

⚠️This method can only be used in web browsers.

fcl.authenticate()と同等の便利メソッド

logIn

⚠️This method can only be used in web browsers.

fcl.authenticate()と同等の便利メソッド

authz

現在のユーザー(current user)がトランザクションを Flow に送信するために必要な認証情報を生成してくれる簡便メソッド。これは、ユーザーのウォレットプロバイダーに接続し、トランザクションを送信するために必要な、署名を生成する署名関数を定義しています。

📣 必要に応じて、この関数をあなたのauthorization functionに置き換えることができます。

Returns

Type	Description
AuthorizationObject	トランザクションをいずれかのロールで承認するためにcurrent userから取り出した、必要な情報を含むオブジェクト。

Usage

Note: proposer、payer、authorizationsのデフォルト値はすでにfcl.authzであるため、これらのパラメータを含める必要はありません。これは例としてのみ表示しています。詳しくは署名の役割をご覧ください。

import * as fcl from '@onflow/fcl';
// login somewhere before
fcl.authenticate();
// once logged in authz will produce values
console.log(fcl.authz);
// prints {addr, signingFunction, keyId, sequenceNum} from the current authenticated user.

const txId = await fcl.mutate({
  cadence: `
    import Profile from 0xba1132bc08f82fe2
    
    transaction(name: String) {
      prepare(account: auth(BorrowValue) &Account) {
        account.storage.borrow<&{Profile.Owner}>(from: Profile.privatePath)!.setName(name)
      }
    }
  `,
  args: (arg, t) => [arg('myName', t.String)],
  proposer: fcl.authz, // optional - default is fcl.authz
  payer: fcl.authz, // optional - default is fcl.authz
  authorizations: [fcl.authz], // optional - default is [fcl.authz]
});

Current User(現在のユーザ)

セットされていれば、現在のユーザー(current user)を保持し、ユーザー認証とユーザーによる承認を管理するための一連の関数を提供します。

⚠️The following methods can only be used in web browsers.

currentUser.subscribe

subscribeに渡されるコールバックは、ユーザーが認証および認証解除を行う時に呼び出されるため、それに従ってUIを簡単に更新することができます。

Arguments

Name	Type	Description
`callback`	function	コールバックはcurrent userを最初の引数としてcurrent userがセットまたは取り除かれた時に呼び出されます。

Usage

import React, { useState, useEffect } from 'react';
import * as fcl from '@onflow/fcl';

export function AuthCluster() {
  const [user, setUser] = useState({ loggedIn: null });
  useEffect(() => fcl.currentUser.subscribe(setUser), []); // sets the callback for FCL to use

  if (user.loggedIn) {
    return (
      <div>
        <span>{user?.addr ?? 'No Address'}</span>
        <button onClick={fcl.unauthenticate}>Log Out</button> {/* once logged out in setUser(user) will be called */}
      </div>
    );
  } else {
    return (
      <div>
        <button onClick={fcl.logIn}>Log In</button>{' '}
        {/* once logged in setUser(user) will be called */}
        <button onClick={fcl.signUp}>Sign Up</button> {/* once signed up, setUser(user) will be called */}
      </div>
    );
  }
}

currentUser.snapshot

current userオブジェクトを返します。これは、fcl.currentUser.subscribe(callback)でセットされ利用可能なオブジェクトと同じものです。

Usage

// returns the current user object
const user = fcl.currentUser.snapshot();

// subscribes to the current user object and logs to console on changes
fcl.currentUser.subscribe(console.log);

currentUser.authenticate

fcl.authenticateと同等です。

currentUser.unauthenticate

fcl.unauthenticateと同等です。

currentUser.authorization

fcl.authzと同等です。

currentUser.signUserMessage

FCL対応のウォレット/サービス経由でユーザーが自ら署名できるメソッドです。

⚠️ このメソッドは、current user(現在のユーザー)のウォレットがsigning service endpoint(署名サービスエンドポイント)をサポートしている必要があります。現時点で、Bloctoのみこの機能にデフォルトで対応しています。

Arguments

Name	Type	Description
`message`	string (required)	A hexadecimal string to be signed

Returns

Type	Description
`Array`	An Array of CompositeSignatures: signature

Usage

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

export const signMessage = async () => {
  const MSG = Buffer.from('FOO').toString('hex');
  try {
    return await currentUser.signUserMessage(MSG);
  } catch (error) {
    console.log(error);
  }
};

Discovery(3rdPartyウォレット)

discovery

ディスカバリーはコードを抽象化しているため、開発者はFlow対応のウォレットの発見やインテグレーション、認証等をコードで行う必要がありません。FCLのdiscoveryを使うことで、dappsはUIを完全に制御しつつ、ウォレットをリストし、認証を行うことができます。これによる一般的なユースケースは、ログイン画面や登録画面です。

（あるいは、UIの制御が必要のない場合は、discovery.wallet設定値をそのまま使用することもできます。これは、クイックスタートで説明されている最もシンプルな構成です。）

⚠️The following methods can only be used in web browsers.

Note

⚠️discovery.authn.endpointの値はこのメソッドを呼び出す前にconfigurationで設定されている必要があります。FCL Configurationを参照してください。

Suggested Configuration

Environment	Example
Mainnet	`https://fcl-discovery.onflow.org/api/authn`
Testnet	`https://fcl-discovery.onflow.org/api/testnet/authn`

If the Discovery endpoint is set in config, then you can iterate through authn services and pass the chosen service to authenticate to authenticate a user.

Usage

import './config';
import { useState, useEffect } from 'react';
import * as fcl from '@onflow/fcl';

function Component() {
  const [wallets, setWallets] = useState([]);
  useEffect(
    () => fcl.discovery.authn.subscribe((res) => setWallets(res.results)),
    [],
  );

  return (
    <div>
      {wallets.map((wallet) => (
        <button
          key={wallet.provider.address}
          onClick={() => fcl.authenticate({ service: wallet })}
        >
          Login with {wallet.provider.name}
        </button>
      ))}
    </div>
  );
}

authn

More Configuration

デフォルトでは、LedgerやDapper Walletのような限定的な機能のサービスもしくは開発者による登録を必要とするサービスは、アプリ上でユーザーに表示する為には追加設定(opt-in)をする必要があります。アプリケーションでオプトインのウォレットをユーザーに対して有効にするには、設定内でdiscovery.authn.includeプロパティを使用し、ユーザーに表示したいオプトインのウォレットを配列で設定します。

import { config } from '@onflow/fcl';

config({
  'discovery.authn.endpoint':
    'https://fcl-discovery.onflow.org/api/testnet/authn', // Endpoint set to Testnet
  'discovery.authn.include': ['0x9d2e44203cb13051'], // Ledger wallet address on Testnet set to be included
});

Opt-In Wallet Addresses on Testnet and Mainnet

Service	Testnet	Mainnet
`Dapper Wallet`	0x82ec283f88a62e65	0xead892083b3e2c6c
`Ledger`	0x9d2e44203cb13051	0xe5cd26afebe62781

ウォレットに関するより詳しい情報は、こちらのservice listを見てください。

discovery.authn.snapshot()

authn services のリストを返します。

discovery.authn.subscribe(callback)

subscribe にセットされたコールバック関数が、authn servicesのリストと一緒に呼ばれます。

On-chain Interactions(トランザクション)

📣 These methods can be used in browsers and NodeJS. (ブラウザ、Node.jsどちらでも使えます)

これらのメソッドによりdappsは、Access Node APIを使用した一連の関数を介して、Flowブロックチェーンと直接やりとりすることが可能になります。

Query and Mutate Flow with Cadence

ブロックチェーン上で任意のCadenceスクリプトを実行したい場合、これらのメソッドは、ブロックチェーンとのやりとりを生成し、送信し、デコードする必要がなく、これを実行する便利な方法を提供します。

query(スクリプト)

ブロックチェーンを照会する(query)ためのスクリプトを送信できます。

Options
以下キーを持つ一つのオブジェクトとして、下記コードのように渡します。特に記載のない限り、すべてのキーはオプションです。

Key	Type	Description
`cadence`	string (required)	A valid cadence script.
`args`	ArgumentFunction	Any arguments to the script if needed should be supplied via a function that returns an array of arguments.
`limit`	number	クエリに対する計算（ガス）リミット。Flowでの計算コストの算出方法については、計算コストに関するドキュメントを参照してください。

(補足: スクリプト(query)の場合はデータ取得が目的で、ガスが一切かかりませんのでlimitは通常つけません。)

Returns

Type	Description
any	A JSON representation of the response.

Usage

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

const result = await fcl.query({
  cadence: `
    access(all) fun main(a: Int, b: Int, addr: Address): Int {
      log(addr)
      return a + b
    }
  `,
  args: (arg, t) => [
    arg(7, t.Int), // a: Int
    arg(6, t.Int), // b: Int
    arg('0xba1132bc08f82fe2', t.Address), // addr: Address
  ],
});
console.log(result); // 13

Examples

Additional Explanation

mutate(トランザクション)

ブロックチェーンにトランザクションを送信し、状態(state)を変更することができます。

⚠️ブラウザで使用する場合、fcl.mutateは組み込みのfcl.authz関数を使用して、current userの署名を生成します。このメソッドをNode.jsから呼び出す場合は、あなたは独自のカスタム署名関数を指定する必要があります。

Options
以下キーを持つ一つのオブジェクトとして、下記コードのように渡します。特に記載のない限り、すべてのキーはオプションです。

Key	Type	Description
`cadence`	string (required)	A valid cadence transaction.
`args`	ArgumentFunction	Any arguments to the script if needed should be supplied via a function that returns an array of arguments.
`limit`	number	クエリに対する計算（ガス）リミット。Flowでの計算コストの算出方法については、計算コストに関するドキュメントを参照してください。
`proposer`	AuthorizationFunction	The authorization function that returns a valid AuthorizationObject for the proposer role.

Returns

Type	Description
string	トランザクションID

Usage

import * as fcl from '@onflow/fcl';
// login somewhere before
fcl.authenticate();

const txId = await fcl.mutate({
  cadence: `
    import Profile from 0xba1132bc08f82fe2
    
    transaction(name: String) {
      prepare(account: auth(BorrowValue) &Account) {
        account.storage.borrow<&{Profile.Owner}>(from: Profile.privatePath)!.setName(name)
      }
    }
  `,
  args: (arg, t) => [arg('myName', t.String)],
});

Examples

verifyUserSignatures (Deprecated)

fcl.AppUtils.verifyUserSignatures を使用してください。

AppUtils(ノンカストディアル)

AppUtils.verifyUserSignatures

ユーザーの秘密鍵によって署名されたメッセージを暗号学的に検証することができるメソッド。これは通常、currentUser.signUserMessageからの応答とともに使用されます。

Note
⚠️ このAPIを使用するには、fcl.config.flow.networkかオプションのオーバーライドが必要です。FCL Configuration(のflow.network)を参照してください。

Arguments

Name	Type	Description
`message`	string (required)	A hexadecimal string
`compositeSignatures`	Array (required)	An Array of `CompositeSignatures`
`opts`	Object (optional)	opts.fclCryptoContract を指定すると、ローカル開発用の FCLCryptoContract アドレスを上書きできます。

Returns

Type	Description
Boolean	`true` if verified or `false`

Usage

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

const isValid = await fcl.AppUtils.verifyUserSignatures(
  Buffer.from('FOO').toString('hex'),
  [
    {
      f_type: 'CompositeSignature',
      f_vsn: '1.0.0',
      addr: '0x123',
      keyId: 0,
      signature: 'abc123',
    },
  ],
  { fclCryptoContract },
);

Examples

fcl-next-harness

AppUtils.verifyAccountProof

このメソッドはアプリケーションが、ユーザーがオンチェーンアカウントを管理していることを暗号学的に証明できます。ユーザーが認証する際、FCLのaccount-proofサービスをサポートすることを、いくつかのFCL対応ウォレットは選びます。もしウォレットがこのサービスをサポートすることを選択し、ユーザーがデータの署名を承認した場合、account-proofデータと、ユーザーがオンチェーンアカウントを管理している(control)ことを証明する署名が返されます。詳細は、proving-authenticationのドキュメントを参照してください。

⚠️ このAPIを使用するには、fcl.config.flow.networkかオプションのオーバーライドが必要です。FCL Configuration(のflow.network)を参照してください。

Arguments

Name	Type	Description
`appIdentifier`	string (required)	A hexadecimal string
`accountProofData`	Object (required)	Object with properties: `address`: `string` - A Flow account address. `nonce`: `string` - A random string in hexadecimal format (minimum 32 bytes in total, i.e 64 hex characters) `signatures`: `Object[]` - An array of composite signatures to verify
`opts`	Object (optional)	opts.fclCryptoContract を指定すると、ローカル開発用の FCLCryptoContract アドレスを上書きできます。

Returns

Type	Description
Boolean	`true` if verified or `false`

Usage

import * as fcl from "@onflow/fcl"

const accountProofData = {
  address: "0x123",
  nonce: "F0123"
  signatures: [{f_type: "CompositeSignature", f_vsn: "1.0.0", addr: "0x123", keyId: 0, signature: "abc123"}],
}

const isValid = await fcl.AppUtils.verifyAccountProof(
  "AwesomeAppId",
  accountProofData,
  {fclCryptoContract}
)

Examples

fcl-next-harness

Query and mutate the blockchain with Builders

いくつかのケースでは、あなたはfcl.query や、 fcl.mutate インターフェイスが提供するものよりも、より複雑なインタラクションを構築したいと思うかもしれません。これを行うために、ビルダーを組み合わせてインタラクションを構築し、それを認証し、ブロックチェーンに送信するパターンをFCLは使用します。

⚠【推奨】これらのビルダーの使用が必要な特定のユースケースがない限り、fcl.query({...options}またはfcl.mutate({...options})でほとんどのケースに対応できるはずです。

send

任意のスクリプト、トランザクション、リクエストを Flow に対して送信します。

このメソッドは、ビルダーの配列を消費して、認証して送信します。配列に含める必要のあるビルダーは、構築するやりとり(interaction)によります。

Note

⚠️正しいキーとすべての値をJSONから取得するには、fcl.decode(response)と併用する必要があります。

Arguments

Name	Type	Description
`builders`	[Builders]	See builder functions.

Returns

Type	Description
ResponseObject	チェーンから返されたデータを含むオブジェクト。常に`fcl.decode()`で、適切なJSONキーと値を取得するためにデコードする必要があります。

Usage

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

// a script only needs to resolve the arguments to the script
const response = await fcl.send([fcl.script`${script}`, fcl.args(args)]);
// note: response values are encoded, call await fcl.decode(response) to get JSON

// a transaction requires multiple 'builders' that need to be resolved prior to being sent to the chain - such as setting the authorizations.
const response = await fcl.send([
  fcl.transaction`
    ${transaction}
    `,
  fcl.args(args),
  fcl.proposer(proposer),
  fcl.authorizations(authorizations),
  fcl.payer(payer),
  fcl.limit(9999),
]);
// note: response contains several values (Cad)

decode

fcl.send()からのレスポンスをデコードし、Cadenceコードから返された値の適切なJSON表現に変換します。

Note
📣 独自のデコーダーを定義するには、tutorialを参照してください。

Arguments

Name	Type	Description
`response`	ResponseObject	`fcl.send([...])`から返されるべき応答です。

Returns

Type	Description
any	実行したCadenceコードによる生の文字列応答をJSON表現にしたもの。戻り値は単一の値・型、または複数の型を持つオブジェクトとなります。

Usage

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

// simple script to add 2 numbers
const response = await fcl.send([
  fcl.script`
        access(all) fun main(int1: Int, int2: Int): Int {
            return int1 + int2
        }
    `,
  fcl.args([fcl.arg(1, fcl.t.Int), fcl.arg(2, fcl.t.Int)]),
]);

const decoded = await fcl.decode(response);

assert(3 === decoded);
assert(typeof decoded === 'number');

Builders(オンチェーン情報取得)

これらのメソッドは、トランザクションやスクリプトのテンプレートの色々な部分を埋めて、構築、認証、ブロックチェーンに対して送信します。入力済みテンプレートはInteraction(インタラクション)と呼ばれます。

⚠️These methods must be used with fcl.send([...builders]).then(fcl.decode)

Query Builders

getAccount

アドレスをもとにアカウント情報を返します。

⚠️他のビルダーと組み合わせる必要がない場合は、あらかじめ構築されたインタラクションのfcl.account(address)の使用を検討してください。

Arguments

Name	Type	Description
`address`	Address	Address of the user account with or without a prefix (both formats are supported).

Returns after decoding

Type	Description
AccountObject	A JSON representation of a user account.

Usage

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

// somewhere in an async function
// fcl.account is the same as this function
const getAccount = async (address) => {
  const account = await fcl.send([fcl.getAccount(address)]).then(fcl.decode);
  return account;
};

getBlock

最新(１番高さが高い)のブロック情報を返します。

📣 古いブロック情報を取得する時には、fcl.atBlockId()やfcl.atBlockHeight()を併用して使ってください。

⚠️他のビルダーと組み合わせる必要がない場合は、あらかじめ構築されたインタラクションのfcl.getblock(isSealed)の使用を検討してください。

Arguments

Name	Type	Default	Description
`isSealed`	boolean	false	If the latest block should be sealed or not. See block states.

Returns after decoding

Type	Description
BlockObject	他のビルダーと併用しない場合は、最新のブロックです。

Usage

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

const latestSealedBlock = await fcl
  .send([
    fcl.getBlock(true), // isSealed = true
  ])
  .then(fcl.decode);

atBlockHeight

指定したブロック高さのブロックに対する部分情報を返すビルダー関数です。

⚠️他のインタラクション（fcl.getBlock()など）と組み合わせて使用すると、指定したブロック高さの完全な情報を取得できます。

Arguments

Name	Type	Description
`blockHeight`	number	The height of the block to execute the interaction at.

Returns

Type	Description
Partial Interaction	A partial interaction to be paired with another interaction such as `fcl.getBlock()` or `fcl.getAccount()`.

Usage

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

await fcl.send([fcl.getBlock(), fcl.atBlockHeight(123)]).then(fcl.decode);

atBlockId

指定したブロックIDのブロックに対する部分情報を返すビルダー関数です。

⚠️他のインタラクション（fcl.getBlock()など）と組み合わせて使用すると、指定したブロックIDの完全な情報を取得できます。

Arguments

Name	Type	Description
`blockId`	string	The ID of the block to execute the interaction at.

Returns

Type	Description
Partial Interaction	A partial interaction to be paired with another interaction such as `fcl.getBlock()` or `fcl.getAccount()`.

Usage

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

await fcl.send([fcl.getBlock(), fcl.atBlockHeight(123)]).then(fcl.decode);

getBlockHeader

ブロックのヘッダー情報を返すビルダー関数です。

📣 古いブロック情報を取得するインタラクションを構築する時には、fcl.atBlockId()やfcl.atBlockHeight()を併用して使ってください。

Returns after decoding

Type	Description
BlockHeaderObject	他のビルダーと組み合わせて使用しない場合は最新のブロックヘッダー。

Usage

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

const latestBlockHeader = await fcl
  .send([fcl.getBlockHeader()])
  .then(fcl.decode);

getEventsAtBlockHeightRange

指定したイベントの、指定したブロック高さ範囲内のすべてのインスタンスを返します。

⚠️指定するブロックの範囲は、現在のスポーク(定期的に行われるCadenceアップグレード)からでなければなりません。

⚠️指定するブロックの範囲は、1リクエストあたり250ブロック以下でなければなりません。

Arguments

Name	Type	Description
`eventName`	EventName	The name of the event.
`fromBlockHeight`	number	The height of the block to start looking for events (inclusive).
`toBlockHeight`	number	The height of the block to stop looking for events (inclusive).

Returns after decoding

Type	Description
[EventObject]	An array of events that matched the eventName.

Usage

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

const events = await fcl
  .send([
    fcl.getEventsAtBlockHeightRange(
      'A.7e60df042a9c0868.FlowToken.TokensWithdrawn',
      35580624,
      35580624,
    ),
  ])
  .then(fcl.decode);

getEventsAtBlockIds

複数のブロックIDで指定されたブロック内で、特定のイベント（名前で指定）のすべてのインスタンスを返します。

⚠️指定するブロックの範囲は、現在のスポーク(定期的に行われるCadenceアップグレードのこと)からでなければなりません。

Arguments

Name	Type	Description
`eventName`	EventName	The name of the event.
[`blockId`]	[number]	The ids of the blocks to scan for events.

Returns after decoding

Type	Description
[EventObject]	An array of events that matched the eventName.

Usage

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

const events = await fcl
  .send([
    fcl.getEventsAtBlockIds('A.7e60df042a9c0868.FlowToken.TokensWithdrawn', [
      'c4f239d49e96d1e5fbcf1f31027a6e582e8c03fcd9954177b7723fdb03d938c7',
      '5dbaa85922eb194a3dc463c946cc01c866f2ff2b88f3e59e21c0d8d00113273f',
    ]),
  ])
  .then(fcl.decode);

getCollection

コレクションIDに対応するトランザクションIDリストを含んでいる全てのコレクションを返します。

⚠️指定するブロックの範囲は、現在のスポークからでなければなりません。過去のスポーク中に発行されたすべてのイベントは、現在利用できません。

Arguments

Name	Type	Description
`collectionID`	string	The id of the collection.

Returns after decoding

Type	Description
CollectionObject	An object with the id and a list of transactions within the requested collection.

Usage

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

const collection = await fcl
  .send([
    fcl.getCollection(
      'cccdb0c67d015dc7f6444e8f62a3244ed650215ed66b90603006c70c5ef1f6e5',
    ),
  ])
  .then(fcl.decode);

getTransactionStatus

TransactionStatusObject の形式でトランザクションのステータスを返します。

⚠️transactionID は現在のスポーク以降のでなければなりません。

📣このメソッドを直接呼び出すのではなく、fcl.tx(id) を使ってトランザクションステータスをサブスクライブすることを検討してください。

Arguments

Name	Type	Description
`transactionId`	string	The transactionID returned when submitting a transaction. Example: `9dda5f281897389b99f103a1c6b180eec9dac870de846449a302103ce38453f3`

Returns after decoding

Type	Description
TransactionStatusObject	Object representing the result/status of a transaction

Usage

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

const status = await fcl
  .send([
    fcl.getTransactionStatus(
      '9dda5f281897389b99f103a1c6b180eec9dac870de846449a302103ce38453f3',
    ),
  ])
  .then(fcl.decode);

getTransaction

トランザクションオブジェクトを返します。

⚠️transactionID は現在のスポーク以降のでなければなりません。

📣このメソッドを直接呼び出すのではなく、fcl.tx(id).onceSealed() を使用することを検討してください。

Arguments

Name	Type	Description
`transactionId`	string	The transactionID returned when submitting a transaction. Example: `9dda5f281897389b99f103a1c6b180eec9dac870de846449a302103ce38453f3`

Returns after decoding

Type	Description
TransactionObject	Object representing the result/status of a transaction

Usage

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

const tx = await fcl
  .send([
    fcl.getTransaction(
      '9dda5f281897389b99f103a1c6b180eec9dac870de846449a302103ce38453f3',
    ),
  ])
  .then(fcl.decode);

arg

fcl.args[...] と一緒に使用するユーティリティビルダーで、FCLでサポートされた引数を作成します。

Arguments

Name	Type	Description
`value`	any	Any value that you are looking to pass to other builders.
`type`	FType	A type supported by Flow.

Returns

Type	Description
ArgumentObject	Holds the value and type passed in.

Usage

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

await fcl
  .send([
    fcl.script`
      access(all) fun main(a: Int, b: Int): Int {
        return a + b
      }
    `,
    fcl.args([
      fcl.arg(5, fcl.t.Int), // a
      fcl.arg(4, fcl.t.Int), // b
    ]),
  ])
  .then(fcl.decode);

args

他のビルダーと組み合わせて使用するユーティリティビルダーで、値とサポートされている型を持つ引数を渡します。

Arguments

Name	Type	Description
`args`	[Argument Objects]	An array of arguments that you are looking to pass to other builders.

Returns

Type	Description
Partial Interaction	An interaction that contains the arguments and types passed in. This alone is a partial and incomplete interaction.

Usage

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

await fcl
  .send([
    fcl.script`
      access(all) fun main(a: Int, b: Int): Int {
        return a + b
      }
    `,
    fcl.args([
      fcl.arg(5, fcl.t.Int), // a
      fcl.arg(4, fcl.t.Int), // b
    ]),
  ])
  .then(fcl.decode); // 9

Template Builders

⚠️Recommended: 以下の機能は、fcl.query({...options}やfcl.mutate({...options})によって簡素化されており、以下の関数よりもこれらを使用することが推奨されます。

script

Cadenceのスクリプトを実行するのに使用します。

📣 fcl.args(...) と併用して、動的に引数を渡します。

Arguments

Name	Type	Description
`CODE`	string	Should be valid Cadence script.

Returns

Type	Description
Interaction	An interaction containing the code passed in.

Usage

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

const code = `
  access(all) fun main(): Int {
    return 5 + 4
  }
`;
const answer = await fcl.send([fcl.script(code)]).then(fcl.decode);
console.log(answer); // 9

transaction

Cadence トランザクションを実行するのに使用します。

⚠️fcl.payer、fcl.proposer、fcl.authorizationsと一緒に使用する必要があります。

📣 fcl.args[...]と併用して、動的に引数を渡します。

Arguments

Name	Type	Description
`CODE`	string	Should be valid a Cadence transaction.

Returns

Type	Description
Partial Interaction	`fcl.payer`、`fcl.proposer`、`fcl.authorizations`と一緒に使用することで完全なやり取り可能なオブジェクトになります。

Usage

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

// a script only needs to resolve the arguments to the script
const response = await fcl.send([fcl.script`${script}`, fcl.args(args)]);
// note: response values are encoded, call await fcl.decode(response) to get JSON

// a transaction requires multiple 'builders' that need to be resolved prior to being sent to the chain - such as setting the authorizations.
const response = await fcl.send([
  fcl.transaction`
    ${transaction}
    `,
  fcl.args(args),
  fcl.proposer(proposer),
  fcl.authorizations(authorizations),
  fcl.payer(payer),
  fcl.limit(9999),
]);
// note: response contains several values (Cad)

Pre-built Interactions(ショートハンド)

🚧(翻訳中。2,３日お待ちください)

account

🚧🚧🚧

(翻訳中。2,３日お待ちください)

block

🚧🚧🚧

(翻訳中。2,３日お待ちください)

🚧🚧🚧

(翻訳中。2,３日お待ちください)

SignatureObject

🚧🚧🚧

(翻訳中。2,３日お待ちください)

Last updated on Nov 15, 2024 by Chase Fleming

翻訳元

Previous << Flow Client Library (FCL)

Flow BlockchainのCadence version1.0ドキュメント (FCL API Reference)

Next >> SDK Reference