TxButton withSpinner swap (#2194)

* TxButton withSpinner swap * TxModal onClick -> onStart (in modal)
2020-01-24 15:19:49 +01:00 · 2020-01-24 15:19:49 +01:00 · 9001400ef0
commit 9001400ef0
parent 09fe9332c7
27 changed files with 37 additions and 33 deletions
--- a/packages/app-123code/src/Transfer.tsx
+++ b/packages/app-123code/src/Transfer.tsx
@ -37,6 +37,7 @@ export default function Transfer ({ accountId }: Props): React.ReactElement<Prop
              label='make transfer'
              params={[recipientId, amount]}
              tx='balances.transfer'
+              withSpinner
            />
          </Button.Group>
        </div>
--- a/packages/app-accounts/src/modals/Identity.tsx
+++ b/packages/app-accounts/src/modals/Identity.tsx
@ -217,7 +217,6 @@ function Identity ({ address, className, onClose }: Props): React.ReactElement<P
          onStart={onClose}
          params={[info]}
          tx='identity.setIdentity'
-          withSpinner={false}
        />
      </Modal.Actions>
    </Modal>
--- a/packages/app-accounts/src/modals/RecoverAccount.tsx
+++ b/packages/app-accounts/src/modals/RecoverAccount.tsx
@ -41,10 +41,9 @@ export default function RecoverAccount ({ address, className, onClose }: Props):
          icon='recycle'
          isDisabled={!recover || recover === address}
          label={t('Start recovery')}
-          onClick={onClose}
+          onStart={onClose}
          params={[recover]}
          tx='recovery.initiateRecovery'
-          withSpinner={false}
        />
      </Modal.Actions>
    </Modal>
--- a/packages/app-accounts/src/modals/RecoverSetup.tsx
+++ b/packages/app-accounts/src/modals/RecoverSetup.tsx
@ -77,10 +77,9 @@ export default function RecoverSetup ({ address, className, onClose }: Props): R
          icon='share alternate'
          isDisabled={isErrorHelpers || isErrorThreshold || isErrorDelay}
          label={t('Make recoverable')}
-          onClick={onClose}
+          onStart={onClose}
          params={[helpers, threshold, delay]}
          tx='recovery.createRecovery'
-          withSpinner={false}
        />
      </Modal.Actions>
    </Modal>
--- a/packages/app-accounts/src/modals/Transfer.tsx
+++ b/packages/app-accounts/src/modals/Transfer.tsx
@ -135,7 +135,6 @@ function Transfer ({ className, onClose, recipientId: propRecipientId, senderId:
          isPrimary
          label={t('Make Transfer')}
          onStart={onClose}
-          withSpinner={false}
        />
      </Modal.Actions>
    </Modal>
--- a/packages/app-contracts/src/Codes/Upload.tsx
+++ b/packages/app-contracts/src/Codes/Upload.tsx
@ -83,6 +83,7 @@ class Upload extends ContractModal<Props, State> {
        params={[gasLimit, wasm]}
        tx={api.tx.contracts ? 'contracts.putCode' : 'contract.putCode'}
        ref={this.button}
+        withSpinner
      />
    );
  }
--- a/packages/app-contracts/src/Contracts/Call.tsx
+++ b/packages/app-contracts/src/Contracts/Call.tsx
@ -220,6 +220,7 @@ function Call (props: Props): React.ReactElement<Props> | null {
                onSuccess={_toggleBusy}
                params={_constructTx}
                tx={api.tx.contracts ? 'contracts.call' : 'contract.call'}
+                withSpinner
              />
            )
          }
--- a/packages/app-contracts/src/Deploy.tsx
+++ b/packages/app-contracts/src/Deploy.tsx
@ -242,6 +242,7 @@ class Deploy extends ContractModal<Props, State> {
            : 'contract.create' // V1
        }
        ref={this.button}
+        withSpinner
      />
    );
  }
--- a/packages/app-democracy/src/Overview/PreImage.tsx
+++ b/packages/app-democracy/src/Overview/PreImage.tsx
@ -83,7 +83,6 @@ function PreImage ({ className, isImminent: propsIsImminent, matchHash, onClose
          onStart={onClose}
          params={[encodedProposal]}
          tx={isImminent ? 'democracy.noteImminentPreimage' : 'democracy.notePreimage'}
-          withSpinner={false}
        />
      </Modal.Actions>
    </Modal>
--- a/packages/app-democracy/src/Overview/Propose.tsx
+++ b/packages/app-democracy/src/Overview/Propose.tsx
@ -62,7 +62,6 @@ export default function Propose ({ className, onClose }: Props): React.ReactElem
          onStart={onClose}
          params={[hash, balance]}
          tx='democracy.propose'
-          withSpinner={false}
        />
      </Modal.Actions>
    </Modal>
--- a/packages/app-democracy/src/Overview/Seconding.tsx
+++ b/packages/app-democracy/src/Overview/Seconding.tsx
@ -7,7 +7,7 @@ import { AccountId, Proposal } from '@polkadot/types/interfaces';
 import BN from 'bn.js';
 import React, { useState } from 'react';
 import { Button, InputAddress, Modal, ProposedAction, TxButton } from '@polkadot/react-components';
-import { useAccounts } from '@polkadot/react-hooks';
+import { useAccounts, useToggle } from '@polkadot/react-hooks';

 import { useTranslation } from '../translate';

@ -22,14 +22,13 @@ export default function Seconding ({ depositors, proposal, proposalId }: Props):
  const { t } = useTranslation();
  const { hasAccounts } = useAccounts();
  const [accountId, setAccountId] = useState<string | null>(null);
-  const [isSecondingOpen, setIsSecondingOpen] = useState(false);
+  const [isSecondingOpen, toggleSeconding] = useToggle();

  if (!hasAccounts) {
    return null;
  }

  const isDepositor = depositors.some((depositor): boolean => depositor.eq(accountId));
-  const _toggleSeconding = (): void => setIsSecondingOpen(!isSecondingOpen);

  return (
    <>
@ -51,14 +50,14 @@ export default function Seconding ({ depositors, proposal, proposalId }: Props):
              withLabel
            />
          </Modal.Content>
-          <Modal.Actions onCancel={_toggleSeconding}>
+          <Modal.Actions onCancel={toggleSeconding}>
            <TxButton
              accountId={accountId}
              isDisabled={!accountId || isDepositor}
              isPrimary
              label={t('Second')}
              icon='sign-in'
-              onStart={_toggleSeconding}
+              onStart={toggleSeconding}
              params={[proposalId]}
              tx='democracy.second'
            />
@ -69,7 +68,7 @@ export default function Seconding ({ depositors, proposal, proposalId }: Props):
        isPrimary
        label={t('Second')}
        icon='toggle off'
-        onClick={_toggleSeconding}
+        onClick={toggleSeconding}
      />
    </>
  );
--- a/packages/app-extrinsics/src/Selection.tsx
+++ b/packages/app-extrinsics/src/Selection.tsx
@ -60,6 +60,7 @@ class Selection extends TxComponent<Props, State> {
            label={t('Submit Unsigned')}
            icon='sign-in'
            extrinsic={extrinsic}
+            withSpinner
          />
          <Button.Or />
          <TxButton
@ -70,6 +71,7 @@ class Selection extends TxComponent<Props, State> {
            icon='sign-in'
            extrinsic={extrinsic}
            ref={this.button}
+            withSpinner
          />
        </Button.Group>
      </div>
--- a/packages/app-generic-asset/src/Transfer.tsx
+++ b/packages/app-generic-asset/src/Transfer.tsx
@ -118,7 +118,6 @@ function Transfer ({ assets, className, onClose, recipientId: propRecipientId, s
          label={t('Make Transfer')}
          icon='send'
          onStart={onClose}
-          withSpinner={false}
        />
      </Button.Group>
    </div>
--- a/packages/app-staking/src/Actions/Account/BondExtra.tsx
+++ b/packages/app-staking/src/Actions/Account/BondExtra.tsx
@ -78,9 +78,10 @@ class BondExtra extends TxComponent<Props, State> {
            isPrimary
            label={t('Bond more')}
            icon='sign-in'
-            onClick={onClose}
+            onStart={onClose}
            extrinsic={extrinsic}
            ref={this.button}
+            withSpinner
          />
        </Modal.Actions>
      </Modal>
--- a/packages/app-staking/src/Actions/Account/Nominate.tsx
+++ b/packages/app-staking/src/Actions/Account/Nominate.tsx
@ -91,7 +91,7 @@ function Nominate ({ className, controllerId, nominees, onClose, next, stakingOv
          accountId={controllerId}
          isDisabled={!selection.length}
          isPrimary
-          onClick={onClose}
+          onStart={onClose}
          params={[selection]}
          label={t('Nominate')}
          icon='hand paper outline'
--- a/packages/app-staking/src/Actions/Account/SetControllerAccount.tsx
+++ b/packages/app-staking/src/Actions/Account/SetControllerAccount.tsx
@ -87,10 +87,11 @@ class SetControllerAccount extends TxComponent<Props, State> {
            isPrimary
            label={t('Set controller')}
            icon='sign-in'
-            onClick={onClose}
+            onStart={onClose}
            params={[controllerId]}
            tx='staking.setController'
            ref={this.button}
+            withSpinner
          />
        </Modal.Actions>
      </Modal>
--- a/packages/app-staking/src/Actions/Account/SetRewardDestination.tsx
+++ b/packages/app-staking/src/Actions/Account/SetRewardDestination.tsx
@ -49,10 +49,11 @@ class SetRewardDestination extends TxComponent<Props, State> {
            isPrimary
            label={t('Set reward destination')}
            icon='sign-in'
-            onClick={onClose}
+            onStart={onClose}
            params={[destination]}
            tx={'staking.setPayee'}
            ref={this.button}
+            withSpinner
          />
        </Modal.Actions>
      </Modal>
--- a/packages/app-staking/src/Actions/Account/SetSessionKey.tsx
+++ b/packages/app-staking/src/Actions/Account/SetSessionKey.tsx
@ -87,7 +87,7 @@ export default function SetSessionKey ({ controllerId, isOpen, onClose, sessionI
          isPrimary
          label={t('Set Session Key')}
          icon='sign-in'
-          onClick={onClose}
+          onStart={onClose}
          params={
            isSubstrateV2
              ? [keys, EMPTY_PROOF]
--- a/packages/app-staking/src/Actions/Account/Unbond.tsx
+++ b/packages/app-staking/src/Actions/Account/Unbond.tsx
@ -73,10 +73,11 @@ class Unbond extends TxComponent<Props, State> {
            isPrimary
            label={t('Unbond')}
            icon='sign-out'
-            onClick={onClose}
+            onStart={onClose}
            params={[maxUnbond]}
            tx='staking.unbond'
            ref={this.button}
+            withSpinner
          />
        </Modal.Actions>
      </Modal>
--- a/packages/app-staking/src/Actions/Account/Validate.tsx
+++ b/packages/app-staking/src/Actions/Account/Validate.tsx
@ -91,10 +91,11 @@ class Validate extends TxComponent<Props, State> {
          isPrimary
          label={t('Validate')}
          icon='check circle outline'
-          onClick={onClose}
+          onStart={onClose}
          params={[{ commission }]}
          tx='staking.validate'
          ref={this.button}
+          withSpinner
        />
      </Modal.Actions>
    );
--- a/packages/app-staking/src/Actions/NewStake.tsx
+++ b/packages/app-staking/src/Actions/NewStake.tsx
@ -120,9 +120,10 @@ class NewStake extends TxComponent<Props, State> {
            isPrimary
            label={t('Bond')}
            icon='sign-in'
-            onClick={onClose}
+            onStart={onClose}
            extrinsic={extrinsic}
            ref={this.button}
+            withSpinner
          />
        </Modal.Actions>
      </Modal>
--- a/packages/app-sudo/src/Sudo.tsx
+++ b/packages/app-sudo/src/Sudo.tsx
@ -53,6 +53,7 @@ class Propose extends TxComponent<Props, State> {
              isDisabled={!method || !isValid}
              params={method ? [createType(registry, 'Proposal', method)] : []}
              ref={this.button}
+              withSpinner
            />
          </Button.Group>
        </section>
--- a/packages/app-treasury/src/Overview/Propose.tsx
+++ b/packages/app-treasury/src/Overview/Propose.tsx
@ -5,6 +5,7 @@
 import BN from 'bn.js';
 import React, { useState } from 'react';
 import { Button, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
+import { useToggle } from '@polkadot/react-hooks';
 import useCouncilMembers from '@polkadot/app-council/useCouncilMembers';

 import { useTranslation } from '../translate';
@ -18,11 +19,9 @@ export default function Propose ({ className }: Props): React.ReactElement<Props
  const { isMember, members } = useCouncilMembers();
  const [accountId, setAccountId] = useState<string | null>(null);
  const [beneficiary, setBeneficiary] = useState<string | null>(null);
-  const [isProposeOpen, setIsProposeOpen] = useState(false);
+  const [isProposeOpen, togglePropose] = useToggle();
  const [value, setValue] = useState<BN | undefined>();

-  const _togglePropose = (): void => setIsProposeOpen(!isProposeOpen);
-
  const hasValue = value?.gtn(0);

  return (
@ -57,14 +56,14 @@ export default function Propose ({ className }: Props): React.ReactElement<Props
              onChange={setValue}
            />
          </Modal.Content>
-          <Modal.Actions onCancel={_togglePropose}>
+          <Modal.Actions onCancel={togglePropose}>
            <TxButton
              accountId={accountId}
              icon='add'
              isDisabled={!accountId || !hasValue}
              isPrimary
              label={t('Submit proposal')}
-              onClick={_togglePropose}
+              onStart={togglePropose}
              params={[value, beneficiary]}
              tx='treasury.proposeSpend'
            />
@ -76,7 +75,7 @@ export default function Propose ({ className }: Props): React.ReactElement<Props
        isDisabled={!isMember}
        isPrimary
        label={t('Submit proposal')}
-        onClick={_togglePropose}
+        onClick={togglePropose}
      />
    </>
  );
--- a/packages/app-treasury/src/Overview/Submission.tsx
+++ b/packages/app-treasury/src/Overview/Submission.tsx
@ -75,7 +75,7 @@ export default function Submission ({ councilProposals, id, isDisabled }: Props)
              isDisabled={!accountId || !councilThreshold}
              isPrimary
              label={t('Send to council')}
-              onClick={toggleOpen}
+              onStart={toggleOpen}
              params={[
                councilThreshold,
                councilType === 'reject'
--- a/packages/react-components/src/AccountName.tsx
+++ b/packages/react-components/src/AccountName.tsx
@ -256,7 +256,7 @@ function AccountName ({ children, className, defaultName, label, onClick, overri
              icon='check'
              isDisabled={registrarIndex === -1}
              label={t('Judge')}
-              onClick={toggleJudgement}
+              onStart={toggleJudgement}
              params={[registrarIndex, accountId, judgementEnum]}
              tx='identity.provideJudgement'
            />
--- a/packages/react-components/src/TxButton.tsx
+++ b/packages/react-components/src/TxButton.tsx
@ -62,7 +62,7 @@ class TxButtonInner extends React.PureComponent<InnerProps> {
  }

  protected send = (): void => {
-    const { accountId, api, extrinsic: propsExtrinsic, isUnsigned, onClick, onFailed, onStart, onSuccess, onUpdate, params = [], queueExtrinsic, tx = '', withSpinner = true } = this.props;
+    const { accountId, api, extrinsic: propsExtrinsic, isUnsigned, onClick, onFailed, onStart, onSuccess, onUpdate, params = [], queueExtrinsic, tx = '', withSpinner = false } = this.props;
    let extrinsic: any;

    if (propsExtrinsic) {
--- a/packages/react-components/src/VoteActions.tsx
+++ b/packages/react-components/src/VoteActions.tsx
@ -31,7 +31,7 @@ export default function VoteActions ({ accountId, className, isDisabled, onClick
        isDisabled={!accountId || isDisabled}
        isPrimary
        label={t('Vote')}
-        onClick={onClick}
+        onStart={onClick}
        params={params}
        tx={tx}
      />