feat: add batch revoke fees (#289)

- Remove TipSection from batch revoking
- Add automatic fee payment to batch revokes
- Add FeeNotice that explains the fee
- Update cached native token prices more often
- Add blog post about this change
- Add banner about this change

Author: rkalis

app/[locale]/layout.tsx

@@ -14,6 +14,7 @@ import type { Metadata } from 'next';
 import { getMessages, getTranslations, setRequestLocale } from 'next-intl/server';
 import 'react-lite-youtube-embed/dist/LiteYouTubeEmbed.css';
 import '../../styles/index.css';
+import AnnouncementsContainer from 'components/common/AnnouncementsContainer';
 
 interface Props {
   children: React.ReactNode;
@@ -67,6 +68,7 @@ const MainLayout = async ({ children, params }: Props) => {
             <EthereumProvider>
               <ColorThemeProvider>
                 <div className="flex flex-col mx-auto min-h-screen">
+                  <AnnouncementsContainer />
                   <Header />
                   <main className="w-full grow">{children}</main>
                   <div className="flex flex-col justify-end">

app/[locale]/learn/faq/page.tsx

@@ -1,4 +1,5 @@
 import LearnLayout from 'app/layouts/LearnLayout';
+import { BASE_FEE, PER_ALLOWANCE_FEE } from 'components/allowances/controls/batch-revoke/fee';
 import ChainLogo from 'components/common/ChainLogo';
 import Href from 'components/common/Href';
 import RichText from 'components/common/RichText';
@@ -65,12 +66,20 @@ const FaqPage: NextPage<Props> = async ({ params }) => {
         <FaqItem question={t('faq.questions.enough_to_disconnect.question')} slug="enough_to_disconnect">
           <RichText>{(tags) => t.rich('faq.questions.enough_to_disconnect.answer', tags)}</RichText>
         </FaqItem>
+        <FaqItem question={t('faq.questions.costs.question')} slug="costs">
+          <RichText>
+            {(tags) =>
+              t.rich('faq.questions.costs.answer', {
+                ...tags,
+                BASE_FEE: BASE_FEE.toFixed(2),
+                PER_ALLOWANCE_FEE: PER_ALLOWANCE_FEE.toFixed(2),
+              })
+            }
+          </RichText>
+        </FaqItem>
         <FaqItem question={t('faq.questions.hardware_wallets.question')} slug="hardware_wallets">
           <RichText>{(tags) => t.rich('faq.questions.hardware_wallets.answer', tags)}</RichText>
         </FaqItem>
-        <FaqItem question={t('faq.questions.costs.question')} slug="costs">
-          <RichText>{(tags) => t.rich('faq.questions.costs.answer', tags)}</RichText>
-        </FaqItem>
         <FaqItem question={t('faq.questions.wallet_mentions_approve.question')} slug="wallet_mentions_approve">
           <RichText>{(tags) => t.rich('faq.questions.wallet_mentions_approve.answer', tags)}</RichText>
         </FaqItem>

app/api/[chainId]/native-price/route.ts

@@ -32,7 +32,7 @@ const PRICE_QUEUE = new RequestQueue('token-price-native', {
   interval: 1 * MINUTE,
 });
 
-const CACHE_TTL = 1 * 60 * 60; // 1 hour
+const CACHE_TTL = 1 * 60 * 20; // 20 minutes
 
 export async function GET(req: NextRequest, { params }: Props) {
   const { chainId: chainIdString } = await params;

components/allowances/controls/batch-revoke/BatchRevokeControls.tsx

@@ -1,27 +1,20 @@
 import Button from 'components/common/Button';
-import TipSection from 'components/common/donate/TipSection';
-import { useDonate } from 'lib/hooks/ethereum/useDonate';
-import { useNativeTokenPrice } from 'lib/hooks/ethereum/useNativeTokenPrice';
 import { useAddressPageContext } from 'lib/hooks/page-context/AddressPageContext';
-import { isNullish } from 'lib/utils';
 import { useTranslations } from 'next-intl';
-import { useState } from 'react';
 import ControlsWrapper from '../ControlsWrapper';
+import FeeNotice from './FeeNotice';
 
 interface Props {
+  feeDollarAmount: string;
   isRevoking: boolean;
   isAllConfirmed: boolean;
   setOpen: (open: boolean) => void;
-  revoke: (tipDollarAmount: string) => Promise<void>;
+  revoke: () => Promise<void>;
 }
 
-const BatchRevokeControls = ({ isRevoking, isAllConfirmed, setOpen, revoke }: Props) => {
+const BatchRevokeControls = ({ feeDollarAmount, isRevoking, isAllConfirmed, setOpen, revoke }: Props) => {
   const t = useTranslations();
   const { address, selectedChainId } = useAddressPageContext();
-  const { nativeToken } = useDonate(selectedChainId, 'batch-revoke-tip');
-  const { nativeTokenPrice } = useNativeTokenPrice(selectedChainId);
-
-  const [tipAmount, setTipAmount] = useState<string | null>(null);
 
   const getButtonText = () => {
     if (isRevoking) return t('common.buttons.revoking');
@@ -31,21 +24,13 @@ const BatchRevokeControls = ({ isRevoking, isAllConfirmed, setOpen, revoke }: Pr
 
   const getButtonAction = () => {
     if (isAllConfirmed) return () => setOpen(false);
-    return async () => {
-      if (!tipAmount && !isNullish(nativeTokenPrice)) throw new Error('Tip amount is required');
-      await revoke(tipAmount ?? '0');
-    };
+    return revoke;
   };
 
   return (
-    <div className="flex flex-col items-center justify-center gap-4">
-      <TipSection chainId={selectedChainId} nativeToken={nativeToken} onSelect={setTipAmount} />
-      <ControlsWrapper
-        chainId={selectedChainId}
-        address={address}
-        overrideDisabled={!tipAmount && !isNullish(nativeTokenPrice)}
-        disabledReason={t('address.tooltips.select_tip')}
-      >
+    <div className="flex flex-col items-center justify-center gap-8">
+      <FeeNotice chainId={selectedChainId} feeDollarAmount={feeDollarAmount} />
+      <ControlsWrapper chainId={selectedChainId} address={address}>
         {(disabled) => (
           <div>
             <Button

components/allowances/controls/batch-revoke/BatchRevokeModalWithButton.tsx

@@ -25,7 +25,7 @@ const BatchRevokeModalWithButton = ({ table }: Props) => {
     return table.getGroupedSelectedRowModel().flatRows.map((row) => row.original);
   }, [open]);
 
-  const { results, revoke, pause, isRevoking, isAllConfirmed } = useRevokeBatch(
+  const { results, revoke, pause, isRevoking, isAllConfirmed, feeDollarAmount } = useRevokeBatch(
     selectedAllowances,
     table.options.meta!.onUpdate,
   );
@@ -66,6 +66,7 @@ const BatchRevokeModalWithButton = ({ table }: Props) => {
             </div>
           </div>
           <BatchRevokeControls
+            feeDollarAmount={feeDollarAmount}
             isRevoking={isRevoking}
             isAllConfirmed={isAllConfirmed}
             setOpen={setOpen}

components/allowances/controls/batch-revoke/FeeNotice.tsx

@@ -0,0 +1,95 @@
+import { InformationCircleIcon } from '@heroicons/react/24/outline';
+import Href from 'components/common/Href';
+import RichText from 'components/common/RichText';
+import WithHoverTooltip from 'components/common/WithHoverTooltip';
+import { useNativeTokenPrice } from 'lib/hooks/ethereum/useNativeTokenPrice';
+import { getChainName } from 'lib/utils/chains';
+import { useTranslations } from 'next-intl';
+import type { ReactNode } from 'react';
+import { BASE_FEE, FEE_SPONSORS, PER_ALLOWANCE_FEE } from './fee';
+
+interface Props {
+  chainId: number;
+  feeDollarAmount: string;
+}
+
+const FeeNotice = ({ chainId, feeDollarAmount }: Props) => {
+  const t = useTranslations();
+  const { nativeTokenPrice } = useNativeTokenPrice(chainId);
+
+  if (!nativeTokenPrice) return null;
+
+  const sponsor = FEE_SPONSORS[chainId];
+
+  if (sponsor) {
+    return <SponsoredFeeNotice chainId={chainId} />;
+  }
+
+  const tooltipContent = (
+    <RichText>
+      {(tags) =>
+        t.rich('address.batch_revoke.fee.tooltip', {
+          ...tags,
+          BASE_FEE: BASE_FEE.toFixed(2),
+          PER_ALLOWANCE_FEE: PER_ALLOWANCE_FEE.toFixed(2),
+        })
+      }
+    </RichText>
+  );
+
+  return (
+    <div className="flex items-center justify-center gap-2 text-center text-sm text-zinc-600 dark:text-zinc-300 bg-brand/30 dark:bg-brand/20 py-4 px-6">
+      <span>
+        <RichText>
+          {(tags) =>
+            t.rich('address.batch_revoke.fee.notice', {
+              ...tags,
+              feeDollarAmount,
+            })
+          }
+        </RichText>
+      </span>
+      <WithHoverTooltip tooltip={tooltipContent}>
+        <InformationCircleIcon className="w-6 h-6 shrink-0" />
+      </WithHoverTooltip>
+    </div>
+  );
+};
+
+export default FeeNotice;
+
+interface SponsoredFeeNoticeProps {
+  chainId: number;
+}
+
+const SponsoredFeeNotice = ({ chainId }: SponsoredFeeNoticeProps) => {
+  const t = useTranslations();
+
+  const chainName = getChainName(chainId);
+  const sponsor = FEE_SPONSORS[chainId];
+
+  if (!sponsor) return null;
+
+  const sponsorTags = {
+    sponsor: sponsor.name,
+    chainName,
+    'sponsor-link': (children: ReactNode) =>
+      sponsor.url ? (
+        <Href href={sponsor.url} external className="font-medium">
+          {children}
+        </Href>
+      ) : (
+        <span className="font-medium">{children}</span>
+      ),
+  };
+
+  return (
+    <div className="flex items-center justify-center gap-2 text-center text-sm text-zinc-600 dark:text-zinc-300 bg-brand/30 dark:bg-brand/20 py-4 px-6">
+      <span>
+        <RichText>
+          {(tags) => t.rich('address.batch_revoke.fee.sponsored_notice', { ...tags, ...sponsorTags })}
+        </RichText>
+      </span>
+    </div>
+  );
+};

components/common/donate/TipSection.tsx renamed to components/allowances/controls/batch-revoke/TipSection.tsx

@@ -7,8 +7,8 @@ import { formatDonationTokenAmount } from 'lib/utils/formatting';
 import { useTranslations } from 'next-intl';
 import { useMemo, useState } from 'react';
 import { twMerge } from 'tailwind-merge';
-import Select from '../select/Select';
-import WithHoverTooltip from '../WithHoverTooltip';
+import Select from '../../../common/select/Select';
+import WithHoverTooltip from '../../../common/WithHoverTooltip';
 
 interface Props {
   chainId: number;

components/allowances/controls/batch-revoke/fee.ts

@@ -0,0 +1,28 @@
+import { ChainId } from '@revoke.cash/chains';
+
+export const BASE_FEE = 1.5;
+export const PER_ALLOWANCE_FEE = 0.0;
+
+interface FeeSponsor {
+  name: string;
+  url?: string;
+}
+
+export const FEE_SPONSORS: Record<number, FeeSponsor> = {
+  [ChainId.OPMainnet]: {
+    name: 'Optimism Foundation',
+    url: 'https://www.optimism.io/',
+  },
+  [ChainId.Palm]: {
+    name: 'Revoke.cash',
+  },
+};
+
+export const getFeeDollarAmount = (chainId: number, allowancesCount: number) => {
+  if (FEE_SPONSORS[chainId]) return 0;
+  return BASE_FEE + allowancesCount * PER_ALLOWANCE_FEE;
+};
+
+export const isNonZeroFeeDollarAmount = (feeDollarAmount: string) => {
+  return Number(feeDollarAmount) > 0;
+};

components/common/AnnouncementBanner.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import { useMounted } from 'lib/hooks/useMounted';
+import { useTranslations } from 'next-intl';
+import useLocalStorage from 'use-local-storage';
+
+interface Props {
+  storageKey: string;
+  children: React.ReactNode;
+}
+
+const AnnouncementBanner = ({ storageKey, children }: Props) => {
+  const t = useTranslations();
+  const isMounted = useMounted();
+  const [dismissed, setDismissed] = useLocalStorage<boolean>(storageKey, false);
+
+  if (!isMounted) return null;
+  if (dismissed) return null;
+
+  return (
+    <div className="w-full bg-brand text-zinc-900 dark:bg-brand dark:text-zinc-900">
+      <div className="px-4 lg:px-8 py-2 flex items-center justify-between gap-3 text-sm">
+        <div className="w-5" />
+        <div className="flex items-center gap-2">{children}</div>
+        <button
+          type="button"
+          aria-label={t('common.buttons.close')}
+          onClick={() => setDismissed(true)}
+          className="text-zinc-800 hover:text-zinc-600"
+        >
+          <XMarkIcon className="w-5 h-5" />
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default AnnouncementBanner;

components/common/AnnouncementsContainer.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import AnnouncementBanner from './AnnouncementBanner';
+import Button from './Button';
+
+const AnnouncementsContainer = () => {
+  return (
+    <AnnouncementBanner storageKey="banner-dismissed:2025-10-10">
+      <span>Why we're adding batch revoke fees: </span>
+      <Button
+        style="secondary"
+        size="sm"
+        href="/blog/2025/why-were-adding-batch-revoke-fees"
+        router
+        className="bg-transparent hover:bg-black/20 dark:border-black dark:text-zinc-900"
+      >
+        Learn more
+      </Button>
+    </AnnouncementBanner>
+  );
+};
+
+export default AnnouncementsContainer;