From 35a07491b50b8994d297d8f5f03ac9550e583cb6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ren=C3=A9=20Aaron?= <100827540+reneaaron@users.noreply.github.com> Date: Wed, 9 Oct 2024 11:16:29 +0200 Subject: [PATCH] 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 --- frontend/src/components/SuggestedAppData.tsx | 1066 ++++++++++++++++- frontend/src/components/SuggestedApps.tsx | 2 +- frontend/src/components/icons/Chrome.tsx | 26 + frontend/src/components/icons/Firefox.tsx | 26 + frontend/src/components/icons/ZapStore.tsx | 18 + frontend/src/routes.tsx | 10 +- frontend/src/screens/Home.tsx | 2 +- .../src/screens/appstore/AppStoreDetail.tsx | 152 +++ frontend/src/screens/internal-apps/AlbyGo.tsx | 114 -- 9 files changed, 1289 insertions(+), 127 deletions(-) create mode 100644 frontend/src/components/icons/Chrome.tsx create mode 100644 frontend/src/components/icons/Firefox.tsx create mode 100644 frontend/src/components/icons/ZapStore.tsx create mode 100644 frontend/src/screens/appstore/AppStoreDetail.tsx delete mode 100644 frontend/src/screens/internal-apps/AlbyGo.tsx diff --git a/frontend/src/components/SuggestedAppData.tsx b/frontend/src/components/SuggestedAppData.tsx index b9e03801..2e571232 100644 --- a/frontend/src/components/SuggestedAppData.tsx +++ b/frontend/src/components/SuggestedAppData.tsx @@ -1,3 +1,5 @@ +import { ZapIcon } from "lucide-react"; +import { Link } from "react-router-dom"; import albyGo from "src/assets/suggested-apps/alby-go.png"; import alby from "src/assets/suggested-apps/alby.png"; import amethyst from "src/assets/suggested-apps/amethyst.png"; @@ -20,16 +22,28 @@ import zapstream from "src/assets/suggested-apps/zap-stream.png"; import zapplanner from "src/assets/suggested-apps/zapplanner.png"; import zapplepay from "src/assets/suggested-apps/zapple-pay.png"; import zappybird from "src/assets/suggested-apps/zappy-bird.png"; +import ExternalLink from "src/components/ExternalLink"; export type SuggestedApp = { id: string; - webLink?: string; - internal?: boolean; - playLink?: string; - appleLink?: string; title: string; description: string; logo?: string; + + // General links + webLink?: string; + + // App store links + playLink?: string; + appleLink?: string; + zapStoreLink?: string; + + // Extension store links + chromeLink?: string; + firefoxLink?: string; + + guide?: React.ReactNode; + internal?: boolean; }; export const suggestedApps: SuggestedApp[] = [ @@ -52,7 +66,65 @@ export const suggestedApps: SuggestedApp[] = [ title: "Alby Extension", description: "Wallet in your browser", webLink: "https://getalby.com/", + chromeLink: + "https://chromewebstore.google.com/detail/iokeahhehimjnekafflcihljlcjccdbe", + firefoxLink: "https://addons.mozilla.org/en-US/firefox/addon/alby/", logo: alby, + guide: ( + <> +
+

In Alby Browser Extension

+ +
+
+

+ In Alby Hub{" "} + + (only needed if you connect via NWC) + +

+ +
+
+

In Alby Browser Extension

+ +
+ + ), }, { id: "damus", @@ -61,6 +133,46 @@ export const suggestedApps: SuggestedApp[] = [ webLink: "https://damus.io/?utm_source=getalby", appleLink: "https://apps.apple.com/ca/app/damus/id1628663131", logo: damus, + guide: ( + <> +
+

In Damus

+ +
+
+

In Alby Hub

+ +
+
+

In Damus

+ +
+ + ), }, { id: "amethyst", @@ -71,6 +183,53 @@ export const suggestedApps: SuggestedApp[] = [ playLink: "https://play.google.com/store/apps/details?id=com.vitorpamplona.amethyst", logo: amethyst, + guide: ( + <> +
+

In Amethyst

+ +
+
+

In Alby Hub

+ +
+
+

In Amethyst

+ +
+ + ), }, { id: "primal", @@ -79,8 +238,60 @@ export const suggestedApps: SuggestedApp[] = [ webLink: "https://primal.net/", playLink: "https://play.google.com/store/apps/details?id=net.primal.android", - appleLink: "https://apps.apple.com/us/app/primal/id1673134518", + // NWC is not supported on iOS + // appleLink: "https://apps.apple.com/us/app/primal/id1673134518", logo: primal, + guide: ( + <> +
+

In Primal

+ +
+
+

In Alby Hub

+ +
+
+

In Primal

+ +
+ + ), }, { id: "zap-stream", @@ -88,13 +299,108 @@ export const suggestedApps: SuggestedApp[] = [ description: "Stream and stack sats", webLink: "https://zap.stream/", logo: zapstream, + guide: ( + <> +
+

In Zap Stream

+ +
+
+

In Alby Hub

+ +
+
+

In Zap Stream

+ +
+ + ), }, { id: "wavlake", title: "Wavlake", description: "Creators platform", webLink: "https://www.wavlake.com/", + playLink: + "https://play.google.com/store/apps/details?id=com.wavlake.mobile", + appleLink: "https://testflight.apple.com/join/eWnqECG4", logo: wavlake, + guide: ( + <> +
+

In Wavlake

+ +
+
+

In Alby Hub

+ +
+
+

In Wavlake

+ +
+ + ), }, { id: "snort", @@ -102,6 +408,57 @@ export const suggestedApps: SuggestedApp[] = [ description: "Web Nostr client", webLink: "https://snort.social/", logo: snort, + guide: ( + <> +
+

In Snort

+ +
+
+

In Alby Hub

+ +
+
+

In Snort

+ +
+ + ), }, { id: "habla-news", @@ -109,6 +466,59 @@ export const suggestedApps: SuggestedApp[] = [ description: "Blogging platform", webLink: "https://habla.news/", logo: hablanews, + guide: ( + <> +
+

In Habla News

+ +
+
+

In Alby Hub

+ +
+
+

In Habla News

+ +
+ + ), }, { id: "nostrudel", @@ -116,6 +526,60 @@ export const suggestedApps: SuggestedApp[] = [ description: "Web Nostr client", webLink: "https://nostrudel.ninja/", logo: nostrudel, + guide: ( + <> +
+

In Nostrudel

+ +
+
+

In Alby Hub

+ +
+
+

In Nostrudel

+ +
+ + ), }, { id: "yakihonne", @@ -126,6 +590,56 @@ export const suggestedApps: SuggestedApp[] = [ "https://play.google.com/store/apps/details?id=com.yakihonne.yakihonne", appleLink: "https://apps.apple.com/us/app/yakihonne/id6472556189", logo: yakihonne, + guide: ( + <> +
+

In YakiHonne

+ +
+
+

In Alby Hub

+ +
+
+

In YakiHonne

+ +
+ + ), }, { id: "zapplanner", @@ -133,6 +647,65 @@ export const suggestedApps: SuggestedApp[] = [ description: "Schedule payments", webLink: "https://zapplanner.albylabs.com/", logo: zapplanner, + guide: ( + <> +
+

In ZapPlanner

+ +
+
+

In Alby Hub

+ +
+
+

In ZapPlanner

+ +
+ + ), }, { id: "zapplepay", @@ -140,6 +713,53 @@ export const suggestedApps: SuggestedApp[] = [ description: "Zap from any client", webLink: "https://www.zapplepay.com/", logo: zapplepay, + guide: ( + <> +
+

In Zapple Pay

+ +
+
+

In Alby Hub

+ +
+
+

In Zapple Pay

+ +
+ + ), }, { id: "lume", @@ -147,6 +767,60 @@ export const suggestedApps: SuggestedApp[] = [ description: "macOS Nostr client", webLink: "https://lume.nu/", logo: lume, + guide: ( + <> +
+

In Lume

+ +
+
+

In Alby Hub

+ +
+
+

In Lume

+ +
+ + ), }, { id: "kiwi", @@ -154,6 +828,56 @@ export const suggestedApps: SuggestedApp[] = [ description: "Nostr communities", webLink: "https://nostr.kiwi/", logo: kiwi, + guide: ( + <> +
+

In Kiwi

+ +
+
+

In Alby Hub

+ +
+
+

In Kiwi

+ +
+ + ), }, { id: "zappy-bird", @@ -161,6 +885,59 @@ export const suggestedApps: SuggestedApp[] = [ description: "Lose sats quickly", webLink: "https://rolznz.github.io/zappy-bird/", logo: zappybird, + guide: ( + <> +
+

In Zappy Bird

+ +
+
+

In Alby Hub

+ +
+
+

In Zappy Bird

+ +
+ + ), }, { id: "nostur", @@ -169,6 +946,53 @@ export const suggestedApps: SuggestedApp[] = [ webLink: "https://nostur.com/", appleLink: "https://apps.apple.com/us/app/nostur-nostr-client/id1672780508", logo: nostur, + guide: ( + <> +
+

In Nostur

+ +
+
+

In Alby Hub

+ +
+
+

In Nostur

+ +
+ + ), }, { id: "wherostr", @@ -176,6 +1000,57 @@ export const suggestedApps: SuggestedApp[] = [ description: "Map of notes", webLink: "https://wherostr.social/", logo: wherostr, + guide: ( + <> +
+

In Wherostr

+ +
+
+

In Alby Hub

+ +
+
+

In Wherostr

+ +
+ + ), }, { id: "stackernews", @@ -183,6 +1058,97 @@ export const suggestedApps: SuggestedApp[] = [ description: "Like Hacker News but with Bitcoin", webLink: "https://stacker.news/", logo: stackernews, + guide: ( + <> +
+

In stacker news

+ +
+
+

+ In Alby Hub: Configure the connection secret for sending +

+ +
+
+

In stacker news

+ +
+
+

+ In Alby Hub: Configure the connection secret for receiving +

+ +
+
+

In stacker news

+ +
+ + ), }, { id: "paper-scissors-hodl", @@ -190,6 +1156,53 @@ export const suggestedApps: SuggestedApp[] = [ description: "Paper Scissors Rock with bitcoin at stake", webLink: "https://paper-scissors-hodl.fly.dev", logo: paperScissorsHodl, + guide: ( + <> +
+

In Paper Scissors HODL

+ +
+
+

In Alby Hub

+ +
+
+

In Paper Scissors HODL

+ +
+ + ), }, { id: "alby-go", @@ -199,7 +1212,48 @@ export const suggestedApps: SuggestedApp[] = [ playLink: "https://play.google.com/store/apps/details?id=com.getalby.mobile", appleLink: "https://apps.apple.com/us/app/alby-go/id6471335774", + zapStoreLink: "https://zap.store", logo: albyGo, - internal: true, + guide: ( + <> +
+

In Alby Go

+ +
+
+

In Alby Hub

+ +
+
+

In Alby Go

+ +
+ + ), }, ].sort((a, b) => (a.title.toUpperCase() > b.title.toUpperCase() ? 1 : -1)); diff --git a/frontend/src/components/SuggestedApps.tsx b/frontend/src/components/SuggestedApps.tsx index b412a84e..6946516d 100644 --- a/frontend/src/components/SuggestedApps.tsx +++ b/frontend/src/components/SuggestedApps.tsx @@ -58,7 +58,7 @@ function SuggestedAppCard({ )} - + + + } + /> +
+ {(app.appleLink || + app.playLink || + app.zapStoreLink || + app.chromeLink || + app.firefoxLink) && ( + + + Get This App + + + {app.playLink && ( + + + + )} + {app.appleLink && ( + + + + )} + {app.zapStoreLink && ( + + + + )} + {app.chromeLink && ( + + + + )} + {app.firefoxLink && ( + + + + )} + + + )} + {app.webLink && ( + + + Links + + + {app.webLink && ( + + + + )} + + + )} +
+ + + How to Connect + + + {app.guide || ( +
    +
  • Install the app
    • +
  • + Click{" "} + + + +
    • +
  • Open the Alby Go app on your mobile and scan the QR code
    • +
+ )} + + + + ); +} diff --git a/frontend/src/screens/internal-apps/AlbyGo.tsx b/frontend/src/screens/internal-apps/AlbyGo.tsx deleted file mode 100644 index 5057da12..00000000 --- a/frontend/src/screens/internal-apps/AlbyGo.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import { Globe } from "lucide-react"; -import { Link } from "react-router-dom"; -import AppHeader from "src/components/AppHeader"; -import ExternalLink from "src/components/ExternalLink"; -import { AppleIcon } from "src/components/icons/Apple"; -import { NostrWalletConnectIcon } from "src/components/icons/NostrWalletConnectIcon"; -import { PlayStoreIcon } from "src/components/icons/PlayStore"; -import { suggestedApps } from "src/components/SuggestedAppData"; -import { Button } from "src/components/ui/button"; -import { - Card, - CardContent, - CardFooter, - CardHeader, - CardTitle, -} from "src/components/ui/card"; - -const ALBY_GO_APP_ID = "alby-go"; - -export function AlbyGo() { - const app = suggestedApps.find((x) => x.id === ALBY_GO_APP_ID); - - return ( -
- -
- -
-
{app?.title}
-
- {app?.description} -
-
-
- - } - description="" - contentRight={ - - - - } - /> -
- - - Get This App - - - {app?.playLink && ( - - - - )} - - {app?.appleLink && ( - - - - )} - - - - - - - - Links - - - {app?.webLink && ( - - - - )} - - -
- - - How to Connect - - -
    -
  • Download the app from the app store
    • -
  • - - {" "} - for Alby Go - -
    • -
  • Open the Alby Go app on your mobile and scan the QR code
    • -
- - -
- ); -}