feat: support Magic account deletion alongside thirdweb (#630)

* feat: scaffold account settings shell under /account

* feat: apply account settings brand colors (violet gradient, magenta nav)

* feat: build account wallets section (balances, receive, deep-links)

* feat: build account notifications settings section

* feat: build account delete section with thirdweb flow

* feat: build account credits settings section

* fix: lazy-construct thirdweb client to avoid shell-chunk top-level throw

* feat: rework account notifications as per-type accordions with master toggle

* feat: redesign account sidebar (user header with address copy, dividers, icons)

* feat: make account sidebar a full-height left rail

* feat: add lazy BlockchainShell and in-page MANA send to account wallets

* fix: match account notifications and delete account designs to figma

* fix: mobile master-detail navigation for account settings

* fix: notification accordions fill their column width

* fix: resolve env via sites config so dev defaults to zone not production

* fix: add per-group icons and hover shadow to notification accordions

* fix: align account sidebar with content and use 59px navbar gap on desktop

* fix: keep notification toggles instant and independent on change

* feat: enroll in credits program in-place instead of marketplace redirect

* fix: master email toggle flips only the global mute, not every switch

* fix: use the design SVG icons for notification group accordions

* fix: inject web3 reducers before Web3Inner mounts to avoid wallet crash

* feat: in-page MANA swap depositing from ethereum to polygon

* feat: track and list wallet send and swap transactions locally

* feat: align account wallets ui with figma (transactions grid, action buttons, mana mark)

* feat: in-page buy, withdraw and claim for account wallets with thirdweb-gated delete

* fix: make the account buy-with-fiat modal directional per card

* feat: support Magic account deletion alongside thirdweb

The account Delete flow was thirdweb-only. Extend it to Magic logins:

- Detect Magic accounts via the dcl_magic_user_email key (useIsMagicAccount),
  mirroring useIsThirdwebAccount.
- Gate the Delete section/nav on thirdweb OR Magic (DeleteAccountPage,
  AccountSidebar).
- Branch the confirm modal by provider: thirdweb keeps the client-side SDK
  unlink flow; Magic mints a DID token (lib/magic) and calls the auth-server
  DELETE /accounts (lib/accountDeletion) via a signed fetch carrying the token
  in the request metadata. Local cleanup is provider-aware.
- Add AUTH_SERVER_URL per env; fix dev to use the test Magic app key so the
  minted token's audience matches auth-server-dev's MAGIC_CLIENT_ID (test app).
  stg/prd were already aligned (test/prod respectively).

* refactor: detect Magic via layered signals to cover email-less logins

useIsMagicAccount keyed off dcl_magic_user_email, which only exists for
Magic logins that produced an email. SMS / passkey / OAuth-without-email
sessions never set it, so those users were classed as non-Magic and never
saw the Delete flow (the very users Magic's public-address deletion targets).

Detect with layered signals, cheapest first:
1. dcl_magic_user_email (synchronous positive fast-path for email logins).
2. wagmi's persisted connector id (wagmi.recentConnectorId === 'magic') — the
   core-web3 connector signal, present once a wallet action has populated it;
   covers email-less logins without loading the Magic SDK.
3. magic.user.isLoggedIn() — authoritative fallback when neither is present
   (fresh session, no wallet action); the same call getMagicDidToken() makes.

The check is skipped for known thirdweb logins so the Magic SDK/iframe is
never loaded needlessly. The hook now returns boolean | undefined; the Delete
page shows a loader while the async check resolves instead of flashing the
"unavailable" message at a Magic user.

wagmi.recentConnectorId is read straight from localStorage (new
utils/recentConnector, defensively parsed) because core-web3 builds its wagmi
config lazily — only on a BlockchainShell wallet action — so the connector is
not reachable via wagmi hooks in the provider-free account section.

* refactor: detect Magic purely via the SDK session check

Drop the synchronous signal layering (dcl_magic_user_email +
wagmi.recentConnectorId) from useIsMagicAccount and resolve solely through
magic.user.isLoggedIn() — one authoritative, login-method-agnostic source
instead of three, and no more coupling to wagmi's localStorage shape (the
recentConnector util is removed).

The thirdweb skip guard stays, so the Magic SDK is still not loaded for known
thirdweb logins. Other non-Magic logins (e.g. MetaMask) now resolve through
the SDK check — a brief loader / hidden Delete entry while it resolves —
rather than a synchronous localStorage read.

* refactor: extract useCanDeleteAccount, cache Magic instance, name the status hook

Addresses PR review (P2):
- Extract useCanDeleteAccount() returning { canDelete, isMagic,
  isResolvingProvider }, shared by the Delete page and the sidebar so the
  gating logic can't drift (it was duplicated 3 lines in both).
- Cache the Magic SDK instance as a module-level lazy singleton so the SDK /
  its iframe bootstraps once even when the sidebar and page detect
  concurrently; a failed bootstrap is not cached, so a later call can retry.
- Rename useIsMagicAccount -> useMagicAccountStatus returning an explicit
  { isMagic, isLoading } object, since the useIs* convention implies a boolean
  (it previously returned boolean | undefined).

The fetchWithIdentity positional-args -> options-object cleanup (also P2) is
left for a follow-up: it touches ~16 call sites across unrelated features.

---------

Co-authored-by: Braian Mellor <braianj@gmail.com>

Author: LautaroPetaccio

src/components/account/AccountSidebar/AccountSidebar.spec.tsx

@@ -59,9 +59,9 @@ jest.mock('../../../hooks/useWalletAddress', () => ({
   useWalletAddress: () => ({ disconnect: mockDisconnect })
 }))
 
-let mockIsThirdweb = true
-jest.mock('../../../hooks/useIsThirdwebAccount', () => ({
-  useIsThirdwebAccount: () => mockIsThirdweb
+let mockCanDelete = true
+jest.mock('../../../hooks/useCanDeleteAccount', () => ({
+  useCanDeleteAccount: () => ({ canDelete: mockCanDelete, isMagic: false, isResolvingProvider: false })
 }))
 
 let mockProfile: unknown = undefined
@@ -86,7 +86,7 @@ describe('AccountSidebar', () => {
   const writeText = jest.fn().mockResolvedValue(undefined)
 
   beforeEach(() => {
-    mockIsThirdweb = true
+    mockCanDelete = true
     mockProfile = undefined
     Object.assign(navigator, { clipboard: { writeText } })
   })
@@ -95,7 +95,7 @@ describe('AccountSidebar', () => {
     jest.clearAllMocks()
   })
 
-  it('should render the three section links plus delete and logout for a thirdweb account', () => {
+  it('should render the three section links plus delete and logout for an account that can be deleted', () => {
     renderSidebar()
 
     expect(screen.getByText('account.nav.wallets')).toBeInTheDocument()
@@ -105,8 +105,8 @@ describe('AccountSidebar', () => {
     expect(screen.getByText('account.nav.logout')).toBeInTheDocument()
   })
 
-  it('should hide the delete entry for a non-thirdweb account (logout stays)', () => {
-    mockIsThirdweb = false
+  it('should hide the delete entry when the account cannot be deleted (logout stays)', () => {
+    mockCanDelete = false
     renderSidebar()
 
     expect(screen.queryByText('account.nav.delete')).not.toBeInTheDocument()

src/components/account/AccountSidebar/AccountSidebar.tsx

@@ -17,7 +17,7 @@ import NotificationsNoneOutlinedIcon from '@mui/icons-material/NotificationsNone
 import { Address, Tooltip } from 'decentraland-ui2'
 import { useGetProfileQuery } from '../../../features/profile/profile.client'
 import { useFormatMessage } from '../../../hooks/adapters/useFormatMessage'
-import { useIsThirdwebAccount } from '../../../hooks/useIsThirdwebAccount'
+import { useCanDeleteAccount } from '../../../hooks/useCanDeleteAccount'
 import { useWalletAddress } from '../../../hooks/useWalletAddress'
 import { getAvatarBackgroundColor, getDisplayName } from '../../../utils/avatarColor'
 import {
@@ -62,7 +62,9 @@ const AccountSidebar = ({ address }: AccountSidebarProps) => {
   const t = useFormatMessage()
   const { pathname } = useLocation()
   const { disconnect } = useWalletAddress()
-  const isThirdweb = useIsThirdwebAccount()
+  // The Delete entry appears only once detection positively confirms a deletable account (thirdweb
+  // or Magic); while the Magic check resolves, canDelete stays false so it is not shown prematurely.
+  const { canDelete } = useCanDeleteAccount()
   const { data: profile } = useGetProfileQuery(address)
   const [copied, setCopied] = useState(false)
   const copiedTimeout = useRef<ReturnType<typeof setTimeout>>()
@@ -134,9 +136,9 @@ const AccountSidebar = ({ address }: AccountSidebarProps) => {
       </Nav>
 
       <BottomGroup>
-        {/* Delete only applies to thirdweb (email/social-OTP) wallets — the SDK unlink flow has no
-            equivalent for self-custodial logins — so the entry is hidden for everyone else. */}
-        {isThirdweb && (
+        {/* Delete applies to web2 logins (thirdweb via the SDK, Magic via the auth-server); it is
+            hidden for self-custodial logins, which have no account to delete. */}
+        {canDelete && (
           <>
             <Divider />
             <DeleteNavItem

src/components/account/DeleteAccount/DeleteAccountConfirmModal/DeleteAccountConfirmModal.spec.tsx

@@ -78,6 +78,19 @@ jest.mock('../../../../hooks/adapters/useFormatMessage', () => ({
   useFormatMessage: () => (id: string) => id
 }))
 
+const mockGetMagicDidToken = jest.fn()
+const mockDeleteMagicAccount = jest.fn()
+const mockIdentity = { authChain: [], ephemeralIdentity: {} }
+jest.mock('../../../../hooks/useAuthIdentity', () => ({
+  useAuthIdentity: () => ({ identity: mockIdentity, hasValidIdentity: true, address: undefined })
+}))
+jest.mock('../../../../lib/magic', () => ({
+  getMagicDidToken: (...args: unknown[]) => mockGetMagicDidToken(...args)
+}))
+jest.mock('../../../../lib/accountDeletion', () => ({
+  deleteMagicAccount: (...args: unknown[]) => mockDeleteMagicAccount(...args)
+}))
+
 const ADDRESS = '0x1234567890123456789012345678901234567890'
 
 describe('DeleteAccountConfirmModal', () => {
@@ -96,6 +109,8 @@ describe('DeleteAccountConfirmModal', () => {
     mockGetEnv.mockImplementation((key: string) => (key === 'AUTH_URL' ? 'https://decentraland.org/auth' : undefined))
     mockGetProfiles.mockResolvedValue([{ type: 'email' }, { type: 'google' }])
     mockUnlinkProfile.mockResolvedValue(undefined)
+    mockGetMagicDidToken.mockResolvedValue('did-token-abc')
+    mockDeleteMagicAccount.mockResolvedValue(undefined)
     jest.spyOn(console, 'error').mockImplementation(() => undefined)
   })
 
@@ -107,6 +122,13 @@ describe('DeleteAccountConfirmModal', () => {
   const renderModal = (address: string | undefined = ADDRESS) =>
     render(<DeleteAccountConfirmModal open address={address} onClose={onClose} />)
 
+  const confirmAndDelete = async () => {
+    fireEvent.change(screen.getByRole('textbox'), { target: { value: 'DELETE' } })
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: 'account.delete.modal.delete' }))
+    })
+  }
+
   it('should not render its content when closed', () => {
     render(<DeleteAccountConfirmModal open={false} address={ADDRESS} onClose={onClose} />)
 
@@ -129,10 +151,7 @@ describe('DeleteAccountConfirmModal', () => {
   it('should unlink every profile and redirect to login when confirmed', async () => {
     renderModal()
 
-    fireEvent.change(screen.getByRole('textbox'), { target: { value: 'DELETE' } })
-    await act(async () => {
-      fireEvent.click(screen.getByRole('button', { name: 'account.delete.modal.delete' }))
-    })
+    await confirmAndDelete()
 
     await waitFor(() => expect(replaceMock).toHaveBeenCalledTimes(1))
 
@@ -149,10 +168,7 @@ describe('DeleteAccountConfirmModal', () => {
     mockUnlinkProfile.mockRejectedValueOnce(new Error('boom'))
     renderModal()
 
-    fireEvent.change(screen.getByRole('textbox'), { target: { value: 'DELETE' } })
-    await act(async () => {
-      fireEvent.click(screen.getByRole('button', { name: 'account.delete.modal.delete' }))
-    })
+    await confirmAndDelete()
 
     await waitFor(() => expect(screen.getByRole('button', { name: 'account.delete.modal.delete' })).toBeEnabled())
     expect(screen.getByText('account.delete.modal.generic_error')).toBeInTheDocument()
@@ -168,12 +184,30 @@ describe('DeleteAccountConfirmModal', () => {
     expect(mockGetProfiles).not.toHaveBeenCalled()
   })
 
-  const confirmAndDelete = async () => {
-    fireEvent.change(screen.getByRole('textbox'), { target: { value: 'DELETE' } })
-    await act(async () => {
-      fireEvent.click(screen.getByRole('button', { name: 'account.delete.modal.delete' }))
-    })
-  }
+  it('should delete via the auth-server with a fresh DID token for a Magic account', async () => {
+    render(<DeleteAccountConfirmModal open address={ADDRESS} isMagic onClose={onClose} />)
+
+    await confirmAndDelete()
+
+    await waitFor(() => expect(replaceMock).toHaveBeenCalledTimes(1))
+
+    expect(mockGetMagicDidToken).toHaveBeenCalledTimes(1)
+    expect(mockDeleteMagicAccount).toHaveBeenCalledWith(mockIdentity, 'did-token-abc')
+    expect(mockGetProfiles).not.toHaveBeenCalled()
+    expect(mockClearIdentity).toHaveBeenCalledWith(ADDRESS)
+    expect(mockDisconnect).toHaveBeenCalledTimes(1)
+  })
+
+  it('should surface a generic error and not redirect when Magic deletion fails', async () => {
+    mockDeleteMagicAccount.mockRejectedValueOnce(new Error('boom'))
+    render(<DeleteAccountConfirmModal open address={ADDRESS} isMagic onClose={onClose} />)
+
+    await confirmAndDelete()
+
+    await waitFor(() => expect(screen.getByRole('button', { name: 'account.delete.modal.delete' })).toBeEnabled())
+    expect(screen.getByText('account.delete.modal.generic_error')).toBeInTheDocument()
+    expect(replaceMock).not.toHaveBeenCalled()
+  })
 
   describe('when the account has thirdweb data in web storage', () => {
     beforeEach(() => {

src/components/account/DeleteAccount/DeleteAccountConfirmModal/DeleteAccountConfirmModal.tsx

@@ -7,7 +7,10 @@ import { getProfiles, unlinkProfile } from 'thirdweb/wallets/in-app'
 import { localStorageClearIdentity } from '@dcl/single-sign-on-client'
 import { getEnv } from '../../../../config/env'
 import { useFormatMessage } from '../../../../hooks/adapters/useFormatMessage'
+import { useAuthIdentity } from '../../../../hooks/useAuthIdentity'
 import { useWalletAddress } from '../../../../hooks/useWalletAddress'
+import { deleteMagicAccount } from '../../../../lib/accountDeletion'
+import { getMagicDidToken } from '../../../../lib/magic'
 import { getThirdwebClient } from '../../../../lib/thirdweb'
 import { DeleteAccountConfirmModalProps } from './DeleteAccountConfirmModal.types'
 import {
@@ -71,52 +74,57 @@ async function deleteThirdwebAccount() {
  * clean up local storage. Since this modal is not rendered inside a
  * ThirdwebProvider, we clear thirdweb's local data manually.
  */
-async function clearLocalSession(address: string, disconnect: () => void) {
+async function clearLocalSession(address: string, disconnect: () => void, isMagic: boolean) {
   // Clear the Decentraland SSO identity for the connected address.
   localStorageClearIdentity(address)
 
-  // Clear thirdweb session data from localStorage (auth cookies, device shares, wallet user id).
-  Object.keys(localStorage)
-    .filter(key => key.startsWith('thirdweb'))
-    .forEach(key => localStorage.removeItem(key))
-
-  // Clear thirdweb session data from sessionStorage.
-  Object.keys(sessionStorage)
-    .filter(key => key.startsWith('thirdweb'))
-    .forEach(key => sessionStorage.removeItem(key))
-
-  // Clear thirdweb IndexedDB databases (device shares, wallet encryption keys).
-  // indexedDB.deleteDatabase() returns an IDBOpenDBRequest, not a Promise, so we
-  // wrap each call to await completion before redirecting.
-  if (typeof indexedDB !== 'undefined' && typeof indexedDB.databases === 'function') {
-    try {
-      const databases = await indexedDB.databases()
-      await Promise.all(
-        databases
-          .filter(db => db.name?.includes('thirdweb'))
-          .map(
-            db =>
-              new Promise<void>((resolve, reject) => {
-                if (!db.name) return resolve()
-                const request = indexedDB.deleteDatabase(db.name)
-                request.onsuccess = () => resolve()
-                request.onerror = () => reject(request.error)
-              })
-          )
-      )
-    } catch {
-      // Best-effort: not all browsers support indexedDB.databases().
+  // Magic keeps no client-side wallet data beyond the SSO identity and the email pointer that
+  // `disconnect()` clears below, so the thirdweb-specific storage sweep is skipped for it.
+  if (!isMagic) {
+    // Clear thirdweb session data from localStorage (auth cookies, device shares, wallet user id).
+    Object.keys(localStorage)
+      .filter(key => key.startsWith('thirdweb'))
+      .forEach(key => localStorage.removeItem(key))
+
+    // Clear thirdweb session data from sessionStorage.
+    Object.keys(sessionStorage)
+      .filter(key => key.startsWith('thirdweb'))
+      .forEach(key => sessionStorage.removeItem(key))
+
+    // Clear thirdweb IndexedDB databases (device shares, wallet encryption keys).
+    // indexedDB.deleteDatabase() returns an IDBOpenDBRequest, not a Promise, so we
+    // wrap each call to await completion before redirecting.
+    if (typeof indexedDB !== 'undefined' && typeof indexedDB.databases === 'function') {
+      try {
+        const databases = await indexedDB.databases()
+        await Promise.all(
+          databases
+            .filter(db => db.name?.includes('thirdweb'))
+            .map(
+              db =>
+                new Promise<void>((resolve, reject) => {
+                  if (!db.name) return resolve()
+                  const request = indexedDB.deleteDatabase(db.name)
+                  request.onsuccess = () => resolve()
+                  request.onerror = () => reject(request.error)
+                })
+            )
+        )
+      } catch {
+        // Best-effort: not all browsers support indexedDB.databases().
+      }
     }
   }
 
   // Drop the sites wallet pointer + SSO/connect keys (replaces decentraland-connect's
-  // connection.disconnect() — sites has no decentraland-connect).
+  // connection.disconnect() — sites has no decentraland-connect). Also clears the Magic email pointer.
   disconnect()
 }
 
-const DeleteAccountConfirmModal = ({ open, address, onClose }: DeleteAccountConfirmModalProps) => {
+const DeleteAccountConfirmModal = ({ open, address, isMagic = false, onClose }: DeleteAccountConfirmModalProps) => {
   const t = useFormatMessage()
   const { disconnect } = useWalletAddress()
+  const { identity } = useAuthIdentity()
   const [isLoading, setIsLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [confirmationText, setConfirmationText] = useState('')
@@ -132,7 +140,15 @@ const DeleteAccountConfirmModal = ({ open, address, onClose }: DeleteAccountConf
     setError(null)
 
     try {
-      await deleteThirdwebAccount()
+      if (isMagic) {
+        // Magic accounts are deleted server-side: mint a fresh DID token and call the auth-server.
+        if (!identity) throw new Error('Missing Decentraland identity for the connected account')
+        const didToken = await getMagicDidToken()
+        await deleteMagicAccount(identity, didToken)
+      } else {
+        // thirdweb in-app wallets are deleted client-side via the SDK.
+        await deleteThirdwebAccount()
+      }
     } catch (deletionError) {
       // Log the raw error; surface only a generic message to the user.
       console.error('Account deletion failed:', deletionError)
@@ -145,15 +161,15 @@ const DeleteAccountConfirmModal = ({ open, address, onClose }: DeleteAccountConf
     // Past the point of no return: always clear local session and redirect,
     // even if individual cleanup steps fail.
     try {
-      await clearLocalSession(address, disconnect)
+      await clearLocalSession(address, disconnect, isMagic)
     } catch (cleanupError) {
       console.error('Local session cleanup failed:', cleanupError)
     }
 
     // Redirect to the login page; a full page reload destroys all in-memory state.
     const authUrl = getEnv('AUTH_URL') ?? ''
     window.location.replace(`${authUrl}/login?redirectTo=${encodeURIComponent(window.location.pathname)}`)
-  }, [address, disconnect, isConfirmed, t])
+  }, [address, disconnect, identity, isConfirmed, isMagic, t])
 
   // Prevent dismissal via ESC or backdrop click while deletion is in flight.
   const canDismiss = !isLoading

src/components/account/DeleteAccount/DeleteAccountConfirmModal/DeleteAccountConfirmModal.types.ts

@@ -1,6 +1,8 @@
 export interface DeleteAccountConfirmModalProps {
   open: boolean
-  /** The thirdweb in-app wallet address whose account will be deleted. */
+  /** The wallet address whose account will be deleted. */
   address?: string
+  /** Whether the connected account is a Magic login (deleted via the auth-server) instead of thirdweb. */
+  isMagic?: boolean
   onClose: () => void
 }

src/config/env/dev.json

@@ -1,7 +1,8 @@
 {
   "ONBOARDING_URL": "/auth/login/?newUser&redirectTo=%2Fdownload",
   "AUTH_URL": "/auth",
-  "MAGIC_API_KEY": "pk_live_212568025B158355",
+  "MAGIC_API_KEY": "pk_live_CE856A4938B36648",
+  "AUTH_SERVER_URL": "https://auth-api.decentraland.zone",
   "THIRDWEB_CLIENT_ID": "e1adce863fe287bb6cf0e3fd90bdb77f",
   "PEER_URL": "https://peer.decentraland.zone",
   "WALLET_CONNECT_PROJECT_ID": "61570c542c2d66c659492e5b24a41522",

src/config/env/prd.json

@@ -2,6 +2,7 @@
   "ONBOARDING_URL": "https://decentraland.org/auth/login/?newUser&redirectTo=https%3A%2F%2Fdecentraland.org%2Fdownload",
   "AUTH_URL": "https://decentraland.org/auth",
   "MAGIC_API_KEY": "pk_live_212568025B158355",
+  "AUTH_SERVER_URL": "https://auth-api.decentraland.org",
   "THIRDWEB_CLIENT_ID": "e1adce863fe287bb6cf0e3fd90bdb77f",
   "PEER_URL": "https://peer.decentraland.org",
   "WALLET_CONNECT_PROJECT_ID": "61570c542c2d66c659492e5b24a41522",

src/config/env/stg.json

@@ -2,6 +2,7 @@
   "ONBOARDING_URL": "https://decentraland.org/auth/login/?newUser&redirectTo=https%3A%2F%2Fdecentraland.org%2Fdownload",
   "AUTH_URL": "https://decentraland.today/auth",
   "MAGIC_API_KEY": "pk_live_CE856A4938B36648",
+  "AUTH_SERVER_URL": "https://auth-api.decentraland.today",
   "THIRDWEB_CLIENT_ID": "e1adce863fe287bb6cf0e3fd90bdb77f",
   "PEER_URL": "https://peer.decentraland.zone",
   "WALLET_CONNECT_PROJECT_ID": "61570c542c2d66c659492e5b24a41522",