feat: support governance tx history (#1630)

Co-authored-by: Nick <[email protected]>
PolkaGate · Nov 12, 2024 · 4044d3b · 4044d3b
1 parent 8949acf
commit 4044d3b
Show file tree

Hide file tree

Showing 9 changed files with 501 additions and 59 deletions.
diff --git a/packages/extension-polkagate/src/popup/history/Detail.tsx b/packages/extension-polkagate/src/popup/history/Detail.tsx
@@ -9,6 +9,7 @@ import { Divider, Grid, Typography } from '@mui/material';
 import React, { useCallback, useContext, useMemo } from 'react';
 
 import { AccountContext, PButton, Popup } from '../../components';
+import { getVoteType } from '../../fullscreen/governance/utils/util';
 import { useTranslation } from '../../hooks';
 import { HeaderBrand } from '../../partials';
 import { accountName, amountToMachine, toShortAddress, upperCaseFirstChar } from '../../util/utils';
@@ -63,7 +64,7 @@ export default function Detail ({ chainName, decimal, info, setShowDetail, showD
         showBackArrow
         text={t('Transaction Detail')}
       />
-      <Grid alignItems='center' justifyContent='center' pt='10px' textAlign='center'>
+      <Grid alignItems='center' justifyContent='center' pt='10px' sx={{ maxHeight: '470px', overflowY: 'scroll', pb: '10px' }} textAlign='center'>
         <Typography fontSize='20px' fontWeight={400}>
           {action}
         </Typography>
@@ -79,9 +80,24 @@ export default function Detail ({ chainName, decimal, info, setShowDetail, showD
         {info?.to &&
           <ToFrom item={<ShowNameAddress nameAddress={info.to} title={t('To')} />} toCopy={info?.to?.address} />
         }
+        {info?.refId &&
+          <Item item={`${t('Referenda Id')}: #${info.refId}`} noDivider />
+        }
+        {info?.refId &&
+          <Item item={`${t('Vote')}: ${info.voteType ? getVoteType({ standard: { balance: 0, vote: info.voteType.toString() } }) : 'Abstain'}`} noDivider />
+        }
+        {info?.delegatee &&
+          <ToFrom item={<ShowNameAddress nameAddress={{ address: info.delegatee, name: undefined }} title={t('Delegatee')} />} noDivider toCopy={info.delegatee} />
+        }
         {info?.amount &&
           <Amount amount={String(amountToMachine(info.amount, decimal))} decimal={decimal} label={t('Amount')} token={info?.token || token} />
         }
+        {info?.conviction &&
+          <Item item={`${t('Conviction')}: ${info.conviction}`} noDivider />
+        }
+        {info?.class &&
+          <Item item={`${t('Track Id')}: #${info.class}`} noDivider />
+        }
         {info?.fee &&
           <Amount amount={info?.fee} decimal={decimal} label={t('Fee')} token={token} />
         }

diff --git a/packages/extension-polkagate/src/popup/history/HistoryTabs.tsx b/packages/extension-polkagate/src/popup/history/HistoryTabs.tsx
@@ -6,18 +6,26 @@
 import { Box, Divider, Tab, Tabs } from '@mui/material';
 import React, { useCallback } from 'react';
 
-import { useInfo, useTranslation } from '../../hooks';
-import { STAKING_CHAINS } from '../../util/constants';
+import { useInfo, useIsExtensionPopup, useTranslation } from '../../hooks';
+import { GOVERNANCE_CHAINS, STAKING_CHAINS } from '../../util/constants';
 
 export enum TAB_MAP {
   ALL,
   TRANSFERS,
-  STAKING
+  STAKING,
+  GOVERNANCE
 }
 
-export default function HistoryTabs ({ address, setTabIndex, tabIndex }: {address: string | undefined , tabIndex: TAB_MAP, setTabIndex: React.Dispatch<React.SetStateAction<TAB_MAP>>}): React.ReactElement {
+interface HistoryTabsProps {
+  address: string | undefined;
+  tabIndex: TAB_MAP;
+  setTabIndex: React.Dispatch<React.SetStateAction<TAB_MAP>>;
+}
+
+export default function HistoryTabs ({ address, setTabIndex, tabIndex }: HistoryTabsProps): React.ReactElement {
   const { t } = useTranslation();
   const { chain } = useInfo(address);
+  const isExtensionMode = useIsExtensionPopup();
 
   const handleTabChange = useCallback((_event: React.SyntheticEvent<Element, Event>, value: number) => {
     setTabIndex(value);
@@ -34,14 +42,15 @@ export default function HistoryTabs ({ address, setTabIndex, tabIndex }: {addres
               fontWeight: 500
             },
             color: 'text.primary',
-            fontSize: '18px',
+            fontSize: isExtensionMode ? '16px' : '18px',
             fontWeight: 400,
-            minWidth: '108px',
+            minWidth: isExtensionMode ? '70px' : '108px',
+            p: isExtensionMode ? '12px' : undefined,
             textTransform: 'capitalize'
           }}
           value={TAB_MAP.ALL}
         />
-        <Tab disabled icon={<Divider orientation='vertical' sx={{ backgroundColor: 'text.primary', height: '19px', mx: '5px', my: 'auto' }} />} label='' sx={{ minWidth: '1px', p: '0', width: '1px' }} value={4} />
+        <Tab disabled icon={<Divider orientation='vertical' sx={{ backgroundColor: 'divider', height: '19px', mx: '5px', my: 'auto' }} />} label='' sx={{ minWidth: '1px', p: '0', width: '1px' }} value={4} />
         <Tab
           label={t('Transfers')}
           sx={{
@@ -50,15 +59,16 @@ export default function HistoryTabs ({ address, setTabIndex, tabIndex }: {addres
               fontWeight: 500
             },
             color: 'text.primary',
-            fontSize: '18px',
+            fontSize: isExtensionMode ? '16px' : '18px',
             fontWeight: 400,
-            minWidth: '108px',
+            minWidth: isExtensionMode ? '70px' : '108px',
+            p: isExtensionMode ? '12px' : undefined,
             textTransform: 'capitalize'
           }}
           value={TAB_MAP.TRANSFERS}
         />
         {STAKING_CHAINS.includes(chain?.genesisHash ?? '') &&
-            <Tab disabled icon={<Divider orientation='vertical' sx={{ backgroundColor: 'text.primary', height: '19px', mx: '5px', my: 'auto' }} />} label='' sx={{ minWidth: '1px', p: '0', width: '1px' }} value={5} />
+            <Tab disabled icon={<Divider orientation='vertical' sx={{ backgroundColor: 'divider', height: '19px', mx: '5px', my: 'auto' }} />} label='' sx={{ minWidth: '1px', p: '0', width: '1px' }} value={5} />
         }
         {STAKING_CHAINS.includes(chain?.genesisHash ?? '') &&
             <Tab
@@ -69,14 +79,36 @@ export default function HistoryTabs ({ address, setTabIndex, tabIndex }: {addres
                   fontWeight: 500
                 },
                 color: 'text.primary',
-                fontSize: '18px',
+                fontSize: isExtensionMode ? '16px' : '18px',
                 fontWeight: 400,
-                minWidth: '108px',
+                minWidth: isExtensionMode ? '70px' : '108px',
+                p: isExtensionMode ? '12px' : undefined,
                 textTransform: 'capitalize'
               }}
               value={TAB_MAP.STAKING}
             />
         }
+        {GOVERNANCE_CHAINS.includes(chain?.genesisHash ?? '') &&
+            <Tab disabled icon={<Divider orientation='vertical' sx={{ backgroundColor: 'divider', height: '19px', mx: '5px', my: 'auto' }} />} label='' sx={{ minWidth: '1px', p: '0', width: '1px' }} value={6} />
+        }
+        {GOVERNANCE_CHAINS.includes(chain?.genesisHash ?? '') &&
+            <Tab
+              label={t('Governance')}
+              sx={{
+                ':is(button.MuiButtonBase-root.MuiTab-root.Mui-selected)': {
+                  color: 'secondary.light',
+                  fontWeight: 500
+                },
+                color: 'text.primary',
+                fontSize: isExtensionMode ? '16px' : '18px',
+                fontWeight: 400,
+                minWidth: isExtensionMode ? '70px' : '108px',
+                p: isExtensionMode ? '12px' : undefined,
+                textTransform: 'capitalize'
+              }}
+              value={TAB_MAP.GOVERNANCE}
+            />
+        }
       </Tabs>
     </Box>
   );

diff --git a/packages/extension-polkagate/src/popup/history/index.tsx b/packages/extension-polkagate/src/popup/history/index.tsx
@@ -24,9 +24,9 @@ export default function TransactionHistory (): React.ReactElement {
 
   const [tabIndex, setTabIndex] = useState<TAB_MAP>(state?.tabIndex ?? TAB_MAP.ALL);
 
-  const { grouped, tabHistory, transfersTx } = useTransactionHistory(address, tabIndex);
+  const { governanceTx, grouped, tabHistory, transfersTx } = useTransactionHistory(address, tabIndex);
 
-  const _onBack = useCallback(() => {
+  const onBack = useCallback(() => {
     history.push({
       pathname: state?.pathname ?? '/'
     });
@@ -35,7 +35,7 @@ export default function TransactionHistory (): React.ReactElement {
   return (
     <>
       <HeaderBrand
-        onBackClick={_onBack}
+        onBackClick={onBack}
         showBackArrow
         text={t('Transaction History')}
       />
@@ -63,12 +63,12 @@ export default function TransactionHistory (): React.ReactElement {
               />
             ));
           })}
-        {grouped === null && transfersTx.isFetching === false &&
+        {grouped === null && transfersTx.isFetching === false && governanceTx.isFetching === false &&
           <Grid item mt='50px' mx='auto' textAlign='center'>
             {t('Nothing to show')}
           </Grid>
         }
-        {(grouped === undefined || (transfersTx.isFetching && tabHistory?.length === 0)) &&
+        {(grouped === undefined || ((transfersTx.isFetching || governanceTx.isFetching) && tabHistory?.length === 0)) &&
         <Progress pt='150px' size={50} title={t('Loading history')} type='grid' />
         }
         <div id='observerObj' style={{ height: '1px' }} />

diff --git a/packages/extension-polkagate/src/popup/history/modal/HistoryDetailModal.tsx b/packages/extension-polkagate/src/popup/history/modal/HistoryDetailModal.tsx
@@ -9,6 +9,7 @@ import { Divider, Grid, Typography } from '@mui/material';
 import React, { useCallback, useContext, useMemo } from 'react';
 
 import { AccountContext, PButton } from '../../../components';
+import { getVoteType } from '../../../fullscreen/governance/utils/util';
 import { useTranslation } from '../../../hooks';
 import { accountName, amountToMachine, toShortAddress, upperCaseFirstChar } from '../../../util/utils';
 import Explorer from '../Explorer';
@@ -30,7 +31,7 @@ export default function HistoryDetailModal ({ chainName, decimal, info, setShowD
   const { accounts } = useContext(AccountContext);
   const options = { day: 'numeric', hour: 'numeric', minute: 'numeric', month: 'short', second: 'numeric', weekday: 'short', year: 'numeric' } as Intl.DateTimeFormatOptions;
 
-  const _onBack = useCallback(() => {
+  const onBack = useCallback(() => {
     setShowDetail(false);
   }, [setShowDetail]);
 
@@ -73,9 +74,24 @@ export default function HistoryDetailModal ({ chainName, decimal, info, setShowD
         {info?.to &&
           <ToFrom item={<ShowNameAddress nameAddress={info.to} title={t('To')} />} toCopy={info?.to?.address} />
         }
+        {info?.refId &&
+          <Item item={`${t('Referenda Id')}: #${info.refId}`} noDivider />
+        }
+        {info?.refId &&
+          <Item item={`${t('Vote')}: ${info.voteType ? getVoteType({ standard: { balance: 0, vote: info.voteType.toString() } }) : 'Abstain'}`} noDivider />
+        }
+        {info?.delegatee &&
+          <ToFrom item={<ShowNameAddress nameAddress={{ address: info.delegatee, name: undefined }} title={t('Delegatee')} />} noDivider toCopy={info.delegatee} />
+        }
         {info?.amount &&
           <Amount amount={String(amountToMachine(info.amount, decimal))} decimal={decimal} label={t('Amount')} token={info?.token || token} />
         }
+        {info?.conviction &&
+          <Item item={`${t('Conviction')}: ${info.conviction}`} noDivider />
+        }
+        {info?.class &&
+          <Item item={`${t('Track Id')}: #${info.class}`} noDivider />
+        }
         {info?.fee &&
           <Amount amount={info?.fee} decimal={decimal} label={t('Fee')} token={token} />
         }
@@ -95,9 +111,9 @@ export default function HistoryDetailModal ({ chainName, decimal, info, setShowD
       </Grid>
       <PButton
         _ml={0}
-        _onClick={_onBack}
+        _onClick={onBack}
         _width={90}
-        text={t<string>('Back')}
+        text={t('Back')}
       />
     </>
   );

diff --git a/packages/extension-polkagate/src/popup/history/modal/HistoryModal.tsx b/packages/extension-polkagate/src/popup/history/modal/HistoryModal.tsx
@@ -32,7 +32,7 @@ export default function HistoryModal ({ address, setDisplayPopup }: Props): Reac
   const [detailInfo, setDetailInfo] = useState<TransactionDetail>();
   const [showDetail, setShowDetail] = useState<boolean>(false);
 
-  const { grouped, tabHistory, transfersTx } = useTransactionHistory(address, tabIndex);
+  const { governanceTx, grouped, tabHistory, transfersTx } = useTransactionHistory(address, tabIndex);
 
   const backToAccount = useCallback(() => setDisplayPopup(undefined), [setDisplayPopup]);
 
@@ -71,12 +71,12 @@ export default function HistoryModal ({ address, setDisplayPopup }: Props): Reac
                     />
                   ));
                 })}
-              {grouped === null && transfersTx.isFetching === false &&
+              {grouped === null && transfersTx.isFetching === false && governanceTx.isFetching === false &&
                 <Grid item mt='50px' mx='auto' textAlign='center'>
                   {t('Nothing to show')}
                 </Grid>
               }
-              {(grouped === undefined || (transfersTx.isFetching && tabHistory?.length === 0)) &&
+              {(grouped === undefined || ((transfersTx.isFetching || governanceTx.isFetching) && tabHistory?.length === 0)) &&
                <Progress pt='150px' size={50} title={t('Loading history')} type='grid' />
               }
               {grouped &&

diff --git a/packages/extension-polkagate/src/popup/history/partials/HistoryItem.tsx b/packages/extension-polkagate/src/popup/history/partials/HistoryItem.tsx
@@ -84,7 +84,7 @@ export default function HistoryItem ({ anotherDay, chainName, date, decimal, for
               </Grid>
               <Grid item>
                 <Typography color={info.success ? 'green' : 'red'} fontSize='16px' fontWeight={400}>
-                  {info.success ? t<string>('Completed') : t<string>('Failed')}
+                  {info.success ? t('Completed') : t('Failed')}
                 </Typography>
               </Grid>
             </Grid>