From 1a307510e9dbf466438c265bfb68eb679d1a1a69 Mon Sep 17 00:00:00 2001 From: AlexD10S Date: Wed, 17 Sep 2025 17:27:49 +0200 Subject: [PATCH 1/3] fix: remove 0 placeholder --- src/ui/components/form/InputBn.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/components/form/InputBn.tsx b/src/ui/components/form/InputBn.tsx index acf44624..48451e93 100644 --- a/src/ui/components/form/InputBn.tsx +++ b/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( From 7c621824b28d34cb3b8f67be4fc7a3ab18790e71 Mon Sep 17 00:00:00 2001 From: AlexD10S Date: Wed, 17 Sep 2025 17:49:55 +0200 Subject: [PATCH 2/3] fix: display address as H160 for inkv6 --- src/ui/components/account/Select.tsx | 12 +++++++++--- src/ui/util/dropdown.tsx | 9 +++++++-- 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/src/ui/components/account/Select.tsx b/src/ui/components/account/Select.tsx index ad42dde0..0b8362f8 100644 --- a/src/ui/components/account/Select.tsx +++ b/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'; @@ -43,15 +43,21 @@ function Select({ export function AccountSelect({ placeholder = 'Select account', ...props }: Props) { const { accounts } = useApi(); + const { version } = useVersion(); return ( - ); } 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[]>([]); @@ -63,7 +69,7 @@ export function AddressSelect({ placeholder = 'Select account', onChange, ...pro }, { label: 'My Accounts', - options: createAccountOptions(accounts || []), + options: createAccountOptions(accounts || [], version), }, { label: 'Uploaded Contracts', diff --git a/src/ui/util/dropdown.tsx b/src/ui/util/dropdown.tsx index 9da06f3a..87c899cd 100644 --- a/src/ui/util/dropdown.tsx +++ b/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 { InkVersion } from 'ui/contexts'; import { MessageSignature } from '../components/message/MessageSignature'; import { AbiConstructor, @@ -10,6 +11,7 @@ import { Registry, Account, } from 'types'; +import { toEthAddress } from 'lib/address'; export function createConstructorOptions( registry: Registry, @@ -31,10 +33,13 @@ export function createMessageOptions( })); } -export function createAccountOptions(data: Account[]): DropdownOption[] { +export function createAccountOptions( + data: Account[], + version: InkVersion, +): DropdownOption[] { return data.map(pair => ({ label: pair.meta?.name as string, - value: pair.address || '', + value: (version === 'v6' ? toEthAddress(pair.address) : pair.address) || '', })); } From 2544416598c57134fcef378eb5693feaecb2d1bd Mon Sep 17 00:00:00 2001 From: AlexD10S Date: Thu, 18 Sep 2025 13:16:28 +0200 Subject: [PATCH 3/3] chore: improve code and replace test --- cypress/e2e/contracts/erc20.spec.ts | 43 ++++-------------------- src/lib/callOptions.ts | 4 +++ src/ui/components/account/Select.tsx | 9 ++--- src/ui/components/form/findComponent.tsx | 1 + src/ui/util/dropdown.tsx | 15 ++++++--- 5 files changed, 24 insertions(+), 48 deletions(-) diff --git a/cypress/e2e/contracts/erc20.spec.ts b/cypress/e2e/contracts/erc20.spec.ts index 5426a3f2..bd40a790 100644 --- a/cypress/e2e/contracts/erc20.spec.ts +++ b/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}`); }); }); diff --git a/src/lib/callOptions.ts b/src/lib/callOptions.ts index 269efbbe..c88673fe 100644 --- a/src/lib/callOptions.ts +++ b/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; }); diff --git a/src/ui/components/account/Select.tsx b/src/ui/components/account/Select.tsx index 0b8362f8..47bb6627 100644 --- a/src/ui/components/account/Select.tsx +++ b/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 ( - ); } @@ -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 }]); diff --git a/src/ui/components/form/findComponent.tsx b/src/ui/components/form/findComponent.tsx index 18853af9..e79c72b3 100644 --- a/src/ui/components/form/findComponent.tsx +++ b/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': diff --git a/src/ui/util/dropdown.tsx b/src/ui/util/dropdown.tsx index 87c899cd..247a9f8e 100644 --- a/src/ui/util/dropdown.tsx +++ b/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[] { - 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[] {