@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.
- package/dist/modal/components/AddFunds/AddFundsAwaiting.js +3 -3
- package/dist/modal/components/AuthInput/phoneMasks.js +1 -1
- package/dist/modal/constants/constants.d.ts +1 -1
- package/dist/modal/constants/constants.js +1 -1
- package/dist/modal/types/externalWallets.d.ts +3 -1
- package/dist/modal/types/externalWallets.js +1 -0
- package/dist/provider/hooks/queries/useWalletBalance.js +1 -1
- package/dist/provider/hooks/utils/useEventListeners.js +2 -0
- package/package.json +8 -8
- package/dist/modal/components/StripeComponents/StripeComponents.d.ts +0 -16
- package/dist/modal/components/StripeComponents/StripeComponents.js +0 -88
|
@@ -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
|
|
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(() => {
|
|
@@ -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;
|
|
@@ -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.
|
|
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.
|
|
19
|
-
"@getpara/react-components": "2.0.0-alpha.
|
|
20
|
-
"@getpara/web-sdk": "2.0.0-alpha.
|
|
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.
|
|
37
|
-
"@getpara/evm-wallet-connectors": "2.0.0-alpha.
|
|
38
|
-
"@getpara/solana-wallet-connectors": "2.0.0-alpha.
|
|
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": "
|
|
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
|
-
};
|