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

lint fixes

Browse Source
This commit is contained in:
Mark Sinclair
2022-03-10 12:20:26 +00:00
parent 9e932defb4
commit 6bda9ae5f7
17 changed files with 161 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files
nym-wallet/src/components/AppBar.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
import { AppBar as MuiAppBar, Grid, IconButton, Toolbar } from '@mui/material';
import { Logout } from '@mui/icons-material';
import { ClientContext } from '../context/main';
import { NetworkSelector } from '.';
import { NetworkSelector } from './NetworkSelector';
import { Node as NodeIcon } from '../svg-icons/node';
export const AppBar = () => {
nym-wallet/src/components/ClientAddress.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import React, { useContext } from 'react';
import { Box, Typography } from '@mui/material';
import { ClientContext } from '../context/main';
import { CopyToClipboard } from '.';
import { CopyToClipboard } from './CopyToClipboard';
import { splice } from '../utils';
export const ClientAddress = ({ withCopy }: { withCopy?: boolean }) => {
nym-wallet/src/pages/balance/components/vesting-timeline.tsx
+11 -10
View File
@@ -1,3 +1,4 @@
/* eslint-disable react/no-array-index-key */
import React, { useContext } from 'react';
import { Box, Tooltip, Typography } from '@mui/material';
import { format } from 'date-fns';
@@ -5,6 +6,16 @@ import { ClientContext } from '../../../context/main';
const calculateMarkerPosition = (arrLength: number, index: number) => (1 / arrLength) * 100 * index;
const Marker: React.FC<{ tooltipText: string; color: string; position: string }> = ({
tooltipText,
color,
position,
}) => (
<Tooltip title={tooltipText}>
<rect x={position} width="4" height="12" rx="1" fill={color} style={{ cursor: 'pointer' }} />
</Tooltip>
);
export const VestingTimeline: React.FC<{ percentageComplete: number }> = ({ percentageComplete }) => {
const {
userBalance: { currentVestingPeriod, vestingAccountInfo },
@@ -42,13 +53,3 @@ export const VestingTimeline: React.FC<{ percentageComplete: number }> = ({ perc
</Box>
);
};
const Marker: React.FC<{ tooltipText: string; color: string; position: string }> = ({
tooltipText,
color,
position,
}) => (
<Tooltip title={tooltipText}>
<rect x={position} width="4" height="12" rx="1" fill={color} style={{ cursor: 'pointer' }} />
</Tooltip>
);
nym-wallet/src/pages/balance/vesting.tsx
+105 -105
View File
@@ -1,27 +1,124 @@
import React, { useEffect, useContext, useState } from 'react';
import React, { useContext, useEffect, useMemo, useState } from 'react';
import {
IconButton,
Box,
Button,
CircularProgress,
LinearProgress,
Grid,
IconButton,
Table,
TableCell,
TableCellProps,
TableContainer,
TableHead,
TableRow,
Typography,
Box,
Button,
TableCellProps,
Grid,
} from '@mui/material';
import { InfoOutlined, Refresh } from '@mui/icons-material';
import { useSnackbar } from 'notistack';
import { NymCard, InfoTooltip, Title, Fee } from '../../components';
import { Fee, InfoTooltip, NymCard, Title } from '../../components';
import { ClientContext } from '../../context/main';
import { withdrawVestedCoins } from '../../requests';
import { Period } from '../../types';
import { VestingTimeline } from './components/vesting-timeline';
const columnsHeaders: Array<{ title: string; align: TableCellProps['align'] }> = [
{ title: 'Locked', align: 'left' },
{ title: 'Period', align: 'left' },
{ title: 'Percentage Vested', align: 'left' },
{ title: 'Unlocked', align: 'right' },
];
const vestingPeriod = (current?: Period, original?: number) => {
if (current === 'After') return 'Complete';
if (typeof current === 'object' && typeof original === 'number') return `${current.In + 1}/${original}`;
return 'N/A';
};
const VestingSchedule = () => {
const { userBalance, currency } = useContext(ClientContext);
const [vestedPercentage, setVestedPercentage] = useState(0);
const calculatePercentage = () => {
const { tokenAllocation, originalVesting } = userBalance;
if (tokenAllocation?.vesting && tokenAllocation.vested && tokenAllocation.vested !== '0' && originalVesting) {
const percentage = (+tokenAllocation.vested / +originalVesting.amount.amount) * 100;
const rounded = percentage.toFixed(2);
setVestedPercentage(+rounded);
} else {
setVestedPercentage(0);
}
};
useEffect(() => {
calculatePercentage();
}, [userBalance.tokenAllocation, calculatePercentage]);
return (
<TableContainer>
<Table>
<TableHead>
<TableRow>
{columnsHeaders.map((header) => (
<TableCell key={header.title} sx={{ color: 'grey.500' }} align={header.align}>
{header.title}
</TableCell>
))}
</TableRow>
<TableRow>
<TableCell sx={{ borderBottom: 'none' }}>
{userBalance.tokenAllocation?.vesting || 'n/a'} / {userBalance.originalVesting?.amount.amount}{' '}
{currency?.major}
</TableCell>
<TableCell align="left" sx={{ borderBottom: 'none' }}>
{vestingPeriod(userBalance.currentVestingPeriod, userBalance.originalVesting?.number_of_periods)}
</TableCell>
<TableCell sx={{ borderBottom: 'none' }}>
<Box display="flex" alignItems="center" gap={1}>
<Typography variant="body2">{`${vestedPercentage}%`}</Typography>
<VestingTimeline percentageComplete={vestedPercentage} />
</Box>
</TableCell>
<TableCell sx={{ borderBottom: 'none' }} align="right">
{userBalance.tokenAllocation?.vested || 'n/a'} / {userBalance.originalVesting?.amount.amount}{' '}
{currency?.major}
</TableCell>
</TableRow>
</TableHead>
</Table>
</TableContainer>
);
};
const TokenTransfer = () => {
const { userBalance, currency } = useContext(ClientContext);
const icon = useMemo(
() => (
<Box sx={{ display: 'flex', mr: 1 }}>
<InfoTooltip title="Unlocked tokens that are available to transfer to your balance" size="medium" />
</Box>
),
[],
);
return (
<Grid container sx={{ my: 2 }} direction="column" spacing={2}>
<Grid item>
<Title title="Transfer unlocked tokens" Icon={icon} />
</Grid>
<Grid item>
<Typography variant="subtitle2" sx={{ color: 'grey.500', mt: 2 }}>
Transferable tokens
</Typography>
<Typography data-testid="refresh-success" sx={{ color: 'nym.background.dark' }} variant="h5" fontWeight="700">
{userBalance.tokenAllocation?.spendable || 'n/a'} {currency?.major}
</Typography>
</Grid>
</Grid>
);
};
export const VestingCard = () => {
const { userBalance } = useContext(ClientContext);
const [isLoading, setIsLoading] = useState(false);
@@ -87,100 +184,3 @@ export const VestingCard = () => {
</NymCard>
);
};
const columnsHeaders: Array<{ title: string; align: TableCellProps['align'] }> = [
{ title: 'Locked', align: 'left' },
{ title: 'Period', align: 'left' },
{ title: 'Percentage Vested', align: 'left' },
{ title: 'Unlocked', align: 'right' },
];
const VestingSchedule = () => {
const { userBalance, currency } = useContext(ClientContext);
const [vestedPercentage, setVestedPercentage] = useState(0);
const calculatePercentage = () => {
const { tokenAllocation, originalVesting } = userBalance;
if (tokenAllocation?.vesting && tokenAllocation.vested && tokenAllocation.vested !== '0' && originalVesting) {
const percentage = (+tokenAllocation.vested / +originalVesting?.amount.amount) * 100;
const rounded = percentage.toFixed(2);
setVestedPercentage(+rounded);
} else {
setVestedPercentage(0);
}
};
useEffect(() => {
calculatePercentage();
}, [userBalance.tokenAllocation, calculatePercentage]);
return (
<TableContainer>
<Table>
<TableHead>
<TableRow>
{columnsHeaders.map((header) => (
<TableCell key={header.title} sx={{ color: 'grey.500' }} align={header.align}>
{header.title}
</TableCell>
))}
</TableRow>
<TableRow>
<TableCell sx={{ borderBottom: 'none' }}>
{userBalance.tokenAllocation?.vesting || 'n/a'} / {userBalance.originalVesting?.amount.amount}{' '}
{currency?.major}
</TableCell>
<TableCell align="left" sx={{ borderBottom: 'none' }}>
{vestingPeriod(userBalance.currentVestingPeriod, userBalance.originalVesting?.number_of_periods)}
</TableCell>
<TableCell sx={{ borderBottom: 'none' }}>
<Box display="flex" alignItems="center" gap={1}>
<Typography variant="body2">{`${vestedPercentage}%`}</Typography>
<VestingTimeline percentageComplete={vestedPercentage} />
</Box>
</TableCell>
<TableCell sx={{ borderBottom: 'none' }} align="right">
{userBalance.tokenAllocation?.vested || 'n/a'} / {userBalance.originalVesting?.amount.amount}{' '}
{currency?.major}
</TableCell>
</TableRow>
</TableHead>
</Table>
</TableContainer>
);
};
const vestingPeriod = (current?: Period, original?: number) => {
if (current === 'After') return 'Complete';
if (typeof current === 'object' && typeof original === 'number') return `${current.In + 1}/${original}`;
return 'N/A';
};
const TokenTransfer = () => {
const { userBalance, currency } = useContext(ClientContext);
return (
<Grid container sx={{ my: 2 }} direction="column" spacing={2}>
<Grid item>
<Title
title="Transfer unlocked tokens"
Icon={() => (
<Box sx={{ display: 'flex', mr: 1 }}>
<InfoTooltip title="Unlocked tokens that are available to transfer to your balance" size="medium" />
</Box>
)}
/>
</Grid>
<Grid item>
<Typography variant="subtitle2" sx={{ color: 'grey.500', mt: 2 }}>
Transferable tokens
</Typography>
<Typography data-testid="refresh-success" sx={{ color: 'nym.background.dark' }} variant="h5" fontWeight="700">
{userBalance.tokenAllocation?.spendable || 'n/a'} {currency?.major}
</Typography>
</Grid>
</Grid>
);
};
nym-wallet/src/pages/bond/BondForm.tsx
-2
View File
@@ -9,7 +9,6 @@ import {
Grid,
InputAdornment,
TextField,
Typography,
} from '@mui/material';
import { yupResolver } from '@hookform/resolvers/yup';
import { useForm } from 'react-hook-form';
@@ -278,7 +277,6 @@ export const BondForm = ({
shouldValidate: true,
});
setValue('withAdvancedOptions', false);
resizeTo;
} else {
setValue('withAdvancedOptions', true);
}
nym-wallet/src/pages/bond/SuccessView.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import React, { useContext } from 'react';
import { Box } from '@mui/system';
import { Box } from '@mui/material';
import { SuccessReponse, TransactionDetails } from '../../components';
import { ClientContext } from '../../context/main';
nym-wallet/src/pages/bond/validationSchema.ts
+6 -4
View File
@@ -22,7 +22,7 @@ export const validationSchema = Yup.object().shape({
profitMarginPercent: Yup.number().required('Profit Percentage is required').min(0).max(100),
amount: Yup.string()
.required('An amount is required')
.test('valid-amount', 'Pledge error', async function (value) {
.test('valid-amount', 'Pledge error', async (value) => {
const isValid = await validateAmount(value || '', '100000000');
if (!isValid) {
@@ -41,11 +41,13 @@ export const validationSchema = Yup.object().shape({
version: Yup.string()
.required('A version is required')
.test('valid-version', 'A valid version is required', (value) => (value ? validateVersion(value) : false)),
location: Yup.lazy((value) => {
if (value) {
location: Yup.lazy((locationValue) => {
if (locationValue) {
return Yup.string()
.required('A location is required')
.test('valid-location', 'A valid version is required', (value) => (value ? validateLocation(value) : false));
.test('valid-location', 'A valid version is required', (locationValueTest) =>
locationValueTest ? validateLocation(locationValueTest) : false,
);
}
return Yup.mixed().notRequired();
}),
nym-wallet/src/pages/delegate/DelegateForm.tsx
+3 -5
View File
@@ -1,5 +1,5 @@
import React, { useContext } from 'react';
import { Box, Button, CircularProgress, FormControl, Grid, InputAdornment, TextField, Typography } from '@mui/material';
import { Box, Button, CircularProgress, FormControl, Grid, InputAdornment, TextField } from '@mui/material';
import { yupResolver } from '@hookform/resolvers/yup';
import { useForm } from 'react-hook-form';
import { EnumNodeType } from '../../types';
@@ -30,7 +30,6 @@ export const DelegateForm = ({
}) => {
const {
register,
watch,
handleSubmit,
setError,
formState: { errors, isSubmitting },
@@ -39,16 +38,15 @@ export const DelegateForm = ({
resolver: yupResolver(validationSchema),
});
const watchNodeType = watch('nodeType', defaultValues.nodeType);
const { userBalance, currency } = useContext(ClientContext);
const onSubmit = async (data: TDelegateForm) => {
const hasEnoughFunds = await checkHasEnoughFunds(data.amount);
if (!hasEnoughFunds) {
return setError('amount', {
setError('amount', {
message: 'Not enough funds in wallet',
});
return;
}
const amount = await majorToMinor(data.amount);
nym-wallet/src/pages/delegate/SuccessView.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import React, { useContext } from 'react';
import { Box } from '@mui/system';
import { Box } from '@mui/material';
import { SuccessReponse, TransactionDetails } from '../../components';
import { ClientContext } from '../../context/main';
nym-wallet/src/pages/internal-docs/DocEntry.tsx
+11 -8
View File
@@ -1,9 +1,10 @@
/* eslint-disable react/destructuring-assignment */
import React from 'react';
import { Button, Card, CardContent, TextField } from '@mui/material';
import { invoke } from '@tauri-apps/api';
interface DocEntryProps {
func: FunctionDef;
function: FunctionDef;
}
interface FunctionDef {
@@ -25,21 +26,19 @@ function collectArgs(functionName: string, args: ArgDef[]) {
const elem: HTMLElement | null = document.getElementById(argKey(functionName, arg.name));
if (arg.type === 'object') {
console.log(arg);
invokeArgs[arg.name] = JSON.parse((elem as HTMLInputElement).value);
} else {
invokeArgs[arg.name] = (elem as HTMLInputElement).value || '';
}
});
console.log(invokeArgs);
return invokeArgs;
}
export const DocEntry = ({ func }: DocEntryProps) => {
export const DocEntry: React.FC<DocEntryProps> = (props) => {
const [card, setCard] = React.useState(<Card />);
const onClick = () => {
invoke(func.name, collectArgs(func.name, func.args))
invoke(props.function.name, collectArgs(props.function.name, props.function.args))
.then((result) => {
setCard(
<Card>
@@ -59,14 +58,18 @@ export const DocEntry = ({ func }: DocEntryProps) => {
return (
<div>
<Button variant="contained" color="primary" size="small" disableElevation onClick={onClick}>
{func.name}
{props.function.name}
</Button>
<Button variant="contained" size="small" disableElevation onClick={() => setCard(<Card />)}>
X
</Button>
<div>
{func.args.map((arg) => (
<TextField label={arg.name} id={argKey(func.name, arg.name)} key={argKey(func.name, arg.name)} />
{props.function.args.map((arg) => (
<TextField
label={arg.name}
id={argKey(props.function.name, arg.name)}
key={argKey(props.function.name, arg.name)}
/>
))}
</div>
<br />
nym-wallet/src/pages/send/SendReview.tsx
+9 -9
View File
@@ -3,6 +3,15 @@ import { Card, Divider, Grid, Typography } from '@mui/material';
import { useFormContext } from 'react-hook-form';
import { ClientContext } from '../../context/main';
const SendReviewField = ({ title, subtitle, info }: { title: string; subtitle?: string; info?: boolean }) => (
<>
<Typography sx={{ color: info ? 'nym.fee' : '' }}>{title}</Typography>
<Typography data-testid={title} sx={{ color: info ? 'nym.fee' : '', wordBreak: 'break-all' }}>
{subtitle}
</Typography>
</>
);
export const SendReview = ({ transferFee }: { transferFee?: string }) => {
const { getValues } = useFormContext();
const { clientDetails, currency } = useContext(ClientContext);
@@ -46,12 +55,3 @@ export const SendReview = ({ transferFee }: { transferFee?: string }) => {
</Card>
);
};
export const SendReviewField = ({ title, subtitle, info }: { title: string; subtitle?: string; info?: boolean }) => (
<>
<Typography sx={{ color: info ? 'nym.fee' : '' }}>{title}</Typography>
<Typography data-testid={title} sx={{ color: info ? 'nym.fee' : '', wordBreak: 'break-all' }}>
{subtitle}
</Typography>
</>
);
nym-wallet/src/pages/send/SendWizard.tsx
+7 -5
View File
@@ -69,7 +69,8 @@ export const SendWizard = () => {
methods.setError('amount', {
message: 'Not enough funds in wallet',
});
return handlePreviousStep();
handlePreviousStep();
return;
}
setIsLoading(true);
setActiveStep((s) => s + 1);
@@ -81,6 +82,7 @@ export const SendWizard = () => {
memo: formState.memo,
})
.then((res: TauriTxResult) => {
// eslint-disable-next-line @typescript-eslint/naming-convention
const { details, tx_hash } = res;
setActiveStep((s) => s + 1);
@@ -95,7 +97,7 @@ export const SendWizard = () => {
.catch((e) => {
setRequestError(e);
setIsLoading(false);
console.log(e);
console.error(e);
});
};
@@ -108,8 +110,8 @@ export const SendWizard = () => {
p: 2,
}}
>
{steps.map((s, i) => (
<Step key={i}>
{steps.map((s) => (
<Step key={s}>
<StepLabel>{s}</StepLabel>
</Step>
))}
@@ -125,7 +127,7 @@ export const SendWizard = () => {
}}
>
{activeStep === 0 ? (
<SendForm transferFee={transferFee} />
<SendForm />
) : activeStep === 1 ? (
<SendReview transferFee={transferFee} />
) : (
nym-wallet/src/pages/settings/index.tsx
+1 -1
View File
@@ -36,7 +36,7 @@ export const Settings = () => {
<Tabs tabs={tabs} selectedTab={selectedTab} onChange={handleTabChange} disabled={!mixnodeDetails} />
{!mixnodeDetails && (
<Alert severity="info" sx={{ m: 4 }}>
You don't currently have a node running
You do not currently have a node running
</Alert>
)}
{selectedTab === 0 && mixnodeDetails && <Profile />}
nym-wallet/src/pages/settings/profile.tsx
+1 -2
View File
@@ -1,6 +1,5 @@
import React, { useContext } from 'react';
import { Button, Divider, Stack, TextField, Typography } from '@mui/material';
import { Box } from '@mui/system';
import { Box, Button, Divider, Stack, TextField, Typography } from '@mui/material';
import { ClientContext } from '../../context/main';
export const Profile = () => {
nym-wallet/src/pages/settings/system-variables.tsx
+1 -1
View File
@@ -82,7 +82,7 @@ export const SystemVariables = ({
setNodeUpdateResponse('success');
} catch (e) {
setNodeUpdateResponse('failed');
console.log(e);
console.error(e);
}
};
nym-wallet/src/pages/settings/tabs.tsx
+2 -2
View File
@@ -13,8 +13,8 @@ export const Tabs: React.FC<{
sx={{ bgcolor: 'grey.200', borderTop: '1px solid', borderBottom: '1px solid', borderColor: 'grey.300' }}
textColor="inherit"
>
{tabs.map((tabName, index) => (
<Tab key={index} label={tabName} sx={{ textTransform: 'capitalize' }} disabled={disabled} />
{tabs.map((tabName) => (
<Tab key={tabName} label={tabName} sx={{ textTransform: 'capitalize' }} disabled={disabled} />
))}
</MuiTabs>
);
nym-wallet/src/types/rust/index.ts
-2
View File
@@ -7,8 +7,6 @@ export * from './gateway';
export * from './inclusionprobabilityresponse';
export * from './mixnode';
export * from './mixnodestatus';
export * from './mixnodestatus';
export * from './mixnodestatusresponse';
export * from './mixnodestatusresponse';
export * from './network';
export * from './operation';