Make protocol history item clickable

We want to redirect users to transaction details in the blockexplorer.

Author: r-czajkowski

src/components/ViewInBlockExplorer.tsx

@@ -9,7 +9,7 @@ import { supportedChainId } from "../utils/getEnvVariable"
 
 export type Chain = "bitcoin" | "ethereum"
 
-const createLinkToBlockExplorerForChain: Record<
+export const createLinkToBlockExplorerForChain: Record<
   Chain,
   (id: string, type: ExplorerDataType) => string
 > = {

src/components/tBTC/RecentDeposits.tsx

@@ -1,11 +1,23 @@
 import { FC } from "react"
-import { BodySm, List, HStack, ListProps } from "@threshold-network/components"
+import {
+  BodySm,
+  List,
+  HStack,
+  ListProps,
+  LinkBox,
+  LinkOverlay,
+  Link,
+} from "@threshold-network/components"
 import shortenAddress from "../../utils/shortenAddress"
 import Identicon from "../Identicon"
 import { OutlineListItem } from "../OutlineListItem"
 import { InlineTokenBalance } from "../TokenBalance"
 import { getRelativeTime } from "../../utils/date"
 import { RecentDeposit } from "../../hooks/tbtc/useFetchRecentDeposits"
+import ViewInBlockExplorer, {
+  createLinkToBlockExplorerForChain,
+} from "../ViewInBlockExplorer"
+import { ExplorerDataType } from "../../utils/createEtherscanLink"
 
 export type RecentDepositsProps = {
   deposits: RecentDeposit[]
@@ -22,23 +34,46 @@ export const RecentDeposits: FC<RecentDepositsProps> = ({
   )
 }
 
-const RecentDepositItem: FC<RecentDeposit> = ({ amount, address, date }) => {
+const RecentDepositItem: FC<RecentDeposit> = ({
+  amount,
+  address,
+  date,
+  txHash,
+}) => {
   return (
-    <OutlineListItem>
-      <BodySm>
-        <InlineTokenBalance
-          tokenAmount={amount}
-          withSymbol
-          tokenSymbol="tBTC"
-          color="brand.500"
-        />
-      </BodySm>
+    <LinkBox as={OutlineListItem}>
+      <LinkOverlay
+        // We can't use `ViewInBlockExplorer` or our custom `Link` component
+        // because `LinkOverlay` component from chakra doesn't pass the
+        // `isExternal` prop forward so `ViewInBlockExplorer` or `Link`
+        // component sees this link as an internal so the link will open in the
+        // same tab and the TS compiler throws an error that `to` prop is
+        // missing because of conditional props of `Link` component.
+        as={Link}
+        textDecoration="none"
+        _hover={{ textDecoration: "none" }}
+        color="inherit"
+        isExternal
+        href={createLinkToBlockExplorerForChain.ethereum(
+          txHash,
+          ExplorerDataType.TRANSACTION
+        )}
+      >
+        <BodySm>
+          <InlineTokenBalance
+            tokenAmount={amount}
+            withSymbol
+            tokenSymbol="tBTC"
+            color="brand.500"
+          />
+        </BodySm>
+      </LinkOverlay>
       <HStack spacing="2">
         <Identicon address={address} />
         <BodySm textStyle="chain-identifier">{shortenAddress(address)}</BodySm>
       </HStack>
       <BodySm>{getRelativeTime(date)}</BodySm>
-    </OutlineListItem>
+    </LinkBox>
   )
 }