feat: appstore detail pages (#716)

* feat: app store detail pages * fix: extension store links * Added instructions for apps I don't have a dev environment. I only plugged the code in a HTML viewer. So there might still be some bugs. * Update SuggestedAppData.tsx * fix: lint errors, minor content improvements * fix: app descriptions * fix: svg props --------- Co-authored-by: Moritz Kaminski <moritz.kaminski@gmail.com>
getAlby · Oct 9, 2024 · 35a0749 · 35a0749
1 parent b5b6a6d
commit 35a0749
Show file tree

Hide file tree

Showing 9 changed files with 1,289 additions and 127 deletions.
diff --git a/frontend/src/components/SuggestedAppData.tsx b/frontend/src/components/SuggestedAppData.tsx
diff --git a/frontend/src/components/SuggestedApps.tsx b/frontend/src/components/SuggestedApps.tsx
@@ -58,7 +58,7 @@ function SuggestedAppCard({
             </ExternalLink>
           )}
         </div>
-        <Link to={`/apps/new?app=${id}`}>
+        <Link to={`/appstore/${id}`}>
           <Button variant="outline">
             <NostrWalletConnectIcon className="w-4 h-4 mr-2" />
             Connect

diff --git a/frontend/src/components/icons/Chrome.tsx b/frontend/src/components/icons/Chrome.tsx
@@ -0,0 +1,26 @@
+import { SVGAttributes } from "react";
+
+export function ChromeIcon(props: SVGAttributes<SVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      fill="none"
+      {...props}
+    >
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M8.07 5.291h6.505M1 8.071a7.07 7.07 0 1 0 14.141 0A7.07 7.07 0 0 0 1 8.07Z"
+      />
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M5.651 9.461 2.398 3.828m8.07 5.628-3.252 5.633m-1.928-7.02a2.778 2.778 0 1 0 5.556 0 2.778 2.778 0 0 0-5.556 0Z"
+      />
+    </svg>
+  );
+}
diff --git a/frontend/src/components/icons/Firefox.tsx b/frontend/src/components/icons/Firefox.tsx
@@ -0,0 +1,26 @@
+import { SVGAttributes } from "react";
+
+export function FirefoxIcon(props: SVGAttributes<SVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      fill="none"
+      {...props}
+    >
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M2.633 3.52a6.994 6.994 0 0 1 8.162-1.923"
+      />
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M15 8.013a6.998 6.998 0 0 1-11.582 5.328 7 7 0 0 1-1.505-8.749 1.88 1.88 0 0 1 .304-2.361c.05.453.191.892.414 1.29.177.329.365.566.5.536a5.35 5.35 0 0 1 1.521 0c.25-.323.858-1.218 1.826-1.218-.542.542-2.094 2.435.609 2.435h.609L5.869 6.491s.207.402 0 .609c-.23-.231-1.217.25-1.217.913s.706 1.522 2.13 1.522c1.425 0 1.066-.609 1.827-.609a.883.883 0 0 1 .913.609c-1.047 0-1.826 1.217-3.044 1.217a2.6 2.6 0 0 0 1.826.609 3.653 3.653 0 0 0 2.934-5.825 3.653 3.653 0 0 1 1.461 2.61 5.44 5.44 0 0 0 .17-1.35c0-1.826-.73-4.261-2.075-5.198A6.988 6.988 0 0 1 15 8.013Z"
+      />
+    </svg>
+  );
+}
diff --git a/frontend/src/components/icons/ZapStore.tsx b/frontend/src/components/icons/ZapStore.tsx
@@ -0,0 +1,18 @@
+import { SVGAttributes } from "react";
+
+export function ZapStoreIcon(props: SVGAttributes<SVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      fill="none"
+      {...props}
+    >
+      <path
+        stroke="currentColor"
+        d="M12.208 7.454c-.15.243-.497.254-.751.285-.764.075-1.532.051-2.298.127-.476.06-.474.497-.391.883.107.553.222 1.088.331 1.638.044.192.084.436.245.556.296.197.86-.165 1.232-.082.675.154.212.943.14 1.385-.18.79-.373 1.572-.574 2.364-.22.935-.54 1.059-1.299.466-.785-.586-1.572-1.154-2.345-1.749-.28-.223-.82-.644-.479-1.022.15-.156.402-.256.615-.334.383-.136.585-.246.394-.618-.92-1.652-1.968-3.239-2.927-4.874-.157-.273-.365-.615-.35-.93.063-.53 1.091-.447 1.482-.464.543.013 1.075.003 1.614.007.77.03.93-.172.734-.935-.2-.845-.376-1.687-.55-2.534C6.968 1.29 6.86.809 7.19.6c.337-.17.688.267.879.528 1.36 1.8 2.641 3.668 3.936 5.516.146.213.317.557.211.793l-.008.016Z"
+      />
+    </svg>
+  );
+}
diff --git a/frontend/src/routes.tsx b/frontend/src/routes.tsx
@@ -23,6 +23,7 @@ import AppList from "src/screens/apps/AppList";
 import NewApp from "src/screens/apps/NewApp";
 import ShowApp from "src/screens/apps/ShowApp";
 import AppStore from "src/screens/appstore/AppStore";
+import { AppStoreDetail } from "src/screens/appstore/AppStoreDetail";
 import Channels from "src/screens/channels/Channels";
 import { CurrentChannelOrder } from "src/screens/channels/CurrentChannelOrder";
 import IncreaseIncomingCapacity from "src/screens/channels/IncreaseIncomingCapacity";
@@ -33,7 +34,6 @@ import { OpeningAutoChannel } from "src/screens/channels/auto/OpeningAutoChannel
 import { FirstChannel } from "src/screens/channels/first/FirstChannel";
 import { OpenedFirstChannel } from "src/screens/channels/first/OpenedFirstChannel";
 import { OpeningFirstChannel } from "src/screens/channels/first/OpeningFirstChannel";
-import { AlbyGo } from "src/screens/internal-apps/AlbyGo";
 import { BuzzPay } from "src/screens/internal-apps/BuzzPay";
 import { UncleJim } from "src/screens/internal-apps/UncleJim";
 import BuyBitcoin from "src/screens/onchain/BuyBitcoin";
@@ -217,10 +217,6 @@ const routes = [
             path: "buzzpay",
             element: <BuzzPay />,
           },
-          {
-            path: "alby-go",
-            element: <AlbyGo />,
-          },
         ],
       },
       {
@@ -232,6 +228,10 @@ const routes = [
             index: true,
             element: <AppStore />,
           },
+          {
+            path: ":appId",
+            element: <AppStoreDetail />,
+          },
         ],
       },
       {

diff --git a/frontend/src/screens/Home.tsx b/frontend/src/screens/Home.tsx
@@ -80,7 +80,7 @@ function Home() {
           </ExternalLink>
         )}
 
-        <Link to="/internal-apps/alby-go">
+        <Link to="/appstore/alby-go">
           <Card>
             <CardHeader>
               <div className="flex flex-row items-center">

diff --git a/frontend/src/screens/appstore/AppStoreDetail.tsx b/frontend/src/screens/appstore/AppStoreDetail.tsx
@@ -0,0 +1,152 @@
+import { Globe } from "lucide-react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import AppHeader from "src/components/AppHeader";
+import ExternalLink from "src/components/ExternalLink";
+import { AppleIcon } from "src/components/icons/Apple";
+import { ChromeIcon } from "src/components/icons/Chrome";
+import { FirefoxIcon } from "src/components/icons/Firefox";
+import { NostrWalletConnectIcon } from "src/components/icons/NostrWalletConnectIcon";
+import { PlayStoreIcon } from "src/components/icons/PlayStore";
+import { ZapStoreIcon } from "src/components/icons/ZapStore";
+import { suggestedApps } from "src/components/SuggestedAppData";
+import { Button } from "src/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "src/components/ui/card";
+
+export function AppStoreDetail() {
+  const { appId } = useParams() as { appId: string };
+  const app = suggestedApps.find((x) => x.id === appId);
+  const navigate = useNavigate();
+
+  if (!app) {
+    navigate("/appstore");
+    return;
+  }
+
+  return (
+    <div className="grid gap-5">
+      <AppHeader
+        title={
+          <>
+            <div className="flex flex-row items-center">
+              <img src={app.logo} className="w-14 h-14 rounded-lg mr-4" />
+              <div className="flex flex-col">
+                <div>{app.title}</div>
+                <div className="text-sm font-normal text-muted-foreground">
+                  {app.description}
+                </div>
+              </div>
+            </div>
+          </>
+        }
+        description=""
+        contentRight={
+          <Link to={`/apps/new?app=${app.id}`}>
+            <Button>
+              <NostrWalletConnectIcon className="w-4 h-4 mr-2" />
+              Connect to {app.title}
+            </Button>
+          </Link>
+        }
+      />
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {(app.appleLink ||
+          app.playLink ||
+          app.zapStoreLink ||
+          app.chromeLink ||
+          app.firefoxLink) && (
+          <Card>
+            <CardHeader>
+              <CardTitle>Get This App</CardTitle>
+            </CardHeader>
+            <CardFooter className="flex flex-row gap-2">
+              {app.playLink && (
+                <ExternalLink to={app.playLink}>
+                  <Button variant="outline">
+                    <PlayStoreIcon className="w-4 h-4 mr-2" />
+                    Play Store
+                  </Button>
+                </ExternalLink>
+              )}
+              {app.appleLink && (
+                <ExternalLink to={app.appleLink}>
+                  <Button variant="outline">
+                    <AppleIcon className="w-4 h-4 mr-2" />
+                    App Store
+                  </Button>
+                </ExternalLink>
+              )}
+              {app.zapStoreLink && (
+                <ExternalLink to="https://zap.store/download">
+                  <Button variant="outline">
+                    <ZapStoreIcon className="w-4 h-4 mr-2" />
+                    zap.store
+                  </Button>
+                </ExternalLink>
+              )}
+              {app.chromeLink && (
+                <ExternalLink to={app.chromeLink}>
+                  <Button variant="outline">
+                    <ChromeIcon className="w-4 h-4 mr-2" />
+                    Chrome Web Store
+                  </Button>
+                </ExternalLink>
+              )}
+              {app.firefoxLink && (
+                <ExternalLink to={app.firefoxLink}>
+                  <Button variant="outline">
+                    <FirefoxIcon className="w-4 h-4 mr-2" />
+                    Firefox Add-Ons
+                  </Button>
+                </ExternalLink>
+              )}
+            </CardFooter>
+          </Card>
+        )}
+        {app.webLink && (
+          <Card>
+            <CardHeader>
+              <CardTitle>Links</CardTitle>
+            </CardHeader>
+            <CardFooter className="flex flex-row gap-2">
+              {app.webLink && (
+                <ExternalLink to={app.webLink}>
+                  <Button variant="outline">
+                    <Globe className="w-4 h-4 mr-2" />
+                    Website
+                  </Button>
+                </ExternalLink>
+              )}
+            </CardFooter>
+          </Card>
+        )}
+      </div>
+      <Card>
+        <CardHeader>
+          <CardTitle>How to Connect</CardTitle>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-3">
+          {app.guide || (
+            <ul className="list-inside list-decimal">
+              <li>Install the app</li>
+              <li>
+                Click{" "}
+                <Link to={`/apps/new?app=${appId}`}>
+                  <Button variant="link" className="px-0">
+                    Connect to {app.title}
+                  </Button>
+                </Link>
+              </li>
+              <li>Open the Alby Go app on your mobile and scan the QR code</li>
+            </ul>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/frontend/src/screens/internal-apps/AlbyGo.tsx b/frontend/src/screens/internal-apps/AlbyGo.tsx