GRIN/nym
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(nym-connect): lint errors

Browse Source
This commit is contained in:
pierre
2023-02-08 16:36:00 +01:00
parent 5217edcca3
commit 2eb0ce381a
19 changed files with 133 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nym-connect/src/components/AppWindowFrame.tsx
+1 -1
View File
@@ -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();
nym-connect/src/components/ConnectionStatus.tsx
+8 -10
View File
@@ -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>
);
};
nym-connect/src/components/CustomTitleBar.tsx
+10 -12
View File
@@ -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>
);
nym-connect/src/components/Growth/TestAndEarnButtonArea.tsx
-1
View File
@@ -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) {
nym-connect/src/components/Growth/context/TestAndEarnContext.tsx
-1
View File
@@ -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;
nym-connect/src/components/HelpPageImage.tsx
-1
View File
@@ -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%" />
nym-connect/src/components/IpAddressAndPortModal.tsx
+1 -1
View File
@@ -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';
nym-connect/src/components/PowerButton/PowerButton.tsx
+1
View File
@@ -66,6 +66,7 @@ export const PowerButton: FCWithChildren<{
return 'contract';
}
}
return 'contract';
}, [status, hover]);
const buttonPulse = () => {
nym-connect/src/context/main.tsx
+6 -33
View File
@@ -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;
};
nym-connect/src/index.tsx
+2 -2
View File
@@ -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');
nym-connect/src/pages/connection/Connected.tsx
+35 -37
View File
@@ -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>
}
/>
</>
);
nym-connect/src/pages/connection/Disconnected.tsx
+29 -31
View File
@@ -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>
}
/>
</>
);
nym-connect/src/pages/menu/Apps.tsx
+4 -4
View File
@@ -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>
))}
nym-connect/src/pages/menu/index.tsx
+19 -19
View File
@@ -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>
);
nym-connect/src/routes/index.tsx
+11 -12
View File
@@ -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>
);
nym-connect/src/stories/AppFlow.stories.tsx
+3 -3
View File
@@ -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',
nym-connect/src/stories/ConnectedLayout.stories.tsx
+1 -3
View File
@@ -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"
nym-connect/src/stories/ConnectionButton.stories.tsx
+1 -1
View File
@@ -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',
nym-connect/src/stories/DefaultLayout.stories.tsx
+1 -1
View File
@@ -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',