From 7e6a14f2c98357871a8deb3ab82bf232c5fb4102 Mon Sep 17 00:00:00 2001 From: Margaret Ma Date: Wed, 12 Jun 2024 15:57:00 -0400 Subject: [PATCH] add account address pub key for starknet (#78) --- .changeset/few-pens-brake.md | 5 ++ .../Form/ChainConfigurationForm.test.tsx | 2 + .../Form/ChainConfigurationForm.tsx | 90 ++++++++++++++++--- .../useFeedsManagersWithProposalsQuery.ts | 1 + .../FeedsManager/EditSupportedChainDialog.tsx | 1 + .../FeedsManager/NewSupportedChainDialog.tsx | 1 + .../FeedsManager/SupportedChainsCard.tsx | 9 ++ 7 files changed, 97 insertions(+), 12 deletions(-) create mode 100644 .changeset/few-pens-brake.md diff --git a/.changeset/few-pens-brake.md b/.changeset/few-pens-brake.md new file mode 100644 index 00000000..112c5998 --- /dev/null +++ b/.changeset/few-pens-brake.md @@ -0,0 +1,5 @@ +--- +'@smartcontractkit/operator-ui': patch +--- + +Add account address public key field if the chain selected is for starknet diff --git a/src/components/Form/ChainConfigurationForm.test.tsx b/src/components/Form/ChainConfigurationForm.test.tsx index 16f7fc9e..96d2dfcf 100644 --- a/src/components/Form/ChainConfigurationForm.test.tsx +++ b/src/components/Form/ChainConfigurationForm.test.tsx @@ -66,6 +66,7 @@ describe('ChainConfigurationForm', () => { chainID: '', chainType: '', accountAddr: '', + accountAddrPubKey: '', adminAddr: '', fluxMonitorEnabled: false, ocr1Enabled: false, @@ -126,6 +127,7 @@ describe('ChainConfigurationForm', () => { chainID: '', chainType: '', accountAddr: '', + accountAddrPubKey: '', adminAddr: '', fluxMonitorEnabled: false, ocr1Enabled: false, diff --git a/src/components/Form/ChainConfigurationForm.tsx b/src/components/Form/ChainConfigurationForm.tsx index 84bc8bc2..aa39490d 100644 --- a/src/components/Form/ChainConfigurationForm.tsx +++ b/src/components/Form/ChainConfigurationForm.tsx @@ -24,6 +24,7 @@ import Typography from '@material-ui/core/Typography' export type FormValues = { accountAddr: string + accountAddrPubKey?: string | null adminAddr: string chainID: string chainType: string @@ -46,10 +47,15 @@ export type FormValues = { ocr2RebalancerPluginEnabled: boolean } +const isStarknet = (chainID: string): boolean => { + return chainID === 'SN_MAIN' || chainID === 'SN_SEPOLIA' +} + const ValidationSchema = Yup.object().shape({ chainID: Yup.string().required('Required'), chainType: Yup.string().required('Required'), accountAddr: Yup.string().required('Required'), + accountAddrPubKey: Yup.string().nullable(), adminAddr: Yup.string().required('Required'), ocr1Multiaddr: Yup.string() .when(['ocr1Enabled', 'ocr1IsBootstrap'], { @@ -103,13 +109,22 @@ const styles = (theme: Theme) => { } // A custom account address field which clears the input based on the chain id -// value changing -const AccountAddrField = (props: FieldAttributes) => { +// value changing, and also allows user to input their own value if none is available in the list. +interface AccountAddrFieldProps extends FieldAttributes { + chainAccounts: { address: string }[] +} + +const AccountAddrField = ({ + chainAccounts, + ...props +}: AccountAddrFieldProps) => { const { values: { chainID, accountAddr }, setFieldValue, } = useFormikContext() + const [isCustom, setIsCustom] = React.useState(false) + const prevChainID = React.useRef() React.useEffect(() => { prevChainID.current = chainID @@ -118,10 +133,67 @@ const AccountAddrField = (props: FieldAttributes) => { React.useEffect(() => { if (chainID !== prevChainID.current) { setFieldValue(props.name, '') + setIsCustom(false) // Reset custom address state when chainID changes + } + }, [chainID, setFieldValue, props.name]) + + const handleSelectChange = (event: React.ChangeEvent<{ value: unknown }>) => { + const value = event.target.value as string + if (value === 'custom') { + setIsCustom(true) + setFieldValue(props.name, '') + } else { + setIsCustom(false) + setFieldValue(props.name, value) } - }, [chainID, setFieldValue, accountAddr, props.name]) + } - return + return ( + <> + {!isStarknet(chainID) && ( + + {chainAccounts.map((account) => ( + + {account.address} + + ))} + + )} + {isStarknet(chainID) && ( + + )} + {isStarknet(chainID) && ( +
+ +
+ )} + + ) } export interface Props extends WithStyles { @@ -185,7 +257,6 @@ export const ChainConfigurationForm = withStyles(styles)( required fullWidth disabled - helperText="Only EVM is currently supported" > EVM @@ -227,16 +298,11 @@ export const ChainConfigurationForm = withStyles(styles)( fullWidth select helperText="The account address used for this chain" + chainAccounts={chainAccounts} FormHelperTextProps={{ 'data-testid': 'accountAddr-helper-text', }} - > - {chainAccounts.map((account) => ( - - {account.address} - - ))} - + /> diff --git a/src/hooks/queries/useFeedsManagersWithProposalsQuery.ts b/src/hooks/queries/useFeedsManagersWithProposalsQuery.ts index d5566730..9cc6e066 100644 --- a/src/hooks/queries/useFeedsManagersWithProposalsQuery.ts +++ b/src/hooks/queries/useFeedsManagersWithProposalsQuery.ts @@ -7,6 +7,7 @@ const FEEDS_MANAGER__CHAIN_CONFIG_FIELDS = gql` chainType accountAddr adminAddr + accountAddrPubKey fluxMonitorJobConfig { enabled } diff --git a/src/screens/FeedsManager/EditSupportedChainDialog.tsx b/src/screens/FeedsManager/EditSupportedChainDialog.tsx index a2d4e969..2638c0d7 100644 --- a/src/screens/FeedsManager/EditSupportedChainDialog.tsx +++ b/src/screens/FeedsManager/EditSupportedChainDialog.tsx @@ -60,6 +60,7 @@ export const EditSupportedChainDialog = ({ chainType: 'EVM', accountAddr: cfg.accountAddr, adminAddr: cfg.adminAddr, + accountAddrPubKey: cfg.accountAddrPubKey, fluxMonitorEnabled: cfg.fluxMonitorJobConfig.enabled, ocr1Enabled: cfg.ocr1JobConfig.enabled, ocr1IsBootstrap: cfg.ocr1JobConfig.isBootstrap, diff --git a/src/screens/FeedsManager/NewSupportedChainDialog.tsx b/src/screens/FeedsManager/NewSupportedChainDialog.tsx index 72b0a4d5..0f1701ef 100644 --- a/src/screens/FeedsManager/NewSupportedChainDialog.tsx +++ b/src/screens/FeedsManager/NewSupportedChainDialog.tsx @@ -50,6 +50,7 @@ export const NewSupportedChainDialog = ({ onClose, open, onSubmit }: Props) => { chainType: 'EVM', accountAddr: '', adminAddr: '', + accountAddrPubKey: '', fluxMonitorEnabled: false, ocr1Enabled: false, ocr1IsBootstrap: false, diff --git a/src/screens/FeedsManager/SupportedChainsCard.tsx b/src/screens/FeedsManager/SupportedChainsCard.tsx index 67f665bf..db4912a4 100644 --- a/src/screens/FeedsManager/SupportedChainsCard.tsx +++ b/src/screens/FeedsManager/SupportedChainsCard.tsx @@ -318,6 +318,7 @@ export const SupportedChainsCard = withStyles(styles)( chainType: values.chainType, accountAddr: values.accountAddr, adminAddr: values.adminAddr, + accountAddrPubKey: values.accountAddrPubKey, fluxMonitorEnabled: values.fluxMonitorEnabled, ocr1Enabled: values.ocr1Enabled, ocr1IsBootstrap: values.ocr1IsBootstrap, @@ -394,6 +395,7 @@ export const SupportedChainsCard = withStyles(styles)( input: { accountAddr: values.accountAddr, adminAddr: values.adminAddr, + accountAddrPubKey: values.accountAddrPubKey, fluxMonitorEnabled: values.fluxMonitorEnabled, ocr1Enabled: values.ocr1Enabled, ocr1IsBootstrap: values.ocr1IsBootstrap, @@ -499,6 +501,13 @@ export const SupportedChainsCard = withStyles(styles)( + {(cfg.chainID === 'SN_MAIN' || + cfg.chainID === 'SN_SEPOLIA') && ( + + + + + )}