fix: align transaction state handling with Hub

Author: im-adithya

pages/Transaction.tsx

@@ -64,18 +64,19 @@ export function Transaction() {
   }, [appPubkey]);
 
   const TransactionIcon = React.useMemo(() => {
-    if (transaction.state === "failed") {
-      return FailedTransactionIcon;
+    if (transaction.type === "incoming") {
+      return ReceivedTransactionIcon;
+    }
+    if (transaction.state === "settled") {
+      return SentTransactionIcon;
     }
     if (transaction.state === "pending") {
       return PendingTransactionIcon;
     }
     if (transaction.state === "accepted") {
       return AcceptedTransactionIcon;
     }
-    return transaction.type === "incoming"
-      ? ReceivedTransactionIcon
-      : SentTransactionIcon;
+    return FailedTransactionIcon;
   }, [transaction.state, transaction.type]);
 
   const boostagram = React.useMemo(() => {