From eb3797b79c6e48e9be8b096c0b3f815656c2d071 Mon Sep 17 00:00:00 2001
From: evavirseda <evirseda@boxfish.studio>
Date: Tue, 27 Aug 2024 12:44:13 +0200
Subject: [PATCH] feat:rebrand other assets (#1996)

---
 .../components/molecules/card/CardAction.tsx  |  7 ++--
 .../app/pages/home/nfts/NonVisualAssets.tsx   | 41 ++++++++-----------
 2 files changed, 21 insertions(+), 27 deletions(-)

diff --git a/apps/ui-kit/src/lib/components/molecules/card/CardAction.tsx b/apps/ui-kit/src/lib/components/molecules/card/CardAction.tsx
index b3528204c3d..11f4769a09c 100644
--- a/apps/ui-kit/src/lib/components/molecules/card/CardAction.tsx
+++ b/apps/ui-kit/src/lib/components/molecules/card/CardAction.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { ArrowRight } from '@iota/ui-icons';
+import { ArrowRight, ArrowTopRight } from '@iota/ui-icons';
 import { Button, ButtonSize, ButtonType } from '@/components/atoms/button';
 import { CardActionType } from './card.enums';
 
@@ -10,16 +10,17 @@ export type CardActionProps = {
     subtitle?: string;
     type: CardActionType;
     onClick?: () => void;
+    isExternalLink?: boolean;
 };
 
-export function CardAction({ type, onClick, subtitle, title }: CardActionProps) {
+export function CardAction({ type, onClick, subtitle, title, isExternalLink }: CardActionProps) {
     if (type === CardActionType.Link) {
         return (
             <div
                 onClick={onClick}
                 className="shrink-0 text-neutral-10 dark:text-neutral-92 [&_svg]:h-6 [&_svg]:w-6"
             >
-                <ArrowRight />
+                {isExternalLink ? <ArrowTopRight /> : <ArrowRight />}
             </div>
         );
     }
diff --git a/apps/wallet/src/ui/app/pages/home/nfts/NonVisualAssets.tsx b/apps/wallet/src/ui/app/pages/home/nfts/NonVisualAssets.tsx
index c7bc93108cf..191e512fec8 100644
--- a/apps/wallet/src/ui/app/pages/home/nfts/NonVisualAssets.tsx
+++ b/apps/wallet/src/ui/app/pages/home/nfts/NonVisualAssets.tsx
@@ -3,9 +3,9 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { ExplorerLink, ExplorerLinkType } from '_components';
-import { Text } from '_src/ui/app/shared/text';
 import { type IotaObjectData } from '@iota/iota-sdk/client';
 import { formatAddress, parseStructTag } from '@iota/iota-sdk/utils';
+import { Card, CardAction, CardActionType, CardBody, CardType } from '@iota/apps-ui-kit';
 
 interface NonVisualAssetsProps {
     items: IotaObjectData[];
@@ -15,36 +15,29 @@ export default function NonVisualAssets({ items }: NonVisualAssetsProps) {
     return (
         <div className="flex w-full flex-1 flex-col items-center gap-4">
             {items?.length ? (
-                <div className="divide-gray-40 flex w-full flex-col flex-wrap gap-3 divide-x-0 divide-y divide-solid">
+                <div className="flex w-full flex-col">
                     {items.map((item) => {
                         const { address, module, name } = parseStructTag(item.type!);
                         return (
-                            <div className="grid grid-cols-3 pt-3" key={item.objectId}>
-                                <ExplorerLink
-                                    className="text-hero-dark no-underline"
-                                    objectID={item.objectId!}
-                                    type={ExplorerLinkType.Object}
-                                >
-                                    <Text variant="pBody">{formatAddress(item.objectId!)}</Text>
-                                </ExplorerLink>
-
-                                <div className="col-span-2 break-all">
-                                    <Text
-                                        variant="pBodySmall"
-                                        weight="normal"
-                                        mono
-                                        color="steel"
-                                        title={item.type ?? ''}
-                                    >
-                                        {`${formatAddress(address)}::${module}::${name}`}
-                                    </Text>
-                                </div>
-                            </div>
+                            <ExplorerLink
+                                className="text-hero-dark no-underline"
+                                objectID={item.objectId!}
+                                type={ExplorerLinkType.Object}
+                                key={item.objectId}
+                            >
+                                <Card type={CardType.Default}>
+                                    <CardBody
+                                        title={formatAddress(item.objectId!)}
+                                        subtitle={`${formatAddress(address)}::${module}::${name}`}
+                                    />
+                                    <CardAction type={CardActionType.Link} isExternalLink />
+                                </Card>
+                            </ExplorerLink>
                         );
                     })}
                 </div>
             ) : (
-                <div className="text-steel-darker flex flex-1 items-center self-center text-caption font-semibold">
+                <div className="h-full content-center text-title-lg text-neutral-10">
                     No Assets found
                 </div>
             )}