Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 32 commits into from
Oct 30, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
b0c9983
feat(wallet-dashboard): add protected layout
VmMad Oct 25, 2024
670f496
feat: add missing TopNav
VmMad Oct 28, 2024
d43a921
fix: tests
VmMad Oct 28, 2024
5ba9405
Merge branch 'develop' into tooling-dashboard/add-connected-layout
VmMad Oct 28, 2024
1100c2c
fix: imports
VmMad Oct 28, 2024
379c6a3
feat: add grid
evavirseda Oct 28, 2024
ecf6dc7
feat: refine balance box
evavirseda Oct 28, 2024
0f30b19
Merge branch 'develop' into tooling-dashboard/add-connected-layout
evavirseda Oct 28, 2024
ce8e637
Merge branch 'tooling-dashboard/add-connected-layout' into tooling-da…
evavirseda Oct 28, 2024
decadf0
feat: fix format
evavirseda Oct 28, 2024
37ce97e
fix: add missing themes
VmMad Oct 28, 2024
6211f65
Merge branch 'tooling-dashboard/add-connected-layout' into tooling-da…
evavirseda Oct 28, 2024
440291f
feat: refine my cions
evavirseda Oct 28, 2024
b832e54
feat: imporve darkmode
evavirseda Oct 28, 2024
ae85129
Merge branch 'develop' into tooling-dashboard/style-balance-box
evavirseda Oct 29, 2024
51f0356
Merge branch 'tooling-dashboard/style-balance-box' into tooling-dashb…
evavirseda Oct 29, 2024
946bbad
feat: add autoconnect feature
evavirseda Oct 29, 2024
32a875d
Merge branch 'develop' into tooling-dashboard/style-balance-box
begonaalvarezd Oct 29, 2024
5201253
feat: rename folder
evavirseda Oct 29, 2024
e9e11d5
feat: add missing styles
evavirseda Oct 29, 2024
ca3ae52
Merge branch 'develop' into tooling-dashboard/style-balance-box
evavirseda Oct 29, 2024
99c6e14
Merge branch 'tooling-dashboard/style-balance-box' into tooling-dashb…
evavirseda Oct 29, 2024
eb69257
Merge branch 'develop' into tooling-dashboard/style-balance-box
evavirseda Oct 29, 2024
cc2f0fc
feat: add toast after copye address
evavirseda Oct 29, 2024
b500fba
Merge branch 'develop' into tooling-dashboard/style-balance-box
evavirseda Oct 29, 2024
2820b8c
Merge branch 'tooling-dashboard/style-balance-box' into tooling-dashb…
evavirseda Oct 29, 2024
c62c21b
cleanup
evavirseda Oct 29, 2024
1534096
fix: rename folder
evavirseda Oct 29, 2024
7638ded
Merge branch 'develop' into tooling-dashboard/style-my-coins
evavirseda Oct 29, 2024
db68f79
Merge branch 'develop' into tooling-dashboard/style-my-coins
evavirseda Oct 29, 2024
7b93192
Merge branch 'develop' into tooling-dashboard/style-my-coins
evavirseda Oct 30, 2024
751ceca
Merge branch 'develop' into tooling-dashboard/style-my-coins
evavirseda Oct 30, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 0 additions & 35 deletions apps/wallet-dashboard/components/Coins/CoinItem.tsx

This file was deleted.

74 changes: 0 additions & 74 deletions apps/wallet-dashboard/components/Coins/MyCoins.tsx

This file was deleted.

80 changes: 80 additions & 0 deletions apps/wallet-dashboard/components/ImageIcon.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
45 changes: 45 additions & 0 deletions apps/wallet-dashboard/components/coins/CoinIcon.tsx
Original file line number Diff line number Diff line change
@@ -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} />
);
}
61 changes: 61 additions & 0 deletions apps/wallet-dashboard/components/coins/CoinItem.tsx
Original file line number Diff line number Diff line change
@@ -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;
Loading
Loading