From 493ef214b2a574d2d1701d8f54496fe493581d4a Mon Sep 17 00:00:00 2001 From: belopash Date: Fri, 24 May 2024 12:38:40 +0500 Subject: [PATCH 1/4] fix: fix freezing add worker and add gateways pages --- src/AppRoutes.tsx | 52 +++--- src/pages/GatewaysPage/AddNewGateway.tsx | 180 +++++++++++---------- src/pages/WorkersPage/AddNewWorker.tsx | 147 +++++++++-------- src/pages/WorkersPage/Worker.tsx | 35 ++-- src/pages/WorkersPage/WorkerDelegate.tsx | 6 +- src/pages/WorkersPage/WorkerEdit.tsx | 23 +-- src/pages/WorkersPage/WorkerUndelegate.tsx | 20 +-- 7 files changed, 252 insertions(+), 211 deletions(-) diff --git a/src/AppRoutes.tsx b/src/AppRoutes.tsx index ce675ae..02363e6 100644 --- a/src/AppRoutes.tsx +++ b/src/AppRoutes.tsx @@ -26,33 +26,37 @@ export const AppRoutes = () => { return ( - {demoFeaturesEnabled() || network === NetworkName.Testnet ? ( - } path="/dashboard"> - } index /> - } path="workers/:peerId" /> + } path="/"> + } index /> + {demoFeaturesEnabled() || network === NetworkName.Testnet ? ( + + } index /> + } path="workers/:peerId" /> + + ) : null} + + + } index /> + } path="vestings/:address" /> - ) : null} - } path="/assets"> - } index /> - } path="vestings/:address" /> - - } path="/workers"> - } index /> - } path="add" /> - } path=":peerId" /> - } path=":peerId/edit" /> - - } path="/delegations"> - } index /> - } path="workers/:peerId" /> - - } path="/gateways"> - } index /> - } path="add" /> - } path=":peerId" /> + + } index /> + } path="add" /> + } path=":peerId" /> + } path=":peerId/edit" /> + + + } index /> + } path="workers/:peerId" /> + + + } index /> + } path="add" /> + } path=":peerId" /> + + } path="*" /> - } path="*" /> ); }; diff --git a/src/pages/GatewaysPage/AddNewGateway.tsx b/src/pages/GatewaysPage/AddNewGateway.tsx index fdc274d..7797388 100644 --- a/src/pages/GatewaysPage/AddNewGateway.tsx +++ b/src/pages/GatewaysPage/AddNewGateway.tsx @@ -14,10 +14,11 @@ import { FormikSelect } from '@components/Form/FormikSelect'; import { Loader } from '@components/Loader'; import { SourceWalletOption } from '@components/SourceWallet'; import { CenteredPageWrapper, NetworkPageTitle } from '@layouts/NetworkLayout'; +import { ConnectedWalletRequired } from '@network/ConnectedWalletRequired'; import { addGatewaySchema } from './gateway-schema'; -export function AddNewGateway() { +function AddGatewayForm() { const navigate = useNavigate(); const { registerGateway, isLoading: isRegistering, error } = useRegisterGateway(); const { sources, isPending: isDataLoading } = useMySources(); @@ -70,92 +71,103 @@ export function AddNewGateway() { }); }, [formik, isDataLoading, sources]); - if (isDataLoading) return ; + return ( + <> + {isDataLoading ? ( + + ) : ( +
+ + + { + return { + label: , + value: s.id, + disabled: s.type === AccountType.Vesting, + }; + })} + formik={formik} + /> + + + + + + + + + + + + + {formik.values.public ? ( + <> + + + + + + + + + + + + + + ) : null} + + + + + + Register + + +
+ )} + + ); +} +export function AddNewGateway() { return ( - - -
- - - { - return { - label: , - value: s.id, - disabled: s.type === AccountType.Vesting, - }; - })} - formik={formik} - /> - - - - - - - - - - - - - {formik.values.public ? ( - <> - - - - - - - - - - - - - - ) : null} - - - - - - Register - - -
+ + + + ); } diff --git a/src/pages/WorkersPage/AddNewWorker.tsx b/src/pages/WorkersPage/AddNewWorker.tsx index 809ebcf..67ce5a8 100644 --- a/src/pages/WorkersPage/AddNewWorker.tsx +++ b/src/pages/WorkersPage/AddNewWorker.tsx @@ -17,14 +17,15 @@ import { FormikSelect } from '@components/Form/FormikSelect'; import { Loader } from '@components/Loader'; import { SourceWalletOption } from '@components/SourceWallet'; import { CenteredPageWrapper, NetworkPageTitle } from '@layouts/NetworkLayout'; +import { ConnectedWalletRequired } from '@network/ConnectedWalletRequired'; import { addWorkerSchema } from './worker-schema'; -export function AddNewWorker() { +function AddWorkerForm() { const navigate = useNavigate(); - const { registerWorker, isLoading, error } = useRegisterWorker(); const { bondAmount, isPending: isSettingsLoading } = useNetworkSettings(); const { sources, isPending: isContractsLoading } = useMySources(); + const { registerWorker, isLoading, error } = useRegisterWorker(); const formik = useFormik({ initialValues: { @@ -67,71 +68,91 @@ export function AddNewWorker() { ...formik.values, source: source.id, }); - }, [formik, isContractsLoading, sources, bondAmount, isSettingsLoading]); + }, [bondAmount, formik, isContractsLoading, isSettingsLoading, sources]); - if (isContractsLoading) return ; + return ( + <> + {isContractsLoading ? ( + + ) : ( +
+ + + { + return { + label: , + value: s.id, + disabled: new Decimal(s.balance).lessThan(bondAmount), + }; + })} + formik={formik} + /> + + + + + + + + + + + + + + + + + + + + + Register + + +
+ )} + + ); +} +export function AddNewWorker() { return ( - - {/*Worker registration Lorem ipsum dolor sit amet consectetur. Learn more quis tempus proin. Id*/} - {/*rhoncus cras nibh vitae in quis porttitor cum laoreet. Integer consectetur lacus at netus.*/} - {/*Tincidunt aliquam.*/} - - -
- - - { - return { - label: , - value: s.id, - disabled: new Decimal(s.balance).lessThan(bondAmount), - }; - })} - formik={formik} - /> - - - - - - - - - - - - - - - - - - - - - - Register - - -
+ + + {/*Worker registration Lorem ipsum dolor sit amet consectetur. Learn more quis tempus proin. Id*/} + {/*rhoncus cras nibh vitae in quis porttitor cum laoreet. Integer consectetur lacus at netus.*/} + {/*Tincidunt aliquam.*/} + + + ); } diff --git a/src/pages/WorkersPage/Worker.tsx b/src/pages/WorkersPage/Worker.tsx index 8c41ebd..8215ccf 100644 --- a/src/pages/WorkersPage/Worker.tsx +++ b/src/pages/WorkersPage/Worker.tsx @@ -32,11 +32,6 @@ export const Worker = ({ backPath }: { backPath: string }) => { const [searchParams] = useSearchParams(); - if (isPending) return ; - else if (!worker) { - return ; - } - return ( { } /> - - - - - - - {worker.ownedByMe && worker.status !== WorkerStatus.Withdrawn ? ( - - - - ) : null} + {isPending ? ( + + ) : !worker ? ( + + ) : ( + <> + + + + + + + {worker.ownedByMe && worker.status !== WorkerStatus.Withdrawn ? ( + + + + ) : null} + + )} ); }; diff --git a/src/pages/WorkersPage/WorkerDelegate.tsx b/src/pages/WorkersPage/WorkerDelegate.tsx index 205848e..f4876a6 100644 --- a/src/pages/WorkersPage/WorkerDelegate.tsx +++ b/src/pages/WorkersPage/WorkerDelegate.tsx @@ -34,7 +34,7 @@ export function WorkerDelegate({ worker, disabled, }: { - worker: BlockchainApiWorker; + worker?: BlockchainApiWorker; disabled?: boolean; }) { const { delegateToWorker, error, isLoading } = useWorkerDelegate(); @@ -69,7 +69,7 @@ export function WorkerDelegate({ onSubmit: async values => { const wallet = sources.find(w => w?.id === values.source); - if (!wallet) return; + if (!wallet || !worker) return; const { failedReason } = await delegateToWorker({ worker, @@ -101,7 +101,7 @@ export function WorkerDelegate({ return ( <>