From 935be868891afe3230df20f42216e2b2716a06e1 Mon Sep 17 00:00:00 2001
From: Ganeshan M <ganeshanmadesh36@outlook.com>
Date: Thu, 3 Oct 2024 21:13:48 +0530
Subject: [PATCH 1/4] feat: migrate StablecoinsTable to shadcn

---
 src/components/StablecoinsTable.tsx | 90 +++++++++++++----------------
 1 file changed, 39 insertions(+), 51 deletions(-)

diff --git a/src/components/StablecoinsTable.tsx b/src/components/StablecoinsTable.tsx
index 4522c25aed4..62f1cec52fb 100644
--- a/src/components/StablecoinsTable.tsx
+++ b/src/components/StablecoinsTable.tsx
@@ -1,17 +1,15 @@
 import { useTranslation } from "next-i18next"
+
+import { ButtonLink } from "./ui/buttons/Button"
+import { Flex } from "./ui/flex"
 import {
-  Flex,
-  Image,
   Table,
-  Tbody,
-  Td,
-  Text,
-  Th,
-  Thead,
-  Tr,
-} from "@chakra-ui/react"
-
-import { ButtonLink } from "./Buttons"
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./ui/Table"
 
 import { useRtlFlip } from "@/hooks/useRtlFlip"
 
@@ -45,68 +43,58 @@ const StablecoinsTable = ({
   }
 
   return (
-    <Table variant="unstyled" my={8} bg="background.base" mb={8} minW="720px">
-      <Thead bg="background.highlight" color="body.medium">
-        <Tr>
+    <Table className="my-8 mb-8 min-w-[720px] bg-background">
+      <TableHeader className="text-body-medium">
+        <TableRow>
           {columns.map((column, idx) => (
-            <Th
-              key={idx}
-              fontWeight="bold"
-              fontSize="md"
-              verticalAlign="inherit"
-              letterSpacing="normal"
-            >
+            <TableHead key={idx} className="p-4 text-start text-md font-bold">
               {column}
-            </Th>
+            </TableHead>
           ))}
 
           {content && content[0]?.url && (
-            <Th p={5} fontSize="md" fontWeight="normal" textAlign="end">
-              <Text as="span" display="inline-block" transform={flipForRtl}>
+            <TableHead className="border-b border-white p-5 text-right text-md font-normal">
+              <span className="inline-block" style={{ transform: flipForRtl }}>
                 ↗
-              </Text>
-            </Th>
+              </span>
+            </TableHead>
           )}
-        </Tr>
-      </Thead>
-      <Tbody>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
         {hasError && (
-          <Tr p={4}>
-            <Td colSpan={4}>{t("page-stablecoins-table-error")}</Td>
-          </Tr>
+          <TableRow className="p-4">
+            <TableCell colSpan={4}>
+              {t("page-stablecoins-table-error")}
+            </TableCell>
+          </TableRow>
         )}
 
         {content.map(({ name, marketCap, image, type, url }, idx) => (
-          <Tr
+          <TableRow
             key={idx}
-            color="text"
-            _hover={{
-              textDecoration: "none",
-              bg: "background.highlight",
-            }}
-            _focus={{
-              bg: "background.base",
-              color: "body.base",
-            }}
+            className="text focus:bg-background-base focus:text-body-base"
           >
-            <Td verticalAlign="middle">
+            <TableCell className="p-4 align-middle">
               <Flex>
-                {image && <Image src={image} alt="" me={4} boxSize={6} />}
+                {image && <img src={image} alt="" className="me-4 h-6 w-6" />}
                 <>{name}</>
               </Flex>
-            </Td>
-            <Td verticalAlign="middle">{marketCap}</Td>
-            <Td verticalAlign="middle">{stablecoinsType[type]}</Td>
+            </TableCell>
+            <TableCell className="p-4 align-middle">{marketCap}</TableCell>
+            <TableCell className="p-4 align-middle">
+              {stablecoinsType[type]}
+            </TableCell>
             {url && (
-              <Td textAlign="end">
+              <TableCell className="p-4 text-right">
                 <ButtonLink href={url} size="sm">
                   {t("page-stablecoins-go-to")} {name}
                 </ButtonLink>
-              </Td>
+              </TableCell>
             )}
-          </Tr>
+          </TableRow>
         ))}
-      </Tbody>
+      </TableBody>
     </Table>
   )
 }

From fb201850de0b696142f1557c3e25ad588cbdce73 Mon Sep 17 00:00:00 2001
From: Ganeshan M <86967803+0xgun@users.noreply.github.com>
Date: Thu, 3 Oct 2024 22:15:53 +0530
Subject: [PATCH 2/4] Update StablecoinsTable.tsx

---
 src/components/StablecoinsTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/StablecoinsTable.tsx b/src/components/StablecoinsTable.tsx
index 62f1cec52fb..20130ad31fa 100644
--- a/src/components/StablecoinsTable.tsx
+++ b/src/components/StablecoinsTable.tsx
@@ -53,7 +53,7 @@ const StablecoinsTable = ({
           ))}
 
           {content && content[0]?.url && (
-            <TableHead className="border-b border-white p-5 text-right text-md font-normal">
+            <TableHead className="p-5 text-right text-md font-normal">
               <span className="inline-block" style={{ transform: flipForRtl }}>
                 ↗
               </span>

From 69035931742a1667258be7941f51b0c60a14ef42 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Fri, 4 Oct 2024 14:03:03 +0200
Subject: [PATCH 3/4] cleanup styles

---
 src/components/StablecoinsTable.tsx | 23 ++++++++---------------
 1 file changed, 8 insertions(+), 15 deletions(-)

diff --git a/src/components/StablecoinsTable.tsx b/src/components/StablecoinsTable.tsx
index 20130ad31fa..f6287669c56 100644
--- a/src/components/StablecoinsTable.tsx
+++ b/src/components/StablecoinsTable.tsx
@@ -44,16 +44,14 @@ const StablecoinsTable = ({
 
   return (
     <Table className="my-8 mb-8 min-w-[720px] bg-background">
-      <TableHeader className="text-body-medium">
+      <TableHeader>
         <TableRow>
           {columns.map((column, idx) => (
-            <TableHead key={idx} className="p-4 text-start text-md font-bold">
-              {column}
-            </TableHead>
+            <TableHead key={idx}>{column}</TableHead>
           ))}
 
           {content && content[0]?.url && (
-            <TableHead className="p-5 text-right text-md font-normal">
+            <TableHead className="text-right font-normal">
               <span className="inline-block" style={{ transform: flipForRtl }}>
                 ↗
               </span>
@@ -71,22 +69,17 @@ const StablecoinsTable = ({
         )}
 
         {content.map(({ name, marketCap, image, type, url }, idx) => (
-          <TableRow
-            key={idx}
-            className="text focus:bg-background-base focus:text-body-base"
-          >
-            <TableCell className="p-4 align-middle">
+          <TableRow key={idx}>
+            <TableCell>
               <Flex>
                 {image && <img src={image} alt="" className="me-4 h-6 w-6" />}
                 <>{name}</>
               </Flex>
             </TableCell>
-            <TableCell className="p-4 align-middle">{marketCap}</TableCell>
-            <TableCell className="p-4 align-middle">
-              {stablecoinsType[type]}
-            </TableCell>
+            <TableCell>{marketCap}</TableCell>
+            <TableCell>{stablecoinsType[type]}</TableCell>
             {url && (
-              <TableCell className="p-4 text-right">
+              <TableCell className="text-right">
                 <ButtonLink href={url} size="sm">
                   {t("page-stablecoins-go-to")} {name}
                 </ButtonLink>

From 07ba5373deed569682248ef9ab793f11eee7045e Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Wed, 9 Oct 2024 21:45:01 +0200
Subject: [PATCH 4/4] Update src/components/StablecoinsTable.tsx

---
 src/components/StablecoinsTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/StablecoinsTable.tsx b/src/components/StablecoinsTable.tsx
index f6287669c56..883c7ac477a 100644
--- a/src/components/StablecoinsTable.tsx
+++ b/src/components/StablecoinsTable.tsx
@@ -43,7 +43,7 @@ const StablecoinsTable = ({
   }
 
   return (
-    <Table className="my-8 mb-8 min-w-[720px] bg-background">
+    <Table className="my-8 min-w-[720px] bg-background">
       <TableHeader>
         <TableRow>
           {columns.map((column, idx) => (