@getpara/react-common 1.2.0 → 1.3.0

package/dist/classes/ParaInternal.js

@@ -1,20 +0,0 @@
-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.js

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

package/dist/components/HeroSpinner.js

@@ -1,37 +0,0 @@
-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.js

@@ -1,39 +0,0 @@
-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.js

@@ -1,142 +0,0 @@
-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.js

@@ -1,65 +0,0 @@
-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.js

@@ -1,95 +0,0 @@
-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.js

@@ -1,128 +0,0 @@
-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.js

@@ -1,65 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CpslAvatar, CpslIcon, CpslText } from '@getpara/react-components';
-import parsePhoneNumberFromString from 'libphonenumber-js';
-import styled from 'styled-components';
-function defaultDisplayName(authType, identifier) {
-    switch (authType) {
-        case 'email':
-            return identifier.toLowerCase();
-        case 'phone':
-            const parsed = parsePhoneNumberFromString(identifier);
-            return `+${parsed.countryCallingCode} ${parsed.formatNational()}`;
-        case 'farcaster':
-            return `@${identifier}`;
-        case 'telegram':
-            return `Telegram User @${identifier}`;
-        default:
-            return null;
-    }
-}
-export const UserIdentifier = ({ identifier, authType, displayName, pfpUrl }) => {
-    let icon;
-    switch (authType) {
-        case 'email':
-            icon = 'mail';
-            break;
-        case 'phone':
-            icon = 'phone';
-            break;
-        case 'farcaster':
-            icon = 'farcasterBrand';
-            break;
-        case 'telegram':
-            icon = 'telegramBrand';
-            break;
-    }
-    return (_jsxs(Container, { children: [_jsx(IconContainer, { children: pfpUrl ? (_jsx(Avatar, { src: pfpUrl, size: "20px" })) : (_jsx(Icon, { icon: icon, size: authType === 'telegram' ? '20px' : '13px' })) }), _jsx(IdentifierText, { variant: "bodyS", weight: "medium", children: displayName || defaultDisplayName(authType, identifier) })] }));
-};
-const Container = styled.div `
-  padding: 8px 12px 8px 8px;
-  border-radius: 1000px;
-  background-color: var(--cpsl-color-background-4);
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 4px;
-`;
-const IdentifierText = styled(CpslText) `
-  --color-override: var(--cpsl-color-background-96);
-`;
-const IconContainer = styled.div `
-  display: flex;
-  background: var(--cpsl-color-background-0);
-  align-items: center;
-  justify-content: center;
-  border-radius: 1000px;
-  width: 20px;
-  height: 20px;
-`;
-const Icon = styled(CpslIcon) `
-  --icon-color: var(--cpsl-color-text-primary);
-`;
-const Avatar = styled(CpslAvatar) `
-  --container-border-width: 0;
-  --container-padding: 0;
-`;

package/dist/components/common.js

@@ -1,44 +0,0 @@
-import { CpslButton, CpslInput, CpslText } from '@getpara/react-components';
-import styled from 'styled-components';
-export const SpinnerContainer = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-export const CenteredColumnContainer = styled.div `
-  width: 100%;
-  height: 100%;
-  align-self: center;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-`;
-export const FilledDisabledInput = styled(CpslInput) `
-  --container-border-color: var(--cpsl-color-input-border-placeholder);
-  --container-background-color: var(--cpsl-color-background-0);
-  --input-background-color: transparent;
-  --input-font-weight: 500;
-  --input-color: var(--cpsl-color-text-secondary) !important;
-`;
-export const FullWidthFilledDisabledInput = styled(FilledDisabledInput) `
-  width: 100%;
-`;
-export const CenteredText = styled(CpslText) `
-  width: 100%;
-  text-align: center;
-`;
-export const HeaderButton = styled(CpslButton) `
-  flex: 0;
-  --button-padding-top: 2px;
-  --button-padding-bottom: 2px;
-  --button-padding-start: 2px;
-  --button-padding-end: 2px;
-  --button-border-radius: 1000px;
-  --button-background-color: var(--cpsl-color-background-4);
-
-  cpsl-icon {
-    --height: 20px;
-    --width: 20px;
-  }
-`;

package/dist/components/index.js

@@ -1,8 +0,0 @@
-export * from './MoonPayEmbed.js';
-export * from './RampEmbed.js';
-export * from './StripeEmbed.js';
-export * from './common.js';
-export * from './HeroSpinner.js';
-export * from './KnownDevices.js';
-export * from './QRCode.js';
-export * from './UserIdentifier.js';