@@ -0,0 +1,115 @@
1+import { Just, Nothing } from 'folktale/maybe'
2+import React from 'react'
3+import { pour } from 'sigil-js'
4+import * as ob from 'urbit-ob'
5+import * as azimuth from 'azimuth-js'
6+
7+import { ROUTE_NAMES } from '../lib/router'
8+
9+import { InnerLabel, TicketInput } from '../components/Base'
10+import ReactSVGComponents from '../components/ReactSVGComponents'
11+import KeysAndMetadata from './Point/KeysAndMetadata'
12+import Actions from './Point/Actions'
13+import { BRIDGE_ERROR } from '../lib/error'
14+import { Row, Col, Warning, Button, H1, H3 } from '../components/Base'
15+
16+//TODO from Ticket.js, move to lib
17+const placeholder = (len) => {
18+ let bytes = window.crypto.getRandomValues(new Uint8Array(len))
19+ let hex = bytes.reduce((acc, byt) =>
20+ acc + byt.toString(16).padStart(2, '0'),
21+ ''
22+ )
23+ return ob.hex2patq(hex)
24+}
25+
26+class InviteVerify extends React.Component {
27+
28+ constructor(props) {
29+ super(props)
30+
31+ this.state = {
32+ point: this.props.routeData.point,
33+ realTicket: this.props.routeData.ticket
34+ }
35+
36+ this.ticketPlaceholder = placeholder(8);
37+ this.handleTicketInput = this.handleTicketInput.bind(this);
38+ this.proceed = this.proceed.bind(this);
39+ }
40+
41+ componentDidMount() {
42+ //
43+ }
44+
45+ componentDidUpdate(prevProps) {
46+ //
47+ }
48+
49+ handleTicketInput(ticket) {
50+ this.setState({ ticket })
51+ }
52+
53+ proceed() {
54+ this.props.pushRoute(ROUTE_NAMES.INVITE_TRANSACTIONS, {
55+ ticket: this.state.realTicket,
56+ point: this.state.point
57+ });
58+ }
59+
60+ render() {
61+
62+ const { point } = this.state;
63+
64+ const name = ob.patp(point);
65+ const sigil = pour({
66+ patp: name,
67+ renderer: ReactSVGComponents,
68+ size: 256
69+ });
70+ let pointOverview = (
71+ //TODO Passport display component
72+ <>
73+ <div className={'mt-12 pt-6'}>
74+ { sigil }
75+ </div>
76+ <H3><code>{ name }</code></H3>
77+ </>
78+ );
79+
80+ return (
81+ <Row>
82+ <Col>
83+
84+ { pointOverview }
85+
86+ <p>{`Please input the master ticket for ${point} that you downloaded in the previous step.`}</p>
87+
88+ <TicketInput
89+ className='mono mt-8'
90+ prop-size='lg'
91+ prop-format='innerLabel'
92+ type='password'
93+ name='ticket'
94+ placeholder={ `e.g. ${this.ticketPlaceholder}` }
95+ value={ this.state.ticket }
96+ onChange={ this.handleTicketInput }>
97+ <InnerLabel>{ 'Ticket' }</InnerLabel>
98+ </TicketInput>
99+
100+ <Button
101+ className={'mt-4'}
102+ prop-size={'xl wide'}
103+ disabled={(this.state.ticket !== this.state.realTicket)}
104+ onClick={this.proceed}
105+ >
106+ { 'Continue →' }
107+ </Button>
108+
109+ </Col>
110+ </Row>
111+ )
112+ }
113+}
114+
115+export default InviteVerify