feat: liquidation rebates (#2058)

Author: lukabuz

package.json

@@ -55,7 +55,7 @@
     "@cosmjs/tendermint-rpc": "^0.32.1",
     "@datadog/browser-logs": "^5.23.3",
     "@dydxprotocol/v4-client-js": "3.4.0",
-    "@dydxprotocol/v4-localization": "1.1.377",
+    "@dydxprotocol/v4-localization": "1.1.378",
     "@dydxprotocol/v4-proto": "^7.0.0-dev.0",
     "@emotion/is-prop-valid": "^1.3.0",
     "@hugocxl/react-to-image": "^0.0.9",

pnpm-lock.yaml

@@ -20,6 +20,7 @@ export enum StatsigFlags {
   ffHideMarketsFilter = 'ff_hide_markets_filter',
   ffOpenInterestFilter = 'ff_open_interest_filter',
   abPopupDeposit = 'ab_popup_deposit',
+  ffOnlyShowLiquidationRebates = 'ff_only_show_liquidation_rebates',
 }
 
 export enum CustomFlags {

src/constants/statsig.ts

@@ -115,3 +115,40 @@ async function getDydxFeeLeaderboard({ address }: { address?: string }) {
     addressEntry: data.addressEntry,
   };
 }
+
+export type LiquidationLeaderboardItem = {
+  address: string;
+  total_liquidation_losses: string;
+  rank: number;
+};
+
+type LiquidationLeaderboardResponse = {
+  success: boolean;
+  data: LiquidationLeaderboardItem[];
+  pagination?: {
+    total: number;
+    totalPages: number;
+    page: number;
+    perPage: number;
+  };
+};
+
+async function getLiquidationLeaderboard() {
+  const res = await fetch(
+    `https://pp-external-api-ffb2ad95ef03.herokuapp.com/api/dydx-liquidation-leaderboard?perPage=1000`
+  );
+
+  const data = (await res.json()) as LiquidationLeaderboardResponse;
+  return data.data;
+}
+
+export function useLiquidationLeaderboard() {
+  return useQuery({
+    queryKey: ['dydx-liquidation-leaderboard'],
+    queryFn: wrapAndLogError(
+      () => getLiquidationLeaderboard(),
+      'LaunchIncentives/fetchLiquidationLeaderboard',
+      true
+    ),
+  });
+}

src/hooks/rewards/hooks.ts

@@ -33,6 +33,11 @@ export const CURRENT_SURGE_REWARDS_DETAILS = {
   endTime: '2026-01-31T23:59:59.000Z', // end of jan 2026
 };
 
+export const LIQUIDATION_REBATES_DETAILS = {
+  rebateAmount: '$1M',
+  rebateAmountUsd: 1_000_000,
+};
+
 export const DEC_2025_COMPETITION_DETAILS = {
   rewardAmount: '$1M',
   rewardAmountUsd: 1_000_000,

src/hooks/rewards/util.ts

@@ -0,0 +1,10 @@
+import { StatsigFlags } from '@/constants/statsig';
+
+import { useStatsigGateValue } from './useStatsig';
+
+export const useEnableLiquidationRebates = () => {
+  const onlyShowLiquidationRebatesFF = useStatsigGateValue(
+    StatsigFlags.ffOnlyShowLiquidationRebates
+  );
+  return onlyShowLiquidationRebatesFF;
+};

src/hooks/useEnableLiquidationRebates.ts

@@ -0,0 +1,118 @@
+import { useEffect, useMemo, useState } from 'react';
+
+import { Duration } from 'luxon';
+import tw from 'twin.macro';
+
+import { STRING_KEYS } from '@/constants/localization';
+
+import { LIQUIDATION_REBATES_DETAILS } from '@/hooks/rewards/util';
+import { useNow } from '@/hooks/useNow';
+import { useStringGetter } from '@/hooks/useStringGetter';
+
+import { Icon, IconName } from '@/components/Icon';
+import { Link } from '@/components/Link';
+import { Panel } from '@/components/Panel';
+import { SuccessTag, TagSize } from '@/components/Tag';
+
+export const LiquidationRebatesHeader = () => {
+  const stringGetter = useStringGetter();
+
+  // Calculate the last millisecond of the current UTC month
+  const now = new Date();
+  const endOfCurrentMonth = (() => {
+    const date = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth() + 1, 1, 0, 0, 0, 0)); // first ms of next month
+    date.setTime(date.getTime() - 1); // last ms of this month
+    return date.toISOString();
+  })();
+
+  return (
+    <$Panel>
+      <div tw="flex gap-3 pb-0.25 pt-0.5">
+        <div tw="flex flex-col gap-1.5">
+          <div tw="flex flex-col gap-0.5">
+            <div tw="flex items-center gap-0.5">
+              <div tw="font-medium-bold">
+                <span tw="font-bold">
+                  {stringGetter({
+                    key: STRING_KEYS.LIQUIDATION_REBATES_HEADLINE,
+                    params: {
+                      REBATE_AMOUNT: LIQUIDATION_REBATES_DETAILS.rebateAmount,
+                    },
+                  })}
+                </span>
+              </div>
+              <SuccessTag size={TagSize.Medium}>
+                {stringGetter({ key: STRING_KEYS.ACTIVE })}
+              </SuccessTag>
+            </div>
+            <div>
+              <p tw="mb-0.5 text-color-text-0">
+                {stringGetter({
+                  key: STRING_KEYS.LIQUIDATION_REBATES_BODY,
+                })}
+              </p>
+              <p tw="text-color-text-0">
+                {stringGetter({
+                  key: STRING_KEYS.LIQUIDATION_REBATES_SUB_BODY,
+                  params: {
+                    LOSS_REBATES_LINK: (
+                      <Link
+                        href="https://dydx.forum/t/drc-realized-losses-rebate-pilot-program/4828/2"
+                        isInline
+                      >
+                        {stringGetter({ key: STRING_KEYS.LOSS_REBATES })}
+                      </Link>
+                    ),
+                    CHECK_ELIGIBILITY_LINK: (
+                      <Link href="https://www.dydx.xyz/liquidation-rebates" isInline>
+                        {stringGetter({ key: STRING_KEYS.HERE })}
+                      </Link>
+                    ),
+                  },
+                })}
+              </p>
+            </div>
+          </div>
+          <div tw="flex items-center gap-0.25 self-start rounded-3 bg-color-layer-1 px-0.875 py-0.5">
+            <Icon iconName={IconName.Clock} size="1.25rem" tw="text-color-accent" />
+            <div tw="flex gap-0.375">
+              <div tw="text-color-accent">
+                {stringGetter({
+                  key: STRING_KEYS.MONTH_COUNTDOWN,
+                })}
+                :
+              </div>
+              {/* Countdown to end of current month */}
+              <MinutesCountdown endTime={endOfCurrentMonth} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </$Panel>
+  );
+};
+
+const MinutesCountdown = ({ endTime }: { endTime: string }) => {
+  const targetMs = Date.parse(endTime);
+  const now = useNow();
+  const [msLeft, setMsLeft] = useState(Math.max(0, Math.floor(targetMs - Date.now())));
+
+  useEffect(() => {
+    if (now > targetMs) {
+      return;
+    }
+
+    const newMsLeft = Math.max(0, Math.floor(targetMs - now));
+    setMsLeft(newMsLeft);
+  }, [now, targetMs]);
+
+  const formattedMsLeft = useMemo(() => {
+    return Duration.fromMillis(msLeft)
+      .shiftTo('days', 'hours', 'minutes', 'seconds')
+      .toFormat("d'd' h'h' m'm' s's'", { floor: true });
+  }, [msLeft]);
+
+  return <div>{formattedMsLeft}</div>;
+};
+
+const $Panel = tw(Panel)`bg-color-layer-3 w-full`;