Generic accounts displayed in call info

packages/ui/src/components/CallInfo.tsx

@@ -11,6 +11,9 @@ import { HiOutlineArrowTopRightOnSquare as LaunchIcon } from 'react-icons/hi2'
 import { Link } from './library'
 import { usePjsLinks } from '../hooks/usePjsLinks'
 import { Alert } from '@mui/material'
+import { ApiPromise } from '@polkadot/api'
+import { isTypeBalance } from '../utils/isTypeBalance'
+import { isTypeAccount } from '../utils/isTypeAccount'
 
 interface Props {
   aggregatedData: Omit<AggregatedData, 'from' | 'timestamp'>
@@ -26,43 +29,97 @@ interface CreateTreeParams {
   decimals: number
   unit: string
   name?: string
+  api: ApiPromise
+  typeName?: string
 }
 
-const createUlTree = ({ name, args, decimals, unit }: CreateTreeParams) => {
+const handleBatchDisplay = ({
+  value,
+  decimals,
+  unit,
+  api,
+  key
+}: {
+  value: any[]
+  decimals: number
+  unit: string
+  key: string
+  api: ApiPromise
+}) =>
+  value.map((call: any, index: number) => {
+    const name = `${call.section}.${call.method}`
+    return (
+      <>
+        <li key={`${key}-${index}`}>{name}</li>
+        {createUlTree({
+          name: `${call.section}.${call.method}`,
+          args: call.args,
+          decimals,
+          unit,
+          api
+        })}
+      </>
+    )
+  })
+
+const handleBalanceDisplay = ({
+  value,
+  decimals,
+  unit,
+  key
+}: {
+  value: any
+  decimals: number
+  unit: string
+  key: string
+}) => {
+  const balance = formatBnBalance(value.replace(/,/g, ''), decimals, {
+    withThousandDelimiter: true,
+    tokenSymbol: unit,
+    numberAfterComma: 4
+  })
+
+  return (
+    <li key={key}>
+      {key}: {balance}
+    </li>
+  )
+}
+
+const getTypeName = (index: number, name: string, value: any, api: ApiPromise) => {
+  const [palletFromName, methodFromName] = name.split('.')
+  const pallet = value.section || palletFromName
+  const method = value.method || methodFromName
+  const metaArgs = !!pallet && !!method && api.tx[pallet][method].meta.args
+
+  return (
+    (!!metaArgs && metaArgs[index] && (metaArgs[index].toHuman().typeName as string)) || undefined
+  )
+}
+
+const createUlTree = ({ name, args, decimals, unit, api, typeName }: CreateTreeParams) => {
   if (!args) return
   if (!name) return
 
-  const isBalancesTransferAlike = ['balances.transfer', 'balances.transferKeepAlive'].includes(name)
-  const isProxyCreationDeletion = ['proxy.addProxy', 'proxy.removeProxy'].includes(name)
-
   return (
     <ul className="params">
-      {Object.entries(args).map(([key, value]) => {
-        // in case the call was a WrapperOpaque<Call> the destination is the value and has no Id
-        const destAddress = value?.Id || value
-        // show nice dest
-        if (
-          ((isBalancesTransferAlike && key === 'dest') ||
-            (isProxyCreationDeletion && key === 'delegate')) &&
-          typeof destAddress === 'string'
-        ) {
-          return (
-            <li key={key}>
-              {key}: {<MultisigCompactDisplay address={destAddress} />}
-            </li>
-          )
+      {Object.entries(args).map(([key, value], index) => {
+        const _typeName = typeName || getTypeName(index, name, value, api)
+
+        if (_typeName === 'Vec<RuntimeCall>') {
+          return handleBatchDisplay({ value, decimals, unit, api, key: `${key}-batch` })
+        }
+
+        // generically show nice value for Balance type
+        if (isTypeBalance(_typeName)) {
+          return handleBalanceDisplay({ value, decimals, unit, key })
         }
 
-        // show nice value
-        if (isBalancesTransferAlike && key === 'value') {
-          const balance = formatBnBalance(value.replace(/,/g, ''), decimals, {
-            withThousandDelimiter: true,
-            tokenSymbol: unit,
-            numberAfterComma: 4
-          })
+        const destAddress = value?.Id || value
+        if (isTypeAccount(_typeName) && typeof destAddress === 'string') {
           return (
             <li key={key}>
-              {key}: {balance}
+              {key}: {<MultisigCompactDisplay address={destAddress} />}
             </li>
           )
         }
@@ -71,7 +128,14 @@ const createUlTree = ({ name, args, decimals, unit }: CreateTreeParams) => {
           <li key={key}>
             {key}:{' '}
             {typeof value === 'object'
-              ? createUlTree({ name, args: value, decimals, unit })
+              ? createUlTree({
+                  name,
+                  args: value,
+                  decimals,
+                  unit,
+                  api,
+                  typeName: _typeName
+                })
               : value}
           </li>
         )
@@ -108,7 +172,7 @@ const CallInfo = ({
   withProxyFiltered = true
 }: Props) => {
   const { args, name } = withProxyFiltered ? filterProxyProxy(aggregatedData) : aggregatedData
-  const { chainInfo } = useApi()
+  const { chainInfo, api } = useApi()
   const decimals = useMemo(() => chainInfo?.tokenDecimals || 0, [chainInfo])
   const unit = useMemo(() => chainInfo?.tokenSymbol || '', [chainInfo])
   const { getDecodeUrl } = usePjsLinks()
@@ -140,11 +204,11 @@ const CallInfo = ({
           annoyance.
         </AlertStyled>
       )}
-      {args && Object.keys(args).length > 0 && (
+      {args && !!api && Object.keys(args).length > 0 && (
         <Expander
           expanded={expanded}
           title="Params"
-          content={createUlTree({ name, args, decimals, unit })}
+          content={createUlTree({ name, args, decimals, unit, api })}
         />
       )}
       {children}

packages/ui/src/components/EasySetup/ManualExtrinsic.tsx

@@ -16,6 +16,7 @@ import { useApi } from '../../contexts/ApiContext'
 import paramConversion from '../../utils/paramConversion'
 import { getGlobalMaxValue, inputToBn } from '../../utils'
 import BN from 'bn.js'
+import { isTypeBalance } from '../../utils/isTypeBalance'
 
 interface Props {
   extrinsicIndex?: string
@@ -47,8 +48,6 @@ const initFormState = {
 
 const argIsOptional = (arg: any) => arg.type.toString().startsWith('Option<')
 
-const isTypeBalance = (typeName: string) => ['Balance', 'BalanceOf', 'Amount'].includes(typeName)
-
 const isNumType = (type: string) => paramConversion.num.includes(type)
 
 const parseFloatOrInt = (value: any) => {

packages/ui/src/utils/isTypeAccount.ts

@@ -0,0 +1,2 @@
+export const isTypeAccount = (typeName?: string) =>
+  !!typeName && ['AccountIdLookupOf'].includes(typeName)

packages/ui/src/utils/isTypeBalance.ts

@@ -0,0 +1,2 @@
+export const isTypeBalance = (typeName?: string) =>
+  !!typeName && ['Balance', 'BalanceOf', 'Amount'].includes(typeName)