immutable · jhesgodi · Oct 11, 2023 · Sep 27, 2023 · Oct 10, 2023 · Oct 10, 2023
@@ -13,9 +13,9 @@
   },
   "scripts": {
     "build": "yarn updateGameBridgeVersion && parcel build --no-cache --no-scope-hoist && yarn revertGameBridgeVersion",
+    "revertGameBridgeVersion": "./scripts/revertSdkVersion.sh",
     "start": "parcel",
-    "updateGameBridgeVersion": "./scripts/updateSdkVersion.sh",
-    "revertGameBridgeVersion": "./scripts/revertSdkVersion.sh"
+    "updateGameBridgeVersion": "./scripts/updateSdkVersion.sh"
   },
   "source": "src/index.html",
   "targets": {

@@ -27,6 +27,7 @@
     <title>Economy Mechanics Demo</title>
   </head>
   <body>
+    <script src="./imtbl-checkout.js"></script>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--

@@ -1,16 +1,17 @@
-import React from "react";
-import { BiomeThemeProvider, BiomeCombinedProviders } from "@biom3/react";
-import { onDarkBase } from "@biom3/design-tokens";
-import Header from "./components/Header";
-import { PassportProvider } from "./context/PassportProvider";
-import { DataProvider } from "./context/DataProvider";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
-import Container from "./components/Container";
-import Crafting from "./pages/Crafting";
-import PrimarySale from "./pages/PrimarySale";
-import Login from "./pages/Login";
-import { MulticallerProvider } from "./context/MulticallerProvider";
-import { MetamaskProvider } from "./context/MetamaskProvider";
+import React from 'react';
+import { BiomeThemeProvider, BiomeCombinedProviders } from '@biom3/react';
+import { onDarkBase } from '@biom3/design-tokens';
+import Header from './components/Header';
+import { PassportProvider } from './context/PassportProvider';
+import { DataProvider } from './context/DataProvider';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import Container from './components/Container';
+import Crafting from './pages/Crafting';
+import PrimarySale from './pages/PrimarySale';
+import Login from './pages/Login';
+import { MulticallerProvider } from './context/MulticallerProvider';
+import { MetamaskProvider } from './context/MetamaskProvider';
+import PrimaryRevenueWidget from './pages/PrimaryRevenueWidget';
 
 function App() {
   return (
@@ -23,9 +24,12 @@ function App() {
                 <BiomeThemeProvider theme={{ base: onDarkBase }}>
                   <div className="App">
                     <Container>
-                      <Header />
                       <Routes>
                         <Route path="/sale" element={<PrimarySale />} />
+                        <Route
+                          path="/mint-sale"
+                          element={<PrimaryRevenueWidget />}
+                        />
                         <Route path="/crafting" element={<Crafting />} />
                         <Route path="/login" element={<Login />} />
                       </Routes>

@@ -1,35 +1,65 @@
-import React from "react";
-import { Card } from "@biom3/react";
+import React, { useEffect, useState } from "react";
+import { Body, Box, Button, Card, StatefulButtCon } from "@biom3/react";
 import { NFT } from "@imtbl/generated-clients/dist/multi-rollup";
 
-const selectedStyle = {border: "base.border.size.100 solid", borderColor: "base.color.accent.1"}
-
 function ItemCard({
   nft,
   onClick,
-  isSelected,
+  withQtySelector
 }: {
-  nft: NFT;
-  onClick?: (nft: NFT) => void;
+  nft: any;
+  onClick?: (nft: NFT, quantity: number) => void;
   isSelected?: (nft: NFT) => boolean;
+  withQtySelector?: boolean;
 }) {
+  const [quantity, setQuantity] = useState<number>(1);
+
   const onCardClick = (nft: NFT) => {
-    onClick && onClick(nft);
+    if (quantity === 0) return;
+
+    onClick && onClick(nft, quantity);
   };
 
   return (
-    <Card onClick={() => onCardClick(nft)} sx={isSelected && isSelected(nft) ? selectedStyle : {}}>
-      <Card.Title>
-        <div>{nft.name}</div>
-        <div>Token {nft.token_id}</div>
-      </Card.Title>
-      <Card.Caption>{nft.description}</Card.Caption>
-      <Card.AssetImage
-        imageUrl={nft.image}
-        aspectRatio="4:3"
-        relativeImageSizeInLayout="60vw"
-      />
-    </Card>
+    <Box>
+      <Card>
+        <Card.Title>
+          <div>{nft.name}</div>
+          <div>Token {nft.token_id}</div>
+        </Card.Title>
+        <Card.Caption>USDC ${nft.price}</Card.Caption>
+        <Card.AssetImage
+          imageUrl={nft.image}
+          aspectRatio="4:3"
+          relativeImageSizeInLayout="60vw"
+        />
+      </Card>
+      {withQtySelector && (<Box>
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "space-between",
+            alignItems: "center",
+          }}
+        >
+          <StatefulButtCon
+            icon="Minus"
+            onClick={() => {
+              quantity > 1 && setQuantity(quantity - 1);
+            }}
+          />
+          <Body>{quantity}</Body>
+          <StatefulButtCon
+            icon="Add"
+            onClick={() => setQuantity(quantity + 1)}
+          />
+          <Button size={"medium"} onClick={() => onCardClick(nft)}>
+            Add
+          </Button>
+        </Box>
+      </Box>)}
+    </Box>
   );
 }
 

@@ -8,11 +8,13 @@ function ItemCards({
   onClick,
   isSelected,
   onRefetch,
+  withQtySelector,
 }: {
   nfts: Array<NFT>;
-  onClick?: (nft: NFT) => void;
+  onClick?: (nft: NFT, quantity: number) => void;
   isSelected?: (nft: NFT) => boolean;
   onRefetch?: () => void;
+  withQtySelector?: boolean;
 }) {
   const ref = useRef<HTMLDivElement>(null);
 
@@ -52,7 +54,13 @@ function ItemCards({
         {nfts &&
           nfts.map((nft, index) => (
             <Box sx={{ w: "100%", h: "100%" }}>
-              <ItemCard nft={nft} onClick={onClick} isSelected={isSelected} />
+              <ItemCard
+                nft={nft}
+                onClick={onClick}
+                isSelected={isSelected}
+                withQtySelector={withQtySelector}
+                key={index}
+              />
             </Box>
           ))}
         <span

@@ -164,7 +164,7 @@ function Crafting() {
             <Banner.Title>Crafting...</Banner.Title>
           </Banner>
         )}
-        {Array.from(successMessages.keys()).map((key) => (
+        {/* {Array.from(successMessages.keys()).map((key) => (
           <Banner
             key={key}
             variant="success"
@@ -178,7 +178,7 @@ function Crafting() {
               }}
             />
           </Banner>
-        ))}
+        ))} */}
         <Row>
           <Col xs={12} md={3}>
             <Box sx={{ marginBottom: "base.spacing.x8" }}>

@@ -0,0 +1,114 @@
+import { useEffect, useRef } from "react";
+import { IMTBLWidgetEvents } from "@imtbl/checkout-widgets";
+
+const useParams = () => {
+  const urlParams = new URLSearchParams(window.location.search);
+
+  const amount = urlParams.get("amount") as string;
+  const env = urlParams.get("env") as string;
+  const theme = urlParams.get("theme") as string;
+  const environmentId = urlParams.get("environmentId") as string;
+  const fromContractAddress = urlParams.get("fromContractAddress") as string;
+  const products = urlParams.get("products") as string;
+
+  return {
+    env,
+    theme,
+    environmentId,
+    fromContractAddress,
+    products,
+    amount,
+  };
+};
+
+const handleEvent = ((event: CustomEvent) => {
+  const detail = event.detail;
+  const provider = detail?.data?.provider;
+
+  if (provider) {
+    (async () => {
+      const signer = provider?.getSigner();
+      const walletAddress = (await signer?.getAddress()) || "";
+      window?.opener?.postMessage(
+        {
+          type: "mint_sale_popup_event",
+          identifier: "primary-revenue-widget-events",
+          data: {
+            type: [event.type, detail.type].filter(Boolean).join("-"),
+            walletProvider: detail.data.walletProvider,
+            walletAddress,
+          },
+        },
+        "*"
+      );
+    })();
+    return;
+  }
+
+  window?.opener?.postMessage(
+    {
+      type: "mint_sale_popup_event",
+      identifier: "primary-revenue-widget-events",
+      data: event.detail,
+    },
+    "*"
+  );
+}) as EventListener;
+
+function PrimaryRevenueWidget() {
+  const { amount, products, theme, env, environmentId, fromContractAddress } =
+    useParams();
+
+  console.log("@@@@@ products", JSON.parse(atob(products)));
+  const componentRef = useRef(null);
+
+  useEffect(() => {
+    window.addEventListener(
+      IMTBLWidgetEvents.IMTBL_PRIMARY_REVENUE_WIDGET_EVENT,
+      handleEvent
+    );
+    window.addEventListener(
+      IMTBLWidgetEvents.IMTBL_CONNECT_WIDGET_EVENT,
+      handleEvent
+    );
+
+    // Assuming window.sharedData.passportInstance contains the necessary data
+    const passportInstance = window?.opener?.sharedData?.passportInstance;
+
+    console.log("@@@@@ passportInstance", passportInstance);
+
+    if (passportInstance && componentRef.current) {
+      (
+        componentRef.current as unknown as ImmutableWebComponent
+      ).addPassportOption(passportInstance);
+    }
+
+    return () => {
+      window.removeEventListener(
+        IMTBLWidgetEvents.IMTBL_CONNECT_WIDGET_EVENT,
+        handleEvent
+      );
+      window.removeEventListener(
+        IMTBLWidgetEvents.IMTBL_PRIMARY_REVENUE_WIDGET_EVENT,
+        handleEvent
+      );
+    };
+  }, []);
+
+  return (
+    <imtbl-primary-revenue
+      ref={componentRef}
+      widgetConfig={JSON.stringify({
+        theme,
+        environment: env,
+      })}
+      amount={amount}
+      products={products}
+      fromContractAddress={fromContractAddress}
+      environmentId={environmentId}
+      env={env}
+    />
+  );
+}
+
+export default PrimaryRevenueWidget;