From 3d925cd5b19e44a4fdcae53a4e851b0dccaf77d6 Mon Sep 17 00:00:00 2001
From: Eric Corson <public@giraffedev.com>
Date: Wed, 28 Jun 2023 09:36:58 +0900
Subject: [PATCH] refactor: split StakingOverview to separate components

---
 .../StakingOverview/StakingOverview.tsx       | 131 ++++++++++++------
 1 file changed, 87 insertions(+), 44 deletions(-)

diff --git a/apps/namada-interface/src/App/Staking/StakingOverview/StakingOverview.tsx b/apps/namada-interface/src/App/Staking/StakingOverview/StakingOverview.tsx
index 0a838cd60e..3fc954f0a1 100644
--- a/apps/namada-interface/src/App/Staking/StakingOverview/StakingOverview.tsx
+++ b/apps/namada-interface/src/App/Staking/StakingOverview/StakingOverview.tsx
@@ -125,13 +125,33 @@ export const StakingOverview = (props: Props): JSX.Element => {
   const { navigateToValidatorDetails, validators, myValidators, accounts } =
     props;
 
-  // we get the configurations for 2 tables that contain callbacks
-  const myValidatorsConfiguration = getMyValidatorsConfiguration(
-    navigateToValidatorDetails
-  );
-  const allValidatorsConfiguration = getAllValidatorsConfiguration(
-    navigateToValidatorDetails
+  return (
+    <StakingOverviewContainer>
+      <StakingBalancesList
+        myValidators={myValidators}
+        accounts={accounts}
+      />
+
+      <MyValidatorsTable
+        myValidators={myValidators}
+        navigateToValidatorDetails={navigateToValidatorDetails}
+      />
+
+      <AllValidatorsTable
+        validators={validators}
+        navigateToValidatorDetails={navigateToValidatorDetails}
+      />
+    </StakingOverviewContainer>
   );
+};
+
+const StakingBalancesList: React.FC<{
+  myValidators: MyValidators[];
+  accounts: Account[];
+}> = ({
+  myValidators,
+  accounts,
+}) => {
   const totalBonded = myValidators.reduce(
     (acc, validator) => acc.plus(validator.stakedAmount),
     new BigNumber(0)
@@ -149,44 +169,67 @@ export const StakingOverview = (props: Props): JSX.Element => {
   }, new BigNumber(0));
 
   return (
-    <StakingOverviewContainer>
-      {/* my balances */}
-      <StakingBalances>
-        <StakingBalancesLabel>Total Balance</StakingBalancesLabel>
-        <StakingBalancesValue>NAM {totalBalance.toString()}</StakingBalancesValue>
-
-        <StakingBalancesLabel>Total Bonded</StakingBalancesLabel>
-        <StakingBalancesValue>NAM {totalBonded.toString()}</StakingBalancesValue>
-
-        <StakingBalancesLabel>Total Unbonded</StakingBalancesLabel>
-        <StakingBalancesValue>NAM {totalUnbonded.toString()}</StakingBalancesValue>
-
-        <StakingBalancesLabel>Total Withdrawable</StakingBalancesLabel>
-        <StakingBalancesValue>NAM {totalWithdrawable.toString()}</StakingBalancesValue>
-
-        <StakingBalancesLabel>Pending Rewards</StakingBalancesLabel>
-        <StakingBalancesValue>TBD</StakingBalancesValue>
-
-        <StakingBalancesLabel>Available for bonding</StakingBalancesLabel>
-        <StakingBalancesValue>
-          NAM {totalBalance.minus(totalBonded).toString()}
-        </StakingBalancesValue>
-      </StakingBalances>
-
-      {/* my validators */}
-      <Table
-        title="My Validators"
-        // data={myValidatorData}
-        data={myValidators}
-        tableConfigurations={myValidatorsConfiguration}
-      />
+    <StakingBalances>
+      <StakingBalancesLabel>Total Balance</StakingBalancesLabel>
+      <StakingBalancesValue>NAM {totalBalance.toString()}</StakingBalancesValue>
 
-      {/* all validators */}
-      <Table
-        title="All Validators"
-        data={validators}
-        tableConfigurations={allValidatorsConfiguration}
-      />
-    </StakingOverviewContainer>
+      <StakingBalancesLabel>Total Bonded</StakingBalancesLabel>
+      <StakingBalancesValue>NAM {totalBonded.toString()}</StakingBalancesValue>
+
+      <StakingBalancesLabel>Total Unbonded</StakingBalancesLabel>
+      <StakingBalancesValue>NAM {totalUnbonded.toString()}</StakingBalancesValue>
+
+      <StakingBalancesLabel>Total Withdrawable</StakingBalancesLabel>
+      <StakingBalancesValue>NAM {totalWithdrawable.toString()}</StakingBalancesValue>
+
+      <StakingBalancesLabel>Pending Rewards</StakingBalancesLabel>
+      <StakingBalancesValue>TBD</StakingBalancesValue>
+
+      <StakingBalancesLabel>Available for bonding</StakingBalancesLabel>
+      <StakingBalancesValue>
+        NAM {totalBalance.minus(totalBonded).toString()}
+      </StakingBalancesValue>
+    </StakingBalances>
+  );
+};
+
+const MyValidatorsTable: React.FC<{
+  myValidators: MyValidators[];
+  navigateToValidatorDetails: (validatorId: string) => void;
+}> = ({
+  myValidators,
+  navigateToValidatorDetails,
+}) => {
+  const myValidatorsConfiguration = getMyValidatorsConfiguration(
+    navigateToValidatorDetails
+  );
+
+  return (
+    <Table
+      title="My Validators"
+      // data={myValidatorData}
+      data={myValidators}
+      tableConfigurations={myValidatorsConfiguration}
+    />
+  );
+};
+
+const AllValidatorsTable: React.FC<{
+  validators: Validator[];
+  navigateToValidatorDetails: (validatorId: string) => void;
+}> = ({
+  validators,
+  navigateToValidatorDetails,
+}) => {
+  const allValidatorsConfiguration = getAllValidatorsConfiguration(
+    navigateToValidatorDetails
+  );
+
+  return (
+    <Table
+      title="All Validators"
+      data={validators}
+      tableConfigurations={allValidatorsConfiguration}
+    />
   );
 };