Skip to content

Commit

Permalink
feat: zapplanner integration
Browse files Browse the repository at this point in the history
  • Loading branch information
reneaaron committed Oct 11, 2024
1 parent c3deb33 commit 08829c2
Show file tree
Hide file tree
Showing 3 changed files with 148 additions and 59 deletions.
60 changes: 1 addition & 59 deletions frontend/src/components/SuggestedAppData.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -647,65 +647,7 @@ export const suggestedApps: SuggestedApp[] = [
description: "Schedule payments",
webLink: "https://zapplanner.albylabs.com/",
logo: zapplanner,
guide: (
<>
<div>
<h3 className="font-medium">In ZapPlanner</h3>
<ul className="list-inside text-muted-foreground">
<li>
1. Open{" "}
<ExternalLink
to="https://zapplanner.albylabs.com"
className="font-medium text-foreground underline"
>
ZapPlanner
</ExternalLink>{" "}
in your browser
</li>
<li>
2. Click on{" "}
<span className="font-medium text-foreground">
New Recurring Payment
</span>{" "}
→ add the details and click{" "}
<span className="font-medium text-foreground">Continue</span>
</li>
<li>
3. Choose{" "}
<span className="font-medium text-foreground">
Nostr Wallet Connect URL
</span>
</li>
</ul>
</div>
<div>
<h3 className="font-medium">In Alby Hub</h3>
<ul className="list-inside text-muted-foreground">
<li>
4. Click{" "}
<Link
to="/apps/new?app=zapplanner"
className="font-medium text-foreground underline"
>
Connect to ZapPlanner
</Link>
</li>
<li>5. Set app's wallet permissions (full access recommended)</li>
</ul>
</div>
<div>
<h3 className="font-medium">In ZapPlanner</h3>
<ul className="list-inside text-muted-foreground">
<li>
6. Paste the connection secret from Alby Hub and click{" "}
<span className="font-medium text-foreground">
Create Recurring Payment
</span>
</li>
</ul>
</div>
</>
),
internal: true,
},
{
id: "zapplepay",
Expand Down
5 changes: 5 additions & 0 deletions frontend/src/routes.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ import { OpenedFirstChannel } from "src/screens/channels/first/OpenedFirstChanne
import { OpeningFirstChannel } from "src/screens/channels/first/OpeningFirstChannel";
import { BuzzPay } from "src/screens/internal-apps/BuzzPay";
import { UncleJim } from "src/screens/internal-apps/UncleJim";
import { Zapplanner } from "src/screens/internal-apps/Zapplanner";
import BuyBitcoin from "src/screens/onchain/BuyBitcoin";
import DepositBitcoin from "src/screens/onchain/DepositBitcoin";
import ConnectPeer from "src/screens/peers/ConnectPeer";
Expand Down Expand Up @@ -217,6 +218,10 @@ const routes = [
path: "buzzpay",
element: <BuzzPay />,
},
{
path: "zapplanner",
element: <Zapplanner />,
},
],
},
{
Expand Down
142 changes: 142 additions & 0 deletions frontend/src/screens/internal-apps/Zapplanner.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
import React from "react";
import AppHeader from "src/components/AppHeader";
import AppCard from "src/components/connections/AppCard";
import { Button } from "src/components/ui/button";
import {
Card,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "src/components/ui/card";
import { useToast } from "src/components/ui/use-toast";
import { useApps } from "src/hooks/useApps";
import { createApp } from "src/requests/createApp";
import { CreateAppRequest } from "src/types";
import { handleRequestError } from "src/utils/handleRequestError";

export function Zapplanner() {
const { data: apps, mutate: reloadApps } = useApps();
const { toast } = useToast();
const [, setLoading] = React.useState(false);
const handleSubmit = async (name: string) => {
setLoading(true);

try {
if (apps?.some((existingApp) => existingApp.name === name)) {
throw new Error("A connection with the same name already exists.");
}

const createAppRequest: CreateAppRequest = {
name,
scopes: [
"get_balance",
"get_info",
"list_transactions",
"lookup_invoice",
"make_invoice",
"notifications",
"pay_invoice",
],
isolated: true,
metadata: {
app_store_app_id: "zapplanner",
},
};

await createApp(createAppRequest);
toast({
title: "Created subscription",
description: "The first payment is scheduled for 1st of October.",
});

reloadApps();
} catch (error) {
handleRequestError(toast, "Failed to create app", error);
}
setLoading(false);
};

const zapplannerApps = apps?.filter(
(app) => app.metadata?.app_store_app_id === "zapplanner"
);

return (
<div className="grid gap-5">
<AppHeader title="Zapplanner" description="Schedule payments" />
<h2 className="font-semibold text-xl">Inspiration</h2>
<p className="text-muted-foreground -mt-5">
Be the change you want to see in the world and do your part
</p>
<div className="grid grid-cols-3 gap-3">
<Card>
<CardHeader>
<CardTitle>Alby</CardTitle>
<CardDescription>description</CardDescription>
</CardHeader>
<CardFooter className="flex justify-end">
<Button
onClick={() => {
handleSubmit("Alby");
}}
>
Support with 5$ / month
</Button>
</CardFooter>
</Card>
<Card>
<CardHeader>
<CardTitle>HRF</CardTitle>
<CardDescription>description</CardDescription>
</CardHeader>
<CardFooter className="flex justify-end">
<Button>Support with 5$ / month</Button>
</CardFooter>
</Card>
<Card>
<CardHeader>
<CardTitle>opensats</CardTitle>
<CardDescription>description</CardDescription>
</CardHeader>
<CardFooter className="flex justify-end">
<Button>Support with 5$ / month</Button>
</CardFooter>
</Card>
</div>
{/* {!connectionSecret && (
<>
<form
onSubmit={handleSubmit}
className="flex flex-col items-start gap-5 max-w-lg"
>
<div className="w-full grid gap-1.5">
<Label htmlFor="name">Name of friend or family member</Label>
<Input
autoFocus
type="text"
name="name"
value={name}
id="name"
onChange={(e) => setName(e.target.value)}
required
autoComplete="off"
/>
</div>
<LoadingButton loading={isLoading} type="submit">
Create Subaccount
</LoadingButton>
</form> */}

{!!zapplannerApps?.length && (
<>
<h2 className="font-semibold text-xl">Recurring Payments</h2>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4 items-stretch app-list">
{zapplannerApps.map((app, index) => (
<AppCard key={index} app={app} />
))}
</div>
</>
)}
</div>
);
}

0 comments on commit 08829c2

Please sign in to comment.