Develop

package.json

@@ -34,7 +34,7 @@
     "@polkadot/types": "7.5.1",
     "@polkadot/types-known": "7.5.1",
     "@polkadot/api-contract": "7.5.1",
-    "@polkadot/util": "8.1.2",
+    "@polkadot/util": "8.3.3",
     "@polkadot/metadata": "4.17.1",
     "@polkadot/apps-config": "0.102.1",
     "@polkadot/extension-dapp": "0.42.2",
@@ -128,7 +128,8 @@
     "tailwindcss-aspect-ratio": "^3.0.0"
   },
   "resolutions": {
-    "@polkadot/types": "7.5.1"
+    "@polkadot/types": "7.5.1",
+    "@polkadot/util": "8.3.3"
   },
   "browserslist": {
     "production": [

src/components/Args.tsx

@@ -126,7 +126,7 @@ export function Args({ args, className }: ArgsProps) {
           return value;
         }
 
-        return value;
+        return <div style={{ wordBreak: 'break-all' }}>{value}</div>;
       },
     },
   ];

src/components/Entries.tsx

@@ -1,14 +1,13 @@
 import BaseIdentityIcon from '@polkadot/react-identicon';
-import { Call } from '@polkadot/types/interfaces';
 import { KeyringAddress, KeyringJson } from '@polkadot/ui-keyring/types';
 import { Button, Collapse, Empty, Progress, Space, Table, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import { intersection, isEmpty } from 'lodash';
 import { useCallback } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
-import { toShortString } from '../utils';
 import { useApi, useIsInjected } from '../hooks';
-import { AddressPair, Entry, TxActionType } from '../model';
+import { AddressPair, Entry, TxActionType, Network } from '../model';
+import { toShortString } from '../utils';
 import { ArgObj, Args } from './Args';
 import { genExpandIcon } from './expandIcon';
 import { MemberList } from './Members';
@@ -27,17 +26,17 @@ const { Title, Paragraph } = Typography;
 const { Panel } = Collapse;
 const CALL_DATA_LENGTH = 25;
 
-const renderMethod = (data: Call | undefined | null) => {
-  const call = data?.toHuman();
+const renderMethod = (data: any | undefined | null) => {
+  // const call = data && data?.toHuman ? data?.toHuman() : data;
 
-  if (call) {
-    return call.section + '(' + call.method + ')';
+  if (data) {
+    return data.section + '(' + data.method + ')';
   } else {
     return '-';
   }
 };
 
-const renderMemberStatus = (entry: Entry, pair: KeyringJson) => {
+const renderMemberStatus = (entry: Entry, pair: KeyringJson, _network: Network) => {
   const { address } = pair;
   const { approvals, when } = entry;
   const approved = approvals.includes(address);
@@ -47,6 +46,12 @@ const renderMemberStatus = (entry: Entry, pair: KeyringJson) => {
       <Trans>status.approved</Trans>
     </SubscanLink>
   ) : (
+    // <CheckCircleFilled
+    //   style={{
+    //     fontSize: '20px',
+    //     color: getMainColor(network),
+    //   }}
+    // />
     <Trans>status.pending</Trans>
   );
 };
@@ -140,7 +145,7 @@ export function Entries({ source, isConfirmed, account, loading }: EntriesProps)
     },
     {
       title: t('actions'),
-      dataIndex: 'callData',
+      dataIndex: 'callDataJson',
       align: 'center',
       render: renderMethod,
     },
@@ -176,13 +181,13 @@ export function Entries({ source, isConfirmed, account, loading }: EntriesProps)
       },
       {
         key: 'status',
-        render: (_, pair) => renderMemberStatus(entry, pair),
+        render: (_, pair) => renderMemberStatus(entry, pair, network),
       },
     ];
-    const callDataJson = entry.callData?.toJSON() ?? {};
+    // const callDataJson = entry.callData?.toJSON() ?? {};
     const args: Required<ArgObj>[] = ((entry.meta?.args ?? []) as Required<ArgObj>[]).map((arg) => {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const value = (callDataJson.args as any)[arg?.name ?? ''];
+      const value = (entry.callDataJson?.args as any)[arg?.name ?? ''];
 
       return { ...arg, value };
     });
@@ -252,7 +257,7 @@ export function Entries({ source, isConfirmed, account, loading }: EntriesProps)
                 extra={renderAction(data)}
                 className="overflow-hidden mb-4"
               >
-                <MemberList data={account} statusRender={(pair) => renderMemberStatus(data, pair)} />
+                <MemberList data={account} statusRender={(pair) => renderMemberStatus(data, pair, network)} />
               </Panel>
             </Collapse>
           );

src/components/ExtrinsicRecords.tsx

@@ -20,6 +20,7 @@ interface ExecutedMultisig {
   multisigAccountId: string;
   timestamp: string;
   extrinsicIdx: string;
+  approvals: string[];
   block: {
     id: string;
     extrinsics: {
@@ -55,24 +56,34 @@ function Confirmed({ data, account, loading }: ConfirmedProps) {
         multisigAccountId,
         timestamp,
         extrinsicIdx,
+        approvals,
         block: {
           id: blockHash,
           extrinsics: { nodes: exNodes },
         },
       } = node;
 
       const target = exNodes.find((item) => item.section === 'multisig');
-      const { signerId, isSuccess } = target ?? {};
+      // const { signerId, isSuccess } = target ?? {};
+      const { isSuccess } = target ?? {};
       const multisigArgs = parseArgs(api, target);
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const argsHash = multisigArgs.find((item: any) => item.name === 'call')?.value;
-      let callData;
+      let callDataJson;
       let meta;
       try {
-        callData = api?.registry.createType('Call', argsHash);
-        meta = api?.tx[callData.section][callData?.method].meta.toJSON();
+        if (typeof argsHash === 'string') {
+          callDataJson = api?.registry.createType('Call', argsHash).toHuman();
+          // eslint-disable-next-line no-console
+          console.log('callDataJson', callDataJson);
+        } else {
+          callDataJson = argsHash;
+        }
+        meta = api?.tx[callDataJson?.section][callDataJson?.method].meta.toJSON();
       } catch (err) {
-        callData = null;
+        // eslint-disable-next-line no-console
+        console.log('err', err);
+        callDataJson = {};
         meta = null;
       }
       const maybeTimepointArg = multisigArgs.find(
@@ -82,19 +93,20 @@ function Confirmed({ data, account, loading }: ConfirmedProps) {
       const { height, index } = maybeTimepointArg || {};
 
       return {
-        callData,
+        callDataJson,
         blockHash,
         meta,
         hash: blockHash,
         callHash: null,
         address: multisigAccountId,
         extrinsicIdx,
-        approvals: [
-          ...multisigArgs
-            // eslint-disable-next-line @typescript-eslint/no-explicit-any
-            .find((item: any) => item.name === 'otherSignatories' || item.name === 'other_signatories')?.value,
-          signerId,
-        ],
+        approvals,
+        // approvals: [
+        //   ...multisigArgs
+        //     // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        //     .find((item: any) => item.name === 'otherSignatories' || item.name === 'other_signatories')?.value,
+        //   signerId,
+        // ],
         status: isSuccess ? 'executed' : 'pending',
         created_at: timestamp,
         when: { height: isNumber(height) ? height : +height.replace(/,/g, ''), index: +index },

src/components/HeadAccounts.tsx

@@ -41,7 +41,7 @@ export const HeadAccounts = () => {
         content={
           <Tabs defaultActiveKey="1">
             <TabPane tab={t('My Account')} key="1">
-              <div className="truncate">
+              <div className="truncate account-list">
                 {accounts?.map((item) => (
                   <AccountItem key={item.address} address={item.address} name={item.meta?.name} type="injected" />
                 ))}
@@ -50,15 +50,17 @@ export const HeadAccounts = () => {
 
             <TabPane tab={t('Contact Account')} key="2">
               <div className="truncate">
-                {contacts?.map((item) => (
-                  <AccountItem
-                    key={item.address}
-                    address={item.address}
-                    name={item.meta?.name}
-                    type="contact"
-                    refreshContacts={queryContacts}
-                  />
-                ))}
+                <div className="account-list">
+                  {contacts?.map((item) => (
+                    <AccountItem
+                      key={item.address}
+                      address={item.address}
+                      name={item.meta?.name}
+                      type="contact"
+                      refreshContacts={queryContacts}
+                    />
+                  ))}
+                </div>
 
                 <div className="flex justify-end md:mt-2">
                   <div

src/config/network.ts

@@ -16,8 +16,8 @@ export const NETWORK_CONFIG: NetworkConfig = {
     // rpc: 'wss://pub.elara.patract.io/polkadot',
     rpc: 'wss://rpc.polkadot.io',
     api: {
-      // subql: 'https://api.subquery.network/sq/darwinia-network/polkadot',
       subql: 'https://api.subquery.network/sq/itering/multisig-polkadot',
+      // subql: 'http://localhost:3000',
     },
     donate: {
       address: '14RYaXRSqb9rPqMaAVp1UZW2czQ6dMNGMbvukwfifi6m8ZgZ',
@@ -40,7 +40,6 @@ export const NETWORK_CONFIG: NetworkConfig = {
     // rpc: 'wss://kusama.elara.patract.io',
     // rpc: 'wss://kusama-rpc.polkadot.io',
     api: {
-      // subql: 'https://api.subquery.network/sq/darwinia-network/kusama',
       subql: 'https://api.subquery.network/sq/itering/multisig-ksm',
     },
     donate: {
@@ -62,7 +61,6 @@ export const NETWORK_CONFIG: NetworkConfig = {
     },
     rpc: 'wss://rpc.darwinia.network',
     api: {
-      // subql: 'https://api.subquery.network/sq/darwinia-network/darwinia',
       subql: 'https://api.subquery.network/sq/itering/multisig-darwinia__aXRlc',
     },
     donate: {
@@ -83,7 +81,6 @@ export const NETWORK_CONFIG: NetworkConfig = {
     },
     rpc: 'wss://pangolin-rpc.darwinia.network/',
     api: {
-      // subql: 'https://api.subquery.network/sq/darwinia-network/pangolin',
       subql: 'https://api.subquery.network/sq/itering/multisig-pangolin',
     },
     donate: {
@@ -104,7 +101,6 @@ export const NETWORK_CONFIG: NetworkConfig = {
     },
     rpc: 'wss://crab-rpc.darwinia.network',
     api: {
-      // subql: 'https://api.subquery.network/sq/darwinia-network/crab',
       subql: 'https://api.subquery.network/sq/itering/multisig-crab__aXRlc',
     },
     donate: {

src/config/query.ts

@@ -13,6 +13,7 @@ export const EXECUTED_MULTISIGS_QUERY = `
         multisigAccountId
         timestamp
         extrinsicIdx
+        approvals
 
         block {
           id

src/hooks/multisig.ts

@@ -45,17 +45,18 @@ export function useMultisig(acc?: string) {
       const call = callInfo.toHuman() as AnyJson[];
 
       if (!call) {
-        return { ...result[index], callData: null, meta: {}, hash: result[index].callHash };
+        return { ...result[index], callDataJson: {}, meta: {}, hash: result[index].callHash };
       }
 
       try {
         const callData = api.registry.createType('Call', call[0]);
+        const callDataJson = callData.toHuman();
         const hexCallData = u8aToHex(callData.toU8a());
         const meta = api?.tx[callData?.section][callData.method].meta.toJSON();
 
-        return { ...result[index], callData, meta, hash: result[index].callHash, hexCallData };
+        return { ...result[index], callDataJson, meta, hash: result[index].callHash, hexCallData };
       } catch (_) {
-        return { ...result[index], callData: null, meta: {}, hash: result[index].callHash };
+        return { ...result[index], callDataJson: {}, meta: {}, hash: result[index].callHash };
       }
     });
 

src/index.scss

@@ -125,3 +125,8 @@ body {
 .wallet-member input::placeholder {
   font-size: 12px;
 }
+
+.account-list {
+  max-height: 500px;
+  overflow: auto;
+}

src/model/tx.ts

@@ -1,5 +1,4 @@
 import { AnyJson } from '@polkadot/types/types';
-import { Call } from '@polkadot/types/interfaces';
 import { PartialQueueTxExtrinsic } from '@polkadot/react-components/Status/types';
 
 export interface When {
@@ -15,7 +14,8 @@ export interface Entry {
   callHash: string | null;
   blockHash?: string;
   extrinsicIdx?: string;
-  callData: Call | null;
+  // callData: Call | null;
+  callDataJson: any;
   meta: Record<string, AnyJson> | null;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   [key: string]: any;