example-forum-dapp

所属分类:以太坊
开发工具:TypeScript
文件大小:6114KB
下载次数:0
上传日期:2022-01-11 22:12:56
上 传 者sh-1993
说明:  使用Web3.存储和以太坊构建的去中心化论坛应用程序的示例
(An example of a decentralized forum app built with Web3.Storage and Ethereum)

文件列表:
img (0, 2021-11-02)
img\w3news.gif (5567816, 2021-11-02)
package-lock.json (1798227, 2021-11-02)
package.json (914, 2021-11-02)
packages (0, 2021-11-02)
packages\contract (0, 2021-11-02)
packages\contract\contracts (0, 2021-11-02)
packages\contract\contracts\Forum.sol (4091, 2021-11-02)
packages\contract\deploy (0, 2021-11-02)
packages\contract\deploy\00_deploy_froum.js (275, 2021-11-02)
packages\contract\hardhat.config.ts (774, 2021-11-02)
packages\contract\package-lock.json (967526, 2021-11-02)
packages\contract\package.json (1161, 2021-11-02)
packages\contract\scripts (0, 2021-11-02)
packages\contract\scripts\sample-script.js (1102, 2021-11-02)
packages\contract\tsconfig.json (288, 2021-11-02)
packages\contract\typechain (0, 2021-11-02)
packages\contract\typechain\Forum.d.ts (9641, 2021-11-02)
packages\contract\typechain\commons.ts (870, 2021-11-02)
packages\contract\typechain\factories (0, 2021-11-02)
packages\contract\typechain\factories\Forum__factory.ts (16544, 2021-11-02)
packages\contract\typechain\hardhat.d.ts (848, 2021-11-02)
packages\contract\typechain\index.ts (190, 2021-11-02)
packages\webapp (0, 2021-11-02)
packages\webapp\.env.development (92, 2021-11-02)
packages\webapp\.prettierignore (45, 2021-11-02)
packages\webapp\.prettierrc.json (69, 2021-11-02)
packages\webapp\index.html (361, 2021-11-02)
packages\webapp\package-lock.json (977977, 2021-11-02)
packages\webapp\package.json (1431, 2021-11-02)
packages\webapp\scripts (0, 2021-11-02)
packages\webapp\scripts\sample-content (0, 2021-11-02)
packages\webapp\scripts\sample-content\1.json (300, 2021-11-02)
... ...

# Web3.Storage Forum dApp example This repository contains an example of a decentralized application that uses [Web3.Storage](https://web3.storage) and [Ethereum](https://ethereum.org) to provide a simple online forum. All post and comment content is stored on Filecoin and IPFS, while all ids and votes are stored in an Ethereum smart contract. ![An animation showing a user posting a comment and a new post on the decentralized forum app.](./img/w3news.gif) ## Install / Run There's no long-lived deployment of the app yet, so you'll need to run in local development mode. You'll need a recent version of Node.js and npm version 7 or greater. 1. Clone this repo: ```bash git clone https://github.com/web3-storage/example-forum-dapp ``` 2. Install dependencies: ```bash npm install ``` 3. Run local blockchain and webapp server: ``` npm run dev ``` Leave the last command running and open your browser to [http://localhost:3000](http://localhost:3000). ### Setting up MetaMask To interact with the app, you'll need an Ethereum wallet like [MetaMask](https://metamask.io) installed. You'll also need to configure MetaMask to use the local HardHat development network. To do that, open the MetaMask extension and go to `Settings -> Network -> Localhost 8545` and change the Chain ID input to `31337`. **Important**: if you've made any write transactions, the next time you restart the local blockchain you'll get an error about an incorrect nonce if you try to make a transaction on the new chain. This is because MetaMask still remembers the state of the old blockchain instance. To fix this, open MetaMask and go to `Settings -> Advanced -> Reset Account` and press the `Reset Account` button. This will not mess with your balances or any important state - it just clears out the stale history. ### Getting play money When running in local development mode, there will be a `faucet` link in the header of the app. Click the link to have a small amount of devnet ETH deposited into your MetaMask wallet. You'll need to do this before performing any write operations (e.g. posting, commenting, voting, etc). ## App overview The app consists of a smart contract and supporting TypeScript code for interacting with the blockchain, along with a single-page web app, written in React. At a high level, the app works like this: A [`Forum` smart contract][src-forum-sol] is deployed to an Ethereum network, which allows creating posts, commenting on them, and voting on posts and comments. ### Items Posts and comments are represented internally as `Item` structs: ```solidity /** * @notice Represents a single forum post or comment. */ struct Item { /// @notice what kind of item (post or comment) ItemKind kind; /// @notice Unique item id, assigned at creation time. uint256 id; /// @notice Id of parent item. Posts have parentId == 0. uint256 parentId; /// @notice address of author. address author; /// @notice block number when item was submitted uint256 createdAtBlock; /// @notice ids of all child items, with oldest items at front. uint256[] childIds; /// @notice IPFS CID of item content. string contentCID; } ``` Each `Item` has a `kind` field that can be either `ItemKind.POST` or `ItemKind.COMMENT`. Comments link to their parent post (or comment) using the `parentId` field, and parents keep a list of their children in the `childIds` field. When a new child commment is added, the parent's `childIds` is updated to include the new child. The content of the post or comment is stored as a JSON file in IPFS and Filecoin using [Web3.Storage](https://web3.storage), and the file's CID is stored in the `contentCID` field. You can retrieve a comment or post with the `getItem` contract function, passing in the item's id. You then need to fetch the content from IPFS and parse the JSON in order to render the complete item. ### Voting Anyone can vote on a comment or post by calling either `voteForItem(itemId, voteValue)` where `voteValue` is `-1` for a downvote, `+1` for an upvote, or `0` to retract a previous vote. Each account can only vote once for each post or comment - subequent votes replace the previous vote from that account. You can retrive the vote total for a post or comment with `getItemScore(itemId)`, which returns the sum of all up and downvotes. To get the "karma" or number of votes an author has recieved for their posts and comments, call `getAuthorKarma(author)`, passing in the author's address. See [`packages/contract`](./packages/contract/README.md) for details about the smart contract. See [`packages/webapp`](./packages/webapp/README.md) for details about the user interface. [src-forum-sol]: ./packages/contract/contracts/Forum.sol [ipfs-docs-cid]: https://docs.ipfs.io/concepts/content-addressing/

近期下载者

相关文件


收藏者