git.iko.soy/bridge
on 2fc74c8 help sign in
bridge/src/walletgen/components/Header.js
87 lines 2.6 kB history raw
1import React from 'react'
2import { map } from 'lodash'
3import { seq } from '../lib/lib'
5import { NETWORK_STATES } from '../lib/constants'
7const StatusIndicator = props =>
8 <div className={`flex h-9 align-center ${props.c2} flex-shrink-0`}>
9 <div className={`${props.c1} h-9`}>
10 {
11 props.error === true ? <Ex /> : <Check />
12 }
13 </div>
14 <p className={'pr-4 text-sm text-600 c-white m-0'}>
15 { props.message }
16 </p>
17 </div>
19const ChooseIndicator = props =>
20 props.network === NETWORK_STATES.ONLINE
21 ? <StatusIndicator
22 message={'You are online.'}
23 c1={'bg-red'}
24 c2={'bg-red'}
25 error
26 />
27 : props.network === NETWORK_STATES.OFFLINE
28 ? <StatusIndicator
29 message={'You are offline.'}
30 c1={'bg-green'}
31 c2={'bg-green'}
32 />
33 : <StatusIndicator
34 message={'Checking network connection..'}
35 c1={'bg-orange'}
36 c2={'bg-orange'}
37 />
39const ProgressIndicator = ({ currentStep, totalSteps }) =>
40 <div className={'relative h-9 col- mb-0'}>
41 <div className={'absolute ml-3 h-9 flex align-center text-sm white text-600'}>{`Step ${currentStep} of ${totalSteps}`}</div>
42 <div className={'flex'}>
43 {
44 seq(totalSteps).map((step, index) => <div className={`${ index+1 > currentStep ? 'bg-gray' : 'bg-blue' } h-9 col-`}>{''}</div> )
45 }
46 </div>
48 </div>
51const Header = props =>
52 <header className={'col'}>
53 <div className={'flex justify-between'}>
54 <ProgressIndicator
55 totalSteps={props.totalSteps}
56 currentStep={props.currentStep}
57 />
58 <ChooseIndicator
59 network={ props.network }
60 />
61 </div>
62 <div className={'col-md-8 h-15 flex align-center'}>
63 <h1 className={'m-0 p-0'}>{'Wallet Generator'}</h1>
64 </div>
65 </header>
69const Ex = () => {
70 return (
71 <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
72 <rect width="36" height="36" />
73 <path fillRule="evenodd" clipRule="evenodd" 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" fill="white"/>
74 </svg>
75 )
78const Check = () => {
79 return (
80 <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
81 <rect width="36" height="36"/>
82 <path fillRule="evenodd" clipRule="evenodd" 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" fill="white"/>
83 </svg>
84 )
87export default Header