chore: remove explit any 3

.eslintignore

@@ -17,4 +17,4 @@ build
 vite.config.ts
 public/lottie/player.js
 CHANGELOG.md
-.yarn/*
+.yarn

.prettierignore

@@ -8,4 +8,5 @@
 dist
 src/img/**/*
 public/lottie/player.js
-CHANGELOG.md
+CHANGELOG.md
+.yarn

src/contexts/Menu/index.tsx

@@ -4,12 +4,12 @@
 import type { RefObject } from 'react';
 import React, { useState } from 'react';
 import { defaultMenuContext } from './defaults';
-import type { MenuContextInterface } from './types';
+import type { MenuContextInterface, MenuItem } from './types';
 
 export const MenuProvider = ({ children }: { children: React.ReactNode }) => {
-  const [open, setOpen] = useState(0);
-  const [show, setShow] = useState(0);
-  const [items, setItems] = useState<React.ReactNode[]>([]);
+  const [open, setOpen] = useState<number>(0);
+  const [show, setShow] = useState<number>(0);
+  const [items, setItems] = useState<MenuItem[]>([]);
 
   const [position, setPosition] = useState<[number, number]>([0, 0]);
 
@@ -63,7 +63,7 @@ export const MenuProvider = ({ children }: { children: React.ReactNode }) => {
     setShow(1);
   };
 
-  const setMenuItems = (_items: React.ReactNode[]) => {
+  const setMenuItems = (_items: MenuItem[]) => {
     setItems(_items);
   };
 

src/contexts/Menu/types.ts

@@ -1,17 +1,22 @@
 // Copyright 2023 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
-import type React from 'react';
-import type { RefObject } from 'react';
+import type { ReactNode, RefObject } from 'react';
 
 export interface MenuContextInterface {
   openMenu: () => void;
   closeMenu: () => void;
   setMenuPosition: (ref: RefObject<HTMLDivElement>) => void;
   checkMenuPosition: (ref: RefObject<HTMLDivElement>) => void;
-  setMenuItems: (items: React.ReactNode[]) => void;
+  setMenuItems: (items: MenuItem[]) => void;
   open: number;
   show: number;
   position: [number, number];
-  items: React.ReactNode[];
+  items: MenuItem[];
+}
+
+export interface MenuItem {
+  icon: ReactNode;
+  title: string;
+  cb: () => void;
 }

src/contexts/Staking/types.ts

@@ -75,7 +75,7 @@ export interface StakingContextInterface {
   addressDifferentToStash: (a: MaybeAddress) => boolean;
   isBonding: () => boolean;
   isNominating: () => boolean;
-  inSetup: () => any;
+  inSetup: () => boolean;
   getLowestRewardFromStaker: (a: MaybeAddress) => LowestReward;
   staking: StakingMetrics;
   eraStakers: EraStakers;

src/contexts/UI/types.ts

@@ -1,14 +1,16 @@
 // Copyright 2023 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
+import type { RefObject } from 'react';
+
 export interface UIContextInterface {
   setSideMenu: (v: boolean) => void;
   setUserSideMenuMinimised: (v: boolean) => void;
-  setContainerRefs: (v: any) => void;
+  setContainerRefs: (v: Record<string, RefObject<HTMLDivElement>>) => void;
   sideMenuOpen: boolean;
   userSideMenuMinimised: boolean;
   sideMenuMinimised: boolean;
-  containerRefs: any;
+  containerRefs: Record<string, RefObject<HTMLDivElement>>;
   isSyncing: boolean;
   isNetworkSyncing: boolean;
   isPoolSyncing: boolean;

src/contexts/Validators/types.ts

@@ -1,6 +1,7 @@
 // Copyright 2023 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
+import type { ValidatorEntry } from '@polkadot-cloud/assets/types';
 import type BigNumber from 'bignumber.js';
 import type { AnyJson, BondFor, Sync } from 'types';
 
@@ -20,7 +21,7 @@ export interface ValidatorsContextInterface {
   sessionParaValidators: string[];
   nominated: Validator[] | null;
   poolNominated: Validator[] | null;
-  validatorCommunity: any[];
+  validatorCommunity: ValidatorEntry[];
   erasRewardPoints: ErasRewardPoints;
   validatorsFetched: Sync;
   eraPointsBoundaries: EraPointsBoundaries;

src/library/Account/types.ts

@@ -1,6 +1,7 @@
 // Copyright 2023 @paritytech/polkadot-staking-dashboard authors & contributors
 // SPDX-License-Identifier: GPL-3.0-only
 
+import type { ActivePool } from 'contexts/Pools/ActivePools/types';
 import type { MaybeAddress } from 'types';
 
 export interface AccountProps {
@@ -10,7 +11,7 @@ export interface AccountProps {
 }
 
 export type PoolAccountProps = {
-  pool: any;
+  pool: ActivePool;
   label: string;
   syncing: boolean;
 };

src/library/Form/ClaimPermissionInput/index.tsx

@@ -71,7 +71,7 @@ export const ClaimPermissionInput = ({
           opacity: enabled && !disabled ? 1 : 'var(--opacity-disabled)',
         }}
       >
-        {claimPermissionConfig.map(({ label, value }: any, i) => (
+        {claimPermissionConfig.map(({ label, value }, i) => (
           <TabWrapper
             key={`pools_tab_filter_${i}`}
             $active={value === selected && enabled}

src/library/Form/Unbond/UnbondInput.tsx

@@ -41,11 +41,11 @@ export const UnbondInput = ({
       return;
     }
     setLocalBond(val);
-    updateParentState(val);
+    updateParentState(new BigNumber(val));
   };
 
   // apply bond to parent setters.
-  const updateParentState = (val: any) => {
+  const updateParentState = (val: BigNumber) => {
     for (const s of setters) {
       s.set({
         ...s.current,

src/library/Form/types.ts

@@ -37,7 +37,7 @@ export interface BondFeedbackProps {
   syncing?: boolean;
   setters: AnyFunction;
   bondFor: BondFor;
-  defaultBond: number | null;
+  defaultBond: string | null;
   inSetup?: boolean;
   joiningPool?: boolean;
   listenIsValid: { (valid: boolean, errors: string[]): void } | { (): void };

src/library/Graphs/EraPoints.tsx

@@ -100,11 +100,13 @@ export const EraPoints = ({ items = [], height }: EraPointsProps) => {
   };
 
   const data = {
-    labels: items.map((item: any) => item.era),
+    labels: items.map(({ era }: { era: string }) => era),
     datasets: [
       {
         label: t('points'),
-        data: items.map((item: any) => item.reward_point),
+        data: items.map(
+          ({ reward_point }: { reward_point: string }) => reward_point
+        ),
         borderColor: colors.primary[mode],
         backgroundColor: colors.primary[mode],
         pointStyle: undefined,

src/library/Help/Items/ActiveDefinition.tsx

@@ -11,7 +11,7 @@ export const ActiveDefinition = ({
   return (
     <DefinitionWrapper>
       <div>
-        {description.map((item: any, index: number) => (
+        {description.map((item, index: number) => (
           <h4 key={`inner_def_${index}`} className="definition">
             {item}
           </h4>

src/library/Help/Items/Definition.tsx

@@ -4,10 +4,11 @@
 import type { RefObject } from 'react';
 import { useEffect, useRef, useState } from 'react';
 import { DefinitionWrapper } from '../Wrappers';
+import type { DefinitionProps } from './types';
 
-export const Definition = ({ title, description, open: o }: any) => {
+export const Definition = ({ title, description }: DefinitionProps) => {
   // Store whether the definition is open or not.
-  const [open, setOpen] = useState(o || false);
+  const [open, setOpen] = useState(false);
 
   // Store the current height of the definition content.
   const [height, setHeight] = useState<number>(0);
@@ -21,25 +22,24 @@ export const Definition = ({ title, description, open: o }: any) => {
 
   return (
     <DefinitionWrapper>
-      {!o ? (
-        <button onClick={() => setOpen(!open)} type="button">
-          <h2>
-            {title}
-            <span>{open ? '-' : '+'}</span>
-          </h2>
-        </button>
-      ) : null}
+      <button onClick={() => setOpen(!open)} type="button">
+        <h2>
+          {title}
+          <span>{open ? '-' : '+'}</span>
+        </h2>
+      </button>
+
       <div style={{ height }}>
         <div className="content" ref={contentRef}>
-          {open ? (
+          {open && (
             <>
-              {description.map((item: any, index: number) => (
+              {description.map((item, index: number) => (
                 <h4 key={`inner_def_${index}`} className="definition">
                   {item}
                 </h4>
               ))}
             </>
-          ) : null}
+          )}
         </div>
       </div>
     </DefinitionWrapper>

src/library/Help/Items/External.tsx

@@ -6,21 +6,15 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { motion } from 'framer-motion';
 import { useCallback } from 'react';
 import { ItemWrapper } from '../Wrappers';
+import type { ExternalProps } from './types';
 
-export const External = ({
-  width,
-  height,
-  subtitle,
-  title,
-  url,
-  website,
-}: any) => {
+export const External = ({ width, title, url, website }: ExternalProps) => {
   const handleClick = useCallback(() => {
     window.open(url, '_blank');
   }, [url]);
 
   return (
-    <ItemWrapper width={width} height={height || 'auto'}>
+    <ItemWrapper width={width}>
       <motion.button
         className="item"
         whileHover={{ scale: 1.004 }}
@@ -33,7 +27,6 @@ export const External = ({
         onClick={handleClick}
       >
         <h2>{title}</h2>
-        {subtitle}
         <p className="icon">
           <FontAwesomeIcon icon={faExt} className="ext" />
           {website !== undefined && website}

src/library/Help/Items/types.ts

@@ -0,0 +1,14 @@
+// Copyright 2023 @paritytech/polkadot-staking-dashboard authors & contributors
+// SPDX-License-Identifier: GPL-3.0-only
+
+export interface ExternalProps {
+  width: string | number;
+  title: string;
+  url: string;
+  website: string;
+}
+
+export interface DefinitionProps {
+  title: string;
+  description: string[];
+}

src/library/Help/Wrappers.ts

@@ -91,11 +91,10 @@ export const DefinitionWrapper = styled(motion.div)`
 
 export const ItemWrapper = styled(motion.div)<{
   width: string | number;
-  height: string | number;
 }>`
   display: flex;
   width: ${(props) => props.width};
-  height: ${(props) => (props.height === undefined ? '160px' : props.height)};
+  height: auto;
   overflow: hidden;
   flex-flow: row wrap;
 

src/library/Help/index.tsx

@@ -183,7 +183,6 @@ export const Help = () => {
               {activeDefinitions.map((item, index: number) => (
                 <Definition
                   key={`def_${index}`}
-                  onClick={() => {}}
                   title={item.title}
                   description={item.description}
                 />

src/library/Hooks/usePrices/index.tsx

@@ -5,6 +5,7 @@ import { useEffect, useRef, useState } from 'react';
 import { usePlugins } from 'contexts/Plugins';
 import { useUnitPrice } from 'library/Hooks/useUnitPrice';
 import { useNetwork } from 'contexts/Network';
+import type { AnyJson } from 'types';
 
 export const usePrices = () => {
   const { network } = useNetwork();
@@ -24,7 +25,7 @@ export const usePrices = () => {
   const [prices, _setPrices] = useState(pricesLocalStorage());
   const pricesRef = useRef(prices);
 
-  const setPrices = (p: any) => {
+  const setPrices = (p: AnyJson) => {
     localStorage.setItem(`${network}_prices`, JSON.stringify(p));
     pricesRef.current = {
       ...pricesRef.current,
@@ -43,7 +44,7 @@ export const usePrices = () => {
     }
   };
 
-  let priceHandle: any = null;
+  let priceHandle: ReturnType<typeof setInterval>;
   const setPriceInterval = async () => {
     priceHandle = setInterval(async () => {
       setPrices(await fetchUnitPrice());
@@ -54,15 +55,15 @@ export const usePrices = () => {
   useEffect(() => {
     initiatePriceInterval();
     return () => {
-      if (priceHandle !== null) {
+      if (priceHandle) {
         clearInterval(priceHandle);
       }
     };
   }, []);
 
   // resubscribe on network toggle
   useEffect(() => {
-    if (priceHandle !== null) {
+    if (priceHandle) {
       clearInterval(priceHandle);
     }
     initiatePriceInterval();
@@ -71,10 +72,10 @@ export const usePrices = () => {
   // servie toggle
   useEffect(() => {
     if (plugins.includes('binance_spot')) {
-      if (priceHandle === null) {
+      if (priceHandle) {
         initiatePriceInterval();
       }
-    } else if (priceHandle !== null) {
+    } else if (priceHandle) {
       clearInterval(priceHandle);
     }
   }, [plugins]);

src/library/Hooks/useSize/index.tsx

@@ -2,19 +2,18 @@
 // SPDX-License-Identifier: GPL-3.0-only
 
 import throttle from 'lodash.throttle';
-import React from 'react';
+import React, { useState } from 'react';
 import { useUi } from 'contexts/UI';
 
-export const getSize = (element: any) => {
-  const width = element?.offsetWidth;
-  const height = element?.offsetHeight;
+export const getSize = (element?: HTMLElement | undefined) => {
+  const width = element?.offsetWidth || 0;
+  const height = element?.offsetHeight || 0;
   return { height, width };
 };
 
-export const useSize = (element: any) => {
+export const useSize = (element?: HTMLElement | undefined) => {
   const { containerRefs } = useUi();
-
-  const [size, setSize] = React.useState(getSize(element));
+  const [size, setSize] = useState(getSize(element));
 
   const throttleCallback = () => {
     setSize(getSize(element));