make tiny chart & update footer

components/Footer.tsx

@@ -1,4 +1,10 @@
-import { FaDiscord, FaTwitter, FaMediumM, FaRedditAlien } from "react-icons/fa";
+import {
+  FaDiscord,
+  FaTwitter,
+  FaMediumM,
+  FaRedditAlien,
+  FaGithub,
+} from "react-icons/fa";
 import { SiTelegram } from "react-icons/si";
 import Link from "next/link";
 
@@ -8,19 +14,40 @@ const Footer = () => {
       <div className="flex flex-col sm:flex-row sm:items-center">
         <span className="opacity-100">Adamant.fi ©2024</span>
         <span className="mx-4 opacity-50">–</span>
-        <Link href="/privacy-policy" className="hover:underline opacity-50">
+        <Link
+          href="/privacy-policy"
+          className="hover:underline opacity-50 hover:opacity-75 transition-all"
+        >
           Privacy policy
         </Link>
-        <Link href="/contact" className="ml-4 hover:underline opacity-50">
+        <Link
+          href="/contact"
+          className="ml-4 hover:underline opacity-50 hover:opacity-75 transition-all"
+        >
           Contact
         </Link>
       </div>
-      <div className="flex opacity-50">
-        <Link href="https://discord.gg/knnDMcJ3Xe" className="mr-4">
+      <div className="flex gap-4">
+        {/* discord */}
+        <Link
+          href="https://discord.gg/knnDMcJ3Xe"
+          className="opacity-50 hover:opacity-75 transition-all duration-150 pb-0.5"
+        >
           <FaDiscord size={24} />
         </Link>
-        <Link href="https://twitter.com/secret_swap" className="mr-4">
-          <FaTwitter size={24} />
+        {/* twitter */}
+        <Link
+          href="https://twitter.com/secret_swap"
+          className="opacity-50 hover:opacity-75 transition-all duration-150"
+        >
+          <FaTwitter size={23} />
+        </Link>
+        {/* github */}
+        <Link
+          href="https://github.com/dredshep/AdamantFiSite"
+          className="opacity-50 hover:opacity-75 transition-all duration-150 pt-px"
+        >
+          <FaGithub size={21} />
         </Link>
       </div>
     </footer>

components/app/atoms/TinyVegaChart/index.tsx

@@ -0,0 +1,38 @@
+import React, { useEffect, useState, useRef } from "react";
+import { VegaLite, VisualizationSpec } from "react-vega";
+import { useResizeObserver } from "@/hooks/useResizeObserver";
+import { getTinyChartData } from "@/utils/apis/getTinyChartData";
+import { TinyVegaChartProps } from "@/types/charts";
+import { determineTrend, createSpec } from "@/utils/charts";
+
+const TinyVegaChart: React.FC<TinyVegaChartProps> = ({ tokenAddress }) => {
+  const [spec, setSpec] = useState<VisualizationSpec>({});
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useResizeObserver(containerRef, ([entry]) =>
+    updateSpecWidth(entry.contentRect.width)
+  );
+
+  useEffect(() => {
+    const fetchDataAndUpdateSpec = async () => {
+      const values = await getTinyChartData(tokenAddress);
+      const trend = determineTrend(values);
+      const newSpec = createSpec(values, trend);
+      setSpec(newSpec);
+    };
+
+    fetchDataAndUpdateSpec();
+  }, [tokenAddress]);
+
+  const updateSpecWidth = (width: number) => {
+    setSpec((currentSpec) => ({ ...currentSpec, width }));
+  };
+
+  return (
+    <div ref={containerRef} style={{ width: "100%", height: "30px" }}>
+      <VegaLite spec={spec} actions={false} />
+    </div>
+  );
+};
+
+export default TinyVegaChart;

components/app/organisms/FinancialTable/FinancialDataRow.tsx

@@ -25,8 +25,7 @@ const FinancialDataRow: React.FC<FinancialDataRowProps> = ({ cells }) => {
             "flex-1",
             { "text-green-500": cell.modifier === "positive" },
             { "text-red-500": cell.modifier === "negative" },
-            { "font-bold": cell.bold },
-            { "rounded-b-[10px]": index === cells.length - 1 }
+            { "font-bold": cell.bold }
           )}
           style={{ minWidth: cell.minWidth }}
         >

components/app/organisms/FinancialTable/TableHeaders.tsx

@@ -7,7 +7,7 @@ interface TableHeaderProps {
 
 const TableHeaders: React.FC<TableHeaderProps> = ({ headers }) => {
   return (
-    <div className="flex text-xs text-gray-500 uppercase bg-adamant-app-box dark:bg-gray-700 dark:text-gray-400 py-3 px-6">
+    <div className="flex text-xs text-gray-500 uppercase bg-adamant-app-box dark:bg-gray-700 dark:text-gray-400 py-3 px-6 rounded-t-[10px]">
       {headers.map((header, index) => (
         <div
           key={index}

hooks/useResizeObserver.tsx

@@ -0,0 +1,18 @@
+import { useEffect } from "react";
+
+export const useResizeObserver = (
+  ref: React.RefObject<Element>,
+  callback: ResizeObserverCallback
+) => {
+  useEffect(() => {
+    const observer = new ResizeObserver(callback);
+
+    if (ref.current) {
+      observer.observe(ref.current);
+    }
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [ref, callback]);
+};

pages/app/tokens/index.tsx

@@ -39,7 +39,7 @@ export default function TokensPage() {
         {tokens.map((token, index) => (
           <Link
             key={index}
-            className="flex items-center bg-adamant-box-dark hover:brightness-125 select-none py-4 px-6"
+            className="flex items-center bg-adamant-box-dark hover:brightness-125 select-none py-4 px-6 rounded-b-[10px]"
             href={`/app/token/${token.userAddress}`}
           >
             <FinancialDataRow

types/charts/index.ts

@@ -0,0 +1,8 @@
+export interface ChartValue {
+  time: number;
+  value: number;
+}
+
+export interface TinyVegaChartProps {
+  tokenAddress: string;
+}

utils/apis/getTinyChartData.ts

@@ -0,0 +1,38 @@
+interface ChartValue {
+  time: number;
+  value: number;
+}
+
+// Mock function to simulate fetching chart data based on a token address
+export const getTinyChartData = async (
+  tokenAddress: string
+): Promise<ChartValue[]> => {
+  // Define mock data for different tokens
+  const data: Record<string, ChartValue[]> = {
+    secret1k0jntykt7e4g3y88ltc60czgjuqdy4c9e8fzek: [
+      // Slight upward trend
+      { time: 1, value: 50 },
+      { time: 2, value: 52 },
+      { time: 3, value: 51 },
+      { time: 4, value: 53 },
+    ],
+    secret15l9cqgz5uezgydrglaak5ahfac69kmx2qpd6xt: [
+      // Slight downward trend
+      { time: 1, value: 50 },
+      { time: 2, value: 49 },
+      { time: 3, value: 50 },
+      { time: 4, value: 48 },
+    ],
+    secret1yxwnyk8htvvq25x2z87yj0r5tqpev452fk6h5h: [
+      // Dramatic changes
+      { time: 1, value: 50 },
+      { time: 2, value: 60 },
+      { time: 3, value: 40 },
+      { time: 4, value: 65 },
+    ],
+  };
+
+  // Simulate fetching data by returning the mock data for the requested token address
+  // If the token address is not found, return an empty array
+  return data[tokenAddress] || [];
+};

utils/charts/createSpec.ts

@@ -0,0 +1,29 @@
+import { ChartValue } from "@/types/charts";
+import { VisualizationSpec } from "react-vega";
+
+export const createSpec = (
+  values: ChartValue[],
+  trend: "growing" | "ungrowing"
+): VisualizationSpec => {
+  const color = trend === "growing" ? "green" : "red";
+
+  return {
+    $schema: "https://vega.github.io/schema/vega-lite/v5.json",
+    width: 65,
+    height: 30,
+    background: "transparent",
+    data: { values },
+    mark: {
+      type: "line",
+      strokeWidth: 3,
+      color,
+    },
+    encoding: {
+      x: { field: "time", type: "quantitative", axis: null },
+      y: { field: "value", type: "quantitative", axis: null },
+    },
+    config: {
+      view: { stroke: "none" },
+    },
+  };
+};

utils/charts/determineTrend.ts

@@ -0,0 +1,9 @@
+import { ChartValue } from "@/types/charts";
+
+export const determineTrend = (
+  values: ChartValue[]
+): "growing" | "ungrowing" => {
+  return values[values.length - 1].value > values[0].value
+    ? "growing"
+    : "ungrowing";
+};

utils/charts/index.ts

@@ -0,0 +1,2 @@
+export * from "@/utils/charts/determineTrend";
+export * from "@/utils/charts/createSpec";