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

evavirseda · 2024-10-28T16:58:56Z

Description of change

Please write a summary of your changes and why you made them.

Links to any relevant issues

fixes #3684

Type of change

Choose a type of change, and delete any options that are not relevant.

Bug fix (a non-breaking change which fixes an issue)
Enhancement (a non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Documentation Fix

How the change has been tested

Describe the tests that you ran to verify your changes.

Make sure to provide instructions for the maintainer as well as any relevant configurations.

Change checklist

Tick the boxes that are relevant to your changes, and delete any items that are not.

I have followed the contribution guidelines for this project
I have performed a self-review of my own code
I have commented my code, particularly in hard-to-understand areas
I have made corresponding changes to the documentation
I have added tests that prove my fix is effective or that my feature works
I have checked that new and existing unit tests pass locally with my changes

…shboard/style-balance-box

github-actions · 2024-10-28T17:01:42Z

This pull request has been deployed to Vercel.

Latest commit: 440291f

✅ Preview: https://wallet-dashboard-a225fcfa1e2f852205a61a7cd1d5d93e92-1ju5atfhi.vercel.app

github-actions · 2024-10-28T17:01:57Z

This pull request has been deployed to Vercel.

Latest commit: 440291f

✅ Preview: https://iota-rebased-explorer-092603f1de8088243ccb8b861b23e-3wyv69kf1.vercel.app

github-actions · 2024-10-28T17:02:30Z

This pull request has been deployed to Vercel.

Latest commit: 440291f

✅ Preview: https://apps-backend-29a719c9ccbdb9b80c97b599a599d8953354da-8hduol76m.vercel.app

github-actions · 2024-10-28T17:17:07Z

This pull request has been deployed to Vercel.

Latest commit: b832e54

✅ Preview: https://apps-backend-29a719c9ccbdb9b80c97b599a599d8953354da-hcidf5295.vercel.app

github-actions · 2024-10-28T17:17:49Z

This pull request has been deployed to Vercel.

Latest commit: b832e54

✅ Preview: https://wallet-dashboard-a225fcfa1e2f852205a61a7cd1d5d93e92-aok0j6gcv.vercel.app

github-actions · 2024-10-28T17:17:57Z

This pull request has been deployed to Vercel.

Latest commit: b832e54

✅ Preview: https://iota-rebased-explorer-092603f1de8088243ccb8b861b23e-lrg61lrmt.vercel.app

apps/wallet-dashboard/app/(protected)/components/top-nav/TopNav.tsx

…oard/style-my-coins

github-actions · 2024-10-29T10:54:12Z

This pull request has been deployed to Vercel.

Latest commit: 99c6e14

✅ Preview: https://wallet-dashboard-a225fcfa1e2f852205a61a7cd1d5d93e92-p17n7pvya.vercel.app

marc2332 · 2024-10-29T12:06:44Z

apps/wallet-dashboard/components/ImageIcon.tsx

+export interface ImageIconProps {
+    src: string | null | undefined;
+    label: string;
+    fallback: string;
+    alt?: string;
+    rounded?: boolean;
+    size?: ImageIconSize;
+}
+
+function FallBackAvatar({
+    str,
+    rounded,
+    size = ImageIconSize.Large,
+}: {
+    str: string;
+    rounded?: boolean;
+    size?: ImageIconSize;
+}) {
+    function generateTextSize(size: ImageIconSize) {
+        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 },
+                generateTextSize(size),
+            )}
+        >
+            {str?.slice(0, 2)}
+        </div>
+    );
+}
+
+export function ImageIcon({ src, label, alt = label, fallback, rounded, size }: ImageIconProps) {
+    const [error, setError] = useState(false);
+    return (
+        <div role="img" aria-label={label} className={size}>
+            {error || !src ? (
+                <FallBackAvatar rounded={rounded} str={fallback} 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>
+    );
+}


Suggested change

export interface ImageIconProps {

src: string | null | undefined;

label: string;

fallback: string;

alt?: string;

rounded?: boolean;

size?: ImageIconSize;

}

function FallBackAvatar({

str,

rounded,

size = ImageIconSize.Large,

}: {

str: string;

rounded?: boolean;

size?: ImageIconSize;

}) {

function generateTextSize(size: ImageIconSize) {

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 },

generateTextSize(size),

)}

>

{str?.slice(0, 2)}

</div>

);

}

export function ImageIcon({ src, label, alt = label, fallback, rounded, size }: ImageIconProps) {

const [error, setError] = useState(false);

return (

<div role="img" aria-label={label} className={size}>

{error || !src ? (

<FallBackAvatar rounded={rounded} str={fallback} 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>

);

}

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>

);

}

marc2332 · 2024-10-29T12:07:37Z

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

+            <ImageIcon
+                src={coinMeta?.iconUrl}
+                label={coinMeta?.name || coinType}
+                fallback={coinMeta?.name || coinType}


Suggested change

fallback={coinMeta?.name || coinType}

fallbackText={coinMeta?.name || coinType}

…oard/style-my-coins

github-actions · 2024-10-29T13:56:36Z

This pull request has been deployed to Vercel.

Latest commit: 2820b8c

✅ Preview: https://wallet-dashboard-a225fcfa1e2f852205a61a7cd1d5d93e92-iufe1hvtx.vercel.app

github-actions · 2024-10-29T14:05:06Z

This pull request has been deployed to Vercel.

Latest commit: c62c21b

✅ Preview: https://wallet-dashboard-a225fcfa1e2f852205a61a7cd1d5d93e92-5qmcgecy7.vercel.app

github-actions · 2024-10-29T14:48:25Z

This pull request has been deployed to Vercel.

Latest commit: 7638ded

✅ Preview: https://wallet-dashboard-a225fcfa1e2f852205a61a7cd1d5d93e92-hipcudzm7.vercel.app

github-actions · 2024-10-29T15:41:39Z

This pull request has been deployed to Vercel.

Latest commit: db68f79

✅ Preview: https://wallet-dashboard-a225fcfa1e2f852205a61a7cd1d5d93e92-bagxjfzkb.vercel.app

github-actions · 2024-10-30T10:12:01Z

This pull request has been deployed to Vercel.

Latest commit: 7b93192

✅ Preview: https://wallet-dashboard-a225fcfa1e2f852205a61a7cd1d5d93e92-hkwljez9n.vercel.app

github-actions · 2024-10-30T11:54:27Z

This pull request has been deployed to Vercel.

Latest commit: 751ceca

✅ Preview: https://wallet-dashboard-a225fcfa1e2f852205a61a7cd1d5d93e92-ocvbkpmos.vercel.app

VmMad and others added 13 commits October 25, 2024 18:04

feat(wallet-dashboard): add protected layout

b0c9983

feat: add missing TopNav

670f496

fix: tests

d43a921

Merge branch 'develop' into tooling-dashboard/add-connected-layout

5ba9405

fix: imports

1100c2c

feat: add grid

379c6a3

feat: refine balance box

ecf6dc7

Merge branch 'develop' into tooling-dashboard/add-connected-layout

0f30b19

Merge branch 'tooling-dashboard/add-connected-layout' into tooling-da…

ce8e637

…shboard/style-balance-box

feat: fix format

decadf0

fix: add missing themes

37ce97e

Merge branch 'tooling-dashboard/add-connected-layout' into tooling-da…

6211f65

…shboard/style-balance-box

feat: refine my cions

440291f

evavirseda added tooling Issues related to the Tooling team wallet-dashboard Issues related to the Wallet Dashboard dApp labels Oct 28, 2024

evavirseda self-assigned this Oct 28, 2024

evavirseda requested review from a team as code owners October 28, 2024 16:58

evavirseda linked an issue Oct 28, 2024 that may be closed by this pull request

Style my coins #3684

Closed

evavirseda marked this pull request as draft October 28, 2024 17:02

feat: imporve darkmode

b832e54

evavirseda marked this pull request as ready for review October 28, 2024 17:14

evavirseda added 2 commits October 29, 2024 09:22

Merge branch 'develop' into tooling-dashboard/style-balance-box

ae85129

apps/wallet-dashboard/app/(protected)/components/top-nav/TopNav.tsx

Merge branch 'tooling-dashboard/style-balance-box' into tooling-dashb…

51f0356

…oard/style-my-coins

evavirseda and others added 6 commits October 29, 2024 10:09

feat: add autoconnect feature

946bbad

Merge branch 'develop' into tooling-dashboard/style-balance-box

32a875d

feat: rename folder

5201253

feat: add missing styles

e9e11d5

Merge branch 'develop' into tooling-dashboard/style-balance-box

ca3ae52

Merge branch 'tooling-dashboard/style-balance-box' into tooling-dashb…

99c6e14

…oard/style-my-coins

marc2332 requested changes Oct 29, 2024

View reviewed changes

evavirseda added 4 commits October 29, 2024 13:44

Merge branch 'develop' into tooling-dashboard/style-balance-box

eb69257

feat: add toast after copye address

cc2f0fc

Merge branch 'develop' into tooling-dashboard/style-balance-box

b500fba

Merge branch 'tooling-dashboard/style-balance-box' into tooling-dashb…

2820b8c

…oard/style-my-coins

cleanup

c62c21b

evavirseda requested a review from marc2332 October 29, 2024 14:02

Base automatically changed from tooling-dashboard/style-balance-box to develop October 29, 2024 14:42

evavirseda added 2 commits October 29, 2024 15:44

fix: rename folder

1534096

Merge branch 'develop' into tooling-dashboard/style-my-coins

7638ded

Merge branch 'develop' into tooling-dashboard/style-my-coins

db68f79

marc2332 approved these changes Oct 30, 2024

View reviewed changes

Merge branch 'develop' into tooling-dashboard/style-my-coins

7b93192

Merge branch 'develop' into tooling-dashboard/style-my-coins

751ceca

cpl121 approved these changes Oct 30, 2024

View reviewed changes

cpl121 merged commit f31e0f5 into develop Oct 30, 2024
28 of 30 checks passed

cpl121 deleted the tooling-dashboard/style-my-coins branch October 30, 2024 12:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

evavirseda commented Oct 28, 2024 •

edited

Loading

github-actions bot commented Oct 28, 2024

github-actions bot commented Oct 28, 2024

github-actions bot commented Oct 28, 2024

github-actions bot commented Oct 28, 2024

github-actions bot commented Oct 28, 2024

github-actions bot commented Oct 28, 2024

github-actions bot commented Oct 29, 2024

marc2332 Oct 29, 2024

marc2332 Oct 29, 2024

github-actions bot commented Oct 29, 2024

github-actions bot commented Oct 29, 2024

github-actions bot commented Oct 29, 2024

github-actions bot commented Oct 29, 2024

github-actions bot commented Oct 30, 2024

github-actions bot commented Oct 30, 2024

	fallback={coinMeta?.name \|\| coinType}
	fallbackText={coinMeta?.name \|\| coinType}

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

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

Conversation

evavirseda commented Oct 28, 2024 • edited Loading

Description of change

Links to any relevant issues

Type of change

How the change has been tested

Change checklist

github-actions bot commented Oct 28, 2024

github-actions bot commented Oct 28, 2024

github-actions bot commented Oct 28, 2024

github-actions bot commented Oct 28, 2024

github-actions bot commented Oct 28, 2024

github-actions bot commented Oct 28, 2024

github-actions bot commented Oct 29, 2024

marc2332 Oct 29, 2024

Choose a reason for hiding this comment

marc2332 Oct 29, 2024

Choose a reason for hiding this comment

github-actions bot commented Oct 29, 2024

github-actions bot commented Oct 29, 2024

github-actions bot commented Oct 29, 2024

github-actions bot commented Oct 29, 2024

github-actions bot commented Oct 30, 2024

github-actions bot commented Oct 30, 2024

evavirseda commented Oct 28, 2024 •

edited

Loading