@superlogic/spree-pay 0.1.18 → 0.1.19

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.
Files changed (4) hide show
  1. package/build/index.cjs +235 -124
  2. package/build/index.css +16 -0
  3. package/build/index.js +195 -84
  4. package/package.json +1 -1
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 import_react16 = require("react");
42
+ var import_react17 = require("react");
43
43
  var import_nice_modal_react7 = __toESM(require("@ebay/nice-modal-react"), 1);
44
- var import_swr4 = require("swr");
44
+ var import_swr5 = require("swr");
45
45
 
46
46
  // src/context/SpreePayActionsContext.tsx
47
47
  var import_react = require("react");
@@ -2458,7 +2458,7 @@ 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 import_react14 = require("react");
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
@@ -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/hooks/useBaseERC20Token.ts
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] = React13.useState([]);
2795
- const [isLoading, setLoading] = React13.useState(false);
2796
- const [error, setError] = React13.useState(null);
2797
- React13.useEffect(() => {
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 import_jsx_runtime31 = require("react/jsx-runtime");
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
- return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(Dialog, { open: modal.visible, onOpenChange: modal.remove, children: [
2882
- /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DialogDescription, { className: "hidden", children: "Crypto Select Modal" }),
2883
- /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(DialogContent, { showCloseButton: false, className: "gap-0 p-0", children: [
2884
- /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex flex-col gap-6 px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center justify-between gap-4", children: [
2885
- /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("button", { className: "rounded-md hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "25", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("path", { stroke: "#000", d: "m15 6.5-6 6 6 6" }) }) }),
2886
- /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DialogTitle, { className: "text-primary text-2xl font-semibold", children: "Select a token" }),
2887
- /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("button", { className: "rounded-md p-1 hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "17", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
2888
- "path",
2889
- {
2890
- fill: "#000",
2891
- 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"
2892
- }
2893
- ) }) })
2894
- ] }) }),
2895
- /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7 md:py-6", children: [
2896
- /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("h3", { className: "text-primary text-xl font-semibold", children: "Tokens with wallet balance" }),
2897
- (error || nativeError) && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-center text-sm text-red-500", children: "Something wrong" }),
2898
- /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
2899
- isLoadingNative && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
2900
- nativeBalance && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
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, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-2", children: [
2907
- nativeBalance.logoURI && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
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, import_jsx_runtime31.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.symbol })
3005
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.symbol })
2916
3006
  ] }),
2917
- /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-sm font-medium", children: nativeBalance.formatted })
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, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
2923
- /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
2924
- /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
2925
- /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
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, import_jsx_runtime31.jsxs)(
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, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-2", children: [
3025
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2", children: [
2936
3026
  Boolean(Icon) && Icon,
2937
- /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-sm font-medium", children: coin.symbol })
3027
+ /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-sm font-medium", children: coin.symbol })
2938
3028
  ] }),
2939
- /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-sm font-medium", children: coin.formatted })
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 import_jsx_runtime32 = require("react/jsx-runtime");
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, import_jsx_runtime32.jsxs)("button", { onClick: openModal, type: "button", className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
2959
- /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "bg-primary flex h-full w-11 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white" }) }),
2960
- /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex h-full w-full items-center justify-between px-3", children: [
2961
- /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "font-medium text-black/50", children: "Select a token" }) }),
2962
- /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { stroke: "#000", strokeLinecap: "round", d: "m6 12.43 4-4-4-4" }) })
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 import_jsx_runtime33 = require("react/jsx-runtime");
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, import_jsx_runtime33.jsxs)("div", { className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
2973
- /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "bg-primary flex h-full w-11 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "bg-primary h-2.5 w-2.5 rounded-full" }) }) }),
2974
- /* @__PURE__ */ (0, import_jsx_runtime33.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: [
2975
- /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center gap-1", children: [
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, import_jsx_runtime33.jsx)("img", { className: "mr-1 h-8 w-8 shrink-0", src: logoURI, alt: `${coin} logo` }),
2978
- /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "font-semibold text-black", children: coin }),
2979
- /* @__PURE__ */ (0, import_jsx_runtime33.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_runtime33.jsx)("path", { d: "M6 12.4341L10 8.43408L6 4.43408", stroke: "black", strokeLinecap: "round" }) })
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, import_jsx_runtime33.jsxs)("p", { className: "text-xs font-medium text-black/50", children: [
3092
+ /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("p", { className: "text-xs font-medium text-black/50", children: [
2982
3093
  "Wallet balance ",
2983
- /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-black", children: balance })
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 import_jsx_runtime34 = require("react/jsx-runtime");
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, import_react14.useCallback)(
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, import_react14.useEffect)(() => {
3122
+ (0, import_react15.useEffect)(() => {
3012
3123
  register(handlePay);
3013
3124
  }, [register, handlePay]);
3014
- return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col items-baseline gap-4", children: [
3015
- /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex w-full items-center justify-between gap-4", children: [
3016
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h3", { className: "text-primary text-xl leading-[1.7] font-semibold", children: "Pay with Crypto" }),
3017
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ConnectButton, {})
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, import_jsx_runtime34.jsx)(Logos, {}),
3020
- isWalletConnected && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
3021
- selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
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,13 +3137,13 @@ var Crypto = () => {
3026
3137
  logoURI: selectedPaymentMethod.method.logoURI
3027
3138
  }
3028
3139
  ),
3029
- /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SelectCoinButton, {})
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 import_jsx_runtime35 = require("react/jsx-runtime");
3146
+ var import_jsx_runtime38 = require("react/jsx-runtime");
3036
3147
  var queryClient = new import_react_query.QueryClient();
3037
3148
  var connectors = (0, import_rainbowkit2.connectorsForWallets)(
3038
3149
  [
@@ -3050,22 +3161,22 @@ var config = (0, import_wagmi5.createConfig)({
3050
3161
  ssr: true
3051
3162
  });
3052
3163
  var CryptoWrapper = () => {
3053
- return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_wagmi5.WagmiProvider, { config, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_rainbowkit2.RainbowKitProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_nice_modal_react6.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Crypto, {}) }) }) }) });
3164
+ 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, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_nice_modal_react6.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Crypto, {}) }) }) }) });
3054
3165
  };
3055
3166
 
3056
3167
  // src/components/CryptoTab/CryptoTab.tsx
3057
- var import_jsx_runtime36 = require("react/jsx-runtime");
3168
+ var import_jsx_runtime39 = require("react/jsx-runtime");
3058
3169
  var CryptoTab = () => {
3059
- return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { children: [
3060
- /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-5", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CryptoWrapper, {}) }),
3061
- /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(PointsSwitch, { disabled: true }) })
3170
+ return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { children: [
3171
+ /* @__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, {}) }),
3172
+ /* @__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
3173
  ] });
3063
3174
  };
3064
3175
 
3065
3176
  // src/components/TabButtons.tsx
3066
- var import_jsx_runtime37 = require("react/jsx-runtime");
3177
+ var import_jsx_runtime40 = require("react/jsx-runtime");
3067
3178
  var TabButton = ({ isDisabled = true, isActive, children, onClick }) => {
3068
- return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
3179
+ return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
3069
3180
  "button",
3070
3181
  {
3071
3182
  disabled: isDisabled,
@@ -3088,50 +3199,50 @@ var TabButtons = (props) => {
3088
3199
  onChange({ type, method: null });
3089
3200
  }
3090
3201
  };
3091
- return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex gap-2", children: [
3092
- /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
3202
+ return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex gap-2", children: [
3203
+ /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
3093
3204
  TabButton,
3094
3205
  {
3095
3206
  isDisabled: !spreePayConfig?.creditCard.enabled,
3096
3207
  onClick: handleChange("CREDIT_CARD" /* CREDIT_CARD */),
3097
3208
  isActive: value === "CREDIT_CARD" /* CREDIT_CARD */,
3098
3209
  children: [
3099
- /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
3210
+ /* @__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
3211
  "path",
3101
3212
  {
3102
3213
  fill: "currentColor",
3103
3214
  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
3215
  }
3105
3216
  ) }),
3106
- /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "text-sm font-medium", children: "Card" })
3217
+ /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-sm font-medium", children: "Card" })
3107
3218
  ]
3108
3219
  }
3109
3220
  ),
3110
- /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
3221
+ /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
3111
3222
  TabButton,
3112
3223
  {
3113
3224
  isDisabled: !spreePayConfig?.creditCard.enabled,
3114
3225
  onClick: handleChange("CRYPTO" /* CRYPTO */),
3115
3226
  isActive: value === "CRYPTO" /* CRYPTO */,
3116
3227
  children: [
3117
- /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("svg", { className: "my-1", xmlns: "http://www.w3.org/2000/svg", width: "30", height: "16", fill: "none", children: [
3118
- /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
3228
+ /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("svg", { className: "my-1", xmlns: "http://www.w3.org/2000/svg", width: "30", height: "16", fill: "none", children: [
3229
+ /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
3119
3230
  "path",
3120
3231
  {
3121
3232
  fill: "currentColor",
3122
3233
  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
3234
  }
3124
3235
  ),
3125
- /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
3236
+ /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
3126
3237
  "path",
3127
3238
  {
3128
3239
  fill: "currentColor",
3129
3240
  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
3241
  }
3131
3242
  ),
3132
- /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "2" })
3243
+ /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "2" })
3133
3244
  ] }),
3134
- /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "text-sm font-medium", children: "Crypto" })
3245
+ /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-sm font-medium", children: "Crypto" })
3135
3246
  ]
3136
3247
  }
3137
3248
  )
@@ -3139,42 +3250,42 @@ var TabButtons = (props) => {
3139
3250
  };
3140
3251
 
3141
3252
  // src/components/Tabs.tsx
3142
- var import_jsx_runtime38 = require("react/jsx-runtime");
3253
+ var import_jsx_runtime41 = require("react/jsx-runtime");
3143
3254
  var Tabs = () => {
3144
3255
  const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
3145
- return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "mb-4 rounded-3xl border border-black/25 bg-white", children: [
3146
- /* @__PURE__ */ (0, import_jsx_runtime38.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: [
3147
- /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("h2", { className: "text-primary text-2xl font-semibold", children: "Choose a Payment Method" }),
3148
- /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
3256
+ return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "mb-4 rounded-3xl border border-black/25 bg-white", children: [
3257
+ /* @__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: [
3258
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h2", { className: "text-primary text-2xl font-semibold", children: "Choose a Payment Method" }),
3259
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
3149
3260
  ] }),
3150
- selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CreditCardTab, {}),
3151
- selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(CryptoTab, {})
3261
+ selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CreditCardTab, {}),
3262
+ selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CryptoTab, {})
3152
3263
  ] });
3153
3264
  };
3154
3265
 
3155
3266
  // src/SpreePayContent.tsx
3156
- var import_jsx_runtime39 = require("react/jsx-runtime");
3267
+ var import_jsx_runtime42 = require("react/jsx-runtime");
3157
3268
  var SpreePayContent = ({ isLoggedIn }) => {
3158
- return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "w-full", children: [
3159
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Tabs, {}),
3160
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CheckoutButton, { isLoggedIn }),
3161
- /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(SpreeLegal, {})
3269
+ return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "w-full", children: [
3270
+ /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Tabs, {}),
3271
+ /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(CheckoutButton, { isLoggedIn }),
3272
+ /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(SpreeLegal, {})
3162
3273
  ] });
3163
3274
  };
3164
3275
 
3165
3276
  // src/hooks/useKeycloakSSO.ts
3166
- var import_react15 = require("react");
3277
+ var import_react16 = require("react");
3167
3278
  var import_keycloak_js = __toESM(require("keycloak-js"), 1);
3168
3279
  var refreshAheadSeconds = 60;
3169
3280
  function useKeycloakSSO(config2) {
3170
3281
  const { url, realm, clientId, ssoPageURI, enabled } = config2;
3171
- const initRef = (0, import_react15.useRef)(false);
3172
- const kcRef = (0, import_react15.useRef)(null);
3173
- const refreshTimerRef = (0, import_react15.useRef)(null);
3174
- const [error, setError] = (0, import_react15.useState)(null);
3175
- const [isChecking, setIsChecking] = (0, import_react15.useState)(enabled);
3176
- const [accessToken, setAccessToken] = (0, import_react15.useState)(null);
3177
- const scheduleRefresh = (0, import_react15.useCallback)(() => {
3282
+ const initRef = (0, import_react16.useRef)(false);
3283
+ const kcRef = (0, import_react16.useRef)(null);
3284
+ const refreshTimerRef = (0, import_react16.useRef)(null);
3285
+ const [error, setError] = (0, import_react16.useState)(null);
3286
+ const [isChecking, setIsChecking] = (0, import_react16.useState)(enabled);
3287
+ const [accessToken, setAccessToken] = (0, import_react16.useState)(null);
3288
+ const scheduleRefresh = (0, import_react16.useCallback)(() => {
3178
3289
  const kc = kcRef.current;
3179
3290
  if (!kc || !kc.tokenParsed || !kc.tokenParsed.exp) {
3180
3291
  return;
@@ -3195,7 +3306,7 @@ function useKeycloakSSO(config2) {
3195
3306
  });
3196
3307
  }, delayMs);
3197
3308
  }, []);
3198
- (0, import_react15.useEffect)(() => {
3309
+ (0, import_react16.useEffect)(() => {
3199
3310
  if (initRef.current || !enabled) return;
3200
3311
  initRef.current = true;
3201
3312
  setIsChecking(true);
@@ -3230,11 +3341,11 @@ function useKeycloakSSO(config2) {
3230
3341
  }
3231
3342
 
3232
3343
  // src/SpreePay.tsx
3233
- var import_jsx_runtime40 = require("react/jsx-runtime");
3344
+ var import_jsx_runtime43 = require("react/jsx-runtime");
3234
3345
  var SpreePayInner = () => {
3235
- const rootRef = (0, import_react16.useRef)(null);
3236
- const [portalEl, setPortalEl] = (0, import_react16.useState)(null);
3237
- (0, import_react16.useLayoutEffect)(() => {
3346
+ const rootRef = (0, import_react17.useRef)(null);
3347
+ const [portalEl, setPortalEl] = (0, import_react17.useState)(null);
3348
+ (0, import_react17.useLayoutEffect)(() => {
3238
3349
  if (!rootRef.current) return;
3239
3350
  const el = rootRef.current.querySelector(":scope > .sl-spreepay__portal");
3240
3351
  setPortalEl(el ?? null);
@@ -3249,7 +3360,7 @@ var SpreePayInner = () => {
3249
3360
  ssoPageURI: env?.ssoPageURI,
3250
3361
  enabled: !env?.accessToken
3251
3362
  });
3252
- const slapiFetcher = (0, import_react16.useMemo)(() => {
3363
+ const slapiFetcher = (0, import_react17.useMemo)(() => {
3253
3364
  if (accessToken || env.accessToken) {
3254
3365
  return registerApi({
3255
3366
  accessToken: env.accessToken || accessToken,
@@ -3260,14 +3371,14 @@ var SpreePayInner = () => {
3260
3371
  }, [env.accessToken, staticConfig, tenantId, accessToken]);
3261
3372
  const getContent = () => {
3262
3373
  if (isChecking) {
3263
- return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex w-full flex-col", children: [
3264
- /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "bg-primary/8 mb-4 h-[315px] animate-pulse rounded-3xl" }),
3265
- /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "bg-primary/8 h-[135px] animate-pulse rounded-3xl" }),
3266
- /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SpreeLegal, {})
3374
+ return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "flex w-full flex-col", children: [
3375
+ /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "bg-primary/8 mb-4 h-[315px] animate-pulse rounded-3xl" }),
3376
+ /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "bg-primary/8 h-[135px] animate-pulse rounded-3xl" }),
3377
+ /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SpreeLegal, {})
3267
3378
  ] });
3268
3379
  }
3269
- return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
3270
- import_swr4.SWRConfig,
3380
+ return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
3381
+ import_swr5.SWRConfig,
3271
3382
  {
3272
3383
  value: {
3273
3384
  fetcher: slapiFetcher,
@@ -3275,23 +3386,23 @@ var SpreePayInner = () => {
3275
3386
  revalidateOnFocus: false,
3276
3387
  revalidateIfStale: false
3277
3388
  },
3278
- children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_nice_modal_react7.default.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SpreePayContent, { isLoggedIn: Boolean(accessToken || env.accessToken) }) }) })
3389
+ 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
3390
  }
3280
3391
  );
3281
3392
  };
3282
- return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { ref: rootRef, className: cn("sl-spreepay", appProps.className), children: [
3283
- /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "sl-spreepay__portal" }),
3393
+ return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { ref: rootRef, className: cn("sl-spreepay", appProps.className), children: [
3394
+ /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "sl-spreepay__portal" }),
3284
3395
  getContent()
3285
3396
  ] });
3286
3397
  };
3287
3398
  var SpreePay = (props) => {
3288
- return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(StaticConfigProvider, { props, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SpreePayInner, {}) });
3399
+ return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(StaticConfigProvider, { props, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SpreePayInner, {}) });
3289
3400
  };
3290
3401
 
3291
3402
  // src/hooks/useCapture3DS.ts
3292
- var import_react17 = require("react");
3403
+ var import_react18 = require("react");
3293
3404
  var useCapture3DS = (searchParams) => {
3294
- (0, import_react17.useEffect)(() => {
3405
+ (0, import_react18.useEffect)(() => {
3295
3406
  if (typeof window !== "undefined" && window.parent && searchParams?.paymentIntent) {
3296
3407
  window.parent.SP_EVENT_BUS?.emit("paymentIntent", { paymentIntent: searchParams.paymentIntent });
3297
3408
  }
package/build/index.css CHANGED
@@ -25,6 +25,7 @@
25
25
  --color-gray-100: oklch(96.7% 0.003 264.542);
26
26
  --color-gray-200: oklch(92.8% 0.006 264.531);
27
27
  --color-gray-300: oklch(87.2% 0.01 258.338);
28
+ --color-gray-400: oklch(70.7% 0.022 261.325);
28
29
  --color-gray-900: oklch(21% 0.034 264.665);
29
30
  --color-black: #000;
30
31
  --color-white: #fff;
@@ -411,9 +412,18 @@
411
412
  .sl-spreepay .h-full {
412
413
  height: 100%;
413
414
  }
415
+ .sl-spreepay .max-h-\[40vh\] {
416
+ max-height: 40vh;
417
+ }
418
+ .sl-spreepay .max-h-\[90vh\] {
419
+ max-height: 90vh;
420
+ }
414
421
  .sl-spreepay .max-h-\[600px\] {
415
422
  max-height: 600px;
416
423
  }
424
+ .sl-spreepay .min-h-11 {
425
+ min-height: calc(var(--spacing) * 11);
426
+ }
417
427
  .sl-spreepay .w-2\.5 {
418
428
  width: calc(var(--spacing) * 2.5);
419
429
  }
@@ -530,6 +540,9 @@
530
540
  .sl-spreepay .overflow-hidden {
531
541
  overflow: hidden;
532
542
  }
543
+ .sl-spreepay .overflow-y-auto {
544
+ overflow-y: auto;
545
+ }
533
546
  .sl-spreepay .rounded-3xl {
534
547
  border-radius: var(--radius-3xl);
535
548
  }
@@ -650,6 +663,9 @@
650
663
  .sl-spreepay .bg-gray-200 {
651
664
  background-color: var(--color-gray-200);
652
665
  }
666
+ .sl-spreepay .bg-gray-400 {
667
+ background-color: var(--color-gray-400);
668
+ }
653
669
  .sl-spreepay .bg-muted {
654
670
  background-color: var(--muted);
655
671
  }
package/build/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  // src/SpreePay.tsx
2
- import { useLayoutEffect as useLayoutEffect3, useMemo as useMemo8, useRef as useRef7, useState as useState13 } from "react";
2
+ import { useLayoutEffect as useLayoutEffect3, useMemo as useMemo9, useRef as useRef7, useState as useState14 } from "react";
3
3
  import NiceModal7 from "@ebay/nice-modal-react";
4
4
  import { SWRConfig } from "swr";
5
5
 
@@ -2741,20 +2741,90 @@ var Logos = () => {
2741
2741
  import NiceModal5 from "@ebay/nice-modal-react";
2742
2742
 
2743
2743
  // src/modals/CryptoSelectModal.tsx
2744
+ import { useMemo as useMemo8, useState as useState12 } from "react";
2744
2745
  import NiceModal4, { useModal as useModal2 } from "@ebay/nice-modal-react";
2745
2746
 
2746
- // src/hooks/useBaseERC20Token.ts
2747
+ // ../ui/src/components/input.tsx
2748
+ import { jsx as jsx31 } from "react/jsx-runtime";
2749
+ function Input2({ className, type, ...props }) {
2750
+ return /* @__PURE__ */ jsx31(
2751
+ "input",
2752
+ {
2753
+ type,
2754
+ "data-slot": "input",
2755
+ className: cn2(
2756
+ "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",
2757
+ "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
2758
+ "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
2759
+ className
2760
+ ),
2761
+ ...props
2762
+ }
2763
+ );
2764
+ }
2765
+
2766
+ // ../../node_modules/@radix-ui/react-separator/dist/index.mjs
2747
2767
  import * as React13 from "react";
2768
+ import { jsx as jsx32 } from "react/jsx-runtime";
2769
+ var NAME = "Separator";
2770
+ var DEFAULT_ORIENTATION = "horizontal";
2771
+ var ORIENTATIONS = ["horizontal", "vertical"];
2772
+ var Separator = React13.forwardRef((props, forwardedRef) => {
2773
+ const { decorative, orientation: orientationProp = DEFAULT_ORIENTATION, ...domProps } = props;
2774
+ const orientation = isValidOrientation(orientationProp) ? orientationProp : DEFAULT_ORIENTATION;
2775
+ const ariaOrientation = orientation === "vertical" ? orientation : void 0;
2776
+ const semanticProps = decorative ? { role: "none" } : { "aria-orientation": ariaOrientation, role: "separator" };
2777
+ return /* @__PURE__ */ jsx32(
2778
+ Primitive.div,
2779
+ {
2780
+ "data-orientation": orientation,
2781
+ ...semanticProps,
2782
+ ...domProps,
2783
+ ref: forwardedRef
2784
+ }
2785
+ );
2786
+ });
2787
+ Separator.displayName = NAME;
2788
+ function isValidOrientation(orientation) {
2789
+ return ORIENTATIONS.includes(orientation);
2790
+ }
2791
+ var Root6 = Separator;
2792
+
2793
+ // ../ui/src/components/separator.tsx
2794
+ import { jsx as jsx33 } from "react/jsx-runtime";
2795
+ function Separator2({
2796
+ className,
2797
+ orientation = "horizontal",
2798
+ decorative = true,
2799
+ ...props
2800
+ }) {
2801
+ return /* @__PURE__ */ jsx33(
2802
+ Root6,
2803
+ {
2804
+ "data-slot": "separator",
2805
+ decorative,
2806
+ orientation,
2807
+ className: cn2(
2808
+ "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
2809
+ className
2810
+ ),
2811
+ ...props
2812
+ }
2813
+ );
2814
+ }
2815
+
2816
+ // src/hooks/useBaseERC20Token.ts
2817
+ import * as React14 from "react";
2748
2818
  import { erc20Abi as erc20Abi3, formatUnits, getAddress } from "viem";
2749
2819
  import { useAccount, usePublicClient } from "wagmi";
2750
2820
  function useBaseERC20Token() {
2751
2821
  const { address } = useAccount();
2752
2822
  const baseClient = usePublicClient({ chainId: BASE_CHAIN_ID });
2753
2823
  const defaultClient = usePublicClient();
2754
- const [rows, setRows] = React13.useState([]);
2755
- const [isLoading, setLoading] = React13.useState(false);
2756
- const [error, setError] = React13.useState(null);
2757
- React13.useEffect(() => {
2824
+ const [rows, setRows] = React14.useState([]);
2825
+ const [isLoading, setLoading] = React14.useState(false);
2826
+ const [error, setError] = React14.useState(null);
2827
+ React14.useEffect(() => {
2758
2828
  let cancelled = false;
2759
2829
  async function run() {
2760
2830
  const client = baseClient ?? defaultClient;
@@ -2827,36 +2897,56 @@ function useBaseNativeToken() {
2827
2897
  };
2828
2898
  }
2829
2899
 
2900
+ // src/hooks/useBaseTokens.ts
2901
+ import useSWR4 from "swr";
2902
+ var useBaseTokens = () => {
2903
+ const { data: resData, isLoading } = useSWR4(`/v1/base-transactions/tokens`);
2904
+ return { tokens: resData?.data ?? [], tokensIsLoading: isLoading };
2905
+ };
2906
+
2830
2907
  // src/modals/CryptoSelectModal.tsx
2831
- import { Fragment as Fragment5, jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
2908
+ import { Fragment as Fragment5, jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
2832
2909
  var CryptoSelectModal = NiceModal4.create(() => {
2833
2910
  const modal = useModal2();
2834
2911
  const { isLoading, error, erc20Balances } = useBaseERC20Token();
2835
2912
  const { isLoadingNative, nativeError, nativeBalance } = useBaseNativeToken();
2913
+ const { tokens, tokensIsLoading } = useBaseTokens();
2914
+ const [search, setSearch] = useState12("");
2915
+ const filteredCoins = useMemo8(() => {
2916
+ return tokens.filter(
2917
+ (coin) => coin.name.toLowerCase().includes(search.toLowerCase()) || coin.symbol.toLowerCase().includes(search.toLowerCase())
2918
+ );
2919
+ }, [tokens, search]);
2836
2920
  const { setSelectedPaymentMethod } = useSpreePaymentMethod();
2837
2921
  const handleSelect = (coin) => {
2838
2922
  modal.remove();
2839
2923
  setSelectedPaymentMethod({ type: "CRYPTO" /* CRYPTO */, method: coin });
2840
2924
  };
2925
+ const userCoins = [nativeBalance, ...erc20Balances].filter(Boolean);
2926
+ const userCoinSymbols = userCoins.map((c) => c.symbol);
2841
2927
  return /* @__PURE__ */ jsxs19(Dialog, { open: modal.visible, onOpenChange: modal.remove, children: [
2842
- /* @__PURE__ */ jsx31(DialogDescription, { className: "hidden", children: "Crypto Select Modal" }),
2843
- /* @__PURE__ */ jsxs19(DialogContent, { showCloseButton: false, className: "gap-0 p-0", children: [
2844
- /* @__PURE__ */ jsx31("div", { className: "flex flex-col gap-6 px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ jsxs19("div", { className: "flex items-center justify-between gap-4", children: [
2845
- /* @__PURE__ */ jsx31("button", { className: "rounded-md hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ jsx31("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "25", fill: "none", children: /* @__PURE__ */ jsx31("path", { stroke: "#000", d: "m15 6.5-6 6 6 6" }) }) }),
2846
- /* @__PURE__ */ jsx31(DialogTitle, { className: "text-primary text-2xl font-semibold", children: "Select a token" }),
2847
- /* @__PURE__ */ jsx31("button", { className: "rounded-md p-1 hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ jsx31("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "17", fill: "none", children: /* @__PURE__ */ jsx31(
2848
- "path",
2849
- {
2850
- fill: "#000",
2851
- 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"
2852
- }
2853
- ) }) })
2854
- ] }) }),
2855
- /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7 md:py-6", children: [
2856
- /* @__PURE__ */ jsx31("h3", { className: "text-primary text-xl font-semibold", children: "Tokens with wallet balance" }),
2857
- (error || nativeError) && /* @__PURE__ */ jsx31("p", { className: "text-center text-sm text-red-500", children: "Something wrong" }),
2928
+ /* @__PURE__ */ jsx34(DialogDescription, { className: "hidden", children: "Crypto Select Modal" }),
2929
+ /* @__PURE__ */ jsxs19(DialogContent, { showCloseButton: false, className: "max-h-[90vh] gap-0 p-0", children: [
2930
+ /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
2931
+ /* @__PURE__ */ jsxs19("div", { className: "flex items-center justify-between gap-4", children: [
2932
+ /* @__PURE__ */ jsx34("button", { className: "rounded-md hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ jsx34("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "25", fill: "none", children: /* @__PURE__ */ jsx34("path", { stroke: "#000", d: "m15 6.5-6 6 6 6" }) }) }),
2933
+ /* @__PURE__ */ jsx34(DialogTitle, { className: "text-primary text-2xl font-semibold", children: "Select a token" }),
2934
+ /* @__PURE__ */ jsx34("button", { className: "rounded-md p-1 hover:bg-gray-100", onClick: modal.remove, children: /* @__PURE__ */ jsx34("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "17", fill: "none", children: /* @__PURE__ */ jsx34(
2935
+ "path",
2936
+ {
2937
+ fill: "#000",
2938
+ 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"
2939
+ }
2940
+ ) }) })
2941
+ ] }),
2942
+ /* @__PURE__ */ jsx34(Input2, { onChange: (e) => setSearch(e.target.value), placeholder: "Search by token name", value: search })
2943
+ ] }),
2944
+ /* @__PURE__ */ jsx34(Separator2, { className: "hidden md:block" }),
2945
+ /* @__PURE__ */ jsxs19("div", { className: "flex flex-col gap-4 px-5 py-5 md:px-7", children: [
2946
+ /* @__PURE__ */ jsx34("h3", { className: "text-primary text-xl font-semibold", children: "Tokens with wallet balance" }),
2947
+ (error || nativeError) && /* @__PURE__ */ jsx34("p", { className: "text-center text-sm text-red-500", children: "Something wrong" }),
2858
2948
  /* @__PURE__ */ jsxs19("div", { className: "flex w-full flex-col gap-1", children: [
2859
- isLoadingNative && /* @__PURE__ */ jsx31("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
2949
+ isLoadingNative && /* @__PURE__ */ jsx34("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
2860
2950
  nativeBalance && /* @__PURE__ */ jsxs19(
2861
2951
  "button",
2862
2952
  {
@@ -2864,7 +2954,7 @@ var CryptoSelectModal = NiceModal4.create(() => {
2864
2954
  onClick: () => handleSelect(nativeBalance),
2865
2955
  children: [
2866
2956
  /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
2867
- nativeBalance.logoURI && /* @__PURE__ */ jsx31(
2957
+ nativeBalance.logoURI && /* @__PURE__ */ jsx34(
2868
2958
  "img",
2869
2959
  {
2870
2960
  className: "h-8 w-8 shrink-0",
@@ -2872,17 +2962,17 @@ var CryptoSelectModal = NiceModal4.create(() => {
2872
2962
  alt: `${nativeBalance.symbol} logo`
2873
2963
  }
2874
2964
  ),
2875
- /* @__PURE__ */ jsx31("p", { className: "text-sm font-medium", children: nativeBalance.symbol })
2965
+ /* @__PURE__ */ jsx34("p", { className: "text-sm font-medium", children: nativeBalance.symbol })
2876
2966
  ] }),
2877
- /* @__PURE__ */ jsx31("p", { className: "text-sm font-medium", children: nativeBalance.formatted })
2967
+ /* @__PURE__ */ jsx34("p", { className: "text-sm font-medium", children: nativeBalance.formatted })
2878
2968
  ]
2879
2969
  },
2880
2970
  nativeBalance.symbol
2881
2971
  ),
2882
2972
  isLoading && /* @__PURE__ */ jsxs19(Fragment5, { children: [
2883
- /* @__PURE__ */ jsx31("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
2884
- /* @__PURE__ */ jsx31("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
2885
- /* @__PURE__ */ jsx31("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
2973
+ /* @__PURE__ */ jsx34("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
2974
+ /* @__PURE__ */ jsx34("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
2975
+ /* @__PURE__ */ jsx34("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
2886
2976
  ] }),
2887
2977
  erc20Balances.map((coin) => {
2888
2978
  const Icon = getSymbolLogo(coin.symbol);
@@ -2894,14 +2984,35 @@ var CryptoSelectModal = NiceModal4.create(() => {
2894
2984
  children: [
2895
2985
  /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
2896
2986
  Boolean(Icon) && Icon,
2897
- /* @__PURE__ */ jsx31("p", { className: "text-sm font-medium", children: coin.symbol })
2987
+ /* @__PURE__ */ jsx34("p", { className: "text-sm font-medium", children: coin.symbol })
2898
2988
  ] }),
2899
- /* @__PURE__ */ jsx31("p", { className: "text-sm font-medium", children: coin.formatted })
2989
+ /* @__PURE__ */ jsx34("p", { className: "text-sm font-medium", children: coin.formatted })
2900
2990
  ]
2901
2991
  },
2902
2992
  coin.symbol
2903
2993
  );
2904
2994
  })
2995
+ ] }),
2996
+ /* @__PURE__ */ jsx34("h3", { className: "text-primary text-xl font-semibold", children: "All Tokens" }),
2997
+ /* @__PURE__ */ jsxs19("div", { className: "flex max-h-[40vh] w-full flex-col gap-1 overflow-y-auto", children: [
2998
+ tokensIsLoading && /* @__PURE__ */ jsxs19(Fragment5, { children: [
2999
+ /* @__PURE__ */ jsx34("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
3000
+ /* @__PURE__ */ jsx34("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" }),
3001
+ /* @__PURE__ */ jsx34("div", { className: "h-11 animate-pulse rounded-md bg-gray-100" })
3002
+ ] }),
3003
+ filteredCoins.map((token) => /* @__PURE__ */ jsx34(
3004
+ "button",
3005
+ {
3006
+ disabled: !userCoinSymbols.includes(token.symbol),
3007
+ onClick: () => handleSelect(userCoins.find((c) => c.symbol === token.symbol)),
3008
+ 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",
3009
+ children: /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
3010
+ token.logoURI ? /* @__PURE__ */ jsx34("img", { className: "h-8 w-8 shrink-0", src: token.logoURI, alt: `${token.name} logo` }) : /* @__PURE__ */ jsx34("div", { className: "h-8 w-8 shrink-0 rounded-full bg-gray-400" }),
3011
+ /* @__PURE__ */ jsx34("p", { className: "text-sm font-medium", children: token.symbol })
3012
+ ] })
3013
+ },
3014
+ token.symbol
3015
+ ))
2905
3016
  ] })
2906
3017
  ] })
2907
3018
  ] })
@@ -2910,44 +3021,44 @@ var CryptoSelectModal = NiceModal4.create(() => {
2910
3021
  CryptoSelectModal.displayName = "CryptoSelectModal";
2911
3022
 
2912
3023
  // src/components/CryptoTab/Crypto/SelectCoinButton.tsx
2913
- import { jsx as jsx32, jsxs as jsxs20 } from "react/jsx-runtime";
3024
+ import { jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
2914
3025
  var SelectCoinButton = () => {
2915
3026
  const openModal = () => {
2916
3027
  NiceModal5.show(CryptoSelectModal);
2917
3028
  };
2918
3029
  return /* @__PURE__ */ jsxs20("button", { onClick: openModal, type: "button", className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
2919
- /* @__PURE__ */ jsx32("div", { className: "bg-primary flex h-full w-11 items-center justify-center", children: /* @__PURE__ */ jsx32("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white" }) }),
3030
+ /* @__PURE__ */ jsx35("div", { className: "bg-primary flex h-full w-11 items-center justify-center", children: /* @__PURE__ */ jsx35("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white" }) }),
2920
3031
  /* @__PURE__ */ jsxs20("div", { className: "flex h-full w-full items-center justify-between px-3", children: [
2921
- /* @__PURE__ */ jsx32("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx32("p", { className: "font-medium text-black/50", children: "Select a token" }) }),
2922
- /* @__PURE__ */ jsx32("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ jsx32("path", { stroke: "#000", strokeLinecap: "round", d: "m6 12.43 4-4-4-4" }) })
3032
+ /* @__PURE__ */ jsx35("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx35("p", { className: "font-medium text-black/50", children: "Select a token" }) }),
3033
+ /* @__PURE__ */ jsx35("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ jsx35("path", { stroke: "#000", strokeLinecap: "round", d: "m6 12.43 4-4-4-4" }) })
2923
3034
  ] })
2924
3035
  ] });
2925
3036
  };
2926
3037
 
2927
3038
  // src/components/CryptoTab/Crypto/SelectedCoin.tsx
2928
- import { jsx as jsx33, jsxs as jsxs21 } from "react/jsx-runtime";
3039
+ import { jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
2929
3040
  var SelectedCoin = (props) => {
2930
3041
  const { coin, balance, logoURI } = props;
2931
3042
  const Icon = getSymbolLogo(coin);
2932
3043
  return /* @__PURE__ */ jsxs21("div", { className: "bg-primary/8 flex h-11 w-full overflow-hidden rounded-md", children: [
2933
- /* @__PURE__ */ jsx33("div", { className: "bg-primary flex h-full w-11 items-center justify-center", children: /* @__PURE__ */ jsx33("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: /* @__PURE__ */ jsx33("div", { className: "bg-primary h-2.5 w-2.5 rounded-full" }) }) }),
3044
+ /* @__PURE__ */ jsx36("div", { className: "bg-primary flex h-full w-11 items-center justify-center", children: /* @__PURE__ */ jsx36("div", { className: "flex h-5 w-5 items-center justify-center rounded-full bg-white", children: /* @__PURE__ */ jsx36("div", { className: "bg-primary h-2.5 w-2.5 rounded-full" }) }) }),
2934
3045
  /* @__PURE__ */ jsxs21("div", { className: "border-primary flex h-full w-full items-center justify-between rounded-r-md border-1 !border-l-0 px-3", children: [
2935
3046
  /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-1", children: [
2936
3047
  Icon,
2937
- !Icon && logoURI && /* @__PURE__ */ jsx33("img", { className: "mr-1 h-8 w-8 shrink-0", src: logoURI, alt: `${coin} logo` }),
2938
- /* @__PURE__ */ jsx33("p", { className: "font-semibold text-black", children: coin }),
2939
- /* @__PURE__ */ jsx33("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx33("path", { d: "M6 12.4341L10 8.43408L6 4.43408", stroke: "black", strokeLinecap: "round" }) })
3048
+ !Icon && logoURI && /* @__PURE__ */ jsx36("img", { className: "mr-1 h-8 w-8 shrink-0", src: logoURI, alt: `${coin} logo` }),
3049
+ /* @__PURE__ */ jsx36("p", { className: "font-semibold text-black", children: coin }),
3050
+ /* @__PURE__ */ jsx36("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx36("path", { d: "M6 12.4341L10 8.43408L6 4.43408", stroke: "black", strokeLinecap: "round" }) })
2940
3051
  ] }),
2941
3052
  /* @__PURE__ */ jsxs21("p", { className: "text-xs font-medium text-black/50", children: [
2942
3053
  "Wallet balance ",
2943
- /* @__PURE__ */ jsx33("span", { className: "text-black", children: balance })
3054
+ /* @__PURE__ */ jsx36("span", { className: "text-black", children: balance })
2944
3055
  ] })
2945
3056
  ] })
2946
3057
  ] });
2947
3058
  };
2948
3059
 
2949
3060
  // src/components/CryptoTab/Crypto/Crypto.tsx
2950
- import { jsx as jsx34, jsxs as jsxs22 } from "react/jsx-runtime";
3061
+ import { jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
2951
3062
  var Crypto = () => {
2952
3063
  const { address } = useAccount3();
2953
3064
  const { selectedPaymentMethod } = useSpreePaymentMethod();
@@ -2973,12 +3084,12 @@ var Crypto = () => {
2973
3084
  }, [register, handlePay]);
2974
3085
  return /* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-baseline gap-4", children: [
2975
3086
  /* @__PURE__ */ jsxs22("div", { className: "flex w-full items-center justify-between gap-4", children: [
2976
- /* @__PURE__ */ jsx34("h3", { className: "text-primary text-xl leading-[1.7] font-semibold", children: "Pay with Crypto" }),
2977
- /* @__PURE__ */ jsx34(ConnectButton, {})
3087
+ /* @__PURE__ */ jsx37("h3", { className: "text-primary text-xl leading-[1.7] font-semibold", children: "Pay with Crypto" }),
3088
+ /* @__PURE__ */ jsx37(ConnectButton, {})
2978
3089
  ] }),
2979
- !isWalletConnected && /* @__PURE__ */ jsx34(Logos, {}),
3090
+ !isWalletConnected && /* @__PURE__ */ jsx37(Logos, {}),
2980
3091
  isWalletConnected && /* @__PURE__ */ jsxs22("div", { className: "flex w-full flex-col gap-1", children: [
2981
- selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method && /* @__PURE__ */ jsx34(
3092
+ selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && selectedPaymentMethod.method && /* @__PURE__ */ jsx37(
2982
3093
  SelectedCoin,
2983
3094
  {
2984
3095
  coin: selectedPaymentMethod.method.symbol,
@@ -2986,13 +3097,13 @@ var Crypto = () => {
2986
3097
  logoURI: selectedPaymentMethod.method.logoURI
2987
3098
  }
2988
3099
  ),
2989
- /* @__PURE__ */ jsx34(SelectCoinButton, {})
3100
+ /* @__PURE__ */ jsx37(SelectCoinButton, {})
2990
3101
  ] })
2991
3102
  ] });
2992
3103
  };
2993
3104
 
2994
3105
  // src/components/CryptoTab/Crypto/CryptoWrapper.tsx
2995
- import { jsx as jsx35 } from "react/jsx-runtime";
3106
+ import { jsx as jsx38 } from "react/jsx-runtime";
2996
3107
  var queryClient = new QueryClient();
2997
3108
  var connectors = connectorsForWallets(
2998
3109
  [
@@ -3010,22 +3121,22 @@ var config = createConfig({
3010
3121
  ssr: true
3011
3122
  });
3012
3123
  var CryptoWrapper = () => {
3013
- return /* @__PURE__ */ jsx35(WagmiProvider, { config, children: /* @__PURE__ */ jsx35(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx35(RainbowKitProvider, { children: /* @__PURE__ */ jsx35(NiceModal6.Provider, { children: /* @__PURE__ */ jsx35(Crypto, {}) }) }) }) });
3124
+ return /* @__PURE__ */ jsx38(WagmiProvider, { config, children: /* @__PURE__ */ jsx38(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx38(RainbowKitProvider, { children: /* @__PURE__ */ jsx38(NiceModal6.Provider, { children: /* @__PURE__ */ jsx38(Crypto, {}) }) }) }) });
3014
3125
  };
3015
3126
 
3016
3127
  // src/components/CryptoTab/CryptoTab.tsx
3017
- import { jsx as jsx36, jsxs as jsxs23 } from "react/jsx-runtime";
3128
+ import { jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
3018
3129
  var CryptoTab = () => {
3019
3130
  return /* @__PURE__ */ jsxs23("div", { children: [
3020
- /* @__PURE__ */ jsx36("div", { className: "border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-5", children: /* @__PURE__ */ jsx36(CryptoWrapper, {}) }),
3021
- /* @__PURE__ */ jsx36("div", { className: "px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ jsx36(PointsSwitch, { disabled: true }) })
3131
+ /* @__PURE__ */ jsx39("div", { className: "border-b-1 border-black/7 px-5 py-5 md:px-7 md:py-5", children: /* @__PURE__ */ jsx39(CryptoWrapper, {}) }),
3132
+ /* @__PURE__ */ jsx39("div", { className: "px-5 py-5 md:px-7 md:py-6", children: /* @__PURE__ */ jsx39(PointsSwitch, { disabled: true }) })
3022
3133
  ] });
3023
3134
  };
3024
3135
 
3025
3136
  // src/components/TabButtons.tsx
3026
- import { jsx as jsx37, jsxs as jsxs24 } from "react/jsx-runtime";
3137
+ import { jsx as jsx40, jsxs as jsxs24 } from "react/jsx-runtime";
3027
3138
  var TabButton = ({ isDisabled = true, isActive, children, onClick }) => {
3028
- return /* @__PURE__ */ jsx37(
3139
+ return /* @__PURE__ */ jsx40(
3029
3140
  "button",
3030
3141
  {
3031
3142
  disabled: isDisabled,
@@ -3056,14 +3167,14 @@ var TabButtons = (props) => {
3056
3167
  onClick: handleChange("CREDIT_CARD" /* CREDIT_CARD */),
3057
3168
  isActive: value === "CREDIT_CARD" /* CREDIT_CARD */,
3058
3169
  children: [
3059
- /* @__PURE__ */ jsx37("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", children: /* @__PURE__ */ jsx37(
3170
+ /* @__PURE__ */ jsx40("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", children: /* @__PURE__ */ jsx40(
3060
3171
  "path",
3061
3172
  {
3062
3173
  fill: "currentColor",
3063
3174
  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"
3064
3175
  }
3065
3176
  ) }),
3066
- /* @__PURE__ */ jsx37("p", { className: "text-sm font-medium", children: "Card" })
3177
+ /* @__PURE__ */ jsx40("p", { className: "text-sm font-medium", children: "Card" })
3067
3178
  ]
3068
3179
  }
3069
3180
  ),
@@ -3075,23 +3186,23 @@ var TabButtons = (props) => {
3075
3186
  isActive: value === "CRYPTO" /* CRYPTO */,
3076
3187
  children: [
3077
3188
  /* @__PURE__ */ jsxs24("svg", { className: "my-1", xmlns: "http://www.w3.org/2000/svg", width: "30", height: "16", fill: "none", children: [
3078
- /* @__PURE__ */ jsx37(
3189
+ /* @__PURE__ */ jsx40(
3079
3190
  "path",
3080
3191
  {
3081
3192
  fill: "currentColor",
3082
3193
  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"
3083
3194
  }
3084
3195
  ),
3085
- /* @__PURE__ */ jsx37(
3196
+ /* @__PURE__ */ jsx40(
3086
3197
  "path",
3087
3198
  {
3088
3199
  fill: "currentColor",
3089
3200
  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"
3090
3201
  }
3091
3202
  ),
3092
- /* @__PURE__ */ jsx37("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "2" })
3203
+ /* @__PURE__ */ jsx40("circle", { cx: "8", cy: "8", r: "7", stroke: "currentColor", strokeWidth: "2" })
3093
3204
  ] }),
3094
- /* @__PURE__ */ jsx37("p", { className: "text-sm font-medium", children: "Crypto" })
3205
+ /* @__PURE__ */ jsx40("p", { className: "text-sm font-medium", children: "Crypto" })
3095
3206
  ]
3096
3207
  }
3097
3208
  )
@@ -3099,31 +3210,31 @@ var TabButtons = (props) => {
3099
3210
  };
3100
3211
 
3101
3212
  // src/components/Tabs.tsx
3102
- import { jsx as jsx38, jsxs as jsxs25 } from "react/jsx-runtime";
3213
+ import { jsx as jsx41, jsxs as jsxs25 } from "react/jsx-runtime";
3103
3214
  var Tabs = () => {
3104
3215
  const { selectedPaymentMethod, setSelectedPaymentMethod } = useSpreePaymentMethod();
3105
3216
  return /* @__PURE__ */ jsxs25("div", { className: "mb-4 rounded-3xl border border-black/25 bg-white", children: [
3106
3217
  /* @__PURE__ */ jsxs25("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: [
3107
- /* @__PURE__ */ jsx38("h2", { className: "text-primary text-2xl font-semibold", children: "Choose a Payment Method" }),
3108
- /* @__PURE__ */ jsx38(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
3218
+ /* @__PURE__ */ jsx41("h2", { className: "text-primary text-2xl font-semibold", children: "Choose a Payment Method" }),
3219
+ /* @__PURE__ */ jsx41(TabButtons, { value: selectedPaymentMethod.type, onChange: setSelectedPaymentMethod })
3109
3220
  ] }),
3110
- selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ jsx38(CreditCardTab, {}),
3111
- selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ jsx38(CryptoTab, {})
3221
+ selectedPaymentMethod.type === "CREDIT_CARD" /* CREDIT_CARD */ && /* @__PURE__ */ jsx41(CreditCardTab, {}),
3222
+ selectedPaymentMethod.type === "CRYPTO" /* CRYPTO */ && /* @__PURE__ */ jsx41(CryptoTab, {})
3112
3223
  ] });
3113
3224
  };
3114
3225
 
3115
3226
  // src/SpreePayContent.tsx
3116
- import { jsx as jsx39, jsxs as jsxs26 } from "react/jsx-runtime";
3227
+ import { jsx as jsx42, jsxs as jsxs26 } from "react/jsx-runtime";
3117
3228
  var SpreePayContent = ({ isLoggedIn }) => {
3118
3229
  return /* @__PURE__ */ jsxs26("div", { className: "w-full", children: [
3119
- /* @__PURE__ */ jsx39(Tabs, {}),
3120
- /* @__PURE__ */ jsx39(CheckoutButton, { isLoggedIn }),
3121
- /* @__PURE__ */ jsx39(SpreeLegal, {})
3230
+ /* @__PURE__ */ jsx42(Tabs, {}),
3231
+ /* @__PURE__ */ jsx42(CheckoutButton, { isLoggedIn }),
3232
+ /* @__PURE__ */ jsx42(SpreeLegal, {})
3122
3233
  ] });
3123
3234
  };
3124
3235
 
3125
3236
  // src/hooks/useKeycloakSSO.ts
3126
- import { useCallback as useCallback7, useEffect as useEffect10, useRef as useRef6, useState as useState12 } from "react";
3237
+ import { useCallback as useCallback7, useEffect as useEffect10, useRef as useRef6, useState as useState13 } from "react";
3127
3238
  import Keycloak from "keycloak-js";
3128
3239
  var refreshAheadSeconds = 60;
3129
3240
  function useKeycloakSSO(config2) {
@@ -3131,9 +3242,9 @@ function useKeycloakSSO(config2) {
3131
3242
  const initRef = useRef6(false);
3132
3243
  const kcRef = useRef6(null);
3133
3244
  const refreshTimerRef = useRef6(null);
3134
- const [error, setError] = useState12(null);
3135
- const [isChecking, setIsChecking] = useState12(enabled);
3136
- const [accessToken, setAccessToken] = useState12(null);
3245
+ const [error, setError] = useState13(null);
3246
+ const [isChecking, setIsChecking] = useState13(enabled);
3247
+ const [accessToken, setAccessToken] = useState13(null);
3137
3248
  const scheduleRefresh = useCallback7(() => {
3138
3249
  const kc = kcRef.current;
3139
3250
  if (!kc || !kc.tokenParsed || !kc.tokenParsed.exp) {
@@ -3190,10 +3301,10 @@ function useKeycloakSSO(config2) {
3190
3301
  }
3191
3302
 
3192
3303
  // src/SpreePay.tsx
3193
- import { jsx as jsx40, jsxs as jsxs27 } from "react/jsx-runtime";
3304
+ import { jsx as jsx43, jsxs as jsxs27 } from "react/jsx-runtime";
3194
3305
  var SpreePayInner = () => {
3195
3306
  const rootRef = useRef7(null);
3196
- const [portalEl, setPortalEl] = useState13(null);
3307
+ const [portalEl, setPortalEl] = useState14(null);
3197
3308
  useLayoutEffect3(() => {
3198
3309
  if (!rootRef.current) return;
3199
3310
  const el = rootRef.current.querySelector(":scope > .sl-spreepay__portal");
@@ -3209,7 +3320,7 @@ var SpreePayInner = () => {
3209
3320
  ssoPageURI: env?.ssoPageURI,
3210
3321
  enabled: !env?.accessToken
3211
3322
  });
3212
- const slapiFetcher = useMemo8(() => {
3323
+ const slapiFetcher = useMemo9(() => {
3213
3324
  if (accessToken || env.accessToken) {
3214
3325
  return registerApi({
3215
3326
  accessToken: env.accessToken || accessToken,
@@ -3221,12 +3332,12 @@ var SpreePayInner = () => {
3221
3332
  const getContent = () => {
3222
3333
  if (isChecking) {
3223
3334
  return /* @__PURE__ */ jsxs27("div", { className: "flex w-full flex-col", children: [
3224
- /* @__PURE__ */ jsx40("div", { className: "bg-primary/8 mb-4 h-[315px] animate-pulse rounded-3xl" }),
3225
- /* @__PURE__ */ jsx40("div", { className: "bg-primary/8 h-[135px] animate-pulse rounded-3xl" }),
3226
- /* @__PURE__ */ jsx40(SpreeLegal, {})
3335
+ /* @__PURE__ */ jsx43("div", { className: "bg-primary/8 mb-4 h-[315px] animate-pulse rounded-3xl" }),
3336
+ /* @__PURE__ */ jsx43("div", { className: "bg-primary/8 h-[135px] animate-pulse rounded-3xl" }),
3337
+ /* @__PURE__ */ jsx43(SpreeLegal, {})
3227
3338
  ] });
3228
3339
  }
3229
- return /* @__PURE__ */ jsx40(
3340
+ return /* @__PURE__ */ jsx43(
3230
3341
  SWRConfig,
3231
3342
  {
3232
3343
  value: {
@@ -3235,17 +3346,17 @@ var SpreePayInner = () => {
3235
3346
  revalidateOnFocus: false,
3236
3347
  revalidateIfStale: false
3237
3348
  },
3238
- children: /* @__PURE__ */ jsx40(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ jsx40(NiceModal7.Provider, { children: /* @__PURE__ */ jsx40(SpreePayContent, { isLoggedIn: Boolean(accessToken || env.accessToken) }) }) })
3349
+ children: /* @__PURE__ */ jsx43(PortalContainerProvider, { container: portalEl, children: /* @__PURE__ */ jsx43(NiceModal7.Provider, { children: /* @__PURE__ */ jsx43(SpreePayContent, { isLoggedIn: Boolean(accessToken || env.accessToken) }) }) })
3239
3350
  }
3240
3351
  );
3241
3352
  };
3242
3353
  return /* @__PURE__ */ jsxs27("div", { ref: rootRef, className: cn("sl-spreepay", appProps.className), children: [
3243
- /* @__PURE__ */ jsx40("div", { className: "sl-spreepay__portal" }),
3354
+ /* @__PURE__ */ jsx43("div", { className: "sl-spreepay__portal" }),
3244
3355
  getContent()
3245
3356
  ] });
3246
3357
  };
3247
3358
  var SpreePay = (props) => {
3248
- return /* @__PURE__ */ jsx40(StaticConfigProvider, { props, children: /* @__PURE__ */ jsx40(SpreePayInner, {}) });
3359
+ return /* @__PURE__ */ jsx43(StaticConfigProvider, { props, children: /* @__PURE__ */ jsx43(SpreePayInner, {}) });
3249
3360
  };
3250
3361
 
3251
3362
  // src/hooks/useCapture3DS.ts
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@superlogic/spree-pay",
3
- "version": "0.1.18",
3
+ "version": "0.1.19",
4
4
  "description": "Spree-pay React component and utilities",
5
5
  "private": false,
6
6
  "type": "module",