@0xsequence/checkout 5.3.7 → 5.3.9

package/dist/cjs/views/Checkout/PaymentMethodSelect/OrderSummary/index.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OrderSummary = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const connect_1 = require("@0xsequence/connect");
+const design_system_1 = require("@0xsequence/design-system");
+const hooks_1 = require("@0xsequence/hooks");
+const network_1 = require("@0xsequence/network");
+const viem_1 = require("viem");
+const useSelectPaymentModal_js_1 = require("../../../../hooks/useSelectPaymentModal.js");
+const OrderSummary = () => {
+    const { selectPaymentSettings } = (0, useSelectPaymentModal_js_1.useSelectPaymentModal)();
+    const isFree = Number(selectPaymentSettings.price) == 0;
+    const chain = selectPaymentSettings.chain;
+    const network = (0, network_1.findSupportedNetwork)(chain);
+    const chainId = network?.chainId || 137;
+    const collectionAddress = selectPaymentSettings.collectionAddress;
+    const tokenIds = selectPaymentSettings?.collectibles.map(c => c.tokenId || '') || [];
+    const { data: tokenMetadatas, isLoading: isLoadingTokenMetadatas } = (0, hooks_1.useGetTokenMetadata)({
+        chainID: String(chainId),
+        contractAddress: collectionAddress,
+        tokenIDs: tokenIds.some(id => id === '') ? [] : tokenIds
+    }, {
+        disabled: tokenIds.some(id => id === '')
+    });
+    const { data: dataCollectionInfo, isLoading: isLoadingCollectionInfo } = (0, hooks_1.useGetContractInfo)({
+        chainID: String(chainId),
+        contractAddress: selectPaymentSettings.collectionAddress
+    });
+    const { data: dataCurrencyInfo, isLoading: isLoadingCurrencyInfo } = (0, hooks_1.useGetContractInfo)({
+        chainID: String(chainId),
+        contractAddress: selectPaymentSettings.currencyAddress
+    });
+    const { data: dataCoinPrices, isLoading: isLoadingCoinPrices } = (0, hooks_1.useGetCoinPrices)([
+        {
+            chainId,
+            contractAddress: selectPaymentSettings.currencyAddress
+        }
+    ]);
+    const isTokenIdUnknown = tokenIds.some(id => id === '');
+    const isLoading = (isLoadingTokenMetadatas && !isTokenIdUnknown) || isLoadingCollectionInfo || isLoadingCurrencyInfo || isLoadingCoinPrices;
+    if (isLoading) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "flex mb-2 gap-3", style: { height: '72px' }, children: (0, jsx_runtime_1.jsx)(design_system_1.Spinner, {}) }));
+    }
+    const formattedPrice = (0, viem_1.formatUnits)(BigInt(selectPaymentSettings.price), dataCurrencyInfo?.decimals || 0);
+    const displayPrice = (0, connect_1.formatDisplay)(formattedPrice, {
+        disableScientificNotation: true,
+        disableCompactNotation: true,
+        significantDigits: 6
+    });
+    const fiatExchangeRate = dataCoinPrices?.[0].price?.value || 0;
+    const priceFiat = (fiatExchangeRate * Number(formattedPrice)).toFixed(2);
+    const PriceSection = () => {
+        if (isFree) {
+            return ((0, jsx_runtime_1.jsx)(design_system_1.Text, { color: "text50", variant: "xsmall", fontWeight: "normal", children: "Free" }));
+        }
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-row gap-1 items-center", children: [(0, jsx_runtime_1.jsx)(design_system_1.TokenImage, { src: dataCurrencyInfo?.logoURI, size: "xs" }), (0, jsx_runtime_1.jsx)(design_system_1.Text, { color: "white", variant: "xsmall", fontWeight: "normal", children: `${displayPrice} ${dataCurrencyInfo?.symbol} on ${network?.title}` })] }), (0, jsx_runtime_1.jsx)(design_system_1.Text, { color: "text50", variant: "xsmall", fontWeight: "normal", children: `$${priceFiat} USD` })] }));
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-5", children: (0, jsx_runtime_1.jsx)("div", { className: "flex flex-row gap-1", children: selectPaymentSettings.collectibles.map(collectible => {
+                const collectibleQuantity = Number((0, viem_1.formatUnits)(BigInt(collectible.quantity), Number(collectible.decimals || 0)));
+                const tokenMetadata = tokenMetadatas?.find(tokenMetadata => tokenMetadata.tokenId === collectible.tokenId);
+                return ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-2 items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "rounded-xl h-[56px] w-[56px]", children: (0, jsx_runtime_1.jsx)(connect_1.CollectibleTileImage, { imageUrl: isTokenIdUnknown
+                                    ? dataCollectionInfo?.extensions?.ogImage || dataCollectionInfo?.logoURI
+                                    : tokenMetadata?.image, networkImage: chainId }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-0.25", children: [!isTokenIdUnknown && ((0, jsx_runtime_1.jsx)(design_system_1.Text, { variant: "xsmall", color: "secondary", fontWeight: "bold", children: `${tokenMetadata?.name || 'Collectible'}(${collectibleQuantity > 1 ? `${collectibleQuantity} items` : '1 item'})` })), (0, jsx_runtime_1.jsx)(design_system_1.Text, { variant: "xsmall", color: "secondary", fontWeight: "normal", children: dataCollectionInfo?.name || null }), (0, jsx_runtime_1.jsx)(PriceSection, {})] })] }, collectible.tokenId));
+            }) }) }));
+};
+exports.OrderSummary = OrderSummary;
+//# sourceMappingURL=index.js.map

package/dist/cjs/views/Checkout/PaymentMethodSelect/OrderSummary/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/views/Checkout/PaymentMethodSelect/OrderSummary/index.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/views/Checkout/PaymentMethodSelect/PayWithCreditCard/PaymentProviderOption.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaymentProviderOption.d.ts","sourceRoot":"","sources":["../../../../../../src/views/Checkout/PaymentMethodSelect/PayWithCreditCard/PaymentProviderOption.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAEhC,UAAU,0BAA0B;IAClC,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,UAAU,EAAE,OAAO,CAAA;IACnB,aAAa,EAAE,OAAO,CAAA;IACtB,IAAI,EAAE,GAAG,CAAC,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,qBAAqB,GAAI,oDAAoD,0BAA0B,4CA0BnH,CAAA"}

package/dist/cjs/views/Checkout/PaymentMethodSelect/PayWithCreditCard/PaymentProviderOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaymentProviderOption.js","sourceRoot":"","sources":["../../../../../../src/views/Checkout/PaymentMethodSelect/PayWithCreditCard/PaymentProviderOption.tsx"],"names":[],"mappings":";;;;AAAA,6DAA0D;AAWnD,MAAM,qBAAqB,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,IAAI,EAA8B,EAAE,EAAE;IACtH,OAAO,CACL,uBAAC,oBAAI,IACH,SAAS,EAAE,IAAA,kBAAE,EACX,+DAA+D,EAC/D,UAAU,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,gBAAgB,CACvD,EACD,OAAO,EAAE,OAAO,YAEhB,iCAAK,SAAS,EAAC,6BAA6B,aAC1C,iCAAK,SAAS,EAAC,yCAAyC,aACtD,gCAAK,SAAS,EAAC,YAAY,YAAE,IAAI,GAAO,EACxC,uBAAC,oBAAI,IAAC,OAAO,EAAC,QAAQ,EAAC,UAAU,EAAC,MAAM,EAAC,KAAK,EAAC,WAAW,YACvD,IAAI,GACA,IACH,EACN,gCAAK,SAAS,EAAC,iDAAiD,YAC7D,aAAa,IAAI,CAChB,uBAAC,oBAAI,IAAC,KAAK,EAAC,OAAO,EAAC,OAAO,EAAC,OAAO,4BAE5B,CACR,GACG,IACF,GACD,CACR,CAAA;AACH,CAAC,CAAA;AA1BY,QAAA,qBAAqB,yBA0BjC"}

package/dist/cjs/views/Checkout/PaymentMethodSelect/PayWithCreditCard/index.d.ts

@@ -0,0 +1,6 @@
+interface PayWithCreditCardTabProps {
+    skipOnCloseCallback: () => void;
+}
+export declare const PayWithCreditCardTab: ({ skipOnCloseCallback }: PayWithCreditCardTabProps) => import("react/jsx-runtime.js").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/views/Checkout/PaymentMethodSelect/PayWithCreditCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/views/Checkout/PaymentMethodSelect/PayWithCreditCard/index.tsx"],"names":[],"mappings":"AAUA,UAAU,yBAAyB;IACjC,mBAAmB,EAAE,MAAM,IAAI,CAAA;CAChC;AAED,eAAO,MAAM,oBAAoB,GAAI,yBAAyB,yBAAyB,+CA6HtF,CAAA"}

package/dist/cjs/views/{PaymentSelection → Checkout/PaymentMethodSelect}/PayWithCreditCard/index.js

@@ -1,36 +1,30 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PayWithCreditCard = void 0;
+exports.PayWithCreditCardTab = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const design_system_1 = require("@0xsequence/design-system");
 const hooks_1 = require("@0xsequence/hooks");
 const network_1 = require("@0xsequence/network");
-const react_1 = require("react");
 const wagmi_1 = require("wagmi");
-const index_js_1 = require("../../../hooks/index.js");
-const PayWithCreditCard = ({ settings, disableButtons, skipOnCloseCallback }) => {
-    const { chain, currencyAddress, targetContractAddress, price, txData, collectibles, collectionAddress, sardineConfig, onSuccess = () => { }, onError = () => { }, onClose = () => { }, creditCardProviders = [], transakConfig, supplementaryAnalyticsInfo = {} } = settings;
+const index_js_1 = require("../../../../hooks/index.js");
+const PayWithCreditCardTab = ({ skipOnCloseCallback }) => {
+    const { closeSelectPaymentModal, selectPaymentSettings } = (0, index_js_1.useSelectPaymentModal)();
+    const { chain, currencyAddress, targetContractAddress, price, txData, collectibles, collectionAddress, sardineConfig, onSuccess = () => { }, onError = () => { }, onClose = () => { }, creditCardProviders = [], transakConfig, supplementaryAnalyticsInfo = {} } = selectPaymentSettings;
     const { address: userAddress } = (0, wagmi_1.useAccount)();
     const { clearCachedBalances } = (0, hooks_1.useClearCachedBalances)();
-    const { closeSelectPaymentModal } = (0, index_js_1.useSelectPaymentModal)();
     const { triggerCheckout } = (0, index_js_1.useCheckoutModal)();
     const network = (0, network_1.findSupportedNetwork)(chain);
     const chainId = network?.chainId || 137;
+    const selectedPaymentProvider = creditCardProviders?.[0];
     const { data: currencyInfoData, isLoading: isLoadingContractInfo } = (0, hooks_1.useGetContractInfo)({
         chainID: String(chainId),
-        contractAddress: currencyAddress
+        contractAddress: currencyAddress ?? ''
     });
-    const [selectedPaymentProvider, setSelectedPaymentProvider] = (0, react_1.useState)();
     const isLoading = isLoadingContractInfo;
-    (0, react_1.useEffect)(() => {
-        if (selectedPaymentProvider) {
-            payWithSelectedProvider();
-        }
-    }, [selectedPaymentProvider]);
     const payWithSelectedProvider = () => {
         switch (selectedPaymentProvider) {
             case 'custom':
-                if (settings.customProviderCallback) {
+                if (selectPaymentSettings?.customProviderCallback) {
                     onClickCustomProvider();
                 }
                 return;
@@ -43,9 +37,9 @@ const PayWithCreditCard = ({ settings, disableButtons, skipOnCloseCallback }) =>
         }
     };
     const onClickCustomProvider = () => {
-        if (settings.customProviderCallback) {
+        if (selectPaymentSettings?.customProviderCallback) {
             closeSelectPaymentModal();
-            settings.customProviderCallback(onSuccess, onError, onClose);
+            selectPaymentSettings.customProviderCallback(onSuccess, onError, onClose);
         }
     };
     const onPurchase = () => {
@@ -83,30 +77,22 @@ const PayWithCreditCard = ({ settings, disableButtons, skipOnCloseCallback }) =>
         closeSelectPaymentModal();
         triggerCheckout(checkoutSettings);
     };
-    const Options = () => {
-        return ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col justify-center items-center gap-2 w-full", children: creditCardProviders
-                .slice(0, 1)
-                .filter(provider => {
-                // cannot display transak checkout if the settings aren't provided
-                if (provider === 'transak' && !settings.transakConfig) {
-                    return false;
-                }
-                return true;
-            })
-                .map(creditCardProvider => {
-                switch (creditCardProvider) {
-                    case 'sardine':
-                    case 'transak':
-                    case 'custom':
-                        return ((0, jsx_runtime_1.jsxs)(design_system_1.Card, { className: "flex justify-between items-center p-4 cursor-pointer", onClick: () => {
-                                setSelectedPaymentProvider(creditCardProvider);
-                            }, disabled: disableButtons, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-row gap-3 items-center", children: [(0, jsx_runtime_1.jsx)(design_system_1.PaymentsIcon, { className: "text-white" }), (0, jsx_runtime_1.jsx)(design_system_1.Text, { color: "primary", variant: "normal", fontWeight: "bold", children: "Pay with credit or debit card" })] }), (0, jsx_runtime_1.jsx)("div", { style: { transform: 'rotate(-45deg)' }, children: (0, jsx_runtime_1.jsx)(design_system_1.ArrowRightIcon, { className: "text-white" }) })] }, "sardine"));
-                    default:
-                        return null;
-                }
-            }) }));
+    if (isLoading) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "flex h-full w-full pt-5 justify-center items-center", children: (0, jsx_runtime_1.jsx)(design_system_1.Spinner, {}) }));
+    }
+    const getProviderName = () => {
+        switch (selectedPaymentProvider) {
+            case 'sardine':
+                return 'Sardine';
+            case 'transak':
+                return 'Transak';
+            case 'forte':
+                return 'Forte';
+            default:
+                return null;
+        }
     };
-    return ((0, jsx_runtime_1.jsx)("div", { className: "w-full", children: isLoading ? ((0, jsx_runtime_1.jsx)("div", { className: "flex w-full pt-5 justify-center items-center", children: (0, jsx_runtime_1.jsx)(design_system_1.Spinner, {}) })) : ((0, jsx_runtime_1.jsx)(Options, {})) }));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-2 justify-between h-full", children: [(0, jsx_runtime_1.jsxs)(design_system_1.Text, { color: "text50", variant: "small", children: ["Buy directly with your debit or credit card ", getProviderName() ? `through ${getProviderName()}` : ''] }), (0, jsx_runtime_1.jsx)("div", { className: "flex flex-col justify-center items-center gap-2 w-full h-full", children: (0, jsx_runtime_1.jsx)(design_system_1.Button, { className: "w-full", shape: "square", onClick: payWithSelectedProvider, label: "Continue", variant: "primary" }) })] }));
 };
-exports.PayWithCreditCard = PayWithCreditCard;
+exports.PayWithCreditCardTab = PayWithCreditCardTab;
 //# sourceMappingURL=index.js.map

package/dist/cjs/views/Checkout/PaymentMethodSelect/PayWithCreditCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/views/Checkout/PaymentMethodSelect/PayWithCreditCard/index.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/views/Checkout/PaymentMethodSelect/PayWithCreditCard/providers/SardineLogo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SardineLogo.d.ts","sourceRoot":"","sources":["../../../../../../../src/views/Checkout/PaymentMethodSelect/PayWithCreditCard/providers/SardineLogo.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW,+CAUvB,CAAA"}

package/dist/cjs/views/Checkout/PaymentMethodSelect/PayWithCreditCard/providers/SardineLogo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SardineLogo.js","sourceRoot":"","sources":["../../../../../../../src/views/Checkout/PaymentMethodSelect/PayWithCreditCard/providers/SardineLogo.tsx"],"names":[],"mappings":";;;;AAAO,MAAM,WAAW,GAAG,GAAG,EAAE;IAC9B,OAAO,CACL,iCAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,SAAS,EAAC,YAAY,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,aACnH,iCAAM,SAAS,EAAC,WAAW,EAAC,IAAI,EAAC,SAAS,GAAG,EAC7C,iCACE,CAAC,EAAC,gsCAAgsC,EAClsC,IAAI,EAAC,OAAO,GACZ,IACE,CACP,CAAA;AACH,CAAC,CAAA;AAVY,QAAA,WAAW,eAUvB"}

package/dist/cjs/views/Checkout/PaymentMethodSelect/PayWithCrypto/index.d.ts

@@ -0,0 +1,6 @@
+interface PayWithCryptoTabProps {
+    skipOnCloseCallback: () => void;
+}
+export declare const PayWithCryptoTab: ({ skipOnCloseCallback }: PayWithCryptoTabProps) => import("react/jsx-runtime.js").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/views/Checkout/PaymentMethodSelect/PayWithCrypto/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/views/Checkout/PaymentMethodSelect/PayWithCrypto/index.tsx"],"names":[],"mappings":"AA8BA,UAAU,qBAAqB;IAC7B,mBAAmB,EAAE,MAAM,IAAI,CAAA;CAChC;AAED,eAAO,MAAM,gBAAgB,GAAI,yBAAyB,qBAAqB,+CA6jB9E,CAAA"}

package/dist/cjs/views/Checkout/PaymentMethodSelect/PayWithCrypto/index.js

@@ -0,0 +1,398 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PayWithCryptoTab = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const connect_1 = require("@0xsequence/connect");
+const design_system_1 = require("@0xsequence/design-system");
+const hooks_1 = require("@0xsequence/hooks");
+const marketplace_1 = require("@0xsequence/marketplace");
+const network_1 = require("@0xsequence/network");
+const react_1 = require("react");
+const viem_1 = require("viem");
+const wagmi_1 = require("wagmi");
+const abi_js_1 = require("../../../../constants/abi.js");
+const index_js_1 = require("../../../../constants/index.js");
+const index_js_2 = require("../../../../hooks/index.js");
+const index_js_3 = require("../../../../hooks/index.js");
+const useNavigationCheckout_js_1 = require("../../../../hooks/useNavigationCheckout.js");
+const PayWithCryptoTab = ({ skipOnCloseCallback }) => {
+    const { triggerAddFunds } = (0, index_js_2.useAddFundsModal)();
+    const { clearCachedBalances } = (0, hooks_1.useClearCachedBalances)();
+    const [isPurchasing, setIsPurchasing] = (0, react_1.useState)(false);
+    const { openTransactionStatusModal } = (0, index_js_3.useTransactionStatusModal)();
+    const { selectPaymentSettings = {}, closeSelectPaymentModal } = (0, index_js_3.useSelectPaymentModal)();
+    const { analytics } = (0, connect_1.useAnalyticsContext)();
+    const [isError, setIsError] = (0, react_1.useState)(false);
+    const { navigation, setNavigation } = (0, useNavigationCheckout_js_1.useNavigationCheckout)();
+    const { chain, collectibles, collectionAddress, currencyAddress, targetContractAddress, approvedSpenderAddress, price, txData, transactionConfirmations = connect_1.TRANSACTION_CONFIRMATIONS_DEFAULT, onRampProvider, onSuccess = () => { }, onError = () => { }, onClose = () => { }, supplementaryAnalyticsInfo, slippageBps } = selectPaymentSettings;
+    const isFree = Number(price) == 0;
+    const network = (0, network_1.findSupportedNetwork)(chain);
+    const chainId = network?.chainId || 137;
+    const { address: userAddress, connector } = (0, wagmi_1.useAccount)();
+    const { data: walletClient } = (0, wagmi_1.useWalletClient)({
+        chainId: chainId
+    });
+    const publicClient = (0, wagmi_1.usePublicClient)({
+        chainId: chainId
+    });
+    const indexerClient = (0, hooks_1.useIndexerClient)(chainId);
+    const selectedCurrency = navigation.params?.selectedCurrency || {
+        address: currencyAddress,
+        chainId: chain
+    };
+    const isNativeToken = (0, connect_1.compareAddress)(currencyAddress, viem_1.zeroAddress);
+    const isNativeTokenSelectedCurrency = (0, connect_1.compareAddress)(selectedCurrency.address, viem_1.zeroAddress);
+    const { data: tokenBalancesData, isLoading: tokenBalancesIsLoading } = (0, hooks_1.useGetTokenBalancesSummary)({
+        chainIds: [chainId],
+        filter: {
+            accountAddresses: userAddress ? [userAddress] : [],
+            contractStatus: connect_1.ContractVerificationStatus.ALL,
+            contractWhitelist: [selectedCurrency.address],
+            omitNativeBalances: !isNativeTokenSelectedCurrency
+        },
+        omitMetadata: true
+    });
+    const { data: coinPricesData, isLoading: isLoadingCoinPrice } = (0, hooks_1.useGetCoinPrices)([
+        {
+            chainId,
+            contractAddress: selectedCurrency.address
+        }
+    ]);
+    const { data: dataCurrencyInfo, isLoading: isLoadingCurrencyInfo } = (0, hooks_1.useGetContractInfo)({
+        chainID: String(chainId),
+        contractAddress: currencyAddress
+    });
+    const isSwapTransaction = !(0, connect_1.compareAddress)(selectedCurrency.address, currencyAddress);
+    const { data: dataSelectedCurrencyInfo, isLoading: isLoadingSelectedCurrencyInfo } = (0, hooks_1.useGetContractInfo)({
+        chainID: String(chainId),
+        contractAddress: selectedCurrency.address
+    }, {
+        disabled: !isSwapTransaction
+    });
+    const selectedCurrencyInfo = isSwapTransaction ? dataSelectedCurrencyInfo : dataCurrencyInfo;
+    const buyCurrencyAddress = currencyAddress;
+    const { data: swapQuote, isLoading: isLoadingSwapQuote } = (0, hooks_1.useGetSwapQuote)({
+        params: {
+            walletAddress: userAddress ?? '',
+            toTokenAddress: buyCurrencyAddress,
+            fromTokenAddress: selectedCurrency.address || '',
+            toTokenAmount: price,
+            chainId: chainId,
+            includeApprove: true,
+            slippageBps: slippageBps || 100
+        }
+    }, {
+        disabled: !isSwapTransaction
+    });
+    const selectedCurrencyPrice = isSwapTransaction ? swapQuote?.maxPrice || 0 : price || 0;
+    const { data: allowanceData, isLoading: allowanceIsLoading } = (0, wagmi_1.useReadContract)({
+        abi: abi_js_1.ERC_20_CONTRACT_ABI,
+        functionName: 'allowance',
+        chainId: chainId,
+        address: currencyAddress,
+        args: [userAddress, approvedSpenderAddress || targetContractAddress],
+        query: {
+            enabled: !!userAddress && !isNativeTokenSelectedCurrency
+        }
+    });
+    const isLoading = isLoadingCoinPrice ||
+        isLoadingCurrencyInfo ||
+        (allowanceIsLoading && !isNativeTokenSelectedCurrency) ||
+        isLoadingSwapQuote ||
+        tokenBalancesIsLoading ||
+        isLoadingSelectedCurrencyInfo;
+    const tokenBalance = tokenBalancesData?.pages?.[0]?.balances?.find(balance => (0, connect_1.compareAddress)(balance.contractAddress, selectedCurrency.address));
+    const isInsufficientBalance = tokenBalance?.balance && BigInt(tokenBalance.balance) < BigInt(selectedCurrencyPrice);
+    const isApproved = allowanceData >= BigInt(price) || isNativeToken;
+    const formattedPrice = (0, viem_1.formatUnits)(BigInt(selectedCurrencyPrice), selectedCurrencyInfo?.decimals || 0);
+    const displayPrice = (0, connect_1.formatDisplay)(formattedPrice, {
+        disableScientificNotation: true,
+        disableCompactNotation: true,
+        significantDigits: 6
+    });
+    const fiatExchangeRate = coinPricesData?.[0].price?.value || 0;
+    const priceFiat = (fiatExchangeRate * Number(formattedPrice)).toFixed(2);
+    const onPurchaseMainCurrency = async () => {
+        if (!walletClient || !userAddress || !publicClient || !indexerClient || !connector) {
+            return;
+        }
+        setIsPurchasing(true);
+        setIsError(false);
+        try {
+            const walletClientChainId = await walletClient.getChainId();
+            if (walletClientChainId !== chainId) {
+                await walletClient.switchChain({ id: chainId });
+            }
+            const approveTxData = (0, viem_1.encodeFunctionData)({
+                abi: abi_js_1.ERC_20_CONTRACT_ABI,
+                functionName: 'approve',
+                args: [approvedSpenderAddress || targetContractAddress, price]
+            });
+            const transactions = [
+                ...(isApproved
+                    ? []
+                    : [
+                        {
+                            to: currencyAddress,
+                            data: approveTxData,
+                            chainId
+                        }
+                    ]),
+                {
+                    to: targetContractAddress,
+                    data: txData,
+                    chainId,
+                    ...(isNativeTokenSelectedCurrency
+                        ? {
+                            value: BigInt(price)
+                        }
+                        : {})
+                }
+            ];
+            const txHash = await (0, connect_1.sendTransactions)({
+                chainId,
+                senderAddress: userAddress,
+                publicClient,
+                walletClient,
+                indexerClient,
+                connector,
+                transactions,
+                transactionConfirmations,
+                waitConfirmationForLastTransaction: false
+            });
+            analytics?.track({
+                event: 'SEND_TRANSACTION_REQUEST',
+                props: {
+                    ...supplementaryAnalyticsInfo,
+                    type: 'crypto',
+                    source: index_js_1.EVENT_SOURCE,
+                    chainId: String(chainId),
+                    listedCurrency: selectedCurrency.address,
+                    purchasedCurrency: selectedCurrency.address,
+                    origin: window.location.origin,
+                    from: userAddress,
+                    to: targetContractAddress,
+                    item_ids: JSON.stringify(collectibles.map(c => c.tokenId)),
+                    item_quantities: JSON.stringify(collectibles.map(c => c.quantity)),
+                    currencySymbol: dataCurrencyInfo?.symbol || '',
+                    collectionAddress,
+                    txHash
+                },
+                nums: {
+                    currencyValue: Number(price),
+                    currencyValueDecimal: Number((0, viem_1.formatUnits)(BigInt(price), dataCurrencyInfo?.decimals || 18))
+                }
+            });
+            closeSelectPaymentModal();
+            skipOnCloseCallback();
+            openTransactionStatusModal({
+                chainId,
+                currencyAddress: selectedCurrency.address,
+                collectionAddress,
+                txHash,
+                items: collectibles.map(collectible => ({
+                    tokenId: collectible.tokenId,
+                    quantity: collectible.quantity,
+                    decimals: collectible.decimals,
+                    price: collectible.price || price
+                })),
+                onSuccess: () => {
+                    clearCachedBalances();
+                    onSuccess(txHash);
+                },
+                onClose
+            });
+        }
+        catch (e) {
+            console.error('Failed to purchase...', e);
+            onError(e);
+            setIsError(true);
+        }
+        setIsPurchasing(false);
+    };
+    const onClickPurchaseSwap = async () => {
+        if (!walletClient || !userAddress || !publicClient || !userAddress || !connector || !swapQuote) {
+            return;
+        }
+        setIsPurchasing(true);
+        setIsError(false);
+        try {
+            const walletClientChainId = await walletClient.getChainId();
+            if (walletClientChainId !== chainId) {
+                await walletClient.switchChain({ id: chainId });
+            }
+            const approveTxData = (0, viem_1.encodeFunctionData)({
+                abi: abi_js_1.ERC_20_CONTRACT_ABI,
+                functionName: 'approve',
+                args: [approvedSpenderAddress || targetContractAddress, price]
+            });
+            const isSwapNativeToken = (0, connect_1.compareAddress)(viem_1.zeroAddress, selectedCurrency.address);
+            const transactions = [
+                // Swap quote optional approve step
+                ...(swapQuote?.approveData && !isSwapNativeToken
+                    ? [
+                        {
+                            to: selectedCurrency.address,
+                            data: swapQuote.approveData,
+                            chain: chainId
+                        }
+                    ]
+                    : []),
+                // Swap quote tx
+                {
+                    to: swapQuote.to,
+                    data: swapQuote.transactionData,
+                    chain: chainId,
+                    ...(isSwapNativeToken
+                        ? {
+                            value: BigInt(swapQuote.transactionValue)
+                        }
+                        : {})
+                },
+                // Actual transaction optional approve step
+                ...(isApproved || isNativeTokenSelectedCurrency
+                    ? []
+                    : [
+                        {
+                            to: currencyAddress,
+                            data: approveTxData,
+                            chainId: chainId
+                        }
+                    ]),
+                // transaction on the contract
+                {
+                    to: targetContractAddress,
+                    data: txData,
+                    chainId,
+                    ...(isNativeToken
+                        ? {
+                            value: BigInt(price)
+                        }
+                        : {})
+                }
+            ];
+            const txHash = await (0, connect_1.sendTransactions)({
+                chainId,
+                senderAddress: userAddress,
+                publicClient,
+                walletClient,
+                indexerClient,
+                connector,
+                transactions,
+                transactionConfirmations,
+                waitConfirmationForLastTransaction: false
+            });
+            analytics?.track({
+                event: 'SEND_TRANSACTION_REQUEST',
+                props: {
+                    ...supplementaryAnalyticsInfo,
+                    type: 'crypto',
+                    source: index_js_1.EVENT_SOURCE,
+                    chainId: String(chainId),
+                    listedCurrency: selectedCurrency.address,
+                    purchasedCurrency: currencyAddress,
+                    origin: window.location.origin,
+                    from: userAddress,
+                    to: targetContractAddress,
+                    item_ids: JSON.stringify(collectibles.map(c => c.tokenId)),
+                    item_quantities: JSON.stringify(collectibles.map(c => c.quantity)),
+                    currencySymbol: dataCurrencyInfo?.symbol || '',
+                    collectionAddress,
+                    txHash
+                },
+                nums: {
+                    currencyValue: Number(price),
+                    currencyValueDecimal: Number((0, viem_1.formatUnits)(BigInt(price), dataCurrencyInfo?.decimals || 18))
+                }
+            });
+            closeSelectPaymentModal();
+            skipOnCloseCallback();
+            openTransactionStatusModal({
+                chainId,
+                currencyAddress: selectedCurrency.address,
+                collectionAddress,
+                txHash,
+                items: collectibles.map(collectible => ({
+                    tokenId: collectible.tokenId,
+                    quantity: collectible.quantity,
+                    decimals: collectible.decimals,
+                    price: collectible.price || price
+                })),
+                onSuccess: () => {
+                    clearCachedBalances();
+                    onSuccess(txHash);
+                },
+                onClose
+            });
+        }
+        catch (e) {
+            console.error('Failed to purchase...', e);
+            onError(e);
+            setIsError(true);
+        }
+        setIsPurchasing(false);
+    };
+    const onClickPurchase = () => {
+        if ((0, connect_1.compareAddress)(selectedCurrency.address, currencyAddress)) {
+            onPurchaseMainCurrency();
+        }
+        else {
+            onClickPurchaseSwap();
+        }
+    };
+    const onClickAddFunds = () => {
+        const getNetworks = () => {
+            const network = (0, network_1.findSupportedNetwork)(chainId);
+            return network?.name?.toLowerCase();
+        };
+        skipOnCloseCallback();
+        closeSelectPaymentModal();
+        triggerAddFunds({
+            walletAddress: userAddress || '',
+            provider: onRampProvider || marketplace_1.TransactionOnRampProvider.sardine,
+            networks: getNetworks(),
+            defaultCryptoCurrency: dataCurrencyInfo?.symbol || '',
+            onClose: selectPaymentSettings?.onClose
+        });
+    };
+    const TokenSelector = () => {
+        return ((0, jsx_runtime_1.jsxs)("div", { onClick: () => {
+                setNavigation({
+                    location: 'token-selection',
+                    params: {
+                        selectedCurrency: {
+                            address: selectedCurrency.address,
+                            chainId: Number(selectedCurrency.chainId)
+                        }
+                    }
+                });
+            }, className: "flex flex-row gap-2 justify-between items-center p-2 bg-button-glass rounded-full cursor-pointer select-none", children: [(0, jsx_runtime_1.jsx)(design_system_1.TokenImage, { disableAnimation: true, size: "sm", src: selectedCurrencyInfo?.logoURI, withNetwork: Number(selectedCurrency.chainId) }), (0, jsx_runtime_1.jsx)(design_system_1.Text, { variant: "small", color: "text100", fontWeight: "bold", children: selectedCurrencyInfo?.symbol }), (0, jsx_runtime_1.jsx)("div", { className: "text-primary", children: (0, jsx_runtime_1.jsx)(design_system_1.ChevronDownIcon, { size: "md" }) })] }));
+    };
+    if (isLoading) {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-3 justify-center items-center h-full", children: [(0, jsx_runtime_1.jsx)(design_system_1.Spinner, {}), (0, jsx_runtime_1.jsx)(design_system_1.Text, { color: "text50", fontWeight: "medium", variant: "xsmall", children: "Fetching best crypto price for this purchase" })] }));
+    }
+    if (isInsufficientBalance) {
+        const formattedBalance = (0, viem_1.formatUnits)(BigInt(tokenBalance?.balance || '0'), selectedCurrencyInfo?.decimals || 18);
+        const displayBalance = (0, connect_1.formatDisplay)(formattedBalance, {
+            disableScientificNotation: true,
+            disableCompactNotation: true,
+            significantDigits: 6
+        });
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col justify-center items-center h-full w-full gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-row justify-between items-center w-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-0.5", children: [(0, jsx_runtime_1.jsx)(design_system_1.Text, { variant: "xsmall", color: "negative", fontWeight: "bold", style: {
+                                        fontSize: '24px'
+                                    }, children: displayPrice }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-row gap-1 items-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-negative", children: (0, jsx_runtime_1.jsx)(design_system_1.WarningIcon, { style: { width: '14px', height: '14px' } }) }), (0, jsx_runtime_1.jsx)(design_system_1.Text, { color: "negative", variant: "xsmall", fontWeight: "normal", children: "Insufficient funds" })] }), (0, jsx_runtime_1.jsxs)(design_system_1.Text, { color: "negative", variant: "xsmall", fontWeight: "normal", children: ["Balance: ", displayBalance, " ", selectedCurrencyInfo?.symbol] })] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(TokenSelector, {}) })] }), (0, jsx_runtime_1.jsx)(design_system_1.Button, { label: "Add Funds", className: "w-full", shape: "square", variant: "glass", leftIcon: () => (0, jsx_runtime_1.jsx)(design_system_1.AddIcon, { size: "md" }), onClick: onClickAddFunds })] }));
+    }
+    const PriceSection = () => {
+        if (isFree) {
+            return ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col mt-2 mb-1 w-full", children: (0, jsx_runtime_1.jsx)(design_system_1.Text, { color: "text100", variant: "small", fontWeight: "bold", children: "This item is free, click Confirm to mint to your wallet" }) }));
+        }
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-row justify-between items-center w-full gap-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-0", children: [(0, jsx_runtime_1.jsx)(design_system_1.Text, { variant: "xsmall", color: "text100", fontWeight: "bold", style: {
+                                fontSize: '24px'
+                            }, children: displayPrice }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)(design_system_1.Text, { color: "text50", variant: "xsmall", fontWeight: "normal", children: ["~$", priceFiat, " USD"] }), (0, jsx_runtime_1.jsx)(design_system_1.Text, { color: "text50", fontWeight: "bold", style: {
+                                        fontSize: '10px'
+                                    }, children: "\u00A0(fees included)" })] })] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(TokenSelector, {}) })] }));
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-4", children: [(0, jsx_runtime_1.jsx)(PriceSection, {}), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col justify-start items-center w-full gap-1", children: [isError && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col justify-start items-center w-full", children: (0, jsx_runtime_1.jsx)(design_system_1.Text, { variant: "xsmall", color: "negative", children: "An error occurred. Please try again." }) })), (0, jsx_runtime_1.jsx)(design_system_1.Button, { disabled: isPurchasing, label: isFree ? 'Confirm' : 'Confirm payment', className: "w-full", shape: "square", variant: "primary", onClick: onClickPurchase })] })] }));
+};
+exports.PayWithCryptoTab = PayWithCryptoTab;
+//# sourceMappingURL=index.js.map