From e2705d5bbac13c9f02d3aa7cf9ff94fa3d7cdf13 Mon Sep 17 00:00:00 2001 From: Zachary Johnson Date: Sun, 21 Dec 2025 18:08:49 -0500 Subject: [PATCH] feat: upgrade to react 19; add document metadata support --- README.md | 2 +- frontend/package.json | 8 +- frontend/src/components/AppHeader.tsx | 3 + frontend/src/components/SettingsHeader.tsx | 4 +- frontend/src/screens/ConnectAlbyAccount.tsx | 205 +++++++++--------- .../CreateNodeMigrationFileSuccess.tsx | 1 + frontend/src/screens/Home.tsx | 1 + frontend/src/screens/Intro.tsx | 143 ++++++------ frontend/src/screens/NotFound.tsx | 39 ++-- frontend/src/screens/Start.tsx | 1 + frontend/src/screens/Unlock.tsx | 1 + frontend/src/screens/Welcome.tsx | 1 + frontend/src/screens/alby/AlbyReviews.tsx | 2 +- frontend/src/screens/alby/SupportAlby.tsx | 1 + frontend/src/screens/apps/Connections.tsx | 1 + frontend/src/screens/channels/Channels.tsx | 1 + frontend/src/screens/peers/Peers.tsx | 1 + frontend/src/screens/settings/Settings.tsx | 1 + frontend/src/screens/setup/SetupPassword.tsx | 1 + .../src/screens/subwallets/SubwalletIntro.tsx | 1 + .../src/screens/subwallets/SubwalletList.tsx | 1 + frontend/src/screens/wallet/index.tsx | 1 + frontend/yarn.lock | 62 +++--- 23 files changed, 252 insertions(+), 230 deletions(-) diff --git a/README.md b/README.md index d0ba2cdf1..c22aec556 100644 --- a/README.md +++ b/README.md @@ -59,7 +59,7 @@ By default Alby Hub uses the embedded LDK based lightning node. Optionally it ca Go to `/frontend` 1. `yarn install` -2. `yarn dev` +2. `yarn dev:http` ### HTTP Production build diff --git a/frontend/package.json b/frontend/package.json index 5c837bfa0..46f9237b9 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -64,9 +64,9 @@ "input-otp": "^1.4.2", "lucide-react": "^0.544.0", "next-themes": "^0.4.6", - "react": "18.3.1", + "react": "^19.0.0", "react-day-picker": "^9.11.0", - "react-dom": "18.3.1", + "react-dom": "^19.0.0", "react-hook-form": "^7.60.0", "react-lottie": "^1.2.4", "react-qr-code": "^2.0.12", @@ -92,8 +92,8 @@ "@tailwindcss/typography": "^0.5.19", "@tailwindcss/vite": "^4.1.11", "@types/node": "^24.7.2", - "@types/react": "^18.2.15", - "@types/react-dom": "^18.2.7", + "@types/react": "^19.0.0", + "@types/react-dom": "^19.0.0", "@types/react-lottie": "^1.2.10", "@typescript-eslint/eslint-plugin": "^7.11.0", "@typescript-eslint/parser": "^7.11.0", diff --git a/frontend/src/components/AppHeader.tsx b/frontend/src/components/AppHeader.tsx index e5da914fb..d0287e15c 100644 --- a/frontend/src/components/AppHeader.tsx +++ b/frontend/src/components/AppHeader.tsx @@ -9,6 +9,7 @@ type Props = { contentRight?: React.ReactNode; breadcrumb?: boolean; addSidebarTrigger?: boolean; + pageTitle?: string; }; function AppHeader({ @@ -17,9 +18,11 @@ function AppHeader({ description = "", contentRight, addSidebarTrigger = true, + pageTitle, }: Props) { return ( <> + {pageTitle && {`${pageTitle} - Alby Hub`}}
{addSidebarTrigger && } diff --git a/frontend/src/components/SettingsHeader.tsx b/frontend/src/components/SettingsHeader.tsx index dea7128a5..1a668fc83 100644 --- a/frontend/src/components/SettingsHeader.tsx +++ b/frontend/src/components/SettingsHeader.tsx @@ -4,11 +4,13 @@ import { Separator } from "src/components/ui/separator"; type Props = { title: string; description: string | React.ReactNode; + pageTitle?: string; }; -function SettingsHeader({ title, description }: Props) { +function SettingsHeader({ title, description, pageTitle }: Props) { return ( <> + {pageTitle && {`${pageTitle} - Alby Hub`}}

{title}

diff --git a/frontend/src/screens/ConnectAlbyAccount.tsx b/frontend/src/screens/ConnectAlbyAccount.tsx index 08b47cadf..1c481e6cf 100644 --- a/frontend/src/screens/ConnectAlbyAccount.tsx +++ b/frontend/src/screens/ConnectAlbyAccount.tsx @@ -25,109 +25,112 @@ type ConnectAlbyAccountProps = { export function ConnectAlbyAccount({ connectUrl }: ConnectAlbyAccountProps) { return ( -
- - -
- - - - - Lightning Address - - - - Personalized lightning address to receive payments - - - - - - - - Email Notifications - - - - Instant notifications about incoming transactions and more - - - - - - - - Encrypted Backups - - - - Ensures you can always recover funds from lightning channels - - - - - - - - Support - - - - Human support via live chat when you need a helping hand - - - - - - - Fiat Topups - - Top up with fiat and get Bitcoin delivered to your Alby Hub - - - - - - - Podcasting 2.0 - - Support your favorite creators by streaming sats - - - -
-
- - Connect - - - Maybe later - -
-
- - - -
- Unlock additional features with{" "} - + Connect Alby Account - Alby Hub +
+ + +
+ + + + + Lightning Address + + + + Personalized lightning address to receive payments + + + + + + + + Email Notifications + + + + Instant notifications about incoming transactions and more + + + + + + + + Encrypted Backups + + + + Ensures you can always recover funds from lightning channels + + + + + + + + Support + + + + Human support via live chat when you need a helping hand + + + + + + + Fiat Topups + + Top up with fiat and get Bitcoin delivered to your Alby Hub + + + + + + + Podcasting 2.0 + + Support your favorite creators by streaming sats + + + +
+
+ + Connect + + - Pro - + Maybe later + +
+
+ + + +
+ Unlock additional features with{" "} + + Pro + +
-
- -
+ +
+ ); function AlbyProIcon() { diff --git a/frontend/src/screens/CreateNodeMigrationFileSuccess.tsx b/frontend/src/screens/CreateNodeMigrationFileSuccess.tsx index 0d786aabb..c6dc0c7ed 100644 --- a/frontend/src/screens/CreateNodeMigrationFileSuccess.tsx +++ b/frontend/src/screens/CreateNodeMigrationFileSuccess.tsx @@ -8,6 +8,7 @@ export function CreateNodeMigrationFileSuccess() {
diff --git a/frontend/src/screens/Home.tsx b/frontend/src/screens/Home.tsx index 6d5b63d3a..cb2fd0e0b 100644 --- a/frontend/src/screens/Home.tsx +++ b/frontend/src/screens/Home.tsx @@ -63,6 +63,7 @@ function Home() { <> } />
diff --git a/frontend/src/screens/Intro.tsx b/frontend/src/screens/Intro.tsx index c4ff9faa1..c7a0c3b1c 100644 --- a/frontend/src/screens/Intro.tsx +++ b/frontend/src/screens/Intro.tsx @@ -62,79 +62,82 @@ export function Intro() { ); return ( - -
-
- - -
-
-
- Welcome to Alby Hub -
-
- A powerful, all-in-one bitcoin lightning wallet with the - superpower of connecting to applications. -
-
- + <> + Welcome - Alby Hub + +
+
+ + +
+
+
+ Welcome to Alby Hub +
+
+ A powerful, all-in-one bitcoin lightning wallet with the + superpower of connecting to applications. +
+
+ +
-
- - - - - - - - - - - -
- - {scrollSnaps.map((_, index) => ( - onDotButtonClick(index)} - aria-label={`Go to slide ${index + 1}`} + + + - ))} - -
- + + + + + + + + +
+ + {scrollSnaps.map((_, index) => ( + onDotButtonClick(index)} + aria-label={`Go to slide ${index + 1}`} + /> + ))} + +
+ + ); } diff --git a/frontend/src/screens/NotFound.tsx b/frontend/src/screens/NotFound.tsx index fbb91f2f0..8a8af59ea 100644 --- a/frontend/src/screens/NotFound.tsx +++ b/frontend/src/screens/NotFound.tsx @@ -10,24 +10,27 @@ import { LinkButton } from "src/components/ui/custom/link-button"; function NotFound() { return ( - - - -
- - Page Not Found -
- - - The page you are looking for does not exist. - - - - - Return Home - - - + <> + Page Not Found - Alby Hub + + + +
+ + Page Not Found +
+ + + The page you are looking for does not exist. + + + + + Return Home + + + + ); } diff --git a/frontend/src/screens/Start.tsx b/frontend/src/screens/Start.tsx index 0798bd52f..65dfef81a 100644 --- a/frontend/src/screens/Start.tsx +++ b/frontend/src/screens/Start.tsx @@ -69,6 +69,7 @@ export default function Start() { return ( <> + Start - Alby Hub
+ Login - Alby Hub
+ Welcome - Alby Hub

diff --git a/frontend/src/screens/alby/AlbyReviews.tsx b/frontend/src/screens/alby/AlbyReviews.tsx index 8b71b72c3..f1e49d033 100644 --- a/frontend/src/screens/alby/AlbyReviews.tsx +++ b/frontend/src/screens/alby/AlbyReviews.tsx @@ -61,7 +61,7 @@ const productOpportunities: ProductOpportunity[] = [ export function AlbyReviews() { return ( <> - +
diff --git a/frontend/src/screens/alby/SupportAlby.tsx b/frontend/src/screens/alby/SupportAlby.tsx index 4eb4a50b1..dd03229c3 100644 --- a/frontend/src/screens/alby/SupportAlby.tsx +++ b/frontend/src/screens/alby/SupportAlby.tsx @@ -159,6 +159,7 @@ function SupportAlby() { <>

Become a Supporter

diff --git a/frontend/src/screens/apps/Connections.tsx b/frontend/src/screens/apps/Connections.tsx index 055f6d6a2..7132ac830 100644 --- a/frontend/src/screens/apps/Connections.tsx +++ b/frontend/src/screens/apps/Connections.tsx @@ -28,6 +28,7 @@ export function Connections() { <> diff --git a/frontend/src/screens/peers/Peers.tsx b/frontend/src/screens/peers/Peers.tsx index 40fc7ebcd..f47e997ef 100644 --- a/frontend/src/screens/peers/Peers.tsx +++ b/frontend/src/screens/peers/Peers.tsx @@ -39,6 +39,7 @@ export default function Peers() { <> Connect Peer} /> diff --git a/frontend/src/screens/settings/Settings.tsx b/frontend/src/screens/settings/Settings.tsx index 74427cf7e..f4bef7fc0 100644 --- a/frontend/src/screens/settings/Settings.tsx +++ b/frontend/src/screens/settings/Settings.tsx @@ -106,6 +106,7 @@ function Settings() { <> diff --git a/frontend/src/screens/setup/SetupPassword.tsx b/frontend/src/screens/setup/SetupPassword.tsx index 66fc3ba1b..0b2c92d91 100644 --- a/frontend/src/screens/setup/SetupPassword.tsx +++ b/frontend/src/screens/setup/SetupPassword.tsx @@ -50,6 +50,7 @@ export function SetupPassword() { return ( <> + Create Password - Alby Hub
diff --git a/frontend/src/screens/subwallets/SubwalletIntro.tsx b/frontend/src/screens/subwallets/SubwalletIntro.tsx index cfd02fa05..78959be80 100644 --- a/frontend/src/screens/subwallets/SubwalletIntro.tsx +++ b/frontend/src/screens/subwallets/SubwalletIntro.tsx @@ -18,6 +18,7 @@ export function SubwalletIntro() {
diff --git a/frontend/src/screens/subwallets/SubwalletList.tsx b/frontend/src/screens/subwallets/SubwalletList.tsx index 240761c4d..154776239 100644 --- a/frontend/src/screens/subwallets/SubwalletList.tsx +++ b/frontend/src/screens/subwallets/SubwalletList.tsx @@ -81,6 +81,7 @@ export function SubwalletList() {
diff --git a/frontend/src/screens/wallet/index.tsx b/frontend/src/screens/wallet/index.tsx index e4b3541d5..c428c3bb1 100644 --- a/frontend/src/screens/wallet/index.tsx +++ b/frontend/src/screens/wallet/index.tsx @@ -41,6 +41,7 @@ function Wallet() { <> diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 9f1b0efd1..4e5d5830a 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -2644,15 +2644,10 @@ dependencies: undici-types "~7.14.0" -"@types/prop-types@*": - version "15.7.15" - resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.15.tgz#e6e5a86d602beaca71ce5163fadf5f95d70931c7" - integrity sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw== - -"@types/react-dom@^18.2.7": - version "18.3.7" - resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.7.tgz#b89ddf2cd83b4feafcc4e2ea41afdfb95a0d194f" - integrity sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ== +"@types/react-dom@^19.0.0": + version "19.2.3" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-19.2.3.tgz#c1e305d15a52a3e508d54dca770d202cb63abf2c" + integrity sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ== "@types/react-lottie@^1.2.10": version "1.2.10" @@ -2668,13 +2663,12 @@ dependencies: csstype "^3.0.2" -"@types/react@^18.2.15": - version "18.3.23" - resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.23.tgz#86ae6f6b95a48c418fecdaccc8069e0fbb63696a" - integrity sha512-/LDXMQh55EzZQ0uVAZmKKhfENivEvWz6E+EYzh+/MCjMhNsotd+ZHhBGIjFDTi6+fz0OhQQQLbTgdQIxxCsC0w== +"@types/react@^19.0.0": + version "19.2.7" + resolved "https://registry.yarnpkg.com/@types/react/-/react-19.2.7.tgz#84e62c0f23e8e4e5ac2cadcea1ffeacccae7f62f" + integrity sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg== dependencies: - "@types/prop-types" "*" - csstype "^3.0.2" + csstype "^3.2.2" "@types/resolve@1.20.2": version "1.20.2" @@ -3248,6 +3242,11 @@ csstype@^3.0.2: resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81" integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw== +csstype@^3.2.2: + version "3.2.3" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.2.3.tgz#ec48c0f3e993e50648c86da559e2610995cf989a" + integrity sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ== + "d3-array@2 - 3", "d3-array@2.10.0 - 3", d3-array@^3.1.6: version "3.2.4" resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.2.4.tgz#15fec33b237f97ac5d7c986dc77da273a8ed0bb5" @@ -4822,7 +4821,7 @@ log-update@^6.1.0: strip-ansi "^7.1.0" wrap-ansi "^9.0.0" -loose-envify@^1.1.0, loose-envify@^1.4.0: +loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== @@ -5277,13 +5276,12 @@ react-day-picker@^9.11.0: date-fns "^4.1.0" date-fns-jalali "^4.1.0-0" -react-dom@18.3.1: - version "18.3.1" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4" - integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw== +react-dom@^19.0.0: + version "19.2.3" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.2.3.tgz#f0b61d7e5c4a86773889fcc1853af3ed5f215b17" + integrity sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg== dependencies: - loose-envify "^1.1.0" - scheduler "^0.23.2" + scheduler "^0.27.0" react-hook-form@^7.60.0: version "7.62.0" @@ -5383,12 +5381,10 @@ react-transition-group@^4.4.5: loose-envify "^1.4.0" prop-types "^15.6.2" -react@18.3.1: - version "18.3.1" - resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891" - integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ== - dependencies: - loose-envify "^1.1.0" +react@^19.0.0: + version "19.2.3" + resolved "https://registry.yarnpkg.com/react/-/react-19.2.3.tgz#d83e5e8e7a258cf6b4fe28640515f99b87cd19b8" + integrity sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA== recharts-scale@^0.4.4: version "0.4.5" @@ -5608,12 +5604,10 @@ safe-regex-test@^1.1.0: es-errors "^1.3.0" is-regex "^1.2.1" -scheduler@^0.23.2: - version "0.23.2" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3" - integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ== - dependencies: - loose-envify "^1.1.0" +scheduler@^0.27.0: + version "0.27.0" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.27.0.tgz#0c4ef82d67d1e5c1e359e8fc76d3a87f045fe5bd" + integrity sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q== semver@^5.5.0: version "5.7.2"