Skip to content

Commit

Permalink
Better contract implementation selector and new quick action buttons …
Browse files Browse the repository at this point in the history
…for contract method argument inputs (#2303)

* MUD system tab placeholder

* implement MUD system selector and fix proxy contract read/write

* add buttons to contract method arg input

* rollback changes of target contract address

* copy calldata button

* rollback changes of target contract address

* refactor contract details components

* add tabs to contract details

* migrate code to RoutedTabs

* add selector for source contract

* tests

* fix tests

* update screenshot

* update screenshots
  • Loading branch information
tom2drum authored Oct 28, 2024
1 parent b5d6ec9 commit 70b2a69
Show file tree
Hide file tree
Showing 116 changed files with 1,287 additions and 656 deletions.
1 change: 1 addition & 0 deletions stubs/contract.ts
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ export const CONTRACT_CODE_VERIFIED = {
remappings: [],
},
compiler_version: 'v0.8.7+commit.e28d00a7',
constructor_args: '0000000000000000000000005c7bcd6e7de5423a257d81b442095a1a6ced35c5000000000000000000000000c02aaa39b223fe8d0a0e5c4f27ead9083c756cc2',
creation_bytecode: '0x6080604052348',
deployed_bytecode: '0x60806040',
evm_version: 'london',
Expand Down
1 change: 1 addition & 0 deletions theme/components/Button/Button.pw.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ test.use({ viewport: { width: 150, height: 350 } });
{ variant: 'subtle', colorScheme: 'gray', states: [ 'default', 'hovered' ], withDarkMode: true },
{ variant: 'hero', states: [ 'default', 'hovered' ], withDarkMode: true },
{ variant: 'header', states: [ 'default', 'hovered', 'selected' ], withDarkMode: true },
{ variant: 'radio_group', states: [ 'default', 'hovered', 'selected' ], withDarkMode: true },
].forEach(({ variant, colorScheme, withDarkMode, states }) => {
test.describe(`variant ${ variant }${ colorScheme ? ` with ${ colorScheme } color scheme` : '' }${ withDarkMode ? ' +@dark-mode' : '' }`, () => {
test('', async({ render }) => {
Expand Down
37 changes: 37 additions & 0 deletions theme/components/Button/Button.ts
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,42 @@ const variantOutline = defineStyle((props) => {
};
});

const variantRadioGroup = defineStyle((props) => {
const outline = runIfFn(variantOutline, props);
const bgColor = mode('blue.50', 'gray.800')(props);
const selectedTextColor = mode('blue.700', 'gray.50')(props);

return {
...outline,
fontWeight: 500,
cursor: 'pointer',
bgColor: 'none',
borderColor: bgColor,
_hover: {
borderColor: bgColor,
color: 'link_hovered',
},
_active: {
bgColor: 'none',
},
// We have a special state for this button variant that serves as a popover trigger.
// When any items (filters) are selected in the popover, the button should change its background and text color.
// The last CSS selector is for redefining styles for the TabList component.
[`
&[data-selected=true],
&[data-selected=true][aria-selected=true]
`]: {
cursor: 'initial',
bgColor,
borderColor: bgColor,
color: selectedTextColor,
_hover: {
color: selectedTextColor,
},
},
};
});

const variantSimple = defineStyle((props) => {
const outline = runIfFn(variantOutline, props);

Expand Down Expand Up @@ -223,6 +259,7 @@ const variants = {
subtle: variantSubtle,
hero: variantHero,
header: variantHeader,
radio_group: variantRadioGroup,
};

const baseStyle = defineStyle({
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
28 changes: 28 additions & 0 deletions theme/components/Tabs.ts
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,33 @@ const variantOutline = definePartsStyle((props) => {
};
});

const variantRadioGroup = definePartsStyle((props) => {
return {
tab: {
...Button.baseStyle,
...Button.variants?.radio_group(props),
_selected: Button.variants?.radio_group(props)?.[`
&[data-selected=true],
&[data-selected=true][aria-selected=true]
`],
borderRadius: 'none',
_notFirst: {
borderLeftWidth: 0,
},
'&[role="tab"]': {
_first: {
borderTopLeftRadius: 'base',
borderBottomLeftRadius: 'base',
},
_last: {
borderTopRightRadius: 'base',
borderBottomRightRadius: 'base',
},
},
},
};
});

const sizes = {
sm: definePartsStyle({
tab: Button.sizes?.sm,
Expand All @@ -53,6 +80,7 @@ const sizes = {
const variants = {
'soft-rounded': variantSoftRounded,
outline: variantOutline,
radio_group: variantRadioGroup,
};

const Tabs = defineMultiStyleConfig({
Expand Down
2 changes: 1 addition & 1 deletion ui/address/AddressContract.pwstory.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import { useRouter } from 'next/router';
import React from 'react';

import useApiQuery from 'lib/api/useApiQuery';
import useContractTabs from 'lib/hooks/useContractTabs';
import getQueryParamString from 'lib/router/getQueryParamString';
import useContractTabs from 'ui/address/contract/useContractTabs';

import AddressContract from './AddressContract';

Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
158 changes: 0 additions & 158 deletions ui/address/contract/ContractCode.pw.tsx

This file was deleted.

Loading

0 comments on commit 70b2a69

Please sign in to comment.