Fix passphrase scanner (#2292)

* Fix passphrase scanner

* Fix scanner trying to play sound on scan

components/form.js

@@ -1350,8 +1350,10 @@ function PasswordScanner ({ onScan, text }) {
                 <Scanner
                   formats={['qr_code']}
                   onScan={([{ rawValue: result }]) => {
-                    onScan(result)
-                    onClose()
+                    if (result) {
+                      onScan(result)
+                      onClose()
+                    }
                   }}
                   styles={{
                     video: {
@@ -1366,6 +1368,7 @@ function PasswordScanner ({ onScan, text }) {
                     }
                     onClose()
                   }}
+                  components={{ audio: false }}
                 />
               )}
             </div>

pages/wallets/index.js

@@ -19,7 +19,7 @@ export default function Wallet () {
   const [showWallets, setShowWallets] = useState(false)
   const templates = useTemplates()
   const showPassphrase = useShowPassphrase()
-  const passphrasePrompt = usePassphrasePrompt()
+  const [showPassphrasePrompt, togglePassphrasePrompt, PassphrasePrompt] = usePassphrasePrompt()
   const setWalletPriorities = useSetWalletPriorities()
   const [searchFilter, setSearchFilter] = useState(() => (text) => true)
 
@@ -45,18 +45,26 @@ export default function Wallet () {
   }
 
   if (keyError === KeyStatus.WRONG_KEY) {
-    return (
-      <WalletLayout>
-        <div className='py-5 text-center d-flex flex-column align-items-center justify-content-center flex-grow-1'>
-          <Button
-            onClick={passphrasePrompt}
-            size='md' variant='secondary'
-          >unlock wallets
-          </Button>
-          <small className='d-block mt-3 text-muted'>your passphrase is required</small>
-        </div>
-      </WalletLayout>
-    )
+    return showPassphrasePrompt
+      ? (
+        <WalletLayout>
+          <div className='py-5 d-flex flex-column align-items-center justify-content-center flex-grow-1 mx-auto' style={{ maxWidth: '500px' }}>
+            <PassphrasePrompt />
+          </div>
+        </WalletLayout>
+        )
+      : (
+        <WalletLayout>
+          <div className='py-5 text-center d-flex flex-column align-items-center justify-content-center flex-grow-1'>
+            <Button
+              onClick={togglePassphrasePrompt}
+              size='md' variant='secondary'
+            >unlock wallets
+            </Button>
+            <small className='d-block mt-3 text-muted'>your passphrase is required</small>
+          </div>
+        </WalletLayout>
+        )
   }
 
   if (walletsError) {

wallets/client/hooks/crypto.js

@@ -1,4 +1,4 @@
-import { useCallback, useMemo } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { fromHex, toHex } from '@/lib/hex'
 import { useMe } from '@/components/me'
 import { useIndexedDB } from '@/components/use-indexeddb'
@@ -210,21 +210,21 @@ const passphraseSchema = ({ hash, salt }) => object().shape({
 })
 
 export function usePassphrasePrompt () {
-  const showModal = useShowModal()
   const savePassphrase = useSavePassphrase()
   const hash = useRemoteKeyHash()
   const salt = useKeySalt()
   const showPassphrase = useShowPassphrase()
   const resetPassphrase = useResetPassphrase()
 
-  const onSubmit = useCallback((close) =>
-    async ({ passphrase }) => {
-      await savePassphrase({ passphrase })
-      close()
-    }, [savePassphrase])
+  const onSubmit = useCallback(async ({ passphrase }) => {
+    await savePassphrase({ passphrase })
+  }, [savePassphrase])
 
-  return useCallback(() => {
-    showModal(close => (
+  const [showPassphrasePrompt, setShowPassphrasePrompt] = useState(false)
+  const togglePassphrasePrompt = useCallback(() => setShowPassphrasePrompt(v => !v), [])
+
+  const Prompt = useMemo(() =>
+    () => (
       <div>
         <h4>Wallet decryption</h4>
         <p className='line-height-md mt-3'>
@@ -239,7 +239,7 @@ export function usePassphrasePrompt () {
         <Form
           schema={passphraseSchema({ hash, salt })}
           initial={{ passphrase: '' }}
-          onSubmit={onSubmit(close)}
+          onSubmit={onSubmit}
         >
           <PasswordInput
             label='passphrase'
@@ -252,14 +252,18 @@ export function usePassphrasePrompt () {
           <div className='mt-3'>
             <div className='d-flex justify-content-between align-items-center'>
               <Button className='me-auto' variant='danger' onClick={resetPassphrase}>reset</Button>
-              <Button className='me-3 text-muted nav-link fw-bold' variant='link' onClick={close}>cancel</Button>
+              <Button className='me-3 text-muted nav-link fw-bold' variant='link' onClick={togglePassphrasePrompt}>cancel</Button>
               <SubmitButton variant='primary'>save</SubmitButton>
             </div>
           </div>
         </Form>
       </div>
-    ))
-  }, [showModal, savePassphrase, hash, salt])
+    ), [showPassphrase, resetPassphrase, togglePassphrasePrompt, onSubmit, hash, salt])
+
+  return useMemo(
+    () => [showPassphrasePrompt, togglePassphrasePrompt, Prompt],
+    [showPassphrasePrompt, togglePassphrasePrompt, Prompt]
+  )
 }
 
 export async function deriveKey (passphrase, salt) {