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

…ript-modules-in-watcher-app' into 'dev' Resolve "Refactor default exports to named exports in JavaScript modules in watcher app" Closes #430 See merge request ergo/rosen-bridge/ui!357
rosen-bridge · Nov 19, 2024 · 67d9847 · 67d9847
2 parents 1890323 + 0cf233b
commit 67d9847
Show file tree

Hide file tree

Showing 40 changed files with 73 additions and 106 deletions.
diff --git a/.changeset/many-apples-sneeze.md b/.changeset/many-apples-sneeze.md
@@ -0,0 +1,5 @@
+---
+'@rosen-bridge/watcher-app': patch
+---
+
+Update the modules to utilize named exports, enhancing maintainability and aligning with our policy to ensure greater consistency
diff --git a/apps/watcher/app/(home)/@actions/page.tsx b/apps/watcher/app/(home)/@actions/page.tsx
@@ -9,7 +9,7 @@ import {
 } from '@rosen-bridge/icons';
 import { FullCard, SvgIcon } from '@rosen-bridge/ui-kit';
 
-import HomeActionButton from '@/_components/HomeActionButton';
+import { HomeActionButton } from '@/_components/HomeActionButton';
 
 const Actions = () => {
   return (

diff --git a/apps/watcher/app/(home)/@address/AddressSkeleton.tsx b/apps/watcher/app/(home)/@address/AddressSkeleton.tsx
@@ -3,8 +3,6 @@ import { Skeleton } from '@rosen-bridge/ui-kit';
 /**
  * render a skeleton element for address section of home page
  */
-const AddressSkeleton = () => (
+export const AddressSkeleton = () => (
   <Skeleton animation="wave" height={60} width="100%" />
 );
-
-export default AddressSkeleton;
diff --git a/apps/watcher/app/(home)/@address/CopyButton.tsx b/apps/watcher/app/(home)/@address/CopyButton.tsx
@@ -17,7 +17,7 @@ interface CopyButtonProps {
  *
  * @param address
  */
-const CopyButton = ({ address }: CopyButtonProps) => {
+export const CopyButton = ({ address }: CopyButtonProps) => {
   const [open, setOpen] = React.useState(false);
 
   const handleClose = (
@@ -43,5 +43,3 @@ const CopyButton = ({ address }: CopyButtonProps) => {
     </>
   );
 };
-
-export default CopyButton;
diff --git a/apps/watcher/app/(home)/@address/QrCodeButton.tsx b/apps/watcher/app/(home)/@address/QrCodeButton.tsx
@@ -11,7 +11,7 @@ interface QrCodeButtonProps {
  * provided address when clicked
  * @param address
  */
-const QrCodeButton = ({ address }: QrCodeButtonProps) => {
+export const QrCodeButton = ({ address }: QrCodeButtonProps) => {
   const [open, setOpen] = React.useState(false);
 
   const handleOpen = () => setOpen(true);
@@ -28,5 +28,3 @@ const QrCodeButton = ({ address }: QrCodeButtonProps) => {
     </>
   );
 };
-
-export default QrCodeButton;
diff --git a/apps/watcher/app/(home)/@address/page.tsx b/apps/watcher/app/(home)/@address/page.tsx
@@ -6,9 +6,9 @@ import useSWR from 'swr';
 import { Box, Card, FullCard, Grid, Typography } from '@rosen-bridge/ui-kit';
 import { fetcher } from '@rosen-ui/swr-helpers';
 
-import AddressSkeleton from './AddressSkeleton';
-import CopyButton from './CopyButton';
-import QrCodeButton from './QrCodeButton';
+import { AddressSkeleton } from './AddressSkeleton';
+import { CopyButton } from './CopyButton';
+import { QrCodeButton } from './QrCodeButton';
 
 import { ApiInfoResponse } from '@/_types/api';
 

diff --git a/apps/watcher/app/(home)/@infoWidgets/InfoWidgetCard.tsx b/apps/watcher/app/(home)/@infoWidgets/InfoWidgetCard.tsx
@@ -85,7 +85,7 @@ interface InfoWidgetCardProps {
  * @param unit
  * @param value
  */
-const InfoWidgetCard = ({
+export const InfoWidgetCard = ({
   color = 'secondary',
   icon,
   isLoading,
@@ -125,5 +125,3 @@ const InfoWidgetCard = ({
     </InfoWidgetCardBase>
   );
 };
-
-export default InfoWidgetCard;
diff --git a/apps/watcher/app/(home)/@infoWidgets/page.tsx b/apps/watcher/app/(home)/@infoWidgets/page.tsx
@@ -10,17 +10,17 @@ import {
   ShieldExclamation,
   Wallet,
 } from '@rosen-bridge/icons';
-import { Box, Grid, SvgIcon, Typography } from '@rosen-bridge/ui-kit';
+import { Box, Grid, SvgIcon } from '@rosen-bridge/ui-kit';
 import { healthStatusColorMap } from '@rosen-ui/constants';
 import { fetcher } from '@rosen-ui/swr-helpers';
 import { AugmentedPalette } from '@rosen-ui/types';
 import { getDecimalString } from '@rosen-ui/utils';
 
-import InfoWidgetCard from './InfoWidgetCard';
+import { InfoWidgetCard } from './InfoWidgetCard';
 
-import useRsnToken from '@/_hooks/useRsnToken';
-import useERsnToken from '@/_hooks/useERsnToken';
-import useToken from '@/_hooks/useToken';
+import { useRsnToken } from '@/_hooks/useRsnToken';
+import { useERsnToken } from '@/_hooks/useERsnToken';
+import { useToken } from '@/_hooks/useToken';
 
 import { ApiInfoResponse } from '@/_types/api';
 

diff --git a/apps/watcher/app/(home)/@revenue/PeriodSelect.tsx b/apps/watcher/app/(home)/@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;
diff --git a/apps/watcher/app/(home)/@revenue/RevenueChart.tsx b/apps/watcher/app/(home)/@revenue/RevenueChart.tsx
@@ -63,7 +63,7 @@ interface RevenueChartProps {
  * @param period
  * @param data
  */
-const RevenueChart = ({ period, data }: RevenueChartProps) => {
+export const RevenueChart = ({ period, data }: RevenueChartProps) => {
   const theme = useTheme();
 
   const reversedData = useMemo(
@@ -138,5 +138,3 @@ const RevenueChart = ({ period, data }: RevenueChartProps) => {
     />
   );
 };
-
-export default RevenueChart;
diff --git a/apps/watcher/app/(home)/@revenue/RevenueChartSkeleton.tsx b/apps/watcher/app/(home)/@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;
diff --git a/apps/watcher/app/(home)/@revenue/page.tsx b/apps/watcher/app/(home)/@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');

diff --git a/apps/watcher/app/App.tsx b/apps/watcher/app/App.tsx
@@ -19,12 +19,12 @@ import {
 import { ApiKeyContextProvider } from '@rosen-bridge/shared-contexts';
 
 import { SideBar } from './SideBar';
-import Toolbar from './Toolbar';
+import { Toolbar } from './Toolbar';
 
 import { theme } from './_theme/theme';
 
-import mockedData from './_mock/mockedData';
-import useInfo from './_hooks/useInfo';
+import { mockedData } from './_mock/mockedData';
+import { useInfo } from './_hooks/useInfo';
 import { upperFirst } from 'lodash-es';
 
 const Root = styled('div')(({ theme }) => ({
@@ -72,7 +72,7 @@ interface AppProps {
   children?: React.ReactNode;
 }
 
-const App = ({ children }: AppProps) => {
+export const App = ({ children }: AppProps) => {
   const { data: info } = useInfo();
 
   /**
@@ -126,5 +126,3 @@ const App = ({ children }: AppProps) => {
     </NoSsr>
   );
 };
-
-export default App;
diff --git a/apps/watcher/app/SideBar.tsx b/apps/watcher/app/SideBar.tsx
@@ -10,7 +10,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';
 

diff --git a/apps/watcher/app/Toolbar.tsx b/apps/watcher/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;
diff --git a/apps/watcher/app/_components/HomeActionButton.tsx b/apps/watcher/app/_components/HomeActionButton.tsx
@@ -48,7 +48,7 @@ interface HomeActionButtonProps {
  * @param action
  * @param disabled
  */
-const HomeActionButton = ({
+export const HomeActionButton = ({
   label,
   icon,
   action,
@@ -66,5 +66,3 @@ const HomeActionButton = ({
     </HomeActionButtonBase>
   );
 };
-
-export default HomeActionButton;
diff --git a/apps/watcher/app/_hooks/useERsnToken.ts b/apps/watcher/app/_hooks/useERsnToken.ts
@@ -2,14 +2,14 @@ import useSWR from 'swr';
 
 import { fetcher } from '@rosen-ui/swr-helpers';
 
-import useToken from './useToken';
+import { useToken } from './useToken';
 
 import { ApiInfoResponse } from '@/_types/api';
 
 /**
  * fetch ersn token info (if present)
  */
-const useERsnToken = () => {
+export const useERsnToken = () => {
   const { data: info, isLoading: isInfoLoading } = useSWR<ApiInfoResponse>(
     '/info',
     fetcher,
@@ -24,5 +24,3 @@ const useERsnToken = () => {
     isLoading: isInfoLoading || isERsnInfoLoading,
   };
 };
-
-export default useERsnToken;
diff --git a/apps/watcher/app/_hooks/useInfo.ts b/apps/watcher/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);
diff --git a/apps/watcher/app/_hooks/useRsnToken.ts b/apps/watcher/app/_hooks/useRsnToken.ts
@@ -2,14 +2,14 @@ import useSWR from 'swr';
 
 import { fetcher } from '@rosen-ui/swr-helpers';
 
-import useToken from './useToken';
+import { useToken } from './useToken';
 
 import { ApiInfoResponse } from '@/_types/api';
 
 /**
  * fetch rsn token info (if present)
  */
-const useRsnToken = () => {
+export const useRsnToken = () => {
   const { data: info, isLoading: isInfoLoading } = useSWR<ApiInfoResponse>(
     '/info',
     fetcher,
@@ -24,5 +24,3 @@ const useRsnToken = () => {
     isLoading: isInfoLoading || isRsnInfoLoading,
   };
 };
-
-export default useRsnToken;
diff --git a/apps/watcher/app/_hooks/useToken.ts b/apps/watcher/app/_hooks/useToken.ts
@@ -7,7 +7,7 @@ import { ApiAddressAssetsResponse } from '@/_types/api';
 /**
  * fetch a token info (if present)
  */
-const useToken = (tokenId: string | undefined) => {
+export const useToken = (tokenId: string | undefined) => {
   const { data, isLoading } = useSWR<ApiAddressAssetsResponse>(
     tokenId
       ? [
@@ -25,5 +25,3 @@ const useToken = (tokenId: string | undefined) => {
     isLoading,
   };
 };
-
-export default useToken;
diff --git a/apps/watcher/app/_mock/mockedData.ts b/apps/watcher/app/_mock/mockedData.ts
@@ -386,7 +386,7 @@ const events: ApiEventResponse = {
   items: generateEventRecords(100),
 };
 
-const mockedData: SWRConfigProps['fakeData'] = {
+export const mockedData: SWRConfigProps['fakeData'] = {
   withStringKeys: {
     '/info': info,
     '/health/status': healthStatus,
@@ -429,5 +429,3 @@ const mockedData: SWRConfigProps['fakeData'] = {
     },
   },
 };
-
-export default mockedData;
diff --git a/apps/watcher/app/actions/@form/lock/page.tsx b/apps/watcher/app/actions/@form/lock/page.tsx
@@ -22,16 +22,17 @@ import {
   getTxURL,
 } from '@rosen-ui/utils';
 
-import ConfirmationModal from '../../ConfirmationModal';
-import TokenAmountTextField, {
+import { ConfirmationModal } from '../../ConfirmationModal';
+import {
+  TokenAmountTextField,
   TokenAmountCompatibleFormSchema,
 } from '../../TokenAmountTextField';
 
 import { Alert } from '@rosen-bridge/icons';
 
 import { useApiKey } from '@rosen-bridge/shared-contexts';
-import useRsnToken from '@/_hooks/useRsnToken';
-import useToken from '@/_hooks/useToken';
+import { useRsnToken } from '@/_hooks/useRsnToken';
+import { useToken } from '@/_hooks/useToken';
 
 import {
   ApiPermitRequestBody,

diff --git a/apps/watcher/app/actions/@form/unlock/page.tsx b/apps/watcher/app/actions/@form/unlock/page.tsx
@@ -20,13 +20,14 @@ import { getNonDecimalString } from '@rosen-ui/utils';
 
 import { Alert } from '@rosen-bridge/icons';
 
-import ConfirmationModal from '../../ConfirmationModal';
-import TokenAmountTextField, {
+import { ConfirmationModal } from '../../ConfirmationModal';
+import {
+  TokenAmountTextField,
   TokenAmountCompatibleFormSchema,
 } from '../../TokenAmountTextField';
 
 import { useApiKey } from '@rosen-bridge/shared-contexts';
-import useRsnToken from '@/_hooks/useRsnToken';
+import { useRsnToken } from '@/_hooks/useRsnToken';
 
 import {
   ApiInfoResponse,

diff --git a/apps/watcher/app/actions/@form/withdraw/page.tsx b/apps/watcher/app/actions/@form/withdraw/page.tsx
@@ -30,12 +30,13 @@ import { getNonDecimalString } from '@rosen-ui/utils';
 
 import { Alert } from '@rosen-bridge/icons';
 
-import ConfirmationModal from '../../ConfirmationModal';
-import TokenAmountTextField, {
+import { ConfirmationModal } from '../../ConfirmationModal';
+import {
+  TokenAmountTextField,
   TokenAmountCompatibleFormSchema,
 } from '../../TokenAmountTextField';
 
-import useToken from '@/_hooks/useToken';
+import { useToken } from '@/_hooks/useToken';
 import { useApiKey } from '@rosen-bridge/shared-contexts';
 
 import {

diff --git a/apps/watcher/app/actions/@text/lock/page.tsx b/apps/watcher/app/actions/@text/lock/page.tsx
@@ -7,10 +7,10 @@ import { CircularProgress, Typography } from '@rosen-bridge/ui-kit';
 import { fetcher } from '@rosen-ui/swr-helpers';
 import { getDecimalString } from '@rosen-ui/utils';
 
-import ActionText from '../../ActionText';
+import { ActionText } from '../../ActionText';
 
-import useToken from '@/_hooks/useToken';
-import useRsnToken from '@/_hooks/useRsnToken';
+import { useToken } from '@/_hooks/useToken';
+import { useRsnToken } from '@/_hooks/useRsnToken';
 
 import { ApiInfoResponse } from '@/_types/api';