Feat/pull from rolex validate order

client/src/components/Loader.jsx

@@ -0,0 +1,43 @@
+import styled, { keyframes } from 'styled-components';
+
+const FullPageBackdrop = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(
+    0,
+    0,
+    0,
+    0.5
+  ); // Semi-transparent backdrop
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 999; // High z-index to ensure it's on top
+`;
+
+const spin = keyframes`
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+`;
+
+const CircularLoader = styled.div`
+  border: 5px solid #f3f3f3; // Light grey border
+  border-top: 5px solid #3498db; // Blue color
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  animation: ${spin} 2s linear infinite;
+`;
+
+const Loader = () => {
+  return (
+    <FullPageBackdrop>
+      <CircularLoader />
+    </FullPageBackdrop>
+  );
+};
+
+export default Loader;

client/src/components/Table.jsx

@@ -41,7 +41,11 @@ const Row = styled.div`
   width: 100%;
   &:nth-child(even) {
     background: #ffffff;
+    background: ${(props) =>
+      props.orderMismatch === true && 'pink'};
   }
+  background: ${(props) =>
+    props.orderMismatch === true && 'pink'};
 `;
 
 const HeaderRow = styled(Row)`
@@ -103,9 +107,12 @@ const Table = ({ headers, entries }) => {
           );
         })}
       </HeaderRow>
-      {entries.map((tx) => {
+      {entries.map((tx, index) => {
         return (
-          <Row key={cuid()}>
+          <Row
+            key={cuid()}
+            orderMismatch={tx.orderMismatch}
+          >
             {headers.map((header) => {
               return (
                 <CellWrapper key={cuid()}>

client/src/contexts/TxsContext.jsx

@@ -11,8 +11,8 @@ export const TxsContext = createContext({
   handleTxs: () => {},
 });
 
-export const useTxs = () => useContext(TxsContext);
 const data = useData();
+export const useTxs = () => useContext(TxsContext);
 
 export const TxsProvider = ({ children }) => {
   const [txs, setTxs] = useState(data);