wip: truncate addresses, add link to explorer from feedmodal

src/components/common/modal/ModalActionsByFeedType.js

@@ -24,6 +24,7 @@ import Config from '../../../config/config'
 import { generateSendShareObject, generateShareLink, isSharingAvailable } from '../../../lib/share'
 import useProfile from '../../../lib/userStorage/useProfile'
 import { decimalsToFixed } from '../../../lib/wallet/utils'
+import { truncateMiddle } from '../../../lib/utils/string'
 
 const log = logger.child({ from: 'ModalActionsByFeed' })
 
@@ -320,17 +321,19 @@ const ModalActionsByFeedType = ({ theme, styles, item, handleModalClose, navigat
         <Section.Row style={[styles.buttonsView, isTx && styles.linkButtonView]}>
           {isTx && (
             <Section.Stack style={styles.txHashWrapper}>
-              <Section.Text fontSize={11} textDecorationLine="underline" onPress={goToTxDetails} textAlign="left">
-                {`Transaction Details`}
+              <Section.Text fontSize={11} textAlign="left">
+                {`TX Details:`}
               </Section.Text>
               <Section.Text
-                fontSize={11}
+                fontSize={16}
                 numberOfLines={1}
+                textDecorationLine="underline"
+                onPress={goToTxDetails}
                 ellipsizeMode="middle"
                 style={styles.txHash}
                 textAlign="left"
               >
-                {txHash}
+                {truncateMiddle(txHash, 11)}
               </Section.Text>
             </Section.Stack>
           )}

src/components/dashboard/FeedItems/EventCounterParty.js

@@ -1,52 +1,87 @@
-import React, { useMemo } from 'react'
+import React, { useCallback, useMemo } from 'react'
 import { View } from 'react-native'
 import { capitalize, get } from 'lodash'
+import { theme } from '../../theme/styles'
 import { Text } from '../../common'
 import useProfile from '../../../lib/userStorage/useProfile'
+import { useWallet } from '../../../lib/wallet/GoodWalletProvider'
+import { openLink } from '../../../lib/utils/linking'
 import { getEventDirection } from '../../../lib/userStorage/FeedStorage'
 
+import Config from '../../../config/config'
+
 const EventContent = ({
   style,
   textStyle,
   direction,
+  endpointAddress,
+  chain,
   description,
   hasSubtitle,
   numberOfLines = 1,
   lineHeight = 17,
   isCapitalized = true,
-}) => (
-  <View
-    numberOfLines={1}
-    style={[
-      {
-        flexDirection: 'row',
-      },
-      style,
-    ]}
-  >
-    {!!direction && (
-      <Text
-        style={{
-          minWidth: 15,
-        }}
-        textTransform={isCapitalized && 'capitalize'}
-        fontSize={10}
+  isModal = false,
+}) => {
+  let [name = '', displayAddress = ''] = description?.split(' ') ?? []
+
+  const goToExplorer = useCallback(() => {
+    const networkExplorerUrl = Config.ethereum[chain]?.explorer
+    openLink(`${networkExplorerUrl}/address/${encodeURIComponent(endpointAddress)}`, '_blank')
+  }, [endpointAddress])
+
+  return (
+    <View style={{ flexDirection: 'column' }}>
+      <View
+        numberOfLines={1}
+        style={[
+          {
+            flexDirection: 'row',
+          },
+          style,
+        ]}
       >
-        {capitalize(direction)}:{' '}
-      </Text>
-    )}
-    <Text
-      numberOfLines={numberOfLines}
-      textTransform={isCapitalized && 'capitalize'}
-      fontWeight="medium"
-      textAlign={'left'}
-      lineHeight={lineHeight}
-      style={textStyle}
-    >
-      {description}
-    </Text>
-  </View>
-)
+        {!!direction && (
+          <Text
+            style={{
+              minWidth: 15,
+            }}
+            textTransform={isCapitalized && 'capitalize'}
+            fontSize={10}
+          >
+            {capitalize(direction)}:{' '}
+          </Text>
+        )}
+        <Text
+          numberOfLines={numberOfLines}
+          textTransform={isCapitalized && 'capitalize'}
+          fontWeight="medium"
+          textAlign={'left'}
+          lineHeight={lineHeight}
+          style={[textStyle, ...(isModal ? [{ fontSize: 16 }] : [])]}
+        >
+          {isModal ? name : description}
+        </Text>
+      </View>
+
+      {isModal && displayAddress.startsWith('(0x') && (
+        <Text
+          numberOfLines={numberOfLines}
+          textTransform={isCapitalized && 'capitalize'}
+          fontWeight="medium"
+          textAlign={'left'}
+          lineHeight={lineHeight}
+          style={[textStyle, { fontSize: 16 }]}
+          onPress={goToExplorer}
+          textDecorationLine="underline"
+          color={theme.colors.lightBlue}
+        >
+          {displayAddress}
+        </Text>
+      )}
+    </View>
+  )
+}
 
 export const EventSelfParty = ({ feedItem, styles, style, textStyle, subtitle, isSmallDevice }) => {
   const direction = useMemo(() => getEventDirection(feedItem, true), [feedItem])
@@ -68,28 +103,39 @@ const EventCounterParty = ({
   numberOfLines,
   isCapitalized,
   lineHeight,
+  isModal,
 }) => {
+  const goodWallet = useWallet()
   const direction = useMemo(() => getEventDirection(feedItem), [feedItem])
   const itemSubtitle = get(feedItem, 'data.subtitle', '')
+  const chain = feedItem?.chainId ?? 42220
   const selectDisplaySource =
     get(feedItem, 'data.endpoint.displayName') === 'Unknown'
       ? get(feedItem, 'data.sellerWebsite', 'Unknown')
       : get(feedItem, 'data.endpoint.displayName')
 
   let displayText = itemSubtitle && subtitle ? itemSubtitle : selectDisplaySource
 
+  const endpointAddress =
+    displayText === 'GoodDollar (0x6B...7C5f)'
+      ? goodWallet.UBIContract._address
+      : get(feedItem, 'data.endpoint.address')
+
   let hasSubtitle = get(feedItem, 'data.readMore') !== false
 
   return (
     <EventContent
       style={style}
       description={displayText}
+      endpointAddress={endpointAddress}
+      chain={chain}
       hasSubtitle={hasSubtitle}
       direction={direction}
       numberOfLines={numberOfLines}
       isCapitalized={isCapitalized}
       lineHeight={lineHeight}
       textStyle={textStyle}
+      isModal={isModal}
     />
   )
 }

src/components/dashboard/FeedItems/FeedModalItem.js

@@ -117,6 +117,7 @@ const FeedModalItem = (props: FeedEventProps) => {
                     style={[styles.feedItem, styles.eventCounterParty]}
                     textStyle={styles.feedItemText}
                     feedItem={item}
+                    isModal={true}
                   />
                   {!eventSettings.withoutAvatar && !!sellerWebsite && <EventInfoText>{sellerWebsite}</EventInfoText>}
                 </View>

src/lib/userStorage/UserStorageClass.js

@@ -949,6 +949,15 @@ export class UserStorage {
     data.displayName =
       customName || counterPartyFullName || fromEmailMobile || fromGDUbi || fromGD || fromNativeAddress || 'Unknown'
 
+    const counterPartyAddress = data.address || receiptEvent?.from || receiptEvent?.to
+
+    if (!isAddress(data.displayName) && !data.displayName.startsWith('0x')) {
+      const address = receiptEvent.name === 'UBIClaimed' ? receiptEvent.eventSource : counterPartyAddress
+      const addressTruncated = truncateMiddle(address, 11)
+      const displayName = data.displayName.length < 16 ? data.displayName : data.displayName.substring(0, 15) + '...'
+      data.displayName = displayName + ` (` + addressTruncated + ')'
+    }
+
     data.avatar = status === 'error' || fromGD ? -1 : counterPartySmallAvatar
 
     data.isBridge = isBridge ?? this.wallet.getBridgeAddresses().includes(data.address?.toLowerCase())