Bridge homescreen UI refactor

Got design sign off from Pat!
![Screenshot 2025-0 (#456)

* Bridge homescreen UI refactor (#16088)

Got design sign off from Pat!
![Screenshot 2025-03-11 at 10.41.56 AM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/EJphitdgYFvuACNazm1q/8d4273c9-c53d-4089-89ba-e847780a7bb7.png)

Contributes to PX-128

GitOrigin-RevId: 1c2acc507deae3420a05f231f5ca32f20b9f5480

* [js] Upgrade turbo (#16355)

GitOrigin-RevId: cf1bf5e6c62134ba3a87d8178382cc839bb90b81

* CI update lock file for PR

* add link bank 3a component (#16161)

# add a front end for linking bank accounts, during onboarding flow

closes PX-80

GitOrigin-RevId: 534270f6023eeb3cbc27e27bf674aa6a5f191b3e

* [js] Add publint to package:checks (#16337)

GitOrigin-RevId: 675017a49cc8ed7997396289d71cd4298f18da2f

* CI update lock file for PR

* Update uma-bridge scroll behavior (#16163)

Adds blurring and opacity when scrolling. Removes the border once at the top. Also makes the UMA logo at the banner slightly larger per spec.

Example:
![Screenshot 2025-03-11 at 10.43.41 AM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/EJphitdgYFvuACNazm1q/a957a8cf-6f3a-49df-833c-4d891c9651b8.png)
GitOrigin-RevId: 7a482063a2ffe7e3cb5d03682fcccb122929a021

* User error codes in demo vasp (#15997)

GitOrigin-RevId: 388a9e57ccdc5faac6dceec900da520225feaa59

* CI update lock file for PR

* Update account creation page for uma-bridge (#16235)

**Note**: This change is purely cosmetic since first name and last name weren't being used to create the bridge user credentials anyway.

Contributes to PX-122

![Screenshot 2025-03-25 at 12.44.12 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/EJphitdgYFvuACNazm1q/44f5cacc-35c7-484b-a1dd-d74982176252.png)

![Screenshot 2025-03-25 at 12.42.42 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/EJphitdgYFvuACNazm1q/9f9bfdc2-8737-4919-90cf-47b1b19de414.png)

![Screenshot 2025-03-25 at 12.42.35 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/EJphitdgYFvuACNazm1q/e8b4930b-1cd5-4e64-9f69-ace79e648b12.png)

GitOrigin-RevId: 5b46fd8e93c23e233ba0766ce98c2ec786800974

* [bridge] update cardform border and padding, input border radius, button border radius (#16425)

These changes should make it easier to get the new screens looking closer to the designs
- updates default card form border radius
- updates default card form border color
- removes card form shadow
- updates default card form padding
- removes paddingY in favor of paddingTop and paddingBottom in CardForm
- adds temporary paddingTop to steps which look strange without the progress header (yet to be implemented)
- updates default button radiuses to be fully round
- adjusts text input paddings
- adds padding to title and descriptions of cardforms
- adjusts button paddings to account for border
- makes CardForm skinnier

old:

![Screenshot 2025-03-21 at 3.48.27 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/NU8OmLauzLqa61yWDJkY/41134f04-6937-4cd0-9ed8-1fa123db962b.png)

new:

![Screenshot 2025-03-26 at 2.23.31 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/NU8OmLauzLqa61yWDJkY/c958876d-7ad3-4696-9cd3-16bfe9e5b4a5.png)

![Screenshot 2025-03-26 at 2.23.37 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/NU8OmLauzLqa61yWDJkY/569bc235-cf5f-4bff-a406-ccbee14f1ace.png)

![Screenshot 2025-03-26 at 2.27.21 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/NU8OmLauzLqa61yWDJkY/d01550f6-d8ff-4700-a132-ae4bdacfbc8d.png)

GitOrigin-RevId: dad07d03ce168dbf8b78ab80309578bdbb4a52f6

* [bridge] adjust banner styles, add default TextInput border radius (#16503)

- adds option to not have the Banner position: fixed
- wraps BridgeCardForm's banner in position: fixed to accommodate adding another banner on top
- shrinks size of uma icon if small screen
- changes how minHeight works in Banner
- adjusts banner styles
- fixes border that should appear as you scroll underneath the banner
- fixes TextInput, adds default border radius back
- updates hamburger icon in mobile nav

![Screenshot 2025-03-26 at 3.56.32 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/NU8OmLauzLqa61yWDJkY/7fb2a55a-f31f-46be-a13a-a1a8a410d728.png)

![Screenshot 2025-03-26 at 3.57.00 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/NU8OmLauzLqa61yWDJkY/3120a904-3fca-4f8f-919d-a00201018356.png)

GitOrigin-RevId: 8b7cfc046c38f0babc96ff0838dcc645f1cce296

* [bridge] fix typography letter-spacing (#16504)

![Screenshot 2025-03-26 at 4.44.09 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/NU8OmLauzLqa61yWDJkY/f89635ad-41c0-46b0-b20f-8435e31cb012.png)

- fixes tight letter spacing for typography tokens (affects Display, Headline, Title)

GitOrigin-RevId: 0c72959ba7c1b2cfe24fc78da73bdac6bdd7254a

* Update next.js version (#16506)

Update next.js past the version with a critical vulnerability (that doesn't actually affect us). Also update the build image to allow it to build on GH workflows.

GitOrigin-RevId: bdf8ce5f60df7edf9af12f5efae0fc20f7ccb326

* CI update lock file for PR

* New callout component for bridge (#16347)

![Screenshot 2025-03-24 at 10.31.37 AM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/EJphitdgYFvuACNazm1q/fae62c8b-879b-4873-a85a-8d13990d5f6f.png)

Contributes to PX-246

GitOrigin-RevId: 0ce0b70212bb8110bd577e3fcb3933d73569fc90

* Updated Verify Identity Page (#16522)

Added configuration to existing components to support new design for Verify Identity Page

![Screenshot 2025-03-27 at 10.45.22 AM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/oOuIssbrOKuvWkHIBu32/934b18c7-5cb4-454f-9eef-95984f217b0c.png)

![Screenshot 2025-03-27 at 10.45.37 AM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/oOuIssbrOKuvWkHIBu32/e055320d-5aea-4f68-a570-c695bf591158.png)

GitOrigin-RevId: dd2c6a3504e0169e41ba0a1733b6f4fffe129c76

* Created Uma Splash (#16611)

Created new UMA splash

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/oOuIssbrOKuvWkHIBu32/173065b7-e1d8-4c84-a322-98ffdd405b7a.png)

GitOrigin-RevId: 62935d2ea044b3082c3a102f49064db71c667de4

* Connect Bank Screen (#16583)

# UMA Bridge: Enhanced Bank Connection UI

This PR enhances the bank connection flow in the UMA Bridge application with several UI improvements:

- Added a new RTP disclosure modal with scrollable content for better user experience
- Updated the `BridgeModal` component to support scrollable content and custom positioning
- Redesigned the Link Bank screen with clearer information architecture:
  - Added informative bullet points with icons highlighting key benefits
  - Improved layout with better spacing and alignment
  - Added RTP agreement footer with proper linking
- Enhanced the `IconWithCircleBackground` component to support opaque icons
- Updated the Modal and Drawer components to support custom top positioning
- Added new language strings to support the updated UI
- Fixed styling issues in various components for better mobile responsiveness

These changes improve the user experience when connecting bank accounts while maintaining compliance with financial regulations.

****

![Screenshot 2025-03-31 at 2.25.33 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/oOuIssbrOKuvWkHIBu32/a4e4abd2-f813-40e5-ac94-f83da1f48582.png)

![Screenshot 2025-03-31 at 2.26.03 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/oOuIssbrOKuvWkHIBu32/8c96a3b7-5d02-48a5-a16b-3b06889a2872.png)

****

![Screenshot 2025-03-31 at 2.27.11 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/oOuIssbrOKuvWkHIBu32/635603bd-5394-41a5-97e6-4d0b0b6a5278.png)

![Screenshot 2025-03-31 at 2.27.44 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/oOuIssbrOKuvWkHIBu32/27123aa6-98e9-4624-85dc-fe45be18bb02.png)

GitOrigin-RevId: ff2e37d3e439693bc274ef0d7cd46da92848b326

* Updating textput and bridge login page (#16422)

![Screenshot 2025-03-21 at 3.59.13 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/EJphitdgYFvuACNazm1q/4f002966-c459-428a-be49-ed35a43ca675.png)

![Screenshot 2025-03-21 at 3.59.16 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/EJphitdgYFvuACNazm1q/37d1ea27-4bc8-4295-91ec-52415c1e50d9.png)

GitOrigin-RevId: 9558bd24d62022f122292856d7ed78938648db2e

* Adding a banner notifying of the switch to uma.money. (#16651)

* WIP: Adding a banner notifying of the switch to uma.money.

Mostly looks good. Still TODO:

 - Update to only show on one page load
 - Check on desktop styling with design
 - Check on underline not working

* lint

* Fix the underline and move x all the way right

GitOrigin-RevId: e431cf3c55dac687102ad42e52d8b125ffb655c4

* Update currency selection and send page for demo send (#16410)

Contributes to PX-247. Got design sign off from Pat

https://www.figma.com/design/p1r9oT0wU2NxDLfPPefRYV/US%3EMX-Grid-Switch?node-id=2417-23652&m=dev

This PR:
- Adds banner type to callout component
- Adds new demo mode modal
- Adds new send demo flow
- Updates the back button per in the BridgeCardForm per spec
- Adds subtitle to send flow

![Screenshot 2025-03-25 at 1.36.04 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/EJphitdgYFvuACNazm1q/f0f6191e-ef6b-4b29-8c98-3eb980c39931.png)

![Screenshot 2025-03-25 at 1.57.53 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/EJphitdgYFvuACNazm1q/65f389ff-2474-4369-b7b1-240fb888436d.png)

GitOrigin-RevId: ca992a573566de2b21e8ec20aaeaa32c34f323ca

* add onboarding steps complete modal (#16414)

# Adds a modal which shows completed steps

shows all remaining onboarding tasks.  completed tasks will replace their icon with a checkmark

closes PX-259

| FIGMA| bridge |
| -------- | ------- |
|  ![Screenshot 2025-03-24 at 1.32.49 PM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/kXS0LK7Piva9kiHcEnGv/00c42c96-cee1-4290-a50a-85bad0f076ea.png) |
![Screenshot 2025-04-04 at 11.59.10 AM.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/kXS0LK7Piva9kiHcEnGv/696e07ee-5edb-4680-9876-98a1d044de13.png) |

GitOrigin-RevId: a671d1d6fc8c0359f21a339aa0d18174df8a9754

* [JS SDKs] Add errorName from extensions when requests fail. (#16674)

GitOrigin-RevId: 6850d721419ec09c6cd8acc80aec22539767eb95

* remove border radius param from modal (#16675)

# remove border radius parameter from Modal

GitOrigin-RevId: b073087678f0ef187bb5e79289f8fc010a4616c5

* Create happy-spoons-sort.md

---------

Co-authored-by: Jason Wang <[email protected]>
Co-authored-by: Corey Martin <[email protected]>
Co-authored-by: Lightspark Eng <[email protected]>
Co-authored-by: Matt Davis <[email protected]>
Co-authored-by: Shreya Vissamsetti <[email protected]>
Co-authored-by: Brian Siao Tick Chong <[email protected]>
Co-authored-by: Joel Weinberger <[email protected]>
Co-authored-by: Aaryaman Bhute <[email protected]>
Co-authored-by: Jeremy Klein <[email protected]>

Author: 10 people

.changeset/happy-spoons-sort.md

@@ -0,0 +1,10 @@
+---
+"@lightsparkdev/lightspark-sdk": patch
+"@lightsparkdev/oauth": patch
+"@lightsparkdev/core": patch
+"@lightsparkdev/ui": patch
+---
+
+* Surface error name when the requester hits a graphQL error.
+* Update Turbo
+* Several small UI package improvements.

apps/examples/uma-vasp-cli/package.json

@@ -45,7 +45,7 @@
     "@inquirer/prompts": "^1.1.3",
     "@lightsparkdev/core": "1.3.0",
     "@lightsparkdev/lightspark-sdk": "1.9.0",
-    "@uma-sdk/core": "^1.2.3",
+    "@uma-sdk/core": "^1.3.0",
     "chalk": "^5.3.0",
     "commander": "^11.0.0"
   },

apps/examples/uma-vasp/README.md

@@ -7,10 +7,10 @@ An example UMA VASP server implementation using Typescript.
 Configure environment variables needed to talk to Lightspark and UMA messages (API keys, etc.). Information on how to set them can be found in `src/UmaConfig.ts`.
 
 1. Create an API token (`LIGHTSPARK_API_TOKEN_CLIENT_ID`, `LIGHTSPARK_API_TOKEN_CLIENT_SECRET`)
-in your account's [API config page](https://app.lightspark.com/api-config).
+   in your account's [API config page](https://app.lightspark.com/api-config).
 
 1. Find your node credentials (`LIGHTSPARK_UMA_NODE_ID`, `LIGHTSPARK_UMA_OSK_NODE_SIGNING_KEY_PASSWORD`)
-in your account's [API config page](https://app.lightspark.com/api-config).
+   in your account's [API config page](https://app.lightspark.com/api-config).
 
 1. Create a secp256k1 private key to use as your encryption private key (`LIGHTSPARK_UMA_ENCRYPTION_PRIVKEY`) and use this private key to wrap the corresponding encryption public key in an X.509 Certificate (`LIGHTSPARK_UMA_ENCRYPTION_CERT_CHAIN`). Similarly for signing, create a secp256k1 private key to use as your signing private key (`LIGHTSPARK_UMA_SIGNING_PRIVKEY`) and use this private key to wrap the corresponding signing public key in an X.509 Certificate (`LIGHTSPARK_UMA_SIGNING_CERT_CHAIN`). You may choose to use the same keypair for encryption and signing. For information on generating these, see [our docs](https://docs.uma.me/uma-standard/keys-authentication-encryption).
 
@@ -115,7 +115,7 @@ $ PORT=8081 yarn start
 Now, you can test the full uma flow like:
 
 ```bash
-# First, call to vasp1 to lookup Bob at vasp2. This will return currency conversion info, etc. It will also contain a 
+# First, call to vasp1 to lookup Bob at vasp2. This will return currency conversion info, etc. It will also contain a
 # callback ID that you'll need for the next call
 $ curl -X GET http://localhost:8080/api/umalookup/\$bob@localhost:8081 -u bob:pa55word
 

apps/examples/uma-vasp/package.json

@@ -17,8 +17,9 @@
   "dependencies": {
     "@lightsparkdev/core": "1.3.0",
     "@lightsparkdev/lightspark-sdk": "1.9.0",
-    "@uma-sdk/core": "^1.2.3",
+    "@uma-sdk/core": "^1.3.0",
     "express": "^4.18.2",
+    "express-async-handler": "^1.2.0",
     "uuid": "^9.0.0",
     "zod": "^3.22.4"
   },