Makes ui of "to" field on send form clearer (#282)

Author: cgjohn

renderer/components/SendAssetsForm/SendAssetsForm.tsx

@@ -258,6 +258,13 @@ export function SendAssetsFormContent({
     return [...(contacts ?? []), ...(accounts ?? [])];
   }, [contactsData, allAccountsData]);
 
+  const accountNameInAddressBook = useMemo(() => {
+    const fullContact = formattedContacts.find(
+      (contact) => contact.value === toAccountValue,
+    );
+    return fullContact?.label.main;
+  }, [formattedContacts, toAccountValue]);
+
   return (
     <>
       {syncingMessage}
@@ -312,7 +319,9 @@ export function SendAssetsFormContent({
 
           <Combobox
             {...register("toAccount")}
-            label={formatMessage(messages.toLabel)}
+            label={`${formatMessage(messages.toLabel)}${
+              accountNameInAddressBook ? ": " + accountNameInAddressBook : ""
+            }`}
             error={errors.toAccount?.message}
             options={formattedContacts}
             value={toAccountValue}

renderer/ui/Forms/Combobox/Combobox.tsx

@@ -137,6 +137,9 @@ export const Combobox = forwardRef<HTMLInputElement, Props>(function Combobox(
               type="button"
               display="block"
               w="100%"
+              background={
+                option.value === value ? COLORS.GRAY_LIGHT : "transparent"
+              }
               textAlign="left"
               onMouseDown={(e) => {
                 e.preventDefault();