diff --git a/frontend/src/components/Permissions.tsx b/frontend/src/components/Permissions.tsx index 6450c1ab..3096e2c9 100644 --- a/frontend/src/components/Permissions.tsx +++ b/frontend/src/components/Permissions.tsx @@ -27,6 +27,8 @@ import { WalletCapabilities, budgetOptions, expiryOptions, + iconMap, + scopeDescriptions, validBudgetRenewals, } from "src/types"; @@ -41,6 +43,7 @@ interface PermissionsProps { onPermissionsChange: (permissions: AppPermissions) => void; canEditPermissions: boolean; budgetUsage?: number; + isNewConnection?: boolean; } const Permissions: React.FC = ({ @@ -48,6 +51,7 @@ const Permissions: React.FC = ({ initialPermissions, onPermissionsChange, canEditPermissions, + isNewConnection, budgetUsage, }) => { // TODO: EDITABLE LOGIC @@ -57,9 +61,13 @@ const Permissions: React.FC = ({ const [expiryDays, setExpiryDays] = useState( daysFromNow(permissions.expiresAt) ); - const [budgetOption, setBudgetOption] = useState(!!permissions.maxAmount); + const [budgetOption, setBudgetOption] = useState( + isNewConnection ? !!permissions.maxAmount : true + ); const [customBudget, setCustomBudget] = useState(!!permissions.maxAmount); - const [expireOption, setExpireOption] = useState(!!permissions.expiresAt); + const [expireOption, setExpireOption] = useState( + isNewConnection ? !!permissions.expiresAt : true + ); const [customExpiry, setCustomExpiry] = useState(!!permissions.expiresAt); useEffect(() => { @@ -100,8 +108,55 @@ const Permissions: React.FC = ({ handlePermissionsChange({ expiresAt: currentDate }); }; - return ( -
+ return !canEditPermissions ? ( + <> +

Scopes

+
+ {[...initialPermissions.scopes].map((rm, index) => { + const PermissionIcon = iconMap[rm]; + return ( +
+ +

{scopeDescriptions[rm]}

+
+ ); + })} +
+ {permissions.scopes.has(NIP_47_PAY_INVOICE_METHOD) && ( +
+
+

+ Budget Renewal: {permissions.budgetRenewal || "Never"} +

+

+ Budget Amount:{" "} + {permissions.maxAmount + ? new Intl.NumberFormat().format(permissions.maxAmount) + : "∞"} + {" sats "} + {`(${new Intl.NumberFormat().format(budgetUsage || 0)} sats used)`} +

+
+
+ )} +
+

Connection expiry

+

+ {permissions.expiresAt && + new Date(permissions.expiresAt).getFullYear() !== 1 + ? new Date(permissions.expiresAt).toString() + : "This app will never expire"} +

+
+ + ) : ( +
{ initialPermissions={permissions} onPermissionsChange={setPermissions} canEditPermissions={!reqMethodsParam} + isNewConnection />
diff --git a/frontend/src/screens/apps/ShowApp.tsx b/frontend/src/screens/apps/ShowApp.tsx index b73d02bb..a9fba457 100644 --- a/frontend/src/screens/apps/ShowApp.tsx +++ b/frontend/src/screens/apps/ShowApp.tsx @@ -39,6 +39,7 @@ import { } from "src/components/ui/card"; import { Table, TableBody, TableCell, TableRow } from "src/components/ui/table"; import { useToast } from "src/components/ui/use-toast"; +import { useCapabilities } from "src/hooks/useCapabilities"; function ShowApp() { const { data: info } = useInfo(); @@ -46,6 +47,7 @@ function ShowApp() { const { toast } = useToast(); const { pubkey } = useParams() as { pubkey: string }; const { data: app, mutate: refetchApp, error } = useApp(pubkey); + const { data: capabilities } = useCapabilities(); const navigate = useNavigate(); const location = useLocation(); const [editMode, setEditMode] = React.useState(false); @@ -81,7 +83,7 @@ function ShowApp() { return

{error.message}

; } - if (!app || !info) { + if (!app || !info || !capabilities) { return ; } @@ -247,6 +249,7 @@ function ShowApp() {