Skip to content

Commit

Permalink
feat: review fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@belopash
belopash committed Dec 2, 2024
1 parent e13d5e5 commit e8a3a3f
Show file tree
Hide file tree
Showing 9 changed files with 99 additions and 55 deletions.
2 changes: 1 addition & 1 deletion src/lib/formatters/formatters.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const formatter8 = new Intl.NumberFormat('en', {
});

export function numberWithCommasFormatter(val?: number | bigint | string) {
if (val === undefined) return '';
if (!val) return '0';

return formatter8.format(typeof val === 'string' ? Number(val) : val);
}
Expand Down
6 changes: 3 additions & 3 deletions src/pages/GatewaysPage/AddNewGateway.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React, { useMemo, useState } from 'react';
import { peerIdToHex } from '@lib/network';
import { Add } from '@mui/icons-material';
import { LoadingButton } from '@mui/lab';
import { Alert, SxProps } from '@mui/material';
import { SxProps } from '@mui/material';
import { useFormik } from 'formik';
import toast from 'react-hot-toast';
import { useClient } from 'wagmi';
Expand Down Expand Up @@ -117,7 +117,7 @@ export function AddGatewayDialog({

onClose();
} catch (e: unknown) {
toast.custom(<Alert color="error">{errorMessage(e)}</Alert>);
toast.error(errorMessage(e));
}
},
});
Expand Down Expand Up @@ -160,7 +160,7 @@ export function AddGatewayDialog({
showErrorOnlyOfTouched
id="peerId"
label={
<HelpTooltip title="Lorem ipsum dolor sit amet consectetur adipisicing elit">
<HelpTooltip title="A PeerID is a unique identifier that distinguishes one peer from another within the SQD Network">
<span>Peer ID</span>
</HelpTooltip>
}
Expand Down
9 changes: 4 additions & 5 deletions src/pages/GatewaysPage/GatewayStake.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export const stakeSchema = yup.object({
.label('Amount')
.required()
.positive()
.max(yup.ref('max'))
.max(yup.ref('max'), 'Insufficient balance')
.min(yup.ref('min'))
.typeError('${path} is invalid'),
max: yup.string().label('Max').required().typeError('${path} is invalid'),
Expand Down Expand Up @@ -183,6 +183,7 @@ export function GatewayStakeDialog({
onClose();
} catch (e: unknown) {
toast.error(errorMessage(e));
// toast.error(errorMessage(e));
}
},
});
Expand Down Expand Up @@ -323,9 +324,7 @@ export function GatewayStakeDialog({
id="durationBlocks"
label={
// TODO: add tooltip text
<HelpTooltip title="Lorem ipsum dolor">
<span>Duration</span>
</HelpTooltip>
<span>Duration</span>
}
formik={formik}
showErrorOnlyOfTouched
Expand All @@ -347,7 +346,7 @@ export function GatewayStakeDialog({
{numberWithCommasFormatter(preview?.epochCount)}
</Stack>
<Stack direction="row" justifyContent="space-between" alignContent="center">
<HelpTooltip title="Lorem ipsum dolor">
<HelpTooltip title="Available CUs in a current epoch. When all CUs are used, the portal will temporarily stop processing additional requests until the next epoch begins">
<span>Available CUs</span>
</HelpTooltip>
{numberWithCommasFormatter(preview?.cuPerEpoch)}
Expand Down
77 changes: 50 additions & 27 deletions src/pages/GatewaysPage/GatewaysPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import {
useMediaQuery,
useTheme,
} from '@mui/material';
import { Outlet } from 'react-router-dom';
import { Link, Outlet } from 'react-router-dom';
import { useBlock } from 'wagmi';

import {
Expand Down Expand Up @@ -176,22 +176,27 @@ export function MyStakes() {
<ColumnLabel>
<Stack direction="row" spacing={1}>
<span>Amount</span>
<Tooltip
title="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
placement="top"
>
<Box display="flex">
{stake &&
lastL1Block &&
(isPending ? (
<Box display="flex">
{stake &&
lastL1Block &&
(isPending ? (
<Tooltip
title="Tokens have been locked but will become active at the start of the next epoch"
placement="top"
>
<SquaredChip label="Pending" color="warning" />
) : isActive ? (
</Tooltip>
) : isActive ? (
<Tooltip
title="Tokens have been locked and remain valid until the expiration date"
placement="top"
>
<SquaredChip label="Active" color="info" />
) : isExpired ? (
<SquaredChip label="Expired" color="error" />
) : null)}
</Box>
</Tooltip>
</Tooltip>
) : isExpired ? (
<SquaredChip label="Expired" color="error" />
) : null)}
</Box>
</Stack>
</ColumnLabel>
<ColumnValue>{tokenFormatter(fromSqd(stake?.amount), SQD_TOKEN, 3)}</ColumnValue>
Expand All @@ -207,7 +212,7 @@ export function MyStakes() {
</Stack>
<Stack divider={<Divider flexItem />} spacing={1} flex={1}>
<Box>
<ColumnLabel>Unlocked At</ColumnLabel>
<ColumnLabel>Expired At</ColumnLabel>
<ColumnValue>
{!stake?.autoExtension
? unlockDate && stake?.lockEnd
Expand Down Expand Up @@ -245,7 +250,13 @@ export function MyGateways() {
<SquaredChip label="My Portals" color="primary" />

<Stack direction="row" spacing={1}>
<Button color="secondary" variant="outlined">
<Button
color="secondary"
variant="outlined"
component={Link}
target="_blank"
to="https://docs.sqd.dev/subsquid-network/participate/portal/"
>
LEARN MORE
</Button>
<AddGatewayButton disabled={isLoading} sources={sources} />
Expand Down Expand Up @@ -295,7 +306,7 @@ export function MyGateways() {
);
}

const GettingStartedAlert = () => {
const GettingStarted = () => {
const theme = useTheme();
const [open, setOpen] = useState(false);

Expand All @@ -304,29 +315,39 @@ const GettingStartedAlert = () => {
primary: 'Get SQD tokens',
secondary: (
<>
Make sure you have enough SQD tokens. <a href="#">How much do I need?</a>
Make sure you have enough SQD tokens to get started.{' '}
<a href="https://docs.sqd.dev/subsquid-network/participate/portal/#lock-sqd">
How much do I need?
</a>
</>
),
},
{
primary: 'Lock you tokens',
secondary: (
<>
Lock your tokens to obtain Compute Units (CUs). <a href="#">How do I lock my tokens?</a>
Lock your SQD tokens to generate Compute Units (CUs), which are used to handle SQD Network
queries.{' '}
<a href="https://docs.sqd.dev/subsquid-network/participate/portal/#staking-requirements-and-compute-units">
How do I lock my tokens?
</a>
</>
),
},
{
primary: 'Generate a Peer ID',
secondary: (
<>
Create a Peer ID to identify your portal. <a href="#">How do I generate a Peer ID?</a>
Create a Peer ID to identify your portal.{' '}
<a href="https://docs.sqd.dev/subsquid-network/participate/portal/#generate-peer-id">
How do I generate a Peer ID?
</a>
</>
),
},
{
primary: 'Add your portal',
secondary: <>Register your portal on a chain.</>,
primary: 'Register Your Portal',
secondary: <>Add your portal to the chain to complete the setup.</>,
},
];

Expand Down Expand Up @@ -375,9 +396,11 @@ const GettingStartedAlert = () => {
))}
</List>
<Typography variant="body1" mt={1}>
That's it! You're ready to run your Portal. If you need more guidance read our{' '}
<a href="#">portal section</a> in our docs or reach out to our{' '}
<a href="#">support team</a> for help.
That's it! Your portal is now ready to run. For more detailed guidance, check out the{' '}
<a href="https://docs.sqd.dev/subsquid-network/participate/portal/">
Portal Documentation
</a>{' '}
or <a href="https://t.me/HydraDevs">contact our team</a> for help.
</Typography>
</Box>
</Collapse>
Expand All @@ -389,7 +412,7 @@ export function GatewaysPage() {
return (
<CenteredPageWrapper className="wide">
<ConnectedWalletRequired>
<GettingStartedAlert />
<GettingStarted />
<MyStakes />
<MyGateways />
</ConnectedWalletRequired>
Expand Down
25 changes: 17 additions & 8 deletions src/pages/WorkersPage/AddNewWorker.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import { ConfirmDialog } from '@components/ConfirmDialog';
import { ContractCallDialog } from '@components/ContractCallDialog';
import { Form, FormikCheckBoxInput, FormikTextInput, FormRow } from '@components/Form';
import { FormikSelect } from '@components/Form/FormikSelect';
import { HelpTooltip } from '@components/HelpTooltip';
import { Loader } from '@components/Loader';
import { SourceWalletOption } from '@components/SourceWallet';
import { useSquidHeight } from '@hooks/useSquidNetworkHeightHooks';
Expand Down Expand Up @@ -106,10 +107,6 @@ export function AddNewWorkerDialog({
(source: SourceWalletWithBalance) => BigInt(source.balance) < (bondAmount || 0n),
[bondAmount],
);
const hasAvailableSource = useMemo(
() => !!sources?.some(s => !isSourceDisabled(s)),
[isSourceDisabled, sources],
);

const initialValues = useMemo(() => {
const source = sources?.find(s => !isSourceDisabled(s)) || sources?.[0];
Expand All @@ -121,7 +118,8 @@ export function AddNewWorkerDialog({
email: '',
peerId: '',
source: source?.id || '',
bond: fromSqd(bondAmount).toString(),
amount: fromSqd(bondAmount).toString(),
max: fromSqd(source?.balance).toString(),
};
}, [bondAmount, isSourceDisabled, sources]);

Expand Down Expand Up @@ -173,7 +171,7 @@ export function AddNewWorkerDialog({

formik.handleSubmit();
}}
disableConfirmButton={isLoading || !hasAvailableSource}
disableConfirmButton={isLoading || !formik.isValid}
loading={contractWriter.isPending}
>
{isLoading ? (
Expand All @@ -195,12 +193,19 @@ export function AddNewWorkerDialog({
}) || []
}
formik={formik}
onChange={e => {
const source = sources?.find(w => w?.id === e.target.value);
if (!source) return;

formik.setFieldValue('source', source.id);
formik.setFieldValue('max', fromSqd(source.balance).toString());
}}
/>
</FormRow>
<FormRow>
<FormikTextInput
showErrorOnlyOfTouched
id="bond"
id="amount"
label="Bond amount"
formik={formik}
disabled
Expand All @@ -210,7 +215,11 @@ export function AddNewWorkerDialog({
<FormikTextInput
showErrorOnlyOfTouched
id="peerId"
label="Peer ID"
label={
<HelpTooltip title="A PeerID is a unique identifier that distinguishes one peer from another within the SQD Network">
<span>Peer ID</span>
</HelpTooltip>
}
formik={formik}
/>
</FormRow>
Expand Down
11 changes: 7 additions & 4 deletions src/pages/WorkersPage/WorkerDelegate.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export const delegateSchema = yup.object({
.label('Amount')
.required()
.positive()
.max(yup.ref('max'))
.max(yup.ref('max'), 'Insufficient balance')
.typeError('${path} is invalid'),
max: yup.string().label('Max').required().typeError('${path} is invalid'),
});
Expand Down Expand Up @@ -97,7 +97,7 @@ export function WorkerDelegateDialog({

const { setWaitHeight } = useSquidHeight();

const stakingAddress = useReadRouterStaking({
const { data: stakingAddress, isLoading: isStakingAddressLoading } = useReadRouterStaking({
address: contracts.ROUTER,
});

Expand All @@ -122,7 +122,7 @@ export function WorkerDelegateDialog({
enableReinitialize: true,

onSubmit: async values => {
if (!stakingAddress.data) return;
if (!stakingAddress) return;
if (!worker) return;

try {
Expand All @@ -135,7 +135,7 @@ export function WorkerDelegateDialog({

const receipt = await writeTransactionAsync({
abi: stakingAbi,
address: stakingAddress.data,
address: stakingAddress,
functionName: 'deposit',
args: [BigInt(worker.id), sqdAmount],
vesting: source.type === AccountType.Vesting ? (source.id as `0x${string}`) : undefined,
Expand All @@ -157,6 +157,8 @@ export function WorkerDelegateDialog({
enabled: open && !!worker,
});

const isLoading = isStakingAddressLoading || isExpectedAprPending;

return (
<ContractCallDialog
title="Delegate worker"
Expand All @@ -167,6 +169,7 @@ export function WorkerDelegateDialog({
formik.handleSubmit();
}}
loading={isPending}
disableConfirmButton={isLoading || !formik.isValid}
>
<Form onSubmit={formik.handleSubmit}>
<FormRow>
Expand Down
Loading

0 comments on commit e8a3a3f

Please sign in to comment.