Update types

src/components/Flex.tsx

@@ -2,14 +2,14 @@ import styled from "@emotion/styled";
 
 import { media } from "@themes/breakpoints";
 
-export interface IFlexProps {
+export interface FlexProps {
   justifyContent?: "start" | "flex-end" | "space-around" | "space-between" | "center";
   alignItems?: "start" | "end" | "center" | "inherit" | "unset" | "flex-end" | "flex-start" | "baseline";
   crossAxisSize?: "min" | "max";
   mainAxisSize?: "fit-content" | "stretch";
 }
 
-export const Row = styled.div<IFlexProps>`
+export const Row = styled.div<FlexProps>`
   display: flex;
   flex-direction: row;
   justify-content: ${({ justifyContent }) => justifyContent ?? "start"};
@@ -18,7 +18,7 @@ export const Row = styled.div<IFlexProps>`
   width: ${({ mainAxisSize }) => (mainAxisSize === "fit-content" ? "fit-content" : "100%")};
 `;
 
-export const Column = styled.div<IFlexProps>`
+export const Column = styled.div<FlexProps>`
   display: flex;
   flex-direction: column;
   justify-content: ${({ justifyContent }) => justifyContent ?? "start"};

src/components/Header/MobileMenu.tsx

@@ -12,14 +12,14 @@ import { SmartFlex } from "../SmartFlex";
 import { MenuNav } from "./MenuNav";
 import WalletAddressButton from "./WalletAddressButton";
 
-interface IProps {
+interface MobileMenuProps {
   isOpen: boolean;
   onAccountClick: () => void;
   onWalletConnect: () => void;
   onClose: () => void;
 }
 
-const MobileMenu: React.FC<IProps> = observer(({ isOpen, onAccountClick, onWalletConnect, onClose }) => {
+const MobileMenu: React.FC<MobileMenuProps> = observer(({ isOpen, onAccountClick, onWalletConnect, onClose }) => {
   const { accountStore } = useStores();
 
   const handleAccountClick = () => {

src/components/Input.tsx

@@ -1,7 +1,7 @@
 import React, { ChangeEvent } from "react";
 import styled from "@emotion/styled";
 
-interface IProps
+interface InputProps
   extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "onChange"> {
   value?: string;
   onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
@@ -28,7 +28,7 @@ const Root = styled.div`
   }
 `;
 
-const Input: React.FC<IProps> = ({ value, onChange, placeholder, disabled, ...rest }) => {
+const Input: React.FC<InputProps> = ({ value, onChange, placeholder, disabled, ...rest }) => {
   return (
     <>
       <Root {...rest}>

src/components/MenuOverlay.tsx

@@ -3,15 +3,15 @@ import styled from "@emotion/styled";
 
 import { SmartFlex } from "./SmartFlex";
 
-interface IProps {
+interface MenuOverlayProps {
   isOpen: boolean;
   top?: number;
   offsetTop?: number;
   zIndex?: number;
   children?: React.ReactNode;
 }
 
-const MenuOverlay: React.FC<IProps> = ({ isOpen, children, top = 0, offsetTop = 0, zIndex = 200 }) => {
+const MenuOverlay: React.FC<MenuOverlayProps> = ({ isOpen, children, top = 0, offsetTop = 0, zIndex = 200 }) => {
   const fullOffset = top + offsetTop;
 
   useLayoutEffect(() => {

src/components/SearchInput.tsx

@@ -8,14 +8,14 @@ import search from "@assets/icons/search.svg";
 
 import Input from "./Input";
 
-interface IProps {
+interface WrapProps {
   value: string;
   onChange: (v: string) => void;
   placeholder?: string;
   variant?: "default" | "transparent";
 }
 
-const Wrap = styled.div<{ variant: IProps["variant"] }>`
+const Wrap = styled.div<{ variant: WrapProps["variant"] }>`
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -58,7 +58,7 @@ const Wrap = styled.div<{ variant: IProps["variant"] }>`
   }}
 `;
 
-const SearchInput: React.FC<IProps> = ({ value, onChange, placeholder, variant = "default" }) => {
+const SearchInput: React.FC<WrapProps> = ({ value, onChange, placeholder, variant = "default" }) => {
   return (
     <Wrap variant={variant}>
       <img alt="search" src={search} width={24} />

src/components/Select.tsx

@@ -10,24 +10,24 @@ import { Column } from "./Flex";
 import Text, { TEXT_TYPES_MAP } from "./Text";
 import Tooltip from "./Tooltip";
 
-interface IOption<T = string> {
+interface SelectOption<T = string> {
   key: T;
   title: string | JSX.Element;
   value?: string | number;
   disabled?: boolean;
 }
 
-interface IProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
-  options: IOption<T>[];
+interface SelectProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
+  options: SelectOption<T>[];
   selected?: T;
-  onSelect: (option: IOption<T>, index: number) => void;
+  onSelect: (option: SelectOption<T>, index: number) => void;
   label?: string;
 }
 
-const Select = <T,>({ options, selected, onSelect, label, ...rest }: IProps<T>) => {
+const Select = <T,>({ options, selected, onSelect, label, ...rest }: SelectProps<T>) => {
   const [isVisible, setIsVisible] = useState(false);
   const selectedOption = options.find(({ key }) => selected === key);
-  const handleSelectClick = (v: IOption<T>, index: number) => {
+  const handleSelectClick = (v: SelectOption<T>, index: number) => {
     onSelect(v, index);
     setIsVisible(false);
   };

src/components/SelectAssets/AssetBlock.tsx

@@ -13,7 +13,7 @@ import BN from "@utils/BN";
 
 import { AssetBlockData } from "./SelectAssetsInput";
 
-export interface IAssetBlock {
+export interface AssetBlockProps {
   options: {
     showBalance?: "balance" | "walletBalance" | "contractBalance";
     showNullBalance?: boolean;
@@ -24,7 +24,7 @@ export interface IAssetBlock {
   type?: "rounded" | "square";
 }
 
-const AssetBlock: React.FC<IAssetBlock> = observer(
+const AssetBlock: React.FC<AssetBlockProps> = observer(
   ({
     styleToken,
     options: { showBalance = "balance", showNullBalance = true, isShowBalance = true },

src/components/SelectAssets/SelectAssetsInput.tsx

@@ -3,7 +3,7 @@ import { useTheme } from "@emotion/react";
 import styled from "@emotion/styled";
 
 import Button from "@components/Button";
-import { IAssetBlock } from "@components/SelectAssets/AssetBlock";
+import { AssetBlockProps } from "@components/SelectAssets/AssetBlock";
 import { SmartFlex } from "@components/SmartFlex";
 import { BigNumberInput } from "@components/TokenInput/BigNumberInput";
 
@@ -32,7 +32,7 @@ interface IProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
   onChangeValue: (value: BN) => void;
   label?: string;
   dataAssets: AssetBlockData[];
-  showBalance: IAssetBlock["options"]["showBalance"];
+  showBalance: AssetBlockProps["options"]["showBalance"];
   amount: BN;
   decimals?: number;
 }

src/components/SizedBox.tsx

@@ -1,9 +1,9 @@
 import React, { HTMLAttributes } from "react";
-interface IProps extends HTMLAttributes<HTMLDivElement> {
+interface SizedBoxProps extends HTMLAttributes<HTMLDivElement> {
   width?: number;
   height?: number;
 }
-const SizedBox: React.FunctionComponent<IProps> = ({ width, height, style, ...rest }) => (
+const SizedBox: React.FunctionComponent<SizedBoxProps> = ({ width, height, style, ...rest }) => (
   <div style={{ width, height, display: "flex", flex: "0 0 auto", ...style }} {...rest} />
 );
 

src/components/Slider.tsx

@@ -1,20 +1,20 @@
 import React from "react";
 import styled from "@emotion/styled";
-import RCSlider, { SliderProps } from "rc-slider";
+import RCSlider, { SliderProps as RcSliderProps } from "rc-slider";
 
 import { Row } from "@components/Flex";
 import { TEXT_TYPES_MAP } from "@components/Text";
 import { media } from "@themes/breakpoints";
 
 import "rc-slider/assets/index.css";
 
-interface IProps {
+interface SliderProps {
   percent?: number;
   symbol?: string;
   fixSize?: number;
 }
 
-const Slider: React.FC<SliderProps & IProps> = (props) => (
+const Slider: React.FC<SliderProps & RcSliderProps> = (props) => (
   <Root>
     <DotsContainer>
       {Array.from({ length: 10 }, (_, i) => (
@@ -69,7 +69,7 @@ const Root = styled.div`
   }
 `;
 
-const StyledSlider = styled(RCSlider)<IProps>`
+const StyledSlider = styled(RCSlider)<SliderProps>`
   padding: 0;
 
   .rc-slider-rail {

src/components/Tab.tsx

@@ -2,12 +2,12 @@ import styled from "@emotion/styled";
 
 import Text from "@components/Text";
 
-interface IProps {
+interface TabProps {
   active?: boolean;
   disabled?: boolean;
 }
 
-const Tab = styled(Text)<IProps>`
+const Tab = styled(Text)<TabProps>`
   display: flex;
   height: 34px;
   align-items: center;

src/components/Table.tsx

@@ -8,15 +8,15 @@ import Text, { TEXT_TYPES_MAP } from "@components/Text";
 import { SmartFlex } from "./SmartFlex";
 import Tooltip from "./Tooltip";
 
-interface IProps {
+interface TableProps {
   columns: ColumnDef<any, any>[];
   data: any[];
   fitContent?: boolean;
   withHover?: boolean;
   loading?: boolean;
 }
 
-const Table: React.FC<IProps> = observer(({ columns, data, fitContent, withHover, loading, ...rest }) => {
+const Table: React.FC<TableProps> = observer(({ columns, data, fitContent, withHover, loading, ...rest }) => {
   const table = useReactTable({
     columns,
     data,

src/components/Text.tsx

@@ -156,7 +156,7 @@ export const TEXT_TYPES_MAP = {
 
 type TEXT_TYPES = keyof typeof TEXT_TYPES_MAP;
 
-interface IProps {
+interface TextProps {
   type?: TEXT_TYPES;
   uppercase?: boolean;
   primary?: boolean;
@@ -169,7 +169,7 @@ interface IProps {
   attention?: boolean;
 }
 
-const Text = styled.div<IProps>`
+const Text = styled.div<TextProps>`
   white-space: ${({ nowrap }) => (nowrap ? "nowrap" : "normal")};
   ${({ attention, primary, secondary, greenLight, disabled, theme, color }) =>
     (() => {

src/components/TokenInput/AmountInput.tsx

@@ -1,15 +1,15 @@
 import React from "react";
 import styled from "@emotion/styled";
 
-type TProps = React.InputHTMLAttributes<HTMLInputElement> & {
+type AmountInputProps = {
   small?: boolean;
   onWheel?: React.WheelEventHandler<HTMLInputElement>;
   onBlur?: React.FocusEventHandler<HTMLInputElement>;
   onFocus?: React.FocusEventHandler<HTMLInputElement>;
   inputRef?: React.RefObject<HTMLInputElement>;
-};
+} & React.InputHTMLAttributes<HTMLInputElement>;
 
-const AmountInput: React.FC<TProps> = ({ onWheel, inputRef, ...props }) => (
+const AmountInput: React.FC<AmountInputProps> = ({ onWheel, inputRef, ...props }) => (
   <Root
     {...props}
     ref={inputRef}

src/components/TokenInput/TokenInput.tsx

@@ -13,7 +13,7 @@ import { FuelNetwork } from "@blockchain";
 import AmountInput from "./AmountInput";
 import { BigNumberInput } from "./BigNumberInput";
 
-interface IProps {
+interface TokenInputProps {
   assetId?: string;
   decimals: number;
   displayDecimals?: number;
@@ -32,7 +32,7 @@ interface IProps {
   isShowMax?: boolean;
 }
 
-const TokenInput: React.FC<IProps> = observer((props) => {
+const TokenInput: React.FC<TokenInputProps> = observer((props) => {
   const bcNetwork = FuelNetwork.getInstance();
 
   const [focused, setFocused] = useState(false);

src/components/Tooltip.tsx

@@ -4,7 +4,7 @@ import { usePopperTooltip } from "react-popper-tooltip";
 import { Config } from "react-popper-tooltip/dist/types";
 import styled from "@emotion/styled";
 
-interface IProps {
+interface TooltipProps {
   content: string | JSX.Element;
   config?: Config;
   fixed?: boolean;
@@ -13,7 +13,7 @@ interface IProps {
   children: React.ReactNode;
 }
 
-const Tooltip: React.FC<IProps> = ({ containerStyles, rootStyles, children, content, config }) => {
+const Tooltip: React.FC<TooltipProps> = ({ containerStyles, rootStyles, children, content, config }) => {
   const { getTooltipProps, setTooltipRef, setTriggerRef, triggerRef, visible } = usePopperTooltip({
     ...config,
   });

src/hooks/useMedia.ts

@@ -2,14 +2,14 @@ import { breakpoints, BreakPointTypes } from "@themes/breakpoints";
 
 import { useWindowSize } from "./useWindowSize";
 
-type TMediaBreakpoints = Record<BreakPointTypes, boolean>;
-export interface IMedia extends TMediaBreakpoints {
+type MediaBreakpoints = Record<BreakPointTypes, boolean>;
+export interface Media extends MediaBreakpoints {
   currentMedia: BreakPointTypes;
 }
 
-export const useMedia = (): IMedia => {
+export const useMedia = (): Media => {
   const { width } = useWindowSize();
-  const media: TMediaBreakpoints = {
+  const media: MediaBreakpoints = {
     mobile: width <= breakpoints.mobile,
     desktop: width > breakpoints.mobile,
   };

src/screens/Assets/ActionModal.tsx

@@ -3,7 +3,7 @@ import { useTheme } from "@emotion/react";
 import styled from "@emotion/styled";
 import { motion } from "framer-motion";
 
-import { IAssetBlock } from "@components/SelectAssets/AssetBlock";
+import { AssetBlockProps } from "@components/SelectAssets/AssetBlock";
 import { SmartFlex } from "@components/SmartFlex";
 import Text from "@components/Text";
 import { media } from "@themes/breakpoints";
@@ -21,7 +21,7 @@ import { getExplorerLinkByHash } from "@utils/getExplorerLink";
 export type ActionModal = {
   hash: string;
   transactionInfo: {
-    token: IAssetBlock["token"];
+    token: AssetBlockProps["token"];
     type: TypeTransaction;
     amount: string;
   };

src/screens/Assets/BalanceBlock/BalanceBlock.tsx

@@ -11,14 +11,14 @@ import { useStores } from "@stores";
 import { DEFAULT_DECIMALS } from "@constants";
 import BN from "@utils/BN";
 
-interface IBalanceBlock {
+interface BalanceBlockProps {
   icon: React.ReactElement;
   nameWallet: string;
   token: AssetBlockData;
   showBalance: "balance" | "walletBalance" | "contractBalance";
 }
 
-export const BalanceBlock: React.FC<IBalanceBlock> = ({ icon, nameWallet, token, showBalance }) => {
+export const BalanceBlock: React.FC<BalanceBlockProps> = ({ icon, nameWallet, token, showBalance }) => {
   const { oracleStore } = useStores();
   const theme = useTheme();
   const price = BN.formatUnits(oracleStore.getTokenIndexPrice(token.asset.priceFeed), DEFAULT_DECIMALS);

src/screens/Assets/DepositAssets/DepositAssets.tsx

@@ -4,7 +4,7 @@ import styled from "@emotion/styled";
 import { observer } from "mobx-react";
 
 import Button from "@components/Button";
-import { IAssetBlock } from "@components/SelectAssets/AssetBlock";
+import { AssetBlockProps } from "@components/SelectAssets/AssetBlock";
 import SelectAssetsInput from "@components/SelectAssets/SelectAssetsInput";
 import { SmartFlex } from "@components/SmartFlex";
 import Text from "@components/Text";
@@ -29,7 +29,7 @@ interface DepositAssetsProps {
 const DepositAssets: React.FC<DepositAssetsProps> = observer(({ setStep }) => {
   const { quickAssetsStore, balanceStore } = useStores();
 
-  const [currentAsset, setCurrentAssets] = useState<IAssetBlock["token"]>();
+  const [currentAsset, setCurrentAssets] = useState<AssetBlockProps["token"]>();
   const [amount, setAmount] = useState(BN.ZERO);
   const [isLoading, setIsLoading] = useState(false);