Skip to content

Commit

Permalink
fix: i18n
Browse files Browse the repository at this point in the history
  • Loading branch information
@cs1707
cs1707 committed Nov 22, 2024
1 parent d5bdfc0 commit b9b1d69
Show file tree
Hide file tree
Showing 6 changed files with 82 additions and 32 deletions.
38 changes: 35 additions & 3 deletions _raw/locales/en/messages.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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</2> and <4>Privacy Policy</4>"
"agree": "I agree to the<1/> <2>Terms of Use</2> and <4>Privacy Policy</4>",
"desc": "It will be used to unlock wallet and encrypt data"
},
"successful": {
"create": "Created Successfully",
Expand Down Expand Up @@ -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"
}
}
},
Expand Down
14 changes: 9 additions & 5 deletions src/ui/views/NewUserImport/ImportGnosisAddress.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,7 @@ export const NewUserImportGnosisAddress = () => {
>
<div className="flex-1 mt-[18px]">
<div className="text-r-neutral-title1 text-center text-[20px] font-semibold leading-[24px]">
Add Safe Address
{t('page.newUserImport.importSafe.title')}
</div>
<div className="relative mt-[20px]">
<Form
Expand All @@ -137,11 +137,15 @@ export const NewUserImportGnosisAddress = () => {
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);
Expand All @@ -167,14 +171,14 @@ export const NewUserImportGnosisAddress = () => {
autoSize
size="large"
autoFocus
placeholder={'Input safe address'}
placeholder={t('page.newUserImport.importSafe.placeholder')}
autoComplete="off"
/>
</Form.Item>
</Form>
{loading ? (
<div className="loading">
<LoadingOutlined /> {t('page.importSafe.loading')}
<LoadingOutlined /> {t('page.newUserImport.importSafe.loading')}
</div>
) : (
<>
Expand Down
14 changes: 6 additions & 8 deletions src/ui/views/NewUserImport/ImportKeystone.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -236,7 +234,7 @@ export const NewUserImportKeystone = () => {
{connectType === ConnectType.QRCode ? (
<div className="mt-[16px] pb-[30px]">
<p className="text-r-neutral-foot text-[14px] leading-[17px] text-center mb-[20px]">
Scan the QR code on the Keystone hardware wallet
{t('page.newUserImport.importKeystone.qrcode.desc')}
</p>
<div>
<div
Expand Down Expand Up @@ -278,7 +276,7 @@ export const NewUserImportKeystone = () => {
) : (
<div className="mt-[16px]">
<p className="text-r-neutral-foot text-[14px] leading-[17px] text-center mb-[20px]">
Ensure your Keystone 3 Pro is on the homepage
{t('page.newUserImport.importKeystone.usb.desc')}
</p>

<div className="flex justify-center mb-[30px]">
Expand All @@ -288,9 +286,9 @@ export const NewUserImportKeystone = () => {
'text-r-neutral-title1 text-[16px] font-medium leading-[22px] mb-0'
)}
>
<li>Plug in your Keystone device</li>
<li>Enter your password to unlock</li>
<li>Approve the connection to your computer</li>
<li>{t('page.newUserImport.importKeystone.usb.tip1')}</li>
<li>{t('page.newUserImport.importKeystone.usb.tip2')}</li>
<li>{t('page.newUserImport.importKeystone.usb.tip3')}</li>
</ul>
</div>
<img
Expand All @@ -307,7 +305,7 @@ export const NewUserImportKeystone = () => {
'text-[17px] font-medium'
)}
>
Connect Keystone
{t('page.newUserImport.importKeystone.usb.connect')}
</Button>
</div>
)}
Expand Down
12 changes: 6 additions & 6 deletions src/ui/views/NewUserImport/ImportLedger.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -92,7 +92,7 @@ export const NewUserImportLedger = () => {
viewBox="0 0 28 28"
/>
<h1 className="text-r-neutral-title1 text-center text-[24px] font-semibold leading-[29px]">
{'Ledger'}
{t('page.newUserImport.importLedger.title')}
</h1>
</header>
<main>
Expand All @@ -102,9 +102,9 @@ export const NewUserImportLedger = () => {
'text-r-neutral-title1 text-[16px] font-medium leading-[140%] mb-[36px]'
)}
>
<li>Plug in your Ledger device</li>
<li>Enter your PIN to unlock.</li>
<li>Open the Ethereum app.</li>
<li>{t('page.newUserImport.importLedger.tip1')}</li>
<li>{t('page.newUserImport.importLedger.tip2')}</li>
<li>{t('page.newUserImport.importLedger.tip3')}</li>
</ul>
<img src="/images/ledger-plug-1.png" className="w-[240px] mx-auto" />
</main>
Expand All @@ -120,7 +120,7 @@ export const NewUserImportLedger = () => {
'text-[17px] font-medium'
)}
>
Connect Ledger
{t('page.newUserImport.importLedger.connect')}
</Button>
</Card>
);
Expand Down
9 changes: 8 additions & 1 deletion src/ui/views/NewUserImport/ImportPrivateKey.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -97,7 +102,9 @@ export const NewUserImportPrivateKey = () => {
icon: (
<img src={IconSuccess} className="icon icon-success" />
),
content: t('page.newAddress.seedPhrase.pastedAndClear'),
content: t(
'page.newUserImport.importPrivateKey.pasteCleared'
),
duration: 2,
});
}}
Expand Down
27 changes: 18 additions & 9 deletions src/ui/views/NewUserImport/PasswordCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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);
Expand Down Expand Up @@ -100,10 +106,7 @@ export const PasswordCard: React.FC<Props> = ({ onSubmit, step, onBack }) => {
confirmPassword: string;
}>();

const history = useHistory();

const handleSubmit = useMemoizedFn(async () => {
// todo
await form.validateFields();
onSubmit?.(form.getFieldsValue().password);
});
Expand Down Expand Up @@ -131,7 +134,7 @@ export const PasswordCard: React.FC<Props> = ({ onSubmit, step, onBack }) => {
{t('page.newUserImport.PasswordCard.title')}
</h1>
<p className="text-center text-r-neutral-foot text-[14px] leading-[17px]">
It will be used to unlock wallet and encrypt data
{t('page.newUserImport.PasswordCard.desc')}
</p>
</hgroup>

Expand Down Expand Up @@ -180,15 +183,21 @@ export const PasswordCard: React.FC<Props> = ({ onSubmit, step, onBack }) => {
rules={[
{
required: true,
message: t('page.createPassword.confirmRequired'),
message: t(
'page.newUserImport.PasswordCard.form.confirmPassword.required'
),
},
({ getFieldValue }) => ({
validator(_, value: string) {
if (!value || getFieldValue('password') === value) {
return Promise.resolve();
}
return Promise.reject(
new Error(t('page.createPassword.confirmError'))
new Error(
t(
'page.newUserImport.PasswordCard.form.confirmPassword.notMatch'
)
)
);
},
}),
Expand Down

0 comments on commit b9b1d69

Please sign in to comment.