@@ -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
@@ -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,40 @@ const StatelessTransaction = props => {
5963 </React.Fragment>
6064 })
6165
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+
62100 const gasPriceDialogue =
63101 <Input
64102 className={ 'mono mt-4' }
@@ -182,8 +220,15 @@ const StatelessTransaction = props => {
182220 { generateTxnButton }
183221 { unsignedTxnDisplay }
184222
185− { gasPriceDialogue }
186− { gasLimitDialogue }
223+ { gasPriceRangeDialogue }
224+ { toggleGasDetailsDialogue }
225+
226+ { showGasDetails &&
227+ <div>
228+ { gasPriceDialogue }
229+ { gasLimitDialogue }
230+ </div>
231+ }
187232 { onlineParamsDialogue }
188233
189234 { signTxnButton }