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;
+`;