-
Notifications
You must be signed in to change notification settings - Fork 3
/
LayerModal.tsx
121 lines (106 loc) · 3.24 KB
/
LayerModal.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
import React, { useState } from 'react';
import { MODAL_NOT_ALLOWED, WEBSITE } from '../..//utils/constants';
import './LayerModal.css';
import { ModalProps, ModalTextProps } from './LayerModal.d';
import accountIcon from '../../assets/account.png';
import verifyIcon from '../../assets/verification.png';
import timeIcon from '../../assets/time.png';
import externalLinkIcon from '../../assets/linkext.png';
import useLocation from '../../hooks/useLocation';
import useVerified from '../../hooks/useVerified';
const LayerModal = ({
kycType,
geoIds,
account,
modalColor = '#141724',
}: ModalProps) => {
const [iFrameOpen, setIsFrameOpen] = useState(false);
const allowed = useLocation(geoIds);
const isVerified = useVerified(account);
document.body.style.overflow = 'hidden';
if (!account) {
document.body.style.overflow = 'visible';
return <></>;
}
if (!allowed) {
document.body.style.overflow = 'visible';
return <></>;
}
if (isVerified) {
document.body.style.overflow = 'visible';
return <></>;
}
const openIframe = () => {
setIsFrameOpen(true);
};
console.log('kycType: ', kycType);
const getText = (): ModalTextProps => {
return MODAL_NOT_ALLOWED;
};
const { header, title, description } = getText();
const shortAccount = () => {
const start_account = account.slice(0, 6);
const end_account = account.slice(-4);
return `${start_account}...${end_account}`;
};
const params = {
bg: modalColor,
};
return (
<div>
{!iFrameOpen ? (
<div style={{ backgroundColor: modalColor }} className="modal">
<div className="modal-header">
<img src={verifyIcon} alt="verify" width="32px" height="32px" />
<h2>{header}</h2>
</div>
<div className="modal-body">
<img src={accountIcon} width="256px" alt="account" />
<div className="body-texts">
<h2>{title}</h2>
<p>{description}</p>
<div className="body-wallet">
<p>{shortAccount()}</p>
</div>
</div>
</div>
<div className="modal-footer">
<div className="modal-average">
<img src={timeIcon} alt="time" width="20px" height="20px" />
<p id="average">Average verification time: 5 minutes</p>
</div>
<button
onClick={openIframe}
className="button-basic"
id="btn-verify"
>
Start verification
<img
src={externalLinkIcon}
alt="time"
width="20px"
height="20px"
/>
</button>
<div className="powered">
Powered by <span id="kyc">KYCENGINE</span>
</div>
</div>
</div>
) : (
<div className="modal">
<iframe
id="myframe"
className="modal-iframe"
style={{ backgroundColor: modalColor }}
name="iframe_a"
src={`${WEBSITE}?${new URLSearchParams(params).toString()}`}
frameBorder="0"
></iframe>
</div>
)}
<div className="bg" />
</div>
);
};
export default LayerModal;