Add suggestions to recipient input

oasisprotocol · Sep 6, 2023 · e2c1399 · e2c1399
1 parent 6b9ca2b
commit e2c1399
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/src/app/pages/AccountPage/Features/SendTransaction/index.tsx b/src/app/pages/AccountPage/Features/SendTransaction/index.tsx
@@ -3,6 +3,7 @@ import { useModal } from 'app/components/Modal'
 import { transactionActions } from 'app/state/transaction'
 import { selectTransaction } from 'app/state/transaction/selectors'
 import { selectValidators } from 'app/state/staking/selectors'
+import { selectContactsList } from 'app/state/contacts/selectors'
 import { Box } from 'grommet/es6/components/Box'
 import { Button } from 'grommet/es6/components/Button'
 import { Form } from 'grommet/es6/components/Form'
@@ -28,6 +29,7 @@ export function SendTransaction(props: SendTransactionProps) {
   const { launchModal } = useModal()
   const { error, success } = useSelector(selectTransaction)
   const validators = useSelector(selectValidators)
+  const contracts = useSelector(selectContactsList)
   const [recipient, setRecipient] = useState('')
   const [amount, setAmount] = useState('')
   const sendTransaction = () =>
@@ -83,6 +85,10 @@ export function SendTransaction(props: SendTransactionProps) {
           >
             <TextInput
               id="recipient-id"
+              suggestions={contracts.map(contract => contract.name)}
+              onSuggestionSelect={event =>
+                setRecipient(contracts.find(contract => contract.name === event.suggestion)?.address || '')
+              }
               name="recipient"
               value={recipient}
               placeholder={t('account.sendTransaction.enterAddress', 'Enter an address')}

diff --git a/src/app/pages/AccountPage/__tests__/__snapshots__/index.test.tsx.snap b/src/app/pages/AccountPage/__tests__/__snapshots__/index.test.tsx.snap
@@ -1211,12 +1211,15 @@ exports[`<AccountPage  /> should match snapshot 1`] = `
                     class="c30"
                   >
                     <input
+                      aria-autocomplete="list"
+                      aria-expanded="false"
                       autocomplete="off"
                       class="c31"
                       id="recipient-id"
                       name="recipient"
                       placeholder="Enter an address"
                       required=""
+                      role="combobox"
                       value=""
                     />
                   </div>