fix: decouple choose crypto asset components and add a new lint rule

.eslintrc.js

@@ -81,6 +81,7 @@ module.exports = {
     '@typescript-eslint/no-unnecessary-condition': 'off',
     '@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
     '@typescript-eslint/array-type': ['error'],
+    '@typescript-eslint/method-signature-style': ['error', 'method'],
     'no-warning-comments': [0],
 
     'react-hooks/rules-of-hooks': 'error',

src/app/common/hooks/use-copy-to-clipboard.ts

@@ -2,7 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 
 interface UiClipboard {
   value: string;
-  onCopy: () => void;
+  onCopy(): void;
   hasCopied: boolean;
 }
 

src/app/common/theme-provider.tsx

@@ -24,7 +24,7 @@ export const getThemeLabel = (theme: UserSelectedTheme) => {
 const ThemeContext = createContext<{
   theme: ComputedTheme;
   userSelectedTheme: UserSelectedTheme;
-  setUserSelectedTheme: (theme: UserSelectedTheme) => void;
+  setUserSelectedTheme(theme: UserSelectedTheme): void;
 }>({
   // These values are not used, but are set to satisfy the context's value type.
   theme: 'light',

src/app/common/validation/forms/fee-validators.ts

@@ -14,8 +14,8 @@ import { btcToSat, moneyToBaseUnit, stxToMicroStx } from '../../money/unit-conve
 
 interface FeeValidatorFactoryArgs {
   availableBalance?: Money;
-  unitConverter: (unit: string | number | BigNumber) => BigNumber;
-  validator: (errorMsg: string) => NumberSchema<number | undefined, AnyObject>;
+  unitConverter(unit: string | number | BigNumber): BigNumber;
+  validator(errorMsg: string): NumberSchema<number | undefined, AnyObject>;
 }
 function feeValidatorFactory({
   availableBalance,

src/app/components/bitcoin-contract-entry-point/bitcoin-contract-entry-point-layout.tsx

@@ -16,7 +16,7 @@ interface BitcoinContractEntryPointLayoutProps {
   usdBalance?: string;
   isLoading?: boolean;
   cursor?: 'pointer' | 'default';
-  onClick: () => void;
+  onClick(): void;
 }
 export function BitcoinContractEntryPointLayout(props: BitcoinContractEntryPointLayoutProps) {
   const { balance, caption, icon, usdBalance, isLoading, cursor, onClick } = props;

src/app/components/bitcoin-fees-list/components/fees-list-item.tsx

@@ -8,7 +8,7 @@ interface FeesListItemProps {
   feeRate: number;
   feeType: string;
   isSelected?: boolean;
-  onClick: () => void;
+  onClick(): void;
 }
 export function FeesListItem({
   arrivesIn,

src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.tsx

@@ -7,7 +7,7 @@ import { Brc20TokenAssetItemLayout } from './brc20-token-asset-item.layout';
 interface Brc20TokenAssetItemProps {
   token: Brc20Token;
   isPressable?: boolean;
-  onClick?: () => void;
+  onClick?(): void;
 }
 export function Brc20TokenAssetItem({ token, isPressable, onClick }: Brc20TokenAssetItemProps) {
   return (

src/app/components/crypto-assets/choose-crypto-asset/crypto-asset-list-item.tsx

@@ -0,0 +1,31 @@
+import type { AllTransferableCryptoAssetBalances } from '@shared/models/crypto-asset-balance.model';
+
+import { CryptoCurrencyAssetItem } from '@app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item';
+
+import { CryptoCurrencyAssetIcon } from './crypto-currency-asset-icon';
+import { FungibleTokenAssetItem } from './fungible-token-asset-item';
+
+interface CryptoAssetListItemProps {
+  assetBalance: AllTransferableCryptoAssetBalances;
+  onClick(): void;
+}
+export function CryptoAssetListItem(props: CryptoAssetListItemProps) {
+  const { assetBalance, onClick } = props;
+  const { blockchain, type } = assetBalance;
+
+  switch (type) {
+    case 'crypto-currency':
+      return (
+        <CryptoCurrencyAssetItem
+          assetBalance={assetBalance}
+          icon={<CryptoCurrencyAssetIcon blockchain={blockchain} />}
+          isPressable
+          onClick={onClick}
+        />
+      );
+    case 'fungible-token':
+      return <FungibleTokenAssetItem assetBalance={assetBalance} onClick={onClick} />;
+    default:
+      return null;
+  }
+}

src/app/pages/send/choose-crypto-asset/components/crypto-asset-list.tsx → src/app/components/crypto-assets/choose-crypto-asset/crypto-asset-list.tsx

@@ -5,12 +5,17 @@ import { CryptoAssetListLayout } from './crypto-asset-list.layout';
 
 interface CryptoAssetListProps {
   cryptoAssetBalances: AllTransferableCryptoAssetBalances[];
+  onItemClick(cryptoAssetBalance: AllTransferableCryptoAssetBalances): void;
 }
-export function CryptoAssetList({ cryptoAssetBalances }: CryptoAssetListProps) {
+export function CryptoAssetList({ cryptoAssetBalances, onItemClick }: CryptoAssetListProps) {
   return (
     <CryptoAssetListLayout>
-      {cryptoAssetBalances.map(assetBalance => (
-        <CryptoAssetListItem assetBalance={assetBalance} key={assetBalance.asset.name} />
+      {cryptoAssetBalances.map(cryptoAssetBalance => (
+        <CryptoAssetListItem
+          onClick={() => onItemClick(cryptoAssetBalance)}
+          assetBalance={cryptoAssetBalance}
+          key={cryptoAssetBalance.asset.name}
+        />
       ))}
     </CryptoAssetListLayout>
   );

src/app/pages/send/choose-crypto-asset/components/fungible-token-asset-item.tsx → src/app/components/crypto-assets/choose-crypto-asset/fungible-token-asset-item.tsx

@@ -6,7 +6,7 @@ import { StacksFungibleTokenAssetItem } from '@app/components/crypto-assets/stac
 
 interface FungibleTokenAssetItemProps extends FlexProps {
   assetBalance: StacksFungibleTokenAssetBalance;
-  onClick: () => void;
+  onClick(): void;
 }
 export function FungibleTokenAssetItem({ assetBalance, onClick }: FungibleTokenAssetItemProps) {
   const { blockchain } = assetBalance;

src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.tsx

@@ -13,7 +13,7 @@ interface CryptoCurrencyAssetItemProps {
   additionalBalanceInfo?: React.ReactNode;
   additionalUsdBalanceInfo?: React.ReactNode;
   rightElement?: React.ReactNode;
-  onClick?: () => void;
+  onClick?(): void;
 }
 export function CryptoCurrencyAssetItem({
   additionalBalanceInfo,

src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout.tsx

@@ -19,7 +19,7 @@ interface StacksFungibleTokenAssetItemLayoutProps extends FlexProps {
   imageCanonicalUri?: string;
   isPressable?: boolean;
   title: string;
-  onClick?: () => void;
+  onClick?(): void;
 }
 export function StacksFungibleTokenAssetItemLayout({
   avatar,

src/app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.tsx

@@ -15,7 +15,7 @@ interface StacksFungibleTokenAssetItemProps extends FlexProps {
   assetBalance: StacksFungibleTokenAssetBalance;
   unanchoredAssetBalance?: Money;
   isPressable?: boolean;
-  onClick?: () => void;
+  onClick?(): void;
 }
 export function StacksFungibleTokenAssetItem({
   assetBalance,

src/app/components/info-card/info-card.tsx

@@ -101,7 +101,7 @@ export function InfoCardAssetValue({
 interface InfoCardBtnProps {
   icon: ReactNode;
   label: string;
-  onClick: () => void;
+  onClick(): void;
 }
 export function InfoCardBtn({ icon, label, onClick }: InfoCardBtnProps) {
   return (

src/app/components/loaders/bitcoin-account-loader.tsx

@@ -4,7 +4,7 @@ import { useCurrentNativeSegwitAccount } from '@app/store/accounts/blockchain/bi
 import { useCurrentTaprootAccount } from '@app/store/accounts/blockchain/bitcoin/taproot-account.hooks';
 
 interface CurrentBitcoinAccountLoaderProps {
-  children: (data: { nativeSegwit: BitcoinAccount; taproot: BitcoinAccount }) => React.ReactNode;
+  children(data: { nativeSegwit: BitcoinAccount; taproot: BitcoinAccount }): React.ReactNode;
 }
 export function CurrentBitcoinAccountLoader({ children }: CurrentBitcoinAccountLoaderProps) {
   const nativeSegwit = useCurrentNativeSegwitAccount();

src/app/components/secret-key/mnemonic-key/mnemonic-input-field.tsx

@@ -11,8 +11,8 @@ interface InputFieldProps extends FlexProps {
   dataTestId?: string;
   name: string;
   value: string;
-  onPaste: (e: React.ClipboardEvent<HTMLInputElement>) => void;
-  onUpdateWord: (word: string) => void;
+  onPaste(e: React.ClipboardEvent<HTMLInputElement>): void;
+  onUpdateWord(word: string): void;
   hasError?: boolean;
   wordlist: string[];
 }

src/app/components/tabs.tsx

@@ -16,7 +16,7 @@ export function Tabs({
 }: {
   tabs: Tabs[];
   activeTab: number;
-  onTabClick: (index: number) => void;
+  onTabClick(index: number): void;
 }) {
   return (
     <RTabs.Root

src/app/features/collectibles/components/bitcoin/ordinals.tsx

@@ -9,7 +9,7 @@ import { useGetInscriptionsInfiniteQuery } from '@app/query/bitcoin/ordinals/ins
 import { Inscription } from './inscription';
 
 interface OrdinalsProps {
-  setIsLoadingMore: (isLoading: boolean) => void;
+  setIsLoadingMore(isLoading: boolean): void;
 }
 export function Ordinals({ setIsLoadingMore }: OrdinalsProps) {
   const query = useGetInscriptionsInfiniteQuery();

src/app/features/errors/error-boundary.tsx

@@ -16,16 +16,13 @@ const changedArray = (a: unknown[] = [], b: unknown[] = []) =>
 
 interface FallbackProps {
   error: Error;
-  resetErrorBoundary: (...args: unknown[]) => void;
+  resetErrorBoundary(...args: unknown[]): void;
 }
 
 interface ErrorBoundaryPropsWithComponent {
-  onResetKeysChange?: (
-    prevResetKeys: unknown[] | undefined,
-    resetKeys: unknown[] | undefined
-  ) => void;
-  onReset?: (...args: unknown[]) => void;
-  onError?: (error: Error, info: { componentStack: string }) => void;
+  onResetKeysChange?(prevResetKeys: unknown[] | undefined, resetKeys: unknown[] | undefined): void;
+  onReset?(...args: unknown[]): void;
+  onError?(error: Error, info: { componentStack: string }): void;
   resetKeys?: unknown[];
   fallback?: never;
   FallbackComponent: ComponentType<FallbackProps>;
@@ -37,25 +34,19 @@ declare function FallbackRender(
 ): ReactElement<unknown, string | FunctionComponent | typeof Component> | null;
 
 interface ErrorBoundaryPropsWithRender {
-  onResetKeysChange?: (
-    prevResetKeys: unknown[] | undefined,
-    resetKeys: unknown[] | undefined
-  ) => void;
-  onReset?: (...args: unknown[]) => void;
-  onError?: (error: Error, info: { componentStack: string }) => void;
+  onResetKeysChange?(prevResetKeys: unknown[] | undefined, resetKeys: unknown[] | undefined): void;
+  onReset?(...args: unknown[]): void;
+  onError?(error: Error, info: { componentStack: string }): void;
   resetKeys?: unknown[];
   fallback?: never;
   FallbackComponent?: never;
   fallbackRender: typeof FallbackRender;
 }
 
 interface ErrorBoundaryPropsWithFallback {
-  onResetKeysChange?: (
-    prevResetKeys: unknown[] | undefined,
-    resetKeys: unknown[] | undefined
-  ) => void;
-  onReset?: (...args: unknown[]) => void;
-  onError?: (error: Error, info: { componentStack: string }) => void;
+  onResetKeysChange?(prevResetKeys: unknown[] | undefined, resetKeys: unknown[] | undefined): void;
+  onReset?(...args: unknown[]): void;
+  onError?(error: Error, info: { componentStack: string }): void;
   resetKeys?: unknown[];
   fallback: ReactElement<unknown, string | FunctionComponent | typeof Component> | null;
   FallbackComponent?: never;

src/app/features/increase-fee-drawer/components/increase-fee-actions.tsx

@@ -7,7 +7,7 @@ import { LeatherButton } from '@app/ui/components/button';
 
 interface IncreaseFeeActionsProps {
   isDisabled: boolean;
-  onCancel: () => void;
+  onCancel(): void;
 }
 export function IncreaseFeeActions(props: IncreaseFeeActionsProps) {
   const { onCancel, isDisabled } = props;

src/app/features/increase-fee-drawer/increase-fee-drawer.tsx

@@ -9,7 +9,7 @@ import { Caption } from '@app/ui/components/typography/caption';
 
 interface IncreaseFeeDrawerProps {
   feeForm: React.JSX.Element;
-  onClose: () => void;
+  onClose(): void;
   isShowing: boolean;
 }
 export function IncreaseFeeDrawer({ feeForm, onClose, isShowing }: IncreaseFeeDrawerProps) {

src/app/features/ledger/generic-flows/request-keys/request-keys-flow.tsx

@@ -8,7 +8,7 @@ import { LedgerRequestKeysContext, LedgerRequestKeysProvider } from './ledger-re
 interface RequestKeysFlowProps {
   context: LedgerRequestKeysContext;
   isActionCancellableByUser: boolean;
-  onCancelConnectLedger?: () => void;
+  onCancelConnectLedger?(): void;
 }
 export function RequestKeysFlow({
   context,

src/app/features/settings-dropdown/components/settings-menu-item.tsx

@@ -4,7 +4,7 @@ import { ButtonProps, LeatherButton } from '@app/ui/components/button';
 
 interface SettingsMenuItemProps extends ButtonProps {
   color?: string;
-  onClick: (e: React.MouseEvent) => void;
+  onClick(e: React.MouseEvent): void;
   children: ReactNode;
 }
 export function SettingsMenuItem({ color, onClick, children, ...props }: SettingsMenuItemProps) {

src/app/features/stacks-transaction-request/contract-preview.tsx

@@ -10,7 +10,7 @@ interface ContractPreviewLayoutProps {
   contractAddress: string;
   contractName: string;
   functionName?: string;
-  onClick?: () => void;
+  onClick?(): void;
 }
 
 export function ContractPreviewLayout({

src/app/features/switch-account-drawer/components/switch-account-list.tsx

@@ -8,7 +8,7 @@ import { useWalletType } from '@app/common/use-wallet-type';
 import { SwitchAccountListItem } from './switch-account-list-item';
 
 interface SwitchAccountListProps {
-  handleClose: () => void;
+  handleClose(): void;
   currentAccountIndex: number;
   addressesNum: number;
 }

src/app/features/theme-drawer/theme-list-item-layout.tsx

@@ -5,7 +5,7 @@ import { CheckmarkIcon } from '@app/ui/components/icons/checkmark-icon';
 interface ThemeListItemProps {
   themeLabel: string;
   isActive: boolean;
-  onThemeItemSelect: () => void;
+  onThemeItemSelect(): void;
 }
 export function ThemeListItemLayout({
   themeLabel,

src/app/features/theme-drawer/theme-list-item.tsx

@@ -6,7 +6,7 @@ import { ThemeListItemLayout } from './theme-list-item-layout';
 
 interface ThemeListItemProps {
   theme: UserSelectedTheme;
-  onThemeSelected: (theme: UserSelectedTheme) => void;
+  onThemeSelected(theme: UserSelectedTheme): void;
   isActive: boolean;
 }
 export function ThemeListItem({ theme, onThemeSelected, isActive }: ThemeListItemProps) {

src/app/pages/onboarding/sign-in/components/sign-in.content.tsx

@@ -6,7 +6,7 @@ export function SignInContent({
   onClick,
   twentyFourWordMode,
 }: {
-  onClick: () => void;
+  onClick(): void;
   twentyFourWordMode: boolean;
 }): React.JSX.Element {
   return (

src/app/pages/onboarding/sign-in/mnemonic-form.tsx

@@ -20,7 +20,7 @@ import { validationSchema } from '../../../components/secret-key/mnemonic-key/ut
 
 interface MnemonicFormProps {
   mnemonic: (string | null)[];
-  setMnemonic: (mnemonic: (string | null)[]) => void;
+  setMnemonic(mnemonic: (string | null)[]): void;
   twentyFourWordMode: boolean;
 }
 export function MnemonicForm({ mnemonic, setMnemonic, twentyFourWordMode }: MnemonicFormProps) {