From a7cd7a58f2aef47edc5766f97d543d2953201314 Mon Sep 17 00:00:00 2001
From: Fouad <fmtabbara@hotmail.co.uk>
Date: Thu, 3 Nov 2022 13:44:09 +0000
Subject: [PATCH] Bugfix/delegations sort by no bonded node (#1737)

* use sorting function

* create hardcoded examples in  storybook
---
 .../Delegation/DelegationList.stories.tsx     | 234 +++++++++++++++++-
 .../components/Delegation/DelegationList.tsx  |   2 +-
 2 files changed, 233 insertions(+), 3 deletions(-)

diff --git a/nym-wallet/src/components/Delegation/DelegationList.stories.tsx b/nym-wallet/src/components/Delegation/DelegationList.stories.tsx
index 57c4f3671c..57ed73c380 100644
--- a/nym-wallet/src/components/Delegation/DelegationList.stories.tsx
+++ b/nym-wallet/src/components/Delegation/DelegationList.stories.tsx
@@ -13,7 +13,7 @@ const explorerUrl = 'https://sandbox-explorer.nymtech.net/network-components/mix
 
 export const items: DelegationWithEverything[] = [
   {
-    mix_id: 1234,
+    mix_id: 1,
     node_identity: 'FiojKW7oY9WQmLCiYAsCA21tpowZHS6zcUoyYm319p6Z',
     delegated_on_iso_datetime: new Date(2021, 1, 1).toDateString(),
     unclaimed_rewards: { amount: '0.05', denom: 'nym' },
@@ -36,7 +36,7 @@ export const items: DelegationWithEverything[] = [
     mixnode_is_unbonding: true,
   },
   {
-    mix_id: 5678,
+    mix_id: 2,
     node_identity: 'DT8S942S8AQs2zKHS9SVo1GyHmuca3pfL2uLhLksJ3D8',
     amount: { amount: '100', denom: 'nym' },
     delegated_on_iso_datetime: new Date(2021, 1, 2).toDateString(),
@@ -58,6 +58,236 @@ export const items: DelegationWithEverything[] = [
     pending_events: [],
     mixnode_is_unbonding: true,
   },
+  {
+    mix_id: 3,
+    node_identity: '',
+    amount: { amount: '100', denom: 'nym' },
+    delegated_on_iso_datetime: new Date(2021, 1, 2).toDateString(),
+    unclaimed_rewards: { amount: '0.05', denom: 'nym' },
+    cost_params: {
+      profit_margin_percent: '0.1122323949234',
+      interval_operating_cost: {
+        amount: '40',
+        denom: 'nym',
+      },
+    },
+    accumulated_by_delegates: { amount: '50', denom: 'nym' },
+    accumulated_by_operator: { amount: '100', denom: 'nym' },
+    owner: '',
+    block_height: BigInt(4000),
+    stake_saturation: '0.5',
+    avg_uptime_percent: 0.1,
+    uses_vesting_contract_tokens: true,
+    pending_events: [],
+    mixnode_is_unbonding: true,
+  },
+  {
+    mix_id: 4,
+    node_identity: 'DT8S942S8AQs2zKHS9SVo1GyHmuca3pfL2uLhLksJ3D8',
+    amount: { amount: '100', denom: 'nym' },
+    delegated_on_iso_datetime: new Date(2021, 1, 2).toDateString(),
+    unclaimed_rewards: { amount: '0.05', denom: 'nym' },
+    cost_params: {
+      profit_margin_percent: '0.1122323949234',
+      interval_operating_cost: {
+        amount: '40',
+        denom: 'nym',
+      },
+    },
+    accumulated_by_delegates: { amount: '50', denom: 'nym' },
+    accumulated_by_operator: { amount: '100', denom: 'nym' },
+    owner: '',
+    block_height: BigInt(4000),
+    stake_saturation: '0.5',
+    avg_uptime_percent: 0.1,
+    uses_vesting_contract_tokens: true,
+    pending_events: [],
+    mixnode_is_unbonding: true,
+  },
+  {
+    mix_id: 5,
+    node_identity: 'DT8S942S8AQs2zKHS9SVo1GyHmuca3pfL2uLhLksJ3D8',
+    amount: { amount: '100', denom: 'nym' },
+    delegated_on_iso_datetime: new Date(2021, 1, 2).toDateString(),
+    unclaimed_rewards: { amount: '0.05', denom: 'nym' },
+    cost_params: {
+      profit_margin_percent: '0.1122323949234',
+      interval_operating_cost: {
+        amount: '40',
+        denom: 'nym',
+      },
+    },
+    accumulated_by_delegates: { amount: '50', denom: 'nym' },
+    accumulated_by_operator: { amount: '100', denom: 'nym' },
+    owner: '',
+    block_height: BigInt(4000),
+    stake_saturation: '0.5',
+    avg_uptime_percent: 0.1,
+    uses_vesting_contract_tokens: true,
+    pending_events: [],
+    mixnode_is_unbonding: true,
+  },
+  {
+    mix_id: 6,
+    node_identity: '',
+    amount: { amount: '100', denom: 'nym' },
+    delegated_on_iso_datetime: new Date(2021, 1, 2).toDateString(),
+    unclaimed_rewards: { amount: '0.05', denom: 'nym' },
+    cost_params: {
+      profit_margin_percent: '0.1122323949234',
+      interval_operating_cost: {
+        amount: '40',
+        denom: 'nym',
+      },
+    },
+    accumulated_by_delegates: { amount: '50', denom: 'nym' },
+    accumulated_by_operator: { amount: '100', denom: 'nym' },
+    owner: '',
+    block_height: BigInt(4000),
+    stake_saturation: '0.5',
+    avg_uptime_percent: 0.1,
+    uses_vesting_contract_tokens: true,
+    pending_events: [],
+    mixnode_is_unbonding: true,
+  },
+  {
+    mix_id: 7,
+    node_identity: 'FiojKW7oY9WQmLCiYAsCA21tpowZHS6zcUoyYm319p6Z',
+    delegated_on_iso_datetime: new Date(2021, 1, 1).toDateString(),
+    unclaimed_rewards: { amount: '0.05', denom: 'nym' },
+    amount: { amount: '10', denom: 'nym' },
+    cost_params: {
+      profit_margin_percent: '0.1122323949234',
+      interval_operating_cost: {
+        amount: '40',
+        denom: 'nym',
+      },
+    },
+    accumulated_by_delegates: { amount: '50', denom: 'nym' },
+    accumulated_by_operator: { amount: '100', denom: 'nym' },
+    owner: '',
+    block_height: BigInt(100),
+    stake_saturation: '0.5',
+    avg_uptime_percent: 0.5,
+    uses_vesting_contract_tokens: false,
+    pending_events: [],
+    mixnode_is_unbonding: true,
+  },
+  {
+    mix_id: 8,
+    node_identity: 'DT8S942S8AQs2zKHS9SVo1GyHmuca3pfL2uLhLksJ3D8',
+    amount: { amount: '100', denom: 'nym' },
+    delegated_on_iso_datetime: new Date(2021, 1, 2).toDateString(),
+    unclaimed_rewards: { amount: '0.05', denom: 'nym' },
+    cost_params: {
+      profit_margin_percent: '0.1122323949234',
+      interval_operating_cost: {
+        amount: '40',
+        denom: 'nym',
+      },
+    },
+    accumulated_by_delegates: { amount: '50', denom: 'nym' },
+    accumulated_by_operator: { amount: '100', denom: 'nym' },
+    owner: '',
+    block_height: BigInt(4000),
+    stake_saturation: '0.5',
+    avg_uptime_percent: 0.1,
+    uses_vesting_contract_tokens: true,
+    pending_events: [],
+    mixnode_is_unbonding: true,
+  },
+  {
+    mix_id: 9,
+    node_identity: '',
+    amount: { amount: '100', denom: 'nym' },
+    delegated_on_iso_datetime: new Date(2021, 1, 2).toDateString(),
+    unclaimed_rewards: { amount: '0.05', denom: 'nym' },
+    cost_params: {
+      profit_margin_percent: '0.1122323949234',
+      interval_operating_cost: {
+        amount: '40',
+        denom: 'nym',
+      },
+    },
+    accumulated_by_delegates: { amount: '50', denom: 'nym' },
+    accumulated_by_operator: { amount: '100', denom: 'nym' },
+    owner: '',
+    block_height: BigInt(4000),
+    stake_saturation: '0.5',
+    avg_uptime_percent: 0.1,
+    uses_vesting_contract_tokens: true,
+    pending_events: [],
+    mixnode_is_unbonding: true,
+  },
+  {
+    mix_id: 10,
+    node_identity: 'DT8S942S8AQs2zKHS9SVo1GyHmuca3pfL2uLhLksJ3D8',
+    amount: { amount: '100', denom: 'nym' },
+    delegated_on_iso_datetime: new Date(2021, 1, 2).toDateString(),
+    unclaimed_rewards: { amount: '0.05', denom: 'nym' },
+    cost_params: {
+      profit_margin_percent: '0.1122323949234',
+      interval_operating_cost: {
+        amount: '40',
+        denom: 'nym',
+      },
+    },
+    accumulated_by_delegates: { amount: '50', denom: 'nym' },
+    accumulated_by_operator: { amount: '100', denom: 'nym' },
+    owner: '',
+    block_height: BigInt(4000),
+    stake_saturation: '0.5',
+    avg_uptime_percent: 0.1,
+    uses_vesting_contract_tokens: true,
+    pending_events: [],
+    mixnode_is_unbonding: true,
+  },
+  {
+    mix_id: 11,
+    node_identity: 'DT8S942S8AQs2zKHS9SVo1GyHmuca3pfL2uLhLksJ3D8',
+    amount: { amount: '100', denom: 'nym' },
+    delegated_on_iso_datetime: new Date(2021, 1, 2).toDateString(),
+    unclaimed_rewards: { amount: '0.05', denom: 'nym' },
+    cost_params: {
+      profit_margin_percent: '0.1122323949234',
+      interval_operating_cost: {
+        amount: '40',
+        denom: 'nym',
+      },
+    },
+    accumulated_by_delegates: { amount: '50', denom: 'nym' },
+    accumulated_by_operator: { amount: '100', denom: 'nym' },
+    owner: '',
+    block_height: BigInt(4000),
+    stake_saturation: '0.5',
+    avg_uptime_percent: 0.1,
+    uses_vesting_contract_tokens: true,
+    pending_events: [],
+    mixnode_is_unbonding: true,
+  },
+  {
+    mix_id: 12,
+    node_identity: '',
+    amount: { amount: '100', denom: 'nym' },
+    delegated_on_iso_datetime: new Date(2021, 1, 2).toDateString(),
+    unclaimed_rewards: { amount: '0.05', denom: 'nym' },
+    cost_params: {
+      profit_margin_percent: '0.1122323949234',
+      interval_operating_cost: {
+        amount: '40',
+        denom: 'nym',
+      },
+    },
+    accumulated_by_delegates: { amount: '50', denom: 'nym' },
+    accumulated_by_operator: { amount: '100', denom: 'nym' },
+    owner: '',
+    block_height: BigInt(4000),
+    stake_saturation: '0.5',
+    avg_uptime_percent: 0.1,
+    uses_vesting_contract_tokens: true,
+    pending_events: [],
+    mixnode_is_unbonding: true,
+  },
 ];
 
 export const WithData = () => <DelegationList items={items} explorerUrl={explorerUrl} />;
diff --git a/nym-wallet/src/components/Delegation/DelegationList.tsx b/nym-wallet/src/components/Delegation/DelegationList.tsx
index 3aad9785e0..a6c2ac1bcf 100644
--- a/nym-wallet/src/components/Delegation/DelegationList.tsx
+++ b/nym-wallet/src/components/Delegation/DelegationList.tsx
@@ -109,7 +109,7 @@ export const DelegationList: React.FC<{
         <EnhancedTableHead order={order} orderBy={orderBy} onRequestSort={handleRequestSort} />
         <TableBody>
           {items.length ? (
-            items.map((item) => {
+            items.sort(sortByUnbondedMixnodeFirst).map((item) => {
               if (isPendingDelegation(item)) return <PendingDelegationItem item={item} explorerUrl={explorerUrl} />;
               if (isDelegation(item))
                 return (