fix: improve input DevEx for ink!v6

cypress/e2e/contracts/erc20.spec.ts

@@ -23,7 +23,6 @@ describe('ERC20 Contract ', () => {
   });
 
   it('contract file uploads', () => {
-    // TODO: In the contract, replaced Address with H160. Fix https://github.com/use-ink/contracts-ui/issues/582
     assertUpload('erc20.contract');
   });
 
@@ -54,54 +53,30 @@ describe('ERC20 Contract ', () => {
 
   it(`transfers ${transferValue} Units to another account`, () => {
     selectMessage('transfer', 3);
-    cy.get('.form-field.to')
-      .find("input[type='text']")
-      .clear()
-      .type('0x60afa252b554aabc4b3253ca2be60dc1d536ec10')
-      .should('have.value', '0x60afa252b554aabc4b3253ca2be60dc1d536ec10');
+    cy.get('.form-field.to').find('.dropdown').click().find('.dropdown__option').eq(3).click();
     cy.get('.form-field.value').find('input[type="number"]').type(`${transferValue}`);
     assertCall();
     selectMessage('balanceOf', 1);
 
-    cy.get('.form-field.owner')
-      .find("input[type='text']")
-      .clear()
-      .type('0x9621dde636de098b43efb0fa9b61facfe328f99d')
-      .should('have.value', '0x9621dde636de098b43efb0fa9b61facfe328f99d');
+    cy.get('.form-field.owner').find('.dropdown').click().find('.dropdown__option').eq(3).click();
+
     assertReturnValue('balanceOf', `${initialSupply - transferValue}`);
   });
 
   it(`successfully approves allowance`, () => {
     selectMessage('approve', 4);
-    cy.get('.form-field.spender')
-      .find("input[type='text']")
-      .clear()
-      .type('0x41dccbd49b26c50d34355ed86ff0fa9e489d1e01')
-      .should('have.value', '0x41dccbd49b26c50d34355ed86ff0fa9e489d1e01');
+    cy.get('.form-field.spender').find('.dropdown').click().find('.dropdown__option').eq(2).click();
     cy.get('.form-field.value').find('input[type="number"]').type(`${allowance}`);
     assertCall();
     selectMessage('allowance', 2);
-    cy.get('.form-field.owner')
-      .find("input[type='text']")
-      .clear()
-      .type('0x9621dde636de098b43efb0fa9b61facfe328f99d')
-      .should('have.value', '0x9621dde636de098b43efb0fa9b61facfe328f99d');
-    cy.get('.form-field.spender')
-      .find("input[type='text']")
-      .clear()
-      .type('0x41dccbd49b26c50d34355ed86ff0fa9e489d1e01')
-      .should('have.value', '0x41dccbd49b26c50d34355ed86ff0fa9e489d1e01');
+    cy.get('.form-field.spender').find('.dropdown').click().find('.dropdown__option').eq(2).click();
     assertReturnValue('allowance', `${allowance}`);
   });
 
   it(`transfers ${transferValue} on behalf of alice`, () => {
     cy.get('.form-field.caller').click().find('.dropdown__option').eq(2).click();
     selectMessage('transferFrom', 5);
-    cy.get('.form-field.from')
-      .find("input[type='text']")
-      .clear()
-      .type('0x9621dde636de098b43efb0fa9b61facfe328f99d')
-      .should('have.value', '0x9621dde636de098b43efb0fa9b61facfe328f99d');
+    cy.get('.form-field.to').find('.dropdown').click().find('.dropdown__option').eq(2).click();
     cy.get('.form-field.to')
       .find("input[type='text']")
       .clear()
@@ -110,11 +85,7 @@ describe('ERC20 Contract ', () => {
     cy.get('.form-field.value').find('input[type="number"]').type(`${transferValue}`);
     assertCall();
     selectMessage('balanceOf', 1);
-    cy.get('.form-field.owner')
-      .find("input[type='text']")
-      .clear()
-      .type('0x41dccbd49b26c50d34355ed86ff0fa9e489d1e01')
-      .should('have.value', '0x41dccbd49b26c50d34355ed86ff0fa9e489d1e01');
+    cy.get('.form-field.owner').find('.dropdown').click().find('.dropdown__option').eq(2).click();
     assertReturnValue('balanceOf', `${transferValue}`);
   });
 });

src/lib/callOptions.ts

@@ -66,6 +66,10 @@ export function transformUserInput(
     if (type === 'U256') {
       return registry.createType('U256', value);
     }
+    // TODO: CHeck this, not getting value for Address.
+    // if (type === 'Address') {
+    //   return registry.createType('H160', value);
+    // }
 
     return value;
   });

src/ui/components/account/Select.tsx

@@ -7,7 +7,7 @@ import { Dropdown } from '../common/Dropdown';
 import { Account } from './Account';
 import { createAccountOptions } from 'ui/util/dropdown';
 import type { DropdownOption, DropdownProps, ValidFormField } from 'types';
-import { useApi, useDatabase } from 'ui/contexts';
+import { useApi, useDatabase, useVersion } from 'ui/contexts';
 import { classes } from 'lib/util';
 import { useDbQuery } from 'ui/hooks';
 
@@ -52,6 +52,7 @@ export function AccountSelect({ placeholder = 'Select account', ...props }: Prop
 export function AddressSelect({ placeholder = 'Select account', onChange, ...props }: Props) {
   const { accounts } = useApi();
   const { db } = useDatabase();
+  const { version } = useVersion();
   const [contracts] = useDbQuery(() => db.contracts.toArray(), [db]);
   const [recent, setRecent] = useState<DropdownOption<string>[]>([]);
 
@@ -63,7 +64,7 @@ export function AddressSelect({ placeholder = 'Select account', onChange, ...pro
       },
       {
         label: 'My Accounts',
-        options: createAccountOptions(accounts || []),
+        options: createAccountOptions(accounts || [], version),
       },
       {
         label: 'Uploaded Contracts',
@@ -73,7 +74,7 @@ export function AddressSelect({ placeholder = 'Select account', onChange, ...pro
         })),
       },
     ];
-  }, [accounts, contracts, recent]);
+  }, [accounts, contracts, recent, version]);
 
   const handleCreate = (inputValue: string) => {
     setRecent([...recent, { label: inputValue, value: inputValue }]);

src/ui/components/form/InputBn.tsx

@@ -36,7 +36,7 @@ function getMinMax(type: string): [bigint, bigint] {
 }
 
 export function InputBn({ onChange, typeDef: { type } }: Props): React.ReactElement {
-  const [displayValue, setDisplayValue] = useState('0');
+  const [displayValue, setDisplayValue] = useState('');
   const [min, max] = getMinMax(type);
 
   const handleChange = useCallback(

src/ui/components/form/findComponent.tsx

@@ -131,6 +131,7 @@ export function findComponent(
   switch (type.type) {
     case 'AccountId':
     case 'Address':
+    case 'H160':
       return AddressSelect;
 
     case 'Balance':

src/ui/util/dropdown.tsx

@@ -1,6 +1,8 @@
 // Copyright 2022-2024 use-ink/contracts-ui authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
+import { decodeAddress } from '@polkadot/keyring';
+import { InkVersion } from 'ui/contexts';
 import { MessageSignature } from '../components/message/MessageSignature';
 import {
   AbiConstructor,
@@ -10,6 +12,7 @@ import {
   Registry,
   Account,
 } from 'types';
+import { toEthAddress } from 'lib/address';
 
 export function createConstructorOptions(
   registry: Registry,
@@ -31,11 +34,18 @@ export function createMessageOptions(
   }));
 }
 
-export function createAccountOptions(data: Account[]): DropdownOption<string>[] {
-  return data.map(pair => ({
-    label: pair.meta?.name as string,
-    value: pair.address || '',
-  }));
+export function createAccountOptions(
+  data: Account[],
+  version?: InkVersion,
+): DropdownOption<string>[] {
+  return data.map(pair => {
+    const address = version === 'v6' ? toEthAddress(decodeAddress(pair.address)) : pair.address;
+
+    return {
+      label: pair.meta?.name as string,
+      value: address || '',
+    };
+  });
 }
 
 export function createContractOptions(data: ContractDocument[]): DropdownOption<string>[] {