Skip to content

Commit

Permalink
feat: alby go app (#674)
Browse files Browse the repository at this point in the history
* feat: alby go

* chore: update copy

Co-authored-by: Michael Bumann <[email protected]>

* chore: fix alby go link

* chore: simplify alby go step 2. in instructions

---------

Co-authored-by: Roland <[email protected]>
Co-authored-by: Michael Bumann <[email protected]>
Co-authored-by: Roland Bewick <[email protected]>
  • Loading branch information
4 people authored Sep 20, 2024
1 parent e6f1d5b commit a8cc5d0
Show file tree
Hide file tree
Showing 5 changed files with 155 additions and 1 deletion.
4 changes: 4 additions & 0 deletions frontend/src/components/SuggestedAppData.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -193,6 +193,10 @@ export const suggestedApps: SuggestedApp[] = [
title: "Alby Go",
description: "A simple mobile wallet that works great with Alby Hub",
webLink: "https://albygo.com",
playLink:
"https://play.google.com/store/apps/details?id=com.getalby.mobile",
appleLink: "https://apps.apple.com/us/app/alby-go/id6471335774",
logo: albyGo,
internal: true,
},
].sort((a, b) => (a.title.toUpperCase() > b.title.toUpperCase() ? 1 : -1));
2 changes: 1 addition & 1 deletion frontend/src/components/ui/button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const buttonVariants = cva(
secondary:
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-foreground hover:text-accent-foreground underline-offset-4 hover:underline",
link: "text-foreground hover:text-accent-foreground underline underline-offset-4 hover:no-underline",
positive:
"bg-positive text-positive-foreground shadow-sm hover:bg-positive/90",
},
Expand Down
5 changes: 5 additions & 0 deletions frontend/src/routes.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ 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 @@ -216,6 +217,10 @@ const routes = [
path: "buzzpay",
element: <BuzzPay />,
},
{
path: "alby-go",
element: <AlbyGo />,
},
],
},
{
Expand Down
31 changes: 31 additions & 0 deletions frontend/src/screens/Home.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import { ExternalLinkIcon } from "lucide-react";
import { Link } from "react-router-dom";
import albyGo from "src/assets/suggested-apps/alby-go.png";
import AppHeader from "src/components/AppHeader";
import ExternalLink from "src/components/ExternalLink";
import { AlbyHead } from "src/components/images/AlbyHead";
Expand Down Expand Up @@ -77,6 +79,35 @@ function Home() {
</Card>
</ExternalLink>
)}

<Link to="/internal-apps/alby-go">
<Card>
<CardHeader>
<div className="flex flex-row items-center">
<div className="flex-shrink-0">
<img src={albyGo} className="w-12 h-12 rounded-xl border" />
</div>
<div>
<CardTitle>
<div className="flex-1 leading-5 font-semibold text-xl whitespace-nowrap text-ellipsis overflow-hidden ml-4">
Alby Go
</div>
</CardTitle>
<CardDescription className="ml-4">
The easiest Bitcoin mobile app that works great with Alby
Hub.
</CardDescription>
</div>
</div>
</CardHeader>
<CardContent className="text-right">
<Button variant="outline">
Learn more
<ExternalLinkIcon className="w-4 h-4 ml-2" />
</Button>
</CardContent>
</Card>
</Link>
{!extensionInstalled && (
<ExternalLink to="https://www.getalby.com">
<Card>
Expand Down
114 changes: 114 additions & 0 deletions frontend/src/screens/internal-apps/AlbyGo.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
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 (
<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 variant="outline">
<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">
<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>
)}
<ExternalLink to="https://zap.store/download">
<Button variant="outline">zap.store</Button>
</ExternalLink>
</CardFooter>
</Card>
<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>
<ul className="list-inside list-decimal">
<li>Download the app from the app store</li>
<li>
<Link to="/apps/new?app=alby-go">
<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>
);
}

0 comments on commit a8cc5d0

Please sign in to comment.