diff --git a/_raw/locales/en/messages.json b/_raw/locales/en/messages.json index 5930b1e4e84..bc984655fb7 100644 --- a/_raw/locales/en/messages.json +++ b/_raw/locales/en/messages.json @@ -2306,7 +2306,8 @@ "title": "Select import method " }, "importPrivateKey": { - "title": "Import Private Key" + "title": "Import Private Key", + "pasteCleared": "Pasted and clipboard cleared" }, "PasswordCard": { "title": "Set Password", @@ -2319,10 +2320,13 @@ }, "confirmPassword": { "label": "Confirm Password", - "placeholder": "Password" + "placeholder": "Password", + "required": "Please Confirm Password", + "notMatch": "Passwords do not match" } }, - "agree": "I agree to the<1/> <2>Terms of Use and <4>Privacy Policy" + "agree": "I agree to the<1/> <2>Terms of Use and <4>Privacy Policy", + "desc": "It will be used to unlock wallet and encrypt data" }, "successful": { "create": "Created Successfully", @@ -2358,6 +2362,34 @@ "tip1": "1. Open your GridPlus device", "tip2": "2. Connect through Lattice Connector", "connect": "Connect GridPlus" + }, + "importLedger": { + "title": "Ledger", + "tip1": "Plug in your Ledger device.", + "tip2": "Enter your PIN to unlock.", + "tip3": "Open the Ethereum app.", + "connect": "Connect Ledger" + }, + "importKeystone": { + "qrcode": { + "desc": "Scan the QR code on the Keystone hardware wallet" + }, + "usb": { + "desc": "Ensure your Keystone 3 Pro is on the homepage", + "tip1": "Plug in your Keystone device", + "tip2": "Enter your password to unlock", + "tip3": "Approve the connection to your computer", + "connect": "Connect Keystone" + } + }, + "importSafe": { + "title": "Add Safe Address", + "error": { + "required": "Please input address", + "invalid": "Not a valid address" + }, + "placeholder": "Input safe address", + "loading": "Searching the deployed chain of this address" } } }, diff --git a/src/ui/views/NewUserImport/ImportGnosisAddress.tsx b/src/ui/views/NewUserImport/ImportGnosisAddress.tsx index 6f5ce97aba7..d0910089267 100644 --- a/src/ui/views/NewUserImport/ImportGnosisAddress.tsx +++ b/src/ui/views/NewUserImport/ImportGnosisAddress.tsx @@ -126,7 +126,7 @@ export const NewUserImportGnosisAddress = () => { >
- Add Safe Address + {t('page.newUserImport.importSafe.title')}
{ onValuesChange={(changedValues) => { const value = changedValues.address; if (!value) { - setErrorMessage(t('page.importSafe.error.required')); + setErrorMessage( + t('page.newUserImport.importSafe.error.required') + ); return; } if (!isValidAddress(value)) { - setErrorMessage(t('page.importSafe.error.invalid')); + setErrorMessage( + t('page.newUserImport.importSafe.error.invalid') + ); return; } runAsync(value); @@ -167,14 +171,14 @@ export const NewUserImportGnosisAddress = () => { autoSize size="large" autoFocus - placeholder={'Input safe address'} + placeholder={t('page.newUserImport.importSafe.placeholder')} autoComplete="off" />
{loading ? (
- {t('page.importSafe.loading')} + {t('page.newUserImport.importSafe.loading')}
) : ( <> diff --git a/src/ui/views/NewUserImport/ImportKeystone.tsx b/src/ui/views/NewUserImport/ImportKeystone.tsx index 325bf535974..0050c744a72 100644 --- a/src/ui/views/NewUserImport/ImportKeystone.tsx +++ b/src/ui/views/NewUserImport/ImportKeystone.tsx @@ -28,8 +28,6 @@ enum ConnectType { USB = 'usb', } -const RcLogo = NEXT_KEYRING_ICONS[HARDWARE_KEYRING_TYPES.Ledger.type].rcLight; - export const NewUserImportKeystone = () => { const { store, setStore } = useNewUserGuideStore(); const keystoneErrorCatcher = useKeystoneUSBErrorCatcher(); @@ -236,7 +234,7 @@ export const NewUserImportKeystone = () => { {connectType === ConnectType.QRCode ? (

- Scan the QR code on the Keystone hardware wallet + {t('page.newUserImport.importKeystone.qrcode.desc')}

{ ) : (

- Ensure your Keystone 3 Pro is on the homepage + {t('page.newUserImport.importKeystone.usb.desc')}

@@ -288,9 +286,9 @@ export const NewUserImportKeystone = () => { 'text-r-neutral-title1 text-[16px] font-medium leading-[22px] mb-0' )} > -
  • Plug in your Keystone device
    • -
  • Enter your password to unlock
    • -
  • Approve the connection to your computer
    • +
  • {t('page.newUserImport.importKeystone.usb.tip1')}
    • +
  • {t('page.newUserImport.importKeystone.usb.tip2')}
    • +
  • {t('page.newUserImport.importKeystone.usb.tip3')}
    • { 'text-[17px] font-medium' )} > - Connect Keystone + {t('page.newUserImport.importKeystone.usb.connect')}
    )} diff --git a/src/ui/views/NewUserImport/ImportLedger.tsx b/src/ui/views/NewUserImport/ImportLedger.tsx index 9b44c9079ef..330cdeef4c6 100644 --- a/src/ui/views/NewUserImport/ImportLedger.tsx +++ b/src/ui/views/NewUserImport/ImportLedger.tsx @@ -4,7 +4,7 @@ import { useWallet } from '@/ui/utils'; import { LedgerHDPathType } from '@/ui/utils/ledger'; import TransportWebHID from '@ledgerhq/hw-transport-webhid'; import { useMemoizedFn, useRequest } from 'ahooks'; -import { Button, Form, message } from 'antd'; +import { Button, message } from 'antd'; import clsx from 'clsx'; import React from 'react'; import { useTranslation } from 'react-i18next'; @@ -92,7 +92,7 @@ export const NewUserImportLedger = () => { viewBox="0 0 28 28" />

    - {'Ledger'} + {t('page.newUserImport.importLedger.title')}

    @@ -102,9 +102,9 @@ export const NewUserImportLedger = () => { 'text-r-neutral-title1 text-[16px] font-medium leading-[140%] mb-[36px]' )} > -
  • Plug in your Ledger device
    • -
  • Enter your PIN to unlock.
    • -
  • Open the Ethereum app.
    • +
  • {t('page.newUserImport.importLedger.tip1')}
    • +
  • {t('page.newUserImport.importLedger.tip2')}
    • +
  • {t('page.newUserImport.importLedger.tip3')}
    • @@ -120,7 +120,7 @@ export const NewUserImportLedger = () => { 'text-[17px] font-medium' )} > - Connect Ledger + {t('page.newUserImport.importLedger.connect')} ); diff --git a/src/ui/views/NewUserImport/ImportPrivateKey.tsx b/src/ui/views/NewUserImport/ImportPrivateKey.tsx index 24368806d4c..1e68385e9a4 100644 --- a/src/ui/views/NewUserImport/ImportPrivateKey.tsx +++ b/src/ui/views/NewUserImport/ImportPrivateKey.tsx @@ -15,6 +15,11 @@ const Container = styled.div` .ant-input { border-radius: 8px; border: 1px solid var(--r-neutral-line, #e0e5ec); + + &::placeholder { + color: var(--r-neutral-foot, #6a7587); + font-weight: 400; + } } .ant-input:focus, @@ -97,7 +102,9 @@ export const NewUserImportPrivateKey = () => { icon: ( ), - content: t('page.newAddress.seedPhrase.pastedAndClear'), + content: t( + 'page.newUserImport.importPrivateKey.pasteCleared' + ), duration: 2, }); }} diff --git a/src/ui/views/NewUserImport/PasswordCard.tsx b/src/ui/views/NewUserImport/PasswordCard.tsx index 497d87947e1..63f0443586d 100644 --- a/src/ui/views/NewUserImport/PasswordCard.tsx +++ b/src/ui/views/NewUserImport/PasswordCard.tsx @@ -3,14 +3,13 @@ import { openInTab } from '@/ui/utils'; import { useMemoizedFn } from 'ahooks'; import { Button, Form, Input } from 'antd'; import clsx from 'clsx'; +import { sum } from 'lodash'; import React, { useState } from 'react'; import { Trans, useTranslation } from 'react-i18next'; -import { useHistory } from 'react-router-dom'; import styled from 'styled-components'; import { ReactComponent as RcIconCheckCC } from 'ui/assets/icon-checked-cc.svg'; -import { ReactComponent as RcIconUnCheckCC } from 'ui/assets/icon-unchecked-cc.svg'; import { ReactComponent as RcIconSuccessCC } from 'ui/assets/icon-checked-success-cc.svg'; -import { sum } from 'lodash'; +import { ReactComponent as RcIconUnCheckCC } from 'ui/assets/icon-unchecked-cc.svg'; const MINIMUM_PASSWORD_LENGTH = 8; @@ -27,6 +26,13 @@ const Container = styled.div` margin-bottom: 24px; } + .ant-input { + &::placeholder { + color: var(--r-neutral-foot, #6a7587); + font-weight: 400; + } + } + /* .ant-input { border-radius: 8px; border: 1px solid var(--r-neutral-line, #e0e5ec); @@ -100,10 +106,7 @@ export const PasswordCard: React.FC = ({ onSubmit, step, onBack }) => { confirmPassword: string; }>(); - const history = useHistory(); - const handleSubmit = useMemoizedFn(async () => { - // todo await form.validateFields(); onSubmit?.(form.getFieldsValue().password); }); @@ -131,7 +134,7 @@ export const PasswordCard: React.FC = ({ onSubmit, step, onBack }) => { {t('page.newUserImport.PasswordCard.title')}

    - It will be used to unlock wallet and encrypt data + {t('page.newUserImport.PasswordCard.desc')}

    @@ -180,7 +183,9 @@ export const PasswordCard: React.FC = ({ onSubmit, step, onBack }) => { rules={[ { required: true, - message: t('page.createPassword.confirmRequired'), + message: t( + 'page.newUserImport.PasswordCard.form.confirmPassword.required' + ), }, ({ getFieldValue }) => ({ validator(_, value: string) { @@ -188,7 +193,11 @@ export const PasswordCard: React.FC = ({ onSubmit, step, onBack }) => { return Promise.resolve(); } return Promise.reject( - new Error(t('page.createPassword.confirmError')) + new Error( + t( + 'page.newUserImport.PasswordCard.form.confirmPassword.notMatch' + ) + ) ); }, }),