From 4d1e29a4a4020f5da077a9682ac9848d3652bd5c Mon Sep 17 00:00:00 2001
From: Philipp Giese <187786+frontendphil@users.noreply.github.com>
Date: Thu, 9 Jan 2025 16:10:30 +0100
Subject: [PATCH] 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
---
 .../app/app/components/ChainSelect.tsx        | 40 ++++++++++++++++
 deployables/app/app/components/index.ts       |  1 +
 deployables/app/app/routes/edit-route.spec.ts | 48 +++++++++++++++----
 deployables/app/app/routes/edit-route.tsx     | 12 ++++-
 deployables/app/package.json                  |  2 +
 deployables/app/tsconfig.cloudflare.json      |  4 +-
 deployables/app/tsconfig.json                 |  3 +-
 deployables/app/vite.config.ts                | 16 ++-----
 deployables/app/vitest.setup.ts               |  9 ++++
 deployables/extension/package.json            |  2 +-
 .../routes/edit.$routeId/ChainSelect.tsx      |  2 +-
 packages/chains/package.json                  |  4 +-
 packages/schema/package.json                  |  2 +-
 packages/test-utils/package.json              |  4 +-
 pnpm-lock.yaml                                | 33 ++++++++-----
 15 files changed, 135 insertions(+), 47 deletions(-)
 create mode 100644 deployables/app/app/components/ChainSelect.tsx
 create mode 100644 deployables/app/app/components/index.ts

diff --git a/deployables/app/app/components/ChainSelect.tsx b/deployables/app/app/components/ChainSelect.tsx
new file mode 100644
index 00000000..c56f0853
--- /dev/null
+++ b/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>
+)
diff --git a/deployables/app/app/components/index.ts b/deployables/app/app/components/index.ts
new file mode 100644
index 00000000..bab5df35
--- /dev/null
+++ b/deployables/app/app/components/index.ts
@@ -0,0 +1 @@
+export { ChainSelect } from './ChainSelect'
diff --git a/deployables/app/app/routes/edit-route.spec.ts b/deployables/app/app/routes/edit-route.spec.ts
index 92af3b20..0facdd56 100644
--- a/deployables/app/app/routes/edit-route.spec.ts
+++ b/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()
+      },
     )
   })
 })
diff --git a/deployables/app/app/routes/edit-route.tsx b/deployables/app/app/routes/edit-route.tsx
index 54a6d39a..0215ec84 100644
--- a/deployables/app/app/routes/edit-route.tsx
+++ b/deployables/app/app/routes/edit-route.tsx
@@ -1,6 +1,8 @@
+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) => {
@@ -8,14 +10,19 @@ export const loader = ({ request }: Route.LoaderArgs) => {
 
   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={() => {}} />
     </>
   )
 }
diff --git a/deployables/app/package.json b/deployables/app/package.json
index d8006174..1acfa755 100644
--- a/deployables/app/package.json
+++ b/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": {
diff --git a/deployables/app/tsconfig.cloudflare.json b/deployables/app/tsconfig.cloudflare.json
index 15f2baae..f21a3863 100644
--- a/deployables/app/tsconfig.cloudflare.json
+++ b/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
diff --git a/deployables/app/tsconfig.json b/deployables/app/tsconfig.json
index 2402aeb0..af03f577 100644
--- a/deployables/app/tsconfig.json
+++ b/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"]
     }
   }
 }
diff --git a/deployables/app/vite.config.ts b/deployables/app/vite.config.ts
index 6ff8a534..86f1bf26 100644
--- a/deployables/app/vite.config.ts
+++ b/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()],
 }))
diff --git a/deployables/app/vitest.setup.ts b/deployables/app/vitest.setup.ts
index a9d0dd31..ac0acd29 100644
--- a/deployables/app/vitest.setup.ts
+++ b/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()
+})
diff --git a/deployables/extension/package.json b/deployables/extension/package.json
index 6090035b..978f1f49 100644
--- a/deployables/extension/package.json
+++ b/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",
diff --git a/deployables/extension/src/panel/pages/routes/edit.$routeId/ChainSelect.tsx b/deployables/extension/src/panel/pages/routes/edit.$routeId/ChainSelect.tsx
index 9963de2a..dcaeb990 100644
--- a/deployables/extension/src/panel/pages/routes/edit.$routeId/ChainSelect.tsx
+++ b/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}
   />
 )
 
diff --git a/packages/chains/package.json b/packages/chains/package.json
index e308ae92..5e9d754d 100644
--- a/packages/chains/package.json
+++ b/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"
   }
 }
diff --git a/packages/schema/package.json b/packages/schema/package.json
index 8fac3653..65b14b38 100644
--- a/packages/schema/package.json
+++ b/packages/schema/package.json
@@ -16,7 +16,7 @@
     }
   },
   "dependencies": {
-    "ser-kit": "1.0.7",
+    "ser-kit": "1.1.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {
diff --git a/packages/test-utils/package.json b/packages/test-utils/package.json
index edab565b..0113353d 100644
--- a/packages/test-utils/package.json
+++ b/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"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2723b809..c232fbc0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -79,6 +79,9 @@ importers:
       '@react-router/serve':
         specifier: ^7.1.1
         version: 7.1.1(react-router@7.1.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(typescript@5.7.3)
+      '@zodiac/chains':
+        specifier: workspace:*
+        version: link:../../packages/chains
       '@zodiac/schema':
         specifier: workspace:*
         version: link:../../packages/schema
@@ -97,6 +100,9 @@ importers:
       react-router:
         specifier: ^7.1.1
         version: 7.1.1(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
+      ser-kit:
+        specifier: 1.1.0
+        version: 1.1.0(bufferutil@4.0.9)(typescript@5.7.3)(utf-8-validate@5.0.10)(zod@3.24.1)
       zod:
         specifier: ^3.23.8
         version: 3.24.1
@@ -452,8 +458,8 @@ importers:
         specifier: 6.0.1
         version: 6.0.1
       ser-kit:
-        specifier: 1.0.7
-        version: 1.0.7(bufferutil@4.0.9)(typescript@5.7.3)(utf-8-validate@5.0.10)(zod@3.24.1)
+        specifier: 1.1.0
+        version: 1.1.0(bufferutil@4.0.9)(typescript@5.7.3)(utf-8-validate@5.0.10)(zod@3.24.1)
       tailwindcss:
         specifier: ^3.4.14
         version: 3.4.17
@@ -586,14 +592,14 @@ importers:
         specifier: ^9.7.0
         version: 9.17.0(jiti@2.4.1)
       ser-kit:
-        specifier: 1.0.7
-        version: 1.0.7(bufferutil@4.0.9)(typescript@5.7.3)(utf-8-validate@5.0.10)(zod@3.24.1)
+        specifier: 1.1.0
+        version: 1.1.0(bufferutil@4.0.9)(typescript@5.7.3)(utf-8-validate@5.0.10)(zod@3.24.1)
 
   packages/schema:
     dependencies:
       ser-kit:
-        specifier: 1.0.7
-        version: 1.0.7(bufferutil@4.0.9)(typescript@5.7.3)(utf-8-validate@5.0.10)(zod@3.24.1)
+        specifier: 1.1.0
+        version: 1.1.0(bufferutil@4.0.9)(typescript@5.7.3)(utf-8-validate@5.0.10)(zod@3.24.1)
       zod:
         specifier: ^3.23.8
         version: 3.24.1
@@ -651,8 +657,8 @@ importers:
         specifier: ^9.7.0
         version: 9.17.0(jiti@2.4.1)
       ser-kit:
-        specifier: 1.0.7
-        version: 1.0.7(bufferutil@4.0.9)(typescript@5.7.3)(utf-8-validate@5.0.10)(zod@3.24.1)
+        specifier: 1.1.0
+        version: 1.1.0(bufferutil@4.0.9)(typescript@5.7.3)(utf-8-validate@5.0.10)(zod@3.24.1)
 
   packages/ui:
     dependencies:
@@ -6770,8 +6776,8 @@ packages:
     resolution: {integrity: sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==}
     engines: {node: '>= 0.8.0'}
 
-  ser-kit@1.0.7:
-    resolution: {integrity: sha512-AOlS4rPB1fF1bEV6mNWGPOw9SK1kYRPyntu1m+ZwmEbW45cJoSmkvWVHZNk9lqKwP9eddFIv2WNLey+EztAckQ==}
+  ser-kit@1.1.0:
+    resolution: {integrity: sha512-KRR6mgyHSieXwKEPfgsDCIromdvISBrbGpzH+x3js7/KdJiEJDfwqAb0DSSbWE+JEscoK2YdWcnFkcRnODs+WA==}
 
   serve-static@1.16.2:
     resolution: {integrity: sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==}
@@ -13533,7 +13539,7 @@ snapshots:
 
   isomorphic-timers-promises@1.0.1: {}
 
-  isows@1.0.6(ws@8.18.0):
+  isows@1.0.6(ws@8.18.0(bufferutil@4.0.9)(utf-8-validate@5.0.10)):
     dependencies:
       ws: 8.18.0(bufferutil@4.0.9)(utf-8-validate@5.0.10)
 
@@ -15444,8 +15450,9 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  ser-kit@1.0.7(bufferutil@4.0.9)(typescript@5.7.3)(utf-8-validate@5.0.10)(zod@3.24.1):
+  ser-kit@1.1.0(bufferutil@4.0.9)(typescript@5.7.3)(utf-8-validate@5.0.10)(zod@3.24.1):
     dependencies:
+      '@epic-web/invariant': 1.0.0
       '@safe-global/api-kit': 2.5.6(bufferutil@4.0.9)(typescript@5.7.3)(utf-8-validate@5.0.10)(zod@3.24.1)
       '@safe-global/protocol-kit': 5.1.1(bufferutil@4.0.9)(typescript@5.7.3)(utf-8-validate@5.0.10)(zod@3.24.1)
       '@safe-global/safe-deployments': 1.37.22
@@ -16268,7 +16275,7 @@ snapshots:
       '@scure/bip32': 1.6.0
       '@scure/bip39': 1.5.0
       abitype: 1.0.7(typescript@5.7.3)(zod@3.24.1)
-      isows: 1.0.6(ws@8.18.0)
+      isows: 1.0.6(ws@8.18.0(bufferutil@4.0.9)(utf-8-validate@5.0.10))
       ox: 0.6.0(typescript@5.7.3)(zod@3.24.1)
       webauthn-p256: 0.0.10
       ws: 8.18.0(bufferutil@4.0.9)(utf-8-validate@5.0.10)