routed delegations info to delegations modal

src/screens/coinDetails/children/children.styles.ts

@@ -138,6 +138,10 @@ export default EStyleSheet.create({
     margin: 0,
     paddingTop: 32,
     paddingBottom: 16,
+  },
+  textUnderline:{
+    textDecorationLine:'underline', 
+    textDecorationColor:'$primaryLightGray'
   }
 });
 

src/screens/coinDetails/children/coinBasics.tsx

@@ -1,6 +1,7 @@
 import React, { Fragment } from 'react'
 import { useIntl } from 'react-intl';
-import { View, Text } from 'react-native'
+import { View, Text, Alert } from 'react-native'
+import { TouchableOpacity } from 'react-native-gesture-handler';
 import { DataPair } from '../../../redux/reducers/walletReducer'
 import styles from './children.styles'
 
@@ -10,23 +11,24 @@ interface CoinBasicsProps {
     extraData: DataPair[];
     coinSymbol: string;
     percentChange: number;
+    onInfoPress: (id:string)=>void
 }
 
-export const CoinBasics = ({ valuePairs, extraData, coinSymbol, percentChange }: CoinBasicsProps) => {
+export const CoinBasics = ({ valuePairs, extraData, coinSymbol, percentChange, onInfoPress}: CoinBasicsProps) => {
     const intl = useIntl();
     const _renderCoinHeader = (
         <>
             <View style={styles.coinTitleContainer}>
                 <Text style={styles.textCoinTitle}>{coinSymbol}</Text>
             </View>
-            <Text 
+            <Text
                 style={styles.textHeaderChange}>
-                    {intl.formatMessage({ id: 'wallet.change' })} 
-                        <Text 
-                            style={percentChange > 0 ? styles.textPositive : styles.textNegative}>
-                                {` ${percentChange >= 0 ? '+' : ''}${percentChange.toFixed(1)}%`}
-                        </Text>
-                        
+                {intl.formatMessage({ id: 'wallet.change' })}
+                <Text
+                    style={percentChange > 0 ? styles.textPositive : styles.textNegative}>
+                    {` ${percentChange >= 0 ? '+' : ''}${percentChange.toFixed(1)}%`}
+                </Text>
+
             </Text>
         </>
     )
@@ -43,10 +45,23 @@ export const CoinBasics = ({ valuePairs, extraData, coinSymbol, percentChange }:
 
     const _renderExtraData = (args: DataPair, index: number) => {
         const label = intl.formatMessage({ id: `wallet.${args.dataKey || args.labelId}` })
+
+        const _onPress = () => {
+                onInfoPress(args.dataKey);
+        }
+
         return (
             <View key={`extra-data-${args.dataKey}-${index}`} style={styles.extraDataContainer}>
-                <Text style={styles.textExtraLabel}>{label}</Text>
-                <Text style={styles.textExtraValue}>{args.value}</Text>
+                <Text
+                    style={[styles.textExtraLabel, args.isClickable && styles.textUnderline]}
+                    onPress={args.isClickable && _onPress}>
+                    {label}
+                </Text>
+                <Text
+                    style={styles.textExtraValue}
+                    onPress={args.isClickable && _onPress}>
+                    {args.value}
+                </Text>
             </View>
         )
     }

src/screens/coinDetails/children/coinSummary.tsx

@@ -11,6 +11,7 @@ export interface CoinSummaryProps {
     coinData:CoinData;
     percentChagne:number;
     onActionPress:(action:string)=>void;
+    onInfoPress:(dataKey:string)=>void;
 }
 
 export const CoinSummary = ({
@@ -19,6 +20,7 @@ export const CoinSummary = ({
     coinData,
     percentChagne,
     onActionPress,
+    onInfoPress
 }:CoinSummaryProps) => {
     const { 
         balance, 
@@ -56,6 +58,7 @@ export const CoinSummary = ({
                 extraData={extraDataPairs} 
                 coinSymbol={coinSymbol}  
                 percentChange={percentChagne}
+                onInfoPress={onInfoPress}
             />
             <CoinActions actions={actions} onActionPress={onActionPress}/>
             {

src/screens/coinDetails/screen/coinDetailsScreen.tsx

@@ -12,6 +12,7 @@ import { navigate } from '../../../navigation/service';
 import ROUTES from '../../../constants/routeNames';
 import { COIN_IDS } from '../../../constants/defaultCoins';
 import { useIntl } from 'react-intl';
+import { DelegationsModal, MODES } from '../children/delegationsModal';
 
 export interface CoinDetailsScreenParams {
   coinId: string;
@@ -35,6 +36,7 @@ const CoinDetailsScreen = ({ navigation, route }: CoinDetailsScreenProps) => {
 
   //refs
   const appState = useRef(AppState.currentState);
+  const delegationsModalRef = useRef(null);
 
   //redux props
   const currentAccount = useAppSelector(state => state.account.currentAccount);
@@ -106,6 +108,12 @@ const CoinDetailsScreen = ({ navigation, route }: CoinDetailsScreenProps) => {
     navigation.goBack();
   }
 
+  const _onInfoPress = (dataKey:string) => {
+    if((dataKey === MODES.DELEGATEED || dataKey === MODES.RECEIVED) && delegationsModalRef.current) {
+      delegationsModalRef.current.showModal(dataKey)
+    }
+  }
+
 
   const _onActionPress = (transferType: string) => {
 
@@ -156,7 +164,8 @@ const CoinDetailsScreen = ({ navigation, route }: CoinDetailsScreenProps) => {
       coinSymbol={symbol}
       coinData={coinData}
       percentChagne={quote.percentChange || 0}
-      onActionPress={_onActionPress} />
+      onActionPress={_onActionPress}
+      onInfoPress={_onInfoPress} />
   )
 
 
@@ -172,6 +181,7 @@ const CoinDetailsScreen = ({ navigation, route }: CoinDetailsScreenProps) => {
         onEndReached={_fetchDetails}
         onRefresh={_onRefresh}
       />
+      <DelegationsModal ref={delegationsModalRef} />
     </View>
   )
 }

src/utils/wallet.ts

@@ -627,7 +627,7 @@ export const fetchCoinsData = async ({
         const estimateVoteValueStr = '$ ' + getEstimatedAmount(userdata, globalProps);
 
         //aaggregate extra data pairs
-        const extraDataPairs = [];
+        const extraDataPairs:DataPair[] = [];
 
         if (delegatedHP) {
           extraDataPairs.push({