Show remaining token count on mint page

Author: embiem

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": "We have {{remainingTokens}} Tokens left",
   "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,13 @@ 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 { loading, remainingPublicSupply } = useDevNFTSupply();
   return (
     <>
       <Container maxW="container.md" centerContent>
@@ -37,6 +39,11 @@ const DirectMintBox = () => {
                 {t('here')}
               </Link>
             </Text>
+            <Text fontSize={{ base: 'xs', sm: 'xl' }}>
+              {t('remainingTokensText', {
+                remainingTokens: loading ? '...' : remainingPublicSupply,
+              })}
+            </Text>
             <DirectMint />
           </Stack>
         </Box>