/
TopBarContainer.js
108 lines (99 loc) · 3.37 KB
/
TopBarContainer.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
// @flow
import React, { Component } from 'react';
import { observer, inject } from 'mobx-react';
import TopBar from '../components/layout/TopBar';
import NodeSyncStatusIcon from '../components/widgets/NodeSyncStatusIcon';
import NewsFeedIcon from '../components/widgets/NewsFeedIcon';
import TadaButton from '../components/widgets/TadaButton';
import WalletTestEnvironmentLabel from '../components/widgets/WalletTestEnvironmentLabel';
import type { InjectedProps } from '../types/injectedPropsType';
import menuIconOpened from '../assets/images/menu-opened-ic.inline.svg';
import menuIconClosed from '../assets/images/menu-ic.inline.svg';
import { matchRoute } from '../utils/routing';
import { ROUTES } from '../routes-config';
type Props = InjectedProps;
@inject('stores', 'actions')
@observer
export default class TopBarContainer extends Component<Props> {
static defaultProps = { actions: null, stores: null };
render() {
const { actions, stores } = this.props;
const {
sidebar,
app,
networkStatus,
wallets,
newsFeed,
appUpdate,
} = stores;
const HAS_TADA_ICON = false;
const HAS_TADA_ICON_ANIMATION = false;
const { isSynced, syncPercentage, isShelleyActivated } = networkStatus;
const { active, isWalletRoute, hasAnyWallets, hasRewardsWallets } = wallets;
const {
currentRoute,
environment: { isMainnet, network },
openExternalLink,
} = app;
const walletRoutesMatch = matchRoute(
`${ROUTES.WALLETS.ROOT}/:id(*page)`,
currentRoute
);
const showSubMenuToggle = isWalletRoute && hasAnyWallets;
const activeWallet = walletRoutesMatch && active != null ? active : null;
const leftIconSVG = sidebar.isShowingSubMenus
? menuIconOpened
: menuIconClosed;
const leftIcon = showSubMenuToggle ? leftIconSVG : null;
const testnetLabel = !isMainnet ? (
<WalletTestEnvironmentLabel network={network} />
) : null;
const onWalletAdd = () => {
actions.router.goToRoute.trigger({
route: ROUTES.WALLETS.ADD,
});
};
const onClickTadaButton = () => {
actions.router.goToRoute.trigger({
route: ROUTES.STAKING.INFO,
});
};
const onTransferFunds = (sourceWalletId: string) =>
actions.wallets.transferFundsSetSourceWalletId.trigger({
sourceWalletId,
});
const { unread } = newsFeed.newsFeedData;
const { displayAppUpdateNewsItem } = appUpdate;
const hasUnreadNews = unread.length > 0;
return (
<TopBar
leftIcon={leftIcon}
onLeftIconClick={actions.sidebar.toggleSubMenus.trigger}
activeWallet={activeWallet}
onTransferFunds={onTransferFunds}
hasRewardsWallets={hasRewardsWallets}
onWalletAdd={onWalletAdd}
onLearnMore={openExternalLink}
isShelleyActivated={isShelleyActivated}
>
{testnetLabel}
<NodeSyncStatusIcon
isSynced={isSynced}
syncPercentage={syncPercentage}
hasTadaIcon={HAS_TADA_ICON}
/>
{HAS_TADA_ICON && (
<TadaButton
onClick={onClickTadaButton}
shouldAnimate={HAS_TADA_ICON_ANIMATION}
/>
)}
<NewsFeedIcon
onNewsFeedIconClick={actions.app.toggleNewsFeed.trigger}
hasNotification={hasUnreadNews}
hasUpdate={displayAppUpdateNewsItem}
/>
</TopBar>
);
}
}