chore: [#3] added linting and prettier to checkin, plus additional ty…

…pescript check
citydaoproject · May 11, 2022 · c399eee · c399eee
1 parent f09b723
commit c399eee
Show file tree

Hide file tree

Showing 5 changed files with 167 additions and 80 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
diff --git a/.eslintrc.yml b/.eslintrc.yml
@@ -0,0 +1,13 @@
+extends: "next/core-web-vitals"
+env:
+  browser: true
+  es2021: true
+parser: '@typescript-eslint/parser'
+parserOptions:
+  ecmaVersion: 12
+  sourceType: module
+plugins:
+  - '@typescript-eslint'
+  - prettier
+rules:
+  'prettier/prettier': warn
diff --git a/package.json b/package.json
@@ -5,11 +5,16 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint && tsc --noemit"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "pretty-quick --staged",
+      "pre-push": "npm run lint"
+    }
   },
   "dependencies": {
     "@citydao/parcel-contracts": "^0.0.4",
-    "@types/styled-components": "^5.1.25",
     "@walletconnect/web3-provider": "^1.7.8",
     "ethers": "^5.5.1",
     "joi": "^17.4.2",
@@ -24,10 +29,14 @@
   "devDependencies": {
     "@types/node": "16.11.10",
     "@types/react": "18.0.1",
+    "@types/styled-components": "^5.1.25",
+    "@typescript-eslint/eslint-plugin": "^5.23.0",
+    "@typescript-eslint/parser": "^5.23.0",
     "babel-plugin-styled-components": "^2.0.7",
     "eslint": "7.32.0",
     "eslint-config-next": "12.0.4",
     "eslint-plugin-prettier": "^4.0.0",
+    "husky": "^8.0.1",
     "prettier": "^2.6.2",
     "pretty-quick": "^3.1.3",
     "styled-components": "^5.3.5",

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,21 +1,20 @@
 /* eslint-disable @next/next/no-img-element */
-import { useState, FC, useEffect } from "react";
-import { NextPage } from "next";
-import { ethers } from "ethers";
-import { Iframe } from "../components/Iframe";
-import { ParcelProperties } from "../containers/ParcelProperties";
-import useWallet from "../hooks/useWallet";
-import { ParcelNFT__factory } from "@citydao/parcel-contracts/dist/types/contracts/factories/ParcelNFT__factory";
+import { useState, FC, useEffect } from 'react';
+import { NextPage } from 'next';
+import { ethers } from 'ethers';
+import { Iframe } from '../components/Iframe';
+import { ParcelProperties } from '../containers/ParcelProperties';
+import useWallet from '../hooks/useWallet';
+import { ParcelNFT__factory } from '@citydao/parcel-contracts/dist/types/contracts/factories/ParcelNFT__factory';
 
-import { getParcelProperties } from "../parcel-properties";
-import keccak256 from "keccak256";
-import MerkleTree from "merkletreejs";
-import { addresses, Addresses } from "../data/whiteListedAddresses";
-import { shortenWalletAddress } from "../utils";
-import { MAX_NFT_TO_MINT } from "../contants";
-import { MintedNftsView } from "../components/MintedNftsView";
-const PARCEL0_NFT_CONTRACT_ADDRESS =
-  "0x209723a65844093Ad769d557a22742e0f661959d";
+import { getParcelProperties } from '../parcel-properties';
+import keccak256 from 'keccak256';
+import MerkleTree from 'merkletreejs';
+import { addresses, Addresses } from '../data/whiteListedAddresses';
+import { shortenWalletAddress } from '../utils';
+import { MAX_NFT_TO_MINT } from '../contants';
+import { MintedNftsView } from '../components/MintedNftsView';
+const PARCEL0_NFT_CONTRACT_ADDRESS = '0x209723a65844093Ad769d557a22742e0f661959d';
 const numberOfMintedNFTsSoFar = 1; // TODO trkaplan calculate this value
 interface ConnectButtonProps {
   enabled?: boolean;
@@ -24,30 +23,21 @@ interface ConnectButtonProps {
   text?: string;
 }
 enum VIEWS {
-  "INITIAL_VIEW",
-  "MINTED_NFTS",
+  'INITIAL_VIEW',
+  'MINTED_NFTS',
 }
 
-const ConnectButton: FC<ConnectButtonProps> = ({
-  enabled,
-  onClick,
-  address,
-}) => {
+const ConnectButton: FC<ConnectButtonProps> = ({ enabled, onClick, address }) => {
   // TODO trkaplan disable if wallet is not installed
   return (
     <button disabled={!enabled} onClick={onClick} className="text-button">
-      {address ? shortenWalletAddress(address) : "Connect"}
+      {address ? shortenWalletAddress(address) : 'Connect'}
     </button>
   );
 };
 // https://docs.ethers.io/v5/api/utils/hashing/#utils-solidityKeccak256
 function hashToken(address: keyof Addresses, allowance: number) {
-  return Buffer.from(
-    ethers.utils
-      .solidityKeccak256(["address", "uint256"], [address, allowance])
-      .slice(2),
-    "hex"
-  );
+  return Buffer.from(ethers.utils.solidityKeccak256(['address', 'uint256'], [address, allowance]).slice(2), 'hex');
 }
 const Home: NextPage = () => {
   const [numberOfMintedNfts, setNumberOfMintedNfts] = useState<number>(0);
@@ -67,11 +57,9 @@ const Home: NextPage = () => {
     setNumberOfMintedNfts(0);
   }
   const tree = new MerkleTree(
-    Object.entries(addresses).map(([address, allowance]) =>
-      hashToken(address, allowance)
-    ),
+    Object.entries(addresses).map(([address, allowance]) => hashToken(address, allowance)),
     keccak256,
-    { sortPairs: true }
+    { sortPairs: true },
   );
 
   const handleLoad = () => {
@@ -84,13 +72,10 @@ const Home: NextPage = () => {
   function showMintedNfts() {
     setCurrentView(VIEWS.MINTED_NFTS);
   }
-  function getClaimButtonText(
-    numberOfMintedNfts: number,
-    eligibleNftCount: number
-  ) {
-    let text = "";
+  function getClaimButtonText(numberOfMintedNfts: number, eligibleNftCount: number) {
+    let text = '';
     if (numberOfMintedNfts === 0 && eligibleNftCount === 0) {
-      text = "CLAIM PLOTS";
+      text = 'CLAIM PLOTS';
     } else if (numberOfMintedNfts > 0) {
       text = `${numberOfMintedNfts} PLOTS CLAIMED`;
     } else if (eligibleNftCount > 0) {
@@ -100,12 +85,8 @@ const Home: NextPage = () => {
   }
   async function claim() {
     const signer = provider.getSigner();
-    const parcel0Contract = new ParcelNFT__factory().attach(
-      PARCEL0_NFT_CONTRACT_ADDRESS
-    );
-    const allowance: number = Number(
-      addresses[address?.toLowerCase() as keyof Addresses]
-    );
+    const parcel0Contract = new ParcelNFT__factory().attach(PARCEL0_NFT_CONTRACT_ADDRESS);
+    const allowance: number = Number(addresses[address?.toLowerCase() as keyof Addresses]);
     const proof = tree.getHexProof(hashToken(address!, allowance));
     const numberOfMinted = await parcel0Contract
       .connect(signer)
@@ -116,10 +97,10 @@ const Home: NextPage = () => {
         .connect(signer)
         .allowListMint(eligibleNftCount, allowance, proof)
         .then((res: any) => {
-          console.log("response", res);
+          console.log('response', res);
         });
     } else {
-      console.log("Already claimed!");
+      console.log('Already claimed!');
     }
   }
 
@@ -128,18 +109,16 @@ const Home: NextPage = () => {
 
   useEffect(() => {
     if (address) {
+      // noinspection JSIgnoredPromiseFromCall
       checkEligibility(address);
     }
   }, [address]);
 
   const checkEligibility = async (address: string) => {
     try {
       const signer = provider.getSigner();
-      const parcel0Contract = new ParcelNFT__factory().attach(
-        PARCEL0_NFT_CONTRACT_ADDRESS
-      );
-      const allowance: number =
-        addresses[address.toLowerCase() as keyof Addresses];
+      const parcel0Contract = new ParcelNFT__factory().attach(PARCEL0_NFT_CONTRACT_ADDRESS);
+      const allowance: number = addresses[address.toLowerCase() as keyof Addresses];
 
       //const proof = tree.getHexProof(hashToken(address, allowance));
       // TODO trkaplan disable the claim button add loading indicator until eligibility check is complete
@@ -161,21 +140,14 @@ const Home: NextPage = () => {
     }
   };
 
-  const parcelProperties = getParcelProperties(
-    numberOfMintedNFTsSoFar,
-    MAX_NFT_TO_MINT
-  );
+  const parcelProperties = getParcelProperties(numberOfMintedNFTsSoFar, MAX_NFT_TO_MINT);
   return (
     <>
       <div className="page-header">
         <div className="header-content">
           <img className="logo" src="/citydao-logo.png" alt="CityDAO" />
           <div className="connect-button-container">
-            <ConnectButton
-              onClick={connect}
-              address={address!}
-              enabled={true}
-            />
+            <ConnectButton onClick={connect} address={address!} enabled={true} />
           </div>
         </div>
       </div>
@@ -188,8 +160,7 @@ const Home: NextPage = () => {
                 <div className="address">70 HAIL BASIN RD, POWELL, WYOMING</div>
               </div>
               <div className="message-box">
-                Claim ends in{" "}
-                <span className="remaining-time">45 Days 00 Hours</span>{" "}
+                Claim ends in <span className="remaining-time">45 Days 00 Hours</span>{' '}
                 {/* TODO trkaplan use countdown component */}
                 <br />
                 {address && (
@@ -202,7 +173,7 @@ const Home: NextPage = () => {
                 )}
                 {!address && (
                   <span>
-                    To claim{" "}
+                    To claim{' '}
                     <a href="#" onClick={connect}>
                       connect your wallet
                     </a>
@@ -213,20 +184,15 @@ const Home: NextPage = () => {
             {currentView === VIEWS.INITIAL_VIEW ? (
               <img src="/citydao-parcel-0-NFT-Art.png" alt="Parcel Zero NFT" />
             ) : (
-              <MintedNftsView
-                numberOfNfts={numberOfMintedNfts}
-                navigateToHome={navigateToHome}
-              />
+              <MintedNftsView numberOfNfts={numberOfMintedNfts} navigateToHome={navigateToHome} />
             )}
           </div>
           <div className="content-right">
             {/* nftCount */}
             <button
               disabled={!address}
               onClick={numberOfMintedNfts === 0 ? claim : showMintedNfts}
-              className={
-                numberOfMintedNfts > 0 ? "border-button default-cursor" : ""
-              }
+              className={numberOfMintedNfts > 0 ? 'border-button default-cursor' : ''}
             >
               {getClaimButtonText(numberOfMintedNfts, eligibleNftCount)}
             </button>