Skip to content

Commit 3e960b2

Browse files
kien-ngokien-ngo
committed
update
1 parent a1b518c commit 3e960b2

File tree

6 files changed

+379
-0
lines changed

6 files changed

+379
-0
lines changed

‎apps/dashboard/public/drops/zerion.mp4‎

1.39 MB
Binary file not shown.

‎apps/dashboard/src/@3rdweb-sdk/react/components/connect-wallet/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ export const CustomConnectWallet = (props: {
3535
connectButtonClassName?: string;
3636
signInLinkButtonClassName?: string;
3737
detailsButtonClassName?: string;
38+
chain?: Chain;
3839
}) => {
3940
const thirdwebClient = useThirdwebClient();
4041
const loginRequired =
@@ -204,6 +205,7 @@ export const CustomConnectWallet = (props: {
204205
},
205206
},
206207
}}
208+
chain={props.chain}
207209
/>
208210

209211
<LazyConfigureNetworkModal

‎apps/dashboard/src/app/drops/[slug]/layout.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { AppFooter } from "@/components/blocks/app-footer";
2+
import { ErrorProvider } from "contexts/error-handler";
3+
4+
export default function DashboardLayout(props: { children: React.ReactNode }) {
5+
return (
6+
<ErrorProvider>
7+
<div className="flex min-h-screen flex-col bg-background">
8+
{/* <DashboardHeader /> */}
9+
<div className="flex grow flex-col">{props.children}</div>
10+
<AppFooter />
11+
</div>
12+
</ErrorProvider>
13+
);
14+
}

‎apps/dashboard/src/app/drops/[slug]/mint-ui.tsx‎

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
"use client";
2+
3+
import { Badge } from "@/components/ui/badge";
4+
import { Button } from "@/components/ui/button";
5+
import { Card, CardContent, CardFooter } from "@/components/ui/card";
6+
import { Input } from "@/components/ui/input";
7+
import { Label } from "@/components/ui/label";
8+
import { Switch } from "@/components/ui/switch";
9+
import { useThirdwebClient } from "@/constants/thirdweb.client";
10+
import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
11+
import { MinusIcon, PlusIcon } from "lucide-react";
12+
import { useState } from "react";
13+
import type React from "react";
14+
import { toast } from "sonner";
15+
import type { ThirdwebContract } from "thirdweb";
16+
import { ClaimButton, MediaRenderer, useActiveAccount } from "thirdweb/react";
17+
18+
type Props = {
19+
contract: ThirdwebContract;
20+
displayName: string;
21+
description: string;
22+
thumbnail: string;
23+
hideQuantitySelector?: boolean;
24+
hideMintToCustomAddress?: boolean;
25+
} & ({ type: "erc1155"; tokenId: bigint } | { type: "erc721" }) &
26+
(
27+
| {
28+
pricePerToken: number;
29+
currencySymbol: string | null;
30+
noActiveClaimCondition: false;
31+
}
32+
| { noActiveClaimCondition: true }
33+
);
34+
35+
export function NftMint(props: Props) {
36+
const [isMinting, setIsMinting] = useState(false);
37+
const [quantity, setQuantity] = useState(1);
38+
const [useCustomAddress, setUseCustomAddress] = useState(false);
39+
const [customAddress, setCustomAddress] = useState("");
40+
const account = useActiveAccount();
41+
const client = useThirdwebClient();
42+
43+
const decreaseQuantity = () => {
44+
setQuantity((prev) => Math.max(1, prev - 1));
45+
};
46+
47+
const increaseQuantity = () => {
48+
setQuantity((prev) => prev + 1); // Assuming a max of 10 NFTs can be minted at once
49+
};
50+
51+
const handleQuantityChange = (e: React.ChangeEvent<HTMLInputElement>) => {
52+
const value = Number.parseInt(e.target.value);
53+
if (!Number.isNaN(value)) {
54+
setQuantity(Math.min(Math.max(1, value)));
55+
}
56+
};
57+
58+
return (
59+
<div className="mx-4 my-16 flex flex-col items-center justify-center transition-colors duration-200">
60+
<Card className="w-full max-w-md">
61+
<CardContent className="pt-6">
62+
<div className="relative mb-4 aspect-square overflow-hidden rounded-lg">
63+
<MediaRenderer
64+
client={client}
65+
className="h-full w-full object-cover"
66+
alt=""
67+
src={props.thumbnail}
68+
/>
69+
{!props.noActiveClaimCondition && (
70+
<Badge className="absolute top-2 right-2">
71+
{props.pricePerToken === 0
72+
? "Free"
73+
: `${props.pricePerToken} ${props.currencySymbol}/each`}
74+
</Badge>
75+
)}
76+
</div>
77+
<h2 className="mb-2 font-bold text-2xl">{props.displayName}</h2>
78+
<p className="mb-4 text-muted-foreground">{props.description}</p>
79+
{!props.hideQuantitySelector && !props.noActiveClaimCondition && (
80+
<div className="mb-4 flex items-center justify-between">
81+
<div className="flex items-center">
82+
<Button
83+
variant="outline"
84+
size="icon"
85+
onClick={decreaseQuantity}
86+
disabled={quantity <= 1}
87+
aria-label="Decrease quantity"
88+
className="rounded-r-none"
89+
>
90+
<MinusIcon className="h-4 w-4" />
91+
</Button>
92+
<Input
93+
type="number"
94+
value={quantity}
95+
onChange={handleQuantityChange}
96+
className="w-28 rounded-none border-x-0 pl-6 text-center"
97+
min="1"
98+
/>
99+
<Button
100+
variant="outline"
101+
size="icon"
102+
onClick={increaseQuantity}
103+
aria-label="Increase quantity"
104+
className="rounded-l-none"
105+
>
106+
<PlusIcon className="h-4 w-4" />
107+
</Button>
108+
</div>
109+
<div className="pr-1 font-semibold text-base">
110+
Total: {props.pricePerToken * quantity} {props.currencySymbol}
111+
</div>
112+
</div>
113+
)}
114+
115+
{!props.hideMintToCustomAddress && (
116+
<div className="mb-4 flex items-center space-x-2">
117+
<Switch
118+
id="custom-address"
119+
checked={useCustomAddress}
120+
onCheckedChange={setUseCustomAddress}
121+
/>
122+
<Label
123+
htmlFor="custom-address"
124+
className={`${useCustomAddress ? "" : "text-gray-400"} cursor-pointer`}
125+
>
126+
Mint to a custom address
127+
</Label>
128+
</div>
129+
)}
130+
{useCustomAddress && (
131+
<div className="mb-4">
132+
<Input
133+
id="address-input"
134+
type="text"
135+
placeholder="Enter recipient address"
136+
value={customAddress}
137+
onChange={(e) => setCustomAddress(e.target.value)}
138+
className="w-full"
139+
/>
140+
</div>
141+
)}
142+
</CardContent>
143+
<CardFooter>
144+
{account ? (
145+
<ClaimButton
146+
style={{ width: "100%" }}
147+
contractAddress={props.contract.address}
148+
chain={props.contract.chain}
149+
client={props.contract.client}
150+
claimParams={
151+
props.type === "erc1155"
152+
? {
153+
type: "ERC1155",
154+
tokenId: props.tokenId,
155+
quantity: BigInt(quantity),
156+
to: customAddress || account.address,
157+
from: account.address,
158+
}
159+
: {
160+
type: "ERC721",
161+
quantity: BigInt(quantity),
162+
to: customAddress || account.address,
163+
from: account.address,
164+
}
165+
}
166+
disabled={isMinting || props.noActiveClaimCondition}
167+
onTransactionSent={() => {
168+
toast.loading("Minting NFT", { id: "toastId" });
169+
setIsMinting(true);
170+
}}
171+
onTransactionConfirmed={() => {
172+
toast.success("Minted successfully", { id: "toastId" });
173+
setIsMinting(false);
174+
}}
175+
onError={(err) => {
176+
toast.error(err.message, { id: "toastId" });
177+
setIsMinting(false);
178+
}}
179+
>
180+
{props.noActiveClaimCondition
181+
? "Minting not ready"
182+
: `${quantity > 1 ? `Mint ${quantity} NFTs` : "Mint"}`}
183+
</ClaimButton>
184+
) : (
185+
<CustomConnectWallet
186+
loginRequired={false}
187+
connectButtonClassName="!w-full !rounded !bg-primary !text-primary-foreground !px-4 !py-2 !text-sm"
188+
chain={props.contract.chain}
189+
/>
190+
)}
191+
</CardFooter>
192+
</Card>
193+
</div>
194+
);
195+
}

‎apps/dashboard/src/app/drops/[slug]/page.tsx‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
import { getThirdwebClient } from "@/constants/thirdweb.server";
2+
import { defineDashboardChain } from "lib/defineDashboardChain";
3+
import type { Metadata } from "next";
4+
import { notFound } from "next/navigation";
5+
import { getContract, toTokens } from "thirdweb";
6+
import { getContractMetadata } from "thirdweb/extensions/common";
7+
import { getCurrencyMetadata } from "thirdweb/extensions/erc20";
8+
import {
9+
getActiveClaimCondition as getActiveClaimCondition721,
10+
getNFT as getNFT721,
11+
} from "thirdweb/extensions/erc721";
12+
import {
13+
getActiveClaimCondition as getActiveClaimCondition1155,
14+
getNFT as getNFT1155,
15+
} from "thirdweb/extensions/erc1155";
16+
import { NftMint } from "./mint-ui";
17+
18+
type DropPageData = {
19+
slug: string;
20+
contractAddress: string;
21+
chainId: number;
22+
hideQuantitySelector?: boolean;
23+
hideMintToCustomAddress?: boolean;
24+
// If not defined, we will use the image of the NFT or contract's image
25+
thumbnail?: string;
26+
metadata: Metadata;
27+
} & ({ type: "erc1155"; tokenId: bigint } | { type: "erc721" });
28+
29+
const DROP_PAGES: DropPageData[] = [
30+
{
31+
slug: "test",
32+
type: "erc1155",
33+
contractAddress: "0xBD9d7f15f3C850B35c30b8F9F698B511c20b7263",
34+
tokenId: 0n,
35+
chainId: 11155111,
36+
hideQuantitySelector: true,
37+
hideMintToCustomAddress: true,
38+
thumbnail: "/drops/zerion.mp4",
39+
metadata: {
40+
title: "Test mint page",
41+
description: "none",
42+
},
43+
},
44+
{
45+
slug: "zero-chain-announcement",
46+
type: "erc1155",
47+
contractAddress: "0x78264a0af02d894f2d9ae3e11E4a503b352CC437",
48+
tokenId: 0n,
49+
chainId: 543210,
50+
hideMintToCustomAddress: true,
51+
hideQuantitySelector: true,
52+
thumbnail: "/drops/zerion.mp4",
53+
metadata: {
54+
title: "ZERO x thirdweb",
55+
description:
56+
"This exclusive commemorative NFT marks the official launch of ZERϴ's mainnet and our exciting partnership with thirdweb. Own a piece of this milestone in blockchain history as we make onchain transactions free with zero.network",
57+
openGraph: {
58+
title: "ZERO x thirdweb",
59+
description:
60+
"This exclusive commemorative NFT marks the official launch of ZERϴ's mainnet and our exciting partnership with thirdweb. Own a piece of this milestone in blockchain history as we make onchain transactions free with zero.network",
61+
},
62+
},
63+
},
64+
65+
// Add more chains here
66+
];
67+
68+
export async function generateMetadata({
69+
params,
70+
}: { params: Promise<{ slug: string }> }): Promise<Metadata> {
71+
const { slug } = await params;
72+
const project = DROP_PAGES.find((p) => p.slug === slug);
73+
if (!project) {
74+
return notFound();
75+
}
76+
return project.metadata;
77+
}
78+
79+
export default async function DropPage({
80+
params,
81+
}: { params: Promise<{ slug: string }> }) {
82+
const { slug } = await params;
83+
84+
const project = DROP_PAGES.find((p) => p.slug === slug);
85+
86+
if (!project) {
87+
return notFound();
88+
}
89+
// eslint-disable-next-line no-restricted-syntax
90+
const chain = defineDashboardChain(project.chainId, undefined);
91+
const client = getThirdwebClient();
92+
93+
const contract = getContract({
94+
address: project.contractAddress,
95+
chain,
96+
client,
97+
});
98+
99+
const [nft, claimCondition, contractMetadata] = await Promise.all([
100+
project.type === "erc1155"
101+
? getNFT1155({ contract, tokenId: project.tokenId })
102+
: getNFT721({ contract, tokenId: 0n }),
103+
project.type === "erc1155"
104+
? getActiveClaimCondition1155({
105+
contract,
106+
tokenId: project.tokenId,
107+
}).catch(() => undefined)
108+
: getActiveClaimCondition721({ contract }).catch(() => undefined),
109+
getContractMetadata({ contract }),
110+
]);
111+
112+
const thumbnail =
113+
project.thumbnail || nft.metadata.image || contractMetadata.image || "";
114+
115+
const displayName = contractMetadata.name || nft.metadata.name || "";
116+
117+
const description =
118+
typeof contractMetadata.description === "string" &&
119+
contractMetadata.description
120+
? contractMetadata.description
121+
: nft.metadata.description || "";
122+
123+
if (!claimCondition) {
124+
return (
125+
<NftMint
126+
contract={contract}
127+
displayName={displayName}
128+
thumbnail={thumbnail}
129+
description={description}
130+
{...project}
131+
noActiveClaimCondition
132+
/>
133+
);
134+
}
135+
136+
const currencyMetadata = claimCondition.currency
137+
? await getCurrencyMetadata({
138+
contract: getContract({
139+
address: claimCondition.currency,
140+
chain,
141+
client,
142+
}),
143+
})
144+
: undefined;
145+
146+
if (!currencyMetadata) {
147+
return notFound();
148+
}
149+
150+
const pricePerToken = Number(
151+
toTokens(claimCondition.pricePerToken, currencyMetadata.decimals),
152+
);
153+
154+
return (
155+
<NftMint
156+
contract={contract}
157+
displayName={displayName || ""}
158+
thumbnail={thumbnail}
159+
description={description || ""}
160+
currencySymbol={currencyMetadata.symbol}
161+
pricePerToken={pricePerToken}
162+
noActiveClaimCondition={false}
163+
{...project}
164+
/>
165+
);
166+
}

‎apps/dashboard/src/components/product-pages/common/Topnav.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
"use client";
2+
13
import { Box, Container, Flex, useBreakpointValue } from "@chakra-ui/react";
24
import { useScrollPosition } from "@n8tb1t/use-scroll-position";
35
import { Logo } from "components/logo";

0 commit comments

Comments
 (0)