Refactor Code Smells

app/basicComponents/AutocompleteDropdown.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
+// import styled from 'styled-components';
 import styled from 'styled-components';
 import { getAbbreviatedAddress } from '../infra/utils';
 import { chevronBottomBlack, chevronBottomWhite } from '../assets/images';
@@ -68,7 +69,7 @@ const InputField = styled.div<{
   }) =>
     `
     color: ${isDarkSkin ? light.states.normal.color : dark.states.normal.color};
-    
+
     &:hover {
         color: ${
           isDarkSkin ? light.states.normal.color : dark.states.normal.color
@@ -157,7 +158,7 @@ const ActualInput = styled.input<{
   }) =>
     `
     color: ${isDarkSkin ? light.states.normal.color : dark.states.normal.color};
-    
+
     &:hover {
         color: ${
           isDarkSkin ? light.states.normal.color : dark.states.normal.color
@@ -214,7 +215,7 @@ const AutocompleteList = styled.div<{
               isDarkSkin
                 ? light.states.hover.backgroundColor
                 : dark.states.hover.backgroundColor
-            }; 
+            };
             color: ${
               isDarkSkin ? light.states.hover.color : dark.states.hover.color
             };
@@ -293,11 +294,13 @@ type Props = {
 
 export type AutocompleteDropdownProps = Props;
 
+type TimeoutOrNull = NodeJS.Timeout | null;
+
 const AutocompleteDropdown = (props: Props) => {
   const { value, autofocus, autocomplete = true } = props;
-  let inputBlurTimer: any;
+  let inputBlurTimer: TimeoutOrNull;
   const [isOpen, setIsOpen] = useState(false);
-  const [list, setList] = useState<Array<any>>([]);
+  const [list, setList] = useState<string[]>([]);
   const [isFocus, setIsFocus] = useState(-1);
   const [editField, setEditField] = useState(value || '');
   const [move, setMove] = useState<string | null>(null);
@@ -317,7 +320,7 @@ const AutocompleteDropdown = (props: Props) => {
     // @ts-ignore
     const { value } = inputField.current || {};
 
-    let list: any = [];
+    let list: typeof data = []; // typeof data = []
 
     if (value && value.trim() && autocomplete) {
       list = data.filter(
@@ -363,7 +366,7 @@ const AutocompleteDropdown = (props: Props) => {
     setIsOpen(!isOpen);
   };
 
-  const pressEnterKey = (e: KeyboardEvent) => {
+  const pressEnterKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
     const { onChange, getItemValue, onEnter } = props;
     const data = list[isFocus];
 
@@ -374,11 +377,13 @@ const AutocompleteDropdown = (props: Props) => {
     setList([]);
     setIsOpen(false);
 
+    const genericEvent: React.KeyboardEvent = e as React.KeyboardEvent;
+
     // @ts-ignore
-    onEnter(e.target.value);
+    onEnter(genericEvent);
   };
 
-  const handleInputKeyUp = (e: any) => {
+  const handleInputKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
     const { keyCode } = e;
 
     e.stopPropagation();
@@ -437,7 +442,12 @@ const AutocompleteDropdown = (props: Props) => {
     }
   };
 
-  const renderItem = (item: any) => (
+  interface ItemType {
+    nickname: string;
+    address: string;
+  }
+
+  const renderItem = (item: ItemType) => (
     <div role="button" tabIndex={-1}>
       {item.nickname} - {getAbbreviatedAddress(item.address)}
     </div>
@@ -461,7 +471,7 @@ const AutocompleteDropdown = (props: Props) => {
     return menus;
   };
 
-  const handleInputChange = (e: any) => {
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { target } = e;
     const { value } = target;
     const { onChange } = props;

app/basicComponents/CopyButton.tsx

@@ -31,14 +31,16 @@ const CopyIcon = styled.img.attrs<{ secondary?: boolean }>(
   }
 `;
 
+type TypeOrNumber = NodeJS.Timeout | number;
+
 const CopyButton = ({
   secondary,
   children,
   hideCopyIcon,
   value,
   onClick,
 }: Props) => {
-  let t: NodeJS.Timeout | number = 0;
+  let t: TypeOrNumber = 0;
   const handleCopy = async (e: React.MouseEvent) => {
     e.stopPropagation();
 

app/basicComponents/DropDown.tsx

@@ -109,7 +109,7 @@ const HeaderWrapper = styled.div<{
     }
 
     color: ${isDarkMode ? dark.states.normal.color : light.states.normal.color};
-    
+
     &:hover {
         color: ${
           isDarkMode ? dark.states.hover.color : light.states.hover.color
@@ -157,7 +157,7 @@ const DropdownRow = styled.div<{
               isDarkMode
                 ? dark.states.hover.backgroundColor
                 : light.states.hover.backgroundColor
-            }; 
+            };
             color: ${
               isDarkMode ? dark.states.hover.color : light.states.hover.color
             };
@@ -241,17 +241,17 @@ const ItemsWrapper = styled.div<{
       },
     },
   }) => `
-  
+
   > div:first-child {
     border-top: 1px solid ${isDarkMode ? dark.borderColor : light.borderColor};
   }
-  
+
   > div:last-child  {
       border-bottom: none;
-  }  
-    
+  }
+
   > div {
-    
+
     border-bottom: 1px solid  ${
       isDarkMode ? dark.borderColor : light.borderColor
     };
@@ -352,12 +352,14 @@ const DropDownItem: React.FC<DropDownItemProps> = ({
   </StyledDropDownItem>
 );
 
+type NumberOrString = number | string;
+
 type Props<T extends ADataItem> = {
   onClick: ({ index }: { index: number }) => void | Promise<number>;
   onClose?: () => void;
   data: Partial<T>[];
   selectedItemIndex: number;
-  rowHeight?: number | string;
+  rowHeight?: NumberOrString;
   isOpened?: boolean;
   isDisabled?: boolean;
   bold?: boolean;

app/basicComponents/Input.tsx

@@ -70,8 +70,8 @@ const ActualInput = styled.input<{
   }) =>
     !isDisabled &&
     `&:hover, &:focus, &:active {
-            background-color: ${states.focus.backgroundColor}; 
-            color: ${states.focus.color}; 
+            background-color: ${states.focus.backgroundColor};
+            color: ${states.focus.color};
      } `}
   font-size: 14px;
   line-height: 16px;
@@ -155,22 +155,22 @@ const Input = ({
     };
   });
 
-  const handleEnterPress = (event: any) => {
+  const handleEnterPress = (event: React.KeyboardEvent) => {
     if (event.key === 'Enter' && !!onEnterPress) {
       onEnterPress();
       onPaste();
     }
   };
 
-  const handleOnBlur = ({ target }: { target: any }) => {
+  const handleOnBlur = ({ target }: { target: HTMLInputElement }) => {
     setIsFocused(false);
     const { value } = target;
 
     onBlur?.({ value });
   };
 
-  const handleChange = ({ target }: { target: any }) => {
-    const { value } = target;
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { value } = event.currentTarget;
     onChange?.({ value });
 
     if (onChangeDebounced) {

app/components/common/Feedback.tsx

@@ -277,7 +277,7 @@ const FeedbackButton = () => {
 
     const formData = {
       event_id: captureReactMessage(`
-           User has submitted an issue and asked to check it. Discord handle: ${userData.name} and email: ${userData.email}, 
+           User has submitted an issue and asked to check it. Discord handle: ${userData.name} and email: ${userData.email},
          `),
       ...userData,
     };

app/components/common/Version.tsx

@@ -253,10 +253,10 @@ const CheckForUpdates = () => {
   const network = useSelector(getNetworkInfo);
   enum CheckState {
     Idle = 0,
-    Checking,
-    NoUpdates,
-    HasUpdate,
-    ManualUpdate,
+    Checking = 1,
+    NoUpdates = 2,
+    HasUpdate = 3,
+    ManualUpdate = 4,
   }
   const [curState, setCurState] = useState(CheckState.Idle);
   const [manualUpdateSmappVersion, setManualUpdateSmappVersion] = useState('');

app/components/settings/SignMessage.tsx

@@ -49,7 +49,7 @@ type Props = {
 };
 
 const SignMessage = ({ index, close }: Props) => {
-  let copiedTimeout: any = null;
+  let copiedTimeout: NodeJS.Timeout;
   const [message, setMessage] = useState('');
   const [isCopied, setIsCopied] = useState(false);
   const [lastResult, setLastResult] = useState('');

app/components/transactions/TransactionsMeta.tsx

@@ -1,4 +1,10 @@
+import { RewardView, TxView } from 'app/redux/wallet/selectors';
+import { TIME_SPANS } from 'app/screens/transactions/Transactions';
 import React from 'react';
+import { DAY } from 'shared/constants';
+import { SingleSigMethods } from 'shared/templateConsts';
+import { Bech32Address, TxState } from 'shared/types';
+import { isReward, isTx } from 'shared/types/guards';
 import styled from 'styled-components';
 import { formatSmidge } from '../../infra/utils';
 import { smColors } from '../../vars';
@@ -69,25 +75,84 @@ const Progress = styled.div<{ total: number; coins: number }>`
 
 type Props = {
   filterName: string;
-  mined: number;
-  sent: number;
-  received: number;
-  totalMined: number;
-  totalSent: number;
-  totalReceived: number;
   nonce: number;
+  transactions: (TxView | RewardView)[];
+  address: Bech32Address;
+  selectedTimeSpan: number;
 };
 
 const TransactionsMeta = ({
-  mined,
-  sent,
-  received,
-  totalMined,
-  totalSent,
-  totalReceived,
   filterName,
   nonce,
+  transactions,
+  address,
+  selectedTimeSpan,
 }: Props) => {
+  const getNumOfCoinsFromTransactions = (
+    address: Bech32Address,
+    transactions: (TxView | RewardView)[]
+  ) => {
+    const coins = { mined: 0, sent: 0, received: 0 };
+    return transactions.reduce((coins, txOrReward: TxView | RewardView) => {
+      if (isTx(txOrReward)) {
+        const { status, principal: sender, method, payload } = txOrReward;
+        const amount =
+          method === SingleSigMethods.Spend
+            ? parseInt(payload?.Arguments?.Amount || 0, 10)
+            : 0;
+        if (
+          status !== TxState.REJECTED &&
+          status !== TxState.INSUFFICIENT_FUNDS &&
+          status !== TxState.CONFLICTING &&
+          status !== TxState.FAILURE
+        ) {
+          return sender === address
+            ? { ...coins, sent: coins.sent + amount }
+            : { ...coins, received: coins.received + amount };
+        }
+      } else if (isReward(txOrReward)) {
+        const { amount } = txOrReward;
+        return { ...coins, mined: coins.mined + amount };
+      }
+      return coins;
+    }, coins);
+  };
+
+  const filterLastDays = (txs: (TxView | RewardView)[], days = 1) => {
+    const startDate = Date.now() - days * DAY;
+    return txs.filter(
+      (tx) => (tx.timestamp && tx.timestamp >= startDate) || !tx.timestamp
+    );
+  };
+  const filteredTransactions = filterLastDays(
+    transactions,
+    TIME_SPANS[selectedTimeSpan].days
+  );
+  const getCoinStatistics = (filteredTransactions: (TxView | RewardView)[]) => {
+    const coins = getNumOfCoinsFromTransactions(address, filteredTransactions);
+    const totalCoins = getNumOfCoinsFromTransactions(
+      address,
+      transactions || []
+    );
+    return {
+      ...coins,
+      totalMined: totalCoins.mined,
+      totalSent: totalCoins.sent,
+      totalReceived: totalCoins.received,
+    };
+  };
+
+  const coinStats = getCoinStatistics(filteredTransactions);
+
+  const {
+    mined,
+    sent,
+    received,
+    totalMined,
+    totalSent,
+    totalReceived,
+  } = coinStats;
+
   const totalFilteredCoins = mined + sent + received;
   const coinsMeta = [
     { title: 'SMESHED', coins: mined },

app/screens/auth/SwitchNetwork.tsx

@@ -108,7 +108,9 @@ const SwitchNetwork = ({ history, location }: AuthRouterParams) => {
     return [{ label: 'NO NETWORKS AVAILABLE', isDisabled: true }];
   };
 
-  const goNext = (genesisID: string | undefined) => {
+  type GoNextType = string | undefined;
+
+  const goNext = (genesisID: GoNextType) => {
     if (creatingWallet) {
       if (isWalletOnly && genesisID?.length) {
         return history.push(AuthPath.ConnectToAPI, {

app/screens/backup/FileBackup.tsx

@@ -27,14 +27,15 @@ const BottomRow = styled(MiddleSectionRow)`
   justify-content: space-between;
 `;
 
-const FileBackup = ({
-  history,
-  location,
-}: RouteComponentProps<
-  Record<string, any>,
-  StaticContext,
-  { filePath: string }
->) => {
+interface FileBackupProps {
+  filePath: string;
+}
+
+const FileBackup: React.FC<
+  RouteComponentProps<Record<string, never>, StaticContext, FileBackupProps>
+> = (props) => {
+  const { history, location } = props;
+
   const showBackupFile = () => {
     eventsService.showFileInFolder({ filePath: location.state.filePath });
   };