From 79180300666121c9a1527aa9aac8682df4676307 Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Wed, 6 Sep 2023 16:31:44 +0200
Subject: [PATCH] Add suggestions to recipient input

---
 .../pages/AccountPage/Features/SendTransaction/index.tsx    | 6 ++++++
 .../AccountPage/__tests__/__snapshots__/index.test.tsx.snap | 3 +++
 2 files changed, 9 insertions(+)

diff --git a/src/app/pages/AccountPage/Features/SendTransaction/index.tsx b/src/app/pages/AccountPage/Features/SendTransaction/index.tsx
index 60e82ee1cf..a7ade8a4a5 100644
--- 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
index 9d56869da6..a0facbc39b 100644
--- 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>