✨ app: home screen revamp

.changeset/clear-trains-move.md

@@ -0,0 +1,5 @@
+---
+"@exactly/mobile": patch
+---
+
+💄 adjust tamagui tokens

.changeset/curly-waves-yell.md

@@ -0,0 +1,5 @@
+---
+"@exactly/mobile": patch
+---
+
+💄 restyle card status component

.changeset/easy-snails-brake.md

@@ -0,0 +1,5 @@
+---
+"@exactly/mobile": patch
+---
+
+💄 restyle action buttons

.changeset/frank-schools-clap.md

@@ -0,0 +1,5 @@
+---
+"@exactly/mobile": patch
+---
+
+💄 restructure sheets layout

.changeset/giant-parrots-enter.md

@@ -0,0 +1,5 @@
+---
+"@exactly/mobile": patch
+---
+
+💄 adjust home scroll view gaps

.changeset/khaki-queens-smash.md

@@ -0,0 +1,5 @@
+---
+"@exactly/mobile": patch
+---
+
+💄 apply tamagui spacing tokens

.changeset/lazy-planes-dance.md

@@ -0,0 +1,5 @@
+---
+"@exactly/mobile": patch
+---
+
+💄 refine benefits carousel

.changeset/little-hoops-train.md

@@ -0,0 +1,5 @@
+---
+"@exactly/mobile": patch
+---
+
+💄 replace fonts

.changeset/salty-fans-mate.md

@@ -0,0 +1,5 @@
+---
+"@exactly/mobile": patch
+---
+
+💄 add vertical frame to styled button

.changeset/soft-beans-grow.md

@@ -0,0 +1,5 @@
+---
+"@exactly/mobile": patch
+---
+
+💫 unify animation parameters

.changeset/spicy-doodles-give.md

@@ -0,0 +1,5 @@
+---
+"@exactly/mobile": patch
+---
+
+💄 restyle portfolio summary

.maestro/flows/local.yaml

@@ -24,5 +24,7 @@ tags: [critical]
     file: ../subflows/mint.yaml
     env: { asset: ETH, to: "${output.account}", amount: "0.1" }
 - runFlow: ../subflows/verifyIdentity.yaml
+- runFlow: ../subflows/assertBenefits.yaml
 - runFlow: ../subflows/activateCard.yaml
+- runFlow: ../subflows/assertHome.yaml
 - runFlow: ../subflows/storeCoverage.yaml

.maestro/subflows/activateCard.yaml

@@ -1,16 +1,13 @@
 appId: ${APP_ID ?? "app.exactly"}
 ---
 - tapOn: Card
-- runFlow:
-    when: { true: "${maestro.platform != 'web'}" }
-    commands:
-      - tapOn: \$[\s\d,.\xa0]+, AVAILABLE BALANCE
-- runFlow:
-    when: { platform: web }
-    commands: [{ tapOn: Available balance }]
+- tapOn: Card details
+- waitForAnimationToEnd
 - runFlow:
     when: { visible: Accept and enable card }
-    commands: [{ tapOn: Accept and enable card }]
+    commands:
+      - runFlow: { file: scrollTo.yaml, env: { element: Accept and enable card } }
+      - tapOn: Accept and enable card
 - assertVisible: Manually add your card to Apple Pay & Google Pay to make contactless payments.
 - tapOn: Close
 - tapOn: Freeze card
@@ -42,4 +39,30 @@ appId: ${APP_ID ?? "app.exactly"}
           text: \$[\s\d,.\xa0]+
           above: Available balance
 - tapOn: Home
-- assertVisible: SPENDING LIMIT
+- runFlow: { file: scrollTo.yaml, env: { element: Exa Card pay mode } }
+- tapOn:
+    text: Learn more
+    rightOf: Exa Card pay mode
+- assertVisible: Change the pay mode before each purchase and pay how you want.
+- tapOn: Close
+- runFlow: { file: scrollTo.yaml, env: { element: Spending limit } }
+- tapOn: Later in 1
+- runFlow:
+    when: { visible: How installment repayment works }
+    commands:
+      - tapOn: Close
+- runFlow:
+    when: { visible: Tap here to change the number of installments }
+    commands:
+      - tapOn: Tap here to change the number of installments
+      - runFlow: { file: ../subflows/tapAria.yaml, env: { aria: Close } }
+- runFlow: { file: scrollTo.yaml, env: { element: Credit limit } }
+- runFlow: { file: ../subflows/tapAria.yaml, env: { aria: Credit limit info } }
+- assertVisible: It's based on the value of your collateral assets and updates as their value changes.
+- tapOn: Close
+- tapOn: Now
+- runFlow: { file: scrollTo.yaml, env: { element: Spending limit } }
+- runFlow: { file: ../subflows/tapAria.yaml, env: { aria: Spending limit info } }
+- assertVisible: It's based on the USDC available in your balance.
+- tapOn: Close
+- tapOn: Home

.maestro/subflows/assertBenefits.yaml

@@ -0,0 +1,33 @@
+appId: ${APP_ID ?? "app.exactly"}
+---
+- repeat:
+    while:
+      notVisible: Copy your ID and get 30 days of travel insurance for free on Pax Assistance.
+    commands:
+      - extendedWaitUntil:
+          visible: 30 days of free travel insurance
+          timeout: 15000
+      - tapOn: Get now
+- assertVisible: "Copy Pax ID [a-z0-9]{10}"
+- assertVisible: Get benefit
+- runFlow: { file: tapAria.yaml, env: { aria: Close } }
+- repeat:
+    while:
+      notVisible: Stay connected around the world.
+    commands:
+      - extendedWaitUntil:
+          visible: 20% OFF on eSims
+          timeout: 15000
+      - tapOn: 20% OFF on eSims
+- assertVisible: Get benefit
+- runFlow: { file: tapAria.yaml, env: { aria: Close } }
+- repeat:
+    while:
+      notVisible: Visa Signature Exa Card benefits
+    commands:
+      - extendedWaitUntil:
+          visible: Visa Signature benefits
+          timeout: 15000
+      - tapOn: Learn more
+- assertVisible: Go to Visa
+- runFlow: { file: tapAria.yaml, env: { aria: Close } }

.maestro/subflows/assertHome.yaml

@@ -0,0 +1,51 @@
+appId: ${APP_ID ?? "app.exactly"}
+---
+- tapOn: Home
+- assertVisible: ${output.account.slice(0, 6)}…${output.account.slice(-4)}
+- runFlow:
+    when: { true: "${maestro.platform != 'web'}" }
+    commands: [{ assertVisible: Settings }]
+- runFlow:
+    when: { platform: web }
+    commands: [{ assertVisible: { id: Settings } }]
+- runFlow: { file: tapAria.yaml, env: { aria: Hide sensitive } }
+- runFlow:
+    when: { true: "${maestro.platform != 'web'}" }
+    commands:
+      - assertNotVisible:
+          text: \$[\s\d,.\xa0]+
+          below: Portfolio
+- runFlow:
+    when: { platform: web }
+    commands:
+      - assertNotVisible:
+          id: \$[\s\d,.\xa0]+
+- runFlow: { file: tapAria.yaml, env: { aria: Show sensitive } }
+- runFlow:
+    when: { true: "${maestro.platform != 'web'}" }
+    commands:
+      - assertVisible:
+          text: \$[\s\d,.\xa0]+
+          below: Portfolio
+- runFlow:
+    when: { platform: web }
+    commands:
+      - assertVisible:
+          id: \$[\s\d,.\xa0]+
+- runFlow: readPortfolio.yaml
+- assertTrue: ${output.portfolio > 0}
+- tapOn: Manage portfolio
+- assertVisible: Your Portfolio
+- runFlow: { file: tapAria.yaml, env: { aria: Back } }
+- assertVisible: Add funds
+- assertVisible: Send
+- assertVisible: Swap
+- assertNotVisible: Getting Started
+- runFlow: { file: scrollTo.yaml, env: { element: Upcoming payments } }
+- runFlow: { file: scrollTo.yaml, env: { element: Latest activity } }
+- assertNotVisible: No activity yet
+- tapOn: View all
+- tapOn: Home
+- tapOn: Home
+- waitForAnimationToEnd
+- assertVisible: Portfolio

.maestro/subflows/borrow.yaml

@@ -7,7 +7,7 @@ appId: ${APP_ID ?? "app.exactly"}
 - tapOn: DeFi
 - runFlow:
     when: { visible: Explore decentralized services }
-    commands: [{ tapOn: "Explore decentralized services" }]
+    commands: [{ tapOn: 'Explore decentralized services' }]
 - tapOn: USDC funding
 - runFlow:
     when: { visible: Connect wallet to Exactly Protocol }
@@ -32,7 +32,7 @@ appId: ${APP_ID ?? "app.exactly"}
 - runScript: ../dist/getAccount.js
 - runScript:
     file: ../dist/hookProposals.js
-    env: { account: "${output.account}" }
+    env: { account: '${output.account}' }
 - tapOn: Close
 - tapOn: Home
 - runFlow:

.maestro/subflows/copyAria.yaml

@@ -0,0 +1,12 @@
+appId: ${APP_ID ?? "app.exactly"}
+---
+# HACK https://github.com/mobile-dev-inc/Maestro/issues/2914
+- runFlow:
+    when: { true: "${maestro.platform != 'web'}" }
+    commands:
+      - copyTextFrom: "${aria}"
+- runFlow:
+    when: { platform: web }
+    commands:
+      - copyTextFrom:
+          id: "${aria}"

.maestro/subflows/dismissNotifications.yaml

@@ -7,5 +7,5 @@ appId: ${APP_ID ?? "app.exactly"}
       - tapOn: Not now
       - pressKey: home
       - launchApp: { permissions: { all: deny, camera: allow } }
-      - extendedWaitUntil: { visible: Your portfolio, timeout: 180000 }
+      - extendedWaitUntil: { visible: Portfolio, timeout: 180000 }
       - assertNotVisible: Stay updated

.maestro/subflows/readPortfolio.yaml

@@ -1,6 +1,6 @@
 appId: ${APP_ID ?? "app.exactly"}
 ---
-- copyTextFrom:
-    below: Your portfolio
-    text: ^(US)?\$[\s\d,.\xa0]+$
+- runFlow:
+    file: copyAria.yaml
+    env: { aria: "^(US)?\\$[\\s\\d,.\\xa0]+$" }
 - evalScript: ${output.portfolio = Number(maestro.copiedText.replace(/\D/g, "")) / 100}

.maestro/subflows/repay.yaml

@@ -1,7 +1,7 @@
 appId: ${APP_ID ?? "app.exactly"}
 ---
 - waitForAnimationToEnd
-- scrollUntilVisible: { element: Upcoming payments }
+- runFlow: { file: scrollTo.yaml, env: { element: Repay } }
 - copyTextFrom:
     text: \d+[,.]\d{2}
     below: Upcoming payments
@@ -43,7 +43,7 @@ appId: ${APP_ID ?? "app.exactly"}
     file: ../subflows/tapWhileAria.yaml
     env: { aria: Pending proposals, tap: Home }
 - waitForAnimationToEnd
-- scrollUntilVisible: { element: Upcoming payments }
+- runFlow: { file: scrollTo.yaml, env: { element: Repay } }
 - runFlow:
     when: { true: "${!amount}" }
     commands: [{ assertNotVisible: "${output.maturity}" }]

.maestro/subflows/rollover.yaml

@@ -1,7 +1,7 @@
 appId: ${APP_ID ?? "app.exactly"}
 ---
 - waitForAnimationToEnd
-- scrollUntilVisible: { element: Upcoming payments }
+- runFlow: { file: scrollTo.yaml, env: { element: Repay, offset: 1 } }
 - copyTextFrom:
     text: \d+[,.]\d{2}
     below: Upcoming payments
@@ -28,7 +28,7 @@ appId: ${APP_ID ?? "app.exactly"}
     file: ../subflows/tapWhileAria.yaml
     env: { aria: Pending proposals, tap: Home }
 - waitForAnimationToEnd
-- scrollUntilVisible: { element: Upcoming payments }
+- runFlow: { file: scrollTo.yaml, env: { element: Repay } }
 - copyTextFrom:
     text: \d+[,.]\d{2}
     below: Upcoming payments

.maestro/subflows/scrollTo.yaml

@@ -0,0 +1,44 @@
+appId: ${APP_ID ?? "app.exactly"}
+---
+# HACK https://github.com/mobile-dev-inc/maestro/issues/1775
+# maestro web uses window.scroll() which doesn't reach inner scroll containers
+- runFlow:
+    when: { true: "${maestro.platform != 'web'}" }
+    commands:
+      - scrollUntilVisible: { element: "${element}", centerElement: true }
+- runFlow:
+    when: { platform: web }
+    commands:
+      - evalScript: ${output.scrollDeadline = Date.now() + 30_000}
+      - evalScript: ${output.found = false}
+      - repeat:
+          while:
+            true: "${!output.found}"
+          commands:
+            - runFlow:
+                when: { visible: "${element}" }
+                commands: [{ evalScript: "${output.found = true}" }]
+            - runFlow:
+                when: { visible: { id: "${element}" } }
+                commands: [{ evalScript: "${output.found = true}" }]
+            - runFlow:
+                when: { true: "${!output.found}" }
+                commands:
+                  - runFlow:
+                      when: { true: "${Date.now() >= output.scrollDeadline}" }
+                      commands: [{ evalScript: "${throw new Error('scroll timeout')}" }]
+                  - swipe:
+                      start: "50%,40%"
+                      end: "50%,10%"
+- runFlow:
+    when: { true: "${typeof offset !== 'undefined' && Number(offset) > 0}" }
+    commands:
+      - evalScript: ${output.scrollExtra = 0}
+      - repeat:
+          while:
+            true: "${output.scrollExtra < Number(offset)}"
+          commands:
+            - swipe:
+                start: "50%,70%"
+                end: "50%,50%"
+            - evalScript: ${output.scrollExtra = output.scrollExtra + 1}

app.config.ts

@@ -80,9 +80,9 @@ export default {
       "expo-font",
       {
         fonts: [
-          "src/assets/fonts/BDOGrotesk-DemiBold.otf",
-          "src/assets/fonts/BDOGrotesk-Regular.otf",
-          "src/assets/fonts/IBMPlexMono-Medm.otf",
+          "src/assets/fonts/SplineSansMono-Medium.otf",
+          "src/assets/fonts/SplineSans-Regular.otf",
+          "src/assets/fonts/SplineSans-SemiBold.otf",
         ],
       } satisfies FontProps,
     ],

cspell.json

@@ -50,7 +50,6 @@
     "decisioned",
     "defi",
     "delegatecall",
-    "demi",
     "deployless",
     "dieguezguille",
     "dismissable",
@@ -73,12 +72,10 @@
     "gitmoji",
     "gitmojis",
     "graaljs",
-    "grotesk",
     "hdpi",
     "hexlify",
     "hideable",
     "hono",
-    "IBMPlexMono-Medm",
     "IERC",
     "indoc",
     "infinitism",
@@ -151,6 +148,7 @@
     "solmate",
     "sourcify",
     "spkg",
+    "splinesans",
     "spotlightjs",
     "staticcall",
     "streamingfast",