Giter Site home page Giter Site logo

jellydn / dapp-starter Goto Github PK

View Code? Open in Web Editor NEW
323.0 6.0 79.0 17.34 MB

Opinionated Dapp Starter Template provides a solid foundation for building Ethereum-based applications. It incorporates various tools and frameworks such as React, Next.js, Hardhat, TypeChain, web3-react, daisyUI Tailwind CSS Components, and OpenZeppelin.

Home Page: https://dapp-starter.productsway.com/

License: MIT License

JavaScript 0.18% Solidity 1.00% CSS 0.02% TypeScript 98.80%
dapp-starter etherjs react hardhat web3-react ethereum typescript web3 openzeppelin nextjs solidity hacktoberfest

dapp-starter's Introduction

Welcome to dapp-starter ๐Ÿ‘‹

All Contributors

Version License: MIT Twitter: jellydn

Opinionated Dapp Starter Template

๐Ÿ  Homepage

โœจ Demo

Screenshot

./screenshot.png

Connect to MetaMask

https://gyazo.com/6b8f75171de1fab24de552ff7930f4b8.gif

Wallet Connect

https://gyazo.com/2995c3a2c4bdbda806821839826449dc.gif

Show balance and sign message

https://gyazo.com/8e8ca7c89193d6f1463081bcd41c587e.gif

Features

  • โšก๏ธ The React Framework for Production NextJs
  • ๐Ÿ“ฆ Hardhat - Ethereum development environment for professionals
  • ๐Ÿฆพ TypeChain Hardhat plugin - Automatically generate TypeScript bindings for smartcontracts while using Hardhat.
  • ๐Ÿ”ฅ web3-react - A simple, maximally extensible, dependency minimized framework for building modern Ethereum dApps
  • ๐ŸŽจ daisyUI Tailwind CSS Components - clean HTML with component classes
  • ๐ŸŽจ OpenZeppelin - standard for secure blockchain applications

Install

pnmm install

Usage

pnpm run dev

Run tests

pnpm run test

Pre-commit

This project uses Pre-commit to enforce code quality. To install pre-commit, run:

pre-commit install

Hardhat guideline

This project demonstrates an advanced Hardhat use case, integrating other tools commonly used alongside Hardhat in the ecosystem.

The project comes with a sample contract, a test for that contract, a sample script that deploys that contract, and an example of a task implementation, which simply lists the available accounts. It also comes with a variety of other tools, preconfigured to work with the project code.

Try running some of the following tasks:

npx hardhat accounts
npx hardhat compile --network localhost
npx hardhat clean
npx hardhat test
npx hardhat node
npx hardhat help
REPORT_GAS=true npx hardhat test
npx hardhat coverage
npx hardhat run scripts/deploy_greeter.ts --network localhost
node scripts/deploy.ts
npx eslint '**/*.ts'
npx eslint '**/*.ts' --fix
npx prettier '**/*.{json,sol,md}' --check
npx prettier '**/*.{json,sol,md}' --write
npx solhint 'contracts/**/*.sol'
npx solhint 'contracts/**/*.sol' --fix

Deploy to Ropsten Testnet

Etherscan verification

To try out Etherscan verification, you first need to deploy a contract to an Ethereum network that's supported by Etherscan, such as Ropsten.

In this project, copy the .env.example file to a file named .env, and then edit it to fill in the details. Enter your Etherscan API key, your Ropsten node URL (eg from Alchemy), and the private key of the account which will send the deployment transaction. With a valid .env file in place, first deploy your contract:

npx hardhat run --network ropsten scripts/deploy_greeter.ts

Then, copy the deployment address and paste it in to replace DEPLOYED_CONTRACT_ADDRESS in this command:

npx hardhat verify --network ropsten DEPLOYED_CONTRACT_ADDRESS "Hello, Hardhat!"

Contract upgrade

OpenZeppelin provides tooling for deploying and securing upgradeable smart contracts.

Smart contracts deployed using OpenZeppelin Upgrades Plugins can be upgraded to modify their code, while preserving their address, state, and balance. This allows you to iteratively add new features to your project, or fix any bugs you may find in production.

In this project, there are a 2 versions of contract: Box and BoxV2 which is improvement of Box. First deploy your contract:

npx hardhat run --network localhost scripts/deploy_upgradeable_box.ts

Then, deploy the upgrade smart contract

npx hardhat run --network localhost scripts/upgrade_box.ts

Examples

  • Simple Store App: counter-like smart contract, read/write value and listen to event from smart contract.
  • ICO Token App: How to create An ERC20 token and implement ICO smart contract (CrowdSale).
  • NFT App: How to create An ERC721 token.

Author

๐Ÿ‘ค Dung Huynh

Stargazers ๐ŸŒŸ

Stargazers repo roster for jellydn/dapp-starter

Show your support

kofi paypal buymeacoffee

Give a โญ๏ธ if this project helped you!

Contributors โœจ

Thanks goes to these wonderful people (emoji key):

Dung Duc Huynh (Kaka)
Dung Duc Huynh (Kaka)

๐Ÿ“– ๐Ÿ’ป
Waren Gonzaga
Waren Gonzaga

๐Ÿ’ต

This project follows the all-contributors specification. Contributions of any kind welcome!

dapp-starter's People

Contributors

dependabot[bot] avatar dev-dz27 avatar jellydn avatar renovate-bot avatar renovate[bot] avatar semgrep-bot avatar warengonzaga 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

dapp-starter's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Warning

These dependencies are deprecated:

Datasource Name Replacement PR?
npm @nomiclabs/hardhat-etherscan Unavailable

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

  • chore(deps): lock file maintenance

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

Detected dependencies

github-actions
.github/workflows/build.yml
  • styfle/cancel-workflow-action 0.12.1
  • actions/checkout v4
  • actions/setup-node v4
.github/workflows/code-quality.yml
  • actions/checkout v4
  • biomejs/setup-biome v2
.github/workflows/codeql-analysis.yml
  • actions/checkout v4
  • github/codeql-action v3
  • github/codeql-action v3
  • github/codeql-action v3
.github/workflows/test.yml
  • styfle/cancel-workflow-action 0.12.1
  • actions/checkout v4
  • actions/setup-node v4
npm
package.json
  • @ethersproject/abi 5.7.0
  • @ethersproject/providers 5.7.2
  • @ethersproject/units 5.7.0
  • @tailwindcss/typography 0.5.14
  • @web3-react/core 6.1.9
  • @web3-react/injected-connector 6.0.7
  • @web3-react/network-connector 6.2.9
  • @web3-react/walletconnect-connector 6.2.13
  • daisyui 4.12.10
  • loglevel 1.9.1
  • next 14.2.5
  • react 18.3.1
  • react-dom 18.3.1
  • web3-react 5.0.5
  • @biomejs/biome 1.8.3
  • @nomicfoundation/hardhat-chai-matchers 1.0.6
  • @nomicfoundation/hardhat-network-helpers 1.0.11
  • @nomicfoundation/hardhat-toolbox 2.0.2
  • @nomiclabs/hardhat-ethers 2.2.3
  • @nomiclabs/hardhat-etherscan 3.1.8
  • @openzeppelin/contracts 5.0.2
  • @openzeppelin/contracts-upgradeable 5.0.2
  • @openzeppelin/hardhat-upgrades 1.28.0
  • @typechain/ethers-v5 11.1.2
  • @typechain/ethers-v6 0.5.1
  • @typechain/hardhat 9.1.0
  • @types/chai 4.3.17
  • @types/mocha 10.0.7
  • @types/node 20.14.15
  • @types/react 18.3.3
  • @types/react-dom 18.3.0
  • autoprefixer 10.4.20
  • chai 4.5.0
  • dotenv 16.4.5
  • ethers 5.7.2
  • hardhat 2.22.8
  • hardhat-gas-reporter 2.2.1
  • next-secure-headers 2.2.0
  • postcss 8.4.41
  • rimraf 6.0.1
  • rustywind 0.22.0
  • solgraph 1.0.2
  • solhint 5.0.3
  • solidity-coverage 0.8.12
  • tailwindcss 3.4.9
  • ts-node 10.9.2
  • typechain 8.3.2
  • typescript 5.5.4
  • pnpm 9.7.0
nvm
.nvmrc

  • Check this box to trigger a request for Renovate to run again on this repository

Theme Toggler

Describe the bug

The Theme Toggler is coming out of the navbar and not looking I can fix it and make some changes with the cards.

Reproduction

...

System Info

..

Used Package Manager

npm

Validations

  • Follow our Code of Conduct
  • Read the Contributing Guide.
  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
  • The provided reproduction is a minimal reproducible of the bug.

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.