git.iko.soy/bridge
on 8011c59 help sign in
bridge/src/components/Header.js
70 lines 1.8 kB history raw
1import React from 'react';
2import { Button, Chevron } from './Base';
4import { getRouteBreadcrumb } from '../lib/router';
5import { ROUTE_NAMES } from '../lib/routeNames';
6import { useHistory } from '../store/history';
7import { isLast } from '../lib/lib';
8import { useNetwork } from '../store/network';
9import { useWallet } from '../store/wallet';
10import { usePointCursor } from '../store/pointCursor';
12// hook to create a breadcrumb builder function based on the current
13// global states
14function useRouteBreadcrumbBuilder() {
15 const { networkType } = useNetwork();
16 const { wallet } = useWallet();
17 const { pointCursor } = usePointCursor();
19 return getRouteBreadcrumb({ pointCursor, networkType, wallet });
22function Crumbs(props) {
23 const history = useHistory();
24 const breadcrumbBuilder = useRouteBreadcrumbBuilder();
26 return (
27 <>
28 {history.routes.map((route, idx) => {
29 return (
30 <div key={`history-${idx}`} className={'flex items-center'}>
31 <Button
32 prop-type={'link'}
33 prop-size={'sm'}
34 onClick={() => history.pop(history.size - idx - 1)}>
35 {breadcrumbBuilder(route)}
36 </Button>
38 {isLast(history.size, idx) ? (
39 <div />
40 ) : (
41 <Chevron className={'h-4 mh-2'} />
42 )}
43 </div>
44 );
45 })}
46 </>
47 );
50function Header(props) {
51 const history = useHistory();
53 const showCrumbs = !history.includes(ROUTE_NAMES.INVITE_TICKET);
55 if (showCrumbs) {
56 return (
57 <div className={'flex items-center h-10'}>
58 <Crumbs />
59 </div>
60 );
61 }
63 return (
64 <h2 className="mt-9 clickable" onClick={() => history.pop()}>
65 Bridge
66 </h2>
67 );
70export default Header;