feat: revoke reason, ui types

DanielSinclair · DanielSinclair · commit 1032e087ea9f · 2026-01-20T11:40:51.000-05:00
diff --git a/src/languages/en_US.json b/src/languages/en_US.json
@@ -2948,6 +2948,36 @@
         "view_private_key": "View Private Key",
         "copy_wallet_address": "Copy wallet address"
       },
+      "delegations": {
+        "active": "Active",
+        "not_active": "Not active",
+        "enable_smart_wallet": "Enable Smart Wallet",
+        "disable_smart_wallet": "Disable Smart Wallet",
+        "enabled_description": "You'll miss out on faster transactions and lower network costs",
+        "disabled_description": "Updates will take effect on your next swap",
+        "revoke_panel": {
+          "disable_title": "Disable Smart Wallet",
+          "disable_subtitle": "This will revoke all active delegations and disable Smart Wallet features.",
+          "disable_button": "Hold to Disable",
+          "revoke_network_title": "Revoke %{network}",
+          "revoke_network_subtitle": "This will remove the delegation for this network.",
+          "revoke_network_button": "Hold to Revoke",
+          "conflict_title": "Smart Wallet Conflict",
+          "conflict_subtitle": "Your wallet is delegated to a different provider's Smart Wallet. Disable this to use Rainbow instead.",
+          "conflict_button": "Hold to Disable",
+          "security_title": "Security Alert",
+          "security_subtitle": "An unknown delegation was detected. Revoke it to secure your wallet.",
+          "security_button": "Hold to Revoke",
+          "settings_title": "Revoke Delegation",
+          "settings_subtitle": "Remove delegation from this contract.",
+          "settings_button": "Hold to Revoke",
+          "revoking": "Revoking...",
+          "done": "Done",
+          "next": "Next",
+          "try_again": "Try Again",
+          "gas_fee": "to revoke on %{chainName}"
+        }
+      },
       "balance_title": "Balance",
       "buy": "Buy",
       "change_wallet": {
diff --git a/src/navigation/types.ts b/src/navigation/types.ts
@@ -40,6 +40,7 @@ import { ScrollView } from 'react-native';
 import { HlTrade, PerpMarket, PerpsPosition, TriggerOrderSource, TriggerOrderType } from '@/features/perps/types';
 import { PolymarketPosition } from '@/features/polymarket/types';
 import { PolymarketEvent, PolymarketMarket, PolymarketMarketEvent } from '@/features/polymarket/types/polymarket-event';
+import { RevokeReason } from '@/screens/delegation/RevokeDelegationPanel';
 
 export type PortalSheetProps = {
   children: React.FC;
@@ -709,6 +710,7 @@ type RouteParams = {
       contractAddress: Address;
     }>;
     onSuccess?: () => void;
+    revokeReason?: RevokeReason;
   };
 };
 
diff --git a/src/screens/delegation/RevokeDelegationPanel.tsx b/src/screens/delegation/RevokeDelegationPanel.tsx
@@ -1,10 +1,12 @@
 import React, { useCallback, useState } from 'react';
+import { StyleSheet } from 'react-native';
 import { RouteProp, useRoute } from '@react-navigation/native';
 import { Wallet } from '@ethersproject/wallet';
+import LinearGradient from 'react-native-linear-gradient';
 import { useNavigation } from '@/navigation';
-import { Box, Text } from '@/design-system';
-import { ClaimButton } from '@/screens/claimables/shared/components/ClaimButton';
-import { ClaimPanel } from '@/screens/claimables/shared/components/ClaimPanel';
+import { Box, Text, globalColors, Separator } from '@/design-system';
+import { HoldToActivateButton } from '@/components/hold-to-activate-button/HoldToActivateButton';
+import { PanelSheet } from '@/components/PanelSheet/PanelSheet';
 import { RootStackParamList } from '@/navigation/types';
 import Routes from '@/navigation/routesNames';
 import { logger, RainbowError } from '@/logger';
@@ -14,28 +16,104 @@ import { useWalletsStore } from '@/state/wallets/walletsStore';
 import { loadWallet } from '@/model/wallet';
 import { getProvider } from '@/handlers/web3';
 import { getNextNonce } from '@/state/nonces';
+import { ChainId } from '@/state/backendNetworks/types';
+import { useBackendNetworksStore } from '@/state/backendNetworks/backendNetworks';
+import * as i18n from '@/languages';
+
+/**
+ * Reasons for revoking delegation - determines the panel's appearance and messaging
+ */
+export enum RevokeReason {
+  /** User manually chose to disable Smart Wallet for all chains */
+  DISABLE_SMART_WALLET = 'disable_smart_wallet',
+  /** User manually chose to revoke a single network delegation */
+  REVOKE_SINGLE_NETWORK = 'revoke_single_network',
+  /** Third-party Smart Wallet provider detected - user can switch to Rainbow */
+  THIRD_PARTY_CONFLICT = 'third_party_conflict',
+  /** Security concern - unknown delegation detected */
+  SECURITY_ALERT = 'security_alert',
+  /** User-initiated revoke from settings */
+  SETTINGS_REVOKE = 'settings_revoke',
+}
 
 export type RevokeStatus =
   | 'notReady' // preparing the data necessary to revoke
   | 'ready' // ready to revoke state
-  | 'claiming' // user has pressed the revoke button (keeping 'claiming' for compatibility with ClaimPanel/ClaimButton)
+  | 'claiming' // user has pressed the revoke button
   | 'pending' // revoke has been submitted but we don't have a tx hash
   | 'success' // revoke has been submitted and we have a tx hash
   | 'recoverableError' // revoke or auth has failed, can try again
   | 'unrecoverableError'; // revoke has failed, unrecoverable error
 
+type SheetContent = {
+  title: string;
+  subtitle: string;
+  buttonLabel: string;
+  accentColor: string;
+};
+
+const getSheetContent = (reason: RevokeReason, chainName?: string): SheetContent => {
+  switch (reason) {
+    case RevokeReason.DISABLE_SMART_WALLET:
+      return {
+        title: i18n.t(i18n.l.wallet.delegations.revoke_panel.disable_title),
+        subtitle: i18n.t(i18n.l.wallet.delegations.revoke_panel.disable_subtitle),
+        buttonLabel: i18n.t(i18n.l.wallet.delegations.revoke_panel.disable_button),
+        accentColor: globalColors.blue60,
+      };
+    case RevokeReason.REVOKE_SINGLE_NETWORK:
+      return {
+        title: i18n.t(i18n.l.wallet.delegations.revoke_panel.revoke_network_title, { network: chainName || '' }),
+        subtitle: i18n.t(i18n.l.wallet.delegations.revoke_panel.revoke_network_subtitle),
+        buttonLabel: i18n.t(i18n.l.wallet.delegations.revoke_panel.revoke_network_button),
+        accentColor: globalColors.blue60,
+      };
+    case RevokeReason.THIRD_PARTY_CONFLICT:
+      return {
+        title: i18n.t(i18n.l.wallet.delegations.revoke_panel.conflict_title),
+        subtitle: i18n.t(i18n.l.wallet.delegations.revoke_panel.conflict_subtitle),
+        buttonLabel: i18n.t(i18n.l.wallet.delegations.revoke_panel.conflict_button),
+        accentColor: globalColors.orange60,
+      };
+    case RevokeReason.SECURITY_ALERT:
+      return {
+        title: i18n.t(i18n.l.wallet.delegations.revoke_panel.security_title),
+        subtitle: i18n.t(i18n.l.wallet.delegations.revoke_panel.security_subtitle),
+        buttonLabel: i18n.t(i18n.l.wallet.delegations.revoke_panel.security_button),
+        accentColor: globalColors.red60,
+      };
+    case RevokeReason.SETTINGS_REVOKE:
+    default:
+      return {
+        title: i18n.t(i18n.l.wallet.delegations.revoke_panel.settings_title),
+        subtitle: i18n.t(i18n.l.wallet.delegations.revoke_panel.settings_subtitle),
+        buttonLabel: i18n.t(i18n.l.wallet.delegations.revoke_panel.settings_button),
+        accentColor: globalColors.blue60,
+      };
+  }
+};
+
 export const RevokeDelegationPanel = () => {
   const { goBack } = useNavigation();
   const {
-    params: { delegationsToRevoke, onSuccess },
+    params: { delegationsToRevoke, onSuccess, revokeReason = RevokeReason.SETTINGS_REVOKE },
   } = useRoute<RouteProp<RootStackParamList, typeof Routes.REVOKE_DELEGATION_PANEL>>();
 
   const [currentIndex, setCurrentIndex] = useState(0);
   const [revokeStatus, setRevokeStatus] = useState<RevokeStatus>('ready');
   const accountAddress = useWalletsStore(state => state.accountAddress);
+  const getChainsLabel = useBackendNetworksStore(state => state.getChainsLabel);
 
   const currentDelegation = delegationsToRevoke[currentIndex];
   const isLastDelegation = currentIndex === delegationsToRevoke.length - 1;
+  const chainId = currentDelegation?.chainId as ChainId;
+
+  // Get chain name for display
+  const chainsLabel = getChainsLabel();
+  const chainName = chainsLabel[chainId] || `Chain ${chainId}`;
+
+  // Get sheet content based on revoke reason
+  const sheetContent = getSheetContent(revokeReason, chainName);
 
   const handleRevoke = useCallback(async () => {
     if (!currentDelegation || !accountAddress) return;
@@ -55,14 +133,12 @@ export const RevokeDelegationPanel = () => {
       }
 
       // Get current gas prices from provider
-      // TODO: use simulation to get the gas prices
       const feeData = await provider.getFeeData();
       const maxFeePerGas = feeData.maxFeePerGas?.toBigInt() ?? 0n;
       const maxPriorityFeePerGas = feeData.maxPriorityFeePerGas?.toBigInt() ?? 0n;
 
       const nonce = await getNextNonce({ address: accountAddress, chainId: currentDelegation.chainId });
 
-      // Remove the delegation using the SDK function
       const result = await executeRevokeDelegation({
         signer: wallet as Wallet,
         address: accountAddress,
@@ -88,7 +164,6 @@ export const RevokeDelegationPanel = () => {
       // Move to next delegation or finish
       setTimeout(() => {
         if (isLastDelegation) {
-          // Call success callback if provided
           onSuccess?.();
           goBack();
         } else {
@@ -105,63 +180,143 @@ export const RevokeDelegationPanel = () => {
       haptics.notificationError();
       setRevokeStatus('recoverableError');
     }
-  }, [currentDelegation, accountAddress, isLastDelegation, goBack]);
+  }, [currentDelegation, accountAddress, isLastDelegation, goBack, onSuccess]);
 
   const buttonLabel = (() => {
     switch (revokeStatus) {
       case 'ready':
-        return 'Revoke Delegation';
-      case 'claiming': // Transaction is being processed
-        return 'Revoking...';
+        return sheetContent.buttonLabel;
+      case 'claiming':
+        return i18n.t(i18n.l.wallet.delegations.revoke_panel.revoking);
       case 'success':
-        return isLastDelegation ? 'Done' : 'Next';
+        return isLastDelegation ? i18n.t(i18n.l.wallet.delegations.revoke_panel.done) : i18n.t(i18n.l.wallet.delegations.revoke_panel.next);
       case 'recoverableError':
-        return 'Try Again';
+        return i18n.t(i18n.l.wallet.delegations.revoke_panel.try_again);
       default:
-        return 'Revoke Delegation';
+        return sheetContent.buttonLabel;
     }
   })();
 
+  const handleButtonPress = useCallback(() => {
+    if (revokeStatus === 'ready' || revokeStatus === 'recoverableError') {
+      handleRevoke();
+    } else if (revokeStatus === 'success' && !isLastDelegation) {
+      setCurrentIndex(prev => prev + 1);
+      setRevokeStatus('ready');
+    } else {
+      goBack();
+    }
+  }, [revokeStatus, handleRevoke, isLastDelegation, goBack]);
+
   if (!currentDelegation) {
     return null;
   }
 
+  const isReady = revokeStatus === 'ready';
+  const isProcessing = revokeStatus === 'claiming';
+  const isError = revokeStatus === 'recoverableError';
+  const isSuccess = revokeStatus === 'success';
+  const isConflict = revokeReason === RevokeReason.THIRD_PARTY_CONFLICT;
+  const isSecurityAlert = revokeReason === RevokeReason.SECURITY_ALERT;
+
   return (
-    <ClaimPanel title="Security Notice" subtitle="Remove delegation from this contract" claimStatus={revokeStatus} iconUrl="">
-      <Box gap={20} alignItems="center">
-        <Box alignItems="center" gap={12}>
-          <Text size="17pt" weight="bold" color="label">
-            Chain ID: {currentDelegation.chainId}
-          </Text>
-          <Text size="15pt" color="labelSecondary" align="center">
-            {currentDelegation.contractAddress}
+    <PanelSheet showHandle showTapToDismiss>
+      {/* Header with Smart Wallet Icon */}
+      <Box alignItems="center" paddingTop="28px" paddingHorizontal="20px">
+        {/* Smart Wallet Lock Icon with Gradient */}
+        <Box
+          width={{ custom: 52 }}
+          height={{ custom: 52 }}
+          borderRadius={16}
+          borderWidth={1.926}
+          borderColor={{ custom: 'rgba(255, 255, 255, 0.1)' }}
+          style={styles.iconContainer}
+        >
+          <LinearGradient
+            colors={
+              isError
+                ? [globalColors.red60, globalColors.red80, '#19002d']
+                : isSuccess
+                  ? [globalColors.green60, globalColors.green80, '#19002d']
+                  : isSecurityAlert
+                    ? [globalColors.red60, globalColors.red80, '#19002d']
+                    : isConflict
+                      ? [globalColors.orange60, globalColors.orange80, '#19002d']
+                      : ['#3b7fff', '#b724ad', '#19002d']
+            }
+            locations={[0.043, 0.887, 1]}
+            useAngle
+            angle={132.532}
+            angleCenter={{ x: 0.5, y: 0.5 }}
+            style={StyleSheet.absoluteFill}
+          />
+          <Box alignItems="center" justifyContent="center" width="full" height="full">
+            <Text color="white" size="20pt" weight="heavy" align="center" style={styles.iconText}>
+              {isSuccess ? '􀆅' : isError ? '􀇿' : '􀎡'}
+            </Text>
+          </Box>
+        </Box>
+
+        {/* Title */}
+        <Box paddingTop="24px" alignItems="center">
+          <Text size="26pt" weight="heavy" color="label" align="center">
+            {sheetContent.title}
           </Text>
-          <Text size="13pt" color="labelTertiary" align="center">
-            {currentIndex + 1} of {delegationsToRevoke.length}
+        </Box>
+
+        {/* Subtitle */}
+        <Box paddingTop="24px" width={{ custom: 295 }}>
+          <Text size="17pt" weight="semibold" color="labelSecondary" align="center">
+            {sheetContent.subtitle}
           </Text>
         </Box>
       </Box>
 
-      <Box alignItems="center" width="full">
-        <ClaimButton
-          enableHoldToPress={revokeStatus === 'ready'}
-          isLoading={revokeStatus === 'claiming'}
-          onPress={
-            revokeStatus === 'ready' || revokeStatus === 'recoverableError'
-              ? handleRevoke
-              : revokeStatus === 'success' && !isLastDelegation
-                ? () => {
-                    setCurrentIndex(prev => prev + 1);
-                    setRevokeStatus('ready');
-                  }
-                : goBack
-          }
-          disabled={revokeStatus === 'claiming'}
-          shimmer={revokeStatus === 'claiming'}
-          biometricIcon={revokeStatus === 'ready'}
+      {/* Separator */}
+      <Box paddingTop="24px" paddingHorizontal="20px">
+        <Separator color="separatorTertiary" />
+      </Box>
+
+      {/* Action Button */}
+      <Box paddingTop="24px" paddingHorizontal="20px">
+        <HoldToActivateButton
+          backgroundColor={isSuccess ? globalColors.green60 : isError ? globalColors.red60 : globalColors.blue60}
+          disabledBackgroundColor={'rgba(38, 143, 255, 0.2)'}
+          disabled={isProcessing}
+          isProcessing={isProcessing}
           label={buttonLabel}
+          onLongPress={handleButtonPress}
+          height={48}
+          showBiometryIcon={isReady}
+          testID="revoke-delegation-button"
+          processingLabel={buttonLabel}
+          borderColor={{ custom: 'rgba(255, 255, 255, 0.08)' }}
+          borderWidth={1}
         />
       </Box>
-    </ClaimPanel>
+
+      {/* Gas Fee Preview */}
+      <Box paddingTop="24px" paddingBottom="24px" alignItems="center" justifyContent="center">
+        <Box flexDirection="row" alignItems="center" gap={4}>
+          <Text size="13pt" weight="heavy" color={{ custom: 'rgba(245, 248, 255, 0.56)' }} align="center">
+            􀵟
+          </Text>
+          <Text size="13pt" weight="bold" color={{ custom: 'rgba(245, 248, 255, 0.56)' }} align="center">
+            {i18n.t(i18n.l.wallet.delegations.revoke_panel.gas_fee, { chainName })}
+          </Text>
+        </Box>
+      </Box>
+    </PanelSheet>
   );
 };
+
+const styles = StyleSheet.create({
+  iconContainer: {
+    overflow: 'hidden',
+  },
+  iconText: {
+    textShadowColor: 'rgba(0, 0, 0, 0.15)',
+    textShadowOffset: { width: 0, height: 2.167 },
+    textShadowRadius: 5.778,
+  },
+});
