From 69d94632f019f78c532610b63fea3343a62142ae Mon Sep 17 00:00:00 2001
From: Albert-Atomic <k.albert@atomicwallet.io>
Date: Fri, 8 May 2026 17:19:22 +0300
Subject: [PATCH] lower onboarding top up to 10$, navigate to settings on low
 balance banner, remove top up button under balance

---
 .../ui/settings/atomic/AtomicAccountTab.tsx   | 20 ------
 .../src/ui/setup/atomic/AtomicTopupPage.tsx   |  2 +-
 .../src/ui/shared/atomic/LowBalanceBanner.tsx | 69 +++++++------------
 3 files changed, 24 insertions(+), 67 deletions(-)

diff --git a/desktop/renderer/src/ui/settings/atomic/AtomicAccountTab.tsx b/desktop/renderer/src/ui/settings/atomic/AtomicAccountTab.tsx
index e039a35b9c1..392a34f45f6 100644
--- a/desktop/renderer/src/ui/settings/atomic/AtomicAccountTab.tsx
+++ b/desktop/renderer/src/ui/settings/atomic/AtomicAccountTab.tsx
@@ -153,26 +153,6 @@ export function AtomicAccountTab(props: { port: number }) {
             )}
           </div> */}
         </div>
-
-        {balanceDepleted && (
-          <div className={s.depletedCard}>
-            <div className={s.depletedBody}>
-              <div className={s.depletedTitle}>No credits left</div>
-              <div className={s.depletedSubtitle}>
-                Top up to continue using AI.
-              </div>
-            </div>
-            <button
-              type="button"
-              className={s.depletedAction}
-              onClick={() => void handleTopUp()}
-              disabled={topupBusy}
-            >
-              {topupBusy ? "Opening…" : "Top up"}
-            </button>
-          </div>
-        )}
-
         {errorMessage && <div className={s.errorRow}>{errorMessage}</div>}
       </div>
 
diff --git a/desktop/renderer/src/ui/setup/atomic/AtomicTopupPage.tsx b/desktop/renderer/src/ui/setup/atomic/AtomicTopupPage.tsx
index 70bc960f4f6..7559b35d454 100644
--- a/desktop/renderer/src/ui/setup/atomic/AtomicTopupPage.tsx
+++ b/desktop/renderer/src/ui/setup/atomic/AtomicTopupPage.tsx
@@ -26,7 +26,7 @@ import {
 import { routes } from "../../app/routes";
 import s from "./AtomicTopupPage.module.css";
 
-const DEFAULT_TOPUP_AMOUNT_USD = 25;
+const DEFAULT_TOPUP_AMOUNT_USD = 10;
 
 const FEATURES = [
   "Credits never expire",
diff --git a/desktop/renderer/src/ui/shared/atomic/LowBalanceBanner.tsx b/desktop/renderer/src/ui/shared/atomic/LowBalanceBanner.tsx
index e0a05d67adb..715ddcc6110 100644
--- a/desktop/renderer/src/ui/shared/atomic/LowBalanceBanner.tsx
+++ b/desktop/renderer/src/ui/shared/atomic/LowBalanceBanner.tsx
@@ -1,32 +1,22 @@
 import React from "react";
 import { useAppDispatch, useAppSelector } from "@store/hooks";
-import {
-  atomicAuthActions,
-  fetchAtomicBalance,
-} from "@store/slices/atomicAuthSlice";
-import {
-  STRIPE_PAYG_CANCEL_URL,
-  atomicBackendApi,
-  getStripePaygSuccessUrl,
-} from "../../../services/atomic-backend-api";
+import { fetchAtomicBalance } from "@store/slices/atomicAuthSlice";
 import s from "./LowBalanceBanner.module.css";
+import { useNavigate } from "react-router-dom";
+import { routes } from "@ui/app/routes";
 
 const DEFAULT_THRESHOLD_USD = 1;
 const SESSION_DISMISS_KEY = "hermes:low-balance-banner-dismissed";
-const DEFAULT_TOPUP_USD = 10;
-
-function openExternal(url: string): void {
-  const api = (window as { hermesAPI?: { openExternal?: (u: string) => void } }).hermesAPI;
-  if (api?.openExternal) {
-    void api.openExternal(url);
-    return;
-  }
-  window.open(url, "_blank");
-}
 
 function EmptyWalletIcon() {
   return (
-    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <path
         d="M10 7v4m0 2.5h.008M4.34 17h11.32c1.34 0 2.18-1.45 1.51-2.606L11.51 3.606a1.745 1.745 0 00-3.02 0L2.83 14.394C2.16 15.55 3 17 4.34 17z"
         stroke="currentColor"
@@ -40,7 +30,13 @@ function EmptyWalletIcon() {
 
 function CloseIcon() {
   return (
-    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <svg
+      width="10"
+      height="10"
+      viewBox="0 0 10 10"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <path
         d="M1 1l8 8M9 1l-8 8"
         stroke="currentColor"
@@ -58,6 +54,7 @@ function CloseIcon() {
  */
 export function LowBalanceBanner(props: { thresholdUsd?: number }) {
   const dispatch = useAppDispatch();
+  const navigate = useNavigate();
   const jwt = useAppSelector((state) => state.atomicAuth.jwt);
   const mode = useAppSelector((state) => state.config.mode);
   const balance = useAppSelector((state) => state.atomicAuth.balance);
@@ -76,25 +73,9 @@ export function LowBalanceBanner(props: { thresholdUsd?: number }) {
     }
   }, [jwt, mode, balance, dispatch]);
 
-  const handleTopUp = React.useCallback(async () => {
-    if (!jwt) return;
-    dispatch(atomicAuthActions.setTopupBusy(true));
-    dispatch(atomicAuthActions.setTopupError(null));
-    try {
-      const { checkoutUrl } = await atomicBackendApi.createPaygTopup(jwt, {
-        amountUsd: DEFAULT_TOPUP_USD,
-        successUrl: getStripePaygSuccessUrl(),
-        cancelUrl: STRIPE_PAYG_CANCEL_URL,
-      });
-      openExternal(checkoutUrl);
-      dispatch(atomicAuthActions.setTopupPending(true));
-    } catch (err) {
-      const msg = err instanceof Error ? err.message : String(err);
-      dispatch(atomicAuthActions.setTopupError(msg));
-    } finally {
-      dispatch(atomicAuthActions.setTopupBusy(false));
-    }
-  }, [jwt, dispatch]);
+  const handleTopUp = React.useCallback(() => {
+    navigate(routes.settings);
+  }, [navigate]);
 
   const handleDismiss = React.useCallback(() => {
     try {
@@ -119,13 +100,9 @@ export function LowBalanceBanner(props: { thresholdUsd?: number }) {
       </div>
       <div className={s.body}>
         <div className={s.title}>No credits left</div>
-        <div className={s.subtitle}>Top up to continue using AI.</div>
+        <div className={s.subtitle}>Open settings to manage your balance.</div>
       </div>
-      <button
-        type="button"
-        className={s.action}
-        onClick={() => void handleTopUp()}
-      >
+      <button type="button" className={s.action} onClick={handleTopUp}>
         Top up
       </button>
       <button