Add auto-complete support when withdrawing to ln addr

adds auto-complete support for other stacker.news users when withdrawing
to a lightning address

implemented via adding an optional `transformUser` prop to the `UserSuggest` and `InputUserSuggest`
components, which allows you to transform fetched user results before displaying in the suggestion
dropdown

this is used to transform a user nym to nym@stacker.news, the corresponding
lightning address

by default, `transformUser` is an identity fn aka no transformation

this change also clears suggestions when the surrounding input field is blurred, which
is a better UX IMO

components/form.js

@@ -157,7 +157,7 @@ export function MarkdownInput ({ label, topLevel, groupClassName, onChange, setH
             query={mentionQuery}
             onSelect={insertMention}
             dropdownStyle={userSuggestDropdownStyle}
-          >{({ onKeyDown: userSuggestOnKeyDown }) => (
+          >{({ onKeyDown: userSuggestOnKeyDown, resetSuggestions }) => (
             <InputInner
               {...props} onChange={(formik, e) => {
                 if (onChange) onChange(formik, e)
@@ -229,6 +229,7 @@ export function MarkdownInput ({ label, topLevel, groupClassName, onChange, setH
 
                 if (onKeyDown) onKeyDown(e)
               }}
+              onBlur={resetSuggestions}
             />)}
           </UserSuggest>
         </div>
@@ -393,15 +394,15 @@ function InputInner ({
   )
 }
 
-export function UserSuggest ({ query, onSelect, dropdownStyle, children }) {
+export function UserSuggest ({ query, onSelect, dropdownStyle, children, transformUser = user => user }) {
   const [getUsers] = useLazyQuery(TOP_USERS, {
     onCompleted: data => {
-      setSuggestions({ array: data.topUsers.users, index: 0 })
+      setSuggestions({ array: data.topUsers.users.map(transformUser), index: 0 })
     }
   })
   const [getSuggestions] = useLazyQuery(USER_SEARCH, {
     onCompleted: data => {
-      setSuggestions({ array: data.searchUsers, index: 0 })
+      setSuggestions({ array: data.searchUsers.map(transformUser), index: 0 })
     }
   })
 
@@ -465,7 +466,7 @@ export function UserSuggest ({ query, onSelect, dropdownStyle, children }) {
   }, [onSelect, resetSuggestions, suggestions])
   return (
     <>
-      {children?.({ onKeyDown })}
+      {children?.({ onKeyDown, resetSuggestions })}
       <Dropdown show={suggestions.array.length > 0} style={dropdownStyle}>
         <Dropdown.Menu className={styles.suggestionsMenu}>
           {suggestions.array.map((v, i) =>
@@ -485,16 +486,17 @@ export function UserSuggest ({ query, onSelect, dropdownStyle, children }) {
   )
 }
 
-export function InputUserSuggest ({ label, groupClassName, ...props }) {
+export function InputUserSuggest ({ label, groupClassName, transformUser, ...props }) {
   const [ovalue, setOValue] = useState()
   const [query, setQuery] = useState()
   return (
     <FormGroup label={label} className={groupClassName}>
       <UserSuggest
+        transformUser={transformUser}
         onSelect={setOValue}
         query={query}
       >
-        {({ onKeyDown }) => (
+        {({ onKeyDown, resetSuggestions }) => (
           <InputInner
             {...props}
             autoComplete='off'
@@ -504,6 +506,7 @@ export function InputUserSuggest ({ label, groupClassName, ...props }) {
             }}
             overrideValue={ovalue}
             onKeyDown={onKeyDown}
+            onBlur={resetSuggestions}
           />
         )}
       </UserSuggest>

pages/wallet.js

@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router'
-import { Checkbox, Form, Input, SubmitButton } from '../components/form'
+import { Checkbox, Form, Input, InputUserSuggest, SubmitButton } from '../components/form'
 import Link from 'next/link'
 import Button from 'react-bootstrap/Button'
 import { gql, useMutation, useQuery } from '@apollo/client'
@@ -349,12 +349,13 @@ export function LnAddrWithdrawal () {
           router.push(`/withdrawals/${data.sendToLnAddr.id}`)
         }}
       >
-        <Input
+        <InputUserSuggest
           label='lightning address'
           name='addr'
           required
           autoFocus
           onChange={onAddrChange}
+          transformUser={user => ({ ...user, name: `${user.name}@stacker.news` })}
         />
         <Input
           label='amount'