Flow Dev Wallet

[Previous << Migration Guide v0.25.0](https://qiita.com/flowcadence/items/f53d55ad70523d27f114)
[Next >> Cadence VS Code Extension](https://qiita.com/flowcadence/items/1b5bde9635935c1e4d8d)

https://qiita.com/flowcadence/items/3073d69c6e9895e68b5a#reference-2020832ebee1810a325a

Flow Dev Walletは、Flowの模擬(mock)ウォレットであり、シミュレートされたユーザーアカウントに代わって、FlowブロックチェーンとやりとりするためFCLが使用するプロトコルをシミュレートします。

:::note warn
IMPORTANT
このプロジェクトはFCL互換のインターフェースを実装していますが、本番用ウォレットを作る際の参考として使用**すべきではありません**。
このプロジェクトは、Flowエミュレータのような、ローカルで実行されているFlowブロックチェーンのインスタンスに対するローカル開発の補助としてのみ使用すべきであり、Flow Mainnet、Testnet、またはその他のFlowのインスタンスと併用して使用すべきではありません。
:::
:::note info
INFO
すべてのFlow対応ウォレットの一覧は、[ウォレットページ](https://developers.flow.com/ecosystem/wallets)をご覧ください。
:::
<h1>Getting Started</h1>

devウォレットを使用する前に、Flowエミュレータを起動する必要があります。
<h3>Install the flow-cli</h3>

FlowエミュレータはFlow CLIにバンドルされています。CLIのインストール手順は、[こちらをご覧ください](https://qiita.com/flowcadence/items/530223569e603e10e1a7)

<h3>Create a flow.json file</h3>

このコマンドを実行して`flow.json`ファイルを作成します（通常はプロジェクトのルートディレクトリに作成されます）。
```ruby
flow init --config-only
```
<h3>Start the Emulator</h3>

あなたのプロジェクト内の`flow.json`を含むディレクトリから次のコマンドを実行して、エミュレータを起動し、スマートコントラクトをデプロイします。
```ruby
flow emulator start
flow project deploy --network emulator
```

<h1>Configuring Your JavaScript Application</h1>

Flow Dev Walletは、[`@onflow/fcl`](https://github.com/onflow/fcl-js)バージョン`1.0.0`以降で使用するように設計されています。FCLパッケージは、`npm install @onflow/fcl`または`yarn add @onflow/fcl`でインストールできます。

Dev Walletを使用するには、ローカルで実行中の[Flowエミュレータ](#start-the-emulator)のアドレスとDev Walletのエンドポイントを指し示すようにFCLを設定します。
```ruby
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');
```
:::note info
INFO
完全な例については、[Authenticate using FCL snippet](https://academy.ecdao.org/en/snippets/fcl-authenticate)を参照してください。
:::

<h3>Test harness</h3>

開発中のdevウォレットとやり取りするための必要最低限のアプリとして、このFCLハーネスアプリは簡単に使用できます。

http://localhost:8701/harness に移動します。

<h3>Wallet Discovery</h3>

[Wallet Discovery](https://qiita.com/flowcadence/items/01a1580cb15a359a59ce)は、ユーザーを認証する便利なモーダルと機能を提供し、Flowエコシステム内で利用可能なすべてのウォレットに対して接続します。

[エメラルド・アカデミー](https://academy.ecdao.org/en/snippets/fcl-authenticate)の次のコードをReactアプリに追加すると、Wallet Discoveryを有効にすることができます。
```ruby
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>
  );
}
```
<h3>Account/Address creation</h3>

`&Account` constructorを使用して[新しいアカウントを作成する](https://qiita.com/flowcadence/items/5ddbb79fe8438850cf57)ことができます。これを行う時は、作成料金を支払うアカウントをpayerとして設定してください。

これらの料金を支払うアカウントには、料金を支払うのに十分な資金が必要です。資金が不足している場合、処理は中断され、アカウントは作成されません。
```ruby
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アカウントを作成するには、以下のリソースを参照してください。
* [Create an Account with FCL snippet](https://academy.ecdao.org/en/snippets/fcl-create-account)
* [Create an Account in Cadence snippet](https://academy.ecdao.org/en/snippets/cadence-create-account)

<h3>Get Flow Balance</h3>

特定のアカウントのトークン残高を取得するには、オンチェーンからデータを取得するスクリプトを記述する必要があります。ユーザーはロックされたトークンとロックされていないトークンの両方を持っている可能性があるため、合計残高を取得するには、それらをまとめて集計します。
```ruby
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)])]),
  );
};
```

<h1>Contributing</h1>

Dev Walletの新しいバージョンのリリースは、タグ付けとリリース作成を行うだけで簡単に行うことができます。その後、GitHub Actionが他の（CLIのような）ツールで使用できるDev Walletのbundleをビルドします。CLIの中でDev Walletの更新が必要な場合は、CLI用の個別の更新PRを作成する必要があります。詳細については、[fcl-dev-wallet GitHubリポジトリ](https://github.com/onflow/fcl-dev-wallet)をご覧ください。

<h1>More</h1>

さらに、以下のリソースもご活用ください。
* [Guide to Creating a Fungible Token on Flow](https://developers.flow.com/build/guides/fungible-token)
* [Tutorial on Fungible Tokens](https://qiita.com/flowcadence/items/d4f98c76d5f88d447345)
* [Faucets](https://developers.flow.com/ecosystem/faucets)


*Last updated on **Nov 26, 2024** by **Chase Fleming***

翻訳元

https://developers.flow.com/tools/flow-dev-wallet

***
<b>[Previous << Migration Guide v0.25.0](https://qiita.com/flowcadence/items/f53d55ad70523d27f114)
</b>

[Flow blockchain / Cadence version1.0ドキュメント](https://qiita.com/flowcadence/items/3073d69c6e9895e68b5a) (Flow Dev Wallet)

<b>[Next >> Cadence VS Code Extension](https://qiita.com/flowcadence/items/1b5bde9635935c1e4d8d)</b>