From 5643ca1d819a4952834751aad50e060b15425bca Mon Sep 17 00:00:00 2001 From: Bill He Date: Tue, 9 Jan 2024 15:37:55 -0800 Subject: [PATCH] Support notification for trading rewards --- package.json | 4 + public/dots-background-2.svg | 230 ++++++++++++++++++ src/components/Icon.tsx | 3 + src/hooks/useNotificationTypes.tsx | 23 ++ src/icons/index.ts | 1 + src/icons/reward-star.svg | 9 + src/layout/NotificationsToastArea.tsx | 2 +- .../BlockRewardNotification/index.tsx | 65 +++++ 8 files changed, 336 insertions(+), 1 deletion(-) create mode 100644 public/dots-background-2.svg create mode 100644 src/icons/reward-star.svg create mode 100644 src/views/notifications/BlockRewardNotification/index.tsx diff --git a/package.json b/package.json index 7b5991c..a68ac6d 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,11 @@ "@cosmjs/tendermint-rpc": "^0.31.0", "@dydxprotocol/v4-abacus": "^1.2.3", "@dydxprotocol/v4-client-js": "^1.0.11", +<<<<<<< HEAD "@dydxprotocol/v4-localization": "^1.1.11", +======= + "@dydxprotocol/v4-localization": "^1.1.9", +>>>>>>> b856a74 (Support notification for trading rewards) "@ethersproject/providers": "^5.7.2", "@js-joda/core": "^5.5.3", "@radix-ui/react-accordion": "^1.1.2", diff --git a/public/dots-background-2.svg b/public/dots-background-2.svg new file mode 100644 index 0000000..82c1f22 --- /dev/null +++ b/public/dots-background-2.svg @@ -0,0 +1,230 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index 615df90..f5e44e1 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -59,6 +59,7 @@ import { PriceChartIcon, PrivacyIcon, QrIcon, + RewardStarIcon, SearchIcon, SendIcon, ShareIcon, @@ -134,6 +135,7 @@ export enum IconName { PriceChart = 'PriceChart', Privacy = 'Privacy', Qr = 'Qr', + RewardStar = 'RewardStar', Search = 'Search', Send = 'Send', Share = 'Share', @@ -208,6 +210,7 @@ const icons = { [IconName.PriceChart]: PriceChartIcon, [IconName.Privacy]: PrivacyIcon, [IconName.Qr]: QrIcon, + [IconName.RewardStar]: RewardStarIcon, [IconName.Search]: SearchIcon, [IconName.Send]: SendIcon, [IconName.Share]: ShareIcon, diff --git a/src/hooks/useNotificationTypes.tsx b/src/hooks/useNotificationTypes.tsx index 870e03e..5edaae4 100644 --- a/src/hooks/useNotificationTypes.tsx +++ b/src/hooks/useNotificationTypes.tsx @@ -28,6 +28,7 @@ import { useLocalNotifications } from '@/hooks/useLocalNotifications'; import { AssetIcon } from '@/components/AssetIcon'; import { Icon, IconName } from '@/components/Icon'; +import { BlockRewardNotification } from '@/views/notifications/BlockRewardNotification'; import { TradeNotification } from '@/views/notifications/TradeNotification'; import { TransferStatusNotification } from '@/views/notifications/TransferStatusNotification'; @@ -93,6 +94,28 @@ export const notificationTypes: NotificationTypeConfig[] = [ ); break; } + case 'blockReward': { + trigger( + abacusNotif.id, + { + icon: abacusNotif.image && <$Icon src={abacusNotif.image} alt="" />, + title: stringGetter({ key: abacusNotif.title }), + body: abacusNotif.text ? stringGetter({ key: abacusNotif.text, params }) : '', + toastDuration: DEFAULT_TOAST_AUTO_CLOSE_MS, + toastSensitivity: 'foreground', + renderCustomBody: ({ isToast, notification }) => ( + + ), + }, + [abacusNotif.updateTimeInMilliseconds, abacusNotif.data], + true + ); + break; + } default: trigger( abacusNotif.id, diff --git a/src/icons/index.ts b/src/icons/index.ts index 8f22631..0dfb854 100644 --- a/src/icons/index.ts +++ b/src/icons/index.ts @@ -50,6 +50,7 @@ export { default as PriceChartIcon } from './price-chart.svg'; export { default as PrivacyIcon } from './privacy.svg'; export { default as ProfileIcon } from './profile.svg'; export { default as QrIcon } from './qr.svg'; +export { default as RewardStarIcon } from './reward-star.svg'; export { default as SearchIcon } from './search.svg'; export { default as SendIcon } from './send.svg'; export { default as ShareIcon } from './share.svg'; diff --git a/src/icons/reward-star.svg b/src/icons/reward-star.svg new file mode 100644 index 0000000..6aab7d7 --- /dev/null +++ b/src/icons/reward-star.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/layout/NotificationsToastArea.tsx b/src/layout/NotificationsToastArea.tsx index db4e37e..8daa01f 100644 --- a/src/layout/NotificationsToastArea.tsx +++ b/src/layout/NotificationsToastArea.tsx @@ -20,7 +20,7 @@ type StyleProps = { const MAX_TOASTS = 10; export const NotificationsToastArea = ({ className }: StyleProps) => { - const [shouldStackNotifications, setshouldStackNotifications] = useState(true); + const [shouldStackNotifications, setshouldStackNotifications] = useState(false); const { notifications, diff --git a/src/views/notifications/BlockRewardNotification/index.tsx b/src/views/notifications/BlockRewardNotification/index.tsx new file mode 100644 index 0000000..3e4631f --- /dev/null +++ b/src/views/notifications/BlockRewardNotification/index.tsx @@ -0,0 +1,65 @@ +import styled, { type AnyStyledComponent } from 'styled-components'; + +import { STRING_KEYS } from '@/constants/localization'; +import { useStringGetter } from '@/hooks'; + +import { Details } from '@/components/Details'; +import { Notification, NotificationProps } from '@/components/Notification'; +import { Output, OutputType } from '@/components/Output'; +import { Icon, IconName } from '@/components/Icon'; + + +type ElementProps = { + data: { + BLOCK_REWARD_AMOUNT: string; + BLOCK_REWARD_HEIGHT: string; + BLOCK_REWARD_TIME_MILLISECONDS: string; + TOKEN_NAME: string; + }; +}; + +export type BlockRewardNotificationProps = NotificationProps & ElementProps; + +export const BlockRewardNotification = ({ + isToast, + data, + notification, +}: BlockRewardNotificationProps) => { + const stringGetter = useStringGetter(); + const { BLOCK_REWARD_AMOUNT, TOKEN_NAME } = data; + + return ( + } + slotTitle={stringGetter({ key: STRING_KEYS.TRADING_REWARD_RECEIVED })} + slotCustomContent={ + , + }, + ]} + /> + } + /> + ); +}; + +const Styled: Record = {}; + +Styled.Details = styled(Details)` + --details-item-height: 1.5rem; + + dd { + color: var(--color-text-2); + } +`; + +Styled.Notification = styled(Notification)` + background-image: url('/dots-background-2.svg'); + background-size: cover; +`;