From 1d71c4b6844bba5a084124a32715cac9197651d2 Mon Sep 17 00:00:00 2001
From: Harman-singh-waraich <Waraichharman68@gmail.com>
Date: Fri, 13 Sep 2024 22:03:33 +0530
Subject: [PATCH] feat(web): link-to-explorer-for-address-in-account-display

---
 .../Header/navbar/Menu/Settings/General.tsx   | 24 ++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/web/src/layout/Header/navbar/Menu/Settings/General.tsx b/web/src/layout/Header/navbar/Menu/Settings/General.tsx
index d5656f3..b1ff04a 100644
--- a/web/src/layout/Header/navbar/Menu/Settings/General.tsx
+++ b/web/src/layout/Header/navbar/Menu/Settings/General.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import styled from "styled-components";
 import { useAccount, useDisconnect } from "wagmi";
 import { Button } from "@kleros/ui-components-library";
@@ -64,13 +64,29 @@ const UserContainer = styled.div`
   gap: 12px;
 `;
 
+const StyledA = styled.a`
+  text-decoration: none;
+  label {
+    cursor: pointer;
+    color: ${({ theme }) => theme.primaryBlue};
+  }
+  :hover {
+    text-decoration: underline;
+  }
+`;
+
 export const DisconnectWalletButton: React.FC = () => {
   const { disconnect } = useDisconnect();
   return <Button text={`Disconnect`} onClick={() => disconnect()} />;
 };
 
 const General: React.FC = () => {
-  const { address } = useAccount();
+  const { address, chain } = useAccount();
+
+  const addressExplorerLink = useMemo(() => {
+    return `${chain?.blockExplorers?.default.url}/address/${address}`;
+  }, [address, chain]);
+
   return (
     <EnsureChainContainer>
       <EnsureChain>
@@ -81,7 +97,9 @@ const General: React.FC = () => {
                 <IdenticonOrAvatar size="48" />
               </StyledAvatarContainer>
               <StyledAddressContainer>
-                <AddressOrName />
+                <StyledA href={addressExplorerLink} rel="noreferrer" target="_blank">
+                  <AddressOrName />
+                </StyledA>
               </StyledAddressContainer>
               <StyledChainContainer>
                 <ChainDisplay />