782b70a · bridge · git.iko.soy

src/components/StatelessTransaction.js+48−3

compare with master

unifiedsplit

@@ -9,7 +9,7 @@ import { renderSignedTx, signTransaction } from '../lib/txn'

9

10const StatelessTransaction = props => {

11 const { web3, gasPrice, gasLimit, nonce, chainId } = props

12− const { setNonce, setChainId, setGasLimit, setGasPrice } = props

12+ const { setNonce, setChainId, setGasLimit, setGasPrice, showGasDetails, toggleGasDetails } = props

13 const { txn, stx, createUnsignedTxn } = props

14 const { canSign, canGenerate, canApprove } = props

15 const { setUserApproval, userApproval } = props

@@ -18,6 +18,10 @@ const StatelessTransaction = props => {

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 handleRangeChange = (e) => {

22+ setGasPrice(e.target.value);

23+ }

24+

21 const sendTxn = (e) => {

25 const sendTxn = (e) => {

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

26 e.target.setAttribute("disabled", true);

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

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

@@ -59,6 +63,40 @@ const StatelessTransaction = props => {

59 </React.Fragment>

63 </React.Fragment>

60 })

64 })

61

65

66+ const gasPriceRangeDialogue = (

67+ <React.Fragment>

68+ <div className="mt-12 flex space-between align-baseline">

69+ <div>

70+ <span>Gas Price:</span>

71+ <span className="ml-4 text-700 text-sm">{gasPrice} gwei</span>

72+ </div>

73+ <div className="text-sm">

74+ <span>Max transaction fee: </span>

75+ <span className="text-700">{(gasPrice * gasLimit) / 1000000000} eth</span>

76+ </div>

77+ </div>

78+

79+ <input

80+ className="mt-4"

81+ type="range"

82+ min="2"

83+ max="20"

84+ list="gweiVals"

85+ value={gasPrice}

86+ onChange={handleRangeChange}

87+ />

88+

89+ <div className="flex space-between text-sm mb-8">

90+ <div>Cheap</div>

91+ <div>Fast</div>

92+ </div>

93+ </React.Fragment>

94+ )

95+

96+ const toggleGasDetailsDialogue = (

97+ <a href="javascript:void(0)" onClick={toggleGasDetails}>Gas Details</a>

98+ )

99+

62 const gasPriceDialogue =

100 const gasPriceDialogue =

63 <Input

101 <Input

64 className={ 'mono mt-4' }

102 className={ 'mono mt-4' }

@@ -182,8 +220,15 @@ const StatelessTransaction = props => {

182 { generateTxnButton }

220 { generateTxnButton }

183 { unsignedTxnDisplay }

221 { unsignedTxnDisplay }

184

222

223+ { gasPriceRangeDialogue }

224+ { toggleGasDetailsDialogue }

225+

226+ { showGasDetails &&

227+ <div>

185− { gasPriceDialogue }

228+ { gasPriceDialogue }

186− { gasLimitDialogue }

229+ { gasLimitDialogue }

230+ </div>

231+ }

187 { onlineParamsDialogue }

232 { onlineParamsDialogue }

188

233

189 { signTxnButton }

234 { signTxnButton }

src/style/button.css+23

@@ -95,3 +95,26 @@ button[prop-type='solid']:disabled {

95button[prop-type='solid'][prop-size*='wide'] {

96 width: 100%;

97}

98+

99+.btn-spinner {

100+ position: absolute;

101+ display: inline-block;

102+ width: 20px;

103+ height: 20px;

104+ left: -35px;

105+}

106+

107+.btn-spinner::after {

108+ position: absolute;

109+ width: 16px;

110+ height: 16px;

111+ bottom: 0;

112+ content: "◠";

113+ animation: spin linear 1s infinite;

114+ font-size: 20px;

115+ line-height: 20px;

116+}

117+

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

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

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

src/style/extend.css+9−20

@@ -444,25 +444,14 @@ code {

444 display: none !important;

445}

446

447−.btn-spinner {

447+.flex {

448− position: absolute;

449− display: inline-block;

448+ display: flex;

450− width: 20px;

451− height: 20px;

452− left: -35px;

453}

449}

454

450

455−.btn-spinner::after {

451+.space-between {

456− position: absolute;

457− width: 16px;

458− height: 16px;

459− bottom: 0;

460− content: "◠";

452+ justify-content: space-between;

461− animation: spin linear 1s infinite;

462− font-size: 20px;

463− line-height: 20px;

464−}

453+}

465−

454+

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

455+.align-baseline {

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

456+ align-items: baseline;

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

457+}

src/views/AcceptTransfer.js+10

@@ -38,6 +38,7 @@ class AcceptTransfer extends React.Component {

38 userApproval: false,

39 nonce: '',

40 gasPrice: '5',

41+ showGasDetails: false,

41 chainId: '',

42 chainId: '',

42 gasLimit: '600000',

43 gasLimit: '600000',

43 stx: Nothing(),

44 stx: Nothing(),

@@ -53,6 +54,13 @@ class AcceptTransfer extends React.Component {

53 this.handleSetChainId = this.handleSetChainId.bind(this)

54 this.handleSetChainId = this.handleSetChainId.bind(this)

54 this.handleSetGasPrice = this.handleSetGasPrice.bind(this)

55 this.handleSetGasPrice = this.handleSetGasPrice.bind(this)

55 this.handleSetGasLimit = this.handleSetGasLimit.bind(this)

56 this.handleSetGasLimit = this.handleSetGasLimit.bind(this)

57+ this.toggleGasDetails = this.toggleGasDetails.bind(this)

58+ }

59+

60+ toggleGasDetails() {

61+ this.setState({

62+ showGasDetails: !this.state.showGasDetails

63+ })

56 }

64 }

57

65

58 componentDidMount() {

66 componentDidMount() {

@@ -260,6 +268,8 @@ class AcceptTransfer extends React.Component {

260 gasPrice={state.gasPrice}

268 gasPrice={state.gasPrice}

261 chainId={state.chainId}

269 chainId={state.chainId}

262 gasLimit={state.gasLimit}

270 gasLimit={state.gasLimit}

271+ showGasDetails={state.showGasDetails}

272+ toggleGasDetails={this.toggleGasDetails}

263 // Checks

273 // Checks

264 userApproval={state.userApproval}

274 userApproval={state.userApproval}

265 canGenerate={ canGenerate }

275 canGenerate={ canGenerate }

src/views/CancelTransfer.js+10

@@ -38,6 +38,7 @@ class CancelTransfer extends React.Component {

38 userApproval: false,

39 nonce: '',

40 gasPrice: '5',

41+ showGasDetails: false,

41 chainId: '',

42 chainId: '',

42 gasLimit: '600000',

43 gasLimit: '600000',

43 stx: Maybe.Nothing(),

44 stx: Maybe.Nothing(),

@@ -52,6 +53,13 @@ class CancelTransfer extends React.Component {

52 this.handleSetChainId = this.handleSetChainId.bind(this)

53 this.handleSetChainId = this.handleSetChainId.bind(this)

53 this.handleSetGasPrice = this.handleSetGasPrice.bind(this)

54 this.handleSetGasPrice = this.handleSetGasPrice.bind(this)

54 this.handleSetGasLimit = this.handleSetGasLimit.bind(this)

55 this.handleSetGasLimit = this.handleSetGasLimit.bind(this)

56+ this.toggleGasDetails = this.toggleGasDetails.bind(this)

57+ }

58+

59+ toggleGasDetails() {

60+ this.setState({

61+ showGasDetails: !this.state.showGasDetails

62+ })

55 }

63 }

56

64

57 componentDidMount() {

65 componentDidMount() {

@@ -242,6 +250,8 @@ class CancelTransfer extends React.Component {

242 gasPrice={state.gasPrice}

250 gasPrice={state.gasPrice}

243 chainId={state.chainId}

251 chainId={state.chainId}

244 gasLimit={state.gasLimit}

252 gasLimit={state.gasLimit}

253+ showGasDetails={state.showGasDetails}

254+ toggleGasDetails={this.toggleGasDetails}

245 // Checks

255 // Checks

246 userApproval={state.userApproval}

256 userApproval={state.userApproval}

247 canGenerate={ canGenerate }

257 canGenerate={ canGenerate }

src/views/CreateGalaxy.js+10

@@ -64,6 +64,7 @@ class CreateGalaxy extends React.Component {

64 txApproval: false,

65 nonce: '',

66 gasPrice: '5',

67+ showGasDetails: false,

67 chainId: '',

68 chainId: '',

68 txInfo: '',

69 txInfo: '',

69 gasLimit: '600000',

70 gasLimit: '600000',

@@ -75,6 +76,13 @@ class CreateGalaxy extends React.Component {

75 this.handleGalaxyNameInput = this.handleGalaxyNameInput.bind(this)

76 this.handleGalaxyNameInput = this.handleGalaxyNameInput.bind(this)

76 this.confirmAvailability = this.confirmAvailability.bind(this)

77 this.confirmAvailability = this.confirmAvailability.bind(this)

77 this.handleSubmit = this.handleSubmit.bind(this)

78 this.handleSubmit = this.handleSubmit.bind(this)

79+ this.toggleGasDetails = this.toggleGasDetails.bind(this)

80+ }

81+

82+ toggleGasDetails() {

83+ this.setState({

84+ showGasDetails: !this.state.showGasDetails

85+ })

78 }

86 }

79

87

80 componentDidMount() {

88 componentDidMount() {

@@ -266,6 +274,8 @@ class CreateGalaxy extends React.Component {

266 stx={state.stx}

274 stx={state.stx}

267 nonce={state.nonce}

275 nonce={state.nonce}

268 gasPrice={state.gasPrice}

276 gasPrice={state.gasPrice}

277+ showGasDetails={state.showGasDetails}

278+ toggleGasDetails={this.toggleGasDetails}

269 chainId={state.chainId}

279 chainId={state.chainId}

270 gasLimit={state.gasLimit}

280 gasLimit={state.gasLimit}

271 canGenerate={

281 canGenerate={

src/views/IssueChild.js+10

@@ -51,6 +51,7 @@ class IssueChild extends React.Component {

51 userApproval: false,

52 nonce: '',

53 gasPrice: '5',

54+ showGasDetails: false,

54 chainId: '',

55 chainId: '',

55 gasLimit: '600000',

56 gasLimit: '600000',

56 txn: Nothing(),

57 txn: Nothing(),

@@ -70,6 +71,13 @@ class IssueChild extends React.Component {

70 this.handleSetChainId = this.handleSetChainId.bind(this)

71 this.handleSetChainId = this.handleSetChainId.bind(this)

71 this.handleSetGasPrice = this.handleSetGasPrice.bind(this)

72 this.handleSetGasPrice = this.handleSetGasPrice.bind(this)

72 this.handleSetGasLimit = this.handleSetGasLimit.bind(this)

73 this.handleSetGasLimit = this.handleSetGasLimit.bind(this)

74+ this.toggleGasDetails = this.toggleGasDetails.bind(this)

75+ }

76+

77+ toggleGasDetails() {

78+ this.setState({

79+ showGasDetails: !this.state.showGasDetails

80+ })

73 }

81 }

74

82

75 componentDidMount() {

83 componentDidMount() {

@@ -478,6 +486,8 @@ class IssueChild extends React.Component {

478 // Tx details

486 // Tx details

479 nonce={state.nonce}

487 nonce={state.nonce}

480 gasPrice={state.gasPrice}

488 gasPrice={state.gasPrice}

489+ showGasDetails={state.showGasDetails}

490+ toggleGasDetails={this.toggleGasDetails}

481 chainId={state.chainId}

491 chainId={state.chainId}

482 gasLimit={state.gasLimit}

492 gasLimit={state.gasLimit}

483 // Checks

493 // Checks

src/views/SetKeys.js+9

@@ -45,6 +45,7 @@ class SetKeys extends React.Component {

45 userApproval: false,

46 nonce: '',

47 gasPrice: '5',

48+ showGasDetails: false,

48 chainId: '',

49 chainId: '',

49 gasLimit: '600000',

50 gasLimit: '600000',

50 stx: Maybe.Nothing(),

51 stx: Maybe.Nothing(),

@@ -61,8 +62,14 @@ class SetKeys extends React.Component {

61 this.handleSetChainId = this.handleSetChainId.bind(this)

62 this.handleSetChainId = this.handleSetChainId.bind(this)

62 this.handleSetGasPrice = this.handleSetGasPrice.bind(this)

63 this.handleSetGasPrice = this.handleSetGasPrice.bind(this)

63 this.handleSetGasLimit = this.handleSetGasLimit.bind(this)

64 this.handleSetGasLimit = this.handleSetGasLimit.bind(this)

65+ this.toggleGasDetails = this.toggleGasDetails.bind(this)

64 }

66 }

65

67

68+ toggleGasDetails() {

69+ this.setState({

70+ showGasDetails: !this.state.showGasDetails

71+ })

72+ }

66

73

67 componentDidMount() {

74 componentDidMount() {

68 const { props } = this

75 const { props } = this

@@ -338,6 +345,8 @@ class SetKeys extends React.Component {

338 gasPrice={state.gasPrice}

345 gasPrice={state.gasPrice}

339 chainId={state.chainId}

346 chainId={state.chainId}

340 gasLimit={state.gasLimit}

347 gasLimit={state.gasLimit}

348+ showGasDetails={state.showGasDetails}

349+ toggleGasDetails={this.toggleGasDetails}

341 // Checks

350 // Checks

342 userApproval={state.userApproval}

351 userApproval={state.userApproval}

343 canGenerate={ canGenerate }

352 canGenerate={ canGenerate }

src/views/SetProxy.js+10

@@ -58,6 +58,7 @@ class SetProxy extends React.Component {

58 txn: Maybe.Nothing(),

59 txError: Maybe.Nothing(),

60 issuingPoint: issuingPoint,

61+ showGasDetails: false,

61 userApproval: false,

62 userApproval: false,

62 nonce: '',

63 nonce: '',

63 gasPrice: '5',

64 gasPrice: '5',

@@ -77,6 +78,13 @@ class SetProxy extends React.Component {

77 this.handleSetChainId = this.handleSetChainId.bind(this)

78 this.handleSetChainId = this.handleSetChainId.bind(this)

78 this.handleSetGasPrice = this.handleSetGasPrice.bind(this)

79 this.handleSetGasPrice = this.handleSetGasPrice.bind(this)

79 this.handleSetGasLimit = this.handleSetGasLimit.bind(this)

80 this.handleSetGasLimit = this.handleSetGasLimit.bind(this)

81+ this.toggleGasDetails = this.toggleGasDetails.bind(this)

82+ }

83+

84+ toggleGasDetails() {

85+ this.setState({

86+ showGasDetails: !this.state.showGasDetails

87+ })

80 }

88 }

81

89

82 componentDidMount() {

90 componentDidMount() {

@@ -339,6 +347,8 @@ class SetProxy extends React.Component {

339 gasPrice={state.gasPrice}

347 gasPrice={state.gasPrice}

340 chainId={state.chainId}

348 chainId={state.chainId}

341 gasLimit={state.gasLimit}

349 gasLimit={state.gasLimit}

350+ showGasDetails={state.showGasDetails}

351+ toggleGasDetails={this.toggleGasDetails}

342 // Checks

352 // Checks

343 userApproval={state.userApproval}

353 userApproval={state.userApproval}

344 canGenerate={ canGenerate }

354 canGenerate={ canGenerate }

src/views/Transfer.js+9

@@ -39,6 +39,7 @@ class Transfer extends React.Component {

39 userApproval: false,

40 nonce: '',

41 gasPrice: '5',

42+ showGasDetails: false,

42 chainId: '',

43 chainId: '',

43 gasLimit: '600000',

44 gasLimit: '600000',

44 txn: Maybe.Nothing(),

45 txn: Maybe.Nothing(),

@@ -55,8 +56,14 @@ class Transfer extends React.Component {

55 this.handleSetChainId = this.handleSetChainId.bind(this)

56 this.handleSetChainId = this.handleSetChainId.bind(this)

56 this.handleSetGasPrice = this.handleSetGasPrice.bind(this)

57 this.handleSetGasPrice = this.handleSetGasPrice.bind(this)

57 this.handleSetGasLimit = this.handleSetGasLimit.bind(this)

58 this.handleSetGasLimit = this.handleSetGasLimit.bind(this)

59+ this.toggleGasDetails = this.toggleGasDetails.bind(this)

58 }

60 }

59

61

62+ toggleGasDetails() {

63+ this.setState({

64+ showGasDetails: !this.state.showGasDetails

65+ })

66+ }

60

67

61 componentDidMount() {

68 componentDidMount() {

62 const { props } = this

69 const { props } = this

@@ -311,6 +318,8 @@ class Transfer extends React.Component {

311 gasPrice={state.gasPrice}

318 gasPrice={state.gasPrice}

312 chainId={state.chainId}

319 chainId={state.chainId}

313 gasLimit={state.gasLimit}

320 gasLimit={state.gasLimit}

321+ showGasDetails={state.showGasDetails}

322+ toggleGasDetails={this.toggleGasDetails}

314 // Checks

323 // Checks

315 userApproval={state.userApproval}

324 userApproval={state.userApproval}

316 canGenerate={ canGenerate }

325 canGenerate={ canGenerate }