Skip to content

Commit

Permalink
feat: app store detail pages
Browse files Browse the repository at this point in the history
  • Loading branch information
reneaaron committed Sep 30, 2024
1 parent 71183a1 commit 08789f3
Show file tree
Hide file tree
Showing 9 changed files with 284 additions and 126 deletions.
66 changes: 61 additions & 5 deletions frontend/src/components/SuggestedAppData.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
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";
Expand All @@ -23,13 +24,24 @@ import zappybird from "src/assets/suggested-apps/zappy-bird.png";

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[] = [
Expand All @@ -52,6 +64,9 @@ 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,
},
{
Expand All @@ -61,6 +76,46 @@ export const suggestedApps: SuggestedApp[] = [
webLink: "https://damus.io/?utm_source=getalby",
appleLink: "https://apps.apple.com/ca/app/damus/id1628663131",
logo: damus,
guide: (
<>
<div>
<h3 className="font-medium">In Damus</h3>
<ul className="list-inside text-muted-foreground">
<li>
1. Download and open{" "}
<span className="font-medium text-foreground">Damus</span> on your
iOS device
</li>
<li>
2. Go to{" "}
<span className="font-medium text-foreground">Wallet</span>{" "}
<span className="font-medium text-foreground">Attach Wallet</span>
</li>
</ul>
</div>
<div>
<h3 className="font-medium">In Alby Hub</h3>
<ul className="list-inside text-muted-foreground">
<li>
3. Click{" "}
<Link
to="/apps/new?app=damus"
className="font-semibold text-foreground underline"
>
Connect to Damus
</Link>
</li>
<li>4. Set app's wallet permissions (full access recommended)</li>
</ul>
</div>
<div>
<h3 className="font-medium">In Damus</h3>
<ul className="list-inside text-muted-foreground">
<li>5. Scan or paste the connection secret from Alby Hub</li>
</ul>
</div>
</>
),
},
{
id: "amethyst",
Expand Down Expand Up @@ -196,7 +251,8 @@ 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: <>test</>,
},
].sort((a, b) => (a.title.toUpperCase() > b.title.toUpperCase() ? 1 : -1));
2 changes: 1 addition & 1 deletion frontend/src/components/SuggestedApps.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
26 changes: 26 additions & 0 deletions frontend/src/components/icons/Chrome.tsx
Original file line number Diff line number Diff line change
@@ -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"
stroke-linecap="round"
stroke-linejoin="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"
stroke-linecap="round"
stroke-linejoin="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>
);
}
26 changes: 26 additions & 0 deletions frontend/src/components/icons/Firefox.tsx
Original file line number Diff line number Diff line change
@@ -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"
stroke-linecap="round"
stroke-linejoin="round"
d="M2.633 3.52a6.994 6.994 0 0 1 8.162-1.923"
/>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="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>
);
}
18 changes: 18 additions & 0 deletions frontend/src/components/icons/ZapStore.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
10 changes: 5 additions & 5 deletions frontend/src/routes.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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";
Expand Down Expand Up @@ -217,10 +217,6 @@ const routes = [
path: "buzzpay",
element: <BuzzPay />,
},
{
path: "alby-go",
element: <AlbyGo />,
},
],
},
{
Expand All @@ -232,6 +228,10 @@ const routes = [
index: true,
element: <AppStore />,
},
{
path: ":appId",
element: <AppStoreDetail />,
},
],
},
{
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/screens/Home.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
146 changes: 146 additions & 0 deletions frontend/src/screens/appstore/AppStoreDetail.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
import { Globe } from "lucide-react";
import { Link, 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);

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="https://zap.store/download">
<Button variant="outline">
<ChromeIcon className="w-4 h-4 mr-2" />
Chrome Web Store
</Button>
</ExternalLink>
)}
{app?.firefoxLink && (
<ExternalLink to="https://zap.store/download">
<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>FALLBACK</li>
<li>
<Link to={`/apps/new?app=${appId}`}>
<Button variant="link" className="px-0">
Create a new app connection
</Button>{" "}
for Alby Go
</Link>
</li>
<li>Open the Alby Go app on your mobile and scan the QR code</li>
</ul>
)}
</CardContent>
</Card>
</div>
);
}
Loading

0 comments on commit 08789f3

Please sign in to comment.