-
Notifications
You must be signed in to change notification settings - Fork 295
/
WalletPublicKeyQRCodeDialog.tsx
93 lines (86 loc) · 2.87 KB
/
WalletPublicKeyQRCodeDialog.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
// @flow
import React from 'react';
import { observer } from 'mobx-react';
import { injectIntl, intlShape } from 'react-intl';
import CopyToClipboard from 'react-copy-to-clipboard';
import SVGInline from 'react-svg-inline';
import QRCode from 'qrcode.react';
import { PopOver } from 'react-polymorph/lib/components/PopOver';
import DialogCloseButton from '../../widgets/DialogCloseButton';
import Dialog from '../../widgets/Dialog';
import iconCopy from '../../../assets/images/clipboard-ic.inline.svg';
import styles from './PublicKeyQRCodeDialog.scss';
import globalMessages from '../../../i18n/global-messages';
import type { ReactIntlMessage } from '../../../types/i18nTypes';
type Props = {
walletName: string,
walletPublicKey: string,
onCopyWalletPublicKey: Function,
onClose: Function,
messages: { [string]: ReactIntlMessage },
derivationPath: string,
intl: intlShape.isRequired,
};
const WalletPublicKeyQRCodeDialog = observer((props: Props) => {
const {
walletName,
walletPublicKey,
onCopyWalletPublicKey,
onClose,
messages,
derivationPath,
intl,
} = props;
const actions = [
{
label: intl.formatMessage(globalMessages.close),
onClick: onClose,
},
];
// Get QRCode color value from active theme's CSS variable
const qrCodeBackgroundColor = document.documentElement
? document.documentElement.style.getPropertyValue(
'--theme-receive-qr-code-background-color'
)
: 'transparent';
const qrCodeForegroundColor = document.documentElement
? document.documentElement.style.getPropertyValue(
'--theme-receive-qr-code-foreground-color'
)
: '#000';
return (
<Dialog
title={intl.formatMessage(messages.dialogTitle)}
subtitle={walletName}
actions={actions}
closeOnOverlayClick
onClose={onClose}
className={styles.dialog}
closeButton={<DialogCloseButton onClose={onClose} />}
>
<div className={styles.walletPublicKeyQRCode}>
<QRCode
value={walletPublicKey}
bgColor={qrCodeBackgroundColor}
fgColor={qrCodeForegroundColor}
size={192}
/>
</div>
<div className={styles.addressPathsWrapper}>
<PopOver content={intl.formatMessage(messages.derivationPathTooltip)}>
<div className={styles.spendingPath}>{derivationPath}</div>
</PopOver>
</div>
<div className={styles.walletPublicKey}>{walletPublicKey}</div>
<CopyToClipboard text={walletPublicKey} onCopy={onCopyWalletPublicKey}>
<span className={styles.copyPublicKey}>
<SVGInline svg={iconCopy} className={styles.copyIcon} />
<span className={styles.copyPublicKeyLabel}>
{intl.formatMessage(messages.copyPublicKeyLabel)}
</span>
</span>
</CopyToClipboard>
</Dialog>
);
});
export default injectIntl(WalletPublicKeyQRCodeDialog);