feat: impl automatice price equivalent in usd

app/components/strk-to-usd.tsx

@@ -0,0 +1,63 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+"use client";
+
+import { useEffect, useState } from "react";
+import { EqualApproximately } from "lucide-react";
+
+interface STRKtoUSDTDisplayProps {
+  amount: number;
+}
+
+const COINGECKO_API =
+  "https://mainnet-api.ekubo.org/price/STRK/USDC/history?interval=60";
+
+export default function STRKtoUSDTDisplay({ amount }: STRKtoUSDTDisplayProps) {
+  const [rate, setRate] = useState<number | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchRate = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch(COINGECKO_API);
+      console.log(res);
+      if (!res.ok) throw new Error("Failed to fetch price");
+      const data = await res.json();
+      const price = data?.data[0]?.min;
+      console.log("price and data are:  and data  " + data, price)
+      if (typeof price !== "number") throw new Error("Invalid price data");
+      setRate(price);
+    } catch (err: any) {
+      setError(err.message || "Unknown error");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchRate();
+    const interval = setInterval(fetchRate, 30000);
+    return () => clearInterval(interval);
+  }, []);
+
+  let content;
+  if (loading) {
+    content = <span>...</span>;
+  } else if (error) {
+    content = <span className="text-red-400">Error</span>;
+  } else if (rate !== null) {
+    const usdt = (amount * rate).toLocaleString(undefined, {
+      maximumFractionDigits: 2,
+      minimumFractionDigits: 2,
+    });
+    content = (
+      <div className="flex items-center gap-x-1 text-xs">
+        <EqualApproximately size={12} />
+        {usdt} USD
+      </div>
+    );
+  }
+
+  return <span>{content}</span>;
+} 

app/hooks/useSubscription.ts

@@ -21,7 +21,7 @@ export function useSubscription(swapAmount: string) {
         : BigInt(0),
     ],
     ERC20_ABI,
-    STRK_TOKEN.contractAddress
+    STRK_TOKEN.contractAddress,
   );
 
   useEffect(() => {

app/hooks/useUnsubscribe.ts

@@ -15,7 +15,7 @@ export default function useUnsubscribe() {
     "approve",
     [swappr_contract_address, 0],
     ERC20_ABI,
-    strk_token_contract_address
+    strk_token_contract_address,
   );
 
   useEffect(() => {

app/overview/page.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import { createPortal } from "react-dom";
-import { EqualApproximately, LoaderCircle, Settings } from "lucide-react";
+import { LoaderCircle, Settings } from "lucide-react";
 // import type { TokenPair } from "../utils/types";
 
 import SubscribeForm from "../components/subscribe-form";
@@ -13,6 +13,7 @@ import { Modal } from "../components/modal";
 // import strk from "../../public/coin-logos/strk-logo.svg";
 import TranscationHistory from "./transcation-history";
 import ChangeAutoswapSettings from "../components/ui/modals/change-autoswap-settings";
+import STRKtoUSDTDisplay from "../components/strk-to-usd";
 
 export default function Overview() {
   // State Management
@@ -112,7 +113,7 @@ export default function Overview() {
               <p className="text-[#BABFC3] text-xs md:text-sm mb-4 text-center md:text-left">
                 Your Autoswap threshold is set to convert:
               </p>
-
+              
               <div className="bg-[#0D1016] rounded-xl w-full md:w-fit py-5 px-4 flex gap-x-8 justify-between">
                 <div className="flex gap-x-2">
                   <img
@@ -126,10 +127,7 @@ export default function Overview() {
                     </h3>
 
                     <h5 className="flex gap-x-1 items-center text-sm">
-                      <span className="text-[#7E8489]">
-                        <EqualApproximately size={12} />
-                      </span>
-                      809 USDT
+                      <STRKtoUSDTDisplay amount={3000} />
                     </h5>
                   </div>
                 </div>

app/utils/helper.ts

@@ -21,7 +21,7 @@ export function useContractFetch(
   abi: any,
   functionName: string,
   address: `0x${string}`,
-  args: any[] = []
+  args: any[] = [],
 ) {
   const { data, isLoading, refetch, isFetching, error } = useReadContract({
     abi: abi,
@@ -37,7 +37,7 @@ export function useContractWriteUtility(
   functionName: string,
   args: any[],
   abi: any,
-  contract_address: `0x${string}`
+  contract_address: `0x${string}`,
 ) {
   const { contract } = useContract({ abi, address: contract_address });
 
@@ -111,7 +111,7 @@ export async function createSubscription(data: {
           "Content-Type": "application/json",
         },
         body: JSON.stringify(data),
-      }
+      },
     );
 
     console.log(response);
@@ -140,7 +140,7 @@ export async function deleteSubscription(data: {
           "Content-Type": "application/json",
         },
         body: JSON.stringify(data),
-      }
+      },
     );
 
     console.log(response);

package.json

@@ -48,4 +48,4 @@
     "typescript": "^5"
   },
   "packageManager": "[email protected]+sha512.76e2379760a4328ec4415815bcd6628dee727af3779aaa4c914e3944156c4299921a89f976381ee107d41f12cfa4b66681ca9c718f0668fa0831ed4c6d8ba56c"
-}
+}

tailwind.config.ts

@@ -12,13 +12,13 @@ export default {
     },
     extend: {
       colors: {
-        "accent": "var(--accent)",
-        "grey": {
+        accent: "var(--accent)",
+        grey: {
           300: "var(--grey-300)",
           700: "var(--grey-700)",
           900: "var(--grey-900)",
           1100: "var(--grey-1100)",
-        }
+        },
       },
       screens: {
         sm: "576px",