@getpara/react-common 0.1.0

package/dist/classes/ParaInternal.d.ts

@@ -0,0 +1,25 @@
+import ParaWeb from '@getpara/web-sdk';
+export declare class ParaInternal extends ParaWeb {
+    getSupportedCreateAuthMethods: () => Promise<Set<import("@getpara/web-sdk").AuthMethod>>;
+    isUsingExternalWallet: () => boolean;
+    getTransmissionKeyShares: ({ isForNewDevice }?: {
+        isForNewDevice?: boolean;
+    }) => Promise<any>;
+    userSetupAfterLogin: () => Promise<{
+        data: {
+            partnerId?: string;
+            needsWallet?: boolean;
+            sessionLookupId: string;
+        };
+    }>;
+    setLoginEncryptionKeyPair: (keyPair?: import("node-forge").pki.rsa.KeyPair) => Promise<void>;
+    getPortalURL: (partnerId?: string) => Promise<string>;
+    isProviderModalDisabled: () => boolean;
+    supportedAuthMethods: (auth: import("@getpara/user-management-client").Auth) => Promise<Set<import("@getpara/web-sdk").AuthMethod>>;
+    getUserBiometricLocationHints: () => Promise<import("@getpara/user-management-client").BiometricLocationHint[]>;
+    exitLoops: () => void;
+    exitLogin: () => void;
+    exitAccountCreation: () => void;
+    exitOAuth: () => void;
+    exitFarcaster: () => void;
+}

package/dist/classes/ParaInternal.js

@@ -0,0 +1,20 @@
+import ParaWeb from '@getpara/web-sdk';
+export class ParaInternal extends ParaWeb {
+    constructor() {
+        super(...arguments);
+        this.getSupportedCreateAuthMethods = super.getSupportedCreateAuthMethods;
+        this.isUsingExternalWallet = super.isUsingExternalWallet;
+        this.getTransmissionKeyShares = super.getTransmissionKeyShares;
+        this.userSetupAfterLogin = super.userSetupAfterLogin;
+        this.setLoginEncryptionKeyPair = super.setLoginEncryptionKeyPair;
+        this.getPortalURL = super.getPortalURL;
+        this.isProviderModalDisabled = super.isProviderModalDisabled;
+        this.supportedAuthMethods = super.supportedAuthMethods;
+        this.getUserBiometricLocationHints = super.getUserBiometricLocationHints;
+        this.exitLoops = super.exitLoops;
+        this.exitLogin = super.exitLogin;
+        this.exitAccountCreation = super.exitAccountCreation;
+        this.exitOAuth = super.exitOAuth;
+        this.exitFarcaster = super.exitFarcaster;
+    }
+}

package/dist/classes/index.d.ts

@@ -0,0 +1 @@
+export * from './ParaInternal.js';

package/dist/classes/index.js

@@ -0,0 +1 @@
+export * from './ParaInternal.js';

package/dist/components/HeroSpinner.d.ts

@@ -0,0 +1,9 @@
+import { IconType } from '@getpara/react-components';
+import { PropsWithChildren, ReactNode } from 'react';
+type Status = 'loading' | 'error' | 'inactive';
+export declare function HeroSpinner({ icon, status, text, }: PropsWithChildren<{
+    icon?: IconType;
+    status?: Status;
+    text?: ReactNode;
+}>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/HeroSpinner.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CpslIcon, CpslSpinner, CpslText } from '@getpara/react-components';
+import styled from 'styled-components';
+export function HeroSpinner({ icon, status = 'inactive', text, }) {
+    return (_jsxs(Root, { children: [_jsxs(Hero, { children: [_jsx(Spinner, { size: 150, barWidth: 9, variant: status === 'loading' ? 'default' : status }), icon && _jsx(CpslIcon, { icon: icon, size: "80px" })] }), _jsxs(Text, { status: status, children: [status === 'error' && _jsx(CpslIcon, { icon: "alertCircle", size: "16px", style: { stroke: 'currentColor' } }), _jsx(CpslText, { variant: "bodyM", weight: "semiBold", color: status === 'error' ? 'error' : 'primary', children: text })] })] }));
+}
+const Root = styled.div `
+  height: 276px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+`;
+const Hero = styled.div `
+  width: 150px;
+  height: 150px;
+  margin: 16px 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+`;
+const Text = styled.div `
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  color: ${({ status }) => (status === 'error' ? 'var(--cpsl-color-utility-red)' : 'auto')};
+`;
+const Spinner = styled(CpslSpinner) `
+  position: absolute;
+  width: 150px;
+  height: 150px;
+  top: 0;
+  left: 0;
+  right: 0;
+`;

package/dist/components/KnownDevices.d.ts

@@ -0,0 +1,8 @@
+import { BiometricHints } from '../utils/index.js';
+interface KnownDevicesProps {
+    hints: BiometricHints;
+    link?: string;
+    showCurrentDevice?: boolean;
+}
+export declare const KnownDevices: ({ hints, link, showCurrentDevice }: KnownDevicesProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/KnownDevices.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { CpslButton, CpslIcon, CpslText } from '@getpara/react-components';
+import styled from 'styled-components';
+import { CenteredColumnContainer, FullWidthFilledDisabledInput, CenteredText } from './common.js';
+import { QRCode } from './QRCode.js';
+import { getDeviceLogo, getDeviceModelName } from '../utils/index.js';
+import { useCopyToClipboard } from '../hooks/index.js';
+export const KnownDevices = ({ hints, link, showCurrentDevice }) => {
+    const [isCopied, copy] = useCopyToClipboard();
+    const handleCopy = () => {
+        copy(link);
+    };
+    return (_jsxs(Container, { children: [_jsx(CenteredText, { weight: "semiBold", children: "Continue with one of your other known devices" }), !!hints.formattedHints.length && (_jsx(DevicesContainer, { children: hints.formattedHints.map(hint => {
+                    var _a, _b, _c;
+                    return ((showCurrentDevice && hint.isKnownDevice) || !hint.isKnownDevice) && (_jsxs(DeviceListItem, { children: [_jsx(DeviceLogo, { icon: getDeviceLogo(hint.device.vendor, hint.isMobile) }), _jsx(CpslText, { weight: "medium", color: "contrast", children: (_b = (_a = getDeviceModelName(hint.device.model)) !== null && _a !== void 0 ? _a : hint.device.vendor) !== null && _b !== void 0 ? _b : hint.os.name }), (hint.browser || hint.passwordManager) && (_jsxs(_Fragment, { children: [_jsx(CpslText, { weight: "medium", color: "secondary", children: "using" }), _jsx(CpslText, { weight: "medium", color: "contrast", children: (_c = hint.passwordManager) !== null && _c !== void 0 ? _c : hint.browser.name })] }))] }, hint.key));
+                }) })), hints.hasMobileDevice ? (_jsx(QRCode, { link: link, icon: "paraIconQr" })) : (_jsxs(CenteredColumnContainer, { children: [_jsx(FullWidthFilledDisabledInput, { noAutoDisable: true, readonly: true, disabled: true, value: link, children: _jsx(CpslButton, { slot: "end", variant: "ghost", onClick: handleCopy, children: _jsx(CpslIcon, { icon: isCopied ? 'check' : 'copy' }) }) }), _jsx(CenteredText, { color: "secondary", variant: "bodyS", weight: "medium", children: "Navigate to this link using your other device" })] }))] }));
+};
+const Container = styled(CenteredColumnContainer) `
+  gap: 16px;
+`;
+const DevicesContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  background: var(--cpsl-color-background-4);
+  padding: 16px;
+  width: 100%;
+  border-radius: 16px;
+`;
+const DeviceListItem = styled.div `
+  display: flex;
+  gap: 4px;
+  align-items: center;
+`;
+const DeviceLogo = styled(CpslIcon) `
+  --icon-color: var(--cpsl-color-text-contrast);
+  --height: 16px;
+  --width: 16px;
+`;

package/dist/components/MoonPayEmbed.d.ts

@@ -0,0 +1,3 @@
+import { Props } from '../types/index.js';
+export declare const MoonPayEmbed: ({ para, isDark, isEmbedded, onRampConfig, onRampPurchase, setOnRampPurchase }: Props) => import("react/jsx-runtime").JSX.Element;
+export default MoonPayEmbed;

package/dist/components/MoonPayEmbed.js

@@ -0,0 +1,142 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { OnRampProvider, OnRampPurchaseStatus } from '@getpara/web-sdk';
+import { lazy, useCallback, useEffect, useMemo, useState } from 'react';
+import { getCurrencyCodes, reverseCurrencyLookup, offRampSend } from '../utils/index.js';
+import styled from 'styled-components';
+const MOONPAY_PUBLISHABLE_KEY = 'pk_live_EQva4LydtNDE0Rwd9X7SG9w58wqOzbux';
+const MOONPAY_PUBLISHABLE_KEY_TEST = 'pk_test_HYobzemmTBXxcSStVA4dSED6jT';
+export const MoonPayEmbed = ({ para, isDark, isEmbedded, onRampConfig, onRampPurchase, setOnRampPurchase }) => {
+    const [LazyMoonPayBuyWidget, setLazyMoonPayBuyWidget] = useState(null);
+    const [LazyMoonPaySellWidget, setLazyMoonPaySellWidget] = useState(null);
+    const [LazyMoonPayProvider, setLazyMoonPayProvider] = useState(null);
+    useEffect(() => {
+        const _LazyMoonPayBuyWidget = lazy(() => import('@moonpay/moonpay-react').then(mod => ({ default: mod.MoonPayBuyWidget })));
+        const _LazyMoonPaySellWidget = lazy(() => import('@moonpay/moonpay-react').then(mod => ({ default: mod.MoonPaySellWidget })));
+        const _LazyMoonPayProvider = lazy(() => import('@moonpay/moonpay-react').then(mod => ({ default: mod.MoonPayProvider })));
+        setLazyMoonPayBuyWidget(_LazyMoonPayBuyWidget);
+        setLazyMoonPaySellWidget(_LazyMoonPaySellWidget);
+        setLazyMoonPayProvider(_LazyMoonPayProvider);
+    }, []);
+    const apiKey = onRampPurchase.testMode ? MOONPAY_PUBLISHABLE_KEY_TEST : MOONPAY_PUBLISHABLE_KEY;
+    const onUrlSignatureRequested = useCallback((url) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!para.getUserId() || !onRampPurchase.walletType) {
+            throw new Error('missing required fields');
+        }
+        const res = yield para.ctx.client.signMoonPayUrl(para.getUserId(), {
+            url,
+            type: onRampPurchase.walletType,
+            cosmosPrefix: para.cosmosPrefix,
+            testMode: onRampPurchase.testMode,
+            walletId: onRampPurchase.walletId || undefined,
+            externalWalletAddress: onRampPurchase.externalWalletAddress || undefined,
+        });
+        return res.data.signature;
+    }), [onRampPurchase.walletId, onRampPurchase.walletType, para.cosmosPrefix, onRampPurchase.testMode, para]);
+    const { currencyCodes, defaultCurrencyCode } = useMemo(() => getCurrencyCodes(onRampConfig, {
+        provider: OnRampProvider.MOONPAY,
+        walletType: onRampPurchase.walletType,
+        purchaseType: onRampPurchase.type,
+    }), [onRampPurchase.walletType, onRampPurchase.type, onRampConfig.assetInfo, onRampConfig === null || onRampConfig === void 0 ? void 0 : onRampConfig.allowedAssets]);
+    const onTransactionCompleted = useCallback((payload) => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            const [network, asset] = reverseCurrencyLookup(onRampConfig.assetInfo, OnRampProvider.MOONPAY, payload.quoteCurrency.code);
+            const updated = yield para.ctx.client.updateOnRampPurchase({
+                userId: para.getUserId(),
+                walletId: onRampPurchase.walletId,
+                purchaseId: onRampPurchase.id,
+                externalWalletAddress: onRampPurchase.externalWalletAddress,
+                updates: {
+                    fiatQuantity: payload.baseCurrencyAmount.toString(),
+                    fiat: payload.baseCurrency.code,
+                    network,
+                    asset,
+                    assetQuantity: payload.quoteCurrencyAmount.toString(),
+                    status: OnRampPurchaseStatus.FINISHED,
+                },
+            });
+            setOnRampPurchase(updated);
+            if (!isEmbedded) {
+                setTimeout(() => {
+                    window.close();
+                }, 5000);
+            }
+        }
+        catch (e) {
+            console.error(e);
+        }
+    }), [onRampPurchase.walletId, onRampPurchase.id, onRampPurchase.externalWalletAddress, isEmbedded]);
+    const onInitiateDeposit = useCallback((payload) => __awaiter(void 0, void 0, void 0, function* () {
+        const txHash = yield offRampSend(para, onRampPurchase, setOnRampPurchase, {
+            assetQuantity: payload.cryptoCurrencyAmount,
+            fiatQuantity: payload.fiatCurrencyAmount || undefined,
+            fiat: payload.fiatCurrency.code.toUpperCase(),
+            destinationAddress: payload.depositWalletAddress,
+            contractAddress: payload.cryptoCurrency.contractAddress,
+            chainId: payload.cryptoCurrency.chainId,
+        });
+        return { depositId: txHash, cancelTransactionOnError: false };
+    }), [
+        para,
+        onRampPurchase.id,
+        onRampPurchase.testMode,
+        onRampPurchase.walletId,
+        onRampPurchase.walletType,
+        setOnRampPurchase,
+    ]);
+    const embed = useMemo(() => {
+        if (!LazyMoonPayBuyWidget || !LazyMoonPaySellWidget) {
+            return null;
+        }
+        const walletAddresses = currencyCodes.reduce((acc, code) => {
+            return Object.assign(Object.assign({}, acc), { [code.toLowerCase()]: onRampPurchase.address });
+        }, {});
+        return onRampPurchase.type === 'BUY' ? (_jsx(LazyMoonPayBuyWidget, { variant: "embedded", baseCurrencyCode: onRampPurchase.fiat, baseCurrencyAmount: onRampPurchase.fiatQuantity, showOnlyCurrencies: currencyCodes.join(','), defaultCurrencyCode: defaultCurrencyCode, walletAddresses: JSON.stringify(walletAddresses), visible: true, theme: isDark ? 'dark' : 'light', style: {
+                height: '100%',
+                width: '100%',
+                border: 'none',
+                borderRadius: 0,
+                margin: 0,
+            }, onTransactionCompleted: onTransactionCompleted, onUrlSignatureRequested: onUrlSignatureRequested })) : (_jsx(LazyMoonPaySellWidget, { variant: "embedded", refundWalletAddresses: JSON.stringify(walletAddresses), visible: true, theme: isDark ? 'dark' : 'light', style: {
+                height: '100%',
+                width: '100%',
+                border: 'none',
+                borderRadius: 0,
+                margin: 0,
+            }, showOnlyCurrencies: currencyCodes.join(','), defaultCurrencyCode: currencyCodes[0], onInitiateDeposit: onInitiateDeposit, onTransactionCompleted: onTransactionCompleted, onUrlSignatureRequested: onUrlSignatureRequested }));
+    }, [
+        onRampPurchase.type,
+        onRampPurchase.address,
+        onRampPurchase.walletId,
+        onRampPurchase.walletType,
+        defaultCurrencyCode,
+        currencyCodes,
+        onInitiateDeposit,
+        onTransactionCompleted,
+        onUrlSignatureRequested,
+        isDark,
+        LazyMoonPayBuyWidget,
+        LazyMoonPaySellWidget,
+    ]);
+    if (!LazyMoonPayProvider) {
+        return null;
+    }
+    return (_jsx(Container, { isEmbedded: isEmbedded, children: _jsx(LazyMoonPayProvider, { apiKey: apiKey, debug: onRampPurchase.testMode, children: embed }) }));
+};
+export default MoonPayEmbed;
+const Container = styled.div `
+  width: ${({ isEmbedded }) => (isEmbedded ? '100%' : '100vw')};
+  height: ${({ isEmbedded }) => (isEmbedded ? '640px' : '100vh')};
+
+  iframe {
+    border: 0 !important;
+  }
+`;

package/dist/components/QRCode.d.ts

@@ -0,0 +1,10 @@
+import { IconType } from '@getpara/react-components';
+interface QRCodeProps {
+    link?: string;
+    icon?: IconType;
+    imageSrc?: string;
+    qrSize?: number;
+    spinnerSize?: number;
+}
+export declare const QRCode: ({ link, imageSrc, icon, qrSize, spinnerSize }: QRCodeProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/QRCode.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CpslButton, CpslIcon, CpslQrCode, CpslSpinner, CpslText } from '@getpara/react-components';
+import styled from 'styled-components';
+import { useCopyToClipboard } from '../hooks/index.js';
+import { isMobile } from '@getpara/web-sdk';
+export const QRCode = ({ link, imageSrc, icon, qrSize = 202, spinnerSize = 60 }) => {
+    const [isCopied, copy] = useCopyToClipboard();
+    const isMobileScreen = isMobile();
+    const handleCopy = () => {
+        copy(link);
+    };
+    return (_jsxs(QRContainer, { "$isMobile": isMobileScreen, children: [isMobileScreen && (_jsxs(MobileCopyButton, { fullWidth: true, onClick: handleCopy, children: [_jsx(CopyIcon, { slot: "start", icon: isCopied ? 'check' : 'copy' }), _jsx(CpslText, { variant: "bodyS", children: isCopied ? 'Copied' : 'Copy Link Instead' })] })), !link ? (_jsx(LoadingContainer, { "$size": qrSize, children: _jsx(CpslSpinner, { size: spinnerSize }) })) : (_jsx(StyledQRCode, { url: link, size: qrSize, icon: icon, imageSrc: imageSrc })), !isMobileScreen && (_jsxs(CopyButton, { size: "small", onClick: handleCopy, children: [_jsx(CopyIcon, { slot: "start", icon: isCopied ? 'check' : 'copy' }), _jsx(CpslText, { variant: "body2XS", children: isCopied ? 'Copied' : 'Copy Link Instead' })] }))] }));
+};
+const QRContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid;
+  border-color: var(--cpsl-color-background-16);
+  border-radius: 16px;
+  background-color: white;
+  overflow: hidden;
+  padding-bottom: ${({ $isMobile }) => ($isMobile ? '0px' : '16px')};
+  padding-top: ${({ $isMobile }) => ($isMobile ? '16px' : '0px')};
+`;
+const StyledQRCode = styled(CpslQrCode) `
+  --qr-box-shadow: none;
+  --qr-border-radius: 0px;
+`;
+const CopyButton = styled(CpslButton) `
+  --button-primary-color: var(--cpsl-color-text-contrast);
+  --button-primary-background-color: var(--cpsl-color-background-4);
+
+  --button-primary-hover-color: var(--cpsl-color-text-contrast);
+  --button-primary-hover-background-color: var(--cpsl-color-background-16);
+
+  --button-primary-active-color: var(--cpsl-color-text-contrast);
+  --button-primary-active-background-color: var(--cpsl-color-background-4);
+
+  --button-padding-start: 8px;
+  --button-padding-end: 8px;
+  --button-padding-top: 2px;
+  --button-padding-bottom: 2px;
+
+  --button-border-radius: 1000px;
+`;
+const MobileCopyButton = styled(CopyButton) `
+  --button-padding-top: 4px;
+  --button-padding-bottom: 4px;
+
+  padding: 0px 12px;
+`;
+const CopyIcon = styled(CpslIcon) `
+  --width: 16px;
+  --height: 16px;
+  --icon-color: var(--cpsl-color-text-contrast);
+`;
+const LoadingContainer = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: ${({ $size }) => `${$size}px`};
+  width: ${({ $size }) => `${$size}px`};
+`;

package/dist/components/RampEmbed.d.ts

@@ -0,0 +1,4 @@
+import { Props } from '../types/index.js';
+export declare const RampEmbed: ({ para, appName, onRampConfig, onRampPurchase, isEmbedded, apiKey, onClose, setOnRampPurchase, }: Props & {
+    apiKey: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/RampEmbed.js

@@ -0,0 +1,95 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { RampInstantSDK } from '@ramp-network/ramp-instant-sdk';
+import { Network, OnRampAsset, OnRampProvider, getPortalBaseURL } from '@getpara/web-sdk';
+import { getChainId, getContractAddressFromAsset, getCurrencyCodes, reverseCurrencyLookup, offRampSend, } from '../utils/index.js';
+const TEST_MODE_FORBIDDEN = ['ETH_ETH', 'ETH_USDC'];
+export const RampEmbed = ({ para, appName, onRampConfig, onRampPurchase, isEmbedded, apiKey, onClose, setOnRampPurchase, }) => {
+    const { currencyCodes } = getCurrencyCodes(onRampConfig, {
+        provider: OnRampProvider.RAMP,
+        purchaseType: onRampPurchase.type,
+        walletType: onRampPurchase.walletType,
+    });
+    const isMounted = useRef(false);
+    useEffect(() => {
+        if (!isMounted.current) {
+            try {
+                const widget = new RampInstantSDK({
+                    hostAppName: appName,
+                    swapAsset: currencyCodes.filter(code => !onRampPurchase.testMode || !TEST_MODE_FORBIDDEN.includes(code)).join(','),
+                    fiatValue: onRampPurchase.fiatQuantity,
+                    fiatCurrency: onRampPurchase.fiat,
+                    hostLogoUrl: `${getPortalBaseURL(para.ctx)}/wordmark_black.svg`,
+                    hostApiKey: apiKey,
+                    userAddress: onRampPurchase.address,
+                    userEmailAddress: para.getEmail(),
+                    url: (onRampPurchase === null || onRampPurchase === void 0 ? void 0 : onRampPurchase.testMode) ? 'https://app.demo.ramp.network' : 'https://app.ramp.network',
+                    enabledFlows: [onRampPurchase.type === 'BUY' ? 'ONRAMP' : 'OFFRAMP'],
+                    useSendCryptoCallback: true,
+                    variant: 'embedded-mobile',
+                    containerNode: document.getElementById('ramp-container'),
+                })
+                    .on('PURCHASE_CREATED', (e) => __awaiter(void 0, void 0, void 0, function* () {
+                    const p = e.payload.purchase;
+                    const [network, asset] = onRampPurchase.testMode
+                        ? [Network.ETHEREUM, OnRampAsset.ETHEREUM]
+                        : reverseCurrencyLookup(onRampConfig.assetInfo, OnRampProvider.RAMP, p.asset.symbol) || [];
+                    const updated = yield para.ctx.client.updateOnRampPurchase({
+                        userId: para.getUserId(),
+                        walletId: onRampPurchase.walletId,
+                        externalWalletAddress: onRampPurchase.externalWalletAddress,
+                        purchaseId: onRampPurchase.id,
+                        updates: {
+                            providerKey: p.id,
+                            fiatQuantity: p.fiatValue,
+                            fiat: p.fiatCurrency,
+                            assetQuantity: p.cryptoAmount,
+                            asset,
+                            network,
+                        },
+                    });
+                    setOnRampPurchase(updated);
+                }))
+                    .on('WIDGET_CLOSE', () => __awaiter(void 0, void 0, void 0, function* () {
+                    onClose === null || onClose === void 0 ? void 0 : onClose();
+                    if (!isEmbedded) {
+                        setTimeout(() => {
+                            window.close();
+                        }, 5000);
+                    }
+                }))
+                    .onSendCrypto((assetInfo, amount, address) => __awaiter(void 0, void 0, void 0, function* () {
+                    try {
+                        const [network, asset] = reverseCurrencyLookup(onRampConfig.assetInfo, OnRampProvider.RAMP, assetInfo.symbol);
+                        const txHash = yield offRampSend(para, onRampPurchase, setOnRampPurchase, {
+                            assetQuantity: amount,
+                            destinationAddress: address,
+                            contractAddress: getContractAddressFromAsset(network, asset),
+                            chainId: getChainId(network),
+                            testMode: onRampPurchase.testMode,
+                        });
+                        return { txHash };
+                    }
+                    catch (e) {
+                        console.error(e);
+                    }
+                }));
+                widget.show();
+                isMounted.current = true;
+            }
+            catch (e) {
+                console.error(e);
+            }
+        }
+    }, []);
+    return _jsx("div", { id: "ramp-container", style: { minWidth: '320px', width: '100%', height: '767px' } });
+};

package/dist/components/StripeEmbed.d.ts

@@ -0,0 +1,4 @@
+import { Props } from '../types/index.js';
+export declare const STRIPE_PUBLISHABLE_KEY = "pk_live_51MvquNGrzDeP5yP9EgVSMBPQbrbg0oHDjPIIXypePd0jzOFjbadyfO7wBKLHhUtbKIUiEUVC3YYcTJyAmJ8xA7JE00T2UDfYKz";
+export declare const STRIPE_PUBLISHABLE_KEY_TEST = "pk_test_51Q2z5k2epVn9Kq0ZSbUzuetKb4azH6E6UPcvWmjRxvHmxLAJbIK0pwDbPQo63W9OyDng337ntNu3ZXx3AJ7MhFmR00XgfRmPgP";
+export declare const StripeEmbed: ({ para, isDark, isEmbedded, onRampPurchase, setOnRampPurchase }: Props) => import("react/jsx-runtime").JSX.Element;

package/dist/components/StripeEmbed.js

@@ -0,0 +1,128 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { loadStripeOnramp } from '@stripe/crypto';
+import { Network, OnRampAsset, OnRampProvider, OnRampPurchaseStatus } from '@getpara/web-sdk';
+import { CpslSpinner } from '@getpara/react-components';
+import { SpinnerContainer } from './common.js';
+import styled from 'styled-components';
+export const STRIPE_PUBLISHABLE_KEY = 'pk_live_51MvquNGrzDeP5yP9EgVSMBPQbrbg0oHDjPIIXypePd0jzOFjbadyfO7wBKLHhUtbKIUiEUVC3YYcTJyAmJ8xA7JE00T2UDfYKz';
+export const STRIPE_PUBLISHABLE_KEY_TEST = 'pk_test_51Q2z5k2epVn9Kq0ZSbUzuetKb4azH6E6UPcvWmjRxvHmxLAJbIK0pwDbPQo63W9OyDng337ntNu3ZXx3AJ7MhFmR00XgfRmPgP';
+const AssetCodes = {
+    eth: OnRampAsset.ETHEREUM,
+    matic: OnRampAsset.POLYGON,
+    sol: OnRampAsset.SOLANA,
+    usdc: OnRampAsset.USDC,
+};
+const NetworkCodes = {
+    base: Network.BASE,
+    ethereum: Network.ETHEREUM,
+    polygon: Network.POLYGON,
+    solana: Network.SOLANA,
+};
+const CryptoElementsContext = React.createContext(null);
+CryptoElementsContext.displayName = 'CryptoElementsContext';
+const useOnrampSessionListener = (type, session, callback) => {
+    React.useEffect(() => {
+        if (session && callback) {
+            const listener = e => callback(e.payload);
+            session.addEventListener(type, listener);
+            return () => {
+                session.removeEventListener(type, listener);
+            };
+        }
+        return () => { };
+    }, [session, callback, type]);
+};
+export const StripeEmbed = ({ para, isDark, isEmbedded, onRampPurchase, setOnRampPurchase }) => {
+    const [isReady, setIsReady] = useState(false);
+    const isStripeEmbed = useMemo(() => onRampPurchase.provider === OnRampProvider.STRIPE, [onRampPurchase]);
+    const clientSecret = useMemo(() => ((onRampPurchase === null || onRampPurchase === void 0 ? void 0 : onRampPurchase.provider) === OnRampProvider.STRIPE ? onRampPurchase === null || onRampPurchase === void 0 ? void 0 : onRampPurchase.providerKey : undefined), [onRampPurchase === null || onRampPurchase === void 0 ? void 0 : onRampPurchase.provider, onRampPurchase === null || onRampPurchase === void 0 ? void 0 : onRampPurchase.providerKey]);
+    const [stripeOnRamp, setStripeOnRamp] = useState();
+    const onrampElementRef = React.useRef(null);
+    const [session, setSession] = React.useState();
+    useEffect(() => {
+        const containerRef = onrampElementRef.current;
+        if (containerRef) {
+            // NB: ideally we want to be able to hot swap/update onramp iframe
+            // This currently results a flash if one needs to mint a new session when they need to udpate fixed transaction details
+            containerRef.innerHTML = '';
+            if (clientSecret && stripeOnRamp) {
+                setSession(stripeOnRamp
+                    .createSession({
+                    clientSecret,
+                    appearance: { theme: isDark ? 'dark' : 'light' },
+                })
+                    .mount(containerRef));
+            }
+        }
+    }, [clientSecret, stripeOnRamp]);
+    useEffect(() => {
+        loadStripeOnramp((onRampPurchase === null || onRampPurchase === void 0 ? void 0 : onRampPurchase.testMode) ? STRIPE_PUBLISHABLE_KEY_TEST : STRIPE_PUBLISHABLE_KEY).then(setStripeOnRamp);
+    }, []);
+    const onReady = useCallback(() => {
+        setIsReady(true);
+    }, []);
+    const onSessionChange = useCallback((_a) => __awaiter(void 0, [_a], void 0, function* ({ session }) {
+        if (!isStripeEmbed) {
+            return;
+        }
+        switch (session.status) {
+            case 'fulfillment_processing':
+            case 'fulfillment_complete':
+                const updatedPurchase = yield para.ctx.client.updateOnRampPurchase({
+                    userId: para.getUserId(),
+                    walletId: onRampPurchase.walletId,
+                    externalWalletAddress: onRampPurchase.externalWalletAddress,
+                    purchaseId: onRampPurchase.id,
+                    updates: {
+                        status: OnRampPurchaseStatus.FINISHED,
+                        fiatQuantity: session.quote.source_amount,
+                        fiat: session.quote.source_currency.asset_code,
+                        network: NetworkCodes[session.quote.destination_currency.currency_network],
+                        asset: AssetCodes[session.quote.destination_currency.asset_code],
+                        assetQuantity: session.quote.destination_amount,
+                        providerKey: null,
+                    },
+                });
+                setOnRampPurchase(updatedPurchase);
+                if (!isEmbedded) {
+                    setTimeout(() => {
+                        window.close();
+                    }, 5000);
+                }
+                break;
+            default:
+                break;
+        }
+    }), [isStripeEmbed]);
+    useOnrampSessionListener('onramp_ui_loaded', session, onReady);
+    useOnrampSessionListener('onramp_session_updated', session, onSessionChange);
+    return (_jsxs(OuterContainer, { children: [_jsx(Container, { isReady: isReady, ref: onrampElementRef }), !isReady && (_jsx(SpinnerContainer, { style: { width: '100%', height: '100%', flex: 1 }, children: _jsx(CpslSpinner, { size: 100 }) }))] }));
+};
+const OuterContainer = styled.div `
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+`;
+const Container = styled.div `
+  height: 100%;
+  width: 100%;
+  display: ${({ isReady }) => (isReady ? 'flex' : 'none')};
+  justify-content: center;
+
+  & > iframe {
+    height: 100%;
+  }
+`;

package/dist/components/UserIdentifier.d.ts

@@ -0,0 +1,2 @@
+import { ModalAuthInfo } from '../types/index.js';
+export declare const UserIdentifier: ({ identifier, authType, displayName, pfpUrl }: ModalAuthInfo) => import("react/jsx-runtime").JSX.Element;