equitylayer · sideris · Feb 14, 2026 · Feb 10, 2026 · Feb 14, 2026 · Feb 14, 2026
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -52,29 +52,29 @@
     "@tanstack/react-query-persist-client": "5.4.3",
     "@tanstack/react-virtual": "3.0.0-beta.54",
     "@total-typescript/ts-reset": "^0.5.1",
-    "@vanilla-extract/css": "^1.17.4",
+    "@vanilla-extract/css": "^1.18.0",
     "@vanilla-extract/css-utils": "^0.1.6",
     "@vanilla-extract/dynamic": "^2.1.5",
     "@vanilla-extract/sprinkles": "^1.6.5",
     "abitype": "^0.9.10",
     "chroma-js": "^2.6.0",
     "clsx": "^1.2.1",
-    "ethers": "^6.15.0",
-    "eventemitter3": "^5.0.1",
-    "human-id": "^4.1.2",
+    "ethers": "^6.16.0",
+    "eventemitter3": "^5.0.4",
+    "human-id": "^4.1.3",
     "lucide-react": "^0.548.0",
     "mipd": "^0.0.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-flatten-children": "^1.1.2",
-    "react-hook-form": "^7.66.0",
+    "react-hook-form": "^7.71.1",
     "react-intersection-observer": "^9.16.0",
-    "react-router": "^6.30.1",
-    "react-router-dom": "^6.30.1",
+    "react-router": "^6.30.3",
+    "react-router-dom": "^6.30.3",
     "remeda": "^1.61.0",
     "sonner": "^0.7.4",
     "use-sync-external-store": "^1.6.0",
-    "viem": "^2.38.6",
+    "viem": "^2.45.2",
     "zustand": "^4.5.7"
   },
   "devDependencies": {
@@ -83,14 +83,14 @@
     "@types/chroma-js": "^2.4.5",
     "@types/chrome": "^0.0.266",
     "@types/qs": "^6.14.0",
-    "@types/react": "^18.3.26",
+    "@types/react": "^18.3.28",
     "@types/react-dom": "^18.3.7",
     "@types/use-sync-external-store": "^0.0.3",
     "@types/webextension-polyfill": "^0.10.7",
     "@types/which-pm-runs": "^1.0.2",
     "@vanilla-extract/vite-plugin": "^4.0.20",
     "@vitejs/plugin-react": "^4.7.0",
-    "bun-types": "^1.3.1",
+    "bun-types": "^1.3.9",
     "cross-env": "^7.0.3",
     "globby": "^13.2.2",
     "patch-package": "^8.0.1",

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -190,9 +190,15 @@ function Account() {
           {account && (
             <HeaderItem label="Account">
               <Box title={account.address}>
-                <Text.Truncated key={key} size="11px">
-                  {account.address}
-                </Text.Truncated>
+                {account.displayName ? (
+                  <Text.Truncated key={key} size="11px">
+                    {account.displayName}
+                  </Text.Truncated>
+                ) : (
+                  <Text.Truncated key={key} size="11px">
+                    {account.address}
+                  </Text.Truncated>
+                )}
               </Box>
             </HeaderItem>
           )}

diff --git a/src/screens/block-config.tsx b/src/screens/block-config.tsx
@@ -71,21 +71,15 @@ function IntervalMining() {
     <Stack gap="16px">
       <Text color="text/tertiary">Interval Mining</Text>
       <Form.Root onSubmit={submit}>
-        <Inline gap="8px" wrap={false}>
+        <Inline gap="8px" wrap={false} alignVertical="bottom">
           <Form.InputField
             label="Interval (s)"
             register={register('interval', { required: true })}
-            style={{ width: '70px' }}
+            style={{ width: '100px' }}
           />
-          <Stack gap="12px" width="fit">
-            {/* TODO: don't do this lol */}
-            <Text color="text/tertiary" size="11px">
-              {'‎'}
-            </Text>
-            <Button type="submit" width="fit" variant="solid fill">
-              Set
-            </Button>
-          </Stack>
+          <Button type="submit" width="fit" variant="solid fill">
+            Set
+          </Button>
         </Inline>
       </Form.Root>
       <Button onClick={toggle} variant="solid fill">
@@ -121,31 +115,25 @@ function Mine() {
     <Stack gap="16px">
       <Text color="text/tertiary">Mine Blocks</Text>
       <Form.Root onSubmit={submit}>
-        <Inline gap="8px" wrap={false}>
+        <Inline gap="8px" wrap={false} alignVertical="bottom">
           <Form.InputField
             label="Blocks"
             register={register('blocks', { required: true, min: 1 })}
-            style={{ width: '70px' }}
+            style={{ width: '100px' }}
           />
           <Form.InputField
             label="Interval (s)"
             register={register('interval', { required: true })}
-            style={{ width: '70px' }}
+            style={{ width: '100px' }}
           />
-          <Stack gap="12px" width="fit">
-            {/* TODO: don't do this lol */}
-            <Text color="text/tertiary" size="11px">
-              {'‎'}
-            </Text>
-            <Button
-              disabled={!isValid}
-              type="submit"
-              width="fit"
-              variant="solid fill"
-            >
-              Mine
-            </Button>
-          </Stack>
+          <Button
+            disabled={!isValid}
+            type="submit"
+            width="fit"
+            variant="solid fill"
+          >
+            Mine
+          </Button>
         </Inline>
       </Form.Root>
     </Stack>

diff --git a/src/screens/index.tsx b/src/screens/index.tsx
@@ -129,13 +129,44 @@ function Accounts() {
 }
 
 function AccountRow({ account }: { account: Account }) {
-  const { account: activeAccount, removeAccount } = useAccountStore()
+  const {
+    account: activeAccount,
+    removeAccount,
+    upsertAccount,
+  } = useAccountStore()
   const { mutateAsync: setAccount } = useSetAccount()
 
+  const [isEditingAlias, setIsEditingAlias] = useState(false)
+  const [aliasValue, setAliasValue] = useState(account.displayName ?? '')
+  const aliasInputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (isEditingAlias) aliasInputRef.current?.focus()
+  }, [isEditingAlias])
+
+  const saveAlias = () => {
+    const trimmed = aliasValue.trim()
+    upsertAccount({
+      account: {
+        ...account,
+        displayName: trimmed || undefined,
+      },
+    })
+    setIsEditingAlias(false)
+  }
+
+  const cancelAlias = () => {
+    setAliasValue(account.displayName ?? '')
+    setIsEditingAlias(false)
+  }
+
   const active = activeAccount?.address === account.address
   const truncatedAddress =
     account.address && account.address.length > 0
-      ? truncate(account.address, { start: 5, end: 5 })
+      ? truncate(
+          account.address,
+          account.displayName ? { start: 5, end: 4 } : { start: 8, end: 6 },
+        )
       : undefined
   return (
     <Box
@@ -192,34 +223,66 @@ function AccountRow({ account }: { account: Account }) {
       )}
       <Stack gap="16px">
         <Box width="fit" position="relative">
-          <Inline gap="8px">
-            {account.state === 'loading' && (
-              <Text color="text/tertiary" size="12px">
-                {truncate(account.key, { start: 20, end: 20 })}
-              </Text>
-            )}
-            {account.displayName && (
-              <Text size="12px">{account.displayName}</Text>
-            )}
-            <Box title={account.address}>
-              <Text
-                color={account.displayName ? 'text/tertiary' : undefined}
-                family="address"
-                size="12px"
-              >
-                {truncatedAddress ?? account.address}
-              </Text>
-            </Box>
-            {account.address && (
-              <Box position="absolute" style={{ right: -24, top: -6 }}>
-                <Button.Copy
-                  height="20px"
-                  text={account.address!}
-                  variant="ghost primary"
-                />
+          {isEditingAlias ? (
+            <Input
+              ref={aliasInputRef}
+              height="24px"
+              placeholder="Address alias..."
+              value={aliasValue}
+              onChange={(e) => setAliasValue(e.target.value)}
+              onClick={(e) => e.stopPropagation()}
+              onBlur={saveAlias}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') saveAlias()
+                if (e.key === 'Escape') cancelAlias()
+              }}
+              style={{ maxWidth: '200px' }}
+            />
+          ) : (
+            <Inline gap="8px">
+              {account.state === 'loading' && (
+                <Text color="text/tertiary" size="12px">
+                  {truncate(account.key, { start: 20, end: 20 })}
+                </Text>
+              )}
+              {account.displayName && (
+                <Text size="12px">{account.displayName}</Text>
+              )}
+              <Box title={account.address}>
+                <Text
+                  color={account.displayName ? 'text/tertiary' : undefined}
+                  family="address"
+                  size="12px"
+                >
+                  {truncatedAddress ?? account.address}
+                </Text>
               </Box>
-            )}
-          </Inline>
+              {account.state === 'loaded' && (
+                <Box style={{ marginTop: '-4px' }}>
+                  <Button.Symbol
+                    label="Edit Alias"
+                    symbol="square.and.pencil"
+                    height="20px"
+                    variant="ghost primary"
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      setAliasValue(account.displayName ?? '')
+                      setIsEditingAlias(true)
+                    }}
+                  />
+                </Box>
+              )}
+              {account.address && (
+                <Box position="absolute" style={{ right: -24, top: -6 }}>
+                  <Button.Copy
+                    height="20px"
+                    text={account.address!}
+                    variant="ghost primary"
+                  />
+                </Box>
+              )}
+            </Inline>
+          )}
         </Box>
         <Inline gap="4px">
           <Box style={{ width: '100px' }}>

diff --git a/src/screens/onboarding/download.tsx b/src/screens/onboarding/download.tsx
@@ -29,7 +29,6 @@ export default function OnboardingDownload() {
           paddingLeft="12px"
           paddingRight="32px"
           position="relative"
-          // @ts-expect-error
           style={{ textWrap: 'wrap' }}
         >
           <Text family="mono" size="12px">

diff --git a/src/screens/onboarding/run.tsx b/src/screens/onboarding/run.tsx
@@ -62,7 +62,6 @@ export default function OnboardingRun() {
           paddingLeft="12px"
           paddingRight="12px"
           position="relative"
-          // @ts-expect-error
           style={{ textWrap: 'wrap' }}
         >
           <Text family="mono" size="12px">

diff --git a/src/zustand/account.ts b/src/zustand/account.ts
@@ -70,18 +70,25 @@ export const accountStore = createStore<AccountStore>(
       })
     },
     setJsonRpcAccounts({ addresses, rpcUrl }) {
-      const accounts = addresses.map(
-        (address) =>
-          ({
+      set((state) => {
+        const existingByAddress = new Map(
+          state.accounts.map((a) => [a.address.toLowerCase(), a]),
+        )
+
+        const accounts = addresses.map((address) => {
+          const existing = existingByAddress.get(address.toLowerCase())
+          return {
             address,
             key: `${rpcUrl}.${address}`,
             rpcUrl,
             state: 'loaded',
             type: 'json-rpc',
-          }) as const,
-      )
+            ...(existing?.displayName && {
+              displayName: existing.displayName,
+            }),
+          } as const
+        })
 
-      set((state) => {
         return {
           ...state,
           account: get().account || accounts[0],