forked from GenesisKernel/genesis-front
-
Notifications
You must be signed in to change notification settings - Fork 6
/
WalletButton.tsx
150 lines (136 loc) · 5.67 KB
/
WalletButton.tsx
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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
/*---------------------------------------------------------------------------------------------
* Copyright (c) EGAAS S.A. All rights reserved.
* See LICENSE in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import React from 'react';
import styled from 'styled-components';
import { FormattedMessage } from 'react-intl';
import { Button, Clearfix } from 'react-bootstrap';
import { IAccount, IRoleInfo, IEcosystemInfo } from 'apla/api';
import { INotificationsMessage } from 'apla/socket';
import Avatar from 'containers/Avatar';
import RoleButton from './RoleButton';
export interface IWalletButtonProps {
className?: string;
wallet: IAccount;
notifications: INotificationsMessage[];
onCopy: () => void;
onRemove: () => void;
onSelect: (params: { access: IEcosystemInfo, role: IRoleInfo }) => void;
onRegister?: () => void;
}
const getNotificationsCount = (notifications: INotificationsMessage[], role: string, ecosystem: string) => {
const value = notifications.find(l => l.role === role && l.ecosystem === ecosystem);
return value ? value.count : 0;
};
const WalletButton: React.SFC<IWalletButtonProps> = (props) => (
<Clearfix componentClass="div" className={props.className}>
<div className="wallet-icon">
<em className="text-primary icon-wallet" />
</div>
<div className="wallet-head">
<h4 className="wallet-name">
{props.wallet.address ?
(
<span>{props.wallet.address}</span>
) :
(
<FormattedMessage id="auth.wallet.unregistered" defaultMessage="Unregistered account" />
)
}
</h4>
{0 === props.wallet.access.length && props.onRegister && (
<div className="text-danger">
<FormattedMessage id="auth.wallet.register.desc" defaultMessage="This account is pending registration. Click register to begin the process" />
</div>
)}
<div>
{0 === props.wallet.access.length && props.onRegister && (
<Button className="btn-action" bsStyle="link" onClick={props.onRegister}>
<FormattedMessage id="auth.wallet.register" defaultMessage="Register" />
</Button>
)}
<Button className="btn-action" bsStyle="link" onClick={props.onCopy}>
<FormattedMessage id="auth.wallet.share" defaultMessage="Share" />
</Button>
<Button className="btn-action" bsStyle="link" onClick={props.onRemove}>
<FormattedMessage id="auth.wallet.remove" defaultMessage="Remove" />
</Button>
</div>
</div>
<div>
{props.wallet.access.map(access => (
<div key={access.ecosystem} className="wallet-access">
<div className="wallet-child media-box" key={access.ecosystem}>
<div className="pull-left">
<Avatar
size={44}
account={props.wallet.address}
ecosystem={access.ecosystem}
/>
</div>
<div className="wallet-child-content media-box-body clearfix">
<div>
<div><b>({access.ecosystem}) {access.name && access.name}</b></div>
<div>
<span>
<FormattedMessage id="auth.login.as" defaultMessage="Login with role" />:
</span>
<RoleButton className="wallet-btn" badge={getNotificationsCount(props.notifications, '0', access.ecosystem)} onClick={() => props.onSelect({ access, role: null })}>
<FormattedMessage id="auth.role.guest" defaultMessage="Guest" />
</RoleButton>
{access.roles.map(role => (
<RoleButton key={role.id} className="wallet-btn" badge={getNotificationsCount(props.notifications, role.id, access.ecosystem)} onClick={() => props.onSelect({ access, role })}>
{role.name}
</RoleButton>
))}
</div>
</div>
</div>
</div>
</div>
))}
</div>
</Clearfix>
);
export default styled(WalletButton)`
text-align: initial;
border-bottom: 1px solid #e4eaec;
padding: 0 0 10px;
position: relative;
margin: 0 20px 0 20px;
.wallet-head {
margin-left: 60px;
}
.wallet-name {
margin-bottom: 5px;
}
.wallet-icon {
position: absolute;
top: 5px;
left: 0;
height: 80px;
font-size: 40px;
vertical-align: top;
text-align: center;
margin-right: 20px;
}
.wallet-access {
position: relative;
margin-top: 10px;
.wallet-child {
margin-top: 0;
}
.wallet-child-content {
padding-left: 5px;
}
}
.wallet-btn {
margin-left: 5px;
margin-bottom: 5px;
}
.btn-action {
padding: 0;
margin-right: 10px;
}
`;