feat(pilot-app): select token to transfer

.cspell.json

@@ -77,6 +77,7 @@
     "Sorhus",
     "Sourcify",
     "speculationrules",
+    "spinbutton",
     "staderlabs",
     "Stakewise",
     "Sushiswap",

deployables/app/app/balances/client/index.ts

@@ -0,0 +1,2 @@
+export type { BalanceResult, TokenBalance } from '../types'
+export { useTokenBalances } from './useTokenBalances'

deployables/app/app/balances/client/useTokenBalances.ts

@@ -0,0 +1,19 @@
+import { useEffect } from 'react'
+import { useFetcher } from 'react-router'
+import { useAccount } from 'wagmi'
+import type { BalanceResult } from '../types'
+
+export const useTokenBalances = () => {
+  const { address, chainId } = useAccount()
+  const { load, data = [], state } = useFetcher<BalanceResult>()
+
+  useEffect(() => {
+    if (address == null || chainId == null) {
+      return
+    }
+
+    load(`/${address}/${chainId}/balances`)
+  }, [address, chainId, load])
+
+  return [data, state] as const
+}

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

@@ -0,0 +1,30 @@
+import type { ChainId } from '@zodiac/chains'
+import { getMoralisApiKey } from '@zodiac/env'
+import type { HexAddress } from '@zodiac/schema'
+import Moralis from 'moralis'
+import type { Ref } from 'react'
+import type { BalanceResult } from '../types'
+
+const startedRef: Ref<boolean> = { current: false }
+
+export const getTokenBalances = async (
+  chainId: ChainId,
+  address: HexAddress,
+): Promise<BalanceResult> => {
+  if (startedRef.current === false) {
+    startedRef.current = true
+
+    await Moralis.start({
+      apiKey: getMoralisApiKey(),
+    })
+  }
+
+  const response = await Moralis.EvmApi.wallets.getWalletTokenBalancesPrice({
+    chain: chainId.toString(),
+    address,
+  })
+
+  return response.result
+    .filter((result) => !result.possibleSpam)
+    .map((result) => result.toJSON())
+}

deployables/app/app/balances/server/index.ts

@@ -0,0 +1,2 @@
+export type { BalanceResult, TokenBalance } from '../types'
+export { getTokenBalances } from './getTokenBalances'

deployables/app/app/balances/types.ts

@@ -0,0 +1,9 @@
+import type Moralis from 'moralis'
+
+export type BalanceResult = ReturnType<
+  Awaited<
+    ReturnType<(typeof Moralis.EvmApi.wallets)['getWalletTokenBalancesPrice']>
+  >['result'][number]['toJSON']
+>[]
+
+export type TokenBalance = BalanceResult[number]

deployables/app/app/components/AvatarInput.tsx

@@ -61,7 +61,6 @@ export const AvatarInput = ({ value, waypoints, onChange }: Props) => {
         label="Piloted Safe"
         clearLabel="Clear piloted Safe"
         dropdownLabel="View all available Safes"
-        formatOptionLabel={SafeOptionLabel}
         placeholder="Paste an address or select from the list"
         classNames={selectStyles<Option>()}
         value={
@@ -89,7 +88,17 @@ export const AvatarInput = ({ value, waypoints, onChange }: Props) => {
         isValidNewOption={(option) => {
           return !!validateAddress(option)
         }}
-      />
+      >
+        {({ data: { value } }) => (
+          <div className="flex items-center gap-4">
+            <Blockie address={value} className="size-5 shrink-0" />
+
+            <code className="overflow-hidden text-ellipsis whitespace-nowrap font-mono">
+              {getAddress(value).toLowerCase()}
+            </code>
+          </div>
+        )}
+      </Select>
     )
   }
 
@@ -112,17 +121,3 @@ export const AvatarInput = ({ value, waypoints, onChange }: Props) => {
     />
   )
 }
-
-const SafeOptionLabel = (option: Option) => {
-  const checksumAddress = getAddress(option.value).toLowerCase()
-
-  return (
-    <div className="flex items-center gap-4 py-2">
-      <Blockie address={option.value} className="size-5 shrink-0" />
-
-      <code className="overflow-hidden text-ellipsis whitespace-nowrap font-mono">
-        {checksumAddress}
-      </code>
-    </div>
-  )
-}

deployables/app/app/components/ChainSelect.tsx

@@ -8,11 +8,6 @@ export interface Props {
   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,
@@ -30,12 +25,11 @@ export const ChainSelect = ({ value, onChange }: Props) => (
 
       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>
+  >
+    {({ data: { label, value } }) => (
+      <div className="flex items-center gap-4">
+        <div className="pl-1">{label || `#${value}`}</div>
+      </div>
+    )}
+  </Select>
 )

deployables/app/app/components/ModSelect.tsx

@@ -12,36 +12,35 @@ export interface Option {
 }
 
 interface Props<Option = unknown, Multi extends boolean = boolean>
-  extends SelectProps<false, Option, Multi> {
+  extends SelectProps<Option, false, Multi> {
   avatarAddress: HexAddress
 }
 
 export function ModSelect<Multi extends boolean = boolean>({
   avatarAddress,
   ...props
 }: Props<Option, Multi>) {
-  const ModuleOptionLabel = (option: Option) => {
-    if (!option.value)
-      return (
-        <Value label="No Mod — Direct execution" address={avatarAddress}>
-          Transactions submitted directly to the Safe
-        </Value>
-      )
-
-    const checksumAddress = getAddress(option.value)
-    return (
-      <Value address={option.value} label={option.label}>
-        {checksumAddress}
-      </Value>
-    )
-  }
-
   return (
     <Select
       {...props}
-      formatOptionLabel={ModuleOptionLabel}
       noOptionsMessage={() => 'No modules are enabled on this Safe'}
-    />
+    >
+      {({ data: { value, label } }) => {
+        if (!value)
+          return (
+            <Value label="No Mod — Direct execution" address={avatarAddress}>
+              Transactions submitted directly to the Safe
+            </Value>
+          )
+
+        const checksumAddress = getAddress(value)
+        return (
+          <Value address={value} label={label}>
+            {checksumAddress}
+          </Value>
+        )
+      }}
+    </Select>
   )
 }
 
@@ -51,7 +50,7 @@ type ValueProps = PropsWithChildren<{
 }>
 
 const Value = ({ label, address, children }: ValueProps) => (
-  <div className="flex items-center gap-4 py-2">
+  <div className="flex items-center gap-4">
     <Blockie address={address} className="size-5 shrink-0" />
 
     <div className="flex items-center gap-2 overflow-hidden">

deployables/app/app/components/wallet/WalletProvider.tsx

@@ -1,23 +1,10 @@
+import { getWagmiConfig } from '@/wagmi'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { getDefaultConfig } from 'connectkit'
 import { useMemo, type PropsWithChildren } from 'react'
-import { createConfig, injected, WagmiProvider } from 'wagmi'
-import {
-  arbitrum,
-  avalanche,
-  base,
-  gnosis,
-  mainnet,
-  optimism,
-  polygon,
-  sepolia,
-} from 'wagmi/chains'
-import { metaMask, walletConnect } from 'wagmi/connectors'
+import { WagmiProvider } from 'wagmi'
 
 const queryClient = new QueryClient()
 
-const WALLETCONNECT_PROJECT_ID = '0f8a5e2cf60430a26274b421418e8a27'
-
 export type WalletProviderProps = PropsWithChildren<{
   injectedOnly?: boolean
 }>
@@ -34,32 +21,3 @@ export const WalletProvider = ({
     </QueryClientProvider>
   )
 }
-
-export const getWagmiConfig = (injectedOnly: boolean) =>
-  createConfig(
-    getDefaultConfig({
-      appName: 'Zodiac Pilot',
-      ssr: true,
-      walletConnectProjectId: WALLETCONNECT_PROJECT_ID,
-      chains: [
-        mainnet,
-        optimism,
-        gnosis,
-        polygon,
-        sepolia,
-        base,
-        arbitrum,
-        avalanche,
-      ],
-      connectors: injectedOnly
-        ? [injected()]
-        : [
-            injected(),
-            metaMask(),
-            walletConnect({
-              projectId: WALLETCONNECT_PROJECT_ID,
-              showQrModal: false,
-            }),
-          ],
-    }),
-  )

deployables/app/app/components/wallet/index.ts

@@ -1,3 +1,3 @@
 export { ConnectWallet } from './ConnectWallet'
 export { ConnectWalletFallback } from './ConnectWalletFallback'
-export { WalletProvider, getWagmiConfig } from './WalletProvider'
+export { WalletProvider } from './WalletProvider'

deployables/app/app/routes.ts

@@ -13,7 +13,9 @@ export default [
     layout('routes/tokens/balances/layout.tsx', [
       route('balances', 'routes/tokens/balances/balances.tsx'),
     ]),
-    route('send', 'routes/tokens/send.tsx'),
+    layout('routes/tokens/send/layout.tsx', [
+      route('send', 'routes/tokens/send/send.tsx'),
+    ]),
   ]),
   route('/new-route', 'routes/new-route.ts'),
   route('/edit-route/:data', 'routes/edit-route.$data.tsx'),

deployables/app/app/routes/$address.$chainId/balances.ts

@@ -1,28 +1,15 @@
-import { getMoralisApiKey } from '@zodiac/env'
-import Moralis from 'moralis'
-import type { Ref } from 'react'
-import type { BalanceResult } from '../types.server'
+import { getTokenBalances, type BalanceResult } from '@/balances-server'
+import { verifyChainId } from '@zodiac/chains'
+import { verifyHexAddress } from '@zodiac/schema'
 import type { Route } from './+types/balances'
 
-const startedRef: Ref<boolean> = { current: false }
-
 export const loader = async ({
   params,
 }: Route.LoaderArgs): Promise<BalanceResult> => {
   const { chainId, address } = params
 
-  if (startedRef.current === false) {
-    startedRef.current = true
-
-    await Moralis.start({
-      apiKey: getMoralisApiKey(),
-    })
-  }
-
-  const response = await Moralis.EvmApi.wallets.getWalletTokenBalancesPrice({
-    chain: chainId,
-    address,
-  })
-
-  return response.result.filter((result) => !result.possibleSpam)
+  return getTokenBalances(
+    verifyChainId(parseInt(chainId)),
+    verifyHexAddress(address),
+  )
 }

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

@@ -312,7 +312,9 @@ describe('Edit route', () => {
       )
       await userEvent.click(screen.getByRole('option', { name: 'Roles v2' }))
 
-      expect(await screen.findByText('Roles v2')).toBeInTheDocument()
+      await waitFor(async () => {
+        expect(await screen.findByText('Roles v2')).toBeInTheDocument()
+      })
     })
 
     it('reloads the modules when the chain changes', async () => {
@@ -357,7 +359,9 @@ describe('Edit route', () => {
 
         await render(`/edit-route/${encode(route)}`)
 
-        expect(await screen.findByText('Roles v1')).toBeInTheDocument()
+        await waitFor(async () => {
+          expect(await screen.findByText('Roles v1')).toBeInTheDocument()
+        })
       })
 
       it('is possible to select the v1 roles mod', async () => {
@@ -382,7 +386,9 @@ describe('Edit route', () => {
         )
         await userEvent.click(screen.getByRole('option', { name: 'Roles v1' }))
 
-        expect(await screen.findByText('Roles v1')).toBeInTheDocument()
+        await waitFor(async () => {
+          expect(await screen.findByText('Roles v1')).toBeInTheDocument()
+        })
       })
 
       describe('Config', () => {
@@ -482,7 +488,9 @@ describe('Edit route', () => {
 
         await render(`/edit-route/${encode(route)}`)
 
-        expect(await screen.findByText('Roles v2')).toBeInTheDocument()
+        await waitFor(async () => {
+          expect(await screen.findByText('Roles v2')).toBeInTheDocument()
+        })
       })
 
       it('is possible to select the v2 roles mod', async () => {
@@ -507,7 +515,9 @@ describe('Edit route', () => {
         )
         await userEvent.click(screen.getByRole('option', { name: 'Roles v2' }))
 
-        expect(await screen.findByText('Roles v2')).toBeInTheDocument()
+        await waitFor(async () => {
+          expect(await screen.findByText('Roles v2')).toBeInTheDocument()
+        })
       })
 
       describe('Config', () => {