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 (