Skip to content

Commit

Permalink
migration from v4 ui & i18n (#4773)
Browse files Browse the repository at this point in the history 
* ui & i18n

* v4 migration ui & i18n
  • Loading branch information
@franco-chan
franco-chan authored Jun 15, 2024
1 parent ff5589a commit bbc5e64
Show file tree
Hide file tree
Showing 30 changed files with 487 additions and 268 deletions.
2 changes: 1 addition & 1 deletion packages/components/src/actions/Alert/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ export const Alert = AlertFrame.styleable<IAlertProps>((props, ref) => {
</Stack>
) : null}
<YStack flex={1} space="$1">
{title ? <SizableText size="$bodyMd">{title}</SizableText> : null}
{title ? <SizableText size="$bodyMdMedium">{title}</SizableText> : null}
{description ? (
<SizableText size="$bodyMd" color="$textSubdued">
{description}
Expand Down
6 changes: 4 additions & 2 deletions packages/components/src/composite/Dialog/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,8 @@ export function Footer(props: IDialogFooterProps) {
<XStack p="$5" pt="$0" space="$2.5" {...footerProps}>
{showCancelButton ? (
<Button
flex={1}
flexGrow={1}
flexBasis={0}
$md={
{
size: 'large',
Expand All @@ -132,7 +133,8 @@ export function Footer(props: IDialogFooterProps) {
{showConfirmButton ? (
<Button
variant={tone === 'destructive' ? 'destructive' : 'primary'}
flex={1}
flexGrow={1}
flexBasis={0}
disabled={confirmButtonDisabled}
$md={
{
Expand Down
15 changes: 12 additions & 3 deletions packages/kit-bg/src/services/ServiceV4Migration/ServiceV4Migration.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import {
backgroundMethod,
toastIfError,
} from '@onekeyhq/shared/src/background/backgroundDecorators';
import { ETranslations } from '@onekeyhq/shared/src/locale';
import { appLocale } from '@onekeyhq/shared/src/locale/appLocale';
import platformEnv from '@onekeyhq/shared/src/platformEnv';
import accountUtils from '@onekeyhq/shared/src/utils/accountUtils';
import { EReasonForNeedPassword } from '@onekeyhq/shared/types/setting';
Expand Down Expand Up @@ -158,14 +160,16 @@ class ServiceV4Migration extends ServiceBase {
const wallets = this.migrationPayload?.walletsForBackup || [];

const hdWalletSectionData: IV4MigrationBackupSectionDataItem = {
title: 'Wallets',
title: appLocale.intl.formatMessage({ id: ETranslations.global_wallets }),
data: [
// { hdWallet: undefined }
],
};

const importedAccountsSectionData: IV4MigrationBackupSectionDataItem = {
title: 'Private key',
title: appLocale.intl.formatMessage({
id: ETranslations.global_private_key,
}),
data: [
// { importedAccount: undefined }
],
Expand All @@ -177,7 +181,12 @@ class ServiceV4Migration extends ServiceBase {
hdWallet: w.wallet,
backupId: `v4-hd-backup:${w.wallet.id}`,
title: w.wallet.name || '--',
subTitle: `${w?.wallet?.accounts?.length || 0} accounts`,
subTitle: appLocale.intl.formatMessage(
{ id: ETranslations.global_count_accounts },
{
count: w?.wallet?.accounts?.length || 0,
},
),
});
}
if (w.isImported) {
Expand Down
8 changes: 5 additions & 3 deletions packages/kit/src/views/Onboarding/pages/ImportWallet/ImportWalletOptions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,8 +198,8 @@ export function ImportWalletOptions() {
icon: 'CloudOutline',
title: intl.formatMessage({
id: platformEnv.isNativeAndroid
? ETranslations.settings_google_drive_backup
: ETranslations.settings_icloud_backup,
? ETranslations.global_google_drive
: ETranslations.global_icloud,
}),
onPress: handleImportFromCloud,
} as IOptionItem,
Expand All @@ -225,7 +225,9 @@ export function ImportWalletOptions() {
return (
<Page scrollEnabled>
<Page.Header
title={intl.formatMessage({ id: ETranslations.global_import_wallet })}
title={intl.formatMessage({
id: ETranslations.onboarding_choose_import_method,
})}
/>
<Page.Body>
{options.map(({ sectionTitle, data }, index) => (
Expand Down
92 changes: 51 additions & 41 deletions packages/kit/src/views/Onboarding/pages/V4Migration/V4MigrationDone.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,28 +2,20 @@ import { useState } from 'react';

import { useIntl } from 'react-intl';

import type { IPageScreenProps } from '@onekeyhq/components';
import type { IButtonProps } from '@onekeyhq/components';
import {
Button,
Icon,
Page,
ScrollView,
SizableText,
Stack,
usePreventRemove,
} from '@onekeyhq/components';
import useAppNavigation from '@onekeyhq/kit/src/hooks/useAppNavigation';
import {
type EOnboardingPages,
ERootRoutes,
ETabRoutes,
type IOnboardingParamList,
} from '@onekeyhq/shared/src/routes';
import { ETranslations } from '@onekeyhq/shared/src/locale';
import { ERootRoutes, ETabRoutes } from '@onekeyhq/shared/src/routes';
import timerUtils from '@onekeyhq/shared/src/utils/timerUtils';

export function V4MigrationDone({
route,
}: IPageScreenProps<IOnboardingParamList, EOnboardingPages.GetStarted>) {
export function V4MigrationDone() {
const navigation = useAppNavigation();
const intl = useIntl();
const [preventClose, setPreventClose] = useState(true);
Expand All @@ -32,37 +24,55 @@ export function V4MigrationDone({
return (
<Page>
<Page.Header headerShown={false} />
<Page.Body>
<ScrollView>
<Stack py="$4" alignItems="center" justifyContent="center">
<Icon name="CheckRadioOutline" />
<SizableText textAlign="center" size="$heading3xl">
Migration completed
</SizableText>
<SizableText textAlign="center">
You are all set to explore our new features and improvements.
</SizableText>
<Button
variant="primary"
onPress={async () => {
setPreventClose(false);
await timerUtils.wait(300);
navigation.popStack();
await timerUtils.wait(300);
<Page.Body
flex={1}
justifyContent="center"
alignItems="center"
space="$5"
>
<Icon
name="CheckRadioSolid"
size="$24"
$gtMd={{
size: '$20',
}}
color="$iconSuccess"
/>
<SizableText textAlign="center" size="$heading2xl">
{intl.formatMessage({
id: ETranslations.v4_migration_completed_title,
})}
</SizableText>
<SizableText textAlign="center" color="$textSubdued">
{intl.formatMessage({
id: ETranslations.v4_migration_completed_desc,
})}
</SizableText>
<Button
size="large"
$gtMd={
{
size: 'medium',
} as IButtonProps
}
variant="primary"
onPress={async () => {
setPreventClose(false);
await timerUtils.wait(300);
navigation.popStack();
await timerUtils.wait(300);

// navigation.dispatch(
// StackActions.replace(ETabHomeRoutes.TabHome, undefined),
// );
// navigation.dispatch(
// StackActions.replace(ETabHomeRoutes.TabHome, undefined),
// );

navigation.navigate(ERootRoutes.Main, {
screen: ETabRoutes.Home,
});
}}
>
Explore now
</Button>
</Stack>
</ScrollView>
navigation.navigate(ERootRoutes.Main, {
screen: ETabRoutes.Home,
});
}}
>
{intl.formatMessage({ id: ETranslations.global_explore_now })}
</Button>
</Page.Body>
</Page>
);
Expand Down
109 changes: 49 additions & 60 deletions packages/kit/src/views/Onboarding/pages/V4Migration/V4MigrationGetStarted.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { useState } from 'react';
import { useIntl } from 'react-intl';

import type {
IButtonProps,
IKeyOfIcons,
IPageScreenProps,
IXStackProps,
Expand All @@ -25,6 +26,7 @@ import {
} from '@onekeyhq/components';
import backgroundApiProxy from '@onekeyhq/kit/src/background/instance/backgroundApiProxy';
import useAppNavigation from '@onekeyhq/kit/src/hooks/useAppNavigation';
import { ETranslations } from '@onekeyhq/shared/src/locale';
import type { IOnboardingParamList } from '@onekeyhq/shared/src/routes';
import { EOnboardingPages } from '@onekeyhq/shared/src/routes';

Expand Down Expand Up @@ -128,69 +130,56 @@ export function V4MigrationGetStarted({
return (
<Page>
<Page.Header headerShown={false} />
<Page.Body>
<Stack flex={1}>
<ThemeableStack
fullscreen
alignItems="center"
justifyContent="center"
>
<Image
w={360}
h={360}
source={require('@onekeyhq/kit/assets/logo-press.png')}
/>
</ThemeableStack>

<Stack px="$5" pt="$10" mt="auto">
<LinearGradient
position="absolute"
top="$0"
left="$0"
right="$0"
bottom="$0"
colors={['transparent', '$bgApp']}
$platform-native={{
display: 'none',
}}
/>
<Stack zIndex={1}>
{/* Welcome to OneKey
Simple, secure crypto management */}
<Heading size="$heading4xl" textAlign="center">
OneKey 5.0 is here!
</Heading>
<SizableText
size="$bodyLg"
textAlign="center"
color="$textSubdued"
>
Follow the simple steps to securely migrate your data. Quick and
safe, ensuring your assets are transferred smoothly. Ready to
start?
</SizableText>
</Stack>
<Page.Body flex={1} justifyContent="center" alignItems="center">
<Image
w={360}
h={360}
source={require('@onekeyhq/kit/assets/logo-press.png')}
/>
<Stack p="$5" pb="$0" mt="$-16" maxWidth="$96">
<LinearGradient
position="absolute"
top="$0"
left="$0"
right="$0"
bottom="$0"
colors={['transparent', '$bgApp']}
$platform-native={{
display: 'none',
}}
/>
<Stack zIndex={1}>
<Heading size="$heading4xl" textAlign="center">
{intl.formatMessage({
id: ETranslations.v4_migration_welcome_message,
})}
</Heading>
<SizableText
mt="$3"
size="$bodyLg"
textAlign="center"
color="$textSubdued"
>
{intl.formatMessage({
id: ETranslations.v4_migration_welcome_message_desc,
})}
</SizableText>
</Stack>
</Stack>
<Stack
py="$6"
px="$5"
space="$2.5"
$gtMd={{
maxWidth: '$96',
}}
alignSelf="center"
w="100%"
<Button
mt="$8"
size="large"
$gtMd={
{
size: 'medium',
} as IButtonProps
}
variant="primary"
loading={isLoading}
onPress={handleNavigateToV4MigrationPreview}
>
<Button
size="large"
variant="primary"
loading={isLoading}
onPress={handleNavigateToV4MigrationPreview}
>
Start Migration
</Button>
</Stack>
{intl.formatMessage({ id: ETranslations.global_start_migration })}
</Button>
</Page.Body>
</Page>
);
Expand Down
Loading

0 comments on commit bbc5e64

Please sign in to comment.