Code Monkey home page Code Monkey logo

cfweb3's Introduction

CFWeb3

CFWeb3 is a Web3 demo application. It uses Hardhat and Solidity to create an Ethereum smart contract. This code is a proof-of-concept showing how to build Web3 applications with Cloudflare, and should not be used as a production example.

The contract offers 2048 tokens which can be minted via the frontend Svelte application. The entire app runs on the Rinkeby test network.

Demo

A live version of this demo app can be found at cf-web3.pages.dev.

Building locally

  1. Clone the repo with git clone [email protected]:cloudflare/cfweb3.git
  2. npm install in contract and frontend with:
cd cfweb3/contract
npm install
cd ../frontend
npm install
  1. Install Metamask, switch to the testnet and add funds (instructions below)
  2. Click on Metamask and then on the hamburger icon in the top right
  3. Click on "Account details"
  4. Click on "Export Private Key"
  5. Enter Metamask password
  6. Copy your private key
  7. In one terminal window, move into the contract directory and run:
dapk="YOUR_PRIVATE_KEY" npx hardhat node
  1. In a different terminal window, move into the frontend directory and run:
npm run dev

Adding funds to your Metamask test account

  1. Install Metamask
  2. Switch Metamask to the Rinkeby test network

Metamask switch to testnet

  1. Copy your Rinkeby account wallet address.

  2. Go to the Rinkeby faucet

  3. Post a Tweet or a Facebook status with your Rinkeby wallet address.

  4. Enter the URL of your Tweet or Facebook post on the faucet website.

  5. Claim the amount you want.

  6. Delete the social media post (optional).

cfweb3's People

Contributors

jkup avatar kristianfreeman avatar peopledrivemecrazy avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

cfweb3's Issues

Total collection view?

Maybe as a stretch goal? It would be cool to browse the entire collection. Even if you are not logged in.

Flesh out UI

  • Show NFT image
  • Better minting UI (label with quantity/pricing info)
  • Banner noting that this runs on Rinkeby
  • Link to GitHub/mention it's open-source

Can't install npm locally

npm ERR! code ERR_INVALID_ARG_TYPE
npm ERR! The "from" argument must be of type string. Received undefined

Infura API key is exposed

url: "https://mainnet.infura.io/v3/5707a1c75350408cb408cba40175e252",

Its probably very unlikely that the Infura account that is linked to this key is not on the free tier but on the small chance that it is, someone could use it for their own nefarious purposes.

Suggestion:
There could be added documentation for a user to set up an Infura account to get their own API key and possibly use dotenv instead to handle environment variables. Let me know what y'all think and I could open up a PR :)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.