From 09df9178cfed4f2f3ab6a524eb47683249ad2c46 Mon Sep 17 00:00:00 2001 From: belopash Date: Mon, 2 Dec 2024 12:40:44 +0500 Subject: [PATCH] feat: review fixes --- src/pages/GatewaysPage/AddNewGateway.tsx | 6 +- src/pages/GatewaysPage/GatewayStake.tsx | 9 ++- src/pages/GatewaysPage/GatewaysPage.tsx | 77 ++++++++++++++-------- src/pages/WorkersPage/AddNewWorker.tsx | 25 ++++--- src/pages/WorkersPage/WorkerDelegate.tsx | 11 ++-- src/pages/WorkersPage/WorkerUndelegate.tsx | 12 ++-- src/pages/WorkersPage/WorkerWithdraw.tsx | 2 +- src/pages/WorkersPage/worker-schema.ts | 10 ++- 8 files changed, 98 insertions(+), 54 deletions(-) diff --git a/src/pages/GatewaysPage/AddNewGateway.tsx b/src/pages/GatewaysPage/AddNewGateway.tsx index 2f68e00..b999696 100644 --- a/src/pages/GatewaysPage/AddNewGateway.tsx +++ b/src/pages/GatewaysPage/AddNewGateway.tsx @@ -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'; @@ -117,7 +117,7 @@ export function AddGatewayDialog({ onClose(); } catch (e: unknown) { - toast.custom({errorMessage(e)}); + toast.error(errorMessage(e)); } }, }); @@ -160,7 +160,7 @@ export function AddGatewayDialog({ showErrorOnlyOfTouched id="peerId" label={ - + Peer ID } diff --git a/src/pages/GatewaysPage/GatewayStake.tsx b/src/pages/GatewaysPage/GatewayStake.tsx index 585bd04..2103a49 100644 --- a/src/pages/GatewaysPage/GatewayStake.tsx +++ b/src/pages/GatewaysPage/GatewayStake.tsx @@ -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'), @@ -183,6 +183,7 @@ export function GatewayStakeDialog({ onClose(); } catch (e: unknown) { toast.error(errorMessage(e)); + // toast.error(errorMessage(e)); } }, }); @@ -323,9 +324,7 @@ export function GatewayStakeDialog({ id="durationBlocks" label={ // TODO: add tooltip text - - Duration - + Duration } formik={formik} showErrorOnlyOfTouched @@ -347,7 +346,7 @@ export function GatewayStakeDialog({ {numberWithCommasFormatter(preview?.epochCount)} - + Available CUs {numberWithCommasFormatter(preview?.cuPerEpoch)} diff --git a/src/pages/GatewaysPage/GatewaysPage.tsx b/src/pages/GatewaysPage/GatewaysPage.tsx index 5eacecf..7bb9ef0 100644 --- a/src/pages/GatewaysPage/GatewaysPage.tsx +++ b/src/pages/GatewaysPage/GatewaysPage.tsx @@ -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 { @@ -176,22 +176,27 @@ export function MyStakes() { Amount - - - {stake && - lastL1Block && - (isPending ? ( + + {stake && + lastL1Block && + (isPending ? ( + - ) : isActive ? ( + + ) : isActive ? ( + - ) : isExpired ? ( - - ) : null)} - - + + ) : isExpired ? ( + + ) : null)} + {tokenFormatter(fromSqd(stake?.amount), SQD_TOKEN, 3)} @@ -207,7 +212,7 @@ export function MyStakes() { } spacing={1} flex={1}> - Unlocked At + Expired At {!stake?.autoExtension ? unlockDate && stake?.lockEnd @@ -245,7 +250,13 @@ export function MyGateways() { - @@ -295,7 +306,7 @@ export function MyGateways() { ); } -const GettingStartedAlert = () => { +const GettingStarted = () => { const theme = useTheme(); const [open, setOpen] = useState(false); @@ -304,7 +315,10 @@ const GettingStartedAlert = () => { primary: 'Get SQD tokens', secondary: ( <> - Make sure you have enough SQD tokens. How much do I need? + Make sure you have enough SQD tokens to get started.{' '} + + How much do I need? + ), }, @@ -312,7 +326,11 @@ const GettingStartedAlert = () => { primary: 'Lock you tokens', secondary: ( <> - Lock your tokens to obtain Compute Units (CUs). How do I lock my tokens? + Lock your SQD tokens to generate Compute Units (CUs), which are used to handle SQD Network + queries.{' '} + + How do I lock my tokens? + ), }, @@ -320,13 +338,16 @@ const GettingStartedAlert = () => { primary: 'Generate a Peer ID', secondary: ( <> - Create a Peer ID to identify your portal. How do I generate a Peer ID? + Create a Peer ID to identify your portal.{' '} + + How do I generate a Peer ID? + ), }, { - 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., }, ]; @@ -375,9 +396,11 @@ const GettingStartedAlert = () => { ))} - That's it! You're ready to run your Portal. If you need more guidance read our{' '} - portal section in our docs or reach out to our{' '} - support team for help. + That's it! Your portal is now ready to run. For more detailed guidance, check out the{' '} + + Portal Documentation + {' '} + or contact our team for help. @@ -389,7 +412,7 @@ export function GatewaysPage() { return ( - + diff --git a/src/pages/WorkersPage/AddNewWorker.tsx b/src/pages/WorkersPage/AddNewWorker.tsx index c288216..cb3a13e 100644 --- a/src/pages/WorkersPage/AddNewWorker.tsx +++ b/src/pages/WorkersPage/AddNewWorker.tsx @@ -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'; @@ -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]; @@ -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]); @@ -173,7 +171,7 @@ export function AddNewWorkerDialog({ formik.handleSubmit(); }} - disableConfirmButton={isLoading || !hasAvailableSource} + disableConfirmButton={isLoading || !formik.isValid} loading={contractWriter.isPending} > {isLoading ? ( @@ -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()); + }} /> + Peer ID + + } formik={formik} /> diff --git a/src/pages/WorkersPage/WorkerDelegate.tsx b/src/pages/WorkersPage/WorkerDelegate.tsx index b80cca8..bf957e5 100644 --- a/src/pages/WorkersPage/WorkerDelegate.tsx +++ b/src/pages/WorkersPage/WorkerDelegate.tsx @@ -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'), }); @@ -97,7 +97,7 @@ export function WorkerDelegateDialog({ const { setWaitHeight } = useSquidHeight(); - const stakingAddress = useReadRouterStaking({ + const { data: stakingAddress, isLoading: isStakingAddressLoading } = useReadRouterStaking({ address: contracts.ROUTER, }); @@ -122,7 +122,7 @@ export function WorkerDelegateDialog({ enableReinitialize: true, onSubmit: async values => { - if (!stakingAddress.data) return; + if (!stakingAddress) return; if (!worker) return; try { @@ -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, @@ -157,6 +157,8 @@ export function WorkerDelegateDialog({ enabled: open && !!worker, }); + const isLoading = isStakingAddressLoading || isExpectedAprPending; + return (
diff --git a/src/pages/WorkersPage/WorkerUndelegate.tsx b/src/pages/WorkersPage/WorkerUndelegate.tsx index 8116f5c..1481940 100644 --- a/src/pages/WorkersPage/WorkerUndelegate.tsx +++ b/src/pages/WorkersPage/WorkerUndelegate.tsx @@ -37,7 +37,7 @@ export const undelegateSchema = 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'), }); @@ -136,7 +136,7 @@ function WorkerUndelegateDialog({ const contracts = useContracts(); const { writeTransactionAsync, isPending } = useWriteSQDTransaction(); - const stakingAddress = useReadRouterStaking({ + const { data: stakingAddress, isLoading: isStakingAddressLoading } = useReadRouterStaking({ address: contracts.ROUTER, }); @@ -159,7 +159,7 @@ function WorkerUndelegateDialog({ enableReinitialize: true, onSubmit: async values => { - if (!stakingAddress.data) return; + if (!stakingAddress) return; if (!worker) return; try { @@ -172,7 +172,7 @@ function WorkerUndelegateDialog({ const receipt = await writeTransactionAsync({ abi: stakingAbi, - address: stakingAddress.data, + address: stakingAddress, functionName: 'withdraw', args: [BigInt(worker.id), sqdAmount], vesting: source.type === AccountType.Vesting ? (source.id as `0x${string}`) : undefined, @@ -193,6 +193,8 @@ function WorkerUndelegateDialog({ enabled: open && !!worker, }); + const isLoading = isStakingAddressLoading || isExpectedAprPending; + return ( diff --git a/src/pages/WorkersPage/WorkerWithdraw.tsx b/src/pages/WorkersPage/WorkerWithdraw.tsx index 145052b..e2b3e6f 100644 --- a/src/pages/WorkersPage/WorkerWithdraw.tsx +++ b/src/pages/WorkersPage/WorkerWithdraw.tsx @@ -124,7 +124,7 @@ export function WorkerWithdrawDialog({ return ( { if (!confirmed) return onClose(); diff --git a/src/pages/WorkersPage/worker-schema.ts b/src/pages/WorkersPage/worker-schema.ts index e712810..3e65786 100644 --- a/src/pages/WorkersPage/worker-schema.ts +++ b/src/pages/WorkersPage/worker-schema.ts @@ -1,4 +1,4 @@ -import * as yup from 'yup'; +import * as yup from '@schema'; export const editWorkerSchema = yup.object({ name: yup.string().label('Name').max(255).trim().required('Worker name is required'), @@ -17,4 +17,12 @@ export const addWorkerSchema = editWorkerSchema.shape({ .trim() .required('Peer ID is required'), source: yup.string().label('Source address').trim().required('Source address is required'), + amount: yup + .decimal() + .label('Amount') + .required() + .positive() + .max(yup.ref('max'), 'Insufficient balance') + .typeError('${path} is invalid'), + max: yup.string().label('Max').required().typeError('${path} is invalid'), });