simple nft exampleというnftアプリ開発のスマートコントラクトとフロントエンドが一緒になったtemplateがあった。

simple nft exampleメモ

リソース

• scaffold-eth/scaffold-eth at simple-nft-example
  • Docs

やること

• NFTのHello Worldより発展的なサンプルを読んでみる

メモ

simple-nft-exampleのコードリーディング

• NFTをAccount同士で送り合えるスマートコントラクトとReactで作られたフロントエンドアプリ
• react,hooks,graphql,ether.js,web3-modal,solidity,hardhat,infuraが使われてる
  • web3-modal
    • Web3Modal/web3modal: A single Web3 / Ethereum provider solution for all Wallets
    • 各種wallet版omniauthみたいなやつ
  • 自分はReact16.8以前までしか使ってないからhooksをよくわかってないっぽい
    • フック API リファレンス – React
      • ルール
        • フックは関数のトップレベルのみで呼び出す
        • Reactコンポーネント内部でのみ呼び出す
      • useState
        • stateとsetStateを返す
        • setStateでstateを更新するとstateをlistenしてるコンポーネントが更新される
        • FlutterでいうとStateNotifierみたいなやつ
      • useEffect
        • マウント時と更新時に実行される副作用(何かロードしたり色々)
        • 第二引数にstateを指定するとそのstateの更新時のみ実行されるようになる。空配列を指定すると全ての更新時に実行されなくなる。
        • callbackをreturnするとdispose時に実行してくれる。unsubscribeとかする時に便利。
        • FlutterでいうところのライフサイクルのinitStateやdidChangedDependenciesやdiposeの代わりになるやつ
      • useContext
        • そのコンポーネントのcontextを取得する。contextが変更されると更新される。
        • FlutterでいうところのriverpodのConsumerとその配下の更新の関係に似てる？
      • useReducer
        • reduxのreducer+useStateみたいなやつ。
        • Flutterに該当するやつはなさそう。
      • useMemo
        • メモ化された値を返す。
        • FlutterでいうところのGetterみたいなもんか？
      • useCallback
        • メモ化されたコールバックを返す。useMemoの関数版。使い所がよくわからん。
        • Flutterに該当するやつはなさそう。
      • useRef
        • 書き換え可能な値を保持するやつ。DOMへのアクセスを保持するのによく使う。inputのrefとか。
        • Flutterに該当するやつはない
      • useImperativeHandle
        • なんか色々カオスなことができそうなやつ。使うことはなさそう。
        • Flutterに該当するやつはない
      • useLayoutEffect
        • ほぼuseEffectと同じ。DOMの変更後に同期的に副作用が呼び出される点がuseEffectと異なる。
        • Flutterに該当するやつはない
      • useDebugValue
        • devtoolにラベルを表示できるやつ。
        • Flutterに該当するやつはない
      • カスタムフック
        • use始まりの関数。ロジックの共通化に便利。カスタムフック内のstateはそのフック内に閉じている。
  • Solidity
    • Solidity by Example | 0.8.3
      • Solidityの文法から特有の記法、主な攻撃コード例までコードサンプルがまとまってて良い。上から順に見ていくだけでプログラミングに親しんでる人には大体読める。
      • 気になったところ
        • 変数の保存場所が３種類ある。これはSolidity特有。
          • storage - variable is a state variable (store on blockchain)
          • memory - variable is in memory and it exists while a function is being called
          • calldata - special data location that contains function arguments, only available for external functions
        • payable
          • payableをつけた関数はetherをmsg.valueで受けとれるようになる
          • 【Solidity】Payable関数とWithdraw関数 - Qiita
        • 現在recommendedな送金プロセス
          • Sending Ether (transfer, send, call) | Solidity by Example | 0.8.3
  • ERC20
    • FTの標準規格
    • ERC-20 Token Standard | ethereum.org
  • ERC721
    • NFTの標準規格
    • ERC-721 Non-Fungible Token Standard | ethereum.org
  • 実際nft-scaffoldについて学ぶのが中心になってしまう。もうちょっとゼロから書いて理解したい。