diff --git a/app/components/validator-list-item/validator-list-item.props.ts b/app/components/validator-list-item/validator-list-item.props.ts index 4ef167b12..c73bf195d 100644 --- 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 index b201631ef..9f8ef6930 100644 --- 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 index 63b29f6ef..4bc9fe900 100644 --- 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) { + {!!index && ( + + )} { 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 { { ) } - private renderListItem: ListRenderItem = ({ item }) => this.renderItem(item) + private renderListItem: ListRenderItem = ({ item, index }) => this.renderItem(item, index) private renderScrollView = () => { return (