From 436172333d2a0ee33127461068441329ed7636d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tomasz=20T=C3=B3rz?=
 <93620601+torztomasz@users.noreply.github.com>
Date: Wed, 23 Aug 2023 12:40:54 +0200
Subject: [PATCH] fix link style issue (#479)

---
 packages/frontend/src/view/components/Link.tsx  |  6 ++----
 .../src/view/pages/user/UserRecoverPage.tsx     | 17 +++++++++++++----
 .../src/view/pages/user/UserRegisterPage.tsx    | 12 +++++++++---
 .../view/pages/user/components/UserProfile.tsx  | 16 ++++++++++++++--
 4 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/packages/frontend/src/view/components/Link.tsx b/packages/frontend/src/view/components/Link.tsx
index b65547478..b8294ef31 100644
--- a/packages/frontend/src/view/components/Link.tsx
+++ b/packages/frontend/src/view/components/Link.tsx
@@ -21,16 +21,14 @@ export function Link({
   const rel = isOutLink ? 'noreferrer noopener' : undefined
   const hasHref = href != null
   const classNames = cx(
-    'group inline mx-auto my-auto text-blue-500 fill-blue-500 hover:fill-blue-600 hover:text-blue-600 underline underline-offset-[3.5px] transition-colors',
+    'group inline-flex gap-2 items-center text-blue-500 fill-blue-500 hover:fill-blue-600 hover:text-blue-600 underline underline-offset-[3.5px] transition-colors',
     className
   )
   return hasHref ? (
     <a href={href} className={classNames} target={target} rel={rel} {...rest}>
       {accessoryLeft}
       {children}
-      {isOutLink && (
-        <OutLinkIcon className="ml-2 inline group-hover:stroke-blue-600" />
-      )}
+      {isOutLink && <OutLinkIcon className="group-hover:stroke-blue-600" />}
       {accessoryRight}
     </a>
   ) : (
diff --git a/packages/frontend/src/view/pages/user/UserRecoverPage.tsx b/packages/frontend/src/view/pages/user/UserRecoverPage.tsx
index b8316a44d..81fcd8cbe 100644
--- a/packages/frontend/src/view/pages/user/UserRecoverPage.tsx
+++ b/packages/frontend/src/view/pages/user/UserRecoverPage.tsx
@@ -4,6 +4,7 @@ import React from 'react'
 import { WarningIcon } from '../../assets/icons/WarningIcon'
 import { Button } from '../../components/Button'
 import { Card } from '../../components/Card'
+import { EtherscanLink } from '../../components/EtherscanLink'
 import { InlineEllipsis } from '../../components/InlineEllipsis'
 import { Link } from '../../components/Link'
 import { ContentWrapper } from '../../components/page/ContentWrapper'
@@ -61,7 +62,7 @@ function UserRecoverPage(props: UserRegisterPageProps) {
         </div>
         <Card className="row-start-2 h-min lg:col-start-2 lg:row-start-1">
           <p className="text-sm font-semibold text-zinc-500">Stark key</p>
-          <div className="mt-3 flex items-center justify-between">
+          <div className="mt-1 flex items-center justify-between">
             <div className="flex items-center">
               <WarningIcon />
               <p className="ml-2 font-semibold text-amber-500">Unknown</p>
@@ -70,9 +71,17 @@ function UserRecoverPage(props: UserRegisterPageProps) {
           <p className="mt-6 text-sm font-semibold text-zinc-500">
             Ethereum address
           </p>
-          <InlineEllipsis className="mt-1 w-full max-w-[250px] font-semibold text-white sm:max-w-[100%] lg:max-w-[95%] ">
-            {props.context.user.address.toString()}
-          </InlineEllipsis>
+          <EtherscanLink
+            chainId={props.context.chainId}
+            type="address"
+            address={props.context.user.address.toString()}
+            className="mt-1"
+          >
+            <InlineEllipsis className="w-full max-w-[250px] font-semibold sm:max-w-[100%] lg:max-w-[350px] ">
+              {props.context.user.address.toString()}
+            </InlineEllipsis>
+          </EtherscanLink>
+
           <Button
             className="mt-3 w-full"
             id={RECOVER_STARK_KEY_BUTTON_ID}
diff --git a/packages/frontend/src/view/pages/user/UserRegisterPage.tsx b/packages/frontend/src/view/pages/user/UserRegisterPage.tsx
index cd5dc575c..fb6f0a41b 100644
--- a/packages/frontend/src/view/pages/user/UserRegisterPage.tsx
+++ b/packages/frontend/src/view/pages/user/UserRegisterPage.tsx
@@ -4,6 +4,7 @@ import React from 'react'
 
 import { Button } from '../../components/Button'
 import { Card } from '../../components/Card'
+import { EtherscanLink } from '../../components/EtherscanLink'
 import { InlineEllipsis } from '../../components/InlineEllipsis'
 import { ContentWrapper } from '../../components/page/ContentWrapper'
 import { Page } from '../../components/page/Page'
@@ -53,11 +54,16 @@ function UserRegisterPage(props: UserRegisterPageProps) {
           <p className="mt-6 text-sm font-semibold text-zinc-500">
             Ethereum address
           </p>
-          <div className="mt-3 flex items-center justify-between">
-            <InlineEllipsis className="max-w-[120px] font-semibold sm:max-w-full lg:max-w-[250px]">
+          <EtherscanLink
+            chainId={props.context.chainId}
+            type="address"
+            address={props.context.user.address.toString()}
+            className="mt-1"
+          >
+            <InlineEllipsis className="max-w-[250px] font-semibold sm:max-w-full lg:max-w-[250px]">
               {props.context.user.address.toString()}
             </InlineEllipsis>
-          </div>
+          </EtherscanLink>
           <Button
             className="mt-3 w-full"
             id={REGISTER_STARK_KEY_BUTTON_ID}
diff --git a/packages/frontend/src/view/pages/user/components/UserProfile.tsx b/packages/frontend/src/view/pages/user/components/UserProfile.tsx
index e64bbc61f..b6e2626ac 100644
--- a/packages/frontend/src/view/pages/user/components/UserProfile.tsx
+++ b/packages/frontend/src/view/pages/user/components/UserProfile.tsx
@@ -6,6 +6,7 @@ import { Button } from '../../../components/Button'
 import { Card } from '../../../components/Card'
 import { EtherscanLink } from '../../../components/EtherscanLink'
 import { InfoBanner } from '../../../components/InfoBanner'
+import { InlineEllipsis } from '../../../components/InlineEllipsis'
 import { LongHash } from '../../../components/LongHash'
 
 interface UserProfileProps {
@@ -38,13 +39,24 @@ export function UserProfile({
           address={ethereumAddress.toString()}
           className="break-all font-semibold"
         >
-          {ethereumAddress.toString()}
+          <InlineEllipsis className="max-w-[250px] sm:max-w-full">
+            {ethereumAddress.toString()}
+          </InlineEllipsis>
         </EtherscanLink>
       ) : (
         <>
           <div className="mt-3 md:flex md:items-center md:justify-between">
             {user?.address && isMine ? (
-              <LongHash withCopy>{user.address.toString()}</LongHash>
+              <EtherscanLink
+                chainId={chainId}
+                type="address"
+                address={user.address.toString()}
+                className="break-all font-semibold"
+              >
+                <InlineEllipsis className="max-w-[250px] sm:max-w-full">
+                  {user.address.toString()}
+                </InlineEllipsis>
+              </EtherscanLink>
             ) : (
               'Unknown'
             )}