chore: improve code and replace test

Author: AlexD10S

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}`);
   });
 });

package.json

@@ -33,10 +33,10 @@
   "dependencies": {
     "@headlessui/react": "^1.7.18",
     "@heroicons/react": "^1.0.6",
-    "@polkadot/api": "^16.4.1",
-    "@polkadot/api-contract": "^16.4.1",
+    "@polkadot/api": "^16.4.7",
+    "@polkadot/api-contract": "^16.4.7",
     "@polkadot/extension-dapp": "^0.58.6",
-    "@polkadot/types": "^16.4.1",
+    "@polkadot/types": "^16.4.7",
     "@polkadot/ui-keyring": "^3.12.2",
     "@polkadot/ui-shared": "^3.12.2",
     "big.js": "^6.2.1",

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

@@ -43,14 +43,9 @@ function Select({
 
 export function AccountSelect({ placeholder = 'Select account', ...props }: Props) {
   const { accounts } = useApi();
-  const { version } = useVersion();
 
   return (
-    <Select
-      options={createAccountOptions(accounts || [], version)}
-      placeholder={placeholder}
-      {...props}
-    />
+    <Select options={createAccountOptions(accounts || [])} placeholder={placeholder} {...props} />
   );
 }
 
@@ -79,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/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,7 @@
 // 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 {
@@ -35,12 +36,16 @@ export function createMessageOptions(
 
 export function createAccountOptions(
   data: Account[],
-  version: InkVersion,
+  version?: InkVersion,
 ): DropdownOption<string>[] {
-  return data.map(pair => ({
-    label: pair.meta?.name as string,
-    value: (version === 'v6' ? toEthAddress(pair.address) : pair.address) || '',
-  }));
+  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>[] {