a3a6828 · bridge · git.iko.soy

git.iko.soy/bridge

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

commita3a6828b2bdd06ddd2e1da51058b208b2760143e authorChris Johnson <chris@cjohnson.io> dateMon 11 Mar 2019, 13:34 (8 years ago) parenta810cb7

4 files changed+77−23

compare with master

unifiedsplit

src/components/StatelessTransaction.js+39−3 src/style/button.css+23 src/style/extend.css+5−20 src/views/SetProxy.js+10

src/components/StatelessTransaction.js+39−3

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

1010const StatelessTransaction = props => {

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

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

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

1313 const { txn, stx, createUnsignedTxn } = props

1414 const { canSign, canGenerate, canApprove } = props

1515 const { setUserApproval, userApproval } = props

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

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

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

2020

21+ const handleRangeChange = (e) => {

22+ setGasPrice(e.target.value);

23+ }

24+

2125 const sendTxn = (e) => {

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

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

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

5963 </React.Fragment>

6064 })

6165

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+

6291 const gasPriceDialogue =

6392 <Input

6493 className={ 'mono mt-4' }

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

182211 { generateTxnButton }

183212 { unsignedTxnDisplay }

184213

185− { gasPriceDialogue }

186− { gasLimitDialogue }

214+ { gasPriceRangeDialogue }

215+ { toggleGasDetailsDialogue }

216+

217+ { showGasDetails &&

218+ <div>

219+ { gasPriceDialogue }

220+ { gasLimitDialogue }

221+ </div>

222+ }

187223 { onlineParamsDialogue }

188224

189225 { signTxnButton }

src/style/button.css+23

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

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

9696 width: 100%;

9797}

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 {

444444 display: none !important;

445445}

446446

447−.btn-spinner {

448− position: absolute;

449− display: inline-block;

450− width: 20px;

451− height: 20px;

452− left: -35px;

447+.flex {

448+ display: flex;

453449}

454450

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); } }

451+.space-between {

452+ justify-content: space-between;

453+}

src/views/SetProxy.js+10

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

5858 txn: Maybe.Nothing(),

5959 txError: Maybe.Nothing(),

6060 issuingPoint: issuingPoint,

61+ showGasDetails: false,

6162 userApproval: false,

6263 nonce: '',

6364 gasPrice: '5',

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

7778 this.handleSetChainId = this.handleSetChainId.bind(this)

7879 this.handleSetGasPrice = this.handleSetGasPrice.bind(this)

7980 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+ })

8088 }

8189

8290 componentDidMount() {

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

339347 gasPrice={state.gasPrice}

340348 chainId={state.chainId}

341349 gasLimit={state.gasLimit}

350+ showGasDetails={state.showGasDetails}

351+ toggleGasDetails={this.toggleGasDetails}

342352 // Checks

343353 userApproval={state.userApproval}

344354 canGenerate={ canGenerate }