add voting power and commission data

Author: marslavish

examples/stake-tokens/components/react/all-validators.tsx

@@ -200,7 +200,14 @@ const AllValidators = ({
                   : ''
               }
               name={currentValidator?.description?.moniker || ''}
-              commission={5}
+              commission={
+                currentValidator?.commission?.commissionRates?.rate
+                  ? exponentiate(
+                      currentValidator.commission.commissionRates.rate,
+                      -16
+                    ).toFixed(0)
+                  : 0
+              }
               apr={22.08}
             />
             <ValidatorDesc
@@ -273,12 +280,18 @@ const AllValidators = ({
                   </Box>
                 </Td>
                 <Td>
-                  {/* {validator.voting} <Token color="blackAlpha.800" /> */}
-                  10,000,000&nbsp;
+                  {Math.floor(exponentiate(validator.tokens, -exp))}
+                  &nbsp;
                   <Token color="blackAlpha.800" token={coin.symbol} />
                 </Td>
-                {/* <Td>{validator.commission}</Td> */}
-                <Td>5%</Td>
+                <Td>
+                  {validator.commission?.commissionRates?.rate &&
+                    exponentiate(
+                      validator.commission.commissionRates.rate,
+                      -16
+                    ).toFixed(0)}
+                  %
+                </Td>
                 <Td>
                   <Box width="100%" display="flex" alignItems="center">
                     {/* <Text>{validator.apr}</Text> */}

examples/stake-tokens/components/react/delegate-modal.tsx

@@ -34,7 +34,7 @@ export const ValidatorInfo = ({
 }: {
   imgUrl: string;
   name: string;
-  commission: number;
+  commission: number | string;
   apr: number;
 }) => (
   <Flex alignItems="center" gap={4} mb={4}>

examples/stake-tokens/components/react/my-validators.tsx

@@ -161,6 +161,7 @@ const MyValidators = ({
       address: validator.operatorAddress,
       staked: exponentiate(delegation.balance!.amount, -exp),
       reward: Number(exponentiate(rewardAmount, -exp).toFixed(6)),
+      commission: validator?.commission?.commissionRates?.rate,
     };
   });
 
@@ -391,7 +392,11 @@ const MyValidators = ({
                   : ''
               }
               name={currentValidator?.name || ''}
-              commission={5}
+              commission={
+                currentValidator?.commission
+                  ? exponentiate(currentValidator.commission, -16).toFixed(0)
+                  : 0
+              }
               apr={22.08}
             />
             <ValidatorDesc description={currentValidator?.details || ''} />
@@ -443,7 +448,11 @@ const MyValidators = ({
                   : ''
               }
               name={currentValidator?.name || ''}
-              commission={5}
+              commission={
+                currentValidator?.commission
+                  ? exponentiate(currentValidator.commission, -16).toFixed(0)
+                  : 0
+              }
               apr={22.08}
             />
             <DelegateWarning unbondingDays={unbondingDays} />
@@ -494,7 +503,11 @@ const MyValidators = ({
                   : ''
               }
               name={currentValidator?.name || ''}
-              commission={5}
+              commission={
+                currentValidator?.commission
+                  ? exponentiate(currentValidator.commission, -16).toFixed(0)
+                  : 0
+              }
               apr={22.08}
             />
             <Stack direction="column" spacing={4}>
@@ -579,12 +592,18 @@ const MyValidators = ({
                         </Box>
                       </Td>
                       <Td>
-                        {/* {validator.voting} <Token color="blackAlpha.800" /> */}
-                        10,000,000&nbsp;
+                        {Math.floor(exponentiate(validator.tokens, -exp))}
+                        &nbsp;
                         <Token color="blackAlpha.800" token={coin.symbol} />
                       </Td>
-                      {/* <Td>{validator.commission}</Td> */}
-                      <Td>5%</Td>
+                      <Td>
+                        {validator.commission?.commissionRates?.rate &&
+                          exponentiate(
+                            validator.commission.commissionRates.rate,
+                            -16
+                          ).toFixed(0)}
+                        %
+                      </Td>
                       <Td>
                         <Box width="100%" display="flex" alignItems="center">
                           {/* <Text>{validator.apr}</Text> */}

examples/stake-tokens/components/react/staking.tsx

@@ -129,19 +129,22 @@ export const StakingSection = ({ chainName }: { chainName: ChainName }) => {
     const totalReward = Number(exponentiate(reward, -exp).toFixed(6));
 
     // ALL VALIDATORS
-    const { validators: allValidators } =
-      await client.cosmos.staking.v1beta1.validators({
-        status: cosmos.staking.v1beta1.bondStatusToJSON(
-          cosmos.staking.v1beta1.BondStatus.BOND_STATUS_BONDED
-        ),
-        pagination: {
-          key: new Uint8Array(),
-          offset: Long.fromNumber(0),
-          limit: Long.fromNumber(200),
-          countTotal: false,
-          reverse: false,
-        },
-      });
+    const { validators } = await client.cosmos.staking.v1beta1.validators({
+      status: cosmos.staking.v1beta1.bondStatusToJSON(
+        cosmos.staking.v1beta1.BondStatus.BOND_STATUS_BONDED
+      ),
+      pagination: {
+        key: new Uint8Array(),
+        offset: Long.fromNumber(0),
+        limit: Long.fromNumber(200),
+        countTotal: false,
+        reverse: false,
+      },
+    });
+
+    const allValidators = validators.sort((a, b) =>
+      new BigNumber(b.tokens).minus(new BigNumber(a.tokens)).toNumber()
+    );
 
     // DELEGATIONS
     const { delegationResponses: delegations } =

examples/stake-tokens/components/types.tsx

@@ -97,4 +97,5 @@ export interface MyValidator {
   staked: number;
   reward: number;
   identity: string | undefined;
+  commission: string | undefined;
 }