git.iko.soy/bridge
on faa39fb help sign in
bridge/src/views/Ticket.js
154 lines 4.1 kB history raw
1import { Just, Nothing } from 'folktale/maybe';
2import React from 'react';
3import { Button } from '../components/old/Base';
4import {
5 InnerLabel,
6 ValidatedSigil,
7 PointInput,
8 TicketInput,
9 Input,
10 InputCaption,
11} from '../components/old/Base';
12import { H1, P } from '../components/old/Base';
14import { randomPatq, compose } from '../lib/lib';
15import { ROUTE_NAMES } from '../lib/routeNames';
16import { withHistory } from '../store/history';
17import { urbitWalletFromTicket } from '../lib/wallet';
18import { withWallet } from '../store/wallet';
19import View from 'components/View';
21class Ticket extends React.Component {
22 constructor(props) {
23 super(props);
25 this.state = {
26 ticket: '',
27 pointName: '',
28 passphrase: '',
29 isUnlocking: false,
30 };
32 this.pointPlaceholder = randomPatq(4);
33 this.ticketPlaceholder = randomPatq(8);
35 this.handleTicketInput = this.handleTicketInput.bind(this);
36 this.handlePassphraseInput = this.handlePassphraseInput.bind(this);
37 this.handlePointNameInput = this.handlePointNameInput.bind(this);
38 }
40 handleTicketInput(ticket) {
41 this.setState({ ticket });
42 }
44 handlePassphraseInput(passphrase) {
45 this.setState({ passphrase });
46 }
48 handlePointNameInput(pointName) {
49 if (pointName.length < 15) {
50 this.setState({ pointName });
51 }
52 }
54 async walletFromTicket(ticket, pointName, passphrase) {
55 this.setState({
56 isUnlocking: true,
57 });
59 const uhdw = await urbitWalletFromTicket(ticket, pointName, passphrase);
60 this.props.setUrbitWallet(Just(uhdw));
62 this.setState({
63 isUnlocking: false,
64 });
65 }
67 render() {
68 const { history, wallet } = this.props;
69 const { ticket, pointName, passphrase } = this.state;
71 const phPoint = this.pointPlaceholder;
72 const phTick = this.ticketPlaceholder;
74 return (
75 <View>
76 <H1>{'Authenticate'}</H1>
78 <P>
79 {`Please enter your point and Urbit master ticket here. This information is written on your Urbit HD paper wallets.`}
80 </P>
82 <PointInput
83 className="mono mt-8"
84 prop-size="lg"
85 prop-format="innerLabel"
86 type="text"
87 autoFocus
88 placeholder={`e.g. ${phPoint}`}
89 value={pointName}
90 onChange={this.handlePointNameInput}>
91 <InnerLabel>{'Point'}</InnerLabel>
92 <ValidatedSigil
93 className={'tr-0 mt-05 mr-0 abs'}
94 patp={pointName}
95 size={68}
96 margin={8}
97 />
98 </PointInput>
100 <TicketInput
101 className="mono mt-8"
102 prop-size="lg"
103 prop-format="innerLabel"
104 type="password"
105 name="ticket"
106 placeholder={`e.g. ${phTick}`}
107 value={ticket}
108 onChange={this.handleTicketInput}>
109 <InnerLabel>{'Ticket'}</InnerLabel>
110 </TicketInput>
112 <InputCaption>
113 {'If your wallet requires a passphrase, you may enter it below.'}
114 </InputCaption>
116 <Input
117 className="pt-8"
118 prop-size="md"
119 prop-format="innerLabel"
120 name="passphrase"
121 type="password"
122 value={passphrase}
123 autocomplete="off"
124 onChange={this.handlePassphraseInput}>
125 <InnerLabel>{'Passphrase'}</InnerLabel>
126 </Input>
128 <Button
129 className={'mt-8'}
130 prop-size={'lg wide'}
131 disabled={this.state.isUnlocking || Just.hasInstance(wallet)}
132 onClick={() => this.walletFromTicket(ticket, pointName, passphrase)}>
133 <span className="relative">
134 {this.state.isUnlocking && <span className="btn-spinner" />}
135 {'Unlock Wallet →'}
136 </span>
137 </Button>
139 <Button
140 className={'mt-4'}
141 prop-size={'xl wide'}
142 disabled={Nothing.hasInstance(wallet)}
143 onClick={() => history.popAndPush(ROUTE_NAMES.POINTS)}>
144 {'Continue →'}
145 </Button>
146 </View>
147 );
148 }
151export default compose(
152 withHistory,
153 withWallet
154)(Ticket);