@getpara/react-common 2.0.0-alpha.7 → 2.0.0-alpha.71

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 (67) hide show
  1. package/README.md +13 -0
  2. package/dist/{chunk-GOCCUU3Z.js → chunk-MMUBH76A.js} +17 -0
  3. package/dist/classes/ParaInternal.d.ts +26 -7
  4. package/dist/classes/ParaInternal.js +22 -2
  5. package/dist/components/HeroSpinner.d.ts +4 -3
  6. package/dist/components/HeroSpinner.js +29 -15
  7. package/dist/components/KnownDevices.js +6 -7
  8. package/dist/components/MoonPayEmbed.d.ts +4 -2
  9. package/dist/components/MoonPayEmbed.js +57 -84
  10. package/dist/components/NetworkSpeedBanner.js +6 -6
  11. package/dist/components/QRCode.js +8 -8
  12. package/dist/components/RampEmbed.d.ts +2 -2
  13. package/dist/components/RampEmbed.js +17 -29
  14. package/dist/components/UserIdentifier.d.ts +8 -0
  15. package/dist/components/UserIdentifier.js +30 -22
  16. package/dist/components/WalletSelect.d.ts +33 -0
  17. package/dist/components/WalletSelect.js +171 -0
  18. package/dist/components/WalletTypeIcon.d.ts +9 -0
  19. package/dist/components/WalletTypeIcon.js +45 -0
  20. package/dist/components/WarningBanner.d.ts +7 -0
  21. package/dist/components/WarningBanner.js +60 -0
  22. package/dist/components/common.d.ts +3 -3
  23. package/dist/components/common.js +8 -8
  24. package/dist/components/index.d.ts +3 -1
  25. package/dist/components/index.js +3 -1
  26. package/dist/constants/aaguiMetadata.js +1 -1
  27. package/dist/constants/externalWalletDefaults.d.ts +50 -0
  28. package/dist/constants/externalWalletDefaults.js +52 -0
  29. package/dist/constants/index.d.ts +37 -0
  30. package/dist/constants/index.js +152 -0
  31. package/dist/constants/oAuthLogos.d.ts +12 -0
  32. package/dist/constants/oAuthLogos.js +160 -0
  33. package/dist/hooks/index.d.ts +2 -0
  34. package/dist/hooks/index.js +2 -0
  35. package/dist/hooks/useCopyToClipboard.js +1 -1
  36. package/dist/hooks/useDropdownPosition.d.ts +7 -0
  37. package/dist/hooks/useDropdownPosition.js +33 -0
  38. package/dist/hooks/useUserAgent.d.ts +2 -0
  39. package/dist/hooks/useUserAgent.js +10 -0
  40. package/dist/index.d.ts +1 -0
  41. package/dist/index.js +1 -0
  42. package/dist/types/commonTypes.d.ts +15 -0
  43. package/dist/types/commonTypes.js +1 -0
  44. package/dist/types/externalWalletCommon.d.ts +75 -37
  45. package/dist/types/externalWalletCommon.js +0 -31
  46. package/dist/types/index.d.ts +8 -5
  47. package/dist/types/index.js +1 -0
  48. package/dist/utils/formatBiometricHints.d.ts +1 -1
  49. package/dist/utils/formatBiometricHints.js +3 -3
  50. package/dist/utils/getBrowserName.js +1 -1
  51. package/dist/utils/getDeviceLogo.js +1 -1
  52. package/dist/utils/getDeviceModelName.js +1 -1
  53. package/dist/utils/getExternalWalletDisplayName.d.ts +3 -1
  54. package/dist/utils/getExternalWalletDisplayName.js +7 -15
  55. package/dist/utils/getExternalWalletIcon.d.ts +5 -0
  56. package/dist/utils/getExternalWalletIcon.js +17 -0
  57. package/dist/utils/index.d.ts +18 -16
  58. package/dist/utils/index.js +27 -31
  59. package/dist/utils/openMobileUrl.d.ts +1 -0
  60. package/dist/utils/openMobileUrl.js +34 -0
  61. package/dist/utils/safeStyled.d.ts +2 -0
  62. package/dist/utils/safeStyled.js +25 -0
  63. package/package.json +22 -24
  64. package/dist/components/StripeEmbed.d.ts +0 -4
  65. package/dist/components/StripeEmbed.js +0 -138
  66. package/dist/utils/offRampSend.d.ts +0 -7
  67. package/dist/utils/offRampSend.js +0 -75
@@ -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
- };
@@ -1,7 +0,0 @@
1
- import { OnRampPurchaseUpdateParams } from '@getpara/user-management-client';
2
- import Para, { OnRampPurchase } from '@getpara/web-sdk';
3
- export declare function offRampSend(para: Para, { id: purchaseId, provider, walletId, walletType, address, testMode }: Partial<OnRampPurchase>, setOnRampPurchase: (_: OnRampPurchase) => void, { assetQuantity, fiat, fiatQuantity, chainId, destinationAddress, contractAddress, }: OnRampPurchaseUpdateParams & {
4
- chainId?: string;
5
- destinationAddress: string;
6
- contractAddress?: string | null;
7
- }): Promise<string | undefined>;
@@ -1,75 +0,0 @@
1
- "use client";
2
- import {
3
- __async
4
- } from "../chunk-GOCCUU3Z.js";
5
- import { hexStringToBase64 } from "@getpara/web-sdk";
6
- function offRampSend(_0, _1, _2, _3) {
7
- return __async(this, arguments, function* (para, { id: purchaseId, provider, walletId, walletType, address, testMode = false }, setOnRampPurchase, {
8
- assetQuantity,
9
- fiat,
10
- fiatQuantity,
11
- chainId,
12
- destinationAddress,
13
- contractAddress
14
- }) {
15
- var _a, _b, _c;
16
- if (!purchaseId || !walletId || !walletType || !provider) {
17
- throw new Error("Missing required fields");
18
- }
19
- try {
20
- const { tx, message, network, asset } = yield para.ctx.client.generateOffRampTx(para.getUserId(), {
21
- walletId,
22
- walletType,
23
- provider,
24
- chainId,
25
- destinationAddress,
26
- sourceAddress: address,
27
- contractAddress,
28
- testMode,
29
- assetQuantity
30
- });
31
- let signature;
32
- switch (walletType) {
33
- case "EVM":
34
- signature = (_a = yield para.signTransaction({
35
- walletId,
36
- rlpEncodedTxBase64: hexStringToBase64(tx),
37
- chainId
38
- })) == null ? void 0 : _a.signature;
39
- break;
40
- case "SOLANA":
41
- signature = (_b = yield para.signMessage({ walletId, messageBase64: message })) == null ? void 0 : _b.signature;
42
- break;
43
- default:
44
- throw new Error(`Unsupported wallet type: ${walletType}`);
45
- }
46
- const { txHash } = yield para.ctx.client.sendOffRampTx(para.getUserId(), {
47
- tx,
48
- signature: walletType === "EVM" ? `0x${signature}` : signature,
49
- sourceAddress: address,
50
- network,
51
- walletId,
52
- walletType
53
- });
54
- const updated = yield para.ctx.client.updateOnRampPurchase({
55
- userId: para.getUserId(),
56
- walletId,
57
- purchaseId,
58
- updates: {
59
- fiat,
60
- fiatQuantity,
61
- assetQuantity,
62
- network,
63
- asset
64
- }
65
- });
66
- setOnRampPurchase(updated);
67
- return txHash;
68
- } catch (e) {
69
- throw new Error(((_c = e.response) == null ? void 0 : _c.data) || e.message);
70
- }
71
- });
72
- }
73
- export {
74
- offRampSend
75
- };