@getpara/react-common 2.0.0-alpha.15 → 2.0.0-alpha.17
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/components/MoonPayEmbed.d.ts +2 -2
- package/dist/components/RampEmbed.d.ts +2 -2
- package/dist/components/index.d.ts +0 -1
- package/dist/components/index.js +0 -1
- package/dist/types/externalWalletCommon.d.ts +4 -4
- package/dist/types/index.d.ts +1 -1
- package/package.json +4 -6
- package/dist/components/StripeEmbed.d.ts +0 -4
- package/dist/components/StripeEmbed.js +0 -138
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare const MoonPayEmbed: ({ para, isDark, isEmbedded, onRampConfig, onRampPurchase, setOnRampPurchase }:
|
|
1
|
+
import { OnRampProps } from '../types/index.js';
|
|
2
|
+
export declare const MoonPayEmbed: ({ para, isDark, isEmbedded, onRampConfig, onRampPurchase, setOnRampPurchase }: OnRampProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default MoonPayEmbed;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export declare const RampEmbed: ({ para, appName, onRampConfig, onRampPurchase, isEmbedded, apiKey, onClose, setOnRampPurchase, }:
|
|
1
|
+
import { OnRampProps } from '../types/index.js';
|
|
2
|
+
export declare const RampEmbed: ({ para, appName, onRampConfig, onRampPurchase, isEmbedded, apiKey, onClose, setOnRampPurchase, }: OnRampProps & {
|
|
3
3
|
apiKey: string;
|
|
4
4
|
}) => import("react/jsx-runtime").JSX.Element;
|
package/dist/components/index.js
CHANGED
|
@@ -28,15 +28,15 @@ export type WalletMetadata = {
|
|
|
28
28
|
};
|
|
29
29
|
};
|
|
30
30
|
export type CommonWallet = {
|
|
31
|
-
connect: () => Promise<{
|
|
31
|
+
connect: (isConnectionOnly?: boolean) => Promise<{
|
|
32
32
|
address?: string;
|
|
33
|
-
|
|
33
|
+
ethAddress?: string;
|
|
34
34
|
error?: string;
|
|
35
35
|
authState?: AuthStateLogin | AuthStateVerify;
|
|
36
36
|
}>;
|
|
37
|
-
connectMobile: (isManualWalletConnect?: boolean) => Promise<{
|
|
37
|
+
connectMobile: (isManualWalletConnect?: boolean, isConnectionOnly?: boolean) => Promise<{
|
|
38
38
|
address?: string;
|
|
39
|
-
|
|
39
|
+
ethAddress?: string;
|
|
40
40
|
error?: string;
|
|
41
41
|
authState?: AuthStateLogin | AuthStateVerify;
|
|
42
42
|
}>;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { AuthInfo } from '@getpara/user-management-client';
|
|
2
2
|
import ParaWeb, { type OnRampConfig, type OnRampPurchase } from '@getpara/web-sdk';
|
|
3
3
|
export * from './externalWalletCommon.js';
|
|
4
|
-
export type
|
|
4
|
+
export type OnRampProps = {
|
|
5
5
|
appName?: string;
|
|
6
6
|
para: ParaWeb;
|
|
7
7
|
isDark?: boolean;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@getpara/react-common",
|
|
3
|
-
"version": "2.0.0-alpha.
|
|
3
|
+
"version": "2.0.0-alpha.17",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -11,12 +11,10 @@
|
|
|
11
11
|
"*.css"
|
|
12
12
|
],
|
|
13
13
|
"dependencies": {
|
|
14
|
-
"@getpara/react-components": "2.0.0-alpha.
|
|
15
|
-
"@getpara/web-sdk": "2.0.0-alpha.
|
|
14
|
+
"@getpara/react-components": "2.0.0-alpha.17",
|
|
15
|
+
"@getpara/web-sdk": "2.0.0-alpha.17",
|
|
16
16
|
"@moonpay/moonpay-react": "^1.8.3",
|
|
17
17
|
"@ramp-network/ramp-instant-sdk": "^4.0.5",
|
|
18
|
-
"@stripe/crypto": "^0.0.4",
|
|
19
|
-
"@stripe/stripe-js": "^3.4.0",
|
|
20
18
|
"libphonenumber-js": "^1.11.1",
|
|
21
19
|
"styled-components": "^6.1.8",
|
|
22
20
|
"ua-parser-js": "^2.0.2"
|
|
@@ -42,5 +40,5 @@
|
|
|
42
40
|
"resolutions": {
|
|
43
41
|
"styled-components": "^6"
|
|
44
42
|
},
|
|
45
|
-
"gitHead": "
|
|
43
|
+
"gitHead": "5cb0f3dee5564995c465ead160ed817ba2ba37a7"
|
|
46
44
|
}
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import { Props } from '../types/index.js';
|
|
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 StripeEmbed: ({ para, isDark, isEmbedded, onRampPurchase, setOnRampPurchase }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,138 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import {
|
|
3
|
-
__async
|
|
4
|
-
} from "../chunk-GOCCUU3Z.js";
|
|
5
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
-
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
|
7
|
-
import { loadStripeOnramp } from "@stripe/crypto";
|
|
8
|
-
import { Network, OnRampAsset, OnRampProvider, OnRampPurchaseStatus } from "@getpara/web-sdk";
|
|
9
|
-
import { CpslSpinner } from "@getpara/react-components";
|
|
10
|
-
import { SpinnerContainer } from "./common.js";
|
|
11
|
-
import styled from "styled-components";
|
|
12
|
-
const STRIPE_PUBLISHABLE_KEY = "pk_live_51MvquNGrzDeP5yP9EgVSMBPQbrbg0oHDjPIIXypePd0jzOFjbadyfO7wBKLHhUtbKIUiEUVC3YYcTJyAmJ8xA7JE00T2UDfYKz";
|
|
13
|
-
const STRIPE_PUBLISHABLE_KEY_TEST = "pk_test_51MvquNGrzDeP5yP98WgPaAUgQ50I3OpfPhVfiLO47FBHepJnZRPO62IzZY2uxT5ovhSS10RwcTcnaVil1mcJOzIi00dHapODdS";
|
|
14
|
-
const AssetCodes = {
|
|
15
|
-
eth: OnRampAsset.ETHEREUM,
|
|
16
|
-
matic: OnRampAsset.POLYGON,
|
|
17
|
-
sol: OnRampAsset.SOLANA,
|
|
18
|
-
usdc: OnRampAsset.USDC
|
|
19
|
-
};
|
|
20
|
-
const NetworkCodes = {
|
|
21
|
-
base: Network.BASE,
|
|
22
|
-
ethereum: Network.ETHEREUM,
|
|
23
|
-
polygon: Network.POLYGON,
|
|
24
|
-
solana: Network.SOLANA
|
|
25
|
-
};
|
|
26
|
-
const CryptoElementsContext = React.createContext(null);
|
|
27
|
-
CryptoElementsContext.displayName = "CryptoElementsContext";
|
|
28
|
-
const useOnrampSessionListener = (type, session, callback) => {
|
|
29
|
-
React.useEffect(() => {
|
|
30
|
-
if (session && callback) {
|
|
31
|
-
const listener = (e) => callback(e.payload);
|
|
32
|
-
session.addEventListener(type, listener);
|
|
33
|
-
return () => {
|
|
34
|
-
session.removeEventListener(type, listener);
|
|
35
|
-
};
|
|
36
|
-
}
|
|
37
|
-
return () => {
|
|
38
|
-
};
|
|
39
|
-
}, [session, callback, type]);
|
|
40
|
-
};
|
|
41
|
-
const StripeEmbed = ({ para, isDark, isEmbedded, onRampPurchase, setOnRampPurchase }) => {
|
|
42
|
-
const [isReady, setIsReady] = useState(false);
|
|
43
|
-
const isStripeEmbed = useMemo(() => onRampPurchase.provider === OnRampProvider.STRIPE, [onRampPurchase]);
|
|
44
|
-
const clientSecret = useMemo(
|
|
45
|
-
() => (onRampPurchase == null ? void 0 : onRampPurchase.provider) === OnRampProvider.STRIPE ? onRampPurchase == null ? void 0 : onRampPurchase.providerKey : void 0,
|
|
46
|
-
[onRampPurchase == null ? void 0 : onRampPurchase.provider, onRampPurchase == null ? void 0 : onRampPurchase.providerKey]
|
|
47
|
-
);
|
|
48
|
-
const [stripeOnRamp, setStripeOnRamp] = useState();
|
|
49
|
-
const onrampElementRef = React.useRef(null);
|
|
50
|
-
const [session, setSession] = React.useState();
|
|
51
|
-
useEffect(() => {
|
|
52
|
-
const containerRef = onrampElementRef.current;
|
|
53
|
-
if (containerRef) {
|
|
54
|
-
containerRef.innerHTML = "";
|
|
55
|
-
if (clientSecret && stripeOnRamp) {
|
|
56
|
-
setSession(
|
|
57
|
-
stripeOnRamp.createSession({
|
|
58
|
-
clientSecret,
|
|
59
|
-
appearance: { theme: isDark ? "dark" : "light" }
|
|
60
|
-
}).mount(containerRef)
|
|
61
|
-
);
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
}, [clientSecret, stripeOnRamp]);
|
|
65
|
-
useEffect(() => {
|
|
66
|
-
loadStripeOnramp((onRampPurchase == null ? void 0 : onRampPurchase.testMode) ? STRIPE_PUBLISHABLE_KEY_TEST : STRIPE_PUBLISHABLE_KEY).then(setStripeOnRamp);
|
|
67
|
-
}, []);
|
|
68
|
-
const onReady = useCallback(() => {
|
|
69
|
-
setIsReady(true);
|
|
70
|
-
}, []);
|
|
71
|
-
const onSessionChange = useCallback(
|
|
72
|
-
(_0) => __async(void 0, [_0], function* ({ session: session2 }) {
|
|
73
|
-
if (!isStripeEmbed) {
|
|
74
|
-
return;
|
|
75
|
-
}
|
|
76
|
-
switch (session2.status) {
|
|
77
|
-
case "fulfillment_processing":
|
|
78
|
-
case "fulfillment_complete":
|
|
79
|
-
const updatedPurchase = yield para.ctx.client.updateOnRampPurchase({
|
|
80
|
-
userId: para.getUserId(),
|
|
81
|
-
walletId: onRampPurchase.walletId,
|
|
82
|
-
externalWalletAddress: onRampPurchase.externalWalletAddress,
|
|
83
|
-
purchaseId: onRampPurchase.id,
|
|
84
|
-
updates: {
|
|
85
|
-
status: OnRampPurchaseStatus.FINISHED,
|
|
86
|
-
fiatQuantity: session2.quote.source_amount,
|
|
87
|
-
fiat: session2.quote.source_currency.asset_code,
|
|
88
|
-
network: NetworkCodes[session2.quote.destination_currency.currency_network],
|
|
89
|
-
asset: AssetCodes[session2.quote.destination_currency.asset_code],
|
|
90
|
-
assetQuantity: session2.quote.destination_amount,
|
|
91
|
-
providerKey: null
|
|
92
|
-
}
|
|
93
|
-
});
|
|
94
|
-
setOnRampPurchase(updatedPurchase);
|
|
95
|
-
if (!isEmbedded) {
|
|
96
|
-
setTimeout(() => {
|
|
97
|
-
if (typeof window !== "undefined") {
|
|
98
|
-
window.close();
|
|
99
|
-
}
|
|
100
|
-
}, 5e3);
|
|
101
|
-
}
|
|
102
|
-
break;
|
|
103
|
-
default:
|
|
104
|
-
break;
|
|
105
|
-
}
|
|
106
|
-
}),
|
|
107
|
-
[isStripeEmbed]
|
|
108
|
-
);
|
|
109
|
-
useOnrampSessionListener("onramp_ui_loaded", session, onReady);
|
|
110
|
-
useOnrampSessionListener("onramp_session_updated", session, onSessionChange);
|
|
111
|
-
return /* @__PURE__ */ jsxs(OuterContainer, { children: [
|
|
112
|
-
/* @__PURE__ */ jsx(Container, { isReady, ref: onrampElementRef }),
|
|
113
|
-
!isReady && /* @__PURE__ */ jsx(SpinnerContainer, { style: { width: "100%", height: "100%", flex: 1 }, children: /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) })
|
|
114
|
-
] });
|
|
115
|
-
};
|
|
116
|
-
const OuterContainer = styled.div`
|
|
117
|
-
height: 100%;
|
|
118
|
-
width: 100%;
|
|
119
|
-
display: flex;
|
|
120
|
-
flex: 1;
|
|
121
|
-
align-items: center;
|
|
122
|
-
justify-content: center;
|
|
123
|
-
`;
|
|
124
|
-
const Container = styled.div`
|
|
125
|
-
height: 100%;
|
|
126
|
-
width: 100%;
|
|
127
|
-
display: ${({ isReady }) => isReady ? "flex" : "none"};
|
|
128
|
-
justify-content: center;
|
|
129
|
-
|
|
130
|
-
& > iframe {
|
|
131
|
-
height: 100%;
|
|
132
|
-
}
|
|
133
|
-
`;
|
|
134
|
-
export {
|
|
135
|
-
STRIPE_PUBLISHABLE_KEY,
|
|
136
|
-
STRIPE_PUBLISHABLE_KEY_TEST,
|
|
137
|
-
StripeEmbed
|
|
138
|
-
};
|