WhatsNewWidget.tsx raw

   1  import { compare } from "compare-versions";
   2  import {
   3    Card,
   4    CardContent,
   5    CardDescription,
   6    CardHeader,
   7    CardTitle,
   8  } from "src/components/ui/card";
   9  import { ExternalLinkButton } from "src/components/ui/custom/external-link-button";
  10  import { useAlbyInfo } from "src/hooks/useAlbyInfo";
  11  import { useInfo } from "src/hooks/useInfo";
  12  
  13  export function WhatsNewWidget() {
  14    const { data: info } = useInfo();
  15    const { data: albyInfo } = useAlbyInfo();
  16  
  17    if (
  18      !info ||
  19      !albyInfo ||
  20      !albyInfo.hub.latestReleaseNotes ||
  21      info.hideUpdateBanner
  22    ) {
  23      return null;
  24    }
  25  
  26    const upToDate =
  27      info.version &&
  28      info.version.startsWith("v") &&
  29      compare(info.version.substring(1), albyInfo.hub.latestVersion, ">=");
  30  
  31    return (
  32      <Card>
  33        <CardHeader>
  34          <CardTitle>What's New in {upToDate && "your "}Alby Hub?</CardTitle>
  35          <CardDescription>{albyInfo.hub.latestReleaseNotes}</CardDescription>
  36        </CardHeader>
  37        {!upToDate && (
  38          <CardContent className="text-right">
  39            <ExternalLinkButton
  40              to={`https://getalby.com/update/hub?version=${info.version}`}
  41              size="sm"
  42            >
  43              Update Now
  44            </ExternalLinkButton>
  45          </CardContent>
  46        )}
  47      </Card>
  48    );
  49  }
  50