update yarn and node

remove unused and refactor

.nvmrc

@@ -1 +1 @@
-16
+18.18

.yarnrc.yml

@@ -1,13 +1,13 @@
+compressionLevel: mixed
+
+enableGlobalCache: false
+
 enableImmutableInstalls: false
 
 enableProgressBars: false
 
-nodeLinker: node-modules
-
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: "@yarnpkg/plugin-interactive-tools"
-  - path: .yarn/plugins/@yarnpkg/plugin-version.cjs
-    spec: "@yarnpkg/plugin-version"
+logFilters:
+  - code: YN0013
+    level: discard
 
-yarnPath: .yarn/releases/yarn-3.2.0.cjs
+nodeLinker: node-modules

package.json

@@ -2,17 +2,18 @@
   "author": "[email protected]",
   "bugs": "https://github.com/polkagate/extension/issues",
   "engines": {
-    "node": ">=18"
+    "node": ">=18.18"
   },
   "homepage": "https://github.com/polkagate/extension#readme",
   "license": "Apache-2.0",
-  "packageManager": "yarn@3.2.0",
+  "packageManager": "yarn@4.1.1",
   "private": true,
   "repository": {
     "type": "git",
     "url": "https://github.com/polkagate/extension.git"
   },
   "sideEffects": false,
+  "type": "module",
   "version": "0.47.5",
   "versions": {
     "git": "0.44.7-9-x",

packages/extension-polkagate/src/fullscreen/accountDetails/components/TotalChart.tsx

@@ -1,6 +1,5 @@
 // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
 // SPDX-License-Identifier: Apache-2.0
-// @ts-nocheck
 
 /* eslint-disable sort-keys */
 /* eslint-disable react/jsx-max-props-per-line */
@@ -16,10 +15,11 @@ import { BN } from '@polkadot/util';
 import { DisplayLogo } from '../../../components';
 import { nFormatter } from '../../../components/FormatPrice';
 import { useCurrency, useTranslation } from '../../../hooks';
-import { FetchedBalance } from '../../../hooks/useAssetsBalances';
+import type { FetchedBalance } from '../../../hooks/useAssetsBalances';
 import getLogo2 from '../../../util/getLogo2';
 import { amountToHuman } from '../../../util/utils';
 import { adjustColor } from '../../homeFullScreen/partials/TotalBalancePieChart';
+import { DEFAULT_COLOR } from '../../../util/constants';
 
 interface Props {
   accountAssets: FetchedBalance[] | null | undefined;
@@ -54,7 +54,7 @@ export default function TotalChart({ accountAssets, pricesInCurrency }: Props):
       /** to add asset's worth and color */
       accountAssets.forEach((asset, index) => {
         const assetWorth = calPrice(priceOf(asset.priceId), asset.totalBalance, asset.decimal);
-        const assetColor = getLogo2(asset.genesisHash, asset.token)?.color || 'green';
+        const assetColor = getLogo2(asset.genesisHash, asset.token)?.color || DEFAULT_COLOR;
 
         _assets[index].worth = assetWorth;
         _assets[index].color = adjustColor(asset.token, assetColor, theme);
@@ -82,6 +82,7 @@ export default function TotalChart({ accountAssets, pricesInCurrency }: Props):
     const worths = assets?.map(({ worth }) => worth);
     const colors = assets?.map(({ color }) => color);
 
+    //@ts-ignore
     const chartInstance = new Chart(chartRef.current, {
       data: {
         datasets: [{
@@ -98,9 +99,9 @@ export default function TotalChart({ accountAssets, pricesInCurrency }: Props):
           tooltip: {
             callbacks: {
               label: function (context) {
-                const index = colors?.findIndex((val) => val === context.element.options.backgroundColor);
+                const index = colors?.findIndex((val) => val === context.element.options['backgroundColor']);
 
-                return assets?.[index]?.token as string;
+                return index && index != -1 ? assets?.[index]?.token as string :'UNIT';
               }
             }
           }

packages/extension-polkagate/src/fullscreen/homeFullScreen/index.tsx

@@ -15,8 +15,8 @@ import { FullScreenHeader } from '../governance/FullScreenHeader';
 import HeaderComponents from './components/HeaderComponents';
 import DraggableAccountsList from './partials/DraggableAccountList';
 import HomeMenu from './partials/HomeMenu';
-import TotalBalancePieChart from './partials/TotalBalancePieChart';
-import WatchList, { type AssetsWithUiAndPrice } from './partials/WatchList';
+import TotalBalancePieChart, { type AssetsWithUiAndPrice } from './partials/TotalBalancePieChart';
+import WatchList from './partials/WatchList';
 import ProfileTabs from './partials/ProfileTabs';
 
 export interface AccountsOrder {

packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/TotalBalancePieChart.tsx

@@ -1,11 +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 { ArrowDropDown as ArrowDropDownIcon } from '@mui/icons-material';
-import { Box, Collapse, Divider, Grid, Theme, Typography, useTheme } from '@mui/material';
+import { Box, Collapse, Divider, Grid, type Theme, Typography, useTheme } from '@mui/material';
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 
 import { BN, BN_ZERO } from '@polkadot/util';
@@ -14,9 +13,9 @@ import { stars6Black, stars6White } from '../../../assets/icons';
 import { AccountsAssetsContext, DisplayLogo } from '../../../components';
 import { nFormatter } from '../../../components/FormatPrice';
 import { useCurrency, usePrices, useTranslation, useYouHave } from '../../../hooks';
-import { FetchedBalance } from '../../../hooks/useAssetsBalances';
+import type { FetchedBalance } from '../../../hooks/useAssetsBalances';
 import { isPriceOutdated } from '../../../popup/home/YouHave';
-import { TEST_NETS, TOKENS_WITH_BLACK_LOGO } from '../../../util/constants';
+import { DEFAULT_COLOR, TEST_NETS, TOKENS_WITH_BLACK_LOGO } from '../../../util/constants';
 import getLogo2 from '../../../util/getLogo2';
 import { amountToHuman } from '../../../util/utils';
 import Chart from './Chart';
@@ -26,17 +25,37 @@ interface Props {
   setGroupedAssets: React.Dispatch<React.SetStateAction<AssetsWithUiAndPrice[] | undefined>>
 }
 
-interface AssetsWithUiAndPrice extends FetchedBalance {
+export interface AssetsWithUiAndPrice {
   percent: number;
   price: number;
+  totalBalance: number;
   ui: {
     color: string | undefined;
     logo: string | undefined;
   };
+  assetId?: number,
+  chainName: string,
+  date?: number,
+  decimal: number,
+  genesisHash: string,
+  priceId: string,
+  token: string,
+  availableBalance: BN,
+  soloTotal?: BN,
+  pooledBalance?: BN,
+  lockedBalance?: BN,
+  vestingLocked?: BN,
+  vestedClaimable?: BN,
+  vestingTotal?: BN,
+  freeBalance?: BN,
+  frozenFee?: BN,
+  frozenMisc: BN,
+  reservedBalance?: BN,
+  votingBalance?: BN
 }
 
-export function adjustColor(token: string, color: string, theme: Theme): string {
-  if ((TOKENS_WITH_BLACK_LOGO.find((t) => t === token) && theme.palette.mode === 'dark')) {
+export function adjustColor(token: string, color: string | undefined, theme: Theme): string {
+  if (color && (TOKENS_WITH_BLACK_LOGO.find((t) => t === token) && theme.palette.mode === 'dark')) {
     const cleanedColor = color.replace(/^#/, '');
 
     // Convert hexadecimal to RGB
@@ -55,7 +74,7 @@ export function adjustColor(token: string, color: string, theme: Theme): string
     return invertedHex;
   }
 
-  return color;
+  return color || DEFAULT_COLOR;
 }
 
 function TotalBalancePieChart({ hideNumbers, setGroupedAssets }: Props): React.ReactElement {
@@ -75,8 +94,6 @@ function TotalBalancePieChart({ hideNumbers, setGroupedAssets }: Props): React.R
       parseFloat(Math.trunc(num) === 0 ? num.toFixed(decimal) : num.toFixed(1))
     , []);
 
-  const isDarkTheme = useMemo(() => theme.palette.mode === 'dark', [theme.palette.mode]);
-
   const assets = useMemo((): AssetsWithUiAndPrice[] | undefined => {
     if (!accountsAssets || !youHave || !pricesInCurrencies) {
       return undefined;
@@ -88,18 +105,19 @@ function TotalBalancePieChart({ hideNumbers, setGroupedAssets }: Props): React.R
     Object.keys(balances).forEach((address) => {
       Object.keys(balances?.[address]).forEach((genesisHash) => {
         if (!TEST_NETS.includes(genesisHash)) {
+          //@ts-ignore
           allAccountsAssets = allAccountsAssets.concat(balances[address][genesisHash]);
         }
       });
     });
 
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call
-    const groupedAssets = Object.groupBy(allAccountsAssets, ({ genesisHash, token }) => `${token}_${genesisHash}`);
+    //@ts-ignore
+    const groupedAssets = Object.groupBy(allAccountsAssets, ({ genesisHash, token }: { genesisHash: string, token: string }) => `${token}_${genesisHash}`);
     const aggregatedAssets = Object.keys(groupedAssets).map((index) => {
       const assetSample = groupedAssets[index][0] as AssetsWithUiAndPrice;
       const ui = getLogo2(assetSample?.genesisHash, assetSample?.token);
       const assetPrice = pricesInCurrencies.prices[assetSample.priceId]?.value;
-      const accumulatedPricePerAsset = groupedAssets[index].reduce((sum, { totalBalance }) => sum.add(new BN(totalBalance)), BN_ZERO) as BN;
+      const accumulatedPricePerAsset = groupedAssets[index].reduce((sum: BN, { totalBalance }: FetchedBalance) => sum.add(new BN(totalBalance)), BN_ZERO) as BN;
 
       const balancePrice = calPrice(assetPrice, accumulatedPricePerAsset, assetSample.decimal ?? 0);
 
@@ -139,7 +157,7 @@ function TotalBalancePieChart({ hideNumbers, setGroupedAssets }: Props): React.R
 
   const toggleAssets = useCallback(() => setShowMore(!showMore), [showMore]);
 
-  const DisplayAssetRow = ({ asset }: { asset: FetchedBalance }) => {
+  const DisplayAssetRow = ({ asset }: { asset: AssetsWithUiAndPrice }) => {
     const logoInfo = useMemo(() => asset && getLogo2(asset.genesisHash, asset.token), [asset]);
 
     return (

packages/extension-polkagate/src/fullscreen/homeFullScreen/partials/WatchList.tsx

@@ -1,34 +1,23 @@
 // 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 { ArrowDropDown as ArrowDropDownIcon, ArrowDropDown as DownIcon, ArrowDropUp as UpIcon } from '@mui/icons-material';
-import { Collapse, Divider, Grid, Typography, useTheme } from '@mui/material';
+import { Collapse, Divider, Grid, Typography } from '@mui/material';
 import React, { useCallback, useMemo, useState } from 'react';
 
 import { DisplayLogo } from '../../../components';
 import { nFormatter } from '../../../components/FormatPrice';
 import { useCurrency, usePrices, useTranslation } from '../../../hooks';
-import { FetchedBalance } from '../../../hooks/useAssetsBalances';
 import getLogo2 from '../../../util/getLogo2';
+import type { AssetsWithUiAndPrice } from './TotalBalancePieChart';
 
 interface Props {
   groupedAssets: AssetsWithUiAndPrice[] | undefined
 }
 
-export interface AssetsWithUiAndPrice extends FetchedBalance {
-  percent: number;
-  price: number;
-  ui: {
-    color: string | undefined;
-    logo: string | undefined;
-  };
-}
-
 function WatchList({ groupedAssets }: Props): React.ReactElement {
-  const theme = useTheme();
   const { t } = useTranslation();
   const currency = useCurrency();
   const pricesInCurrencies = usePrices();
@@ -37,7 +26,7 @@ function WatchList({ groupedAssets }: Props): React.ReactElement {
 
   const toggleAssets = useCallback(() => setShowMore(!showMore), [showMore]);
 
-  const DisplayAssetRow = ({ asset }: { asset: FetchedBalance }) => {
+  const DisplayAssetRow = ({ asset }: { asset: AssetsWithUiAndPrice }) => {
     const logoInfo = useMemo(() => asset && getLogo2(asset.genesisHash, asset.token), [asset]);
     const change = pricesInCurrencies ? pricesInCurrencies.prices[asset.priceId]?.change : 0;
 

packages/extension-polkagate/src/popup/welcome/Privacy.tsx

@@ -1,6 +1,5 @@
 // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
 // SPDX-License-Identifier: Apache-2.0
-// @ts-nocheck
 
 /* eslint-disable react/jsx-max-props-per-line */
 

packages/extension-polkagate/src/util/constants.tsx

@@ -28,6 +28,7 @@ export const FLOATING_POINT_DIGIT = 4;
 export const BLOCK_RATE = 6; // sec
 export const DEFAULT_TOKEN_DECIMALS = 12;
 
+export const DEFAULT_COLOR = 'green'
 export const SHORT_ADDRESS_CHARACTERS = 4;
 export const MAX_REWARDS_TO_SHOW = 100;
 export const MAX_HISTORY_RECORD_TO_SHOW = 40;

packages/extension-polkagate/src/util/getLogo2.ts

@@ -1,20 +1,19 @@
 // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
 // SPDX-License-Identifier: Apache-2.0
-// @ts-nocheck
 
 import { createWsEndpoints, externalLinks } from '@polkagate/apps-config';
 import { createAssets } from '@polkagate/apps-config/assets';
 
-import { Chain } from '../../../extension-chains/src/types';
+import type { Chain } from '../../../extension-chains/src/types';
 import { toCamelCase } from '../fullscreen/governance/utils/util';
 import getNetworkMap from './getNetworkMap';
 import { sanitizeChainName } from './utils';
 
 const endpoints = createWsEndpoints(() => '');
 
 export interface LogoInfo {
-  logo: string;
-  color: string;
+  logo?: string | undefined;
+  color?: string | undefined;
   subLogo?: string;
 }
 
@@ -49,7 +48,7 @@ export default function getLogo2(info: string | undefined | Chain, token?: strin
   if (!endpoint) {
     mayBeExternalLogo = Object
       .entries(externalLinks)
-      .find(([name, { chains, create, homepage, isActive, paths, ui }]): React.ReactNode | null =>
+      .find(([name]): React.ReactNode | null =>
         name.toLowerCase() === iconName
       );
   }

packages/extension-polkagate/src/util/workers/getStakingConsts.js

@@ -1,7 +1,7 @@
 // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
 // SPDX-License-Identifier: Apache-2.0
-// @ts-nocheck
-/* eslint-disable header/header */
+
+ /* eslint-disable header/header */
 
 // @ts-nocheck