Merge branch 'master' into task-show-name

components/Alert.tsx

@@ -0,0 +1,50 @@
+import { View } from "react-native";
+import { SvgProps } from "react-native-svg";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardTitle,
+} from "~/components/ui/card";
+import { cn } from "~/lib/utils";
+
+type Props = {
+  type: "error" | "warn" | "info";
+  icon: React.FunctionComponent<SvgProps>;
+  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} width={24} height={24} />
+        <View className="flex flex-1 flex-col">
+          <CardTitle className={textColor}>{title}</CardTitle>
+          <CardDescription className={textColor}>{description}</CardDescription>
+        </View>
+      </CardContent>
+    </Card>
+  );
+}
+
+export default Alert;

components/DualCurrencyInput.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { StyleSheet, TouchableOpacity, View } from "react-native";
+import { SwapIcon } from "~/components/Icons";
 import { useGetFiatAmount, useGetSatsAmount } from "~/hooks/useGetFiatAmount";
 import {
   CURSOR_COLOR,
@@ -9,7 +10,6 @@ import {
 } from "~/lib/constants";
 import { useAppStore } from "~/lib/state/appStore";
 import { cn } from "~/lib/utils";
-import { RefreshCw } from "./Icons";
 import { Input } from "./ui/input";
 import { Text } from "./ui/text";
 
@@ -88,7 +88,7 @@ export function DualCurrencyInput({
           <Text className="font-semibold2 text-2xl text-muted-foreground">
             {inputMode === "fiat" ? fiatCurrency : "sats"}
           </Text>
-          <RefreshCw className="text-muted-foreground" width={16} height={16} />
+          <SwapIcon className="text-muted-foreground" width={16} height={16} />
         </View>
       </TouchableOpacity>
       {

components/Icons.tsx

@@ -1,51 +1,38 @@
 import {
-  AlertCircle,
-  ArchiveRestore,
-  ArrowDown,
-  ArrowLeftRight,
-  Bitcoin,
-  BookUser,
-  Camera,
-  CameraOff,
-  CheckCircle,
-  ChevronDown,
-  ChevronUp,
-  CircleCheck,
-  ClipboardPaste,
-  Cog,
-  Copy,
-  Currency,
-  Egg,
-  Fingerprint,
-  HelpCircle,
-  Hotel,
-  Keyboard,
-  LogOut,
-  LucideIcon,
-  Menu,
-  MoveDown,
-  MoveDownLeft,
-  MoveDownRight,
-  MoveUp,
-  MoveUpRight,
-  Palette,
-  PlusCircle,
-  Power,
-  RefreshCw,
-  Settings2,
-  Share2,
-  Trash2,
-  TriangleAlert,
-  UserCircle2,
-  Wallet2,
-  WalletIcon,
-  X,
-  XCircle,
-  ZapIcon,
-} from "lucide-react-native";
+  PopiconsCircleExclamationLine as AlertCircleIcon,
+  PopiconsBitcoinSolid as BitcoinIcon,
+  PopiconsAddressBookSolid as BookUserIcon,
+  PopiconsCameraWebOffSolid as CameraOffIcon,
+  PopiconsCircleCheckLine as CheckCircleIcon,
+  PopiconsChevronTopLine as ChevronUpIcon,
+  PopiconsCopySolid as CopyIcon,
+  PopiconsEditSolid as EditIcon,
+  PopiconsUploadSolid as ExportIcon,
+  PopiconsTouchIdSolid as FingerprintIcon,
+  PopiconsCircleInfoLine as HelpCircleIcon,
+  PopiconsArrowDownLine as MoveDownIcon,
+  PopiconsArrowUpLine as MoveUpIcon,
+  PopiconsLifebuoySolid as OnboardingIcon,
+  PopiconsClipboardTextSolid as PasteIcon,
+  PopiconsReloadLine as RefreshIcon,
+  PopiconsReloadSolid as ResetIcon,
+  PopiconsSettingsMinimalLine as SettingsIcon,
+  PopiconsShareSolid as ShareIcon,
+  PopiconsLogoutSolid as SignOutIcon,
+  PopiconsLoopSolid as SwapIcon,
+  PopiconsPaintSolid as ThemeIcon,
+  PopiconsBinSolid as TrashIcon,
+  PopiconsTriangleExclamationLine as TriangleAlertIcon,
+  PopiconsWalletHorizontalOpenSolid as WalletIcon,
+  PopiconsDownloadSolid as WithdrawIcon,
+  PopiconsCircleXLine as XCircleIcon,
+  PopiconsXSolid as XIcon,
+  PopiconsBoltSolid as ZapIcon,
+} from "@popicons/react-native";
 import { cssInterop } from "nativewind";
+import { SvgProps } from "react-native-svg";
 
-function interopIcon(icon: LucideIcon) {
+function interopIcon(icon: React.FunctionComponent<SvgProps>) {
   cssInterop(icon, {
     className: {
       target: "style",
@@ -57,90 +44,64 @@ function interopIcon(icon: LucideIcon) {
   });
 }
 
-interopIcon(AlertCircle);
-interopIcon(ArrowDown);
-interopIcon(CheckCircle);
-interopIcon(Bitcoin);
-interopIcon(XCircle);
-interopIcon(MoveUp);
-interopIcon(MoveDown);
-interopIcon(ChevronDown);
-interopIcon(ChevronUp);
-interopIcon(MoveDownRight);
-interopIcon(MoveUpRight);
-interopIcon(MoveDownLeft);
-interopIcon(Camera);
-interopIcon(Menu);
-interopIcon(ZapIcon);
+interopIcon(AlertCircleIcon);
+interopIcon(BitcoinIcon);
+interopIcon(BookUserIcon);
+interopIcon(CameraOffIcon);
+interopIcon(CheckCircleIcon);
+interopIcon(ChevronUpIcon);
+interopIcon(CopyIcon);
+interopIcon(EditIcon);
+interopIcon(ExportIcon);
+interopIcon(FingerprintIcon);
+interopIcon(HelpCircleIcon);
+interopIcon(MoveDownIcon);
+interopIcon(MoveUpIcon);
+interopIcon(OnboardingIcon);
+interopIcon(PasteIcon);
+interopIcon(RefreshIcon);
+interopIcon(ResetIcon);
+interopIcon(SettingsIcon);
+interopIcon(ShareIcon);
+interopIcon(SignOutIcon);
+interopIcon(SwapIcon);
+interopIcon(ThemeIcon);
+interopIcon(TrashIcon);
+interopIcon(TriangleAlertIcon);
 interopIcon(WalletIcon);
-interopIcon(Copy);
-interopIcon(Currency);
-interopIcon(Settings2);
-interopIcon(ArrowLeftRight);
-interopIcon(PlusCircle);
-interopIcon(Cog);
-interopIcon(ClipboardPaste);
-interopIcon(Keyboard);
-interopIcon(BookUser);
-interopIcon(Wallet2);
-interopIcon(Share2);
-interopIcon(RefreshCw);
-interopIcon(X);
-interopIcon(Hotel);
-interopIcon(Power);
-interopIcon(CameraOff);
-interopIcon(Palette);
-interopIcon(Egg);
-interopIcon(Fingerprint);
-interopIcon(HelpCircle);
-interopIcon(CircleCheck);
-interopIcon(TriangleAlert);
-interopIcon(LogOut);
-interopIcon(ArchiveRestore);
-interopIcon(UserCircle2);
-interopIcon(Trash2);
+interopIcon(WithdrawIcon);
+interopIcon(XCircleIcon);
+interopIcon(XIcon);
+interopIcon(ZapIcon);
 
 export {
-  AlertCircle,
-  ArchiveRestore,
-  ArrowDown,
-  ArrowLeftRight,
-  Bitcoin,
-  BookUser,
-  Camera,
-  CameraOff,
-  CheckCircle,
-  ChevronDown,
-  ChevronUp,
-  CircleCheck,
-  ClipboardPaste,
-  Cog,
-  Copy,
-  Currency,
-  Egg,
-  Fingerprint,
-  HelpCircle,
-  Hotel,
-  Keyboard,
-  LogOut,
-  Menu,
-  MoveDown,
-  MoveDownLeft,
-  MoveDownRight,
-  MoveUp,
-  MoveUpRight,
-  Palette,
-  PlusCircle,
-  Power,
-  RefreshCw,
-  Settings2,
-  Share2,
-  Trash2,
-  TriangleAlert,
-  UserCircle2,
-  Wallet2,
+  AlertCircleIcon,
+  BitcoinIcon,
+  BookUserIcon,
+  CameraOffIcon,
+  CheckCircleIcon,
+  ChevronUpIcon,
+  CopyIcon,
+  EditIcon,
+  ExportIcon,
+  FingerprintIcon,
+  HelpCircleIcon,
+  MoveDownIcon,
+  MoveUpIcon,
+  OnboardingIcon,
+  PasteIcon,
+  RefreshIcon,
+  ResetIcon,
+  SettingsIcon,
+  ShareIcon,
+  SignOutIcon,
+  SwapIcon,
+  ThemeIcon,
+  TrashIcon,
+  TriangleAlertIcon,
   WalletIcon,
-  X,
-  XCircle,
+  WithdrawIcon,
+  XCircleIcon,
+  XIcon,
   ZapIcon,
 };

components/QRCodeScanner.tsx

@@ -2,12 +2,19 @@ import { useIsFocused } from "@react-navigation/native";
 import { Camera } from "expo-camera";
 import { PermissionStatus } from "expo-modules-core/src/PermissionsInterface";
 import React, { useEffect } from "react";
-import { View } from "react-native";
+import { StyleSheet, View } from "react-native";
+import { CameraOffIcon } from "~/components/Icons";
 import { Text } from "~/components/ui/text";
 import { FocusableCamera } from "./FocusableCamera";
-import { CameraOff } from "./Icons";
 import Loading from "./Loading";
 
+const styles = StyleSheet.create({
+  icon: {
+    width: 64,
+    height: 64,
+  },
+});
+
 interface QRCodeScannerProps {
   onScanned: (data: string) => void;
   startScanning: boolean;
@@ -63,7 +70,7 @@ function QRCodeScanner({
         <>
           {!isScanning && permissionStatus === PermissionStatus.DENIED && (
             <View className="flex-1 h-full flex flex-col items-center justify-center gap-2 p-6">
-              <CameraOff className="text-foreground" size={64} />
+              <CameraOffIcon className="text-foreground" style={styles.icon} />
               <Text className="text-2xl text-foreground text-center">
                 Camera Permission Denied
               </Text>

components/ToastConfig.tsx

@@ -1,15 +1,15 @@
 import { Link } from "expo-router";
 import { View } from "react-native";
 import { ToastConfig } from "react-native-toast-message";
-import { CircleCheck, XCircle } from "./Icons";
+import { CheckCircleIcon, XCircleIcon } from "~/components/Icons";
 import { Button } from "./ui/button";
 import { Text } from "./ui/text";
 
 export const toastConfig: ToastConfig = {
   success: ({ text1, text2 }) => (
     <View className="bg-foreground rounded-xl px-6 py-3 mx-6">
       <View className="flex flex-row gap-2 justify-center items-center">
-        <CircleCheck className="text-background" width={16} height={16} />
+        <CheckCircleIcon className="text-background" width={16} height={16} />
         <Text className="text-background font-semibold2">{text1}</Text>
       </View>
       {text2 && <Text className="text-background text-center">{text2}</Text>}
@@ -18,7 +18,7 @@ export const toastConfig: ToastConfig = {
   info: ({ text1, text2, hide }) => (
     <View className="bg-yellow-500 rounded-full px-6 py-3 mx-6">
       <View className="flex flex-row gap-2 justify-center items-center">
-        <XCircle className="text-background" width={16} height={16} />
+        <XCircleIcon className="text-background" width={16} height={16} />
         <Text className="text-background font-semibold2">{text1}</Text>
       </View>
       {text2 && <Text className="text-background text-center">{text2}</Text>}
@@ -27,7 +27,7 @@ export const toastConfig: ToastConfig = {
   error: ({ text1, text2, hide }) => (
     <View className="bg-destructive rounded-xl px-6 py-3 mx-6">
       <View className="flex flex-row gap-2 justify-center items-center">
-        <XCircle className="text-background" width={16} height={16} />
+        <XCircleIcon className="text-background" width={16} height={16} />
         <Text className="text-background font-semibold2">{text1}</Text>
       </View>
       {text2 && <Text className="text-background text-center">{text2}</Text>}
@@ -37,7 +37,7 @@ export const toastConfig: ToastConfig = {
     return (
       <View className="bg-foreground rounded-xl px-6 py-3 mx-6 flex flex-col gap-2">
         <View className="flex flex-row gap-2 justify-center items-center">
-          <XCircle className="text-background" width={16} height={16} />
+          <XCircleIcon className="text-background" width={16} height={16} />
           <Text className="text-background font-semibold2">{text1}</Text>
         </View>
         <Link href={`/settings/wallets`} asChild>

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}
   />
 ));