24f5628 · bridge · git.iko.soy

.prettierignore−1

compare with master

unifiedsplit

@@ -1,2 +1 @@

1nockjs/

2−components/

src/bridge/components/DropdownItem.js+1−3

@@ -10,9 +10,7 @@ const DropdownItem = props => {

10 <button

11 disabled={props.disabled}

12 style={props.style}

13− className={`h-10 m-0 p-0 ph-2 bg-white flex align-center items-start bs-solid brw-2 blw-2 btw-0 bbw-0 sans ${_disabled} ${

13+ className={`h-10 m-0 p-0 ph-2 bg-white flex align-center items-start bs-solid brw-2 blw-2 btw-0 bbw-0 sans ${_disabled} ${props.className}`}

14− props.className

15− }`}

16 onClick={props.onClick}>

14 onClick={props.onClick}>

17 {props.children}

15 {props.children}

18 </button>

16 </button>

src/bridge/components/Header.js+29−26

@@ -1,24 +1,25 @@

1import React from 'react';

2import { Button, Chevron } from '../components/Base';

3

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';

5import { isLast } from '../lib/lib';

7import { isLast } from '../lib/lib';

6

8

7−const Crumbs = props => {

9+function Crumbs(props) {

8− const { routeCrumbs, skipRoute } = props;

9− const history = routeCrumbs.reverse();

10+ const history = useHistory();

10

11

11 // FIXME probably more straightforward to render them normally and just

12 // FIXME probably more straightforward to render them normally and just

12 // return the reversed array of renders

13 // return the reversed array of renders

13− const rendered = history.map((route, idx) => {

14+ const rendered = history.routes.map((route, idx) => {

14 return (

15 return (

15 <div className={'flex items-center'} key={`history-${idx}`}>

16 <div className={'flex items-center'} key={`history-${idx}`}>

16 <Button

17 <Button

17 prop-type={'link'}

18 prop-type={'link'}

18 prop-size={'sm'}

19 prop-size={'sm'}

19 key={`history-button-${idx}`}

20 key={`history-button-${idx}`}

20− onClick={() => skipRoute(history.size - idx - 1)}>

21+ onClick={() => history.pop(history.size - idx - 1)}>

21− {renderRoute(props, route)}

22+ {getRouteBreadcrumb(props, route)}

22 </Button>

23 </Button>

23

24

24 {isLast(history.size, idx) ? (

25 {isLast(history.size, idx) ? (

@@ -31,28 +32,30 @@ const Crumbs = props => {

31 });

32 });

32

33

33 return rendered;

34 return rendered;

34−};

35+}

35−

36+

36−const Header = props => {

37+function Header(props) {

37− const crumbs = (

38+ const history = useHistory();

39+

40+ const showCrumbs = !history.includes(ROUTE_NAMES.INVITE_TICKET);

41+

42+ if (showCrumbs) {

43+ return (

38− <div className={'flex items-center h-10'}>

44+ <div className={'flex items-center h-10'}>

39− <Crumbs

45+ <Crumbs

40− routeCrumbs={props.routeCrumbs}

41− skipRoute={props.skipRoute}

42− networkType={props.networkType}

46+ networkType={props.networkType}

43− wallet={props.wallet}

47+ wallet={props.wallet}

44− pointCursor={props.pointCursor}

48+ pointCursor={props.pointCursor}

45− />

49+ />

46− </div>

50+ </div>

47− );

51+ );

52+ }

48

53

49− const noCrumbs = (

54+ return (

50− <h2 className="mt-9 clickable" onClick={() => props.skipRoute(1)}>

55+ <h2 className="mt-9 clickable" onClick={() => history.pop()}>

51 Bridge

56 Bridge

52 </h2>

57 </h2>

53 );

58 );

54−

55− return props.showCrumbs ? crumbs : noCrumbs;

56−};

59+}

57

60

58export default Header;

61export default Header;

src/bridge/components/HorizontalSelector.js+1−3

@@ -22,9 +22,7 @@ class HorizontalSelector extends React.Component {

22 let active = opt.value === this.state.option ? 'btn-primary active' : '';

23 return (

24 <button

25− className={`btn ${active} h-10 ph-4 flex sans ${

25+ className={`btn ${active} h-10 ph-4 flex sans ${this.props.className}`}

26− this.props.className

27− }`}

28 value={opt.value}

26 value={opt.value}

29 onClick={() => this.selectOption(opt.value)}>

27 onClick={() => this.selectOption(opt.value)}>

30 {opt.title}

28 {opt.title}

src/bridge/components/OldHeader.js+2−2

@@ -1,7 +1,7 @@

1import React from 'react';

2import { Button, Chevron } from '../components/Base';

3

4−import { renderRoute } from '../lib/router';

4+import { getRouteBreadcrumb } from '../lib/router';

5import { isLast } from '../lib/lib';

6

7const Crumbs = props => {

@@ -19,7 +19,7 @@ const Crumbs = props => {

19 color={'black'}

20 key={`history-button-${idx}`}

21 onClick={() => skipRoute(history.size - idx - 1)}>

22− {`${renderRoute(props, route)}`}

22+ {`${getRouteBreadcrumb(props, route)}`}

23 </Button>

24

25 {isLast(history.size, idx) ? (

src/bridge/components/RenderedPoint.js+1−1

@@ -5,7 +5,7 @@ import { Button } from './Base';

5import { pour } from 'sigil-js';

6import * as ob from 'urbit-ob';

7

8−import { ROUTE_NAMES } from '../lib/router';

8+import { ROUTE_NAMES } from '../lib/routeNames';

9import ReactSVGComponents from './ReactSVGComponents';

10

11const RenderedPoint = props => {

src/bridge/components/StatelessTransaction.js+6−4

@@ -9,7 +9,8 @@ import { CheckboxButton, Input, InnerLabel, InnerLabelDropdown } from './Base';

9import { Warning } from '../components/Base';

10

11import { BRIDGE_ERROR } from '../lib/error';

12−import { ROUTE_NAMES } from '../lib/router';

12+import { ROUTE_NAMES } from '../lib/routeNames';

13+import { withHistory } from '../store/history';

13import * as tank from '../lib/tank';

14import * as tank from '../lib/tank';

14

15

15import {

16import {

@@ -20,6 +21,7 @@ import {

20 renderSignedTx,

21 renderSignedTx,

21 signTransaction,

22 signTransaction,

22} from '../lib/txn';

23} from '../lib/txn';

24+import { withTxnConfirmations } from '../store/txnConfirmations';

23

25

24const SUBMISSION_STATES = {

26const SUBMISSION_STATES = {

25 PROMPT: 'Send transaction',

27 PROMPT: 'Send transaction',

@@ -234,14 +236,14 @@ class StatelessTransaction extends React.Component {

234 )

236 )

235 .then(txHash => {

237 .then(txHash => {

236 props.onSent(Just(Ok(txHash)), state.stx.value);

238 props.onSent(Just(Ok(txHash)), state.stx.value);

237− props.popRoute();

238

239

239 let routeData = {};

240 let routeData = {};

240 if (props.networkSeed) {

241 if (props.networkSeed) {

241 props.setNetworkSeedCache(props.networkSeed);

242 props.setNetworkSeedCache(props.networkSeed);

242 routeData.promptKeyfile = true;

243 routeData.promptKeyfile = true;

243 }

244 }

245+

244− props.pushRoute(ROUTE_NAMES.SENT_TRANSACTION, routeData);

246+ props.history.popAndPush(ROUTE_NAMES.SENT_TRANSACTION, routeData);

245 })

247 })

246 .catch(err => {

248 .catch(err => {

247 this.setState({

249 this.setState({

@@ -577,4 +579,4 @@ class StatelessTransaction extends React.Component {

577 }

579 }

578}

580}

579

581

580−export default StatelessTransaction;

582+export default withTxnConfirmations(withHistory(StatelessTransaction));

src/bridge/components/icons/Chevron.js+1−3

@@ -4,9 +4,7 @@ import PropTypes from 'prop-types';

4const Chevron = props => {

5 return (

6 <img

7− src={`data:image/svg+xml;utf8,<svg width="11" height="24" viewBox="0 0 11 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 12L10.387 12.3166L10.646 12L10.387 11.6833L10 12ZM0.613022 1.31662L9.61302 12.3166L10.387 11.6833L1.38698 0.68338L0.613022 1.31662ZM9.61302 11.6833L0.613021 22.6834L1.38698 23.3166L10.387 12.3166L9.61302 11.6833Z" stroke="${

7+ src={`data:image/svg+xml;utf8,<svg width="11" height="24" viewBox="0 0 11 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 12L10.387 12.3166L10.646 12L10.387 11.6833L10 12ZM0.613022 1.31662L9.61302 12.3166L10.387 11.6833L1.38698 0.68338L0.613022 1.31662ZM9.61302 11.6833L0.613021 22.6834L1.38698 23.3166L10.387 12.3166L9.61302 11.6833Z" stroke="${props.color}" stroke-width="${props.strokeWidth}" fill="${props.color}"/></svg>`}

8− props.color

9− }" stroke-width="${props.strokeWidth}" fill="${props.color}"/></svg>`}

10 alt=""

8 alt=""

11 style={props.style}

9 style={props.style}

12 className={props.className}

10 className={props.className}