feat: show chain select in companion app (#501)

* pull in chain select and add failing test

* update ser-kit

* shim process.env

* make chainSelect semi-controllable

* adjust spec

deployables/app/app/components/ChainSelect.tsx

@@ -0,0 +1,40 @@
+import { invariant } from '@epic-web/invariant'
+import { CHAIN_NAME } from '@zodiac/chains'
+import { Select } from '@zodiac/ui'
+import type { ChainId } from 'ser-kit'
+
+export interface Props {
+  value: ChainId | null | undefined
+  onChange(chainId: ChainId): void
+}
+
+interface Option {
+  value: ChainId
+  label: string
+}
+
+const options = Object.entries(CHAIN_NAME).map(([chainId, name]) => ({
+  value: parseInt(chainId) as ChainId,
+  label: name,
+}))
+
+export const ChainSelect = ({ value, onChange }: Props) => (
+  <Select
+    label="Chain"
+    isMulti={false}
+    options={options}
+    defaultValue={options.find((op) => op.value === value)}
+    onChange={(option) => {
+      invariant(option != null, 'Empty value selected as chain')
+
+      onChange(option.value)
+    }}
+    formatOptionLabel={ChainOptionLabel as any}
+  />
+)
+
+const ChainOptionLabel = ({ value, label }: Option) => (
+  <div className="flex items-center gap-4 py-2">
+    <div className="pl-1">{label || `#${value}`}</div>
+  </div>
+)

deployables/app/app/components/index.ts

@@ -0,0 +1 @@
+export { ChainSelect } from './ChainSelect'

deployables/app/app/routes/edit-route.spec.ts

@@ -1,21 +1,49 @@
 import { render } from '@/test-utils'
 import { screen } from '@testing-library/react'
-import { createMockExecutionRoute } from '@zodiac/test-utils'
+import { CHAIN_NAME } from '@zodiac/chains'
+import {
+  createMockExecutionRoute,
+  randomPrefixedAddress,
+} from '@zodiac/test-utils'
+import type { ChainId } from 'ser-kit'
 import { describe, expect, it } from 'vitest'
 import EditRoute, { loader } from './edit-route'
 
 describe('Edit route', () => {
-  it('shows the name of a route', async () => {
-    const route = createMockExecutionRoute({ label: 'Test route' })
+  describe('Label', () => {
+    it('shows the name of a route', async () => {
+      const route = createMockExecutionRoute({ label: 'Test route' })
 
-    await render<typeof import('./edit-route')>(
-      '/edit-route',
-      { path: '/edit-route', Component: EditRoute, loader },
-      { searchParams: { route: btoa(JSON.stringify(route)) } },
-    )
+      await render<typeof import('./edit-route')>(
+        '/edit-route',
+        { path: '/edit-route', Component: EditRoute, loader },
+        { searchParams: { route: btoa(JSON.stringify(route)) } },
+      )
+
+      expect(screen.getByRole('textbox', { name: 'Label' })).toHaveValue(
+        'Test route',
+      )
+    })
+  })
+
+  describe('Chain', () => {
+    it.each(Object.entries(CHAIN_NAME))(
+      'shows chainId "%s" as "%s"',
+      async (chainId, name) => {
+        const route = createMockExecutionRoute({
+          avatar: randomPrefixedAddress({
+            chainId: parseInt(chainId) as ChainId,
+          }),
+        })
+
+        await render<typeof import('./edit-route')>(
+          '/edit-route',
+          { path: '/edit-route', Component: EditRoute, loader },
+          { searchParams: { route: btoa(JSON.stringify(route)) } },
+        )
 
-    expect(screen.getByRole('textbox', { name: 'Label' })).toHaveValue(
-      'Test route',
+        expect(screen.getByText(name)).toBeInTheDocument()
+      },
     )
   })
 })

deployables/app/app/routes/edit-route.tsx

@@ -1,21 +1,28 @@
+import { ChainSelect } from '@/components'
 import { invariantResponse } from '@epic-web/invariant'
 import { executionRouteSchema } from '@zodiac/schema'
 import { TextInput } from '@zodiac/ui'
+import { splitPrefixedAddress } from 'ser-kit'
 import type { Route } from './+types/edit-route'
 
 export const loader = ({ request }: Route.LoaderArgs) => {
   const url = new URL(request.url)
 
   const routeData = url.searchParams.get('route')
 
+  console.log({ routeData })
+
   invariantResponse(routeData != null, 'Missing "route" parameter')
 
   const decodedData = Buffer.from(routeData, 'base64')
 
   try {
     const rawJson = JSON.parse(decodedData.toString())
+    const route = executionRouteSchema.parse(rawJson)
+
+    const [chainId] = splitPrefixedAddress(route.avatar)
 
-    return { route: executionRouteSchema.parse(rawJson) }
+    return { label: route.label, chainId }
   } catch {
     throw new Response(null, { status: 400 })
   }
@@ -24,7 +31,8 @@ export const loader = ({ request }: Route.LoaderArgs) => {
 const EditRoute = ({ loaderData }: Route.ComponentProps) => {
   return (
     <>
-      <TextInput label="Label" defaultValue={loaderData.route.label} />
+      <TextInput label="Label" defaultValue={loaderData.label} />
+      <ChainSelect value={loaderData.chainId} onChange={() => {}} />
     </>
   )
 }

deployables/app/package.json

@@ -13,12 +13,14 @@
     "@epic-web/invariant": "^1.0.0",
     "@react-router/node": "^7.1.1",
     "@react-router/serve": "^7.1.1",
+    "@zodiac/chains": "workspace:*",
     "@zodiac/schema": "workspace:*",
     "@zodiac/ui": "workspace:*",
     "isbot": "^5.1.17",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router": "^7.1.1",
+    "ser-kit": "1.1.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {

deployables/app/tsconfig.cloudflare.json

@@ -21,8 +21,8 @@
     "baseUrl": ".",
     "rootDirs": [".", "./.react-router/types"],
     "paths": {
-      "~/*": ["./app/*"],
-      "@/test-utils": ["./test-utils/index.ts"]
+      "@/test-utils": ["./test-utils/index.ts"],
+      "@/components": ["./app/components/index.ts"]
     },
     "esModuleInterop": true,
     "resolveJsonModule": true

deployables/app/tsconfig.json

@@ -7,7 +7,8 @@
   ],
   "compilerOptions": {
     "paths": {
-      "@/test-utils": ["./test-utils/index.ts"]
+      "@/test-utils": ["./test-utils/index.ts"],
+      "@/components": ["./app/components/index.ts"]
     }
   }
 }

deployables/app/vite.config.ts

@@ -18,6 +18,9 @@ export default defineConfig(({ isSsrBuild }) => ({
       plugins: [tailwindcss, autoprefixer],
     },
   },
+  define: {
+    'process.env': {},
+  },
   ssr: {
     target: 'webworker',
     // noExternal: true,
@@ -35,16 +38,5 @@ export default defineConfig(({ isSsrBuild }) => ({
       ],
     },
   },
-  plugins: [
-    cloudflareDevProxy(),
-    // vitePluginViteNodeMiniflare({
-    //   entry: './workers/app.ts',
-    //   miniflareOptions: (options) => {
-    //     options.compatibilityDate = '2024-11-18'
-    //     options.compatibilityFlags = ['nodejs_compat']
-    //   },
-    // }),
-    reactRouter(),
-    tsconfigPaths(),
-  ],
+  plugins: [cloudflareDevProxy(), reactRouter(), tsconfigPaths()],
 }))

deployables/app/vitest.setup.ts

@@ -1 +1,10 @@
 import '@testing-library/jest-dom/vitest'
+import { cleanup } from '@testing-library/react'
+import { sleepTillIdle } from '@zodiac/test-utils'
+import { afterEach } from 'vitest'
+
+afterEach(async () => {
+  await sleepTillIdle()
+
+  cleanup()
+})

deployables/extension/package.json

@@ -78,7 +78,7 @@
     "react-dom": "^19.0.0",
     "react-select": "5.9.0",
     "rimraf": "6.0.1",
-    "ser-kit": "1.0.7",
+    "ser-kit": "1.1.0",
     "tailwindcss": "^3.4.14",
     "typescript": "^5.5.4",
     "vitest": "2.1.8",

deployables/extension/src/panel/pages/routes/edit.$routeId/ChainSelect.tsx

@@ -29,7 +29,7 @@ export const ChainSelect = ({ value, onChange }: Props) => (
 
       onChange(option.value)
     }}
-    formatOptionLabel={ChainOptionLabel as any}
+    formatOptionLabel={ChainOptionLabel}
   />
 )
 

packages/chains/package.json

@@ -20,12 +20,12 @@
     "@zodiac/schema": "workspace:*"
   },
   "peerDependencies": {
-    "ser-kit": "1.0.7"
+    "ser-kit": "1.1.0"
   },
   "devDependencies": {
     "@zodiac/eslint-config": "workspace:*",
     "@zodiac/typescript-config": "workspace:*",
     "eslint": "^9.7.0",
-    "ser-kit": "1.0.7"
+    "ser-kit": "1.1.0"
   }
 }

packages/schema/package.json

@@ -16,7 +16,7 @@
     }
   },
   "dependencies": {
-    "ser-kit": "1.0.7",
+    "ser-kit": "1.1.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {

packages/test-utils/package.json

@@ -26,7 +26,7 @@
   "peerDependencies": {
     "react": "19.0.0",
     "react-router": "7.1.1",
-    "ser-kit": "1.0.7"
+    "ser-kit": "1.1.0"
   },
   "devDependencies": {
     "@types/node": "^22.10.5",
@@ -35,6 +35,6 @@
     "@zodiac/eslint-config": "workspace:*",
     "@zodiac/typescript-config": "workspace:*",
     "eslint": "^9.7.0",
-    "ser-kit": "1.0.7"
+    "ser-kit": "1.1.0"
   }
 }