Merge pull request #925 from Keith-CY/improve-qr-scanner

Improve qr scanner
nervosnetwork · Sep 11, 2019 · ae680bf · ae680bf
2 parents d6919c4 + 8a7b246
commit ae680bf
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/packages/neuron-ui/src/components/Receive/index.tsx b/packages/neuron-ui/src/components/Receive/index.tsx
@@ -63,6 +63,7 @@ const Receive = ({
             onQRCodeClick={() => setShowLargeQRCode(true)}
             size={256}
             exportable
+            includeMargin
             dispatch={dispatch}
           />
         </Stack>

diff --git a/packages/neuron-ui/src/widgets/QRCode/index.tsx b/packages/neuron-ui/src/widgets/QRCode/index.tsx
@@ -102,12 +102,18 @@ const QRCode = ({
   qrcode.make()
 
   const cells = qrcode.modules || []
-  const margin = includeMargin ? 4 : 0
+  const margin = includeMargin ? 1 : 0
   const fgPath = generatePath(cells, margin)
   const numCells = cells.length + margin * 2
 
-  const svgStr = `<svg shapeRendering="crispEdges" height="${scale * size}" width="${scale *
-    size}" viewBox="0 0 ${numCells} ${numCells}" ><path fill="${bgColor}" d="M0, 0 h${numCells} v${numCells} H0z" /><path fill="${fgColor}" d="${fgPath}" /></svg>`
+  const svgStr = `<svg shapeRendering="crispEdges"
+    width="${scale * size}"
+    height="${scale * size}"
+    viewBox="0 0 ${numCells} ${numCells}"
+  >
+    <path fill="${bgColor}" d="M0, 0 h${numCells} v${numCells} H0z" />
+    <path fill="${fgColor}" d="${fgPath}" />
+  </svg>`
 
   const onDownload = useCallback(() => {
     if (canvasRef.current === null) {
@@ -147,7 +153,7 @@ const QRCode = ({
   }, [svgStr, size])
 
   return (
-    <Stack tokens={{ childrenGap: 15 }}>
+    <Stack tokens={{ childrenGap: 15 }} horizontalAlign="center" verticalAlign="center">
       <Stack.Item>
         <canvas ref={canvasRef} width={size} height={size} onClick={onQRCodeClick} />
       </Stack.Item>

diff --git a/packages/neuron-ui/src/widgets/QRScanner/index.tsx b/packages/neuron-ui/src/widgets/QRScanner/index.tsx
@@ -88,8 +88,8 @@ const QRScanner = ({ title, label, onConfirm, styles }: QRScannerProps) => {
                   color,
                 })
                 if (verifyAddress(code.data)) {
-                  onConfirm(code.data)
                   onDismiss()
+                  onConfirm(code.data)
                 } else {
                   setData(code.data)
                 }