💄 Add index for validators list

likecoin · Mar 28, 2022 · 1a8479b · 1a8479b
1 parent 2ba42c3
commit 1a8479b
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 2 deletions.
diff --git a/app/components/validator-list-item/validator-list-item.props.ts b/app/components/validator-list-item/validator-list-item.props.ts
@@ -6,6 +6,11 @@ export interface ValidatorListItemProps extends TouchableOpacityProps {
    */
   icon?: string
 
+  /**
+   * The index of the list item
+   */
+  index?: number
+
   /**
    * The title text
    */

diff --git a/app/components/validator-list-item/validator-list-item.style.ts b/app/components/validator-list-item/validator-list-item.style.ts
@@ -16,8 +16,15 @@ export default StyleSheet.create({
     marginRight: spacing[3],
     backgroundColor: color.palette.white,
   } as ImageStyle,
+  INDEX: {
+    fontSize: 10,
+    fontWeight: "600",
+    minWidth: 16,
+    marginRight: 8,
+  } as TextStyle,
   INNER: {
     flexDirection: "row",
+    alignItems: "center",
   } as ViewStyle,
   LEFT_DETAIL: {
     flex: 1,

diff --git a/app/components/validator-list-item/validator-list-item.tsx b/app/components/validator-list-item/validator-list-item.tsx
@@ -20,6 +20,7 @@ import { color } from "../../theme"
 export function ValidatorListItem(props: ValidatorListItemProps) {
   const {
     title,
+    index = 0,
     icon,
     subtitle,
     rightTitle,
@@ -44,6 +45,13 @@ export function ValidatorListItem(props: ValidatorListItemProps) {
     <TouchableOpacity style={[STYLE.ROOT, style]} {...rest}>
       <Sheet style={sheetStyle}>
         <View style={STYLE.INNER}>
+          {!!index && (
+            <Text
+              text={`${index}`}
+              color={titleColor}
+              style={STYLE.INDEX}
+            />
+          )}
           <Image
             source={{ uri: icon }}
             style={STYLE.ICON}

diff --git a/app/components/validator-list/validator-list.tsx b/app/components/validator-list/validator-list.tsx
@@ -54,7 +54,7 @@ export class ValidatorList extends React.Component<Props> {
 
   private keyExtractor = (validator: Validator) => validator.operatorAddress 
 
-  private renderItem = (validator: Validator) => {
+  private renderItem = (validator: Validator, index?: number) => {
     const { formatBalance, formatRewards } = this.props.chain
     const delegation = this.props.chain.wallet.delegations.get(validator.operatorAddress)
     const delegatedAmount = formatBalance(delegation ? delegation.balance : undefined)
@@ -64,6 +64,7 @@ export class ValidatorList extends React.Component<Props> {
       <ValidatorListItem
         key={validator.operatorAddress}
         icon={validator.avatar}
+        index={index + 1}
         title={validator.moniker}
         subtitle={this.props.chain.getValidatorExpectedReturnsPercentage(validator)}
         rightTitle={delegatedAmount}
@@ -74,7 +75,7 @@ export class ValidatorList extends React.Component<Props> {
     )
   }
 
-  private renderListItem: ListRenderItem<Validator> = ({ item }) => this.renderItem(item)
+  private renderListItem: ListRenderItem<Validator> = ({ item, index }) => this.renderItem(item, index)
 
   private renderScrollView = () => {
     return (