diff --git a/.textlintrc b/.textlintrc index 274454514..8d5bdbb6c 100644 --- a/.textlintrc +++ b/.textlintrc @@ -79,6 +79,7 @@ "に", "が", "と", + "は", "も", "で", "に関する" diff --git "a/docs/AVAX-AMM/ja/section-0/Lesson_1_\343\203\227\343\203\255\343\202\270\343\202\247\343\202\257\343\203\210\343\202\222\351\226\213\345\247\213\343\201\227\343\202\210\343\201\206.md" "b/docs/AVAX-AMM/ja/section-0/Lesson_1_\343\203\227\343\203\255\343\202\270\343\202\247\343\202\257\343\203\210\343\202\222\351\226\213\345\247\213\343\201\227\343\202\210\343\201\206.md" index 2e82436ad..bfedd7cbf 100644 --- "a/docs/AVAX-AMM/ja/section-0/Lesson_1_\343\203\227\343\203\255\343\202\270\343\202\247\343\202\257\343\203\210\343\202\222\351\226\213\345\247\213\343\201\227\343\202\210\343\201\206.md" +++ "b/docs/AVAX-AMM/ja/section-0/Lesson_1_\343\203\227\343\203\255\343\202\270\343\202\247\343\202\257\343\203\210\343\202\222\351\226\213\345\247\213\343\201\227\343\202\210\343\201\206.md" @@ -10,10 +10,10 @@ - [TypeScript](https://typescriptbook.jp/overview/features) - [React.js](https://ja.reactjs.org/) -いますべてを理解している必要はありません。 +いますべてを理解している必要はありません。 わからないことがあったらインターネットで検索したり,コミュニティで質問しながらプロジェクトを進めていきましょう! -`Avalanche`での開発が初めての方や, `hardhat`でスマートコントラクトのテストを書いたご経験の無い方は [AVAX-messenger](https://app.unchain.tech/learn/AVAX-messenger) により詳しく解説がありますので先にそちらを進めるとスムーズかと思います。 +`Avalanche`での開発が初めての方や, `hardhat`でスマートコントラクトのテストを書いたご経験の無い方は [AVAX-Messenger](https://app.unchain.tech/learn/AVAX-Messenger) により詳しく解説がありますので先にそちらを進めるとスムーズかと思います。 ### 🛠 何を構築するのか? @@ -21,12 +21,12 @@ `Miniswap`は`AMM`の機能を搭載したスマートコントラクトと, スマートコントラクトとユーザの仲介をするフロントエンドのコードによって作成します。 -スマートコントラクトに`Solidity`, +スマートコントラクトに`Solidity`, フロントエンドに`TypeScript` + `React.js` + `Next.js`を使用します。 今回は作成したスマートコントラクトを, [FUJI C-Chain](https://docs.avax.network/quickstart/fuji-workflow)へデプロイします。 -AvalancheとC-Chainに関する概要は[こちら](https://app.unchain.tech/learn/AVAX-messenger/section-0_lesson-1)をご覧ください。 +AvalancheとC-Chainに関する概要は[こちら](https://app.unchain.tech/learn/AVAX-Messenger/section-0_lesson-1)をご覧ください。 ### 🪙 Defi と DEX と AMM @@ -34,10 +34,10 @@ AvalancheとC-Chainに関する概要は[こちら](https://app.unchain.tech/lea ブロックチェーンのネットワーク上に構築される, 中心となる管理者がいない金融のエコシステムです。 -DeFiの主なメリットとして, コードで管理されたシステムであることやユーザが資産を自身で管理するという点から, +DeFiの主なメリットとして, コードで管理されたシステムであることやユーザが資産を自身で管理するという点から, 既存金融にあったコストやシステム上の摩擦を軽減することができます。 -暗号通貨が貨幣として正常に機能する場合, +暗号通貨が貨幣として正常に機能する場合, Defiがオープンで低価格な点は, 現在の金融システムを利用できない低所得者も利用できるなどのメリットにも繋がります。 一方, 手数料の高騰が起こり得ることや, ユーザーは資産を自身で管理しなければいけず責任の所在はユーザーにある点などはデメリットとして挙げられます。 @@ -46,10 +46,10 @@ Defiがオープンで低価格な点は, 現在の金融システムを利用 🦏 DEX(分散型取引所) -DEXは, AVAX-USDCペアのような2つのトークン間で取引を行うことにより, 誰でもブロックチェーン上で暗号通貨トークンを交換することができる取引所です。 +DEXは, AVAX-USDCペアのような2つのトークン間で取引を行うことにより, 誰でもブロックチェーン上で暗号通貨トークンを交換することができる取引所です。 Defiの一種です。 -Binanceなどの中央集権型の取引所(CEX)は, 買い手と売り手のマッチングに注文書を使用するオンライン取引プラットフォームです。 +Binanceなどの中央集権型の取引所(CEX)は, 買い手と売り手のマッチングに注文書を使用するオンライン取引プラットフォームです。 オンライン証券口座と似たような仕組みで, 投資家に人気があります。 PancakeSwapやUniswapなどの分散型取引所(DEX)は, 暗号通貨トレーダーが保有資産を変換できるスマートコントラクトを搭載した自己完結型の金融プロトコルです。 @@ -70,10 +70,10 @@ AvalancheでDefiを構築することは以下のようなメリットを与え 以下, [medium Avalanche: 新しい DeFi ブロックチェーンを解説](https://medium.com/ava-labs-jp/avalanche-%E6%96%B0%E3%81%97%E3%81%84defi%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%83%81%E3%82%A7%E3%83%BC%E3%83%B3%E3%82%92%E8%A7%A3%E8%AA%AC-fdf231906e4d)より抜粋 -アクセス性 — Avalancheでのトランザクションコストが低いことは, 小規模取引の方が資金的に有利であることを意味し, 小規模なプレイヤーやエントリーレベルの投資家にDeFiのエコシステムを開放します。 +アクセス性 — Avalancheでのトランザクションコストが低いことは, 小規模取引の方が資金的に有利であることを意味し, 小規模なプレイヤーやエントリーレベルの投資家にDeFiのエコシステムを開放します。 ユーザーエクスペリエンスはまだ複雑で, 新規参入にとって大きな障壁となっていますが, この分野の改善によりDeFi領域でより広範な参加者の流入につなげられる可能性があります。 -低スリッページ — Ethereumブロックチェーンの速度は遅くオンチェーン取引を行う際には、大きなスリッページや処理の失敗が発生します。 +低スリッページ — Ethereumブロックチェーンの速度は遅くオンチェーン取引を行う際には、大きなスリッページや処理の失敗が発生します。 Avalancheネットワークの高速なトランザクションレートと高いスループットは, 最小限の価格スリッページとインスタント取引への扉を開き, DEXでのトレードエクスペリエンスを中央集権型の取引のそれに近づけます。 ### 🌍 プロジェクトをアップグレードする @@ -103,9 +103,9 @@ GitHubから直接コードを編集して直接`pull request`を送る方法は UNCHAINのプロジェクトをみんなでより良いものにしていきましょう ✨ -> Windows を使用している方へ -> Windows をお使いの場合は,[Git for Windows](https://gitforwindows.org/) をダウンロードし,それに付属する Git Bash を使うことをお勧めします。 -> 本手順では UNIX 固有のコマンドをサポートしています。 +> Windows を使用している方へ +> Windows をお使いの場合は,[Git for Windows](https://gitforwindows.org/) をダウンロードし,それに付属する Git Bash を使うことをお勧めします。 +> 本手順では UNIX 固有のコマンドをサポートしています。 > [Windows Subsystem for Linux (WSL)](https://docs.microsoft.com/en-us/windows/wsl/install) も選択肢の一つです。 --- diff --git "a/docs/AVAX-AMM/ja/section-1/Lesson_1_\351\226\213\347\231\272\347\222\260\345\242\203\343\202\222\347\224\250\346\204\217\343\201\227\343\202\210\343\201\206.md" "b/docs/AVAX-AMM/ja/section-1/Lesson_1_\351\226\213\347\231\272\347\222\260\345\242\203\343\202\222\347\224\250\346\204\217\343\201\227\343\202\210\343\201\206.md" index 3985333cd..5e3dc98e1 100644 --- "a/docs/AVAX-AMM/ja/section-1/Lesson_1_\351\226\213\347\231\272\347\222\260\345\242\203\343\202\222\347\224\250\346\204\217\343\201\227\343\202\210\343\201\206.md" +++ "b/docs/AVAX-AMM/ja/section-1/Lesson_1_\351\226\213\347\231\272\347\222\260\345\242\203\343\202\222\347\224\250\346\204\217\343\201\227\343\202\210\343\201\206.md" @@ -25,8 +25,8 @@ - Hardhatにより,ローカル環境でイーサリアムネットワークを簡単に起動し,テストネットでethereumを利用できます。 - 「サーバー」がブロックチェーンであることを除けば,Hardhatはローカルサーバーと同じです。 -まず,`node` / `npm`を取得する必要があります。 -お持ちでない場合は,[こちら](https://hardhat.org/tutorial/setting-up-the-environment#installing-node.js) にアクセスし`Node.js`をインストールしてください。 +まず,`node` / `npm`を取得する必要があります。 +お持ちでない場合は,[こちら](https://hardhat.org/tutorial/setting-up-the-environment#installing-node.js) にアクセスし`Node.js`をインストールしてください。 `Node.js`をインストールすると, そのパッケージ管理ツールである`npm`も同時にインストールされます。 > 動作確認。 @@ -57,8 +57,8 @@ npm install --save-dev hardhat @openzeppelin/test-helpers npm install dotenv @openzeppelin/contracts ``` -dapp全体のディレクトリ(`Avalanche-AMM`)とコントラクト実装に使用するディレクトリ(`contract`)を用意しました。 -次に`npm init`によりnpmパッケージを管理するための環境をセットアップを行いました。 +dapp全体のディレクトリ(`Avalanche-AMM`)とコントラクト実装に使用するディレクトリ(`contract`)を用意しました。 +次に`npm init`によりnpmパッケージを管理するための環境をセットアップを行いました。 最後にスマートコントラクトの開発に必要な以下のパッケージを`npm`コマンドを利用してインストールしています。 - `hardhat`: solidityを使った開発をサポートします。 @@ -70,8 +70,8 @@ dapp全体のディレクトリ(`Avalanche-AMM`)とコントラクト実装に 次に,Hardhatを実行します。 -ターミナルで`contract`に移動し,下記を実行します。 -`npx hardhat`を実行すると対話形式で指示を求められるので下記のように回答します。 +ターミナルで`contract`に移動し,下記を実行します。 +`npx hardhat`を実行すると対話形式で指示を求められるので下記のように回答します。 `Create a TypeScript project`を選択するところ以外は`enter`を押せば例通りになるはずです。 ``` @@ -91,7 +91,7 @@ $ npx hardhat `TypeScript`のコードはコンパイルにより`JavaScript`のコードに変換されてから実行されます。 -最終的には`JavaScript`のコードとなるので, 処理能力など`JavaScript`と変わることはありません。 +最終的には`JavaScript`のコードとなるので, 処理能力など`JavaScript`と変わることはありません。 ですが`TypeScript`には静的型付け機能を搭載しているという特徴があります。 静的型付けとは, ソースコード内の値やオブジェクトの型をコンパイル時に解析し, 安全性が保たれているかを検証するシステム・方法のことです。 @@ -101,8 +101,8 @@ $ npx hardhat `TypeScript`はそれらのエラーはコンパイル時に判明するためバグの早期発見に繋がります。 バグの早期発見は開発コストを下げることにつながります。 -本プロジェクトでは, コントラクトのテストとフロントエンドの構築に`TypeScript`を使用します。 -フロントエンドの実装の方では自ら型の指定をする部分が多いのでより型について認識できるかもしれません。 +本プロジェクトでは, コントラクトのテストとフロントエンドの構築に`TypeScript`を使用します。 +フロントエンドの実装の方では自ら型の指定をする部分が多いのでより型について認識できるかもしれません。 (コントラクのテスト実装の方では, 自動的に型を判別する機能を使用しているので自ら型を指定する部分が少ないです)。 ひとまず, オブジェクトの型がわかっていないと実行できないような`JavaScript`コード, という認識でまずは進めてみてください。 @@ -119,7 +119,7 @@ $ npx hardhat test 次のように表示されたら成功です! 🎉 -![](/public/images/AVAX-amm/section-1/1_1_1.png) +![](/public/images/AVAX-AMM/section-1/1_1_1.png) ここまできたら,フォルダーの中身を整理しましょう。 @@ -141,7 +141,7 @@ contract └── typechain-types ``` -`test`の下のファイル`Lock.ts`と +`test`の下のファイル`Lock.ts`と `contracts`の下のファイル`Lock.sol`を削除してください。 実際のフォルダは削除しないように注意しましょう。 diff --git "a/docs/AVAX-AMM/ja/section-1/Lesson_2_Solidity\343\201\247\343\202\271\343\203\236\343\203\274\343\203\210\343\202\263\343\203\263\343\203\210\343\203\251\343\202\257\343\203\210\343\202\222\344\275\234\346\210\220\343\201\227\343\202\210\343\201\206.md" "b/docs/AVAX-AMM/ja/section-1/Lesson_2_Solidity\343\201\247\343\202\271\343\203\236\343\203\274\343\203\210\343\202\263\343\203\263\343\203\210\343\203\251\343\202\257\343\203\210\343\202\222\344\275\234\346\210\220\343\201\227\343\202\210\343\201\206.md" index 8e37f5d50..630f24afd 100644 --- "a/docs/AVAX-AMM/ja/section-1/Lesson_2_Solidity\343\201\247\343\202\271\343\203\236\343\203\274\343\203\210\343\202\263\343\203\263\343\203\210\343\203\251\343\202\257\343\203\210\343\202\222\344\275\234\346\210\220\343\201\227\343\202\210\343\201\206.md" +++ "b/docs/AVAX-AMM/ja/section-1/Lesson_2_Solidity\343\201\247\343\202\271\343\203\236\343\203\274\343\203\210\343\202\263\343\203\263\343\203\210\343\203\251\343\202\257\343\203\210\343\202\222\344\275\234\346\210\220\343\201\227\343\202\210\343\201\206.md" @@ -6,7 +6,7 @@ AMM機能を実装したスマートコントラクトを作成していきま ユーザは私たちのスマートコントラクトを利用して, トークンの交換をすることができます。 -具体的には, 私たちのスマートコントラクトがUSDCというトークンとJOEというトークンを交換することができる場合, +具体的には, 私たちのスマートコントラクトがUSDCというトークンとJOEというトークンを交換することができる場合, ユーザはスマートコントラクトへ接続し, USDCからJOEトークンへ(またはJOEトークンからUSDCトークンへ)交換することができます。 AMMを実装する上で重要なキーワードは以下の3つです。 @@ -19,7 +19,7 @@ AMMを実装する上で重要なキーワードは以下の3つです。 🦒 流動性の提供 -プール内にあるトークン量が少なく(= 取引する際の価格変動が大きくなる), 取引が成立しずらい市場の状態を流動性が低いという表現を使います。 +プール内にあるトークン量が少なく(= 取引する際の価格変動が大きくなる), 取引が成立しずらい市場の状態を流動性が低いという表現を使います。 逆にトークン量が多く(= 価格変動が小さい), 取引がスムーズに成立しやすい状態を流動性が高いといいます。 多くのAMMでは, 流動性の高い状態を作るために, トークン保有者にそのトークンをプールに預けてもらう(流動性の提供という)仕組みを用意しています。 @@ -27,7 +27,7 @@ AMMを実装する上で重要なキーワードは以下の3つです。 例えば, USDCとJOEのプールがある場合はUSDCとJOEを所有している人に両トークンをプールへ預けてもらいます。 (2つのトークンを提供しなければいけないかどうかはDEXによります)。 -流動性の提供者には様々な報酬が用意されています。 +流動性の提供者には様々な報酬が用意されています。 本プロジェクトでは, ユーザがトークンを交換する際に手数料を徴収し, その手数料を流動性の提供者へ与えるという形で報酬を実装します。 🦍 スワップ @@ -50,12 +50,12 @@ AMMを実装する上で重要なキーワードは以下の3つです。 本プロジェクトのスマートコントラクトとなる`AMMコントラクト`が1つと, AMMコントラクトの動きをシミュレーションするための`ERC20Tokenコントラクト`が2つです。 -`AMMコントラクト`は`Fuji C-Chain`にデプロイするため, すでに`Fuji C-Chain`に存在するトークンを使用して`AMMコントラクト`を動かすことは可能ですが, +`AMMコントラクト`は`Fuji C-Chain`にデプロイするため, すでに`Fuji C-Chain`に存在するトークンを使用して`AMMコントラクト`を動かすことは可能ですが, `ERC20`を実装したコントラクトを自前でデプロイし, トークン発行を自由に行えるとトークン取得のプロセスが柔軟で簡単になります。 `contracts`ディレクトリの下に`ERC20Tokens.sol`, `AMM.sol`という名前のファイルを作成します。 -Hardhatを使用する場合ファイル構造は非常に重要ですので, 注意する必要があります。 +Hardhatを使用する場合ファイル構造は非常に重要ですので, 注意する必要があります。 ファイル構造が下記のようになっていれば大丈夫です 😊 ```bash @@ -127,7 +127,7 @@ contract USDCToken is ERC20 { コンストラクタの中では, コントラクトをデプロイしたアカウントに`10000 ether (= 10000 x 10^18)`分`USDC`を発行しています。 ※ `USDC`と`JOE`は最小単位をetherと同じように扱うことにします。 -`_mint`の実装は [ERC20](https://github.com/OpenZeppelin/openzeppelin-contracts/blob/master/contracts/token/ERC20/ERC20.sol) の中にあります。 +`_mint`の実装は [ERC20](https://github.com/OpenZeppelin/openzeppelin-contracts/blob/master/contracts/token/ERC20/ERC20.sol) の中にあります。 内部では, コントラクトの保持する2つの値(トークン総量を表す値と, 指定されたアカウントの所有トークン量を表す値)に指定されたトークンの量だけ加算しています。 `USDCToken`は`faucet`という関数も実装し, 中で`_mint`を呼び出しています。 @@ -172,12 +172,12 @@ contract AMM { } ``` -この2つのオブジェクトはそれぞれ, 私たちが作るAMMが用意するプールのトークンペアのコントラクトです。 +この2つのオブジェクトはそれぞれ, 私たちが作るAMMが用意するプールのトークンペアのコントラクトです。 本プロジェクトでは`USDCToken`と`JOEToken`のアドレスをここに記録してAMMを動かします。 [IERC20](https://github.com/OpenZeppelin/openzeppelin-contracts/blob/master/contracts/token/ERC20/IERC20.sol) とは`ERC20`のインタフェースであり, `ERC20`の関数のみ定義された(= ERC20がどのように振る舞うのかのみわかる)フレームのようなものです。 -`AMMコントラクト`はtokenXとtokenYに特定のコントラクトを指定する必要はなく, +`AMMコントラクト`はtokenXとtokenYに特定のコントラクトを指定する必要はなく, 「`ERC20`の関数を実装しているコントラクト」を保持すれば良いので, インタフェースで型を用意しています。 コントラクトから別のコントラクトの関数を呼び出す場合はインタフェースを使うことで呼び出すことができます。 @@ -196,14 +196,14 @@ tokenX.transfer() 次にシェアに関する状態変数について見ていきます。 -本プロジェクトで使うシェアという言葉は, 流動性の提供者がプールにどのくらいのトークンを預けているのかを表す数値を指します。 +本プロジェクトで使うシェアという言葉は, 流動性の提供者がプールにどのくらいのトークンを預けているのかを表す数値を指します。 DEXで用意されていることが多いLPトークンと同じ役目を果たします。 今回は簡単に実装するため, コントラクト内で数値として保持します。 -> 📓 LP トークンとは +> 📓 LP トークンとは > Liquidity Provider( = 流動性提供者) トークンの略です。 -> 流動性を提供したことを証明する債券のようなものであり, +> 流動性を提供したことを証明する債券のようなものであり, > 預けたトークンを返却して欲しい時には, LP トークンを提示することにより, 元の資産および利子を受け取ることができます。 シェアに関する状態変数は以下です。 @@ -219,20 +219,20 @@ uint256 public constant PRECISION = 1_000_000; // シェアの精度に使用す 例えば, あるユーザ(アドレスを`addr`で表す)の提供しているトークン量の, 全てのユーザの提供量に対する割合を考える場合は次の式で求めることができます。 -![](/public/images/AVAX-amm/section-1/1_1_2.png) +![](/public/images/AVAX-AMM/section-1/1_1_2.png) この考え方は, 流動性の提供者が預けているトークンを引き出す時に, そのトークン量を計算する際に使います。 -`PRECISION`はshareの小数点以下を表すもので6桁分用意しています。 -shareが1.23あるとすると, コントラクト内では1_230_000として保持します。 -ethereumトークンにおける`ether`と`wei`の関係のようなものです。 +`PRECISION`はshareの小数点以下を表すもので6桁分用意しています。 +shareが1.23あるとすると, コントラクト内では1_230_000として保持します。 +ethereumトークンにおける`ether`と`wei`の関係のようなものです。 見やすくなるため`1_000_000`で記載していますが, `1000000`と同じ意味です。 --- また, `totalAmount`という状態変数も用意していますが, 提供されたトークンの量をそれぞれのトークンに対し保持します。 -最後に, 私たちが作る`AMMコントラクト`は, デプロイ時にコンストラクタによってプールのトークンペアを決定する仕様とします。 +最後に, 私たちが作る`AMMコントラクト`は, デプロイ時にコンストラクタによってプールのトークンペアを決定する仕様とします。 そのため引数に2つのコントラクトアドレスを受け取れるようにしています。 ### 🧪 テストを実装する @@ -290,7 +290,7 @@ describe("AMM", function () { `AMMコントラクト`のデプロイ時には, `USDCToken`, `JoeToken`をコンストラクタに渡しています。 -以下の部分では, デプロイした`AMMコントラクト`の状態変数の初期値を確かめています。 +以下の部分では, デプロイした`AMMコントラクト`の状態変数の初期値を確かめています。 ※ コントラクトからの数値の返り値はBigNumberです。 ```ts @@ -309,10 +309,10 @@ expect(await amm.totalShare()).to.eql(BigNumber.from(0)); $ npx hardhat test ``` -以下のような表示がされます。 +以下のような表示がされます。 実行したテスト名とそのテストがパスしたことがわかります。 -![](/public/images/AVAX-amm/section-1/1_2_1.png) +![](/public/images/AVAX-AMM/section-1/1_2_1.png) ### 🙋‍♂️ 質問する @@ -329,5 +329,5 @@ $ npx hardhat test --- -コントラクトの作成とテストまでの流れを知ることができました 🎉 +コントラクトの作成とテストまでの流れを知ることができました 🎉 次のレッスンでは,スマートコントラクトに機能を追加していきます。 diff --git "a/docs/AVAX-AMM/ja/section-1/Lesson_3_\346\265\201\345\213\225\346\200\247\343\201\256\346\217\220\344\276\233\343\202\222\345\256\237\350\243\205\343\201\227\343\202\210\343\201\206.md" "b/docs/AVAX-AMM/ja/section-1/Lesson_3_\346\265\201\345\213\225\346\200\247\343\201\256\346\217\220\344\276\233\343\202\222\345\256\237\350\243\205\343\201\227\343\202\210\343\201\206.md" index 02a04675f..020260415 100644 --- "a/docs/AVAX-AMM/ja/section-1/Lesson_3_\346\265\201\345\213\225\346\200\247\343\201\256\346\217\220\344\276\233\343\202\222\345\256\237\350\243\205\343\201\227\343\202\210\343\201\206.md" +++ "b/docs/AVAX-AMM/ja/section-1/Lesson_3_\346\265\201\345\213\225\346\200\247\343\201\256\346\217\220\344\276\233\343\202\222\345\256\237\350\243\205\343\201\227\343\202\210\343\201\206.md" @@ -6,7 +6,7 @@ - ユーザは2つのトークンをコントラクトに預けることができます。 -- 預けるトークンはお互い同価値の量を預てもらうというルールを設けます。 +- 預けるトークンはお互い同価値の量を預てもらうというルールを設けます。 例) プールにトークンXとYが1:2の割合で存在する場合, トークンXを10預ける場合はもうトークンYは20必要なことになります。 - コントラクト内では, ユーザが預けたトークンの量が全体のどれくらいの割合であるか(シェア)を数値として保持します。 @@ -102,16 +102,16 @@ contract AMM { トークンXとYに関してプールにある総量をそれぞれx, y, 流動性提供によりプールに増える量をそれぞれx', y'で表すとすると次の式が成り立ちます。 -![](/public/images/AVAX-amm/section-1/1_3_2.png) +![](/public/images/AVAX-AMM/section-1/1_3_2.png) 上記のような比の関係において, 以下のように式を解いてy'を求めることができます。 -![](/public/images/AVAX-amm/section-1/1_3_3.png) +![](/public/images/AVAX-AMM/section-1/1_3_3.png) -この計算を先ほど実装した関数内では行っています。 +この計算を先ほど実装した関数内では行っています。 引数で渡されたトークンとその量から, ペアのトークンとその同価値の量(返り値)を求めています。 -次に実際に流動性を提供する関数を実装します。 +次に実際に流動性を提供する関数を実装します。 コントラクトの最後の行に以下の関数を追加してください。 ```solidity @@ -157,10 +157,10 @@ contract AMM { } ``` -引数には預けるトークンコントラクトとその量を受け取ります。 +引数には預けるトークンコントラクトとその量を受け取ります。 modifierやrequireを使って各値が正常か確認しています。 -預けられたトークンのシェアを求め, `newShare`に格納します。 +預けられたトークンのシェアを求め, `newShare`に格納します。 ここでは条件分岐があります。 ```solidity @@ -181,10 +181,10 @@ if (totalShare == 0) { `totalShare == 0`の時, つまりプールにまだトークンが存在しない場合は, シェアの初期値を100とします。 -`totalShare != 0`の場合は, それぞれのトークンに関して, 預けられたトークンの全体のトークンに対するシェアを求めます。 +`totalShare != 0`の場合は, それぞれのトークンに関して, 預けられたトークンの全体のトークンに対するシェアを求めます。 計算式は以下を基にしています。 -![](/public/images/AVAX-amm/section-1/1_3_4.png) +![](/public/images/AVAX-AMM/section-1/1_3_4.png) 各トークンは同価値の量だけ渡されているはずなので, それぞれのシェアも同じになるはずです。 @@ -231,7 +231,7 @@ share[msg.sender] += newshare; ERC20TokenContract.approve(移動を実行するアカウントまたはコントラクトのアドレス, 移動するトークンの量); ``` -例えば, アカウントAがTokenXを所有していて, アカウントBがAの持つTokenXを30だけ移動する許可を与えたいとします。 +例えば, アカウントAがTokenXを所有していて, アカウントBがAの持つTokenXを30だけ移動する許可を与えたいとします。 そのためには, AはこのようにしてTokenXの`approve`を呼び出します。 ``` @@ -244,16 +244,16 @@ TokenX.approve(Bのアドレス, 30); TokenX.transferFrom(Aのアドレス, Bのアドレス, 30); ``` -この`approve`, `transferFrom`の一連の流れを経てBはAの持つトークンを自身へ移動することができました。 +この`approve`, `transferFrom`の一連の流れを経てBはAの持つトークンを自身へ移動することができました。 `approve`なしに`transferFrom`が使えてしまうと, Bは好き勝手にAの持つトークンを移動できてしまうのでトークンの機能として成り立ちません。 -`AMMコントラクト`の`provide`関数内では`transferFrom`を使用していますが, これは流動性提供者が`provide`を呼び出す前に -各トークンの`approve`の実行を済ませていることが前提です。 +`AMMコントラクト`の`provide`関数内では`transferFrom`を使用していますが, これは流動性提供者が`provide`を呼び出す前に +各トークンの`approve`の実行を済ませていることが前提です。 `approve`が行われていない場合は`transferFrom`の呼び出しは失敗します。 📓 `approve`/`transferFrom`を使う理由 -上記の話は, トークンを直接`AMMコントラクト`へ送信(`transfer`を使用)してから, `provide`を呼び出すという流れでも成立しそうですが +上記の話は, トークンを直接`AMMコントラクト`へ送信(`transfer`を使用)してから, `provide`を呼び出すという流れでも成立しそうですが なぜ`approve`/`transferFrom`を使用するのかについても考えてみます。 トークンを直接`AMMコントラクト`へ送信してから`provide`を呼び出す場合は以下のような流れになります。 @@ -281,7 +281,7 @@ TokenX.transferFrom(Aのアドレス, Bのアドレス, 30); - AMMは流動性提供者からトークンを自身へ移動 - シェアなどの状態変数を変更する -後に実装するswapの際にも, 同じような理由で +後に実装するswapの際にも, 同じような理由で トークンの送受信とAMMコントラクト内での処理(レートの計算など)を同じトランザクションで行いたいので`approve`/`transferFrom`を使用します。 ### 🧪 テストを追加しましょう @@ -352,7 +352,7 @@ await amm.provide( 最後に`provide`後の各残高の確認をしています。 -例えば以下の部分では, ownerのtoken0の残高が +例えば以下の部分では, ownerのtoken0の残高が `provide`実行前の残高(`ownerBalance0Before`)から `provide`したtoken0の量(`amountProvide0`)だけ減っていることを確認しています。 ```ts @@ -440,12 +440,12 @@ describe("Deploy with liquidity", function () { }); ``` -プールにトークンが存在する状態のAMMをテスト内では流用したいため, -`deployContractWithLiquidity`にて, 各コントラクトのデプロイからammのプールにトークンが存在する状態までを関数にしています。 -仕組みは先ほど行った`provide`と同じですが, ownerに加えotherAccountも流動性を提供しています。 +プールにトークンが存在する状態のAMMをテスト内では流用したいため, +`deployContractWithLiquidity`にて, 各コントラクトのデプロイからammのプールにトークンが存在する状態までを関数にしています。 +仕組みは先ほど行った`provide`と同じですが, ownerに加えotherAccountも流動性を提供しています。 各アカウントが提供したトークンの量は関数の返り値に含めています。 -その下に続く`Deploy with liquidity`のテストでは, +その下に続く`Deploy with liquidity`のテストでは, `deployContractWithLiquidity`を実行後のammコントラクト内状態変数の初期値を確認しています。 --- @@ -503,14 +503,14 @@ $ npx hardhat test 以下のような表示がされたらテスト成功です! -![](/public/images/AVAX-amm/section-1/1_3_1.png) +![](/public/images/AVAX-AMM/section-1/1_3_1.png) ### 🌔 参考リンク > [こちら](https://github.com/unchain-dev/avalanche-amm-dapp)に本プロジェクトの完成形のレポジトリがあります。 > -> コードがうまく動かない場合は参考にしてみてください。 -> `contract`はリンク先のレポジトリ内の`package/contract`を。 +> コードがうまく動かない場合は参考にしてみてください。 +> `contract`はリンク先のレポジトリ内の`package/contract`を。 > `client`はリンク先のレポジトリ内の`package/client`を参照してください。 ### 🙋‍♂️ 質問する diff --git "a/docs/AVAX-AMM/ja/section-1/Lesson_4_\343\203\210\343\203\274\343\202\257\343\203\263\343\201\256\345\274\225\345\207\272\343\201\227\343\202\222\345\256\237\350\243\205\343\201\227\343\202\210\343\201\206.md" "b/docs/AVAX-AMM/ja/section-1/Lesson_4_\343\203\210\343\203\274\343\202\257\343\203\263\343\201\256\345\274\225\345\207\272\343\201\227\343\202\222\345\256\237\350\243\205\343\201\227\343\202\210\343\201\206.md" index 3a34e09a8..29b0ec14a 100644 --- "a/docs/AVAX-AMM/ja/section-1/Lesson_4_\343\203\210\343\203\274\343\202\257\343\203\263\343\201\256\345\274\225\345\207\272\343\201\227\343\202\222\345\256\237\350\243\205\343\201\227\343\202\210\343\201\206.md" +++ "b/docs/AVAX-AMM/ja/section-1/Lesson_4_\343\203\210\343\203\274\343\202\257\343\203\263\343\201\256\345\274\225\345\207\272\343\201\227\343\202\222\345\256\237\350\243\205\343\201\227\343\202\210\343\201\206.md" @@ -1,6 +1,6 @@ ### 🔥 トークンの引き出し機能を実装しましょう -前回のレッスンではトークンの提供機能を実装しましたが, +前回のレッスンではトークンの提供機能を実装しましたが, このレッスンでは流動性の提供者が預けたトークンを引き出す機能を実装します。 ユーザは自身のシェアの分だけプールに預けたトークンを引き出すことができます。 @@ -48,12 +48,12 @@ シェアの総量(`totalShare`)に対する指定されたシェア(`share`)の割合は -![](/public/images/AVAX-amm/section-1/1_4_2.png) +![](/public/images/AVAX-AMM/section-1/1_4_2.png) -で表されるので, +で表されるので, シェアの分に応じたトークンの量は -![](/public/images/AVAX-amm/section-1/1_4_3.png) +![](/public/images/AVAX-AMM/section-1/1_4_3.png) で算出することができます。 @@ -67,7 +67,7 @@ ### 🧪 テストを追加しましょう -それでは追加した機能に対してテストを書いていきます。 +それでは追加した機能に対してテストを書いていきます。 `test/AMM.ts`内のテストの最後の行に以下のコードを追加してください。 ```ts @@ -95,10 +95,10 @@ describe("getWithdrawEstimate", function () { }); ``` -`getWithdrawEstimate`テストではotherAccountのシェアを引数に指定した場合の +`getWithdrawEstimate`テストではotherAccountのシェアを引数に指定した場合の `getWithdrawEstimate`関数の返り値をテストしています。 -otherAccountは`amountOtherProvided0`と`amountOtherProvided1`だけそれぞれプールに預けているので, シェアの分だけ引き出せる量を計算すると +otherAccountは`amountOtherProvided0`と`amountOtherProvided1`だけそれぞれプールに預けているので, シェアの分だけ引き出せる量を計算すると 預けている量と同じ量が返ってくるはずです。 続いてその下に以下のテストを追加しましょう。 @@ -170,10 +170,10 @@ describe("withdraw", function () { }); ``` -`Token should be moved`テストでは, `withdraw`関数を実行する前後でトークンが正しく移動しているかを確認しています。 +`Token should be moved`テストでは, `withdraw`関数を実行する前後でトークンが正しく移動しているかを確認しています。 ロジックは`provide`に関するテストで行ったトークンの移動の確認と同じです。 -続く`Should set the right number of amm details`テストでは, otherAccountが自身のシェアの分トークンを引き出した場合に, +続く`Should set the right number of amm details`テストでは, otherAccountが自身のシェアの分トークンを引き出した場合に, AMMコントラクトの状態変数が正しく変更されているかを確認しています。 ### ⭐ テストを実行しましょう @@ -188,14 +188,14 @@ $ npx hardhat test 以下のような表示がされたらテスト成功です! -![](/public/images/AVAX-amm/section-1/1_4_1.png) +![](/public/images/AVAX-AMM/section-1/1_4_1.png) ### 🌔 参考リンク > [こちら](https://github.com/unchain-dev/avalanche-amm-dapp)に本プロジェクトの完成形のレポジトリがあります。 > -> コードがうまく動かない場合は参考にしてみてください。 -> `contract`はリンク先のレポジトリ内の`package/contract`を。 +> コードがうまく動かない場合は参考にしてみてください。 +> `contract`はリンク先のレポジトリ内の`package/contract`を。 > `client`はリンク先のレポジトリ内の`package/client`を参照してください。 ### 🙋‍♂️ 質問する @@ -213,7 +213,7 @@ $ npx hardhat test --- -おめでとうございます! +おめでとうございます! セクション1が終了しました! 次のセクションではAMMコントラクトにswap機能を実装していきます 🏄‍♂️ diff --git "a/docs/AVAX-AMM/ja/section-2/Lesson_1_swap\343\202\222\347\220\206\350\247\243\343\201\227\343\202\210\343\201\206.md" "b/docs/AVAX-AMM/ja/section-2/Lesson_1_swap\343\202\222\347\220\206\350\247\243\343\201\227\343\202\210\343\201\206.md" index 40346a8ea..7b83ca89b 100644 --- "a/docs/AVAX-AMM/ja/section-2/Lesson_1_swap\343\202\222\347\220\206\350\247\243\343\201\227\343\202\210\343\201\206.md" +++ "b/docs/AVAX-AMM/ja/section-2/Lesson_1_swap\343\202\222\347\220\206\350\247\243\343\201\227\343\202\210\343\201\206.md" @@ -3,7 +3,7 @@ AMMではアルゴリズムに従ってswapできるトークンの量を決定します。 ここではUniswapと同様に式 -![](/public/images/AVAX-amm/section-2/2_1_5.png) +![](/public/images/AVAX-AMM/section-2/2_1_5.png) を使用します。 @@ -15,13 +15,13 @@ kは固定定数です。 ⚠️ 実際には, 流動性の提供時やswap時に手数料を考慮するとkは変化しますが, あくまで -![](/public/images/AVAX-amm/section-2/2_1_5.png) +![](/public/images/AVAX-AMM/section-2/2_1_5.png) の法則に基づいてトークンの価格を算出しています。 上式を図にすると以下のような曲線を描きます。 -![](/public/images/AVAX-amm/section-2/2_1_1.png) +![](/public/images/AVAX-AMM/section-2/2_1_1.png) xの量が増えるほどyの量が減り, yの量が増えるほどxの量は減るような式になっています。 @@ -32,11 +32,11 @@ xの量が増えるほどyの量が減り, yの量が増えるほどxの量は 今の処理を図で見てみましょう。 トークンXからYへのswap時, プール内のトークンの量の変化は下の図のA地点->B地点への移動で表すことができます。 -![](/public/images/AVAX-amm/section-2/2_1_2.png) +![](/public/images/AVAX-AMM/section-2/2_1_2.png) 逆にトークンYからXへのswapは以下のように考えられます。 -![](/public/images/AVAX-amm/section-2/2_1_3.png) +![](/public/images/AVAX-AMM/section-2/2_1_3.png) このようにAMMの内部では基本式に基づいて価格決定をしています。 @@ -62,23 +62,23 @@ Discordの`#avalanche`で聞くのも良いでしょう。 🦕 シチュエーション1: x' からy' を算出する -![](/public/images/AVAX-amm/section-2/2_1_2.png) +![](/public/images/AVAX-AMM/section-2/2_1_2.png) プールに入るx' の量が分かっていて, x' を元にプールから出る量y' を算出する方法を導きます。 基本式は以下で, Kは定数というものでした。 -![](/public/images/AVAX-amm/section-2/2_1_5.png) +![](/public/images/AVAX-AMM/section-2/2_1_5.png) つまりx' とy' 分の増減があってもプールに残るXとYの積は一定ということです。 これを式にすると以下のようになります。 -![](/public/images/AVAX-amm/section-2/2_1_6.png) +![](/public/images/AVAX-AMM/section-2/2_1_6.png) 式の左辺が上図のA地点, 右辺が上図のB地点のKを表しています。 さらに今回求めたいy' について上の式を解いていきます。 -![](/public/images/AVAX-amm/section-2/2_1_7.png) +![](/public/images/AVAX-AMM/section-2/2_1_7.png) シンプルな式が導き出されました。 この計算式を利用することでy' を求めることができます。 @@ -87,13 +87,13 @@ Discordの`#avalanche`で聞くのも良いでしょう。 図はシチュエーション1と同じものです。 -![](/public/images/AVAX-amm/section-2/2_1_2.png) +![](/public/images/AVAX-AMM/section-2/2_1_2.png) ここでは先ほどとは逆に, プールから出る量y' があらかじめ指定された状態で, どのくらいの量のx' をプールに入れなければいけないのかを求めます。 計算は先ほどとほとんど同じで, 今度はx' について解きます。 -![](/public/images/AVAX-amm/section-2/2_1_8.png) +![](/public/images/AVAX-AMM/section-2/2_1_8.png) 以上でユーザがswapをする際に, swap元のトークンの量から受け取れるswap先のトークンの量を求めたい時はシチュエーション1の式を, swapによって受け取りたいswap先のトークンの量からどのくらいswap元のトークンが必要かを求めたい時はシチュエーション2の式を利用すれば良いことがわかりました。 diff --git "a/docs/AVAX-AMM/ja/section-2/Lesson_2_swap\346\231\202\343\201\256\346\211\213\346\225\260\346\226\231\343\202\222\347\220\206\350\247\243\343\201\227\343\202\210\343\201\206.md" "b/docs/AVAX-AMM/ja/section-2/Lesson_2_swap\346\231\202\343\201\256\346\211\213\346\225\260\346\226\231\343\202\222\347\220\206\350\247\243\343\201\227\343\202\210\343\201\206.md" index 1f56a5048..bea4031e0 100644 --- "a/docs/AVAX-AMM/ja/section-2/Lesson_2_swap\346\231\202\343\201\256\346\211\213\346\225\260\346\226\231\343\202\222\347\220\206\350\247\243\343\201\227\343\202\210\343\201\206.md" +++ "b/docs/AVAX-AMM/ja/section-2/Lesson_2_swap\346\231\202\343\201\256\346\211\213\346\225\260\346\226\231\343\202\222\347\220\206\350\247\243\343\201\227\343\202\210\343\201\206.md" @@ -20,7 +20,7 @@ swapを要求するユーザがプールに送信するトークンの量を, AM 前回のレッスンの`シチュエーション 1`で導き出した式 -![](/public/images/AVAX-amm/section-2/2_2_1.png) +![](/public/images/AVAX-AMM/section-2/2_2_1.png) を使用すると, @@ -33,7 +33,7 @@ swapを要求するユーザがプールに送信するトークンの量を, AM 🐟 手数料を考慮しない場合 -![](/public/images/AVAX-amm/section-2/2_2_2.png) +![](/public/images/AVAX-AMM/section-2/2_2_2.png) プール内のXは1,000増えます。 Yは909減ります。 @@ -45,7 +45,7 @@ Yは909減ります。 ユーザはXの量に`1,000`を指定してswapを実行しますが, AMMの内部では`1,000`から0.3% の3を引いて`997`で計算をします。 -![](/public/images/AVAX-amm/section-2/2_2_3.png) +![](/public/images/AVAX-AMM/section-2/2_2_3.png) プール内のXは1,000増えます。 Yは906減ります。 @@ -80,35 +80,35 @@ Y -> Xへswapをするとこれと逆のことが起こります。 元の式は以下です。 -![](/public/images/AVAX-amm/section-2/2_2_1.png) +![](/public/images/AVAX-AMM/section-2/2_2_1.png) x'に関して, 0.3% 引いた0.997x' とすれば良いのですが, 後にsolidityで実装する際に小数を扱えないことに備えて 全ての値に`1,000`をかけて3桁分繰り上げましょう。 -![](/public/images/AVAX-amm/section-2/2_2_4.png) +![](/public/images/AVAX-AMM/section-2/2_2_4.png) 両辺を`1,000`で割ると以下の式が導き出せます。 -![](/public/images/AVAX-amm/section-2/2_2_5.png) +![](/public/images/AVAX-AMM/section-2/2_2_5.png) 🐬 シチュエーション2: y' からx' を算出する 元の式は以下です。 -![](/public/images/AVAX-amm/section-2/2_2_6.png) +![](/public/images/AVAX-AMM/section-2/2_2_6.png) 先ほどと同じようにx' から0.3% 引き, 全ての値を3桁分繰り上げると以下のような形になります。 -![](/public/images/AVAX-amm/section-2/2_2_7.png) +![](/public/images/AVAX-AMM/section-2/2_2_7.png) 右辺は分母と分子をそれぞれ`1,000`で割ると -![](/public/images/AVAX-amm/section-2/2_2_8.png) +![](/public/images/AVAX-AMM/section-2/2_2_8.png) となり, 両辺を`997`で割ると -![](/public/images/AVAX-amm/section-2/2_2_9.png) +![](/public/images/AVAX-AMM/section-2/2_2_9.png) x'について式が導き出せました。 diff --git "a/docs/AVAX-AMM/ja/section-2/Lesson_3_swap\343\202\222\345\256\237\350\243\205\343\201\227\343\202\210\343\201\206.md" "b/docs/AVAX-AMM/ja/section-2/Lesson_3_swap\343\202\222\345\256\237\350\243\205\343\201\227\343\202\210\343\201\206.md" index 1affce741..40e1a1c48 100644 --- "a/docs/AVAX-AMM/ja/section-2/Lesson_3_swap\343\202\222\345\256\237\350\243\205\343\201\227\343\202\210\343\201\206.md" +++ "b/docs/AVAX-AMM/ja/section-2/Lesson_3_swap\343\202\222\345\256\237\350\243\205\343\201\227\343\202\210\343\201\206.md" @@ -80,12 +80,12 @@ } ``` -`swap`関数はシンプルで, `getSwapEstimateOut`によりユーザに送信するトークンの量を取得したら, +`swap`関数はシンプルで, `getSwapEstimateOut`によりユーザに送信するトークンの量を取得したら, `_inToken`をユーザからコントラクトへ移動させ`_outToken`をコントラクトからユーザへ送信します。 ### 🧪 テストを追加しましょう -それでは追加した機能に対してテストを書いていきます。 +それでは追加した機能に対してテストを書いていきます。 `test/AMM.ts`内のテストの最後の行に以下のコードを追加してください。 ```ts @@ -149,7 +149,7 @@ describe("getSwapEstimateIn", function () { }); ``` -`getSwapEstimateOut`, `getSwapEstimateIn`テストは共に先ほど実装した +`getSwapEstimateOut`, `getSwapEstimateIn`テストは共に先ほど実装した getSwapEstimateOut/getSwapEstimateInが正しく値を返しているかをテスト側でも計算することで確かめています。 また, `getSwapEstimateIn`テストでは`getSwapEstimateIn`を呼び出す際に指定するトークンの量がプール内の総量を超えていた場合にトランザクションがキャンセルされることを確かめています。 @@ -239,14 +239,14 @@ $ npx hardhat test 以下のような表示がされたらテスト成功です! -![](/public/images/AVAX-amm/section-2/2_1_4.png) +![](/public/images/AVAX-AMM/section-2/2_1_4.png) ### 🌔 参考リンク > [こちら](https://github.com/unchain-dev/avalanche-amm-dapp)に本プロジェクトの完成形のレポジトリがあります。 > -> コードがうまく動かない場合は参考にしてみてください。 -> `contract`はリンク先のレポジトリ内の`package/contract`を。 +> コードがうまく動かない場合は参考にしてみてください。 +> `contract`はリンク先のレポジトリ内の`package/contract`を。 > `client`はリンク先のレポジトリ内の`package/client`を参照してください。 ### 🙋‍♂️ 質問する @@ -264,7 +264,7 @@ $ npx hardhat test --- -おめでとうございます! +おめでとうございます! セクション2が終了しました。 コントラクトの完成です! 次のセクションではフロントエンドを作成します 🏌️‍♀️ diff --git "a/docs/AVAX-AMM/ja/section-3/Lesson_1_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\343\202\222\343\202\273\343\203\203\343\203\210\343\202\242\343\203\203\343\203\227\343\201\227\343\202\210\343\201\206.md" "b/docs/AVAX-AMM/ja/section-3/Lesson_1_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\343\202\222\343\202\273\343\203\203\343\203\210\343\202\242\343\203\203\343\203\227\343\201\227\343\202\210\343\201\206.md" index e771d1562..34504468a 100644 --- "a/docs/AVAX-AMM/ja/section-3/Lesson_1_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\343\202\222\343\202\273\343\203\203\343\203\210\343\202\242\343\203\203\343\203\227\343\201\227\343\202\210\343\201\206.md" +++ "b/docs/AVAX-AMM/ja/section-3/Lesson_1_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\343\202\222\343\202\273\343\203\203\343\203\210\343\202\242\343\203\203\343\203\227\343\201\227\343\202\210\343\201\206.md" @@ -8,7 +8,7 @@ - `React.js`: ライブラリ - `Next.js`: `React.js`のフレームワーク -それぞれの概要については[こちら](https://app.unchain.tech/learn/AVAX-messenger/section-2_lesson-1)に説明を載せていますので, +それぞれの概要については[こちら](https://app.unchain.tech/learn/AVAX-Messenger/section-2_lesson-1)に説明を載せていますので, 初めて触れる方はご参照ください 💁 ### 🛠️  フロントエンドのセットアップをしよう @@ -19,8 +19,8 @@ npx create-next-app client --ts --use-npm ``` -ここでは`create-next-app`というパッケージを利用して`client`という名前のプロジェクトを作成しました。 -`--ts`は`typescript`を使用することの指定, `--use-npm`は`npm`を使用してアプリの立ち上げを行うこと指定しています。 +ここでは`create-next-app`というパッケージを利用して`client`という名前のプロジェクトを作成しました。 +`--ts`は`typescript`を使用することの指定, `--use-npm`は`npm`を使用してアプリの立ち上げを行うこと指定しています。 `client`ディレクトリには`Next.js`を使ったプロジェクト開発に最低限必要なものがあらかじめ作成されます。 この段階で,フォルダ構造は下記のようになっているはずです。 @@ -38,7 +38,7 @@ cd client npm run dev ``` -あなたのお使いのブラウザで +あなたのお使いのブラウザで `http://localhost:3000` へアクセスするとWebサイトのフロントエンドが表示されるはずです。 @@ -46,7 +46,7 @@ npm run dev 例)ローカル環境で表示されているWebサイト -![](/public/images/AVAX-amm/section-3/3_1_1.png) +![](/public/images/AVAX-AMM/section-3/3_1_1.png) 上記のような形でフロントエンドが確認できれば成功です。 @@ -57,7 +57,7 @@ webサイトの立ち上げを終了する場合は以下のコマンドが使 - Mac: `ctrl + c` - Windows: `ctrl + shift + w` -`client`ディレクトリのフォルダ構造は以下のようになっています。 +`client`ディレクトリのフォルダ構造は以下のようになっています。 ※`node_modules`は内部ファイルの表示を省略しています。 ``` @@ -94,15 +94,15 @@ npm install ethers @metamask/providers react-icons ### 🐊 `github`にソースコードをアップロードしよう -本プロジェクトの最後では, アプリをデプロイするために`github`へソースコードをアップロードする必要があります。 +本プロジェクトの最後では, アプリをデプロイするために`github`へソースコードをアップロードする必要があります。 今後の開発にも役に立つと思いますので, 今のうちにアップロード方法をおさらいしておきましょう。 GitHubのアカウントをお持ちでない方は,[こちら](https://qiita.com/okumurakengo/items/848f7177765cf25fcde0) の手順に沿ってアカウントを作成してください。 GitHubへアップロードをしたことがない方は以下を参考にしてください。 -[新しいレポジトリを作成](https://docs.github.com/ja/get-started/quickstart/create-a-repo)(リポジトリ名などはご自由に)した後, -手順に従いターミナルからアップロードを済ませます。 +[新しいレポジトリを作成](https://docs.github.com/ja/get-started/quickstart/create-a-repo)(リポジトリ名などはご自由に)した後, +手順に従いターミナルからアップロードを済ませます。 以下ターミナルで実行するコマンドの参考です。(`client`直下で実行することを想定しております) ``` @@ -133,9 +133,9 @@ $ git push -u origin main このプロジェクトではMetaMaskを使用します。 -> 📓 [Core](https://support.avax.network/en/collections/3391518-core) ウォレット について -> Ava Labs(Avalanche エコシステムの開発チーム) がサポートしている Core というウォレットが存在します。 -> Core でのウォレットを使用すると Avalanche に適した処理により, 高速なトランザクションが実現する可能性があります。 +> 📓 [Core](https://support.avax.network/en/collections/3391518-core) ウォレット について +> Ava Labs(Avalanche エコシステムの開発チーム) がサポートしている Core というウォレットが存在します。 +> Core でのウォレットを使用すると Avalanche に適した処理により, 高速なトランザクションが実現する可能性があります。 > 現在は beta 版ということもありバグや仕様変更が日々改善されているため, ここでは使用しませんが注目なウォレットです。 - [こちら](https://MetaMask.io/download.html) からブラウザの拡張機能をダウンロードし,MetaMaskウォレットをあなたのブラウザに設定します。 @@ -148,7 +148,7 @@ MetaMaskを設定できたら, Avalancheのテストネットワークを追加 MetaMaskの上部のネットワークタブを開き, `Add Network`をクリックします。 -![](/public/images/AVAX-amm/section-3/3_1_2.png) +![](/public/images/AVAX-AMM/section-3/3_1_2.png) 開いた設定ページ内で以下の情報を入力して保存をクリックしましょう。 @@ -160,11 +160,11 @@ Symbol: AVAX Explorer: https://testnet.snowtrace.io/ ``` -![](/public/images/AVAX-amm/section-3/3_1_3.png) +![](/public/images/AVAX-AMM/section-3/3_1_3.png) 登録が成功したらAvalancheのテストネットである`Avalanche Fuji C-Chain`が選択できるはずです。 -![](/public/images/AVAX-amm/section-3/3_1_4.png) +![](/public/images/AVAX-AMM/section-3/3_1_4.png) ### 🚰 `Faucet`を利用して`AVAX`をもらう @@ -172,7 +172,7 @@ Explorer: https://testnet.snowtrace.io/ テストネットでのみ使用できる偽の`AVAX`です。 -上記リンクへ移動して, あなたのウォレットのアドレスを入力してavaxを受け取ってください。 +上記リンクへ移動して, あなたのウォレットのアドレスを入力してavaxを受け取ってください。 💁 アドレスはMetaMask上部のアカウント名の部分をクリックするとコピーができます。 ### 🙋‍♂️ 質問する diff --git "a/docs/AVAX-AMM/ja/section-3/Lesson_2_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\343\201\256\343\203\231\343\203\274\343\202\271\343\202\222\344\275\234\346\210\220\343\201\227\343\202\210\343\201\206.md" "b/docs/AVAX-AMM/ja/section-3/Lesson_2_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\343\201\256\343\203\231\343\203\274\343\202\271\343\202\222\344\275\234\346\210\220\343\201\227\343\202\210\343\201\206.md" index 91bbd10ff..345c912b2 100644 --- "a/docs/AVAX-AMM/ja/section-3/Lesson_2_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\343\201\256\343\203\231\343\203\274\343\202\271\343\202\222\344\275\234\346\210\220\343\201\227\343\202\210\343\201\206.md" +++ "b/docs/AVAX-AMM/ja/section-3/Lesson_2_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\343\201\256\343\203\231\343\203\274\343\202\271\343\202\222\344\275\234\346\210\220\343\201\227\343\202\210\343\201\206.md" @@ -1,15 +1,15 @@ それでは実際にコードを書いてフロントエンドのベースとなるものを作成していきます。 -ここでは初期設定で存在すると想定されるファイルを削除・編集することがあります。 -もし削除するファイルがあなたのフォルダ構成の中に無かった場合は, 無視してください。 +ここでは初期設定で存在すると想定されるファイルを削除・編集することがあります。 +もし削除するファイルがあなたのフォルダ構成の中に無かった場合は, 無視してください。 もし編集するファイルがあなたのフォルダ構成の中に無かった場合は, 新たにファイルを作成し編集内容のコードをそのままコピーしてください。 ### 📁 `styles`ディレクトリ -`styles`ディレクトリにはcssのコードが入っています。 +`styles`ディレクトリにはcssのコードが入っています。 全てのページに適用されるよう用意された`global.css`と, ホームページ用の`Home.module.css`があります。 -`global.css`内に以下のコードを記述してください。 +`global.css`内に以下のコードを記述してください。 ※初期設定のままで編集箇所がない場合があります。 ```css @@ -118,15 +118,15 @@ client ### 📁 `public`ディレクトリ -`Next.js`はルートディレクトリ直下の`public`ディレクトリを静的なリソース(画像やテキストデータなど)の配置場所と認識します。 -そのためソースコード内で画像のURLを`/image.png`と指定した場合, +`Next.js`はルートディレクトリ直下の`public`ディレクトリを静的なリソース(画像やテキストデータなど)の配置場所と認識します。 +そのためソースコード内で画像のURLを`/image.png`と指定した場合, `Next.js`は自動的に`public`ディレクトリをルートとした`プロジェクトルート/public/image.png`を参照してくれます。 -ディレクトリ内の`favicon.ico`以外のファイルを全て削除してください。 +ディレクトリ内の`favicon.ico`以外のファイルを全て削除してください。 そして新たに画像を追加します。 -以下の画像をダウンロードするか, あなたのお好きな画像を`bird.png`(または別の名前)という名前で`public`ディレクトリ内に保存してください。 -![](/public/images/AVAX-amm/section-3/3_2_2.png) +以下の画像をダウンロードするか, あなたのお好きな画像を`bird.png`(または別の名前)という名前で`public`ディレクトリ内に保存してください。 +![](/public/images/AVAX-AMM/section-3/3_2_2.png) また, `favicon.ico`を別の画像にすると, あなたのwebアプリケーションのファビコンが変わるので自由に変更してみてください。 @@ -141,7 +141,7 @@ client ### 📁 `utils`ディレクトリ -`client`へ移動し`utils`ディレクトリを作成してください。 +`client`へ移動し`utils`ディレクトリを作成してください。 その中に`ethereum.ts`, `format.ts`, `validAmount.ts`というファイルを作成してください。 ``` @@ -173,13 +173,13 @@ export const getEthereum = (): MetaMaskInpageProvider | null => { }; ``` -typescriptで`window.ethereum`を使用するためには, `window`に`ethereum`オブジェクトがあるということを明示する必要があります。 +typescriptで`window.ethereum`を使用するためには, `window`に`ethereum`オブジェクトがあるということを明示する必要があります。 `MetaMaskInpageProvider`は環境設定時にインストールした`@metamask/providers`から取得した`ethereum`の型定義です。 -> 📓 `window.ethereum`とは +> 📓 `window.ethereum`とは > Web アプリケーション上でユーザーがブロックチェーンネットワークと通信するためには, Web アプリケーションはユーザーのウォレット情報を取得する必要があります。 > -> `window.ethereum`は MetaMask が`window`(JavaScript にデフォルトで存在するグローバル変数)の直下に用意するオブジェクトであり API です。 +> `window.ethereum`は MetaMask が`window`(JavaScript にデフォルトで存在するグローバル変数)の直下に用意するオブジェクトであり API です。 > この API を使用して, ウェブサイトはユーザーのイーサリアムアカウントを要求し, ユーザーが接続しているブロックチェーンからデータを読み取り, ユーザーがメッセージや取引に署名するよう求めることができます。 また, `getEthereum`関数を呼び出すと`window`から取り出した`ethereum`オブジェクトを取得できるようにしています。 @@ -208,11 +208,11 @@ export const formatWithoutPrecision = ( ここではコントラクトとshareの情報をやり取りする際に使用するutil関数を用意しています。 -shareについては一度離れていた部分なので, 再確認したい方は[section-1/Lesson-2](/docs/AVAX-amm/ja/section-1/Lesson_2_Solidity%E3%81%A7%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%82%B3%E3%83%B3%E3%83%88%E3%83%A9%E3%82%AF%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90%E3%81%97%E3%82%88%E3%81%86.md)の`シェアについて`の部分を読み返してください。 +shareについては一度離れていた部分なので, 再確認したい方は[section-1/Lesson-2](/docs/AVAX-AMM/ja/section-1/Lesson_2_Solidity%E3%81%A7%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%82%B3%E3%83%B3%E3%83%88%E3%83%A9%E3%82%AF%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90%E3%81%97%E3%82%88%E3%81%86.md)の`シェアについて`の部分を読み返してください。 基本的にフロントエンドでは, shareをPRECISIONなしでstring型で保持します。 -フロントエンド -> コントラクトへshareを伝える際は, `formatWithPrecision`を使用し +フロントエンド -> コントラクトへshareを伝える際は, `formatWithPrecision`を使用し コントラクト -> フロントエンドへshareが伝えられた際は, `formatWithoutPrecision`を使用して変換を行います。 `validAmount.ts`の中に以下のコードを記述してください。 @@ -235,7 +235,7 @@ export const validAmount = (amount: string): boolean => { ### 📁 `hooks`ディレクトリ -`client`ディレクトリ直下に`hooks`というディレクトリを作成しましょう。 +`client`ディレクトリ直下に`hooks`というディレクトリを作成しましょう。 こちらにはウォレットやコントラクトの状態を扱うようなカスタムフック(独自で作った[フック](https://ja.reactjs.org/docs/hooks-overview.html))を実装したファイルを保存します。 `hooks`ディレクトリ内に`useWallet.ts`というファイルを作成し, 以下のコードを記述してください。 @@ -305,13 +305,13 @@ export const useWallet = (): ReturnUseWallet => { ここでは, ユーザがMetamaskを持っていることの確認とウォレットへの接続機能を実装します。 -`connectWallet`はwebアプリがユーザのウォレットにアクセスすることを求める関数で, -この後の実装でUIにユーザのウォレット接続ボタンを用意し, そのボタンとこの関数を連携します。 +`connectWallet`はwebアプリがユーザのウォレットにアクセスすることを求める関数で, +この後の実装でUIにユーザのウォレット接続ボタンを用意し, そのボタンとこの関数を連携します。 そのため外部で使用できるように返り値の中に含めています。 `checkIfWalletIsConnected`は既にユーザのウォレットとwebアプリが接続しているかを確認する関数で, -また, それぞれの関数内で使用している`eth_requestAccounts`と`eth_accounts`は,空の配列または単一のアカウントアドレスを含む配列を返す特別なメソッドです。 +また, それぞれの関数内で使用している`eth_requestAccounts`と`eth_accounts`は,空の配列または単一のアカウントアドレスを含む配列を返す特別なメソッドです。 ユーザーがウォレットに複数のアカウントを持っている場合を考慮して, プログラムはユーザーの1つ目のアカウントアドレスを取得することにしています。 `hooks`に関するフォルダ構成はこのようになります。 @@ -324,17 +324,17 @@ client ### 📁 `components`ディレクトリ -`client`ディレクトリ直下に`components`という名前のディレクトリを作成してください。 +`client`ディレクトリ直下に`components`という名前のディレクトリを作成してください。 こちらにはコンポーネントを実装したファイルを保存していきます。 -> 📓 コンポーネントとは -> UI(ユーザーインターフェイス)を形成する一つの部品のことです。 -> コンポーネントはボタンのような小さなものから,ページ全体のような大きなものまであります。 +> 📓 コンポーネントとは +> UI(ユーザーインターフェイス)を形成する一つの部品のことです。 +> コンポーネントはボタンのような小さなものから,ページ全体のような大きなものまであります。 > レゴブロックのようにコンポーネントのブロックで UI を作ることで, 機能の追加・削除などの変更を容易にすることができます。 📁 `Container`ディレクトリ -まず`components`ディレクトリ内に`Container`というディレクトリを作成し, +まず`components`ディレクトリ内に`Container`というディレクトリを作成し, その中に`Container.module.css`と`Container.tsx`という名前のファイルを作成してください。 `Container.module.css`内に以下のコードを記述してください。 @@ -462,22 +462,22 @@ export default function Container({ currentAccount }: Props) { } ``` -ここでは今回作るUIのベースとなるものが記載されています。 +ここでは今回作るUIのベースとなるものが記載されています。 `activeTab`を変更することで表示する内容が変更できるようになっております。 レッスンの最後で確認するUIと照らし合わせると, 内容がわかりやすいと思います。 -> 📓 `~.module.css`とは -> `module.css`を css ファイルの語尾に付けることで, `CSSモジュール`という`Next.js`の仕組みを利用することができます。 -> `CSSモジュール`はファイル内のクラス名を元にユニークなクラス名を生成してくれます。 -> 内部で自動的に行ってくれるので私たちがユニークなクラス名を直接使用することがありませんが, -> クラス名の衝突を気にする必要がなくなります。 -> 異なるファイルで同じ CSS クラス名を使用することができます。 +> 📓 `~.module.css`とは +> `module.css`を css ファイルの語尾に付けることで, `CSSモジュール`という`Next.js`の仕組みを利用することができます。 +> `CSSモジュール`はファイル内のクラス名を元にユニークなクラス名を生成してくれます。 +> 内部で自動的に行ってくれるので私たちがユニークなクラス名を直接使用することがありませんが, +> クラス名の衝突を気にする必要がなくなります。 +> 異なるファイルで同じ CSS クラス名を使用することができます。 > 詳しくは[こちら](https://nextjs.org/docs/basic-features/built-in-css-support)をご覧ください。 📁 `InputBox`ディレクトリ -次に`components`ディレクトリ内に`InputBox`というディレクトリを作成し, +次に`components`ディレクトリ内に`InputBox`というディレクトリを作成し, その中に`InputNumberBox.module.css`と`InputNumberBox.tsx`という名前のファイルを作成してください。 `InputNumberBox.module.css`内に以下のコードを記述してください。 @@ -587,7 +587,7 @@ client まず初めに`api`ディレクトリは今回使用しないのでディレクトリごと削除してください。 -`_app.tsx`内に以下のコードを記述してください。 +`_app.tsx`内に以下のコードを記述してください。 ※初期設定のままなので編集箇所がない場合があります。 ```tsx @@ -601,8 +601,8 @@ function MyApp({ Component, pageProps }: AppProps) { export default MyApp; ``` -`_app.tsx`ファイルは標準で, 全てのページの親コンポーネントとなります。 -今回は`globals.css`の利用のみ行いますが, +`_app.tsx`ファイルは標準で, 全てのページの親コンポーネントとなります。 +今回は`globals.css`の利用のみ行いますが, 全てのページで使用したい`context`やレイアウトがある場合に`_app.tsx`ファイル内で使用すると便利です。 `index.tsx`内に以下のコードを記述してください。 @@ -649,7 +649,7 @@ const Home: NextPage = () => { export default Home; ``` -ここでは先ほど作成した`useWallet`を使用していて, `currentAccount`の存在有無で +ここでは先ほど作成した`useWallet`を使用していて, `currentAccount`の存在有無で walletへの接続を求めるか, 接続している`currentAccount`の値を表示するかを条件分岐しています。 [Image タグ](https://nextjs.org/docs/basic-features/image-optimization) はNext.jsに用意されたタグで画像描画について最適化されます。 @@ -675,24 +675,24 @@ $ npm run dev そしてブラウザで`http://localhost:3000 `へアクセスしてください。 -以下のような画面が表示されれば成功です! +以下のような画面が表示されれば成功です! `swap`などのタブを切り替えると各tabの名前が表示されるはずです。 -![](/public/images/AVAX-amm/section-3/3_2_1.png) +![](/public/images/AVAX-AMM/section-3/3_2_1.png) -画面右上の`Connect to wallet`ボタンを押下するとウォレットと接続することができます。 +画面右上の`Connect to wallet`ボタンを押下するとウォレットと接続することができます。 ⚠️ この先ウォレットを接続する場合は, ネットワークに`Fuji`を選択した状態で行ってください。 MetaMaskの承認が終わると, `Connect to wallet`ボタンの部分があなたの接続しているウォレットのアドレスの表示に変更されます。 -![](/public/images/AVAX-amm/section-3/3_2_3.png) +![](/public/images/AVAX-AMM/section-3/3_2_3.png) ### 🌔 参考リンク > [こちら](https://github.com/unchain-dev/avalanche-amm-dapp)に本プロジェクトの完成形のレポジトリがあります。 > -> コードがうまく動かない場合は参考にしてみてください。 -> `contract`はリンク先のレポジトリ内の`package/contract`を。 +> コードがうまく動かない場合は参考にしてみてください。 +> `contract`はリンク先のレポジトリ内の`package/contract`を。 > `client`はリンク先のレポジトリ内の`package/client`を参照してください。 ### 🙋‍♂️ 質問する @@ -710,5 +710,5 @@ MetaMaskの承認が終わると, `Connect to wallet`ボタンの部分があな --- -フロントエンドのベースとなるコードが出来ました! +フロントエンドのベースとなるコードが出来ました! 次のレッスンではユーザのウォレットとフロントエンドを連携する作業に入ります! diff --git "a/docs/AVAX-AMM/ja/section-3/Lesson_3_\343\202\263\343\203\263\343\203\210\343\203\251\343\202\257\343\203\210\343\201\250\346\216\245\347\266\232\343\201\227\343\202\210\343\201\206.md" "b/docs/AVAX-AMM/ja/section-3/Lesson_3_\343\202\263\343\203\263\343\203\210\343\203\251\343\202\257\343\203\210\343\201\250\346\216\245\347\266\232\343\201\227\343\202\210\343\201\206.md" index 6882cd98c..720460d4e 100644 --- "a/docs/AVAX-AMM/ja/section-3/Lesson_3_\343\202\263\343\203\263\343\203\210\343\203\251\343\202\257\343\203\210\343\201\250\346\216\245\347\266\232\343\201\227\343\202\210\343\201\206.md" +++ "b/docs/AVAX-AMM/ja/section-3/Lesson_3_\343\202\263\343\203\263\343\203\210\343\203\251\343\202\257\343\203\210\343\201\250\346\216\245\347\266\232\343\201\227\343\202\210\343\201\206.md" @@ -8,7 +8,7 @@ ### 📁 `hooks`ディレクトリ -`hooks`ディレクトリ内に`useContract.ts`というファイルを作成し, 以下のコードを記述してください。 +`hooks`ディレクトリ内に`useContract.ts`というファイルを作成し, 以下のコードを記述してください。 💁 現時点ではまだ用意していないファイルからimportしている箇所があるためエラーメッセージが出ても無視して大丈夫です。 ```ts @@ -123,7 +123,7 @@ export const useContract = ( }; ``` -ファイル上部は必要な関数などのimportと, 型定義をしています。 +ファイル上部は必要な関数などのimportと, 型定義をしています。 💁 現時点ではまだ用意していないファイルからimportしている箇所があるためエラーメッセージが出ても無視して大丈夫です。 ```ts @@ -178,7 +178,7 @@ const getContract = ( `getContract`は引数で指定されたアドレスとabiのコントラクトのインスタンスを取得する関数です。 -インスタンスを取得できたら引数で渡された関数に渡します。 +インスタンスを取得できたら引数で渡された関数に渡します。 `storeContract(Contract);` ```ts @@ -246,34 +246,33 @@ TEST_ACCOUNT_PRIVATE_KEY="YOUR_PRIVATE_KEY" > > 1. お使いのブラウザから、MetaMask プラグインをクリックして、ネットワークを`Avalanche FUJI C-Chain`に変更します。 > -> ![](/public/images/AVAX-amm/section-3/3_3_1.png) +> ![](/public/images/AVAX-AMM/section-3/3_3_1.png) > > 2. それから、`Account details`を選択してください。 > -> ![](/public/images/AVAX-amm/section-3/3_3_2.png) +> ![](/public/images/AVAX-AMM/section-3/3_3_2.png) > > 3. `Account details`から`Export Private Key`をクリックしてください。 > -> ![](/public/images/AVAX-amm/section-3/3_3_3.png) +> ![](/public/images/AVAX-AMM/section-3/3_3_3.png) > -> 4. MetaMask のパスワードを求められるので、入力したら`Confirm`を押します。 +> 4. MetaMask のパスワードを求められるので、入力したら`Confirm`を押します。 > あなたの秘密鍵(= `Private Key` )が表示されるので、クリックしてコピーします。 > -> ![](/public/images/AVAX-amm/section-3/3_3_4.png) +> ![](/public/images/AVAX-AMM/section-3/3_3_4.png) > - `.env`の`YOUR_PRIVATE_KEY`の部分をここで取得した秘密鍵とを入れ替えます。 -⚠️gitignoreファイルに.envが記述されていることを確認して下さい。 +⚠️gitignoreファイルに.envが記述されていることを確認して下さい。 秘密鍵は外部に漏れないようにGitHub上に上げません。 -> **✍️: スマートコントラクトをデプロイするのに秘密鍵が必要な理由** -> **新しくスマートコントラクトをブロックチェーン上にデプロイすること**も,トランザクションの一つです。 +> **✍️: スマートコントラクトをデプロイするのに秘密鍵が必要な理由** > **新しくスマートコントラクトをブロックチェーン上にデプロイすること**も,トランザクションの一つです。 > > トランザクションを行うためには,ブロックチェーンに「ログイン」する必要があります。 > > 「ログイン」には公開アドレスと秘密鍵の情報が必要となります。 -次に`contract`ディレクトリ直下にある`hardhat.config.ts`中身を以下のコードに書き換えてください。 +次に`contract`ディレクトリ直下にある`hardhat.config.ts`中身を以下のコードに書き換えてください。 ※ solidityのバージョンの部分(`solidity: "0.8.17",`)は元々記載されているものを使用してください。 ```ts @@ -383,7 +382,7 @@ joe address: 0x538589242114BCBcD0f12B1990865E57b3344448 amm address: 0x1d09929346a768Ec6919bf89dae36B27D7e39321 ``` -を, +を, `client`ディレクトリ内, `hooks/useContract.ts`の中の以下の部分にそれぞれ貼り付けてください。 ```ts @@ -406,7 +405,7 @@ ABIファイルは,コントラクトがコンパイルされた時に生成さ `contract`からパスを追っていくと, `contract/artifacts/contracts/~.sol/~.json`というファイルがそれぞれのコントラクトに対して生成されているはずです。 -これを`client`の中の`utils`ディレクトリ内にコピーしてください。 +これを`client`の中の`utils`ディレクトリ内にコピーしてください。 `Avalanche-AMM`直下からターミナルでコピーを行う場合, このようなコマンドになります。 ``` @@ -415,13 +414,13 @@ cd contract/artifacts/contracts/ERC20Tokens.sol/USDCToken.json contract/artifact 📽️ 型定義ファイルを取得する -TypeScriptは静的型付け言語なので, 外部から取ってきたオブジェクトの情報として型を知りたい場合があります。 +TypeScriptは静的型付け言語なので, 外部から取ってきたオブジェクトの情報として型を知りたい場合があります。 その時に役に立つのが型定義ファイルです。 -コントラクトの型定義ファイルは, コントラクトがコンパイルされた時に生成され, `typechain-types`ディレクトリに自動的に格納されます。 +コントラクトの型定義ファイルは, コントラクトがコンパイルされた時に生成され, `typechain-types`ディレクトリに自動的に格納されます。 これは`npx hardhat`実行時にtypescriptを選択したため, 初期設定が済んでいるためです。 -`contract`内の`typechain-types`ディレクトリをそのまま`client`にコピーしてください。 +`contract`内の`typechain-types`ディレクトリをそのまま`client`にコピーしてください。 `Avalanche-AMM`直下からターミナルでコピーを行う場合, このようなコマンドになります。 ``` @@ -442,7 +441,7 @@ cp -r contract/typechain-types client/ 📁 `Details`ディレクトリ -`components`ディレクトリ内に`Details`というディレクトリを作成し, +`components`ディレクトリ内に`Details`というディレクトリを作成し, その中に`Details.module.css`と`Details.tsx`という名前のファイルを作成してください。 `Details.module.css`内に以下のコードを記述してください。 @@ -676,7 +675,7 @@ type Props = { token0, token1にはそれぞれUSDC, JOEのいずれかのオブジェクトが渡されます。 -updateDetailsFlagはこのコンポーネントで表示する情報を更新するトリガーとなります。 +updateDetailsFlagはこのコンポーネントで表示する情報を更新するトリガーとなります。 このフラグが変更された時に情報を更新するよう, この後の`useEffect`で依存関係に含めています。 ```ts @@ -690,13 +689,13 @@ const [totalShare, setTotalShare] = useState(""); このコンポーネントで扱う情報を格納するための状態変数です。 -このコンポーネントでは引数で渡されたtoken0, token1を +このコンポーネントでは引数で渡されたtoken0, token1を 扱いやすいように`tokens`の配列に格納します。 他の状態変数でstring型の配列となっているものは `tokens`と同じ順番で対応しております。 -例えば`tokens = [token0, token1]`の順番で格納されている場合, -ユーザの所有するトークンの量を表す`amountOfUserTokens`は以下のように情報を格納します。 +例えば`tokens = [token0, token1]`の順番で格納されている場合, +ユーザの所有するトークンの量を表す`amountOfUserTokens`は以下のように情報を格納します。 `amountOfUserTokens = [ユーザの所有するtoken0のトークンの量, ユーザの所有するtoken1のトークンの量]` ```ts @@ -719,17 +718,17 @@ const getAmountOfUserTokens = useCallback(async () => { 各トークンのコントラクトの`balanceOf`関数を呼び出し, ユーザの所有するトークンの量を状態変数へ格納します。 -> 📓 `useCallBack`について +> 📓 `useCallBack`について > `useCallBack`は関数をメモ化します。 > -> 通常コンポーネント(ここでいう`Details`)の再描画が行われる場合は内部の関数が再作成されますが, +> 通常コンポーネント(ここでいう`Details`)の再描画が行われる場合は内部の関数が再作成されますが, > メモ化をすると, 依存配列(ここでいう`[currentAccount, tokens]`)に変化がない場合は再作成をしません。 > -> 今回はこの後に続く`useEffect`の依存配列に`getAmountOfUserTokens`が含まれていることが原因で`useCallBack`を使用しています。 -> `Details`コンポーネントが描画された際に`getAmountOfUserTokens`を実行したいので, 関数実行と依存配列に関数を入れていますが, +> 今回はこの後に続く`useEffect`の依存配列に`getAmountOfUserTokens`が含まれていることが原因で`useCallBack`を使用しています。 +> `Details`コンポーネントが描画された際に`getAmountOfUserTokens`を実行したいので, 関数実行と依存配列に関数を入れていますが, > コンポーネント再描画のたびに`getAmountOfUserTokens`が再作成されてしまうと再び`useEffect`が動いてしまうのためです。 > -> 参考: https://ja.reactjs.org/docs/hooks-reference.html#usecallback +> 参考: https://ja.reactjs.org/docs/hooks-reference.html#usecallback > 参考: https://stackoverflow.com/questions/57156582/should-i-wrap-all-functions-that-defined-in-component-in-usecallback その他の関数においても同様にコントラクトから特定の情報を取得し状態変数へ格納しています。 @@ -833,7 +832,7 @@ const [updateDetailsFlag, setUpdateDetailsFlag] = useState(0); // ユーザや const { usdc: token0, joe: token1, amm } = useContract(currentAccount); // useContractからコントラクトの取得 ``` -- フラグを切り替える関数の実装 +- フラグを切り替える関数の実装 この関数を実行する度にフラグが0か1に変化します。 ```ts @@ -865,10 +864,10 @@ $ npm run dev ブラウザで`http://localhost:3000 `へアクセスしてください。 -以下のような画面が表示されれば成功です! +以下のような画面が表示されれば成功です! 画面右側にユーザとプールの詳細情報が表示されました。 -![](/public/images/AVAX-amm/section-3/3_3_5.png) +![](/public/images/AVAX-AMM/section-3/3_3_5.png) コントラクトのデプロイに使用したアカウントで接続している場合, 所有するトークンの量はそれぞれ`10000`になっているはずです。 @@ -876,8 +875,8 @@ $ npm run dev > [こちら](https://github.com/unchain-dev/avalanche-amm-dapp)に本プロジェクトの完成形のレポジトリがあります。 > -> コードがうまく動かない場合は参考にしてみてください。 -> `contract`はリンク先のレポジトリ内の`package/contract`を。 +> コードがうまく動かない場合は参考にしてみてください。 +> `contract`はリンク先のレポジトリ内の`package/contract`を。 > `client`はリンク先のレポジトリ内の`package/client`を参照してください。 ### 🙋‍♂️ 質問する diff --git "a/docs/AVAX-AMM/ja/section-3/Lesson_4_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\343\202\222\345\256\214\346\210\220\343\201\225\343\201\233\343\202\210\343\201\206.md" "b/docs/AVAX-AMM/ja/section-3/Lesson_4_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\343\202\222\345\256\214\346\210\220\343\201\225\343\201\233\343\202\210\343\201\206.md" index 77a12d95d..9a1c0d7ac 100644 --- "a/docs/AVAX-AMM/ja/section-3/Lesson_4_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\343\202\222\345\256\214\346\210\220\343\201\225\343\201\233\343\202\210\343\201\206.md" +++ "b/docs/AVAX-AMM/ja/section-3/Lesson_4_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\343\202\222\345\256\214\346\210\220\343\201\225\343\201\233\343\202\210\343\201\206.md" @@ -4,7 +4,7 @@ このレッスンでは残りのコンポーネントを実装してフロントエンドを完成させましょう。 -各コンポーネント作成ごとにUIを確認していくので, +各コンポーネント作成ごとにUIを確認していくので, `client`ディレクトリ直下で以下のコマンドを実行して, webサイトを立ち上げておくと楽かもしれません。 ``` @@ -15,7 +15,7 @@ $ npm run dev 📁 `SelectTab`ディレクトリ -`components`ディレクトリ内に`SelectTab`というディレクトリを作成し, +`components`ディレクトリ内に`SelectTab`というディレクトリを作成し, その中に`SelectTab.module.css`という名前のファイルを作成してください。 `SelectTab.module.css`内に以下のコードを記述してください。 @@ -224,12 +224,12 @@ export default function Container({ currentAccount }: Props) { `Faucet`タブをクリックすると以下のような表示がされます。 -![](/public/images/AVAX-amm/section-3/3_4_1.png) +![](/public/images/AVAX-AMM/section-3/3_4_1.png) -入力欄に10と入力し, `Fund`をクリックします。 +入力欄に10と入力し, `Fund`をクリックします。 トランザクションに署名し, しばらく待つと(ポップアップが表示されokを押した後)右側の`Your Details`のUSDCの部分が10増えているはずです。 -![](/public/images/AVAX-amm/section-3/3_4_2.png) +![](/public/images/AVAX-AMM/section-3/3_4_2.png) `Change`ボタンをクリックするとUSDC -> JOEへ変更されるため, JOEに関しても同じようにfaucetを利用することができます。 @@ -280,10 +280,10 @@ async function onClickFund() { } ``` -- `onChangeToken`: `Change`ボタンをクリックされた際に`currentTokenIndex`を変更します。 +- `onChangeToken`: `Change`ボタンをクリックされた際に`currentTokenIndex`を変更します。 これによりUSDCとJOEの切り替えをします。 - `onChangeAmountOfFunds`: ユーザの入力値を`amountOfFunds`にセットします。 -- `onClickFund`: `Fund`ボタンをクリックされた際に`currentTokenIndex`のトークンの`faucet`関数を呼び出します。 +- `onClickFund`: `Fund`ボタンをクリックされた際に`currentTokenIndex`のトークンの`faucet`関数を呼び出します。 このコンポーエントの引数で渡されている`updateDetails()`を実行することでdetailsを更新します。 🦜 Provide @@ -509,7 +509,7 @@ export default function Container({ currentAccount }: Props) { `Provide`タブをクリックすると以下のような表示がされます。 -![](/public/images/AVAX-amm/section-3/3_4_3.png) +![](/public/images/AVAX-AMM/section-3/3_4_3.png) 入力欄にそれぞれ100と入力し, `Provide`をクリックします。 @@ -519,13 +519,13 @@ provideの実行では以下のトランザクションへの署名が必要で - JOEの`approve` - AMMの`provide` -まず初めにMetamaskの署名画面が2度続けて表示されます。 -それぞれに署名をし, しばらく待つと最後に`provide`の署名について求められるので署名をします。 +まず初めにMetamaskの署名画面が2度続けて表示されます。 +それぞれに署名をし, しばらく待つと最後に`provide`の署名について求められるので署名をします。 🙌 こちらのUI改善できる方がいらっしゃればUNCHAINにて共有して頂けると大変助かります! しばらく待つと(ポップアップが表示されokを押した後)右側の`Your Details`が更新されます! -![](/public/images/AVAX-amm/section-3/3_4_4.png) +![](/public/images/AVAX-AMM/section-3/3_4_4.png) それでは`Provide.tsx`の中身を見ましょう。 @@ -537,7 +537,7 @@ const [amountOfToken1, setAmountOfToken1] = useState(""); // ユーザが指定 const [activePool, setActivePool] = useState(true); // プールに流動性があるのかをフラグで保持します。 ``` -次の2つの関数は, ユーザがどちらか一方(USDC or JOE)の入力欄に数値を入力した際に, もう片方に必要なトークンの量を表示するために必要です。 +次の2つの関数は, ユーザがどちらか一方(USDC or JOE)の入力欄に数値を入力した際に, もう片方に必要なトークンの量を表示するために必要です。 ※ 先ほどの挙動確認では最初の流動性提供であったためこの機能は確認できませんでした。もう1度`Provide`タブにて入力欄に数値を入力すると確認できるはずです! ```ts @@ -574,10 +574,10 @@ const onChangeAmount = ( }; ``` -`getProvideEstimate`は内部で, ammの`getEquivalentToken`を引数で指定されたトークンとその量を併せて呼び出しています。 +`getProvideEstimate`は内部で, ammの`getEquivalentToken`を引数で指定されたトークンとその量を併せて呼び出しています。 その返り値(指定したトークンと同価値のペアのトークンの量)を`setPairTokenAmount`によりセットしています。 -`onChangeAmount`はユーザが入力欄に数値を入力した際に動く関数です。 +`onChangeAmount`はユーザが入力欄に数値を入力した際に動く関数です。 目的は入力されたトークンの量の状態変数の更新と, `getProvideEstimate`を呼び出すことにより同価値のペアのトークンの量の状態変数を更新することです。 続く`onClickProvide`関数はammの `provide`を呼び出す関数ですが, ポイントは`provide`を実行する前に各トークンの`approve`を呼び出している点です。 @@ -798,9 +798,9 @@ export default function Container({ currentAccount }: Props) { `Swap`タブをクリックすると以下のような表示がされます。 -![](/public/images/AVAX-amm/section-3/3_4_5.png) +![](/public/images/AVAX-AMM/section-3/3_4_5.png) -USDC入力欄に50と入力すると, swapにより受けることができるJOEの量が表示されます。 +USDC入力欄に50と入力すると, swapにより受けることができるJOEの量が表示されます。 `Swap`をクリックします。 swapの実行では以下のトランザクションへの署名が必要です。 @@ -812,11 +812,11 @@ swapの実行では以下のトランザクションへの署名が必要です ここでは以下の図のようなことを行っています。 -![](/public/images/AVAX-amm/section-3/swap.drawio.svg) +![](/public/images/AVAX-AMM/section-3/swap.drawio.svg) しばらく待つと(ポップアップが表示されokを押した後)右側の`Your Details`が更新されます! -![](/public/images/AVAX-amm/section-3/3_4_6.png) +![](/public/images/AVAX-AMM/section-3/3_4_6.png) それでは`Swap.tsx`の中身を見ましょう。 @@ -832,7 +832,7 @@ const [amountIn, setAmountIn] = useState(""); const [amountOut, setAmountOut] = useState(""); ``` -`TokenIn`と`TokenOut`はユーザの操作によって中身に入るトークンオブジェクトが変化します。 +`TokenIn`と`TokenOut`はユーザの操作によって中身に入るトークンオブジェクトが変化します。 UIのSwapタブで, 真ん中にある上下矢印のアイコンをクリックするとUSDCとJOEが切り替わるのは, この`TokenIn`/`TokenOut`の中身を入れ替えているためです。 以下の`useEffect`で初期値を与え, `rev`関数により中身を入れ替えています。 @@ -1094,14 +1094,14 @@ export default function Container({ currentAccount }: Props) { `Withdraw`タブをクリックすると以下のような表示がされます。 -![](/public/images/AVAX-amm/section-3/3_4_7.png) +![](/public/images/AVAX-AMM/section-3/3_4_7.png) -`Max`ボタンをクリックするとユーザの保有するシェアが入力値となり, 引き出すことのできるトークンの量がそれぞれ下に表示されます。 +`Max`ボタンをクリックするとユーザの保有するシェアが入力値となり, 引き出すことのできるトークンの量がそれぞれ下に表示されます。 `Withdraw`をクリックします。 トランザクションに署名し, しばらく待つと(ポップアップが表示されokを押した後)右側の`Your Details`が更新されます! -![](/public/images/AVAX-amm/section-3/3_4_8.png) +![](/public/images/AVAX-AMM/section-3/3_4_8.png) 今回は1つのアカウントで挙動を確かめているためMaxのシェアでトークンを引き出すとプールは空になり, ユーザの保有するトークンの量が元々保有していた量に戻ります。 @@ -1117,8 +1117,8 @@ export default function Container({ currentAccount }: Props) { > [こちら](https://github.com/unchain-dev/avalanche-amm-dapp)に本プロジェクトの完成形のレポジトリがあります。 > -> コードがうまく動かない場合は参考にしてみてください。 -> `contract`はリンク先のレポジトリ内の`package/contract`を。 +> コードがうまく動かない場合は参考にしてみてください。 +> `contract`はリンク先のレポジトリ内の`package/contract`を。 > `client`はリンク先のレポジトリ内の`package/client`を参照してください。 ### 🙋‍♂️ 質問する @@ -1136,7 +1136,7 @@ export default function Container({ currentAccount }: Props) { --- -おめでとうございます! +おめでとうございます! セクション3が終了しました! 次のセクションであなたのwebアプリをデプロイしましょう 🛫 diff --git "a/docs/AVAX-AMM/ja/section-4/Lesson_1_Web\343\202\242\343\203\227\343\203\252\343\202\222\343\203\207\343\203\227\343\203\255\343\202\244\343\201\227\343\202\210\343\201\206.md" "b/docs/AVAX-AMM/ja/section-4/Lesson_1_Web\343\202\242\343\203\227\343\203\252\343\202\222\343\203\207\343\203\227\343\203\255\343\202\244\343\201\227\343\202\210\343\201\206.md" index cd97ec661..28d4409f2 100644 --- "a/docs/AVAX-AMM/ja/section-4/Lesson_1_Web\343\202\242\343\203\227\343\203\252\343\202\222\343\203\207\343\203\227\343\203\255\343\202\244\343\201\227\343\202\210\343\201\206.md" +++ "b/docs/AVAX-AMM/ja/section-4/Lesson_1_Web\343\202\242\343\203\227\343\203\252\343\202\222\343\203\207\343\203\227\343\203\255\343\202\244\343\201\227\343\202\210\343\201\206.md" @@ -10,7 +10,7 @@ Vercelに関する詳しい説明は,[こちら](https://zenn.dev/lollipop_onl/a まず,GitHubの`client`にあるローカルファイルをGitHubへアップロードしましょう。 -まだアップロードをしていない方は, ターミナル上で`client`に移動して,下記を実行しましょう。 +まだアップロードをしていない方は, ターミナル上で`client`に移動して,下記を実行しましょう。 ⚠️ `.gitignore`ファイル内に`.env`が記載されていることを確認していください。 ``` @@ -25,27 +25,27 @@ Vercelのアカウントを取得したら,下記を実行しましょう。 1\. `Dashboard`へ進んで, `New Project`を選択してください。 -![](/public/images/AVAX-amm/section-4/4_1_1.png) +![](/public/images/AVAX-AMM/section-4/4_1_1.png) 2\. `Import Git Repository`で自分のGitHubアカウントを接続したら, `client(あなたのレポジトリの名前)`を選択し`Import`してください。 -![](/public/images/AVAX-amm/section-4/4_1_2.png) +![](/public/images/AVAX-AMM/section-4/4_1_2.png) 3\. プロジェクトを作成します。 -デフォルトの設定で良いはずですが, +デフォルトの設定で良いはずですが, もし`FRAME WORK PRESET`が`Next.js`になっていない場合は`Next.js`を選択してください。 -![](/public/images/AVAX-amm/section-4/4_1_3.png) +![](/public/images/AVAX-AMM/section-4/4_1_3.png) 4\. `Deploy`ボタンをクリックしましょう。 VercelはGitHubと連動しているので,GitHubが更新されるたびに自動でデプロイを行ってくれます。 -しばらくしてビルドが完了すると +しばらくしてビルドが完了すると メッセージと, 下記のようにホーム画面が出力されます。 -![](/public/images/AVAX-amm/section-4/4_1_4.png) +![](/public/images/AVAX-AMM/section-4/4_1_4.png) ホーム画面の表示部分はリンクになっているので, クリックするとあなたの作成したdappがブラウザで確認できます 🎉 diff --git "a/docs/AVAX-Messenger/ja/section-1/Lesson_1_\351\226\213\347\231\272\347\222\260\345\242\203\343\202\222\347\224\250\346\204\217\343\201\227\343\202\210\343\201\206.md" "b/docs/AVAX-Messenger/ja/section-1/Lesson_1_\351\226\213\347\231\272\347\222\260\345\242\203\343\202\222\347\224\250\346\204\217\343\201\227\343\202\210\343\201\206.md" index fbf56376a..67e7b8367 100644 --- "a/docs/AVAX-Messenger/ja/section-1/Lesson_1_\351\226\213\347\231\272\347\222\260\345\242\203\343\202\222\347\224\250\346\204\217\343\201\227\343\202\210\343\201\206.md" +++ "b/docs/AVAX-Messenger/ja/section-1/Lesson_1_\351\226\213\347\231\272\347\222\260\345\242\203\343\202\222\347\224\250\346\204\217\343\201\227\343\202\210\343\201\206.md" @@ -25,8 +25,8 @@ - Hardhatにより,ローカル環境でイーサリアムネットワークを簡単に起動し,テストネットでethereumを利用できます。 - 「サーバー」がブロックチェーンであることを除けば,Hardhatはローカルサーバーと同じです。 -まず,`node` / `npm`を取得する必要があります。 -お持ちでない場合は,[こちら](https://hardhat.org/tutorial/setting-up-the-environment#installing-node.js) にアクセスし`Node.js`をインストールしてください。 +まず,`node` / `npm`を取得する必要があります。 +お持ちでない場合は,[こちら](https://hardhat.org/tutorial/setting-up-the-environment#installing-node.js) にアクセスし`Node.js`をインストールしてください。 `Node.js`をインストールすると, そのパッケージ管理ツールである`npm`も同時にインストールされます。 > 動作確認。 @@ -43,7 +43,7 @@ > > 併せて本プロジェクトの実行環境(上記のバージョン)もトラブル時の参考にしてください。 -続いて, `typescript`を使用するのでターミナルで以下を実行しましょう。 +続いて, `typescript`を使用するのでターミナルで以下を実行しましょう。 `$`で始まる行はターミナル上で実行していることを表していて, `$`を除いたものが実行コマンドです。 ``` @@ -73,25 +73,25 @@ $ npm install --save-dev hardhat @openzeppelin/test-helpers $ npm install dotenv ``` -dapp全体のディレクトリ(`Avalanche-dApp`)とコントラクト実装に使用するディレクトリ(`messenger-contract`)を用意しました。 -次に`npm init`によりnpmパッケージを管理するための環境をセットアップを行いました。 +dapp全体のディレクトリ(`Avalanche-dApp`)とコントラクト実装に使用するディレクトリ(`messenger-contract`)を用意しました。 +次に`npm init`によりnpmパッケージを管理するための環境をセットアップを行いました。 最後にスマートコントラクトの開発に必要な以下のパッケージを`npm`コマンドを利用してインストールしています。 - `hardhat` - `dotenv`: 環境変数の設定で必要になります。コントラクトをデプロイする際に利用します。 - `@openzeppelin/test-helpers`: テストを支援するライブラリです。コントラクトのテストを書く際に利用します。 -> `--save-dev`とは -> アプリの開発時のみ必要なパッケージ(テストツールなど)のインストールに使用するオプション指定です。 -> アプリ自体が動くのに必要なパッケージのインストールには`--save`または何も指定せずに`npm install`を使用します。 +> `--save-dev`とは +> アプリの開発時のみ必要なパッケージ(テストツールなど)のインストールに使用するオプション指定です。 +> アプリ自体が動くのに必要なパッケージのインストールには`--save`または何も指定せずに`npm install`を使用します。 > [こちら](https://stackoverflow.com/questions/22891211/what-is-the-difference-between-save-and-save-dev)を参考にしてください。 ### 👏 サンプルプロジェクトを開始する 次に,Hardhatを実行します。 -ターミナルで`messenger-contract`に移動し,下記を実行します。 -`npx hardhat`を実行すると対話形式で指示を求められるので下記のように回答します。 +ターミナルで`messenger-contract`に移動し,下記を実行します。 +`npx hardhat`を実行すると対話形式で指示を求められるので下記のように回答します。 `Create a TypeScript project`を選択するところ以外は`enter`を押せば例通りになるはずです。 ``` @@ -119,7 +119,7 @@ $ npx hardhat test 次のように表示されたら成功です! 🎉 -![](/public/images/AVAX-messenger/section-1/1_1_1.png) +![](/public/images/AVAX-Messenger/section-1/1_1_1.png) ここまできたら,フォルダーの中身を整理しましょう。 diff --git "a/docs/AVAX-Messenger/ja/section-1/Lesson_2_Solidity\343\201\247\343\202\271\343\203\236\343\203\274\343\203\210\343\202\263\343\203\263\343\203\210\343\203\251\343\202\257\343\203\210\343\202\222\344\275\234\346\210\220\343\201\227\343\202\210\343\201\206.md" "b/docs/AVAX-Messenger/ja/section-1/Lesson_2_Solidity\343\201\247\343\202\271\343\203\236\343\203\274\343\203\210\343\202\263\343\203\263\343\203\210\343\203\251\343\202\257\343\203\210\343\202\222\344\275\234\346\210\220\343\201\227\343\202\210\343\201\206.md" index 07a157f7d..eaaf34b10 100644 --- "a/docs/AVAX-Messenger/ja/section-1/Lesson_2_Solidity\343\201\247\343\202\271\343\203\236\343\203\274\343\203\210\343\202\263\343\203\263\343\203\210\343\203\251\343\202\257\343\203\210\343\202\222\344\275\234\346\210\220\343\201\227\343\202\210\343\201\206.md" +++ "b/docs/AVAX-Messenger/ja/section-1/Lesson_2_Solidity\343\201\247\343\202\271\343\203\236\343\203\274\343\203\210\343\202\263\343\203\263\343\203\210\343\203\251\343\202\257\343\203\210\343\202\222\344\275\234\346\210\220\343\201\227\343\202\210\343\201\206.md" @@ -1,6 +1,6 @@ ### 👩‍💻 コントラクトを作成する -メッセージを管理するスマートコントラクトを作成します。 +メッセージを管理するスマートコントラクトを作成します。 ここで作成するスマートコントラクトは,後でユースケースに合わせて自由に変更できます。 `contracts`ディレクトリの下に`Messenger.sol`という名前のファイルを作成します。 @@ -82,8 +82,8 @@ Solidityは [Semantic Versioning](https://semver.org/) を採用しているた MAJOR.MINOR.PATCH ``` -となり, MAJOR(一番左の番号)は互換性がない修正・変更がSolidityに加わった場合に変わります。 -つまり, `0.8.9`から`1.0.0`までの範囲は修正が加わっても互換性がある(コンパイルが可能)変更なので, `^`を先頭につけることで, +となり, MAJOR(一番左の番号)は互換性がない修正・変更がSolidityに加わった場合に変わります。 +つまり, `0.8.9`から`1.0.0`までの範囲は修正が加わっても互換性がある(コンパイルが可能)変更なので, `^`を先頭につけることで, その範囲のバージョンの違いは許容するということです。 `0.8.9`が`hardhat.config.ts`でも記載されていることを確認してください。 @@ -112,20 +112,20 @@ contract Messenger { } ``` -`contract`に続けて定義するコントラクトの名前を記述します。 -コントラクトはほかの言語でいうところの「[class](https://wa3.i-3-i.info/word1120.html)」のように考えることができます。 +`contract`に続けて定義するコントラクトの名前を記述します。 +コントラクトはほかの言語でいうところの「[class](https://wa3.i-3-i.info/word1120.html)」のように考えることができます。 classの概念については,[こちら](https://aiacademy.jp/media/?p=131) を参照してください。 -コントラクト内では状態変数の`state`を定義しています。 +コントラクト内では状態変数の`state`を定義しています。 `state`は`uint256`型で`public`というアクセス修飾子をつけています。 > `uint256`は非常に大きな数を扱うことができる「符号なし整数のデータ型」を意味します。 -アクセス修飾子に関しては後のレッスンで扱いますが, +アクセス修飾子に関しては後のレッスンで扱いますが, `public`の指定により, `state`は**コントラクトの外部からアクセスできる**ということだけここでは理解しておきましょう。 -次に`constructor`を実装しています。 -`Messenger`をデプロイすると,`constructor`が実行されます。 +次に`constructor`を実装しています。 +`Messenger`をデプロイすると,`constructor`が実行されます。 `console.log`の中身がターミナル上に表示され, `state`が1に設定されます(uintのデフォルト初期値は`0`です)。 ### 🔩 constructor とは @@ -140,9 +140,9 @@ classの概念については,[こちら](https://aiacademy.jp/media/?p=131) を ### 🧪 テストを実装する -最低限のコントラクトを実装したので, 今度はテストを書きましょう。 -`test`ディレクトリの中に`Messenger.ts`ファイルを作成し`typescript`を使用してテストを記入します。 -これから書くテストコードはフロントエンド側のコードであると考えて, +最低限のコントラクトを実装したので, 今度はテストを書きましょう。 +`test`ディレクトリの中に`Messenger.ts`ファイルを作成し`typescript`を使用してテストを記入します。 +これから書くテストコードはフロントエンド側のコードであると考えて, フロントエンド側からコントラクトの関数を呼び出しテストをしているという認識で行うと各ファイルの対応関係と, 後のフロントエンド開発がわかりやすくなると思います。 `Messenger.ts`に以下のコードを記述してください。 @@ -178,11 +178,11 @@ describe("Messenger", function () { }); ``` -`it`と`describe`を使用してテストを記入していきます。 -これらは`Mocha`というテストフレームワークの機能を利用しています。 +`it`と`describe`を使用してテストを記入していきます。 +これらは`Mocha`というテストフレームワークの機能を利用しています。 `Mocha`について詳しくは[こちら](https://mochajs.org/#getting-started)をご覧ください。 -`it`の引数にテスト名とテスト関数を渡します。 +`it`の引数にテスト名とテスト関数を渡します。 さらに複数の`it`関数を`describe`の引数(の関数)内に渡すことで, 個々のテストを1つの`describe`でグループ化します。 ```ts @@ -196,22 +196,22 @@ it("construct", async function () { 実際のテストコードです。 -`hre.ethers.getContractFactory("Messenger")`で`Messenger`コントラクトとデプロイをサポートするライブラリの連携を行い, +`hre.ethers.getContractFactory("Messenger")`で`Messenger`コントラクトとデプロイをサポートするライブラリの連携を行い, `Messenger.deploy()`でデプロイを行っています。 -`expect`は [chai](https://www.chaijs.com/) ライブラリの機能で, +`expect`は [chai](https://www.chaijs.com/) ライブラリの機能で, 以下のように使用することで`Messenger`コントラクトの`state`がデプロイ後に`1`になっていることを確認しています。 ```ts expect(await 関数呼び出し).to.equal(期待する値); ``` -> 📓: `messenger.state()`の意味 -> `public`により公開されたコントラクトの状態変数(今回でいう`state`)は, 自動的に`getter`関数がコンパイラにより作られます。 +> 📓: `messenger.state()`の意味 +> `public`により公開されたコントラクトの状態変数(今回でいう`state`)は, 自動的に`getter`関数がコンパイラにより作られます。 > つまり`コントラクトオブジェクト.変数名()`のように実行することで値を読み取ることができます。 -> ✍️: `async function ()`と`await`について -> Javascript(Typescript も同様に) でコードを書いていると,コードの上から順に実行されなくて困ることがあります。 +> ✍️: `async function ()`と`await`について +> Javascript(Typescript も同様に) でコードを書いていると,コードの上から順に実行されなくて困ることがあります。 > これを非同期処理に関する問題といいます。 > > 解決法の一つとして,ここでは`async` / `await`を使用します。 @@ -231,11 +231,11 @@ expect(await 関数呼び出し).to.equal(期待する値); $ npx hardhat test ``` -以下のような表示がされます。 -実行したテスト名とそのテストがパスしたことがわかります。 +以下のような表示がされます。 +実行したテスト名とそのテストがパスしたことがわかります。 また, コンストラクタの出力結果なども確認できます。 -![](/public/images/AVAX-messenger/section-1/1_2_1.png) +![](/public/images/AVAX-Messenger/section-1/1_2_1.png) ### 🙋‍♂️ 質問する @@ -252,5 +252,5 @@ $ npx hardhat test --- -コントラクトの作成とテストまでの流れを知ることができました 🎉 +コントラクトの作成とテストまでの流れを知ることができました 🎉 次のレッスンでは,スマートコントラクトに機能を追加していきます。 diff --git "a/docs/AVAX-Messenger/ja/section-1/Lesson_3_\343\203\241\343\203\203\343\202\273\343\203\274\343\202\270\343\201\256\344\277\235\345\255\230\346\251\237\350\203\275\343\202\222\345\256\237\350\243\205\343\201\227\343\202\210\343\201\206.md" "b/docs/AVAX-Messenger/ja/section-1/Lesson_3_\343\203\241\343\203\203\343\202\273\343\203\274\343\202\270\343\201\256\344\277\235\345\255\230\346\251\237\350\203\275\343\202\222\345\256\237\350\243\205\343\201\227\343\202\210\343\201\206.md" index 3c503e59b..9d6419f62 100644 --- "a/docs/AVAX-Messenger/ja/section-1/Lesson_3_\343\203\241\343\203\203\343\202\273\343\203\274\343\202\270\343\201\256\344\277\235\345\255\230\346\251\237\350\203\275\343\202\222\345\256\237\350\243\205\343\201\227\343\202\210\343\201\206.md" +++ "b/docs/AVAX-Messenger/ja/section-1/Lesson_3_\343\203\241\343\203\203\343\202\273\343\203\274\343\202\270\343\201\256\344\277\235\345\255\230\346\251\237\350\203\275\343\202\222\345\256\237\350\243\205\343\201\227\343\202\210\343\201\206.md" @@ -302,7 +302,7 @@ messagesAtAddress[_receiver].push( 以下に, Solidityのアクセス修飾子とアクセス権限についてまとめています。 -![](/public/images/AVAX-messenger/section-1/1_3_2.png) +![](/public/images/AVAX-Messenger/section-1/1_3_2.png) 📡 関数の状態に関連する修飾子 @@ -315,7 +315,7 @@ Solidity開発ではこれらの修飾子を意識しておかないとデータ 以下に, Solidityの関数修飾子`pure`と`view`についてまとめています。 -![](/public/images/AVAX-messenger/section-1/1_3_3.png) +![](/public/images/AVAX-Messenger/section-1/1_3_3.png) ここで重要なのは, `pure`や`view`関数を使用すれば, **ガス代を削減できる**ということです。 @@ -530,7 +530,7 @@ $ npx hardhat test 以下のような表示がされたらテスト成功です! -![](/public/images/AVAX-messenger/section-1/1_3_1.png) +![](/public/images/AVAX-Messenger/section-1/1_3_1.png) ### 🙋‍♂️ 質問する diff --git "a/docs/AVAX-Messenger/ja/section-1/Lesson_4_\343\203\241\343\203\203\343\202\273\343\203\274\343\202\270\343\201\256\347\242\272\350\252\215\346\251\237\350\203\275\343\202\222\345\256\237\350\243\205\343\201\227\343\202\210\343\201\206.md" "b/docs/AVAX-Messenger/ja/section-1/Lesson_4_\343\203\241\343\203\203\343\202\273\343\203\274\343\202\270\343\201\256\347\242\272\350\252\215\346\251\237\350\203\275\343\202\222\345\256\237\350\243\205\343\201\227\343\202\210\343\201\206.md" index 78ee22eb9..4e6097a4f 100644 --- "a/docs/AVAX-Messenger/ja/section-1/Lesson_4_\343\203\241\343\203\203\343\202\273\343\203\274\343\202\270\343\201\256\347\242\272\350\252\215\346\251\237\350\203\275\343\202\222\345\256\237\350\243\205\343\201\227\343\202\210\343\201\206.md" +++ "b/docs/AVAX-Messenger/ja/section-1/Lesson_4_\343\203\241\343\203\203\343\202\273\343\203\274\343\202\270\343\201\256\347\242\272\350\252\215\346\251\237\350\203\275\343\202\222\345\256\237\350\243\205\343\201\227\343\202\210\343\201\206.md" @@ -361,7 +361,7 @@ $ npx hardhat test 以下のような表示がされたらテスト成功です! -![](/public/images/AVAX-messenger/section-1/1_4_1.png) +![](/public/images/AVAX-Messenger/section-1/1_4_1.png) ### 🙋‍♂️ 質問する diff --git "a/docs/AVAX-Messenger/ja/section-1/Lesson_5_\343\202\244\343\203\231\343\203\263\343\203\210\343\202\222\350\277\275\345\212\240\343\201\227\343\202\210\343\201\206.md" "b/docs/AVAX-Messenger/ja/section-1/Lesson_5_\343\202\244\343\203\231\343\203\263\343\203\210\343\202\222\350\277\275\345\212\240\343\201\227\343\202\210\343\201\206.md" index f09360268..cb0ebceb5 100644 --- "a/docs/AVAX-Messenger/ja/section-1/Lesson_5_\343\202\244\343\203\231\343\203\263\343\203\210\343\202\222\350\277\275\345\212\240\343\201\227\343\202\210\343\201\206.md" +++ "b/docs/AVAX-Messenger/ja/section-1/Lesson_5_\343\202\244\343\203\231\343\203\263\343\203\210\343\202\222\350\277\275\345\212\240\343\201\227\343\202\210\343\201\206.md" @@ -1,9 +1,9 @@ ### 🐣 コントラクトにイベントを追加しましょう -これまでのレッスンで, コントラクトに必要な機能が揃ってきました。 +これまでのレッスンで, コントラクトに必要な機能が揃ってきました。 このレッスンではコントラクトにイベント機能を実装します。 -solidityにおけるイベントとは, コントラクトの状態について呼び出し側のアプリケーションに通知する機能のことです。 +solidityにおけるイベントとは, コントラクトの状態について呼び出し側のアプリケーションに通知する機能のことです。 つまりコントラクトである処理が完了した場合や何か事象が発生した場合にその旨をフロントエンド側に伝えることができます。 イベントを実装してその理解を深めていきましょう! @@ -46,14 +46,14 @@ contract Messenger { } ``` -各イベントには引数を渡せるようになっています。 -この引数によりフロントエンド側に情報を伝えることができます。 +各イベントには引数を渡せるようになっています。 +この引数によりフロントエンド側に情報を伝えることができます。 それぞれの役割をまとめます。 - `NewMessage`: 新しいメッセージが作成されたことを伝えます。そのため引数には新しく作成されたメッセージの情報を渡せるようにしています。 - `MessageConfirmed`: メッセージが確認(承諾or拒否)されたことを伝えます。受取人とそのメッセージ配列のindex番号を渡せるようにしています。 -それでは定義したイベントを実際にフロントエンドへ伝える部分を実装します。 +それでは定義したイベントを実際にフロントエンドへ伝える部分を実装します。 各`post`, `accept`, `deny`関数に以下のコードを追加してください。 ```diff @@ -120,13 +120,13 @@ contract Messenger { } ``` -`emit`と共に先ほど定義したイベントを使用しているのがわかるでしょうか。 -`emit`によりイベントを発生させ, フロントエンド側で発生したイベントを認知することができます。 +`emit`と共に先ほど定義したイベントを使用しているのがわかるでしょうか。 +`emit`によりイベントを発生させ, フロントエンド側で発生したイベントを認知することができます。 フロントエンドは次のセクションで実装していきますが, まずはテストでその挙動を確認しましょう。 ### 🧪 テストを追加しよう -`test`ディレクトリ内の`Messenger.ts`にコードを追加します。 +`test`ディレクトリ内の`Messenger.ts`にコードを追加します。 各`Post`, `Accept`, `Deny`のテストケースに以下のテストを追加してください。 ```diff @@ -219,7 +219,7 @@ expect(関数実行).to.emit(コントラクト, "イベント名"); とすることで指定したイベントが発生したのかをテストをすることができます。 -それではテストを実行しましょう! +それではテストを実行しましょう! `messenger-contract`ディレクトリ直下で以下のコマンドを実行してください。 ``` @@ -228,7 +228,7 @@ $ npx hardhat test 以下のような表示がされたらテスト成功です! -![](/public/images/AVAX-messenger/section-1/1_5_1.png) +![](/public/images/AVAX-Messenger/section-1/1_5_1.png) ### 🙋‍♂️ 質問する @@ -245,7 +245,7 @@ $ npx hardhat test --- -おめでとうございます! -セクション1が終了しました! +おめでとうございます! +セクション1が終了しました! ターミナルに出力されたアウトプットを`#avalanche`に投稿して,あなたの成功をコミュニティで祝いましょう 🎉 次のセクションに進みましょう! diff --git "a/docs/AVAX-Messenger/ja/section-2/Lesson_1_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\343\202\222\343\202\273\343\203\203\343\203\210\343\202\242\343\203\203\343\203\227\343\201\227\343\202\210\343\201\206.md" "b/docs/AVAX-Messenger/ja/section-2/Lesson_1_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\343\202\222\343\202\273\343\203\203\343\203\210\343\202\242\343\203\203\343\203\227\343\201\227\343\202\210\343\201\206.md" index 4a412ce48..4183252e4 100644 --- "a/docs/AVAX-Messenger/ja/section-2/Lesson_1_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\343\202\222\343\202\273\343\203\203\343\203\210\343\202\242\343\203\203\343\203\227\343\201\227\343\202\210\343\201\206.md" +++ "b/docs/AVAX-Messenger/ja/section-2/Lesson_1_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\343\202\222\343\202\273\343\203\203\343\203\210\343\202\242\343\203\203\343\203\227\343\201\227\343\202\210\343\201\206.md" @@ -79,7 +79,7 @@ $ npm run dev 例)ローカル環境で表示されているWebサイト -![](/public/images/AVAX-messenger/section-2/2_1_1.png) +![](/public/images/AVAX-Messenger/section-2/2_1_1.png) 上記のような形でフロントエンドが確認できれば成功です。 diff --git "a/docs/AVAX-Messenger/ja/section-2/Lesson_2_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\343\201\256\343\203\231\343\203\274\343\202\271\343\202\222\344\275\234\346\210\220\343\201\227\343\202\210\343\201\206.md" "b/docs/AVAX-Messenger/ja/section-2/Lesson_2_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\343\201\256\343\203\231\343\203\274\343\202\271\343\202\222\344\275\234\346\210\220\343\201\227\343\202\210\343\201\206.md" index f5c38ff13..186d9c43e 100644 --- "a/docs/AVAX-Messenger/ja/section-2/Lesson_2_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\343\201\256\343\203\231\343\203\274\343\202\271\343\202\222\344\275\234\346\210\220\343\201\227\343\202\210\343\201\206.md" +++ "b/docs/AVAX-Messenger/ja/section-2/Lesson_2_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\343\201\256\343\203\231\343\203\274\343\202\271\343\202\222\344\275\234\346\210\220\343\201\227\343\202\210\343\201\206.md" @@ -1,31 +1,31 @@ ### 🍽 ページを作ろう -それでは実際にコードを書いてフロントエンドのベースとなるものを作成していきます。 -先にこのレッスンでどのようなUIを作るのかイメージ図を載せます。 +それでは実際にコードを書いてフロントエンドのベースとなるものを作成していきます。 +先にこのレッスンでどのようなUIを作るのかイメージ図を載せます。 手順の中でイメージ図の何番という形で参照することになるのでこちらを参照するようにしてください。 1 \. ホーム画面 -![](/public/images/AVAX-messenger/section-2/2_2_2.png) +![](/public/images/AVAX-Messenger/section-2/2_2_2.png) 2 \. メッセージ送信画面 -![](/public/images/AVAX-messenger/section-2/2_2_3.png) +![](/public/images/AVAX-Messenger/section-2/2_2_3.png) 3 \. メッセージ確認画面 -![](/public/images/AVAX-messenger/section-2/2_2_4.png) +![](/public/images/AVAX-Messenger/section-2/2_2_4.png) -ここでは初期設定で存在すると想定されるファイルを削除・編集することがあります。 -もし削除するファイルがあなたのフォルダ構成の中に無かった場合は, 無視してください。 +ここでは初期設定で存在すると想定されるファイルを削除・編集することがあります。 +もし削除するファイルがあなたのフォルダ構成の中に無かった場合は, 無視してください。 もし編集するファイルがあなたのフォルダ構成の中に無かった場合は, 新たにファイルを作成し編集内容のコードをそのままコピーしてください。 ### 📁 `styles`ディレクトリ -`styles`ディレクトリにはcssのコードが入っています。 +`styles`ディレクトリにはcssのコードが入っています。 全てのページに適用されるよう用意された`global.css`と, ホームページ用の`Home.module.css`があります。 -`global.css`内に以下のコードを記述してください。 +`global.css`内に以下のコードを記述してください。 ※初期設定のままなので編集箇所がない場合があります。 ```css @@ -128,15 +128,15 @@ messenger-client ### 📁 `public`ディレクトリ -`Next.js`はルートディレクトリ直下の`public`ディレクトリを静的なリソース(画像やテキストデータなど)の配置場所と認識します。 -そのためソースコード内で画像のURLを`/image.png`と指定した場合, +`Next.js`はルートディレクトリ直下の`public`ディレクトリを静的なリソース(画像やテキストデータなど)の配置場所と認識します。 +そのためソースコード内で画像のURLを`/image.png`と指定した場合, `Next.js`は自動的に`public`ディレクトリをルートとした`プロジェクトルート/public/image.png`を参照してくれます。 -ディレクトリ内画像を全て削除してください。 +ディレクトリ内画像を全て削除してください。 そして新たに画像を追加します。 -以下の画像をダウンロードするか, あなたのお好きな画像を`favicon.png`という名前で`public`ディレクトリ内に保存してください。 -![](/public/images/AVAX-messenger/section-2/2_2_1.png) +以下の画像をダウンロードするか, あなたのお好きな画像を`favicon.png`という名前で`public`ディレクトリ内に保存してください。 +![](/public/images/AVAX-Messenger/section-2/2_2_1.png) この画像はあなたのwebアプリケーションのファビコンとなります! 🙆‍♂️ @@ -150,7 +150,7 @@ messenger-client ### 📁 `hooks`ディレクトリ -`messenger-client`ディレクトリ直下に`hooks`というディレクトリを作成しましょう。 +`messenger-client`ディレクトリ直下に`hooks`というディレクトリを作成しましょう。 こちらにはウォレットやコントラクトの状態を扱うようなカスタムフック(独自で作った[フック](https://ja.reactjs.org/docs/hooks-overview.html))を実装したファイルを保存します。 まだ具体的な実装はしませんが, `useMessengerContract.ts`という名前のファイルを作成し, 以下のコードを記述してください。 @@ -168,7 +168,7 @@ export type Message = { }; ``` -`Message`という名前の型を定義しています。 +`Message`という名前の型を定義しています。 `Message`はフロントエンドでメッセージを扱うためのオブジェクトの型を表しています。 `hooks`に関するフォルダ構成はこのようになります。 @@ -181,17 +181,17 @@ messenger-client ### 📁 `components`ディレクトリ -`messenger-client`ディレクトリ直下に`components`という名前のディレクトリを作成してください。 +`messenger-client`ディレクトリ直下に`components`という名前のディレクトリを作成してください。 こちらにはコンポーネントを実装したファイルを保存していきます。 -> 📓 コンポーネントとは -> UI(ユーザーインターフェイス)を形成する一つの部品のことです。 -> コンポーネントはボタンのような小さなものから,ページ全体のような大きなものまであります。 +> 📓 コンポーネントとは +> UI(ユーザーインターフェイス)を形成する一つの部品のことです。 +> コンポーネントはボタンのような小さなものから,ページ全体のような大きなものまであります。 > レゴブロックのようにコンポーネントのブロックで UI を作ることで, 機能の追加・削除などの変更を容易にすることができます。 📁 `card`ディレクトリ -まず`components`ディレクトリ内に`card`というディレクトリを作成し, +まず`components`ディレクトリ内に`card`というディレクトリを作成し, その中に`MessageCard.module.css`と`MessageCard.tsx`という名前のファイルを作成してください。 `MessageCard.module.css`内に以下のコードを記述してください。 @@ -270,10 +270,10 @@ export default function MessageCard({ } ``` -ここでは画像のイメージ図3の, ユーザが自分宛のメッセージを一覧で確認するページの部品を作っています。 +ここでは画像のイメージ図3の, ユーザが自分宛のメッセージを一覧で確認するページの部品を作っています。 一つ一つのメッセージの表示にこの`MessageCard`コンポーネントが使用されます。 -ファイル内の初めには`Props`という形で`MessageCard`コンポーネントの引数を定義しています。 +ファイル内の初めには`Props`という形で`MessageCard`コンポーネントの引数を定義しています。 表示するメッセージの情報とコントラクトの`accept`, `deny`を呼び出すための関数を受け取ることになります。 関数の初めの一行に注目しましょう。 @@ -282,29 +282,29 @@ export default function MessageCard({ const depositInEther = ethers.utils.formatEther(message.depositInWei); ``` -ここではメッセージトークン`message.depositInWei`(単位`Wei`)を -`ethers`の関数を利用して`depositInEther`(単位`ether`)に変換しています。 -`depositInEther`はUIで実際に表示する数値になります。 -solidityでは小数点を扱わないのでトークンの量は`Wei`を使用し, フロントエンドでも`Wei`を基準にメッセージトークンを認識しますが +ここではメッセージトークン`message.depositInWei`(単位`Wei`)を +`ethers`の関数を利用して`depositInEther`(単位`ether`)に変換しています。 +`depositInEther`はUIで実際に表示する数値になります。 +solidityでは小数点を扱わないのでトークンの量は`Wei`を使用し, フロントエンドでも`Wei`を基準にメッセージトークンを認識しますが 実際にUIでトークンの量を表示する際はわかりやすい`ether`の単位に直したトークン量を使用することにします。 -> 📓 TSX とは -> ファイル拡張子に typescript の ts ではなく, tsx というものをつけました。 -> TSX は TypeScript の構文拡張で, 使い慣れた HTML ライクな構文で UI を記述できるようになります。 -> TSX の良いところは HTML と TypeScript 以外の新しい記号や構文をほとんど学ぶ必要がないことです。 +> 📓 TSX とは +> ファイル拡張子に typescript の ts ではなく, tsx というものをつけました。 +> TSX は TypeScript の構文拡張で, 使い慣れた HTML ライクな構文で UI を記述できるようになります。 +> TSX の良いところは HTML と TypeScript 以外の新しい記号や構文をほとんど学ぶ必要がないことです。 > 実際にコードを書いて覚えていきましょう。 -> 📓 `~.module.css`とは -> `module.css`を css ファイルの語尾に付けることで, `CSSモジュール`という`Next.js`の仕組みを利用することができます。 -> `CSSモジュール`はファイル内のクラス名を元にユニークなクラス名を生成してくれます。 -> 内部で自動的に行ってくれるので私たちがユニークなクラス名を直接使用することがありませんが, -> クラス名の衝突を気にする必要がなくなります。 -> 異なるファイルで同じ CSS クラス名を使用することができます。 +> 📓 `~.module.css`とは +> `module.css`を css ファイルの語尾に付けることで, `CSSモジュール`という`Next.js`の仕組みを利用することができます。 +> `CSSモジュール`はファイル内のクラス名を元にユニークなクラス名を生成してくれます。 +> 内部で自動的に行ってくれるので私たちがユニークなクラス名を直接使用することがありませんが, +> クラス名の衝突を気にする必要がなくなります。 +> 異なるファイルで同じ CSS クラス名を使用することができます。 > 詳しくは[こちら](https://nextjs.org/docs/basic-features/built-in-css-support)をご覧ください。 📁 `form`ディレクトリ -次に`components`ディレクトリ内に`form`というディレクトリを作成し, +次に`components`ディレクトリ内に`form`というディレクトリを作成し, その中に`Form.module.css`と`SendMessageForm.tsx`という名前のファイルを作成してください。 `Form.module.css`内に以下のコードを記述してください。 @@ -428,12 +428,12 @@ export default function SendMessageForm({ sendMessage }: Props) { } ``` -ここではイメージ図2の, メッセージ送信フォームUIを構成するコンポーネントを作成しています。 +ここではイメージ図2の, メッセージ送信フォームUIを構成するコンポーネントを作成しています。 テキスト, 送り先のアドレス, 添付するトークンの量の入力欄を用意し, `send`ボタンと`sendMessage`関数を連携しています。 📁 `layout`ディレクトリ -次に`components`ディレクトリ内に`layout`というディレクトリを作成し, +次に`components`ディレクトリ内に`layout`というディレクトリを作成し, その中に`Layout.module.css`と`Layout.tsx`という名前のファイルを作成してください。 `Layout.module.css`内に以下のコードを記述してください。 @@ -499,18 +499,18 @@ export default function Layout({ children, home }: Props) { } ``` -ここでは全ページで使用するレイアウトのコンポーネントを記述しています。 +ここでは全ページで使用するレイアウトのコンポーネントを記述しています。 `head`情報の用意と, `home`の指定がない場合は`← Back to home`を表示してホームページ(ルート)へリンクするようにしています。 -> 📓 `Head`タグ -> `Next.js`の機能です。 -> `head`タグの代わりに`Head`タグを使うことで``に要素を追加することができます。 +> 📓 `Head`タグ +> `Next.js`の機能です。 +> `head`タグの代わりに`Head`タグを使うことで``に要素を追加することができます。 > 詳しくは[こちら](https://nextjs-ja-translation-docs.vercel.app/docs/api-reference/next/head)をご覧ください。 -> 📓 `Link`タグ -> `Next.js`の機能です。 -> `a`タグの代わりに`Link`タグを使うとページ遷移の際に再ロードではなく, クライアントサイドで遷移が起こるのでより早くコンテンツを切り替えられます。 -> ⚠️ `className`などの属性を追加する場合は`a`タグを使用して下さい。 +> 📓 `Link`タグ +> `Next.js`の機能です。 +> `a`タグの代わりに`Link`タグを使うとページ遷移の際に再ロードではなく, クライアントサイドで遷移が起こるのでより早くコンテンツを切り替えられます。 +> ⚠️ `className`などの属性を追加する場合は`a`タグを使用して下さい。 > 詳しくは[こちら](https://nextjs-ja-translation-docs.vercel.app/docs/api-reference/next/link)をご覧ください。 > > この他にも自動で画像の最適化を施してくれる`Image`タグなどいくつか機能が備わっているので,上記リンク内の他の API 機能も覗いてみるのも良いかもしれません 🙆‍♂️ @@ -535,15 +535,15 @@ messenger-client 最後に`messenger-client`ディレクトリ直下の`pages`ディレクトリを編集していきます。 -Next.jsでは,pagesディレクトリのファイルからエクスポートされたコンポーネントがページとなります。 -ページは,ファイル名からルートと関連付けられます。 -たとえば`pages/index.js`は`/`ルートに関連付けられます。 -`pages/message/SendMessagePage.tsx`は`/message/SendMessagePage`ルートに関連付けられます。 +Next.jsでは,pagesディレクトリのファイルからエクスポートされたコンポーネントがページとなります。 +ページは,ファイル名からルートと関連付けられます。 +たとえば`pages/index.js`は`/`ルートに関連付けられます。 +`pages/message/SendMessagePage.tsx`は`/message/SendMessagePage`ルートに関連付けられます。 まず初めに`api`ディレクトリは今回使用しないのでディレクトリごと削除してください。 📁 `message`ディレクトリ -次に`pages`ディレクトリ内に`message`というディレクトリを作成し, +次に`pages`ディレクトリ内に`message`というディレクトリを作成し, その中に`SendMessagePage.tsx`と`ConfirmMessagePage.tsx`という名前のファイルを作成してください。 `SendMessagePage.tsx`内に以下のコードを記述してください。 @@ -567,8 +567,8 @@ export default function SendMessagePage() { } ``` -イメージ図2のメッセージ送信画面全体を構成しています。 -これまでで作成した`Layout`コンポーネントと`SendMessageForm`コンポーネントを使用しています。 +イメージ図2のメッセージ送信画面全体を構成しています。 +これまでで作成した`Layout`コンポーネントと`SendMessageForm`コンポーネントを使用しています。 現段階では`SendMessageForm`に渡す関数は処理が空なので, `SendMessageForm`内で`send`ボタンを押しても何も起きません。 `ConfirmMessagePage.tsx`内に以下のコードを記述してください。 @@ -608,20 +608,20 @@ export default function ConfirmMessagePage() { } ``` -イメージ図3のメッセージ確認画面全体を構成しています。 -コンポーネントの初めに`ownMessages`というメッセージデータを持った配列を作成し, +イメージ図3のメッセージ確認画面全体を構成しています。 +コンポーネントの初めに`ownMessages`というメッセージデータを持った配列を作成し, コンポーネントの返り値の中で`ownMessages`に`map`メソッドを使用していることに注目してください。 -本来`ownMessages`はスマートコントラクトから取得したデータを格納する変数ですが, +本来`ownMessages`はスマートコントラクトから取得したデータを格納する変数ですが, 現時点ではスマートコントラクトと連携していないので疑似的に`message`オブジェクトを使って作成しています。 -`ownMessages.map()`によって一つ一つの要素に対して`MessageCard`コンポーネントを適用させた新たな配列を返却しています。 -`ownMessages`には要素を2つ用意したので, 2つの`MessageCard`コンポーネントの表示がイメージ図3では確認できます。 +`ownMessages.map()`によって一つ一つの要素に対して`MessageCard`コンポーネントを適用させた新たな配列を返却しています。 +`ownMessages`には要素を2つ用意したので, 2つの`MessageCard`コンポーネントの表示がイメージ図3では確認できます。 なお引数で渡す関数はまだ処理が空です。 最後に`pages`ディレクトリ内にある`_app.tsx`と`index.tsx`を編集します。 -`_app.tsx`内に以下のコードを記述してください。 +`_app.tsx`内に以下のコードを記述してください。 ※初期設定のままなので編集箇所がない場合があります。 ```tsx @@ -635,8 +635,8 @@ function MyApp({ Component, pageProps }: AppProps) { export default MyApp; ``` -`_app.tsx`ファイルは標準で, 全てのページの親コンポーネントとなります。 -今回は`globals.css`の利用のみ行いますが, +`_app.tsx`ファイルは標準で, 全てのページの親コンポーネントとなります。 +今回は`globals.css`の利用のみ行いますが, 全てのページで使用したい`context`やレイアウトがある場合に`_app.tsx`ファイル内で使用すると便利です。 `index.tsx`内に以下のコードを記述してください。 @@ -675,7 +675,7 @@ const Home: NextPage = () => { export default Home; ``` -イメージ図1のホームページ全体を構成します。 +イメージ図1のホームページ全体を構成します。 ページ内に2つの`Link`を用意していて, それぞれ先ほど作成した`SendMessagePage`, `ConfirmMessagePage`とリンクしています。 `pages`に関するフォルダ構成はこのようになります。 @@ -696,15 +696,15 @@ messenger-client $ npm run dev ``` -そしてブラウザで`http://localhost:3000 `へアクセスしてください。 +そしてブラウザで`http://localhost:3000 `へアクセスしてください。 イメージ図通りの画面が表示されれば成功です! ### 🌔 参考リンク > [こちら](https://github.com/unchain-dev/avalanche_messenger_dapp)に本プロジェクトの完成形のレポジトリがあります。 > -> コードがうまく動かない場合は参考にしてみてください。 -> `messenger-contract`はリンク先のレポジトリ内の`package/contract`を。 +> コードがうまく動かない場合は参考にしてみてください。 +> `messenger-contract`はリンク先のレポジトリ内の`package/contract`を。 > `messenger-client`はリンク先のレポジトリ内の`package/client`を参照してください。 ### 🙋‍♂️ 質問する @@ -722,6 +722,6 @@ $ npm run dev --- -フロントエンドのベースとなるコードが出来ました! -本レッスンでは参照するコードの量が多かったですね。 お疲れ様でした 🥰 +フロントエンドのベースとなるコードが出来ました! +本レッスンでは参照するコードの量が多かったですね。 お疲れ様でした 🥰 次のレッスンではユーザのウォレットとフロントエンドを連携する作業に入ります! diff --git "a/docs/AVAX-Messenger/ja/section-2/Lesson_3_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\343\201\250\343\202\246\343\202\251\343\203\254\343\203\203\343\203\210\343\202\222\351\200\243\346\220\272\343\201\227\343\202\210\343\201\206.md" "b/docs/AVAX-Messenger/ja/section-2/Lesson_3_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\343\201\250\343\202\246\343\202\251\343\203\254\343\203\203\343\203\210\343\202\222\351\200\243\346\220\272\343\201\227\343\202\210\343\201\206.md" index befe4b9e0..ae98ae7b1 100644 --- "a/docs/AVAX-Messenger/ja/section-2/Lesson_3_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\343\201\250\343\202\246\343\202\251\343\203\254\343\203\203\343\203\210\343\202\222\351\200\243\346\220\272\343\201\227\343\202\210\343\201\206.md" +++ "b/docs/AVAX-Messenger/ja/section-2/Lesson_3_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\343\201\250\343\202\246\343\202\251\343\203\254\343\203\203\343\203\210\343\202\222\351\200\243\346\220\272\343\201\227\343\202\210\343\201\206.md" @@ -14,7 +14,7 @@ MetaMaskを設定できたら, Avalancheのテストネットワークを追加 MetaMaskの上部のネットワークタブを開き, `Add Network`をクリックします。 -![](/public/images/AVAX-messenger/section-2/2_3_2.png) +![](/public/images/AVAX-Messenger/section-2/2_3_2.png) 開いた設定ページ内で以下の情報を入力して保存をクリックしましょう。 @@ -26,11 +26,11 @@ Symbol: AVAX Explorer: https://testnet.snowtrace.io/ ``` -![](/public/images/AVAX-messenger/section-2/2_3_3.png) +![](/public/images/AVAX-Messenger/section-2/2_3_3.png) 登録が成功したらAvalancheのテストネットである`Avalanche Fuji C-Chain`が選択できるはずです。 -![](/public/images/AVAX-messenger/section-2/2_3_4.png) +![](/public/images/AVAX-Messenger/section-2/2_3_4.png) ### 🚰 `Faucet`を利用して`AVAX`をもらう @@ -38,7 +38,7 @@ Explorer: https://testnet.snowtrace.io/ テストネットでのみ使用できる偽の`AVAX`です。 -上記リンクへ移動して, あなたのウォレットのアドレスを入力してavaxを受け取ってください。 +上記リンクへ移動して, あなたのウォレットのアドレスを入力してavaxを受け取ってください。 💁 アドレスはMetaMask上部のアカウント名の部分をクリックするとコピーができます。 ### 🌅 `window.ethereum`を設定する @@ -47,14 +47,14 @@ Webアプリケーション上で,ユーザーがブロックチェーンネッ これから,あなたのWebアプリケーションにウォレットを接続したユーザーに,スマートコントラクトを呼び出す権限を付与する機能を実装していきます。これは,Webサイトへの認証機能です。 -`window.ethereum`はMetaMaskが`window`(JavaScriptにデフォルトで存在するグローバル変数)の直下に用意するオブジェクトでありAPIです。 +`window.ethereum`はMetaMaskが`window`(JavaScriptにデフォルトで存在するグローバル変数)の直下に用意するオブジェクトでありAPIです。 このAPIを使用して, ウェブサイトはユーザーのイーサリアムアカウントを要求し, ユーザーが接続しているブロックチェーンからデータを読み取り, ユーザーがメッセージや取引に署名するよう求めることができます。 まずは`window.ethereum`を使用できるようtypescriptのコードを書きます。 ### 📁 `utils`ディレクトリ -`messenger-client`へ移動し`utils`ディレクトリを作成してください。 +`messenger-client`へ移動し`utils`ディレクトリを作成してください。 その中に`ethereum.ts`というファイルを作成してください。 ``` @@ -84,8 +84,8 @@ export const getEthereum = (): MetaMaskInpageProvider | null => { }; ``` -typescriptで`window.ethereum`を使用するためには, `window`に`ethereum`オブジェクトがあるということを明示する必要があります。 -コード内の以下の部分で`window`に`ethereum`を追加しています。 +typescriptで`window.ethereum`を使用するためには, `window`に`ethereum`オブジェクトがあるということを明示する必要があります。 +コード内の以下の部分で`window`に`ethereum`を追加しています。 `MetaMaskInpageProvider`は環境設定時にインストールした`@metamask/providers`から取得した`ethereum`の型定義です。 ```ts @@ -212,19 +212,19 @@ return { 次に2つの関数を作成しました。 -`connectWallet`はwebアプリがユーザのウォレットにアクセスすることを求める関数で, -この後の実装でUIにユーザのウォレット接続ボタンを用意し, そのボタンとこの関数を連携します。 +`connectWallet`はwebアプリがユーザのウォレットにアクセスすることを求める関数で, +この後の実装でUIにユーザのウォレット接続ボタンを用意し, そのボタンとこの関数を連携します。 そのため外部で使用できるように返り値の中に含めています。 -`checkIfWalletIsConnected`は既にユーザのウォレットとwebアプリが接続しているかを確認する関数で, +`checkIfWalletIsConnected`は既にユーザのウォレットとwebアプリが接続しているかを確認する関数で, `useEffect`を使用してwebアプリがユーザのウォレットを使用する際には初回レンダリング時に確認するようにしています。 -> `eslint-disable-next-line react-hooks/exhaustive-deps`コメントについて -> `create-next-app`を実行した際に標準で`eslint`という静的解析ツールがインストールされています。 -> `eslint-disable-next-line react-hooks/exhaustive-deps`は次の行を解析から外すことを指定するコメントです。 +> `eslint-disable-next-line react-hooks/exhaustive-deps`コメントについて +> `create-next-app`を実行した際に標準で`eslint`という静的解析ツールがインストールされています。 +> `eslint-disable-next-line react-hooks/exhaustive-deps`は次の行を解析から外すことを指定するコメントです。 > 今回は useEffect の依存配列に関して, `eslint`のルールにそぐわないためそうしています。 -また, それぞれの関数内で使用している`eth_requestAccounts`と`eth_accounts`は,空の配列または単一のアカウントアドレスを含む配列を返す特別なメソッドです。 +また, それぞれの関数内で使用している`eth_requestAccounts`と`eth_accounts`は,空の配列または単一のアカウントアドレスを含む配列を返す特別なメソッドです。 ユーザーがウォレットに複数のアカウントを持っている場合を考慮して, プログラムはユーザーの1つ目のアカウントアドレスを取得することにしています。 ### 📁 `layout`ディレクトリ @@ -286,7 +286,7 @@ export default function RequireWallet({ } ``` -引数として子コンポーネントと`currentAccount`, `connectWallet`を受け取っています。 +引数として子コンポーネントと`currentAccount`, `connectWallet`を受け取っています。 `currentAccount`(ユーザのウォレットアドレス)がまだ格納されていない場合は`Connect Wallet`というボタンを表示し, `connectWallet`関数と連携しています。 ### 📁 `pages`ディレクトリ @@ -416,7 +416,7 @@ export default function SendMessagePage() { } ``` -それぞれのページでは同じ実装を追加しています。 +それぞれのページでは同じ実装を追加しています。 `useWallet`から`currentAccount`, `connectWallet`を取得し, `RequireWallet`レイアウトに渡しています。 ### 🌐 ウォレットコネクトのテストを実行する @@ -431,25 +431,25 @@ npm run dev ウォレットを接続していない状態では以下のような画面が表示されるはずです。 -![](/public/images/AVAX-messenger/section-2/2_3_1.png) +![](/public/images/AVAX-Messenger/section-2/2_3_1.png) -`Connect Wallet`ボタンをクリックし, MetaMaskを接続してください。 +`Connect Wallet`ボタンをクリックし, MetaMaskを接続してください。 ⚠️ ネットワークに`Fuji`を選択した状態で行ってください。 下図のようにMetaMaskからウォレット接続を求められますので,承認してください。 -![](/public/images/AVAX-messenger/section-2/2_3_5.png) +![](/public/images/AVAX-Messenger/section-2/2_3_5.png) MetaMaskの承認が終わると, 画面が切り替わり, 画面上部にあなたの接続しているウォレットのアドレスが表示されます。 -![](/public/images/AVAX-messenger/section-2/2_3_6.png) +![](/public/images/AVAX-Messenger/section-2/2_3_6.png) ### 🌔 参考リンク > [こちら](https://github.com/unchain-dev/avalanche_messenger_dapp)に本プロジェクトの完成形のレポジトリがあります。 > -> コードがうまく動かない場合は参考にしてみてください。 -> `messenger-contract`はリンク先のレポジトリ内の`package/contract`を。 +> コードがうまく動かない場合は参考にしてみてください。 +> `messenger-contract`はリンク先のレポジトリ内の`package/contract`を。 > `messenger-client`はリンク先のレポジトリ内の`package/client`を参照してください。 ### 🙋‍♂️ 質問する diff --git "a/docs/AVAX-Messenger/ja/section-2/Lesson_4_\343\202\263\343\203\263\343\203\210\343\203\251\343\202\257\343\203\210\343\202\222\343\203\206\343\202\271\343\203\210\343\203\215\343\203\203\343\203\210\343\201\253\343\203\207\343\203\227\343\203\255\343\202\244\343\201\227\343\202\210\343\201\206.md" "b/docs/AVAX-Messenger/ja/section-2/Lesson_4_\343\202\263\343\203\263\343\203\210\343\203\251\343\202\257\343\203\210\343\202\222\343\203\206\343\202\271\343\203\210\343\203\215\343\203\203\343\203\210\343\201\253\343\203\207\343\203\227\343\203\255\343\202\244\343\201\227\343\202\210\343\201\206.md" index b2978dd20..a8b5374f6 100644 --- "a/docs/AVAX-Messenger/ja/section-2/Lesson_4_\343\202\263\343\203\263\343\203\210\343\203\251\343\202\257\343\203\210\343\202\222\343\203\206\343\202\271\343\203\210\343\203\215\343\203\203\343\203\210\343\201\253\343\203\207\343\203\227\343\203\255\343\202\244\343\201\227\343\202\210\343\201\206.md" +++ "b/docs/AVAX-Messenger/ja/section-2/Lesson_4_\343\202\263\343\203\263\343\203\210\343\203\251\343\202\257\343\203\210\343\202\222\343\203\206\343\202\271\343\203\210\343\203\215\343\203\203\343\203\210\343\201\253\343\203\207\343\203\227\343\203\255\343\202\244\343\201\227\343\202\210\343\201\206.md" @@ -8,10 +8,10 @@ テストネットはメインネットを模しています。 -`messenger-contract`ディレクトリへ移動し, `.env`という名前のファイルを作成します。 +`messenger-contract`ディレクトリへ移動し, `.env`という名前のファイルを作成します。 💁 ドットを先頭につけたファイルは`ls`などでは非表示になる特殊なファイルです。 -`.env`ファイルの中に以下を記入してください。 +`.env`ファイルの中に以下を記入してください。 `"YOUR_PRIVATE_KEY"`の部分をあなたのアカウントの秘密鍵と入れ替えてください。 ``` @@ -22,28 +22,27 @@ TEST_ACCOUNT_PRIVATE_KEY="YOUR_PRIVATE_KEY" > > 1. お使いのブラウザから、MetaMask プラグインをクリックして、ネットワークを`Avalanche FUJI C-Chain`に変更します。 > -> ![](/public/images/AVAX-messenger/section-2/2_4_1.png) +> ![](/public/images/AVAX-Messenger/section-2/2_4_1.png) > > 2. それから、`Account details`を選択してください。 > -> ![](/public/images/AVAX-messenger/section-2/2_4_2.png) +> ![](/public/images/AVAX-Messenger/section-2/2_4_2.png) > > 3. `Account details`から`Export Private Key`をクリックしてください。 > -> ![](/public/images/AVAX-messenger/section-2/2_4_3.png) +> ![](/public/images/AVAX-Messenger/section-2/2_4_3.png) > -> 4. MetaMask のパスワードを求められるので、入力したら`Confirm`を押します。 +> 4. MetaMask のパスワードを求められるので、入力したら`Confirm`を押します。 > あなたの秘密鍵(= `Private Key` )が表示されるので、クリックしてコピーします。 > -> ![](/public/images/AVAX-messenger/section-2/2_4_4.png) +> ![](/public/images/AVAX-Messenger/section-2/2_4_4.png) > - `.env`の`YOUR_PRIVATE_KEY`の部分をここで取得した秘密鍵とを入れ替えます。 -⚠️gitignoreファイルに.envが記述されていることを確認して下さい。 +⚠️gitignoreファイルに.envが記述されていることを確認して下さい。 秘密鍵は外部に漏れないようにGitHub上に上げません。 -> **✍️: スマートコントラクトをデプロイするのに秘密鍵が必要な理由** -> **新しくスマートコントラクトをブロックチェーン上にデプロイすること**も,トランザクションの一つです。 +> **✍️: スマートコントラクトをデプロイするのに秘密鍵が必要な理由** > **新しくスマートコントラクトをブロックチェーン上にデプロイすること**も,トランザクションの一つです。 > > トランザクションを行うためには,ブロックチェーンに「ログイン」する必要があります。 > @@ -136,8 +135,8 @@ console.log( ); ``` -はじめに`ethers.getSigners()`でアカウントのアドレスを取得しています。 -このスクリプトを実行する際に先ほど`hardhat.config.ts`で設定したネットワークを指定すると, `ethers.getSigners()`の返す初めのアカウントの値はあなたのアカウントのアドレスになります。 +はじめに`ethers.getSigners()`でアカウントのアドレスを取得しています。 +このスクリプトを実行する際に先ほど`hardhat.config.ts`で設定したネットワークを指定すると, `ethers.getSigners()`の返す初めのアカウントの値はあなたのアカウントのアドレスになります。 ログが出力されるので後ほど確認しましょう。 またデプロイの処理後もログを出力するようにしています。 @@ -157,7 +156,7 @@ Contract deployed at: 0xf531A6BCF3cD579f5A367cf45ff996dB1FC3beA1 Contract's fund is: BigNumber { value: "100" } ``` -`Contract deployed at:`の後に続くアドレスはコントラクトがデプロイされた先のアドレスです。 +`Contract deployed at:`の後に続くアドレスはコントラクトがデプロイされた先のアドレスです。 この後の項目で必要になるのでどこかに保存しておいてください。 ブロックチェーンにデプロイすると,世界中の誰でもコントラクトにアクセスできます。 diff --git "a/docs/AVAX-Messenger/ja/section-2/Lesson_5_WEB\343\202\242\343\203\227\343\203\252\343\201\213\343\202\211\343\202\263\343\203\263\343\203\210\343\203\251\343\202\257\343\203\210\343\202\222\345\221\274\343\201\263\345\207\272\343\201\235\343\201\206.md" "b/docs/AVAX-Messenger/ja/section-2/Lesson_5_WEB\343\202\242\343\203\227\343\203\252\343\201\213\343\202\211\343\202\263\343\203\263\343\203\210\343\203\251\343\202\257\343\203\210\343\202\222\345\221\274\343\201\263\345\207\272\343\201\235\343\201\206.md" index ce4c1e7b9..64d2ed064 100644 --- "a/docs/AVAX-Messenger/ja/section-2/Lesson_5_WEB\343\202\242\343\203\227\343\203\252\343\201\213\343\202\211\343\202\263\343\203\263\343\203\210\343\203\251\343\202\257\343\203\210\343\202\222\345\221\274\343\201\263\345\207\272\343\201\235\343\201\206.md" +++ "b/docs/AVAX-Messenger/ja/section-2/Lesson_5_WEB\343\202\242\343\203\227\343\203\252\343\201\213\343\202\211\343\202\263\343\203\263\343\203\210\343\203\251\343\202\257\343\203\210\343\202\222\345\221\274\343\201\263\345\207\272\343\201\235\343\201\206.md" @@ -571,19 +571,19 @@ $ npm run dev ブラウザで http://localhost:3000 へアクセスすると以下のようにホーム画面が表示されます(ウォレットを接続している場合) -![](/public/images/AVAX-messenger/section-2/2_5_3.png) +![](/public/images/AVAX-Messenger/section-2/2_5_3.png) `send ->`リンクをクリックして画面を移動しましょう。 メッセージの宛先アドレスを自分の公開アドレスにして, 自分自身にメッセージを送信してみましょう! `send`ボタンをクリックすると承認画面が開くので承認します。 -![](/public/images/AVAX-messenger/section-2/2_5_1.png) +![](/public/images/AVAX-Messenger/section-2/2_5_1.png) 続いて, ホーム画面へ戻り, `check->`リンクをクリックして, メッセージ確認画面へ移動します。 しばらくするとトランザクションが完了し, 送信されたメッセージが表示されます。 -![](/public/images/AVAX-messenger/section-2/2_5_2.png) +![](/public/images/AVAX-Messenger/section-2/2_5_2.png) ### 🌵 `ETH`と`AVAX` @@ -788,11 +788,11 @@ $ npm run dev ブラウザで http://localhost:3000 へアクセスして先ほど送信された自分宛のメッセージを`accept`してみましょう! -![](/public/images/AVAX-messenger/section-2/2_5_2.png) +![](/public/images/AVAX-Messenger/section-2/2_5_2.png) `accept`のトランザクションが完了すると確認済みとなり`accept`, `deny`ボタンが消えます。 -![](/public/images/AVAX-messenger/section-2/2_5_6.png) +![](/public/images/AVAX-Messenger/section-2/2_5_6.png) ブラウザ上で`右クリック` -> `検証` -> `コンソール`を開きます。 @@ -803,7 +803,7 @@ Done -- `0x..` ← これをコピーします。 ``` -![](/public/images/AVAX-messenger/section-2/2_5_7.png) +![](/public/images/AVAX-Messenger/section-2/2_5_7.png) ### 🌱 AVASCAN でトランザクションを確認する @@ -811,7 +811,7 @@ Done -- 検索結果が表示され, `STATUS: SUCCESS`が表示されればトランザクションの成功を確認できます。 -![](/public/images/AVAX-messenger/section-2/2_5_8.png) +![](/public/images/AVAX-Messenger/section-2/2_5_8.png) ### 🌔 参考リンク diff --git "a/docs/AVAX-Messenger/ja/section-3/Lesson_1_\343\202\263\343\203\263\343\203\210\343\203\251\343\202\257\343\203\210\343\201\253\347\256\241\347\220\206\350\200\205\343\202\222\350\250\255\343\201\221\343\202\210\343\201\206.md" "b/docs/AVAX-Messenger/ja/section-3/Lesson_1_\343\202\263\343\203\263\343\203\210\343\203\251\343\202\257\343\203\210\343\201\253\347\256\241\347\220\206\350\200\205\343\202\222\350\250\255\343\201\221\343\202\210\343\201\206.md" index bf850afbf..79a87de3c 100644 --- "a/docs/AVAX-Messenger/ja/section-3/Lesson_1_\343\202\263\343\203\263\343\203\210\343\203\251\343\202\257\343\203\210\343\201\253\347\256\241\347\220\206\350\200\205\343\202\222\350\250\255\343\201\221\343\202\210\343\201\206.md" +++ "b/docs/AVAX-Messenger/ja/section-3/Lesson_1_\343\202\263\343\203\263\343\203\210\343\203\251\343\202\257\343\203\210\343\201\253\347\256\241\347\220\206\350\200\205\343\202\222\350\250\255\343\201\221\343\202\210\343\201\206.md" @@ -127,7 +127,7 @@ contract Messenger { } ``` -コンストラクタは引数により, デプロイ時に上限値を受け取れるようになっています。 +コンストラクタは引数により, デプロイ時に上限値を受け取れるようになっています。 そして状態変数にセットします。 ```solidity @@ -149,7 +149,7 @@ contract Messenger { } ``` -`post`関数が呼び出された際, 初めにメッセージの受取人のメッセージ保留数が上限に達しているかを確認しています。 +`post`関数が呼び出された際, 初めにメッセージの受取人のメッセージ保留数が上限に達しているかを確認しています。 上限に達していた場合, トランザクションをキャンセルします。 また, 処理を続行する場合は保留数をインクリメントします。 @@ -233,10 +233,10 @@ describe("Messenger", function () { 追加した`Deployment`テストでは, デプロイ時に渡した`numOfPendingLimits`が正しくセットされているかを確認しています。 -さらに`Post`テスト内で追加したテストケース`it`の中では, +さらに`Post`テスト内で追加したテストケース`it`の中では, `for loop`をしようして上限値までメッセージを送り続けることで, `numOfPendingLimits`による制限が働いているかを確認しています。 -それではテストを実行しましょう! +それではテストを実行しましょう! `messenger-contract`ディレクトリ直下で以下のコマンドを実行してください。 ``` @@ -245,7 +245,7 @@ $ npx hardhat test 以下のような表示がされたらテスト成功です! -![](/public/images/AVAX-messenger/section-3/3_1_1.png) +![](/public/images/AVAX-Messenger/section-3/3_1_1.png) ### 💠 コントラクトに管理者機能を設けましょう @@ -285,8 +285,8 @@ contract Ownable { コンストラクタ内ではコンストラクタを呼び出した(デプロイした)アドレスで状態変数の`owner`を初期化しています。 -`modifier`はまだ出てきていない関数修飾子の1つで, その使用方法と共にどんなものなのかこの後理解します。 -ここで見て頂きたいのは, `require`を利用して, 関数を実行する人が`owner`と等しいことを確認していること +`modifier`はまだ出てきていない関数修飾子の1つで, その使用方法と共にどんなものなのかこの後理解します。 +ここで見て頂きたいのは, `require`を利用して, 関数を実行する人が`owner`と等しいことを確認していること 次の行に`_;`を記述しているということです。 `Messenger.sol`に`Ownable`を継承させて, `Ownable`の関数を利用できるようにしましょう。 @@ -350,13 +350,13 @@ import "hardhat/console.sol"; } ``` -`contract Messenger is Ownable`のようにコントラクトを宣言することで, +`contract Messenger is Ownable`のようにコントラクトを宣言することで, `Messenger.sol`は`Ownable`を継承するという関係を作れます, すると`Ownable`の関数を`Messenger.sol`も利用できるようになります。 -コンストラクタ内で`Ownable`の関数`ownable`を実行しています。 +コンストラクタ内で`Ownable`の関数`ownable`を実行しています。 `ownable`を実行すると, コンストラクタを呼び出した(=デプロイをした)アカウントのアドレスをコントラクトは管理者として記録します。 -新しく追加した`changeNumOfPendingLimits`関数に注目しましょう。 +新しく追加した`changeNumOfPendingLimits`関数に注目しましょう。 関数の実行に修飾子の`onlyOwner`を指定しています。 ここで起こる処理の流れを整理します。 @@ -366,15 +366,15 @@ import "hardhat/console.sol"; - 確認が取れたら, `_;`の記述された箇所から, 今度は`changeNumOfPendingLimits`の処理が実行されます。 - `numOfPendingLimits`を変更しイベントをemitします。 -このように`modifier`を利用した関数修飾子は, 自分でカスタムした処理をある関数の実行前の処理として適用させることができます。 +このように`modifier`を利用した関数修飾子は, 自分でカスタムした処理をある関数の実行前の処理として適用させることができます。 今回のように管理者権限の必要な関数には`onlyOwner`を修飾子としてつけるだけで決まった処理をしてくれるので便利です。 オーナーに特別な権限を与えることは, オーナーの利益のためにルールを変更できるという面で, 濫用される恐れもあります。 以下, [CryptoZombies](https://cryptozombies.io/jp/lesson/3/chapter/3)からの引用です。 -> DApp がイーサリアム上にあるというだけで、全てが分散型になっているというわけではないことを、常に念頭に入れておいてください。 -> 気になる部分については、すべてのソースコードに目を通して、オーナーに特別な力がないことを確認する必要があります。 +> DApp がイーサリアム上にあるというだけで、全てが分散型になっているというわけではないことを、常に念頭に入れておいてください。 +> 気になる部分については、すべてのソースコードに目を通して、オーナーに特別な力がないことを確認する必要があります。 > 開発者としてバグを修正するように DApp をコントロールする権限が必要な一方で、オーナーの数を少なくしてユーザーのデータの安全性を確保できるようなプラットフォームを開発をすることも重要であり、両者のバランスに常に気をつける必要があります。 是非openzeppelinの [ownable](https://github.com/OpenZeppelin/openzeppelin-contracts/blob/master/contracts/access/Ownable.sol) コントラクトを見てみてください! @@ -455,7 +455,7 @@ describe("Messenger", function () { をそれぞれ確認しています。 -それではテストを実行しましょう! +それではテストを実行しましょう! `messenger-contract`ディレクトリ直下で以下のコマンドを実行してください。 ``` @@ -464,13 +464,13 @@ $ npx hardhat test 以下のような表示がされたらテスト成功です! -![](/public/images/AVAX-messenger/section-3/3_1_2.png) +![](/public/images/AVAX-Messenger/section-3/3_1_2.png) ### 🛫 デプロイ スクリプトを変更する コンストラクタを変更したので, デプロイ時のコードも変更する必要があります。 -`scripts/deploy.ts`内を以下のコードに書き換えてください。 +`scripts/deploy.ts`内を以下のコードに書き換えてください。 主にデプロイ時の引数を増やした部分が変わっています。 ```ts @@ -538,7 +538,7 @@ Contract's number of pending message limits is: BigNumber { value: "10" } Contract's fund is: BigNumber { value: "100" } ``` -出力結果の`Contract deployed at:`の後に続くアドレスをコピーして +出力結果の`Contract deployed at:`の後に続くアドレスをコピーして `messenger-client/hooks/useMessengerContract.ts`の中の`contractAddress`変数定義の部分に貼り付けます。 例: diff --git "a/docs/AVAX-Messenger/ja/section-3/Lesson_2_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\343\202\222\345\256\214\346\210\220\343\201\225\343\201\233\343\202\210\343\201\206.md" "b/docs/AVAX-Messenger/ja/section-3/Lesson_2_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\343\202\222\345\256\214\346\210\220\343\201\225\343\201\233\343\202\210\343\201\206.md" index 95a17cefe..e8995eb4b 100644 --- "a/docs/AVAX-Messenger/ja/section-3/Lesson_2_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\343\202\222\345\256\214\346\210\220\343\201\225\343\201\233\343\202\210\343\201\206.md" +++ "b/docs/AVAX-Messenger/ja/section-3/Lesson_2_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\343\202\222\345\256\214\346\210\220\343\201\225\343\201\233\343\202\210\343\201\206.md" @@ -8,7 +8,7 @@ ### 📁 `hooks`ディレクトリ -コントラクトに追加した機能を利用できるように, `useMessengerContract.ts`の中身を編集してきましょう。 +コントラクトに追加した機能を利用できるように, `useMessengerContract.ts`の中身を編集してきましょう。 基本的にコントラクトに追加した`owner`機能や`numOfPendingLimits`, `changeNumOfPendingLimits`を使用できるように変更しています。 `ReturnUseMessengerContract`の返り値の型を変更します。 @@ -195,7 +195,7 @@ return { 📁 `form`ディレクトリ -`components/form`ディレクトリ内, +`components/form`ディレクトリ内, その中に`ChangeOwnerValueForm.tsx`という名前のファイルを作成してください。 `ChangeOwnerValueForm.tsx`内に以下のコードを記述してください。 @@ -255,10 +255,10 @@ export default function ChangeOwnerValueForm({ } ``` -ここでは同じフォルダ内の`SendMessageForm.tsx`と同じようなフォームコンポーネントを作成しています。 +ここでは同じフォルダ内の`SendMessageForm.tsx`と同じようなフォームコンポーネントを作成しています。 管理者ページで使用されます。 -引数で受け取る`currentValue`と`changeValue`は, それぞれ管理者が変更する値の, 現在の値と値を変更をする関数です。 +引数で受け取る`currentValue`と`changeValue`は, それぞれ管理者が変更する値の, 現在の値と値を変更をする関数です。 今回, 管理者が変更する値はメッセージの保留数を指します。 後で実際に表示する画面を見ると, このフォームの構成する部分がわかりやすいと思います。 @@ -304,7 +304,7 @@ export default function OwnerPage() { 管理者ページを構成します。 -`useMessengerContract`から取得した`numOfPendingLimits`と`changeNumOfPendingLimits`を +`useMessengerContract`から取得した`numOfPendingLimits`と`changeNumOfPendingLimits`を 先ほど作成した`ChangeOwnerValueForm`に渡しています。 また, `owner`が現在接続しているアカウントと違う場合は`Unauthorized`というメッセージを表示します。 @@ -367,7 +367,7 @@ const Home: NextPage = () => { export default Home; ``` -`OwnerPage.tsx`と同じように`owner`とユーザアカウントを照合して, +`OwnerPage.tsx`と同じように`owner`とユーザアカウントを照合して, `owner`の場合は管理者画面である`OwnerPage`へリンクを表示します。 ### 🖥️ web アプリを立ち上げましょう @@ -380,27 +380,27 @@ $ npm run dev ブラウザで http://localhost:3000 へアクセスします。 -管理者のアカウントで接続した場合, 以下のように画面が出力されるはずです。 +管理者のアカウントで接続した場合, 以下のように画面が出力されるはずです。 `owner`リンクが増えています。 -![](/public/images/AVAX-messenger/section-3/3_2_1.png) +![](/public/images/AVAX-Messenger/section-3/3_2_1.png) `owner`リンクをクリックし, 管理者ページで値を入力し, メッセージの保留数上限を変更してみましょう。 -![](/public/images/AVAX-messenger/section-3/3_2_2.png) +![](/public/images/AVAX-Messenger/section-3/3_2_2.png) -トランザクションが完了し, `current limits`が変更したら -ブラウザのコンソールから, `Done`ではじまる行の値をコピーして, [AVASCAN testnet](https://testnet.avascan.info/blockchain/c/home)で履歴を確認してみましょう。 +トランザクションが完了し, `current limits`が変更したら +ブラウザのコンソールから, `Done`ではじまる行の値をコピーして, [AVASCAN testnet](https://testnet.avascan.info/blockchain/c/home)で履歴を確認してみましょう。 💁 コンソールを表示するには, ブラウザ上で`右クリック` -> `検証` -> `コンソール`を開きます。 -![](/public/images/AVAX-messenger/section-3/3_2_3.png) +![](/public/images/AVAX-Messenger/section-3/3_2_3.png) ### 🌔 参考リンク > [こちら](https://github.com/unchain-dev/avalanche_messenger_dapp)に本プロジェクトの完成形のレポジトリがあります。 > -> コードがうまく動かない場合は参考にしてみてください。 -> `messenger-contract`はリンク先のレポジトリ内の`package/contract`を。 +> コードがうまく動かない場合は参考にしてみてください。 +> `messenger-contract`はリンク先のレポジトリ内の`package/contract`を。 > `messenger-client`はリンク先のレポジトリ内の`package/client`を参照してください。 ### 🙋‍♂️ 質問する @@ -418,7 +418,7 @@ $ npm run dev --- -おめでとうございます! -セクション3が終了しました! -`#avalanche`にあなたのAVASCANのリンクを貼り付けて,コミュニティで進捗を祝いましょう 🎉 +おめでとうございます! +セクション3が終了しました! +`#avalanche`にあなたのAVASCANのリンクを貼り付けて,コミュニティで進捗を祝いましょう 🎉 webアプリが完成したら,次のレッスンに進みましょう 🎉 diff --git "a/docs/AVAX-Messenger/ja/section-4/Lesson_1_Web\343\202\242\343\203\227\343\203\252\343\202\222\343\203\207\343\203\227\343\203\255\343\202\244\343\201\227\343\202\210\343\201\206.md" "b/docs/AVAX-Messenger/ja/section-4/Lesson_1_Web\343\202\242\343\203\227\343\203\252\343\202\222\343\203\207\343\203\227\343\203\255\343\202\244\343\201\227\343\202\210\343\201\206.md" index 13472e298..92ac61402 100644 --- "a/docs/AVAX-Messenger/ja/section-4/Lesson_1_Web\343\202\242\343\203\227\343\203\252\343\202\222\343\203\207\343\203\227\343\203\255\343\202\244\343\201\227\343\202\210\343\201\206.md" +++ "b/docs/AVAX-Messenger/ja/section-4/Lesson_1_Web\343\202\242\343\203\227\343\203\252\343\202\222\343\203\207\343\203\227\343\203\255\343\202\244\343\201\227\343\202\210\343\201\206.md" @@ -15,7 +15,7 @@ - Webアプリケーションからデプロイされたコントラクトを呼び出す - Webアプリケーションを介してAVAXを取引する -プロジェクトをレベルアップさせましょう! +プロジェクトをレベルアップさせましょう! これまでのレッスンで作成したdappを元にあなたのお好きなように機能を追加してみてください 💪 🚀 - CSSや文章を変更したり,画像や動画を自分のWebアプリケーションに乗せてみる @@ -33,7 +33,7 @@ Vercelに関する詳しい説明は,[こちら](https://zenn.dev/lollipop_onl/a まず,GitHubの`messenger-client`にあるローカルファイルをGitHubへアップロードしましょう。 -まだアップロードをしていない方は, ターミナル上で`messenger-client`に移動して,下記を実行しましょう。 +まだアップロードをしていない方は, ターミナル上で`messenger-client`に移動して,下記を実行しましょう。 ⚠️ `.gitignore`ファイル内に`.env`が記載されていることを確認していください。 ``` @@ -48,27 +48,27 @@ Vercelのアカウントを取得したら,下記を実行しましょう。 1\. `Dashboard`へ進んで,`New Project`を選択してください。 -![](/public/images/AVAX-messenger/section-4/4_1_1.png) +![](/public/images/AVAX-Messenger/section-4/4_1_1.png) 2\. `Import Git Repository`で自分のGitHubアカウントを接続したら,`messenger-client(あなたのレポジトリの名前)`を選択し,`Import`してください。 -![](/public/images/AVAX-messenger/section-4/4_1_2.png) +![](/public/images/AVAX-Messenger/section-4/4_1_2.png) 3\. プロジェクトを作成します。 -デフォルトの設定で良いはずですが, +デフォルトの設定で良いはずですが, もし`FRAME WORK PRESET`が`Next.js`になっていない場合は`Next.js`を選択してください。 -![](/public/images/AVAX-messenger/section-4/4_1_3.png) +![](/public/images/AVAX-Messenger/section-4/4_1_3.png) 4\. `Deploy`ボタンをクリックしましょう。 VercelはGitHubと連動しているので,GitHubが更新されるたびに自動でデプロイを行ってくれます。 -しばらくしてビルドが完了すると +しばらくしてビルドが完了すると 下記のように, メッセージとホーム画面が出力されます。 -![](/public/images/AVAX-messenger/section-4/4_1_4.png) +![](/public/images/AVAX-Messenger/section-4/4_1_4.png) ホーム画面の表示部分はリンクになっているので, クリックするとあなたの作成したdappがブラウザで確認できます 🎉 @@ -95,7 +95,7 @@ NFTを取得する条件は,以下のようになります。 3. このページの最後にリンクされているProject Completion Formに記入する -4. Discordの`avax-messenger`チャンネルに,あなたのWebサイトをシェアしてください 😉🎉 Discordに投稿する際に,追加実装した機能とその概要も教えていただけると幸いです! +4. Discordの`AVAX-Messenger`チャンネルに,あなたのWebサイトをシェアしてください 😉🎉 Discordに投稿する際に,追加実装した機能とその概要も教えていただけると幸いです! プロジェクトを完成させていただいた方には,NFTをお送りします。