Add ability to mint an NFT from any screen WeAreNewt#271

ga-reth · Apr 26, 2022 · 04392ba · 04392ba
1 parent ac6faab
commit 04392ba
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 5 deletions.
diff --git a/packages/frontend/package-lock.json b/packages/frontend/package-lock.json
diff --git a/packages/frontend/src/components/Navbar/index.tsx b/packages/frontend/src/components/Navbar/index.tsx
@@ -4,6 +4,8 @@ import ConnectButton from '../ConnectButton';
 import icon from '../../images/icon.png';
 import { useLocation } from 'react-router-dom';
 import Toggle from '../../ThemeToggle';
+import { Button } from '../Button';
+import MintModal from '../MintModal';
 import { useAppDataProvider } from '../../lib/providers/app-data-provider';
 
 interface Navigation {
@@ -14,6 +16,7 @@ interface Navigation {
 export default function Navbar() {
   const { currentAccount, ensName } = useAppDataProvider();
   const [menuOpen, setMenuOpen] = useState(false);
+  const [mintModalOpen, setMintModalOpen] = useState<boolean>(false);
   const location = useLocation();
   const activePage = location.pathname.split('/')[1];
 
@@ -134,10 +137,24 @@ export default function Navbar() {
                     </div>
                   );
                 })}
+
+                {/** Mint */}
+                {currentAccount && (
+                  <Button
+                    onClick={() => {
+                      setMintModalOpen(true);
+                    }}
+                  >
+                    Mint new
+                  </Button>
+                )}
+                {/** Mint Modal */}
+                <MintModal open={mintModalOpen} onClose={() => setMintModalOpen(false)} />
+
                 <Toggle />
               </div>
             </div>
-
+            
             {/** Wallet */}
             <div className="ml-3 relative">
               <ConnectButton />