Initial commit

.github/workflows/tests.yaml

@@ -0,0 +1,28 @@
+name: Harhhat tests
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  tests:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          cache: yarn
+          cache-dependency-path: smart-contract/yarn.lock
+
+      - name: Yarn install
+        run: cd ./smart-contract && yarn install
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Run tests
+        run: cd ./smart-contract && yarn test-extended

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "solidity.packageDefaultDependenciesDirectory": "smart-contract/node_modules",
+  "editor.tabSize": 2
+}

LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2022 Marco Lipparini
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is furnished
+to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -0,0 +1,32 @@
+# NFT ERC721 Collection
+
+An all-in-one solution for `ERC721` collections. Build, test and deploy your smart contract, together with a totally
+integrated DAPP within a simple yet powerful workspace.
+
+## Disclaimer
+This project was created for educational purposes, please refer to the [LICENCE](LICENSE) file for further information.
+
+## Main features
+- extremely high gas efficiency (users are going to pay lower gas fees compared to traditional collections)
+- whitelist support with customizable list size (using a Merkle Tree for verification)
+- automated contract verification through Etherscan
+- simple CLI commands that guide you through all the sale steps (whitelist, pre-sale, public sale)
+- built as a Hardhat project with TypeScript support for a better development experience
+- includes a fully-featured minting DAPP (React + TypeScript + SCSS + Webpack)
+- full support for contract interaction through Etherscan, for all the users that do not trust custom DAPPs (including the `whitelistMint(...)` function)
+- customizable minting DAPP (from basic branding to complete customization)
+
+## YouTube tutorials
+- Basic usage, deploy a collection in a few minutes: _COMING SOON_
+- _More videos coming soon..._
+
+## Requirements
+
+### Software
+- [Visual Studio Code](https://code.visualstudio.com/) (with the [Solidity](https://marketplace.visualstudio.com/items?itemName=JuanBlanco.solidity) extension)
+- [NodeJs](https://nodejs.org/) (with the [Yarn package manager](https://yarnpkg.com/getting-started/install))
+
+### Services
+- Etherscan free API key _(optional: used for the automated contract verificiation, as well as retrieving the current values for gas cost estimation)_
+- Infura free basic plan or higher _(optional: used by the CLI commands in order to perform operations on real blockchains, you can skip this if you deploy and manage your contract manually)_
+- Coin Market Cap free API key _(optional: used for retrieving the current ETH price for gas cost estimation in USD)_

minting-dapp/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+public/build

minting-dapp/package.json

@@ -0,0 +1,41 @@
+{
+    "name": "@hashlips-lab/nft-erc721-collection-dapp",
+    "version": "1.0.0",
+    "devDependencies": {
+        "@babel/preset-react": "^7.0.0",
+        "@metamask/detect-provider": "^1.2.0",
+        "@symfony/webpack-encore": "^1.7.0",
+        "@types/react": "^17.0.37",
+        "@types/react-dom": "^17.0.11",
+        "@walletconnect/web3-provider": "^1.7.1",
+        "assert": "^2.0.0",
+        "autoprefixer": "^10.4.0",
+        "buffer": "^6.0.3",
+        "core-js": "^3.0.0",
+        "ethers": "^5.5.3",
+        "file-loader": "^6.0.0",
+        "hardhat-typechain": "^0.3.5",
+        "keccak256": "^1.0.6",
+        "merkletreejs": "^0.2.27",
+        "node-polyfill-webpack-plugin": "^1.1.4",
+        "postcss-loader": "^6.2.1",
+        "react": "^17.0.2",
+        "react-dom": "^17.0.2",
+        "regenerator-runtime": "^0.13.2",
+        "sass": "^1.45.0",
+        "sass-loader": "^12.4.0",
+        "stream": "^0.0.2",
+        "tailwindcss": "^3.0.1",
+        "ts-loader": "^9.2.6",
+        "typescript": "^4.5.4",
+        "webpack-notifier": "^1.6.0"
+    },
+    "license": "UNLICENSED",
+    "private": true,
+    "scripts": {
+        "dev-server": "encore dev-server",
+        "dev": "encore dev",
+        "watch": "encore dev --watch",
+        "build": "encore production --progress"
+    }
+}

minting-dapp/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+    plugins: {
+        tailwindcss: {},
+        autoprefixer: {}
+    }
+};

minting-dapp/public/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>YOUR_AWESOME_NFT_COLLECTION - Minting DAPP</title>
+
+  <link rel="stylesheet" href="/build/main.css">
+  <script src="/build/main.js"></script>
+</head>
+<body>
+  <main>
+    <img id="logo" src="/build/images/logo.png" alt="Logo" />
+
+    <div id="minting-dapp"></div>
+  </main>
+</body>
+</html>

minting-dapp/src/scripts/lib/NftContractType.ts

@@ -0,0 +1,7 @@
+// The name below ("YourNftToken") should match the name of your Solidity contract.
+// It can be updated using the following command:
+// yarn rename-contract NEW_CONTRACT_NAME
+// Please DO NOT change it manually!
+import { YourNftToken as NftContractType } from '../../../../smart-contract/typechain/index';
+
+export default NftContractType;

minting-dapp/src/scripts/lib/Whitelist.ts

@@ -0,0 +1,33 @@
+import whitelistAddresses from '../../../../smart-contract/config/whitelist.json';
+import { MerkleTree } from 'merkletreejs';
+import keccak256 from 'keccak256';
+
+export default new class Whitelist {
+  private merkleTree!: MerkleTree;
+
+  private getMerkleTree(): MerkleTree
+  {
+    if (this.merkleTree === undefined) {
+      const leafNodes = whitelistAddresses.map(addr => keccak256(addr));
+
+      this.merkleTree = new MerkleTree(leafNodes, keccak256, { sortPairs: true });
+    }
+
+    return this.merkleTree;
+  }
+
+  public getProofForAddress(address: string): string[]
+  {
+    return this.getMerkleTree().getHexProof(keccak256(address));
+  }
+
+  public getRawProofForAddress(address: string): string
+  {
+    return this.getProofForAddress(address).toString().replaceAll('\'', '').replaceAll(' ', '');
+  }
+
+  public contains(address: string): boolean
+  {
+    return this.getMerkleTree().getLeafIndex(Buffer.from(keccak256(address))) >= 0;
+  }
+};

minting-dapp/src/scripts/main.tsx

@@ -0,0 +1,8 @@
+import '../styles/main.scss';
+
+import ReactDOM from 'react-dom';
+import Dapp from './react/Dapp';
+
+document.addEventListener('DOMContentLoaded', async () => {
+  ReactDOM.render(<Dapp />, document.getElementById('minting-dapp'));
+});

minting-dapp/src/scripts/react/CollectionStatus.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+interface Props {
+  userAddress: string|null;
+  totalSupply: number;
+  maxSupply: number;
+  isPaused: boolean;
+  isWhitelistMintEnabled: boolean;
+  isUserInWhitelist: boolean;
+}
+
+interface State {
+}
+
+const defaultState: State = {
+};
+
+export default class CollectionStatus extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = defaultState;
+  }
+
+  private isSaleOpen(): boolean
+  {
+    return this.props.isWhitelistMintEnabled || !this.props.isPaused;
+  }
+
+  render() {
+    return (
+      <>
+        <div className="collection-status">
+          <div className="user-address">
+            <span className="label">Wallet address:</span>
+            <span className="address">{this.props.userAddress}</span>
+          </div>
+
+          <div className="supply">
+            <span className="label">Supply</span>
+            {this.props.totalSupply}/{this.props.maxSupply}
+          </div>
+
+          <div className="current-sale">
+            <span className="label">Sale status</span>
+            {this.isSaleOpen() ?
+              <>
+                {this.props.isWhitelistMintEnabled ? 'Whitelist only' : 'Open'}
+              </>
+              :
+              'Closed'
+            }
+          </div>
+        </div>
+      </>
+    );
+  }
+}