diff --git a/src/shared/components/UsdcTrustlinePrompt.tsx b/src/shared/components/UsdcTrustlinePrompt.tsx index 9157d90..f0b5e3f 100644 --- a/src/shared/components/UsdcTrustlinePrompt.tsx +++ b/src/shared/components/UsdcTrustlinePrompt.tsx @@ -1,66 +1,74 @@ import { useUsdcTrustline } from "../../hooks/useUsdcTrustline"; +import { useUsdcBalance } from "../../hooks/useUsdcBalance"; import { USDC_FAUCET_URL } from "../../lib/usdc"; -import Button from "./Button"; + +// Below this, the wallet can't really do anything yet, so we keep nudging the +// user to the faucet. 5 USDC (7 decimals). +const MIN_USDC = 5n * 10_000_000n; + +const BTN = + "inline-flex shrink-0 cursor-pointer items-center justify-center rounded-lg bg-cyan px-5 py-2.5 font-body text-[14px] font-semibold whitespace-nowrap text-ink transition hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-60"; /** - * Onboarding prompt: if the connected wallet is missing a USDC trustline, show - * a one-time "Add USDC trustline" action plus a faucet link. Renders nothing - * once the trustline exists. Kept deliberately plain pending the redesign. + * Onboarding bar under the dashboard nav. Three states: + * 1. No USDC trustline -> add the trustline (a one-time signed tx). + * 2. Trustline, but < 5 USDC -> point the user at the Circle faucet to fund. + * (This is the state right after a successful trustline add, when the + * balance is still 0 — the bar must NOT vanish here.) + * 3. Funded (>= 5 USDC) -> render nothing. */ export default function UsdcTrustlinePrompt() { const { hasTrustline, submitting, error, addTrustline } = useUsdcTrustline(); + const { balance, loading: balLoading } = useUsdcBalance(); + + // Trustline state not known yet — don't flash a bar. + if (hasTrustline === null) return null; - // Only surface once we know a trustline is missing. - if (hasTrustline !== false) return null; + const needsTrustline = hasTrustline === false; + // Only judge "low" once the balance has actually loaded, so a funded wallet + // doesn't briefly flash the fund prompt while its balance reads back. + const lowBalance = hasTrustline === true && !balLoading && balance < MIN_USDC; + + if (!needsTrustline && !lowBalance) return null; return ( -
-

- Your wallet can't hold USDC yet. Add a one-time USDC trustline, - then get test USDC from the faucet. (Needs a funded account — use - “Get test XLM” in the wallet menu first.) -

- {error && ( -

- {error} -

- )} -
- - - Get test USDC → - +
+
+
+

+ {needsTrustline + ? "Enable USDC on your wallet" + : "Add some test USDC to get started"} +

+

+ {needsTrustline + ? "Add a one-time USDC trustline so your wallet can hold and save USDC. It needs a little XLM for the fee — use “Get test XLM” in the wallet menu first." + : "Your balance is low. Grab free test USDC from the Circle faucet (choose Stellar and paste your wallet address), and it’ll show up here."} +

+ {needsTrustline && error && ( +

{error}

+ )} +
+ + {needsTrustline ? ( + + ) : ( + + Get test USDC → + + )}
);