Skip to content

mashharuki/AstarLearning

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Astar Learning

This is a developing Astar Learning Repo.

Built with ink! GitHub Visual Studio Code

動作確認済み環境情報

No. Name Version
1 yarn 1.22.19
2 Swanky 2.1.2
3 Node.js 18.12.1
4 cargo-contract 2.2.1
5 cargo nightly-2023-02-07-aarch64-apple-darwin
6 !ink 4.0.0
7 rustc 1.69.0-nightly

How to run

  • モジュールのインストール

    yarn
  • フロントエンド

    yarn frontend:start
  • スマートコントラクトのコンパイル

※ swanky のコマンドの問題で 1 回目は、生成した wasm ファイルが読み込めないというエラーが出るので 2 回実行してください。

yarn compile:nft
yarn compile:content

コンセプト・キャッチフレーズ

より多くのエンジニアに、Astar Network と WASM コントラクトを理解・学習するきっかけを提供します!

Astar Learning Dapp の全体像

デモ動画

https://youtu.be/Db8KYhhMUsI

ピッチ資料

【Canva】ピッチ資料

画面キャプチャ

こちら

What it does

AstarLearning は、気軽に WASM や Astar Network などブロックチェーン領域の技術について学べる教育系の Web3 プロダクトです。

ただ学習するだけではなく、用意したコンテンツに最後まで目を通して理解した学習者(ユーザー)には、NFT をミントするチャンスが与えられ、WASM 上で動作する NFT コントラクトの機能を使って学習歴の NFT を発行することができます。

ユーザーは、この Dapp に触れる一環で知識を得るだけでなく WASM コントラクトを利用した実装例を体感できるので、Dapp の実装イメージを膨らませることができます。

これにより一人でも多くのエンジニアに WASM Dapp の魅力を伝え、まだまだ少数である WASM コントラクト開発者を増やし、Polkadot エコシステムを盛り上げていくきっかけを増やすことを目的としています。

将来的には dapp staking への応募も視野に入れており、採択された場合にはその報酬をコンテンツ提供者に渡すようなアーキテクチャに進化させて行きたいと考えています。

The problem it solves

この Learing Astar Dapp で解決しようとしている課題は下記 3 点です。

  • まだまだ WASM コントラクト開発者が少数であること
  • 気軽に WASM や Astar Network について学べるコンテンツが少ないこと
  • WASM を利用した Dapp の実装例がまだまだ世に広く知れ渡っておらず、メリットなどが伝わりにくいこと

この課題を解決するために Astar Learning では次の機能を開発・提供することで課題解決に貢献します!

  • 学習コンテンツを作成し、スマートコントラクト上に保管
  • 良い学習コンテンツを作成してくれたユーザーには報酬を支払う
  • 報酬の財源については現状はユーザーから少額の Astar を送るという仕組みだが、将来的には dapp staking に応募し採択されたここで得られる報酬から優良コンテンツ作成者に報酬を支払う

TechStack

No. 名称 概要
1 !ink スマートコントラクト開発言語
2 Next.js フロントエンド開発フレームワーク
3 swanky スマートコントラクト開発フレームワーク
4 TypeScript フロントエンド開発言語
5 NFTStorage NFT 用のメタデータ保管ストレージ
6 Tailwind フロントエンド用の CSS フレームワーク
7 Contract-UI スマートコントラクトのデプロイ・検証のため

デプロイしたブロックチェーン

  1. Shibuya Network
  2. Shiden Network

デプロイしたコントラクト

No. コントラクト名 Contract UI ネットワーク
1 Zswfvk6DnuRtFHSRa4J4Q5hFVSh1tFsenEF2y8pQ2AQxXAY Zswfvk6DnuRtFHSRa4J4Q5hFVSh1tFsenEF2y8pQ2AQxXAY Shibuya
2 ZvVKURvqWEF3hJEZWUYpprx9o1JuXxUVFyEfjHaodFzD9F3 XVqUJZtMP5cAyJeFPE6coWtTnAno3KJsWeP2ByhH4Bt3nRH Shibuya
3 WASM NFT ZjCB8QVKytLmGRGXVCHCuUMnMiQTWU2V3696zqnQiD9kjMg Shibuya
4 Astar NFT a6WkJRaZcy6cVkvRQmRmd1TVhAc1Dfq3d7cmpGUjjn9736d Shibuya
5 Shiden NFT bezTq8fCqsG6X49e1KRmeVcatNWNaSHfNM218iHzFKPTxsk Shibuya
6 WASM NFT YT4pXMbzftUFcjwH1yMtpB9yvgkJMbYboPyRsCYSD7pgqMa Shiden
7 Astar NFT betwgtAMMVsLG3tZqDhUcQJ1TthvBkwowotAWyCGgcn9cgE Shiden
8 Shiden NFT XNvt8RqjUSd8CZy2dvHS9GhhWjDBEtrPaqxC7fDwMCSzBaY Shiden
9 Content av5MGBmkEMfKVfQerD1yjDBcQ1hkgu9GoaMN7DkeAMq4nyP Shibuya

NFT の画像コンテンツの URI 情報

No. コンテンツ名 URI
1 AstarNFT https://bafkreify7jpiz52g5q65jbhogpj4ymskfbb7mhzkenfdlect6i7gcfx3zu.ipfs.nftstorage.link/
2 ShidenNFT https://bafkreie6u3nvkt6psgjcltrajt4lurns52wol224ldaz54ke7bvzzhpiay.ipfs.nftstorage.link/
3 WasmNFT https://bafkreibda43dd7n37wjxnitiq74tlmxjguzs6mbawkki66sxuhfexhd7le.ipfs.nftstorage.link/

Astar Learning Dapp の理想系 (Version2)

今後は、WASM コントラクトの開発スキルを磨いて Dapp をバージョンさせたいと考えています。

NFT コントラクトオブジェクトの中身

query
    mintToken
    mintWithAttribute
    psp34::allowance
    psp34::approve
    psp34::balanceOf
    psp34::collectionId
    psp34::ownerOf
    psp34::totalSupply
    psp34::transfer
    psp34Burnable::burn
    psp34Enumerable::ownersTokenByIndex
    psp34Enumerable::tokenByIndex
    psp34Metadata::getAttribute

NFT のミントメソッド実装例(スマートコントラクト)

// call _mint_to function
self._mint_to(Self::env().caller(), Id::U8(self.last_token_id));
// インクリメント
self.last_token_id += 1;
Ok(())

継承したPSP34のコントラクトの機能を呼び出す場合の実装例

const { result, output } = await contract.query["psp34::balanceOf"](
  address,
  { value: 0, gasLimit: gasLimit, storageDepositLimit },
  address
);

V2 用の Figma

画面遷移イメージ図

参考文献

  1. https://openbrush.io/
  2. psp34_contract
  3. psp34_frontend
  4. test code
  5. Use the Wizard to generate generic PSP34 code
  6. !ink Working with Mapping
  7. With inline price
  8. Upgradeable Contracts
  9. Sample Upgradeable Contracts
  10. sol2ink
  11. how-to-call-openbrush-contract-from-front-end-app
  12. react-markdown について
  13. zenn-editor
  14. stackedit
  15. 【Astar】EVM 上の資産を Native の資産に変換する方法
  16. CBridge
  17. 【!ink Docs】Using custom types on storage
  18. Micromodal.js
  19. タブやモーダルなど、よく見かけるフロントエンド UI コンポーネントの紹介と実装サンプル集
  20. TailwindCSS + Alpine.js でモーダルダイアログを作ろう
  21. React でいいねボタンを作ろう
  22. Arweave
  23. Summer-HackaDOT-2023
  24. Arweave Book
  25. Arweave Faucet
  26. Arweave Graphql playground
  27. Arweave Graphql playground2
  28. Aweave Sample App
  29. Get An Arweave Wallet
  30. Arweave GraphQL Guide
  31. HackaDot Summer 2023
  32. PoL
  33. Submit Summer-HackaDOT-2023
  34. 【npm】marked
  35. 【Canva】pitch Hackadot

About

WASM対応のNFT Dapp開発用のプロダクトです。

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 3

  •  
  •  
  •