diff --git a/app/ts/components/pages/SettingsView.tsx b/app/ts/components/pages/SettingsView.tsx
index 6db55f06..66667456 100644
--- a/app/ts/components/pages/SettingsView.tsx
+++ b/app/ts/components/pages/SettingsView.tsx
@@ -11,6 +11,7 @@ import { defaultRpcs } from '../../background/settings.js'
import { getChainName } from '../../utils/constants.js'
import { getRpcList } from '../../background/storageVariables.js'
import { useComputed, useSignal } from '@preact/signals'
+import { serialize } from '../../types/wire-types.js'
type CheckBoxSettingParam = {
text: string
@@ -220,7 +221,7 @@ const RpcSummary = ({ info }: { info: RpcEntry }) => {
const networkName = getChainName(info.chainId)
// rerender form if entry is updated in the background by specifying a unique key
- const infoKey = Object.values(info).join('|')
+ const infoKey = JSON.stringify(serialize(RpcEntry, info))
return (
diff --git a/app/ts/components/subcomponents/ConfigureRpcConnection.tsx b/app/ts/components/subcomponents/ConfigureRpcConnection.tsx
index 9b44773a..6883ea99 100644
--- a/app/ts/components/subcomponents/ConfigureRpcConnection.tsx
+++ b/app/ts/components/subcomponents/ConfigureRpcConnection.tsx
@@ -191,17 +191,19 @@ const ConfigureRpcForm = ({ defaultValues, onCancel, onSave, onRemove }: Configu
const parseRpcFormData = (formData: FormData) => {
const chainIdFromForm = formData.get('chainId')?.toString()
-
+ const blockExplorerUrlForm = formData.get('blockExplorerUrl')?.toString()
+ const blockExplorerApiKeyForm = formData.get('blockExplorerApiKey')?.toString()
+ const isBlockExplorerDefined = blockExplorerUrlForm !== undefined && blockExplorerApiKeyForm !== undefined && blockExplorerUrlForm.length > 0 && blockExplorerApiKeyForm.length > 0
const newRpcEntry = {
name: formData.get('name')?.toString() || '',
chainId: chainIdFromForm ? `0x${ BigInt(chainIdFromForm).toString(16) }` : '',
httpsRpc: formData.get('httpsRpc')?.toString() || '',
currencyName: formData.get('currencyName')?.toString() || '',
currencyTicker: formData.get('currencyTicker')?.toString() || '',
+ ...isBlockExplorerDefined ? { blockExplorer: { apiUrl: blockExplorerUrlForm || '', apiKey: blockExplorerApiKeyForm } } : {},
minimized: true,
primary: false,
}
-
return RpcEntry.safeParse(newRpcEntry)
}
@@ -225,6 +227,9 @@ const ConfigureRpcForm = ({ defaultValues, onCancel, onSave, onRemove }: Configu
return defaultValues?.currencyName || ''
})
+ const blockExplorerUrlDefault = useComputed(() => defaultValues?.blockExplorer?.apiUrl || '')
+ const blockExplorerApiKeyDefault = useComputed(() => defaultValues?.blockExplorer?.apiKey || '')
+
return (