99e708a984
* Remove X button from tablet/mobile Notification menu * Toast styling * missed in merge * .env.example * Update abacus@1.0.9 * Add notif strings, and abaucs notif state * Update Notification hooks, add Notification Preference controls * Consolidate Notification into single component * withLabel -> withTrigger prop * nits * OrderStatusChanged -> AbacusGenerated * Notification OnClick * Move Notification -> Components * withAnimation -> $withAnimation * Notification styling and click handle * load state, onClick, localStorage * add error count * Rez localStorage Notifications * Update TransferStatus UI * Use Notification component for other abacusNotifs * fix uselocalnotif query * Default to Notification from NotificationMenu --------- Co-authored-by: Bill He <bill@dydx.exchange>
68 lines
1.7 KiB
TypeScript
68 lines
1.7 KiB
TypeScript
import styled from 'styled-components';
|
|
|
|
import { AbacusOrderStatus } from '@/constants/abacus';
|
|
|
|
import {
|
|
OrderCanceledIcon,
|
|
OrderFilledIcon,
|
|
OrderOpenIcon,
|
|
OrderPartiallyFilledIcon,
|
|
OrderPendingIcon,
|
|
} from '@/icons';
|
|
|
|
import { Icon } from '@/components/Icon';
|
|
|
|
type ElementProps = {
|
|
status: string;
|
|
totalFilled: number;
|
|
};
|
|
|
|
type StyleProps = {
|
|
className?: string;
|
|
};
|
|
|
|
export const OrderStatusIcon = ({ className, status, totalFilled }: ElementProps & StyleProps) => {
|
|
const { iconComponent, color } = {
|
|
[AbacusOrderStatus.open.rawValue]:
|
|
totalFilled > 0
|
|
? {
|
|
iconComponent: OrderPartiallyFilledIcon,
|
|
color: 'var(--color-warning)',
|
|
}
|
|
: {
|
|
iconComponent: OrderOpenIcon,
|
|
color: 'var(--color-text-2)',
|
|
},
|
|
[AbacusOrderStatus.partiallyFilled.rawValue]: {
|
|
iconComponent: OrderPartiallyFilledIcon,
|
|
color: 'var(--color-warning)',
|
|
},
|
|
[AbacusOrderStatus.filled.rawValue]: {
|
|
iconComponent: OrderFilledIcon,
|
|
color: 'var(--color-success)',
|
|
},
|
|
[AbacusOrderStatus.cancelled.rawValue]: {
|
|
iconComponent: OrderCanceledIcon,
|
|
color: 'var(--color-error)',
|
|
},
|
|
[AbacusOrderStatus.canceling.rawValue]: {
|
|
iconComponent: OrderPendingIcon,
|
|
color: 'var(--color-error)',
|
|
},
|
|
[AbacusOrderStatus.pending.rawValue]: {
|
|
iconComponent: OrderPendingIcon,
|
|
color: 'var(--color-text-2)',
|
|
},
|
|
[AbacusOrderStatus.untriggered.rawValue]: {
|
|
iconComponent: OrderPendingIcon,
|
|
color: 'var(--color-text-2)',
|
|
},
|
|
}[status];
|
|
|
|
return <$Icon className={className} iconComponent={iconComponent} color={color} />;
|
|
};
|
|
|
|
const $Icon = styled(Icon)<{ color: string }>`
|
|
color: ${({ color }) => color};
|
|
`;
|