Skip to content

Commit

Permalink
Merge pull request #3200 from Emurgo/feat/YOEXT-599/create-restore-up…
Browse files Browse the repository at this point in the history
…dates

feat: small revamp updates for the "Create/Restore Flow"
  • Loading branch information
vsubhuman authored May 29, 2023
2 parents 718a6e9 + 8c389dc commit ad765a0
Show file tree
Hide file tree
Showing 8 changed files with 94 additions and 36 deletions.
20 changes: 14 additions & 6 deletions packages/yoroi-extension/app/components/topbar/SidebarRevamp.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,15 @@ import styles from './SidebarRevamp.scss';
import type { SidebarCategoryRevamp } from '../../stores/stateless/sidebarCategories';
import { intlShape } from 'react-intl';
import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
import { ReactComponent as yoroiLogo } from '../../assets/images/sidebar/yoroi_logo.inline.svg';
import { ReactComponent as YoroiLogo } from '../../assets/images/sidebar/yoroi_logo.inline.svg';
import globalMessages from '../../i18n/global-messages';

type Props = {|
+children?: ?Node,
+categories?: Array<SidebarCategoryRevamp>,
+isActiveCategory?: SidebarCategoryRevamp => boolean,
+onCategoryClicked?: SidebarCategoryRevamp => void,
+onLogoClick?: void => void,
|};

@observer
Expand All @@ -28,23 +29,30 @@ export default class SidebarRevamp extends Component<Props> {
children: void,
isActiveCategory: void,
onCategoryClicked: void,
onLogoClick: void,
|} = {
children: undefined,
categories: undefined,
isActiveCategory: undefined,
onCategoryClicked: undefined,
onLogoClick: undefined,
};

render(): Node {
const { intl } = this.context;
const { categories, isActiveCategory, onCategoryClicked } = this.props;
const YoroiLogo = yoroiLogo;
const { categories, isActiveCategory, onCategoryClicked, onLogoClick } = this.props;

return (
<div className={styles.wrapper}>
{this.props.children}
<div className={styles.header}>
<YoroiLogo />
{onLogoClick ? (
<button type="button" onClick={onLogoClick}>
<YoroiLogo />
</button>
) : (
<YoroiLogo />
)}
</div>
<div className={styles.categories}>
{categories
Expand All @@ -68,8 +76,8 @@ export default class SidebarRevamp extends Component<Props> {
</div>
<a
className={styles.faq}
href='https://emurgohelpdesk.zendesk.com/hc/en-us/categories/4412619927695-Yoroi'
target='_blank'
href="https://emurgohelpdesk.zendesk.com/hc/en-us/categories/4412619927695-Yoroi"
target="_blank"
rel="noreferrer"
>
{intl.formatMessage(globalMessages.sidebarFaq)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,49 +6,72 @@ import YoroiLogo from '../../../assets/images/yoroi-logo-shape-blue.inline.svg';
import { defineMessages, intlShape } from 'react-intl';
import { observer } from 'mobx-react';
import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
import { Typography, Box } from '@mui/material';
import { Typography, Box, Button } from '@mui/material';
import globalMessages from '../../../i18n/global-messages';
import { ReactComponent as BackIcon } from '../../../assets/images/assets-page/backarrow.inline.svg';

const messages: * = defineMessages({
subtitle: {
id: 'wallet.add.page.revamp.subtitle',
defaultMessage: '!!!Light wallet for Cardano assets',
},
backButtonLabel: {
id: 'wallet.add.page.revamp.backButtonLabel',
defaultMessage: '!!!Back to current wallet',
},
});

type Props = {|
+goToCurrentWallet: void => void,
+hasAnyWallets: boolean,
|};

@observer
export default class AddWalletPageHeader extends Component<{||}> {
export default class AddWalletPageHeader extends Component<Props> {
static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = {
intl: intlShape.isRequired,
};

render(): Node {
const { intl } = this.context;
const { goToCurrentWallet, hasAnyWallets } = this.props;

return (
<Box
sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
}}
>
<Box>
{hasAnyWallets && (
<Button sx={{ color: 'gray.900' }} onClick={goToCurrentWallet}>
<Box mr="10px">
<BackIcon />
</Box>
<Typography variant="button2" fontWeight={500} color="gray.900">
{intl.formatMessage(messages.backButtonLabel)}
</Typography>
</Button>
)}
<Box
sx={{
width: '56px',
height: '48px',
mb: '24px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
flexDirection: 'column',
}}
>
<img src={YoroiLogo} alt="Yoroi" />
<Box
sx={{
width: '56px',
height: '48px',
mb: '24px',
}}
>
<img src={YoroiLogo} alt="Yoroi" />
</Box>
<Typography variant="h1" fontWeight={500} color="primary.600" mb="8px">
{intl.formatMessage(globalMessages.yoroi)}
</Typography>
<Typography variant="body1" fontWeight={500} color="primary.600">
{intl.formatMessage(messages.subtitle)}
</Typography>
</Box>
<Typography variant="h1" fontWeight={500} color="primary" mb="8px">
{intl.formatMessage(globalMessages.yoroi)}
</Typography>
<Typography variant="body1" fontWeight={500} color="primary">
{intl.formatMessage(messages.subtitle)}
</Typography>
</Box>
);
}
Expand Down
15 changes: 11 additions & 4 deletions packages/yoroi-extension/app/containers/SidebarContainer.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export type GeneratedData = typeof SidebarContainer.prototype.generated;

type Props = {|
...InjectedOrGenerated<GeneratedData>,
+onLogoClick?: void => void,
|};
type InjectedProps = {|
+selectedLayout: string,
Expand All @@ -29,9 +30,16 @@ class SidebarContainer extends Component<AllProps> {
await this.generated.actions.profile.toggleSidebar.trigger();
};

static defaultProps: {|
onLogoClick: void,
|} = {
onLogoClick: undefined,
};

render(): Node {
const { stores, actions } = this.generated;
const { profile } = stores;
const { onLogoClick } = this.props;

const SidebarComponent = (
<Sidebar
Expand All @@ -40,9 +48,7 @@ class SidebarContainer extends Component<AllProps> {
route: category.route,
});
}}
isActiveCategory={category =>
stores.app.currentRoute.startsWith(category.route)
}
isActiveCategory={category => stores.app.currentRoute.startsWith(category.route)}
categories={allCategories.filter(category =>
category.isVisible({
hasAnyWallets: stores.wallets.hasAnyWallets,
Expand All @@ -57,6 +63,7 @@ class SidebarContainer extends Component<AllProps> {

const SidebarRevampComponent = (
<SidebarRevamp
onLogoClick={onLogoClick}
onCategoryClicked={category => {
actions.router.goToRoute.trigger({
route: category.route,
Expand Down Expand Up @@ -130,7 +137,7 @@ class SidebarContainer extends Component<AllProps> {
hasAnyWallets: stores.wallets.hasAnyWallets,
},
delegation: {
getDelegationRequests: stores.delegation.getDelegationRequests
getDelegationRequests: stores.delegation.getDelegationRequests,
},
},
actions: {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -349,6 +349,8 @@ class AddWalletPage extends Component<AllProps> {
onHardwareConnect={() => this.openDialogWrapper(WalletConnectHWOptionDialog)}
onCreate={() => goToRoute.trigger({ route: ROUTES.WALLETS.CREATE_NEW_WALLET })}
onRestore={() => goToRoute.trigger({ route: ROUTES.WALLETS.RESTORE_WALLET })}
goToCurrentWallet={() => goToRoute.trigger({ route: ROUTES.WALLETS.TRANSACTIONS })}
hasAnyWallets={hasAnyWallets}
/>
{activeDialog}
</TopBarLayout>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,22 @@ type Props = {|
+onCreate: void => void,
+onRestore: void => void,
+onHardwareConnect: void => void,
+goToCurrentWallet: void => void,
+hasAnyWallets: boolean,
|};

export default function AddWalletPageRevamp(props: Props): Node {
return (
<Box>
<AddWalletPageHeader />
<AddWalletPageHeader
goToCurrentWallet={props.goToCurrentWallet}
hasAnyWallets={props.hasAnyWallets}
/>
<AddWalletPageContent
onCreate={props.onCreate}
onRestore={props.onRestore}
onHardwareConnect={props.onHardwareConnect}
/>
</Box>
)
}
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import type { GeneratedData as SidebarContainerData } from '../SidebarContainer'
import type { InjectedOrGenerated } from '../../types/injectedPropsType';
import type { NetworkRow } from '../../api/ada/lib/storage/database/primitives/tables';
import { PublicDeriver } from '../../api/ada/lib/storage/models/PublicDeriver';
import { ROUTES } from '../../routes-config';

export const CreateWalletPagePromise: void => Promise<any> = () =>
import('../../components/wallet/create-wallet/CreateWalletPage');
Expand All @@ -27,7 +28,12 @@ export default class CreateWalletPageContainer extends Component<Props> {
return (
<TopBarLayout
banner={<BannerContainer {...this.generated.BannerContainerProps} />}
sidebar={<SidebarContainer {...this.generated.SidebarContainerProps} />}
sidebar={
<SidebarContainer
{...this.generated.SidebarContainerProps}
onLogoClick={() => actions.router.goToRoute.trigger({ route: ROUTES.WALLETS.ADD })}
/>
}
bgcolor="common.white"
>
<Suspense fallback={null}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import TopBarLayout from '../../../components/layout/TopBarLayout';
import BannerContainer from '../../banners/BannerContainer';
import SidebarContainer from '../../SidebarContainer';
import LocalizableError from '../../../i18n/LocalizableError';
import { ROUTES } from '../../../routes-config';

export const RestoreWalletPagePromise: void => Promise<any> = () =>
import('../../../components/wallet/restore/RestoreWalletPage');
Expand All @@ -40,7 +41,12 @@ export default class RestoreWalletPage extends Component<Props> {
return (
<TopBarLayout
banner={<BannerContainer {...this.generated.BannerContainerProps} />}
sidebar={<SidebarContainer {...this.generated.SidebarContainerProps} />}
sidebar={
<SidebarContainer
{...this.generated.SidebarContainerProps}
onLogoClick={() => actions.router.goToRoute.trigger({ route: ROUTES.WALLETS.ADD })}
/>
}
bgcolor="common.white"
>
<RestoreWalletPageComponent
Expand Down
3 changes: 2 additions & 1 deletion packages/yoroi-extension/app/i18n/locales/en-US.json
Original file line number Diff line number Diff line change
Expand Up @@ -466,6 +466,7 @@
"wallet.add.page.revamp.createWallet": "Create new wallet",
"wallet.add.page.revamp.restoreWallet": "Restore existing wallet",
"wallet.add.page.revamp.subtitle": "Light wallet for Cardano assets",
"wallet.add.page.revamp.backButtonLabel": "Back to current wallet",
"wallet.add.page.subtitle.label": "Yoroi light wallet for Cardano",
"wallet.add.page.title": "Your gateway <br> to the <br> financial world",
"wallet.address.category.addressBook": "Addresses that do not belong to you, but are relevant to your wallet",
Expand Down Expand Up @@ -1059,4 +1060,4 @@
"yoroiTransfer.waiting.progressInfo.checkingAddresses": "Checking addresses funds",
"yoroiTransfer.waiting.progressInfo.restoringAddresses": "Fetching addresses",
"yoroiTransfer.waiting.title.label": "Wallet is being restored"
}
}

0 comments on commit ad765a0

Please sign in to comment.