feat: add alert component

components/Alert.tsx

@@ -0,0 +1,50 @@
+import { LucideIcon } from "lucide-react-native";
+import { View } from "react-native";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardTitle,
+} from "~/components/ui/card";
+import { cn } from "~/lib/utils";
+
+type Props = {
+  type: "error" | "warn" | "info";
+  icon: LucideIcon;
+  title: string;
+  description: string;
+  className?: string;
+};
+
+function Alert({ title, description, type, icon: Icon, className }: Props) {
+  const textColor =
+    type === "error"
+      ? "text-red-700 dark:text-red-300"
+      : type === "warn"
+        ? "text-orange-700 dark:text-orange-300"
+        : "text-blue-700 dark:text-blue-300";
+  return (
+    <Card
+      className={cn(
+        "w-full mb-4",
+        type === "error" &&
+          "bg-red-50 dark:bg-red-900 border-red-100 dark:border-red-900",
+        type === "warn" &&
+          "bg-orange-50 dark:bg-orange-900 border-orange-100 dark:border-orange-900",
+        type === "info" &&
+          "bg-blue-50 dark:bg-blue-900 border-blue-100 dark:border-blue-900",
+        className,
+      )}
+    >
+      <CardContent className="flex flex-row items-center gap-4">
+        <Icon className={textColor} />
+        <View className="flex flex-1 flex-col">
+          <CardTitle className={textColor}>{title}</CardTitle>
+          <CardDescription className={textColor}>{description}</CardDescription>
+        </View>
+      </CardContent>
+    </Card>
+  );
+}
+
+export default Alert;

pages/send/ConfirmPayment.tsx

@@ -3,17 +3,12 @@ import { Invoice } from "@getalby/lightning-tools";
 import { Link, router, useLocalSearchParams } from "expo-router";
 import React from "react";
 import { Pressable, View } from "react-native";
-import { TriangleAlert, ZapIcon } from "~/components/Icons";
+import Alert from "~/components/Alert";
+import { AlertCircle, ZapIcon } from "~/components/Icons";
 import Loading from "~/components/Loading";
 import { Receiver } from "~/components/Receiver";
 import Screen from "~/components/Screen";
 import { Button } from "~/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardTitle,
-} from "~/components/ui/card";
 import { Text } from "~/components/ui/text";
 import { useGetFiatAmount } from "~/hooks/useGetFiatAmount";
 import { useTransactions } from "~/hooks/useTransactions";
@@ -116,23 +111,17 @@ export function ConfirmPayment() {
         <Receiver originalText={originalText} invoice={invoice} />
       </View>
       <View className="p-6">
-        {transactions?.transactions.some(
+        {!transactions?.transactions.some(
           (transaction) => transaction.state === "pending",
         ) && (
-          <Link href="/transactions" className="mb-6" asChild>
+          <Link href="/transactions" asChild>
             <Pressable>
-              <Card className="w-full">
-                <CardContent className="flex flex-row items-center gap-4">
-                  <TriangleAlert className="text-muted-foreground" />
-                  <View className="flex flex-1 flex-col">
-                    <CardTitle>One or more pending payments</CardTitle>
-                    <CardDescription>
-                      Please check your transaction list before paying to ensure
-                      you do not make a payment twice.
-                    </CardDescription>
-                  </View>
-                </CardContent>
-              </Card>
+              <Alert
+                type="info"
+                title="One or more pending payments"
+                description="Please check your transaction list before paying to ensure you do not make a payment twice."
+                icon={AlertCircle}
+              />
             </Pressable>
           </Link>
         )}

pages/settings/Security.tsx

@@ -1,14 +1,9 @@
 import React from "react";
 import { Text, View } from "react-native";
-import { TriangleAlert } from "~/components/Icons";
+import Alert from "~/components/Alert";
+import { AlertCircle } from "~/components/Icons";
 import Loading from "~/components/Loading";
 import Screen from "~/components/Screen";
-import {
-  Card,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "~/components/ui/card";
 import { Label } from "~/components/ui/label";
 import { Switch } from "~/components/ui/switch";
 import { isBiometricSupported } from "~/lib/isBiometricSupported";
@@ -36,19 +31,14 @@ export function Security() {
         </View>
       ) : (
         <>
-          {!isSupported && (
-            <Card className="mb-6">
-              <CardHeader>
-                <CardTitle className="flex flex-row gap-3 items-center">
-                  <TriangleAlert size={16} className="text-foreground" />
-                  <Text> Setup Device Security</Text>
-                </CardTitle>
-                <CardDescription>
-                  To protect your wallet, please set up a phone lock in your
-                  device settings first.
-                </CardDescription>
-              </CardHeader>
-            </Card>
+          {isSupported && (
+            <Alert
+              type="info"
+              title="Setup Device Security"
+              description="To protect your wallet, please set up a phone lock in your
+                  device settings first."
+              icon={AlertCircle}
+            />
           )}
           <View className="flex-1">
             <View className="flex-row items-center justify-between gap-2">

pages/settings/wallets/EditWallet.tsx

@@ -1,8 +1,9 @@
 import { Link, router } from "expo-router";
-import { Alert, Pressable, View } from "react-native";
+import { Pressable, Alert as RNAlert, View } from "react-native";
 import Toast from "react-native-toast-message";
 
 import * as Clipboard from "expo-clipboard";
+import Alert from "~/components/Alert";
 import {
   ArchiveRestore,
   Trash2,
@@ -27,25 +28,22 @@ export function EditWallet() {
     <View className="flex-1 flex flex-col p-4 gap-4">
       <Screen title="Edit Wallet" />
       {/* 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>
+      {!REQUIRED_CAPABILITIES.every((capability) =>
+        (wallets[selectedWalletId].nwcCapabilities || []).includes(capability),
+      ) && (
+        <Alert
+          type="warn"
+          title="This wallet might not work as expected"
+          description={`Missing capabilities: ${REQUIRED_CAPABILITIES.filter(
+            (capability) =>
+              !(wallets[selectedWalletId].nwcCapabilities || []).includes(
+                capability,
+              ),
+          ).join(", ")}`}
+          icon={TriangleAlert}
+          className="mb-0"
+        />
+      )}
       <Link href={`/settings/wallets/${selectedWalletId}/name`} asChild>
         <Pressable>
           <Card className="w-full">
@@ -81,7 +79,7 @@ export function EditWallet() {
       </Link>
       <Pressable
         onPress={() => {
-          Alert.alert(
+          RNAlert.alert(
             "Export Wallet",
             "Your Wallet Connection Secret will be copied to the clipboard which you can add to another app. For per-app permission management, try out Alby Hub or add your Wallet Connection Secret to an Alby Account.",
             [
@@ -125,7 +123,7 @@ export function EditWallet() {
       </Pressable>
       <Pressable
         onPress={() => {
-          Alert.alert(
+          RNAlert.alert(
             "Delete Wallet",
             "Are you sure you want to delete your wallet? This cannot be undone.",
             [

pages/settings/wallets/SetupWallet.tsx

@@ -6,6 +6,7 @@ import { useAppStore } from "lib/state/appStore";
 import React from "react";
 import { Pressable, TouchableOpacity, View } from "react-native";
 import Toast from "react-native-toast-message";
+import Alert from "~/components/Alert";
 import DismissableKeyboardView from "~/components/DismissableKeyboardView";
 import {
   ClipboardPaste,
@@ -17,12 +18,6 @@ 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,
@@ -248,22 +243,14 @@ export function SetupWallet() {
               !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>
+                <Alert
+                  type="warn"
+                  title="Alby Go might not work as expected"
+                  description={`Missing capabilities: ${REQUIRED_CAPABILITIES.filter(
+                    (capability) => !capabilities.includes(capability),
+                  ).join(", ")}`}
+                  icon={TriangleAlert}
+                />
               )}
             <Button size="lg" onPress={addWallet} disabled={!name}>
               <Text>Finish</Text>

pages/withdraw/Withdraw.tsx

@@ -5,17 +5,11 @@ import React, { useEffect } from "react";
 import { View } from "react-native";
 import DismissableKeyboardView from "~/components/DismissableKeyboardView";
 import { DualCurrencyInput } from "~/components/DualCurrencyInput";
-import { AlertCircle, ClipboardPaste } from "~/components/Icons";
+import { ClipboardPaste } 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 { Text } from "~/components/ui/text";
 import { useGetFiatAmount } from "~/hooks/useGetFiatAmount";
 import { errorToast } from "~/lib/errorToast";
@@ -261,29 +255,6 @@ export function Withdraw() {
                   </View>
                 )}
                 <View className="p-6">
-                  {lnurlDetails.minWithdrawable !==
-                    lnurlDetails.maxWithdrawable && (
-                    <Card className="mb-4">
-                      <CardContent className="flex flex-row items-center gap-4">
-                        <AlertCircle className="text-muted-foreground" />
-                        <View className="flex flex-1 flex-col">
-                          <CardTitle>Withdraw Limit</CardTitle>
-                          <CardDescription>
-                            Enter an amount between{" "}
-                            <Text className="font-bold2 text-sm">
-                              {Math.floor(lnurlDetails.minWithdrawable / 1000)}{" "}
-                              sats
-                            </Text>{" "}
-                            and{" "}
-                            <Text className="font-bold2 text-sm">
-                              {Math.floor(lnurlDetails.maxWithdrawable / 1000)}{" "}
-                              sats
-                            </Text>
-                          </CardDescription>
-                        </View>
-                      </CardContent>
-                    </Card>
-                  )}
                   <Button
                     size="lg"
                     className="flex flex-row gap-2"