fix(companion-app): map internal chain id to debank chain id (#767)

Fixes #766

deployables/app/app/balances/server/api.ts

@@ -0,0 +1,25 @@
+import { getDeBankApiKey } from '@zodiac/env'
+import type { z, ZodTypeAny } from 'zod'
+
+type ApiOptions<Schema extends ZodTypeAny> = {
+  schema: Schema
+  data?: Record<string, string | number | boolean>
+}
+
+export const api = async <Schema extends ZodTypeAny>(
+  endpoint: `/${string}`,
+  { schema, data = {} }: ApiOptions<Schema>,
+) => {
+  const url = new URL(`/v1${endpoint}`, 'https://pro-openapi.debank.com')
+
+  Object.entries(data).forEach(([key, value]) =>
+    url.searchParams.set(key, value.toString()),
+  )
+
+  const response = await fetch(url, {
+    headers: { AccessKey: getDeBankApiKey() },
+  })
+
+  const json = await response.json()
+  return schema.parse(json) as z.infer<Schema>
+}

deployables/app/app/balances/server/getDeBankChainId.ts

@@ -0,0 +1,17 @@
+import { invariantResponse } from '@epic-web/invariant'
+import type { ChainId } from 'ser-kit'
+import { chainListSchema } from '../types'
+import { api } from './api'
+
+export const getDeBankChainId = async (chainId: ChainId) => {
+  const chains = await api('/chain/list', { schema: chainListSchema })
+
+  const chain = chains.find((chain) => chain.community_id === chainId)
+
+  invariantResponse(
+    chain != null,
+    `Could not find a chain on DeBank with community_id "${chainId}"`,
+  )
+
+  return chain.id
+}

deployables/app/app/balances/server/getTokenBalances.ts

@@ -1,34 +1,23 @@
-import { invariantResponse } from '@epic-web/invariant'
 import type { ChainId } from '@zodiac/chains'
-import { getDeBankApiKey } from '@zodiac/env'
 import type { HexAddress } from '@zodiac/schema'
-import { chains } from 'ser-kit'
 import { formatUnits } from 'viem'
 import { tokenListSchema, type TokenBalance } from '../types'
+import { api } from './api'
+import { getDeBankChainId } from './getDeBankChainId'
 
 export const getTokenBalances = async (
   chainId: ChainId,
   address: HexAddress,
 ): Promise<TokenBalance[]> => {
-  const endpoint = new URL(
-    '/v1/user/token_list',
-    'https://pro-openapi.debank.com',
-  )
-
-  const chain = chains.find((chain) => chain.chainId === chainId)
-
-  invariantResponse(chain != null, `Could not find chain with ID "${chainId}"`)
-
-  endpoint.searchParams.set('id', address)
-  endpoint.searchParams.set('chain_id', chain.shortName)
-  endpoint.searchParams.set('is_all', 'false')
-
-  const response = await fetch(endpoint, {
-    headers: { AccessKey: getDeBankApiKey() },
+  const rawData = await api('/user/token_list', {
+    schema: tokenListSchema,
+    data: {
+      id: address,
+      chain_id: await getDeBankChainId(chainId),
+      is_all: false,
+    },
   })
 
-  const rawData = tokenListSchema.parse(await response.json())
-
   return rawData
     .map((data) => ({
       contractId: data.id,

deployables/app/app/balances/types.ts

@@ -30,3 +30,15 @@ export type TokenBalance = {
   usdValue: number
   usdPrice: number
 }
+
+const chainSchema = z.object({
+  id: z.string(),
+  community_id: z.number().int(),
+  name: z.string(),
+  logo_url: z.string().nullable(),
+  native_token_id: z.string(),
+  wrapped_token_id: z.string(),
+  is_support_pre_exec: z.boolean(),
+})
+
+export const chainListSchema = chainSchema.array()

deployables/app/app/routes/Sidebar.tsx

@@ -12,7 +12,7 @@ import { NavLink, Outlet } from 'react-router'
 
 const Sidebar = () => {
   return (
-    <div className="flex flex-1">
+    <div className="flex h-full flex-1">
       <div className="flex w-64 flex-col border-r border-zinc-200 bg-zinc-50 dark:border-zinc-800/80 dark:bg-zinc-950">
         <div className="my-12 flex items-center justify-center gap-2">
           <ZodiacOsPlain className="h-6" />