@openfort/react 0.3.2 → 1.0.1

package/build/components/Pages/Providers/index.js

@@ -0,0 +1,157 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { OAuthProvider, ChainTypeEnum } from '@openfort/openfort-js';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useMemo, useEffect } from 'react';
+import { PhoneInput } from 'react-international-phone';
+import { GuestIcon, PhoneIcon, EmailIcon } from '../../../assets/icons.js';
+import Logos, { providersLogos, OtherSocials } from '../../../assets/logos.js';
+import { useEthereumEmbeddedWallet } from '../../../ethereum/hooks/useEthereumEmbeddedWallet.js';
+import { useProviders } from '../../../hooks/openfort/useProviders.js';
+import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
+import { useSolanaEmbeddedWallet } from '../../../solana/hooks/useSolanaEmbeddedWallet.js';
+import { logger } from '../../../utils/logger.js';
+import { isValidEmail } from '../../../utils/validation.js';
+import Button from '../../Common/Button/index.js';
+import Loader from '../../Common/Loading/index.js';
+import { ModalHeading } from '../../Common/Modal/styles.js';
+import PoweredByFooter from '../../Common/PoweredByFooter/index.js';
+import { UIAuthProvider, routes, socialProviders } from '../../Openfort/types.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { PageContent } from '../../PageContent/index.js';
+import { ProvidersButton, ProviderInputInner, EmailInnerButton, ProviderIcon, ProviderLabel } from './styles.js';
+
+const ProviderButtonBase = ({ children, icon, onClick, disabled }) => {
+    return (jsx(ProvidersButton, { children: jsxs(Button, { onClick: onClick, disabled: disabled, children: [jsx(ProviderLabel, { children: children }), jsx(ProviderIcon, { children: icon })] }) }));
+};
+const GuestButton = () => {
+    const { setRoute } = useOpenfort();
+    const handleClick = () => {
+        setRoute(routes.CREATE_GUEST_USER);
+    };
+    return (jsx(ProviderButtonBase, { onClick: handleClick, icon: jsx(GuestIcon, {}), children: "Guest" }));
+};
+const WalletButton = ({ disabled }) => {
+    const { setRoute } = useOpenfort();
+    const { user } = useOpenfortCore();
+    return (jsx(ProviderButtonBase, { onClick: () => setRoute({ route: routes.CONNECTORS, connectType: user ? 'link' : 'connect' }), icon: jsx(Logos.OtherWallets, {}), disabled: disabled, children: "Wallet" }));
+};
+const EmailButton = ({ handleSubmit }) => {
+    const { emailInput, setEmailInput } = useOpenfort();
+    const isValidEmail$1 = useMemo(() => {
+        return isValidEmail(emailInput);
+    }, [emailInput]);
+    return (jsx(ProvidersButton, { children: jsx("form", { onSubmit: (e) => {
+                e.preventDefault();
+                if (isValidEmail$1)
+                    handleSubmit();
+            }, noValidate: true, children: jsxs(ProviderInputInner, { children: [jsx("input", { value: emailInput, onChange: (e) => setEmailInput(e.target.value), type: "email", placeholder: "Enter your email", formNoValidate: true }), jsx("div", { style: { position: 'relative' }, children: jsx(AnimatePresence, { initial: false, children: isValidEmail$1 ? (jsx(motion.div, { initial: { x: -5, opacity: 0 }, animate: { x: 0, opacity: 1 }, exit: { x: -5, opacity: 0, position: 'absolute' }, transition: { duration: 0.2, ease: [0.25, 1, 0.5, 1] }, children: jsx(EmailInnerButton, { type: "submit", "aria-label": "Submit email", children: jsx(ProviderIcon, { children: jsxs("svg", { width: "13", height: "12", viewBox: "0 0 13 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("title", { children: "Submit email" }), jsx("line", { stroke: "currentColor", x1: "1", y1: "6", x2: "12", y2: "6", strokeWidth: "1", strokeLinecap: "round" }), jsx("path", { stroke: "currentColor", d: "M7.51431 1.5L11.757 5.74264M7.5 10.4858L11.7426 6.24314", strokeWidth: "1", strokeLinecap: "round" })] }) }) }) }, emailInput ? 'enabled' : 'disabled')) : (jsx(motion.div, { initial: { x: 5, opacity: 0 }, animate: { x: 0, opacity: 1 }, exit: { x: 5, opacity: 0, position: 'absolute' }, transition: { duration: 0.2, ease: [0.25, 1, 0.5, 1] }, children: jsx(ProviderIcon, { children: jsx(EmailIcon, {}) }) })) }) })] }) }) }));
+};
+const EmailPasswordButton = () => {
+    const { setRoute } = useOpenfort();
+    const { user } = useOpenfortCore();
+    const handleSubmit = () => {
+        setRoute(user ? routes.LINK_EMAIL : routes.EMAIL_LOGIN);
+    };
+    return jsx(EmailButton, { handleSubmit: handleSubmit });
+};
+const EmailOTPButton = () => {
+    const { setRoute } = useOpenfort();
+    const handleSubmit = () => {
+        setRoute(routes.EMAIL_OTP);
+    };
+    return jsx(EmailButton, { handleSubmit: handleSubmit });
+};
+const PhoneButton = () => {
+    const { uiConfig, phoneInput, setPhoneInput, setRoute } = useOpenfort();
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        setRoute(routes.PHONE_OTP);
+    };
+    const hasValue = phoneInput.length > 5;
+    // && !defaultCountries.some((country: CountryData) => phoneInput.replace('+', '') === country[2])
+    return (jsx(ProvidersButton, { children: jsx("form", { onSubmit: handleSubmit, noValidate: true, children: jsxs(ProviderInputInner, { children: [jsx("div", { style: { width: '100%' }, children: jsx(PhoneInput, { value: phoneInput, onChange: (phone) => setPhoneInput(phone), hideDropdown: false, placeholder: "Enter your phone", style: {
+                                '--react-international-phone-height': '56px',
+                                '--react-international-phone-text-color': 'var(--ck-body-color)',
+                                '--react-international-phone-background-color': 'var(--ck-secondary-button-background)',
+                                '--react-international-phone-country-selector-background-color': 'var(--ck-secondary-button-background)',
+                                '--react-international-phone-selected-dropdown-item-background-color': 'var(--ck-secondary-button-hover-background)',
+                                '--react-international-phone-country-selector-background-color-hover': 'var(--ck-secondary-button-hover-background)',
+                                '--react-international-phone-font-size': '16px',
+                                paddingLeft: '4px',
+                            }, ...uiConfig.phoneConfig }) }), jsx("div", { style: { position: 'relative' }, children: jsx(AnimatePresence, { initial: false, children: hasValue ? (jsx(EmailInnerButton, { initial: { x: -5, opacity: 0 }, animate: { x: 0, opacity: 1 }, exit: { x: -5, opacity: 0, position: 'absolute' }, transition: { duration: 0.2, ease: [0.25, 1, 0.5, 1] }, type: "submit", "aria-label": "Submit email", children: jsx(ProviderIcon, { children: jsxs("svg", { width: "13", height: "12", viewBox: "0 0 13 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("title", { children: "Submit email" }), jsx("line", { stroke: "currentColor", x1: "1", y1: "6", x2: "12", y2: "6", strokeWidth: "1", strokeLinecap: "round" }), jsx("path", { stroke: "currentColor", d: "M7.51431 1.5L11.757 5.74264M7.5 10.4858L11.7426 6.24314", strokeWidth: "1", strokeLinecap: "round" })] }) }) }, phoneInput ? 'enabled' : 'disabled')) : (jsx(motion.div, { initial: { x: 5, opacity: 0 }, animate: { x: 0, opacity: 1 }, exit: { x: 5, opacity: 0, position: 'absolute' }, transition: { duration: 0.2, ease: [0.25, 1, 0.5, 1] }, children: jsx(ProviderIcon, { children: jsx(PhoneIcon, {}) }) })) }) })] }) }) }));
+};
+const AuthProviderButton = ({ provider, title = `${provider} login`, icon, }) => {
+    const { setRoute, setConnector } = useOpenfort();
+    const handleClick = () => {
+        setRoute({ route: routes.CONNECT, connectType: 'linkIfUserConnectIfNoUser' });
+        setConnector({ id: provider, type: 'oauth' });
+    };
+    return (jsx(ProviderButtonBase, { onClick: handleClick, icon: icon, children: title }));
+};
+const authProviderToOAuthProviderMap = {
+    guest: jsx(GuestButton, {}),
+    wallet: null,
+    emailPassword: jsx(EmailPasswordButton, {}),
+    emailOtp: jsx(EmailOTPButton, {}),
+    phone: jsx(PhoneButton, {}),
+    google: (jsx(AuthProviderButton, { provider: OAuthProvider.GOOGLE, title: "Google", icon: providersLogos[UIAuthProvider.GOOGLE] })),
+    twitter: (jsx(AuthProviderButton, { provider: OAuthProvider.TWITTER, title: "X", icon: providersLogos[UIAuthProvider.TWITTER] })),
+    facebook: (jsx(AuthProviderButton, { provider: OAuthProvider.FACEBOOK, title: "Facebook", icon: providersLogos[UIAuthProvider.FACEBOOK] })),
+    discord: (jsx(AuthProviderButton, { provider: OAuthProvider.DISCORD, title: "Discord", icon: providersLogos[UIAuthProvider.DISCORD] })),
+    apple: (jsx(AuthProviderButton, { provider: OAuthProvider.APPLE, title: "Apple", icon: providersLogos[UIAuthProvider.APPLE] })),
+};
+const ProviderButton = ({ provider }) => {
+    const { user, chainType } = useOpenfortCore();
+    if (user && (provider === UIAuthProvider.EMAIL_OTP || provider === UIAuthProvider.EMAIL_PASSWORD)) {
+        return jsx(EmailPasswordButton, {});
+    }
+    if (provider === UIAuthProvider.WALLET) {
+        return jsx(WalletButton, { disabled: chainType === ChainTypeEnum.SVM });
+    }
+    return authProviderToOAuthProviderMap[provider] || null;
+};
+// This accounts for the case where the user has an address but no user, which can happen if the user has not signed up yet, but logged in with a wallet
+const AddressButNoUserCase = () => {
+    const { updateUser } = useOpenfortCore();
+    const { logout } = useOpenfortCore();
+    useEffect(() => {
+        updateUser()
+            .then((user) => {
+            if (!user)
+                logout();
+        })
+            .catch(() => {
+            logger.error('Failed to update user');
+        });
+    }, [updateUser, logout]);
+    return (jsx(PageContent, { children: jsx(Loader, { header: "Updating user" }) }));
+};
+const SocialProvidersButton = ({ thereAreSocialsAlready }) => {
+    const { setRoute } = useOpenfort();
+    return (jsx(ProviderButtonBase, { onClick: () => setRoute(routes.SOCIAL_PROVIDERS), icon: jsx(OtherSocials, {}), children: thereAreSocialsAlready ? 'Other socials' : 'Social providers' }));
+};
+const Providers = () => {
+    const { user } = useOpenfortCore();
+    const { previousRoute } = useOpenfort();
+    const { mainProviders, hasExcessProviders } = useProviders();
+    const { chainType } = useOpenfortCore();
+    // Use chain-specific hooks
+    const ethereumWallet = useEthereumEmbeddedWallet();
+    const solanaWallet = useSolanaEmbeddedWallet();
+    const wallet = chainType === ChainTypeEnum.EVM ? ethereumWallet : solanaWallet;
+    const isConnected = wallet.status === 'connected';
+    const address = isConnected ? wallet.address : undefined;
+    const onBack = useMemo(() => {
+        if (user) {
+            return 'back';
+        }
+        return null;
+    }, [previousRoute, user]);
+    if (address && !user) {
+        return jsx(AddressButNoUserCase, {});
+    }
+    return (jsxs(PageContent, { onBack: onBack, children: [jsx(ModalHeading, { children: user ? 'Link auth' : 'Connect' }), mainProviders.map((auth) => (jsx(ProviderButton, { provider: auth }, auth))), hasExcessProviders && (jsx(SocialProvidersButton, { thereAreSocialsAlready: !!mainProviders.find((p) => socialProviders.includes(p)) })), jsx(PoweredByFooter, { showDisclaimer: true })] }));
+};
+
+export { ProviderButton, Providers as default };
+//# sourceMappingURL=index.js.map

package/build/components/Pages/Providers/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/Providers/styles.js

@@ -0,0 +1,156 @@
+import { motion } from 'framer-motion';
+import styled from '../../../styles/styled/index.js';
+import { ButtonContainer, ButtonContainerInner, InnerContainer } from '../../Common/Button/styles.js';
+
+const ProviderInputInner = styled.div `
+  // Styles from react-international-phone (imported here to avoid importing the whole CSS file for nextjs compatibility)
+  .react-international-phone-country-selector{position:relative}.react-international-phone-country-selector-button{display:flex;height:var(--react-international-phone-height, 36px);box-sizing:border-box;align-items:center;justify-content:center;padding:0;border:1px solid var(--react-international-phone-country-selector-border-color, var(--react-international-phone-border-color, gainsboro));margin:0;appearance:button;-webkit-appearance:button;background-color:var(--react-international-phone-country-selector-background-color, var(--react-international-phone-background-color, white));cursor:pointer;text-transform:none;user-select:none}.react-international-phone-country-selector-button:hover{background-color:var(--react-international-phone-country-selector-background-color-hover, whitesmoke)}.react-international-phone-country-selector-button--hide-dropdown{cursor:auto}.react-international-phone-country-selector-button--hide-dropdown:hover{background-color:transparent}.react-international-phone-country-selector-button__button-content{display:flex;align-items:center;justify-content:center}.react-international-phone-country-selector-button__flag-emoji{margin:0 4px}.react-international-phone-country-selector-button__flag-emoji--disabled{opacity:.75}.react-international-phone-country-selector-button__dropdown-arrow{border-top:var(--react-international-phone-country-selector-arrow-size, 4px) solid var(--react-international-phone-country-selector-arrow-color, #777);border-right:var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;border-left:var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;margin-right:4px;transition:all .1s ease-out}.react-international-phone-country-selector-button__dropdown-arrow--active{transform:rotateX(180deg)}.react-international-phone-country-selector-button__dropdown-arrow--disabled{border-top-color:var(--react-international-phone-disabled-country-selector-arrow-color, #999)}.react-international-phone-country-selector-button--disabled,.react-international-phone-country-selector-button--disabled:hover{background-color:var(--react-international-phone-disabled-country-selector-background-color, var(--react-international-phone-disabled-background-color, whitesmoke))}.react-international-phone-country-selector-button--disabled{cursor:auto}.react-international-phone-flag-emoji{width:var(--react-international-phone-flag-width, 24px);height:var(--react-international-phone-flag-height, 24px);box-sizing:border-box}.react-international-phone-country-selector-dropdown{position:absolute;z-index:1;top:var(--react-international-phone-dropdown-top, 44px);left:var(--react-international-phone-dropdown-left, 0);display:flex;width:300px;max-height:200px;flex-direction:column;padding:4px 0;margin:0;background-color:var(--react-international-phone-dropdown-item-background-color, var(--react-international-phone-background-color, white));box-shadow:var(--react-international-phone-dropdown-shadow, 2px 2px 16px rgba(0, 0, 0, .25));color:var(--react-international-phone-dropdown-item-text-color, var(--react-international-phone-text-color, #222));list-style:none;overflow-y:scroll}.react-international-phone-country-selector-dropdown__preferred-list-divider{height:1px;border:none;margin:var(--react-international-phone-dropdown-preferred-list-divider-margin, 0);background:var(--react-international-phone-dropdown-preferred-list-divider-color, var(--react-international-phone-border-color, gainsboro))}.react-international-phone-country-selector-dropdown__list-item{display:flex;min-height:var(--react-international-phone-dropdown-item-height, 28px);box-sizing:border-box;align-items:center;padding:2px 8px}.react-international-phone-country-selector-dropdown__list-item-flag-emoji{margin-right:8px}.react-international-phone-country-selector-dropdown__list-item-country-name{overflow:hidden;margin-right:8px;font-size:var(--react-international-phone-dropdown-item-font-size, 14px);text-overflow:ellipsis;white-space:nowrap}.react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-dropdown-item-dial-code-color, gray);font-size:var(--react-international-phone-dropdown-item-font-size, 14px)}.react-international-phone-country-selector-dropdown__list-item:hover{background-color:var(--react-international-phone-selected-dropdown-item-background-color, var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke));cursor:pointer}.react-international-phone-country-selector-dropdown__list-item--selected,.react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke);color:var(--react-international-phone-selected-dropdown-item-text-color, var(--react-international-phone-text-color, #222))}.react-international-phone-country-selector-dropdown__list-item--selected .react-international-phone-country-selector-dropdown__list-item-dial-code,.react-international-phone-country-selector-dropdown__list-item--focused .react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-selected-dropdown-item-dial-code-color, var(--react-international-phone-dropdown-item-dial-code-color, gray))}.react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color, var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke))}.react-international-phone-dial-code-preview{display:flex;align-items:center;justify-content:center;padding:0 8px;border:1px solid var(--react-international-phone-dial-code-preview-border-color, var(--react-international-phone-border-color, gainsboro));margin-right:-1px;background-color:var(--react-international-phone-dial-code-preview-background-color, var(--react-international-phone-background-color, white));color:var(--react-international-phone-dial-code-preview-text-color, var(--react-international-phone-text-color, #222));font-size:var(--react-international-phone-dial-code-preview-font-size, var(--react-international-phone-font-size, 13px))}.react-international-phone-dial-code-preview--disabled{background-color:var(--react-international-phone-dial-code-preview-disabled-background-color, var(--react-international-phone-disabled-background-color, whitesmoke));color:var(--react-international-phone-dial-code-preview-disabled-text-color, var(--react-international-phone-disabled-text-color, #666))}.react-international-phone-input-container{display:flex}.react-international-phone-input-container .react-international-phone-country-selector-button{border-radius:var(--react-international-phone-border-radius, 4px);margin-right:-1px;border-bottom-right-radius:0;border-top-right-radius:0}.react-international-phone-input-container .react-international-phone-input{overflow:visible;height:var(--react-international-phone-height, 36px);box-sizing:border-box;padding:0 8px;border:1px solid var(--react-international-phone-border-color, gainsboro);border-radius:var(--react-international-phone-border-radius, 4px);margin:0;background-color:var(--react-international-phone-background-color, white);border-bottom-left-radius:0;border-top-left-radius:0;color:var(--react-international-phone-text-color, #222);font-family:inherit;font-size:var(--react-international-phone-font-size, 13px)}.react-international-phone-input-container .react-international-phone-input:focus{outline:none}.react-international-phone-input-container .react-international-phone-input--disabled{background-color:var(--react-international-phone-disabled-background-color, whitesmoke);color:var(--react-international-phone-disabled-text-color, #666)}
+
+  border-radius: var(--ck-secondary-button-border-radius);
+  font-size: 1rem;
+  color: var(--ck-body-color);
+  transition: all 0.2s;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 12px;
+
+  box-shadow: var(--ck-secondary-button-box-shadow);
+  background: var(--ck-secondary-button-background);
+
+  padding-right: 20px;
+
+  &:focus-within {
+    box-shadow: var(--ck-secondary-button-hover-box-shadow);
+  }
+
+  input {
+    padding-left: 20px;
+    padding-right: 10px;
+
+    border: none !important;
+    outline: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+
+    ::placeholder {
+      color: var(--ck-body-color-muted);
+    }
+    
+    width: 100%;
+    height: 100%;
+  }
+
+  .react-international-phone-country-selector-button {
+    padding-left: 20px;
+    padding-right: 10px;
+    --react-international-phone-border-color: none;
+    --react-international-phone-border-radius: var(--ck-secondary-button-border-radius);
+    --react-international-phone-background-color: var(--ck-secondary-button-background);
+    --react-international-phone-text-color: var(--ck-body-color);
+    border-radius: var(--ck-secondary-button-border-radius) 0px 0px var(--ck-secondary-button-border-radius);
+    transition: all .2s ease-out;
+  }
+
+  .react-international-phone-country-selector-dropdown {
+    box-shadow: var(--ck-secondary-button-hover-box-shadow);
+  }
+    
+  .react-international-phone-country-selector-button__dropdown-arrow {
+    border-top: var(--react-international-phone-country-selector-arrow-size, 4px) solid var(--react-international-phone-country-selector-arrow-color, #777) !important;
+    border-right: var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent !important;
+    border-left: var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent !important;
+    margin-right: 4px;
+    transition: all .1s ease-out;
+  }
+`;
+const EmailInnerButton = styled(motion.button) `
+  color: var(--ck-body-action-color);
+  transition: background-color 200ms ease, transform 100ms ease, color 200ms ease, transition 200ms ease, opacity 200ms ease;
+  border-radius: 16px;
+  
+  svg {
+    display: block;
+    position: relative;
+    padding: 4px;
+  }
+
+  &:enabled {
+    cursor: pointer;
+    &:hover {
+      background: var(--ck-body-background-secondary);
+      color: var(--ck-body-action-hover-color);
+    }
+    &:active {
+      transform: scale(0.9);
+    }
+  }
+`;
+const ProvidersButton = styled.div `
+  ${ButtonContainer} {
+    height: 64px;
+    font-size: 17px;
+    font-weight: var(--ck-primary-button-font-weight, 500);
+    line-height: 20px;
+  }
+
+  ${ProviderInputInner} {
+    height: 64px;
+  }
+
+  &:first-of-type {
+    ${ButtonContainer}, ${ProviderInputInner} {
+      margin-top: 0;
+    }
+  }
+
+  ${ButtonContainerInner} {
+    padding: 0 20px;
+    justify-content: space-between;
+  }
+
+  ${InnerContainer} {
+    justify-content: space-between;
+    width: 100%;
+    max-width: 100%;
+  }
+`;
+const ProviderLabel = styled.span `
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  padding: 2px 0;
+`;
+const ProviderIcon = styled.div `
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  svg,
+  img {
+    display: block;
+    position: relative;
+    pointer-events: none;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+  }
+
+  &[data-shape='squircle'] {
+    border-radius: 22.5%;
+  }
+  &[data-shape='circle'] {
+    border-radius: 100%;
+  }
+  &[data-shape='square'] {
+    border-radius: 0;
+  }
+`;
+
+export { EmailInnerButton, ProviderIcon, ProviderInputInner, ProviderLabel, ProvidersButton };
+//# sourceMappingURL=styles.js.map

package/build/components/Pages/Providers/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/Receive/index.js

@@ -0,0 +1,61 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ChainTypeEnum } from '@openfort/openfort-js';
+import { useEffect } from 'react';
+import Logos from '../../../assets/logos.js';
+import { useEthereumEmbeddedWallet } from '../../../ethereum/hooks/useEthereumEmbeddedWallet.js';
+import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
+import { useSolanaEmbeddedWallet } from '../../../solana/hooks/useSolanaEmbeddedWallet.js';
+import { CopyIconButton } from '../../Common/CopyToClipboard/CopyIconButton.js';
+import CustomQRCode from '../../Common/CustomQRCode/index.js';
+import { ModalHeading, ModalBody } from '../../Common/Modal/styles.js';
+import { routes } from '../../Openfort/types.js';
+import { useOpenfort } from '../../Openfort/useOpenfort.js';
+import { PageContent } from '../../PageContent/index.js';
+import { ReceiveContent, QRWrapper, AddressSection, Label, AddressRow, AddressField, NetworkInfo } from './styles.js';
+
+function formatSolanaCluster(cluster) {
+    if (cluster === 'mainnet-beta')
+        return 'Mainnet';
+    return cluster.charAt(0).toUpperCase() + cluster.slice(1);
+}
+const Receive = () => {
+    var _a;
+    const context = useOpenfort();
+    const { route, chains } = context;
+    const currentRoute = (_a = route === null || route === void 0 ? void 0 : route.route) !== null && _a !== void 0 ? _a : '';
+    const isSolanaRoute = currentRoute.startsWith('sol:');
+    const { chainType } = useOpenfortCore();
+    const ethereumWallet = useEthereumEmbeddedWallet();
+    const solanaWallet = useSolanaEmbeddedWallet();
+    const wallet = chainType === ChainTypeEnum.EVM ? ethereumWallet : solanaWallet;
+    const isConnected = wallet.status === 'connected';
+    const address = isConnected ? wallet.address : undefined;
+    const chainId = isConnected && chainType === ChainTypeEnum.EVM ? wallet.chainId : undefined;
+    const chain = chains.find((c) => c.id === chainId);
+    const qrValue = address || '';
+    const networkLabel = isConnected && chainType === ChainTypeEnum.SVM && solanaWallet.cluster
+        ? formatSolanaCluster(solanaWallet.cluster)
+        : (chain === null || chain === void 0 ? void 0 : chain.name)
+            ? `${chain.name}${chainId ? ` · Chain ID: ${chainId}` : ''}`
+            : chainId
+                ? `Chain ID: ${chainId}`
+                : null;
+    const { uiConfig: options } = context;
+    const renderLogo = () => {
+        if (options === null || options === void 0 ? void 0 : options.logo) {
+            if (typeof options.logo === 'string') {
+                return jsx("img", { src: options.logo, alt: "Logo", style: { width: '100%' } });
+            }
+            return options.logo;
+        }
+        return jsx(Logos.Openfort, {});
+    };
+    useEffect(() => {
+        const timer = setTimeout(() => context.triggerResize(), 100);
+        return () => clearTimeout(timer);
+    }, [address, context]);
+    return (jsx(PageContent, { onBack: isSolanaRoute ? routes.SOL_CONNECTED : routes.CONNECTED, children: jsxs(ReceiveContent, { children: [jsx(ModalHeading, { children: "Receive funds" }), jsx(ModalBody, { children: "Scan the QR code or copy your wallet details." }), address && (jsx(QRWrapper, { children: jsx(CustomQRCode, { value: qrValue, image: jsx("div", { style: { padding: 10 }, children: renderLogo() }) }) })), jsxs(AddressSection, { children: [jsx(Label, { children: "Your wallet address" }), jsxs(AddressRow, { children: [jsx(AddressField, { children: address !== null && address !== void 0 ? address : '--' }), jsx(CopyIconButton, { value: address !== null && address !== void 0 ? address : '' })] })] }), networkLabel && jsxs(NetworkInfo, { children: ["Network: ", networkLabel] })] }) }));
+};
+
+export { Receive as default };
+//# sourceMappingURL=index.js.map

package/build/components/Pages/Receive/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/Receive/styles.d.ts

@@ -1,3 +1,4 @@
+export declare const ReceiveContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const QRWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const AddressSection: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Label: import("styled-components").StyledComponent<"span", any, {}, never>;

package/build/components/Pages/Receive/styles.js

@@ -0,0 +1,52 @@
+import styled from '../../../styles/styled/index.js';
+
+const ReceiveContent = styled.div `
+  min-height: 480px;
+  display: flex;
+  flex-direction: column;
+`;
+const QRWrapper = styled.div `
+  display: block;
+  margin: 24px auto 16px;
+  width: 100%;
+  max-width: 280px;
+  
+  > div {
+    width: 100%;
+  }
+`;
+const AddressSection = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  text-align: left;
+`;
+const Label = styled.span `
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ck-body-color);
+`;
+const AddressRow = styled.div `
+  display: flex;
+  gap: 8px;
+  align-items: center;
+`;
+const AddressField = styled.div `
+  flex: 1;
+  padding: 12px;
+  border-radius: var(--ck-secondary-button-border-radius);
+  background: var(--ck-secondary-button-background);
+  box-shadow: var(--ck-secondary-button-box-shadow);
+  font-size: 14px;
+  color: var(--ck-body-color);
+  word-break: break-all;
+`;
+const NetworkInfo = styled.div `
+  margin-top: 12px;
+  font-size: 13px;
+  color: var(--ck-body-color-muted);
+  text-align: center;
+`;
+
+export { AddressField, AddressRow, AddressSection, Label, NetworkInfo, QRWrapper, ReceiveContent };
+//# sourceMappingURL=styles.js.map

package/build/components/Pages/Receive/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}