@getpara/react-sdk 2.0.0-alpha.14 → 2.0.0-alpha.16

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.
@@ -9,7 +9,7 @@ import { OnRampProvider } from "@getpara/web-sdk";
9
9
  import { useModalStore } from "../../stores/index.js";
10
10
  import { lazy, useEffect, useMemo, useState } from "react";
11
11
  import { ModalStep } from "../../utils/steps.js";
12
- import { RampEmbed, StripeEmbed } from "@getpara/react-common";
12
+ import { RampEmbed } from "@getpara/react-common";
13
13
  import styled from "styled-components";
14
14
  import { useGoBack } from "../../hooks/useGoBack.js";
15
15
  import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
@@ -50,12 +50,12 @@ const AddFundsAwaiting = () => {
50
50
  return null;
51
51
  }
52
52
  switch (onRampPurchase == null ? void 0 : onRampPurchase.provider) {
53
- case OnRampProvider.STRIPE:
54
- return /* @__PURE__ */ jsx(StripeEmbed, __spreadProps(__spreadValues({}, props), { onRampConfig: props.onRampConfig }));
55
53
  case OnRampProvider.MOONPAY:
56
54
  return !MoonPayEmbed || typeof window === "undefined" ? null : /* @__PURE__ */ jsx(MoonPayEmbed, __spreadProps(__spreadValues({}, props), { onRampConfig: props.onRampConfig }));
57
55
  case OnRampProvider.RAMP:
58
56
  return /* @__PURE__ */ jsx(RampEmbed, __spreadProps(__spreadValues({}, props), { apiKey: (_b = (_a = props.onRampConfig) == null ? void 0 : _a.rampApiKey) != null ? _b : "", onRampConfig: props.onRampConfig }));
57
+ default:
58
+ return null;
59
59
  }
60
60
  }, [onRampPurchase == null ? void 0 : onRampPurchase.provider, MoonPayEmbed]);
61
61
  useEffect(() => {
@@ -158,7 +158,7 @@ const phoneMasks = {
158
158
  NZ: "## ### ###",
159
159
  NI: "#### ####",
160
160
  NE: "## ## ## ##",
161
- NG: "## ### ####",
161
+ NG: "## #### ####",
162
162
  NU: "####",
163
163
  NF: "### ###",
164
164
  MK: "## ### ###",
@@ -30,7 +30,7 @@ export declare function getNetworkName(str: Network | string): string;
30
30
  export declare function getNetworkIcon(str: Network | string): IconType;
31
31
  export declare function getAssetCode(str: OnRampAsset | string): string;
32
32
  export declare function getAssetName(str: OnRampAsset | string): string;
33
- export declare function getAssetIcon(str: OnRampAsset | string): "key" | "phone" | "farcaster" | "telegram" | "discord" | "x" | "search" | "para" | "wallet" | "close" | "copy" | "cosmos" | "code" | "menu" | "alertCircle" | "alertTriangle" | "alignVerticalCenter" | "angelListBrand" | "angelList" | "appleBrand" | "apple" | "arbitrumBrand" | "arrowCircleBrokenDownLeft" | "arrowCircleDownFilled" | "arrowNarrow" | "arrow" | "asterisk" | "backupKit" | "bank" | "baseBrand" | "brush" | "celoBrand" | "checkCircleFilled" | "checkCircle" | "checkSquare" | "check" | "chevronDown" | "chevronRight" | "chevronSelectorVertical" | "chevronUp" | "clock" | "clubhouseBrand" | "clubhouse" | "copy07" | "creditCard02" | "creditCard" | "cube03" | "cubeOutline" | "cube" | "currencyDollar" | "decentBrand" | "decent" | "dell" | "discordBrand" | "dot" | "dots" | "downloadCloud" | "download" | "dribbbleBrand" | "dribbble" | "earth" | "edit02" | "emptyCircle" | "ethereum" | "eyeOff" | "eye" | "facebookBrand" | "facebook" | "farcasterBrand" | "figmaBrand" | "figma" | "file" | "folder" | "githubBrand" | "github" | "globe" | "googleBrand" | "google" | "gridDots" | "helpCircle" | "heroAlertCircle" | "heroCheckmarkCapsule" | "heroCheckmark" | "heroEmail" | "heroExternalConnection" | "heroLock" | "heroPasskey" | "heroPhone" | "heroPlusCircleCapsule" | "heroPlusCircle" | "heroWallet" | "home" | "hp" | "image" | "infoCircle" | "instagramBrand" | "instagram" | "laptop" | "lenovo" | "lg" | "lightning01" | "lightning" | "linkExternal" | "linkedinBrand" | "linkedin" | "lockKeyholeCircle" | "logOut" | "mail" | "monitor" | "moonpayBrand" | "moreLoginOptions" | "motorola" | "nobleBrand" | "optimismBrand" | "paraBlackBg" | "paraBrand" | "paraIconBrand" | "paraIconQr" | "paraIcon" | "paraLogo" | "paraRingsDark" | "paraRings" | "passcode" | "pintrestBrand" | "pintrest" | "plusCircle" | "plus" | "polygonBrand" | "polygon" | "puzzlePiece" | "qrCode02" | "qrCode" | "rampNetworkBrand" | "rampNetwork" | "redditBrand" | "reddit" | "refresh" | "samsung" | "send" | "settings" | "share" | "shield" | "signalBrand" | "signal" | "sliders" | "snapchatBrand" | "snapchat" | "solana" | "spacingHeight" | "star04Filled" | "stars01Filled" | "stars02" | "stars" | "stopSquare" | "stripeBrand" | "telegramBrand" | "tetherBrand" | "tikTokBrand" | "tikTok" | "trash" | "tumblrBrand" | "tumblr" | "twitterBrand" | "twitter" | "usdcBrand" | "userCircle" | "user" | "youtubeBrand" | "youtube" | "AD" | "AE" | "AF" | "AG" | "AI" | "AL" | "AM" | "AO" | "AR" | "AS" | "AT" | "AU" | "AW" | "AX" | "AZ" | "BA" | "BB" | "BD" | "BE" | "BF" | "BG" | "BH" | "BI" | "BJ" | "BL" | "BM" | "BN" | "BO" | "BQ" | "BQ2" | "BQ3" | "BR" | "BS" | "BT" | "BW" | "BY" | "BZ" | "CA" | "CC" | "CD" | "CD2" | "CF" | "CH" | "CK" | "CL" | "CM" | "CN" | "CO" | "CR" | "CU" | "CW" | "CX" | "CY" | "CZ" | "DE" | "DJ" | "DK" | "DM" | "DO" | "DS" | "DZ" | "EC" | "EE" | "EG" | "EH" | "ER" | "ES" | "ET" | "FI" | "FJ" | "FK" | "FM" | "FO" | "FR" | "GA" | "GB2" | "GB" | "GD" | "GE" | "GG" | "GH" | "GI" | "GL" | "GM" | "GN" | "GQ" | "GR" | "GT" | "GU" | "GW" | "GY" | "HK" | "HN" | "HR" | "HT" | "HU" | "ID" | "IE" | "IL" | "IM" | "IN" | "IO" | "IQ" | "IR" | "IS" | "IT" | "JE" | "JM" | "JO" | "JP" | "KE" | "KG" | "KH" | "KI" | "KM" | "KN" | "KP" | "KR" | "KW" | "KY" | "KZ" | "LA" | "LB" | "LC" | "LI" | "LK" | "LR" | "LS" | "LT" | "LU" | "LV" | "LY" | "MA" | "MC" | "MD" | "ME" | "MG" | "MH" | "MK" | "ML" | "MM" | "MN" | "MO" | "MP" | "MQ" | "MR" | "MS" | "MT" | "MU" | "MV" | "MW" | "MX" | "MY" | "MZ" | "NA" | "NE" | "NF" | "NG" | "NI" | "NL" | "NO" | "NP" | "NR" | "NU" | "NZ" | "OM" | "PA" | "PE" | "PF" | "PG" | "PH" | "PK" | "PL" | "PN" | "PR" | "PS" | "PT" | "PW" | "PY" | "QA" | "RO" | "RS" | "RU" | "RW" | "SA" | "SB" | "SC" | "SE" | "SG" | "SI" | "SK" | "SL" | "SM" | "SN" | "SO" | "SR" | "SS" | "ST" | "SV" | "SX" | "SY" | "SZ" | "TC" | "TD" | "TG" | "TH" | "TJ" | "TK" | "TL" | "TM" | "TN" | "TO" | "TR" | "TT" | "TV" | "TW" | "TZ" | "UA" | "UG" | "US" | "UY" | "UZ" | "VC" | "VE" | "VG" | "VI" | "VN" | "VU" | "WS" | "YE" | "ZA" | "ZM" | "ZW";
33
+ export declare function getAssetIcon(str: OnRampAsset | string): "key" | "phone" | "farcaster" | "telegram" | "discord" | "x" | "search" | "para" | "wallet" | "close" | "copy" | "cosmos" | "code" | "menu" | "alertCircle" | "alertTriangle" | "alignVerticalCenter" | "angelListBrand" | "angelList" | "appleBrand" | "apple" | "arbitrumBrand" | "arrowCircleBrokenDownLeft" | "arrowCircleDownFilled" | "arrowNarrow" | "arrow" | "asterisk" | "backupKit" | "bank" | "baseBrand" | "brush" | "celoBrand" | "checkCircleFilled" | "checkCircle" | "checkSquare" | "check" | "chevronDown" | "chevronRight" | "chevronSelectorVertical" | "chevronUp" | "clock" | "clubhouseBrand" | "clubhouse" | "copy07" | "creditCard02" | "creditCard" | "cube03" | "cubeOutline" | "cube" | "currencyDollar" | "decentBrand" | "decent" | "dell" | "discordBrand" | "dot" | "dots" | "downloadCloud" | "download" | "dribbbleBrand" | "dribbble" | "earth" | "edit02" | "emptyCircle" | "ethereum" | "eyeOff" | "eye" | "facebookBrand" | "facebook" | "farcasterBrand" | "figmaBrand" | "figma" | "file" | "folder" | "githubBrand" | "github" | "globe" | "googleBrand" | "google" | "gridDots" | "helpCircle" | "heroAlertCircle" | "heroCheckmarkCapsule" | "heroCheckmark" | "heroEmail" | "heroExternalConnection" | "heroLock" | "heroPasskey" | "heroPhone" | "heroPlusCircleCapsule" | "heroPlusCircle" | "heroWallet" | "home" | "hp" | "image" | "infoCircle" | "instagramBrand" | "instagram" | "laptop" | "lenovo" | "lg" | "lightning01" | "lightning" | "linkExternal" | "linkedinBrand" | "linkedin" | "lockKeyholeCircle" | "logOut" | "mail" | "monitor" | "moonpayBrand" | "moreLoginOptions" | "motorola" | "nobleBrand" | "optimismBrand" | "paraBlackBg" | "paraBrand" | "paraIconBrand" | "paraIconQr" | "paraIcon" | "paraLogo" | "paraRingsDark" | "paraRings" | "passcode" | "pintrestBrand" | "pintrest" | "plusCircle" | "plus" | "polygonBrand" | "polygon" | "puzzlePiece" | "qrCode02" | "qrCode" | "rampNetworkBrand" | "rampNetwork" | "redditBrand" | "reddit" | "refresh" | "samsung" | "send" | "settings" | "share" | "shield" | "signalBrand" | "signal" | "sliders" | "snapchatBrand" | "snapchat" | "solana" | "spacingHeight" | "star04Filled" | "star05" | "stars01Filled" | "stars02" | "stars" | "stopSquare" | "stripeBrand" | "telegramBrand" | "tetherBrand" | "tikTokBrand" | "tikTok" | "trash" | "tumblrBrand" | "tumblr" | "twitterBrand" | "twitter" | "usdcBrand" | "userCircle" | "user" | "youtubeBrand" | "youtube" | "AD" | "AE" | "AF" | "AG" | "AI" | "AL" | "AM" | "AO" | "AR" | "AS" | "AT" | "AU" | "AW" | "AX" | "AZ" | "BA" | "BB" | "BD" | "BE" | "BF" | "BG" | "BH" | "BI" | "BJ" | "BL" | "BM" | "BN" | "BO" | "BQ" | "BQ2" | "BQ3" | "BR" | "BS" | "BT" | "BW" | "BY" | "BZ" | "CA" | "CC" | "CD" | "CD2" | "CF" | "CH" | "CK" | "CL" | "CM" | "CN" | "CO" | "CR" | "CU" | "CW" | "CX" | "CY" | "CZ" | "DE" | "DJ" | "DK" | "DM" | "DO" | "DS" | "DZ" | "EC" | "EE" | "EG" | "EH" | "ER" | "ES" | "ET" | "FI" | "FJ" | "FK" | "FM" | "FO" | "FR" | "GA" | "GB2" | "GB" | "GD" | "GE" | "GG" | "GH" | "GI" | "GL" | "GM" | "GN" | "GQ" | "GR" | "GT" | "GU" | "GW" | "GY" | "HK" | "HN" | "HR" | "HT" | "HU" | "ID" | "IE" | "IL" | "IM" | "IN" | "IO" | "IQ" | "IR" | "IS" | "IT" | "JE" | "JM" | "JO" | "JP" | "KE" | "KG" | "KH" | "KI" | "KM" | "KN" | "KP" | "KR" | "KW" | "KY" | "KZ" | "LA" | "LB" | "LC" | "LI" | "LK" | "LR" | "LS" | "LT" | "LU" | "LV" | "LY" | "MA" | "MC" | "MD" | "ME" | "MG" | "MH" | "MK" | "ML" | "MM" | "MN" | "MO" | "MP" | "MQ" | "MR" | "MS" | "MT" | "MU" | "MV" | "MW" | "MX" | "MY" | "MZ" | "NA" | "NE" | "NF" | "NG" | "NI" | "NL" | "NO" | "NP" | "NR" | "NU" | "NZ" | "OM" | "PA" | "PE" | "PF" | "PG" | "PH" | "PK" | "PL" | "PN" | "PR" | "PS" | "PT" | "PW" | "PY" | "QA" | "RO" | "RS" | "RU" | "RW" | "SA" | "SB" | "SC" | "SE" | "SG" | "SI" | "SK" | "SL" | "SM" | "SN" | "SO" | "SR" | "SS" | "ST" | "SV" | "SX" | "SY" | "SZ" | "TC" | "TD" | "TG" | "TH" | "TJ" | "TK" | "TL" | "TM" | "TN" | "TO" | "TR" | "TT" | "TV" | "TW" | "TZ" | "UA" | "UG" | "US" | "UY" | "UZ" | "VC" | "VE" | "VG" | "VI" | "VN" | "VU" | "WS" | "YE" | "ZA" | "ZM" | "ZW";
34
34
  export declare const MOBILE_SIZE = 480;
35
35
  export declare const NETWORK_NOT_SUPPORTED_ERROR = "network not supported";
36
36
  export declare const EMAIL_REGEX: RegExp;
@@ -119,7 +119,7 @@ const BODY_MOTION_VARIANTS = {
119
119
  const BODY_TRANSITION = {
120
120
  duration: 0.2
121
121
  };
122
- const SDK_VERSION = "2.0.0-alpha.13";
122
+ const SDK_VERSION = "2.0.0-alpha.16";
123
123
  export {
124
124
  BODY_MOTION_VARIANTS,
125
125
  BODY_TRANSITION,
@@ -5,7 +5,8 @@ export declare enum EvmWallet {
5
5
  WALLETCONNECT = "WALLETCONNECT",
6
6
  ZERION = "ZERION",
7
7
  SAFE = "SAFE",
8
- RABBY = "RABBY"
8
+ RABBY = "RABBY",
9
+ OKX = "OKX"
9
10
  }
10
11
  export declare enum SolanaWallet {
11
12
  PHANTOM = "PHANTOM",
@@ -29,5 +30,6 @@ export declare const ExternalWallet: {
29
30
  ZERION: EvmWallet.ZERION;
30
31
  SAFE: EvmWallet.SAFE;
31
32
  RABBY: EvmWallet.RABBY;
33
+ OKX: EvmWallet.OKX;
32
34
  };
33
35
  export type TExternalWallet = keyof typeof ExternalWallet;
@@ -10,6 +10,7 @@ var EvmWallet = /* @__PURE__ */ ((EvmWallet2) => {
10
10
  EvmWallet2["ZERION"] = "ZERION";
11
11
  EvmWallet2["SAFE"] = "SAFE";
12
12
  EvmWallet2["RABBY"] = "RABBY";
13
+ EvmWallet2["OKX"] = "OKX";
13
14
  return EvmWallet2;
14
15
  })(EvmWallet || {});
15
16
  var SolanaWallet = /* @__PURE__ */ ((SolanaWallet2) => {
@@ -46,7 +46,7 @@ const useWalletBalance = (args) => {
46
46
  (selectedWallet == null ? void 0 : selectedWallet.isExternal) ? chainId : ""
47
47
  ],
48
48
  queryFn,
49
- enabled: !!selectedWallet && !!rpcUrl && !!(account == null ? void 0 : account.isConnected)
49
+ enabled: !!client && !!selectedWallet && !!rpcUrl && !!(account == null ? void 0 : account.isConnected)
50
50
  });
51
51
  };
52
52
  export {
@@ -9,6 +9,7 @@ import {
9
9
  import { ACCOUNT_BASE_KEY } from "../queries/useAccount.js";
10
10
  import { useStore } from "../../stores/useStore.js";
11
11
  import { WALLET_BASE_KEY } from "../queries/useWallet.js";
12
+ import { WALLET_BALANCE_BASE_KEY } from "../queries/useWalletBalance.js";
12
13
  const useEventListeners = ({
13
14
  onLogin,
14
15
  onLogout,
@@ -28,6 +29,7 @@ const useEventListeners = ({
28
29
  const loginOrSetupListener = useCallback(() => {
29
30
  queryClient.refetchQueries({ queryKey: [ACCOUNT_BASE_KEY] });
30
31
  queryClient.refetchQueries({ queryKey: [WALLET_BASE_KEY] });
32
+ queryClient.invalidateQueries({ queryKey: [WALLET_BALANCE_BASE_KEY], exact: false });
31
33
  }, [queryClient]);
32
34
  const loginListener = useCallback(
33
35
  (event) => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@getpara/react-sdk",
3
- "version": "2.0.0-alpha.14",
3
+ "version": "2.0.0-alpha.16",
4
4
  "type": "module",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -15,9 +15,9 @@
15
15
  "*.css"
16
16
  ],
17
17
  "dependencies": {
18
- "@getpara/react-common": "2.0.0-alpha.14",
19
- "@getpara/react-components": "2.0.0-alpha.14",
20
- "@getpara/web-sdk": "2.0.0-alpha.14",
18
+ "@getpara/react-common": "2.0.0-alpha.16",
19
+ "@getpara/react-components": "2.0.0-alpha.16",
20
+ "@getpara/web-sdk": "2.0.0-alpha.16",
21
21
  "date-fns": "^3.6.0",
22
22
  "framer-motion": "11.3.28",
23
23
  "libphonenumber-js": "^1.11.1",
@@ -33,9 +33,9 @@
33
33
  "cli": "node ./dist/cli/cli.mjs"
34
34
  },
35
35
  "devDependencies": {
36
- "@getpara/cosmos-wallet-connectors": "2.0.0-alpha.14",
37
- "@getpara/evm-wallet-connectors": "2.0.0-alpha.14",
38
- "@getpara/solana-wallet-connectors": "2.0.0-alpha.14",
36
+ "@getpara/cosmos-wallet-connectors": "2.0.0-alpha.16",
37
+ "@getpara/evm-wallet-connectors": "2.0.0-alpha.16",
38
+ "@getpara/solana-wallet-connectors": "2.0.0-alpha.16",
39
39
  "@testing-library/dom": "^10.4.0",
40
40
  "@testing-library/react": "^16.3.0",
41
41
  "@testing-library/react-hooks": "^8.0.1",
@@ -63,5 +63,5 @@
63
63
  "resolutions": {
64
64
  "styled-components": "^6"
65
65
  },
66
- "gitHead": "03898846281bf37536a6ed12dede119e6171ad45"
66
+ "gitHead": "84eb1a14fa8918c449ae4b163fe173d34688cdcd"
67
67
  }
@@ -1,16 +0,0 @@
1
- import { OnrampSessionResult } from '@stripe/crypto';
2
- export declare const STRIPE_PUBLISHABLE_KEY = "pk_live_51MvquNGrzDeP5yP9EgVSMBPQbrbg0oHDjPIIXypePd0jzOFjbadyfO7wBKLHhUtbKIUiEUVC3YYcTJyAmJ8xA7JE00T2UDfYKz";
3
- export declare const STRIPE_PUBLISHABLE_KEY_TEST = "pk_test_51MvquNGrzDeP5yP98WgPaAUgQ50I3OpfPhVfiLO47FBHepJnZRPO62IzZY2uxT5ovhSS10RwcTcnaVil1mcJOzIi00dHapODdS";
4
- export declare const CryptoElements: ({ stripeOnramp, children }: {
5
- stripeOnramp: any;
6
- children: any;
7
- }) => import("react/jsx-runtime").JSX.Element;
8
- export declare const useStripeOnramp: () => any;
9
- export declare const OnrampElement: ({ clientSecret, appearance, onReady, onSessionChange, ...props }: {
10
- clientSecret: string;
11
- appearance: "dark" | "light";
12
- onReady?: () => void;
13
- onSessionChange: (_: {
14
- session: OnrampSessionResult;
15
- }) => void;
16
- }) => import("react/jsx-runtime").JSX.Element;
@@ -1,88 +0,0 @@
1
- "use client";
2
- import {
3
- __objRest,
4
- __spreadProps,
5
- __spreadValues
6
- } from "../../../chunk-MMUBH76A.js";
7
- import { jsx } from "react/jsx-runtime";
8
- import React from "react";
9
- const STRIPE_PUBLISHABLE_KEY = "pk_live_51MvquNGrzDeP5yP9EgVSMBPQbrbg0oHDjPIIXypePd0jzOFjbadyfO7wBKLHhUtbKIUiEUVC3YYcTJyAmJ8xA7JE00T2UDfYKz";
10
- const STRIPE_PUBLISHABLE_KEY_TEST = "pk_test_51MvquNGrzDeP5yP98WgPaAUgQ50I3OpfPhVfiLO47FBHepJnZRPO62IzZY2uxT5ovhSS10RwcTcnaVil1mcJOzIi00dHapODdS";
11
- const CryptoElementsContext = React.createContext({ onramp: null });
12
- CryptoElementsContext.displayName = "CryptoElementsContext";
13
- const CryptoElements = ({ stripeOnramp, children }) => {
14
- const [ctx, setContext] = React.useState(() => ({
15
- onramp: null
16
- }));
17
- React.useEffect(() => {
18
- let isMounted = true;
19
- Promise.resolve(stripeOnramp).then((onramp) => {
20
- if (onramp && isMounted) {
21
- setContext((ctx2) => ctx2.onramp ? ctx2 : { onramp });
22
- }
23
- });
24
- return () => {
25
- isMounted = false;
26
- };
27
- }, [stripeOnramp]);
28
- return /* @__PURE__ */ jsx(CryptoElementsContext.Provider, { value: ctx, children });
29
- };
30
- const useStripeOnramp = () => {
31
- const context = React.useContext(CryptoElementsContext);
32
- return context == null ? void 0 : context.onramp;
33
- };
34
- const useOnrampSessionListener = (type, session, callback) => {
35
- React.useEffect(() => {
36
- if (session && callback) {
37
- const listener = (e) => callback(e.payload);
38
- session.addEventListener(type, listener);
39
- return () => {
40
- session.removeEventListener(type, listener);
41
- };
42
- }
43
- return () => {
44
- };
45
- }, [session, callback, type]);
46
- };
47
- const OnrampElement = (_a) => {
48
- var _b = _a, {
49
- clientSecret,
50
- appearance,
51
- onReady = () => {
52
- },
53
- onSessionChange
54
- } = _b, props = __objRest(_b, [
55
- "clientSecret",
56
- "appearance",
57
- "onReady",
58
- "onSessionChange"
59
- ]);
60
- const stripeOnramp = useStripeOnramp();
61
- const onrampElementRef = React.useRef(null);
62
- const [session, setSession] = React.useState();
63
- const appearanceJSON = JSON.stringify(appearance);
64
- React.useEffect(() => {
65
- const containerRef = onrampElementRef.current;
66
- if (containerRef) {
67
- containerRef.innerHTML = "";
68
- if (clientSecret && stripeOnramp) {
69
- setSession(
70
- stripeOnramp.createSession({
71
- clientSecret,
72
- appearance: { theme: appearance }
73
- }).mount(containerRef)
74
- );
75
- }
76
- }
77
- }, [appearanceJSON, clientSecret, stripeOnramp]);
78
- useOnrampSessionListener("onramp_ui_loaded", session, onReady);
79
- useOnrampSessionListener("onramp_session_updated", session, onSessionChange);
80
- return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, props), { ref: onrampElementRef }));
81
- };
82
- export {
83
- CryptoElements,
84
- OnrampElement,
85
- STRIPE_PUBLISHABLE_KEY,
86
- STRIPE_PUBLISHABLE_KEY_TEST,
87
- useStripeOnramp
88
- };