From 53fdcd5753f669ce3d8783b83e13a438cef201db Mon Sep 17 00:00:00 2001 From: LewisB Date: Wed, 10 Jan 2024 02:22:36 +0800 Subject: [PATCH 1/4] wip: truncate addresses, add link to explorer from feedmodal --- .../common/modal/ModalActionsByFeedType.js | 11 +- .../dashboard/FeedItems/EventCounterParty.js | 114 +++++++++++++----- src/lib/userStorage/UserStorageClass.js | 9 ++ 3 files changed, 97 insertions(+), 37 deletions(-) diff --git a/src/components/common/modal/ModalActionsByFeedType.js b/src/components/common/modal/ModalActionsByFeedType.js index fffa90b696..20829fbea7 100644 --- a/src/components/common/modal/ModalActionsByFeedType.js +++ b/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 {isTx && ( - - {`Transaction Details`} + + {`TX Details:`} - {txHash} + {truncateMiddle(txHash, 11)} )} diff --git a/src/components/dashboard/FeedItems/EventCounterParty.js b/src/components/dashboard/FeedItems/EventCounterParty.js index 1ab32284d8..f15af38022 100644 --- a/src/components/dashboard/FeedItems/EventCounterParty.js +++ b/src/components/dashboard/FeedItems/EventCounterParty.js @@ -1,52 +1,89 @@ -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, -}) => ( - - {!!direction && ( - { + let [name = '', displayAddress = ''] = description?.split(' ') ?? [] + + const goToExplorer = useCallback(() => { + const networkExplorerUrl = Config.ethereum[chain]?.explorer + openLink(`${networkExplorerUrl}/address/${encodeURIComponent(endpointAddress)}`, '_blank') + }, [endpointAddress]) + + return ( + + - {capitalize(direction)}:{' '} - - )} - - {description} - - -) + {!!direction && ( + + {capitalize(direction)}:{' '} + + )} + + {isModal ? name : description} + + + + {isModal && displayAddress.startsWith('(0x') && ( + + {displayAddress} + + )} + + ) +} export const EventSelfParty = ({ feedItem, styles, style, textStyle, subtitle, isSmallDevice }) => { const direction = useMemo(() => getEventDirection(feedItem, true), [feedItem]) @@ -68,9 +105,12 @@ 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') @@ -78,18 +118,26 @@ const EventCounterParty = ({ 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 ( ) } diff --git a/src/lib/userStorage/UserStorageClass.js b/src/lib/userStorage/UserStorageClass.js index a015e0e7ba..7b4531a9eb 100644 --- a/src/lib/userStorage/UserStorageClass.js +++ b/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()) From 4cc51ad67856a6a288b6144e2f2a4ab487adda75 Mon Sep 17 00:00:00 2001 From: LewisB Date: Wed, 10 Jan 2024 17:30:56 +0800 Subject: [PATCH 2/4] Apply different ui and hyperlink for modalItem --- src/components/dashboard/FeedItems/EventCounterParty.js | 8 +++----- src/components/dashboard/FeedItems/FeedModalItem.js | 1 + 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/dashboard/FeedItems/EventCounterParty.js b/src/components/dashboard/FeedItems/EventCounterParty.js index f15af38022..70da5b5080 100644 --- a/src/components/dashboard/FeedItems/EventCounterParty.js +++ b/src/components/dashboard/FeedItems/EventCounterParty.js @@ -58,8 +58,7 @@ const EventContent = ({ fontWeight="medium" textAlign={'left'} lineHeight={lineHeight} - style={textStyle} - fontSize={16} + style={[textStyle, ...(isModal ? [{ fontSize: 16 }] : [])]} > {isModal ? name : description} @@ -72,11 +71,10 @@ const EventContent = ({ fontWeight="medium" textAlign={'left'} lineHeight={lineHeight} - style={textStyle} + style={[textStyle, ...(isModal ? [{ fontSize: 16 }] : [])]} onPress={goToExplorer} textDecorationLine="underline" color={theme.colors.lightBlue} - fontSize={16} > {displayAddress} @@ -137,7 +135,7 @@ const EventCounterParty = ({ isCapitalized={isCapitalized} lineHeight={lineHeight} textStyle={textStyle} - isModal + isModal={isModal} /> ) } diff --git a/src/components/dashboard/FeedItems/FeedModalItem.js b/src/components/dashboard/FeedItems/FeedModalItem.js index 84ff64214b..b452248b43 100644 --- a/src/components/dashboard/FeedItems/FeedModalItem.js +++ b/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 && {sellerWebsite}} From 40d02cc634058e8e6a1a40690413a3a19191ea79 Mon Sep 17 00:00:00 2001 From: LewisB Date: Wed, 10 Jan 2024 18:57:35 +0800 Subject: [PATCH 3/4] fix: useless conditional --- src/components/dashboard/FeedItems/EventCounterParty.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/dashboard/FeedItems/EventCounterParty.js b/src/components/dashboard/FeedItems/EventCounterParty.js index 70da5b5080..3a8b524858 100644 --- a/src/components/dashboard/FeedItems/EventCounterParty.js +++ b/src/components/dashboard/FeedItems/EventCounterParty.js @@ -71,7 +71,7 @@ const EventContent = ({ fontWeight="medium" textAlign={'left'} lineHeight={lineHeight} - style={[textStyle, ...(isModal ? [{ fontSize: 16 }] : [])]} + style={[textStyle, { fontSize: 16 }]} onPress={goToExplorer} textDecorationLine="underline" color={theme.colors.lightBlue} From 1541157a4134764073063561414f0e7fd3cd4219 Mon Sep 17 00:00:00 2001 From: LewisB Date: Wed, 10 Jan 2024 20:23:10 +0800 Subject: [PATCH 4/4] fix: add goToExplorer as util --- .../common/modal/ModalActionsByFeedType.js | 6 ++---- .../dashboard/FeedItems/EventCounterParty.js | 11 ++++------- src/components/dashboard/FeedItems/ListEventItem.js | 10 ++-------- src/components/dashboard/utils/goToExplorer.js | 13 +++++++++++++ 4 files changed, 21 insertions(+), 19 deletions(-) create mode 100644 src/components/dashboard/utils/goToExplorer.js diff --git a/src/components/common/modal/ModalActionsByFeedType.js b/src/components/common/modal/ModalActionsByFeedType.js index 20829fbea7..47f68b5c4d 100644 --- a/src/components/common/modal/ModalActionsByFeedType.js +++ b/src/components/common/modal/ModalActionsByFeedType.js @@ -14,17 +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' }) @@ -173,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(() => { diff --git a/src/components/dashboard/FeedItems/EventCounterParty.js b/src/components/dashboard/FeedItems/EventCounterParty.js index 3a8b524858..ff7a3981aa 100644 --- a/src/components/dashboard/FeedItems/EventCounterParty.js +++ b/src/components/dashboard/FeedItems/EventCounterParty.js @@ -5,10 +5,8 @@ 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' +import goToExplorer from '../utils/goToExplorer' const EventContent = ({ style, @@ -25,9 +23,8 @@ const EventContent = ({ }) => { let [name = '', displayAddress = ''] = description?.split(' ') ?? [] - const goToExplorer = useCallback(() => { - const networkExplorerUrl = Config.ethereum[chain]?.explorer - openLink(`${networkExplorerUrl}/address/${encodeURIComponent(endpointAddress)}`, '_blank') + const viewInExplorer = useCallback(() => { + goToExplorer(endpointAddress, chain, 'address') }, [endpointAddress]) return ( @@ -72,7 +69,7 @@ const EventContent = ({ textAlign={'left'} lineHeight={lineHeight} style={[textStyle, { fontSize: 16 }]} - onPress={goToExplorer} + onPress={viewInExplorer} textDecorationLine="underline" color={theme.colors.lightBlue} > diff --git a/src/components/dashboard/FeedItems/ListEventItem.js b/src/components/dashboard/FeedItems/ListEventItem.js index 6140628af2..16cee80151 100644 --- a/src/components/dashboard/FeedItems/ListEventItem.js +++ b/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 ? ( diff --git a/src/components/dashboard/utils/goToExplorer.js b/src/components/dashboard/utils/goToExplorer.js new file mode 100644 index 0000000000..9dd42f9f12 --- /dev/null +++ b/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