feat(neuron-ui): add a blank margin around the QRCode for improving r…

…ecognization
nervosnetwork · Sep 11, 2019 · 8a7b246 · 8a7b246
1 parent 7db3a9b
commit 8a7b246
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 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>