Merge branch '424-refactor-default-exports-to-named-exports-in-javasc…

…ript-modules-in-guard-app' into 'dev'

Resolve "Refactor default exports to named exports in JavaScript modules in guard app"

Closes #424

See merge request ergo/rosen-bridge/ui!355

.changeset/eleven-steaks-join.md

@@ -0,0 +1,5 @@
+---
+'@rosen-bridge/watcher-app': patch
+---
+
+Update App.tsx import to match the recent changes in swr-mock

.changeset/neat-rice-remember.md

@@ -0,0 +1,5 @@
+---
+'@rosen-ui/swr-mock': patch
+---
+
+Refactor to use named exports to improve code maintainability

.changeset/slow-moons-punch.md

@@ -0,0 +1,5 @@
+---
+'@rosen-bridge/guard-app': patch
+---
+
+Restructure modules to use named exports, enhancing clarity and consistency

apps/guard/app/(dashboard)/@actions/SendForSigningForm.tsx

@@ -39,7 +39,7 @@ interface Form {
 /**
  * render a form for signing a tx
  */
-const SendForSigningForm = () => {
+export const SendForSigningForm = () => {
   const { apiKey } = useApiKey();
 
   const {
@@ -198,5 +198,3 @@ const SendForSigningForm = () => {
     </FullCard>
   );
 };
-
-export default SendForSigningForm;

apps/guard/app/(dashboard)/@actions/TabPanel.tsx

@@ -12,7 +12,7 @@ interface TabPanelProps {
  * @param in
  * @param children
  */
-const TabPanel = ({ in: isIn, children }: TabPanelProps) => {
+export const TabPanel = ({ in: isIn, children }: TabPanelProps) => {
   return (
     <Slide
       direction="up"
@@ -28,5 +28,3 @@ const TabPanel = ({ in: isIn, children }: TabPanelProps) => {
     </Slide>
   );
 };
-
-export default TabPanel;

apps/guard/app/(dashboard)/@actions/page.tsx

@@ -20,8 +20,8 @@ import {
   useResponsiveValue,
 } from '@rosen-bridge/ui-kit';
 
-import SendForSigningForm from './SendForSigningForm';
-import TabPanel from './TabPanel';
+import { SendForSigningForm } from './SendForSigningForm';
+import { TabPanel } from './TabPanel';
 
 /**
  * render root of page

apps/guard/app/(dashboard)/@infoWidgets/HealthWidget.tsx

@@ -49,7 +49,7 @@ const HealthWidgetBase = styled(Card)<HealthWidgetBaseProps>(
 /**
  * render a widget showing health status or a pending indicator
  */
-const HealthWidget = () => {
+export const HealthWidget = () => {
   const { data: info, isLoading } = useSWR<ApiInfoResponse>('/info', fetcher);
 
   return (
@@ -89,5 +89,3 @@ const HealthWidget = () => {
     </HealthWidgetBase>
   );
 };
-
-export default HealthWidget;

apps/guard/app/(dashboard)/@infoWidgets/WalletWidget.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 
 import { Copy, QrcodeScan } from '@rosen-bridge/icons';
@@ -92,7 +92,7 @@ interface WalletWidgetProps {
  * @param color
  * @param isLoading
  */
-const WalletWidget = ({
+export const WalletWidget = ({
   title,
   tokenInfoWithAddresses,
   color,
@@ -194,5 +194,3 @@ const WalletWidget = ({
     </WalletWidgetBase>
   );
 };
-
-export default WalletWidget;

apps/guard/app/(dashboard)/@infoWidgets/page.tsx

@@ -5,8 +5,8 @@ import useSWR from 'swr';
 import { Stack } from '@rosen-bridge/ui-kit';
 import { fetcher } from '@rosen-ui/swr-helpers';
 
-import HealthWidget from './HealthWidget';
-import WalletWidget from './WalletWidget';
+import { HealthWidget } from './HealthWidget';
+import { WalletWidget } from './WalletWidget';
 
 import { ApiInfoResponse } from '@/_types/api';
 

apps/guard/app/(dashboard)/@revenue/PeriodSelect.tsx

@@ -15,7 +15,7 @@ interface PeriodSelectProps {
  * @param period
  * @param setPeriod
  */
-const PeriodSelect = ({ period, setPeriod }: PeriodSelectProps) => {
+export const PeriodSelect = ({ period, setPeriod }: PeriodSelectProps) => {
   const [anchorElement, setAnchorElement] = useState<HTMLButtonElement | null>(
     null,
   );
@@ -84,5 +84,3 @@ const PeriodSelect = ({ period, setPeriod }: PeriodSelectProps) => {
     </Box>
   );
 };
-
-export default PeriodSelect;

apps/guard/app/(dashboard)/@revenue/RevenueChart.tsx

@@ -62,7 +62,7 @@ interface RevenueChartProps {
  * @param period
  * @param data
  */
-const RevenueChart = ({ period, data }: RevenueChartProps) => {
+export const RevenueChart = ({ period, data }: RevenueChartProps) => {
   const theme = useTheme();
 
   const reversedData = useMemo(
@@ -137,5 +137,3 @@ const RevenueChart = ({ period, data }: RevenueChartProps) => {
     />
   );
 };
-
-export default RevenueChart;

apps/guard/app/(dashboard)/@revenue/RevenueChartSkeleton.tsx

@@ -3,8 +3,6 @@ import { Skeleton } from '@rosen-bridge/ui-kit';
 /**
  * render a skeleton element for `RevenueChart`
  */
-const RevenueChartSkeleton = () => (
+export const RevenueChartSkeleton = () => (
   <Skeleton animation="wave" height={240} width="100%" />
 );
-
-export default RevenueChartSkeleton;

apps/guard/app/(dashboard)/@revenue/page.tsx

@@ -8,16 +8,19 @@ import { FullCard } from '@rosen-bridge/ui-kit';
 import { fetcher } from '@rosen-ui/swr-helpers';
 import { ChartPeriod } from '@rosen-ui/types';
 
-import PeriodSelect from './PeriodSelect';
-import RevenueChartSkeleton from './RevenueChartSkeleton';
+import { PeriodSelect } from './PeriodSelect';
+import { RevenueChartSkeleton } from './RevenueChartSkeleton';
 
 import { ApiRevenueChartResponse } from '@/_types/api';
 
 /**
  * This is required because revenue chart cannot be pre-rendered in next and
  * throws an error
  */
-const RevenueChart = dynamic(() => import('./RevenueChart'), { ssr: false });
+const RevenueChart = dynamic(
+  () => import('./RevenueChart').then((mod) => mod.RevenueChart),
+  { ssr: false },
+);
 
 const Revenue = () => {
   const [period, setPeriod] = useState<ChartPeriod>('week');

apps/guard/app/App.tsx

@@ -10,16 +10,16 @@ import {
   CssBaseline,
   ThemeProvider,
 } from '@rosen-bridge/ui-kit';
-import SWRConfig from '@rosen-ui/swr-mock';
+import { SWRConfig } from '@rosen-ui/swr-mock';
 
 import { SideBar } from './SideBar';
-import Toolbar from './Toolbar';
+import { Toolbar } from './Toolbar';
 
 import { theme } from '@/_theme/theme';
 
 import { ApiKeyContextProvider } from '@rosen-bridge/shared-contexts';
 
-import mockedData from './_mock/mockedData';
+import { mockedData } from './_mock/mockedData';
 
 const Root = styled('div')(({ theme }) => ({
   width: '100vw',
@@ -65,7 +65,7 @@ interface AppProps {
   children?: React.ReactNode;
 }
 
-const App = ({ children }: AppProps) => {
+export const App = ({ children }: AppProps) => {
   return (
     <NoSsr>
       <ThemeProvider theme={theme}>
@@ -95,5 +95,3 @@ const App = ({ children }: AppProps) => {
     </NoSsr>
   );
 };
-
-export default App;

apps/guard/app/SideBar.tsx

@@ -11,7 +11,7 @@ import {
 } from '@rosen-bridge/icons';
 import { AppBar, AppLogo } from '@rosen-bridge/ui-kit';
 
-import useInfo from './_hooks/useInfo';
+import { useInfo } from './_hooks/useInfo';
 
 import packageJson from '../package.json';
 

apps/guard/app/Toolbar.tsx

@@ -20,7 +20,7 @@ const pageTitleMap: Record<string, string> = {
 /**
  * render toolbar containing page title and some actions
  */
-const Toolbar = () => {
+export const Toolbar = () => {
   const page = useSelectedLayoutSegment();
 
   return (
@@ -35,5 +35,3 @@ const Toolbar = () => {
     />
   );
 };
-
-export default Toolbar;

apps/guard/app/_hooks/useAddresses.ts

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { Network } from '@rosen-ui/types';
 
-import useInfo from './useInfo';
+import { useInfo } from './useInfo';
 
 type Addresses = {
   [key in 'cold' | 'hot']: {

apps/guard/app/_hooks/useInfo.ts

@@ -6,6 +6,4 @@ import { ApiInfoResponse } from '@/_types/api';
 /**
  * wrap useSWR for fetching info api
  */
-const useInfo = () => useSWR<ApiInfoResponse>('/info', fetcher);
-
-export default useInfo;
+export const useInfo = () => useSWR<ApiInfoResponse>('/info', fetcher);

apps/guard/app/_mock/mockedData.ts

@@ -13,7 +13,6 @@ import {
   ApiSignResponse,
   ApiEventResponse as ApiOngoingEventResponse,
   ApiHistoryResponse as ApiHistoryEventResponse,
-  EventBase,
   HistoryEvent,
   OngoingEvent,
 } from '@/_types/api';
@@ -392,7 +391,7 @@ const history: ApiHistoryEventResponse = {
   items: generateHistoryEventRecords(100),
 };
 
-const mockedData: SWRConfigProps['fakeData'] = {
+export const mockedData: SWRConfigProps['fakeData'] = {
   withStringKeys: {
     '/info': info,
     '/revenue/chart': revenueChart,
@@ -439,5 +438,3 @@ const mockedData: SWRConfigProps['fakeData'] = {
     },
   },
 };
-
-export default mockedData;

apps/guard/app/assets/TableSkeleton.tsx

@@ -13,7 +13,7 @@ interface TableSkeletonProps {
   numberOfItems: number;
 }
 
-const TableSkeleton: FC<TableSkeletonProps> = (props) => {
+export const TableSkeleton: FC<TableSkeletonProps> = (props) => {
   const renderMobileRow = useCallback(
     () => (
       <TableRow>
@@ -65,5 +65,3 @@ const TableSkeleton: FC<TableSkeletonProps> = (props) => {
     />
   );
 };
-
-export default TableSkeleton;

apps/guard/app/assets/page.tsx

@@ -9,7 +9,7 @@ import {
 } from '@rosen-bridge/ui-kit';
 
 import { MobileRow, TabletRow, mobileHeader, tabletHeader } from './TableRow';
-import TableSkeleton from './TableSkeleton';
+import { TableSkeleton } from './TableSkeleton';
 
 import { ApiAddressAssetsResponse, GuardTokenInfo } from '@/_types/api';
 

apps/guard/app/events/TableSkeleton.tsx

@@ -13,7 +13,7 @@ interface TableSkeletonProps {
   numberOfItems: number;
 }
 
-const TableSkeleton: FC<TableSkeletonProps> = (props) => {
+export const TableSkeleton: FC<TableSkeletonProps> = (props) => {
   const renderMobileRow = useCallback(
     () => (
       <TableRow>
@@ -65,5 +65,3 @@ const TableSkeleton: FC<TableSkeletonProps> = (props) => {
     />
   );
 };
-
-export default TableSkeleton;

apps/guard/app/events/page.tsx

@@ -9,7 +9,7 @@ import {
 } from '@rosen-bridge/ui-kit';
 
 import { MobileRow, TabletRow, mobileHeader, tabletHeader } from './TableRow';
-import TableSkeleton from './TableSkeleton';
+import { TableSkeleton } from './TableSkeleton';
 
 import { ApiEventResponse, OngoingEvent } from '@/_types/api';
 

apps/guard/app/history/TableSkeleton.tsx

@@ -13,7 +13,7 @@ interface TableSkeletonProps {
   numberOfItems: number;
 }
 
-const TableSkeleton: FC<TableSkeletonProps> = (props) => {
+export const TableSkeleton: FC<TableSkeletonProps> = (props) => {
   const renderMobileRow = useCallback(
     () => (
       <TableRow>
@@ -65,5 +65,3 @@ const TableSkeleton: FC<TableSkeletonProps> = (props) => {
     />
   );
 };
-
-export default TableSkeleton;

apps/guard/app/history/page.tsx

@@ -9,7 +9,7 @@ import {
 } from '@rosen-bridge/ui-kit';
 
 import { MobileRow, TabletRow, mobileHeader, tabletHeader } from './TableRow';
-import TableSkeleton from './TableSkeleton';
+import { TableSkeleton } from './TableSkeleton';
 
 import { ApiHistoryResponse, HistoryEvent } from '@/_types/api';
 

apps/guard/app/layout.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Metadata } from 'next';
 
-import App from './App';
+import { App } from './App';
 
 export const metadata: Metadata = {
   title: 'Rosen Guard',

apps/guard/app/revenues/TableSkeleton.tsx

@@ -13,7 +13,7 @@ interface TableSkeletonProps {
   numberOfItems: number;
 }
 
-const TableSkeleton: FC<TableSkeletonProps> = (props) => {
+export const TableSkeleton: FC<TableSkeletonProps> = (props) => {
   const renderMobileRow = useCallback(
     () => (
       <TableRow>
@@ -65,5 +65,3 @@ const TableSkeleton: FC<TableSkeletonProps> = (props) => {
     />
   );
 };
-
-export default TableSkeleton;

apps/guard/app/revenues/page.tsx

@@ -9,7 +9,7 @@ import {
 } from '@rosen-bridge/ui-kit';
 
 import { MobileRow, TabletRow, mobileHeader, tabletHeader } from './TableRow';
-import TableSkeleton from './TableSkeleton';
+import { TableSkeleton } from './TableSkeleton';
 
 import { ApiRevenueResponse, Revenue } from '@/_types/api';
 

apps/watcher/app/App.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useEffect } from 'react';
-import SWRConfig from '@rosen-ui/swr-mock';
+import { SWRConfig } from '@rosen-ui/swr-mock';
 
 /**
  * FIXME: import NoSsr from ui-kit