add explorer_url and explorer_label to txn types and consume (#5690)

rainbow-me · May 7, 2024 · ea8eb37 · ea8eb37
1 parent d4cc1df
commit ea8eb37
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 7 deletions.
diff --git a/src/entities/transactions/transaction.ts b/src/entities/transactions/transaction.ts
@@ -80,6 +80,8 @@ export interface RainbowTransaction {
   type: TransactionType;
   value?: BigNumberish; // for pending tx
   fee?: RainbowTransactionFee;
+  explorerLabel?: string;
+  explorerUrl?: string;
 }
 
 export type MinedTransaction = RainbowTransaction & {

diff --git a/src/parsers/transactions.ts b/src/parsers/transactions.ts
@@ -39,7 +39,7 @@ const TransactionOutTypes = [
 ] as const;
 
 export const getDirection = (type: TransactionType) => {
-  //@ts-expect-error - Ts doesnt like the weird type structure here
+  // @ts-expect-error - Ts doesnt like the weird type structure here
   if (TransactionOutTypes.includes(type as TransactionType)) return 'out';
   return 'in';
 };
@@ -68,7 +68,7 @@ export const parseTransaction = async (
 ): Promise<RainbowTransaction> => {
   const { status, hash, meta, nonce, protocol } = transaction;
 
-  let txn = {
+  const txn = {
     ...transaction,
   };
   const changes: TransactionChanges = txn.changes.map(change => {
@@ -133,6 +133,8 @@ export const parseTransaction = async (
     contract,
     native,
     fee,
+    explorerUrl: meta.explorer_url,
+    explorerLabel: meta.explorer_label,
   } as RainbowTransaction;
 };
 
@@ -194,12 +196,12 @@ export const getDescription = (asset: ParsedAsset | undefined, type: Transaction
 
 export const isValidTransactionType = (type: string | undefined): type is TransactionType =>
   !!type &&
-  //@ts-expect-error - Ts doesnt like the weird type structure here
+  // @ts-expect-error - Ts doesnt like the weird type structure here
   (transactionTypes.withChanges.includes(type as TransactionType) ||
-    //@ts-expect-error - Ts doesnt like the weird type structure here
+    // @ts-expect-error - Ts doesnt like the weird type structure here
     transactionTypes.withoutChanges.includes(type as TransactionType) ||
     type === ('sale' as TransactionType));
 
 export const transactionTypeShouldHaveChanges = (type: TransactionType): type is TransactionWithChangesType =>
-  //@ts-expect-error - Ts doesnt like the weird type structure here
+  // @ts-expect-error - Ts doesnt like the weird type structure here
   transactionTypes.withChanges.includes(type);
diff --git a/src/resources/transactions/types.ts b/src/resources/transactions/types.ts
@@ -237,6 +237,8 @@ export type TransactionApiResponse = {
     action?: string;
     asset?: AddysAsset;
     quantity?: 'UNLIMITED' | string;
+    explorer_label?: string;
+    explorer_url?: string;
   };
   block_number?: number;
   mined_at?: number;

diff --git a/src/screens/transaction-details/components/TransactionDetailsHashAndActionsSection.tsx b/src/screens/transaction-details/components/TransactionDetailsHashAndActionsSection.tsx
@@ -18,6 +18,7 @@ import Routes from '@/navigation/routesNames';
 import { useSelector } from 'react-redux';
 import { AppState } from '@/redux/store';
 import WalletTypes from '@/helpers/walletTypes';
+import { Linking } from 'react-native';
 
 type Props = {
   transaction: RainbowTransaction;
@@ -65,7 +66,11 @@ export const TransactionDetailsHashAndActionsSection: React.FC<Props> = ({ trans
   const formattedHash = shortenTxHashString(hash);
 
   const onViewOnBlockExplorerPress = () => {
-    ethereumUtils.openTransactionInBlockExplorer(hash, network);
+    if (transaction.explorerUrl) {
+      Linking.openURL(transaction.explorerUrl);
+    } else {
+      ethereumUtils.openTransactionInBlockExplorer(hash, network);
+    }
   };
 
   return (
@@ -95,7 +100,7 @@ export const TransactionDetailsHashAndActionsSection: React.FC<Props> = ({ trans
             weight="heavy"
             onPress={onViewOnBlockExplorerPress}
             label={i18n.t(i18n.l.wallet.action.view_on, {
-              blockExplorerName: startCase(ethereumUtils.getBlockExplorer(network)),
+              blockExplorerName: transaction.explorerLabel ?? startCase(ethereumUtils.getBlockExplorer(network)),
             })}
             lightShadows
           />