chore: Format imports for auto-ordering (#316)

src/components/banner/FormWarningBanner.tsx

@@ -1,5 +1,4 @@
 import { ComponentProps } from 'react';
-
 import { WarningBanner } from '../../components/banner/WarningBanner';
 import { cardStyles } from '../layout/Card';
 

src/components/banner/WarningBanner.tsx

@@ -1,6 +1,5 @@
 import Image from 'next/image';
 import { PropsWithChildren, ReactNode } from 'react';
-
 import WarningIcon from '../../images/icons/warning.svg';
 
 export function WarningBanner({

src/components/buttons/ConnectAwareSubmitButton.tsx

@@ -1,12 +1,9 @@
+import { ProtocolType } from '@hyperlane-xyz/utils';
 import { useFormikContext } from 'formik';
 import { useCallback } from 'react';
-
-import { ProtocolType } from '@hyperlane-xyz/utils';
-
 import { tryGetChainProtocol } from '../../features/chains/utils';
 import { useAccountForChain, useConnectFns } from '../../features/wallet/hooks/multiProtocol';
 import { useTimeout } from '../../utils/timeout';
-
 import { SolidButton } from './SolidButton';
 
 interface Props {

src/components/buttons/CopyButton.tsx

@@ -1,6 +1,5 @@
 import Image from 'next/image';
 import { useState } from 'react';
-
 import CheckmarkIcon from '../../images/icons/checkmark.svg';
 import CopyIcon from '../../images/icons/copy-stack.svg';
 import { tryClipboardSet } from '../../utils/clipboard';

src/components/errors/ErrorBoundary.tsx

@@ -1,6 +1,5 @@
 import Image from 'next/image';
 import { Component } from 'react';
-
 import { links } from '../../consts/links';
 import ErrorIcon from '../../images/icons/error-circle.svg';
 import { logger } from '../../utils/logger';

src/components/icons/ChainLogo.tsx

@@ -1,8 +1,6 @@
+import { ChainLogo as ChainLogoInner } from '@hyperlane-xyz/widgets';
 import Image from 'next/image';
 import { useMemo } from 'react';
-
-import { ChainLogo as ChainLogoInner } from '@hyperlane-xyz/widgets';
-
 import { getRegistry } from '../../context/context';
 import { tryGetChainMetadata } from '../../features/chains/utils';
 

src/components/icons/Chevron.tsx

@@ -1,5 +1,4 @@
 import { memo } from 'react';
-
 import { Color } from '../../styles/Color';
 
 interface Props {

src/components/icons/Docs.tsx

@@ -1,5 +1,4 @@
 import { memo } from 'react';
-
 import { Color } from '../../styles/Color';
 import { IconProps } from './types';
 

src/components/icons/HelpIcon.tsx

@@ -1,6 +1,5 @@
 import { memo } from 'react';
 import { toast } from 'react-toastify';
-
 import Question from '../../images/icons/question-circle.svg';
 import { IconButton } from '../buttons/IconButton';
 

src/components/icons/History.tsx

@@ -1,5 +1,4 @@
 import { memo } from 'react';
-
 import { Color } from '../../styles/Color';
 import { IconProps } from './types';
 

src/components/icons/Identicon.tsx

@@ -1,8 +1,7 @@
-import jazzicon from '@metamask/jazzicon';
-import { memo } from 'react';
-
 import { isValidAddressEvm, normalizeAddressEvm } from '@hyperlane-xyz/utils';
 import { Circle } from '@hyperlane-xyz/widgets';
+import jazzicon from '@metamask/jazzicon';
+import { memo } from 'react';
 
 type Props = {
   address?: string;

src/components/icons/TokenIcon.tsx

@@ -1,8 +1,6 @@
-import { memo } from 'react';
-
 import { IToken } from '@hyperlane-xyz/sdk';
 import { Circle } from '@hyperlane-xyz/widgets';
-
+import { memo } from 'react';
 import { getRegistry } from '../../context/context';
 import { isValidHttpsUrl, isValidRelativeUrl } from '../../utils/url';
 import { ErrorBoundary } from '../errors/ErrorBoundary';

src/components/icons/Wallet.tsx

@@ -1,5 +1,4 @@
 import { memo } from 'react';
-
 import { Color } from '../../styles/Color';
 import { IconProps } from './types';
 

src/components/icons/WalletLogo.tsx

@@ -1,5 +1,4 @@
 import Image from 'next/image';
-
 import { WalletDetails } from '../../features/wallet/hooks/types';
 import Wallet from '../../images/icons/wallet.svg';
 import WalletConnect from '../../images/logos/wallet-connect.svg';

src/components/icons/WideChevron.tsx

@@ -1,5 +1,4 @@
 import { WideChevronIcon } from '@hyperlane-xyz/widgets';
-
 import { Color } from '../../styles/Color';
 
 export function WideChevron({ className }: { className?: string }) {

src/components/layout/AppLayout.tsx

@@ -1,6 +1,5 @@
 import Head from 'next/head';
 import { PropsWithChildren } from 'react';
-
 import { APP_NAME, BACKGROUND_COLOR, BACKGROUND_IMAGE } from '../../consts/app';
 import { useStore } from '../../features/store';
 import { SideBarMenu } from '../../features/wallet/SideBarMenu';

src/components/layout/Modal.tsx

@@ -1,6 +1,5 @@
 import { Dialog, Transition } from '@headlessui/react';
 import { Fragment, PropsWithChildren } from 'react';
-
 import XCircle from '../../images/icons/x-circle.svg';
 import { IconButton } from '../buttons/IconButton';
 

src/components/nav/Footer.tsx

@@ -1,6 +1,5 @@
 import Link from 'next/link';
 import { ReactNode } from 'react';
-
 import { links } from '../../consts/links';
 import { Color } from '../../styles/Color';
 import { Discord } from '../icons/Discord';

src/components/nav/Header.tsx

@@ -1,6 +1,5 @@
 import Image from 'next/image';
 import Link from 'next/link';
-
 import { WalletControlBar } from '../../features/wallet/WalletControlBar';
 import Logo from '../../images/logos/app-logo.svg';
 import Name from '../../images/logos/app-name.svg';

src/components/tip/TipCard.tsx

@@ -1,6 +1,5 @@
 import Image from 'next/image';
 import { useState } from 'react';
-
 import { IconButton } from '../../components/buttons/IconButton';
 import { config } from '../../consts/config';
 import { links } from '../../consts/links';

src/components/toast/IgpDetailsToast.tsx

@@ -1,5 +1,4 @@
 import { toast } from 'react-toastify';
-
 import { links } from '../../consts/links';
 
 export function toastIgpDetails(igpFee: string, tokenName = 'native token') {

src/components/toast/TxSuccessToast.tsx

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
 import { toast } from 'react-toastify';
-
 import { getMultiProvider } from '../../context/context';
 
 export function toastTxSuccess(msg: string, txHash: string, chain: ChainName) {

src/components/toast/useToastError.tsx

@@ -1,8 +1,6 @@
+import { errorToString } from '@hyperlane-xyz/utils';
 import { useEffect } from 'react';
 import { toast } from 'react-toastify';
-
-import { errorToString } from '@hyperlane-xyz/utils';
-
 import { logger } from '../../utils/logger';
 
 export function useToastError(error: any, errorMsg?: string) {

src/consts/app.ts

@@ -1,5 +1,4 @@
 import { Space_Grotesk } from 'next/font/google';
-
 import { Color } from '../styles/Color';
 
 export const MAIN_FONT = Space_Grotesk({

src/consts/config.ts

@@ -1,5 +1,4 @@
 import { ChainMap } from '@hyperlane-xyz/sdk';
-
 import { ADDRESS_BLACKLIST } from './blacklist';
 
 const isDevMode = process?.env?.NODE_ENV === 'development';

src/context/WarpContext.tsx

@@ -1,8 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 import { PropsWithChildren } from 'react';
-
 import { Spinner } from '../components/animation/Spinner';
-
 import { initWarpContext } from './context';
 
 export function WarpContext({ children }: PropsWithChildren<unknown>) {

src/context/chains.ts

@@ -1,8 +1,6 @@
-import { z } from 'zod';
-
 import { GithubRegistry, chainMetadata } from '@hyperlane-xyz/registry';
 import { ChainMap, ChainMetadata, ChainMetadataSchema } from '@hyperlane-xyz/sdk';
-
+import { z } from 'zod';
 import { PROXY_DEPLOYED_URL } from '../consts/app.ts';
 import { chains as ChainsTS } from '../consts/chains.ts';
 import ChainsYaml from '../consts/chains.yaml';

src/context/context.ts

@@ -8,7 +8,6 @@ import {
   WarpCore,
 } from '@hyperlane-xyz/sdk';
 import { isNullish } from '@hyperlane-xyz/utils';
-
 import { assembleChainMetadata } from './chains';
 import { assembleWarpCoreConfig } from './warpCoreConfig';
 

src/context/warpCoreConfig.ts

@@ -1,7 +1,6 @@
 import { warpRouteConfigs } from '@hyperlane-xyz/registry';
 import { WarpCoreConfig, WarpCoreConfigSchema } from '@hyperlane-xyz/sdk';
 import { objFilter, objMerge } from '@hyperlane-xyz/utils';
-
 import { warpRouteWhitelist } from '../consts/warpRouteWhitelist.ts';
 import { warpRouteConfigs as WarpRoutesTs } from '../consts/warpRoutes.ts';
 import WarpRoutesYaml from '../consts/warpRoutes.yaml';

src/features/chains/ChainSelectField.tsx

@@ -1,11 +1,9 @@
 import { useField, useFormikContext } from 'formik';
 import Image from 'next/image';
 import { useState } from 'react';
-
 import { ChainLogo } from '../../components/icons/ChainLogo';
 import ChevronIcon from '../../images/icons/chevron-down.svg';
 import { TransferFormValues } from '../transfer/types';
-
 import { ChainSelectListModal } from './ChainSelectModal';
 import { getChainDisplayName } from './utils';
 

src/features/chains/ChainSelectModal.tsx

@@ -1,8 +1,6 @@
 import { useMemo } from 'react';
-
 import { ChainLogo } from '../../components/icons/ChainLogo';
 import { Modal } from '../../components/layout/Modal';
-
 import { getChainDisplayName } from './utils';
 
 export function ChainSelectListModal({

src/features/chains/ChainWalletWarning.tsx

@@ -1,12 +1,9 @@
-import { useMemo } from 'react';
-
 import { toTitleCase } from '@hyperlane-xyz/utils';
-
+import { useMemo } from 'react';
 import { FormWarningBanner } from '../../components/banner/FormWarningBanner';
 import { config } from '../../consts/config';
 import { logger } from '../../utils/logger';
 import { useConnectFns, useDisconnectFns, useWalletDetails } from '../wallet/hooks/multiProtocol';
-
 import { getChainDisplayName, tryGetChainProtocol } from './utils';
 
 export function ChainWalletWarning({ originChain }: { originChain: ChainName }) {

src/features/chains/utils.ts

@@ -1,6 +1,5 @@
 import { ChainNameOrId } from '@hyperlane-xyz/sdk';
 import { ProtocolType, toTitleCase } from '@hyperlane-xyz/utils';
-
 import { getMultiProvider } from '../../context/context';
 
 const ABACUS_WORKS_DEPLOYER_NAME = 'abacus works';

src/features/sanctions/hooks/useIsAccountChainalysisSanctioned.ts

@@ -1,6 +1,5 @@
 import { isAddress } from 'viem';
 import { useReadContract } from 'wagmi';
-
 import { useEvmAccount } from '../../wallet/hooks/evm';
 
 // https://go.chainalysis.com/chainalysis-oracle-docs.html

src/features/sanctions/hooks/useIsAccountOfacSanctioned.ts

@@ -1,7 +1,5 @@
-import { useQuery } from '@tanstack/react-query';
-
 import { eqAddress } from '@hyperlane-xyz/utils';
-
+import { useQuery } from '@tanstack/react-query';
 import { useEvmAccount } from '../../wallet/hooks/evm';
 
 const OFAC_SANCTIONED_ADDRESSES_ENDPOINT =

src/features/store.ts

@@ -1,6 +1,5 @@
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
-
 import { FinalTransferStatuses, TransferContext, TransferStatus } from './transfer/types';
 
 // Increment this when persist state has breaking changes

src/features/tokens/SelectOrInputTokenIds.tsx

@@ -1,8 +1,6 @@
 import { useFormikContext } from 'formik';
-
 import { TextField } from '../../components/input/TextField';
 import { TransferFormValues } from '../transfer/types';
-
 import { SelectTokenIdField } from './SelectTokenIdField';
 
 // import { useContractSupportsTokenByOwner, useIsSenderNftOwner } from './balances';

src/features/tokens/SelectTokenIdField.tsx

@@ -1,7 +1,6 @@
 import { useField } from 'formik';
 import Image from 'next/image';
 import { useState } from 'react';
-
 import { Spinner } from '../../components/animation/Spinner';
 import { Modal } from '../../components/layout/Modal';
 import ChevronIcon from '../../images/icons/chevron-down.svg';

src/features/tokens/TokenListModal.tsx

@@ -1,8 +1,6 @@
+import { IToken } from '@hyperlane-xyz/sdk';
 import Image from 'next/image';
 import { useMemo, useState } from 'react';
-
-import { IToken } from '@hyperlane-xyz/sdk';
-
 import { TokenIcon } from '../../components/icons/TokenIcon';
 import { TextInput } from '../../components/input/TextField';
 import { Modal } from '../../components/layout/Modal';

src/features/tokens/TokenSelectField.tsx

@@ -1,14 +1,11 @@
+import { IToken } from '@hyperlane-xyz/sdk';
 import { useField, useFormikContext } from 'formik';
 import Image from 'next/image';
 import { useEffect, useState } from 'react';
-
-import { IToken } from '@hyperlane-xyz/sdk';
-
 import { TokenIcon } from '../../components/icons/TokenIcon';
 import { getIndexForToken, getTokenByIndex, getWarpCore } from '../../context/context';
 import ChevronIcon from '../../images/icons/chevron-down.svg';
 import { TransferFormValues } from '../transfer/types';
-
 import { TokenListModal } from './TokenListModal';
 
 type Props = {

src/features/tokens/approval.ts

@@ -1,7 +1,5 @@
-import { useQuery } from '@tanstack/react-query';
-
 import { IToken } from '@hyperlane-xyz/sdk';
-
+import { useQuery } from '@tanstack/react-query';
 import { useToastError } from '../../components/toast/useToastError';
 import { getWarpCore } from '../../context/context';
 import { useAccountAddressForChain } from '../wallet/hooks/multiProtocol';

src/features/tokens/balances.ts

@@ -1,8 +1,6 @@
-import { useQuery } from '@tanstack/react-query';
-
 import { IToken } from '@hyperlane-xyz/sdk';
 import { isValidAddress } from '@hyperlane-xyz/utils';
-
+import { useQuery } from '@tanstack/react-query';
 import { useToastError } from '../../components/toast/useToastError';
 import { getMultiProvider, getTokenByIndex } from '../../context/context';
 import { TransferFormValues } from '../transfer/types';

src/features/transfer/TransferTokenCard.tsx

@@ -1,5 +1,4 @@
 import { Card } from '../../components/layout/Card';
-
 import { TransferTokenForm } from './TransferTokenForm';
 
 export function TransferTokenCard() {

src/features/transfer/TransferTokenForm.tsx

@@ -1,11 +1,9 @@
+import { TokenAmount } from '@hyperlane-xyz/sdk';
+import { ProtocolType, errorToString, isNullish, toWei } from '@hyperlane-xyz/utils';
 import BigNumber from 'bignumber.js';
 import { Form, Formik, useFormikContext } from 'formik';
 import { useMemo, useState } from 'react';
 import { toast } from 'react-toastify';
-
-import { TokenAmount } from '@hyperlane-xyz/sdk';
-import { ProtocolType, errorToString, isNullish, toWei } from '@hyperlane-xyz/utils';
-
 import { SmallSpinner } from '../../components/animation/SmallSpinner';
 import { ConnectAwareSubmitButton } from '../../components/buttons/ConnectAwareSubmitButton';
 import { IconButton } from '../../components/buttons/IconButton';
@@ -31,7 +29,6 @@ import {
   useAccounts,
 } from '../wallet/hooks/multiProtocol';
 import { AccountInfo } from '../wallet/hooks/types';
-
 import { useFetchMaxAmount } from './maxAmount';
 import { TransferFormValues } from './types';
 import { useRecipientBalanceWatcher } from './useBalanceWatcher';

src/features/transfer/TransfersDetailsModal.tsx

@@ -1,9 +1,7 @@
-import Image from 'next/image';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-
 import { ProtocolType } from '@hyperlane-xyz/utils';
 import { MessageStatus, MessageTimeline, useMessageTimeline } from '@hyperlane-xyz/widgets';
-
+import Image from 'next/image';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Spinner } from '../../components/animation/Spinner';
 import { CopyButton } from '../../components/buttons/CopyButton';
 import { ChainLogo } from '../../components/icons/ChainLogo';
@@ -24,7 +22,6 @@ import {
 } from '../../utils/transfer';
 import { getChainDisplayName, hasPermissionlessChain } from '../chains/utils';
 import { useAccountForChain, useWalletDetails } from '../wallet/hooks/multiProtocol';
-
 import { TransferContext, TransferStatus } from './types';
 
 export function TransfersDetailsModal({