app: clean up paymaster activity (#470)

* app: clean up paymaster activity

add labelAddress to activity
hide fees from main activity

* opt-in react query devtool

* fix up account settings layout

* clean up passkey texts

* fix specs

* one more test fix

* one more activity test

* type checking, type fixes, only retry 1 in CI

* fix more type stuff

* fix clean

* don't use turbo

* build first

* try longer default, no retries

* nvm, only retry once, 30s timeout

Author: 0xBigBoss

.env.local.template

@@ -16,3 +16,4 @@ NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID=33fe0df7cd4f445f4e2ba7e0fd6ed314
 SNAPLET_HASH_KEY=sendapp
 SEND_ACCOUNT_FACTORY_PRIVATE_KEY=0x59c6995e998f97a5a0044966f0945389dc9e86dae88c7a8412f4603b6b78690d
 SECRET_SHOP_PRIVATE_KEY=0x5de4111afa1a4b94908f83103eb1f1706367c2e68ca870fc3fb9a804cdab365a
+# NEXT_PUBLIC_ENABLE_QUERY_DEV_TOOLS=1

.github/workflows/ci.yml

@@ -42,6 +42,8 @@ jobs:
         env:
           YARN_ENABLE_HARDENED_MODE: 0
           SKIP_YARN_POST_INSTALL: 1
+      - name: Build
+        run: yarn build
       - name: Lint
         run: yarn lint
 

environment.d.ts

@@ -31,6 +31,10 @@ declare global {
        * Private key for the Send Account Factory wallet client used to create Send Accounts
        */
       SEND_ACCOUNT_FACTORY_PRIVATE_KEY: string
+      /**
+       * Enables the query dev tool in the browser
+       */
+      NEXT_PUBLIC_ENABLE_QUERY_DEV_TOOLS: string
     }
   }
   /**

package.json

@@ -15,7 +15,7 @@
     "web:prod": "yarn workspace next-app build",
     "web:prod:serve": "yarn workspace next-app serve",
     "fix": "manypkg fix",
-    "postinstall": "test -n \"$SKIP_YARN_POST_INSTALL\" || (yarn check-deps && turbo build --filter='!next-app')",
+    "postinstall": "test -n \"$SKIP_YARN_POST_INSTALL\" || (yarn check-deps && yarn build)",
     "build": "yarn workspaces foreach --all --exclude next-app run build",
     "biome:check": "biome check .",
     "biome:check:fix": "biome check . --apply",

packages/app/.eslintrc.js

@@ -1,5 +1,10 @@
 /** @type {import("eslint").Linter.Config} */
 module.exports = {
   extends: ['custom', 'plugin:@tanstack/eslint-plugin-query/recommended'],
-  ignorePatterns: ['.eslintrc.js'],
+  ignorePatterns: ['.eslintrc.js', 'coverage/**'],
+  parserOptions: {
+    project: './tsconfig.json',
+    tsconfigRootDir: __dirname,
+    sourceType: 'module',
+  },
 }

packages/app/__mocks__/@my/wagmi/index.ts

@@ -34,6 +34,9 @@ const mockMyWagmi = {
   sendTokenAddress: {
     845337: '0x3f14920c99BEB920Afa163031c4e47a3e03B3e4A',
   },
+  tokenPaymasterAddress: {
+    845337: '0x5e421172B27658f2bD83BCBD13738ADdE00E7CA9',
+  },
   useWriteErc20Transfer: jest.fn().mockReturnValue({
     data: '0x123',
     writeContract: jest.fn(),
@@ -47,4 +50,5 @@ export const baseMainnetClient = mockMyWagmi.baseMainnetClient
 export const baseMainnet = mockMyWagmi.baseMainnet
 export const usdcAddress = mockMyWagmi.usdcAddress
 export const sendTokenAddress = mockMyWagmi.sendTokenAddress
+export const tokenPaymasterAddress = mockMyWagmi.tokenPaymasterAddress
 export default mockMyWagmi

packages/app/assets/img/react-native-svg.d.ts

@@ -82,11 +82,10 @@ const AddPasskeySigner = ({ webauthnCred }: { webauthnCred: Tables<'webauthn_cre
       gap={'$2'}
     >
       <H2 size={'$8'} fontWeight={'300'} color={'$color05'}>
-        Add Passkey as Signer
+        Passkey {webauthnCred?.display_name} has been saved
       </H2>
       <Paragraph size={'$6'} fontWeight={'300'} color={'$color05'}>
-        Your passkey {webauthnCred?.display_name} has been saved. Add your new passkey as a signer.
-        This will allow you to sign transactions on your account with your new passkey.
+        Add your new passkey as a Signer to authorize it to sign transactions on your account.
       </Paragraph>
       <YStack gap={'$2'} jc="center">
         <AddSignerButton webauthnCred={webauthnCred} />

packages/app/features/account/settings/backup/confirm.tsx

@@ -145,8 +145,8 @@ const CreatePasskeyForm = ({
               Add Passkey
             </H1>
             <Paragraph size={'$6'} fontWeight={'300'} color={'$color05'}>
-              Backup your Send Account by creating a passkey and adding it as a signer to your
-              account. Passkeys are authorized devices that can sign transactions for your account.
+              Secure your Send Account by adding up to 20 passkeys. Passkeys are trusted devices
+              authorized to sign your account&apos;s transactions.
             </Paragraph>
           </YStack>
         )}

packages/app/features/account/settings/backup/create.tsx

@@ -24,9 +24,9 @@ import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { IconDots, IconNote, IconX } from 'app/components/icons'
 import { SchemaForm } from 'app/utils/SchemaForm'
 import { assert } from 'app/utils/assert'
+import { byteaToBytes } from 'app/utils/byteaToBytes'
 import { formatTimeDate } from 'app/utils/formatTimeDate'
 import { COSEECDHAtoXY } from 'app/utils/passkeys'
-import { byteaToBytes } from 'app/utils/byteaToBytes'
 import { useSendAccount } from 'app/utils/send-accounts/useSendAccounts'
 import { useSupabase } from 'app/utils/supabase/useSupabase'
 import { throwIf } from 'app/utils/throwIf'
@@ -52,16 +52,16 @@ export const BackupScreen = () => {
           $theme-dark={{ color: '$lightGrayTextField' }}
           $theme-light={{ color: '$darkGrayTextField' }}
         >
-          Add Passkey as Signer
+          Add Passkeys as Signers
         </H1>
 
         <Paragraph
           size={'$5'}
           $theme-dark={{ color: '$lightGrayTextField' }}
           $theme-light={{ color: '$darkGrayTextField' }}
         >
-          Backup your Send Account by add up to 20 passkeys to your account. Passkeys are authorized
-          devices that can sign transactions for your account.
+          Secure your Send Account by adding up to 20 passkeys. Passkeys are trusted devices
+          authorized to sign your account&apos;s transactions.
         </Paragraph>
       </YStack>
 

packages/app/features/account/settings/backup/index.tsx

@@ -1,4 +1,4 @@
-import { Separator, XStack, YStack, useMedia } from '@my/ui'
+import { Separator, XStack, YStack } from '@my/ui'
 import { SettingsLinks } from './SettingsLinks'
 
 export type SettingsLayoutProps = {
@@ -13,9 +13,7 @@ export type SettingsLayoutProps = {
 }
 
 export const SettingsLayout = ({ children }: SettingsLayoutProps) => {
-  const media = useMedia()
-
-  return media.gtLg ? (
+  return (
     <XStack f={1} pt={'$4'}>
       <YStack
         backgroundColor="$color1"
@@ -24,6 +22,8 @@ export const SettingsLayout = ({ children }: SettingsLayoutProps) => {
           transition: '200ms ease width',
         }}
         width="$14"
+        display="none"
+        $gtLg={{ display: 'flex' }}
       >
         <YStack width={'100%'} gap={'$4'}>
           <YStack jc={'space-between'} zIndex={4} flex={1} width={'100%'}>
@@ -33,12 +33,10 @@ export const SettingsLayout = ({ children }: SettingsLayoutProps) => {
           </YStack>
         </YStack>
       </YStack>
-      <Separator vertical />
+      <Separator display="none" $gtLg={{ display: 'flex' }} vertical />
       <YStack f={1} ai="center" ml="$8">
         <YStack width="100%">{children}</YStack>
       </YStack>
     </XStack>
-  ) : (
-    <YStack width="100%">{children}</YStack>
   )
 }

packages/app/features/account/settings/layout.web.tsx

@@ -1,14 +1,20 @@
+import { tokenPaymasterAddress } from '@my/wagmi'
 import type { PostgrestError } from '@supabase/postgrest-js'
 import {
   useInfiniteQuery,
   type InfiniteData,
   type UseInfiniteQueryResult,
 } from '@tanstack/react-query'
+import { hexToBytea } from 'app/utils/hexToBytea'
 import { useSupabase } from 'app/utils/supabase/useSupabase'
 import { throwIf } from 'app/utils/throwIf'
 import { EventArraySchema, type Activity } from 'app/utils/zod/activity'
 import type { ZodError } from 'zod'
 
+const pgPaymasterCondValues = Object.values(tokenPaymasterAddress)
+  .map((a) => hexToBytea(a))
+  .join(',')
+
 /**
  * Infinite query to fetch activity feed. Filters out activities with no from or to user (not a send app user).
  * @param pageSize - number of items to fetch per page
@@ -27,6 +33,8 @@ export function useActivityFeed({
       .from('activity_feed')
       .select('*')
       .or('from_user.not.is.null, to_user.not.is.null') // only show activities with a send app user
+      .not('data->>t', 'in', `(${pgPaymasterCondValues})`) // filter out paymaster fees for gas
+      .not('data->>f', 'in', `(${pgPaymasterCondValues})`) // filter out paymaster refunds
       .order('created_at', { ascending: false })
       .range(from, to)
     throwIf(error)

packages/app/features/activity/utils/useActivityFeed.ts

@@ -9,16 +9,17 @@ export const DotLineBorder = memo(
   themed((props: IconProps) => {
     const { size: sizeToken, color, ...rest } = props
 
-    const size =
-      // @ts-expect-error because tamagui expects size tokens to not be prefixed with $
-      typeof sizeToken === 'string' ? getTokens().size[sizeToken] : props.size
+    const size = typeof sizeToken === 'string' ? getTokens().size[sizeToken] : props.size
 
     return (
+      // @ts-expect-error some work to do here
       <Svg
         color={color as ColorTokens | undefined}
         fill="none"
-        width={aspectRatio * size}
-        height={size}
+        // biome-ignore lint/suspicious/noExplicitAny: not sure how to get the size from the theme typed correctly
+        width={(aspectRatio * size) as any}
+        // biome-ignore lint/suspicious/noExplicitAny: not sure how to get the size from the theme typed correctly
+        height={size as any}
         viewBox="0 0 47 310"
         {...rest}
       >

packages/app/features/auth/onboarding/DotLineBorder.tsx

@@ -3,6 +3,8 @@ import { TamaguiProvider, config } from '@my/ui'
 import { render } from '@testing-library/react-native'
 import { HomeScreen } from './screen'
 
+jest.mock('@my/wagmi')
+
 jest.mock('app/utils/useUser', () => ({
   useUser: jest.fn().mockReturnValue({
     user: {

packages/app/features/home/screen.test.tsx

@@ -7,17 +7,8 @@ import {
 } from '@tanstack/react-query'
 import { useSupabase } from 'app/utils/supabase/useSupabase'
 import { throwIf } from 'app/utils/throwIf'
-import {
-  EventArraySchema,
-  Events,
-  SendAccountTransfersEventSchema,
-  type Activity,
-} from 'app/utils/zod/activity'
-import { z, type ZodError } from 'zod'
-
-const SendAccountTransfersEvenArraySchema = z.array(SendAccountTransfersEventSchema)
-
-type SendAccountTransfersEventArray = z.infer<typeof SendAccountTransfersEvenArraySchema>
+import { EventArraySchema, Events, type Activity } from 'app/utils/zod/activity'
+import type { ZodError } from 'zod'
 
 /**
  * Infinite query to fetch ERC-20 token activity feed.

packages/app/features/home/utils/useTokenActivityFeed.ts

@@ -1,7 +1,10 @@
-import { Avatar, type AvatarProps, SizableText } from '@my/ui'
-import type { ProfileProp } from './screen'
+import type { Functions } from '@my/supabase/database.types'
+import { Avatar, SizableText, type AvatarProps } from '@my/ui'
 
-export function AvatarProfile({ profile, ...rest }: AvatarProps & { profile: ProfileProp }) {
+export function AvatarProfile({
+  profile,
+  ...rest
+}: AvatarProps & { profile: Functions<'profile_lookup'>[number] }) {
   return (
     <Avatar testID="avatar" size="$8" br="$4" gap="$2" mx="auto" $gtSm={{ mx: '0' }} {...rest}>
       <Avatar.Image

packages/app/features/profile/AvatarProfile.tsx

@@ -17,6 +17,7 @@ import { assert } from 'app/utils/assert'
 
 import { baseMainnet } from '@my/wagmi'
 import { useBalance } from 'wagmi'
+// @ts-expect-error some work to do here
 import { useSendParams } from 'app/routers/params'
 import { useForm } from 'react-hook-form'
 import { formFields } from 'app/utils/SchemaForm'
@@ -90,6 +91,7 @@ export function SendConfirm({ profile }: { profile: ProfileProp }) {
   const { data: nonce, error: nonceError } = useAccountNonce({ sender: sendAccount?.address })
   const { data: userOp } = useGenerateTransferUserOp({
     sender: sendAccount?.address,
+    // @ts-expect-error some work to do here
     to: profile?.address,
     token: tokenParam === 'eth' ? undefined : tokenParam,
     amount: BigInt(amount),
@@ -184,7 +186,7 @@ export function SendConfirm({ profile }: { profile: ProfileProp }) {
                   lineHeight="$1"
                   color="$color12"
                 >
-                  @{profile?.tag_name}
+                  @{profile?.tag}
                 </Paragraph>
               </YStack>
             </XStack>

packages/app/features/send/confirm/index.tsx

@@ -81,6 +81,7 @@ export function SendConfirm({ profile }: { profile: ProfileProp }) {
   const { data: nonce, error: nonceError } = useAccountNonce({ sender: sendAccount?.address })
   const { data: userOp } = useGenerateTransferUserOp({
     sender: sendAccount?.address,
+    // @ts-expect-error some work to do here
     to: profile?.address,
     token: queryParams.sendToken === 'eth' ? undefined : queryParams.sendToken,
     amount: BigInt(amount),

packages/app/features/send/confirm/screen.tsx

@@ -7,8 +7,9 @@
     "*.css"
   ],
   "scripts": {
-    "lint": "eslint .",
+    "lint": "tsc --noEmit && eslint .",
     "lint:fix": "eslint . --fix",
+    "clean": "rm -f .tsconfig.tsbuildinfo && rm -rf coverage && rm -rf .turbo",
     "test": "jest"
   },
   "dependencies": {
@@ -71,6 +72,7 @@
     "jest": "^29.7.0",
     "jest-expo": "^50.0.0",
     "nock": "^14.0.0-beta.2",
-    "react-test-renderer": "^18.2.0"
+    "react-test-renderer": "^18.2.0",
+    "typescript": "^5.3.3"
   }
 }

packages/app/package.json

@@ -22,7 +22,7 @@ export function Provider({
     <AuthProvider initialSession={initialSession}>
       <Providers>
         {children}
-        <ReactQueryDevtools initialIsOpen={false} />
+        {process.env.NEXT_PUBLIC_ENABLE_QUERY_DEV_TOOLS && <ReactQueryDevtools />}
       </Providers>
     </AuthProvider>
   )

packages/app/provider/index.tsx

@@ -18,7 +18,7 @@ export interface TagSearchContextValue {
   form: ReturnType<typeof useForm<SearchSchema>>
   isLoading: boolean
   error: PostgrestError | null
-  results: Functions<'tag_search'> | null
+  results: Functions<'tag_search'>[number] | null
 }
 
 const TagSearch = createContext<TagSearchContextValue>(null as unknown as TagSearchContextValue)
@@ -37,7 +37,7 @@ async function searchTags({ supabase, query, limit_val, offset_val }: SearchTags
   }
   abortController = new AbortController()
   const { data, error } = await supabase
-    .rpc('tag_search', { query, limit_val, offset_val })
+    .rpc('tag_search', { query, limit_val: limit_val ?? 10, offset_val: offset_val ?? 0 })
     .abortSignal(abortController.signal)
   return { data, error }
 }
@@ -47,7 +47,7 @@ export const TagSearchProvider = ({ children }: { children: React.ReactNode }) =
   const supabase = useSupabase()
   const [isLoading, setIsLoading] = useState(false)
   const [error, setError] = useState<PostgrestError | null>(null)
-  const [results, setResults] = useState<Functions<'tag_search'> | null>(null)
+  const [results, setResults] = useState<Functions<'tag_search'>[number] | null>(null)
 
   const onSearch = useDebounce(
     async function onSearch({ query }: SearchSchema) {
@@ -56,15 +56,14 @@ export const TagSearchProvider = ({ children }: { children: React.ReactNode }) =
         setError(null)
         const result = await searchTags({ supabase, query, limit_val: 10, offset_val: 0 })
         const { data, error } = result
-        const results = data && data.length > 0 ? data[0] : []
         if (error) {
           if (error.message.includes('user aborted')) {
             return
           }
           setError(error)
           return
         }
-        setResults(results)
+        setResults(data?.[0] ?? null)
       } finally {
         setIsLoading(false)
       }

packages/app/provider/tag-search/TagSearchProvider.tsx

@@ -19,6 +19,7 @@
     "__mocks__",
     "tamagui.config.ts"
   ],
+  "exclude": ["coverage"],
   "compilerOptions": {
     "noEmit": true,
     "composite": true,