refactor(wallet, explorer, dashboard): change default export for components

apps/explorer/src/components/footer/Footer.tsx

@@ -28,7 +28,7 @@ function FooterLinks(): JSX.Element {
     );
 }
 
-function Footer(): JSX.Element {
+export function Footer(): JSX.Element {
     return (
         <footer className="sticky top-[100%] bg-neutral-96 px-5 py-10 md:px-10 md:py-14 dark:bg-neutral-10">
             <nav className="container flex flex-col justify-center gap-md md:gap-lg">
@@ -55,5 +55,3 @@ function Footer(): JSX.Element {
         </footer>
     );
 }
-
-export default Footer;

apps/explorer/src/components/header/Header.tsx

@@ -3,12 +3,12 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { NetworkSelector } from '../network';
-import Search from '../search/Search';
+import { Search } from '../search';
 import { LinkWithQuery } from '~/components/ui';
 import { ThemedIotaLogo } from '~/components';
 import { ThemeSwitcher } from '@iota/core';
 
-function Header(): JSX.Element {
+export function Header(): JSX.Element {
     return (
         <header className="flex h-header justify-center overflow-visible backdrop-blur-lg">
             <div className="container flex h-full flex-1 items-center justify-between gap-5">
@@ -30,5 +30,3 @@ function Header(): JSX.Element {
         </header>
     );
 }
-
-export default Header;

apps/explorer/src/components/layout/PageLayout.tsx

@@ -7,8 +7,8 @@ import { useAppsBackend, Feature } from '@iota/core';
 import { Network } from '@iota/iota-sdk/client';
 import { useQuery } from '@tanstack/react-query';
 import { type ReactNode, useRef } from 'react';
-import Footer from '../footer/Footer';
-import Header from '../header/Header';
+import { Footer } from '../footer';
+import { Header } from '../header';
 import { useNetworkContext } from '~/contexts';
 import { InfoBox, InfoBoxStyle, InfoBoxType, LoadingIndicator } from '@iota/apps-ui-kit';
 import { Info } from '@iota/ui-icons';

apps/explorer/src/components/owned-coins/CoinItem.tsx

@@ -12,7 +12,7 @@ interface CoinItemProps {
     coin: CoinStruct;
 }
 
-export default function CoinItem({ coin }: CoinItemProps): JSX.Element {
+export function CoinItem({ coin }: CoinItemProps): JSX.Element {
     const [formattedBalance, symbol] = useFormatCoin(coin.balance, coin.coinType);
     return (
         <KeyValueInfo

apps/explorer/src/components/owned-coins/OwnedCoinView.tsx

@@ -7,7 +7,7 @@ import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
 import clsx from 'clsx';
 import { useState } from 'react';
 import { type CoinBalanceVerified } from './OwnedCoins';
-import CoinsPanel from './OwnedCoinsPanel';
+import { CoinsPanel } from './OwnedCoinsPanel';
 import {
     Card,
     CardAction,
@@ -24,7 +24,7 @@ type OwnedCoinViewProps = {
     id: string;
 };
 
-export default function OwnedCoinView({ coin, id }: OwnedCoinViewProps): JSX.Element {
+export function OwnedCoinView({ coin, id }: OwnedCoinViewProps): JSX.Element {
     const isIotaCoin = coin.coinType === IOTA_TYPE_ARG;
     const [areCoinDetailsOpen, setAreCoinDetailsOpen] = useState<boolean>(isIotaCoin);
     const [formattedTotalBalance, symbol] = useFormatCoin(coin.totalBalance, coin.coinType);

apps/explorer/src/components/owned-coins/OwnedCoins.tsx

@@ -9,7 +9,7 @@ import { useNetwork } from '~/hooks';
 import { normalizeIotaAddress } from '@iota/iota-sdk/utils';
 import { FilterList, Warning } from '@iota/ui-icons';
 import { useMemo, useState } from 'react';
-import OwnedCoinView from './OwnedCoinView';
+import { OwnedCoinView } from './OwnedCoinView';
 import {
     Button,
     ButtonType,

apps/explorer/src/components/owned-coins/OwnedCoinsPanel.tsx

@@ -5,7 +5,7 @@
 import { useElementDimensions, useGetCoins, useOnScreen } from '@iota/core';
 import clsx from 'clsx';
 import { useEffect, useRef } from 'react';
-import CoinItem from './CoinItem';
+import { CoinItem } from './CoinItem';
 import { LoadingIndicator } from '@iota/apps-ui-kit';
 
 const MIN_CONTAINER_WIDTH_SIZE = 500;
@@ -15,7 +15,7 @@ type CoinsPanelProps = {
     id: string;
 };
 
-export default function CoinsPanel({ coinType, id }: CoinsPanelProps): JSX.Element {
+export function CoinsPanel({ coinType, id }: CoinsPanelProps): JSX.Element {
     const containerRef = useRef(null);
     const coinsSectionRef = useRef(null);
     const { isIntersecting } = useOnScreen(containerRef);

apps/explorer/src/components/search/Search.tsx

@@ -10,7 +10,7 @@ import { useDebouncedValue } from '~/hooks/useDebouncedValue';
 import { useSearch } from '~/hooks/useSearch';
 import { ampli } from '~/lib/utils';
 
-function Search(): JSX.Element {
+export function Search(): JSX.Element {
     const [query, setQuery] = useState('');
     const debouncedQuery = useDebouncedValue(query);
     const { isPending, data: results } = useSearch(debouncedQuery);
@@ -58,5 +58,3 @@ function Search(): JSX.Element {
         />
     );
 }
-
-export default Search;

apps/explorer/src/components/ui/image/Image.tsx

@@ -8,8 +8,7 @@ import { cva, cx, type VariantProps } from 'class-variance-authority';
 import clsx from 'clsx';
 import { useAnimate } from 'framer-motion';
 import { type ImgHTMLAttributes, useEffect, useState } from 'react';
-
-import useImage from '~/hooks/useImage';
+import { useImage } from '~/hooks';
 import { ImageVisibility } from '~/lib/enums';
 
 const imageStyles = cva(null, {

apps/explorer/src/hooks/useImage.ts

@@ -47,5 +47,3 @@ export function useImage({ src = '', moderate = true }: UseImageProps) {
 
     return { moderation, url: formatted, status, ref };
 }
-
-export default useImage;

apps/explorer/src/pages/address-result/AddressResult.tsx

@@ -47,7 +47,7 @@ function AddressResult({ address }: { address: string }): JSX.Element {
     );
 }
 
-export default function AddressResultPage(): JSX.Element {
+export function AddressResultPage(): JSX.Element {
     const { id } = useParams();
 
     return (

apps/explorer/src/pages/checkpoints/CheckpointDetail.tsx

@@ -37,7 +37,7 @@ enum NestedTabs {
     Aggregated = 'aggregated',
 }
 
-export default function CheckpointDetail(): JSX.Element {
+export function CheckpointDetail(): JSX.Element {
     const [activeFeesTabId, setActiveFeesTabId] = useState(FeesTabs.GasAndStorageFees);
     const [activeDetailsTabId, setActiveDetailsTabId] = useState(DetailsTabs.Details);
     const [activeNestedTabId, setActiveNestedTabId] = useState(NestedTabs.Aggregated);

apps/explorer/src/pages/epochs/EpochDetail.tsx

@@ -35,7 +35,7 @@ enum EpochTabs {
     Validators = 'validators',
 }
 
-export default function EpochDetail() {
+export function EpochDetail() {
     const [activeTabId, setActiveTabId] = useState(EpochTabs.Checkpoints);
     const { id } = useParams();
     const enhancedRpc = useEnhancedRpcClient();

apps/explorer/src/pages/home/Home.tsx

@@ -21,7 +21,7 @@ import { useNetwork } from '~/hooks';
 
 const TRANSACTIONS_LIMIT = 15;
 
-function Home(): JSX.Element {
+export function Home(): JSX.Element {
     const [network] = useNetwork();
     const isIotaTokenCardEnabled = network === Network.Mainnet;
     return (
@@ -77,5 +77,3 @@ function Home(): JSX.Element {
         />
     );
 }
-
-export default Home;

apps/explorer/src/pages/index.tsx

@@ -4,13 +4,13 @@
 
 import { wrapCreateBrowserRouter } from '@sentry/react';
 import { createBrowserRouter, Navigate, useLocation, useParams } from 'react-router-dom';
-import AddressResult from './address-result/AddressResult';
-import CheckpointDetail from './checkpoints/CheckpointDetail';
-import EpochDetail from './epochs/EpochDetail';
-import Home from './home/Home';
+import { AddressResultPage } from './address-result/AddressResult';
+import { CheckpointDetail } from './checkpoints/CheckpointDetail';
+import { EpochDetail } from './epochs/EpochDetail';
+import { Home } from './home/Home';
 import { ObjectResult } from './object-result/ObjectResult';
 import { Recent } from './recent';
-import TransactionResult from './transaction-result/TransactionResult';
+import { TransactionResult } from './transaction-result/TransactionResult';
 import { ValidatorDetails } from './validator/ValidatorDetails';
 import { ValidatorPageResult } from './validators/Validators';
 import { Layout } from '~/components';
@@ -39,7 +39,7 @@ export const router = sentryCreateBrowserRouter([
             { path: 'epoch/current', element: <EpochDetail /> },
             { path: 'txblock/:id', element: <TransactionResult /> },
             { path: 'epoch/:id', element: <EpochDetail /> },
-            { path: 'address/:id', element: <AddressResult /> },
+            { path: 'address/:id', element: <AddressResultPage /> },
             { path: 'validators', element: <ValidatorPageResult /> },
             { path: 'validator/:id', element: <ValidatorDetails /> },
         ],

apps/explorer/src/pages/object-result/ObjectResult.tsx

@@ -8,8 +8,7 @@ import { ErrorBoundary, PageLayout } from '~/components';
 import { PageHeader } from '~/components/ui';
 import { ObjectView } from '~/pages/object-result/views/ObjectView';
 import { translate, type DataType } from './ObjectResultType';
-import PkgView from './views/PkgView';
-import { TokenView } from './views/TokenView';
+import { PkgView, TokenView } from './views';
 import { InfoBox, InfoBoxStyle, InfoBoxType, LoadingIndicator } from '@iota/apps-ui-kit';
 import { Warning } from '@iota/ui-icons';
 

apps/explorer/src/pages/object-result/views/PkgView.tsx

@@ -39,7 +39,7 @@ interface PkgViewProps {
     data: DataType;
 }
 
-function PkgView({ data }: PkgViewProps): JSX.Element {
+export function PkgView({ data }: PkgViewProps): JSX.Element {
     const [selectedSplitPanelOrientation, setSplitPanelOrientation] = useState(
         SPLIT_PANELS_ORIENTATION[1].value,
     );
@@ -145,5 +145,3 @@ function PkgView({ data }: PkgViewProps): JSX.Element {
         </div>
     );
 }
-
-export default PkgView;

apps/explorer/src/pages/object-result/views/index.ts

@@ -0,0 +1,5 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './PkgView';
+export * from './TokenView';

apps/explorer/src/pages/transaction-result/TransactionResult.tsx

@@ -40,7 +40,7 @@ function TransactionResultPageHeader({
     );
 }
 
-export default function TransactionResult(): JSX.Element {
+export function TransactionResult(): JSX.Element {
     const { id } = useParams();
     const {
         isPending,

apps/ui-kit/src/lib/components/atoms/key-value-info/KeyValueInfo.tsx

@@ -154,5 +154,3 @@ export function KeyValueInfo({
         </div>
     );
 }
-
-export default KeyValueInfo;

apps/wallet-dashboard/components/AmountBox.tsx

@@ -8,7 +8,7 @@ interface AmountBoxProps {
     amount: string;
 }
 
-function AmountBox({ title, amount }: AmountBoxProps): JSX.Element {
+export function AmountBox({ title, amount }: AmountBoxProps): JSX.Element {
     return (
         <div className="flex items-center justify-center gap-4 pt-12">
             <Box title={title}>
@@ -17,5 +17,3 @@ function AmountBox({ title, amount }: AmountBoxProps): JSX.Element {
         </div>
     );
 }
-
-export default AmountBox;

apps/wallet-dashboard/components/Box.tsx

@@ -8,13 +8,11 @@ interface BoxProps {
     title?: string;
 }
 
-function Box({ children, title }: BoxProps): JSX.Element {
+export function Box({ children, title }: BoxProps): JSX.Element {
     return (
         <div className="flex flex-col items-center gap-2 rounded-lg border border-white p-4">
             {title && <h2>{title}</h2>}
             {children}
         </div>
     );
 }
-
-export default Box;

apps/wallet-dashboard/components/Buttons/Button.tsx

@@ -9,7 +9,7 @@ interface ButtonProps {
     disabled?: boolean;
 }
 
-function Button({ onClick, children, disabled }: ButtonProps): JSX.Element {
+export function Button({ onClick, children, disabled }: ButtonProps): JSX.Element {
     return (
         <button
             onClick={onClick}
@@ -20,5 +20,3 @@ function Button({ onClick, children, disabled }: ButtonProps): JSX.Element {
         </button>
     );
 }
-
-export default Button;

apps/wallet-dashboard/components/Buttons/index.ts

@@ -1,4 +1,4 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-export { default as Button } from './Button';
+export * from './Button';

apps/wallet-dashboard/components/Dialogs/Staking/views/EnterAmountDialogLayout.tsx

@@ -25,7 +25,7 @@ import { Validator } from './Validator';
 import { StakedInfo } from './StakedInfo';
 import { DialogLayout, DialogLayoutBody, DialogLayoutFooter } from '../../layout';
 
-export interface FormValues {
+interface FormValues {
     amount: string;
 }
 
@@ -43,7 +43,7 @@ interface EnterAmountDialogLayoutProps {
     gasBudget?: string | number | null;
 }
 
-function EnterAmountDialogLayout({
+export function EnterAmountDialogLayout({
     selectedValidator,
     gasBudget,
     senderAddress,
@@ -162,5 +162,3 @@ function EnterAmountDialogLayout({
         </DialogLayout>
     );
 }
-
-export default EnterAmountDialogLayout;

apps/wallet-dashboard/components/Dialogs/Staking/views/EnterAmountView.tsx

@@ -7,7 +7,7 @@ import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
 import { useFormikContext } from 'formik';
 import { useSignAndExecuteTransaction } from '@iota/dapp-kit';
 import { useNewStakeTransaction } from '@/hooks';
-import EnterAmountDialogLayout from './EnterAmountDialogLayout';
+import { EnterAmountDialogLayout } from './EnterAmountDialogLayout';
 import toast from 'react-hot-toast';
 
 export interface FormValues {
@@ -24,7 +24,7 @@ interface EnterAmountViewProps {
     onSuccess: (digest: string) => void;
 }
 
-function EnterAmountView({
+export function EnterAmountView({
     selectedValidator,
     onBack,
     handleClose,
@@ -99,5 +99,3 @@ function EnterAmountView({
         />
     );
 }
-
-export default EnterAmountView;

apps/wallet-dashboard/components/Dialogs/Staking/views/EnterTimelockedAmountView.tsx

@@ -14,10 +14,10 @@ import { useFormikContext } from 'formik';
 import { useSignAndExecuteTransaction } from '@iota/dapp-kit';
 import { useGetCurrentEpochStartTimestamp, useNewStakeTimelockedTransaction } from '@/hooks';
 import { prepareObjectsForTimelockedStakingTransaction } from '@/lib/utils';
-import EnterAmountDialogLayout from './EnterAmountDialogLayout';
+import { EnterAmountDialogLayout } from './EnterAmountDialogLayout';
 import toast from 'react-hot-toast';
 
-export interface FormValues {
+interface FormValues {
     amount: string;
 }
 
@@ -31,7 +31,7 @@ interface EnterTimelockedAmountViewProps {
     onSuccess: (digest: string) => void;
 }
 
-function EnterTimelockedAmountView({
+export function EnterTimelockedAmountView({
     selectedValidator,
     maxStakableTimelockedAmount,
     amountWithoutDecimals,
@@ -119,5 +119,3 @@ function EnterTimelockedAmountView({
         />
     );
 }
-
-export default EnterTimelockedAmountView;

apps/wallet-dashboard/components/Dialogs/Staking/views/SelectValidatorView.tsx

@@ -15,7 +15,7 @@ interface SelectValidatorViewProps {
     handleClose: () => void;
 }
 
-function SelectValidatorView({
+export function SelectValidatorView({
     validators,
     onSelect,
     onNext,
@@ -52,5 +52,3 @@ function SelectValidatorView({
         </DialogLayout>
     );
 }
-
-export default SelectValidatorView;