thirdweb-dev
diff --git a/‎src/embeds/edition-drop.tsx‎
Lines changed: 11 additions & 28 deletions b/‎src/embeds/edition-drop.tsx‎
Lines changed: 11 additions & 28 deletions
@@ -5,30 +5,20 @@ import {
   useColorMode,
 } from "@chakra-ui/react";
 import { css, Global } from "@emotion/react";
-import { ThirdwebProvider, useContract } from "@thirdweb-dev/react";
+import { ThirdwebProvider, useContract, useNFT } from "@thirdweb-dev/react";
 import { EditionDrop } from "@thirdweb-dev/sdk";
 import { ThirdwebStorage } from "@thirdweb-dev/storage";
-import React, { useEffect, useMemo } from "react";
+import React, { useEffect } from "react";
 import { createRoot } from "react-dom/client";
 import { ERC1155ClaimButton } from "src/shared/claim-button-erc1155";
-import { ClaimPage } from "../shared/claim-page";
+import { TokenMetadataPage } from "../shared/token-metadata-page";
 import { Footer } from "../shared/footer";
 import { Header } from "../shared/header";
 import chakraTheme from "../shared/theme";
 import { fontsizeCss } from "../shared/theme/typography";
 import { parseIpfsGateway } from "../utils/parseIpfsGateway";
-
-interface BodyProps {
-  children?: React.ReactNode;
-}
-
-const Body: React.FC<BodyProps> = ({ children }) => {
-  return (
-    <Flex as="main" px="28px" w="100%" flexGrow={1}>
-      {children}
-    </Flex>
-  );
-};
+import { useGasless } from "../shared/hooks/useGasless";
+import { Body } from "src/shared/body";
 
 interface EditionDropEmbedProps {
   contractAddress: string;
@@ -45,6 +35,7 @@ const EditionDropEmbed: React.FC<EditionDropEmbedProps> = ({
 }) => {
   const { setColorMode } = useColorMode();
   const { contract: editionDrop } = useContract<EditionDrop>(contractAddress);
+  const { data: nft, isLoading } = useNFT(editionDrop, tokenId);
 
   useEffect(() => {
     setColorMode(colorScheme);
@@ -67,14 +58,14 @@ const EditionDropEmbed: React.FC<EditionDropEmbedProps> = ({
     >
       <Header primaryColor={primaryColor} colorScheme={colorScheme} />
       <Body>
-        <ClaimPage contract={editionDrop}>
+        <TokenMetadataPage metadata={nft?.metadata} isLoading={isLoading}>
           <ERC1155ClaimButton
             contract={editionDrop}
             tokenId={tokenId}
             primaryColor={primaryColor}
             colorScheme={colorScheme}
           />
-        </ClaimPage>
+        </TokenMetadataPage>
       </Body>
       <Footer />
     </Flex>
@@ -89,23 +80,15 @@ const App: React.FC = () => {
   const rpcUrl = urlParams.get("rpcUrl") || "";
   const tokenId = urlParams.get("tokenId") || "0";
   const relayerUrl = urlParams.get("relayUrl") || "";
+  const biconomyApiKey = urlParams.get("biconomyApiKey") || "";
+  const biconomyApiId = urlParams.get("biconomyApiId") || "";
 
   const ipfsGateway = parseIpfsGateway(urlParams.get("ipfsGateway") || "");
 
   const colorScheme = urlParams.get("theme") === "dark" ? "dark" : "light";
   const primaryColor = urlParams.get("primaryColor") || "purple";
 
-  const sdkOptions = useMemo(
-    () =>
-      relayerUrl
-        ? {
-            gasless: {
-              openzeppelin: { relayerUrl },
-            },
-          }
-        : undefined,
-    [relayerUrl],
-  );
+  const sdkOptions = useGasless(relayerUrl, biconomyApiKey, biconomyApiId);
 
   return (
     <>