Skip to content
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.

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

feat: appstore detail pages #716

Merged
merged 7 commits into from
Oct 9, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
1,066 changes: 1,060 additions & 6 deletions frontend/src/components/SuggestedAppData.tsx

Large diffs are not rendered by default.

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"
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>
);
}
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"
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>
);
}
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
152 changes: 152 additions & 0 deletions frontend/src/screens/appstore/AppStoreDetail.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
114 changes: 0 additions & 114 deletions frontend/src/screens/internal-apps/AlbyGo.tsx

This file was deleted.

Loading