Fix useMemo returns new component on change (#2315)

This fixes setting the input value on scan if the component remounts while the scanner is open.

No need to use useRef to close the scanner on remount.

components/form.js

@@ -1350,21 +1350,11 @@ function PasswordScanner ({ onScan, text }) {
     loading: () => <PageLoading />
   })
 
-  const closeRef = useRef()
-  useEffect(() => {
-    return () => {
-      // close modal on remount to avoid calling stale callbacks
-      // see https://github.com/stackernews/stacker.news/pull/2313
-      closeRef.current?.()
-    }
-  }, [])
-
   return (
     <InputGroup.Text
       style={{ cursor: 'pointer' }}
       onClick={() => {
         showModal(onClose => {
-          closeRef.current = onClose
           return (
             <div>
               {text && <h5 className='line-height-md mb-4 text-center'>{text}</h5>}

pages/wallets/index.js

@@ -49,7 +49,7 @@ export default function Wallet () {
       ? (
         <WalletLayout>
           <div className='py-5 d-flex flex-column align-items-center justify-content-center flex-grow-1 mx-auto' style={{ maxWidth: '500px' }}>
-            <PassphrasePrompt />
+            {PassphrasePrompt}
           </div>
         </WalletLayout>
         )

wallets/client/hooks/crypto.js

@@ -238,8 +238,7 @@ export function usePassphrasePrompt () {
   const [showPassphrasePrompt, setShowPassphrasePrompt] = useState(false)
   const togglePassphrasePrompt = useCallback(() => setShowPassphrasePrompt(v => !v), [])
 
-  const Prompt = useMemo(() =>
+  const Prompt = useMemo(() => (
-    () => (
     <div>
       <h4>Wallet decryption</h4>
       <p className='line-height-md mt-3'>