feat(neuron-ui): adjust the layout of receive view to vertical aglinment.

Author: Keith-CY

packages/neuron-ui/src/components/Receive/index.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useCallback, useMemo } from 'react'
 import { RouteComponentProps } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import { Stack, Text, TextField, TooltipHost, Modal, FontSizes, IconButton } from 'office-ui-fabric-react'
+import { Stack, Text, TextField, TooltipHost, Modal, IconButton } from 'office-ui-fabric-react'
 
 import { StateWithDispatch } from 'states/stateProvider/reducer'
 import QRCode from 'widgets/QRCode'
@@ -28,35 +28,43 @@ const Receive = ({
     addPopup('addr-copied')(dispatch)
   }, [accountAddress, dispatch])
 
+  const Address = useMemo(
+    () => (
+      <Stack styles={{ root: { flex: 1, minWidth: 500 } }}>
+        <TooltipHost content={t('receive.click-to-copy')} calloutProps={{ gapSpace: 0 }}>
+          <Stack horizontal horizontalAlign="stretch" tokens={{ childrenGap: 15 }}>
+            <TextField
+              styles={{
+                root: {
+                  flex: 1,
+                  color: '#888',
+                },
+                fieldGroup: {
+                  borderColor: '#eee!important',
+                },
+              }}
+              readOnly
+              placeholder={accountAddress}
+              onClick={copyAddress}
+            />
+            <IconButton iconProps={{ iconName: 'Copy' }} onClick={copyAddress} />
+          </Stack>
+        </TooltipHost>
+      </Stack>
+    ),
+    [copyAddress, accountAddress, t]
+  )
+
   if (!accountAddress) {
     return <div>{t('receive.address-not-found')}</div>
   }
 
   return (
     <>
-      <Stack horizontal tokens={{ childrenGap: 40, padding: '20px 0 0 0' }} horizontalAlign="space-between">
-        <Stack styles={{ root: { flex: 1 } }}>
-          <TooltipHost content={t('receive.click-to-copy')} calloutProps={{ gapSpace: 0 }}>
-            <Stack horizontal horizontalAlign="stretch" tokens={{ childrenGap: 15 }}>
-              <TextField
-                styles={{
-                  root: {
-                    flex: 1,
-                  },
-                  description: {
-                    fontSize: FontSizes.medium,
-                  },
-                }}
-                readOnly
-                placeholder={accountAddress}
-                onClick={copyAddress}
-                description={t('receive.prompt')}
-              />
-              <IconButton iconProps={{ iconName: 'Copy' }} onClick={copyAddress} />
-            </Stack>
-          </TooltipHost>
-        </Stack>
-
+      <Stack tokens={{ childrenGap: 10 }} horizontalAlign="center">
+        <Text as="p" variant="medium">
+          {`${t('receive.address', { network: accountAddress.startsWith('ckb') ? 'CKB Mainnet' : 'CKB Testnet' })}`}
+        </Text>
         <Stack style={{ alignSelf: 'center' }}>
           <QRCode
             value={accountAddress}
@@ -65,8 +73,12 @@ const Receive = ({
             exportable
             includeMargin
             dispatch={dispatch}
+            remark={Address}
           />
         </Stack>
+        <Text as="p" variant="medium">
+          {t('receive.prompt')}
+        </Text>
       </Stack>
 
       <Modal isOpen={showLargeQRCode} onDismiss={() => setShowLargeQRCode(false)}>

packages/neuron-ui/src/locales/en.json

@@ -106,7 +106,8 @@
       "click-to-copy": "Click to copy the address",
       "address-not-found": "Address not found",
       "prompt": "Neuron picks a new receiving address for better privacy. Please go to the Address Book if you want to use a previously used receiving address.",
-      "address-qrcode": "Address QR Code"
+      "address-qrcode": "Address QR Code",
+      "address": "{{network}} Address"
     },
     "history": {
       "meta": "Meta",

packages/neuron-ui/src/locales/zh.json

@@ -106,7 +106,8 @@
       "click-to-copy": "点击复制地址",
       "address-not-found": "未找到地址",
       "prompt": "为了保护隐私，Neuron 会自动选择一个新收款地址。如果您想使用旧的收款地址，请访问地址管理页面。",
-      "address-qrcode": "地址二维码"
+      "address-qrcode": "地址二维码",
+      "address": "{{network}} 地址"
     },
     "history": {
       "meta": "元信息",

packages/neuron-ui/src/widgets/QRCode/index.tsx

@@ -82,6 +82,7 @@ const QRCode = ({
   includeMargin = false,
   exportable = false,
   dispatch,
+  remark,
 }: {
   value: string
   size: number
@@ -93,6 +94,7 @@ const QRCode = ({
   includeMargin?: boolean
   exportable?: boolean
   dispatch: StateDispatch
+  remark?: JSX.Element
 }) => {
   const [t] = useTranslation()
   const qrcode = new QRCodeImpl(-1, level)
@@ -156,8 +158,9 @@ const QRCode = ({
       <Stack.Item>
         <canvas ref={canvasRef} width={size} height={size} onClick={onQRCodeClick} />
       </Stack.Item>
+      {remark || null}
       {exportable ? (
-        <Stack horizontal horizontalAlign="space-between">
+        <Stack horizontal horizontalAlign="space-between" styles={{ root: { minWidth: 500 } }}>
           <DefaultButton onClick={onCopy}>{t('qrcode.copy')}</DefaultButton>
           <DefaultButton onClick={onDownload}>{t('qrcode.save')}</DefaultButton>
         </Stack>