@@ -1,25 +1,24 @@
11import React from 'react';
22import { Button, Chevron } from '../components/Base';
33
4−import { getRouteBreadcrumb } from '../lib/router';
5−import { ROUTE_NAMES } from '../lib/routeNames';
6−import { useHistory } from '../store/history';
4+import { renderRoute } from '../lib/router';
75import { isLast } from '../lib/lib';
86
9−function Crumbs(props) {
10− const history = useHistory();
7+const Crumbs = props => {
8+ const { routeCrumbs, skipRoute } = props;
9+ const history = routeCrumbs.reverse();
1110
1211 // FIXME probably more straightforward to render them normally and just
1312 // return the reversed array of renders
14− const rendered = history.routes.map((route, idx) => {
13+ const rendered = history.map((route, idx) => {
1514 return (
1615 <div className={'flex items-center'} key={`history-${idx}`}>
1716 <Button
1817 prop-type={'link'}
1918 prop-size={'sm'}
2019 key={`history-button-${idx}`}
21− onClick={() => history.pop(history.size - idx - 1)}>
22− {getRouteBreadcrumb(props, route)}
20+ onClick={() => skipRoute(history.size - idx - 1)}>
21+ {renderRoute(props, route)}
2322 </Button>
2423
2524 {isLast(history.size, idx) ? (
@@ -32,30 +31,28 @@ function Crumbs(props) {
3231 });
3332
3433 return rendered;
35−}
36−
37−function Header(props) {
38− const history = useHistory();
39−
40− const showCrumbs = !history.includes(ROUTE_NAMES.INVITE_TICKET);
41−
42− if (showCrumbs) {
43− return (
44− <div className={'flex items-center h-10'}>
45− <Crumbs
46− networkType={props.networkType}
47− wallet={props.wallet}
48− pointCursor={props.pointCursor}
49− />
50− </div>
51− );
52− }
34+};
35+
36+const Header = props => {
37+ const crumbs = (
38+ <div className={'flex items-center h-10'}>
39+ <Crumbs
40+ routeCrumbs={props.routeCrumbs}
41+ skipRoute={props.skipRoute}
42+ networkType={props.networkType}
43+ wallet={props.wallet}
44+ pointCursor={props.pointCursor}
45+ />
46+ </div>
47+ );
5348
54− return (
55− <h2 className="mt-9 clickable" onClick={() => history.pop()}>
49+ const noCrumbs = (
50+ <h2 className="mt-9 clickable" onClick={() => props.skipRoute(1)}>
5651 Bridge
5752 </h2>
5853 );
59−}
54+
55+ return props.showCrumbs ? crumbs : noCrumbs;
56+};
6057
6158export default Header;