feat: allow to premint and create listing for an existing product

package.json

@@ -102,6 +102,7 @@
     "crypto-browserify": "^3.12.0",
     "dayjs": "^1.11.3",
     "ethers": "^5.7.0",
+    "ethers-v6": "npm:ethers@^6.10.0",
     "fetch": "^1.1.0",
     "formik": "^2.2.9",
     "graphql": "^16.5.0",

src/components/modal/components/VoidProduct.tsx

@@ -1,27 +1,34 @@
 import { TransactionResponse } from "@bosonprotocol/common";
 import {
   CoreSDK,
+  CreateListingButton,
   hooks,
+  PremintButton,
   Provider,
-  subgraph,
-  VoidButton
+  subgraph
 } from "@bosonprotocol/react-kit";
 import {
   extractUserFriendlyError,
   getHasUserRejectedTx
 } from "@bosonprotocol/react-kit";
 import * as Sentry from "@sentry/browser";
 import { useConfigContext } from "components/config/ConfigContext";
-import { BigNumberish } from "ethers";
+import { BigNumber, BigNumberish } from "ethers";
 import { getOfferDetails } from "lib/utils/offer/getOfferDetails";
 import { poll } from "lib/utils/promises";
 import { useCallback, useState } from "react";
 import toast from "react-hot-toast";
 import styled from "styled-components";
 
+import { CONFIG } from "../../../lib/config";
 import { colors } from "../../../lib/styles/colors";
 import { Offer } from "../../../lib/types/offer";
-import { useSigner } from "../../../lib/utils/hooks/connection/connection";
+import {
+  useAccount,
+  useChainId,
+  useSigner,
+  useSignerV6
+} from "../../../lib/utils/hooks/connection/connection";
 import { useAddPendingTransaction } from "../../../lib/utils/hooks/transactions/usePendingTransactions";
 import { useCoreSDK } from "../../../lib/utils/useCoreSdk";
 import { Break } from "../../detail/Detail.style";
@@ -207,8 +214,15 @@
   const addPendingTransaction = useAddPendingTransaction();
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const signer = useSigner();
+  const { data: signerV6 } = useSignerV6();
   const { hideModal } = useModal();
   const { isMetaTx } = hooks.useMetaTx(coreSdk);
+  const tokenId =
+    offerId && offer?.range
+      ? BigNumber.from(offerId).shl(128).add(offer.range.start).toString()
+      : undefined;
+  const connectedChainId = useChainId();
+  const { account } = useAccount();
 
   const handleFinish = useCallback(() => {
     hideModal();
@@ -340,7 +354,7 @@
       {offer && (
         <Grid justifyContent="center">
           <VoidButtonWrapper>
-            <VoidButton
+            <PremintButton
               variant="accentInverted"
               coreSdkConfig={{
                 envName: config.envName,
@@ -349,7 +363,9 @@
                 metaTx: config.metaTx
               }}
               offerId={offerId || 0}
+              reserveLength={offer.range ? 0 : offer.quantityAvailable}
+              preMintAmount={1}
               onError={async (error, { txResponse }) => {
                 console.error("onError", error);
                 const hasUserRejectedTx = getHasUserRejectedTx(error);
                 if (hasUserRejectedTx) {
@@ -379,7 +395,7 @@
                   }
                 );
               }}
               onPendingTransaction={(hash, isMetaTx) => {
                 showModal("TRANSACTION_SUBMITTED", {
                   action: "Void",
                   txHash: hash
@@ -397,6 +413,89 @@
               onSuccess={handleSuccess}
             />
           </VoidButtonWrapper>
+          {tokenId && (
+            <VoidButtonWrapper>
+              <CreateListingButton
+                providerProps={{
+                  ...CONFIG,
+                  envName: config.envName,
+                  configId: config.envConfig.configId,
+                  defaultCurrencySymbol: CONFIG.defaultCurrency.symbol,
+                  defaultCurrencyTicker: CONFIG.defaultCurrency.ticker,
+                  licenseTemplate: CONFIG.rNFTLicenseTemplate,
+                  minimumDisputeResolutionPeriodDays:
+                    CONFIG.minimumDisputePeriodInDays,
+                  walletConnectProjectId: CONFIG.walletConnect.projectId,
+                  ipfsProjectId: CONFIG.infuraProjectId,
+                  ipfsProjectSecret: CONFIG.infuraProjectSecret,
+                  contactSellerForExchangeUrl: "",
+                  sellerCurationListBetweenCommas: "",
+                  withExternalConnectionProps: true,
+                  externalConnectedChainId: connectedChainId,
+                  externalConnectedAccount: account,
+                  externalConnectedSigner: signer,
+                  externalConnectedSignerV6: signerV6,
+                  withWeb3React: false,
+                  withCustomReduxContext: false
+                }}
+                variant="accentInverted"
+                coreSdkConfig={{
+                  envName: config.envName,
+                  configId: config.envConfig.configId,
+                  web3Provider: signer?.provider as Provider,
+                  metaTx: config.metaTx
+                }}
+                tokenId={tokenId}
+                price={"1000000000000000000"}
+                onError={async (error, { txResponse }) => {
+                  console.error("onError", error);
+                  const hasUserRejectedTx = getHasUserRejectedTx(error);
+                  if (hasUserRejectedTx) {
+                    showModal("TRANSACTION_FAILED");
+                  } else {
+                    Sentry.captureException(error);
+                    showModal("TRANSACTION_FAILED", {
+                      errorMessage: "Something went wrong",
+                      detailedErrorMessage: await extractUserFriendlyError(
+                        error,
+                        {
+                          txResponse,
+                          provider: signer?.provider as Provider
+                        }
+                      )
+                    });
+                  }
+                }}
+                onPendingSignature={() => {
+                  showModal(
+                    "WAITING_FOR_CONFIRMATION",
+                    undefined,
+                    "auto",
+                    undefined,
+                    {
+                      xs: "400px"
+                    }
+                  );
+                }}
+                onPendingTransaction={(hash, isMetaTx) => {
+                  showModal("TRANSACTION_SUBMITTED", {
+                    action: "Void",
+                    txHash: hash
+                  });
+                  addPendingTransaction({
+                    type: subgraph.EventType.OFFER_VOIDED,
+                    hash,
+                    isMetaTx,
+                    accountType: "Seller",
+                    offer: {
+                      id: offer.id
+                    }
+                  });
+                }}
+                onSuccess={handleSuccess}
+              />
+            </VoidButtonWrapper>
+          )}
         </Grid>
       )}
       {offers && !!offers.length && (

src/components/seller/products/SellerProductsTable.tsx

@@ -594,8 +594,7 @@ export default function SellerProductsTable({
                         </Typography>
                       ),
                       action: !(
-                        variantStatus === OffersKit.OfferState.VOIDED ||
-                        variant?.quantityAvailable === "0"
+                        variantStatus === OffersKit.OfferState.VOIDED
                       ) && (
                         <Grid justifyContent="flex-end">
                           <VoidButton
@@ -608,7 +607,7 @@ export default function SellerProductsTable({
                                 showModal(
                                   modalTypes.VOID_PRODUCT,
                                   {
-                                    title: "Void Confirmation",
+                                    title: "Premint Confirmation",
                                     offerId: variant.id,
                                     offer: variant as Offer,
                                     refetch
@@ -618,7 +617,7 @@ export default function SellerProductsTable({
                               }
                             }}
                           >
-                            Void
+                            Premint
                           </VoidButton>
                         </Grid>
                       )
@@ -762,10 +761,7 @@ export default function SellerProductsTable({
               );
             })(),
             action: (() => {
-              const withVoidButton = !(
-                status === OffersKit.OfferState.VOIDED ||
-                offer?.quantityAvailable === "0"
-              );
+              const withVoidButton = !(status === OffersKit.OfferState.VOIDED);
               return (
                 <Grid gap="1rem" justifyContent="flex-end">
                   <Actions
@@ -786,7 +782,7 @@ export default function SellerProductsTable({
                                         showModal(
                                           modalTypes.VOID_PRODUCT,
                                           {
-                                            title: "Void Confirmation",
+                                            title: "Premint Confirmation",
                                             offers:
                                               offer.additional?.variants.filter(
                                                 (variant) => {
@@ -808,7 +804,7 @@ export default function SellerProductsTable({
                                         showModal(
                                           modalTypes.VOID_PRODUCT,
                                           {
-                                            title: "Void Confirmation",
+                                            title: "Premint Confirmation",
                                             offerId: offer.id,
                                             offer,
                                             refetch
@@ -819,7 +815,7 @@ export default function SellerProductsTable({
                                     }
                                   }}
                                 >
-                                  Void
+                                  Premint
                                 </UnthemedButton>
                               )
                             }

src/lib/utils/hooks/connection/connection.ts

@@ -3,8 +3,10 @@
 
 import { hooks, useUser } from "@bosonprotocol/react-kit";
 import { useWeb3React } from "@web3-react/core";
+import { providers } from "ethers";
+import { BrowserProvider } from "ethers-v6";
 import { useMemo } from "react";
-import { useMutation } from "react-query";
+import { useMutation, useQuery } from "react-query";
 
 export function useProvider() {
   const { provider } = useWeb3React();
@@ -25,6 +27,35 @@ export function useSigner() {
   return signer;
 }
 
+export function useSignerV6() {
+  const providerV5 = useProvider();
+  const url = providerV5?.connection?.url;
+  return useQuery(["signer", url], async () => {
+    const providerV6 = providerV5toV6(providerV5);
+    return await providerV6?.getSigner();
+  });
+}
+
+function providerV5toV6(
+  providerV5: providers.Web3Provider
+): BrowserProvider | undefined {
+  return providerV5
+    ? new BrowserProvider({
+        request: async (request: {
+          method: string;
+          params?: Array<any> | Record<string, any>;
+        }) => {
+          const params = request.params
+            ? Array.isArray(request.params)
+              ? (request.params as Array<any>)
+              : Array.from(request.params.values())
+            : [];
+          return providerV5.send(request.method, params);
+        }
+      })
+    : undefined;
+}
+
 export function useAccount() {
   const { account } = useWeb3React();
   const { user } = useUser();