reuse openInExplorer function

Emurgo · Oct 11, 2023 · d836330 · d836330
1 parent dc088e2
commit d836330
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 86 deletions.
diff --git a/apps/wallet-mobile/src/TxHistory/TxDetails/TxDetails.tsx b/apps/wallet-mobile/src/TxHistory/TxDetails/TxDetails.tsx
@@ -5,7 +5,7 @@ import {BigNumber} from 'bignumber.js'
 import {fromPairs} from 'lodash'
 import React, {useEffect, useState} from 'react'
 import {defineMessages, IntlShape, useIntl} from 'react-intl'
-import {LayoutAnimation, Linking, StyleSheet, TouchableOpacity, View, ViewProps} from 'react-native'
+import {LayoutAnimation, StyleSheet, TouchableOpacity, View, ViewProps} from 'react-native'
 import {ScrollView} from 'react-native-gesture-handler'
 
 import {Banner, Boundary, Button, CopyButton, FadeIn, Icon, StatusBar, Text} from '../../components'
@@ -17,11 +17,10 @@ import {useSelectedWallet} from '../../SelectedWallet'
 import {brand, COLORS} from '../../theme'
 import {isEmptyString} from '../../utils/utils'
 import {MultiToken} from '../../yoroi-wallets/cardano/MultiToken'
-import {getNetworkConfigById} from '../../yoroi-wallets/cardano/networks'
 import {CardanoTypes, YoroiWallet} from '../../yoroi-wallets/cardano/types'
 import {useTipStatus, useTransactionInfos} from '../../yoroi-wallets/hooks'
-import {NetworkId, TransactionInfo} from '../../yoroi-wallets/types'
-import {asQuantity} from '../../yoroi-wallets/utils'
+import {TransactionInfo} from '../../yoroi-wallets/types'
+import {asQuantity, openInExplorer} from '../../yoroi-wallets/utils'
 import {AssetList} from './AssetList'
 import assetListStyle from './AssetListTransaction.style'
 
@@ -168,7 +167,7 @@ export const TxDetails = () => {
 
       <Actions>
         <Button
-          onPress={() => openInExplorer(transaction, wallet.networkId)}
+          onPress={() => openInExplorer(transaction.id, wallet.networkId)}
           title={strings.openInExplorer}
           shelleyTheme
         />
@@ -324,11 +323,6 @@ const getShownAddresses = (
   }
 }
 
-const openInExplorer = async (transaction: TransactionInfo, networkId: NetworkId) => {
-  const networkConfig = getNetworkConfigById(networkId)
-  await Linking.openURL(networkConfig.EXPLORER_URL_FOR_TX(transaction.id))
-}
-
 export type Params = {
   id: string
 }

diff --git a/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/ListOrders/CompletedOrders.tsx b/apps/wallet-mobile/src/features/Swap/useCases/StartSwapScreen/ListOrders/CompletedOrders.tsx
@@ -5,7 +5,7 @@ import _ from 'lodash'
 import {capitalize} from 'lodash'
 import React from 'react'
 import {useIntl} from 'react-intl'
-import {Linking, ScrollView, StyleSheet, TouchableOpacity, View} from 'react-native'
+import {ScrollView, StyleSheet, TouchableOpacity, View} from 'react-native'
 import {FlatList} from 'react-native-gesture-handler'
 
 import {
@@ -21,10 +21,9 @@ import {
 import {useMetrics} from '../../../../../metrics/metricsManager'
 import {useSelectedWallet} from '../../../../../SelectedWallet'
 import {COLORS} from '../../../../../theme'
-import {getNetworkConfigById} from '../../../../../yoroi-wallets/cardano/networks'
 import {useTokenInfo, useTransactionInfos} from '../../../../../yoroi-wallets/hooks'
 import {TransactionInfo, TxMetadataInfo} from '../../../../../yoroi-wallets/types'
-import {asQuantity, Quantities} from '../../../../../yoroi-wallets/utils'
+import {asQuantity, openInExplorer, Quantities} from '../../../../../yoroi-wallets/utils'
 import {Counter} from '../../../common/Counter/Counter'
 import {PoolIcon} from '../../../common/PoolIcon/PoolIcon'
 import {useStrings} from '../../../common/strings'
@@ -121,13 +120,18 @@ export const ExpandableOrder = ({order}: {order: MappedRawOrder}) => {
   const marketPrice = Quantities.format(tokenPrice, sellTokenInfo.decimals ?? 0, MAX_DECIMALS)
   const buyLabel = buyTokenInfo?.ticker ?? buyTokenInfo?.name ?? '-'
   const sellLabel = sellTokenInfo?.ticker ?? sellTokenInfo?.name ?? '-'
-  const networkConfig = getNetworkConfigById(wallet.networkId)
-  const txLink = networkConfig.EXPLORER_URL_FOR_TX(metadata.buyTokenId)
 
   return (
     <ExpandableInfoCard
       key={id}
-      info={<HiddenInfo txId={id} total={`${buyQuantity} ${buyLabel}`} txLink={txLink} provider={metadata.provider} />}
+      info={
+        <HiddenInfo
+          txId={id}
+          total={`${buyQuantity} ${buyLabel}`}
+          onTxPress={() => openInExplorer(id, wallet.networkId)}
+          provider={metadata.provider}
+        />
+      }
       header={
         <Header
           onPress={() => setHiddenInfoOpenId(hiddenInfoOpenId !== id ? id : null)}
@@ -192,12 +196,12 @@ const Header = ({
 const HiddenInfo = ({
   total,
   txId,
-  txLink,
+  onTxPress,
   provider,
 }: {
   total: string
   txId: string
-  txLink: string
+  onTxPress: () => void
   provider: Swap.PoolProvider
 }) => {
   const shortenedTxId = `${txId.substring(0, 9)}...${txId.substring(txId.length - 4, txId.length)}`
@@ -217,7 +221,7 @@ const HiddenInfo = ({
         },
         {
           label: strings.listOrdersTxId,
-          value: <TxLink txId={shortenedTxId} txLink={txLink} />,
+          value: <TxLink txId={shortenedTxId} onTxPress={onTxPress} />,
         },
       ].map((item) => (
         <HiddenInfoWrapper key={item.label} value={item.value} label={item.label} icon={item.icon} />
@@ -265,9 +269,9 @@ export const CompletedOrdersSkeleton = () => (
   </View>
 )
 
-const TxLink = ({txLink, txId}: {txLink: string; txId: string}) => {
+const TxLink = ({onTxPress, txId}: {onTxPress: () => void; txId: string}) => {
   return (
-    <TouchableOpacity onPress={() => Linking.openURL(txLink)} style={styles.txLink}>
+    <TouchableOpacity onPress={onTxPress} style={styles.txLink}>
       <Text style={styles.txLinkText}>{txId}</Text>
     </TouchableOpacity>
   )

diff --git a/apps/wallet-mobile/src/yoroi-wallets/utils/utils.ts b/apps/wallet-mobile/src/yoroi-wallets/utils/utils.ts
@@ -1,8 +1,10 @@
 import {Balance} from '@yoroi/types'
 import BigNumber from 'bignumber.js'
+import {Linking} from 'react-native'
 
 import {NumberLocale} from '../../i18n/languages'
-import {RawUtxo, TokenId, YoroiEntries, YoroiEntry} from '../types'
+import {getNetworkConfigById} from '../cardano/networks'
+import {NetworkId, RawUtxo, TokenId, YoroiEntries, YoroiEntry} from '../types'
 
 export const Entries = {
   first: (entries: YoroiEntries): YoroiEntry => {
@@ -210,3 +212,8 @@ export const splitStringInto64CharArray = (inputString: string): string[] => {
 
   return resultArray
 }
+
+export const openInExplorer = async (transactionId: string, networkId: NetworkId) => {
+  const networkConfig = getNetworkConfigById(networkId)
+  await Linking.openURL(networkConfig.EXPLORER_URL_FOR_TX(transactionId))
+}