From fc1f0fe196424617cf880bc1ab846108481e199e Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sun, 7 Nov 2021 17:46:42 -0300
Subject: [PATCH] Use higher level component

---
 src/transaction/Trace.tsx      | 16 +++++-----------
 src/transaction/TraceInput.tsx | 16 +++++-----------
 2 files changed, 10 insertions(+), 22 deletions(-)

diff --git a/src/transaction/Trace.tsx b/src/transaction/Trace.tsx
index 36be350..6d3fe71 100644
--- a/src/transaction/Trace.tsx
+++ b/src/transaction/Trace.tsx
@@ -1,7 +1,6 @@
 import React, { useContext, useMemo } from "react";
-import AddressHighlighter from "../components/AddressHighlighter";
-import DecoratedAddressLink from "../components/DecoratedAddressLink";
 import ContentFrame from "../ContentFrame";
+import TransactionAddress from "../components/TransactionAddress";
 import TraceItem from "./TraceItem";
 import { TransactionData } from "../types";
 import { useBatch4Bytes } from "../use4Bytes";
@@ -38,15 +37,10 @@ const Trace: React.FC<TraceProps> = ({ txData, resolvedAddresses }) => {
     <ContentFrame tabs>
       <div className="mt-4 mb-5 space-y-3 font-code text-sm flex flex-col items-start overflow-x-auto">
         <div className="border hover:border-gray-500 rounded px-1 py-0.5">
-          <AddressHighlighter address={txData.from}>
-            <DecoratedAddressLink
-              address={txData.from}
-              miner={txData.from === txData.confirmedData?.miner}
-              txFrom
-              txTo={txData.from === txData.to}
-              resolvedAddresses={mergedResolvedAddresses}
-            />
-          </AddressHighlighter>
+          <TransactionAddress
+            address={txData.from}
+            resolvedAddresses={resolvedAddresses}
+          />
         </div>
         <div className="flex">
           <div className="w-5"></div>
diff --git a/src/transaction/TraceInput.tsx b/src/transaction/TraceInput.tsx
index c1cd8a8..3ae856f 100644
--- a/src/transaction/TraceInput.tsx
+++ b/src/transaction/TraceInput.tsx
@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import { Switch } from "@headlessui/react";
-import AddressHighlighter from "../components/AddressHighlighter";
-import DecoratedAddressLink from "../components/DecoratedAddressLink";
+import TransactionAddress from "../components/TransactionAddress";
 import FormattedBalance from "../components/FormattedBalance";
 import FunctionSignature from "./FunctionSignature";
 import DecodedParamsTable from "./decoder/DecodedParamsTable";
@@ -46,15 +45,10 @@ const TraceInput: React.FC<TraceInputProps> = ({
       <div className="flex items-baseline">
         <span className="text-xs text-gray-400 lowercase">{t.type}</span>
         <span>
-          <AddressHighlighter address={t.to}>
-            <DecoratedAddressLink
-              address={t.to}
-              miner={t.to === txData.confirmedData?.miner}
-              txFrom={t.to === txData.from}
-              txTo={t.to === txData.to}
-              resolvedAddresses={resolvedAddresses}
-            />
-          </AddressHighlighter>
+          <TransactionAddress
+            address={t.to}
+            resolvedAddresses={resolvedAddresses}
+          />
         </span>
         <span>.</span>
         <FunctionSignature callType={t.type} sig={sigText} />