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