diff --git a/packages/app/src/systems/Network/components/NetworkForm/NetworkForm.tsx b/packages/app/src/systems/Network/components/NetworkForm/NetworkForm.tsx index 7f213d0ca..b8615028a 100644 --- a/packages/app/src/systems/Network/components/NetworkForm/NetworkForm.tsx +++ b/packages/app/src/systems/Network/components/NetworkForm/NetworkForm.tsx @@ -44,6 +44,7 @@ export function NetworkForm({ const url = useWatch({ control, name: 'url' }); const chainId = useWatch({ control, name: 'chainId' }); + const customName = useWatch({ control, name: 'name' }); useEffect(() => { if (isReviewing && chainName) { @@ -63,7 +64,7 @@ export function NetworkForm({ <> @@ -88,6 +89,11 @@ export function NetworkForm({ )} /> + {formState.errors?.name && ( + + {formState.errors.name.message} + + )} )} {!isReviewing && ( diff --git a/packages/app/src/systems/Network/machines/networksMachine.ts b/packages/app/src/systems/Network/machines/networksMachine.ts index d35706922..6611f52d6 100644 --- a/packages/app/src/systems/Network/machines/networksMachine.ts +++ b/packages/app/src/systems/Network/machines/networksMachine.ts @@ -146,8 +146,11 @@ export const networksMachine = createMachine( }, onDone: [ { - target: 'idle', + target: 'waitingAddNetwork', cond: FetchMachine.hasError, + actions: assign({ + error: (_, ev) => ev.data, + }), }, { actions: [ diff --git a/packages/app/src/systems/Network/pages/AddNetwork/AddNetwork.tsx b/packages/app/src/systems/Network/pages/AddNetwork/AddNetwork.tsx index c4f30e259..ca140f538 100644 --- a/packages/app/src/systems/Network/pages/AddNetwork/AddNetwork.tsx +++ b/packages/app/src/systems/Network/pages/AddNetwork/AddNetwork.tsx @@ -62,15 +62,24 @@ export function AddNetwork() { }); } - function onAddNetwork() { + async function onAddNetwork() { if (!name) return; - handlers.addNetwork({ - data: { - chainId: Number(chainId), - name, - url, - }, - }); + try { + await handlers.addNetwork({ + data: { + chainId: Number(chainId), + name, + url, + }, + }); + } catch (error) { + if (error instanceof Error && error.message.includes('already exists')) { + form.setError('name', { + type: 'manual', + message: 'A network with this name already exists', + }); + } + } } return (