0f6d696 · bridge · git.iko.soy

git.iko.soy/bridge

Merge pull request #70 from urbit/ticket-ui-fixes

Ticket ui fixes

commit0f6d6969feffdd2fcec92c34163e551680b067aa authorChristopher Johnson <chris@cjohnson.io> dateMon 11 Mar 2019, 09:56 (8 years ago) parent1c70c92 2ee2847

6 files changed+75−16

compare with master

unifiedsplit

src/components/Header.js+1−1 src/components/StatelessTransaction.js+15−2 src/lib/router.js+4−2 src/style/extend.css+27 src/style/input.css+7−7 src/views/Ticket.js+21−4

src/components/Header.js+1−1

@@ -23,7 +23,7 @@ const Crumbs = (props) => {

2323 prop-size={'sm'}

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

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

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

26+ { renderRoute(props, route) }

2727 </Button>

2828

2929 {

src/components/StatelessTransaction.js+15−2

@@ -15,6 +15,16 @@ const StatelessTransaction = props => {

1515 const { setUserApproval, userApproval } = props

1616 const { canSend, handleSubmit } = props

1717

18+ // setState doesn't seem to work in SetProxy/handleSubmit, so just

19+ // modifying the DOM manually here. (https://imgur.com/a/i0Qsyq1)

20+

21+ const sendTxn = (e) => {

22+ e.target.setAttribute("disabled", true);

23+ let spinner = e.target.querySelectorAll('.btn-spinner')[0];

24+ spinner.classList.remove('hide');

25+ handleSubmit()

26+ }

27+

1828 const generateButtonColor =

1929 Nothing.hasInstance(txn)

2030 ? 'blue'

@@ -150,9 +160,12 @@ const StatelessTransaction = props => {

150160 prop-size={ 'xl wide' }

151161 className={ 'mt-8' }

152162 disabled={ !canSend }

153− onClick={ handleSubmit }

163+ onClick={ sendTxn }

154164 >

155− { 'Send Transaction' }

165+ <span className="relative">

166+ <span className="btn-spinner hide"></span>

167+ { 'Send Transaction' }

168+ </span>

156169 </Button>

157170

158171 const sendDialogue = web3.matchWith({

src/lib/router.js+4−2

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

11import * as ob from 'urbit-ob'

3+import React from 'react';

35import AcceptTransfer from '../views/AcceptTransfer'

46import CancelTransfer from '../views/CancelTransfer'

57import CreateGalaxy from '../views/CreateGalaxy'

@@ -105,8 +107,8 @@ const renderRoute = (props, route) => {

105107 Nothing: () => 'Wallet',

106108 Just: (wal) =>

107109 wal.value instanceof EthereumWallet

108− ? wal.value.address

109− : addressFromSecp256k1Public(wal.value.publicKey)

110+ ? (<span className="text-mono">{wal.value.address}</span>)

111+ : (<span className="text-mono">{addressFromSecp256k1Public(wal.value.publicKey)}</span>)

110112 })

111113

112114 : route === ROUTE_NAMES.MNEMONIC

src/style/extend.css+27

@@ -439,3 +439,30 @@ code {

439439.pointer:hover {

440440 cursor: pointer;

441441}

442+

443+.hide {

444+ display: none !important;

445+}

446+

447+.btn-spinner {

448+ position: absolute;

449+ display: inline-block;

450+ width: 20px;

451+ height: 20px;

452+ left: -35px;

453+}

454+

455+.btn-spinner::after {

456+ position: absolute;

457+ width: 16px;

458+ height: 16px;

459+ bottom: 0;

460+ content: "◠";

461+ animation: spin linear 1s infinite;

462+ font-size: 20px;

463+ line-height: 20px;

464+}

465+

466+@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }

467+@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }

468+@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

src/style/input.css+7−7

@@ -15,6 +15,13 @@ input:-webkit-autofill {

1515 -webkit-animation-fill-mode: both;

1616}

1717

18+input[prop-format*='innerLabel'] {

19+ padding-top: 8rem;

20+ height: 20rem;

21+ padding-left: 4rem;

22+ padding-right: 4rem;

23+}

24+

1825input[prop-size='lg'] {

1926 height: 18rem;

2027 font-size: 5rem;

@@ -36,13 +43,6 @@ input[prop-size='sm'] {

3643 padding-right: 1rem;

3744}

3845

39−input[prop-format*='innerLabel'] {

40− padding-top: 8rem;

41− height: 20rem;

42− padding-left: 4rem;

43− padding-right: 4rem;

44−}

45−

4646input[prop-format*='innerLabel'][prop-size='md'] {

4747 height: 16rem;

4848 font-size: 4rem;

src/views/Ticket.js+21−4

@@ -25,7 +25,8 @@ class Ticket extends React.Component {

2525

2626 this.state = {

2727 ticket: '',

28− pointName: ''

28+ pointName: '',

29+ isUnlocking: false

2930 }

3031

3132 this.pointPlaceholder = placeholder(4)

@@ -53,6 +54,11 @@ class Ticket extends React.Component {

5354

5455 async walletFromTicket(ticket, pointName) {

5556 const { setWallet, setUrbitWallet } = this.props

57+

58+ this.setState({

59+ isUnlocking: true

60+ });

61+

5662 const urbitWallet = await kg.generateWallet({

5763 ticket: ticket,

5864 ship: ob.patp2dec(pointName)

@@ -61,6 +67,10 @@ class Ticket extends React.Component {

6167 const wallet = walletFromMnemonic(mnemonic, DEFAULT_HD_PATH)

6268 setWallet(wallet)

6369 setUrbitWallet(Maybe.Just(urbitWallet))

70+

71+ this.setState({

72+ isUnlocking: false

73+ });

6474 }

6575

6676 render() {

@@ -99,9 +109,9 @@ class Ticket extends React.Component {

99109

100110 <TicketInput

101111 className='mono mt-8'

102− prop-size='md'

112+ prop-size='lg'

103113 prop-format='innerLabel'

104− type='text'

114+ type='password'

105115 name='ticket'

106116 placeholder={ `e.g. ${phTick}` }

107117 value={ ticket }

@@ -112,9 +122,16 @@ class Ticket extends React.Component {

112122 <Button

113123 className={'mt-8'}

114124 prop-size={'lg wide'}

125+ disabled={this.state.isUnlocking || !Maybe.Nothing.hasInstance(wallet)}

115126 // prop-color={this.buttonTriState(wallet)}

116127 onClick={() => this.walletFromTicket(ticket, pointName)}>

117− {'Unlock Wallet →'}

128+

129+ <span className="relative">

130+ {this.state.isUnlocking &&

131+ <span className="btn-spinner"></span>

132+ }

133+ {'Unlock Wallet →'}

134+ </span>

118135 </Button>

119136

120137 <Button