git.iko.soy/bridge
on b4917df help sign in
bridge/src/components/old/Header.js
66 lines 1.7 kB history raw
1import React from 'react';
2import { Button } 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) ? <div /> : '/'}
39 </div>
40 );
41 })}
42 </>
43 );
46function Header(props) {
47 const history = useHistory();
49 const showCrumbs = !history.includes(ROUTE_NAMES.INVITE_TICKET);
51 if (showCrumbs) {
52 return (
53 <div className={'flex items-center h-10'}>
54 <Crumbs />
55 </div>
56 );
57 }
59 return (
60 <h2 className="mt-9 clickable" onClick={() => history.pop()}>
61 Bridge
62 </h2>
63 );
66export default Header;