@superlogic/spree-pay 0.1.18 → 0.1.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/index.cjs +262 -155
- package/build/index.css +16 -0
- package/build/index.js +224 -117
- package/package.json +2 -2
package/build/index.cjs
CHANGED
|
@@ -39,9 +39,9 @@ __export(index_exports, {
|
|
|
39
39
|
module.exports = __toCommonJS(index_exports);
|
|
40
40
|
|
|
41
41
|
// src/SpreePay.tsx
|
|
42
|
-
var
|
|
42
|
+
var import_react18 = require("react");
|
|
43
43
|
var import_nice_modal_react7 = __toESM(require("@ebay/nice-modal-react"), 1);
|
|
44
|
-
var
|
|
44
|
+
var import_swr5 = require("swr");
|
|
45
45
|
|
|
46
46
|
// src/context/SpreePayActionsContext.tsx
|
|
47
47
|
var import_react = require("react");
|
|
@@ -598,10 +598,10 @@ var slapiApi = {
|
|
|
598
598
|
throw new Error("slapiApi is not configured. Call registerApi(...) first.");
|
|
599
599
|
}
|
|
600
600
|
};
|
|
601
|
-
var registerApi = (
|
|
602
|
-
cfg.baseUrl =
|
|
603
|
-
cfg.accessToken =
|
|
604
|
-
cfg.tenantId =
|
|
601
|
+
var registerApi = (config) => {
|
|
602
|
+
cfg.baseUrl = config.baseUrl;
|
|
603
|
+
cfg.accessToken = config.accessToken;
|
|
604
|
+
cfg.tenantId = config.tenantId;
|
|
605
605
|
slapiApi = {
|
|
606
606
|
get: async (key) => {
|
|
607
607
|
const url = buildUrl(key);
|
|
@@ -2449,16 +2449,16 @@ var CreditCardTab = () => {
|
|
|
2449
2449
|
};
|
|
2450
2450
|
|
|
2451
2451
|
// src/components/CryptoTab/Crypto/CryptoWrapper.tsx
|
|
2452
|
+
var import_react16 = require("react");
|
|
2452
2453
|
var import_react_query = require("@tanstack/react-query");
|
|
2453
2454
|
var import_nice_modal_react6 = __toESM(require("@ebay/nice-modal-react"), 1);
|
|
2454
2455
|
var import_rainbowkit2 = require("@rainbow-me/rainbowkit");
|
|
2455
2456
|
var import_styles = require("@rainbow-me/rainbowkit/styles.css");
|
|
2456
|
-
var import_wallets = require("@rainbow-me/rainbowkit/wallets");
|
|
2457
2457
|
var import_wagmi5 = require("wagmi");
|
|
2458
2458
|
var import_chains = require("wagmi/chains");
|
|
2459
2459
|
|
|
2460
2460
|
// src/components/CryptoTab/Crypto/Crypto.tsx
|
|
2461
|
-
var
|
|
2461
|
+
var import_react15 = require("react");
|
|
2462
2462
|
var import_wagmi4 = require("wagmi");
|
|
2463
2463
|
|
|
2464
2464
|
// ../../node_modules/@wagmi/core/dist/esm/utils/getAction.js
|
|
@@ -2474,9 +2474,9 @@ function getAction(client, actionFn, name) {
|
|
|
2474
2474
|
|
|
2475
2475
|
// ../../node_modules/@wagmi/core/dist/esm/actions/readContract.js
|
|
2476
2476
|
var import_actions = require("viem/actions");
|
|
2477
|
-
function readContract(
|
|
2477
|
+
function readContract(config, parameters) {
|
|
2478
2478
|
const { chainId, ...rest } = parameters;
|
|
2479
|
-
const client =
|
|
2479
|
+
const client = config.getClient({ chainId });
|
|
2480
2480
|
const action = getAction(client, import_actions.readContract, "readContract");
|
|
2481
2481
|
return action(rest);
|
|
2482
2482
|
}
|
|
@@ -2484,9 +2484,9 @@ function readContract(config2, parameters) {
|
|
|
2484
2484
|
// ../../node_modules/@wagmi/core/dist/esm/actions/waitForTransactionReceipt.js
|
|
2485
2485
|
var import_viem2 = require("viem");
|
|
2486
2486
|
var import_actions2 = require("viem/actions");
|
|
2487
|
-
async function waitForTransactionReceipt(
|
|
2487
|
+
async function waitForTransactionReceipt(config, parameters) {
|
|
2488
2488
|
const { chainId, timeout = 0, ...rest } = parameters;
|
|
2489
|
-
const client =
|
|
2489
|
+
const client = config.getClient({ chainId });
|
|
2490
2490
|
const action = getAction(client, import_actions2.waitForTransactionReceipt, "waitForTransactionReceipt");
|
|
2491
2491
|
const receipt = await action({ ...rest, timeout });
|
|
2492
2492
|
if (receipt.status === "reverted") {
|
|
@@ -2558,7 +2558,7 @@ var MAX_UINT256 = BigInt(2) ** BigInt(256) - BigInt(1);
|
|
|
2558
2558
|
var ONE_INCH_AGGREGATION_ROUTER_V6 = "0x111111125421ca6dc452d289314280a0f8842a65";
|
|
2559
2559
|
var useCryptoPayment = () => {
|
|
2560
2560
|
const { data: walletClient } = (0, import_wagmi.useWalletClient)();
|
|
2561
|
-
const
|
|
2561
|
+
const config = (0, import_wagmi.useConfig)();
|
|
2562
2562
|
const { selectedPaymentMethod } = useSpreePaymentMethod();
|
|
2563
2563
|
const cryptoPayment = async (params) => {
|
|
2564
2564
|
if (!walletClient) {
|
|
@@ -2574,7 +2574,7 @@ var useCryptoPayment = () => {
|
|
|
2574
2574
|
if (!tokenAddress) {
|
|
2575
2575
|
throw new Error("Token address not found");
|
|
2576
2576
|
}
|
|
2577
|
-
const allowance = await readContract(
|
|
2577
|
+
const allowance = await readContract(config, {
|
|
2578
2578
|
address: tokenAddress,
|
|
2579
2579
|
abi: import_viem4.erc20Abi,
|
|
2580
2580
|
functionName: "allowance",
|
|
@@ -2587,7 +2587,7 @@ var useCryptoPayment = () => {
|
|
|
2587
2587
|
functionName: "approve",
|
|
2588
2588
|
args: [ONE_INCH_AGGREGATION_ROUTER_V6, MAX_UINT256]
|
|
2589
2589
|
});
|
|
2590
|
-
await waitForTransactionReceipt(
|
|
2590
|
+
await waitForTransactionReceipt(config, {
|
|
2591
2591
|
hash: result,
|
|
2592
2592
|
confirmations: 1
|
|
2593
2593
|
// You can change the number of block confirmations as per your requirement
|
|
@@ -2646,9 +2646,9 @@ var ConnectButton = () => {
|
|
|
2646
2646
|
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
2647
2647
|
"button",
|
|
2648
2648
|
{
|
|
2649
|
-
className: "h-[34px] rounded-md border-1 border-black px-3 text-sm font-medium text-
|
|
2649
|
+
className: "h-[34px] rounded-md border-1 border-black px-3 text-sm font-medium text-black",
|
|
2650
2650
|
onClick: openChainModal,
|
|
2651
|
-
children: "
|
|
2651
|
+
children: "Select a Network"
|
|
2652
2652
|
}
|
|
2653
2653
|
);
|
|
2654
2654
|
}
|
|
@@ -2781,20 +2781,90 @@ var Logos = () => {
|
|
|
2781
2781
|
var import_nice_modal_react5 = __toESM(require("@ebay/nice-modal-react"), 1);
|
|
2782
2782
|
|
|
2783
2783
|
// src/modals/CryptoSelectModal.tsx
|
|
2784
|
+
var import_react14 = require("react");
|
|
2784
2785
|
var import_nice_modal_react4 = __toESM(require("@ebay/nice-modal-react"), 1);
|
|
2785
2786
|
|
|
2786
|
-
// src/
|
|
2787
|
+
// ../ui/src/components/input.tsx
|
|
2788
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
2789
|
+
function Input2({ className, type, ...props }) {
|
|
2790
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
2791
|
+
"input",
|
|
2792
|
+
{
|
|
2793
|
+
type,
|
|
2794
|
+
"data-slot": "input",
|
|
2795
|
+
className: cn2(
|
|
2796
|
+
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
|
2797
|
+
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
|
2798
|
+
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
|
2799
|
+
className
|
|
2800
|
+
),
|
|
2801
|
+
...props
|
|
2802
|
+
}
|
|
2803
|
+
);
|
|
2804
|
+
}
|
|
2805
|
+
|
|
2806
|
+
// ../../node_modules/@radix-ui/react-separator/dist/index.mjs
|
|
2787
2807
|
var React13 = __toESM(require("react"), 1);
|
|
2808
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
2809
|
+
var NAME = "Separator";
|
|
2810
|
+
var DEFAULT_ORIENTATION = "horizontal";
|
|
2811
|
+
var ORIENTATIONS = ["horizontal", "vertical"];
|
|
2812
|
+
var Separator = React13.forwardRef((props, forwardedRef) => {
|
|
2813
|
+
const { decorative, orientation: orientationProp = DEFAULT_ORIENTATION, ...domProps } = props;
|
|
2814
|
+
const orientation = isValidOrientation(orientationProp) ? orientationProp : DEFAULT_ORIENTATION;
|
|
2815
|
+
const ariaOrientation = orientation === "vertical" ? orientation : void 0;
|
|
2816
|
+
const semanticProps = decorative ? { role: "none" } : { "aria-orientation": ariaOrientation, role: "separator" };
|
|
2817
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
2818
|
+
Primitive.div,
|
|
2819
|
+
{
|
|
2820
|
+
"data-orientation": orientation,
|
|
2821
|
+
...semanticProps,
|
|
2822
|
+
...domProps,
|
|
2823
|
+
ref: forwardedRef
|
|
2824
|
+
}
|
|
2825
|
+
);
|
|
2826
|
+
});
|
|
2827
|
+
Separator.displayName = NAME;
|
|
2828
|
+
function isValidOrientation(orientation) {
|
|
2829
|
+
return ORIENTATIONS.includes(orientation);
|
|
2830
|
+
}
|
|
2831
|
+
var Root6 = Separator;
|
|
2832
|
+
|
|
2833
|
+
// ../ui/src/components/separator.tsx
|
|
2834
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
2835
|
+
function Separator2({
|
|
2836
|
+
className,
|
|
2837
|
+
orientation = "horizontal",
|
|
2838
|
+
decorative = true,
|
|
2839
|
+
...props
|
|
2840
|
+
}) {
|
|
2841
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
2842
|
+
Root6,
|
|
2843
|
+
{
|
|
2844
|
+
"data-slot": "separator",
|
|
2845
|
+
decorative,
|
|
2846
|
+
orientation,
|
|
2847
|
+
className: cn2(
|
|
2848
|
+
"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
|
|
2849
|
+
className
|
|
2850
|
+
),
|
|
2851
|
+
...props
|
|
2852
|
+
}
|
|
2853
|
+
);
|
|
2854
|
+
}
|
|
2855
|
+
|
|
2856
|
+
// src/hooks/useBaseERC20Token.ts
|
|
2857
|
+
var React14 = __toESM(require("react"), 1);
|
|
2788
2858
|
var import_viem5 = require("viem");
|
|
2789
2859
|
var import_wagmi2 = require("wagmi");
|
|
2790
2860
|
function useBaseERC20Token() {
|
|
2791
2861
|
const { address } = (0, import_wagmi2.useAccount)();
|
|
2792
2862
|
const baseClient = (0, import_wagmi2.usePublicClient)({ chainId: BASE_CHAIN_ID });
|
|
2793
2863
|
const defaultClient = (0, import_wagmi2.usePublicClient)();
|
|
2794
|
-
const [rows, setRows] =
|
|
2795
|
-
const [isLoading, setLoading] =
|
|
2796
|
-
const [error, setError] =
|
|
2797
|
-
|
|
2864
|
+
const [rows, setRows] = React14.useState([]);
|
|
2865
|
+
const [isLoading, setLoading] = React14.useState(false);
|
|
2866
|
+
const [error, setError] = React14.useState(null);
|
|
2867
|
+
React14.useEffect(() => {
|
|
2798
2868
|
let cancelled = false;
|
|
2799
2869
|
async function run() {
|
|
2800
2870
|
const client = baseClient ?? defaultClient;
|
|
@@ -2867,44 +2937,64 @@ function useBaseNativeToken() {
|
|
|
2867
2937
|
};
|
|
2868
2938
|
}
|
|
2869
2939
|
|
|
2940
|
+
// src/hooks/useBaseTokens.ts
|
|
2941
|
+
var import_swr4 = __toESM(require("swr"), 1);
|
|
2942
|
+
var useBaseTokens = () => {
|
|
2943
|
+
const { data: resData, isLoading } = (0, import_swr4.default)(`/v1/base-transactions/tokens`);
|
|
2944
|
+
return { tokens: resData?.data ?? [], tokensIsLoading: isLoading };
|
|
2945
|
+
};
|
|
2946
|
+
|
|
2870
2947
|
// src/modals/CryptoSelectModal.tsx
|
|
2871
|
-
var
|
|
2948
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
2872
2949
|
var CryptoSelectModal = import_nice_modal_react4.default.create(() => {
|
|
2873
2950
|
const modal = (0, import_nice_modal_react4.useModal)();
|
|
2874
2951
|
const { isLoading, error, erc20Balances } = useBaseERC20Token();
|
|
2875
2952
|
const { isLoadingNative, nativeError, nativeBalance } = useBaseNativeToken();
|
|
2953
|
+
const { tokens, tokensIsLoading } = useBaseTokens();
|
|
2954
|
+
const [search, setSearch] = (0, import_react14.useState)("");
|
|
2955
|
+
const filteredCoins = (0, import_react14.useMemo)(() => {
|
|
2956
|
+
return tokens.filter(
|
|
2957
|
+
(coin) => coin.name.toLowerCase().includes(search.toLowerCase()) || coin.symbol.toLowerCase().includes(search.toLowerCase())
|
|
2958
|
+
);
|
|
2959
|
+
}, [tokens, search]);
|
|
2876
2960
|
const { setSelectedPaymentMethod } = useSpreePaymentMethod();
|
|
2877
2961
|
const handleSelect = (coin) => {
|
|
2878
2962
|
modal.remove();
|
|
2879
2963
|
setSelectedPaymentMethod({ type: "CRYPTO" /* CRYPTO */, method: coin });
|
|
2880
2964
|
};
|
|
2881
|
-
|
|
2882
|
-
|
|
2883
|
-
|
|
2884
|
-
|
|
2885
|
-
|
|
2886
|
-
|
|
2887
|
-
/* @__PURE__ */ (0,
|
|
2888
|
-
"path",
|
|
2889
|
-
{
|
|
2890
|
-
|
|
2891
|
-
|
|
2892
|
-
|
|
2893
|
-
|
|
2894
|
-
|
|
2895
|
-
|
|
2896
|
-
|
|
2897
|
-
|
|
2898
|
-
/* @__PURE__ */ (0,
|
|
2899
|
-
|
|
2900
|
-
|
|
2965
|
+
const userCoins = [nativeBalance, ...erc20Balances].filter(Boolean);
|
|
2966
|
+
const userCoinSymbols = userCoins.map((c) => c.symbol);
|
|
2967
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Dialog, { open: modal.visible, onOpenChange: modal.remove, children: [
|
|
2968
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DialogDescription, { className: "hidden", children: "Crypto Select Modal" }),
|
|
2969
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(DialogContent, { showCloseButton: false, className: "max-h-[90vh] gap-0 p-0", children: [
|
|
2970
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
|
|
2971
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
|
|
2972
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("button", { className: "rounded-md hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "25", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { stroke: "#000", d: "m15 6.5-6 6 6 6" }) }) }),
|
|
2973
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DialogTitle, { className: "text-primary text-2xl font-semibold", children: "Select a token" }),
|
|
2974
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("button", { className: "rounded-md p-1 hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "17", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
2975
|
+
"path",
|
|
2976
|
+
{
|
|
2977
|
+
fill: "#000",
|
|
2978
|
+
d: "M12.6 3.9c.2.2.2.52 0 .71L8.7 8.5l3.9 3.89a.5.5 0 1 1-.71.7L8 9.22 4.11 13.1a.5.5 0 1 1-.7-.71L7.28 8.5 3.4 4.61a.5.5 0 1 1 .71-.7L8 7.78l3.89-3.89c.2-.2.51-.2.7 0Z"
|
|
2979
|
+
}
|
|
2980
|
+
) }) })
|
|
2981
|
+
] }),
|
|
2982
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Input2, { onChange: (e) => setSearch(e.target.value), placeholder: "Search by token name", value: search })
|
|
2983
|
+
] }),
|
|
2984
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Separator2, { className: "hidden md:block" }),
|
|
2985
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
|
|
2986
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h3", { className: "text-primary text-xl font-semibold", children: "Tokens with wallet balance" }),
|
|
2987
|
+
(error || nativeError) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-center text-sm text-red-500", children: "Something wrong" }),
|
|
2988
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
|
|
2989
|
+
isLoadingNative && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
|
|
2990
|
+
nativeBalance && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
2901
2991
|
"button",
|
|
2902
2992
|
{
|
|
2903
2993
|
className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-black hover:bg-gray-100",
|
|
2904
2994
|
onClick: () => handleSelect(nativeBalance),
|
|
2905
2995
|
children: [
|
|
2906
|
-
/* @__PURE__ */ (0,
|
|
2907
|
-
nativeBalance.logoURI && /* @__PURE__ */ (0,
|
|
2996
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
2997
|
+
nativeBalance.logoURI && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
2908
2998
|
"img",
|
|
2909
2999
|
{
|
|
2910
3000
|
className: "h-8 w-8 shrink-0",
|
|
@@ -2912,36 +3002,57 @@ var CryptoSelectModal = import_nice_modal_react4.default.create(() => {
|
|
|
2912
3002
|
alt: `${nativeBalance.symbol} logo`
|
|
2913
3003
|
}
|
|
2914
3004
|
),
|
|
2915
|
-
/* @__PURE__ */ (0,
|
|
3005
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.symbol })
|
|
2916
3006
|
] }),
|
|
2917
|
-
/* @__PURE__ */ (0,
|
|
3007
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.formatted })
|
|
2918
3008
|
]
|
|
2919
3009
|
},
|
|
2920
3010
|
nativeBalance.symbol
|
|
2921
3011
|
),
|
|
2922
|
-
isLoading && /* @__PURE__ */ (0,
|
|
2923
|
-
/* @__PURE__ */ (0,
|
|
2924
|
-
/* @__PURE__ */ (0,
|
|
2925
|
-
/* @__PURE__ */ (0,
|
|
3012
|
+
isLoading && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
|
|
3013
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
|
|
3014
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
|
|
3015
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
|
|
2926
3016
|
] }),
|
|
2927
3017
|
erc20Balances.map((coin) => {
|
|
2928
3018
|
const Icon = getSymbolLogo(coin.symbol);
|
|
2929
|
-
return /* @__PURE__ */ (0,
|
|
3019
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
2930
3020
|
"button",
|
|
2931
3021
|
{
|
|
2932
3022
|
className: "flex h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-black hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50",
|
|
2933
3023
|
onClick: () => handleSelect(coin),
|
|
2934
3024
|
children: [
|
|
2935
|
-
/* @__PURE__ */ (0,
|
|
3025
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
2936
3026
|
Boolean(Icon) && Icon,
|
|
2937
|
-
/* @__PURE__ */ (0,
|
|
3027
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm font-medium", children: coin.symbol })
|
|
2938
3028
|
] }),
|
|
2939
|
-
/* @__PURE__ */ (0,
|
|
3029
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm font-medium", children: coin.formatted })
|
|
2940
3030
|
]
|
|
2941
3031
|
},
|
|
2942
3032
|
coin.symbol
|
|
2943
3033
|
);
|
|
2944
3034
|
})
|
|
3035
|
+
] }),
|
|
3036
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h3", { className: "text-primary text-xl font-semibold", children: "All Tokens" }),
|
|
3037
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex max-h-[40vh] w-full flex-col gap-1 overflow-y-auto", children: [
|
|
3038
|
+
tokensIsLoading && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
|
|
3039
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
|
|
3040
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
|
|
3041
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
|
|
3042
|
+
] }),
|
|
3043
|
+
filteredCoins.map((token) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
3044
|
+
"button",
|
|
3045
|
+
{
|
|
3046
|
+
disabled: !userCoinSymbols.includes(token.symbol),
|
|
3047
|
+
onClick: () => handleSelect(userCoins.find((c) => c.symbol === token.symbol)),
|
|
3048
|
+
className: "flex min-h-11 w-full items-center justify-between gap-4 rounded-sm px-1.5 text-black hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50",
|
|
3049
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
3050
|
+
token.logoURI ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("img", { className: "h-8 w-8 shrink-0", src: token.logoURI, alt: `${token.name} logo` }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-8 w-8 shrink-0 rounded-full bg-gray-400" }),
|
|
3051
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm font-medium", children: token.symbol })
|
|
3052
|
+
] })
|
|
3053
|
+
},
|
|
3054
|
+
token.symbol
|
|
3055
|
+
))
|
|
2945
3056
|
] })
|
|
2946
3057
|
] })
|
|
2947
3058
|
] })
|
|
@@ -2950,51 +3061,51 @@ var CryptoSelectModal = import_nice_modal_react4.default.create(() => {
|
|
|
2950
3061
|
CryptoSelectModal.displayName = "CryptoSelectModal";
|
|
2951
3062
|
|
|
2952
3063
|
// src/components/CryptoTab/Crypto/SelectCoinButton.tsx
|
|
2953
|
-
var
|
|
3064
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
2954
3065
|
var SelectCoinButton = () => {
|
|
2955
3066
|
const openModal = () => {
|
|
2956
3067
|
import_nice_modal_react5.default.show(CryptoSelectModal);
|
|
2957
3068
|
};
|
|
2958
|
-
return /* @__PURE__ */ (0,
|
|
2959
|
-
/* @__PURE__ */ (0,
|
|
2960
|
-
/* @__PURE__ */ (0,
|
|
2961
|
-
/* @__PURE__ */ (0,
|
|
2962
|
-
/* @__PURE__ */ (0,
|
|
3069
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("button", { onClick: openModal, type: "button", className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
|
|
3070
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "bg-primary flex h-full w-11 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white" }) }),
|
|
3071
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex h-full w-full items-center justify-between px-3", children: [
|
|
3072
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "font-medium text-black/50", children: "Select a token" }) }),
|
|
3073
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { stroke: "#000", strokeLinecap: "round", d: "m6 12.43 4-4-4-4" }) })
|
|
2963
3074
|
] })
|
|
2964
3075
|
] });
|
|
2965
3076
|
};
|
|
2966
3077
|
|
|
2967
3078
|
// src/components/CryptoTab/Crypto/SelectedCoin.tsx
|
|
2968
|
-
var
|
|
3079
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
2969
3080
|
var SelectedCoin = (props) => {
|
|
2970
3081
|
const { coin, balance, logoURI } = props;
|
|
2971
3082
|
const Icon = getSymbolLogo(coin);
|
|
2972
|
-
return /* @__PURE__ */ (0,
|
|
2973
|
-
/* @__PURE__ */ (0,
|
|
2974
|
-
/* @__PURE__ */ (0,
|
|
2975
|
-
/* @__PURE__ */ (0,
|
|
3083
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
|
|
3084
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "bg-primary flex h-full w-11 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "bg-primary h-2.5 w-2.5 rounded-full" }) }) }),
|
|
3085
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "border-primary flex h-full w-full items-center justify-between rounded-r-md border-1 !border-l-0 px-3", children: [
|
|
3086
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-1", children: [
|
|
2976
3087
|
Icon,
|
|
2977
|
-
!Icon && logoURI && /* @__PURE__ */ (0,
|
|
2978
|
-
/* @__PURE__ */ (0,
|
|
2979
|
-
/* @__PURE__ */ (0,
|
|
3088
|
+
!Icon && logoURI && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("img", { className: "mr-1 h-8 w-8 shrink-0", src: logoURI, alt: `${coin} logo` }),
|
|
3089
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "font-semibold text-black", children: coin }),
|
|
3090
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("path", { d: "M6 12.4341L10 8.43408L6 4.43408", stroke: "black", strokeLinecap: "round" }) })
|
|
2980
3091
|
] }),
|
|
2981
|
-
/* @__PURE__ */ (0,
|
|
3092
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("p", { className: "text-xs font-medium text-black/50", children: [
|
|
2982
3093
|
"Wallet balance ",
|
|
2983
|
-
/* @__PURE__ */ (0,
|
|
3094
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-black", children: balance })
|
|
2984
3095
|
] })
|
|
2985
3096
|
] })
|
|
2986
3097
|
] });
|
|
2987
3098
|
};
|
|
2988
3099
|
|
|
2989
3100
|
// src/components/CryptoTab/Crypto/Crypto.tsx
|
|
2990
|
-
var
|
|
3101
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
2991
3102
|
var Crypto = () => {
|
|
2992
3103
|
const { address } = (0, import_wagmi4.useAccount)();
|
|
2993
3104
|
const { selectedPaymentMethod } = useSpreePaymentMethod();
|
|
2994
3105
|
const { cryptoPayment } = useCryptoPayment();
|
|
2995
3106
|
const isWalletConnected = Boolean(address);
|
|
2996
3107
|
const { register } = useSpreePayRegister();
|
|
2997
|
-
const handlePay = (0,
|
|
3108
|
+
const handlePay = (0, import_react15.useCallback)(
|
|
2998
3109
|
async (data) => {
|
|
2999
3110
|
try {
|
|
3000
3111
|
const res = await cryptoPayment(data);
|
|
@@ -3008,17 +3119,17 @@ var Crypto = () => {
|
|
|
3008
3119
|
},
|
|
3009
3120
|
[cryptoPayment]
|
|
3010
3121
|
);
|
|
3011
|
-
(0,
|
|
3122
|
+
(0, import_react15.useEffect)(() => {
|
|
3012
3123
|
register(handlePay);
|
|
3013
3124
|
}, [register, handlePay]);
|
|
3014
|
-
return /* @__PURE__ */ (0,
|
|
3015
|
-
/* @__PURE__ */ (0,
|
|
3016
|
-
/* @__PURE__ */ (0,
|
|
3017
|
-
/* @__PURE__ */ (0,
|
|
3125
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-col items-baseline gap-4", children: [
|
|
3126
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex w-full items-center justify-between gap-4", children: [
|
|
3127
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h3", { className: "text-primary text-xl leading-[1.7] font-semibold", children: "Pay with Crypto" }),
|
|
3128
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ConnectButton, {})
|
|
3018
3129
|
] }),
|
|
3019
|
-
!isWalletConnected && /* @__PURE__ */ (0,
|
|
3020
|
-
isWalletConnected && /* @__PURE__ */ (0,
|
|
3021
|
-
selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method && /* @__PURE__ */ (0,
|
|
3130
|
+
!isWalletConnected && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Logos, {}),
|
|
3131
|
+
isWalletConnected && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
|
|
3132
|
+
selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3022
3133
|
SelectedCoin,
|
|
3023
3134
|
{
|
|
3024
3135
|
coin: selectedPaymentMethod.method.symbol,
|
|
@@ -3026,46 +3137,42 @@ var Crypto = () => {
|
|
|
3026
3137
|
logoURI: selectedPaymentMethod.method.logoURI
|
|
3027
3138
|
}
|
|
3028
3139
|
),
|
|
3029
|
-
/* @__PURE__ */ (0,
|
|
3140
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SelectCoinButton, {})
|
|
3030
3141
|
] })
|
|
3031
3142
|
] });
|
|
3032
3143
|
};
|
|
3033
3144
|
|
|
3034
3145
|
// src/components/CryptoTab/Crypto/CryptoWrapper.tsx
|
|
3035
|
-
var
|
|
3146
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
3036
3147
|
var queryClient = new import_react_query.QueryClient();
|
|
3037
|
-
var connectors = (0, import_rainbowkit2.connectorsForWallets)(
|
|
3038
|
-
[
|
|
3039
|
-
{
|
|
3040
|
-
groupName: "Supported",
|
|
3041
|
-
wallets: [import_wallets.injectedWallet, import_wallets.walletConnectWallet]
|
|
3042
|
-
}
|
|
3043
|
-
],
|
|
3044
|
-
{ appName: "Spree Pay", projectId: "YOUR_PROJECT_ID" }
|
|
3045
|
-
);
|
|
3046
|
-
var config = (0, import_wagmi5.createConfig)({
|
|
3047
|
-
chains: [import_chains.base],
|
|
3048
|
-
connectors,
|
|
3049
|
-
transports: { [import_chains.base.id]: (0, import_wagmi5.http)() },
|
|
3050
|
-
ssr: true
|
|
3051
|
-
});
|
|
3052
3148
|
var CryptoWrapper = () => {
|
|
3053
|
-
|
|
3149
|
+
const { spreePayConfig } = useSpreePayConfig();
|
|
3150
|
+
const config = (0, import_react16.useMemo)(() => {
|
|
3151
|
+
if (!spreePayConfig) return null;
|
|
3152
|
+
return (0, import_rainbowkit2.getDefaultConfig)({
|
|
3153
|
+
appName: spreePayConfig.rainbowAppName || "AIR Shop",
|
|
3154
|
+
projectId: spreePayConfig.rainbowProjectId || "3fdcd5ff50cb84917cd05e40146975d8",
|
|
3155
|
+
chains: [import_chains.base],
|
|
3156
|
+
ssr: true
|
|
3157
|
+
});
|
|
3158
|
+
}, [spreePayConfig]);
|
|
3159
|
+
if (!config) return null;
|
|
3160
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_wagmi5.WagmiProvider, { config, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_rainbowkit2.RainbowKitProvider, { theme: (0, import_rainbowkit2.lightTheme)({ borderRadius: "large" }), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_nice_modal_react6.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Crypto, {}) }) }) }) });
|
|
3054
3161
|
};
|
|
3055
3162
|
|
|
3056
3163
|
// src/components/CryptoTab/CryptoTab.tsx
|
|
3057
|
-
var
|
|
3164
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
3058
3165
|
var CryptoTab = () => {
|
|
3059
|
-
return /* @__PURE__ */ (0,
|
|
3060
|
-
/* @__PURE__ */ (0,
|
|
3061
|
-
/* @__PURE__ */ (0,
|
|
3166
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { children: [
|
|
3167
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-5", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CryptoWrapper, {}) }),
|
|
3168
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PointsSwitch, { disabled: true }) })
|
|
3062
3169
|
] });
|
|
3063
3170
|
};
|
|
3064
3171
|
|
|
3065
3172
|
// src/components/TabButtons.tsx
|
|
3066
|
-
var
|
|
3173
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
3067
3174
|
var TabButton = ({ isDisabled = true, isActive, children, onClick }) => {
|
|
3068
|
-
return /* @__PURE__ */ (0,
|
|
3175
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
3069
3176
|
"button",
|
|
3070
3177
|
{
|
|
3071
3178
|
disabled: isDisabled,
|
|
@@ -3088,50 +3195,50 @@ var TabButtons = (props) => {
|
|
|
3088
3195
|
onChange({ type, method: null });
|
|
3089
3196
|
}
|
|
3090
3197
|
};
|
|
3091
|
-
return /* @__PURE__ */ (0,
|
|
3092
|
-
/* @__PURE__ */ (0,
|
|
3198
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex gap-2", children: [
|
|
3199
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
|
|
3093
3200
|
TabButton,
|
|
3094
3201
|
{
|
|
3095
3202
|
isDisabled: !spreePayConfig?.creditCard.enabled,
|
|
3096
3203
|
onClick: handleChange("CREDIT_CARD" /* CREDIT_CARD */),
|
|
3097
3204
|
isActive: value === "CREDIT_CARD" /* CREDIT_CARD */,
|
|
3098
3205
|
children: [
|
|
3099
|
-
/* @__PURE__ */ (0,
|
|
3206
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
3100
3207
|
"path",
|
|
3101
3208
|
{
|
|
3102
3209
|
fill: "currentColor",
|
|
3103
3210
|
d: "M22 6v12c0 .55-.2 1.02-.59 1.41-.39.4-.86.59-1.41.59H4c-.55 0-1.02-.2-1.41-.59-.4-.39-.59-.86-.59-1.41V6c0-.55.2-1.02.59-1.41C2.98 4.19 3.45 4 4 4h16c.55 0 1.02.2 1.41.59.4.39.59.86.59 1.41ZM4 8h16V6H4v2Zm0 4v6h16v-6H4Z"
|
|
3104
3211
|
}
|
|
3105
3212
|
) }),
|
|
3106
|
-
/* @__PURE__ */ (0,
|
|
3213
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-sm font-medium", children: "Card" })
|
|
3107
3214
|
]
|
|
3108
3215
|
}
|
|
3109
3216
|
),
|
|
3110
|
-
/* @__PURE__ */ (0,
|
|
3217
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
|
|
3111
3218
|
TabButton,
|
|
3112
3219
|
{
|
|
3113
3220
|
isDisabled: !spreePayConfig?.creditCard.enabled,
|
|
3114
3221
|
onClick: handleChange("CRYPTO" /* CRYPTO */),
|
|
3115
3222
|
isActive: value === "CRYPTO" /* CRYPTO */,
|
|
3116
3223
|
children: [
|
|
3117
|
-
/* @__PURE__ */ (0,
|
|
3118
|
-
/* @__PURE__ */ (0,
|
|
3224
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("svg", { className: "my-1", xmlns: "http://www.w3.org/2000/svg", width: "30", height: "16", fill: "none", children: [
|
|
3225
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
3119
3226
|
"path",
|
|
3120
3227
|
{
|
|
3121
3228
|
fill: "currentColor",
|
|
3122
3229
|
d: "M14.5 0C19.2 0 23 3.58 23 8s-3.8 8-8.5 8a8.93 8.93 0 0 1-3.35-.65 8 8 0 0 0 2.24-1.44c.36.06.73.09 1.11.09 3.7 0 6.5-2.8 6.5-6s-2.8-6-6.5-6c-.38 0-.75.03-1.11.09A8 8 0 0 0 11.15.65 8.93 8.93 0 0 1 14.5 0Z"
|
|
3123
3230
|
}
|
|
3124
3231
|
),
|
|
3125
|
-
/* @__PURE__ */ (0,
|
|
3232
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
3126
3233
|
"path",
|
|
3127
3234
|
{
|
|
3128
3235
|
fill: "currentColor",
|
|
3129
3236
|
d: "M21.15 0c4.7 0 8.5 3.58 8.5 8s-3.8 8-8.5 8a8.93 8.93 0 0 1-3.35-.65 8 8 0 0 0 2.24-1.44c.36.06.73.09 1.1.09 3.71 0 6.5-2.8 6.5-6s-2.79-6-6.5-6c-.37 0-.74.03-1.1.09A8 8 0 0 0 17.8.65 8.93 8.93 0 0 1 21.15 0Z"
|
|
3130
3237
|
}
|
|
3131
3238
|
),
|
|
3132
|
-
/* @__PURE__ */ (0,
|
|
3239
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "2" })
|
|
3133
3240
|
] }),
|
|
3134
|
-
/* @__PURE__ */ (0,
|
|
3241
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-sm font-medium", children: "Crypto" })
|
|
3135
3242
|
]
|
|
3136
3243
|
}
|
|
3137
3244
|
)
|
|
@@ -3139,42 +3246,42 @@ var TabButtons = (props) => {
|
|
|
3139
3246
|
};
|
|
3140
3247
|
|
|
3141
3248
|
// src/components/Tabs.tsx
|
|
3142
|
-
var
|
|
3249
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
3143
3250
|
var Tabs = () => {
|
|
3144
3251
|
const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
|
|
3145
|
-
return /* @__PURE__ */ (0,
|
|
3146
|
-
/* @__PURE__ */ (0,
|
|
3147
|
-
/* @__PURE__ */ (0,
|
|
3148
|
-
/* @__PURE__ */ (0,
|
|
3252
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "mb-4 rounded-3xl border border-black/25 bg-white", children: [
|
|
3253
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex w-full flex-col gap-4 border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-6", children: [
|
|
3254
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h2", { className: "text-primary text-2xl font-semibold", children: "Choose a Payment Method" }),
|
|
3255
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
|
|
3149
3256
|
] }),
|
|
3150
|
-
selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ (0,
|
|
3151
|
-
selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ (0,
|
|
3257
|
+
selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CreditCardTab, {}),
|
|
3258
|
+
selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CryptoTab, {})
|
|
3152
3259
|
] });
|
|
3153
3260
|
};
|
|
3154
3261
|
|
|
3155
3262
|
// src/SpreePayContent.tsx
|
|
3156
|
-
var
|
|
3263
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
3157
3264
|
var SpreePayContent = ({ isLoggedIn }) => {
|
|
3158
|
-
return /* @__PURE__ */ (0,
|
|
3159
|
-
/* @__PURE__ */ (0,
|
|
3160
|
-
/* @__PURE__ */ (0,
|
|
3161
|
-
/* @__PURE__ */ (0,
|
|
3265
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "w-full", children: [
|
|
3266
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Tabs, {}),
|
|
3267
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(CheckoutButton, { isLoggedIn }),
|
|
3268
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SpreeLegal, {})
|
|
3162
3269
|
] });
|
|
3163
3270
|
};
|
|
3164
3271
|
|
|
3165
3272
|
// src/hooks/useKeycloakSSO.ts
|
|
3166
|
-
var
|
|
3273
|
+
var import_react17 = require("react");
|
|
3167
3274
|
var import_keycloak_js = __toESM(require("keycloak-js"), 1);
|
|
3168
3275
|
var refreshAheadSeconds = 60;
|
|
3169
|
-
function useKeycloakSSO(
|
|
3170
|
-
const { url, realm, clientId, ssoPageURI, enabled } =
|
|
3171
|
-
const initRef = (0,
|
|
3172
|
-
const kcRef = (0,
|
|
3173
|
-
const refreshTimerRef = (0,
|
|
3174
|
-
const [error, setError] = (0,
|
|
3175
|
-
const [isChecking, setIsChecking] = (0,
|
|
3176
|
-
const [accessToken, setAccessToken] = (0,
|
|
3177
|
-
const scheduleRefresh = (0,
|
|
3276
|
+
function useKeycloakSSO(config) {
|
|
3277
|
+
const { url, realm, clientId, ssoPageURI, enabled } = config;
|
|
3278
|
+
const initRef = (0, import_react17.useRef)(false);
|
|
3279
|
+
const kcRef = (0, import_react17.useRef)(null);
|
|
3280
|
+
const refreshTimerRef = (0, import_react17.useRef)(null);
|
|
3281
|
+
const [error, setError] = (0, import_react17.useState)(null);
|
|
3282
|
+
const [isChecking, setIsChecking] = (0, import_react17.useState)(enabled);
|
|
3283
|
+
const [accessToken, setAccessToken] = (0, import_react17.useState)(null);
|
|
3284
|
+
const scheduleRefresh = (0, import_react17.useCallback)(() => {
|
|
3178
3285
|
const kc = kcRef.current;
|
|
3179
3286
|
if (!kc || !kc.tokenParsed || !kc.tokenParsed.exp) {
|
|
3180
3287
|
return;
|
|
@@ -3195,7 +3302,7 @@ function useKeycloakSSO(config2) {
|
|
|
3195
3302
|
});
|
|
3196
3303
|
}, delayMs);
|
|
3197
3304
|
}, []);
|
|
3198
|
-
(0,
|
|
3305
|
+
(0, import_react17.useEffect)(() => {
|
|
3199
3306
|
if (initRef.current || !enabled) return;
|
|
3200
3307
|
initRef.current = true;
|
|
3201
3308
|
setIsChecking(true);
|
|
@@ -3230,11 +3337,11 @@ function useKeycloakSSO(config2) {
|
|
|
3230
3337
|
}
|
|
3231
3338
|
|
|
3232
3339
|
// src/SpreePay.tsx
|
|
3233
|
-
var
|
|
3340
|
+
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
3234
3341
|
var SpreePayInner = () => {
|
|
3235
|
-
const rootRef = (0,
|
|
3236
|
-
const [portalEl, setPortalEl] = (0,
|
|
3237
|
-
(0,
|
|
3342
|
+
const rootRef = (0, import_react18.useRef)(null);
|
|
3343
|
+
const [portalEl, setPortalEl] = (0, import_react18.useState)(null);
|
|
3344
|
+
(0, import_react18.useLayoutEffect)(() => {
|
|
3238
3345
|
if (!rootRef.current) return;
|
|
3239
3346
|
const el = rootRef.current.querySelector(":scope > .sl-spreepay__portal");
|
|
3240
3347
|
setPortalEl(el ?? null);
|
|
@@ -3249,7 +3356,7 @@ var SpreePayInner = () => {
|
|
|
3249
3356
|
ssoPageURI: env?.ssoPageURI,
|
|
3250
3357
|
enabled: !env?.accessToken
|
|
3251
3358
|
});
|
|
3252
|
-
const slapiFetcher = (0,
|
|
3359
|
+
const slapiFetcher = (0, import_react18.useMemo)(() => {
|
|
3253
3360
|
if (accessToken || env.accessToken) {
|
|
3254
3361
|
return registerApi({
|
|
3255
3362
|
accessToken: env.accessToken || accessToken,
|
|
@@ -3260,14 +3367,14 @@ var SpreePayInner = () => {
|
|
|
3260
3367
|
}, [env.accessToken, staticConfig, tenantId, accessToken]);
|
|
3261
3368
|
const getContent = () => {
|
|
3262
3369
|
if (isChecking) {
|
|
3263
|
-
return /* @__PURE__ */ (0,
|
|
3264
|
-
/* @__PURE__ */ (0,
|
|
3265
|
-
/* @__PURE__ */ (0,
|
|
3266
|
-
/* @__PURE__ */ (0,
|
|
3370
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex w-full flex-col", children: [
|
|
3371
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "bg-primary/8 mb-4 h-[315px] animate-pulse rounded-3xl" }),
|
|
3372
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "bg-primary/8 h-[135px] animate-pulse rounded-3xl" }),
|
|
3373
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SpreeLegal, {})
|
|
3267
3374
|
] });
|
|
3268
3375
|
}
|
|
3269
|
-
return /* @__PURE__ */ (0,
|
|
3270
|
-
|
|
3376
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
3377
|
+
import_swr5.SWRConfig,
|
|
3271
3378
|
{
|
|
3272
3379
|
value: {
|
|
3273
3380
|
fetcher: slapiFetcher,
|
|
@@ -3275,23 +3382,23 @@ var SpreePayInner = () => {
|
|
|
3275
3382
|
revalidateOnFocus: false,
|
|
3276
3383
|
revalidateIfStale: false
|
|
3277
3384
|
},
|
|
3278
|
-
children: /* @__PURE__ */ (0,
|
|
3385
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_nice_modal_react7.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SpreePayContent, { isLoggedIn: Boolean(accessToken || env.accessToken) }) }) })
|
|
3279
3386
|
}
|
|
3280
3387
|
);
|
|
3281
3388
|
};
|
|
3282
|
-
return /* @__PURE__ */ (0,
|
|
3283
|
-
/* @__PURE__ */ (0,
|
|
3389
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { ref: rootRef, className: cn("sl-spreepay", appProps.className), children: [
|
|
3390
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "sl-spreepay__portal" }),
|
|
3284
3391
|
getContent()
|
|
3285
3392
|
] });
|
|
3286
3393
|
};
|
|
3287
3394
|
var SpreePay = (props) => {
|
|
3288
|
-
return /* @__PURE__ */ (0,
|
|
3395
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(StaticConfigProvider, { props, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SpreePayInner, {}) });
|
|
3289
3396
|
};
|
|
3290
3397
|
|
|
3291
3398
|
// src/hooks/useCapture3DS.ts
|
|
3292
|
-
var
|
|
3399
|
+
var import_react19 = require("react");
|
|
3293
3400
|
var useCapture3DS = (searchParams) => {
|
|
3294
|
-
(0,
|
|
3401
|
+
(0, import_react19.useEffect)(() => {
|
|
3295
3402
|
if (typeof window !== "undefined" && window.parent && searchParams?.paymentIntent) {
|
|
3296
3403
|
window.parent.SP_EVENT_BUS?.emit("paymentIntent", { paymentIntent: searchParams.paymentIntent });
|
|
3297
3404
|
}
|