知识图谱>> ipfs-image-dapp>> 返回
项目作者： iwaldman

项目描述 ：
A Decentralized Application (dApp) with React that demonstrates how to implement IPFS file uploads and store the IPFS hash in an Ethereum smart contract.
高级语言： JavaScript
项目地址: git://github.com/iwaldman/ipfs-image-dapp.git
创建时间： 2018-06-22T02:11:08Z
项目社区：https://github.com/iwaldman/ipfs-image-dapp
开源协议：
下载


ipfs-image-dapp

Overview

IPFS and the Blockchain are a perfect match. Why? You can address large amounts of data with IPFS and place the immutable, permanent IPFS links into a blockchain transaction. This will timestamp and secure your content, without having to put the data on the chain itself. You now have undisputable proof that your image existed at that time it was uploaded.

This project is an Ethereum Decentralized Application (dApp) using React, Redux, React Router and Bootstrap. It demonstrates how to implement IPFS file uploads and store the IPFS hash on the blockchain.

Usage

Main Page

In this application, the main page displays a list of image cards filtered by owner i.e. MetaMask account. Each image card displays the image, title, description, tags, upload timestamp and IPFS hash.

IPFS Image dApp

Upload an Image

Click Upload Image to upload an image to IPFS and the blockchain. You are required to enter an image title, optional description and appropriate tags. Click Upload to submit.

IPFS Image dApp

Note: You can find sample images in the assets/sample-images folder.

View Details

Click Details to view the image and blockchain transaction details.

Note: The current version of the application does not persist the blockchain transaction information in a permanent store such as MongoDB or PostgreSQL. Instead, we chose to store it in browser local storage keyed by the account address so to provide a better user experience. Otherwise, this information is lost when you refresh the browser or login as another user. Keep in mind that this information is transient when running Ganache. Be sure to clear local storage before restarting the app by following these instructions.

IPFS Image dApp

Our stack

For this project, we used the following stack:

  • Solidity Smart Contracts
  • IPFS for storing image data via Infura
  • Truffle and Ganache for our development and testing framework
  • React / Redux / Bootstrap 4 for our front-end development
  • MetaMask for our web3 provider
  • OpenZeppelin library

Prerequisites

  1. You will need Metamask plugin for Chrome.
  2. Make sure you have Node.js installed.

Installation

  1. Install Truffle Framework and Ganache CLI globally. If you prefer, the graphical version of Ganache works as well.

    1. npm install -g truffle
    2. npm install -g ganache-cli

    Note: The graphical version of Ganache seems to be more stable on Mac whereas Ganache CLI works fine on Ubuntu.

  2. Run the development blockchain.

    1. // no blocktime specified so transaction will be mined instantly
    2. ganache-cli

    You may want to pass in a blocktime. Otherwise, it’s difficult to track things like loading indicators because Ganache will mine instantly.

    Note: We’ve noticed that using a blocktime while running truffle test causes issues.

    1. // 3 second blocktime
    2. ganache-cli -b 3

  3. Open another terminal, clone this repo and install its dependencies.

    1. git clone https://github.com/iwaldman/ipfs-image-dapp.git
    3. cd ipfs-image-dapp
    5. npm install

    Note: If you get an error on install, don’t panic. It should still work.

  4. Compile and migrate the smart contracts.

    1. truffle compile
    2. truffle migrate
    4. # You can combine into one command
    5. truffle migrate --reset ---compile-all

  5. Start the application

    1. npm run start

  6. Navigate to http://localhost:3000/ in your browser.

  7. Remember to connect MetaMask to one of your local Ganache Ethereum accounts

    • Connect to Localhost 8545, or
    • Create and connect to a custom RPC network using the Ganache RPC server (currently http://127.0.0.1:8545), then

    • Import a new account and use the account seed phrase provided by Ganache

      IPFS Image dApp

Testing

To run the unit tests.

Open a terminal and run truffle test or npm run sol:test.

  1. $ truffle test
  2. Using network 'development'.
  4.   Contract: ImageRegister
  5.     ✓ has an owner
  6.     ✓ should selfdestruct (59ms)
  7.     ✓ should store an image (75ms)
  8.     ✓ should emit a LogImageUploaded event when storing an image (83ms)
  9.     ✓ should return image details (103ms)
  10.     ✓ should return image count (139ms)
  11.     ✓ should store images for any number of owners (255ms)
  12.     ✓ should require a valid IPFS hash when uploading an image (42ms)
  13.     ✓ should require a valid title when uploading an image (44ms)
  14.     ✓ should require a valid description when uploading an image (76ms)
  15.     ✓ should require tags when uploading an image (42ms)
  16.     ✓ should require a valid address when retrieving image count
  17.     ✓ should require a valid index when retrieving image details
  18.     ✓ should allow the owner to perform an emergency stop
  19.     ✓ should disallow a non-owner to perform an emergency stop
  20.     ✓ should disallow uploading an image when there is an emergency stop (43ms)
  21.     ✓ should emit a LogEmergencyStop event when performing an emergency stop
  23.   17 passing (2s)

To run solidity coverage.

Open a terminal and run npm run coverage:solidity.

  1. $ npm run sol:coverage
  3. > ipfs-image-app@0.1.0 coverage:solidity /Users/irvin/dev/ipfs-image-dapp
  4. > solidity-coverage
  6. Generating coverage environment
  7. Running: truffle compile
  8. (this can take a few seconds)...
  9. Compiling ./contracts/ImageRegister.sol...
  10. Compiling ./contracts/Migrations.sol...
  11. Compiling openzeppelin-solidity/contracts/lifecycle/Destructible.sol...
  12. Compiling openzeppelin-solidity/contracts/ownership/Ownable.sol...
  13. Writing artifacts to ./build/contracts
  15. Instrumenting  ./coverageEnv/contracts/ImageRegister.sol
  16. Skipping instrumentation of  ./coverageEnv/contracts/Migrations.sol
  17. Running: truffle compile
  18. (this can take a few seconds)...
  19. Compiling ./contracts/ImageRegister.sol...
  20. Compiling ./contracts/Migrations.sol...
  21. Compiling openzeppelin-solidity/contracts/lifecycle/Destructible.sol...
  22. Compiling openzeppelin-solidity/contracts/ownership/Ownable.sol...
  23. Writing artifacts to ./build/contracts
  25. Launched testrpc on port 8555
  26. Running: truffle test
  27. (this can take a few seconds)...
  28. Using network 'development'.
  30.   Contract: ImageRegister
  31.     ✓ has an owner
  32.     ✓ should selfdestruct
  33.     ✓ should store an image (134ms)
  34.     ✓ should emit a LogImageUploaded event when storing an image (114ms)
  35.     ✓ should return image details (162ms)
  36.     ✓ should return image count (220ms)
  37.     ✓ should store images for any number of owners (432ms)
  38.     ✓ should require a valid IPFS hash when uploading an image (70ms)
  39.     ✓ should require a valid title when uploading an image (72ms)
  40.     ✓ should require a valid description when uploading an image (131ms)
  41.     ✓ should require tags when uploading an image (88ms)
  42.     ✓ should require a valid address when retrieving image count
  43.     ✓ should require a valid index when retrieving image details (83ms)
  44.     ✓ should allow the owner to perform an emergency stop
  45.     ✓ should disallow a non-owner to perform an emergency stop
  46.     ✓ should disallow uploading an image when there is an emergency stop (58ms)
  47.     ✓ should emit a LogEmergencyStop event when performing an emergency stop (40ms)
  49.   17 passing (3s)
  51. --------------------|----------|----------|----------|----------|----------------|
  52. File                |  % Stmts | % Branch |  % Funcs |  % Lines |Uncovered Lines |
  53. --------------------|----------|----------|----------|----------|----------------|
  54.  contracts/         |      100 |    88.89 |    83.33 |      100 |                |
  55.   ImageRegister.sol |      100 |    88.89 |    83.33 |      100 |                |
  56. --------------------|----------|----------|----------|----------|----------------|
  57. All files           |      100 |    88.89 |    83.33 |      100 |                |
  58. --------------------|----------|----------|----------|----------|----------------|
  60. Istanbul coverage reports generated
  61. Cleaning up...
  62. Shutting down testrpc-sc (pid 94037)
  63. Done.

Deploy to Rinkeby TestNet

Steps to deploy our smart contract directly from Truffle with Infura to the Rinkeby TestNet.

  1. Get an Infura API key. You can sign up for free.
  2. Create a .env file in the root directory if it doesn’t exist
    1. cd ipfs-image-dapp
    2. touch .env
  3. Update the .env file with your MetaMask mnenomic and Infura API Key
    1. MNENOMIC = '<Your MetaMask recovery words>'
    2. INFURA_API_KEY = '<Your Infura API Key after its registration>'

  4. Deploy to Rinkeby with truffle migrate --reset --compile-all --network rinkeby

    1. $ truffle migrate --reset --compile-all --network rinkeby
    2. Compiling ./contracts/ImageRegister.sol...
    3. Compiling ./contracts/Migrations.sol...
    4. Compiling openzeppelin-solidity/contracts/lifecycle/Destructible.sol...
    5. Compiling openzeppelin-solidity/contracts/ownership/Ownable.sol...
    6. Writing artifacts to ./build/contracts
    8. Using network 'rinkeby'.
    10. Running migration: 1_initial_migration.js
    11.   Deploying Migrations...
    12.   ... 0xb2d3cebfca0c1a2e0d271c07740112460d82ce4469ba14d7b92f9993314af50c
    13.   Migrations: 0x4ed3265ed135a4c85669f32ca662bd2aba3e5db3
    14. Saving successful migration to network...
    15.   ... 0xde1d86d1efbeae9d086e0d1d170a20bbe1f570e92816d231265874f2a8afe556
    16. Saving artifacts...
    17. Running migration: 2_deploy_contracts.js
    18.   Deploying ImageRegister...
    19.   ... 0xcfbe99781c8c0cd77dd208eb445b2c12381704441e3827b2308a88d9c9b29079
    20.   ImageRegister: 0x107aaa697293b44376de69ad4b87579e3b1e50d8
    21. Saving successful migration to network...
    22.   ... 0x46ad7dbe55f412a55c76e48bf7553603c0826a19cda92f45f319699b8eb5a203
    23. Saving artifacts...

  5. Run the application as described above.

Check out the awesome tutorial Deploy Your Smart Contract Directly from Truffle with Infura by Hyungsuk Kang.

Troubleshooting Tips

  • Is Ganache running?
  • Is your MetaMask account unlocked?
  • Are you using the MetaMask account associated with your Ganache account?
  • Are you using your custom RPC network in MetaMask?
  • If MetaMask can’t find your RPC network, try switching to the Rinkeby Test Network and back.
  • Did you truffle compile and truffle migrate whenever starting your local network or making changes to your smart contract?
  • Transaction error?
    • Try resetting the MetaMask account you created under settings.
  • Is truffle migrate showing stale settings?
    • Try truffle migrate --reset
  • Images do not appear right away?
    • Have noticed on Mac that ganache-cli may drop transactions. Try using the Ganache app instead.
    • If you are using the Rinkeby TestNet, it may take up to a minute before the transaction is mined.

Where can I find more documentation?

This application is a marriage of Truffle and a React project created with create-react-app. Either one would be a great place to start.

You can also check out the official sites for the Ethereum Project, OpenZeppelin library and IPFS.

Host the UI on IPFS

There seem to be a number of issues hosting a create-react-app on IPFS. Take a look at the following links if you are interested in exploring this:

Future enhancements

  • Add a visual indicator of the number of image uploads in-progress
  • Improve web3 error handling, use React error boundaries
  • Improve account change logic
  • Image upload wizard workflow
  • Allow video uploads
  • Allow update of image metadata e.g. title, description, tags
  • Search / filter by tags

Notes

This project uses Bootstrap 4.

styled with prettier

License

MIT