From 523f192c6121806667cf96a3dd08711528ed4116 Mon Sep 17 00:00:00 2001
From: Godwin JIbs <126525197+Jibz-Mysten@users.noreply.github.com>
Date: Fri, 23 Jun 2023 12:38:59 -0400
Subject: [PATCH] wallet apps update (#12627)

## Description

Describe the changes or additions included in this PR.

- Switch to tailwind and remove scss for connected apps
- Clicking on the App in the all apps section take you to the app site
- UI fixes


<img width="406" alt="Screenshot 2023-06-22 at 11 40 16 AM"
src="https://github.com/MystenLabs/sui/assets/126525197/c4efa732-74b1-4302-97c1-f40a17cb26da">
<img width="394" alt="Screenshot 2023-06-22 at 11 39 50 AM"
src="https://github.com/MystenLabs/sui/assets/126525197/8c2e0d8c-e53d-4be0-b785-66e8e3c98e38">
<img width="384" alt="Screenshot 2023-06-22 at 11 39 00 AM"
src="https://github.com/MystenLabs/sui/assets/126525197/9d407af1-4cd9-458e-bd40-03ce893ad467">

<img width="395" alt="Screenshot 2023-06-22 at 11 38 53 AM"
src="https://github.com/MystenLabs/sui/assets/126525197/c55f97e8-5530-4bab-9cb9-5a11e481fd4d">
---
 .../components/sui-apps/ConnectedAppsCard.tsx |   5 +-
 .../sui-apps/Playground.module.scss           |  83 --------
 .../components/sui-apps/SuiApp.module.scss    | 182 ------------------
 .../src/ui/app/components/sui-apps/SuiApp.tsx | 179 +++++++++++------
 .../app/components/sui-apps/SuiAppEmpty.tsx   |  41 ++--
 .../src/ui/app/components/sui-apps/index.tsx  |  10 +-
 .../src/ui/app/shared/image-icon/index.tsx    |   6 +-
 7 files changed, 153 insertions(+), 353 deletions(-)
 delete mode 100644 apps/wallet/src/ui/app/components/sui-apps/Playground.module.scss
 delete mode 100644 apps/wallet/src/ui/app/components/sui-apps/SuiApp.module.scss

diff --git a/apps/wallet/src/ui/app/components/sui-apps/ConnectedAppsCard.tsx b/apps/wallet/src/ui/app/components/sui-apps/ConnectedAppsCard.tsx
index f25d5bc3ab7ef..114b4f3c27d73 100644
--- a/apps/wallet/src/ui/app/components/sui-apps/ConnectedAppsCard.tsx
+++ b/apps/wallet/src/ui/app/components/sui-apps/ConnectedAppsCard.tsx
@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { useFeature } from '@growthbook/growthbook-react';
-import cl from 'classnames';
 import { useEffect, useMemo } from 'react';
 
 import { useBackgroundClient } from '../../hooks/useBackgroundClient';
@@ -16,8 +15,6 @@ import { useAppSelector } from '_hooks';
 import { FEATURES } from '_src/shared/experimentation/features';
 import { prepareLinkToCompare } from '_src/shared/utils';
 
-import st from './Playground.module.scss';
-
 const emptyArray: DAppEntry[] = [];
 
 function ConnectedDapps() {
@@ -75,7 +72,7 @@ function ConnectedDapps() {
 				</Text>
 			</div>
 
-			<div className={cl(st.apps, st.appCards)}>
+			<div className="mb-28 grid gap-3.75 grid-cols-2">
 				{connectedApps.length ? (
 					connectedApps.map((app) => <SuiApp key={app.permissionID} {...app} displayType="card" />)
 				) : (
diff --git a/apps/wallet/src/ui/app/components/sui-apps/Playground.module.scss b/apps/wallet/src/ui/app/components/sui-apps/Playground.module.scss
deleted file mode 100644
index b1a94ae514c06..0000000000000
--- a/apps/wallet/src/ui/app/components/sui-apps/Playground.module.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-@use '_values/colors';
-@use '_utils';
-
-.group-buttons {
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	gap: 10px;
-	margin-bottom: 30px;
-
-	.outline {
-		background: none;
-		color: colors.$cta-blue;
-		border: 1px solid colors.$sui-steel-blue;
-		border-radius: 12px;
-
-		&:visited {
-			color: colors.$cta-blue;
-		}
-	}
-
-	.cta {
-		width: 100%;
-		font-size: 14px;
-		padding: 15px 20px;
-		text-align: center;
-		font-weight: 600;
-		text-transform: initial;
-
-		&:hover {
-			background: colors.$button-hover;
-		}
-	}
-}
-
-.angled-arrow {
-	@include utils.angled-arrow;
-
-	transform: rotate(-45deg);
-	display: inline-block;
-	font-weight: 100;
-	margin-left: 10px;
-	font-size: 10px;
-	color: colors.$sui-steel-blue;
-}
-
-.error {
-	@include utils.error-message-box;
-}
-
-.desc {
-	@include utils.typography('table/text-sm');
-
-	margin: 15px 0;
-	color: colors.$gray-80;
-	line-height: 130%;
-	font-weight: 400;
-
-	.title {
-		@include utils.typography('table/text-xs');
-
-		text-transform: uppercase;
-		font-weight: 600;
-		color: colors.$gray-75;
-		margin-bottom: 5px;
-	}
-}
-
-.apps {
-	margin-bottom: 120px;
-}
-
-.app-cards {
-	display: grid;
-	grid-template-columns: 1fr 1fr;
-	gap: 15px;
-}
-
-.active-section-title {
-	@include utils.typography('table/text-xs');
-
-	text-transform: uppercase;
-}
diff --git a/apps/wallet/src/ui/app/components/sui-apps/SuiApp.module.scss b/apps/wallet/src/ui/app/components/sui-apps/SuiApp.module.scss
deleted file mode 100644
index a7102d1831ae1..0000000000000
--- a/apps/wallet/src/ui/app/components/sui-apps/SuiApp.module.scss
+++ /dev/null
@@ -1,182 +0,0 @@
-@use '_values/colors';
-@use '_utils';
-
-.sui-app-empty {
-	display: flex;
-	flex-direction: row;
-	gap: 12px;
-	padding: 15px 5px;
-	height: 114px;
-
-	.icon {
-		width: 40px;
-		height: 40px;
-		background: colors.$gray-45;
-		border-radius: 20px;
-	}
-
-	.info {
-		display: flex;
-		flex-direction: column;
-		gap: 10px;
-		flex: 1;
-	}
-
-	.box-one,
-	.box-two,
-	.box-three {
-		background: colors.$gray-45;
-		border-radius: 4px;
-		height: 13px;
-	}
-
-	.box-one {
-		width: 40%;
-		max-width: 100px;
-
-		&.card {
-			width: 60%;
-			max-width: 67px;
-		}
-	}
-
-	.box-three {
-		width: 20%;
-		max-width: 63px;
-	}
-
-	&.card {
-		border: 1px solid colors.$gray-50;
-		border-radius: 15px;
-		flex-direction: column;
-		padding: 15px;
-	}
-}
-
-.ecosystem-app {
-	text-decoration: none;
-	color: colors.$gray-80;
-
-	.full {
-		border-bottom: 1px solid colors.$gray-50;
-	}
-
-	.default-img {
-		width: 40px;
-		height: 40px;
-		background: #6fbcf01a;
-		border-radius: 20px;
-	}
-
-	.sui-app {
-		display: flex;
-		flex-direction: row;
-		gap: 12px;
-		padding: 15px 5px;
-		cursor: pointer;
-
-		&:hover {
-			background: colors.$button-hover;
-		}
-
-		.title {
-			@include utils.typography('table/text-lg');
-
-			font-weight: 600;
-			color: colors.$sui-dark-blue;
-			word-break: break-all;
-			text-transform: capitalize;
-		}
-
-		.info {
-			display: flex;
-			gap: 7px;
-			flex-direction: column;
-		}
-
-		.icon {
-			img {
-				height: 50px;
-				width: 50px;
-				border-radius: 50%;
-			}
-		}
-
-		.description {
-			font-weight: 400;
-			font-size: 13px;
-			line-height: 130%;
-		}
-
-		.tags {
-			display: flex;
-			flex-wrap: wrap;
-			margin-top: auto;
-			grid-gap: 0.3rem;
-			gap: 0.3rem;
-
-			.tag {
-				border: 1px solid colors.$sui-steel-blue;
-				border-radius: 4px;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				padding: 0 6px;
-				height: 18px;
-				font-weight: 500;
-				font-size: 11px;
-				color: colors.$sui-steel-blue;
-				letter-spacing: 0.05em;
-				text-transform: uppercase;
-			}
-		}
-	}
-
-	.card {
-		border: 1px solid colors.$gray-50;
-		border-radius: 15px;
-		flex-direction: column;
-		padding: 15px;
-		height: 100%;
-		max-width: 153px;
-
-		.icon {
-			display: flex;
-			justify-content: space-between;
-
-			img {
-				height: 40px;
-				width: 40px;
-			}
-		}
-
-		.link {
-			word-break: break-all;
-		}
-
-		.external-link-icon {
-			height: 10px;
-			margin: 0;
-		}
-
-		.title {
-			margin-bottom: 0;
-			color: colors.$gray-90;
-		}
-
-		.info {
-			gap: 5px;
-		}
-	}
-}
-
-.angled-arrow {
-	@include utils.angled-arrow;
-
-	transform: rotate(-45deg);
-	display: inline-block;
-	font-weight: 100;
-	font-size: 10px;
-	margin-left: 5px;
-	color: colors.$sui-steel-blue;
-}
diff --git a/apps/wallet/src/ui/app/components/sui-apps/SuiApp.tsx b/apps/wallet/src/ui/app/components/sui-apps/SuiApp.tsx
index bb83b29c60485..fe4a4b03184c5 100644
--- a/apps/wallet/src/ui/app/components/sui-apps/SuiApp.tsx
+++ b/apps/wallet/src/ui/app/components/sui-apps/SuiApp.tsx
@@ -1,15 +1,14 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import cl from 'classnames';
 import { useState } from 'react';
 
 import DisconnectApp from './DisconnectApp';
+import { ImageIcon } from '_app/shared/image-icon';
 import ExternalLink from '_components/external-link';
 import { trackEvent } from '_src/shared/plausible';
 import { getDAppUrl } from '_src/shared/utils';
-
-import st from './SuiApp.module.scss';
+import { Text } from '_src/ui/app/shared/text';
 
 export type DAppEntry = {
 	name: string;
@@ -19,9 +18,82 @@ export type DAppEntry = {
 	tags: string[];
 };
 export type DisplayType = 'full' | 'card';
-export interface SuiAppProps extends DAppEntry {
-	displayType: DisplayType;
+
+type CardViewProp = {
+	name: string;
+	link: string;
+	icon?: string;
+};
+
+function CardView({ name, link, icon }: CardViewProp) {
+	const appUrl = getDAppUrl(link);
+	const originLabel = appUrl.hostname;
+	return (
+		<div className="bg-white flex flex-col p-3.75 box-border w-full rounded-2xl border border-gray-45 border-solid h-32 hover:bg-sui/10 hover:border-sui/30">
+			<div className="flex mb-1">
+				<ImageIcon src={icon || null} label={name} fallback={name} size="lg" circle />
+			</div>
+
+			<div className="flex flex-col gap-1 justify-start item-start">
+				<div className="line-clamp-2 break-all">
+					<Text variant="body" weight="semibold" color="gray-90">
+						{name}
+					</Text>
+				</div>
+				<Text variant="bodySmall" weight="medium" color="steel" truncate>
+					{originLabel}
+				</Text>
+			</div>
+		</div>
+	);
+}
+
+type ListViewProp = {
+	name: string;
+	icon?: string;
+	description: string;
+	tags?: string[];
+};
+
+function ListView({ name, icon, description, tags }: ListViewProp) {
+	return (
+		<div className="bg-white flex py-3.5 px-1.25 gap-3 item-center box-border rounded hover:bg-sui/10">
+			<ImageIcon src={icon || null} label={name} fallback={name} size="xl" circle />
+			<div className="flex flex-col gap-1 justify-center">
+				<Text variant="body" weight="semibold" color="sui-dark">
+					{name}
+				</Text>
+				<Text variant="subtitle" weight="normal" color="steel-darker">
+					{description}
+				</Text>
+				{tags?.length && (
+					<div className="flex flex-wrap gap-1">
+						{tags?.map((tag) => (
+							<div
+								className="flex item-center justify-center px-1.5 py-0.5 border border-solid border-steel rounded"
+								key={tag}
+							>
+								<Text variant="captionSmall" weight="medium" color="steel-dark">
+									{tag}
+								</Text>
+							</div>
+						))}
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}
+
+export interface SuiAppProps {
+	name: string;
+	description: string;
+	link: string;
+	icon: string;
+	tags: string[];
 	permissionID?: string;
+	displayType: DisplayType;
+	openAppSite?: boolean;
 }
 
 export function SuiApp({
@@ -30,69 +102,56 @@ export function SuiApp({
 	link,
 	icon,
 	tags,
-	displayType,
 	permissionID,
+	displayType,
+	openAppSite,
 }: SuiAppProps) {
 	const [showDisconnectApp, setShowDisconnectApp] = useState(false);
 	const appUrl = getDAppUrl(link);
-	const originLabel = appUrl.hostname;
 
-	const AppDetails = (
-		<div className={cl(st.suiApp, st[displayType])}>
-			<div className={st.icon}>
-				{icon ? (
-					<img src={icon} className={st.icon} alt={name} />
-				) : (
-					<div className={st.defaultImg}></div>
-				)}
-			</div>
-			<div className={st.info}>
-				<div className={st.title}>{name} </div>
-				{displayType === 'full' && <div className={st.description}>{description}</div>}
+	if (permissionID && showDisconnectApp) {
+		return (
+			<DisconnectApp
+				name={name}
+				link={link}
+				icon={icon}
+				permissionID={permissionID}
+				setShowDisconnectApp={setShowDisconnectApp}
+			/>
+		);
+	}
 
-				{displayType === 'card' && <div className={st.link}>{originLabel}</div>}
+	const AppDetails =
+		displayType === 'full' ? (
+			<ListView name={name} description={description} icon={icon} tags={tags} />
+		) : (
+			<CardView name={name} link={link} icon={icon} />
+		);
 
-				{displayType === 'full' && tags?.length && (
-					<div className={st.tags}>
-						{tags?.map((tag) => (
-							<div className={st.tag} key={tag}>
-								{tag}
-							</div>
-						))}
-					</div>
-				)}
+	if (permissionID && !openAppSite) {
+		return (
+			<div
+				className="bg-transparent cursor-pointer text-left w-full"
+				onClick={() => setShowDisconnectApp(true)}
+				role="button"
+			>
+				{AppDetails}
 			</div>
-		</div>
-	);
+		);
+	}
+
 	return (
-		<>
-			{permissionID && showDisconnectApp ? (
-				<DisconnectApp
-					name={name}
-					link={link}
-					icon={icon}
-					permissionID={permissionID}
-					setShowDisconnectApp={setShowDisconnectApp}
-				/>
-			) : null}
-			{permissionID ? (
-				<div className={st.ecosystemApp} onClick={() => setShowDisconnectApp(true)}>
-					{AppDetails}
-				</div>
-			) : (
-				<ExternalLink
-					href={appUrl?.toString() ?? link}
-					title={name}
-					className={st.ecosystemApp}
-					onClick={() => {
-						trackEvent('AppOpen', {
-							props: { name, source: 'AppPage' },
-						});
-					}}
-				>
-					{AppDetails}
-				</ExternalLink>
-			)}
-		</>
+		<ExternalLink
+			href={appUrl?.toString() ?? link}
+			title={name}
+			className="no-underline"
+			onClick={() => {
+				trackEvent('AppOpen', {
+					props: { name, source: 'AppPage' },
+				});
+			}}
+		>
+			{AppDetails}
+		</ExternalLink>
 	);
 }
diff --git a/apps/wallet/src/ui/app/components/sui-apps/SuiAppEmpty.tsx b/apps/wallet/src/ui/app/components/sui-apps/SuiAppEmpty.tsx
index 8573082ae88f5..68a2fb010d81c 100644
--- a/apps/wallet/src/ui/app/components/sui-apps/SuiAppEmpty.tsx
+++ b/apps/wallet/src/ui/app/components/sui-apps/SuiAppEmpty.tsx
@@ -1,27 +1,38 @@
 // Copyright (c) Mysten Labs, Inc.
 // SPDX-License-Identifier: Apache-2.0
 
-import cl from 'classnames';
+import { cva, type VariantProps } from 'class-variance-authority';
 
-import { type DisplayType } from './SuiApp';
+const appEmptyStyle = cva(['flex gap-3 p-3.75 h-28'], {
+	variants: {
+		displayType: {
+			full: 'w-full',
+			card: 'bg-white flex flex-col p-3.75 box-border w-full rounded-2xl h-32 box-border w-full rounded-2xl border border-solid border-gray-40',
+		},
+	},
+	defaultVariants: {
+		displayType: 'full',
+	},
+});
 
-import st from './SuiApp.module.scss';
+export interface SuiAppEmptyProps extends VariantProps<typeof appEmptyStyle> {}
 
-export type SuiAppEmptyProps = {
-	displayType: DisplayType;
-};
-
-export function SuiAppEmpty({ displayType }: SuiAppEmptyProps) {
+export function SuiAppEmpty({ ...styleProps }: SuiAppEmptyProps) {
 	return (
-		<div className={cl(st.suiApp, st.suiAppEmpty, st[displayType])}>
-			<div className={st.icon}></div>
-			<div className={st.info}>
-				<div className={st.boxOne}></div>
-				{displayType === 'full' && (
+		<div className={appEmptyStyle(styleProps)}>
+			<div className="bg-gray-40 w-10 h-10 rounded-full"></div>
+			<div className="flex flex-col gap-2.5 flex-1">
+				{styleProps.displayType === 'full' ? (
 					<>
-						<div className={st.boxTwo}></div>
-						<div className={st.boxThree}></div>
+						<div className="bg-gray-40 rounded h-3.5 w-2/5"></div>
+						<div className="bg-gray-40 rounded h-3.5 w-full"></div>
+						<div className="bg-gray-40 rounded h-3.5 w-1/4"></div>
 					</>
+				) : (
+					<div className="flex gap-2">
+						<div className="bg-gray-40 rounded h-3.5 w-1/4"></div>
+						<div className="bg-gray-40 rounded h-3.5 w-3/5"></div>
+					</div>
 				)}
 			</div>
 		</div>
diff --git a/apps/wallet/src/ui/app/components/sui-apps/index.tsx b/apps/wallet/src/ui/app/components/sui-apps/index.tsx
index 667aea40a5931..596c98657d3ef 100644
--- a/apps/wallet/src/ui/app/components/sui-apps/index.tsx
+++ b/apps/wallet/src/ui/app/components/sui-apps/index.tsx
@@ -2,7 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { useFeature } from '@growthbook/growthbook-react';
-import cl from 'classnames';
 import { useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 
@@ -15,8 +14,6 @@ import { useAppSelector } from '_hooks';
 import { FEATURES } from '_src/shared/experimentation/features';
 import { prepareLinkToCompare } from '_src/shared/utils';
 
-import st from './Playground.module.scss';
-
 function AppsPlayGround() {
 	const ecosystemApps = useFeature<DAppEntry[]>(FEATURES.WALLET_DAPPS).value;
 	const { tagName } = useParams();
@@ -43,7 +40,7 @@ function AppsPlayGround() {
 	}, [allPermissions]);
 
 	return (
-		<div className={cl(st.container)}>
+		<>
 			<div className="flex justify-center mb-4">
 				<Heading variant="heading6" color="gray-90" weight="semibold">
 					Sui Apps
@@ -60,20 +57,21 @@ function AppsPlayGround() {
 			) : null}
 
 			{filteredEcosystemApps?.length ? (
-				<div className={st.apps}>
+				<div className="flex flex-col divide-y divide-gray-45 divide-solid divide-x-0 mt-2 mb-28">
 					{filteredEcosystemApps.map((app) => (
 						<SuiApp
 							key={app.link}
 							{...app}
 							permissionID={linkToPermissionID.get(prepareLinkToCompare(app.link))}
 							displayType="full"
+							openAppSite
 						/>
 					))}
 				</div>
 			) : (
 				<SuiAppEmpty displayType="full" />
 			)}
-		</div>
+		</>
 	);
 }
 
diff --git a/apps/wallet/src/ui/app/shared/image-icon/index.tsx b/apps/wallet/src/ui/app/shared/image-icon/index.tsx
index d7622e591884c..c74ccfaed8ffc 100644
--- a/apps/wallet/src/ui/app/shared/image-icon/index.tsx
+++ b/apps/wallet/src/ui/app/shared/image-icon/index.tsx
@@ -9,8 +9,8 @@ const imageStyle = cva(['text-white capitalize overflow-hidden bg-gray-40  shrin
 		size: {
 			sm: 'w-6 h-6 font-medium text-subtitleSmallExtra',
 			md: 'w-7.5 h-7.5 font-medium text-body',
-			lg: 'md:w-10 md:h-10 w-8 h-8 font-medium text-heading4 md:text-3xl',
-			xl: 'md:w-31.5 md:h-31.5 w-16 h-16 font-medium text-heading4 md:text-5xl',
+			lg: 'w-10 h-10 font-medium text-heading4',
+			xl: 'w-15 h-15 font-medium text-heading4',
 		},
 		circle: {
 			true: 'rounded-full',
@@ -49,7 +49,7 @@ export function ImageIcon({ src, label, alt = label, fallback, ...styleProps }:
 				<img
 					src={src || ''}
 					alt={alt}
-					className="flex h-full w-full items-center justify-center object-contain"
+					className="flex h-full w-full items-center justify-center object-cover"
 					onError={() => setError(true)}
 				/>
 			)}