09b86e8 · bridge · git.iko.soy

git.iko.soy/bridge

on master help sign in

- added disabled state + button spinner to Send Transaction button

09b86e8Chris Johnson8 years ago

src/components/StatelessTransaction.js+9−1

compare with master

unifiedsplit

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

15 const { setUserApproval, userApproval } = props

16 const { canSend, handleSubmit } = props

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

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

20+

18 const sendTxn = (e) => {

21 const sendTxn = (e) => {

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

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

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

24+ spinner.classList.remove('hide');

20 handleSubmit()

25 handleSubmit()

21 }

26 }

@@ -157,7 +162,10 @@ const StatelessTransaction = props => {

157 disabled={ !canSend }

162 disabled={ !canSend }

158 onClick={ sendTxn }

163 onClick={ sendTxn }

159 >

164 >

165+ <span className="relative">

166+ <span className="btn-spinner hide"></span>

160− { 'Send Transaction' }

167+ { 'Send Transaction' }

168+ </span>

161 </Button>

169 </Button>

162

170

163 const sendDialogue = web3.matchWith({

171 const sendDialogue = web3.matchWith({

src/style/extend.css+27

@@ -439,3 +439,30 @@ code {

439.pointer:hover {

440 cursor: pointer;

441}

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