@b3dotfun/sdk 0.1.69-alpha.20 → 0.1.69-alpha.22

package/dist/types/anyspend/react/components/checkout/PriceSkeleton.d.ts

@@ -0,0 +1,5 @@
+interface PriceSkeletonProps {
+    className?: string;
+}
+export declare function PriceSkeleton({ className }: PriceSkeletonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/anyspend/react/components/checkout/ShippingSelector.d.ts

@@ -5,7 +5,9 @@ interface ShippingSelectorProps {
     onSelect: (option: ShippingOption) => void;
     tokenSymbol?: string;
     tokenDecimals?: number;
+    /** True while token decimals/symbol are still loading — renders price as skeleton. */
+    pricesLoading?: boolean;
     className?: string;
 }
-export declare function ShippingSelector({ options, selectedId, onSelect, tokenSymbol, tokenDecimals, className, }: ShippingSelectorProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ShippingSelector({ options, selectedId, onSelect, tokenSymbol, tokenDecimals, pricesLoading, className, }: ShippingSelectorProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/types/global-account/react/components/SignInWithB3/components/PasswordInput.d.ts

@@ -0,0 +1,10 @@
+interface PasswordInputProps {
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+    placeholder?: string;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    className?: string;
+}
+export declare function PasswordInput({ value, onChange, disabled, placeholder, onKeyDown, className, }: PasswordInputProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.1.69-alpha.20",
+  "version": "0.1.69-alpha.22",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",

package/src/anyspend/react/components/checkout/AnySpendCheckout.tsx

@@ -295,10 +295,14 @@ export function AnySpendCheckout({
     variablePricingAmount,
   ]);
 
-  // Get destination token metadata
-  const { data: tokenData } = useTokenData(destinationTokenChainId, destinationTokenAddress);
-  const tokenSymbol = tokenData?.symbol || "";
-  const tokenDecimals = tokenData?.decimals || 18;
+  // Get destination token metadata. While loading, skip price-dependent UI
+  // since the 18-decimal fallback is wrong for non-18 tokens (e.g. USDC).
+  const { data: tokenData, isLoading: isTokenDataLoading } = useTokenData(
+    destinationTokenChainId,
+    destinationTokenAddress,
+  );
+  const tokenSymbol = tokenData?.symbol ?? "";
+  const tokenDecimals = tokenData?.decimals ?? 18;
 
   // Resolve USD equivalent for non-stablecoin tokens (shown in cart summary)
   const isStablecoin = useMemo(() => {
@@ -412,6 +416,7 @@ export function AnySpendCheckout({
                     validateDiscount={validateDiscount}
                     tokenSymbol={tokenSymbol}
                     tokenDecimals={tokenDecimals}
+                    pricesLoading={isTokenDataLoading}
                     classes={classes}
                     formData={formData}
                     onFormDataChange={handleFormDataChange}
@@ -456,6 +461,7 @@ export function AnySpendCheckout({
               totalAmount={computedTotal}
               tokenSymbol={tokenSymbol}
               tokenDecimals={tokenDecimals}
+              pricesLoading={isTokenDataLoading}
               organizationName={organizationName}
               organizationLogo={organizationLogo}
               classes={classes}

package/src/anyspend/react/components/checkout/CartItemRow.tsx

@@ -1,11 +1,12 @@
 "use client";
 
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import type { ReactNode } from "react";
 import type { CheckoutItem, AnySpendCheckoutClasses } from "./AnySpendCheckout";
 
 interface CartItemRowProps {
   item: CheckoutItem;
-  formattedPrice: string;
+  formattedPrice: ReactNode;
   classes?: AnySpendCheckoutClasses;
 }
 

package/src/anyspend/react/components/checkout/CartSummary.tsx

@@ -2,13 +2,12 @@
 
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { formatTokenAmount, safeBigInt } from "@b3dotfun/sdk/shared/utils/number";
-import { useMemo } from "react";
-import type { AnySpendCheckoutClasses } from "./AnySpendCheckout";
-import type { CheckoutSummaryLine } from "./AnySpendCheckout";
+import { useMemo, type ReactNode } from "react";
+import type { AnySpendCheckoutClasses, CheckoutSummaryLine } from "./AnySpendCheckout";
 
 interface CartSummaryProps {
   /** Formatted total (final amount after all adjustments) */
-  total: string;
+  total: ReactNode;
   tokenSymbol?: string;
   classes?: AnySpendCheckoutClasses;
   /** Formatted subtotal (sum of items only — shown when adjustments exist) */
@@ -20,6 +19,8 @@ interface CartSummaryProps {
   summaryLines?: CheckoutSummaryLine[];
   /** Formatted USD equivalent (e.g. "$5.56") — shown for non-stablecoin tokens */
   usdEquivalent?: string | null;
+  /** When true, hide adjustment rows and USD equivalent (caller passes a skeleton as `total`). */
+  pricesLoading?: boolean;
 }
 
 export function CartSummary({
@@ -33,35 +34,38 @@ export function CartSummary({
   discount,
   summaryLines,
   usdEquivalent,
+  pricesLoading = false,
 }: CartSummaryProps) {
-  const hasAdjustments =
-    !!shipping?.amount || !!tax?.amount || !!discount?.amount || (summaryLines && summaryLines.length > 0);
-
   const formattedShipping = useMemo(
-    () => (shipping?.amount ? formatTokenAmount(safeBigInt(shipping.amount), tokenDecimals) : null),
-    [shipping?.amount, tokenDecimals],
+    () => (!pricesLoading && shipping?.amount ? formatTokenAmount(safeBigInt(shipping.amount), tokenDecimals) : null),
+    [pricesLoading, shipping?.amount, tokenDecimals],
   );
 
   const formattedTax = useMemo(
-    () => (tax?.amount ? formatTokenAmount(safeBigInt(tax.amount), tokenDecimals) : null),
-    [tax?.amount, tokenDecimals],
+    () => (!pricesLoading && tax?.amount ? formatTokenAmount(safeBigInt(tax.amount), tokenDecimals) : null),
+    [pricesLoading, tax?.amount, tokenDecimals],
   );
 
   const formattedDiscount = useMemo(
-    () => (discount?.amount ? formatTokenAmount(safeBigInt(discount.amount), tokenDecimals) : null),
-    [discount?.amount, tokenDecimals],
+    () => (!pricesLoading && discount?.amount ? formatTokenAmount(safeBigInt(discount.amount), tokenDecimals) : null),
+    [pricesLoading, discount?.amount, tokenDecimals],
   );
 
   const formattedSummaryLines = useMemo(
     () =>
-      summaryLines?.map(line => ({
-        ...line,
-        formattedAmount: formatTokenAmount(safeBigInt(line.amount), tokenDecimals),
-        isNegative: safeBigInt(line.amount) < BigInt(0),
-      })),
-    [summaryLines, tokenDecimals],
+      pricesLoading
+        ? undefined
+        : summaryLines?.map(line => ({
+            ...line,
+            formattedAmount: formatTokenAmount(safeBigInt(line.amount), tokenDecimals),
+            isNegative: safeBigInt(line.amount) < BigInt(0),
+          })),
+    [pricesLoading, summaryLines, tokenDecimals],
   );
 
+  const hasAdjustments =
+    !!formattedShipping || !!formattedTax || !!formattedDiscount || !!formattedSummaryLines?.length;
+
   return (
     <div className={cn("border-t border-gray-200 pt-3 dark:border-neutral-700", classes?.cartSummary)}>
       {/* Subtotal — only shown when adjustments exist */}
@@ -147,7 +151,7 @@ export function CartSummary({
             {total} {tokenSymbol}
           </span>
         </div>
-        {usdEquivalent && (
+        {!pricesLoading && usdEquivalent && (
           <div className="flex justify-end">
             <span className="text-xs text-gray-400 dark:text-gray-500">~{usdEquivalent} USD</span>
           </div>

package/src/anyspend/react/components/checkout/CheckoutCartPanel.tsx

@@ -7,12 +7,15 @@ import type { CheckoutItem, CheckoutSummaryLine, AnySpendCheckoutClasses } from
 import { CartItemRow } from "./CartItemRow";
 import { CartSummary } from "./CartSummary";
 import { PoweredByBranding } from "./PoweredByBranding";
+import { PriceSkeleton } from "./PriceSkeleton";
 
 interface CheckoutCartPanelProps {
   items: CheckoutItem[];
   totalAmount: string;
   tokenSymbol?: string;
   tokenDecimals?: number;
+  /** True while token decimals/symbol are still loading — prevents rendering mis-decimalized prices. */
+  pricesLoading?: boolean;
   organizationName?: string;
   organizationLogo?: string;
   classes?: AnySpendCheckoutClasses;
@@ -31,6 +34,7 @@ export function CheckoutCartPanel({
   totalAmount,
   tokenSymbol = "",
   tokenDecimals = 18,
+  pricesLoading = false,
   organizationName,
   organizationLogo,
   classes,
@@ -56,7 +60,7 @@ export function CheckoutCartPanel({
   }, [items, tokenDecimals]);
 
   return (
-    <div className={cn("anyspend-cart-panel flex flex-col", classes?.cartPanel)}>
+    <div className={cn("anyspend-cart-panel flex flex-col", classes?.cartPanel)} aria-busy={pricesLoading || undefined}>
       <h2
         className={cn(
           "anyspend-cart-title mb-4 text-lg font-semibold text-gray-900 dark:text-gray-100",
@@ -69,14 +73,18 @@ export function CheckoutCartPanel({
       <div className="anyspend-cart-items divide-y divide-gray-100 dark:divide-gray-800">
         {items.map((item, index) => {
           const itemTotal = safeBigInt(item.amount) * BigInt(item.quantity);
-          const formattedPrice = `${formatTokenAmount(itemTotal, tokenDecimals)} ${tokenSymbol}`;
+          const formattedPrice: ReactNode = pricesLoading ? (
+            <PriceSkeleton />
+          ) : (
+            `${formatTokenAmount(itemTotal, tokenDecimals)} ${tokenSymbol}`
+          );
 
           return <CartItemRow key={item.id || index} item={item} formattedPrice={formattedPrice} classes={classes} />;
         })}
       </div>
 
       <CartSummary
-        total={formattedTotal}
+        total={pricesLoading ? <PriceSkeleton className="w-20" /> : formattedTotal}
         tokenSymbol={tokenSymbol}
         classes={classes}
         subtotal={formattedSubtotal}
@@ -86,6 +94,7 @@ export function CheckoutCartPanel({
         discount={discount}
         summaryLines={summaryLines}
         usdEquivalent={usdEquivalent}
+        pricesLoading={pricesLoading}
       />
 
       {footer === undefined ? (

package/src/anyspend/react/components/checkout/CheckoutFormPanel.tsx

@@ -31,6 +31,8 @@ interface CheckoutFormPanelProps {
   /** Token info for display */
   tokenSymbol?: string;
   tokenDecimals?: number;
+  /** True while token decimals/symbol are still loading — prevents rendering mis-decimalized prices. */
+  pricesLoading?: boolean;
   /** CSS class overrides */
   classes?: AnySpendCheckoutClasses;
   /** Current form data (lifted state) */
@@ -62,6 +64,7 @@ export function CheckoutFormPanel({
   validateDiscount,
   tokenSymbol,
   tokenDecimals,
+  pricesLoading = false,
   classes,
   formData,
   onFormDataChange,
@@ -144,6 +147,7 @@ export function CheckoutFormPanel({
           onSelect={onShippingChange}
           tokenSymbol={tokenSymbol}
           tokenDecimals={tokenDecimals}
+          pricesLoading={pricesLoading}
         />
       )}
       {enableDiscountCode && validateDiscount && (
@@ -153,6 +157,7 @@ export function CheckoutFormPanel({
           onRemove={onDiscountRemoved}
           tokenSymbol={tokenSymbol}
           tokenDecimals={tokenDecimals}
+          pricesLoading={pricesLoading}
         />
       )}
     </>

package/src/anyspend/react/components/checkout/DiscountCodeInput.tsx

@@ -5,6 +5,7 @@ import { formatTokenAmount, safeBigInt } from "@b3dotfun/sdk/shared/utils/number
 import { X, Loader2, Check } from "lucide-react";
 import { useState, useCallback } from "react";
 import type { DiscountResult } from "../../../types/forms";
+import { PriceSkeleton } from "./PriceSkeleton";
 
 interface DiscountCodeInputProps {
   onApply: (code: string) => Promise<DiscountResult>;
@@ -13,6 +14,8 @@ interface DiscountCodeInputProps {
   loading?: boolean;
   tokenSymbol?: string;
   tokenDecimals?: number;
+  /** True while token decimals/symbol are still loading — renders applied amount as skeleton. */
+  pricesLoading?: boolean;
   className?: string;
 }
 
@@ -29,6 +32,7 @@ export function DiscountCodeInput({
   loading = false,
   tokenSymbol = "",
   tokenDecimals = 6,
+  pricesLoading = false,
   className,
 }: DiscountCodeInputProps) {
   const [code, setCode] = useState("");
@@ -67,11 +71,17 @@ export function DiscountCodeInput({
           <div className="flex items-center gap-2">
             <Check className="h-4 w-4 text-green-600 dark:text-green-400" />
             <span className="anyspend-discount-value text-sm font-medium text-green-700 dark:text-green-300">
-              {appliedDiscount.discount_type === "percentage"
-                ? `${appliedDiscount.discount_value}% off`
-                : appliedDiscount.discount_amount
-                  ? `-${formatAmount(appliedDiscount.discount_amount, tokenDecimals, tokenSymbol)}`
-                  : "Discount applied"}
+              {appliedDiscount.discount_type === "percentage" ? (
+                `${appliedDiscount.discount_value}% off`
+              ) : appliedDiscount.discount_amount ? (
+                pricesLoading ? (
+                  <PriceSkeleton />
+                ) : (
+                  `-${formatAmount(appliedDiscount.discount_amount, tokenDecimals, tokenSymbol)}`
+                )
+              ) : (
+                "Discount applied"
+              )}
             </span>
           </div>
           <button

package/src/anyspend/react/components/checkout/PriceSkeleton.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+
+interface PriceSkeletonProps {
+  className?: string;
+}
+
+export function PriceSkeleton({ className }: PriceSkeletonProps) {
+  return (
+    <span
+      className={cn(
+        "animate-pulse-fade bg-b3-react-background inline-block h-4 w-16 rounded-md align-middle",
+        className,
+      )}
+      aria-hidden="true"
+    />
+  );
+}

package/src/anyspend/react/components/checkout/ShippingSelector.tsx

@@ -3,6 +3,7 @@
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { formatTokenAmount, safeBigInt } from "@b3dotfun/sdk/shared/utils/number";
 import type { ShippingOption } from "../../../types/forms";
+import { PriceSkeleton } from "./PriceSkeleton";
 
 interface ShippingSelectorProps {
   options: ShippingOption[];
@@ -10,6 +11,8 @@ interface ShippingSelectorProps {
   onSelect: (option: ShippingOption) => void;
   tokenSymbol?: string;
   tokenDecimals?: number;
+  /** True while token decimals/symbol are still loading — renders price as skeleton. */
+  pricesLoading?: boolean;
   className?: string;
 }
 
@@ -25,6 +28,7 @@ export function ShippingSelector({
   onSelect,
   tokenSymbol = "",
   tokenDecimals = 6,
+  pricesLoading = false,
   className,
 }: ShippingSelectorProps) {
   if (options.length === 0) return null;
@@ -63,7 +67,7 @@ export function ShippingSelector({
               </div>
             </div>
             <div className="anyspend-shipping-option-price text-sm font-medium text-gray-900 dark:text-gray-100">
-              {formatAmount(option.amount, tokenDecimals, tokenSymbol)}
+              {pricesLoading ? <PriceSkeleton /> : formatAmount(option.amount, tokenDecimals, tokenSymbol)}
             </div>
           </label>
         ))}

package/src/global-account/react/components/SignInWithB3/BetterAuthResetPassword.tsx

@@ -1,7 +1,8 @@
-import { Button, Input } from "@b3dotfun/sdk/global-account/react";
+import { Button } from "@b3dotfun/sdk/global-account/react";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import { useState } from "react";
 import { useBetterAuth } from "../../hooks/useBetterAuth";
+import { PasswordInput } from "./components/PasswordInput";
 
 const debug = debugB3React("BetterAuthResetPassword");
 
@@ -103,13 +104,12 @@ export function BetterAuthResetPassword({ token, onSuccess, onError, className }
             <label className="mb-2 block text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-300">
               New password
             </label>
-            <Input
-              type="password"
+            <PasswordInput
               placeholder="At least 8 characters"
               value={password}
               onChange={e => setPassword(e.target.value)}
               disabled={isLoading}
-              className="h-11 px-4 text-[15px]"
+              className="h-11 px-4 pr-11 text-[15px]"
             />
           </div>
 
@@ -117,8 +117,7 @@ export function BetterAuthResetPassword({ token, onSuccess, onError, className }
             <label className="mb-2 block text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-300">
               Confirm password
             </label>
-            <Input
-              type="password"
+            <PasswordInput
               placeholder="Repeat your password"
               value={confirmPassword}
               onChange={e => setConfirmPassword(e.target.value)}
@@ -126,7 +125,7 @@ export function BetterAuthResetPassword({ token, onSuccess, onError, className }
               onKeyDown={e => {
                 if (e.key === "Enter") handleSubmit();
               }}
-              className="h-11 px-4 text-[15px]"
+              className="h-11 px-4 pr-11 text-[15px]"
             />
           </div>
 

package/src/global-account/react/components/SignInWithB3/BetterAuthSignIn.tsx

@@ -1,4 +1,4 @@
-import { Button, Input, useAuthStore } from "@b3dotfun/sdk/global-account/react";
+import { Button, Input, Loading, useAuthStore } from "@b3dotfun/sdk/global-account/react";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import { useState } from "react";
 import {
@@ -6,6 +6,7 @@ import {
   type BetterAuthSocialProvider,
   useBetterAuth,
 } from "../../hooks/useBetterAuth";
+import { PasswordInput } from "./components/PasswordInput";
 import { strategyIcons, strategyLabels } from "./utils/signInUtils";
 
 const debug = debugB3React("BetterAuthSignIn");
@@ -66,6 +67,8 @@ export function BetterAuthSignIn({
 }: BetterAuthSignInProps) {
   const { signInWithEmail, signUpWithEmail, signInWithSocial, requestPasswordReset } = useBetterAuth();
   const isAuthenticated = useAuthStore(state => state.isAuthenticated);
+  const isAuthenticating = useAuthStore(state => state.isAuthenticating);
+  const hasStartedConnecting = useAuthStore(state => state.hasStartedConnecting);
 
   const [mode, setMode] = useState<"sign-in" | "sign-up" | "forgot-password">("sign-in");
   const [email, setEmail] = useState("");
@@ -83,7 +86,9 @@ export function BetterAuthSignIn({
 
   const resolvedSubtitle =
     mode === "forgot-password"
-      ? "Enter your email and we'll send you a reset link"
+      ? resetEmailSent
+        ? "We've sent a password reset link to your email"
+        : "Enter your email and we'll send you a reset link"
       : subtitle || "Enter your credentials to access your account";
 
   const handleForgotPassword = async () => {
@@ -111,6 +116,16 @@ export function BetterAuthSignIn({
     .map(id => DEFAULT_SOCIAL_PROVIDERS.find(p => p.id === id))
     .filter((p): p is SocialProviderConfig => !!p);
 
+  // Show loading during session restore (before any user interaction) to prevent
+  // the login form from flashing briefly after OAuth redirect.
+  if (isAuthenticating && !hasStartedConnecting) {
+    return (
+      <div className={`flex w-full max-w-[400px] items-center justify-center px-6 py-20 ${className || ""}`}>
+        <Loading variant="primary" size="lg" />
+      </div>
+    );
+  }
+
   if (isAuthenticated) {
     return null;
   }
@@ -334,16 +349,15 @@ export function BetterAuthSignIn({
                 </button>
               )}
             </div>
-            <Input
-              type="password"
-              placeholder="Password"
+            <PasswordInput
+              key={mode}
               value={password}
               onChange={e => setPassword(e.target.value)}
               disabled={isLoading}
               onKeyDown={e => {
                 if (e.key === "Enter") handleEmailSubmit();
               }}
-              className="h-11 px-4 text-[15px]"
+              className="h-11 px-4 pr-11 text-[15px]"
             />
           </div>
 

package/src/global-account/react/components/SignInWithB3/components/PasswordInput.tsx

@@ -0,0 +1,62 @@
+import { Input } from "@b3dotfun/sdk/global-account/react";
+import { useState } from "react";
+
+interface PasswordInputProps {
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  disabled?: boolean;
+  placeholder?: string;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  className?: string;
+}
+
+export function PasswordInput({
+  value,
+  onChange,
+  disabled,
+  placeholder = "Password",
+  onKeyDown,
+  className,
+}: PasswordInputProps) {
+  const [showPassword, setShowPassword] = useState(false);
+
+  return (
+    <div className="relative">
+      <Input
+        type={showPassword ? "text" : "password"}
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+        disabled={disabled}
+        onKeyDown={onKeyDown}
+        className={className}
+      />
+      <button
+        type="button"
+        onClick={() => setShowPassword(!showPassword)}
+        aria-label={showPassword ? "Hide password" : "Show password"}
+        className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300"
+        tabIndex={-1}
+      >
+        {showPassword ? (
+          <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
+            />
+          </svg>
+        ) : (
+          <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z"
+            />
+            <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+          </svg>
+        )}
+      </button>
+    </div>
+  );
+}

package/src/global-account/react/components/SignInWithB3/steps/LoginStepBetterAuth.tsx

@@ -7,6 +7,7 @@ import {
   useBetterAuth,
 } from "../../../hooks/useBetterAuth";
 import { AuthButton } from "../components/AuthButton";
+import { PasswordInput } from "../components/PasswordInput";
 
 const debug = debugB3React("LoginStepBetterAuth");
 const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
@@ -160,7 +161,11 @@ export function LoginStepBetterAuth({ onSuccess, onError }: LoginStepBetterAuthP
       {mode === "forgot-password" ? (
         <div className="mb-6 w-full space-y-3 px-3">
           <p className="text-center text-sm font-medium text-gray-900 dark:text-gray-100">Reset password</p>
-          <p className="text-center text-xs text-gray-500">Enter your email and we'll send you a reset link</p>
+          <p className="text-center text-xs text-gray-500">
+            {resetEmailSent
+              ? "We've sent a password reset link to your email"
+              : "Enter your email and we'll send you a reset link"}
+          </p>
 
           {resetEmailSent ? (
             <div className="space-y-3 py-4 text-center">
@@ -223,15 +228,15 @@ export function LoginStepBetterAuth({ onSuccess, onError }: LoginStepBetterAuthP
             disabled={isLoading}
           />
 
-          <Input
-            type="password"
-            placeholder="Password"
+          <PasswordInput
+            key={mode}
             value={password}
             onChange={event => setPassword(event.target.value)}
             disabled={isLoading}
             onKeyDown={event => {
               if (event.key === "Enter") handleEmailSubmit();
             }}
+            className="pr-11"
           />
 
           {error && <p className="text-sm text-red-500">{error}</p>}