React や Next.js での開発参考用

1 パッケージインストール

1-1. DFX IC にデプロイ、管理するための SDK インストール

• sh -ci "$(curl -fsSL https://smartcontracts.org/install.sh)"
• dfx --version
  node v16

1-2. 新規プロジェクト作成

• dfx new icp_dapp
  dfx new コマンドは、プロジェクトディレクトリ、テンプレートファイル、および新しい Git リポジトリを作成
• tree -L 1 -F -a icp_dapp

1-3. ローカルのキャニスター実行環境起動

• dfx start --clean
• dfx start --clean --background
• npm install
• dfx deploy
  deploy はキャニスターの設定が書かれた dfx.json ファイルが存在する階層で実行しないとエラー

1-4. 開発サーバーを起動しフロントエンドテスト

キャニスター実行環境を停止

• npm start

1-5. テスト終了時

• dfx stop

2 設定ファイル dfx.json 編集

• 作成したいキャニスターの情報を記述
• キャニスターにつける名前を定義できる（principalID では分かりづらいため）

2-1. キャニスターデプロイ

• デプロイするユーザプリンシパルを変数に登録(便利)
• export ROOT_PRINCIPAL=$(dfx identity get-principal)
• dfx deploy <canister name> キャニスターによって引数つけたりもできる

2-2. キャニスターとやり取り

• dfx canister call <canister name> <method>

3. キャニスターの作成

キャニスターをデプロイして、～～キャニスターの～メソッドをコールして様々な機能を実装。以下例。

3-1. XX キャニスター作成

• 「XX」フォルダを src 直下に作成
  • main.mo ファイル
  • types.mo ファイル
    • XX キャニスターが使用するユーザ定義の型定義
    • 利用する他キャニスターから呼び出したいメソッドなど

3-2. 機能テスト

shell script を書こう

• rm -rf .dfx
• dfx start --clean
• bash ./scripts/test.sh

4. フロントエンド側 React の場合

icp_dapp/src 内のファイルを編集

4-1. react

• npm install --save react react-dom
• npm install --save-dev @babel/core babel-loader @babel/preset-react style-loader css-loader

4-2. index.js

4-3. index.js がインストールする App.jsx, CSS ファイル作成

4-4. assets/main.css 削除（使わないなら）

4-5. index.html ファイル編集

4-6. webpack.config.js

最初にインストールしたパッケージが使用できるように、また、必要なデータを環境変数としてフロントエンド側で受け取れるように webpack.config.js を編集する

4-7. package.json ファイル編集

フロントエンドの環境構築ジに実行される generate コマンドを編集し、dfx.jsonファイルに定義したキャニスターのインターフェースを生成する。生成されたファイルをフロントエンドのキャニスターが読込、バックエンド側のキャニスターとやり取りが可能になる。

4-8. IC 用パッケージインストール

IC 上のキャニスターとやり取りを行うフロントエンドの機能を実装するために必要

• npm install --save @dfinity/agent @dfinity/auth-client

5.開発

5-1. 各種機能実装

5-2. コンポーネント作成

icp_dapp_frontend/src/components/YYY.jsx

5-3. テスト時

• npm start

tips(更新予定)

デプロイされているキャニスターを確認

• dfx canister list --network ic

ローカルへのデプロイ

古いコンテンツ削除

1. dfx stop
2. rm -rf .dfx
   デプロイを行うユーザを指定
3. dfx identity use default
4. export ROOT_PRINCIPAL=$(dfx identity get-principal)
   ローカルの実行環境を起動
5. dfx start --clean --background
6. dfx deploy icp_basic_dex_backend
   II キャニスター
7. dfx deploy internet_identity_div

キャニスターの内容を変更したとき

毎回デプロイし直す必要がある

• dfx deploy icp_basic_dex_backend
• dfx deploy faucet && dfx deploy icp_basic_dex_backend

シェルスクリプトで一括で

• bash ./scripts/deploy_local.sh
  ブラウザで確認する。webpack-dev-server Project is running at:以降の URL にアクセスする。フロントエンドの変更が動的に反映される webpack を使用する。
• npm start

メインネットデプロイ

1. サイクルの取得
2. サイクルのチェック
   dfx wallet --network=ic balance
3. export ROOT_PRINCIPAL=$(dfx identity get-principal)
4. dfx deploy faucet --network ic --with-cycles 1000000000000
5. dfx deploy icp_basic_dex_backend --network ic --with-cycles 1000000000000
6. dfx deploy icp_basic_dex_frontend --network ic --with-cycles 1000000000000
7. dfx canister status --network ic icp_basic_dex_backend
8. icp_basic_dex_frontend:に表示された URL にアクセス

認証機能について補足 ←

再デプロイ(フロントエンドのみデプロイできてないので間違いかも)

キャニスターを再度作成して

• dfx identity create
• sudo dfx canister create GoldDIP20

デプロイを中断、再起動（使い道なさそう）

1. ID チェック
   sudo dfx canister status --network ic icp_basic_dex_backend
2. 停止

• sudo dfx canister stop --network ic icp_basic_dex_backend

3. 再起動

• sudo dfx canister start --network ic icp_basic_dex_backend

（うまくいってない）デプロイ後にフロントエンドを編集したい(デプロイ後にテスト環境に戻すのは難しいか)

1. ローカルにキャニスターのコードをコピーする
   $ dfx canister install icp_basic_dex_frontend
2. ローカルでコードを編集する
3. dfx canister install --network ic --mode reinstall icp_basic_dex_frontend ./dist

環境リセット

キャッシュクリア

• dfx cache delete
• まず、停止したい Canister を確認します。例えば、icp_basic_dex_backend の Canister ID を持つ Canister を停止するには、以下のコマンドを実行します。
  dfx canister stop qyskz-paaaa-aaaao-ahu4q-cai
• 停止したいすべての Canister について同じ手順を実行します。
• 次に、停止したすべての Canister を削除します。例えば、icp_basic_dex_backend の Canister ID を持つ Canister を削除するには、以下のコマンドを実行します。 停止したすべての Canister について同じ手順を実行します。
  dfx canister delete qyskz-paaaa-aaaao-ahu4q-cai
• デプロイに使用したキーを削除します。まず、キーを取得します。
• 取得したキーファイルを使用して、キーを削除します。例えば、キーファイルが deploy-identity.pem である場合、以下のコマンドを実行します。

dfx identity get-deploy-key
dfx identity revoke deploy-identity.pem

以上で、ic 上のすべてのデプロイされた Canister を削除し、環境をリセットすることができます。

他の方法？

• rm -rf dist
• npm run build
• dfx deploy icp_basic_dex_frontend --network ic

---

websocket

• リアルタイム性のあるアプリが使いやすくなる
• IoT に活用されてる技術
• 他のチェーンではポーリング？オラクルを介した HTTP リクエスト。

ckBTC

• ICR1 規格
• wrapped ETH に近い
• Uniswap で使うのは
• スマコンで変換してるので wrapped eth に似てる
• wrapped btc は bitgo という発行してる母体を信じる必要があるので、違う

ICR1

• 2022 11 月くらいにできたトークンスタンダード
• principal アドレスに紐づいていて、principal 自体のレジストリに保存されるようになった
• ICRC2 というトークンでは approve というコマンドが実装される
• ICRC 　ledger キャニスター（トークンの保管などをみる）、minter キャニスター(ckBTC を管理する機能、ckbtc にしたり、ckbtc バーンしたり。。。まだできてないが最近 ckbtc を btc に変換できる)
• 10satoshi 0.3 円一回の送料
• 手数料はシビルアタック対策

課題

• 1 秒に一回しか署名ができない。ETH コールするとき一人一回ずつコールして速度が足らない
• BTC で問題にならないのは BTC が早くないから
• ICP で束にして、ETH に渡す
• いちいち L1 に渡すわけにはいかないので、rollup があったほうがいい。
• zk-wasm が欲しいとフォーラム
• zk-snark を IC 上で作っている icme で。

ICP の特徴

• 方向性なんでもある
• socket 繋いだり
• 何でもある事が大事
• 一個のプラットフォームで全部つながってる
• L2 しながら LN できるし、websocket 繋げるし、イーサリアムの layer2 のものは、layaer2 のフルノードも使えるので、接着剤的に使えるのが良い。目指すはクリプトクラウド。
• ネットワークが署名を出せるのが唯一の特徴。
  • ガス代、HTTP アウトコールも、ネットワークが署名を作れるという一個の武器で、しかも万能で戦えてる。
  • 閾値署名できるネットワークだから、できる
  • キャニスターってスマコンでコードとデータ
  • オーケストレーション web、クリプトウェブ、