Add the basic styles of the Link component

dapp/src/components/shared/ViewInBlockExplorer/index.tsx

@@ -1,26 +1,26 @@
 import React from "react"
 import { Chain, ExplorerDataType } from "#/types"
-import { Link } from "@chakra-ui/react"
+import { Link, LinkProps } from "@chakra-ui/react"
 import { createLinkToBlockExplorerForChain } from "#/utils"
 
 type ViewInBlockExplorerProps = {
   text?: string
   id: string
   type: ExplorerDataType
   chain?: Chain
-}
+} & Omit<LinkProps, "isExternal">
 
 function ViewInBlockExplorer({
   text,
   id,
   type,
   chain = "ethereum",
+  ...linkProps
 }: ViewInBlockExplorerProps) {
   const { link, title } = createLinkToBlockExplorerForChain(chain, id, type)
 
   return (
-    // TODO: Use a button link
-    <Link href={link} isExternal>
+    <Link href={link} isExternal {...linkProps}>
       {text ?? title}
     </Link>
   )

dapp/src/theme/Link.ts

@@ -0,0 +1,15 @@
+import { defineStyle, defineStyleConfig } from "@chakra-ui/react"
+
+const baseStyle = defineStyle({
+  fontWeight: "semibold",
+  fontSize: "sm",
+  lineHeight: "sm",
+
+  _hover: {
+    textDecoration: "none",
+  },
+})
+
+export const linkTheme = defineStyleConfig({
+  baseStyle,
+})

dapp/src/theme/index.ts

@@ -22,6 +22,7 @@ import { spinnerTheme } from "./Spinner"
 import { tableTheme } from "./Table"
 import { currencyIconTheme } from "./CurrencyIcon"
 import { statusInfoTheme } from "./StatusInfo"
+import { linkTheme } from "./Link"
 
 const defaultTheme = {
   colors,
@@ -60,6 +61,7 @@ const defaultTheme = {
     Table: tableTheme,
     CurrencyIcon: currencyIconTheme,
     StatusInfo: statusInfoTheme,
+    Link: linkTheme,
   },
 }