From af0b403b2f2ca523fc0f5ce84e47052c19e66458 Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Fri, 19 Jan 2024 12:48:25 +0100
Subject: [PATCH] Add the basic styles of the `Link` component

---
 .../shared/ViewInBlockExplorer/index.tsx          |  8 ++++----
 dapp/src/theme/Link.ts                            | 15 +++++++++++++++
 dapp/src/theme/index.ts                           |  2 ++
 3 files changed, 21 insertions(+), 4 deletions(-)
 create mode 100644 dapp/src/theme/Link.ts

diff --git a/dapp/src/components/shared/ViewInBlockExplorer/index.tsx b/dapp/src/components/shared/ViewInBlockExplorer/index.tsx
index aee3fc175..15a5ca21b 100644
--- a/dapp/src/components/shared/ViewInBlockExplorer/index.tsx
+++ b/dapp/src/components/shared/ViewInBlockExplorer/index.tsx
@@ -1,6 +1,6 @@
 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 = {
@@ -8,19 +8,19 @@ type ViewInBlockExplorerProps = {
   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>
   )
diff --git a/dapp/src/theme/Link.ts b/dapp/src/theme/Link.ts
new file mode 100644
index 000000000..3c9d7c7aa
--- /dev/null
+++ b/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,
+})
diff --git a/dapp/src/theme/index.ts b/dapp/src/theme/index.ts
index 47f221772..c3e5517b0 100644
--- a/dapp/src/theme/index.ts
+++ b/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,
   },
 }