Fix multi-sig account view with a nice modal

src/Pages/Accounts/Components/AccountSpotlight.tsx

@@ -1,18 +1,25 @@
 import { useEffect, useState } from 'react';
 import styled from 'styled-components';
+// @ts-ignore
+import useToggle from 'react-tiny-hooks/use-toggle';
 import { Link, useParams } from 'react-router-dom';
 import { useAccounts } from 'redux/hooks';
-import { DataCard, CopyValue } from 'Components';
+import { DataCard, CopyValue, Button as BaseButton } from 'Components';
 import { PopupDataProps } from 'Components/Summary/Summary';
 import { maxLength, formatDenom } from 'utils';
+import { AccountMultiSigModal } from './AccountTables/Components';
+
+const Button = styled(BaseButton)`
+  margin: 0;
+`;
 
 const Group = styled.div`
   display: flex;
 `;
 
 export const AccountSpotlight = () => {
   const { accountInfo, getAccountAssets, getAccountInfo, getAccountRewards } = useAccounts();
-
+  const [modalOpen, deactivateModalOpen, activateModalOpen] = useToggle(false);
   const { addressId } = useParams<{ addressId: string }>();
   const [showKeyPopup, setShowKeyPopup] = useState(false);
   const [showAUMPopup, setShowAUMPopup] = useState(false);
@@ -30,13 +37,13 @@ export const AccountSpotlight = () => {
     accountName = '--',
     accountNumber = '--',
     accountType = '--',
-    publicKeys = { pubKey: '', type: '' },
+    publicKey = { base64: '', sigList: [], type: '' },
     sequence = '--',
     tokens = { fungibleCount: 0, nonFungibleCount: 0 },
     accountAum = { amount: 0, denom: '' },
   } = accountInfo;
 
-  const { pubKey: publicKey, type: publicKeyType } = publicKeys;
+  const { base64, sigList, type: publicKeyType } = publicKey;
 
   const popupNoteKeyType = {
     visibility: { visible: showKeyPopup, setVisible: setShowKeyPopup },
@@ -123,6 +130,7 @@ export const AccountSpotlight = () => {
     popupNote?: PopupDataProps;
     link?: string;
     copy?: string;
+    button?: JSX.Element;
   }
 
   const cardData: ItemProps[] = [
@@ -145,23 +153,41 @@ export const AccountSpotlight = () => {
     { title: 'Number', value: String(accountNumber), popupNote: popupNoteNumber as PopupDataProps },
     {
       title: 'Public Key',
-      value: maxLength(publicKey, 12, '3'),
-      copy: publicKey,
+      value: base64 && maxLength(base64, 12, '3'),
+      copy: base64 && base64,
       popupNote: popupNoteKeyType as PopupDataProps,
+      button: !base64 ? (
+        <Button icon="INVENTORY" onClick={activateModalOpen}>
+          View All
+        </Button>
+      ) : (
+        <></>
+      ),
     },
     { title: 'Sequence', value: String(sequence), popupNote: popupNoteSequence as PopupDataProps },
   ];
 
   return (
     <>
-      {cardData.map((item) => (
-        <DataCard title={item.title} popup={item.popupNote} key={item.title}>
-          <Group>
-            {item.link ? <Link to={item.link}>{item.value}</Link> : item.value}
-            {item.copy && <CopyValue value={item.copy} title={`Copy ${item.title}`} size="2rem" />}
-          </Group>
-        </DataCard>
-      ))}
+      <>
+        {cardData.map((item) => (
+          <DataCard
+            title={item.title}
+            popup={item.popupNote}
+            key={item.title}
+            titleMargin={item.button && '0 0 15px 0'}
+          >
+            <Group>
+              {item.button && item.button}
+              {item.link ? <Link to={item.link}>{item.value}</Link> : item.value}
+              {item.copy && (
+                <CopyValue value={item.copy} title={`Copy ${item.title}`} size="2rem" />
+              )}
+            </Group>
+          </DataCard>
+        ))}
+      </>
+      <AccountMultiSigModal modalOpen={modalOpen} onClose={deactivateModalOpen} data={sigList} />
     </>
   );
 };

src/Pages/Accounts/Components/AccountTables/Components/AccountMultiSigModal.tsx

@@ -0,0 +1,55 @@
+import { useState, useEffect } from 'react';
+import styled from 'styled-components';
+import { Modal } from 'Components';
+import { AccountInfo } from 'redux/features/account/accountSlice';
+import { Link } from 'react-router-dom';
+
+const Title = styled.div`
+  text-align: center;
+  font-size: 2rem;
+  font-weight: ${({ theme }) => theme.FONT_WEIGHT_BOLD};
+  margin: 20px 0;
+`;
+
+const Description = styled.li`
+  color: ${({ theme }) => theme.FONT_TITLE_INFO};
+  max-width: 500px;
+  margin: 0 auto;
+  margin-bottom: 20px;
+`;
+
+interface MultiSigModalProps {
+  modalOpen: boolean;
+  onClose: Function;
+  data: AccountInfo['publicKey']['sigList'];
+}
+
+export const AccountMultiSigModal = ({ modalOpen, onClose, data }: MultiSigModalProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    setIsOpen(modalOpen);
+  }, [modalOpen]);
+
+  const handleModalClose = () => {
+    setIsOpen(false);
+    onClose();
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={handleModalClose}>
+      <>
+        <Title>Generate a CSV of Transaction Information</Title>
+        <ol>
+          {data.map((account) => (
+            <Description key={account.idx}>
+              <Link to={`/accounts/${account.address}`} onClick={handleModalClose}>
+                {account.address}
+              </Link>
+            </Description>
+          ))}
+        </ol>
+      </>
+    </Modal>
+  );
+};

src/Pages/Accounts/Components/AccountTables/Components/index.ts

@@ -7,3 +7,4 @@ export * from './AccountRewards';
 export * from './AccountUnbondings';
 export * from './AccountAttributes';
 export * from './AccountTxs';
+export * from './AccountMultiSigModal';

src/Pages/Tx/Components/TxInformation.js

@@ -59,9 +59,6 @@ const TxInformation = () => {
       decimal: totalFee.amount / 1e9 < 0.0001 ? 20 : 4,
     });
 
-    // Signers is an object containing signers [array] and threshold [number] - we only need the signers array
-    const signerArray = signers?.signers;
-
     const errorLogPopupNote = {
       visibility: { visible: showErrorLogPopup, setVisible: setShowErrorLogPopup },
       icon: { name: 'HELP_OUTLINE', size: '1.7rem' },
@@ -96,10 +93,10 @@ const TxInformation = () => {
 
       {
         title: 'Signer(s)',
-        value: signerArray, // maxLength(signer, 24, 10),
-        list: signerArray.map((val) => maxLength(val, 12, '4')),
-        linkList: signerArray.map((val) => '/accounts/' + val),
-        copyList: signerArray,
+        value: signers, // maxLength(signer, 24, 10),
+        list: signers.map((val) => maxLength(val.address, 12, '4')),
+        linkList: signers.map((val) => '/accounts/' + val.address),
+        copyList: signers.map((val) => signers.address),
       },
       {
         title: 'Feepayer',

src/redux/features/account/accountSlice.ts

@@ -4,7 +4,7 @@ import { RootState } from 'redux/app/store';
 import { ACCOUNT_INFO_URL } from 'consts';
 import { ajax } from '../api';
 
-interface AccountInfo {
+export interface AccountInfo {
   accountAum?: {
     amount: string;
     denom: string;
@@ -18,8 +18,12 @@ interface AccountInfo {
     data: string;
   }[];
   isContract?: boolean;
-  publicKeys?: {
-    pubKey: string;
+  publicKey: {
+    base64: string;
+    sigList: {
+      address: string;
+      idx: number;
+    }[];
     type: string;
   };
   sequence?: number;
@@ -198,7 +202,13 @@ interface AccountState {
 
 const initialState: AccountState = {
   // Account
-  accountInfo: {},
+  accountInfo: {
+    publicKey: {
+      base64: '',
+      sigList: [],
+      type: '',
+    },
+  },
   accountInfoLoading: false,
   accountInfoFailure: false,
   // Account Assets

src/redux/features/tx/txSlice.ts

@@ -43,9 +43,11 @@ export interface TxInfo {
     [key: string]: string;
   };
   signers: {
-    signers: string[];
-    threshold: number;
-  };
+    address: string;
+    idx: number;
+    sequence: number;
+    type: string;
+  }[];
   status: string;
   time: string;
   txHash: string;
@@ -212,10 +214,7 @@ export const initialState: TxState = {
     height: 0,
     memo: '',
     monikers: {},
-    signers: {
-      signers: [],
-      threshold: 0,
-    },
+    signers: [],
     status: '',
     time: '',
     txHash: '',

src/utils/table/formatTableData.js

@@ -70,16 +70,12 @@ export const formatTableData = (data = [], tableHeaders) => {
         case 'signers': {
           // Signers is an object containing signers [array] and threshold [number] - we only need
           // the first value and the length to indicate the total number of signers
-          const signer = serverValue?.signers[0];
+          const signer = serverValue?.[0].address;
           finalObj[dataName] = {
             value: maxLength(signer, 11, 3),
             link: `/accounts/${signer}`,
-            addTextToLink:
-              serverValue?.signers.length > 1 ? ` +${serverValue?.signers.length - 1}` : '',
-            hover:
-              serverValue?.signers.length <= 1
-                ? signer
-                : `${serverValue.signers.length} total signers`,
+            addTextToLink: serverValue?.length > 1 ? ` +${serverValue?.length - 1}` : '',
+            hover: serverValue?.length <= 1 ? signer : `${serverValue.length} total signers`,
           };
           break;
         }