From 2eb0ce381ae6a4ff728527077bd25690538ca45a Mon Sep 17 00:00:00 2001
From: pierre <dommerc.pierre@gmail.com>
Date: Wed, 8 Feb 2023 16:36:00 +0100
Subject: [PATCH] fix(nym-connect): lint errors

---
 nym-connect/src/components/AppWindowFrame.tsx |  2 +-
 .../src/components/ConnectionStatus.tsx       | 18 +++--
 nym-connect/src/components/CustomTitleBar.tsx | 22 +++---
 .../Growth/TestAndEarnButtonArea.tsx          |  1 -
 .../Growth/context/TestAndEarnContext.tsx     |  1 -
 nym-connect/src/components/HelpPageImage.tsx  |  1 -
 .../src/components/IpAddressAndPortModal.tsx  |  2 +-
 .../components/PowerButton/PowerButton.tsx    |  1 +
 nym-connect/src/context/main.tsx              | 39 ++--------
 nym-connect/src/index.tsx                     |  4 +-
 .../src/pages/connection/Connected.tsx        | 72 +++++++++----------
 .../src/pages/connection/Disconnected.tsx     | 60 ++++++++--------
 nym-connect/src/pages/menu/Apps.tsx           |  8 +--
 nym-connect/src/pages/menu/index.tsx          | 38 +++++-----
 nym-connect/src/routes/index.tsx              | 23 +++---
 nym-connect/src/stories/AppFlow.stories.tsx   |  6 +-
 .../src/stories/ConnectedLayout.stories.tsx   |  4 +-
 .../src/stories/ConnectionButton.stories.tsx  |  2 +-
 .../src/stories/DefaultLayout.stories.tsx     |  2 +-
 19 files changed, 133 insertions(+), 173 deletions(-)

diff --git a/nym-connect/src/components/AppWindowFrame.tsx b/nym-connect/src/components/AppWindowFrame.tsx
index 164ac64baf..4b407c3e7b 100644
--- a/nym-connect/src/components/AppWindowFrame.tsx
+++ b/nym-connect/src/components/AppWindowFrame.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Box } from '@mui/material';
+import { useLocation } from 'react-router-dom';
 import { CustomTitleBar } from './CustomTitleBar';
-import { useLocation, useParams } from 'react-router-dom';
 
 export const AppWindowFrame: FCWithChildren = ({ children }) => {
   const location = useLocation();
diff --git a/nym-connect/src/components/ConnectionStatus.tsx b/nym-connect/src/components/ConnectionStatus.tsx
index 1be1f4487b..0c02ff2585 100644
--- a/nym-connect/src/components/ConnectionStatus.tsx
+++ b/nym-connect/src/components/ConnectionStatus.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { Box, CircularProgress, Tooltip, Typography } from '@mui/material';
 import { DateTime } from 'luxon';
+import { ErrorOutline, InfoOutlined } from '@mui/icons-material';
 import { ConnectionStatusKind, GatewayPerformance } from '../types';
 import { ServiceProvider } from '../types/directory';
 import { GatwayWarningInfo, ServiceProviderInfo } from './TooltipInfo';
-import { ErrorOutline, InfoOutlined } from '@mui/icons-material';
 
 const FONT_SIZE = '14px';
 const FONT_WEIGHT = '600';
@@ -85,14 +85,12 @@ export const ConnectionStatus: FCWithChildren<{
   const color = status === 'connected' || status === 'disconnecting' ? '#21D072' : 'white';
 
   return (
-    <>
-      <Box color={color} sx={{ mb: 2 }}>
-        <ConnectionStatusContent
-          status={status}
-          serviceProvider={serviceProvider}
-          gatewayError={gatewayPerformance !== 'Good'}
-        />
-      </Box>
-    </>
+    <Box color={color} sx={{ mb: 2 }}>
+      <ConnectionStatusContent
+        status={status}
+        serviceProvider={serviceProvider}
+        gatewayError={gatewayPerformance !== 'Good'}
+      />
+    </Box>
   );
 };
diff --git a/nym-connect/src/components/CustomTitleBar.tsx b/nym-connect/src/components/CustomTitleBar.tsx
index 85a89fd540..e7d81aecfa 100644
--- a/nym-connect/src/components/CustomTitleBar.tsx
+++ b/nym-connect/src/components/CustomTitleBar.tsx
@@ -46,16 +46,14 @@ const getTitleIcon = (path: string) => {
   return <NymWordmark width={36} />;
 };
 
-export const CustomTitleBar = ({ path = '/' }: { path?: string }) => {
-  return (
-    <Box data-tauri-drag-region style={customTitleBarStyles.titlebar}>
-      {/* set width to keep logo centered */}
-      <Box sx={{ width: '40px' }}>{path === '/' ? <MenuIcon /> : <ArrowBackIcon />}</Box>
-      {getTitleIcon(path)}
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-        <CustomButton Icon={Minimize} onClick={() => appWindow.minimize()} />
-        <CustomButton Icon={Close} onClick={() => appWindow.close()} />
-      </Box>
+export const CustomTitleBar = ({ path = '/' }: { path?: string }) => (
+  <Box data-tauri-drag-region style={customTitleBarStyles.titlebar}>
+    {/* set width to keep logo centered */}
+    <Box sx={{ width: '40px' }}>{path === '/' ? <MenuIcon /> : <ArrowBackIcon />}</Box>
+    {getTitleIcon(path)}
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+      <CustomButton Icon={Minimize} onClick={() => appWindow.minimize()} />
+      <CustomButton Icon={Close} onClick={() => appWindow.close()} />
     </Box>
-  );
-};
+  </Box>
+);
diff --git a/nym-connect/src/components/Growth/TestAndEarnButtonArea.tsx b/nym-connect/src/components/Growth/TestAndEarnButtonArea.tsx
index ffca05043b..5bf8958c3f 100644
--- a/nym-connect/src/components/Growth/TestAndEarnButtonArea.tsx
+++ b/nym-connect/src/components/Growth/TestAndEarnButtonArea.tsx
@@ -6,7 +6,6 @@ import Content from './content/en.yaml';
 import { useClientContext } from '../../context/main';
 import { useTestAndEarnContext } from './context/TestAndEarnContext';
 import { NymShipyardTheme } from '../../theme';
-import { ConnectionStatusKind } from '../../types';
 
 export const Wrapper: FCWithChildren<{ disabled: boolean }> = ({ disabled, children }) => {
   if (disabled) {
diff --git a/nym-connect/src/components/Growth/context/TestAndEarnContext.tsx b/nym-connect/src/components/Growth/context/TestAndEarnContext.tsx
index 5c4776a4a7..ddf601634f 100644
--- a/nym-connect/src/components/Growth/context/TestAndEarnContext.tsx
+++ b/nym-connect/src/components/Growth/context/TestAndEarnContext.tsx
@@ -4,7 +4,6 @@ import { forage } from '@tauri-apps/tauri-forage';
 import { invoke } from '@tauri-apps/api';
 import { ClientId, DrawEntry, Draws, Registration } from './types';
 import { useClientContext } from '../../../context/main';
-import { ConnectionStatusKind } from '../../../types';
 
 export type TTestAndEarnContext = {
   loadedOnce: boolean;
diff --git a/nym-connect/src/components/HelpPageImage.tsx b/nym-connect/src/components/HelpPageImage.tsx
index 8e9920ca4d..69fa38ca31 100644
--- a/nym-connect/src/components/HelpPageImage.tsx
+++ b/nym-connect/src/components/HelpPageImage.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { Box } from '@mui/material';
 
 export const HelpImage = ({ img, imageDescription }: { img: string; imageDescription: string }) => (
   <img src={img} alt={imageDescription} width="100%" />
diff --git a/nym-connect/src/components/IpAddressAndPortModal.tsx b/nym-connect/src/components/IpAddressAndPortModal.tsx
index 8afe0acd1b..fcb0f1dfaa 100644
--- a/nym-connect/src/components/IpAddressAndPortModal.tsx
+++ b/nym-connect/src/components/IpAddressAndPortModal.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Button, Typography } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import { InfoModal } from './InfoModal';
 import { CopyToClipboard } from './CopyToClipboard';
 
diff --git a/nym-connect/src/components/PowerButton/PowerButton.tsx b/nym-connect/src/components/PowerButton/PowerButton.tsx
index 4e0c690967..34def91f9f 100644
--- a/nym-connect/src/components/PowerButton/PowerButton.tsx
+++ b/nym-connect/src/components/PowerButton/PowerButton.tsx
@@ -66,6 +66,7 @@ export const PowerButton: FCWithChildren<{
           return 'contract';
       }
     }
+    return 'contract';
   }, [status, hover]);
 
   const buttonPulse = () => {
diff --git a/nym-connect/src/context/main.tsx b/nym-connect/src/context/main.tsx
index 625cf7b5fd..8c02df4e41 100644
--- a/nym-connect/src/context/main.tsx
+++ b/nym-connect/src/context/main.tsx
@@ -1,15 +1,12 @@
-import React, { createContext, useCallback, useContext, useEffect, useMemo, useState, useRef } from 'react';
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { DateTime } from 'luxon';
 import { invoke } from '@tauri-apps/api';
-import { forage } from '@tauri-apps/tauri-forage';
 import { Error } from 'src/types/error';
 import { getVersion } from '@tauri-apps/api/app';
+import { useEvents } from 'src/hooks/events';
 import { ConnectionStatusKind, GatewayPerformance } from '../types';
 import { ConnectionStatsItem } from '../components/ConnectionStats';
-import { ServiceProvider, Services } from '../types/directory';
-import { useEvents } from 'src/hooks/events';
-
-const TAURI_EVENT_STATUS_CHANGED = 'app:connection-status-changed';
+import { ServiceProvider } from '../types/directory';
 
 type ModeType = 'light' | 'dark';
 
@@ -53,8 +50,6 @@ export const ClientContextProvider: FCWithChildren = ({ children }) => {
     return version;
   };
 
-  const timerId = useRef<NodeJS.Timeout>();
-
   const initialiseApp = async () => {
     const services = await invoke('get_services');
     const AppVersion = await getAppVersion();
@@ -65,7 +60,7 @@ export const ClientContextProvider: FCWithChildren = ({ children }) => {
   };
 
   useEvents({
-    onError: (error) => setError(error),
+    onError: (e) => setError(e),
     onGatewayPerformanceChange: (performance) => setGatewayPerformance(performance),
     onStatusChange: (status) => setConnectionStatus(status),
   });
@@ -106,30 +101,8 @@ export const ClientContextProvider: FCWithChildren = ({ children }) => {
     }
   };
 
-  const setSpInStorage = async (sp: ServiceProvider) => {
-    await forage.setItem({
-      key: 'nym-connect-sp',
-      value: sp,
-    } as any)();
-  };
-
-  const removeSpFromStorage = async () => {
-    await forage.removeItem({
-      key: 'nym-connect-sp',
-    })();
-  };
-
-  const getSpFromStorage = async (): Promise<ServiceProvider | undefined> => {
-    try {
-      const spFromStorage = await forage.getItem({ key: 'nym-connect-sp' })();
-      return spFromStorage;
-    } catch (e) {
-      console.warn(e);
-    }
-  };
-
-  const getRandomSPFromList = (serviceProviders: ServiceProvider[]) => {
-    const randomSelection = serviceProviders[Math.floor(Math.random() * serviceProviders.length)];
+  const getRandomSPFromList = (services: ServiceProvider[]) => {
+    const randomSelection = services[Math.floor(Math.random() * services.length)];
     return randomSelection;
   };
 
diff --git a/nym-connect/src/index.tsx b/nym-connect/src/index.tsx
index 2498330910..4399c91cf2 100644
--- a/nym-connect/src/index.tsx
+++ b/nym-connect/src/index.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { ErrorBoundary } from 'react-error-boundary';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { GlobalStyles } from '@mui/material';
 import { ClientContextProvider } from './context/main';
 import { ErrorFallback } from './components/Error';
 import { NymMixnetTheme } from './theme';
 import { AppWindowFrame } from './components/AppWindowFrame';
 import { TestAndEarnContextProvider } from './components/Growth/context/TestAndEarnContext';
-import { BrowserRouter as Router } from 'react-router-dom';
 import { AppRoutes } from './routes';
-import { GlobalStyles } from '@mui/material';
 
 const elem = document.getElementById('root');
 
diff --git a/nym-connect/src/pages/connection/Connected.tsx b/nym-connect/src/pages/connection/Connected.tsx
index 5071349ec3..5e06b8828e 100644
--- a/nym-connect/src/pages/connection/Connected.tsx
+++ b/nym-connect/src/pages/connection/Connected.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Box, Stack } from '@mui/material';
 import { DateTime } from 'luxon';
 import { IpAddressAndPortModal } from 'src/components/IpAddressAndPortModal';
@@ -43,40 +43,38 @@ export const Connected: FCWithChildren<{
   clearError,
   onConnectClick,
   closeInfoModal,
-}) => {
-  return (
-    <>
-      {error && <InfoModal show title={error.title} description={error.message} onClose={clearError} />}
-      <IpAddressAndPortModal show={showInfoModal} onClose={closeInfoModal} ipAddress={ipAddress} port={port} />
-      <ConnectionLayout
-        TopContent={
-          <Box>
-            <ConnectionStatus
-              status={ConnectionStatusKind.connected}
-              gatewayPerformance={gatewayPerformance}
-              serviceProvider={serviceProvider}
-            />
-            <ConnectionTimer connectedSince={connectedSince} />
-          </Box>
-        }
-        ConnectButton={
-          <PowerButton
-            status={status}
-            busy={busy}
-            onClick={onConnectClick}
-            isError={isError}
-            disabled={status === 'disconnecting'}
+}) => (
+  <>
+    {error && <InfoModal show title={error.title} description={error.message} onClose={clearError} />}
+    <IpAddressAndPortModal show={showInfoModal} onClose={closeInfoModal} ipAddress={ipAddress} port={port} />
+    <ConnectionLayout
+      TopContent={
+        <Box>
+          <ConnectionStatus
+            status={ConnectionStatusKind.connected}
+            gatewayPerformance={gatewayPerformance}
+            serviceProvider={serviceProvider}
           />
-        }
-        BottomContent={
-          <Stack justifyContent="space-between">
-            <Box sx={{ mb: 2 }}>
-              <IpAddressAndPort label="Socks5 address" ipAddress={ipAddress} port={port} />
-            </Box>
-            <ExperimentalWarning />
-          </Stack>
-        }
-      />
-    </>
-  );
-};
+          <ConnectionTimer connectedSince={connectedSince} />
+        </Box>
+      }
+      ConnectButton={
+        <PowerButton
+          status={status}
+          busy={busy}
+          onClick={onConnectClick}
+          isError={isError}
+          disabled={status === 'disconnecting'}
+        />
+      }
+      BottomContent={
+        <Stack justifyContent="space-between">
+          <Box sx={{ mb: 2 }}>
+            <IpAddressAndPort label="Socks5 address" ipAddress={ipAddress} port={port} />
+          </Box>
+          <ExperimentalWarning />
+        </Stack>
+      }
+    />
+  </>
+);
diff --git a/nym-connect/src/pages/connection/Disconnected.tsx b/nym-connect/src/pages/connection/Disconnected.tsx
index 781f49eb85..127a245d4e 100644
--- a/nym-connect/src/pages/connection/Disconnected.tsx
+++ b/nym-connect/src/pages/connection/Disconnected.tsx
@@ -20,34 +20,32 @@ export const Disconnected: FCWithChildren<{
   serviceProvider?: ServiceProvider;
   clearError: () => void;
   onConnectClick: (status: ConnectionStatusKind) => void;
-}> = ({ status, error, onConnectClick, clearError }) => {
-  return (
-    <>
-      {error && <InfoModal show title={error.title} description={error.message} onClose={clearError} />}
-      <ConnectionLayout
-        TopContent={
-          <Box>
-            <ConnectionStatus status={ConnectionStatusKind.disconnected} gatewayPerformance="Good" />
-            <ConnectionTimer />
-          </Box>
-        }
-        ConnectButton={<PowerButton onClick={onConnectClick} status={status} disabled={status === 'connecting'} />}
-        BottomContent={
-          <Stack justifyContent="space-between" pt={1}>
-            <Typography
-              fontWeight={600}
-              textTransform="uppercase"
-              textAlign="center"
-              fontSize="12px"
-              sx={{ wordSpacing: 1.5, letterSpacing: 1.5 }}
-              color="warning.main"
-            >
-              You are not protected
-            </Typography>
-            <ExperimentalWarning />
-          </Stack>
-        }
-      />
-    </>
-  );
-};
+}> = ({ status, error, onConnectClick, clearError }) => (
+  <>
+    {error && <InfoModal show title={error.title} description={error.message} onClose={clearError} />}
+    <ConnectionLayout
+      TopContent={
+        <Box>
+          <ConnectionStatus status={ConnectionStatusKind.disconnected} gatewayPerformance="Good" />
+          <ConnectionTimer />
+        </Box>
+      }
+      ConnectButton={<PowerButton onClick={onConnectClick} status={status} disabled={status === 'connecting'} />}
+      BottomContent={
+        <Stack justifyContent="space-between" pt={1}>
+          <Typography
+            fontWeight={600}
+            textTransform="uppercase"
+            textAlign="center"
+            fontSize="12px"
+            sx={{ wordSpacing: 1.5, letterSpacing: 1.5 }}
+            color="warning.main"
+          >
+            You are not protected
+          </Typography>
+          <ExperimentalWarning />
+        </Stack>
+      }
+    />
+  </>
+);
diff --git a/nym-connect/src/pages/menu/Apps.tsx b/nym-connect/src/pages/menu/Apps.tsx
index fb73d0b343..ebe31deb44 100644
--- a/nym-connect/src/pages/menu/Apps.tsx
+++ b/nym-connect/src/pages/menu/Apps.tsx
@@ -19,8 +19,8 @@ export const CompatibleApps = () => (
     <Divider sx={{ mb: 2 }} />
 
     <Box sx={{ mb: 4 }}>
-      {appsSchema.messagingApps.map((app, i) => (
-        <Typography variant="body2" color="grey.400" sx={{ mb: 2 }} key={i}>
+      {appsSchema.messagingApps.map((app) => (
+        <Typography variant="body2" color="grey.400" sx={{ mb: 2 }} key={app}>
           {app}
         </Typography>
       ))}
@@ -32,8 +32,8 @@ export const CompatibleApps = () => (
     <Divider sx={{ mb: 2 }} />
 
     <Box sx={{ mb: 4 }}>
-      {appsSchema.wallets.map((wallet, i) => (
-        <Typography variant="body2" color="grey.400" sx={{ mb: 2 }} key={i}>
+      {appsSchema.wallets.map((wallet) => (
+        <Typography variant="body2" color="grey.400" sx={{ mb: 2 }} key={wallet}>
           {wallet}
         </Typography>
       ))}
diff --git a/nym-connect/src/pages/menu/index.tsx b/nym-connect/src/pages/menu/index.tsx
index 156ab061e4..a4cac1bf20 100644
--- a/nym-connect/src/pages/menu/index.tsx
+++ b/nym-connect/src/pages/menu/index.tsx
@@ -9,22 +9,22 @@ const menuSchema = [
   { title: 'How to connect guide', icon: HelpOutline, path: 'guide' },
 ];
 
-export const Menu = () => {
-  return (
-    <Stack justifyContent="space-between" height="100%">
-      <List dense disablePadding>
-        {menuSchema.map((item) => (
-          <Link component={RouterLink} to={item.path} underline="none" color="white">
-            <ListItem disablePadding>
-              <ListItemButton>
-                <ListItemIcon sx={{ minWidth: 25 }}>{<item.icon sx={{ fontSize: '12px' }} />}</ListItemIcon>{' '}
-                <ListItemText>{item.title}</ListItemText>
-              </ListItemButton>
-            </ListItem>
-          </Link>
-        ))}
-      </List>
-      <AppVersion />
-    </Stack>
-  );
-};
+export const Menu = () => (
+  <Stack justifyContent="space-between" height="100%">
+    <List dense disablePadding>
+      {menuSchema.map((item) => (
+        <Link component={RouterLink} to={item.path} underline="none" color="white">
+          <ListItem disablePadding>
+            <ListItemButton>
+              <ListItemIcon sx={{ minWidth: 25 }}>
+                <item.icon sx={{ fontSize: '12px' }} />
+              </ListItemIcon>{' '}
+              <ListItemText>{item.title}</ListItemText>
+            </ListItemButton>
+          </ListItem>
+        </Link>
+      ))}
+    </List>
+    <AppVersion />
+  </Stack>
+);
diff --git a/nym-connect/src/routes/index.tsx b/nym-connect/src/routes/index.tsx
index 37bb876d91..ffb0881876 100644
--- a/nym-connect/src/routes/index.tsx
+++ b/nym-connect/src/routes/index.tsx
@@ -1,18 +1,17 @@
+import React from 'react';
 import { Routes, Route } from 'react-router-dom';
 import { ConnectionPage } from 'src/pages/connection';
 import { Menu } from 'src/pages/menu';
 import { CompatibleApps } from 'src/pages/menu/Apps';
 import { HelpGuide } from 'src/pages/menu/Guide';
 
-export const AppRoutes = () => {
-  return (
-    <Routes>
-      <Route index path="/" element={<ConnectionPage />} />
-      <Route path="menu">
-        <Route index element={<Menu />} />
-        <Route path="apps" element={<CompatibleApps />} />
-        <Route path="guide" element={<HelpGuide />} />
-      </Route>
-    </Routes>
-  );
-};
+export const AppRoutes = () => (
+  <Routes>
+    <Route index path="/" element={<ConnectionPage />} />
+    <Route path="menu">
+      <Route index element={<Menu />} />
+      <Route path="apps" element={<CompatibleApps />} />
+      <Route path="guide" element={<HelpGuide />} />
+    </Route>
+  </Routes>
+);
diff --git a/nym-connect/src/stories/AppFlow.stories.tsx b/nym-connect/src/stories/AppFlow.stories.tsx
index 05c63f9403..c00cb2aa9e 100644
--- a/nym-connect/src/stories/AppFlow.stories.tsx
+++ b/nym-connect/src/stories/AppFlow.stories.tsx
@@ -2,12 +2,12 @@ import React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { Box } from '@mui/material';
 import { DateTime } from 'luxon';
-import { AppWindowFrame } from '../components/AppWindowFrame';
-import { useClientContext } from '../context/main';
-import { Services } from '../types/directory';
 import { Disconnected } from 'src/pages/connection/Disconnected';
 import { Connected } from 'src/pages/connection/Connected';
 import { ConnectionStatusKind } from 'src/types';
+import { AppWindowFrame } from '../components/AppWindowFrame';
+import { useClientContext } from '../context/main';
+import { Services } from '../types/directory';
 
 export default {
   title: 'App/Flow',
diff --git a/nym-connect/src/stories/ConnectedLayout.stories.tsx b/nym-connect/src/stories/ConnectedLayout.stories.tsx
index f6d744f68c..426252dc63 100644
--- a/nym-connect/src/stories/ConnectedLayout.stories.tsx
+++ b/nym-connect/src/stories/ConnectedLayout.stories.tsx
@@ -18,9 +18,7 @@ export const Default: ComponentStory<typeof Connected> = () => (
       clearError={() => {}}
       gatewayPerformance="Good"
       showInfoModal={false}
-      closeInfoModal={() => {
-        return undefined;
-      }}
+      closeInfoModal={() => undefined}
       status={ConnectionStatusKind.connected}
       connectedSince={DateTime.now()}
       ipAddress="127.0.0.1"
diff --git a/nym-connect/src/stories/ConnectionButton.stories.tsx b/nym-connect/src/stories/ConnectionButton.stories.tsx
index d1aa35b0b5..6fcf7530ad 100644
--- a/nym-connect/src/stories/ConnectionButton.stories.tsx
+++ b/nym-connect/src/stories/ConnectionButton.stories.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { ConnectionButton } from '../components/ConnectionButton';
 import { ConnectionStatusKind } from 'src/types';
+import { ConnectionButton } from '../components/ConnectionButton';
 
 export default {
   title: 'Components/ConnectionButton',
diff --git a/nym-connect/src/stories/DefaultLayout.stories.tsx b/nym-connect/src/stories/DefaultLayout.stories.tsx
index e7362ae685..4d1b869a10 100644
--- a/nym-connect/src/stories/DefaultLayout.stories.tsx
+++ b/nym-connect/src/stories/DefaultLayout.stories.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { Box } from '@mui/material';
-import { ConnectionStatusKind } from '../types';
 import { Disconnected } from 'src/pages/connection/Disconnected';
+import { ConnectionStatusKind } from '../types';
 
 export default {
   title: 'Layouts/DefaultLayout',