Merge pull request #160 from embiem/add-nft-supply-hook

Add hook to get the DEV NFT supply

Author: Narb

frontend/.gitignore

@@ -22,4 +22,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-.next
+.next

frontend/_tests_/hooks/useDevNFTSupply.test.ts

@@ -0,0 +1,82 @@
+import { BigNumber } from '@ethersproject/bignumber';
+import { renderHook } from '@testing-library/react-hooks';
+import crypto from 'crypto';
+
+import { useDevNFTSupply } from '../../src/hooks/useDevNFTSupply';
+import { Ddao__factory } from '../../types/ethers-contracts/factories/Ddao__factory';
+
+jest.mock('../../types/ethers-contracts/factories/Ddao__factory');
+
+const mockedDdaoFactory = Ddao__factory as jest.Mocked<typeof Ddao__factory>;
+
+test('should return correct supply values & transition loading state', async () => {
+  mockedDdaoFactory.connect.mockImplementation((address, provider) => {
+    return {
+      queryFilter: async () => [
+        {
+          args: {
+            tokenId: BigNumber.from(1),
+            to: '0x91d7a9e7c09477392290fe16c1b243e4a36d279a',
+          },
+        },
+        {
+          args: {
+            tokenId: BigNumber.from(8000),
+            to: '0x91d7a9e7c09477392290fe16c1b243e4a36d279a',
+          },
+        },
+      ],
+      filters: { Transfer: () => {} },
+    } as any;
+  });
+
+  const { result, waitForValueToChange } = renderHook(() => useDevNFTSupply());
+
+  expect(result.current.isLoading).toBe(true);
+  await waitForValueToChange(() => result.current.isLoading);
+  expect(result.current.isLoading).toBe(false);
+
+  expect(result.current.maxSupply).toBe(8000);
+  expect(result.current.totalSupply).toBe(2);
+  expect(result.current.lockedSupply).toBe(1);
+  expect(result.current.publicSupply).toBe(1);
+
+  expect(result.current.uniqueTokenHolders).toBe(1);
+
+  expect(result.current.remainingTotalSupply).toBe(8000 - 2);
+  expect(result.current.remainingPublicSupply).toBe(7777 - 1);
+  expect(result.current.remainingLockedSupply).toBe(8000 - 7777 - 1);
+});
+
+test('should correctly handle "all minted" state', async () => {
+  mockedDdaoFactory.connect.mockImplementation((address, provider) => {
+    return {
+      totalSupply: async () => ({ toNumber: () => 1 }),
+      queryFilter: async () =>
+        [...Array(8000)].map((_, idx) => ({
+          args: {
+            tokenId: BigNumber.from(idx + 1),
+            to: `0x${crypto.randomBytes(32).toString('hex')}`,
+          },
+        })),
+      filters: { Transfer: () => {} },
+    } as any;
+  });
+
+  const { result, waitForValueToChange } = renderHook(() => useDevNFTSupply());
+
+  expect(result.current.isLoading).toBe(true);
+  await waitForValueToChange(() => result.current.isLoading);
+  expect(result.current.isLoading).toBe(false);
+
+  expect(result.current.maxSupply).toBe(8000);
+  expect(result.current.totalSupply).toBe(8000);
+  expect(result.current.lockedSupply).toBe(8000 - 7777);
+  expect(result.current.publicSupply).toBe(7777);
+
+  expect(result.current.uniqueTokenHolders).toBe(8000);
+
+  expect(result.current.remainingTotalSupply).toBe(0);
+  expect(result.current.remainingPublicSupply).toBe(0);
+  expect(result.current.remainingLockedSupply).toBe(0);
+});

frontend/package.json

@@ -39,7 +39,9 @@
     "contributors:generate": "all-contributors generate",
     "type-check": "tsc --noEmit",
     "test": "jest",
-    "test:watch": "jest --watch --detectOpenHandles"
+    "test:watch": "jest --watch --detectOpenHandles",
+    "generate-types": "typechain --target ethers-v5 src/artifacts/*.json",
+    "postinstall": "yarn generate-types"
   },
   "eslintConfig": {
     "extends": [
@@ -63,6 +65,7 @@
   "devDependencies": {
     "@testing-library/cypress": "^8.0.1",
     "@testing-library/react-hooks": "^7.0.2",
+    "@typechain/ethers-v5": "^8.0.1",
     "all-contributors-cli": "^6.20.0",
     "cypress": "^8.4.1",
     "eslint": "^7.32.0",
@@ -73,6 +76,7 @@
     "husky": "^7.0.2",
     "lint-staged": "^11.1.2",
     "prettier": "2.3.2",
+    "typechain": "^6.0.2",
     "typescript": "^4.4.3"
   },
   "lint-staged": {

frontend/public/locales/en/common.json

@@ -30,6 +30,7 @@
   "connectWalletText": "Connect Wallet",
   "ethereumNetworkPrompt": "Please Connect to the Ethereum Mainnet",
   "availableTokensText": "View the available Token IDs",
+  "remainingTokensText": "{{remainingTokens}} tokens left / {{uniqueAddressCount}} devs joined",
   "mintPageHeader": "DEVS Token Minter",
   "projectsList": "A list of community projects created by the Developer DAO community.",
   "ddaoTokenSearch": "DDAO Token Search",

frontend/src/components/DirectMint/DirectMintBox.tsx

@@ -12,11 +12,15 @@ import {
 } from '@chakra-ui/react';
 import { useTranslation } from 'next-i18next';
 import { TOKEN_FINDER_URL } from '../../utils/DeveloperDaoConstants';
+import { useDevNFTSupply } from '../../hooks/useDevNFTSupply';
 
 // Layout for the Direct Mint Box
 // used on the minting page
 const DirectMintBox = () => {
   const { t } = useTranslation();
+  const { isLoading, remainingPublicSupply, uniqueTokenHolders } =
+    useDevNFTSupply();
+
   return (
     <>
       <Container maxW="container.md" centerContent>
@@ -37,6 +41,16 @@ const DirectMintBox = () => {
                 {t('here')}
               </Link>
             </Text>
+            <Text fontSize={{ base: 'xs', sm: 'xl' }}>
+              {t('remainingTokensText', {
+                remainingTokens: isLoading
+                  ? '...'
+                  : remainingPublicSupply.toLocaleString(),
+                uniqueAddressCount: isLoading
+                  ? '...'
+                  : uniqueTokenHolders?.toLocaleString(),
+              })}
+            </Text>
             <DirectMint />
           </Stack>
         </Box>

frontend/src/hooks/useDevNFTSupply.ts

@@ -0,0 +1,100 @@
+import { useEffect, useState } from 'react';
+import { ethers } from 'ethers';
+import {
+  AlchemyProvider,
+  FallbackProvider,
+  InfuraProvider,
+} from '@ethersproject/providers';
+
+import { DEVELOPER_DAO_CONTRACT } from '../utils/DeveloperDaoConstants';
+import { Ddao__factory } from '../../types/ethers-contracts/factories/Ddao__factory';
+
+// TokenIDs start at 1. Tokens 1-7777 (supply of 7777) are open to mint by anyone. 7778-8000 are locked to mint by contract owner
+const MAX_SUPPLY = 8000;
+const PUBLIC_MAX_SUPPLY = 7777;
+
+export function useDevNFTSupply() {
+  const [totalSupply, setTotalSupply] = useState<number>(-1);
+  const [lockedSupply, setLockedSupply] = useState<number>(-1);
+  const [uniqueTokenHolderCount, setUniqueTokenHolderCount] =
+    useState<number>(-1);
+
+  useEffect(() => {
+    const fetch = async () => {
+      const contract = Ddao__factory.connect(
+        DEVELOPER_DAO_CONTRACT,
+        new FallbackProvider([
+          { provider: new InfuraProvider() },
+          { provider: new AlchemyProvider() },
+        ]),
+      );
+
+      // Get all TransferEvents
+      const transferredTokens = await contract.queryFilter(
+        contract.filters.Transfer(),
+        0,
+        'latest',
+      );
+
+      // Track the latest owner of each token
+      const claimedTokens: Record<string, string> = {};
+      transferredTokens.forEach((tx) => {
+        const tokenId = tx.args.tokenId.toNumber();
+        claimedTokens[tokenId] = tx.args.to;
+      });
+
+      // Amount of minted tokens
+      const totalSupply = Object.keys(claimedTokens).length;
+
+      // Put the addresses in a set to get the amount of unique addresses
+      const uniqueAddresses = new Set<string>(Object.values(claimedTokens));
+
+      // Count how many tokens of the locked supply have been minted
+      let countLockedAndMinted = 0;
+      for (
+        let lockedTokenId = PUBLIC_MAX_SUPPLY + 1;
+        lockedTokenId <= MAX_SUPPLY;
+        lockedTokenId++
+      ) {
+        if (
+          claimedTokens[lockedTokenId] &&
+          claimedTokens[lockedTokenId] !== ethers.constants.AddressZero
+        )
+          countLockedAndMinted++;
+      }
+
+      setLockedSupply(countLockedAndMinted);
+      setTotalSupply(totalSupply);
+      setUniqueTokenHolderCount(uniqueAddresses.size);
+    };
+
+    fetch();
+  }, []);
+
+  return {
+    isLoading:
+      totalSupply === -1 ||
+      lockedSupply === -1 ||
+      uniqueTokenHolderCount === -1,
+
+    // This is the amount of total minted DEV NFTs, same as calling `totalSupply()` on the contract
+    totalSupply,
+
+    // Count of unique token holder addresses
+    uniqueTokenHolders: uniqueTokenHolderCount,
+
+    // This is the amount of minted DEV NFTs that only the contract owner can mint (TokenIDs 7778-8000, incl.)
+    lockedSupply,
+
+    // This is the amount of publicly minted DEV NFTs, which is open to mint by anyone (TokenIDs 1-7777, incl.)
+    publicSupply: totalSupply - lockedSupply,
+
+    // Total number of possible DEV NFT. This is a constant that cannot be changed
+    maxSupply: MAX_SUPPLY,
+
+    // Some calculations to make these values easily accessible for display in UI
+    remainingTotalSupply: MAX_SUPPLY - totalSupply,
+    remainingPublicSupply: PUBLIC_MAX_SUPPLY - (totalSupply - lockedSupply),
+    remainingLockedSupply: MAX_SUPPLY - PUBLIC_MAX_SUPPLY - lockedSupply,
+  };
+}