Adjust param layout (w/ Enum & Struct expansion) (#8584)

* Adjust param layout (w/ Enum & Struct expansion)

* Additional event expansion

* Formatting for extra fields

* Adjust

* Ordering

* Adjust

packages/apps/public/index.html

@@ -30,6 +30,7 @@
         --bg-tabs: #38393f;
         --bg-toggle: #58595f;
         --bg-sidebar: #1a1b20;
+        --bg-static-extra: rgba(200, 200, 200, 0.1);
         --border-table: #343536;
         --border-tabs: #343536;
         --color-checkbox: rgba(78, 78, 78, 0.66);
@@ -51,6 +52,7 @@
         --bg-tabs: #ffffff;
         --bg-toggle: #e4e5e6;
         --bg-sidebar: #fafafa;
+        --bg-static-extra: rgba(200, 200, 200, 0.1);
         --border-table: #f1efed;
         --border-tabs: #f1efed;
         --color-checkbox: rgba(34, 36, 38, 0.15);

packages/react-components/src/Call.tsx

@@ -24,7 +24,6 @@ export interface Props {
   labelHash?: React.ReactNode;
   labelSignature?: React.ReactNode;
   mortality?: string;
-  noIndent?: boolean;
   onError?: () => void;
   value: IExtrinsic | IMethod;
   withBorder?: boolean;
@@ -92,7 +91,7 @@ function extractState (value: IExtrinsic | IMethod, withHash?: boolean, withSign
   return { hash, overrides, params, signature, signatureType, values };
 }
 
-function Call ({ callName, children, className = '', labelHash, labelSignature, mortality, noIndent, onError, tip, value, withBorder, withHash, withSignature }: Props): React.ReactElement<Props> {
+function Call ({ callName, children, className = '', labelHash, labelSignature, mortality, onError, tip, value, withBorder, withHash, withSignature }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const [{ hash, overrides, params, signature, signatureType, values }, setExtracted] = useState<Extracted>({ hash: null, params: [], signature: null, signatureType: null, values: [] });
 
@@ -110,40 +109,41 @@ function Call ({ callName, children, className = '', labelHash, labelSignature,
         registry={value.registry}
         values={values}
         withBorder={withBorder}
-      />
-      {children}
-      <div className={`ui--Extrinsic--toplevel${noIndent ? ' noIndent' : ''}`}>
-        {signature && (
-          <Static
-            className='hash'
-            label={labelSignature || t<string>('signature {{type}}', { replace: { type: signatureType ? `(${signatureType})` : '' } })}
-            value={signature}
-            withCopy
-          />
-        )}
-        {hash && (
-          <Static
-            className='hash'
-            label={labelHash || t<string>('extrinsic hash')}
-            value={hash}
-            withCopy
-          />
-        )}
-        {mortality && (
-          <Static
-            className='mortality'
-            label={t<string>('lifetime')}
-            value={mortality}
-          />
-        )}
-        {tip?.gtn(0) && (
-          <Static
-            className='tip'
-            label={t<string>('tip')}
-            value={<FormatBalance value={tip} />}
-          />
-        )}
-      </div>
+      >
+        {children}
+        <div className='ui--Extrinsic--toplevel'>
+          {hash && (
+            <Static
+              className='hash'
+              label={labelHash || t<string>('extrinsic hash')}
+              value={hash}
+              withCopy
+            />
+          )}
+          {signature && (
+            <Static
+              className='hash'
+              label={labelSignature || t<string>('signature {{type}}', { replace: { type: signatureType ? `(${signatureType})` : '' } })}
+              value={signature}
+              withCopy
+            />
+          )}
+          {mortality && (
+            <Static
+              className='mortality'
+              label={t<string>('lifetime')}
+              value={mortality}
+            />
+          )}
+          {tip?.gtn(0) && (
+            <Static
+              className='tip'
+              label={t<string>('tip')}
+              value={<FormatBalance value={tip} />}
+            />
+          )}
+        </div>
+      </Params>
     </div>
   );
 }
@@ -156,19 +156,25 @@ export default React.memo(styled(Call)`
     word-wrap: unset;
   }
 
-  .ui--Extrinsic--toplevel.noIndent {
-    margin-top: 0.25rem;
-  }
-
-  .ui--Extrinsic--toplevel:not(.noIndent) {
-    margin-top: 0.75rem;
+  .ui--Extrinsic--toplevel {
+    margin-top: 0;
 
     .ui--Labelled {
-      padding-left: 0;
+      &:last-child > .ui--Labelled-content > .ui--Static {
+        margin-bottom: 0;
+      }
 
-      > label {
-        left: 1.55rem !important;
+      > .ui--Labelled-content > .ui--Static {
+        background: var(--bg-static-extra);
+      }
+
+      + .ui--Labelled > .ui--Labelled-content > .ui--Static {
+        margin-top: 0;
       }
     }
   }
+
+  > .ui--Params {
+    margin-top: -0.25rem;
+  }
 `);

packages/react-components/src/Expander.tsx

@@ -123,7 +123,7 @@ export default React.memo(styled(Expander)`
   }
 
   &.isExpanded .ui--Expander-content {
-    margin-top: 0.5rem;
+    margin-top: 0.75rem;
 
     .body.column {
       justify-content: end;

packages/react-components/src/constants.ts

@@ -23,9 +23,9 @@ export const balanceCalls = [
   'bounties.proposeBounty', 'bounties.proposeCurator',
   'childBounties.proposeCurator',
   'claims.mintClaim',
-  'convictionVoting.delegate',
+  'convictionVoting.delegate', 'convictionVoting.vote',
   'crowdloan.contribute', 'crowdloan.create', 'crowdloan.edit',
-  'democracy.delegate', 'democracy.propose',
+  'democracy.delegate', 'democracy.propose', 'democracy.vote',
   'identity.requestJudgement', 'identity.setFee',
   'nominationPools.bondExtra', 'nominationPools.join', 'nominationPools.unbond',
   'phragmenElection.vote',
@@ -38,16 +38,21 @@ export const balanceCalls = [
 
 // needs expansion with events from above
 export const balanceEvents = [
-  'balances.Deposit', 'balances.Endowed', 'balances.Transfer', 'balances.Withdraw',
+  'auctions.BidAccepted', 'auctions.ReserveConfiscated', 'auctions.Reserved', 'auctions.Unreserved',
+  'balances.Deposit', 'balances.Endowed', 'balances.Transfer', 'balances.Unreserved', 'balances.Withdraw',
+  'bounties.BountyClaimed', 'bounties.BountyRejected',
+  'claims.Claimed',
+  'convictionVoting.Voted',
+  'crowdloan.Contributed', 'crowdloan.Withdrew',
+  'democracy.Voted',
   'staking.Bonded', 'staking.Rewarded', 'staking.Unbonded', 'staking.Withdrawn',
   'transactionPayment.TransactionFeePaid',
   'treasury.Deposit'
 ];
 
 export const balanceCallsOverrides: ComponentMap = {
-  'Compact<u128>': BalanceParam
-};
-
-export const balanceEventsOverrides: ComponentMap = {
+  'Compact<u128>': BalanceParam,
   u128: BalanceParam
 };
+
+export const balanceEventsOverrides = balanceCallsOverrides;

packages/react-params/src/Holder.tsx

@@ -21,7 +21,11 @@ function Holder ({ children, className = '', withBorder, withPadding }: Props):
 
 export default React.memo(styled(Holder)`
   &.withBorder {
-    border-left: 0.25rem solid #f2f2f2;
+    padding-left: 0.25rem;
+
+    .ui--Params-Content {
+      border-left: 0.25rem solid #f2f2f2;
+    }
   }
 
   &.withoutBorder {
@@ -48,7 +52,11 @@ export default React.memo(styled(Holder)`
 
   .ui--Params-Content {
     box-sizing: border-box;
-    padding: 0 0 0 1.75rem;
+    padding: 0;
+
+    .ui--Params-Content {
+      margin-left: 1.75rem;
+    }
   }
 
   .ui--Param-text {

packages/react-params/src/Param/Call.tsx

@@ -38,7 +38,6 @@ function CallDisplay (props: Props): React.ReactElement<Props> {
       <Call
         callName={callName}
         labelHash={t<string>('call hash / {{section}}.{{method}}', { replace: { method, section } })}
-        noIndent
         value={call}
         withHash
       />

packages/react-params/src/Param/Enum.tsx

@@ -12,7 +12,6 @@ import { isObject } from '@polkadot/util';
 
 import Params from '../';
 import Bare from './Bare';
-import Static from './Static';
 
 interface Option {
   text?: string;
@@ -82,6 +81,10 @@ function EnumParam (props: Props): React.ReactElement<Props> {
 
   const _onChange = useCallback(
     (value: string): void => {
+      if (isDisabled) {
+        return;
+      }
+
       const newType = subTypes.find(({ name }) => name === value) || null;
 
       setCurrent(
@@ -100,23 +103,23 @@ function EnumParam (props: Props): React.ReactElement<Props> {
         );
       }
     },
-    [subTypes]
+    [isDisabled, subTypes]
   );
 
   const _onChangeParam = useCallback(
     ([{ isValid, value }]: RawParam[]): void => {
+      if (isDisabled) {
+        return;
+      }
+
       current && onChange && onChange({
         isValid,
         value: { [current[0].name as string]: value }
       });
     },
-    [current, onChange]
+    [current, isDisabled, onChange]
   );
 
-  if (isDisabled) {
-    return <Static {...props} />;
-  }
-
   return (
     <Bare className={className}>
       <Dropdown
@@ -132,6 +135,7 @@ function EnumParam (props: Props): React.ReactElement<Props> {
       />
       {current && (
         <Params
+          isDisabled={isDisabled}
           isError={isError}
           onChange={_onChangeParam}
           overrides={overrides}

packages/react-params/src/Param/Struct.tsx

@@ -10,7 +10,6 @@ import { isCodec } from '@polkadot/util';
 
 import Params from '../';
 import Base from './Base';
-import Static from './Static';
 import useParamDefs from './useParamDefs';
 
 function extractValues ({ isValid, value }: RawParam): RawParam[] | undefined {
@@ -26,6 +25,10 @@ function StructParam (props: Props): React.ReactElement<Props> {
 
   const _onChangeParams = useCallback(
     (values: RawParam[]): void => {
+      if (isDisabled) {
+        return;
+      }
+
       onChange && onChange({
         isValid: values.reduce((result: boolean, { isValid }) => result && isValid, true),
         value: params.reduce((value: Record<string, unknown>, { name }, index): Record<string, unknown> => {
@@ -35,13 +38,9 @@ function StructParam (props: Props): React.ReactElement<Props> {
         }, {})
       });
     },
-    [params, onChange]
+    [isDisabled, params, onChange]
   );
 
-  if (isDisabled) {
-    return <Static {...props} />;
-  }
-
   return (
     <div className='ui--Params-Struct'>
       <Base
@@ -50,6 +49,7 @@ function StructParam (props: Props): React.ReactElement<Props> {
         withLabel={withLabel}
       />
       <Params
+        isDisabled={isDisabled}
         onChange={_onChangeParams}
         overrides={overrides}
         params={params}

packages/react-params/src/Param/Tuple.tsx

@@ -9,7 +9,6 @@ import { Tuple } from '@polkadot/types';
 
 import Params from '../';
 import Base from './Base';
-import Static from './Static';
 import useParamDefs from './useParamDefs';
 
 function getInitialValues ({ value }: RawParam): RawParam[] {
@@ -25,18 +24,18 @@ function TupleDisplay (props: Props): React.ReactElement<Props> {
 
   const _onChangeParams = useCallback(
     (values: RawParam[]): void => {
+      if (isDisabled) {
+        return;
+      }
+
       onChange && onChange({
         isValid: values.reduce<boolean>((result, { isValid }) => result && isValid, true),
         value: values.map(({ value }) => value)
       });
     },
-    [onChange]
+    [isDisabled, onChange]
   );
 
-  if (isDisabled) {
-    return <Static {...props} />;
-  }
-
   return (
     <div className='ui--Params-Tuple'>
       <Base
@@ -45,6 +44,7 @@ function TupleDisplay (props: Props): React.ReactElement<Props> {
         withLabel={withLabel}
       />
       <Params
+        isDisabled={isDisabled}
         onChange={_onChangeParams}
         overrides={overrides}
         params={params}