Feat/nft checkout plugin

demo/vue-app-new/package.json

@@ -28,6 +28,7 @@
     "@web3auth/ethereum-provider": "file:../../packages/providers/ethereum-provider",
     "@web3auth/modal": "file:../../packages/modal",
     "@web3auth/modal-vue-composables": "file:../../packages/composables/modal-vue-composables",
+    "@web3auth/nft-checkout-plugin": "file:../../packages/plugins/nft-checkout-plugin",
     "@web3auth/no-modal": "file:../../packages/no-modal",
     "@web3auth/sign-in-with-ethereum": "^4.2.2",
     "@web3auth/solana-provider": "file:../../packages/providers/solana-provider",

demo/vue-app-new/src/MainView.vue

@@ -17,6 +17,7 @@ import { getInjectedAdapters as getInjectedSolanaAdapters } from "@web3auth/defa
 import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
 import { type Web3AuthOptions } from "@web3auth/modal";
 import { Web3AuthProvider } from "@web3auth/modal-vue-composables";
+import { NFTCheckoutPlugin } from "@web3auth/nft-checkout-plugin";
 import { SolanaPrivateKeyProvider } from "@web3auth/solana-provider";
 import { TorusWalletAdapter } from "@web3auth/torus-evm-adapter";
 import { SolanaWalletAdapter } from "@web3auth/torus-solana-adapter";
@@ -35,12 +36,22 @@ const formData = formDataStore;
 const externalAdapters = ref<IAdapter<unknown>[]>([]);
 
 const walletPlugins = computed(() => {
-  if (formData.chainNamespace !== CHAIN_NAMESPACES.EIP155 || !formData.walletPlugin.enable) return [];
-  const { logoDark, logoLight } = formData.walletPlugin;
-  const walletServicesPlugin = new WalletServicesPlugin({
-    walletInitOptions: { whiteLabel: { showWidgetButton: true, logoDark: logoDark || "logo", logoLight: logoLight || "logo" } },
-  });
-  return [walletServicesPlugin];
+  if (formData.chainNamespace !== CHAIN_NAMESPACES.EIP155) return [];
+  const plugins = [];
+  if (formData.nftCheckoutPlugin.enable) {
+    const nftCheckoutPlugin = new NFTCheckoutPlugin({
+      apiKey: "pk_test_4ca499b1f017c2a96bac63493dca4ac2eb08d1e91de0a796d87137dc7278e0af",
+    });
+    plugins.push(nftCheckoutPlugin);
+  }
+  if (formData.walletPlugin.enable) {
+    const { logoDark, logoLight } = formData.walletPlugin;
+    const walletServicesPlugin = new WalletServicesPlugin({
+      walletInitOptions: { whiteLabel: { showWidgetButton: true, logoDark: logoDark || "logo", logoLight: logoLight || "logo" } },
+    });
+    plugins.push(walletServicesPlugin);
+  }
+  return plugins;
 });
 
 const chainOptions = computed(() =>
@@ -200,6 +211,7 @@ onBeforeMount(() => {
         formData.network = json.network;
         formData.whiteLabel = json.whiteLabel;
         formData.walletPlugin = json.walletPlugin;
+        formData.nftCheckoutPlugin = json.nftCheckoutPlugin || {};
         formData.useAccountAbstractionProvider = json.useAccountAbstractionProvider;
         formData.smartAccountType = json.smartAccountType;
         formData.bundlerUrl = json.bundlerUrl;

demo/vue-app-new/src/components/AppDashboard.vue

@@ -2,9 +2,11 @@
 import { Button, Card } from "@toruslabs/vue-components";
 import { CHAIN_NAMESPACES, IProvider, log, WALLET_ADAPTERS, WALLET_PLUGINS } from "@web3auth/base";
 import { useWeb3Auth } from "@web3auth/modal-vue-composables";
+import { NFTCheckoutPlugin } from "@web3auth/nft-checkout-plugin";
 import { WalletServicesPlugin } from "@web3auth/wallet-services-plugin";
 import { useI18n } from "vue-i18n";
 
+import { NFT_CHECKOUT_CONTRACT_ID } from "../config";
 import {
   getAccounts,
   getBalance,
@@ -42,12 +44,23 @@ const isDisplay = (name: string): boolean => {
         web3Auth.value?.connectedAdapterName === WALLET_ADAPTERS.AUTH
       );
 
+    case "nftCheckoutServices":
+      return formData.chainNamespace === CHAIN_NAMESPACES.EIP155 && formData.nftCheckoutPlugin.enable;
+
     default: {
       return false;
     }
   }
 };
 
+const showPaidMintNFTCheckout = async () => {
+  const nftCheckoutPlugin = web3Auth.value?.getPlugin(WALLET_PLUGINS.NFT_CHECKOUT) as NFTCheckoutPlugin;
+  nftCheckoutPlugin.show({ contractId: NFT_CHECKOUT_CONTRACT_ID.PAID_MINT });
+};
+const showFreeMintNFTCheckout = async () => {
+  const nftCheckoutPlugin = web3Auth.value?.getPlugin(WALLET_PLUGINS.NFT_CHECKOUT) as NFTCheckoutPlugin;
+  nftCheckoutPlugin.show({ contractId: NFT_CHECKOUT_CONTRACT_ID.FREE_MINT });
+};
 const showWalletUI = async () => {
   const walletPlugin = web3Auth.value?.getPlugin(WALLET_PLUGINS.WALLET_SERVICES) as WalletServicesPlugin;
   await walletPlugin.showWalletUi();
@@ -207,6 +220,15 @@ const onSignPersonalMsg = async () => {
             {{ $t("app.buttons.btnShowCheckout") }}
           </Button>
         </Card>
+        <Card v-if="isDisplay('nftCheckoutServices')" class="!h-auto lg:!h-[calc(100dvh_-_240px)] gap-4 px-4 py-4 mb-2" :shadow="false">
+          <div class="mb-2 text-xl font-bold leading-tight text-left">NFT Checkout Service</div>
+          <Button block size="xs" pill class="mb-2" @click="showFreeMintNFTCheckout">
+            {{ $t("app.buttons.btnShowFreeMintNFTCheckout") }}
+          </Button>
+          <Button block size="xs" pill class="mb-2" @click="showPaidMintNFTCheckout">
+            {{ $t("app.buttons.btnShowPaidMintNFTCheckout") }}
+          </Button>
+        </Card>
         <Card v-if="isDisplay('ethServices')" class="px-4 py-4 gap-4 !h-auto lg:!h-[calc(100dvh_-_240px)]" :shadow="false">
           <div class="mb-2 text-xl font-bold leading-tight text-left">Sample Transaction</div>
           <Button block size="xs" pill class="mb-2" @click="onGetAccounts">

demo/vue-app-new/src/components/AppSettings.vue

@@ -46,6 +46,9 @@ const isDisabled = (name: string): boolean => {
     case "walletServicePlugin":
       return formData.chainNamespace !== CHAIN_NAMESPACES.EIP155;
 
+    case "nftCheckoutPlugin":
+      return formData.chainNamespace !== CHAIN_NAMESPACES.EIP155;
+
     case "btnConnect":
       return !isInitialized.value;
 
@@ -99,6 +102,9 @@ const onChainNamespaceChange = (value: string) => {
           Wallet Plugin
         </Tab>
         <Tab v-if="formData.chainNamespace === CHAIN_NAMESPACES.EIP155" variant="underline" :active="isActiveTab(4)" @click="onTabChange(4)">
+          NFT Checkout Plugin
+        </Tab>
+        <Tab v-if="formData.chainNamespace === CHAIN_NAMESPACES.EIP155" variant="underline" :active="isActiveTab(5)" @click="onTabChange(5)">
           Account Abstraction Provider
         </Tab>
       </Tabs>
@@ -352,6 +358,17 @@ const onChainNamespaceChange = (value: string) => {
         />
       </Card>
       <Card v-if="isActiveTab(4)" class="grid grid-cols-1 gap-2 px-4 py-4" :shadow="false">
+        <Toggle
+          v-model="formData.nftCheckoutPlugin.enable"
+          :disabled="isDisabled('nftCheckoutPlugin')"
+          :show-label="true"
+          :size="'small'"
+          :label-disabled="$t('app.nftCheckoutPlugin.title')"
+          :label-enabled="$t('app.nftCheckoutPlugin.title')"
+          class="mb-2"
+        />
+      </Card>
+      <Card v-if="isActiveTab(5)" class="grid grid-cols-1 gap-2 px-4 py-4" :shadow="false">
         <Toggle
           v-model="formData.useAccountAbstractionProvider"
           data-testid="accountAbstractionProvider"

demo/vue-app-new/src/config.ts

@@ -185,6 +185,9 @@ export type FormData = {
     logoDark: string;
     logoLight: string;
   };
+  nftCheckoutPlugin: {
+    enable: boolean;
+  };
   useAccountAbstractionProvider: boolean;
   useAAWithExternalWallet?: boolean;
   smartAccountType?: SmartAccountType;
@@ -240,3 +243,8 @@ export const getV4TypedData = (chainId: string): SignTypedDataMessageV4 => ({
     contents: "Hello, Bob!",
   },
 });
+
+export const NFT_CHECKOUT_CONTRACT_ID = {
+  FREE_MINT: "b5b4de3f-0212-11ef-a08f-0242ac190003",
+  PAID_MINT: "d1145a8b-98ae-44e0-ab63-2c9c8371caff",
+};

demo/vue-app-new/src/store/form.ts

@@ -22,6 +22,9 @@ export const formDataStore = reactive<FormData>({
     logoLight: "",
     logoDark: "",
   },
+  nftCheckoutPlugin: {
+    enable: false,
+  },
   useAccountAbstractionProvider: false,
   useAAWithExternalWallet: true,
 });

demo/vue-app-new/src/translations/en.json

@@ -16,6 +16,9 @@
       "logoLight": "Logo Light",
       "logoDark": "Logo Dark"
     },
+    "nftCheckoutPlugin": {
+      "title": "NFT Checkout Plugin"
+    },
     "accountAbstractionProvider": {
       "title": "Account Abstraction Provider",
       "smartAccountType": "Smart Account Type",
@@ -71,7 +74,9 @@
       "btnShowCheckout": "Show Checkout",
       "btnShowWalletConnectScanner": "Show WalletConnect Scanner",
       "btnSignTypedData_v4": "Sign Typed Data v4",
-      "btnSignPersonalMsg": "Sign Personal Message"
+      "btnSignPersonalMsg": "Sign Personal Message",
+      "btnShowFreeMintNFTCheckout": "Show Free Mint NFT",
+      "btnShowPaidMintNFTCheckout": "Show Paid Mint NFT"
     }
   }
 }