QRCode scanner logic

src/components/Stepper/index.jsx

@@ -21,6 +21,7 @@ type Props = {
   classes: Object,
   initialValues?: Object,
   disabledWhenValidating?: boolean,
+  mutators?: Object,
   testId?: string,
 }
 
@@ -109,7 +110,7 @@ const GnoStepper = (props: Props) => {
   }
 
   const {
-    steps, children, classes, disabledWhenValidating = false, testId,
+    steps, children, classes, disabledWhenValidating = false, testId, mutators,
   } = props
   const activePage = getActivePageFrom(children)
 
@@ -118,7 +119,13 @@ const GnoStepper = (props: Props) => {
 
   return (
     <React.Fragment>
-      <GnoForm onSubmit={handleSubmit} initialValues={values} validation={validate} testId={testId}>
+      <GnoForm
+        onSubmit={handleSubmit}
+        initialValues={values}
+        validation={validate}
+        testId={testId}
+        formMutators={mutators}
+      >
         {(submitting: boolean, validating: boolean, ...rest: any) => {
           const disabled = disabledWhenValidating ? submitting || validating : submitting
           const controls = (

src/routes/open/components/Layout.jsx

@@ -38,6 +38,12 @@ const back = () => {
   history.goBack()
 }
 
+const formMutators = {
+  setValue: ([field, value], state, { changeValue }) => {
+    changeValue(state, field, () => value)
+  },
+}
+
 const Layout = ({
   provider, userAccount, onCallSafeContractSubmit, network,
 }: Props) => {
@@ -58,6 +64,7 @@ const Layout = ({
             onSubmit={onCallSafeContractSubmit}
             steps={steps}
             initialValues={initialValues}
+            mutators={formMutators}
             testId="create-safe-form"
           >
             <StepperPage>{SafeNameField}</StepperPage>

src/routes/open/components/SafeOwnersConfirmationsForm/ScanQRModal/index.jsx

@@ -46,19 +46,22 @@ const styles = () => ({
   button: {
     '&:last-child': {
       marginLeft: sm,
-    }
+    },
   },
 })
 
 type Props = {
   onClose: () => void,
   classes: Object,
+  onScan: Function,
   isOpen: boolean,
 }
 
-const ScanQRModal = ({ classes, onClose, isOpen }: Props) => {
+const ScanQRModal = ({
+  classes, onClose, isOpen, onScan,
+}: Props) => {
   const [hasWebcam, setHasWebcam] = useState(null)
-  const scannerRef = React.createRef()
+  const scannerRef: Object = React.createRef()
   const openImageDialog = () => {
     scannerRef.current.openImageDialog()
   }
@@ -101,7 +104,7 @@ const ScanQRModal = ({ classes, onClose, isOpen }: Props) => {
             ref={scannerRef}
             legacyMode={!hasWebcam}
             onScan={(data) => {
-              if (data) console.log(data)
+              if (data) onScan(data)
             }}
             onError={(err) => {
               console.error(err)
@@ -112,7 +115,14 @@ const ScanQRModal = ({ classes, onClose, isOpen }: Props) => {
       </Col>
       <Hairline />
       <Row align="center" className={classes.buttonRow}>
-        <Button color="secondary" className={classes.button} minHeight={42} minWidth={140} onClick={onClose} variant="contained">
+        <Button
+          color="secondary"
+          className={classes.button}
+          minHeight={42}
+          minWidth={140}
+          onClick={onClose}
+          variant="contained"
+        >
           Close
         </Button>
         <Button

src/routes/open/components/SafeOwnersConfirmationsForm/ScanQRModal/style.js

@@ -0,0 +1 @@
+// @flow

src/routes/open/components/SafeOwnersConfirmationsForm/index.jsx

@@ -66,22 +66,24 @@ export const calculateValuesAfterRemoving = (index: number, notRemovedOwners: nu
 
 const SafeOwners = (props: Props) => {
   const {
-    classes, errors, otherAccounts, values, updateInitialProps,
+    classes, errors, otherAccounts, values, updateInitialProps, form,
   } = props
   const [numOwners, setNumOwners] = useState<number>(1)
   const [qrModalOpen, setQrModalOpen] = useState<boolean>(false)
+  const [scanQrForOwnerName, setScanQrForOwnerName] = useState<string | null>(null)
   const validOwners = getNumOwnersFrom(values)
 
-  const openQrModal = () => {
+  const openQrModal = (ownerName) => {
+    setScanQrForOwnerName(ownerName)
     setQrModalOpen(true)
   }
+
   const closeQrModal = () => {
     setQrModalOpen(false)
   }
 
   const onRemoveRow = (index: number) => () => {
     if (numOwners === 2) {
-      const { form } = props
       form.reset()
     } else {
       const initialValues = calculateValuesAfterRemoving(index, numOwners, values)
@@ -95,6 +97,11 @@ const SafeOwners = (props: Props) => {
     setNumOwners(numOwners + 1)
   }
 
+  const handleScan = (value) => {
+    form.mutators.setValue(scanQrForOwnerName, value)
+    closeQrModal()
+  }
+
   return (
     <React.Fragment>
       <Block className={classes.title}>
@@ -145,7 +152,14 @@ const SafeOwners = (props: Props) => {
                 />
               </Col>
               <Col xs={1} center="xs" middle="xs" className={classes.remove}>
-                <Img src={QRIcon} height={20} alt="Scan QR" onClick={openQrModal} />
+                <Img
+                  src={QRIcon}
+                  height={20}
+                  alt="Scan QR"
+                  onClick={() => {
+                    openQrModal(addressName)
+                  }}
+                />
               </Col>
               <Col xs={1} center="xs" middle="xs" className={classes.remove}>
                 {index > 0 && <Img src={trash} height={20} alt="Delete" onClick={onRemoveRow(index)} />}
@@ -191,7 +205,7 @@ owner(s)
           </Col>
         </Row>
       </Block>
-      {qrModalOpen && <ScanQRModal isOpen={qrModalOpen} onClose={closeQrModal} />}
+      {qrModalOpen && <ScanQRModal isOpen={qrModalOpen} onScan={handleScan} onClose={closeQrModal} />}
     </React.Fragment>
   )
 }