Skip to content

feat: upgrade to react 19 and add document metadata support #1993

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
zmjohnso wants to merge 2 commits into
base: master
Choose a base branch
from
Open

feat: upgrade to react 19 and add document metadata support #1993

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e2705d5
feat: upgrade to react 19; add document metadata support
zmjohnso Dec 21, 2025
0fb6c91
Merge branch 'master' into react-19-upgrade
im-adithya Mar 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
8 changes: 4 additions & 4 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,9 @@
"dayjs": "^1.11.10",
"embla-carousel-react": "^8.6.0",
"lucide-react": "^0.544.0",
"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-lottie": "^1.2.4",
Copy link
Contributor

@coderabbitai coderabbitai bot Mar 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Check react-lottie usage and look for potential alternatives

# Find all usages of react-lottie in the codebase
echo "=== react-lottie usage in codebase ==="
rg -n "react-lottie|from ['\"]react-lottie['\"]" --type ts --type tsx || rg -n "react-lottie" -g "*.tsx" -g "*.ts"

# Check the react-lottie package for deprecated lifecycle methods
echo -e "\n=== Checking react-lottie source for deprecated APIs ==="
if [ -d "frontend/node_modules/react-lottie" ]; then
  rg -n "componentWillMount|componentWillReceiveProps|componentWillUpdate|findDOMNode" frontend/node_modules/react-lottie/
fi

Repository: getAlby/hub

Length of output: 275

🌐 Web query:

Is react-lottie compatible with React 19?

💡 Result:

No, react-lottie (the package from chenqingspring/react-lottie, npm react-lottie v1.2.10) is not compatible with React 19. Its peer dependency is react >=15.0.0 with dev deps on react ^15.6.2, and the repo shows no updates for React 19 support. Open issues like autoplay bugs remain unresolved since 2018. It may install with overrides but lacks official support and testing.

Citations:

🏁 Script executed:

# Check React version in frontend/package.json
head -60 frontend/package.json | tail -20

Repository: getAlby/hub

Length of output: 681

🌐 Web query:

Is lottie-react actively maintained and compatible with React 19?

💡 Result:

Yes, lottie-react (the most popular package from Gamote/lottie-react on npm with 1.7M weekly downloads) is actively maintained and compatible with React 19. It had recent commits as late as 2026-03-03, latest release v2.4.1 on 2025-01-22. Peer dependencies explicitly include React ^19.0.0 (updated via merged PR #121). Users report successful installation with React 19 after v2.4.1, though some SSR issues in Next.js can be fixed with dynamic imports (issue #122 remains open for ongoing reports but core compatibility resolved).

Citations:

Remove react-lottie — it is incompatible with React 19 and no longer maintained.

The project uses React 19.0.0, but react-lottie (^1.2.4) has no support for React 19 and hasn't been updated since 2018. Using it with React 19 will likely cause runtime errors or unexpected behavior.

Replace it with lottie-react (v2.4.1), which is actively maintained, explicitly supports React 19, and has significantly higher adoption (1.7M weekly downloads). Update the import in frontend/src/components/LottieLoading.tsx and test animations thoroughly.

🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@frontend/package.json` at line 56, Remove the unmaintained "react-lottie"
dependency from package.json and add "lottie-react"@2.4.1 instead; then update
the Lottie component import in frontend/src/components/LottieLoading.tsx to use
the lottie-react API (replace any imports referencing "react-lottie" and its
<Lottie> usage with the corresponding export from "lottie-react"), adapt prop
names and event/callback usage to lottie-react's API, run install and exercise
the animations to confirm behavior.

"react-qr-code": "^2.0.12",
"react-router-dom": "^6.21.0",
Expand All @@ -73,8 +73,8 @@
"@tailwindcss/typography": "^0.5.19",
"@tailwindcss/vite": "^4.1.11",
"@types/node": "^25.3.3",
"@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",
"@vitejs/plugin-react-swc": "^3.3.2",
"eslint": "^10.0.2",
Expand Down
3 changes: 3 additions & 0 deletions frontend/src/components/AppHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ type Props = {
contentRight?: React.ReactNode;
breadcrumb?: boolean;
addSidebarTrigger?: boolean;
pageTitle?: string;
};

function AppHeader({
Expand All @@ -17,9 +18,11 @@ function AppHeader({
description = "",
contentRight,
addSidebarTrigger = true,
pageTitle,
}: Props) {
return (
<>
{pageTitle && <title>{`${pageTitle} - Alby Hub`}</title>}
<header className="flex flex-row flex-wrap items-center border-b border-border pb-4 gap-2">
{addSidebarTrigger && <SidebarTrigger className="-ml-1 md:hidden" />}
<Separator orientation="vertical" className="mr-2 h-4 md:hidden" />
Expand Down
4 changes: 3 additions & 1 deletion frontend/src/components/SettingsHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 && <title>{`${pageTitle} - Alby Hub`}</title>}
<div className="space-y-6">
<div>
<h3 className="text-2xl font-medium">{title}</h3>
Expand Down
205 changes: 104 additions & 101 deletions frontend/src/screens/ConnectAlbyAccount.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,109 +25,112 @@ type ConnectAlbyAccountProps = {

export function ConnectAlbyAccount({ connectUrl }: ConnectAlbyAccountProps) {
return (
<div className="w-full h-full flex flex-col items-center justify-center gap-5">
<Container>
<TwoColumnLayoutHeader
title="Connect Your Alby Account"
description="Your Alby Account brings several benefits to your Alby Hub"
/>
<div className="grid grid-cols-1 md:grid-cols-2 w-full gap-2 mt-5">
<Card className="w-full relative py-2">
<CardHeader className="flex flex-col justify-center items-center text-center p-4">
<ZapIcon className="size-6" />
<CardTitle className="text-sm">
Lightning Address
<AlbyProIcon />
</CardTitle>
<CardDescription className="text-xs">
Personalized lightning address to receive payments
</CardDescription>
</CardHeader>
</Card>
<Card className="w-full relative py-2">
<CardHeader className="flex flex-col justify-center items-center text-center p-4">
<MailIcon className="size-6" />
<CardTitle className="text-sm">
Email Notifications
<AlbyProIcon />
</CardTitle>
<CardDescription className="text-xs">
Instant notifications about incoming transactions and more
</CardDescription>
</CardHeader>
</Card>
<Card className="w-full relative py-2">
<CardHeader className="flex flex-col justify-center items-center text-center p-4">
<DatabaseBackupIcon className="size-6" />
<CardTitle className="text-sm">
Encrypted Backups
<AlbyProIcon />
</CardTitle>
<CardDescription className="text-xs">
Ensures you can always recover funds from lightning channels
</CardDescription>
</CardHeader>
</Card>
<Card className="w-full relative py-2">
<CardHeader className="flex flex-col justify-center items-center text-center p-4">
<LifeBuoyIcon className="size-6" />
<CardTitle className="text-sm">
Support
<AlbyProIcon />
</CardTitle>
<CardDescription className="text-xs">
Human support via live chat when you need a helping hand
</CardDescription>
</CardHeader>
</Card>
<Card className="w-full relative py-2">
<CardHeader className="flex flex-col justify-center items-center text-center p-4">
<CreditCardIcon className="size-6" />
<CardTitle className="text-sm">Fiat Top ups</CardTitle>
<CardDescription className="text-xs">
Top up with fiat and get Bitcoin delivered to your Alby Hub
</CardDescription>
</CardHeader>
</Card>
<Card className="w-full relative py-2">
<CardHeader className="flex flex-col justify-center items-center text-center p-4">
<HeadphonesIcon className="size-6" />
<CardTitle className="text-sm">Podcasting 2.0</CardTitle>
<CardDescription className="text-xs">
Support your favorite creators by streaming sats
</CardDescription>
</CardHeader>
</Card>
</div>
<div className="flex flex-col items-center justify-center gap-2 mt-10">
<LinkButton to={connectUrl || "/alby/auth"} size="lg">
Connect
</LinkButton>
<LinkButton
size="sm"
variant="link"
to="/"
className="text-muted-foreground"
>
Maybe later
</LinkButton>
</div>
<div className="text-muted-foreground flex flex-col items-center text-xs gap-2 mt-5 -mb-10">
<Badge title="Pro" variant="outline">
<SparklesIcon />
</Badge>
<div>
Unlock additional features with{" "}
<ExternalLink
to="https://getalby.com/pricing"
className="underline"
<>
<title>Connect Alby Account - Alby Hub</title>
<div className="w-full h-full flex flex-col items-center justify-center gap-5">
<Container>
<TwoColumnLayoutHeader
title="Connect Your Alby Account"
description="Your Alby Account brings several benefits to your Alby Hub"
/>
<div className="grid grid-cols-1 md:grid-cols-2 w-full gap-2 mt-5">
<Card className="w-full relative py-2">
<CardHeader className="flex flex-col justify-center items-center text-center p-4">
<ZapIcon className="size-6" />
<CardTitle className="text-sm">
Lightning Address
<AlbyProIcon />
</CardTitle>
<CardDescription className="text-xs">
Personalized lightning address to receive payments
</CardDescription>
</CardHeader>
</Card>
<Card className="w-full relative py-2">
<CardHeader className="flex flex-col justify-center items-center text-center p-4">
<MailIcon className="size-6" />
<CardTitle className="text-sm">
Email Notifications
<AlbyProIcon />
</CardTitle>
<CardDescription className="text-xs">
Instant notifications about incoming transactions and more
</CardDescription>
</CardHeader>
</Card>
<Card className="w-full relative py-2">
<CardHeader className="flex flex-col justify-center items-center text-center p-4">
<DatabaseBackupIcon className="size-6" />
<CardTitle className="text-sm">
Encrypted Backups
<AlbyProIcon />
</CardTitle>
<CardDescription className="text-xs">
Ensures you can always recover funds from lightning channels
</CardDescription>
</CardHeader>
</Card>
<Card className="w-full relative py-2">
<CardHeader className="flex flex-col justify-center items-center text-center p-4">
<LifeBuoyIcon className="size-6" />
<CardTitle className="text-sm">
Support
<AlbyProIcon />
</CardTitle>
<CardDescription className="text-xs">
Human support via live chat when you need a helping hand
</CardDescription>
</CardHeader>
</Card>
<Card className="w-full relative py-2">
<CardHeader className="flex flex-col justify-center items-center text-center p-4">
<CreditCardIcon className="size-6" />
<CardTitle className="text-sm">Fiat Top ups</CardTitle>
<CardDescription className="text-xs">
Top up with fiat and get Bitcoin delivered to your Alby Hub
</CardDescription>
</CardHeader>
</Card>
<Card className="w-full relative py-2">
<CardHeader className="flex flex-col justify-center items-center text-center p-4">
<HeadphonesIcon className="size-6" />
<CardTitle className="text-sm">Podcasting 2.0</CardTitle>
<CardDescription className="text-xs">
Support your favorite creators by streaming sats
</CardDescription>
</CardHeader>
</Card>
</div>
<div className="flex flex-col items-center justify-center gap-2 mt-10">
<LinkButton to={connectUrl || "/alby/auth"} size="lg">
Connect
</LinkButton>
<LinkButton
size="sm"
variant="link"
to="/"
className="text-muted-foreground"
>
Pro
</ExternalLink>
Maybe later
</LinkButton>
</div>
<div className="text-muted-foreground flex flex-col items-center text-xs gap-2 mt-5 -mb-10">
<Badge title="Pro" variant="outline">
<SparklesIcon />
</Badge>
<div>
Unlock additional features with{" "}
<ExternalLink
to="https://getalby.com/pricing"
className="underline"
>
Pro
</ExternalLink>
</div>
</div>
</div>
</Container>
</div>
</Container>
</div>
</>
);

function AlbyProIcon() {
Expand Down
1 change: 1 addition & 0 deletions frontend/src/screens/CreateNodeMigrationFileSuccess.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export function CreateNodeMigrationFileSuccess() {
<div className="p-10">
<AppHeader
title="Alby Hub Migration File Saved"
pageTitle="Migration Complete"
description="You're ready to move your node to another machine"
addSidebarTrigger={false}
/>
Expand Down
1 change: 1 addition & 0 deletions frontend/src/screens/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@ function Home() {
<>
<AppHeader
title={getGreeting(albyMe?.name)}
pageTitle="Home"
contentRight={<SearchInput placeholder="Search" />}
/>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-5 items-start justify-start">
Expand Down
Loading