refactor: split StakingOverview to separate components

anoma · Jun 28, 2023 · 866a188 · 866a188
1 parent d232c43
commit 866a188
Showing 1 changed file with 87 additions and 44 deletions.
diff --git a/apps/namada-interface/src/App/Staking/StakingOverview/StakingOverview.tsx b/apps/namada-interface/src/App/Staking/StakingOverview/StakingOverview.tsx
@@ -123,13 +123,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)
@@ -147,44 +167,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}
+    />
   );
 };