Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add mint page #1

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: add mint page #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 9 additions & 5 deletions components/Account.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,11 +55,15 @@ function Account() {
}
};

useEffect(() => {
if (!isAuthenticated && !loading) {
router.push("/");
}
}, [isAuthenticated, loading, router]);
/**
* NOTE: The following wasn't allowing me to access /mint.
* Fix if necessary.
*/
// useEffect(() => {
// if (!isAuthenticated && !loading) {
// router.push("/");
// }
// }, [isAuthenticated, loading, router]);

if (loading) {
return (
Expand Down
3 changes: 3 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@
"start": "next start"
},
"dependencies": {
"@3rdweb/hooks": "^1.9.2",
"@3rdweb/react": "^1.9.3",
"@3rdweb/sdk": "^1.41.0",
"@headlessui/react": "^1.4.1",
"@heroicons/react": "^1.0.4",
"@metamask/eth-sig-util": "^4.0.0",
Expand Down
147 changes: 82 additions & 65 deletions pages/_app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { MoralisProvider } from "react-moralis";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import ReactTooltip from "react-tooltip";
import { ThirdwebWeb3Provider } from "@3rdweb/hooks";
import "tailwindcss/tailwind.css";
import Account from "../components/Account";
import Chains from "../components/Chains";
Expand All @@ -19,90 +20,106 @@ const SERVER_URL = process.env.NEXT_PUBLIC_MORALIS_SERVER_URL;
const GTag = "G-4HENSLHDZS";

function MyApp({ Component, pageProps: { session, ...pageProps } }) {
// Support Ethereum mainnet & rinkeby
const supportedChainIds = [1, 4];

// Support the Metamask wallet
const connectors = {
injected: {},
};

const hideNavbar = pageProps.hideNavbar;
return (
<MoralisProvider appId={APP_ID} serverUrl={SERVER_URL}>
<NextNProgress height={7} color="#9366F9" />
<MetaHead />
<Head key="main-head">
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossOrigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Space+Grotesk:wght@300;400;500;700&display=swap"
rel="stylesheet"
/>
<ThirdwebWeb3Provider
supportedChainIds={supportedChainIds}
connectors={connectors}
>
<NextNProgress height={7} color="#9366F9" />
<MetaHead />
<Head key="main-head">
<link
rel="preconnect"
href="https://fonts.googleapis.com"
/>
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossOrigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Space+Grotesk:wght@300;400;500;700&display=swap"
rel="stylesheet"
/>

{process.env.NODE_ENV === "production" &&
typeof window !== "undefined" && (
<>
<script
async
type="text/javascript"
src={`https://www.googletagmanager.com/gtag/js?id=${GTag}`}
/>
{/* <!-- Google Tag Manager --> */}
<script
dangerouslySetInnerHTML={{
__html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
{process.env.NODE_ENV === "production" &&
typeof window !== "undefined" && (
<>
<script
async
type="text/javascript"
src={`https://www.googletagmanager.com/gtag/js?id=${GTag}`}
/>
{/* <!-- Google Tag Manager --> */}
<script
dangerouslySetInnerHTML={{
__html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-PWX4GJW');`,
}}
/>
{/* <!-- End Google Tag Manager --> */}
<script
dangerouslySetInnerHTML={{
__html: `
}}
/>
{/* <!-- End Google Tag Manager --> */}
<script
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${GTag}', { page_path: window.location.pathname });
`,
}}
/>
</>
)}
</Head>
}}
/>
</>
)}
</Head>

{!hideNavbar && (
<header>
<div className="container lg:px-8">
<div className="flex items-center justify-between py-5">
<div className="flex px-2 lg:px-0">
<div className="flex-shrink-0 flex items-center">
<Link href="/">
<div className="inline-flex items-center">
<Logo />
<h1 className="text-2xl ml-2 font-bold m-0 flex items-center">
Cryptowise
<span className="text-xs ml-2 bg-gray-200 text-gray-500 font-light rounded-md px-2 py-1">
Beta
</span>
</h1>
</div>
</Link>
{!hideNavbar && (
<header>
<div className="container lg:px-8">
<div className="flex items-center justify-between py-5">
<div className="flex px-2 lg:px-0">
<div className="flex-shrink-0 flex items-center">
<Link href="/">
<div className="inline-flex items-center">
<Logo />
<h1 className="text-2xl ml-2 font-bold m-0 flex items-center">
Cryptowise
<span className="text-xs ml-2 bg-gray-200 text-gray-500 font-light rounded-md px-2 py-1">
Beta
</span>
</h1>
</div>
</Link>
</div>
</div>
<div className="flex space-x-6 items-center">
{/* <Chains /> */}
<Account />
</div>
</div>
<div className="flex space-x-6 items-center">
{/* <Chains /> */}
<Account />
</div>
</div>
</div>
</header>
)}
</header>
)}

<div className="yellow-blur"></div>
<div className="pink-blur"></div>
<div className="yellow-blur"></div>
<div className="pink-blur"></div>

<Component {...pageProps} />
<ToastContainer />
<ReactTooltip effect="solid" />
<Component {...pageProps} />
<ToastContainer />
<ReactTooltip effect="solid" />
</ThirdwebWeb3Provider>
</MoralisProvider>
);
}
Expand Down
71 changes: 71 additions & 0 deletions pages/mint.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import { NextPage } from "next";
import { ThirdwebSDK } from "@3rdweb/sdk";
import Button from "../components/Button";
import { useWeb3 } from "@3rdweb/hooks";
import { useEffect, useState } from "react";
import { useMoralisData } from "../hooks/useMoralisData";

const sdk = new ThirdwebSDK(process.env.NEXT_PUBLIC_CRYPTOWISE_CONTRACT_CHAIN);
const bundleDropModule = sdk.getBundleDropModule(
process.env.NEXT_PUBLIC_CRYPTOWISE_CONTRACT_ADDRESS
);

const MintPage: NextPage = () => {
const [isClaiming, setIsClaiming] = useState(false);
const [hasClaimedNFT, sethasClaimedNFT] = useState(false);

const { address, provider } = useWeb3();

// The signer is required to sign transactions on the blockchain.
// Without it we can only read data, not write.
const signer = provider ? provider.getSigner() : undefined;

useEffect(() => {
// We pass the signer to the sdk, which enables us to interact with
// our deployed contract!
if (!signer) return;
sdk.setProviderOrSigner(signer);
}, [signer]);

const checkHasClaimedNFT = async () => {
try {
const results = await bundleDropModule.getOwned();
const hasClaimedNFT = !!results.length;
sethasClaimedNFT(hasClaimedNFT);
} catch (error) {
console.error(error.message);
}
};

useEffect(() => {
checkHasClaimedNFT();
}, [address]);

const claimNFT = async () => {
setIsClaiming(true);
try {
await bundleDropModule.claim("0", 1);
} catch (error) {
console.error(error.message);
} finally {
setIsClaiming(false);
sethasClaimedNFT(true);
}
};

const renderMintButton = () => {
return hasClaimedNFT ? (
<Button fullWidth disabled={hasClaimedNFT}>
You have already claimed the NFT!
</Button>
) : (
<Button fullWidth loading={isClaiming} onClick={claimNFT}>
Mint now
</Button>
);
};

return <div className="max-w-3xl mx-auto">{renderMintButton()}</div>;
};

export default MintPage;