From c981393f88c24d80a8544bf3c15547196f849fdc Mon Sep 17 00:00:00 2001 From: Sergey Chystiakov Date: Sun, 21 Jul 2024 17:18:29 +0200 Subject: [PATCH] adjust delegations list styles --- blue_modules/Mintlayer.js | 13 ++++- class/wallets/mintlayer-wallet.js | 16 +++++- screen/staking/delegationDetails.js | 10 +++- screen/staking/staking.js | 88 +++++++++++++++++++++-------- screen/staking/styles.js | 26 ++++++++- 5 files changed, 122 insertions(+), 31 deletions(-) diff --git a/blue_modules/Mintlayer.js b/blue_modules/Mintlayer.js index ee5c9e9..f05c1a2 100644 --- a/blue_modules/Mintlayer.js +++ b/blue_modules/Mintlayer.js @@ -12,6 +12,7 @@ const MINTLAYER_ENDPOINTS = { GET_TOKEN_DATA: '/token/:token', GET_BLOCK_HASH: '/chain/:height', GET_BLOCK_DATA: '/block/:hash', + GET_POOL_DATA: '/pool/:pool_id', }; const ML_NETWORK_TYPES = { @@ -152,4 +153,14 @@ const getTokenData = async (token, network) => { return tryServers({ endpoint, network }); }; -export { TransactionType, getAddressData, getTransactionData, getAddressUtxo, getWalletUtxos, broadcastTransaction, getFeesEstimates, getChainTip, getTokenData, getWalletDelegations, getBlocksData, getDelegationDetails, MINTLAYER_ENDPOINTS, ML_NETWORK_TYPES, ML_ATOMS_PER_COIN }; +const getPool = async (pool_id, network) => { + const endpoint = MINTLAYER_ENDPOINTS.GET_POOL_DATA.replace(':pool_id', pool_id); + return tryServers({ endpoint, network }); +}; + +const getPoolsData = async (pool_ids, network) => { + const poolsPromises = pool_ids.map((pool_id) => getPool(pool_id, network)); + return Promise.all(poolsPromises).then((results) => results.flatMap(JSON.parse)); +}; + +export { TransactionType, getAddressData, getTransactionData, getAddressUtxo, getWalletUtxos, broadcastTransaction, getFeesEstimates, getChainTip, getTokenData, getWalletDelegations, getBlocksData, getDelegationDetails, getPoolsData, MINTLAYER_ENDPOINTS, ML_NETWORK_TYPES, ML_ATOMS_PER_COIN }; diff --git a/class/wallets/mintlayer-wallet.js b/class/wallets/mintlayer-wallet.js index e157fe8..fbac28d 100644 --- a/class/wallets/mintlayer-wallet.js +++ b/class/wallets/mintlayer-wallet.js @@ -2,7 +2,7 @@ import * as bip39 from 'bip39'; import * as ML from '../../blue_modules/mintlayer/mintlayer'; import { AbstractHDWallet } from './abstract-hd-wallet'; import { MintlayerUnit } from '../../models/mintlayerUnits'; -import { broadcastTransaction, getAddressData, getAddressUtxo, getBlocksData, getDelegationDetails, getTransactionData, getWalletDelegations, ML_NETWORK_TYPES, TransactionType, getTokenData } from '../../blue_modules/Mintlayer'; +import { broadcastTransaction, getAddressData, getAddressUtxo, getBlocksData, getDelegationDetails, getTransactionData, getWalletDelegations, ML_NETWORK_TYPES, TransactionType, getTokenData, getPoolsData } from '../../blue_modules/Mintlayer'; import { range } from '../../utils/Array'; import { getArraySpead, getEncodedWitnesses, getOptUtxos, getOutpointedSourceIds, getTransactionHex, getTransactionsBytes, getTransactionUtxos, getTxInputs, getTxOutput, getUtxoAddress, getUtxoAvailable, getUtxoTransactions, totalUtxosAmount } from '../../utils/ML/transaction'; import * as ExchangeRates from '../../models/exchangeRates'; @@ -559,9 +559,23 @@ export class MintLayerWallet extends AbstractHDWallet { this.network, ); + const pool_ids = delegations.map((delegation) => delegation.pool_id); + const uniquePoolIds = [...new Set(pool_ids)]; + + const pool_data = await getPoolsData(uniquePoolIds, this.network); + + // create object from pool data where pool_id is a key + const poolsData = uniquePoolIds.reduce((acc, pool, index) => { + acc[pool] = pool_data[index]; + return acc; + }, {}); + + console.log('poolsData', poolsData); + const mergedDelegations = delegations.map((delegation, index) => { return { ...delegation, + pool_data: poolsData[delegation.pool_id] || {}, balance: delegation.balance.atoms, creation_block_height: delegation_details[index].creation_block_height, creation_time: blocks_data.find(({ height }) => height === delegation_details[index].creation_block_height).header.timestamp.timestamp, diff --git a/screen/staking/delegationDetails.js b/screen/staking/delegationDetails.js index 56d7a16..8c676fe 100644 --- a/screen/staking/delegationDetails.js +++ b/screen/staking/delegationDetails.js @@ -365,6 +365,8 @@ const StakingDelegationDetails = () => { ); }; + console.log('delegation', delegation); + return ( setWidth(e.nativeEvent.layout.width)}> @@ -373,14 +375,18 @@ const StakingDelegationDetails = () => { Delegation details - + Delegation ID: {delegation.delegation_id} - + Pool Id: {delegation.pool_id} + + Pool Summary: + {JSON.stringify(delegation.pool_data)} + Balance: diff --git a/screen/staking/staking.js b/screen/staking/staking.js index 03867e3..145d289 100644 --- a/screen/staking/staking.js +++ b/screen/staking/staking.js @@ -1,8 +1,8 @@ import { navigationStyleTx } from '../../components/navigationStyle'; import loc, { formatBalance, formatBalanceWithoutSuffix } from '../../loc'; import React, { useContext, useEffect, useMemo, useState } from 'react'; -import { ActivityIndicator, Alert, Dimensions, FlatList, Keyboard, KeyboardAvoidingView, LayoutAnimation, Platform, ScrollView, StatusBar, StyleSheet, Text, TextInput, TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native'; -import { BlueButton, BlueDismissKeyboardInputAccessory } from '../../BlueComponents'; +import { ActivityIndicator, Alert, Dimensions, FlatList, I18nManager, Keyboard, KeyboardAvoidingView, LayoutAnimation, Platform, ScrollView, StatusBar, StyleSheet, Text, TextInput, TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native'; +import { BlueButton, BlueDismissKeyboardInputAccessory, BlueListItem, MlCoinLogo, TokenLogo } from '../../BlueComponents'; import InputAccessoryAllFunds from '../../components/InputAccessoryAllFunds'; import { useNavigation, useRoute, useTheme } from '@react-navigation/native'; import { stakingStyles as styles } from './styles'; @@ -144,30 +144,70 @@ const Staking = () => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [wallets, wallet, walletID]); + const containerStyle = useMemo( + () => ({ + borderBottomColor: colors.lightBorder, + paddingTop: 12, + paddingBottom: 12, + paddingRight: 0, + }), + [colors.lightBorder], + ); + const renderDelegationItem = ({ item }) => { + const onItemPress = () => { + navigation.navigate('Delegation', { delegation: item, walletID: wallet.getID() }); + }; + + const isDecommissioned = item.pool_data.staker_balance.decimal < 1; + + // make style for icon + const iconStyle = { + width: 40, + height: 40, + borderRadius: 20, + justifyContent: 'center', + alignItems: 'center', + paddingLeft: isDecommissioned ? 0 : 3, + backgroundColor: isDecommissioned ? '#FFB800' : COLORS.green, + }; + + const logo = ( + + + + ); + return ( - { - navigation.navigate('Delegation', { delegation: item, walletID: wallet.getID() }); - }} - > - - - - {item.delegation_id.slice(0, 12) + '...' + item.delegation_id.slice(-12)} - - - Pool ID: {item.pool_id.slice(0, 8) + '...' + item.pool_id.slice(-8)} - - - {dayjs(item.creation_time * 1000).format('YYYY-MM-DD HH:mm')} - - - - {item.balance / 1e11} ML - - - + + + + + Pool: {item.pool_id.slice(0, 8) + '...' + item.pool_id.slice(-8)} + + + Created: {dayjs(item.creation_time * 1000).format('YYYY-MM-DD HH:mm')} + + + } + contentStyle={styles.contentStyle} + subtitleNumberOfLines={2} + rightSubtitle="ML" + // rightSubtitle={`${dayjs(item.creation_time * 1000).format('YYYY-MM-DD HH:mm')}`} + Component={View} + chevron={false} + rightTitle={`${item.balance / 1e11} ML`} + rightContentStyle={styles.rightContentStyle} + rightTitleStyle={[styles.rowTitleStyle, stylesHook.rowTitle]} + containerStyle={containerStyle} + /> + + ); }; diff --git a/screen/staking/styles.js b/screen/staking/styles.js index f8ff744..c9d88cb 100644 --- a/screen/staking/styles.js +++ b/screen/staking/styles.js @@ -13,13 +13,23 @@ export const stakingStyles = { marginHorizontal: 16, borderBottomWidth: 1, borderBottomColor: '#EFEFEF', - paddingVertical: 5, + paddingTop: 5, + paddingBottom: 10, flex: 1, display: 'flex', flexDirection: 'row', justifyContent: 'space-between', }, - delegationItemInfo: {}, + iconPlaceholder: { + width: 20, + backgroundColor: '#f00', + flex: 1, + }, + delegationItemInfo: { + flex: 1, + flexDirection: 'column', + justifyContent: 'space-between', + }, delegationBalance: {}, delegationBalanceText: { fontSize: 14, @@ -34,7 +44,9 @@ export const stakingStyles = { delegationIdText: { fontSize: 18, }, - delegationDate: {}, + delegationDate: { + marginTop: 3, + }, delegationDateText: { fontWeight: 'bold', }, @@ -128,4 +140,12 @@ export const stakingStyles = { sendIcon: { transform: [{ rotate: I18nManager.isRTL ? '45deg' : '-45deg' }], }, + + delegationDetailsData: { + paddingBottom: 10, + }, + + delegationPoolDetailsData: { + paddingTop: 10, + }, };