Allow passing button labels to Stepper component, add CopyBtn tooltip

src/components/CopyBtn/index.jsx

@@ -27,8 +27,8 @@ type CopyBtnProps = {
 }
 
 const CopyBtn = ({ content, classes }: CopyBtnProps) => (navigator.clipboard ? (
-  <div className={classes.container}>
+  <div className={classes.container} title="Copy to clipboard">
-    <Img src={CopyIcon} height={20} alt="Click to copy" onClick={() => copyToClipboard(content)} />
+    <Img src={CopyIcon} height={20} alt="Copy to clipboard" onClick={() => copyToClipboard(content)} />
   </div>
 ) : null)
 

src/components/Stepper/Controls/index.jsx

@@ -26,24 +26,34 @@ type Props = {
   lastPage: boolean,
   disabled: boolean,
   penultimate: boolean,
+  currentStep?: number,
+  buttonLabels?: Array<string>,
 }
 
 const Controls = ({
-  onPrevious, firstPage, penultimate, lastPage, disabled,
+  onPrevious,
+  firstPage,
+  penultimate,
+  lastPage,
+  disabled,
+  currentStep,
+  buttonLabels,
 }: Props) => {
-  // eslint-disable-next-line
-  const next = firstPage ? 'Start' : penultimate ? 'Review' : lastPage ? 'Submit' : 'Next'
   const back = firstPage ? 'Cancel' : 'Back'
 
+  let next
+  if (!buttonLabels) {
+    // eslint-disable-next-line
+    next = firstPage ? 'Start' : penultimate ? 'Review' : lastPage ? 'Submit' : 'Next'
+  } else {
+    // $FlowFixMe
+    next = buttonLabels[currentStep]
+  }
+
   return (
     <Row style={controlStyle} align="end" grow>
       <Col xs={12} end="xs">
-        <Button
+        <Button style={firstButtonStyle} type="button" onClick={onPrevious} size="small">
-          style={firstButtonStyle}
-          type="button"
-          onClick={onPrevious}
-          size="small"
-        >
           {back}
         </Button>
         <Button

src/components/Stepper/index.jsx

@@ -19,6 +19,7 @@ type Props = {
   onSubmit: (values: Object) => Promise<void>,
   children: React.Node,
   classes: Object,
+  buttonLabels: Array<string>,
   initialValues?: Object,
   disabledWhenValidating?: boolean,
   mutators?: Object,
@@ -110,7 +111,7 @@ const GnoStepper = (props: Props) => {
   }
 
   const {
-    steps, children, classes, disabledWhenValidating = false, testId, mutators,
+    steps, children, classes, disabledWhenValidating = false, testId, mutators, buttonLabels,
   } = props
   const activePage = getActivePageFrom(children)
 
@@ -137,6 +138,8 @@ const GnoStepper = (props: Props) => {
                 firstPage={page === 0}
                 lastPage={lastPage}
                 penultimate={penultimate}
+                buttonLabels={buttonLabels}
+                currentStep={page}
               />
             </>
           )

src/routes/load/components/Layout.jsx

@@ -35,6 +35,8 @@ const formMutators = {
   },
 }
 
+const buttonLabels = ['Next', 'Review', 'Load']
+
 const Layout = ({
   provider, onLoadSafeSubmit, network, userAddress,
 }: Props) => {
@@ -56,6 +58,7 @@ const Layout = ({
             steps={steps}
             initialValues={initialValues}
             mutators={formMutators}
+            buttonLabels={buttonLabels}
             testId="load-safe-form"
           >
             <StepperPage validate={safeFieldsValidation}>{DetailsForm}</StepperPage>