feat: unlock signing request approvals

beeman · beeman · commit 69e43045f4bf · 2026-05-12T20:37:06.000+07:00
Add a request-local unlock flow before signing approvals so locked password and PIN wallets prompt for credentials before resolving a signing request.

Wire the shared approval helper into sign message, sign transaction, sign and send transaction, and sign in request screens while leaving connect requests unchanged.
diff --git a/bun.lock b/bun.lock
diff --git a/packages/feature-request/package.json b/packages/feature-request/package.json
@@ -1,6 +1,7 @@
 {
   "dependencies": {
     "@solana/wallet-standard-features": "catalog:",
+    "@tanstack/react-query": "catalog:",
     "@workspace/background": "workspace:*",
     "@workspace/ui": "workspace:*",
     "react-router": "catalog:"
diff --git a/packages/feature-request/src/data-access/use-request-sign-approval.tsx b/packages/feature-request/src/data-access/use-request-sign-approval.tsx
@@ -0,0 +1,166 @@
+import { useMutation } from '@tanstack/react-query'
+import { getVaultRuntimeService } from '@workspace/background/services/vault'
+import { toastError } from '@workspace/ui/lib/toast-error'
+import type { SyntheticEvent } from 'react'
+import { useRef, useState } from 'react'
+
+export type RequestUnlockMode = 'password' | 'pin' | 'unsecured'
+
+export type RequestSignApproval = {
+  actions: {
+    cancelUnlock(): void
+    changeCredential(value: string): void
+    changeOpen(open: boolean): void
+    submitUnlock(event: SyntheticEvent<HTMLFormElement>): Promise<void>
+  }
+  approve(action: () => Promise<void>): Promise<void>
+  state: {
+    credential: string
+    error: string | null
+    isApproving: boolean
+    isBusy: boolean
+    isChecking: boolean
+    isOpen: boolean
+    isUnlocking: boolean
+    mode: RequestUnlockMode
+  }
+}
+
+export function useRequestSignApproval(): RequestSignApproval {
+  const pendingApprovalRef = useRef<(() => Promise<void>) | null>(null)
+  const [credential, setCredential] = useState('')
+  const [isOpen, setIsOpen] = useState(false)
+  const [mode, setMode] = useState<RequestUnlockMode>('password')
+  const approvalActionMutation = useMutation({
+    mutationFn: async (action: () => Promise<void>) => await runApproval(action),
+  })
+  const approveMutation = useMutation({
+    mutationFn: async (action: () => Promise<void>) => {
+      const vault = getVaultRuntimeService()
+      const isUnlocked = await vault.isActiveWalletUnlocked()
+      if (isUnlocked) {
+        return { action, type: 'approve' as const }
+      }
+
+      const nextMode = await vault.activeWalletProtectionMode()
+      if (nextMode === 'unsecured') {
+        await vault.unlockActiveWallet({ credential: '' })
+        return { action, type: 'approve' as const }
+      }
+
+      return { action, mode: nextMode, type: 'unlock' as const }
+    },
+    onError: (caught) => toastError(caught instanceof Error ? caught.message : `${caught}`),
+  })
+  const unlockMutation = useMutation({
+    mutationFn: async (nextCredential: string) =>
+      await getVaultRuntimeService().unlockActiveWallet({ credential: nextCredential }),
+  })
+  const error = unlockMutation.error
+    ? unlockMutation.error instanceof Error
+      ? unlockMutation.error.message
+      : `${unlockMutation.error}`
+    : null
+  const isApproving = approvalActionMutation.isPending
+  const isChecking = approveMutation.isPending
+  const isUnlocking = unlockMutation.isPending
+  const isBusy = isApproving || isChecking || isUnlocking
+
+  async function approve(action: () => Promise<void>) {
+    if (isBusy) {
+      return
+    }
+
+    approvalActionMutation.reset()
+    approveMutation.reset()
+    unlockMutation.reset()
+    const result = await approveMutation.mutateAsync(action).catch(() => null)
+    if (!result) {
+      return
+    }
+
+    if (result.type === 'approve') {
+      await approvalActionMutation.mutateAsync(result.action).catch(() => {})
+      return
+    }
+
+    pendingApprovalRef.current = result.action
+    setCredential('')
+    setMode(result.mode)
+    setIsOpen(true)
+  }
+
+  function changeCredential(value: string) {
+    setCredential(value)
+    if (!unlockMutation.isPending) {
+      unlockMutation.reset()
+    }
+  }
+
+  function cancelUnlock() {
+    pendingApprovalRef.current = null
+    setCredential('')
+    unlockMutation.reset()
+    setIsOpen(false)
+  }
+
+  function changeOpen(open: boolean) {
+    if (!open) {
+      cancelUnlock()
+    }
+  }
+
+  async function submitUnlock(event: SyntheticEvent<HTMLFormElement>) {
+    event.preventDefault()
+    if (isUnlocking) {
+      return
+    }
+
+    const action = pendingApprovalRef.current
+    if (!action) {
+      cancelUnlock()
+      return
+    }
+
+    try {
+      await unlockMutation.mutateAsync(credential)
+    } catch {
+      return
+    }
+
+    if (pendingApprovalRef.current !== action) {
+      return
+    }
+
+    cancelUnlock()
+    await approvalActionMutation.mutateAsync(action).catch(() => {})
+  }
+
+  return {
+    actions: {
+      cancelUnlock,
+      changeCredential,
+      changeOpen,
+      submitUnlock,
+    },
+    approve,
+    state: {
+      credential,
+      error,
+      isApproving,
+      isBusy,
+      isChecking,
+      isOpen,
+      isUnlocking,
+      mode,
+    },
+  }
+}
+
+async function runApproval(action: () => Promise<void>) {
+  try {
+    await action()
+  } catch (caught) {
+    toastError(caught instanceof Error ? caught.message : `${caught}`)
+  }
+}
diff --git a/packages/feature-request/src/ui/request-ui-sign-and-send-transaction.tsx b/packages/feature-request/src/ui/request-ui-sign-and-send-transaction.tsx
@@ -3,24 +3,34 @@ import type { SolanaSignAndSendTransactionInput } from '@solana/wallet-standard-
 import { getRequestService } from '@workspace/background/services/request'
 import { getSignService } from '@workspace/background/services/sign'
 import { Button } from '@workspace/ui/components/button'
+import { useRequestSignApproval } from '../data-access/use-request-sign-approval.tsx'
+import { RequestUiUnlockDialog } from './request-ui-unlock-dialog.tsx'
 
 export interface RequestSignAndSendTransactionProps {
   data: SolanaSignAndSendTransactionInput[]
 }
 
 export function RequestUiSignAndSendTransaction({ data }: RequestSignAndSendTransactionProps) {
+  const approval = useRequestSignApproval()
+
   return (
     <div className="flex flex-col gap-4 p-4">
       <h1 className="text-center font-bold text-2xl">Sign and Send Transaction</h1>
       <div className="flex flex-col gap-2">
         <Button
-          onClick={async () => await getRequestService().resolve(await getSignService().signAndSendTransaction(data))}
+          disabled={approval.state.isBusy}
+          onClick={() =>
+            approval.approve(
+              async () => await getRequestService().resolve(await getSignService().signAndSendTransaction(data)),
+            )
+          }
           variant="destructive"
         >
-          Approve
+          {approval.state.isChecking ? 'Checking...' : approval.state.isApproving ? 'Approving...' : 'Approve'}
         </Button>
         <Button onClick={async () => await getRequestService().reject()}>Reject</Button>
       </div>
+      <RequestUiUnlockDialog approval={approval} />
     </div>
   )
 }
diff --git a/packages/feature-request/src/ui/request-ui-sign-in.tsx b/packages/feature-request/src/ui/request-ui-sign-in.tsx
@@ -3,24 +3,32 @@ import type { SolanaSignInInput } from '@solana/wallet-standard-features'
 import { getRequestService } from '@workspace/background/services/request'
 import { getSignService } from '@workspace/background/services/sign'
 import { Button } from '@workspace/ui/components/button'
+import { useRequestSignApproval } from '../data-access/use-request-sign-approval.tsx'
+import { RequestUiUnlockDialog } from './request-ui-unlock-dialog.tsx'
 
 export interface RequestSignInProps {
   data: SolanaSignInInput[]
 }
 
 export function RequestUiSignIn({ data }: RequestSignInProps) {
+  const approval = useRequestSignApproval()
+
   return (
     <div className="flex flex-col gap-4 p-4">
       <h1 className="text-center font-bold text-2xl">Sign In</h1>
       <div className="flex flex-col gap-2">
         <Button
-          onClick={async () => await getRequestService().resolve(await getSignService().signIn(data))}
+          disabled={approval.state.isBusy}
+          onClick={() =>
+            approval.approve(async () => await getRequestService().resolve(await getSignService().signIn(data)))
+          }
           variant="destructive"
         >
-          Approve
+          {approval.state.isChecking ? 'Checking...' : approval.state.isApproving ? 'Approving...' : 'Approve'}
         </Button>
         <Button onClick={async () => await getRequestService().reject()}>Reject</Button>
       </div>
+      <RequestUiUnlockDialog approval={approval} />
     </div>
   )
 }
diff --git a/packages/feature-request/src/ui/request-ui-sign-message.tsx b/packages/feature-request/src/ui/request-ui-sign-message.tsx
@@ -3,24 +3,32 @@ import type { SolanaSignMessageInput } from '@solana/wallet-standard-features'
 import { getRequestService } from '@workspace/background/services/request'
 import { getSignService } from '@workspace/background/services/sign'
 import { Button } from '@workspace/ui/components/button'
+import { useRequestSignApproval } from '../data-access/use-request-sign-approval.tsx'
+import { RequestUiUnlockDialog } from './request-ui-unlock-dialog.tsx'
 
 export interface RequestUiSignMessageProps {
   data: SolanaSignMessageInput[]
 }
 
 export function RequestUiSignMessage({ data }: RequestUiSignMessageProps) {
+  const approval = useRequestSignApproval()
+
   return (
     <div className="flex flex-col gap-4 p-4">
       <h1 className="text-center font-bold text-2xl">Sign Message</h1>
       <div className="flex flex-col gap-2">
         <Button
-          onClick={async () => await getRequestService().resolve(await getSignService().signMessage(data))}
+          disabled={approval.state.isBusy}
+          onClick={() =>
+            approval.approve(async () => await getRequestService().resolve(await getSignService().signMessage(data)))
+          }
           variant="destructive"
         >
-          Approve
+          {approval.state.isChecking ? 'Checking...' : approval.state.isApproving ? 'Approving...' : 'Approve'}
         </Button>
         <Button onClick={async () => await getRequestService().reject()}>Reject</Button>
       </div>
+      <RequestUiUnlockDialog approval={approval} />
     </div>
   )
 }
diff --git a/packages/feature-request/src/ui/request-ui-sign-transaction.tsx b/packages/feature-request/src/ui/request-ui-sign-transaction.tsx
@@ -3,24 +3,34 @@ import type { SolanaSignTransactionInput } from '@solana/wallet-standard-feature
 import { getRequestService } from '@workspace/background/services/request'
 import { getSignService } from '@workspace/background/services/sign'
 import { Button } from '@workspace/ui/components/button'
+import { useRequestSignApproval } from '../data-access/use-request-sign-approval.tsx'
+import { RequestUiUnlockDialog } from './request-ui-unlock-dialog.tsx'
 
 export interface RequestUiSignTransactionProps {
   data: SolanaSignTransactionInput[]
 }
 
 export function RequestUiSignTransaction({ data }: RequestUiSignTransactionProps) {
+  const approval = useRequestSignApproval()
+
   return (
     <div className="flex flex-col gap-4 p-4">
       <h1 className="text-center font-bold text-2xl">Sign Transaction</h1>
       <div className="flex flex-col gap-2">
         <Button
-          onClick={async () => await getRequestService().resolve(await getSignService().signTransaction(data))}
+          disabled={approval.state.isBusy}
+          onClick={() =>
+            approval.approve(
+              async () => await getRequestService().resolve(await getSignService().signTransaction(data)),
+            )
+          }
           variant="destructive"
         >
-          Approve
+          {approval.state.isChecking ? 'Checking...' : approval.state.isApproving ? 'Approving...' : 'Approve'}
         </Button>
         <Button onClick={async () => await getRequestService().reject()}>Reject</Button>
       </div>
+      <RequestUiUnlockDialog approval={approval} />
     </div>
   )
 }
diff --git a/packages/feature-request/src/ui/request-ui-unlock-dialog.tsx b/packages/feature-request/src/ui/request-ui-unlock-dialog.tsx
@@ -0,0 +1,63 @@
+import { Button } from '@workspace/ui/components/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@workspace/ui/components/dialog'
+import { Input } from '@workspace/ui/components/input'
+import { Label } from '@workspace/ui/components/label'
+import { useId } from 'react'
+import type { RequestSignApproval, RequestUnlockMode } from '../data-access/use-request-sign-approval.tsx'
+
+export function RequestUiUnlockDialog({ approval }: { approval: RequestSignApproval }) {
+  const credentialId = useId()
+  const { actions, state } = approval
+
+  return (
+    <Dialog onOpenChange={actions.changeOpen} open={state.isOpen}>
+      <DialogContent>
+        <form className="space-y-4" onSubmit={actions.submitUnlock}>
+          <DialogHeader>
+            <DialogTitle>Unlock wallet</DialogTitle>
+            <DialogDescription>Unlock the active wallet to continue with this signing request.</DialogDescription>
+          </DialogHeader>
+          <div className="space-y-2">
+            <Label htmlFor={credentialId}>{getCredentialLabel(state.mode)}</Label>
+            <Input
+              autoComplete={state.mode === 'password' ? 'current-password' : 'off'}
+              id={credentialId}
+              inputMode={state.mode === 'pin' ? 'numeric' : undefined}
+              onChange={(event) => actions.changeCredential(event.target.value)}
+              pattern={state.mode === 'pin' ? '[0-9]*' : undefined}
+              type={state.mode === 'pin' ? 'text' : 'password'}
+              value={state.credential}
+            />
+          </div>
+          {state.error ? <p className="text-destructive text-sm">{state.error}</p> : null}
+          <DialogFooter>
+            <Button disabled={state.isUnlocking} onClick={actions.cancelUnlock} type="button" variant="outline">
+              Cancel
+            </Button>
+            <Button disabled={state.isUnlocking} type="submit" variant="destructive">
+              {state.isUnlocking ? 'Unlocking...' : 'Unlock'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function getCredentialLabel(mode: RequestUnlockMode): string {
+  switch (mode) {
+    case 'password':
+      return 'Password'
+    case 'pin':
+      return 'PIN'
+    case 'unsecured':
+      return 'Wallet'
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"dependencies": {`
`3`	`3`	`"@solana/wallet-standard-features": "catalog:",`
	`4`	`+ "@tanstack/react-query": "catalog:",`
`4`	`5`	`"@workspace/background": "workspace:*",`
`5`	`6`	`"@workspace/ui": "workspace:*",`
`6`	`7`	`"react-router": "catalog:"`