git.iko.soy/bridge
on e7ea855 help sign in
bridge/src/walletgen/components/Header.js
110 lines 2.8 kB history raw
1import React from 'react';
2import { seq } from '../lib/lib';
4import { NETWORK_STATES } from '../lib/constants';
6const StatusIndicator = props => (
7 <div className={`flex h-9 align-center ${props.c2} flex-shrink-0`}>
8 <div className={`${props.c1} h-9`}>
9 {props.error === true ? <Ex /> : <Check />}
10 </div>
11 <p className={'pr-4 text-sm text-600 c-white m-0'}>{props.message}</p>
12 </div>
13);
15const ChooseIndicator = props =>
16 props.network === NETWORK_STATES.ONLINE ? (
17 <StatusIndicator
18 message={'You are online.'}
19 c1={'bg-red'}
20 c2={'bg-red'}
21 error
22 />
23 ) : props.network === NETWORK_STATES.OFFLINE ? (
24 <StatusIndicator
25 message={'You are offline.'}
26 c1={'bg-green'}
27 c2={'bg-green'}
28 />
29 ) : (
30 <StatusIndicator
31 message={'Checking network connection..'}
32 c1={'bg-orange'}
33 c2={'bg-orange'}
34 />
35 );
37const ProgressIndicator = ({ currentStep, totalSteps }) => (
38 <div className={'relative h-9 col- mb-0'}>
39 <div
40 className={
41 'absolute ml-3 h-9 flex align-center text-sm white text-600'
42 }>{`Step ${currentStep} of ${totalSteps}`}</div>
43 <div className={'flex'}>
44 {seq(totalSteps).map((step, index) => (
45 <div
46 key={index}
47 className={`${
48 index + 1 > currentStep ? 'bg-gray' : 'bg-blue'
49 } h-9 col-`}>
50 {''}
51 </div>
52 ))}
53 </div>
54 </div>
55);
57const Header = props => (
58 <header className={'col'}>
59 <div className={'flex justify-between'}>
60 <ProgressIndicator
61 totalSteps={props.totalSteps}
62 currentStep={props.currentStep}
63 />
64 <ChooseIndicator network={props.network} />
65 </div>
66 <div className={'col-md-8 h-15 flex align-center'}>
67 <h1 className={'m-0 p-0'}>{'Wallet Generator'}</h1>
68 </div>
69 </header>
70);
72const Ex = () => {
73 return (
74 <svg
75 width="36"
76 height="36"
77 viewBox="0 0 36 36"
78 fill="none"
79 xmlns="http://www.w3.org/2000/svg">
80 <rect width="36" height="36" />
81 <path
82 fillRule="evenodd"
83 clipRule="evenodd"
84 d="M16.2857 18L12 22.2857L13.7143 24L18 19.7143L22.2857 24L24 22.2857L19.7143 18L23.9999 13.7143L22.2857 12L18 16.2857L13.7143 12L12 13.7143L16.2857 18Z"
85 fill="white"
86 />
87 </svg>
88 );
89};
91const Check = () => {
92 return (
93 <svg
94 width="36"
95 height="36"
96 viewBox="0 0 36 36"
97 fill="none"
98 xmlns="http://www.w3.org/2000/svg">
99 <rect width="36" height="36" />
100 <path
101 fillRule="evenodd"
102 clipRule="evenodd"
103 d="M24.9999 14.6329L23.2766 13L16.1699 19.7341L12.7233 16.4682L11 18.1012L16.1699 23L17.2451 21.9812L17.8932 21.3671L24.9999 14.6329Z"
104 fill="white"
105 />
106 </svg>
107 );
108};
110export default Header;