#66 Unifying data types and fake data in staking

apps/namada-interface/src/App/Staking/Staking.tsx

@@ -5,7 +5,11 @@ import { StakingContainer } from "./Staking.components";
 import { StakingOverview } from "./StakingOverview";
 import { ValidatorDetails } from "./ValidatorDetails";
 import { TopLevelRoute, StakingAndGovernanceSubRoute } from "App/types";
-import { Validator } from "slices/StakingAndGovernance";
+import {
+  MyBalanceEntry,
+  Validator,
+  MyValidators,
+} from "slices/StakingAndGovernance";
 
 const initialTitle = "Staking";
 
@@ -38,8 +42,11 @@ const validatorNameFromUrl = (path: string): string | undefined => {
 };
 
 type Props = {
+  myBalances: MyBalanceEntry[];
   validators: Validator[];
+  myValidators: MyValidators[];
   selectedValidator: string | undefined;
+  fetchMyBalances: () => void;
   fetchValidators: () => void;
   fetchValidatorDetails: (validatorId: string) => void;
 };
@@ -50,7 +57,14 @@ export const Staking = (props: Props): JSX.Element => {
   const location = useLocation();
   const navigate = useNavigate();
 
-  const { fetchValidators, fetchValidatorDetails, validators } = props;
+  const {
+    fetchMyBalances,
+    fetchValidators,
+    fetchValidatorDetails,
+    myBalances,
+    validators,
+    myValidators,
+  } = props;
 
   // this is just so we can se the title/breadcrumb
   // in real case we do this cleanly in a callback that
@@ -70,6 +84,7 @@ export const Staking = (props: Props): JSX.Element => {
   });
 
   useEffect(() => {
+    fetchMyBalances();
     fetchValidators();
   }, []);
 
@@ -110,7 +125,8 @@ export const Staking = (props: Props): JSX.Element => {
           element={
             <StakingOverview
               navigateToValidatorDetails={navigateToValidatorDetails}
-              ownValidators={[]}
+              myBalances={myBalances}
+              myValidators={myValidators}
               validators={validators}
             />
           }

apps/namada-interface/src/App/Staking/StakingOverview/StakingOverview.tsx

@@ -5,27 +5,25 @@ import {
   TableDimmedCell,
   TableConfigurations,
 } from "components/Table";
-
-import { myBalancesData, myValidatorData } from "./fakeData";
 import {
-  MyBalanceRow,
+  MyBalanceEntry,
   Validator,
-  MyStaking,
+  MyValidators,
 } from "slices/StakingAndGovernance";
 
 // My Balances table row renderer and configuration
-const myBalancesRowRenderer = (myBalanceRow: MyBalanceRow): JSX.Element => {
+const myBalancesRowRenderer = (myBalanceEntry: MyBalanceEntry): JSX.Element => {
   return (
     <>
-      <td>{myBalanceRow.key}</td>
-      <td>{myBalanceRow.baseCurrency}</td>
+      <td>{myBalanceEntry.key}</td>
+      <td>{myBalanceEntry.baseCurrency}</td>
       <td>
-        <TableDimmedCell>{myBalanceRow.fiatCurrency}</TableDimmedCell>
+        <TableDimmedCell>{myBalanceEntry.fiatCurrency}</TableDimmedCell>
       </td>
     </>
   );
 };
-const myBalancesConfigurations: TableConfigurations<MyBalanceRow, never> = {
+const myBalancesConfigurations: TableConfigurations<MyBalanceEntry, never> = {
   title: "My Balances",
   rowRenderer: myBalancesRowRenderer,
   columns: [
@@ -36,15 +34,15 @@ const myBalancesConfigurations: TableConfigurations<MyBalanceRow, never> = {
 };
 
 const MyValidatorsRowRenderer = (
-  myValidatorRow: MyStaking,
+  myValidatorRow: MyValidators,
   callbacks?: ValidatorsCallbacks
 ): JSX.Element => {
   return (
     <>
       <td>
         <TableLink
           onClick={() => {
-            const formattedValidatorName = myValidatorRow.name
+            const formattedValidatorName = myValidatorRow.validator.name
               .replace(" ", "-")
               .toLowerCase();
 
@@ -56,7 +54,7 @@ const MyValidatorsRowRenderer = (
             callbacks && callbacks.onClickValidator(formattedValidatorName);
           }}
         >
-          {myValidatorRow.name}
+          {myValidatorRow.validator.name}
         </TableLink>
       </td>
       <td>{myValidatorRow.stakingStatus}</td>
@@ -67,7 +65,7 @@ const MyValidatorsRowRenderer = (
 
 const getMyValidatorsConfiguration = (
   navigateToValidatorDetails: (validatorId: string) => void
-): TableConfigurations<MyStaking, ValidatorsCallbacks> => {
+): TableConfigurations<MyValidators, ValidatorsCallbacks> => {
   return {
     title: "My Validators",
     rowRenderer: MyValidatorsRowRenderer,
@@ -134,12 +132,14 @@ const getAllValidatorsConfiguration = (
 
 type Props = {
   navigateToValidatorDetails: (validatorId: string) => void;
+  myBalances: MyBalanceEntry[];
   validators: Validator[];
-  ownValidators: Validator[];
+  myValidators: MyValidators[];
 };
 
 export const StakingOverview = (props: Props): JSX.Element => {
-  const { navigateToValidatorDetails, validators } = props;
+  const { navigateToValidatorDetails, myBalances, validators, myValidators } =
+    props;
 
   // we get the configurations for 2 tables that contain callbacks
   const myValidatorsConfiguration = getMyValidatorsConfiguration(
@@ -154,14 +154,15 @@ export const StakingOverview = (props: Props): JSX.Element => {
       {/* my balances */}
       <Table
         title="My Balances"
-        data={myBalancesData}
+        data={myBalances}
         tableConfigurations={myBalancesConfigurations}
       />
 
       {/* my validators */}
       <Table
         title="My Validators"
-        data={myValidatorData}
+        // data={myValidatorData}
+        data={myValidators}
         tableConfigurations={myValidatorsConfiguration}
       />
 

apps/namada-interface/src/App/Staking/ValidatorDetails/ValidatorDetails.tsx

@@ -1,7 +1,4 @@
-import { useState } from "react";
-import { MainContainerNavigation } from "App/StakingAndGovernance/MainContainerNavigation";
 import { ValidatorDetailsContainer } from "./ValidatorDetails.components";
-import { Table } from "components/Table";
 
 type Props = {
   validator?: string;

apps/namada-interface/src/App/StakingAndGovernance/StakingAndGovernance.tsx

@@ -13,6 +13,7 @@ import {
 } from "App/types";
 
 import {
+  fetchMyBalances,
   fetchValidators,
   fetchValidatorDetails,
 } from "slices/StakingAndGovernance";
@@ -27,7 +28,9 @@ export const StakingAndGovernance = (): JSX.Element => {
   const stakingAndGovernance = useAppSelector(
     (state: RootState) => state.stakingAndGovernance
   );
-  const { validators, selectedValidatorId } = stakingAndGovernance;
+  const { myBalances, validators, myValidators, selectedValidatorId } =
+    stakingAndGovernance;
+
   // we need one of the sub routes, staking alone has nothing
   const stakingAndGovernanceSubRoute =
     locationToStakingAndGovernanceSubRoute(location);
@@ -47,6 +50,10 @@ export const StakingAndGovernance = (): JSX.Element => {
     dispatch(fetchValidators());
   };
 
+  const fetchMyBalancesCallback = (): void => {
+    dispatch(fetchMyBalances());
+  };
+
   // triggered by the url load or user click in <Staking />
   const fetchValidatorDetailsCallback = (validatorId: string): void => {
     dispatch(fetchValidatorDetails(validatorId));
@@ -59,8 +66,11 @@ export const StakingAndGovernance = (): JSX.Element => {
           path={`${StakingAndGovernanceSubRoute.Staking}/*`}
           element={
             <Staking
+              myBalances={myBalances}
               validators={validators}
+              myValidators={myValidators}
               selectedValidator={selectedValidatorId}
+              fetchMyBalances={fetchMyBalancesCallback}
               fetchValidators={fetchValidatorsCallback}
               fetchValidatorDetails={fetchValidatorDetailsCallback}
             />

apps/namada-interface/src/components/Table/Table.tsx

@@ -1,5 +1,3 @@
-import { useState } from "react";
-import { MainContainerNavigation } from "App/StakingAndGovernance/MainContainerNavigation";
 import { TableContainer, TableElement } from "./Table.components";
 import { TableConfigurations, RowBase, ColumnDefinition } from "./types";
 

apps/namada-interface/src/slices/StakingAndGovernance/README.md

@@ -1,3 +1,8 @@
 # Staking And Governance
-This part of hte state deals with the data that is mostly under Staking & Governance in the UI. It allows the user to perform all the actions regarding Staking, Governance and Public Goods Funding.
+This part of the state deals with the data that is under Staking & Governance in the UI. It allows the user to perform all the actions regarding Staking, Governance and Public Goods Funding.
+
+These are the UIs the state is mainly serving:
+* **Staking** - [https://specs.anoma.net/main/architecture/clients/web-wallet.html#stakingoverview](https://specs.anoma.net/main/architecture/clients/web-wallet.html#stakingoverview).
+* **Governance** - [https://specs.anoma.net/main/architecture/clients/web-wallet.html#governanceproposals](https://specs.anoma.net/main/architecture/clients/web-wallet.html#governanceproposals).
+* **Public goods funding** - [https://specs.anoma.net/main/architecture/clients/web-wallet.html#publicgoodsfundingoverview](https://specs.anoma.net/main/architecture/clients/web-wallet.html#publicgoodsfundingoverview).