@@ -1,24 +1,25 @@
11import React from 'react';
22import { Button, Chevron } from '../components/Base';
33
4−import { renderRoute } from '../lib/router';
4+import { getRouteBreadcrumb } from '../lib/router';
5+import { ROUTE_NAMES } from '../lib/routeNames';
6+import { useHistory } from '../store/history';
57import { isLast } from '../lib/lib';
68
7−const Crumbs = props => {
8− const { routeCrumbs, skipRoute } = props;
9− const history = routeCrumbs.reverse();
9+function Crumbs(props) {
10+ const history = useHistory();
1011
1112 // FIXME probably more straightforward to render them normally and just
1213 // return the reversed array of renders
13− const rendered = history.map((route, idx) => {
14+ const rendered = history.routes.map((route, idx) => {
1415 return (
1516 <div className={'flex items-center'} key={`history-${idx}`}>
1617 <Button
1718 prop-type={'link'}
1819 prop-size={'sm'}
1920 key={`history-button-${idx}`}
20− onClick={() => skipRoute(history.size - idx - 1)}>
21− {renderRoute(props, route)}
21+ onClick={() => history.pop(history.size - idx - 1)}>
22+ {getRouteBreadcrumb(props, route)}
2223 </Button>
2324
2425 {isLast(history.size, idx) ? (
@@ -31,28 +32,30 @@ const Crumbs = props => {
3132 });
3233
3334 return rendered;
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− );
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+ }
4853
49− const noCrumbs = (
50− <h2 className="mt-9 clickable" onClick={() => props.skipRoute(1)}>
54+ return (
55+ <h2 className="mt-9 clickable" onClick={() => history.pop()}>
5156 Bridge
5257 </h2>
5358 );
54−
55− return props.showCrumbs ? crumbs : noCrumbs;
56−};
59+}
5760
5861export default Header;