feat: Implement Slippage Alert System with hooks and UI components

libs/bridge-core/config.ts

@@ -0,0 +1,13 @@
+interface SlippageConfig {
+  [token: string]: number;
+}
+
+const slippageConfig: SlippageConfig = {
+  USDC: 0.5,
+  ETH: 1.0,
+  STX: 0.8,
+};
+
+export const getSlippageThreshold = (token: string): number => {
+  return slippageConfig[token] || 1.0; // Default to 1.0% if token not configured
+};

libs/bridge-core/useSlippageAlert.ts

@@ -0,0 +1,51 @@
+import { useState, useEffect } from "react";
+
+interface UseSlippageAlertProps {
+  token: string;
+  sourceChain: string;
+  destinationChain: string;
+  maxSlippagePercent: number;
+}
+
+interface UseSlippageAlertResult {
+  slippage: number;
+  threshold: number;
+  exceeded: boolean;
+  errors: string[];
+}
+
+export const useSlippageAlert = ({
+  token,
+  sourceChain,
+  destinationChain,
+  maxSlippagePercent,
+}: UseSlippageAlertProps): UseSlippageAlertResult => {
+  const [slippage, setSlippage] = useState(0);
+  const [errors, setErrors] = useState<string[]>([]);
+
+  useEffect(() => {
+    const fetchSlippage = async () => {
+      try {
+        // Simulate API call to fetch slippage data
+        const response = await fetch(
+          `/api/slippage?token=${token}&sourceChain=${sourceChain}&destinationChain=${destinationChain}`
+        );
+        const data = await response.json();
+        setSlippage(data.slippage);
+      } catch (error) {
+        setErrors((prev) => [...prev, "Failed to fetch slippage data"]);
+      }
+    };
+
+    fetchSlippage();
+  }, [token, sourceChain, destinationChain]);
+
+  const exceeded = slippage > maxSlippagePercent;
+
+  return {
+    slippage,
+    threshold: maxSlippagePercent,
+    exceeded,
+    errors,
+  };
+};

libs/ui-components/BridgeCompare.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { useSlippageAlert } from "../bridge-core/useSlippageAlert";
+
+interface BridgeCompareProps {
+  token: string;
+  sourceChain: string;
+  destinationChain: string;
+  maxSlippagePercent: number;
+}
+
+const BridgeCompare: React.FC<BridgeCompareProps> = ({
+  token,
+  sourceChain,
+  destinationChain,
+  maxSlippagePercent,
+}) => {
+  const { slippage, exceeded, threshold } = useSlippageAlert({
+    token,
+    sourceChain,
+    destinationChain,
+    maxSlippagePercent,
+  });
+
+  return (
+    <div>
+      <h2>Bridge Comparison</h2>
+      <p>Token: {token}</p>
+      <p>Source Chain: {sourceChain}</p>
+      <p>Destination Chain: {destinationChain}</p>
+      <p>Current Slippage: {slippage}%</p>
+      <p>Threshold: {threshold}%</p>
+      {exceeded && <p style={{ color: "red" }}>Warning: Slippage exceeds threshold!</p>}
+    </div>
+  );
+};
+
+export default BridgeCompare;

libs/ui-components/BridgeStatus.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { useSlippageAlert } from "../bridge-core/useSlippageAlert";
+
+interface BridgeStatusProps {
+  token: string;
+  sourceChain: string;
+  destinationChain: string;
+  maxSlippagePercent: number;
+}
+
+const BridgeStatus: React.FC<BridgeStatusProps> = ({
+  token,
+  sourceChain,
+  destinationChain,
+  maxSlippagePercent,
+}) => {
+  const { slippage, exceeded, errors } = useSlippageAlert({
+    token,
+    sourceChain,
+    destinationChain,
+    maxSlippagePercent,
+  });
+
+  return (
+    <div>
+      <h2>Bridge Status</h2>
+      <p>Current Slippage: {slippage}%</p>
+      {exceeded && (
+        <p style={{ color: "red" }}>
+          Slippage exceeds safe threshold!
+        </p>
+      )}
+      {errors.length > 0 && (
+        <ul>
+          {errors.map((error, index) => (
+            <li key={index} style={{ color: "red" }}>
+              {error}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default BridgeStatus;