init

PolkaGate · Jul 28, 2024 · bc86265 · bc86265
1 parent dc0b931
commit bc86265
Show file tree

Hide file tree

Showing 18 changed files with 1,719 additions and 652 deletions.
diff --git a/.yarn/releases/yarn-4.1.1.cjs b/.yarn/releases/yarn-4.1.1.cjs
diff --git a/packages/extension-polkagate/src/fullscreen/governance/post/Description.tsx b/packages/extension-polkagate/src/fullscreen/governance/post/Description.tsx
@@ -1,13 +1,14 @@
 // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
 // SPDX-License-Identifier: Apache-2.0
-// @ts-nocheck
 
 /* eslint-disable react/jsx-max-props-per-line */
 
+import type { Proposal, Referendum } from '../utils/types';
+
 import { ScheduleRounded as ClockIcon } from '@mui/icons-material/';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { Accordion, AccordionDetails, AccordionSummary, Divider, Grid, Paper, Typography, useTheme } from '@mui/material';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState, useCallback } from 'react';
 import ReactMarkdown from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
 
@@ -18,7 +19,6 @@ import { nFormatter } from '../../../components/FormatPrice';
 import { useApi, useChain, useDecimal, useToken, useTokenPrice, useTranslation } from '../../../hooks';
 import { LabelValue } from '../TrackStats';
 import { STATUS_COLOR } from '../utils/consts';
-import { Proposal, Referendum } from '../utils/types';
 import { formalizedStatus, formatRelativeTime, pascalCaseToTitleCase } from '../utils/util';
 import { hexAddressToFormatted } from './Metadata';
 
@@ -48,20 +48,20 @@ export default function ReferendumDescription({ address, currentTreasuryApproval
   const content = useMemo(() => {
     const res = referendum?.content?.includes('login and tell us more about your proposal') ? t(DEFAULT_CONTENT) : referendum?.content
 
-    return res || ''//?.replace(/<br\s*\/?>/gi, ' ') || '';
+    return res || '';// ?.replace(/<br\s*\/?>/gi, ' ') || '';
   }, [referendum?.content, t]);
 
   useEffect(() => {
     referendum?.content && !expanded && setExpanded(true);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [referendum?.content]);
 
-  const handleChange = (event, isExpanded: boolean) => {
+  const handleChange = useCallback((_event: React.SyntheticEvent, isExpanded: boolean) => {
     setExpanded(isExpanded);
-  };
+  }, []);
 
   const VDivider = () => (
-    <Divider flexItem orientation='vertical' sx={{ mx: '2%', my: '10px', bgcolor: theme.palette.mode === 'light' ? 'inherit' : 'text.disabled' }} />
+    <Divider flexItem orientation='vertical' sx={{ bgcolor: theme.palette.mode === 'light' ? 'inherit' : 'text.disabled', mx: '2%', my: '10px' }} />
   );
 
   return (
@@ -97,7 +97,7 @@ export default function ReferendumDescription({ address, currentTreasuryApproval
                   {t('By')}:
                 </Grid>
                 <Grid item maxWidth='30%'>
-                  <Identity api={api} chain={chain as any} formatted={referendum?.proposer} identiconSize={25} showShortAddress={!!referendum?.proposer} showSocial={false} style={{ fontSize: '14px', fontWeight: 400, lineHeight: '47px', maxWidth: '100%', minWidth: '35%', width: 'fit-content' }} />
+                  <Identity api={api} chain={chain} formatted={referendum?.proposer} identiconSize={25} showShortAddress={!!referendum?.proposer} showSocial={false} style={{ fontSize: '14px', fontWeight: 400, lineHeight: '47px', maxWidth: '100%', minWidth: '35%', width: 'fit-content' }} />
                 </Grid>
                 <VDivider />
                 <Grid item sx={{ fontSize: '14px', fontWeight: 400, opacity: 0.6 }}>
@@ -119,10 +119,10 @@ export default function ReferendumDescription({ address, currentTreasuryApproval
                           noBorder
                           value={
                             <ShowBalance
-                              balance={new BN(referendum?.requested)}
-                              decimal={decimal}
+                              balance={new BN(referendum.requested)}
+                              decimal={referendum?.decimal || decimal}
                               decimalPoint={2}
-                              token={token}
+                              token={referendum?.token || token}
                             />
                           }
                           valueStyle={{ fontSize: 16, fontWeight: 500, pl: '5px' }}

diff --git a/packages/extension-polkagate/src/fullscreen/governance/post/Metadata.tsx b/packages/extension-polkagate/src/fullscreen/governance/post/Metadata.tsx
@@ -1,27 +1,27 @@
 // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
 // SPDX-License-Identifier: Apache-2.0
-// @ts-nocheck
 
 /* eslint-disable react/jsx-max-props-per-line */
 
+import type { Chain } from '@polkadot/extension-chains/types';
+import type { Referendum } from '../utils/types';
+
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { Accordion, AccordionDetails, AccordionSummary, Box, Grid, Link, Typography, useTheme } from '@mui/material';
-import React from 'react';
-import { JsonToTable } from "react-json-to-table";
-
-import type { Chain } from '@polkadot/extension-chains/types';
+import React, { useCallback, useMemo } from 'react';
+import { JsonToTable } from 'react-json-to-table';
 
+import { isObject, isString } from '@polkadot/util';
 import { decodeAddress, encodeAddress } from '@polkadot/util-crypto';
 
 import { subscan } from '../../../assets/icons';
 import { Identity, ShowBalance, ShowValue } from '../../../components';
-import { useApi, useChain, useChainName, useDecimal, useToken, useTranslation } from '../../../hooks';
+import { useInfo, useTranslation } from '../../../hooks';
 import { isValidAddress } from '../../../util/utils';
 import { LabelValue } from '../TrackStats';
-import { Referendum } from '../utils/types';
 import { pascalCaseToTitleCase } from '../utils/util';
 
-export function hexAddressToFormatted(hexString: string, chain: Chain | undefined): string | undefined {
+export function hexAddressToFormatted (hexString: string, chain: Chain | null | undefined): string | undefined {
   try {
     if (!chain || !hexString) {
       return undefined;
@@ -43,27 +43,47 @@ interface Props {
   referendum: Referendum | undefined;
 }
 
-export default function Metadata({ address, decisionDepositPayer, referendum }: Props): React.ReactElement {
+export default function Metadata ({ address, decisionDepositPayer, referendum }: Props): React.ReactElement {
   const { t } = useTranslation();
   const theme = useTheme();
-  const api = useApi(address);
-  const chain = useChain(address);
-  const chainName = useChainName(address);
-  const decimal = useDecimal(address);
-  const token = useToken(address);
+
+  const { api, chain, chainName, decimal, token } = useInfo(address);
 
   const [expanded, setExpanded] = React.useState(false);
   const [showJson, setShowJson] = React.useState(false);
 
   const referendumLinkOnsSubscan = () => `https://${chainName}.subscan.io/referenda_v2/${String(referendum?.index)}`;
-  const mayBeBeneficiary = referendum?.call?.args?.beneficiary?.value || hexAddressToFormatted(referendum?.call?.args?.beneficiary, chain) || referendum?.call?.args?.beneficiary?.toString() as unknown as string;
 
-  const handleChange = (event, isExpanded: boolean) => {
+  const mayBeBeneficiary = useMemo(() => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+    const _beneficiary = referendum?.call?.args?.['beneficiary']?.value;
+
+    if (!_beneficiary) {
+      return undefined;
+    }
+
+    if (isString(_beneficiary)) {
+      return hexAddressToFormatted(_beneficiary as string, chain) || _beneficiary.toString();
+    }
+
+    if (isObject(_beneficiary)) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+      const _address = _beneficiary?.['interior']?.value?.id as string;
+
+      return _address
+        ? hexAddressToFormatted(_address, chain) || _address.toString()
+        : undefined;
+    }
+
+    return undefined;
+  }, [chain, referendum?.call?.args]);
+
+  const handleChange = useCallback((_event: React.SyntheticEvent, isExpanded: boolean) => {
     setExpanded(isExpanded);
-  };
+  }, []);
 
   return (
-    <Accordion expanded={expanded} onChange={handleChange} sx={{ width: 'inherit', px: '3%', mt: 1, borderRadius: '10px', border: 1, borderColor: theme.palette.mode === 'light' ? 'background.paper' : 'secondary.main' }}>
+    <Accordion expanded={expanded} onChange={handleChange} sx={{ border: 1, borderColor: theme.palette.mode === 'light' ? 'background.paper' : 'secondary.main', borderRadius: '10px', mt: 1, px: '3%', width: 'inherit' }}>
       <AccordionSummary expandIcon={<ExpandMoreIcon sx={{ color: `${theme.palette.primary.main}`, fontSize: '37px' }} />} sx={{ borderBottom: expanded && `1px solid ${theme.palette.text.disabled}`, px: 0 }}>
         <Grid container item>
           <Grid container item xs={12}>
@@ -145,14 +165,14 @@ export default function Metadata({ address, decisionDepositPayer, referendum }:
           {mayBeBeneficiary &&
             <>
               <LabelValue
-                label={t('Requested For')}
+                label={t('Requested for')}
                 labelStyle={{ minWidth: '20%' }}
                 style={{ justifyContent: 'flex-start' }}
                 value={<ShowBalance
-                  balance={referendum?.call?.args?.amount || referendum?.requested}
-                  decimal={decimal}
+                  balance={referendum?.call?.args?.['amount'] as string || referendum?.requested}
+                  decimal={referendum?.decimal || decimal}
                   decimalPoint={2}
-                  token={token}
+                  token={referendum?.token || token}
                 />}
                 valueStyle={{ fontSize: 16, fontWeight: 500 }}
               />
@@ -165,7 +185,7 @@ export default function Metadata({ address, decisionDepositPayer, referendum }:
                     isValidAddress(mayBeBeneficiary)
                       ? <Identity
                         api={api}
-                        chain={chain as any}
+                        chain={chain}
                         formatted={mayBeBeneficiary}
                         identiconSize={25}
                         showShortAddress
@@ -235,8 +255,9 @@ export default function Metadata({ address, decisionDepositPayer, referendum }:
           />
           <Grid container item>
             <Link
+              // eslint-disable-next-line react/jsx-no-bind
               onClick={() => setShowJson(!showJson)}
-              sx={{ cursor: 'pointer', color: `${theme.palette.secondary.main}` }}
+              sx={{ color: `${theme.palette.secondary.main}`, cursor: 'pointer' }}
               underline='none'
             >
               <Typography sx={{ py: 2 }}>

diff --git a/packages/extension-polkagate/src/fullscreen/governance/post/index.tsx b/packages/extension-polkagate/src/fullscreen/governance/post/index.tsx
@@ -1,9 +1,10 @@
 // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
 // SPDX-License-Identifier: Apache-2.0
-// @ts-nocheck
 
 /* eslint-disable react/jsx-max-props-per-line */
 
+import type { Proposal } from '../utils/types';
+
 import { Container, Grid } from '@mui/material';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useParams } from 'react-router';
@@ -16,7 +17,6 @@ import { FullScreenHeader } from '../FullScreenHeader';
 import Toolbar from '../Toolbar';
 import { ENDED_STATUSES } from '../utils/consts';
 import { isFinished } from '../utils/helpers';
-import { Proposal } from '../utils/types';
 import { getVoteType, toTitleCase } from '../utils/util';
 import CastVote from './castVote';
 import Chronology from './Chronology';
@@ -28,14 +28,12 @@ import StatusInfo from './StatusInfo';
 import Support from './Support';
 import Voting from './Voting';
 
-export default function ReferendumPost(): React.ReactElement {
+export default function ReferendumPost (): React.ReactElement {
   const { t } = useTranslation();
   const { address, postId, topMenu } = useParams<{ address?: string | undefined, topMenu?: 'referenda' | 'fellowship' | undefined, postId?: string | undefined }>();
   const [refresh, setRefresh] = useState<boolean>(false);
   const referendum = useReferendum(address, topMenu, postId && Number(postId), refresh);
 
-  // console.log('* referendum:', referendum);
-
   const history = useHistory();
   const { state } = useLocation();
   const chainName = useChainName(address);

diff --git a/packages/extension-polkagate/src/fullscreen/governance/utils/helpers.ts b/packages/extension-polkagate/src/fullscreen/governance/utils/helpers.ts
@@ -1,15 +1,13 @@
 // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
 // SPDX-License-Identifier: Apache-2.0
-// @ts-nocheck
 
+import type { ApiPromise } from '@polkadot/api';
 import type { AccountId32 } from '@polkadot/types/interfaces/runtime';
-
-import { ApiPromise } from '@polkadot/api';
-import { BN } from '@polkadot/util';
+import type { BN } from '@polkadot/util';
+import type { LatestReferenda, Origins, Referendum, ReferendumPA, ReferendumSb, TopMenu } from './types';
 
 import { postData } from '../../../util/api';
 import { FINISHED_REFERENDUM_STATUSES, TRACK_LIMIT_TO_LOAD_PER_REQUEST } from './consts';
-import { LatestReferenda, Origins, Referendum, ReferendumPA, ReferendumSb, TopMenu } from './types';
 
 export const LOCKS = [1, 10, 20, 30, 40, 50, 60];
 export interface Statistics {
@@ -28,7 +26,7 @@ export interface Statistics {
   'OriginsCount': number
 }
 
-export type VoteType = {
+export interface VoteType {
   decision: string;
   voter: string;
   balance: {
@@ -40,7 +38,7 @@ export type VoteType = {
   votePower?: BN;
 }
 
-export type AbstainVoteType = {
+export interface AbstainVoteType {
   decision: string;
   voter: string;
   balance: {
@@ -55,7 +53,7 @@ export type AbstainVoteType = {
   votePower?: BN;
 }
 
-export type AllVotesType = {
+export interface AllVotesType {
   abstain: {
     count: number;
     votes: AbstainVoteType[];
@@ -70,7 +68,7 @@ export type AllVotesType = {
   }
 }
 
-export type FilteredVotes = {
+export interface FilteredVotes {
   abstain: AbstainVoteType[];
   no: VoteType[];
   yes: VoteType[];
@@ -132,13 +130,13 @@ export async function getReferendumVotesFromSubscan(chainName: string, referendu
           }
         });
     } catch (error) {
-      console.log('something went wrong while getting referendum votes ');
+      console.log('something went wrong while getting referendum votes ', error);
       resolve(null);
     }
   });
 }
 
-export async function getLatestReferendums(chainName: string, listingLimit = 30): Promise<LatestReferenda[] | null> {
+export async function getLatestReferendums (chainName: string, listingLimit = 30): Promise<LatestReferenda[] | null> {
   // console.log(`Getting Latest referendum on ${chainName} from PA ...`);
 
   const requestOptions = {

diff --git a/packages/extension-polkagate/src/fullscreen/governance/utils/types.tsx b/packages/extension-polkagate/src/fullscreen/governance/utils/types.tsx
@@ -1,11 +1,9 @@
 // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
 // SPDX-License-Identifier: Apache-2.0
-// @ts-nocheck
-
-import type { PalletReferendaTrackInfo } from '@polkadot/types/lookup';
 
 import type { AccountId } from '@polkadot/types/interfaces/runtime';
-import { BN } from '@polkadot/util';
+import type { PalletReferendaTrackInfo } from '@polkadot/types/lookup';
+import type { BN } from '@polkadot/util';
 
 export type TopMenu = 'Referenda' | 'Fellowship';
 export type Origins = 'root' | 'whitelisted_caller' | 'staking_admin' | 'treasurer' | 'lease_admin' | 'general_admin' | 'auction_admin' | 'referendum_canceller' | 'small_tipper' | 'big_tipper' | 'small_spender' | 'medium_spender' | 'big_spender';
@@ -51,6 +49,7 @@ export interface ReferendumHistory {
 }
 
 export interface ReferendumPA {
+  assetId?: string;
   bond: any;
   chainName: 'Polkadot' | 'Kusama';
   comments: CommentType[];
@@ -214,7 +213,10 @@ export type Track = [
   info: PalletReferendaTrackInfo
 ];
 
-export type Referendum = {
+export interface Referendum {
+  assetId?: string;
+  token?: string;
+  decimal?: number;
   ayesAmount?: string | undefined,
   ayesCount?: number | undefined,
   call?: {
@@ -244,7 +246,7 @@ export type Referendum = {
   submissionBlockOC?: number;
   submissionAmount?: string | undefined,
   supportAmount?: string | undefined,
-  title?: string | undefined,
+  title?: string | null,
   timelinePA?: {
     created_at: Date,
     hash: string,
@@ -256,7 +258,7 @@ export type Referendum = {
   trackId?: number | undefined,
   trackName?: string | undefined,
   type?: string | undefined
-};
+}
 
 export interface DelegationInfo {
   track: BN;