diff --git a/.changeset/hip-beds-do.md b/.changeset/hip-beds-do.md new file mode 100644 index 000000000..e3b5f68a1 --- /dev/null +++ b/.changeset/hip-beds-do.md @@ -0,0 +1,5 @@ +--- +"fuels-wallet": patch +--- + +Allow editing network name when adding. diff --git a/packages/app/src/systems/Network/components/NetworkForm/NetworkForm.tsx b/packages/app/src/systems/Network/components/NetworkForm/NetworkForm.tsx index 0eebab47d..b8615028a 100644 --- a/packages/app/src/systems/Network/components/NetworkForm/NetworkForm.tsx +++ b/packages/app/src/systems/Network/components/NetworkForm/NetworkForm.tsx @@ -40,10 +40,17 @@ export function NetworkForm({ }: NetworkFormProps) { const [isFirstShownTestConnectionBtn, setIsFirstShownTestConnectionBtn] = useState(false); - const { control, formState } = form; + const { control, formState, setValue } = form; const url = useWatch({ control, name: 'url' }); const chainId = useWatch({ control, name: 'chainId' }); + const customName = useWatch({ control, name: 'name' }); + + useEffect(() => { + if (isReviewing && chainName) { + setValue('name', chainName); + } + }, [isReviewing, chainName, setValue]); useEffect(() => { if (isValid && chainId) { @@ -54,12 +61,40 @@ export function NetworkForm({ return ( {isReviewing && ( - + <> + + + Network Name + + } + isRequired + isInvalid={Boolean(formState.errors?.name)} + render={({ field }) => ( + + + + )} + /> + {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 b31643cf8..ca140f538 100644 --- a/packages/app/src/systems/Network/pages/AddNetwork/AddNetwork.tsx +++ b/packages/app/src/systems/Network/pages/AddNetwork/AddNetwork.tsx @@ -31,6 +31,7 @@ export function AddNetwork() { const form = useNetworkForm({ context }); const url = useWatch({ control: form.control, name: 'url' }); const chainId = useWatch({ control: form.control, name: 'chainId' }); + const name = useWatch({ control: form.control, name: 'name' }); const isValid = form.formState.isDirty && form.formState.isValid && @@ -61,15 +62,24 @@ export function AddNetwork() { }); } - function onAddNetwork() { - const name = chainInfoToAdd?.name || ''; - handlers.addNetwork({ - data: { - chainId: Number(chainId), - name, - url, - }, - }); + async function onAddNetwork() { + if (!name) return; + 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 ( @@ -101,7 +111,7 @@ export function AddNetwork() {