fix: gracefully handle missing permissions

components/ui/card.tsx

@@ -56,7 +56,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <Text
     ref={ref}
-    className={cn("mt-1 text-sm text-muted-foreground", className)}
+    className={cn("mt-1 text-muted-foreground", className)}
     {...props}
   />
 ));

pages/settings/wallets/EditWallet.tsx

@@ -1,8 +1,7 @@
 import { Link, router } from "expo-router";
-import { Alert, Pressable, Text, View } from "react-native";
+import { Alert, Pressable, View } from "react-native";
 import Toast from "react-native-toast-message";
 
-import { Nip47Capability } from "@getalby/sdk/dist/NWCClient";
 import * as Clipboard from "expo-clipboard";
 import {
   ArchiveRestore,
@@ -18,30 +17,35 @@ import {
   CardDescription,
   CardTitle,
 } from "~/components/ui/card";
-import { DEFAULT_WALLET_NAME } from "~/lib/constants";
+import { DEFAULT_WALLET_NAME, REQUIRED_CAPABILITIES } from "~/lib/constants";
 import { useAppStore } from "~/lib/state/appStore";
 
 export function EditWallet() {
   const selectedWalletId = useAppStore((store) => store.selectedWalletId);
   const wallets = useAppStore((store) => store.wallets);
   return (
-    <View className="flex-1 flex flex-col p-3 gap-3">
+    <View className="flex-1 flex flex-col p-4 gap-4">
       <Screen title="Edit Wallet" />
-      {(["notifications", "list_transactions"] as Nip47Capability[]).map(
-        (capability) =>
-          (wallets[selectedWalletId].nwcCapabilities || []).indexOf(
-            capability,
-          ) < 0 && (
-            <Card key={capability} className="border-destructive">
-              <CardContent className="flex flex-row items-center gap-4">
-                <TriangleAlert className="text-destructive" />
-                <Text className="text-foreground">
-                  Your wallet does not support {capability}
-                </Text>
-              </CardContent>
-            </Card>
-          ),
-      )}
+      {/* TODO: Do not allow notifications to be toggled without notifications capability */}
+      <Card className="bg-orange-50 border-orange-100 my-2">
+        <CardContent className="flex flex-row items-center gap-4">
+          <TriangleAlert className="text-orange-700" />
+          <View className="flex flex-1 flex-col">
+            <CardTitle className="text-orange-700">
+              This wallet might not work as expected
+            </CardTitle>
+            <CardDescription className="text-orange-700">
+              Missing capabilities:&nbsp;
+              {REQUIRED_CAPABILITIES.filter(
+                (capability) =>
+                  !(wallets[selectedWalletId].nwcCapabilities || []).includes(
+                    capability,
+                  ),
+              ).join(", ")}
+            </CardDescription>
+          </View>
+        </CardContent>
+      </Card>
       <Link href={`/settings/wallets/${selectedWalletId}/name`} asChild>
         <Pressable>
           <Card className="w-full">

pages/settings/wallets/SetupWallet.tsx

@@ -7,11 +7,22 @@ import React from "react";
 import { Pressable, TouchableOpacity, View } from "react-native";
 import Toast from "react-native-toast-message";
 import DismissableKeyboardView from "~/components/DismissableKeyboardView";
-import { ClipboardPaste, HelpCircle, X } from "~/components/Icons";
+import {
+  ClipboardPaste,
+  HelpCircle,
+  TriangleAlert,
+  X,
+} from "~/components/Icons";
 import Loading from "~/components/Loading";
 import QRCodeScanner from "~/components/QRCodeScanner";
 import Screen from "~/components/Screen";
 import { Button } from "~/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardTitle,
+} from "~/components/ui/card";
 import {
   Dialog,
   DialogClose,
@@ -73,18 +84,6 @@ export function SetupWallet() {
         if (info.notifications?.length) {
           capabilities.push("notifications");
         }
-        if (
-          !REQUIRED_CAPABILITIES.every((capability) =>
-            capabilities.includes(capability),
-          )
-        ) {
-          const missing = REQUIRED_CAPABILITIES.filter(
-            (capability) => !capabilities.includes(capability),
-          );
-          throw new Error(
-            `Missing required capabilities: ${missing.join(", ")}`,
-          );
-        }
 
         console.info("NWC connected", info);
 
@@ -245,6 +244,27 @@ export function SetupWallet() {
                 returnKeyType="done"
               />
             </View>
+            {capabilities &&
+              !REQUIRED_CAPABILITIES.every((capability) =>
+                capabilities.includes(capability),
+              ) && (
+                <Card className="w-full mb-5 bg-orange-50 border-orange-100">
+                  <CardContent className="flex flex-row items-center gap-4">
+                    <TriangleAlert className="text-orange-700" />
+                    <View className="flex flex-1 flex-col">
+                      <CardTitle className="text-orange-700">
+                        Alby Go might not work as expected
+                      </CardTitle>
+                      <CardDescription className="text-orange-700">
+                        Missing capabilities:&nbsp;
+                        {REQUIRED_CAPABILITIES.filter(
+                          (capability) => !capabilities.includes(capability),
+                        ).join(", ")}
+                      </CardDescription>
+                    </View>
+                  </CardContent>
+                </Card>
+              )}
             <Button size="lg" onPress={addWallet} disabled={!name}>
               <Text>Finish</Text>
             </Button>