Skip to content

found a redundunt component that duplicates existing Alert #4

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.

Sign up for GitHub

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

Merged
eugenebelov merged 1 commit into from
Aug 14, 2025
Merged

found a redundunt component that duplicates existing Alert #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
101 changes: 64 additions & 37 deletions src/lib/components/account-info-row/account-info-row.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@ import Big from 'big.js';
import { BodyText } from '../body-text/body-text';
import { FlexColumn } from '../flex-column/flex-column';
import { FlexRow } from '../flex-row/flex-row';
import {DEFAULT_PRECISION, formatHash} from '../../utils/formatters';
import { DEFAULT_PRECISION, formatHash } from '../../utils/formatters';
import { Tooltip } from '../tooltip/tooltip';
import { useMatchMedia } from '../../utils/match-media';
import { CopyHash } from '../copy-hash/copy-hash';
import { Cspr } from '../cspr/cspr';

import { PrecisionCase } from '../../utils/currency';
import { HashLength } from '../../utils/formatters';
import CEP18Token from "../cep18-token/cep18-token";
import CEP18Token from '../cep18-token/cep18-token';

export const ValuesRow = styled(FlexRow)(({ theme }) => ({
height: 36,
Expand All @@ -27,7 +27,7 @@ const StyledFlexColumn = styled(FlexColumn)<{ disabled?: boolean }>(
...(disabled && {
opacity: 0.5,
}),
})
}),
);

const BalanceText = styled(BodyText)(({}) => ({
Expand All @@ -51,14 +51,18 @@ interface TickerProps {
cep18Config?: CEP18Config;
}

const Ticker = ({ticker, cep18Config, ...props }: TickerProps) => {
return ticker === 'CSPR' ?
<Cspr {...props}/> :
<CEP18Token ticker={ticker}
motes={props.motes}
decimals={cep18Config?.decimals || DEFAULT_PRECISION}
precision={cep18Config?.precision || DEFAULT_PRECISION} />;
}
const Ticker = ({ ticker, cep18Config, ...props }: TickerProps) => {
return ticker === 'CSPR' ? (
<Cspr {...props} />
) : (
<CEP18Token
ticker={ticker}
motes={props.motes}
decimals={cep18Config?.decimals || DEFAULT_PRECISION}
precision={cep18Config?.precision || DEFAULT_PRECISION}
/>
);
};

interface AccountInfoBalanceProps {
accountBalance: string | null;
Expand All @@ -69,26 +73,38 @@ interface AccountInfoBalanceProps {
cep18Config?: CEP18Config;
}

const AccountInfoBalance = ({accountBalance, emptyBalance, loading, error, cep18Config, ticker = 'CSPR'}: AccountInfoBalanceProps) => {
const AccountInfoBalance = ({
accountBalance,
emptyBalance,
loading,
error,
cep18Config,
ticker = 'CSPR',
}: AccountInfoBalanceProps) => {
return (
<BalanceText size={3} monotype>
{emptyBalance ? (
<Ticker ticker={ticker} motes={'0'} precisionCase={PrecisionCase.deployCost} cep18Config={cep18Config} />
) : loading ? (
'Loading...'
) : error != null ? (
error
) : (
<Ticker
ticker={ticker}
motes={accountBalance}
precisionCase={PrecisionCase.deployCost}
cep18Config={cep18Config}
/>
)}
</BalanceText>
)
}
<BalanceText size={3} variation={'black'} monotype>
{emptyBalance ? (
<Ticker
ticker={ticker}
motes={'0'}
precisionCase={PrecisionCase.deployCost}
cep18Config={cep18Config}
/>
) : loading ? (
'Loading...'
) : error != null ? (
error
) : (
<Ticker
ticker={ticker}
motes={accountBalance}
precisionCase={PrecisionCase.deployCost}
cep18Config={cep18Config}
/>
)}
</BalanceText>
);
};

export interface AccountInfoRowProps {
publicKey: string;
Expand All @@ -99,7 +115,7 @@ export interface AccountInfoRowProps {
error: string | null;
accountEmpty: boolean;
disabled?: boolean;
ticker?:string;
ticker?: string;
cep18Config?: CEP18Config;
}

Expand All @@ -116,9 +132,9 @@ export function AccountInfoRow(props: AccountInfoRowProps) {
cep18Config,
} = props;

const responsiveHashSize = useMatchMedia(
const responsiveHashSize = useMatchMedia<HashLength>(
[HashLength.TINY, HashLength.SMALL, HashLength.SMALL, HashLength.SMALL],
[]
[],
);

const emptyBalance =
Expand All @@ -128,23 +144,34 @@ export function AccountInfoRow(props: AccountInfoRowProps) {
return (
<StyledFlexColumn disabled={props.disabled} gap={4}>
<FlexRow justify="space-between">
<BodyText size={1}>{label}</BodyText>
<BodyText size={1}>{rightLabel}</BodyText>
<BodyText size={1} variation={'black'}>
{label}
</BodyText>
<BodyText size={1} variation={'black'}>
{rightLabel}
</BodyText>
</FlexRow>
<ValuesRow justify="space-between" align="center">
{publicKey && (
<>
<FlexRow align="center">
<Tooltip title={publicKey}>
<BodyText size={3} monotype>
<BodyText size={3} variation={'black'} monotype>
{formatHash(publicKey, responsiveHashSize)}
</BodyText>
</Tooltip>
<StyledIconContainer>
<CopyHash value={publicKey} minified variation="gray" />
</StyledIconContainer>
</FlexRow>
<AccountInfoBalance accountBalance={accountBalance} emptyBalance={emptyBalance} error={error} loading={loading} ticker={ticker} cep18Config={cep18Config}/>
<AccountInfoBalance
accountBalance={accountBalance}
emptyBalance={emptyBalance}
error={error}
loading={loading}
ticker={ticker}
cep18Config={cep18Config}
/>
</>
)}
</ValuesRow>
Expand Down
27 changes: 17 additions & 10 deletions src/lib/components/alert/alert.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import React from 'react';
import { Meta, StoryFn } from '@storybook/react';
import { Meta } from '@storybook/react';

import Alert, { AlertStatus } from './alert';
import { LockedIcon } from '../../icons-index';
import { StoryObj } from '@storybook/react-vite';

// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
export default {
const meta = {
title: 'Messaging/Alert',
component: Alert,
// More on argTypes: https://storybook.js.org/docs/react/api/argtypes
Expand All @@ -28,14 +29,20 @@ export default {
description: 'The message to display in the alert',
},
},
} as Meta<typeof Alert>;
} satisfies Meta<typeof Alert>;

export default meta;

type Story = StoryObj<typeof meta>;

// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
const Template: StoryFn<typeof Alert> = (args) => <Alert {...args} />;
// const Template: StoryFn<typeof Alert> = (args) => <Alert {...args} />;

export const AlertMessage = Template.bind({});
// More on args: https://storybook.js.org/docs/react/writing-stories/args
AlertMessage.args = {
status: AlertStatus.Success,
message: 'Success',
export const Primary = {};
export const WithCustomIcon = {
args: {
iconSrc: LockedIcon,
title: 'Custom Icon Alert',
message: 'This alert has a custom icon.',
},
};
30 changes: 24 additions & 6 deletions src/lib/components/alert/alert.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,19 +63,27 @@ export interface StatusMessageProps {
status: AlertStatus;
scale?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
lineHeight?: 'xs' | 'sm';
/** Able to provide any existing icon or a path to it.
*
* NOTE: default status icons will not work in that case */
iconSrc?: string;
}

export const Alert = (props: StatusMessageProps) => {
const { message, title, status, scale = 'sm', lineHeight = 'sm' } = props;

const iconPath = Icons[status];
const iconPath = props.iconSrc ? props.iconSrc : Icons[status];
const statusAlert = props.iconSrc ? '' : status;

if (title) {
return (
<Container status={status} itemsSpacing={8}>
<Container status={statusAlert} itemsSpacing={8}>
<FlexColumn itemsSpacing={8}>
<FlexRow align={'center'} itemsSpacing={8}>
<SvgIcon src={iconPath} alt={`Alert icon with ${status} status`} />
<SvgIcon
src={iconPath}
alt={`Alert icon with ${statusAlert} status`}
Copy link

Copilot AI Aug 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When statusAlert is an empty string (custom icon case), the alt text becomes 'Alert icon with status' which contains extra whitespace and is unclear. Consider providing a more descriptive alt text for custom icons or using the original status value.

Suggested change
alt={`Alert icon with ${statusAlert} status`}
alt={props.iconSrc ? 'Custom alert icon' : `Alert icon with ${statusAlert} status`}

Copilot uses AI. Check for mistakes.
/>
<BodyText
size={1}
lineHeight={lineHeight}
Expand All @@ -86,7 +94,12 @@ export const Alert = (props: StatusMessageProps) => {
</BodyText>
</FlexRow>

<BodyText size={3} lineHeight={lineHeight} scale={scale}>
<BodyText
variation={'black'}
size={3}
lineHeight={lineHeight}
scale={scale}
>
{message}
</BodyText>
</FlexColumn>
Expand All @@ -95,9 +108,14 @@ export const Alert = (props: StatusMessageProps) => {
}

return (
<Container status={status} align="center" itemsSpacing={8}>
<Container status={statusAlert} align="center" itemsSpacing={8}>
<SvgIcon src={iconPath} />
<BodyText size={3} lineHeight={lineHeight} scale={scale}>
<BodyText
size={3}
lineHeight={lineHeight}
scale={scale}
variation={'black'}
>
{message}
</BodyText>
</Container>
Expand Down
27 changes: 0 additions & 27 deletions src/lib/components/warning-message/warning-message.stories.tsx
View file
Open in desktop

This file was deleted.

7 changes: 4 additions & 3 deletions src/lib/components/warning-message/warning-message.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,22 +21,23 @@ const StyledWarningMessage = styled.div<{ margin?: string }>(
backgroundColor: theme.styleguideColors.fillSecondary,
borderRadius: '4px',
margin: margin ? margin : '0 0 24px 0',
})
}),
);

const StyledHeaderRow = styled(FlexRow)(({ theme }) =>
theme.withMedia({
marginBottom: '8px',
})
}),
);

const StyledHeaderText = styled(BodyText)<{ margin: string }>(({ theme }) =>
theme.withMedia({
marginLeft: '8px',
lineHeight: ['18px', '1.5rem', '1.5rem'],
})
}),
);

/** @deprecated Please use <Alert /> with `iconSrc` instead of it. */
export const WarningMessage = ({
iconSrc,
title,
Expand Down