Use name registry in recipients list (#410)

packages/ui/cypress/tests/transactions.cy.ts

@@ -4,7 +4,6 @@ import { landingPageUrl } from '../fixtures/landingData'
 import { multisigPage } from '../support/page-objects/multisigPage'
 import { notifications } from '../support/page-objects/notifications'
 import { sendTxModal } from '../support/page-objects/sendTxModal'
-import { topMenuItems } from '../support/page-objects/topMenuItems'
 import { clickOnConnect } from '../utils/clickOnConnect'
 import { waitForTxRequest } from '../utils/waitForTxRequests'
 

packages/ui/src/components/EasySetup/BalancesTransfer.tsx

@@ -20,7 +20,7 @@ interface Props {
 }
 
 const BalancesTransfer = ({ className, onSetExtrinsic, onSetErrorMessage, from }: Props) => {
-  const accountBase = useAccountBaseFromAccountList()
+  const accountBase = useAccountBaseFromAccountList({ withAccountsFromAddressBook: true })
   const [selected, setSelected] = useState<AccountBaseInfo | undefined>()
   const { api, chainInfo } = useApi()
   const [amountString, setAmountString] = useState('')

packages/ui/src/hooks/useAccountBaseFromAccountList.tsx

@@ -1,15 +1,26 @@
 import { useMemo } from 'react'
 import { AccountBaseInfo } from '../components/select/GenericAccountSelection'
 import { useAccounts } from '../contexts/AccountsContext'
+import { useAccountNames } from '../contexts/AccountNamesContext'
 
-export const useAccountBaseFromAccountList = () => {
+interface Params {
+  withAccountsFromAddressBook: boolean
+}
+
+export const useAccountBaseFromAccountList = (params?: Params) => {
+  const { withAccountsFromAddressBook = false } = params || {}
   const { ownAccountList } = useAccounts()
+  const { accountNames } = useAccountNames()
 
   const accountBase = useMemo((): AccountBaseInfo[] => {
-    return (
-      (ownAccountList && ownAccountList?.map((account) => ({ address: account.address }))) || []
-    )
-  }, [ownAccountList])
+    const ownAccountListAddresses =
+      (ownAccountList && ownAccountList.map(({ address }) => address)) || []
+    const accountFromNameRegistry =
+      (withAccountsFromAddressBook && Object.keys(accountNames).map((address) => address)) || []
+    const addressesSet = new Set([...accountFromNameRegistry, ...ownAccountListAddresses])
+
+    return Array.from(addressesSet).map((address) => ({ address }))
+  }, [accountNames, ownAccountList, withAccountsFromAddressBook])
 
   return accountBase
 }