From 1c8e50445702c5f195078cc6b9dba8749a2f8dba Mon Sep 17 00:00:00 2001
From: Keith Ingram <kwingram25@gmail.com>
Date: Sun, 1 Mar 2020 12:55:54 -0500
Subject: [PATCH] TxButton to functional (#2314)

* TxButton to functional

* bug fix

* Small moves

Co-authored-by: Jaco Greeff <jacogr@gmail.com>
---
 packages/app-accounts/src/Vanity/index.tsx    |   1 -
 .../app-accounts/src/modals/ChangePass.tsx    |   1 -
 packages/app-accounts/src/modals/Import.tsx   |   1 -
 packages/app-contracts/src/Codes/Upload.tsx   |   1 -
 packages/app-contracts/src/Contracts/Add.tsx  |   1 -
 packages/app-contracts/src/Deploy.tsx         |   1 -
 packages/app-extrinsics/src/Selection.tsx     |   7 +-
 .../src/Actions/Account/BondExtra.tsx         |   1 -
 .../Actions/Account/SetControllerAccount.tsx  |   1 -
 .../Actions/Account/SetRewardDestination.tsx  |   1 -
 .../src/Actions/Account/Unbond.tsx            |   1 -
 .../src/Actions/Account/Validate.tsx          |   1 -
 packages/app-staking/src/Actions/NewStake.tsx |   1 -
 packages/app-sudo/src/Sudo.tsx                |   1 -
 packages/react-components/src/TxButton.tsx    | 142 ++++++------------
 packages/react-components/src/TxModal.tsx     |   1 -
 packages/react-components/src/types.ts        |  71 +++------
 packages/react-hooks/src/index.ts             |   1 -
 packages/react-hooks/src/useForm.tsx          |  24 ---
 19 files changed, 68 insertions(+), 191 deletions(-)
 delete mode 100644 packages/react-hooks/src/useForm.tsx

diff --git a/packages/app-accounts/src/Vanity/index.tsx b/packages/app-accounts/src/Vanity/index.tsx
index 33992a2e72..bdd501ab3b 100644
--- a/packages/app-accounts/src/Vanity/index.tsx
+++ b/packages/app-accounts/src/Vanity/index.tsx
@@ -108,7 +108,6 @@ class VanityApp extends TxComponent<Props, State> {
               ? t('Stop generation')
               : t('Start generation')
           }
-          ref={this.button}
         />
       </Button.Group>
     );
diff --git a/packages/app-accounts/src/modals/ChangePass.tsx b/packages/app-accounts/src/modals/ChangePass.tsx
index eb641ec65c..3eb992d384 100644
--- a/packages/app-accounts/src/modals/ChangePass.tsx
+++ b/packages/app-accounts/src/modals/ChangePass.tsx
@@ -57,7 +57,6 @@ class ChangePass extends TxComponent<Props, State> {
           isPrimary
           label={t('Change')}
           onClick={this.doChange}
-          ref={this.button}
         />
       </Modal.Actions>
     );
diff --git a/packages/app-accounts/src/modals/Import.tsx b/packages/app-accounts/src/modals/Import.tsx
index a7ea5eb7a9..26ddc7dd11 100644
--- a/packages/app-accounts/src/modals/Import.tsx
+++ b/packages/app-accounts/src/modals/Import.tsx
@@ -47,7 +47,6 @@ class Import extends TxComponent<Props, State> {
             isPrimary
             onClick={this.onSave}
             label={t('Restore')}
-            ref={this.button}
           />
         </Modal.Actions>
       </Modal>
diff --git a/packages/app-contracts/src/Codes/Upload.tsx b/packages/app-contracts/src/Codes/Upload.tsx
index 2df1deb866..82ad954450 100644
--- a/packages/app-contracts/src/Codes/Upload.tsx
+++ b/packages/app-contracts/src/Codes/Upload.tsx
@@ -82,7 +82,6 @@ class Upload extends ContractModal<Props, State> {
         onFailed={this.toggleBusy(false)}
         params={[gasLimit, wasm]}
         tx={api.tx.contracts ? 'contracts.putCode' : 'contract.putCode'}
-        ref={this.button}
         withSpinner
       />
     );
diff --git a/packages/app-contracts/src/Contracts/Add.tsx b/packages/app-contracts/src/Contracts/Add.tsx
index 110722c999..4cab733ecc 100644
--- a/packages/app-contracts/src/Contracts/Add.tsx
+++ b/packages/app-contracts/src/Contracts/Add.tsx
@@ -81,7 +81,6 @@ class Add extends ContractModal<Props, State> {
         isPrimary
         label={t('Save')}
         onClick={this.onAdd}
-        ref={this.button}
       />
     );
   }
diff --git a/packages/app-contracts/src/Deploy.tsx b/packages/app-contracts/src/Deploy.tsx
index 3d4f9d4057..d6f59086c8 100644
--- a/packages/app-contracts/src/Deploy.tsx
+++ b/packages/app-contracts/src/Deploy.tsx
@@ -241,7 +241,6 @@ class Deploy extends ContractModal<Props, State> {
               : 'contracts.create' // V2 (old)
             : 'contract.create' // V1
         }
-        ref={this.button}
         withSpinner
       />
     );
diff --git a/packages/app-extrinsics/src/Selection.tsx b/packages/app-extrinsics/src/Selection.tsx
index c642e945c5..1e27773498 100644
--- a/packages/app-extrinsics/src/Selection.tsx
+++ b/packages/app-extrinsics/src/Selection.tsx
@@ -35,7 +35,7 @@ class Selection extends TxComponent<Props, State> {
   public render (): React.ReactNode {
     const { apiDefaultTxSudo, t } = this.props;
     const { isValid, isValidUnsigned, accountId } = this.state;
-    const extrinsic = this.getExtrinsic() || apiDefaultTxSudo;
+    const extrinsic = this.getExtrinsic() || apiDefaultTxSudo('0x00');
 
     return (
       <div className='extrinsics--Selection'>
@@ -64,12 +64,11 @@ class Selection extends TxComponent<Props, State> {
           <Button.Or />
           <TxButton
             accountId={accountId}
+            icon='sign-in'
             isDisabled={!isValid}
             isPrimary
-            label={t('Submit Transaction')}
-            icon='sign-in'
             extrinsic={extrinsic}
-            ref={this.button}
+            label={t('Submit Transaction')}
           />
         </Button.Group>
       </div>
diff --git a/packages/app-staking/src/Actions/Account/BondExtra.tsx b/packages/app-staking/src/Actions/Account/BondExtra.tsx
index 2e51fe2276..5aa7835aa1 100644
--- a/packages/app-staking/src/Actions/Account/BondExtra.tsx
+++ b/packages/app-staking/src/Actions/Account/BondExtra.tsx
@@ -80,7 +80,6 @@ class BondExtra extends TxComponent<Props, State> {
             icon='sign-in'
             onStart={onClose}
             extrinsic={extrinsic}
-            ref={this.button}
             withSpinner
           />
         </Modal.Actions>
diff --git a/packages/app-staking/src/Actions/Account/SetControllerAccount.tsx b/packages/app-staking/src/Actions/Account/SetControllerAccount.tsx
index 490b2e4402..4b95b2d7c6 100644
--- a/packages/app-staking/src/Actions/Account/SetControllerAccount.tsx
+++ b/packages/app-staking/src/Actions/Account/SetControllerAccount.tsx
@@ -90,7 +90,6 @@ class SetControllerAccount extends TxComponent<Props, State> {
             onStart={onClose}
             params={[controllerId]}
             tx='staking.setController'
-            ref={this.button}
             withSpinner
           />
         </Modal.Actions>
diff --git a/packages/app-staking/src/Actions/Account/SetRewardDestination.tsx b/packages/app-staking/src/Actions/Account/SetRewardDestination.tsx
index 6254007d6e..66acddbf43 100644
--- a/packages/app-staking/src/Actions/Account/SetRewardDestination.tsx
+++ b/packages/app-staking/src/Actions/Account/SetRewardDestination.tsx
@@ -52,7 +52,6 @@ class SetRewardDestination extends TxComponent<Props, State> {
             onStart={onClose}
             params={[destination]}
             tx={'staking.setPayee'}
-            ref={this.button}
             withSpinner
           />
         </Modal.Actions>
diff --git a/packages/app-staking/src/Actions/Account/Unbond.tsx b/packages/app-staking/src/Actions/Account/Unbond.tsx
index 75e7e79a5b..2d063ef223 100644
--- a/packages/app-staking/src/Actions/Account/Unbond.tsx
+++ b/packages/app-staking/src/Actions/Account/Unbond.tsx
@@ -76,7 +76,6 @@ class Unbond extends TxComponent<Props, State> {
             onStart={onClose}
             params={[maxUnbond]}
             tx='staking.unbond'
-            ref={this.button}
             withSpinner
           />
         </Modal.Actions>
diff --git a/packages/app-staking/src/Actions/Account/Validate.tsx b/packages/app-staking/src/Actions/Account/Validate.tsx
index 703519cc74..4542dd4b71 100644
--- a/packages/app-staking/src/Actions/Account/Validate.tsx
+++ b/packages/app-staking/src/Actions/Account/Validate.tsx
@@ -94,7 +94,6 @@ class Validate extends TxComponent<Props, State> {
           onStart={onClose}
           params={[{ commission }]}
           tx='staking.validate'
-          ref={this.button}
           withSpinner
         />
       </Modal.Actions>
diff --git a/packages/app-staking/src/Actions/NewStake.tsx b/packages/app-staking/src/Actions/NewStake.tsx
index 99ec88e565..6c1a26847f 100644
--- a/packages/app-staking/src/Actions/NewStake.tsx
+++ b/packages/app-staking/src/Actions/NewStake.tsx
@@ -122,7 +122,6 @@ class NewStake extends TxComponent<Props, State> {
             icon='sign-in'
             onStart={onClose}
             extrinsic={extrinsic}
-            ref={this.button}
             withSpinner
           />
         </Modal.Actions>
diff --git a/packages/app-sudo/src/Sudo.tsx b/packages/app-sudo/src/Sudo.tsx
index 9e41563326..28939e6d71 100644
--- a/packages/app-sudo/src/Sudo.tsx
+++ b/packages/app-sudo/src/Sudo.tsx
@@ -52,7 +52,6 @@ class Propose extends TxComponent<Props, State> {
               tx='sudo.sudo'
               isDisabled={!method || !isValid}
               params={method ? [createType(registry, 'Proposal', method)] : []}
-              ref={this.button}
               withSpinner
             />
           </Button.Group>
diff --git a/packages/react-components/src/TxButton.tsx b/packages/react-components/src/TxButton.tsx
index fd8fca3566..62b4d4cf19 100644
--- a/packages/react-components/src/TxButton.tsx
+++ b/packages/react-components/src/TxButton.tsx
@@ -2,141 +2,93 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
-import { QueueTx, QueueTxExtrinsicAdd } from './Status/types';
 import { TxButtonProps as Props } from './types';
 
-import React from 'react';
+import React, { useContext } from 'react';
 import { SubmittableResult } from '@polkadot/api';
-import { withApi } from '@polkadot/react-api/hoc';
+import { useApi, useToggle } from '@polkadot/react-hooks';
 import { assert, isFunction, isUndefined } from '@polkadot/util';
 
 import Button from './Button';
-import { QueueConsumer } from './Status/Context';
+import { StatusContext } from './Status';
+import { useTranslation } from './translate';
 
-interface InjectedProps {
-  queueExtrinsic: QueueTxExtrinsicAdd;
-  txqueue: QueueTx[];
-}
+export default function TxButton ({ accountId, className, extrinsic: propsExtrinsic, icon, iconSize, isBasic, isDisabled, isNegative, isPrimary, isUnsigned, label, onClick, onFailed, onSendRef, onStart, onSuccess, onUpdate, params, tx, tooltip, withSpinner }: Props): React.ReactElement<Props> {
+  const { t } = useTranslation();
+  const { api } = useApi();
+  const { queueExtrinsic } = useContext(StatusContext);
+  const [isSending, , setIsSending] = useToggle(false);
+  const needsAccount = !isUnsigned && !accountId;
 
-type InnerProps = Props & InjectedProps;
+  const _onFailed = (result: SubmittableResult | null): void => {
+    setIsSending(false);
 
-interface State {
-  extrinsic?: SubmittableExtrinsic;
-  isSending: boolean;
-}
-
-class TxButtonInner extends React.PureComponent<InnerProps> {
-  public state: State = {
-    isSending: false
+    onFailed && onFailed(result);
   };
 
-  public render (): React.ReactNode {
-    const { accountId, className, icon, iconSize, innerRef, isBasic, isDisabled, isNegative, isPrimary, isUnsigned, label, tooltip } = this.props;
+  const _onSuccess = (result: SubmittableResult): void => {
+    setIsSending(false);
 
-    const { isSending } = this.state;
-    const needsAccount = isUnsigned
-      ? false
-      : !accountId;
+    onSuccess && onSuccess(result);
+  };
 
-    return (
-      <Button
-        className={className}
-        tooltip={tooltip}
-        icon={icon}
-        isBasic={isBasic}
-        isDisabled={isSending || isDisabled || needsAccount}
-        isLoading={isSending}
-        isNegative={isNegative}
-        isPrimary={
-          isUndefined(isPrimary)
-            ? (!isNegative && !isBasic)
-            : isPrimary
-        }
-        label={label}
-        onClick={this.send}
-        ref={innerRef}
-        size={iconSize}
-      />
-    );
-  }
-
-  protected send = (): void => {
-    const { accountId, api, extrinsic: propsExtrinsic, isUnsigned, onClick, onFailed, onStart, onSuccess, onUpdate, params = [], queueExtrinsic, tx = '', withSpinner = true } = this.props;
+  const _onSend = (): void => {
     let extrinsic: any;
 
     if (propsExtrinsic) {
       extrinsic = propsExtrinsic;
     } else {
-      const [section, method] = tx.split('.');
+      const [section, method] = (tx || '').split('.');
 
       assert(api.tx[section] && api.tx[section][method], `Unable to find api.tx.${section}.${method}`);
 
       extrinsic = api.tx[section][method](...(
         isFunction(params)
           ? params()
-          : params
+          : (params || [])
       ));
     }
 
     assert(extrinsic, 'Expected generated extrinsic passed to TxButton');
 
     if (withSpinner) {
-      this.setState({ isSending: true });
+      setIsSending(true);
     }
 
     queueExtrinsic({
-      accountId,
+      accountId: accountId && accountId.toString(),
       extrinsic,
       isUnsigned,
-      txFailedCb: withSpinner ? this.onFailed : onFailed,
+      txFailedCb: withSpinner ? _onFailed : onFailed,
       txStartCb: onStart,
-      txSuccessCb: withSpinner ? this.onSuccess : onSuccess,
+      txSuccessCb: withSpinner ? _onSuccess : onSuccess,
       txUpdateCb: onUpdate
     });
 
     onClick && onClick();
+  };
+
+  if (onSendRef) {
+    onSendRef.current = _onSend;
   }
 
-  private onFailed = (result: SubmittableResult | null): void => {
-    const { onFailed } = this.props;
-
-    this.setState({ isSending: false });
-
-    onFailed && onFailed(result);
-  }
-
-  private onSuccess = (result: SubmittableResult): void => {
-    const { onSuccess } = this.props;
-
-    this.setState({ isSending: false });
-
-    onSuccess && onSuccess(result);
-  }
+  return (
+    <Button
+      className={className}
+      tooltip={tooltip}
+      icon={icon || 'check'}
+      isBasic={isBasic}
+      isDisabled={isSending || isDisabled || needsAccount}
+      isLoading={isSending}
+      isNegative={isNegative}
+      isPrimary={
+        isUndefined(isPrimary)
+          ? (!isNegative && !isBasic)
+          : isPrimary
+      }
+      label={label || t('Submit')}
+      onClick={_onSend}
+      size={iconSize}
+    />
+  );
 }
-
-class TxButton extends React.PureComponent<Props, State> {
-  protected button: any = React.createRef();
-
-  public render (): React.ReactNode {
-    const { innerRef, ...props } = this.props;
-    return (
-      <QueueConsumer>
-        {({ queueExtrinsic, txqueue }): React.ReactNode => (
-          <TxButtonInner
-            {...props}
-            queueExtrinsic={queueExtrinsic}
-            txqueue={txqueue}
-            innerRef={innerRef}
-          />
-        )}
-      </QueueConsumer>
-    );
-  }
-
-  protected send = (): void => {
-    this.button.current.send();
-  }
-}
-
-export default withApi(TxButton);
diff --git a/packages/react-components/src/TxModal.tsx b/packages/react-components/src/TxModal.tsx
index 65f73b6f30..7032ffdedb 100644
--- a/packages/react-components/src/TxModal.tsx
+++ b/packages/react-components/src/TxModal.tsx
@@ -157,7 +157,6 @@ export default class TxModal<P extends TxModalProps, S extends TxModalState> ext
         onFailed={this.onFailed}
         onSuccess={this.onSuccess}
         params={this.txParams()}
-        ref={this.button}
         tx={this.txMethod()}
       />
     );
diff --git a/packages/react-components/src/types.ts b/packages/react-components/src/types.ts
index 58c791318b..7bf014b861 100644
--- a/packages/react-components/src/types.ts
+++ b/packages/react-components/src/types.ts
@@ -7,13 +7,14 @@ import { SubmittableExtrinsic } from '@polkadot/api/promise/types';
 import { Abi } from '@polkadot/api-contract';
 import { ActionStatus } from '@polkadot/react-components/Status/types';
 import { InputAddressProps } from '@polkadot/react-components/InputAddress/types';
-import { IExtrinsic } from '@polkadot/types/types';
-import { ApiProps } from '@polkadot/react-api/types';
 import { TxState } from '@polkadot/react-hooks/types';
-import { Index } from '@polkadot/types/interfaces';
-import { ButtonProps, Button$OnClick, Button$Sizes } from './Button/types';
+import { IExtrinsic } from '@polkadot/types/types';
+import { AccountId, Index } from '@polkadot/types/interfaces';
+import { ButtonProps, Button$Sizes } from './Button/types';
 import { TxCallback, TxFailedCallback } from './Status/types';
 
+export type VoidFn = () => void;
+
 export interface BareProps {
   className?: string;
   style?: Record<string, string | number>;
@@ -27,22 +28,6 @@ export interface AppProps {
 
 export type I18nProps = BareProps & WithTranslation;
 
-export type ButtonRef = React.RefObject<React.Component<ButtonProps>>;
-
-// export type FormProps$Ref = React.MutableRefObject<Button$OnClick>;
-
-export interface FormProps {
-  onCancel: Button$OnClick;
-  onSubmit: Button$OnClick;
-}
-
-// export interface FormProps$Hooks {
-//   onInputEnterKey: () => void;
-//   onInputEscapeKey: () => void;
-// }
-
-// export interface FormProps extends FormProps$Refs, FormProps$Hooks {}
-
 export type ConstructTxFn = () => any[];
 
 export type TxTrigger = React.ComponentType<TxTriggerProps>;
@@ -51,59 +36,39 @@ export interface TxTriggerProps {
   onOpen: () => void;
 }
 
-export interface TxButtonInterface {
-  component?: {
-    current?: {
-      send: () => void;
-    };
-  };
-}
-
 export interface TxProps {
   extrinsic?: IExtrinsic | SubmittableExtrinsic | null;
   tx?: string;
   params?: any[] | ConstructTxFn;
 }
 
-export interface TxButtonProps extends TxProps, ApiProps {
-  accountId?: string;
-  accountNonce?: Index;
+export interface TxAccountProps {
   className?: string;
-  icon: string;
-  iconSize?: Button$Sizes;
-  innerRef: ButtonRef;
-  isBasic?: boolean;
-  isDisabled?: boolean;
-  isNegative?: boolean;
-  isPrimary?: boolean;
-  isUnsigned?: boolean;
-  label: React.ReactNode;
-  onClick?: () => any;
-  onFailed?: TxFailedCallback;
-  onStart?: () => void;
-  onSuccess?: TxCallback;
-  onUpdate?: TxCallback;
-  tooltip?: string;
-  withSpinner?: boolean;
+  filter?: string[];
+  label?: React.ReactNode;
+  help?: React.ReactNode;
+  onChange: (value: string | null) => void;
 }
 
-export interface TxButtonNewProps extends TxProps {
-  accountId?: StringOrNull;
+export interface TxButtonProps extends TxProps {
+  accountId?: AccountId | StringOrNull;
   accountNonce?: Index;
   className?: string;
-  icon: string;
+  icon?: string;
   iconSize?: Button$Sizes;
   isBasic?: boolean;
   isDisabled?: boolean;
   isNegative?: boolean;
   isPrimary?: boolean;
   isUnsigned?: boolean;
-  label: React.ReactNode;
-  onClick?: () => any;
+  label?: React.ReactNode;
+  onClick?: VoidFn;
   onFailed?: TxFailedCallback;
-  onStart?: () => void;
+  onSendRef?: React.MutableRefObject<VoidFn | undefined>;
+  onStart?: VoidFn;
   onSuccess?: TxCallback;
   onUpdate?: TxCallback;
+  size?: string;
   tooltip?: string;
   withSpinner?: boolean;
 }
diff --git a/packages/react-hooks/src/index.ts b/packages/react-hooks/src/index.ts
index 8763de9533..41f296e2bb 100644
--- a/packages/react-hooks/src/index.ts
+++ b/packages/react-hooks/src/index.ts
@@ -8,7 +8,6 @@ export { default as useAddresses } from './useAddresses';
 export { default as useApi } from './useApi';
 export { default as useCacheKey } from './useCacheKey';
 export { default as useCall } from './useCall';
-export { default as useForm } from './useForm';
 export { default as useDebounce } from './useDebounce';
 export { default as useFavorites } from './useFavorites';
 export { default as useIsMountedRef } from './useIsMountedRef';
diff --git a/packages/react-hooks/src/useForm.tsx b/packages/react-hooks/src/useForm.tsx
deleted file mode 100644
index 8c30f50d2a..0000000000
--- a/packages/react-hooks/src/useForm.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-// Copyright 2017-2020 @polkadot/react-hooks authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { Button$OnClick } from '@polkadot/react-components/Button/types';
-import { FormProps } from '@polkadot/react-components/types';
-
-import { useRef } from 'react';
-
-const EMPTY_CALLBACK = (): void => undefined;
-
-export default function useForm (onSubmit: () => void, onCancel: () => void = EMPTY_CALLBACK): FormProps {
-  const onCancelRef = useRef<Button$OnClick>(onCancel);
-  const onSubmitRef = useRef<Button$OnClick>(onSubmit);
-
-  return {
-    onCancel: (): void => {
-      onCancelRef.current && onCancelRef.current();
-    },
-    onSubmit: (): void => {
-      onSubmitRef.current && onSubmitRef.current();
-    }
-  };
-}