React、Solidity、CometChat を使用して素晴らしい Web3.0 DAO を構築する方法

ビルドするものについては、こちらの と を参照してください。 デモ git リポジトリ 序章 この web3.0 ビルドをリリースできることを非常に楽しみにしています。分散型アプリケーションの開発を開始するための優れた例を探していることは知っています。 あなたがここにいるのが初めてなら、私は Darlington Gospel です。あなたのような開発者が Web 2.0 から Web 3.0 に移行するのを支援する Dapp メンターです。 このチュートリアルでは、匿名チャット機能を備えた分散型自律組織 (DAO) を実装する方法を段階的に学習します。 このビルドに興奮している場合は、チュートリアルに進みましょう… 前提条件 このビルドを正常にクラッシュするには、次のツールをインストールする必要があります。 ノード ガナッシュクリ トリュフ 反応する インフリア 追い風のCSS コメットチャット SDK メタマスク 糸 依存関係のインストール が既にマシンにインストールされていることを確認してください。次に、ターミナルでコードを実行して、インストールされていることを確認します。 NodeJs のインストール NodeJs 端末で次のコードを実行して、これらの必須パッケージをグローバルにインストールします。 Yarn、Ganache-cli、および Truffle のインストール npm i -g yarn npm i -g truffle npm i -g ganache-cli の複製 以下のコマンドを使用して、以下の Web 3.0 スターター プロジェクトを複製します。これにより、全員が同じページにいて、同じパッケージを使用していることを確認できます。 Web3 スターター プロジェクト git clone https://github.com/Daltonic/dominionDAO ファイルを以下のファイルに置き換えてみましょう。 package.json { "name": "dominionDAO", "private": true, "version": "0.0.0", "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-scripts eject" }, "dependencies": { "@cometchat-pro/chat": "3.0.6", "moment": "^2.29.3", "react": "^17.0.2", "react-dom": "^17.0.2", "react-hooks-global-state": "^1.0.2", "react-icons": "^4.3.1", "react-identicons": "^1.2.5", "react-moment": "^1.1.2", "react-router-dom": "6", "react-scripts": "5.0.0", "react-toastify": "^9.0.1", "recharts": "^2.1.9", "web-vitals": "^2.1.4", "web3": "^1.7.1" }, "devDependencies": { "@openzeppelin/contracts": "^4.5.0", "@tailwindcss/forms": "0.4.0", "@truffle/hdwallet-provider": "^2.0.4", "assert": "^2.0.0", "autoprefixer": "10.4.2", "babel-polyfill": "^6.26.0", "babel-preset-env": "^1.7.0", "babel-preset-es2015": "^6.24.1", "babel-preset-stage-2": "^6.24.1", "babel-preset-stage-3": "^6.24.1", "babel-register": "^6.26.0", "buffer": "^6.0.3", "chai": "^4.3.6", "chai-as-promised": "^7.1.1", "crypto-browserify": "^3.12.0", "dotenv": "^16.0.0", "https-browserify": "^1.0.0", "mnemonics": "^1.1.3", "os-browserify": "^0.3.0", "postcss": "8.4.5", "process": "^0.11.10", "react-app-rewired": "^2.1.11", "stream-browserify": "^3.0.0", "stream-http": "^3.2.0", "tailwindcss": "3.0.18", "url": "^0.11.0" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } } ファイルを上記のコードに置き換えてから、ターミナルで を実行してください。 package.json yarn install すべてインストールしたら、Dominion DAO スマート コントラクトの作成から始めましょう。 CometChat SDK の構成 を構成するには、以下の手順に従います。最後に、これらのキーを環境変数として保存する必要があります。 CometChat SDK ダッシュボードに移動し、アカウントを作成します。 ステップ 1: CometChat 登録後のみ、 ダッシュボードにログインします。 ステップ 2: CometChat ダッシュボードから、 ステップ 3: dominionDAO という新しいアプリを追加します。 リストから作成したばかりのアプリを選択します。 STEP 4: クイック スタートから、 、 、および を ファイルにコピーします。画像とコード スニペットを参照してください。 ステップ 5: APP_ID REGION AUTH_KEY .env プレースホルダー キーを適切な値に置き換えます。 REACT_COMET_CHAT REACT_APP_COMET_CHAT_REGION=** REACT_APP_COMET_CHAT_APP_ID=************** REACT_APP_COMET_CHAT_AUTH_KEY=****************************** Infuria アプリの設定 に行き、アカウントを作成します。 STEP 1: Infuria ダッシュボードから新しいプロジェクトを作成します。 STEP 2: テスト ネットワークの WebSocket エンドポイント URL を ファイルにコピーします。 ステップ 3: Rinkeby .env 次に、Metamask の秘密のフレーズと優先アカウントの秘密鍵を追加します。これらを正しく行った場合、環境変数は次のようになります。 ENDPOINT_URL=*************************** DEPLOYER_KEY=********************** REACT_APP_COMET_CHAT_REGION=** REACT_APP_COMET_CHAT_APP_ID=************** REACT_APP_COMET_CHAT_AUTH_KEY=****************************** 秘密鍵にアクセスする方法がわからない場合は、以下のセクションを参照してください。 Metamask 秘密鍵へのアクセス ブラウザー拡張機能をクリックし、 がテスト ネットワークとして選択されていることを確認します。次に、優先アカウントで縦の点線をクリックし、アカウントの詳細を選択します。下の画像を参照してください。 ステップ 1: Metamask Rinkeby 表示されたフィールドにパスワードを入力し、確認ボタンをクリックすると、アカウントの秘密鍵にアクセスできるようになります。 ステップ 2: [秘密鍵のエクスポート] をクリックして、秘密鍵を確認します。 などの公開ページでキーを公開しないようにしてください。そのため、環境変数として追加しています。 ステップ 3: Github 秘密鍵を .env ファイルにコピーします。以下の画像とコード スニペットを参照してください。 ステップ 4: ENDPOINT_URL=*************************** SECRET_KEY=****************** DEPLOYER_KEY=********************** REACT_APP_COMET_CHAT_REGION=** REACT_APP_COMET_CHAT_APP_ID=************** REACT_APP_COMET_CHAT_AUTH_KEY=****************************** については、環境ファイルで提供されているスペースに の秘密のフレーズを貼り付ける必要があります。 SECRET_KEY Metamask Dominion DAO スマート コントラクト これがスマート コントラクトの完全なコードです。すべての関数と変数を 1 つずつ説明します。 // SPDX-License-Identifier: MIT pragma solidity ^0.8.7; import "@openzeppelin/contracts/access/AccessControl.sol"; import "@openzeppelin/contracts/security/ReentrancyGuard.sol"; contract DominionDAO is ReentrancyGuard, AccessControl { bytes32 private immutable CONTRIBUTOR_ROLE = keccak256("CONTRIBUTOR"); bytes32 private immutable STAKEHOLDER_ROLE = keccak256("STAKEHOLDER"); uint32 immutable MIN_VOTE_DURATION = 1 weeks; uint256 totalProposals; uint256 public daoBalance; mapping(uint256 => ProposalStruct) private raisedProposals; mapping(address => uint256[]) private stakeholderVotes; mapping(uint256 => VotedStruct[]) private votedOn; mapping(address => uint256) private contributors; mapping(address => uint256) private stakeholders; struct ProposalStruct { uint256 id; uint256 amount; uint256 duration; uint256 upvotes; uint256 downvotes; string title; string description; bool passed; bool paid; address payable beneficiary; address proposer; address executor; } struct VotedStruct { address voter; uint256 timestamp; bool choosen; } event Action( address indexed initiator, bytes32 role, string message, address indexed beneficiary, uint256 amount ); modifier stakeholderOnly(string memory message) { require(hasRole(STAKEHOLDER_ROLE, msg.sender), message); _; } modifier contributorOnly(string memory message) { require(hasRole(CONTRIBUTOR_ROLE, msg.sender), message); _; } function createProposal( string calldata title, string calldata description, address beneficiary, uint256 amount )external stakeholderOnly("Proposal Creation Allowed for Stakeholders only") { uint256 proposalId = totalProposals++; ProposalStruct storage proposal = raisedProposals[proposalId]; proposal.id = proposalId; proposal.proposer = payable(msg.sender); proposal.title = title; proposal.description = description; proposal.beneficiary = payable(beneficiary); proposal.amount = amount; proposal.duration = block.timestamp + MIN_VOTE_DURATION; emit Action( msg.sender, CONTRIBUTOR_ROLE, "PROPOSAL RAISED", beneficiary, amount ); } function performVote(uint256 proposalId, bool choosen) external stakeholderOnly("Unauthorized: Stakeholders only") { ProposalStruct storage proposal = raisedProposals[proposalId]; handleVoting(proposal); if (choosen) proposal.upvotes++; else proposal.downvotes++; stakeholderVotes[msg.sender].push(proposal.id); votedOn[proposal.id].push( VotedStruct( msg.sender, block.timestamp, choosen ) ); emit Action( msg.sender, STAKEHOLDER_ROLE, "PROPOSAL VOTE", proposal.beneficiary, proposal.amount ); } function handleVoting(ProposalStruct storage proposal) private { if ( proposal.passed || proposal.duration <= block.timestamp ) { proposal.passed = true; revert("Proposal duration expired"); } uint256[] memory tempVotes = stakeholderVotes[msg.sender]; for (uint256 votes = 0; votes = proposal.amount, "Insufficient fund"); require(block.timestamp > proposal.duration, "Proposal still ongoing"); if (proposal.paid) revert("Payment sent before"); if (proposal.upvotes <= proposal.downvotes) revert("Insufficient votes"); payTo(proposal.beneficiary, proposal.amount); proposal.paid = true; proposal.executor = msg.sender; daoBalance -= proposal.amount; emit Action( msg.sender, STAKEHOLDER_ROLE, "PAYMENT TRANSFERED", proposal.beneficiary, proposal.amount ); return true; } function contribute() payable external { if (!hasRole(STAKEHOLDER_ROLE, msg.sender)) { uint256 totalContribution = contributors[msg.sender] + msg.value; if (totalContribution >= 5 ether) { stakeholders[msg.sender] = totalContribution; contributors[msg.sender] += msg.value; _setupRole(STAKEHOLDER_ROLE, msg.sender); _setupRole(CONTRIBUTOR_ROLE, msg.sender); } else { contributors[msg.sender] += msg.value; _setupRole(CONTRIBUTOR_ROLE, msg.sender); } } else { contributors[msg.sender] += msg.value; stakeholders[msg.sender] += msg.value; } daoBalance += msg.value; emit Action( msg.sender, STAKEHOLDER_ROLE, "CONTRIBUTION RECEIVED", address(this), msg.value ); } function getProposals() external view returns (ProposalStruct[] memory props) { props = new ProposalStruct[](totalProposals); for (uint256 i = 0; i < totalProposals; i++) { props[i] = raisedProposals[i]; } } function getProposal(uint256 proposalId) external view returns (ProposalStruct memory) { return raisedProposals[proposalId]; } function getVotesOf(uint256 proposalId) external view returns (VotedStruct[] memory) { return votedOn[proposalId]; } function getStakeholderVotes() external view stakeholderOnly("Unauthorized: not a stakeholder") returns (uint256[] memory) { return stakeholderVotes[msg.sender]; } function getStakeholderBalance() external view stakeholderOnly("Unauthorized: not a stakeholder") returns (uint256) { return stakeholders[msg.sender]; } function isStakeholder() external view returns (bool) { return stakeholders[msg.sender] > 0; } function getContributorBalance() external view contributorOnly("Denied: User is not a contributor") returns (uint256) { return contributors[msg.sender]; } function isContributor() external view returns (bool) { return contributors[msg.sender] > 0; } function getBalance() external view returns (uint256) { return contributors[msg.sender]; } function payTo( address to, uint256 amount ) internal returns (bool) { (bool success,) = payable(to).call{value: amount}(""); require(success, "Payment failed"); return true; } } 複製したプロジェクトで、 ディレクトリに移動し、 という名前のファイルを作成して、上記のコードをその中に貼り付けます。 src >> contract DominionDAO.sol 説明： // SPDX-License-Identifier: MIT pragma solidity ^0.8.7; Solidity では、コードをコンパイルするためにライセンス識別子が必要です。そうでない場合は、ライセンス識別子を指定するように求める警告が表示されます。また、Solidity では、スマート コントラクトのコンパイラのバージョンを指定する必要があります。それが という言葉です。 pragma import "@openzeppelin/contracts/access/AccessControl.sol"; import "@openzeppelin/contracts/security/ReentrancyGuard.sol"; 上記のコード ブロックでは、2 つ スマート コントラクトを使用してロールを指定し、スマート コントラクトを再入攻撃から保護しています。 openzeppelin's bytes32 private immutable CONTRIBUTOR_ROLE = keccak256("CONTRIBUTOR"); bytes32 private immutable STAKEHOLDER_ROLE = keccak256("STAKEHOLDER"); uint32 immutable MIN_VOTE_DURATION = 1 weeks; uint256 totalProposals; uint256 public daoBalance; 利害関係者と貢献者の役割についていくつかの状態変数を設定し、最小投票期間を 1 週間に指定しました。また、総提案カウンターと変数を初期化して、利用可能な残高の記録を保持しました。 mapping(uint256 => ProposalStruct) private raisedProposals; mapping(address => uint256[]) private stakeholderVotes; mapping(uint256 => VotedStruct[]) private votedOn; mapping(address => uint256) private contributors; mapping(address => uint256) private stakeholders; は、スマート コントラクトに送信されたすべての提案を追跡します。 投票は、その名前が示すように、利害関係者によって行われた投票を追跡することを意味します。 は、提案に関連付けられたすべての投票を追跡します。寄稿者は私たちのプラットフォームに寄付した人を追跡しますが、利害関係者は最大 まで寄付した人を追跡します。 raisedProposals stakeholderVotes votedOn 1 ether struct ProposalStruct { uint256 id; uint256 amount; uint256 duration; uint256 upvotes; uint256 downvotes; string title; string description; bool passed; bool paid; address payable beneficiary; address proposer; address executor; } struct VotedStruct { address voter; uint256 timestamp; bool choosen; } は各提案の内容を記述し、 は各投票の内容を記述します。 proposalStruct votedStruct event Action( address indexed initiator, bytes32 role, string message, address indexed beneficiary, uint256 amount ); これは Action と呼ばれる動的イベントです。これにより、トランザクションごとにログアウトされた情報を充実させることができます。 modifier stakeholderOnly(string memory message) { require(hasRole(STAKEHOLDER_ROLE, msg.sender), message); _; } modifier contributorOnly(string memory message) { require(hasRole(CONTRIBUTOR_ROLE, msg.sender), message); _; } 上記の修飾子は、ロールごとにユーザーを識別し、一部の許可されていないリソースへのアクセスを防ぐのに役立ちます。 function createProposal( string calldata title, string calldata description, address beneficiary, uint256 amount )external stakeholderOnly("Proposal Creation Allowed for Stakeholders only") { uint256 proposalId = totalProposals++; ProposalStruct storage proposal = raisedProposals[proposalId]; proposal.id = proposalId; proposal.proposer = payable(msg.sender); proposal.title = title; proposal.description = description; proposal.beneficiary = payable(beneficiary); proposal.amount = amount; proposal.duration = block.timestamp + MIN_VOTE_DURATION; emit Action( msg.sender, CONTRIBUTOR_ROLE, "PROPOSAL RAISED", beneficiary, amount ); } 上記の関数は、提案のタイトル、説明、金額、および受益者のウォレット アドレスを受け取り、提案を作成します。この機能は、利害関係者のみが提案を作成することを許可します。利害関係者は、少なくとも の貢献をしたユーザーです。 1 ether function performVote(uint256 proposalId, bool choosen) external stakeholderOnly("Unauthorized: Stakeholders only") { ProposalStruct storage proposal = raisedProposals[proposalId]; handleVoting(proposal); if (choosen) proposal.upvotes++; else proposal.downvotes++; stakeholderVotes[msg.sender].push(proposal.id); votedOn[proposal.id].push( VotedStruct( msg.sender, block.timestamp, choosen ) ); emit Action( msg.sender, STAKEHOLDER_ROLE, "PROPOSAL VOTE", proposal.beneficiary, proposal.amount ); } この関数は、提案 ID とブール値で表される優先選択の 2 つの引数を受け入れます。 True は投票を受け入れたことを意味し、False は拒否を表します。 function handleVoting(ProposalStruct storage proposal) private { if ( proposal.passed || proposal.duration <= block.timestamp ) { proposal.passed = true; revert("Proposal duration expired"); } uint256[] memory tempVotes = stakeholderVotes[msg.sender]; for (uint256 votes = 0; votes = proposal.amount, "Insufficient fund"); require(block.timestamp > proposal.duration, "Proposal still ongoing"); if (proposal.paid) revert("Payment sent before"); if (proposal.upvotes <= proposal.downvotes) revert("Insufficient votes"); payTo(proposal.beneficiary, proposal.amount); proposal.paid = true; proposal.executor = msg.sender; daoBalance -= proposal.amount; emit Action( msg.sender, STAKEHOLDER_ROLE, "PAYMENT TRANSFERED", proposal.beneficiary, proposal.amount ); return true; } この機能は、特定の基準に基づいて、提案に添付された受益者に支払う責任があります。 1つは、受益者がまだ支払われていないこと。 2 つ目は、提案期間が終了している必要があります。 第三に、利用可能な残高は受益者に支払うことができなければなりません。 四、得票数が同数であってはならない。 function contribute() payable external { if (!hasRole(STAKEHOLDER_ROLE, msg.sender)) { uint256 totalContribution = contributors[msg.sender] + msg.value; if (totalContribution >= 5 ether) { stakeholders[msg.sender] = totalContribution; contributors[msg.sender] += msg.value; _setupRole(STAKEHOLDER_ROLE, msg.sender); _setupRole(CONTRIBUTOR_ROLE, msg.sender); } else { contributors[msg.sender] += msg.value; _setupRole(CONTRIBUTOR_ROLE, msg.sender); } } else { contributors[msg.sender] += msg.value; stakeholders[msg.sender] += msg.value; } daoBalance += msg.value; emit Action( msg.sender, STAKEHOLDER_ROLE, "CONTRIBUTION RECEIVED", address(this), msg.value ); } この機能は、寄付者および利害関係者になることに関心のある人々からの寄付を収集する責任があります。 function getProposals() external view returns (ProposalStruct[] memory props) { props = new ProposalStruct[](totalProposals); for (uint256 i = 0; i < totalProposals; i++) { props[i] = raisedProposals[i]; } } この関数は、このスマート コントラクトに記録された提案の配列を取得します。 function getProposal(uint256 proposalId) external view returns (ProposalStruct memory) { return raisedProposals[proposalId]; } この関数は、ID によって特定の提案を取得します。 function getVotesOf(uint256 proposalId) external view returns (VotedStruct[] memory) { return votedOn[proposalId]; } これは、特定の提案に関連付けられた投票のリストを返します。 function getStakeholderVotes() external view stakeholderOnly("Unauthorized: not a stakeholder") returns (uint256[] memory) { return stakeholderVotes[msg.sender]; } これにより、スマート コントラクトの利害関係者のリストが返され、利害関係者のみがこの関数を呼び出すことができます。 function getStakeholderBalance() external view stakeholderOnly("Unauthorized: not a stakeholder") returns (uint256) { return stakeholders[msg.sender]; } これは、利害関係者によって寄付された金額を返します。 function isStakeholder() external view returns (bool) { return stakeholders[msg.sender] > 0; } ユーザーが利害関係者である場合、True または False を返します。 function getContributorBalance() external view contributorOnly("Denied: User is not a contributor") returns (uint256) { return contributors[msg.sender]; } これは寄稿者の残高を返し、寄稿者のみがアクセスできます。 function isContributor() external view returns (bool) { return contributors[msg.sender] > 0; } これは、ユーザーが貢献者であるかどうかをチェックし、True または False で表されます。 function getBalance() external view returns (uint256) { return contributors[msg.sender]; } 役割に関係なく、呼び出し元ユーザーの残高を返します。 function payTo( address to, uint256 amount ) internal returns (bool) { (bool success,) = payable(to).call{value: amount}(""); require(success, "Payment failed"); return true; } この関数は、指定された金額と口座の両方で支払いを実行します。 展開スクリプトの構成 スマート コントラクトで行うもう 1 つの作業は、デプロイ スクリプトを構成することです。 プロジェクトで フォルダー >> 移動し、以下のコード スニペットで更新します。 migrations 2_deploy_contracts.js に const DominionDAO = artifacts.require('DominionDAO') module.exports = async function (deployer) { await deployer.deploy(DominionDAO) } アプリケーションのスマート コントラクトが完成しました。Dapp インターフェイスの構築を開始します。 フロントエンドの開発 フロントエンドは、多くのコンポーネントとパーツで構成されています。すべてのコンポーネント、ビュー、およびその他の周辺機器を作成します。 ヘッダー コンポーネント このコンポーネントは、現在のユーザーに関する情報を取得し、ライト モードとダーク モードのテーマ切り替えボタンを備えています。私がどのようにそれを行ったのか疑問に思われた方は、Tailwind CSS を使用したことを確認してください。以下のコードを参照してください。 import { useState, useEffect } from 'react' import { FaUserSecret } from 'react-icons/fa' import { MdLightMode } from 'react-icons/md' import { FaMoon } from 'react-icons/fa' import { Link } from 'react-router-dom' import { connectWallet } from '../Dominion' import { useGlobalState, truncate } from '../store' const Header = () => { const [theme, setTheme] = useState(localStorage.theme) const themeColor = theme === 'dark' ? 'light' : 'dark' const darken = theme === 'dark' ? true : false const [connectedAccount] = useGlobalState('connectedAccount') useEffect(() => { const root = window.document.documentElement root.classList.remove(themeColor) root.classList.add(theme) localStorage.setItem('theme', theme) }, [themeColor, theme]) const toggleLight = () => { const root = window.document.documentElement root.classList.remove(themeColor) root.classList.add(theme) localStorage.setItem('theme', theme) setTheme(themeColor) } return ( Dominion {darken ? ( ) : ( )} {connectedAccount ? ( {truncate(connectedAccount, 4, 4, 11)} ) : ( Connect Wallet )} ) } export default Header バナー コンポーネント このコンポーネントには、合計残高や未解決の提案の数など、DAO の現在の状態に関する情報が含まれています。 このコンポーネントには、貢献機能を使用して新しい提案を生成する機能も含まれています。以下のコードを見てください。 import { useState } from 'react' import { setGlobalState, useGlobalState } from '../store' import { performContribute } from '../Dominion' import { toast } from 'react-toastify' const Banner = () => { const [isStakeholder] = useGlobalState('isStakeholder') const [proposals] = useGlobalState('proposals') const [connectedAccount] = useGlobalState('connectedAccount') const [currentUser] = useGlobalState('currentUser') const [balance] = useGlobalState('balance') const [mybalance] = useGlobalState('mybalance') const [amount, setAmount] = useState('') const onPropose = () => { if (!isStakeholder) return setGlobalState('createModal', 'scale-100') } const onContribute = () => { if (!!!amount || amount == '') return toast.info('Contribution in progress...') performContribute(amount).then((bal) => { if (!!!bal.message) { setGlobalState('balance', Number(balance) + Number(bal)) setGlobalState('mybalance', Number(mybalance) + Number(bal)) setAmount('') toast.success('Contribution received') } }) } const opened = () => proposals.filter( (proposal) => new Date().getTime() {opened()} Proposal{opened() == 1 ? '' : 's'} Currenly Opened Current DAO Balance: {balance} Eth Your contributions:{' '} {mybalance} Eth {isStakeholder ? ', and you are now a stakeholder 😊' : null}

{isStakeholder ? 'You can now raise proposals on this platform 😆' : 'Hey, when you contribute upto 1 ether you become a stakeholder 😎'}

setAmount(e.target.value)} value={amount} required /> <button type="button" className={`inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase shadow-md rounded-full hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out dark:text-blue-500 dark:border dark:border-blue-500 dark:bg-transparent`} data-mdb-ripple="true" data-mdb-ripple-color="light" onClick={onContribute} > Contribute {isStakeholder ? ( <button type="button" className={`inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase shadow-md rounded-full hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out dark:text-blue-500 dark:border dark:border-blue-500 dark:bg-transparent`} data-mdb-ripple="true" data-mdb-ripple-color="light" onClick={onPropose} > Propose ) : null} {currentUser && currentUser.uid == connectedAccount.toLowerCase() ? null : ( <button type="button" className={`inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase shadow-md rounded-full hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out dark:border dark:border-blue-500`} data-mdb-ripple="true" data-mdb-ripple-color="light" onClick={() => setGlobalState('loginModal', 'scale-100')} > Login Chat )} ) } export default Banner 提案コンポーネント このコンポーネントには、スマート コントラクトの提案のリストが含まれています。また、クローズ済みの提案とオープンの提案の間でフィルター処理することもできます。提案の有効期限が切れると、利害関係者に提案に関連付けられた金額を支払うオプションを与える支払いボタンが利用可能になります。以下のコードを参照してください。 import Identicon from 'react-identicons' import { useState } from 'react' import { Link } from 'react-router-dom' import { truncate, useGlobalState, daysRemaining } from '../store' import { payoutBeneficiary } from '../Dominion' import { toast } from 'react-toastify' const Proposals = () => { const [data] = useGlobalState('proposals') const [proposals, setProposals] = useState(data) const deactive = `bg-transparent text-blue-600 font-medium text-xs leading-tight uppercase hover:bg-blue-700 focus:bg-blue-700 focus:outline-none focus:ring-0 active:bg-blue-600 transition duration-150 ease-in-out overflow-hidden border border-blue-600 hover:text-white focus:text-white` const active = `bg-blue-600 text-white font-medium text-xs leading-tight uppercase hover:bg-blue-700 focus:bg-blue-700 focus:outline-none focus:ring-0 active:bg-blue-800 transition duration-150 ease-in-out overflow-hidden border border-blue-600` const getAll = () => setProposals(data) const getOpened = () => setProposals( data.filter( (proposal) => new Date().getTime() setProposals( data.filter( (proposal) => new Date().getTime() > Number(proposal.duration + '000') ) ) const handlePayout = (id) => { payoutBeneficiary(id).then((res) => { if (!!!res.code) { toast.success('Beneficiary successfully Paid Out!') window.location.reload() } }) } return ( All Open Closed Created By Title Expires Action {proposals.map((proposal) => ( {truncate(proposal.proposer, 4, 4, 11)} {proposal.title.substring(0, 80) + '...'} {new Date().getTime() > Number(proposal.duration + '000') ? 'Expired' : daysRemaining(proposal.duration)} View {new Date().getTime() > Number(proposal.duration + '000') ? ( proposal.upvotes > proposal.downvotes ? ( !proposal.paid ? ( handlePayout(proposal.id)} > Payout ) : ( Paid ) ) : ( Rejected ) ) : null} ))} ) } export default Proposals 提案の詳細コンポーネント このコンポーネントは、コストを含む現在の提案に関する情報を表示します。このコンポーネントを使用すると、利害関係者は提案を承認または拒否できます。 提案者はグループを形成でき、他のプラットフォーム ユーザーは web3.0 スタイルの匿名チャットに参加できます。 このコンポーネントには、合格者と不合格者の比率を確認できる棒グラフも含まれています。以下のコードを見てください。 import moment from 'moment' import { useEffect, useState } from 'react' import { useParams, useNavigate } from 'react-router-dom' import { toast } from 'react-toastify' import { getGroup, createNewGroup, joinGroup } from '../CometChat' import { BarChart, Bar, CartesianGrid, XAxis, YAxis, Legend, Tooltip, } from 'recharts' import { getProposal, voteOnProposal } from '../Dominion' import { useGlobalState } from '../store' const ProposalDetails = () => { const { id } = useParams() const navigator = useNavigate() const [proposal, setProposal] = useState(null) const [group, setGroup] = useState(null) const [data, setData] = useState([]) const [isStakeholder] = useGlobalState('isStakeholder') const [connectedAccount] = useGlobalState('connectedAccount') const [currentUser] = useGlobalState('currentUser') useEffect(() => { retrieveProposal() getGroup(`pid_${id}`).then((group) => { if (!!!group.code) setGroup(group) console.log(group) }) }, [id]) const retrieveProposal = () => { getProposal(id).then((res) => { setProposal(res) setData([ { name: 'Voters', Acceptees: res?.upvotes, Rejectees: res?.downvotes, }, ]) }) } const onVote = (choice) => { if (new Date().getTime() > Number(proposal.duration + '000')) { toast.warning('Proposal expired!') return } voteOnProposal(id, choice).then((res) => { if (!!!res.code) { toast.success('Voted successfully!') window.location.reload() } }) } const daysRemaining = (days) => { const todaysdate = moment() days = Number((days + '000').slice(0)) days = moment(days).format('YYYY-MM-DD') days = moment(days) days = days.diff(todaysdate, 'days') return days == 1 ? '1 day' : days + ' days' } const onEnterChat = () => { if (group.hasJoined) { navigator(`/chat/${`pid_${id}`}`) } else { joinGroup(`pid_${id}`).then((res) => { if (!!res) { navigator(`/chat/${`pid_${id}`}`) console.log('Success joining: ', res) } else { console.log('Error Joining Group: ', res) } }) } } const onCreateGroup = () => { createNewGroup(`pid_${id}`, proposal.title).then((group) => { if (!!!group.code) { toast.success('Group created successfully!') setGroup(group) } else { console.log('Error Creating Group: ', group) } }) } return ( {proposal?.title} This proposal is to payout {proposal?.amount} Eth and currently have{' '} {proposal?.upvotes + proposal?.downvotes} votes and will expire in {daysRemaining(proposal?.duration)}

{proposal?.description}

{isStakeholder ? ( <> <button type="button" className="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded-full shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out dark:text-gray-300 dark:border dark:border-gray-500 dark:bg-transparent" data-mdb-ripple="true" data-mdb-ripple-color="light" onClick={() => onVote(true)} > Accept <button type="button" className="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded-full shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out dark:border dark:border-gray-500 dark:bg-transparent" data-mdb-ripple="true" data-mdb-ripple-color="light" onClick={() => onVote(false)} > Reject {currentUser && currentUser.uid.toLowerCase() == proposal?.proposer.toLowerCase() && !group ? ( <button type="button" className="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded-full shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out dark:border dark:border-blue-500" data-mdb-ripple="true" data-mdb-ripple-color="light" onClick={onCreateGroup} > Create Group ) : null} ) : null} {currentUser && currentUser.uid.toLowerCase() == connectedAccount.toLowerCase() && !!!group?.code && group != null ? ( <button type="button" className="inline-block px-6 py-2.5 bg-blue-600 text-white font-medium text-xs leading-tight uppercase rounded-full shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out dark:border dark:border-blue-500" data-mdb-ripple="true" data-mdb-ripple-color="light" onClick={onEnterChat} > Chat ) : null} {proposal?.proposer.toLowerCase() != connectedAccount.toLowerCase() && !!!group ? ( <button type="button" className="inline-block px-6 py-2.5 bg-blue-600 dark:bg-transparent text-white font-medium text-xs leading-tight uppercase rounded-full shadow-md hover:border-blue-700 hover:shadow-lg focus:border-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:border-blue-800 active:shadow-lg transition duration-150 ease-in-out dark:text-blue-500 dark:border dark:border-blue-500 disabled:bg-blue-300" data-mdb-ripple="true" data-mdb-ripple-color="light" disabled > Group N/A ) : null} ) } export default ProposalDetails 有権者コンポーネント このコンポーネントは、提案に投票した利害関係者を単にリストします。このコンポーネントは、拒否者と承認者の間でフィルタリングする機会もユーザーに提供します。以下のコードを参照してください。 import Identicon from 'react-identicons' import moment from 'moment' import { useState, useEffect } from 'react' import { useParams } from 'react-router-dom' import { truncate } from '../store' import { listVoters } from '../Dominion' const Voters = () => { const [voters, setVoters] = useState([]) const [data, setData] = useState([]) const { id } = useParams() const timeAgo = (timestamp) => moment(Number(timestamp + '000')).fromNow() const deactive = `bg-transparent text-blue-600 font-medium text-xs leading-tight uppercase hover:bg-blue-700 focus:bg-blue-700 focus:outline-none focus:ring-0 active:bg-blue-600 transition duration-150 ease-in-out overflow-hidden border border-blue-600 hover:text-white focus:text-white` const active = `bg-blue-600 text-white font-medium text-xs leading-tight uppercase hover:bg-blue-700 focus:bg-blue-700 focus:outline-none focus:ring-0 active:bg-blue-800 transition duration-150 ease-in-out overflow-hidden border border-blue-600` useEffect(() => { listVoters(id).then((res) => { setVoters(res) setData(res) }) }, [id]) const getAll = () => setVoters(data) const getAccepted = () => setVoters(data.filter((vote) => vote.choosen)) const getRejected = () => setVoters(data.filter((vote) => !vote.choosen)) return ( All Acceptees Rejectees Voter Voted Vote {voters.map((voter, i) => ( {truncate(voter.voter, 4, 4, 11)} {timeAgo(voter.timestamp)} {voter.choosen ? ( Accepted ) : ( Rejected )} ))} {voters.length >= 10 ? ( Load More ) : null} ) } export default Voters メッセージ コンポーネント このコンポーネントと組み合わせた CometChat SDK の機能により、ユーザーは匿名で 1 対多のチャットに参加できます。寄稿者と利害関係者は、ここで意思決定プロセスの中で提案についてさらに話し合うことができます。すべてのユーザーは匿名性を維持し、ID で表されます。 import Identicon from 'react-identicons' import { useState, useEffect } from 'react' import { useNavigate } from 'react-router-dom' import { truncate, useGlobalState } from '../store' import { getMessages, sendMessage, CometChat } from '../CometChat' const Messages = ({ gid }) => { const navigator = useNavigate() const [connectedAccount] = useGlobalState('connectedAccount') const [message, setMessage] = useState('') const [messages, setMessages] = useState([]) useEffect(() => { getMessages(gid).then((msgs) => { if (!!!msgs.code) setMessages(msgs.filter((msg) => msg.category == 'message')) }) listenForMessage(gid) }, [gid]) const listenForMessage = (listenerID) => { CometChat.addMessageListener( listenerID, new CometChat.MessageListener({ onTextMessageReceived: (message) => { setMessages((prevState) => [...prevState, message]) scrollToEnd() }, }) ) } const handleMessage = (e) => { e.preventDefault() sendMessage(gid, message).then((msg) => { if (!!!msg.code) { setMessages((prevState) => [...prevState, msg]) setMessage('') scrollToEnd() } }) } const scrollToEnd = () => { const elmnt = document.getElementById('messages-container') elmnt.scrollTop = elmnt.scrollHeight } const dateToTime = (date) => { let hours = date.getHours() let minutes = date.getMinutes() let ampm = hours >= 12 ? 'pm' : 'am' hours = hours % 12 hours = hours ? hours : 12 minutes = minutes navigator(`/proposal/${gid.substr(4)}`)} > Exit Chat {messages.map((message, i) => message.sender.uid.toLowerCase() != connectedAccount.toLowerCase() ? ( @{truncate(message.sender.uid, 4, 4, 11)} {dateToTime(new Date(message.sentAt * 1000))} {message.text} ) : ( @you {dateToTime(new Date(message.sentAt * 1000))} {message.text} ) )} setMessage(e.target.value)} required /> send ) } export default Messages 提案コンポーネントの作成 このコンポーネントを使用すると、上の画像に表示されているフィールドに関する情報を提供するだけで、提案を行うことができます。以下のコードを参照してください。 import { useState } from 'react' import { FaTimes } from 'react-icons/fa' import { raiseProposal } from '../Dominion' import { setGlobalState, useGlobalState } from '../store' import { toast } from 'react-toastify' const CreateProposal = () => { const [createModal] = useGlobalState('createModal') const [title, setTitle] = useState('') const [amount, setAmount] = useState('') const [beneficiary, setBeneficiary] = useState('') const [description, setDescription] = useState('') const handleSubmit = (e) => { e.preventDefault() if (!title || !description || !beneficiary || !amount) return const proposal = { title, description, beneficiary, amount } raiseProposal(proposal).then((proposed) => { if (proposed) { toast.success('Proposal created, reloading in progress...') closeModal() window.location.reload() } }) } const closeModal = () => { setGlobalState('createModal', 'scale-0') resetForm() } const resetForm = () => { setTitle('') setAmount('') setBeneficiary('') setDescription('') } return ( Raise Proposal

setTitle(e.target.value)} value={title} required /> setAmount(e.target.value)} value={amount} required /> setBeneficiary(e.target.value)} value={beneficiary} required /> setDescription(e.target.value)} value={description} required > Submit Proposal ) } export default CreateProposal 認証コンポーネント このコンポーネントは、チャット機能に参加するのに役立ちます。すでにサインアップしている場合は、アカウントを作成するか、ログインする必要があります。ログインするとグループチャットに参加でき、web3.0スタイルの提案で他の参加者と匿名で話すことができます。以下のコードを参照してください。 import { FaTimes } from 'react-icons/fa' import { loginWithCometChat, signInWithCometChat } from '../CometChat' import { setGlobalState, useGlobalState } from '../store' import { toast } from 'react-toastify' const ChatLogin = () => { const [loginModal] = useGlobalState('loginModal') const [connectedAccount] = useGlobalState('connectedAccount') const handleSignUp = () => { signInWithCometChat(connectedAccount, connectedAccount).then((user) => { if (!!!user.code) { toast.success('Account created, now click the login button.') } else { toast.error(user.message) } }) } const handleLogin = () => { loginWithCometChat(connectedAccount).then((user) => { if (!!!user.code) { setGlobalState('currentUser', user) toast.success('Logged in successful!') closeModal() } else { toast.error(user.message) } }) } const closeModal = () => { setGlobalState('loginModal', 'scale-0') } return ( Authenticate

Once you login, you will be enabled to chat with other stakeholders to make a well-informed voting. Login Create Account ) } export default ChatLogin ビューが適切に表現されていることを確認しましょう… ホーム ビュー このビューには、優れた DAO ユーザー エクスペリエンスを提供するための 、 、および コンポーネントが含まれています。この外観を実現するために、Tailwind CSS の機能も使用しました。以下のコードを見てください。 header banner proposals import Banner from '../components/Banner' import ChatLogin from '../components/ChatLogin' import CreateProposal from '../components/CreateProposal' import Header from '../components/Header' import Proposals from '../components/Proposals' const Home = () => { return ( <> ) } export default Home 提案ビュー このビューは、ヘッダー、提案の詳細、有権者コンポーネントを組み合わせて、単一のコンポーネントのスムーズなプレゼンテーションをレンダリングします。以下のコードを参照してください。 import Header from '../components/Header' import ProposalDetails from '../components/ProposalDetails' import Voters from '../components/Voters' const Proposal = () => { return ( <> ) } export default Proposal チャットビュー 最後に、チャット ビューには、高品質のチャット インターフェイスをレンダリングするためのヘッダーとメッセージ コンポーネントが組み込まれています。以下のコードを参照してください。 import { useParams, useNavigate } from 'react-router-dom' import { useEffect, useState } from 'react' import { getGroup } from '../CometChat' import { toast } from 'react-toastify' import Header from '../components/Header' import Messages from '../components/Messages' const Chat = () => { const { gid } = useParams() const navigator = useNavigate() const [group, setGroup] = useState(null) useEffect(() => { getGroup(gid).then((group) => { if (!!!group.code) { setGroup(group) } else { toast.warning('Please join the group first!') navigator(`/proposal/${gid.substr(4)}`) } }) }, [gid]) return ( <> ) } export default Chat ファイルも忘れずに更新してください。 App.jsx App コンポーネントを以下のコードに置き換えます。 App コンポーネント import { useEffect, useState } from 'react' import { Routes, Route } from 'react-router-dom' import { loadWeb3 } from './Dominion' import { ToastContainer } from 'react-toastify' import { isUserLoggedIn } from './CometChat' import Home from './views/Home' import Proposal from './views/Proposal' import Chat from './views/Chat' import 'react-toastify/dist/ReactToastify.min.css' const App = () => { const [loaded, setLoaded] = useState(false) useEffect(() => { loadWeb3().then((res) => { if (res) setLoaded(true) }) isUserLoggedIn() }, []) return ( {loaded ? ( } /> } /> } /> ) : null} ) } export default App で、次のコードをそれぞれのファイルに貼り付けます。 src の >> ディレクトリ Index.jsx ファイル import React from 'react' import ReactDOM from 'react-dom' import { BrowserRouter } from 'react-router-dom' import './index.css' import App from './App' import { initCometChat } from './CometChat' initCometChat().then(() => { ReactDOM.render( , document.getElementById('root') ) }) Index.css ファイル @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap'); * html { padding: 0; margin: 0; box-sizing: border-box; } body { margin: 0; font-family: 'Open Sans', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @tailwind base; @tailwind components; @tailwind utilities; CometChat.jsx import Web3 from 'web3' import { setGlobalState, getGlobalState } from './store' import DominionDAO from './abis/DominionDAO.json' const { ethereum } = window const connectWallet = async () => { try { if (!ethereum) return alert('Please install Metamask') const accounts = await ethereum.request({ method: 'eth_requestAccounts' }) setGlobalState('connectedAccount', accounts[0]) } catch (error) { console.log(JSON.stringify(error)) } } const raiseProposal = async ({ title, description, beneficiary, amount }) => { try { amount = window.web3.utils.toWei(amount.toString(), 'ether') const contract = getGlobalState('contract') const account = getGlobalState('connectedAccount') let proposal = await contract.methods .createProposal(title, description, beneficiary, amount) .send({ from: account }) return proposal } catch (error) { console.log(error.message) return error } } const performContribute = async (amount) => { try { amount = window.web3.utils.toWei(amount.toString(), 'ether') const contract = getGlobalState('contract') const account = getGlobalState('connectedAccount') let balance = await contract.methods .contribute() .send({ from: account, value: amount }) balance = window.web3.utils.fromWei( balance.events.Action.returnValues.amount ) return balance } catch (error) { console.log(error.message) return error } } const retrieveProposal = async (id) => { const web3 = window.web3 try { const contract = getGlobalState('contract') const proposal = await contract.methods.getProposal(id).call().wait() return { id: proposal.id, amount: web3.utils.fromWei(proposal.amount), title: proposal.title, description: proposal.description, paid: proposal.paid, passed: proposal.passed, proposer: proposal.proposer, upvotes: Number(proposal.upvotes), downvotes: Number(proposal.downvotes), beneficiary: proposal.beneficiary, executor: proposal.executor, duration: proposal.duration, } } catch (error) { console.log(error) } } const reconstructProposal = (proposal) => { return { id: proposal.id, amount: window.web3.utils.fromWei(proposal.amount), title: proposal.title, description: proposal.description, paid: proposal.paid, passed: proposal.passed, proposer: proposal.proposer, upvotes: Number(proposal.upvotes), downvotes: Number(proposal.downvotes), beneficiary: proposal.beneficiary, executor: proposal.executor, duration: proposal.duration, } } const getProposal = async (id) => { try { const proposals = getGlobalState('proposals') return proposals.find((proposal) => proposal.id == id) } catch (error) { console.log(error) } } const voteOnProposal = async (proposalId, supported) => { try { const contract = getGlobalState('contract') const account = getGlobalState('connectedAccount') const vote = await contract.methods .performVote(proposalId, supported) .send({ from: account }) return vote } catch (error) { console.log(error) return error } } const listVoters = async (id) => { try { const contract = getGlobalState('contract') const votes = await contract.methods.getVotesOf(id).call() return votes } catch (error) { console.log(error) } } const payoutBeneficiary = async (id) => { try { const contract = getGlobalState('contract') const account = getGlobalState('connectedAccount') const balance = await contract.methods .payBeneficiary(id) .send({ from: account }) return balance } catch (error) { return error } } const loadWeb3 = async () => { try { if (!ethereum) return alert('Please install Metamask') window.web3 = new Web3(ethereum) await ethereum.request({ method: 'eth_requestAccounts' }) window.web3 = new Web3(window.web3.currentProvider) const web3 = window.web3 const accounts = await web3.eth.getAccounts() setGlobalState('connectedAccount', accounts[0]) const networkId = await web3.eth.net.getId() const networkData = DominionDAO.networks[networkId] if (networkData) { const contract = new web3.eth.Contract( DominionDAO.abi, networkData.address ) const isStakeholder = await contract.methods .isStakeholder() .call({ from: accounts[0] }) const proposals = await contract.methods.getProposals().call() const balance = await contract.methods.daoBalance().call() const mybalance = await contract.methods .getBalance() .call({ from: accounts[0] }) setGlobalState('contract', contract) setGlobalState('balance', web3.utils.fromWei(balance)) setGlobalState('mybalance', web3.utils.fromWei(mybalance)) setGlobalState('isStakeholder', isStakeholder) setGlobalState('proposals', structuredProposals(proposals)) } else { window.alert('DominionDAO contract not deployed to detected network.') } return true } catch (error) { alert('Please connect your metamask wallet!') console.log(error) return false } } const structuredProposals = (proposals) => { const web3 = window.web3 return proposals .map((proposal) => ({ id: proposal.id, amount: web3.utils.fromWei(proposal.amount), title: proposal.title, description: proposal.description, paid: proposal.paid, passed: proposal.passed, proposer: proposal.proposer, upvotes: Number(proposal.upvotes), downvotes: Number(proposal.downvotes), beneficiary: proposal.beneficiary, executor: proposal.executor, duration: proposal.duration, })) .reverse() } export { loadWeb3, connectWallet, performContribute, raiseProposal, retrieveProposal, voteOnProposal, getProposal, listVoters, payoutBeneficiary, } 開発環境の起動 以下のコマンドを使用して、 でいくつかのテスト アカウントを作成します。 ステップ 1: ganache-cli ganache-cli -a これにより、各アカウントに 100 個の偽のイーサがロードされたテスト アカウントがいくつか作成されます。もちろん、これらはテストのみを目的としています。以下の画像を参照してください。 下の図に示すように、Metamask を使用してローカル テスト ネットワークを追加します。 ステップ 2: アカウント アイコンをクリックし、[アカウントのインポート] を選択します。 ステップ 3: 約 5 つの秘密鍵をコピーし、ローカル テスト ネットワークに次々と追加します。下の画像を参照してください。 100 ETH がプリロードされたローカル テスト ネットワークに追加された新しいアカウントを確認します。最大のテストを実行できるように、約 5 つのアカウントを追加してください。下の画像を参照してください。 スマート コントラクトの展開 新しいターミナルを開き、以下のコマンドを実行します。 truffle migrate # or truffle migrate --network rinkeby 上記のコマンドは、スマート コントラクトをローカルまたは Infuria rinkeby テスト ネットワークにデプロイします。 次に、別のターミナルを開き、 で反応アプリをスピンアップします。 yarn start 結論 万歳、分散型自律組織を開発するための素晴らしいチュートリアルを完了しました。 このチュートリアルを楽しんで、私をあなたのプライベートメンターにしたい場合は . 、クラスを予約してください 次回まで、お元気で。 著者について Gospel Darlington は、ソフトウェア開発業界で 年以上の経験を持つフルスタックのブロックチェーン開発者です。 6+ ソフトウェア開発、執筆、教育を組み合わせることで、EVM 互換のブロックチェーン ネットワーク上で分散型アプリケーションを構築する方法を示しています。 彼のスタックには、 、 、 、 、 、 、 、 などが含まれます。 JavaScript React Vue Angular Node React Native NextJs Solidity 彼の詳細については、 、 、 、または彼の で彼のページにアクセスしてフォローしてください。 Twitter Github LinkedIn Web サイト