move to card

pradel · Oct 6, 2024 · bac53a6 · bac53a6
1 parent 7e7b6b7
commit bac53a6
Showing 1 changed file with 52 additions and 42 deletions.
diff --git a/apps/web/src/components/Token/TokenHoldersTable.tsx b/apps/web/src/components/Token/TokenHoldersTable.tsx
@@ -2,7 +2,7 @@
 
 import { useGetTokenHolders } from "@/hooks/api/useGetTokenHolders";
 import type { FtMetadataResponse } from "@hirosystems/token-metadata-api-client";
-import { Link, Table, Text } from "@radix-ui/themes";
+import { Card, Inset, Link, Separator, Table, Text } from "@radix-ui/themes";
 
 interface TokenHoldersTableProps {
   token: string;
@@ -22,47 +22,57 @@ export const TokenHoldersTable = ({
   };
 
   return (
-    <Table.Root className="mt-10">
-      <Table.Header>
-        <Table.Row>
-          <Table.ColumnHeaderCell>Rank</Table.ColumnHeaderCell>
-          <Table.ColumnHeaderCell>Address</Table.ColumnHeaderCell>
-          <Table.ColumnHeaderCell align="right">Balance</Table.ColumnHeaderCell>
-          <Table.ColumnHeaderCell align="right">
-            % of Supply
-          </Table.ColumnHeaderCell>
-        </Table.Row>
-      </Table.Header>
-
-      <Table.Body>
-        {data.results.map((holder, index) => (
-          <Table.Row key={holder.address}>
-            <Table.Cell>
-              <Text size="2">{index + 1}</Text>
-            </Table.Cell>
-            <Table.Cell>
-              <Link
-                href={`https://explorer.hiro.so/address/${holder.address}?chain=mainnet`}
-                target="_blank"
-                color="gray"
-              >
-                {holder.address}
-              </Link>
-            </Table.Cell>
-            <Table.Cell align="right">
-              <Text size="2">
-                {(
-                  Number(holder.balance) /
-                  Number(10 ** (tokenInfo.decimals ?? 0))
-                ).toLocaleString("en-US")}
-              </Text>
-            </Table.Cell>
-            <Table.Cell align="right">
-              <Text size="2">{calculatePercentage(holder.balance)}%</Text>
-            </Table.Cell>
+    <Card size="2" className="mt-5">
+      <Text as="div" size="2" weight="medium" color="gray" highContrast>
+        Holders list
+      </Text>
+      <Inset py="current" side="bottom">
+        <Separator size="4" />
+      </Inset>
+      <Table.Root>
+        <Table.Header>
+          <Table.Row>
+            <Table.ColumnHeaderCell>Rank</Table.ColumnHeaderCell>
+            <Table.ColumnHeaderCell>Address</Table.ColumnHeaderCell>
+            <Table.ColumnHeaderCell align="right">
+              Balance
+            </Table.ColumnHeaderCell>
+            <Table.ColumnHeaderCell align="right" className="whitespace-nowrap">
+              % of Supply
+            </Table.ColumnHeaderCell>
           </Table.Row>
-        ))}
-      </Table.Body>
-    </Table.Root>
+        </Table.Header>
+
+        <Table.Body>
+          {data.results.map((holder, index) => (
+            <Table.Row key={holder.address}>
+              <Table.Cell>
+                <Text size="2">{index + 1}</Text>
+              </Table.Cell>
+              <Table.Cell>
+                <Link
+                  href={`https://explorer.hiro.so/address/${holder.address}?chain=mainnet`}
+                  target="_blank"
+                  color="gray"
+                >
+                  {holder.address}
+                </Link>
+              </Table.Cell>
+              <Table.Cell align="right">
+                <Text size="2">
+                  {(
+                    Number(holder.balance) /
+                    Number(10 ** (tokenInfo.decimals ?? 0))
+                  ).toLocaleString("en-US")}
+                </Text>
+              </Table.Cell>
+              <Table.Cell align="right">
+                <Text size="2">{calculatePercentage(holder.balance)}%</Text>
+              </Table.Cell>
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table.Root>
+    </Card>
   );
 };