Show solo nominating panel when user has ledger data

packages/next-common/components/staking/overview/accountNomination/index.jsx

@@ -78,6 +78,7 @@ function Header() {
   const realAddress = useRealAddress();
   const { nominators } = useMyStakingLedger();
   const width = useWindowWidthContext();
+  const hasNominations = !!nominators?.targets?.length;
 
   return (
     <div className="flex flex-col gap-2">
@@ -92,7 +93,7 @@ function Header() {
           nominator={realAddress}
         />
         <div className="flex gap-[16px] items-center">
-          <NominatorQuickActions />
+          <NominatorQuickActions hasNominations={hasNominations} />
         </div>
       </div>
     </div>
@@ -102,14 +103,16 @@ function Header() {
 function StakingBalance() {
   const { loading, total, active, unlocking, unlocked, unlockingEntries } =
     useStakingBalance();
+  const { nominators } = useMyStakingLedger();
+  const hasNominations = !!nominators?.targets?.length;
 
   return (
     <div className="flex flex-col gap-2">
       <CollapsePanel
         className="w-[300px] [&>*:not(:last-child)]:mb-1"
         labelItem={
           <AccountBalanceItem
-            title="In nominating"
+            title={hasNominations ? "In nominating" : "In staking"}
             value={total?.toString() || 0}
             isLoading={loading}
           />

packages/next-common/components/staking/overview/accountNomination/modifyNomineesButton.jsx

@@ -3,28 +3,61 @@ import dynamicPopup from "next-common/lib/dynamic/popup";
 import { IconButton } from "next-common/components/styled/iconButton";
 import { MenuTreasuryProposal } from "@osn/icons/subsquare";
 import Tooltip from "next-common/components/tooltip";
+import { useMyStakingLedger } from "next-common/context/staking/myStakingLedger";
+import useSubStorage from "next-common/hooks/common/useSubStorage";
+import { useChainSettings } from "next-common/context/chain";
+import { cn, toPrecision } from "next-common/utils";
 
 const ModifyNomineesPopup = dynamicPopup(() =>
   import(
     "next-common/components/staking/overview/accountNomination/modifyNomineesPopup"
   ),
 );
 
-export default function ModifyNomineesButton() {
+export default function ModifyNomineesButton({ startNominating = false }) {
   const [modifyNomineePopup, setModifyNomineePopup] = useState(false);
+  const { ledger } = useMyStakingLedger();
+  const { decimals, symbol } = useChainSettings();
+  const { result: minNominatorBond, loading } = useSubStorage(
+    "staking",
+    "minNominatorBond",
+    [],
+  );
+
+  const minBond = BigInt(minNominatorBond?.toString() || 0);
+  const activeBond = BigInt(ledger?.active || 0);
+  const belowMinBond = !loading && !!ledger && activeBond < minBond;
 
   return (
     <>
-      <Tooltip content="Modify Nominees">
+      <Tooltip
+        content={
+          belowMinBond
+            ? `Bond at least ${toPrecision(
+                minBond,
+                decimals,
+              )} ${symbol} to nominate validators`
+            : startNominating
+            ? "Start Nominating"
+            : "Modify Nominees"
+        }
+      >
         <IconButton
-          className="text-theme500 bg-theme100 [&_svg_path]:fill-theme500"
+          className={cn(
+            "text-theme500 bg-theme100 [&_svg_path]:fill-theme500",
+            belowMinBond && "opacity-50 cursor-not-allowed",
+          )}
+          disabled={belowMinBond}
           onClick={() => setModifyNomineePopup(true)}
         >
           <MenuTreasuryProposal className="w-5 h-5" />
         </IconButton>
       </Tooltip>
       {modifyNomineePopup && (
-        <ModifyNomineesPopup onClose={() => setModifyNomineePopup(false)} />
+        <ModifyNomineesPopup
+          startNominating={startNominating}
+          onClose={() => setModifyNomineePopup(false)}
+        />
       )}
     </>
   );

packages/next-common/components/staking/overview/accountNomination/modifyNomineesPopup/index.js

@@ -124,10 +124,13 @@ function ModifyNomineesPopupContent() {
   );
 }
 
-export default function ModifyNomineesPopup({ onClose }) {
+export default function ModifyNomineesPopup({ onClose, startNominating }) {
   return (
     <SignerPopupWrapper onClose={onClose}>
-      <Popup title="Modify Nominees" onClose={onClose}>
+      <Popup
+        title={startNominating ? "Start Nominating" : "Modify Nominees"}
+        onClose={onClose}
+      >
         <ModifyNomineesPopupContent />
       </Popup>
     </SignerPopupWrapper>

packages/next-common/components/staking/overview/accountNomination/quickActions/index.jsx

@@ -4,15 +4,15 @@ import PayeeButton from "./payeeButton";
 import StopNominationButton from "./stopNominationButton";
 import ModifyNomineesButton from "../modifyNomineesButton";
 
-export default function NominatorQuickActions() {
+export default function NominatorQuickActions({ hasNominations }) {
   return (
     <div className="flex flex-col gap-[12px]">
       <div className="flex gap-[16px] items-center">
         <BondButton />
         <UnBondButton />
         <PayeeButton />
-        <StopNominationButton />
-        <ModifyNomineesButton />
+        {hasNominations && <StopNominationButton />}
+        <ModifyNomineesButton startNominating={!hasNominations} />
       </div>
     </div>
   );

packages/next/pages/staking/index.jsx

@@ -23,12 +23,19 @@ const isStakingSupported = !!getChainSettings(CHAIN).modules?.staking;
 
 function MyStaking() {
   const { poolMember, loading: isMyPoolLoading } = useMyPool();
-  const { nominators, loading: isMyStakingLedgerLoading } =
-    useMyStakingLedger();
+  const {
+    ledger,
+    nominators,
+    loading: isMyStakingLedgerLoading,
+  } = useMyStakingLedger();
   const width = useWindowWidthContext();
 
   const loading = isMyPoolLoading || isMyStakingLedgerLoading || !width;
 
+  // A chilled or fully unbonded nominator no longer has a `nominators` entry,
+  // but its staking ledger may still hold balances to withdraw or unbond.
+  const hasNominatorStake = !!nominators || !!ledger;
+
   if (loading) {
     return (
       <div className="flex justify-center">
@@ -37,7 +44,7 @@ function MyStaking() {
     );
   }
 
-  if (poolMember && !nominators) {
+  if (poolMember && !hasNominatorStake) {
     return (
       <ActiveEraStakersProvider>
         <AccountStaking />
@@ -46,7 +53,7 @@ function MyStaking() {
     );
   }
 
-  if (nominators && !poolMember) {
+  if (hasNominatorStake && !poolMember) {
     return (
       <ActiveEraStakersProvider>
         <AccountNomination />
@@ -55,7 +62,7 @@ function MyStaking() {
     );
   }
 
-  if (poolMember && nominators) {
+  if (poolMember && hasNominatorStake) {
     return (
       <ActiveEraStakersProvider>
         <AccountNomination />