wip: truncate addresses, add link to explorer from feedmodal

src/components/common/modal/ModalActionsByFeedType.js

@@ -14,16 +14,16 @@ import logger from '../../../lib/logger/js-logger'
 import { decorate, ExceptionCategory, ExceptionCode } from '../../../lib/exceptions/utils'
 import normalize from '../../../lib/utils/normalizeText'
 import { useUserStorage, useWallet } from '../../../lib/wallet/GoodWalletProvider'
-import { openLink } from '../../../lib/utils/linking'
 import { withStyles } from '../../../lib/styles'
 import Section from '../../common/layout/Section'
 
 import { CLICK_BTN_CARD_ACTION, fireEvent } from '../../../lib/analytics/analytics'
-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'
+import goToExplorer from '../../dashboard/utils/goToExplorer'
 
 const log = logger.child({ from: 'ModalActionsByFeed' })
 
@@ -172,9 +172,8 @@ const ModalActionsByFeedType = ({ theme, styles, item, handleModalClose, navigat
     if (!isTx) {
       return
     }
-    const networkExplorerUrl = Config.ethereum[item.chainId || 122]?.explorer
 
-    openLink(`${networkExplorerUrl}/tx/${encodeURIComponent(txHash)}`, '_blank')
+    goToExplorer(txHash, item?.chainId, 'tx')
   }, [txHash, isTx])
 
   useEffect(() => {
@@ -320,17 +319,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,84 @@
-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 { getEventDirection } from '../../../lib/userStorage/FeedStorage'
+import goToExplorer from '../utils/goToExplorer'
 
 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 viewInExplorer = useCallback(() => {
+    goToExplorer(endpointAddress, chain, 'address')
+  }, [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={viewInExplorer}
+          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 +100,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/components/dashboard/FeedItems/ListEventItem.js

@@ -18,11 +18,10 @@ import { Icon, Section, SvgXml, Text } from '../../common'
 import useOnPress from '../../../lib/hooks/useOnPress'
 import logger from '../../../lib/logger/js-logger'
 import { fireEvent, GOTO_SPONSOR } from '../../../lib/analytics/analytics'
-import Config from '../../../config/config'
-import { openLink } from '../../../lib/utils/linking'
 import { FeedItemType } from '../../../lib/userStorage/FeedStorage'
 import { NetworkLogo } from '../../../lib/constants/network'
 import { isTransferTx } from '../../../lib/wallet/utils'
+import goToExplorer from '../utils/goToExplorer'
 import type { FeedEventProps } from './EventProps'
 import EventIcon from './EventIcon'
 import EventCounterParty from './EventCounterParty'
@@ -127,16 +126,11 @@ const NewsItem: React.FC = ({ item, eventSettings, styles }) => {
 }
 
 export const NetworkIcon = ({ chainId = 122, txHash }) => {
-  const networkExplorerUrl = Config.ethereum[chainId]?.explorer
   const isTx = txHash.startsWith('0x')
   const Icon = NetworkLogo[chainId]
 
   const goToTxDetails = useCallback(() => {
-    if (!networkExplorerUrl) {
-      return
-    }
-
-    openLink(`${networkExplorerUrl}/tx/${encodeURIComponent(txHash)}`, '_blank')
+    goToExplorer(txHash, chainId, 'tx')
   }, [chainId, txHash])
 
   return isTx && Icon ? (

src/components/dashboard/utils/goToExplorer.js

@@ -0,0 +1,13 @@
+import Config from '../../../config/config'
+import { openLink } from '../../../lib/utils/linking'
+
+const goToExplorer = (address, chain, type) => {
+  const networkExplorerUrl = Config.ethereum[chain ?? 42220]?.explorer
+  if (!networkExplorerUrl) {
+    return
+  }
+
+  return openLink(`${networkExplorerUrl}/${type}/${encodeURIComponent(address)}`, '_blank')
+}
+
+export default goToExplorer

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())