ethagent 1.1.1 → 2.0.0

package/src/identity/hub/flows/restore/RestoreFlow.tsx

@@ -0,0 +1,324 @@
+import React from 'react'
+import { Text } from 'ink'
+import { Surface } from '../../../../ui/Surface.js'
+import { Select } from '../../../../ui/Select.js'
+import { TextInput } from '../../../../ui/TextInput.js'
+import { theme } from '../../../../ui/theme.js'
+import { normalizeErc8004RegistryConfig } from '../../../registry/erc8004.js'
+import {
+  isCurrentAgentCandidate,
+  tokenCandidateHint,
+  tokenCandidateSelectLabel,
+} from '../../model/identity.js'
+import { networkLabel } from '../../model/network.js'
+import { shortAddress } from '../../model/format.js'
+import { registryConfigFromConfig } from '../../../registry/registryConfig.js'
+import type { Step } from '../../identityHubReducer.js'
+import { WalletApprovalScreen } from '../../components/WalletApprovalScreen.js'
+import { BusyScreen } from '../../components/BusyScreen.js'
+import type { BrowserWalletReady } from '../../../wallet/browserWallet.js'
+import type { EthagentConfig } from '../../../../storage/config.js'
+import { restoreSignatureRequestForStep } from '../../effects/restore/index.js'
+import type { RestoreProgress } from '../../effects/types.js'
+
+type RestoreStep = Exclude<Extract<Step, { kind: `restore-${string}` }>, { kind: 'restore-wallet' | 'restore-network' }>
+
+type RestoreFlowProps = {
+  step: RestoreStep
+  config?: EthagentConfig
+  walletSession: BrowserWalletReady | null
+  restoreProgress: RestoreProgress | null
+  onRestoreRegistrySubmit: (value: string) => void
+  onRetryDiscovery: () => void
+  onTokenSelect: (tokenId: string) => void
+  onEnsSubmit: (value: string) => void
+  onTokenIdSubmit: (value: string) => void
+  onPickRecoveryMethod: (choice: 'ens' | 'token-id') => void
+  onBack: () => void
+}
+
+const footerHint = (hint: string) => <Text color={theme.dim}>{hint}</Text>
+
+export const RestoreFlow: React.FC<RestoreFlowProps> = ({
+  step,
+  config,
+  walletSession,
+  restoreProgress,
+  onRestoreRegistrySubmit,
+  onRetryDiscovery,
+  onTokenSelect,
+  onEnsSubmit,
+  onTokenIdSubmit,
+  onPickRecoveryMethod,
+  onBack,
+}) => {
+  const purpose = 'purpose' in step ? step.purpose ?? 'restore' : 'restore'
+  const isSwitch = purpose === 'switch'
+
+  if (step.kind === 'restore-registry') {
+    const resolution = registryConfigFromConfig(config)
+    return (
+      <Surface
+        title={`${resolution.network ? networkLabel(resolution.network).charAt(0).toUpperCase() + networkLabel(resolution.network).slice(1) : ''} Agent Registry`}
+        subtitle={step.error ? `Lookup failed: ${step.error}` : 'Paste the agent registry address for this network.'}
+        footer={footerHint('enter discover · esc back')}
+      >
+        <Text color={theme.dim}>RPC defaults to {resolution.defaultRpcUrl}</Text>
+        <TextInput
+          initialValue={config?.erc8004?.identityRegistryAddress ?? ''}
+          placeholder="0x registry address"
+          validate={value => {
+            try {
+              normalizeErc8004RegistryConfig({
+                chainId: resolution.chainId,
+                rpcUrl: resolution.config?.rpcUrl ?? resolution.defaultRpcUrl,
+                identityRegistryAddress: value.trim(),
+              })
+              return null
+            } catch (err: unknown) {
+              return (err as Error).message
+            }
+          }}
+          onSubmit={onRestoreRegistrySubmit}
+          onCancel={onBack}
+        />
+      </Surface>
+    )
+  }
+
+  if (step.kind === 'restore-discovering') {
+    return (
+      <BusyScreen
+        title={isSwitch ? 'Finding Agents' : 'Finding Agents'}
+        subtitle={step.ownerHandle}
+        label="checking tokens this wallet directly owns..."
+        onCancel={onBack}
+      />
+    )
+  }
+
+  if (step.kind === 'restore-recovery-input') {
+    return (
+      <Surface
+        title={isSwitch ? 'Load Agent' : 'Restore Agent'}
+        subtitle="The connected wallet doesn't directly own an agent token on this network."
+        footer={footerHint('enter select · esc back')}
+      >
+        <Text color={theme.dim}>If this wallet is an approved operator wallet, choose how to find the agent token.</Text>
+        <Select<'ens' | 'token-id' | 'back'>
+          options={[
+            { value: 'ens', role: 'section', label: 'Recovery Key' },
+            { value: 'ens', label: 'Enter ENS Name', hint: 'Resolve the agent via its ENS subdomain (e.g. agent.example.eth)' },
+            { value: 'token-id', label: 'Enter Token ID', hint: 'Look up the agent directly by ERC-8004 token ID (e.g. 45744)' },
+            { value: 'back', role: 'section', label: 'Navigation' },
+            { value: 'back', label: 'Back', hint: 'Pick a different network', role: 'utility' },
+          ]}
+          hintLayout="inline"
+          onSubmit={value => value === 'back' ? onBack() : onPickRecoveryMethod(value)}
+          onCancel={onBack}
+        />
+      </Surface>
+    )
+  }
+
+  if (step.kind === 'restore-ens-input') {
+    return (
+      <Surface
+        title={isSwitch ? 'Load Agent' : 'Restore Agent'}
+        subtitle="Enter the agent's ENS name to decrypt with an authorized operator wallet."
+        footer={footerHint(step.busy ? 'Looking up...' : 'enter continue · esc back')}
+      >
+        <Text color={theme.dim}>The full agent subdomain, e.g. agent.example.eth.</Text>
+        <TextInput
+          placeholder="agent.example.eth"
+          onSubmit={value => onEnsSubmit(value.trim())}
+          onCancel={onBack}
+        />
+        {step.error ? <Text color={theme.accentError}>{step.error}</Text> : null}
+      </Surface>
+    )
+  }
+
+  if (step.kind === 'restore-token-id-input') {
+    return (
+      <Surface
+        title={isSwitch ? 'Load Agent' : 'Restore Agent'}
+        subtitle={`Enter the ERC-8004 token ID on ${networkLabelForRegistry(step.registry)}.`}
+        footer={footerHint(step.busy ? 'Looking up...' : 'enter continue · esc back')}
+      >
+        <Text color={theme.dim}>The integer token ID assigned at mint (for example, 45744). Store it alongside your wallet seed so the agent stays recoverable even if its ENS record is cleared.</Text>
+        <TextInput
+          placeholder="45744"
+          onSubmit={value => onTokenIdSubmit(value.trim())}
+          onCancel={onBack}
+        />
+        {step.error ? <Text color={theme.accentError}>{step.error}</Text> : null}
+      </Surface>
+    )
+  }
+
+  if (step.kind === 'restore-not-found') {
+    const view = restoreNotFoundView(step)
+    return (
+      <Surface
+        title={view.title}
+        subtitle={view.subtitle}
+        footer={footerHint('enter continue · esc back')}
+      >
+        <Text color={theme.dim}>{view.detail}</Text>
+        <Select<'retry' | 'network'>
+          options={[
+            { value: 'retry', role: 'section', label: 'Next' },
+            { value: 'retry', label: 'Retry Search', hint: 'Search token ownership and ERC-8004 restore access again' },
+            { value: 'network', label: 'Choose Network', hint: 'Search a different ERC-8004 network' },
+          ]}
+          hintLayout="inline"
+          onSubmit={choice => {
+            if (choice === 'retry') onRetryDiscovery()
+            else onBack()
+          }}
+          onCancel={onBack}
+        />
+      </Surface>
+    )
+  }
+
+  if (step.kind === 'restore-select-token') {
+    return (
+      <Surface
+        title={isSwitch ? 'Load an Agent' : 'Choose Your Agent'}
+        subtitle={step.ownerHandle}
+        footer={footerHint('enter select · esc back')}
+      >
+        <Select<string>
+          options={[
+            { value: 'section:available-agents', role: 'section', label: 'Available Agents' },
+            ...step.candidates.map(candidate => {
+              const current = isSwitch && isCurrentAgentCandidate(config?.identity, candidate)
+              return {
+                value: candidate.agentId.toString(),
+                label: tokenCandidateSelectLabel(candidate, current),
+                hint: tokenCandidateHint(candidate),
+              }
+            }),
+            { value: '__ens__', role: 'section', label: 'Recovery Key' },
+            { value: '__ens__', label: 'Enter ENS Name', hint: 'Resolve the agent via its ENS subdomain (e.g. agent.example.eth)' },
+            { value: '__token-id__', label: 'Enter Token ID', hint: 'Look up the agent directly by ERC-8004 token ID (e.g. 45744)' },
+            { value: '__back__', role: 'section', label: 'Navigation' },
+            { value: '__back__', label: 'Back', hint: 'Return to the previous step', role: 'utility' },
+          ]}
+          hintLayout="inline"
+          onSubmit={value => {
+            if (value === '__ens__') onPickRecoveryMethod('ens')
+            else if (value === '__token-id__') onPickRecoveryMethod('token-id')
+            else if (value === '__back__') onBack()
+            else onTokenSelect(value)
+          }}
+          onCancel={onBack}
+        />
+      </Surface>
+    )
+  }
+
+  if (step.kind === 'restore-fetching') {
+    return (
+      <BusyScreen
+        title={isSwitch ? 'Loading Agent' : 'Restoring Your Agent'}
+        subtitle="IPFS"
+        label="opening encrypted state from IPFS..."
+        onCancel={onBack}
+      />
+    )
+  }
+
+  if (step.kind === 'restore-authorizing') {
+    const view = restoreAuthorizationView(step, isSwitch)
+    if (restoreProgress) {
+      return (
+        <BusyScreen
+          title={view.progressTitle}
+          subtitle="Wallet Signature Received"
+          label={restoreProgress.label}
+        />
+      )
+    }
+    return (
+      <WalletApprovalScreen
+        title={view.title}
+        subtitle={view.subtitle}
+        walletSession={walletSession}
+        label={view.label}
+        onCancel={onBack}
+      />
+    )
+  }
+
+  return null
+}
+
+function networkLabelForRegistry(registry: { chainId: number }): string {
+  const network = registry.chainId === 1 ? 'mainnet'
+    : registry.chainId === 8453 ? 'base'
+      : undefined
+  return network ? networkLabel(network) : `chain ${registry.chainId}`
+}
+
+function restoreNotFoundView(
+  step: Extract<RestoreStep, { kind: 'restore-not-found' }>,
+): { title: string; subtitle: string; detail: string } {
+  const network = networkLabelForRegistry(step.registry)
+  const address = step.requesterAddress ?? step.ownerHandle
+  if (step.reason === 'cancelled') {
+    return {
+      title: 'Search Cancelled',
+      subtitle: `Stopped scanning ${network} for ${shortAddress(address)}.`,
+      detail: 'No restore target was selected. Retry to keep searching, or choose a different network.',
+    }
+  }
+  if (step.reason === 'no-owner-or-operator') {
+    return {
+      title: 'No Agent Access Found',
+      subtitle: `${shortAddress(address)} has no ERC-8004 agent access on ${network}.`,
+      detail: step.requesterAddress
+        ? 'Checked token ownership and indexed ERC-8004 restore metadata. This wallet owns no agent token and is not listed as an operator wallet.'
+        : 'Checked token ownership for this name. Operator-wallet metadata lookup requires a wallet address.',
+    }
+  }
+  return {
+    title: 'Agent Search Incomplete',
+    subtitle: `ERC-8004 ownership or restore metadata could not be checked completely on ${network}.`,
+    detail: 'No restore target was selected. Retry the search or choose another network.',
+  }
+}
+
+function restoreAuthorizationView(
+  step: Extract<RestoreStep, { kind: 'restore-authorizing' }>,
+  isSwitch: boolean,
+): { title: string; subtitle: string; label: string; progressTitle: string } {
+  const owner = step.candidate.ownerAddress
+  let requester: string | undefined = step.requesterAddress
+  let role: 'owner-wallet' | 'operator-wallet' = 'owner-wallet'
+  try {
+    const request = restoreSignatureRequestForStep(step)
+    requester = request.expectedAccount
+    role = request.role
+  } catch {
+    requester = step.requesterAddress
+  }
+
+  if (role === 'operator-wallet' && requester) {
+    return {
+      title: 'Operator Wallet Required',
+      subtitle: `Sign with the operator wallet ${shortAddress(requester)} to decrypt this snapshot.`,
+      label: 'waiting for operator wallet signature...',
+      progressTitle: isSwitch ? 'Loading Agent' : 'Restoring Your Agent',
+    }
+  }
+
+  return {
+    title: 'Owner Wallet Required',
+    subtitle: `This encrypted snapshot requires the owner wallet ${shortAddress(owner)}.`,
+    label: 'waiting for owner wallet signature...',
+    progressTitle: isSwitch ? 'Loading Agent' : 'Restoring Your Agent',
+  }
+}

package/src/identity/hub/flows/restore/useRestoreFlowEffects.ts

@@ -0,0 +1,77 @@
+import { useEffect } from 'react'
+import type { EthagentConfig } from '../../../../storage/config.js'
+import {
+  runRestoreAuthorize,
+  runRestoreConnectWallet,
+  runRestoreDiscover,
+  runRestoreFetch,
+} from '../../effects/restore/index.js'
+import type { EffectCallbacks } from '../../effects/types.js'
+import type { Step } from '../../identityHubReducer.js'
+
+const MIN_BUSY_ERROR_MS = 2000
+
+function waitForMinimumBusyTime(startedAt: number): Promise<void> {
+  const elapsed = Date.now() - startedAt
+  if (elapsed >= MIN_BUSY_ERROR_MS) return Promise.resolve()
+  return new Promise(resolve => setTimeout(resolve, MIN_BUSY_ERROR_MS - elapsed))
+}
+
+type RestoreFlowEffectsArgs = {
+  step: Step
+  config: EthagentConfig | undefined
+  callbacks: EffectCallbacks
+  handleStepError: (err: unknown, backStep: Step, softCancel?: Step) => void
+}
+
+export function useRestoreFlowEffects(args: RestoreFlowEffectsArgs): void {
+  const { step, config, callbacks, handleStepError } = args
+
+  useEffect(() => {
+    if (step.kind !== 'restore-discovering') return
+    let cancelled = false
+    const startedAt = Date.now()
+    const abortController = new AbortController()
+    const stepWithSignal = { ...step, abortSignal: abortController.signal }
+    runRestoreDiscover(stepWithSignal, config, callbacks)
+      .catch(async (err: unknown) => {
+        await waitForMinimumBusyTime(startedAt)
+        if (cancelled) return
+        handleStepError(err, { kind: 'restore-network', ownerHandle: step.ownerHandle, purpose: step.purpose })
+      })
+    return () => {
+      cancelled = true
+      abortController.abort()
+    }
+  }, [step])
+
+  useEffect(() => {
+    if (step.kind !== 'restore-wallet') return
+    let cancelled = false
+    runRestoreConnectWallet(step, callbacks)
+      .catch((err: unknown) => { if (!cancelled) handleStepError(err, { kind: 'menu' }) })
+    return () => { cancelled = true }
+  }, [step])
+
+  useEffect(() => {
+    if (step.kind !== 'restore-fetching') return
+    let cancelled = false
+    const startedAt = Date.now()
+    runRestoreFetch(step, callbacks)
+      .catch(async (err: unknown) => {
+        await waitForMinimumBusyTime(startedAt)
+        if (!cancelled) handleStepError(err, { kind: 'restore-network', ownerHandle: step.requesterAddress ?? step.candidate.ownerAddress, purpose: step.purpose })
+      })
+    return () => { cancelled = true }
+  }, [step])
+
+  useEffect(() => {
+    if (step.kind !== 'restore-authorizing') return
+    let cancelled = false
+    runRestoreAuthorize(step, callbacks)
+      .catch((err: unknown) => {
+        if (!cancelled) handleStepError(err, { kind: 'restore-network', ownerHandle: step.requesterAddress ?? step.candidate.ownerAddress, purpose: step.purpose })
+      })
+    return () => { cancelled = true }
+  }, [step])
+}

package/src/identity/hub/{screens → flows/settings}/StorageCredentialScreen.tsx

@@ -1,20 +1,17 @@
 import React from 'react'
 import { Box, Text } from 'ink'
-import { Surface } from '../../../ui/Surface.js'
-import { Select } from '../../../ui/Select.js'
-import { TextInput } from '../../../ui/TextInput.js'
-import { theme } from '../../../ui/theme.js'
-import { extractPinataJwt } from '../../storage/ipfs.js'
-import type { Step } from '../identityHubReducer.js'
-
-const PINATA_API_KEYS_URL = 'https://app.pinata.cloud/developers/api-keys'
+import { Surface } from '../../../../ui/Surface.js'
+import { Select } from '../../../../ui/Select.js'
+import { theme } from '../../../../ui/theme.js'
+import { PinataJwtInput } from '../../components/PinataJwtInput.js'
+import type { Step } from '../../identityHubReducer.js'
 
 type StorageCredentialAction = 'edit' | 'forget' | 'back'
 
 export const STORAGE_CREDENTIAL_FORGET_COPY = [
   'removes the saved IPFS storage token from this machine.',
   'existing pinned IPFS backups are not deleted.',
-  'ethagent cannot pin new encrypted state with that account until you save a token again.',
+  'new encrypted snapshots cannot be pinned with that account until you save a token again.',
   'agent identity and sessions stay on this machine.',
 ] as const
 
@@ -41,39 +38,21 @@ export const StorageCredentialScreen: React.FC<StorageCredentialScreenProps> = (
 }) => {
   if (step.kind === 'storage-credential-input') {
     return (
-      <Surface
-        title="IPFS Storage Credential"
-        subtitle={step.error ?? 'Save the token ethagent uses to pin encrypted state.'}
+      <PinataJwtInput
+        inputKey="storage-credential-input"
+        title="IPFS Storage"
+        subtitle={step.error ?? 'Save the Pinata JWT used to pin encrypted snapshots.'}
         footer={footer}
-      >
-        <Text>
-          <Text color={theme.dim}>Paste your Pinata JWT. Get one at </Text>
-          <Text color={theme.accentPrimary} underline>{PINATA_API_KEYS_URL}</Text>
-        </Text>
-        <Text color={theme.dim}>Stored encrypted on this device. Used only for IPFS pinning.</Text>
-        <TextInput
-          key="storage-credential-input"
-          isSecret
-          placeholder="Pinata JWT"
-          validate={v => {
-            try {
-              extractPinataJwt(v)
-              return null
-            } catch (err: unknown) {
-              return (err as Error).message
-            }
-          }}
-          onSubmit={onSubmit}
-          onCancel={onCancel}
-        />
-      </Surface>
+        onSubmit={onSubmit}
+        onCancel={onCancel}
+      />
     )
   }
 
   if (step.kind === 'storage-credential-forget-confirm') {
     return (
       <Surface
-        title="Forget IPFS Storage Credential?"
+        title="Forget IPFS Storage?"
         subtitle="This only removes the local token used for pinning."
         footer={footer}
       >
@@ -82,12 +61,15 @@ export const StorageCredentialScreen: React.FC<StorageCredentialScreenProps> = (
             <Text key={line} color={theme.dim}>- {line}</Text>
           ))}
         </Box>
+        <Box marginTop={1}>
+          <Text color={theme.accentPeriwinkle}>Remove the token from this machine?</Text>
+        </Box>
         <Box marginTop={1}>
           <Select<StorageCredentialAction>
             options={[
-              { value: 'forget', role: 'section', prefix: '--', label: 'Credential' },
+              { value: 'forget', role: 'section', label: 'Credential' },
               { value: 'forget', label: 'Forget Credential', hint: 'Remove local IPFS pinning token' },
-              { value: 'back', role: 'section', prefix: '--', label: 'Navigation' },
+              { value: 'back', role: 'section', label: 'Navigation' },
               { value: 'back', label: 'Keep Credential', hint: 'Return without changing storage access', role: 'utility' },
             ]}
             hintLayout="inline"
@@ -101,18 +83,18 @@ export const StorageCredentialScreen: React.FC<StorageCredentialScreenProps> = (
 
   return (
     <Surface
-      title="IPFS Storage Credential"
-      subtitle="Controls whether ethagent can pin encrypted state from this machine."
+      title="IPFS Storage"
+      subtitle="Manage the credential used to pin encrypted snapshots from this machine."
       footer={footer}
     >
       <Box marginTop={1}>
         <Select<StorageCredentialAction>
           options={[
-            { value: 'edit', role: 'section', prefix: '--', label: 'Credential' },
+            { value: 'edit', role: 'section', label: 'Credential' },
             { value: 'edit', label: hasCredential ? 'Replace Credential' : 'Save Credential', hint: 'Store Pinata JWT for IPFS pinning' },
-            { value: 'forget', label: 'Forget Credential', hint: 'Remove the local pinning token; existing pins remain', disabled: !hasCredential },
-            { value: 'back', role: 'section', prefix: '--', label: 'Navigation' },
-            { value: 'back', label: 'Back To Identity Hub', hint: 'Return without changing storage access', role: 'utility' },
+            { value: 'forget', label: 'Forget Credential', hint: 'Remove the local pinning token. Existing pins remain', disabled: !hasCredential },
+            { value: 'back', role: 'section', label: 'Navigation' },
+            { value: 'back', label: 'Back', hint: 'Return to Identity Hub menu', role: 'utility' },
           ]}
           hintLayout="inline"
           onSubmit={choice => {

package/src/identity/hub/flows/token-transfer/IdentityHubTokenTransferFlow.tsx

@@ -0,0 +1,162 @@
+import React from 'react'
+import type { BrowserWalletReady } from '../../../wallet/browserWallet.js'
+import { supportedErc8004ChainForId } from '../../../registry/erc8004.js'
+import {
+  runTokenTransferStorageSubmit,
+  runTokenTransferTargetSubmit,
+} from '../../effects/token-transfer/runTokenTransfer.js'
+import type {
+  EffectCallbacks,
+  TokenTransferProgress,
+} from '../../effects/types.js'
+import type { Step } from '../../identityHubReducer.js'
+import { BusyScreen } from '../../components/BusyScreen.js'
+import { RebackupStorageScreen } from '../continuity/RebackupStorageScreen.js'
+import {
+  TokenTransferReadyScreen,
+  TokenTransferSigningScreen,
+  TokenTransferTargetScreen,
+} from './TokenTransferScreens.js'
+
+type TokenTransferStep = Extract<Step, {
+  kind:
+    | 'token-transfer-target'
+    | 'token-transfer-resolving'
+    | 'token-transfer-storage'
+    | 'token-transfer-signing'
+    | 'token-transfer-ready'
+}>
+
+type IdentityHubTokenTransferFlowProps = {
+  step: TokenTransferStep
+  callbacks: EffectCallbacks
+  footer: React.ReactNode
+  progress: TokenTransferProgress | null
+  walletSession: BrowserWalletReady | null
+  onSetStep: (step: Step) => void
+  onBack: () => void
+}
+
+export function isTokenTransferStep(step: Step): step is TokenTransferStep {
+  return step.kind === 'token-transfer-target'
+    || step.kind === 'token-transfer-resolving'
+    || step.kind === 'token-transfer-storage'
+    || step.kind === 'token-transfer-signing'
+    || step.kind === 'token-transfer-ready'
+}
+
+export const IdentityHubTokenTransferFlow: React.FC<IdentityHubTokenTransferFlowProps> = ({
+  step,
+  callbacks,
+  footer,
+  progress,
+  walletSession,
+  onSetStep,
+  onBack,
+}) => {
+  const resolveAbortRef = React.useRef<AbortController | null>(null)
+  const tokenNetworkLabel = networkLabelForChainId(step.registry.chainId)
+  const readyBackHint = tokenTransferBackHint(step.returnTo)
+
+  if (step.kind === 'token-transfer-target') {
+    return (
+      <TokenTransferTargetScreen
+        identity={step.identity}
+        tokenNetworkLabel={tokenNetworkLabel}
+        error={step.error}
+        initialValue={step.previousTarget}
+        onSubmit={async value => {
+          resolveAbortRef.current?.abort()
+          const controller = new AbortController()
+          resolveAbortRef.current = controller
+          try {
+            await runTokenTransferTargetSubmit(value, step, callbacks, { signal: controller.signal })
+          } catch (err: unknown) {
+            if (controller.signal.aborted) return
+            onSetStep({ ...step, error: (err as Error).message })
+          } finally {
+            if (resolveAbortRef.current === controller) resolveAbortRef.current = null
+          }
+        }}
+        onBack={onBack}
+      />
+    )
+  }
+
+  if (step.kind === 'token-transfer-resolving') {
+    return (
+      <BusyScreen
+        title="Resolve Receiver Wallet"
+        subtitle={`Resolving ${step.targetHandle} before preparing the transfer snapshot.`}
+        label="checking ens or address..."
+        onCancel={() => {
+          resolveAbortRef.current?.abort()
+          resolveAbortRef.current = null
+          onBack()
+        }}
+      />
+    )
+  }
+
+  if (step.kind === 'token-transfer-storage') {
+    return (
+      <RebackupStorageScreen
+        step={{
+          kind: 'rebackup-storage',
+          identity: step.identity,
+          registry: step.registry,
+          error: step.error,
+          pinataJwt: step.pinataJwt,
+        }}
+        footer={footer}
+        title="Connect IPFS Storage"
+        subtitle="Save a Pinata JWT so ethagent can pin the transfer snapshot to IPFS."
+        onSubmit={async input => {
+          try {
+            await runTokenTransferStorageSubmit(input, step, callbacks)
+          } catch (err: unknown) {
+            onSetStep({ ...step, error: (err as Error).message })
+          }
+        }}
+        onCancel={onBack}
+      />
+    )
+  }
+
+  if (step.kind === 'token-transfer-signing') {
+    return (
+      <TokenTransferSigningScreen
+        identity={step.identity}
+        tokenNetworkLabel={tokenNetworkLabel}
+        targetHandle={step.targetHandle}
+        targetAddress={step.targetAddress}
+        progress={progress}
+        walletSession={walletSession}
+        onCancel={onBack}
+      />
+    )
+  }
+
+  return (
+    <TokenTransferReadyScreen
+      identity={step.identity}
+      tokenNetworkLabel={tokenNetworkLabel}
+      targetHandle={step.targetHandle}
+      targetAddress={step.targetAddress}
+      snapshotCid={step.snapshotCid}
+      txHash={step.txHash}
+      footer={footer}
+      backHint={readyBackHint}
+      onBack={onBack}
+    />
+  )
+}
+
+function networkLabelForChainId(chainId: number): string {
+  return supportedErc8004ChainForId(chainId)?.name ?? `Chain ${chainId}`
+}
+
+function tokenTransferBackHint(returnTo: Step | undefined): string {
+  if (returnTo?.kind === 'edit-profile-ens') return 'Return to ENS setup'
+  return 'Return to Identity Hub menu'
+}