add transacion hash

rsksmart · Jul 26, 2023 · 9bae300 · 9bae300
1 parent 94a626c
commit 9bae300
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 4 deletions.
diff --git a/src/screens/activity/ActivityRow.tsx b/src/screens/activity/ActivityRow.tsx
@@ -52,6 +52,7 @@ export const ActivityBasicRow = ({
     from = '',
     to = '',
     price,
+    id,
   } = activityDetails
 
   const { t } = useTranslation()
@@ -88,6 +89,7 @@ export const ActivityBasicRow = ({
         from,
         to,
         time: timeHumanFormatted,
+        hashId: id,
       },
       contact: contact || { address },
     }),
@@ -103,6 +105,7 @@ export const ActivityBasicRow = ({
       timeHumanFormatted,
       usdBalance,
       value,
+      id,
     ],
   )
 

diff --git a/src/screens/transactionSummary/TransactionSummaryComponent.tsx b/src/screens/transactionSummary/TransactionSummaryComponent.tsx
@@ -1,6 +1,6 @@
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { ScrollView, StyleSheet, View } from 'react-native'
+import { Linking, ScrollView, StyleSheet, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import Icon from 'react-native-vector-icons/FontAwesome5'
 import { RIFWallet } from '@rsksmart/rif-wallet-core'
@@ -10,20 +10,24 @@ import { displayRoundBalance } from 'lib/utils'
 import { TokenBalance } from 'components/token'
 import { sharedColors, sharedStyles } from 'shared/constants'
 import { castStyle } from 'shared/utils'
-import { AppButton, Typography } from 'components/index'
+import { AppButton, AppTouchable, Typography } from 'components/index'
 import { WINDOW_HEIGHT, WINDOW_WIDTH } from 'src/ux/slides/Dimensions'
 import { useAppSelector } from 'store/storeUtils'
 import { isMyAddress } from 'components/address/lib'
 import { DollarIcon } from 'components/icons/DollarIcon'
 import { FullScreenSpinner } from 'components/fullScreenSpinner'
 import { getContactByAddress } from 'store/slices/contactsSlice'
+import { getWalletSetting } from 'src/core/config'
+import { SETTINGS } from 'src/core/types'
+import { chainTypesById } from 'src/shared/constants/chainConstants'
+import { selectChainId } from 'src/redux/slices/settingsSlice'
 
+import { TokenImage } from '../home/TokenImage'
 import {
   TransactionStatus,
   transactionStatusDisplayText,
   transactionStatusToIconPropsMap,
 } from './transactionSummaryUtils'
-import { TokenImage } from '../home/TokenImage'
 
 import { TransactionSummaryScreenProps } from '.'
 
@@ -47,9 +51,10 @@ export const TransactionSummaryComponent = ({
   isLoaded,
   FeeComponent,
 }: TransactionSummaryComponentProps) => {
+  const chainId = useAppSelector(selectChainId)
   const { bottom } = useSafeAreaInsets()
   const { t } = useTranslation()
-  const { status, tokenValue, fee, usdValue, time } = transaction
+  const { status, tokenValue, fee, usdValue, time, hashId } = transaction
 
   const iconObject = transactionStatusToIconPropsMap.get(status)
   const transactionStatusText = transactionStatusDisplayText.get(status)
@@ -94,6 +99,15 @@ export const TransactionSummaryComponent = ({
     [amIReceiver, usdValue.balance, fee.usdValue],
   )
 
+  const openTransactionHash = () => {
+    const explorerUrl = getWalletSetting(
+      SETTINGS.EXPLORER_ADDRESS_URL,
+      chainTypesById[chainId],
+    )
+
+    Linking.openURL(`${explorerUrl}/tx/${hashId}`)
+  }
+
   return (
     <View style={[styles.screen, { paddingBottom: bottom }]}>
       {isLoaded === false && <FullScreenSpinner />}
@@ -239,6 +253,28 @@ export const TransactionSummaryComponent = ({
               {contactToUse.address}
             </Typography>
           </View>
+          {/* transaction hash */}
+          {hashId && (
+            <View style={[styles.summaryAlignment]}>
+              <Typography
+                type={'body2'}
+                style={[sharedStyles.textLeft, sharedStyles.flex]}>
+                Hash
+              </Typography>
+              <AppTouchable
+                width="100%"
+                onPress={openTransactionHash}
+                style={styles.hashId}>
+                <Typography
+                  type={'h5'}
+                  style={[sharedStyles.textRight, styles.underline]}
+                  numberOfLines={1}
+                  ellipsizeMode={'middle'}>
+                  {hashId}
+                </Typography>
+              </AppTouchable>
+            </View>
+          )}
         </View>
       </ScrollView>
       <View style={styles.buttons}>
@@ -305,6 +341,13 @@ const styles = StyleSheet.create({
     flex: 3,
     alignSelf: 'flex-end',
   }),
+  hashId: castStyle.text({
+    flex: 3,
+    alignSelf: 'flex-end',
+  }),
+  underline: castStyle.text({
+    textDecorationLine: 'underline',
+  }),
   buttons: castStyle.view({
     justifyContent: 'space-between',
     minHeight: 114,

diff --git a/src/screens/transactionSummary/index.tsx b/src/screens/transactionSummary/index.tsx
@@ -18,6 +18,7 @@ import { TransactionStatus } from './transactionSummaryUtils'
 
 export interface TransactionSummaryScreenProps {
   transaction: {
+    hashId?: string
     tokenValue: CurrencyValue
     usdValue: CurrencyValue
     fee: TokenFeeValueObject