Revert _000 (Babel seem to have issues in dev) (#2002)

packages/app-accounts/src/modals/Transfer.tsx

@@ -13,7 +13,7 @@ import styled from 'styled-components';
 import { Button, InputAddress, InputBalance, Modal, TxButton } from '@polkadot/react-components';
 import { useApi } from '@polkadot/react-hooks';
 import { Available } from '@polkadot/react-query';
-import Checks from '@polkadot/react-signer/Checks';
+// import Checks from '@polkadot/react-signer/Checks';
 
 import translate from '../translate';
 
@@ -68,7 +68,7 @@ function Transfer ({ className, onClose, recipientId: propRecipientId, senderId:
   const { api } = useApi();
   const [amount, setAmount] = useState<BN | undefined>(new BN(0));
   const [extrinsic, setExtrinsic] = useState<SubmittableExtrinsic | null>(null);
-  const [hasAvailable, setHasAvailable] = useState(true);
+  const [hasAvailable] = useState(true);
   const [maxBalance] = useState(new BN(0));
   const [recipientId, setRecipientId] = useState<string | null>(propRecipientId || null);
   const [senderId, setSenderId] = useState<string | null>(propSenderId || null);
@@ -121,12 +121,12 @@ function Transfer ({ className, onClose, recipientId: propRecipientId, senderId:
             onChange={setAmount}
             withMax
           />
-          <Checks
+          {/* <Checks
             accountId={senderId}
             extrinsic={extrinsic}
             isSendable
             onChange={setHasAvailable}
-          />
+          /> */}
         </div>
       </Modal.Content>
       <Modal.Actions>

packages/app-staking/src/Actions/Account/Validate.tsx

@@ -31,7 +31,7 @@ interface State {
   validatorPayment: BN;
 }
 
-const COMM_MUL = new BN(10_000_000);
+const COMM_MUL = new BN(10000000);
 const MAX_COMM = new BN(100);
 
 class Validate extends TxComponent<Props, State> {

packages/app-staking/src/Overview/Address.tsx

@@ -74,7 +74,7 @@ function Address ({ address, authorsMap, className, filter, hasQueries, isElecte
 
       setStakingState({
         commission: commission
-          ? `${(commission.toNumber() / 10_000_000).toFixed(2)}%`
+          ? `${(commission.toNumber() / 10000000).toFixed(2)}%`
           : undefined,
         controllerId: controllerId?.toString(),
         hasNominators: nominators.length !== 0,

packages/app-staking/src/Query/Validator.tsx

@@ -78,7 +78,7 @@ function extractSplit (values: [Hash, Exposure][], validatorId: string): SplitDa
     .map(({ accountId, isOwn, value }): SplitEntry => ({
       colors: isOwn ? COLORS_MINE : COLORS_OTHER,
       label: toShortAddress(accountId),
-      value: value.muln(10_000).div(total).toNumber() / 100
+      value: value.muln(10000).div(total).toNumber() / 100
     }));
 }
 

packages/app-staking/src/Targets/Summary.tsx

@@ -38,7 +38,7 @@ function Summary ({ lastReward, t, totalStaked }: Props): React.ReactElement<Pro
   useEffect((): void => {
     if (totalInsurance && totalStaked?.gtn(0)) {
       setStakeInfo({
-        percentage: `${(totalStaked.muln(10_000).div(totalInsurance).toNumber() / 100).toFixed(2)}%`,
+        percentage: `${(totalStaked.muln(10000).div(totalInsurance).toNumber() / 100).toFixed(2)}%`,
         staked: totalStaked.toString()
       });
     }

packages/app-staking/src/Targets/index.tsx

@@ -19,7 +19,7 @@ import translate from '../translate';
 import Summary from './Summary';
 import Validator from './Validator';
 
-const PERBILL = new BN(1_000_000_000);
+const PERBILL = new BN(1000000000);
 
 interface Props extends I18nProps, ComponentProps {
 }
@@ -141,7 +141,7 @@ function Targets ({ className, sessionRewards, t }: Props): React.ReactElement<P
             isFavorite: favorites.includes(key),
             isNominating,
             key,
-            commissionPer: (((prefs as ValidatorPrefs).commission?.unwrap() || new BN(0)).muln(10_000).div(PERBILL).toNumber() / 100),
+            commissionPer: (((prefs as ValidatorPrefs).commission?.unwrap() || new BN(0)).muln(10000).div(PERBILL).toNumber() / 100),
             numNominators: exposure.others.length,
             rankBonded: 0,
             rankOverall: 0,

packages/react-components/src/AddressInfo.tsx

@@ -42,7 +42,7 @@ export interface ValidatorPrefsType {
   validatorPayment?: boolean;
 }
 
-const PERBILL = new BN(1_000_000_000);
+const PERBILL = new BN(1000000000);
 
 interface Props extends BareProps, I18nProps {
   address: string;
@@ -228,7 +228,7 @@ function renderValidatorPrefs ({ stakingInfo, t, withValidatorPrefs = false }: P
           : (
             <>
               <Label label={t('commission')} />
-              <span>{(stakingInfo.validatorPrefs.commission.unwrap().muln(10_000).div(PERBILL).toNumber() / 100).toFixed(2)}%</span>
+              <span>{(stakingInfo.validatorPrefs.commission.unwrap().muln(10000).div(PERBILL).toNumber() / 100).toFixed(2)}%</span>
             </>
           )
       )}

packages/react-components/src/Call.tsx

@@ -49,30 +49,32 @@ function Call ({ children, className, labelHash, style, mortality, tip, value, w
         values={values}
       />
       {children}
-      {hash && (
-        <Static
-          className='hash'
-          label={labelHash || t('extrinsic hash')}
-        >
-          {hash.toHex()}
-        </Static>
-      )}
-      {mortality && (
-        <Static
-          className='mortality'
-          label={t('lifetime')}
-        >
-          {mortality}
-        </Static>
-      )}
-      {tip && tip.gtn(0) && (
-        <Static
-          className='tip'
-          label={t('tip')}
-        >
-          <FormatBalance value={tip} />
-        </Static>
-      )}
+      <div className='ui--Extrinsic--toplevel'>
+        {hash && (
+          <Static
+            className='hash'
+            label={labelHash || t('extrinsic hash')}
+          >
+            {hash.toHex()}
+          </Static>
+        )}
+        {mortality && (
+          <Static
+            className='mortality'
+            label={t('lifetime')}
+          >
+            {mortality}
+          </Static>
+        )}
+        {tip && tip.gtn(0) && (
+          <Static
+            className='tip'
+            label={t('tip')}
+          >
+            <FormatBalance value={tip} />
+          </Static>
+        )}
+      </div>
     </div>
   );
 }
@@ -85,5 +87,17 @@ export default translate(
       word-break: unset;
       word-wrap: unset;
     }
+
+    .ui--Extrinsic--toplevel {
+      margin-top: 0.75rem;
+
+      .ui--Labelled {
+        padding-left: 0;
+
+        label {
+          left: 1.55rem;
+        }
+      }
+    }
   `
 );

packages/react-signer/src/Checks/index.tsx

@@ -260,7 +260,16 @@ export function FeeDisplay ({ accountId, balances_all = ZERO_BALANCE, balances_f
 //   )(FeeDisplay)
 // );
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export default function Checks (props: any): null {
+export default function Checks ({ accountId, extrinsic }: any): null {
+  const { api } = useApi();
+
+  useEffect((): void => {
+    if (accountId && extrinsic?.paymentInfo && api.rpc.payment?.queryInfo) {
+      // extrinsic
+      //   .paymentInfo(accountId)
+      //   .then((json: any): void => console.log(JSON.stringify({ json })));
+    }
+  }, [api, accountId, extrinsic]);
+
   return null;
 }