diff --git a/components/icons/PendingTransaction.tsx b/components/icons/PendingTransaction.tsx
new file mode 100644
index 0000000..42cc8a1
--- /dev/null
+++ 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 (
+
+ );
+};
+
+export default PendingTransactionIcon;
diff --git a/pages/Transaction.tsx b/pages/Transaction.tsx
index ee9918e..29b6d98 100644
--- 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" && (
@@ -81,6 +84,9 @@ export function Transaction() {
)}
>
)}
+ {transaction.state === "pending" && (
+
+ )}
{transaction.state === "failed" && (
)}
diff --git a/pages/Transactions.tsx b/pages/Transactions.tsx
index a8c06c3..0f3ab2f 100644
--- 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() {
)}
>
- {transaction.state !== "failed" && (
+ {!(
+ transaction.state === "failed" ||
+ transaction.state === "pending"
+ ) && (
<>
{transaction.type === "incoming" && (
@@ -136,6 +140,9 @@ export function Transactions() {
)}
>
)}
+ {transaction.state === "pending" && (
+
+ )}
{transaction.state === "failed" && }