Updated tx store

app/bridge/bridging.tsx

@@ -14,6 +14,7 @@ import Image from "next/image";
 import Modal from "@/components/modal/modal";
 import ConfirmationModal from "./components/confirmationModal";
 import { BridgingMethod } from "@/hooks/bridge/interfaces/bridgeMethods";
+import { isEVMNetwork } from "@/utils/networks.utils";
 
 interface BridgeProps {
   hook: BridgeHookReturn;
@@ -175,11 +176,9 @@ const Bridging = (props: BridgeProps) => {
                 }
                 items={
                   props.hook.direction === "in"
-                    ? [
-                        props.hook.allOptions.networks.find(
-                          (network) => network.name.toLowerCase() === "ethereum"
-                        )!,
-                      ]
+                    ? props.hook.allOptions.networks.filter((network) =>
+                        isEVMNetwork(network)
+                      )!
                     : []
                 }
                 groupedItems={[
@@ -190,7 +189,7 @@ const Bridging = (props: BridgeProps) => {
                       id: "",
                     },
                     items: props.hook.allOptions.networks.filter(
-                      (network) => network.name.toLowerCase() !== "ethereum"
+                      (network) => !isEVMNetwork(network)
                     ),
                   },
                 ]}

app/bridge/components/confirmationModal.tsx

@@ -6,7 +6,6 @@ import Image from "next/image";
 import React, { ReactNode } from "react";
 import styles from "../bridge.module.scss";
 import PopUp from "@/components/popup/popup";
-import Icon from "@/components/icon/icon";
 
 interface Props {
   imgUrl: string;

components/icon/statusIcon.tsx

@@ -0,0 +1,29 @@
+import Icon from "./icon";
+
+interface Props {
+  status: "NONE" | "PENDING" | "SIGNING" | "SUCCESS" | "ERROR";
+  color?: "primary" | "accent" | "dark";
+  className?: string;
+  size?: number;
+}
+
+const StatusIcon = (props: Props) => {
+  return (
+    <Icon
+      icon={{
+        url:
+          props.status === "SUCCESS"
+            ? "check.svg"
+            : props.status === "ERROR"
+            ? "close.svg"
+            : props.status === "PENDING" || props.status === "SIGNING"
+            ? "loader.svg"
+            : "",
+        size: props.size,
+      }}
+      className={props.className}
+      color={props.color}
+    />
+  );
+};
+export default StatusIcon;

components/selector/selector.tsx

@@ -82,43 +82,48 @@ const Selector = (props: Props) => {
                 </Container>
               </Container>
             ))}
-            {props.groupedItems?.map((group) => (
-              <Container
-                key={group.main.name}
-                width="100%"
-                direction="row"
-                gap={20}
-                center={{
-                  vertical: true,
-                }}
-                className={styles.item}
-                onClick={() => {
-                  setIsExpanded(!isExpanded);
-                }}
-              >
-                <Image
-                  src={group.main.icon}
-                  alt={group.main.name}
-                  width={30}
-                  height={30}
-                />
-                <Text size="md" font="proto_mono">
-                  {group.main.name} {group.main.secondary}
-                </Text>
-                <div
-                  style={{
-                    transform: !isExpanded ? "rotate(-90deg)" : "rotate(0deg)",
-                  }}
-                >
-                  <Icon
-                    icon={{
-                      url: "dropdown.svg",
-                      size: 24,
+            {props.groupedItems?.map(
+              (group) =>
+                group.items.length !== 0 && (
+                  <Container
+                    key={group.main.name}
+                    width="100%"
+                    direction="row"
+                    gap={20}
+                    center={{
+                      vertical: true,
                     }}
-                  />
-                </div>
-              </Container>
-            ))}
+                    className={styles.item}
+                    onClick={() => {
+                      setIsExpanded(!isExpanded);
+                    }}
+                  >
+                    <Image
+                      src={group.main.icon}
+                      alt={group.main.name}
+                      width={30}
+                      height={30}
+                    />
+                    <Text size="md" font="proto_mono">
+                      {group.main.name} {group.main.secondary}
+                    </Text>
+                    <div
+                      style={{
+                        transform: !isExpanded
+                          ? "rotate(-90deg)"
+                          : "rotate(0deg)",
+                      }}
+                    >
+                      <Icon
+                        icon={{
+                          url: "dropdown.svg",
+                          size: 24,
+                        }}
+                      />
+                    </div>
+                  </Container>
+                )
+            )}
           </div>
 
           <Container

components/transactions/TxUnused.tsx → components/transactions/TxFlow.tsx

@@ -11,7 +11,7 @@ interface Props {
   onRetry: (txIdx: number) => void;
 }
 
-const TxUnused = (props: Props) => {
+const TxFlow = (props: Props) => {
   return (
     <div className={styles.container}>
       {props.txFlow && (
@@ -42,4 +42,4 @@ const TxUnused = (props: Props) => {
   );
 };
 
-export default TxUnused;
+export default TxFlow;

components/transactions/TxItem.tsx

@@ -1,11 +1,12 @@
 import React from "react";
 import Text from "../text";
 import styles from "./transactions.module.scss";
-import Icon from "../icon/icon";
 import Container from "../container/container";
 import Spacer from "../layout/spacer";
 import { TransactionWithStatus } from "@/config/interfaces/transactions";
 import Button from "../button/button";
+import { dateToMomentsAgo } from "@/utils/formatting.utils";
+import StatusIcon from "../icon/statusIcon";
 
 interface TxItemProps {
   tx: TransactionWithStatus;
@@ -15,31 +16,6 @@ interface TxItemProps {
 const TxItem = (props: TxItemProps) => {
   const [isRevealing, setIsRevealing] = React.useState(false);
 
-  function DateToMomentsAgo(date: Date) {
-    const seconds = Math.floor((new Date().getTime() - date.getTime()) / 1000);
-    let interval = seconds / 31536000;
-    if (interval > 1) {
-      return Math.floor(interval) + " years ago";
-    }
-    interval = seconds / 2592000;
-    if (interval > 1) {
-      return Math.floor(interval) + " months ago";
-    }
-    interval = seconds / 86400;
-    if (interval > 1) {
-      return Math.floor(interval) + " days ago";
-    }
-    interval = seconds / 3600;
-    if (interval > 1) {
-      return Math.floor(interval) + " hours ago";
-    }
-    interval = seconds / 60;
-    if (interval > 1) {
-      return Math.floor(interval) + " minutes ago";
-    }
-    return Math.floor(seconds) + " seconds ago";
-  }
-
   return (
     <div
       className={styles.txBox}
@@ -53,20 +29,7 @@ const TxItem = (props: TxItemProps) => {
             {props.idx}
           </Text>
         ) : (
-          <Icon
-            className={props.tx.status === "SIGNING" ? styles.loader : ""}
-            icon={{
-              url:
-                props.tx.status === "SUCCESS"
-                  ? "check.svg"
-                  : props.tx.status === "ERROR"
-                  ? "close.svg"
-                  : props.tx.status === "SIGNING"
-                  ? "loader.svg"
-                  : "canto.svg",
-              size: 24,
-            }}
-          />
+          <StatusIcon status={props.tx.status} size={24} />
         )}
       </div>
       <Spacer width="14px" />
@@ -112,7 +75,7 @@ const TxItem = (props: TxItemProps) => {
 
         {props.tx.timestamp && (
           <Text size="sm" theme="secondary-dark">
-            {DateToMomentsAgo(new Date(props.tx.timestamp))}
+            {dateToMomentsAgo(props.tx.timestamp)}
           </Text>
         )}
       </Container>