Add explorer link to Wallet Settings (#12770)

- Add explorer button to wallet setting - Fix Sui Apps description line height - Switch the secondary button color to `bg-gray-40 ` <img width="442" alt="Screenshot 2023-06-29 at 1 24 17 PM" src="https://github.com/MystenLabs/sui/assets/126525197/4b3b4bf2-65e6-42c4-9d0e-72c8c00acc55"> <img width="451" alt="Screenshot 2023-06-30 at 10 00 13 AM" src="https://github.com/MystenLabs/sui/assets/126525197/d48d46dd-4fe2-49d0-ba38-5f0ef6b66586">
MystenLabs · Jun 30, 2023 · 3da7252 · 3da7252
1 parent 940bfb1
commit 3da7252
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 11 deletions.
diff --git a/apps/wallet/src/ui/app/components/menu/content/MenuList.tsx b/apps/wallet/src/ui/app/components/menu/content/MenuList.tsx
@@ -5,6 +5,7 @@ import { useResolveSuiNSName } from '@mysten/core';
 import {
 	Account24,
 	ArrowUpRight12,
+	ArrowUpRight16,
 	Domain24,
 	Version24,
 	CopyArchiveDoNotUse24,
@@ -23,8 +24,10 @@ import { lockWallet } from '_app/wallet/actions';
 import { useNextMenuUrl } from '_components/menu/hooks';
 import { useAppDispatch, useAppSelector } from '_hooks';
 import { ToS_LINK, FAQ_LINK } from '_src/shared/constants';
+import { ExplorerLinkType } from '_src/ui/app/components/explorer-link/ExplorerLinkType';
 import { useActiveAddress } from '_src/ui/app/hooks/useActiveAddress';
 import { useAutoLockInterval } from '_src/ui/app/hooks/useAutoLockInterval';
+import { useExplorerLink } from '_src/ui/app/hooks/useExplorerLink';
 import { logout } from '_src/ui/app/redux/slices/account';
 import { ConfirmationModal } from '_src/ui/app/shared/ConfirmationModal';
 import { Link } from '_src/ui/app/shared/Link';
@@ -45,16 +48,35 @@ function MenuList() {
 	const navigate = useNavigate();
 	const [logoutInProgress, setLogoutInProgress] = useState(false);
 	const [isLogoutDialogOpen, setIsLogoutDialogOpen] = useState(false);
+	const explorerAddress = useExplorerLink({
+		type: ExplorerLinkType.address,
+		address: address || '',
+	});
 	return (
 		<>
 			<MenuLayout title="Wallet Settings">
 				<div className="flex flex-col divide-y divide-x-0 divide-solid divide-gray-45">
-					<MenuListItem
-						to={accountUrl}
-						icon={<Account24 />}
-						title={'Accounts'}
-						subtitle={domainName ?? (address ? formatAddress(address) : '')}
-					/>
+					<div className="flex flex-col mb-3">
+						<MenuListItem
+							to={accountUrl}
+							icon={<Account24 />}
+							title={'Accounts'}
+							subtitle={domainName ?? (address ? formatAddress(address) : '')}
+						/>
+						{explorerAddress && (
+							<Button
+								variant="secondary"
+								size="narrow"
+								href={explorerAddress}
+								text={
+									<Text variant="bodySmall" weight="medium" color="steel-darker">
+										View account on Sui Explorer
+									</Text>
+								}
+								after={<ArrowUpRight16 className="text-steel w-4 h-4" />}
+							/>
+						)}
+					</div>
 					<MenuListItem
 						to={networkUrl}
 						icon={<Domain24 />}

diff --git a/apps/wallet/src/ui/app/components/menu/content/MenuListItem.tsx b/apps/wallet/src/ui/app/components/menu/content/MenuListItem.tsx
@@ -52,7 +52,7 @@ function MenuListItem({
 				href={href}
 				target="_blank"
 				rel="noreferrer noopener"
-				className="flex flex-nowrap items-center px-1 py-4.5 first:pt-3 last:pb-3 gap-5 no-underline overflow-hidden group cursor-pointer"
+				className="flex flex-nowrap items-center px-1 py-4.5 first:pt-3 first:pb-3 last:pb-3 gap-5 no-underline overflow-hidden group cursor-pointer"
 			>
 				{MenuItemContent}
 			</a>
@@ -61,7 +61,7 @@ function MenuListItem({
 	return (
 		<Component
 			data-testid={title}
-			className="flex flex-nowrap items-center px-1 py-4.5 first:pt-3 last:pb-3 gap-5 no-underline overflow-hidden group cursor-pointer"
+			className="flex flex-nowrap items-center px-1 py-5 first:pt-3 first:pb-3 last:pb-3 gap-5 no-underline overflow-hidden group cursor-pointer"
 			to={to}
 			onClick={onClick}
 		>

diff --git a/apps/wallet/src/ui/app/components/sui-apps/SuiApp.tsx b/apps/wallet/src/ui/app/components/sui-apps/SuiApp.tsx
@@ -63,11 +63,11 @@ function ListView({ name, icon, description, tags }: ListViewProp) {
 				<Text variant="body" weight="semibold" color="sui-dark">
 					{name}
 				</Text>
-				<Text variant="subtitle" weight="normal" color="steel-darker">
+				<Text variant="pSubtitle" weight="normal" color="steel-darker">
 					{description}
 				</Text>
 				{tags?.length && (
-					<div className="flex flex-wrap gap-1">
+					<div className="flex flex-wrap gap-1 mt-0.5">
 						{tags?.map((tag) => (
 							<div
 								className="flex item-center justify-center px-1.5 py-0.5 border border-solid border-steel rounded"

diff --git a/apps/wallet/src/ui/app/shared/ButtonUI.tsx b/apps/wallet/src/ui/app/shared/ButtonUI.tsx
@@ -26,7 +26,8 @@ const styles = cva(
 					'disabled:bg-hero-darkest disabled:text-white disabled:opacity-40',
 				],
 				secondary: [
-					'bg-gray-45 text-steel-darker border-none',
+					'bg-gray-40 text-steel-darker border-none',
+					'hover:bg-gray-45 focus:bg-gray-45',
 					'visited:text-steel-darker',
 					'active:text-steel-dark/70',
 					'disabled:bg-gray-40 disabled:text-steel/50',