Skip to content

Make deleting an account take more than two taps #2562

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MusabShakeel576 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Make deleting an account take more than two taps #2562

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 8 additions & 54 deletions app/(protected)/(tabs)/settings/account.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
import { useState } from 'react';
import { ActivityIndicator, Alert, Modal, Pressable, Text, View } from 'react-native';
import { Alert, Pressable, Text, View } from 'react-native';
import { Image } from 'expo-image';
import { ChevronRight, X } from 'lucide-react-native';
import { ChevronRight } from 'lucide-react-native';
import { Address } from 'viem';

import WalletIcon from '@/assets/images/wallet';
import CopyToClipboard from '@/components/CopyToClipboard';
import Navbar from '@/components/Navbar';
import PageLayout from '@/components/PageLayout';
import { SettingsCard } from '@/components/Settings';
import DeleteAccountModal from '@/components/Settings/DeleteAccountModal';
import { BackButton } from '@/components/ui/back-button';
import { useDimension } from '@/hooks/useDimension';
import useUser from '@/hooks/useUser';
Expand Down Expand Up @@ -62,59 +63,12 @@ export default function Account() {
);

const deleteModal = (
<Modal
animationType="fade"
transparent={true}
<DeleteAccountModal
visible={showDeleteModal}
onRequestClose={() => !isDeleting && setShowDeleteModal(false)}
>
<View className="flex-1 items-center justify-center bg-black/70 px-4">
<View className="w-full max-w-sm rounded-3xl bg-[#1c1c1c] p-6">
<View className="mb-4 flex-row items-center justify-between">
<Text className="text-xl font-bold text-white">Delete Account</Text>
<Pressable onPress={() => !isDeleting && setShowDeleteModal(false)}>
<X size={24} color="#ffffff" />
</Pressable>
</View>

<Text className="mb-6 text-base text-gray-300">
Are you sure you want to delete your account? This action cannot be undone and will:
</Text>

<View className="mb-6">
<Text className="mb-2 text-sm text-gray-300">• Remove all your data</Text>
<Text className="mb-2 text-sm text-gray-300">• Cancel any active cards</Text>
<Text className="mb-2 text-sm text-gray-300">• Delete your transaction history</Text>
<Text className="text-sm text-gray-300">• Remove access to your wallet</Text>
</View>

<View className="flex-row justify-between">
<Pressable
onPress={() => setShowDeleteModal(false)}
className="mr-2 flex-1 rounded-xl bg-gray-700 py-4"
disabled={isDeleting}
>
<Text className="text-center font-semibold text-white">Cancel</Text>
</Pressable>

<Pressable
onPress={confirmDelete}
className={cn('ml-2 flex-1 rounded-xl py-4', {
'bg-red-400': isDeleting,
'bg-red-600': !isDeleting,
})}
disabled={isDeleting}
>
{isDeleting ? (
<ActivityIndicator color="#ffffff" />
) : (
<Text className="text-center font-semibold text-white">Delete Account</Text>
)}
</Pressable>
</View>
</View>
</View>
</Modal>
isDeleting={isDeleting}
onCancel={() => setShowDeleteModal(false)}
onConfirm={confirmDelete}
/>
);

return (
Expand Down
190 changes: 190 additions & 0 deletions components/Settings/DeleteAccountModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,190 @@
import { useEffect, useState } from 'react';
import {
ActivityIndicator,
KeyboardAvoidingView,
Modal,
Platform,
Pressable,
Text,
View,
} from 'react-native';
import { AlertTriangle, X } from 'lucide-react-native';

import Input from '@/components/ui/input';
import { useTotalSavingsUSD } from '@/hooks/useTotalSavingsUSD';
import { useWalletTokens } from '@/hooks/useWalletTokens';
import { cn, formatBalanceUSD } from '@/lib/utils';

/**
* What the user has to type before "Delete Account" does anything.
*
* Two taps used to be enough, and a user closed an account holding $28 that way
* and then could not sign back in to reach it. Typing a word is the one step
* that cannot happen by accident.
*/
export const DELETE_CONFIRMATION_WORD = 'DELETE';

/** Whether what was typed confirms the deletion. Case and stray spaces don't count against it. */
export const isDeleteConfirmation = (typed: string): boolean =>
typed.trim().toUpperCase() === DELETE_CONFIRMATION_WORD;

/**
* Tells the user what they still hold before they delete the account.
*
* Deleting does not move any money: it stays in their wallet, and a closed
* account cannot sign in to reach it. Wallet and savings are the pots that
* matter for that and are read the same way the home screen reads them; the
* card is left out because its balance means different things per issuer, so
* the figure is "at least" rather than the headline.
*
* Only mounted while the modal is open, so the balance queries don't run for
* everyone who merely opens Account details.
*/
Comment on lines +41 to +42

@sentry sentry Bot Sep 23, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: The HeldBalanceWarning does not handle the loading state from the useTotalSavingsUSD hook, causing it to briefly not appear for users with funds only in savings.
Severity: MEDIUM

Suggested Fix

The HeldBalanceWarning component should account for the loading state of the balance queries. Either disable the delete button, show a loading skeleton for the balance, or conditionally render the warning only after the isLoading state from useTotalSavingsUSD is false. This ensures the user always sees the correct information or a loading indicator before they can act.

Prompt for AI Agent 
Review the code at the location below. A potential bug has been identified by an AI
agent. Verify if this is a real issue. If it is, propose a fix; if not, explain why it's
not valid.

Location: components/Settings/DeleteAccountModal.tsx#L41-L42

Potential issue: The `HeldBalanceWarning` component is rendered immediately upon modal
visibility, but it does not account for the loading state of the `useTotalSavingsUSD`
hook. While the hook is fetching data, it returns `undefined`, causing the total held
balance `heldUsd` to be calculated as `0`. For a user whose funds are entirely in
savings, the warning will not be displayed initially because the calculated balance is
below the display threshold. This creates a brief window where a user with funds might
not see the warning, potentially leading them to proceed with account deletion under the
false impression that they have no funds.

Did we get this right? 👍 / 👎 to inform future reviews.

export function HeldBalanceWarning() {
const { totalUSDExcludingVaultTokens: walletUsd } = useWalletTokens();
const { data: savingsUsd } = useTotalSavingsUSD();

const heldUsd = (walletUsd || 0) + (savingsUsd || 0);
if (heldUsd < 0.01) return null;

return (
<View className="mb-6 flex-row gap-3 rounded-xl border border-red-500/40 bg-red-500/10 p-4">
<AlertTriangle size={20} color="#FF7D7D" />
<View className="flex-1">
<Text className="mb-1 text-base font-bold text-white">
You still have at least {formatBalanceUSD(heldUsd)} in Solid
</Text>
<Text className="text-sm text-gray-300">
Deleting your account doesn&apos;t move this money, and you won&apos;t be able to sign
back in to reach it. Withdraw it or send it to another wallet first.
</Text>
</View>
</View>
);
}

type DeleteAccountModalProps = {
visible: boolean;
isDeleting: boolean;
onCancel: () => void;
onConfirm: () => void;
};

/**
* The last step before an account is closed.
*
* Closing locks the user out — every sign-in is refused afterwards, and only
* support can reopen the account — so this asks for more than a tap: it shows
* what the user still holds, and the delete button stays disabled until they
* type {@link DELETE_CONFIRMATION_WORD}.
*/
export default function DeleteAccountModal({
visible,
isDeleting,
onCancel,
onConfirm,
}: DeleteAccountModalProps) {
const [confirmationText, setConfirmationText] = useState('');
const isConfirmed = isDeleteConfirmation(confirmationText);

// Whatever was typed must not carry over to the next opening — including after a failed
// attempt, which closes the modal from the parent rather than through `cancel`.
useEffect(() => {
if (!visible) setConfirmationText('');
}, [visible]);

const cancel = () => {
if (isDeleting) return;
onCancel();
};

const confirm = () => {
if (!isConfirmed || isDeleting) return;
onConfirm();
};

return (
<Modal animationType="fade" transparent={true} visible={visible} onRequestClose={cancel}>
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
enabled={Platform.OS !== 'web'}
style={{ flex: 1 }}
>
<View className="flex-1 items-center justify-center bg-black/70 px-4">
<View className="w-full max-w-sm rounded-3xl bg-[#1c1c1c] p-6">
<View className="mb-4 flex-row items-center justify-between">
<Text className="text-xl font-bold text-white">Delete Account</Text>
<Pressable onPress={cancel} accessibilityLabel="Close">
<X size={24} color="#ffffff" />
</Pressable>
</View>

{visible && <HeldBalanceWarning />}

<Text className="mb-6 text-base text-gray-300">
Are you sure you want to delete your account? This action cannot be undone and will:
</Text>

<View className="mb-6">
<Text className="mb-2 text-sm text-gray-300">• Remove all your data</Text>
<Text className="mb-2 text-sm text-gray-300">• Cancel any active cards</Text>
<Text className="mb-2 text-sm text-gray-300">• Delete your transaction history</Text>
<Text className="text-sm text-gray-300">• Remove access to your wallet</Text>
</View>

<Text className="mb-2 text-sm text-gray-300">
Type <Text className="font-bold text-white">{DELETE_CONFIRMATION_WORD}</Text> to
confirm
</Text>
<Input
value={confirmationText}
onChangeText={setConfirmationText}
placeholder={DELETE_CONFIRMATION_WORD}
autoCapitalize="characters"
autoCorrect={false}
autoComplete="off"
editable={!isDeleting}
className="mb-6"
accessibilityLabel={`Type ${DELETE_CONFIRMATION_WORD} to confirm`}
/>

<View className="flex-row justify-between">
<Pressable
onPress={cancel}
className="mr-2 flex-1 rounded-xl bg-gray-700 py-4"
disabled={isDeleting}
>
<Text className="text-center font-semibold text-white">Cancel</Text>
</Pressable>

<Pressable
onPress={confirm}
className={cn('ml-2 flex-1 rounded-xl py-4', {
'bg-red-400': isDeleting,
'bg-red-600': !isDeleting && isConfirmed,
'bg-red-600/40': !isDeleting && !isConfirmed,
})}
disabled={isDeleting || !isConfirmed}
accessibilityLabel="Delete Account"
accessibilityState={{ disabled: isDeleting || !isConfirmed }}
>
{isDeleting ? (
<ActivityIndicator color="#ffffff" />
) : (
<Text
className={cn('text-center font-semibold', {
'text-white': isConfirmed,
'text-white/50': !isConfirmed,
})}
>
Delete Account
</Text>
)}
</Pressable>
</View>
</View>
</View>
</KeyboardAvoidingView>
</Modal>
);
}
Loading
Loading