From 31303893a343cfebf06b70eafc470a1823b8c331 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ren=C3=A9=20Aaron?= Date: Tue, 9 Jul 2024 10:37:32 +0200 Subject: [PATCH 1/6] feat: app card improvements --- .../connections/AlbyConnectionCard.tsx | 4 +- .../connections/AppCardConnectionInfo.tsx | 58 +++++++++++-------- 2 files changed, 35 insertions(+), 27 deletions(-) diff --git a/frontend/src/components/connections/AlbyConnectionCard.tsx b/frontend/src/components/connections/AlbyConnectionCard.tsx index 2c3639a8..676127f3 100644 --- a/frontend/src/components/connections/AlbyConnectionCard.tsx +++ b/frontend/src/components/connections/AlbyConnectionCard.tsx @@ -35,7 +35,7 @@ function AlbyConnectionCard({ connection }: { connection?: App }) { - Alby Account + Linked Alby Account {connection && } @@ -47,7 +47,7 @@ function AlbyConnectionCard({ connection }: { connection?: App }) {
-
+
diff --git a/frontend/src/components/connections/AppCardConnectionInfo.tsx b/frontend/src/components/connections/AppCardConnectionInfo.tsx index 775f8d56..ba2d50df 100644 --- a/frontend/src/components/connections/AppCardConnectionInfo.tsx +++ b/frontend/src/components/connections/AppCardConnectionInfo.tsx @@ -1,5 +1,5 @@ import dayjs from "dayjs"; -import { PlusCircle } from "lucide-react"; +import { CircleCheck, PlusCircle } from "lucide-react"; import { Link } from "react-router-dom"; import { Button } from "src/components/ui/button"; import { Progress } from "src/components/ui/progress"; @@ -36,25 +36,21 @@ export function AppCardConnectionInfo({ />
- {connection.maxAmount && ( - <>{formatAmount(connection.maxAmount * 1000)} sats + {connection.lastEventAt && ( + <>Last used: {dayjs(connection.lastEventAt).fromNow()} )}
- {connection.maxAmount > 0 && - connection.budgetRenewal !== "never" && ( - <>Renews {connection.budgetRenewal} - )} + {connection.maxAmount && ( + <> + {formatAmount(connection.maxAmount * 1000)} sats + {connection.budgetRenewal !== "never" && ( + <> / {connection.budgetRenewal.slice(0, -2)} + )} + + )}
- {connection.lastEventAt && ( -
-
-
Last used: 
-
{dayjs(connection.lastEventAt).fromNow()}
-
-
- )} ) : connection.scopes.indexOf("pay_invoice") > -1 ? ( <> @@ -79,18 +75,30 @@ export function AppCardConnectionInfo({ ) : ( <> -
-
-

- Read only -

+
+
+ + Share wallet information
+ {connection.scopes.indexOf("make_invoice") > -1 && ( +
+ + Create Invoices +
+ )}
-
- +
+
+ {connection.lastEventAt && ( + <>Last used: {dayjs(connection.lastEventAt).fromNow()} + )} +
+ + +
)} From 4c401783c94b123b8b4a6e40b1cd8fea2bbf7b51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ren=C3=A9=20Aaron?= Date: Tue, 9 Jul 2024 13:30:20 +0200 Subject: [PATCH 2/6] fix: copy sidebar --- frontend/src/components/SidebarHint.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/SidebarHint.tsx b/frontend/src/components/SidebarHint.tsx index 8d4d9d1e..0ec49db5 100644 --- a/frontend/src/components/SidebarHint.tsx +++ b/frontend/src/components/SidebarHint.tsx @@ -88,7 +88,7 @@ function SidebarHint() { From 1da2858c00a477e7b562aee91a373372adb43713 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ren=C3=A9=20Aaron?= Date: Tue, 9 Jul 2024 13:31:47 +0200 Subject: [PATCH 3/6] feat: frontend implementation (wip) --- .../images/illustrations/login-with-alby.png | Bin 0 -> 23726 bytes .../connections/AlbyConnectionCard.tsx | 101 +++++++++++++++++- 2 files changed, 96 insertions(+), 5 deletions(-) create mode 100644 frontend/public/images/illustrations/login-with-alby.png diff --git a/frontend/public/images/illustrations/login-with-alby.png b/frontend/public/images/illustrations/login-with-alby.png new file mode 100644 index 0000000000000000000000000000000000000000..5da33e30ebb60fe20a2a884cb4c1d2554ba3a9b7 GIT binary patch literal 23726 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 literal 0 HcmV?d00001 diff --git a/frontend/src/components/connections/AlbyConnectionCard.tsx b/frontend/src/components/connections/AlbyConnectionCard.tsx index 676127f3..c8882402 100644 --- a/frontend/src/components/connections/AlbyConnectionCard.tsx +++ b/frontend/src/components/connections/AlbyConnectionCard.tsx @@ -6,6 +6,8 @@ import { Link2Icon, ZapIcon, } from "lucide-react"; +import albyButton from "public/images/illustrations/login-with-alby.png"; +import { useState } from "react"; import { Link } from "react-router-dom"; import ExternalLink from "src/components/ExternalLink"; import Loading from "src/components/Loading"; @@ -20,16 +22,33 @@ import { CardHeader, CardTitle, } from "src/components/ui/card"; +import { + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTrigger, +} from "src/components/ui/dialog"; +import { Label } from "src/components/ui/label"; import { LoadingButton } from "src/components/ui/loading-button"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "src/components/ui/select"; import { Separator } from "src/components/ui/separator"; import { useAlbyMe } from "src/hooks/useAlbyMe"; import { LinkStatus, useLinkAccount } from "src/hooks/useLinkAccount"; -import { App } from "src/types"; +import { App, budgetOptions, validBudgetRenewals } from "src/types"; function AlbyConnectionCard({ connection }: { connection?: App }) { const { data: albyMe } = useAlbyMe(); const { loading, linkStatus, loadingLinkStatus, linkAccount } = useLinkAccount(); + const [maxAmount, setMaxAmount] = useState(); return ( @@ -62,10 +81,82 @@ function AlbyConnectionCard({ connection }: { connection?: App }) {
{loadingLinkStatus && } {!connection || linkStatus === LinkStatus.SharedNode ? ( - - {!loading && } - Link your Alby Account - + + + + {!loading && } + Link your Alby Account + + + + Link to Alby Account + +

+ After you link your account, every app you access + through your Alby Account will handle payments via the + Hub. +

+ +

+ You can add a budget that will restrict how much can be + spent from the Hub with your Alby Account. +

+
+ + +
+
+ {Object.keys(budgetOptions).map((budget) => { + return ( + // replace with something else and then remove dark prefixes +
+ setMaxAmount(budgetOptions[budget]) + } + className={`col-span-2 md:col-span-1 cursor-pointer rounded border-2 ${ + maxAmount == budgetOptions[budget] + ? "border-primary" + : "border-muted" + } text-center py-4`} + > + {budget} +
+ {budgetOptions[budget] ? "sats" : "#reckless"} +
+ ); + })} +
+ + + +
Link to Alby Account
+ + + + ) : linkStatus === LinkStatus.ThisNode ? (
-
- {Object.keys(budgetOptions).map((budget) => { - return ( - // replace with something else and then remove dark prefixes -
- handleMaxAmountChange(budgetOptions[budget]) - } - className={`col-span-2 md:col-span-1 cursor-pointer rounded border-2 ${ - permissions.maxAmount == budgetOptions[budget] - ? "border-primary" - : "border-muted" - } text-center py-4 dark:text-white`} - > - {budget} -
- {budgetOptions[budget] ? "sats" : "#reckless"} -
- ); - })} -
+ ) : isNewConnection ? ( <> diff --git a/frontend/src/components/SidebarHint.tsx b/frontend/src/components/SidebarHint.tsx index 0ec49db5..67bf68f7 100644 --- a/frontend/src/components/SidebarHint.tsx +++ b/frontend/src/components/SidebarHint.tsx @@ -87,9 +87,9 @@ function SidebarHint() { return ( ); diff --git a/frontend/src/components/connections/AlbyConnectionCard.tsx b/frontend/src/components/connections/AlbyConnectionCard.tsx index c8882402..ab3e39a8 100644 --- a/frontend/src/components/connections/AlbyConnectionCard.tsx +++ b/frontend/src/components/connections/AlbyConnectionCard.tsx @@ -6,9 +6,11 @@ import { Link2Icon, ZapIcon, } from "lucide-react"; -import albyButton from "public/images/illustrations/login-with-alby.png"; import { useState } from "react"; import { Link } from "react-router-dom"; + +import BudgetAmountSelect from "src/components/BudgetAmountSelect"; +import BudgetRenewalSelect from "src/components/BudgetRenewalSelect"; import ExternalLink from "src/components/ExternalLink"; import Loading from "src/components/Loading"; import UserAvatar from "src/components/UserAvatar"; @@ -32,23 +34,20 @@ import { } from "src/components/ui/dialog"; import { Label } from "src/components/ui/label"; import { LoadingButton } from "src/components/ui/loading-button"; -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from "src/components/ui/select"; import { Separator } from "src/components/ui/separator"; import { useAlbyMe } from "src/hooks/useAlbyMe"; import { LinkStatus, useLinkAccount } from "src/hooks/useLinkAccount"; -import { App, budgetOptions, validBudgetRenewals } from "src/types"; +import { App, BudgetRenewalType } from "src/types"; +import albyButton from "/images/illustrations/login-with-alby.png"; function AlbyConnectionCard({ connection }: { connection?: App }) { const { data: albyMe } = useAlbyMe(); const { loading, linkStatus, loadingLinkStatus, linkAccount } = useLinkAccount(); - const [maxAmount, setMaxAmount] = useState(); + + const [maxAmount, setMaxAmount] = useState(1_000_000); + const [budgetRenewal, setBudgetRenewal] = + useState("monthly"); return ( @@ -91,68 +90,29 @@ function AlbyConnectionCard({ connection }: { connection?: App }) { Link to Alby Account -

- After you link your account, every app you access - through your Alby Account will handle payments via the - Hub. -

+ After you link your account, every app you access through + your Alby Account will handle payments via the Hub. -

- You can add a budget that will restrict how much can be - spent from the Hub with your Alby Account. -

-
- - -
-
- {Object.keys(budgetOptions).map((budget) => { - return ( - // replace with something else and then remove dark prefixes -
- setMaxAmount(budgetOptions[budget]) - } - className={`col-span-2 md:col-span-1 cursor-pointer rounded border-2 ${ - maxAmount == budgetOptions[budget] - ? "border-primary" - : "border-muted" - } text-center py-4`} - > - {budget} -
- {budgetOptions[budget] ? "sats" : "#reckless"} -
- ); - })} -
+ You can add a budget that will restrict how much can be + spent from the Hub with your Alby Account. +
+ + +
+ - -
Link to Alby Account
+ linkAccount(maxAmount, budgetRenewal)} + loading={loading} + > + Link to Alby Account diff --git a/frontend/src/components/connections/AppCard.tsx b/frontend/src/components/connections/AppCard.tsx index 3d817c23..edb3864c 100644 --- a/frontend/src/components/connections/AppCard.tsx +++ b/frontend/src/components/connections/AppCard.tsx @@ -1,6 +1,6 @@ import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; -import { Link } from "react-router-dom"; +import { useNavigate } from "react-router-dom"; import AppAvatar from "src/components/AppAvatar"; import { AppCardConnectionInfo } from "src/components/connections/AppCardConnectionInfo"; import { AppCardNotice } from "src/components/connections/AppCardNotice"; @@ -20,26 +20,27 @@ type Props = { }; export default function AppCard({ app }: Props) { + const navigate = useNavigate(); + return ( - <> - - - - - -
- -
- {app.name} -
-
- - - - - - - - + navigate(`/apps/${app.nostrPubkey}`)} + > + + + +
+ +
+ {app.name} +
+
+ + + + + + ); } diff --git a/frontend/src/components/connections/AppCardConnectionInfo.tsx b/frontend/src/components/connections/AppCardConnectionInfo.tsx index ba2d50df..8e3d6ee7 100644 --- a/frontend/src/components/connections/AppCardConnectionInfo.tsx +++ b/frontend/src/components/connections/AppCardConnectionInfo.tsx @@ -93,7 +93,10 @@ export function AppCardConnectionInfo({ <>Last used: {dayjs(connection.lastEventAt).fromNow()} )}
- + e.stopPropagation()} + >