git.iko.soy/bridge
on master help sign in
- added disabled state + button spinner to Send Transaction button
commit09b86e843410e51b20f910a3f767b1dc7e83d7b3 authorChris Johnson <chris@cjohnson.io> dateThu 7 Mar 2019, 11:20 (8 years ago) parent1031df9
2 files changed+36−1
compare with master
unifiedsplit
src/components/StatelessTransaction.js+9−1 src/style/extend.css+27
src/components/StatelessTransaction.js+9−1
@@ -15,8 +15,13 @@ const StatelessTransaction = props => {
1515 const { setUserApproval, userApproval } = props
1616 const { canSend, handleSubmit } = props
1717
18+ // setState doesn't seem to work in SetProxy/handleSubmit, so just
19+ // modifying the DOM manually here. (https://imgur.com/a/i0Qsyq1)
20+
1821 const sendTxn = (e) => {
1922 e.target.setAttribute("disabled", true);
23+ let spinner = e.target.querySelectorAll('.btn-spinner')[0];
24+ spinner.classList.remove('hide');
2025 handleSubmit()
2126 }
2227
@@ -157,7 +162,10 @@ const StatelessTransaction = props => {
157162 disabled={ !canSend }
158163 onClick={ sendTxn }
159164 >
160− { 'Send Transaction' }
165+ <span className="relative">
166+ <span className="btn-spinner hide"></span>
167+ { 'Send Transaction' }
168+ </span>
161169 </Button>
162170
163171 const sendDialogue = web3.matchWith({
src/style/extend.css+27
@@ -439,3 +439,30 @@ code {
439439.pointer:hover {
440440 cursor: pointer;
441441}
442+
443+.hide {
444+ display: none !important;
445+}
446+
447+.btn-spinner {
448+ position: absolute;
449+ display: inline-block;
450+ width: 20px;
451+ height: 20px;
452+ left: -35px;
453+}
454+
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); } }