@openfort/react 1.1.0 → 1.1.2

package/build/components/Common/TickList/styles.js

@@ -3,7 +3,7 @@ import styled from '../../../styles/styled/index.js';
 const TickListContainer = styled.ul `
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 6px;
   padding-top: 8px;
   padding-bottom: 8px;
 `;
@@ -11,16 +11,17 @@ const TickItem = styled.li `
   display: flex;
   align-items: center;
   text-align: left;
-  gap: 8px;
-  font-size: 16px;
-  line-height: 24px;
+  gap: 6px;
+  font-size: 13px;
+  line-height: 18px;
+  color: var(--ck-body-color-muted);
 `;
 const TickIconWrapper = styled.span `
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 16px;
-  height: 16px;
+  width: 14px;
+  height: 14px;
   flex-shrink: 0;
 `;
 

package/build/components/Common/TickList/styles.js.map

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

package/build/components/Openfort/OpenfortProvider.js

@@ -12,11 +12,16 @@ import { isFamily } from '../../utils/wallets.js';
 import { OpenfortContext, UIContext } from './context.js';
 import { UIAuthProvider, routes, defaultSendFormState, defaultBuyFormState, notStoredInHistoryRoutes } from './types.js';
 
-const SolanaContextProvider = lazy(() => import(/* @vite-ignore */ '../../solana/SolanaContext.js').then((m) => ({ default: m.SolanaContextProvider })));
-const LazyEmbeddedWalletWagmiSync = lazy(() => import(/* @vite-ignore */ '../../wagmi/useEmbeddedWalletWagmiSync.js').then((m) => ({
+// These chunks are lazy-loaded with static specifiers so every bundler (Vite, Rollup, webpack)
+// can resolve and code-split them. Do NOT add a vite-ignore hint to these imports: it makes
+// Vite's dependency pre-bundler keep the import external, so the relative path resolves against
+// node_modules/.vite/deps instead of the package and the provider fails to load in dev
+// ("Failed to resolve import ../../solana/SolanaContext.js"), blanking any Vite app.
+const SolanaContextProvider = lazy(() => import('../../solana/SolanaContext.js').then((m) => ({ default: m.SolanaContextProvider })));
+const LazyEmbeddedWalletWagmiSync = lazy(() => import('../../wagmi/useEmbeddedWalletWagmiSync.js').then((m) => ({
     default: m.EmbeddedWalletWagmiSync,
 })));
-const LazyConnectKitModal = lazy(() => import(/* @vite-ignore */ '../ConnectModal/index.js'));
+const LazyConnectKitModal = lazy(() => import('../ConnectModal/index.js'));
 let openfortProviderWarnedNoWagmi = false;
 /**
  * Root provider for Openfort. Wrap your app with this to enable connect modal, auth, and wallet features.

package/build/components/Openfort/OpenfortProvider.js.map

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

package/build/components/Pages/CreateWallet/SolanaCreateWallet.js

@@ -203,14 +203,14 @@ const SolanaCreatePassword = ({ onChangeMethod, onBack, logoutOnBack, }) => {
         if (recoveryError)
             triggerResize();
     }, [recoveryError]);
-    return (jsxs(PageContent, { onBack: onBack, logoutOnBack: logoutOnBack, children: [jsx(FloatingGraphic, { height: "80px", logoCenter: { logo: jsx(KeyIcon, {}), size: '1.2' }, logoTopLeft: { logo: jsx(LockIcon, {}), size: '0.75' }, logoBottomRight: { logo: jsx(LockIcon, {}), size: '0.5' } }), jsx(ModalHeading, { children: "Secure your wallet" }), jsxs(ModalBody, { style: { textAlign: 'center' }, children: [jsx(FitText, { children: "Set a password for your wallet." }), jsxs("form", { onSubmit: (e) => {
+    return (jsxs(PageContent, { onBack: onBack, logoutOnBack: logoutOnBack, children: [jsx(FloatingGraphic, { height: "80px", logoCenter: { logo: jsx(KeyIcon, {}), size: '1.2' }, logoTopLeft: { logo: jsx(LockIcon, {}), size: '0.75' }, logoBottomRight: { logo: jsx(LockIcon, {}), size: '0.5' } }), jsx(ModalHeading, { children: "Secure your wallet" }), jsxs(ModalBody, { style: { textAlign: 'center' }, children: [jsx("span", { style: { display: 'block', marginBottom: 16 }, children: "You will use this password to access your wallet, so keep it safe." }), jsxs("form", { onSubmit: (e) => {
                             e.preventDefault();
                             handleSubmit();
                         }, children: [jsx(Input, { value: recoveryPhrase, onChange: (e) => {
                                     if (showPasswordIsTooWeakError)
                                         setShowPasswordIsTooWeakError(false);
                                     setRecoveryPhrase(e.target.value);
-                                }, type: "password", placeholder: "Enter your password", autoComplete: "off" }), jsx(PasswordStrengthIndicator, { password: recoveryPhrase, showPasswordIsTooWeakError: showPasswordIsTooWeakError }), jsx(TickList, { items: ['You will use this password to access your wallet', "Make sure it's strong and memorable"] }), recoveryError && (jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: jsx(ModalBody, { style: { height: 24, marginTop: 12 }, "$error": true, children: jsx(FitText, { children: recoveryError }) }) }, recoveryError)), jsx(Button, { onClick: handleSubmit, waiting: loading, disabled: loading, children: "Create wallet" })] }), jsx(OtherMethod, { currentMethod: RecoveryMethod.PASSWORD, onChangeMethod: onChangeMethod })] })] }));
+                                }, type: "password", placeholder: "Enter your password", autoComplete: "off" }), jsx(PasswordStrengthIndicator, { password: recoveryPhrase, showPasswordIsTooWeakError: showPasswordIsTooWeakError }), recoveryPhrase && (jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: jsx(TickList, { items: ["Make sure it's strong and memorable", 'If you lose it, no one can recover it for you'] }) })), recoveryError && (jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: jsx(ModalBody, { style: { height: 24, marginTop: 12 }, "$error": true, children: jsx(FitText, { children: recoveryError }) }) }, recoveryError)), jsx(Button, { onClick: handleSubmit, waiting: loading, disabled: loading, children: "Create wallet" })] }), jsx(OtherMethod, { currentMethod: RecoveryMethod.PASSWORD, onChangeMethod: onChangeMethod })] })] }));
 };
 const ChooseRecoveryMethod = ({ onChangeMethod, onBack, logoutOnBack, }) => {
     return (jsxs(PageContent, { onBack: onBack, logoutOnBack: logoutOnBack, children: [jsx(ModalHeading, { children: "Choose a recovery method" }), jsx(ProvidersButton, { children: jsxs(Button, { onClick: () => onChangeMethod(RecoveryMethod.PASSKEY), children: [jsx(ProviderLabel, { children: "Passkey" }), jsx(ProviderIcon, { children: jsx(FingerPrintIcon, {}) })] }) }), jsx(ProvidersButton, { children: jsxs(Button, { onClick: () => onChangeMethod(RecoveryMethod.PASSWORD), children: [jsx(ProviderLabel, { children: "Password" }), jsx(ProviderIcon, { children: jsx(KeyIcon, {}) })] }) }), jsx(ProvidersButton, { children: jsxs(Button, { onClick: () => onChangeMethod(RecoveryMethod.AUTOMATIC), children: [jsx(ProviderLabel, { children: "Automatic" }), jsx(ProviderIcon, { children: jsx(LockIcon, {}) })] }) })] }));

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

@@ -273,14 +273,14 @@ const CreateWalletPasswordRecovery = ({ onChangeMethod, onBack, logoutOnBack, })
                 }, logoBottomRight: {
                     logo: jsx(LockIcon, {}),
                     size: '0.5',
-                } }), jsx(ModalHeading, { children: "Secure your wallet" }), jsxs(ModalBody, { style: { textAlign: 'center' }, children: [jsx(FitText, { children: "Set a password for your wallet." }), jsxs("form", { onSubmit: (e) => {
+                } }), jsx(ModalHeading, { children: "Secure your wallet" }), jsxs(ModalBody, { style: { textAlign: 'center' }, children: [jsx("span", { style: { display: 'block', marginBottom: 16 }, children: "You will use this password to access your wallet, so keep it safe." }), jsxs("form", { onSubmit: (e) => {
                             e.preventDefault();
                             handleSubmit();
                         }, children: [jsx(Input, { value: recoveryPhrase, onChange: (e) => {
                                     if (showPasswordIsTooWeakError)
                                         setShowPasswordIsTooWeakError(false);
                                     setRecoveryPhrase(e.target.value);
-                                }, type: "password", placeholder: "Enter your password", autoComplete: "off" }), jsx(PasswordStrengthIndicator, { password: recoveryPhrase, showPasswordIsTooWeakError: showPasswordIsTooWeakError }), jsx(TickList, { items: ['You will use this password to access your wallet', "Make sure it's strong and memorable"] }), recoveryError && (jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: jsx(ModalBody, { style: { height: 24, marginTop: 12 }, "$error": true, children: jsx(FitText, { children: recoveryError }) }) }, recoveryError)), jsx(Button, { onClick: handleSubmit, waiting: loading, disabled: loading, children: "Create wallet" })] }), jsx(OtherMethod, { currentMethod: RecoveryMethod.PASSWORD, onChangeMethod: onChangeMethod })] })] }));
+                                }, type: "password", placeholder: "Enter your password", autoComplete: "off" }), jsx(PasswordStrengthIndicator, { password: recoveryPhrase, showPasswordIsTooWeakError: showPasswordIsTooWeakError }), recoveryPhrase && (jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: jsx(TickList, { items: ["Make sure it's strong and memorable", 'If you lose it, no one can recover it for you'] }) })), recoveryError && (jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, children: jsx(ModalBody, { style: { height: 24, marginTop: 12 }, "$error": true, children: jsx(FitText, { children: recoveryError }) }) }, recoveryError)), jsx(Button, { onClick: handleSubmit, waiting: loading, disabled: loading, children: "Create wallet" })] }), jsx(OtherMethod, { currentMethod: RecoveryMethod.PASSWORD, onChangeMethod: onChangeMethod })] })] }));
 };
 const ChooseRecoveryMethod = ({ onChangeMethod, onBack, logoutOnBack, }) => {
     return (jsxs(PageContent, { onBack: onBack, logoutOnBack: logoutOnBack, children: [jsx(ModalHeading, { children: "Choose a recovery method" }), jsx(ProvidersButton, { children: jsxs(Button, { onClick: () => onChangeMethod(RecoveryMethod.PASSKEY), children: [jsx(ProviderLabel, { children: "Passkey" }), jsx(ProviderIcon, { children: jsx(FingerPrintIcon, {}) })] }) }), jsx(ProvidersButton, { children: jsxs(Button, { onClick: () => onChangeMethod(RecoveryMethod.PASSWORD), children: [jsx(ProviderLabel, { children: "Password" }), jsx(ProviderIcon, { children: jsx(KeyIcon, {}) })] }) }), jsx(ProvidersButton, { children: jsxs(Button, { onClick: () => onChangeMethod(RecoveryMethod.AUTOMATIC), children: [jsx(ProviderLabel, { children: "Automatic" }), jsx(ProviderIcon, { children: jsx(LockIcon, {}) })] }) })] }));

package/build/components/PasswordStrength/PasswordStrengthIndicator.d.ts

@@ -1,4 +1,4 @@
 export declare const PasswordStrengthIndicator: ({ password, showPasswordIsTooWeakError, }: {
     password: string;
     showPasswordIsTooWeakError: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element | null;

package/build/components/PasswordStrength/PasswordStrengthIndicator.js

@@ -1,7 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { motion } from 'framer-motion';
-import { useMemo } from 'react';
+import { useMemo, useEffect } from 'react';
 import styled from '../../styles/styled/index.js';
+import { useOpenfort } from '../Openfort/useOpenfort.js';
 import { getPasswordStrength, getPasswordStrengthLabel } from './password-utility.js';
 
 const Container = styled.div `
@@ -49,6 +50,14 @@ const PasswordStrengthIndicator = ({ password, showPasswordIsTooWeakError, }) =>
                 return '#d1d5db'; // gray-300
         }
     }, [label]);
+    const { triggerResize } = useOpenfort();
+    // Grow/shrink the modal as the meter appears/disappears so it isn't clipped.
+    useEffect(() => {
+        triggerResize();
+    }, [!!password, showPasswordIsTooWeakError, triggerResize]);
+    // Only surface strength once the user starts typing (or on the too-weak error).
+    if (!password && !showPasswordIsTooWeakError)
+        return null;
     return (jsxs(Container, { children: [jsx(BarWrapper, { children: jsx(Progress, { color: color, initial: { width: 0 }, animate: { width: `${passwordStrength * 100}%` }, transition: { ease: 'easeOut', duration: 0.5 } }) }), jsxs("div", { style: { position: 'relative' }, children: [jsx(motion.div, { initial: { opacity: 1 }, animate: {
                             opacity: showPasswordIsTooWeakError ? 0 : 1,
                             y: showPasswordIsTooWeakError ? 5 : 0,

package/build/components/PasswordStrength/PasswordStrengthIndicator.js.map

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

package/build/version.d.ts

@@ -1 +1 @@
-export declare const OPENFORT_VERSION = "1.1.0";
+export declare const OPENFORT_VERSION = "1.1.2";

package/build/version.js

@@ -1,4 +1,4 @@
-const OPENFORT_VERSION = '1.1.0';
+const OPENFORT_VERSION = '1.1.2';
 
 export { OPENFORT_VERSION };
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openfort/react",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "author": "Openfort (https://www.openfort.io)",
   "license": "BSD-2-Clause license",
   "description": "The easiest way to integrate Openfort to your project.",
@@ -65,7 +65,7 @@
     "react"
   ],
   "dependencies": {
-    "@openfort/openfort-js": "^1.3.5",
+    "@openfort/openfort-js": "^1.3.6",
     "buffer": "^6.0.3",
     "detect-browser": "^5.3.0",
     "fast-password-entropy": "^1.1.1",