8767696 · bridge · git.iko.soy

.prettierignore+1

compare with master

unifiedsplit

@@ -1 +1,2 @@

1nockjs/

2+components/

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

@@ -10,7 +10,9 @@ 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} ${props.className}`}

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} ${

14+ props.className

15+ }`}

14 onClick={props.onClick}>

16 onClick={props.onClick}>

15 {props.children}

17 {props.children}

16 </button>

18 </button>

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

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

1import React from 'react';

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

3

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

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

5−import { ROUTE_NAMES } from '../lib/routeNames';

6−import { useHistory } from '../store/history';

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

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

8

6

9−function Crumbs(props) {

7+const Crumbs = props => {

8+ const { routeCrumbs, skipRoute } = props;

10− const history = useHistory();

9+ const history = routeCrumbs.reverse();

11

10

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

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

13 // return the reversed array of renders

12 // return the reversed array of renders

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

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

15 return (

14 return (

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

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

17 <Button

16 <Button

18 prop-type={'link'}

17 prop-type={'link'}

19 prop-size={'sm'}

18 prop-size={'sm'}

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

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

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

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

22− {getRouteBreadcrumb(props, route)}

21+ {renderRoute(props, route)}

23 </Button>

22 </Button>

24

23

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

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

@@ -32,30 +31,28 @@ function Crumbs(props) {

32 });

31 });

33

32

34 return rendered;

33 return rendered;

35−}

34+};

36−

35+

37−function Header(props) {

36+const Header = props => {

38− const history = useHistory();

37+ const crumbs = (

39−

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

41−

42− if (showCrumbs) {

43− return (

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

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

45− <Crumbs

39+ <Crumbs

40+ routeCrumbs={props.routeCrumbs}

41+ skipRoute={props.skipRoute}

46− networkType={props.networkType}

42+ networkType={props.networkType}

47− wallet={props.wallet}

43+ wallet={props.wallet}

48− pointCursor={props.pointCursor}

44+ pointCursor={props.pointCursor}

49− />

45+ />

50− </div>

46+ </div>

51− );

47+ );

52− }

53

48

54− return (

49+ const noCrumbs = (

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

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

56 Bridge

51 Bridge

57 </h2>

52 </h2>

58 );

53 );

54+

55+ return props.showCrumbs ? crumbs : noCrumbs;

59−}

56+};

60

57

61export default Header;

58export default Header;

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

@@ -22,7 +22,9 @@ 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 ${this.props.className}`}

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

26+ this.props.className

27+ }`}

26 value={opt.value}

28 value={opt.value}

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

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

28 {opt.title}

30 {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 { getRouteBreadcrumb } from '../lib/router';

4+import { renderRoute } 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− {`${getRouteBreadcrumb(props, route)}`}

22+ {`${renderRoute(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/routeNames';

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

9import ReactSVGComponents from './ReactSVGComponents';

10

11const RenderedPoint = props => {

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

@@ -9,8 +9,7 @@ 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/routeNames';

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

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

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

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

15

14

16import {

15import {

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

21 renderSignedTx,

20 renderSignedTx,

22 signTransaction,

21 signTransaction,

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

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

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

25

23

26const SUBMISSION_STATES = {

24const SUBMISSION_STATES = {

27 PROMPT: 'Send transaction',

25 PROMPT: 'Send transaction',

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

236 )

234 )

237 .then(txHash => {

235 .then(txHash => {

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

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

237+ props.popRoute();

239

238

240 let routeData = {};

239 let routeData = {};

241 if (props.networkSeed) {

240 if (props.networkSeed) {

242 props.setNetworkSeedCache(props.networkSeed);

241 props.setNetworkSeedCache(props.networkSeed);

243 routeData.promptKeyfile = true;

242 routeData.promptKeyfile = true;

244 }

243 }

245−

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

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

247 })

245 })

248 .catch(err => {

246 .catch(err => {

249 this.setState({

247 this.setState({

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

579 }

577 }

580}

578}

581

579

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

580+export default StatelessTransaction;

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

@@ -4,7 +4,9 @@ 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="${props.color}" stroke-width="${props.strokeWidth}" fill="${props.color}"/></svg>`}

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="${

8+ props.color

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

8 alt=""

10 alt=""

9 style={props.style}

11 style={props.style}

10 className={props.className}

12 className={props.className}