@@ -9,7 +9,7 @@ import { renderSignedTx, signTransaction } from '../lib/txn'
99
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
@@ -20,6 +20,10 @@ const StatelessTransaction = props => {
2020 // - TypeError: Cannot read property 'updater' of undefined
2121 // so just modifying the DOM manually here. (https://imgur.com/a/i0Qsyq1)
2222
23+ const handleRangeChange = (e) => {
24+ setGasPrice(e.target.value);
25+ }
26+
2327 const sendTxn = (e) => {
2428 e.target.setAttribute("disabled", true);
2529 let spinner = e.target.querySelectorAll('.btn-spinner')[0];
@@ -61,6 +65,40 @@ const StatelessTransaction = props => {
6165 </React.Fragment>
6266 })
6367
68+ const gasPriceRangeDialogue = (
69+ <React.Fragment>
70+ <div className="mt-12 flex space-between align-baseline">
71+ <div>
72+ <span>Gas Price:</span>
73+ <span className="ml-4 text-700 text-sm">{gasPrice} gwei</span>
74+ </div>
75+ <div className="text-sm">
76+ <span>Max transaction fee: </span>
77+ <span className="text-700">{(gasPrice * gasLimit) / 1000000000} eth</span>
78+ </div>
79+ </div>
80+
81+ <input
82+ className="mt-4"
83+ type="range"
84+ min="2"
85+ max="20"
86+ list="gweiVals"
87+ value={gasPrice}
88+ onChange={handleRangeChange}
89+ />
90+
91+ <div className="flex space-between text-sm mb-8">
92+ <div>Cheap</div>
93+ <div>Fast</div>
94+ </div>
95+ </React.Fragment>
96+ )
97+
98+ const toggleGasDetailsDialogue = (
99+ <a href="javascript:void(0)" onClick={toggleGasDetails}>Gas Details</a>
100+ )
101+
64102 const gasPriceDialogue =
65103 <Input
66104 className={ 'mono mt-4' }
@@ -184,8 +222,15 @@ const StatelessTransaction = props => {
184222 { generateTxnButton }
185223 { unsignedTxnDisplay }
186224
187− { gasPriceDialogue }
188− { gasLimitDialogue }
225+ { gasPriceRangeDialogue }
226+ { toggleGasDetailsDialogue }
227+
228+ { showGasDetails &&
229+ <div>
230+ { gasPriceDialogue }
231+ { gasLimitDialogue }
232+ </div>
233+ }
189234 { onlineParamsDialogue }
190235
191236 { signTxnButton }