feat(wallet-dashboard): style my coins (#3726)

* feat(wallet-dashboard): add protected layout

* feat: add missing TopNav

* fix: tests

* fix: imports

* feat: add grid

* feat: refine balance box

* feat: fix format

* fix: add missing themes

* feat: refine my cions

* feat: imporve darkmode

* feat: add autoconnect feature

* feat: rename folder

* feat: add missing styles

* feat: add toast after copye address

* cleanup

* fix: rename folder

---------

Co-authored-by: JCNoguera <[email protected]>
Co-authored-by: Begoña Álvarez de la Cruz <[email protected]>

apps/wallet-dashboard/components/ImageIcon.tsx

@@ -0,0 +1,80 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { useState } from 'react';
+import Image from 'next/image';
+import cn from 'clsx';
+
+export enum ImageIconSize {
+    Small = 'w-5 h-5',
+    Medium = 'w-8 h-8',
+    Large = 'w-10 h-10',
+    Full = 'w-full h-full',
+}
+
+interface FallBackAvatarProps {
+    text: string;
+    rounded?: boolean;
+    size?: ImageIconSize;
+}
+function FallBackAvatar({ text, rounded, size = ImageIconSize.Large }: FallBackAvatarProps) {
+    const textSize = (() => {
+        switch (size) {
+            case ImageIconSize.Small:
+                return 'text-label-sm';
+            case ImageIconSize.Medium:
+                return 'text-label-md';
+            case ImageIconSize.Large:
+                return 'text-title-md';
+            case ImageIconSize.Full:
+                return 'text-title-lg';
+        }
+    })();
+
+    return (
+        <div
+            className={cn(
+                'flex h-full w-full items-center justify-center bg-neutral-96 bg-gradient-to-r capitalize dark:bg-neutral-20',
+                { 'rounded-full': rounded },
+                textSize,
+            )}
+        >
+            {text.slice(0, 2)}
+        </div>
+    );
+}
+export interface ImageIconProps {
+    src: string | null | undefined;
+    label: string;
+    fallbackText: string;
+    alt?: string;
+    rounded?: boolean;
+    size?: ImageIconSize;
+}
+
+export function ImageIcon({
+    src,
+    label,
+    alt = label,
+    fallbackText,
+    rounded,
+    size,
+}: ImageIconProps) {
+    const [error, setError] = useState(false);
+    return (
+        <div role="img" aria-label={label} className={size}>
+            {error || !src ? (
+                <FallBackAvatar rounded={rounded} text={fallbackText} size={size} />
+            ) : (
+                <Image
+                    src={src}
+                    alt={alt}
+                    className="flex h-full w-full items-center justify-center rounded-full object-cover"
+                    onError={() => setError(true)}
+                    layout="fill"
+                    objectFit="cover"
+                />
+            )}
+        </div>
+    );
+}

apps/wallet-dashboard/components/coins/CoinIcon.tsx

@@ -0,0 +1,45 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { useCoinMetadata } from '@iota/core';
+import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
+import { IotaLogoMark } from '@iota/ui-icons';
+import cx from 'clsx';
+import { ImageIcon, ImageIconSize } from '../ImageIcon';
+
+interface NonIotaCoinProps {
+    coinType: string;
+    size?: ImageIconSize;
+    rounded?: boolean;
+}
+
+function NonIotaCoin({ coinType, size = ImageIconSize.Full, rounded }: NonIotaCoinProps) {
+    const { data: coinMeta } = useCoinMetadata(coinType);
+    return (
+        <div className="flex h-full w-full items-center justify-center rounded-full bg-neutral-96 text-neutral-10 dark:bg-neutral-20 dark:text-neutral-100">
+            <ImageIcon
+                src={coinMeta?.iconUrl}
+                label={coinMeta?.name || coinType}
+                fallbackText={coinMeta?.name || coinType}
+                size={size}
+                rounded={rounded}
+            />
+        </div>
+    );
+}
+
+export interface CoinIconProps {
+    coinType: string;
+    size?: ImageIconSize;
+    rounded?: boolean;
+}
+
+export function CoinIcon({ coinType, size = ImageIconSize.Full, rounded }: CoinIconProps) {
+    return coinType === IOTA_TYPE_ARG ? (
+        <div className="flex h-full w-full items-center justify-center border border-shader-neutral-light-8 bg-neutral-100 text-neutral-10 dark:bg-neutral-0 dark:text-neutral-100">
+            <IotaLogoMark className={cx(size)} />
+        </div>
+    ) : (
+        <NonIotaCoin rounded={rounded} size={size} coinType={coinType} />
+    );
+}

apps/wallet-dashboard/components/coins/CoinItem.tsx

@@ -0,0 +1,61 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import {
+    Card,
+    CardAction,
+    CardActionType,
+    CardBody,
+    CardImage,
+    CardType,
+    ImageType,
+} from '@iota/apps-ui-kit';
+import { useFormatCoin } from '@iota/core';
+import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
+import { type ReactNode } from 'react';
+import { ImageIconSize } from '../ImageIcon';
+import { CoinIcon } from './CoinIcon';
+
+interface CoinItemProps {
+    coinType: string;
+    balance: bigint;
+    onClick?: () => void;
+    icon?: ReactNode;
+    clickableAction?: ReactNode;
+    usd?: number;
+}
+
+function CoinItem({
+    coinType,
+    balance,
+    onClick,
+    icon,
+    clickableAction,
+    usd,
+}: CoinItemProps): React.JSX.Element {
+    const [formatted, symbol, { data: coinMeta }] = useFormatCoin(balance, coinType);
+    const isIota = coinType === IOTA_TYPE_ARG;
+
+    return (
+        <Card type={CardType.Default} onClick={onClick}>
+            <CardImage type={ImageType.BgTransparent}>
+                <div className="flex h-10 w-10 items-center justify-center rounded-full ">
+                    <CoinIcon coinType={coinType} rounded size={ImageIconSize.Small} />
+                </div>
+            </CardImage>
+            <CardBody
+                title={isIota ? (coinMeta?.name || '').toUpperCase() : coinMeta?.name || symbol}
+                subtitle={symbol}
+                clickableAction={clickableAction}
+                icon={icon}
+            />
+            <CardAction
+                type={CardActionType.SupportingText}
+                title={`${formatted} ${symbol}`}
+                subtitle={usd?.toLocaleString('en-US')}
+            />
+        </Card>
+    );
+}
+
+export default CoinItem;