app UI cleanup, less flaky onboarding specs (#471)

* app: backup screen UI cleanup

* fix activity page filtering

* fix lint tiltfile

* much less flaky onboarding

* more flakiness reduction

* add markdown playwright report

* fix playright markdown report

* fix report markdown

* try this way

* this is the way

* fix permission issue

Author: 0xBigBoss

.github/workflows/ci.yml

@@ -109,6 +109,10 @@ jobs:
       ANVIL_BASE_FORK_URL: ${{ secrets.CI_ANVIL_BASE_FORK_URL }}
       YARN_ENABLE_HARDENED_MODE: 0
 
+    # for writing PR comments
+    permissions:
+      pull-requests: write
+
     steps:
       - uses: actions/checkout@v4
         with:
@@ -184,6 +188,24 @@ jobs:
             fi
           done
           yarn playwright test
+      - name: Playwright Markdown Report
+        if: always() && steps.playwright.outcome != 'skipped'
+        id: playwright-md-report
+        shell: bash
+        run: |
+          echo "Markdown report:"
+          echo "------------------"
+          bun run packages/playwright/bin/report-markdown.ts > playwright-report.md
+          cat playwright-report.md
+          echo "------------------"
+          echo "Markdown report end"
+      - uses: mshick/add-pr-comment@v2
+        if: always() && steps.playwright.outcome != 'skipped'
+        with:
+          message-id: playwright-report
+          refresh-message-position: true
+          message-path: |
+            playwright-report.md
       - name: Tilt Down
         # always run tilt down if tilt ci started
         if: always() && steps.playwright.outcome != 'skipped'

Tiltfile

@@ -40,6 +40,11 @@ local_resource(
     "yarn lint",
     allow_parallel = True,
     labels = labels,
+    resource_deps = [
+        "yarn:install",
+        "contracts:build",
+        "ui:build",
+    ],
 )
 
 cmd_button(

packages/api/package.json

@@ -15,6 +15,7 @@
     "@wagmi/core": "^2.10.5",
     "app": "workspace:*",
     "debug": "^4.3.4",
+    "p-queue": "^8.0.1",
     "superjson": "^1.13.1",
     "viem": "^2.13.7",
     "zod": "^3.22.4"

packages/api/src/routers/sendAccount.ts

@@ -1,7 +1,6 @@
 import {
   baseMainnet,
   baseMainnetClient,
-  config,
   sendAccountFactoryAbi,
   sendAccountFactoryAddress,
   sendTokenAbi,
@@ -10,22 +9,25 @@ import {
 } from '@my/wagmi'
 import { base16 } from '@scure/base'
 import { TRPCError } from '@trpc/server'
-import { waitForTransactionReceipt } from '@wagmi/core'
 import { base16Regex } from 'app/utils/base16Regex'
+import { hexToBytea } from 'app/utils/hexToBytea'
 import { COSEECDHAtoXY } from 'app/utils/passkeys'
-import { USEROP_SALT, getSendAccountCreateArgs, entrypoint } from 'app/utils/userop'
+import { supabaseAdmin } from 'app/utils/supabase/admin'
+import { throwIf } from 'app/utils/throwIf'
+import { USEROP_SALT, entrypoint, getSendAccountCreateArgs } from 'app/utils/userop'
 import debug from 'debug'
+import PQueue from 'p-queue'
 import { getSenderAddress } from 'permissionless'
 import {
   concat,
   createWalletClient,
   encodeFunctionData,
+  getAbiItem,
   http,
   maxUint256,
-  zeroAddress,
   publicActions,
-  getAbiItem,
   withRetry,
+  zeroAddress,
 } from 'viem'
 import { privateKeyToAccount } from 'viem/accounts'
 import { z } from 'zod'
@@ -43,6 +45,9 @@ const sendAccountFactoryClient = createWalletClient({
   transport: http(baseMainnetClient.transport.url),
 }).extend(publicActions)
 
+// nonce storage to avoid nonce conflicts
+const nonceQueue = new PQueue({ concurrency: 1 })
+
 export const sendAccountRouter = createTRPCRouter({
   create: protectedProcedure
     .input(
@@ -141,68 +146,85 @@ export const sendAccountRouter = createTRPCRouter({
           })
         }
 
-        // @todo ensure address is not already deployed
-        // throw new TRPCError({
-        //   code: 'INTERNAL_SERVER_ERROR',
-        //   message: 'Address already deployed',
-        // })
+        const contractDeployed = await sendAccountFactoryClient.getBytecode({
+          address: senderAddress,
+        })
+        log('createAccount', 'contractDeployed', contractDeployed)
+        if (contractDeployed) {
+          throw new TRPCError({
+            code: 'INTERNAL_SERVER_ERROR',
+            message: 'Address already deployed',
+          })
+        }
 
-        await withRetry(
+        const initCalls = [
+          // approve USDC to paymaster
+          {
+            dest: usdcAddress[baseMainnetClient.chain.id],
+            value: 0n,
+            data: encodeFunctionData({
+              abi: sendTokenAbi,
+              functionName: 'approve',
+              args: [tokenPaymasterAddress[baseMainnetClient.chain.id], maxUint256],
+            }),
+          },
+        ]
+
+        const { request } = await sendAccountFactoryClient
+          .simulateContract({
+            address: sendAccountFactoryAddress[sendAccountFactoryClient.chain.id],
+            abi: sendAccountFactoryAbi,
+            functionName: 'createAccount',
+            args: [
+              keySlot, // key slot
+              xyPubKey, // public key
+              initCalls, // init calls
+              USEROP_SALT, // salt
+            ],
+            value: 0n,
+          })
+          .catch((e) => {
+            log('createAccount', 'simulateContract', e)
+            throw e
+          })
+
+        const hash = await withRetry(
           async function createAccount() {
-            log('createAccount', 'start')
-            const initCalls = [
-              // approve USDC to paymaster
-              {
-                dest: usdcAddress[baseMainnetClient.chain.id],
-                value: 0n,
-                data: encodeFunctionData({
-                  abi: sendTokenAbi,
-                  functionName: 'approve',
-                  args: [tokenPaymasterAddress[baseMainnetClient.chain.id], maxUint256],
-                }),
-              },
-            ]
-
-            const { request } = await sendAccountFactoryClient
-              .simulateContract({
-                address: sendAccountFactoryAddress[sendAccountFactoryClient.chain.id],
-                abi: sendAccountFactoryAbi,
-                functionName: 'createAccount',
-                args: [
-                  keySlot, // key slot
-                  xyPubKey, // public key
-                  initCalls, // init calls
-                  USEROP_SALT, // salt
-                ],
-                value: 0n,
-              })
-              .catch((e) => {
-                log('createAccount', 'simulateContract', e)
-                throw e
-              })
-
-            log('createAccount', 'tx request')
-
-            const hash = await sendAccountFactoryClient.writeContract(request).catch((e) => {
-              log('createAccount', 'writeContract', e)
-              throw e
+            const hash = await nonceQueue.add(async () => {
+              log('createAccount queue', 'start')
+              const nonce = await sendAccountFactoryClient
+                .getTransactionCount({
+                  address: account.address,
+                  blockTag: 'pending',
+                })
+                .catch((e) => {
+                  log('createAccount queue', 'getTransactionCount', e)
+                  throw e
+                })
+              log('createAccount queue', 'tx request', `nonce=${nonce}`)
+              const hash = await sendAccountFactoryClient
+                .writeContract({
+                  ...request,
+                  nonce: nonce,
+                })
+                .catch((e) => {
+                  log('createAccount queue', 'writeContract', e)
+                  throw e
+                })
+
+              log('createAccount queue', `hash=${hash}`)
+              return hash
             })
 
             log('createAccount', `hash=${hash}`)
 
-            await waitForTransactionReceipt(config, {
-              chainId: baseMainnetClient.chain.id,
-              hash,
-            }).catch((e) => {
-              log('createAccount', 'waitForTransactionReceipt', e)
-              throw e
-            })
+            return hash
           },
           {
             retryCount: 20,
             delay: ({ count, error }) => {
               const backoff = 500 + Math.random() * 100 // add some randomness to the backoff
-              log(`delay count=${count} backoff=${backoff} error=${error}`)
+              log(`createAccount delay count=${count} backoff=${backoff} error=${error}`)
               return backoff
             },
             shouldRetry({ count, error }) {
@@ -215,10 +237,56 @@ export const sendAccountRouter = createTRPCRouter({
             },
           }
         ).catch((e) => {
-          log('waitForTransactionReceipt', e)
+          log('createAccount failed', e)
+          console.error('createAccount failed', e)
           throw new TRPCError({ code: 'INTERNAL_SERVER_ERROR', message: e.message })
         })
 
+        if (!hash) {
+          log('createAccount', 'hash is null')
+          throw new TRPCError({
+            code: 'INTERNAL_SERVER_ERROR',
+            message: 'Failed to create send account',
+          })
+        }
+
+        await withRetry(
+          async function waitForTransactionReceipt() {
+            const { count, error } = await supabaseAdmin
+              .from('send_account_created')
+              .select('*', { count: 'exact', head: true })
+              .eq('tx_hash', hexToBytea(hash as `0x${string}`))
+              .eq('account', hexToBytea(senderAddress))
+              .single()
+            throwIf(error)
+            log('waitForTransactionReceipt', `count=${count}`)
+            return count
+          },
+          {
+            retryCount: 20,
+            delay: ({ count, error }) => {
+              const backoff = 500 + Math.random() * 100 // add some randomness to the backoff
+              log(`waitForTransactionReceipt delay count=${count} backoff=${backoff}`, error)
+              return backoff
+            },
+            shouldRetry({ count, error }) {
+              // @todo handle other errors like balance not enough, invalid nonce, etc
+              console.error('waitForTransactionReceipt failed', count, error)
+              if (error.message.includes('Failed to create send account')) {
+                return false
+              }
+              return true
+            },
+          }
+        ).catch((e) => {
+          log('waitForTransactionReceipt failed', e)
+          console.error('waitForTransactionReceipt failed', e)
+          throw new TRPCError({
+            code: 'INTERNAL_SERVER_ERROR',
+            message: e.message ?? 'Failed waiting for transaction receipt',
+          })
+        })
+
         const { error } = await supabase.rpc('create_send_account', {
           send_account: {
             address: senderAddress,

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

@@ -195,7 +195,8 @@ const AddSignerButton = ({ webauthnCred }: { webauthnCred: Tables<'webauthn_cred
       const {
         receipt: { transactionHash },
       } = await sendUserOp({ userOp })
-      toast.show(`Sent user op ${transactionHash}!`)
+      console.log('sent user op', transactionHash)
+      toast.show('Success!')
       router.replace('/account/settings/backup')
     } catch (e) {
       console.error(e)
@@ -238,7 +239,7 @@ const AddSignerButton = ({ webauthnCred }: { webauthnCred: Tables<'webauthn_cred
         {() => (
           <>
             {form.formState.errors?.root?.message ? (
-              <Paragraph size={'$6'} fontWeight={'300'} color={'$color05'}>
+              <Paragraph size={'$6'} fontWeight={'300'} color={'$error'}>
                 {form.formState.errors?.root?.message}
               </Paragraph>
             ) : null}

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

@@ -14,7 +14,7 @@ export type SettingsLayoutProps = {
 
 export const SettingsLayout = ({ children }: SettingsLayoutProps) => {
   return (
-    <XStack f={1} pt={'$4'}>
+    <XStack f={1} pt={'$4'} pb={'$6'}>
       <YStack
         backgroundColor="$color1"
         // this file is web-only so we can safely use CSS
@@ -34,7 +34,7 @@ export const SettingsLayout = ({ children }: SettingsLayoutProps) => {
         </YStack>
       </YStack>
       <Separator display="none" $gtLg={{ display: 'flex' }} vertical />
-      <YStack f={1} ai="center" ml="$8">
+      <YStack f={1} ai="center" $gtLg={{ ml: '$8' }}>
         <YStack width="100%">{children}</YStack>
       </YStack>
     </XStack>

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

@@ -11,10 +11,6 @@ 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,16 +23,23 @@ export function useActivityFeed({
 > {
   const supabase = useSupabase()
   async function fetchActivityFeed({ pageParam }: { pageParam: number }): Promise<Activity[]> {
+    const pgPaymasterCondValues = Object.values(tokenPaymasterAddress)
+      .map((a) => `${hexToBytea(a)}`)
+      .join(',')
+
     const from = pageParam * pageSize
     const to = (pageParam + 1) * pageSize - 1
-    const { data, error } = await supabase
+    const request = supabase
       .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
+      .or(
+        // filter out paymaster fees for gas
+        `data->t.is.null, data->f.is.null, and(data->>t.not.in.(${pgPaymasterCondValues}), data->>f.not.in.(${pgPaymasterCondValues}))`
+      )
       .order('created_at', { ascending: false })
       .range(from, to)
+    const { data, error } = await request
     throwIf(error)
     return EventArraySchema.parse(data)
   }

packages/app/utils/activity.ts

@@ -173,6 +173,8 @@ export function userNameFromActivityUser(
       return user.name
     case !!user?.send_id:
       return `#${user.send_id}`
+    case user === null:
+      return ''
     default:
       console.error('no user name found', user)
       if (__DEV__) {