+ {permissions.expiresAt &&
+ new Date(permissions.expiresAt).getFullYear() !== 1
+ ? new Date(permissions.expiresAt).toString()
+ : "This app will never expire"}
+
- {permissions.expiresAt &&
- new Date(permissions.expiresAt).getFullYear() !== 1
- ? new Date(permissions.expiresAt).toString()
- : "This app will never expire"}
-
-
)}
);
diff --git a/frontend/src/components/Scopes.tsx b/frontend/src/components/Scopes.tsx
new file mode 100644
index 00000000..f0958785
--- /dev/null
+++ b/frontend/src/components/Scopes.tsx
@@ -0,0 +1,168 @@
+import React, { useEffect } from "react";
+import { Checkbox } from "src/components/ui/checkbox";
+import { Label } from "src/components/ui/label";
+import { cn } from "src/lib/utils";
+import {
+ NIP_47_GET_BALANCE_METHOD,
+ NIP_47_GET_INFO_METHOD,
+ NIP_47_LIST_TRANSACTIONS_METHOD,
+ NIP_47_LOOKUP_INVOICE_METHOD,
+ NIP_47_NOTIFICATIONS_PERMISSION,
+ NIP_47_PAY_INVOICE_METHOD,
+ ReadOnlyScope,
+ SCOPE_GROUP_CUSTOM,
+ SCOPE_GROUP_FULL_ACCESS,
+ SCOPE_GROUP_READ_ONLY,
+ Scope,
+ ScopeGroup,
+ WalletCapabilities,
+ scopeDescriptions,
+ scopeGroupDescriptions,
+ scopeGroupIconMap,
+ scopeGroupTitle,
+} from "src/types";
+
+interface ScopesProps {
+ capabilities: WalletCapabilities;
+ scopes: Set;
+ onScopeChange: (scopes: Set) => void;
+}
+
+const isSetEqual = (setA: Set, setB: Set) =>
+ setA.size === setB.size && [...setA].every((value) => setB.has(value));
+
+const Scopes: React.FC = ({
+ capabilities,
+ scopes,
+ onScopeChange,
+}) => {
+ const fullAccessScopes: Set = React.useMemo(() => {
+ return new Set(capabilities.scopes);
+ }, [capabilities.scopes]);
+
+ const readOnlyScopes: Set = React.useMemo(() => {
+ const scopes: Scope[] = capabilities.scopes;
+ return new Set(
+ scopes.filter((method): method is ReadOnlyScope =>
+ [
+ NIP_47_GET_BALANCE_METHOD,
+ NIP_47_GET_INFO_METHOD,
+ NIP_47_LOOKUP_INVOICE_METHOD,
+ NIP_47_LIST_TRANSACTIONS_METHOD,
+ NIP_47_NOTIFICATIONS_PERMISSION,
+ ].includes(method)
+ )
+ );
+ }, [capabilities.scopes]);
+
+ const [scopeGroup, setScopeGroup] = React.useState(() => {
+ if (!scopes.size || isSetEqual(scopes, fullAccessScopes)) {
+ return SCOPE_GROUP_FULL_ACCESS;
+ } else if (isSetEqual(scopes, readOnlyScopes)) {
+ return SCOPE_GROUP_READ_ONLY;
+ }
+ return SCOPE_GROUP_CUSTOM;
+ });
+
+ // we need scopes to be empty till this point for isScopesEditable
+ // and once this component is mounted we set it to all scopes
+ useEffect(() => {
+ // stop setting scopes on re-renders
+ if (!scopes.size && scopeGroup != SCOPE_GROUP_CUSTOM) {
+ onScopeChange(fullAccessScopes);
+ }
+ }, [fullAccessScopes, onScopeChange, scopeGroup, scopes]);
+
+ const handleScopeGroupChange = (scopeGroup: ScopeGroup) => {
+ setScopeGroup(scopeGroup);
+ switch (scopeGroup) {
+ case SCOPE_GROUP_FULL_ACCESS:
+ onScopeChange(fullAccessScopes);
+ break;
+ case SCOPE_GROUP_READ_ONLY:
+ onScopeChange(readOnlyScopes);
+ break;
+ default: {
+ onScopeChange(new Set());
+ break;
+ }
+ }
+ };
+
+ const handleScopeChange = (scope: Scope) => {
+ const newScopes = new Set(scopes);
+ if (newScopes.has(scope)) {
+ newScopes.delete(scope);
+ } else {
+ newScopes.add(scope);
+ }
+ onScopeChange(newScopes);
+ };
+
+ return (
+ <>
+
+ )}
+
+ );
+};
+
+export default Scopes;
diff --git a/frontend/src/components/connections/AlbyConnectionCard.tsx b/frontend/src/components/connections/AlbyConnectionCard.tsx
index 4141f9f5..b5d05ccc 100644
--- a/frontend/src/components/connections/AlbyConnectionCard.tsx
+++ b/frontend/src/components/connections/AlbyConnectionCard.tsx
@@ -32,7 +32,6 @@ import {
DialogHeader,
DialogTrigger,
} from "src/components/ui/dialog";
-import { Label } from "src/components/ui/label";
import { LoadingButton } from "src/components/ui/loading-button";
import { Separator } from "src/components/ui/separator";
import { useAlbyMe } from "src/hooks/useAlbyMe";
@@ -105,17 +104,16 @@ function AlbyConnectionCard({ connection }: { connection?: App }) {
You can add a budget that will restrict how much can be
spent from the Hub with your Alby Account.
-
-
+
+
- linkAccount(maxAmount, budgetRenewal)}
diff --git a/frontend/src/components/connections/AppCardConnectionInfo.tsx b/frontend/src/components/connections/AppCardConnectionInfo.tsx
index 9b1347a5..1aad6f72 100644
--- a/frontend/src/components/connections/AppCardConnectionInfo.tsx
+++ b/frontend/src/components/connections/AppCardConnectionInfo.tsx
@@ -4,7 +4,12 @@ import { Link } from "react-router-dom";
import { Button } from "src/components/ui/button";
import { Progress } from "src/components/ui/progress";
import { formatAmount } from "src/lib/utils";
-import { App, BudgetRenewalType } from "src/types";
+import {
+ App,
+ BudgetRenewalType,
+ NIP_47_MAKE_INVOICE_METHOD,
+ NIP_47_PAY_INVOICE_METHOD,
+} from "src/types";
type AppCardConnectionInfoProps = {
connection: App;
@@ -69,7 +74,7 @@ export function AppCardConnectionInfo({