Rebag on lower limit breached (#7270)

packages/page-staking/src/Bags/Bag.tsx

@@ -18,11 +18,12 @@ import useBonded from './useBonded';
 
 interface Props {
   info: PalletBagsListListBag;
+  lower: BN;
   stashNodes?: StashNode[];
   upper: BN;
 }
 
-function Bag ({ info, stashNodes, upper }: Props): React.ReactElement<Props> {
+function Bag ({ info, lower, stashNodes, upper }: Props): React.ReactElement<Props> {
   const [[headId, trigger], setHeadId] = useState<[AccountId32 | null, number]>([null, 0]);
   const [isLoading, setLoading] = useState(true);
   const [isCompleted, list] = useBagEntries(headId, trigger);
@@ -52,6 +53,7 @@ function Bag ({ info, stashNodes, upper }: Props): React.ReactElement<Props> {
             isLoading={isLoading}
             key={stashId}
             list={bonded}
+            lower={lower}
             stashId={stashId}
             upper={upper}
           />

packages/page-staking/src/Bags/Stash.tsx

@@ -16,6 +16,7 @@ interface Props {
   className?: string;
   isLoading: boolean;
   list?: ListNode[];
+  lower: BN;
   stashId: string;
   upper: BN;
 }
@@ -27,13 +28,16 @@ interface Entry {
   stashInfo: ListNode | null;
 }
 
-function findEntry (upper: BN, stashId: string, list: ListNode[] = []): Entry {
+function findEntry (upper: BN, lower: BN, stashId: string, list: ListNode[] = []): Entry {
   const stashInfo = list.find((o) => o.stashId === stashId) || null;
   const other = (stashInfo && stashInfo.jump && list.find((o) => o.stashId === stashInfo.jump)) || null;
 
   return {
     canJump: !!other,
-    canRebag: !!stashInfo && stashInfo.bonded.gt(upper),
+    canRebag: !!stashInfo && (
+      stashInfo.bonded.gt(upper) ||
+      stashInfo.bonded.lt(lower)
+    ),
     jumpCount: stashInfo && other
       ? (stashInfo.index - other.index)
       : 0,
@@ -41,12 +45,12 @@ function findEntry (upper: BN, stashId: string, list: ListNode[] = []): Entry {
   };
 }
 
-function Stash ({ className, isLoading, list, stashId, upper }: Props): React.ReactElement<Props> {
+function Stash ({ className, isLoading, list, lower, stashId, upper }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const { canJump, canRebag, jumpCount, stashInfo } = useMemo(
-    () => findEntry(upper, stashId, list),
-    [list, stashId, upper]
+    () => findEntry(upper, lower, stashId, list),
+    [list, lower, stashId, upper]
   );
 
   return (

packages/page-staking/src/Bags/index.tsx

@@ -43,11 +43,11 @@ function Bags ({ ownStashes }: Props): React.ReactElement<Props> {
       ? [...list].sort((a, b) =>
         nodes[a.key]
           ? nodes[b.key]
-            ? b.id.cmp(a.id)
+            ? 0
             : -1
           : nodes[b.key]
             ? 1
-            : b.id.cmp(a.id)
+            : 0
       )
       : null,
     [list, nodes]
@@ -61,12 +61,13 @@ function Bags ({ ownStashes }: Props): React.ReactElement<Props> {
         emptySpinner={t<string>('Retrieving all available bags, this will take some time')}
         header={headerRef.current}
       >
-        {sorted && sorted.map(({ id, info, key }) => (
+        {sorted && sorted.map(({ info, key, lower, upper }) => (
           <Bag
             info={info}
             key={key}
+            lower={lower}
             stashNodes={nodes[key]}
-            upper={id}
+            upper={upper}
           />
         ))}
       </Table>

packages/page-staking/src/Bags/useBagsList.ts

@@ -8,19 +8,29 @@ import type { BN } from '@polkadot/util';
 import { useEffect, useState } from 'react';
 
 import { createNamedHook, useApi, useCall } from '@polkadot/react-hooks';
+import { BN_ZERO } from '@polkadot/util';
 
 interface Result {
-  id: BN;
   info: PalletBagsListListBag;
   key: string;
+  lower: BN;
+  upper: BN;
 }
 
 const multiOptions = {
-  transform: ([[ids], opts]: [[BN[]], Option<PalletBagsListListBag>[]]): Result[] =>
-    ids
+  transform: ([[ids], opts]: [[BN[]], Option<PalletBagsListListBag>[]]): Result[] => {
+    const sorted = ids
       .map((id, index): [BN, Option<PalletBagsListListBag>] => [id, opts[index]])
       .filter(([, o]) => o.isSome)
-      .map(([id, o]): Result => ({ id, info: o.unwrap(), key: id.toString() })),
+      .map(([upper, o]): Result => ({ info: o.unwrap(), key: upper.toString(), lower: BN_ZERO, upper }))
+      .sort((a, b) => b.upper.cmp(a.upper));
+
+    return sorted.map((entry, index) =>
+      (index === (sorted.length - 1))
+        ? entry
+        : { ...entry, lower: sorted[index + 1].upper }
+    );
+  },
   withParamsTransform: true
 };