a3a6828 · bridge · git.iko.soy

git.iko.soy/bridge

on master help sign in

- Added a range slider for gas price. Only works for setProxy

a3a6828Chris Johnson8 years ago

src/components/StatelessTransaction.js+39−3

compare with master

unifiedsplit

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

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)

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,31 @@ const StatelessTransaction = props => {

59 </React.Fragment>

63 </React.Fragment>

60 })

64 })

66+ const gasPriceRangeDialogue = (

67+ <React.Fragment>

68+ <div className="mt-8">Gas Price: <span className="ml-4 text-700 text-sm">{gasPrice} gwei</span></div>

69+

70+ <input

71+ className="mt-4"

72+ type="range"

73+ min="4"

74+ max="20"

75+ list="gweiVals"

76+ value={gasPrice}

77+ onChange={handleRangeChange}

78+ />

79+

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

81+ <div>Cheap</div>

82+ <div>Fast</div>

83+ </div>

84+ </React.Fragment>

85+ )

86+

87+ const toggleGasDetailsDialogue = (

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

89+ )

90+

62 const gasPriceDialogue =

91 const gasPriceDialogue =

63 <Input

92 <Input

64 className={ 'mono mt-4' }

93 className={ 'mono mt-4' }

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

182 { generateTxnButton }

211 { generateTxnButton }

183 { unsignedTxnDisplay }

212 { unsignedTxnDisplay }

184

213

214+ { gasPriceRangeDialogue }

215+ { toggleGasDetailsDialogue }

216+

217+ { showGasDetails &&

218+ <div>

185− { gasPriceDialogue }

219+ { gasPriceDialogue }

186− { gasLimitDialogue }

220+ { gasLimitDialogue }

221+ </div>

222+ }

187 { onlineParamsDialogue }

223 { onlineParamsDialogue }

188

224

189 { signTxnButton }

225 { 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+5−20

@@ -444,25 +444,10 @@ 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;

453+}

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/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 }

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 }