Merge pull request #237 from getAlby/task-pending

chore: add pending icon
getAlby · Dec 27, 2024 · 68d8f1b · 68d8f1b
2 parents 6cbd623 + 71215a6
commit 68d8f1b
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 2 deletions.
diff --git a/components/icons/PendingTransaction.tsx b/components/icons/PendingTransaction.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+import { useColorScheme } from "react-native";
+import Svg, { Path, Rect, SvgProps } from "react-native-svg";
+
+const PendingTransactionIcon = (props: SvgProps) => {
+  const colorScheme = useColorScheme();
+
+  const colors = {
+    light: {
+      rectFill: "#DAE9FD",
+      pathStroke: "#3B81F5",
+    },
+    dark: {
+      rectFill: "#1E3A89",
+      pathStroke: "#3B81F5",
+    },
+  };
+
+  const currentColors = colorScheme === "dark" ? colors.dark : colors.light;
+
+  return (
+    <Svg width={40} height={40} viewBox="0 0 40 40" fill="none" {...props}>
+      <Rect width="40" height="40" rx="20" fill={currentColors.rectFill} />
+      <Path
+        strokeWidth="3.75"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        stroke={currentColors.pathStroke}
+        d="M15 18.125L19.4107 13.7143C19.7362 13.3889 20.2638 13.3889 20.5892 13.7143L25 18.125M20 14.1667V26.6667"
+      />
+    </Svg>
+  );
+};
+
+export default PendingTransactionIcon;
diff --git a/pages/Transaction.tsx b/pages/Transaction.tsx
@@ -7,6 +7,7 @@ import React from "react";
 import { ScrollView, TouchableOpacity, View } from "react-native";
 import Toast from "react-native-toast-message";
 import FailedTransactionIcon from "~/components/icons/FailedTransaction";
+import PendingTransactionIcon from "~/components/icons/PendingTransaction";
 import ReceivedTransactionIcon from "~/components/icons/ReceivedTransaction";
 import SentTransactionIcon from "~/components/icons/SentTransaction";
 import Screen from "~/components/Screen";
@@ -71,7 +72,9 @@ export function Transaction() {
             )}
             style={{ elevation: 2 }}
           >
-            {transaction.state !== "failed" && (
+            {!(
+              transaction.state === "failed" || transaction.state === "pending"
+            ) && (
               <>
                 {transaction.type === "incoming" && (
                   <ReceivedTransactionIcon width={128} height={128} />
@@ -81,6 +84,9 @@ export function Transaction() {
                 )}
               </>
             )}
+            {transaction.state === "pending" && (
+              <PendingTransactionIcon width={128} height={128} />
+            )}
             {transaction.state === "failed" && (
               <FailedTransactionIcon width={128} height={128} />
             )}

diff --git a/pages/Transactions.tsx b/pages/Transactions.tsx
@@ -11,6 +11,7 @@ import {
 } from "react-native";
 import { XIcon } from "~/components/Icons";
 import FailedTransactionIcon from "~/components/icons/FailedTransaction";
+import PendingTransactionIcon from "~/components/icons/PendingTransaction";
 import ReceivedTransactionIcon from "~/components/icons/ReceivedTransaction";
 import SentTransactionIcon from "~/components/icons/SentTransaction";
 import Screen from "~/components/Screen";
@@ -126,7 +127,10 @@ export function Transactions() {
                 )}
               >
                 <View className="w-10 h-10 bg-muted rounded-full flex flex-col items-center justify-center">
-                  {transaction.state !== "failed" && (
+                  {!(
+                    transaction.state === "failed" ||
+                    transaction.state === "pending"
+                  ) && (
                     <>
                       {transaction.type === "incoming" && (
                         <ReceivedTransactionIcon />
@@ -136,6 +140,9 @@ export function Transactions() {
                       )}
                     </>
                   )}
+                  {transaction.state === "pending" && (
+                    <PendingTransactionIcon />
+                  )}
                   {transaction.state === "failed" && <FailedTransactionIcon />}
                 </View>
                 <View className="flex flex-col flex-1">