adjust delegations list styles

mintlayer · Jul 21, 2024 · c981393 · c981393
1 parent 9c185e7
commit c981393
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 31 deletions.
diff --git 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
@@ -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
@@ -365,6 +365,8 @@ const StakingDelegationDetails = () => {
     );
   };
 
+  console.log('delegation', delegation);
+
   return (
     <View style={[styles.root]} onLayout={(e) => setWidth(e.nativeEvent.layout.width)}>
       <StatusBar barStyle="light-content" />
@@ -373,14 +375,18 @@ const StakingDelegationDetails = () => {
           <View>
             <Text style={styles.listHeaderText}>Delegation details</Text>
           </View>
-          <View>
+          <View style={styles.delegationDetailsData}>
             <Text>Delegation ID:</Text>
             <Text>{delegation.delegation_id}</Text>
           </View>
-          <View>
+          <View style={styles.delegationPoolDetailsData}>
             <Text>Pool Id:</Text>
             <Text>{delegation.pool_id}</Text>
           </View>
+          <View style={styles.delegationPoolDetailsData}>
+            <Text>Pool Summary:</Text>
+            <Text>{JSON.stringify(delegation.pool_data)}</Text>
+          </View>
 
           <View style={styles.balance}>
             <Text style={styles.balanceLabel}>Balance:</Text>

diff --git 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 = (
+      <View style={iconStyle}>
+        <Icon name={isDecommissioned ? 'warning' : 'pie-chart'} size={23} type="font-awesome" color={isDecommissioned ? '#ffffff' : '#ffffff'} />
+      </View>
+    );
+
     return (
-      <TouchableOpacity
-        onPress={() => {
-          navigation.navigate('Delegation', { delegation: item, walletID: wallet.getID() });
-        }}
-      >
-        <View style={styles.delegationItem}>
-          <View style={styles.info}>
-            <View style={styles.delegationId}>
-              <Text style={styles.delegationIdText}>{item.delegation_id.slice(0, 12) + '...' + item.delegation_id.slice(-12)}</Text>
-            </View>
-            <View style={styles.delegationPoolId}>
-              <Text style={styles.delegationPoolIdText}>Pool ID: {item.pool_id.slice(0, 8) + '...' + item.pool_id.slice(-8)}</Text>
-            </View>
-            <View style={styles.delegationDate}>
-              <Text style={styles.delegationDateText}>{dayjs(item.creation_time * 1000).format('YYYY-MM-DD HH:mm')}</Text>
-            </View>
-          </View>
-          <View style={styles.delegationBalance}>
-            <Text style={styles.delegationBalanceText}>{item.balance / 1e11} ML</Text>
-          </View>
-        </View>
-      </TouchableOpacity>
+      <View style={styles.tokenWrapper}>
+        <TouchableOpacity onPress={onItemPress}>
+          <BlueListItem
+            leftAvatar={logo}
+            leftAvatarProps={{ size: 42 }}
+            title={item.delegation_id.slice(0, 10) + '...' + item.delegation_id.slice(-10)}
+            subtitle={
+              <>
+                <View>
+                  <Text>Pool: {item.pool_id.slice(0, 8) + '...' + item.pool_id.slice(-8)}</Text>
+                </View>
+                <View>
+                  <Text style={styles.delegationDateText}>Created: {dayjs(item.creation_time * 1000).format('YYYY-MM-DD HH:mm')}</Text>
+                </View>
+              </>
+            }
+            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}
+          />
+        </TouchableOpacity>
+      </View>
     );
   };
 

diff --git 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,
+  },
 };