Previous << Migration Guide v0.25.0
Next >> Cadence VS Code Extension
Flow Dev Walletは、Flowの模擬(mock)ウォレットであり、シミュレートされたユーザーアカウントに代わって、FlowブロックチェーンとやりとりするためFCLが使用するプロトコルをシミュレートします。
IMPORTANT
このプロジェクトはFCL互換のインターフェースを実装していますが、本番用ウォレットを作る際の参考として使用すべきではありません。
このプロジェクトは、Flowエミュレータのような、ローカルで実行されているFlowブロックチェーンのインスタンスに対するローカル開発の補助としてのみ使用すべきであり、Flow Mainnet、Testnet、またはその他のFlowのインスタンスと併用して使用すべきではありません。
INFO
すべてのFlow対応ウォレットの一覧は、ウォレットページをご覧ください。
Getting Started
devウォレットを使用する前に、Flowエミュレータを起動する必要があります。
Install the flow-cli
FlowエミュレータはFlow CLIにバンドルされています。CLIのインストール手順は、こちらをご覧ください
Create a flow.json file
このコマンドを実行してflow.jsonファイルを作成します（通常はプロジェクトのルートディレクトリに作成されます）。
flow init --config-only
Start the Emulator
あなたのプロジェクト内のflow.jsonを含むディレクトリから次のコマンドを実行して、エミュレータを起動し、スマートコントラクトをデプロイします。
flow emulator start
flow project deploy --network emulator
Configuring Your JavaScript Application
Flow Dev Walletは、@onflow/fclバージョン1.0.0以降で使用するように設計されています。FCLパッケージは、npm install @onflow/fclまたはyarn add @onflow/fclでインストールできます。
Dev Walletを使用するには、ローカルで実行中のFlowエミュレータのアドレスとDev Walletのエンドポイントを指し示すようにFCLを設定します。
import * as fcl from '@onflow/fcl';
fcl
.config()
/* Point App at Emulator REST API */
.put('accessNode.api', 'http://localhost:8888')
/* Point FCL at dev-wallet (default port) */
.put('discovery.wallet', 'http://localhost:8701/fcl/authn');
INFO
完全な例については、Authenticate using FCL snippetを参照してください。
Test harness
開発中のdevウォレットとやり取りするための必要最低限のアプリとして、このFCLハーネスアプリは簡単に使用できます。
http://localhost:8701/harness に移動します。
Wallet Discovery
Wallet Discoveryは、ユーザーを認証する便利なモーダルと機能を提供し、Flowエコシステム内で利用可能なすべてのウォレットに対して接続します。
エメラルド・アカデミーの次のコードをReactアプリに追加すると、Wallet Discoveryを有効にすることができます。
import { config, authenticate, unauthenticate, currentUser } from '@onflow/fcl';
import { useEffect, useState } from 'react';
const fclConfigInfo = {
emulator: {
accessNode: 'http://127.0.0.1:8888',
discoveryWallet: 'http://localhost:8701/fcl/authn',
discoveryAuthInclude: [],
},
testnet: {
accessNode: 'https://rest-testnet.onflow.org',
discoveryWallet: 'https://fcl-discovery.onflow.org/testnet/authn',
discoveryAuthnEndpoint:
'https://fcl-discovery.onflow.org/api/testnet/authn',
/* Adds in Dapper + Ledger */
discoveryAuthInclude: ['0x82ec283f88a62e65', '0x9d2e44203cb13051'],
},
mainnet: {
accessNode: 'https://rest-mainnet.onflow.org',
discoveryWallet: 'https://fcl-discovery.onflow.org/authn',
discoveryAuthnEndpoint: 'https://fcl-discovery.onflow.org/api/authn',
/* Adds in Dapper + Ledger */
discoveryAuthInclude: ['0xead892083b3e2c6c', '0xe5cd26afebe62781'],
},
};
const network = 'emulator';
config({
'walletconnect.projectId': 'YOUR_PROJECT_ID', /* your WalletConnect project ID */
'app.detail.title': 'Emerald Academy', /* the name of your DApp */
'app.detail.icon': 'https://academy.ecdao.org/favicon.png', /* your DApps icon */
'app.detail.description': 'Emerald Academy is a DApp for learning Flow', /* a description of your DApp */
'app.detail.url': 'https://academy.ecdao.org', /* the URL of your DApp */
'flow.network': network,
'accessNode.api': fclConfigInfo[network].accessNode,
'discovery.wallet': fclConfigInfo[network].discoveryWallet,
'discovery.authn.endpoint': fclConfigInfo[network].discoveryAuthnEndpoint,
/* adds in opt-in wallets like Dapper and Ledger */
'discovery.authn.include': fclConfigInfo[network].discoveryAuthInclude,
});
export default function App() {
const [user, setUser] = useState({ loggedIn: false, addr: '' });
/* So that the user stays logged in
even if the page refreshes */
useEffect(() => {
currentUser.subscribe(setUser);
}, []);
return (
<div className="App">
<button onClick={authenticate}>Log In</button>
<button onClick={unauthenticate}>Log Out</button>
<p>{user.loggedIn ? `Welcome, ${user.addr}!` : 'Please log in.'}</p>
</div>
);
}
Account/Address creation
&Account constructorを使用して新しいアカウントを作成することができます。これを行う時は、作成料金を支払うアカウントをpayerとして設定してください。
これらの料金を支払うアカウントには、料金を支払うのに十分な資金が必要です。資金が不足している場合、処理は中断され、アカウントは作成されません。
transaction(publicKey: String) {
prepare(signer: &Account) {
let key = PublicKey(
publicKey: publicKey.decodeHex(),
signatureAlgorithm: SignatureAlgorithm.ECDSA_P256
)
let account = Account(payer: signer)
account.keys.add(
publicKey: key,
hashAlgorithm: HashAlgorithm.SHA3_256,
weight: 1000.0
)
}
}
新しいFlowアカウントを作成するには、以下のリソースを参照してください。
Get Flow Balance
特定のアカウントのトークン残高を取得するには、オンチェーンからデータを取得するスクリプトを記述する必要があります。ユーザーはロックされたトークンとロックされていないトークンの両方を持っている可能性があるため、合計残高を取得するには、それらをまとめて集計します。
import * as fcl from '@onflow/fcl';
import * as t from '@onflow/types';
const CODE = `
import "FungibleToken"
import "FlowToken"
import "LockedTokens"
access(all) fun main(address: Address): UFix64 {
let account = getAccount(address)
let unlockedVault = account
.capabilities.get<&FlowToken.Vault>(/public/flowTokenBalance)
.borrow()
?? panic("Could not borrow Balance reference to the Vault"
.concat(" at path /public/flowTokenBalance!")
.concat(" Make sure that the account address is correct ")
.concat("and that it has properly set up its account with a FlowToken Vault."))
let unlockedBalance = unlockedVault.balance
let lockedAccountInfoCap = account
.capabilities.get
<&LockedTokens.TokenHolder>
(LockedTokens.LockedAccountInfoPublicPath)
if !(lockedAccountInfoCap!.check()) {
return unlockedBalance
}
let lockedAccountInfoRef = lockedAccountInfoCap!.borrow()!
let lockedBalance = lockedAccountInfoRef.getLockedAccountBalance()
return lockedBalance + unlockedBalance
}`;
export const getTotalFlowBalance = async (address) => {
return await fcl.decode(
await fcl.send([fcl.script(CODE), fcl.args([fcl.arg(address, t.Address)])]),
);
};
Contributing
Dev Walletの新しいバージョンのリリースは、タグ付けとリリース作成を行うだけで簡単に行うことができます。その後、GitHub Actionが他の（CLIのような）ツールで使用できるDev Walletのbundleをビルドします。CLIの中でDev Walletの更新が必要な場合は、CLI用の個別の更新PRを作成する必要があります。詳細については、fcl-dev-wallet GitHubリポジトリをご覧ください。
More
さらに、以下のリソースもご活用ください。
Last updated on Nov 26, 2024 by Chase Fleming
翻訳元
Previous << Migration Guide v0.25.0
Flow BlockchainのCadence version1.0ドキュメント (Flow Dev Wallet)