diff --git a/src/components/Stepper/index.jsx b/src/components/Stepper/index.jsx index d256c24f..942f6c10 100644 --- a/src/components/Stepper/index.jsx +++ b/src/components/Stepper/index.jsx @@ -143,12 +143,24 @@ const GnoStepper = (props: Props) => { return ( - {steps.map((label) => ( - - {label} - {activePage(controls, ...rest)} - - ))} + {steps.map((label, index) => { + const labelProps = {} + const isClickable = index < page + + if (isClickable) { + labelProps.onClick = () => { + setPage(index) + } + labelProps.className = classes.pointerCursor + } + + return ( + + {label} + {activePage(controls, ...rest)} + + ) + })} ) }} @@ -162,6 +174,14 @@ const styles = { flex: '1 1 auto', backgroundColor: 'transparent', }, + pointerCursor: { + '& > .MuiStepLabel-iconContainer': { + cursor: 'pointer', + }, + '& > .MuiStepLabel-labelContainer': { + cursor: 'pointer', + }, + }, } export default withStyles(styles)(GnoStepper) diff --git a/src/routes/load/components/DetailsForm/index.jsx b/src/routes/load/components/DetailsForm/index.jsx index bfbdb1a3..f8889afb 100644 --- a/src/routes/load/components/DetailsForm/index.jsx +++ b/src/routes/load/components/DetailsForm/index.jsx @@ -97,10 +97,13 @@ export const safeFieldsValidation = async (values: Object) => { const Details = ({ classes, errors, form }: Props) => ( <> - + You are about to load an existing Gnosis Safe. First, choose a name and enter the Safe address. The name is only - stored locally and will never be shared with Gnosis or any third parties + stored locally and will never be shared with Gnosis or any third parties. +
+ Your connected wallet does not have to be the owner of this Safe. In this case, the interface will provide you a + read-only view.