chore(i18n): add i18n text for qr

src/_locales/en/messages.json

@@ -123,10 +123,10 @@
         "message": "Keep your backups carefully"
     },
     "welcome_1a3_description1": {
-        "message": "Our extension is asking you to download your key as a file. Back it up often."
+        "message": "Our extension is asking you to download your key as a file."
     },
     "welcome_1a3_description2": {
-        "message": "And export backups frequently!"
+        "message": "Back it up often."
     },
     "welcome_1a3_done_button": {
         "message": "Got it!"
@@ -182,6 +182,15 @@
     "welcome_1b_title": {
         "message": "Restore your keypair"
     },
+    "welcome_1b_tabs_backup": {
+        "message": "Select the backup file"
+    },
+    "welcome_1b_tabs_qr": {
+        "message": "Scan the QR Code"
+    },
+    "welcome_1b_tabs_text": {
+        "message": "Paste the content of the backup file by yourself"
+    },
     "welcome_1b_dragging": {
         "message": "Drag your key backup into this dialog"
     },
@@ -191,6 +200,24 @@
     "welcome_1b_file_selected": {
         "message": "Selected exported key backup: $1"
     },
+    "welcome_1b_qr_0": {
+        "message": "You can find QR Code by"
+    },
+    "welcome_1b_qr_1": {
+        "message": "1. right-click the icon of the Maskbook in the browser address bar"
+    },
+    "welcome_1b_qr_2": {
+        "message": "2. click \"Options\""
+    },
+    "welcome_1b_qr_3": {
+        "message": "3. click \"Setup for Mobile\""
+    },
+    "welcome_1b_qr_error_1": {
+        "message": "There is an error occur during the scanning."
+    },
+    "welcome_1b_qr_error_2": {
+        "message": "You may try other ways to restore your account."
+    },
     "welcome_2_title": {
         "message": "You're done!"
     },

src/_locales/zh/messages.json

@@ -124,7 +124,7 @@
         "message": "請妥善保管備份檔案"
     },
     "welcome_1a3_description1": {
-        "message": "稍後會有一個保存提示，請妥善保管備份檔案。記得經常備份！"
+        "message": "稍後會有一個保存提示，請妥善保管備份檔案。"
     },
     "welcome_1a3_description2": {
         "message": "記得經常創建新備份！"
@@ -183,6 +183,15 @@
     "welcome_1b_title": {
         "message": "導入備份檔案"
     },
+    "welcome_1b_tabs_backup": {
+        "message": "選擇備份檔案"
+    },
+    "welcome_1b_tabs_qr": {
+        "message": "掃描 QR 碼"
+    },
+    "welcome_1b_tabs_text": {
+        "message": "手動貼入備份檔案的内容"
+    },
     "welcome_1b_dragging": {
         "message": "將備份檔案拖拽到此處"
     },
@@ -192,6 +201,24 @@
     "welcome_1b_file_selected": {
         "message": "已選取備份檔案：$1"
     },
+    "welcome_1b_qr_0": {
+        "message": "你可以以以下方式找到 QR 碼"
+    },
+    "welcome_1b_qr_1": {
+        "message": "1. 右鍵點擊瀏覽器右上方的 Maskbook 按鈕"
+    },
+    "welcome_1b_qr_2": {
+        "message": "2. 點擊「選項」"
+    },
+    "welcome_1b_qr_3": {
+        "message": "3. 點擊「設定移動版」"
+    },
+    "welcome_1b_qr_error_1": {
+        "message": "掃描過程中出現錯誤"
+    },
+    "welcome_1b_qr_error_2": {
+        "message": "你或許可以試試其他方式來恢復賬號設定。"
+    },
     "welcome_2_title": {
         "message": "完畢！"
     },

src/components/Welcomes/1b1.tsx

@@ -109,14 +109,13 @@ export default function Welcome({ back, restore }: Props) {
                 indicatorColor="primary"
                 textColor="primary"
                 aria-label="icon tabs example">
-                {/* // TODO: i18n */}
-                <Tab icon={<FolderOpen />} aria-label="select backup file" />
+                <Tab icon={<FolderOpen />} aria-label={geti18nString('welcome_1b_tabs_backup')} />
                 <Tab
                     disabled={!('BarcodeDetector' in window || isWKWebkit)}
                     icon={<Camera />}
-                    aria-label="scan QR code"
+                    aria-label={geti18nString('welcome_1b_tabs_qr')}
                 />
-                <Tab icon={<Text />} aria-label="paste the JSON by yourself" />
+                <Tab icon={<Text />} aria-label={geti18nString('welcome_1b_tabs_text')} />
             </Tabs>
             <main className={classes.main}>
                 {tab === 0 ? FileUI() : null}
@@ -179,13 +178,12 @@ export default function Welcome({ back, restore }: Props) {
     function QR() {
         return (
             <>
-                {/* // TODO i18n */}
-                <Typography variant="h5">Scan the QR Code</Typography>
+                <Typography variant="h5">{geti18nString('welcome_1b_tabs_qr')}</Typography>
                 <Typography variant="body1">
-                    You can find QR Code by <br />
-                    1. right-click the icon of the Maskbook in the browser address bar <br />
-                    2. click "Options" <br />
-                    3. click "Setup for Mobile"
+                    {geti18nString('welcome_1b_qr_0')} <br />
+                    {geti18nString('welcome_1b_qr_1')} <br />
+                    {geti18nString('welcome_1b_qr_2')} <br />
+                    {geti18nString('welcome_1b_qr_3')}
                 </Typography>
                 <QRScanner
                     onError={() => setError(true)}
@@ -196,8 +194,10 @@ export default function Welcome({ back, restore }: Props) {
                 />
                 {qrError ? (
                     <div className={classes.videoError}>
+                        {geti18nString('welcome_1b_qr_error_1')}
                         There is an error occur during the scanning.
                         <br />
+                        {geti18nString('welcome_1b_qr_error_2')}
                         You may try other ways to restore your account.
                     </div>
                 ) : null}