diff --git a/mocks/contract/methods.ts b/mocks/contract/methods.ts index 5f6f092d86..d9114114fa 100644 --- a/mocks/contract/methods.ts +++ b/mocks/contract/methods.ts @@ -14,7 +14,7 @@ export const read: Array = [ method_id: '70a08231', name: 'FLASHLOAN_PREMIUM_TOTAL', outputs: [ - { internalType: 'uint256', name: '', type: 'uint256' }, + { internalType: 'uint256', name: 'amount', type: 'uint256' }, ], payable: false, stateMutability: 'view', @@ -97,7 +97,7 @@ export const read: Array = [ export const readResultSuccess: SmartContractQueryMethodReadSuccess = { is_error: false, result: { - names: [ 'uint256' ], + names: [ 'amount' ], output: [ { type: 'uint256', value: '42' }, ], diff --git a/types/api/contract.ts b/types/api/contract.ts index d8451ce974..7c11167b1a 100644 --- a/types/api/contract.ts +++ b/types/api/contract.ts @@ -97,10 +97,10 @@ export interface SmartContractMethodOutput extends SmartContractMethodInput { export interface SmartContractQueryMethodReadSuccess { is_error: false; result: { - names: Array; + names: Array ]>; output: Array<{ type: string; - value: string; + value: string | Array; }>; }; } diff --git a/ui/address/contract/ContractMethodCallable.tsx b/ui/address/contract/ContractMethodCallable.tsx index 3f32a7a20a..62be6cda60 100644 --- a/ui/address/contract/ContractMethodCallable.tsx +++ b/ui/address/contract/ContractMethodCallable.tsx @@ -1,4 +1,4 @@ -import { Box, Button, chakra, Flex, Text } from '@chakra-ui/react'; +import { Box, Button, chakra, Flex } from '@chakra-ui/react'; import _fromPairs from 'lodash/fromPairs'; import React from 'react'; import type { SubmitHandler } from 'react-hook-form'; @@ -158,7 +158,17 @@ const ContractMethodCallable = ({ data, onSubmit, { 'outputs' in data && !isWrite && data.outputs.length > 0 && ( - { data.outputs.map(({ type }) => type).join(', ') } +

+ { data.outputs.map(({ type, name }, index) => { + return ( + <> + { name } + { name ? `(${ type })` : type } + { index < data.outputs.length - 1 && , } + + ); + }) } +

) } { result && } diff --git a/ui/address/contract/ContractReadResult.pw.tsx b/ui/address/contract/ContractReadResult.pw.tsx index 8cd3341a70..35b4991a0c 100644 --- a/ui/address/contract/ContractReadResult.pw.tsx +++ b/ui/address/contract/ContractReadResult.pw.tsx @@ -99,3 +99,34 @@ test('success', async({ mount }) => { await expect(component).toHaveScreenshot(); }); + +test('complex success', async({ mount }) => { + const result: ContractMethodReadResult = { + is_error: false, + result: { + names: [ + [ + 'data', + [ 'totalSupply', 'owner', 'symbol' ], + ], + 'supports721', + 'page', + ], + output: [ + { + type: 'tuple[uint256,address,string]', + value: [ 1000, '0xe150519ae293922cfe6217feba3add4726f5e851', 'AOC_INCUBATORS' ], + }, + { type: 'bool', value: 'true' }, + { type: 'uint256[]', value: [ 1, 2, 3, 4, 5 ] }, + ], + }, + }; + const component = await mount( + + + , + ); + + await expect(component).toHaveScreenshot(); +}); diff --git a/ui/address/contract/ContractReadResult.tsx b/ui/address/contract/ContractReadResult.tsx index 9ed7f5f481..28f701eb9b 100644 --- a/ui/address/contract/ContractReadResult.tsx +++ b/ui/address/contract/ContractReadResult.tsx @@ -2,17 +2,55 @@ import { Alert, Box, chakra, useColorModeValue } from '@chakra-ui/react'; import React from 'react'; import type { ContractMethodReadResult } from './types'; -import type { SmartContractReadMethod } from 'types/api/contract'; +import type { SmartContractQueryMethodReadSuccess, SmartContractReadMethod } from 'types/api/contract'; import hexToUtf8 from 'lib/hexToUtf8'; +const TUPLE_TYPE_REGEX = /\[(.+)\]/; + const ContractReadResultError = ({ children }: {children: React.ReactNode}) => { return ( { children } ); +}; + +interface ItemProps { + output: SmartContractQueryMethodReadSuccess['result']['output'][0]; + name: SmartContractQueryMethodReadSuccess['result']['names'][0]; +} + +const ContractReadResultItem = ({ output, name }: ItemProps) => { + if (Array.isArray(name)) { + const [ structName, argNames ] = name; + const argTypes = output.type.match(TUPLE_TYPE_REGEX)?.[1].split(','); + return ( + <> +

+ { structName } + ({ output.type }) : +

+ { argNames.map((argName, argIndex) => { + return ( +

+ { argName } + { argTypes?.[argIndex] ? ` (${ argTypes[argIndex] })` : '' } : { String(output.value[argIndex]) } +

+ ); + }) } + + ); + } + + return ( +

+ + { name && { name } } + ({ output.type }) : { String(output.value) } +

+ ); }; interface Props { @@ -53,14 +91,12 @@ const ContractReadResult = ({ item, result, onSettle }: Props) => { } return ( - +

- [ { 'name' in item ? item.name : '' } method response ] + [ { 'name' in item ? item.name : '' } method response ]

[

- { result.result.output.map(({ type, value }, index) => ( - { type }: { String(value) } - )) } + { result.result.output.map((output, index) => ) }

]

); diff --git a/ui/address/contract/__screenshots__/ContractRead.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png b/ui/address/contract/__screenshots__/ContractRead.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png index 8d23be81b2..c0e7093ca0 100644 Binary files a/ui/address/contract/__screenshots__/ContractRead.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png and b/ui/address/contract/__screenshots__/ContractRead.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-1.png differ diff --git a/ui/address/contract/__screenshots__/ContractRead.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-2.png b/ui/address/contract/__screenshots__/ContractRead.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-2.png index 5d0c4a6419..9603bc33a2 100644 Binary files a/ui/address/contract/__screenshots__/ContractRead.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-2.png and b/ui/address/contract/__screenshots__/ContractRead.pw.tsx_dark-color-mode_base-view-mobile-dark-mode-2.png differ diff --git a/ui/address/contract/__screenshots__/ContractRead.pw.tsx_default_base-view-mobile-dark-mode-1.png b/ui/address/contract/__screenshots__/ContractRead.pw.tsx_default_base-view-mobile-dark-mode-1.png index 7c0218683f..86d8bedf14 100644 Binary files a/ui/address/contract/__screenshots__/ContractRead.pw.tsx_default_base-view-mobile-dark-mode-1.png and b/ui/address/contract/__screenshots__/ContractRead.pw.tsx_default_base-view-mobile-dark-mode-1.png differ diff --git a/ui/address/contract/__screenshots__/ContractRead.pw.tsx_default_base-view-mobile-dark-mode-2.png b/ui/address/contract/__screenshots__/ContractRead.pw.tsx_default_base-view-mobile-dark-mode-2.png index 342f27e307..a76afca37a 100644 Binary files a/ui/address/contract/__screenshots__/ContractRead.pw.tsx_default_base-view-mobile-dark-mode-2.png and b/ui/address/contract/__screenshots__/ContractRead.pw.tsx_default_base-view-mobile-dark-mode-2.png differ diff --git a/ui/address/contract/__screenshots__/ContractRead.pw.tsx_mobile_base-view-mobile-dark-mode-1.png b/ui/address/contract/__screenshots__/ContractRead.pw.tsx_mobile_base-view-mobile-dark-mode-1.png index e0899c17b0..77ac115843 100644 Binary files a/ui/address/contract/__screenshots__/ContractRead.pw.tsx_mobile_base-view-mobile-dark-mode-1.png and b/ui/address/contract/__screenshots__/ContractRead.pw.tsx_mobile_base-view-mobile-dark-mode-1.png differ diff --git a/ui/address/contract/__screenshots__/ContractRead.pw.tsx_mobile_base-view-mobile-dark-mode-2.png b/ui/address/contract/__screenshots__/ContractRead.pw.tsx_mobile_base-view-mobile-dark-mode-2.png index 5f08f0bf14..06530635c0 100644 Binary files a/ui/address/contract/__screenshots__/ContractRead.pw.tsx_mobile_base-view-mobile-dark-mode-2.png and b/ui/address/contract/__screenshots__/ContractRead.pw.tsx_mobile_base-view-mobile-dark-mode-2.png differ diff --git a/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_complex-success-1.png b/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_complex-success-1.png new file mode 100644 index 0000000000..695b1df2c6 Binary files /dev/null and b/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_complex-success-1.png differ diff --git a/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_success-1.png b/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_success-1.png index 9ed2619edd..0010723b55 100644 Binary files a/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_success-1.png and b/ui/address/contract/__screenshots__/ContractReadResult.pw.tsx_default_success-1.png differ