git.iko.soy/bridge
on master help sign in
- Fix input sizes on urbit ticket page
9d526e4Chris Johnson
src/style/input.css+7−7
compare with master
unifiedsplit
@@ -15,6 +15,13 @@ input:-webkit-autofill {
15 -webkit-animation-fill-mode: both;
15 -webkit-animation-fill-mode: both;
16}
16}
17
17
18+input[prop-format*='innerLabel'] {
19+ padding-top: 8rem;
20+ height: 20rem;
21+ padding-left: 4rem;
22+ padding-right: 4rem;
23+}
24+
18input[prop-size='lg'] {
25input[prop-size='lg'] {
19 height: 18rem;
26 height: 18rem;
20 font-size: 5rem;
27 font-size: 5rem;
@@ -36,13 +43,6 @@ input[prop-size='sm'] {
36 padding-right: 1rem;
43 padding-right: 1rem;
37}
44}
38
45
39−input[prop-format*='innerLabel'] {
40− padding-top: 8rem;
41− height: 20rem;
42− padding-left: 4rem;
43− padding-right: 4rem;
44−}
45−
46input[prop-format*='innerLabel'][prop-size='md'] {
46input[prop-format*='innerLabel'][prop-size='md'] {
47 height: 16rem;
47 height: 16rem;
48 font-size: 4rem;
48 font-size: 4rem;
src/views/Ticket.js+20−3
@@ -25,7 +25,8 @@ class Ticket extends React.Component {
25
25
26 this.state = {
26 this.state = {
27 ticket: '',
27 ticket: '',
28− pointName: ''
28+ pointName: '',
29+ isUnlocking: false
29 }
30 }
30
31
31 this.pointPlaceholder = placeholder(4)
32 this.pointPlaceholder = placeholder(4)
@@ -53,6 +54,11 @@ class Ticket extends React.Component {
53
54
54 async walletFromTicket(ticket, pointName) {
55 async walletFromTicket(ticket, pointName) {
55 const { setWallet, setUrbitWallet } = this.props
56 const { setWallet, setUrbitWallet } = this.props
57+
58+ this.setState({
59+ isUnlocking: true
60+ });
61+
56 const urbitWallet = await kg.generateWallet({
62 const urbitWallet = await kg.generateWallet({
57 ticket: ticket,
63 ticket: ticket,
58 ship: ob.patp2dec(pointName)
64 ship: ob.patp2dec(pointName)
@@ -61,6 +67,10 @@ class Ticket extends React.Component {
61 const wallet = walletFromMnemonic(mnemonic, DEFAULT_HD_PATH)
67 const wallet = walletFromMnemonic(mnemonic, DEFAULT_HD_PATH)
62 setWallet(wallet)
68 setWallet(wallet)
63 setUrbitWallet(Maybe.Just(urbitWallet))
69 setUrbitWallet(Maybe.Just(urbitWallet))
70+
71+ this.setState({
72+ isUnlocking: false
73+ });
64 }
74 }
65
75
66 render() {
76 render() {
@@ -99,7 +109,7 @@ class Ticket extends React.Component {
99
109
100 <TicketInput
110 <TicketInput
101 className='mono mt-8'
111 className='mono mt-8'
102− prop-size='md'
112+ prop-size='lg'
103 prop-format='innerLabel'
113 prop-format='innerLabel'
104 type='text'
114 type='text'
105 name='ticket'
115 name='ticket'
@@ -112,9 +122,16 @@ class Ticket extends React.Component {
112 <Button
122 <Button
113 className={'mt-8'}
123 className={'mt-8'}
114 prop-size={'lg wide'}
124 prop-size={'lg wide'}
125+ disabled={this.state.isUnlocking || !Maybe.Nothing.hasInstance(wallet)}
115 // prop-color={this.buttonTriState(wallet)}
126 // prop-color={this.buttonTriState(wallet)}
116 onClick={() => this.walletFromTicket(ticket, pointName)}>
127 onClick={() => this.walletFromTicket(ticket, pointName)}>
128+
129+ <span className="relative">
130+ {this.state.isUnlocking &&
131+ <span className="btn-spinner"></span>
132+ }
117− {'Unlock Wallet →'}
133+ {'Unlock Wallet →'}
134+ </span>
118 </Button>
135 </Button>
119
136
120 <Button
137 <Button