diff --git a/components/Alert.tsx b/components/Alert.tsx new file mode 100644 index 0000000..53294bd --- /dev/null +++ b/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 ( + + + + + {title} + {description} + + + + ); +} + +export default Alert; diff --git a/pages/send/ConfirmPayment.tsx b/pages/send/ConfirmPayment.tsx index 808e62d..7a26855 100644 --- a/pages/send/ConfirmPayment.tsx +++ b/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() { - {transactions?.transactions.some( + {!transactions?.transactions.some( (transaction) => transaction.state === "pending", ) && ( - + - - - - - One or more pending payments - - Please check your transaction list before paying to ensure - you do not make a payment twice. - - - - + )} diff --git a/pages/settings/Security.tsx b/pages/settings/Security.tsx index 593d0fa..9eb030e 100644 --- a/pages/settings/Security.tsx +++ b/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() { ) : ( <> - {!isSupported && ( - - - - - Setup Device Security - - - To protect your wallet, please set up a phone lock in your - device settings first. - - - + {isSupported && ( + )} diff --git a/pages/settings/wallets/EditWallet.tsx b/pages/settings/wallets/EditWallet.tsx index a70a2b1..40b3d56 100644 --- a/pages/settings/wallets/EditWallet.tsx +++ b/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() { {/* TODO: Do not allow notifications to be toggled without notifications capability */} - - - - - - This wallet might not work as expected - - - Missing capabilities:  - {REQUIRED_CAPABILITIES.filter( - (capability) => - !(wallets[selectedWalletId].nwcCapabilities || []).includes( - capability, - ), - ).join(", ")} - - - - + {!REQUIRED_CAPABILITIES.every((capability) => + (wallets[selectedWalletId].nwcCapabilities || []).includes(capability), + ) && ( + + !(wallets[selectedWalletId].nwcCapabilities || []).includes( + capability, + ), + ).join(", ")}`} + icon={TriangleAlert} + className="mb-0" + /> + )} @@ -81,7 +79,7 @@ export function EditWallet() { { - 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() { { - Alert.alert( + RNAlert.alert( "Delete Wallet", "Are you sure you want to delete your wallet? This cannot be undone.", [ diff --git a/pages/settings/wallets/SetupWallet.tsx b/pages/settings/wallets/SetupWallet.tsx index 047c055..9af50f5 100644 --- a/pages/settings/wallets/SetupWallet.tsx +++ b/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), ) && ( - - - - - - Alby Go might not work as expected - - - Missing capabilities:  - {REQUIRED_CAPABILITIES.filter( - (capability) => !capabilities.includes(capability), - ).join(", ")} - - - - + !capabilities.includes(capability), + ).join(", ")}`} + icon={TriangleAlert} + /> )}