chore: mostly visual updates

components/BlockHeaderTable.tsx

@@ -53,7 +53,7 @@ export default function BlockHeaderTable(props: BlockHeaderTableProps) {
             </td>
           </tr>
           <tr class="border-b">
-            <th scope="row" class="px-6 py-3">Stamps</th>
+            <th scope="row" class="px-6 py-3">Bitcoin Stamps</th>
             <td class="whitespace-nowrap">{issuances.length}</td>
           </tr>
         </tbody>

components/SRC20BalanceTable.tsx

@@ -3,42 +3,59 @@ import relativeTime from "$dayjs/plugin/relativeTime";
 
 dayjs.extend(relativeTime);
 
-
 type SRC20BalanceTableProps = {
   src20Balances: SRC20Balance[];
 };
 
+/**
+ * Renders a table displaying SRC20 balances.
+ *
+ * @component
+ * @param {Object} props - The component props.
+ * @param {Array<SRC20Balance>} props.src20Balances - The array of SRC20 balances to display.
+ * @returns {JSX.Element} The rendered SRC20BalanceTable component.
+ */
+
 export const SRC20BalanceTable = (props: SRC20BalanceTableProps) => {
   const { src20Balances } = props;
 
   return (
-    <div class="relative overflow-x-auto shadow-md sm:rounded-lg max-h-96">
+    <div class="relative overflow-x-auto shadow-md sm:rounded-lg max-h-196">
       <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
         <caption class="p-5 text-lg font-semibold text-left rtl:text-right text-gray-900 bg-white dark:text-white dark:bg-gray-800">
-          SRC20 Balances
+          SRC20 Balances for {src20Balances[0].address}
         </caption>
         <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
           <tr>
-            <th scope="col" class="px-6 py-3">address</th>
+            {/* <th scope="col" class="px-6 py-3">address</th> */}
             <th scope="col" class="px-6 py-3">tick</th>
             <th scope="col" class="px-6 py-3">amount</th>
             <th scope="col" class="px-6 py-3">last update</th>
           </tr>
         </thead>
         <tbody>
           {src20Balances.map((src20: SRC20Balance) => {
+            const tickValue = src20.tick.startsWith("\\u") &&
+                !isNaN(parseInt(src20.tick.replace("\\u", "0x"), 16))
+              ? String.fromCodePoint(
+                parseInt(src20.tick.replace("\\u", "0x"), 16),
+              )
+              : src20.tick;
+
             return (
-              <tr class="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
-                <td class="px-6 py-4">
+              <tr className="odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800 border-b dark:border-gray-700">
+                {
+                  /* <td className="px-6 py-4">
                   {src20.address}
+                </td> */
+                }
+                <td className="px-6 py-4">
+                  {tickValue}
                 </td>
-                <td class="px-6 py-4">
-                  {src20.tick}
+                <td className="px-6 py-4 text-sm">
+                  {Number(src20.amt).toLocaleString()}
                 </td>
-                <td class="px-6 py-4">
-                  {Number(src20.amt).toFixed(4)}
-                </td>
-                <td class="px-6 py-4 text-sm">
+                <td className="px-6 py-4">
                   {dayjs(Number(src20.block_time)).fromNow()}
                 </td>
               </tr>
@@ -47,5 +64,5 @@ export const SRC20BalanceTable = (props: SRC20BalanceTableProps) => {
         </tbody>
       </table>
     </div>
-  )
-}
+  );
+};

components/Stamp.tsx

@@ -10,7 +10,7 @@ export const Stamp = (
         height="100%"
         scrolling="no"
         class={`rounded-lg ${className} `}
-        sandbox="allow-scripts"
+        sandbox="allow-scripts "
         src={`/content/${stamp.tx_hash}.${
           get_suffix_from_mimetype(stamp.stamp_mimetype)
         }`}

components/StampCard.tsx

@@ -10,30 +10,33 @@ import {
 
 dayjs.extend(relativeTime);
 
-export function StampCard(
-  { stamp, kind = "stamp" }: {
-    stamp: StampRow;
-    kind: "cursed" | "stamp" | "named";
-  },
-) {
+/**
+ * Renders a stamp card component.
+ * @param stamp - The stamp row data.
+ * @param kind - The kind of stamp card (cursed, stamp, named).
+ * @returns The stamp card component.
+ */
+export function StampCard({
+  stamp,
+  kind = "stamp",
+}: {
+  stamp: StampRow;
+  kind: "cursed" | "stamp" | "named";
+}) {
   let src: string;
   const suffix = get_suffix_from_mimetype(stamp.stamp_mimetype);
   src = `/content/${stamp.tx_hash}.${suffix}`;
-  // src = `${stamp.stamp_url}`;
-  // console.log(suffix);
   if (suffix === "unknown") {
     src = `/not-available.png`;
   }
   if (suffix === "json" || suffix === "txt") {
     src = `/not-available.png`;
   }
+
   return (
     <a
       href={`/stamp/${stamp.tx_hash}`}
-      // href={`${stamp.stamp_url}`}
-
-      className="text-white group relative z-10 flex h-full w-full grow flex-col overflow-hidden p-1 @container bg-[#181818] transition-all hover:bg-gray-700"
-      style={{ aspectRatio: "1/1", objectFit: "cover" }}
+      className="text-white group relative z-10 flex h-full w-full grow flex-col p-1 @container bg-[#181818] transition-all hover:bg-gray-700"
     >
       <div class="relative flex overflow-hidden">
         <div class="pointer-events-none relative aspect-square min-h-[70px] grow overflow-hidden rounded-t-lg">
@@ -42,7 +45,7 @@ export function StampCard(
               ? (
                 <iframe
                   scrolling="no"
-                  sandbox="allow-scripts allow-same-origin"
+                  sandbox="allow-scripts "
                   src={src}
                   class="h-full w-fit max-w-full object-contain items-center standalone:h-full standalone:w-auto"
                 />
@@ -74,8 +77,7 @@ export function StampCard(
           </h3>
         </div>
         {
-          /*
-          stamp.collection &&
+          /* stamp.collection &&
           <a class="text-[12px] text-accent hover:underline" href="/collection/honey-badgers">
             {stamp.collection}
           </a>
@@ -91,15 +93,16 @@ export function StampCard(
             <div class="bg-foreground-1 transition-all hover:bg-foreground-1-hover pl-3">
               <div class="center h-[18px] text-[12px] gap-x-1">
                 <p class="leading-4">
-                  {stamp.ident !== "SRC-20" &&
-                    (
-                      stamp.balance
-                        ? `${getSupply(stamp.balance, stamp.divisible)}/${
-                          stamp.supply < 100000 && !stamp.divisible
-                            ? getSupply(stamp.supply, stamp.divisible)
-                            : "+100000"
-                        }`
-                        : `1/${getSupply(stamp.supply, stamp.divisible)}`
+                  {stamp.ident !== "SRC-20" && stamp.balance
+                    ? (
+                      `${getSupply(stamp.balance, stamp.divisible)}/${
+                        stamp.supply < 100000 && !stamp.divisible
+                          ? getSupply(stamp.supply, stamp.divisible)
+                          : "+100000"
+                      }`
+                    )
+                    : (
+                      `1/${getSupply(stamp.supply, stamp.divisible)}`
                     )}
                 </p>
               </div>

components/StampInfo.tsx

@@ -39,7 +39,13 @@ export function StampInfo({ stamp }: { stamp: StampRow }) {
       </div>
       <div class="flex justify-around truncate border-b border-t">
         <p>
-          Creator: {stamp.creator_name ? stamp.creator_name : stamp.creator}
+          Creator: {stamp.creator_name
+            ? stamp.creator_name
+            : (
+              <a href={`/wallet/${stamp.creator}`}>
+                {short_address(stamp.creator, 12)}
+              </a>
+            )}
         </p>
       </div>
       <div class="flex justify-around truncate border-b border-t">

components/StampSends.tsx

@@ -1,3 +1,12 @@
+import { short_address } from "$lib/utils/util.ts";
+import dayjs from "$dayjs/";
+
+/**
+ * Renders a table displaying the stamp sends activity.
+ *
+ * @param sends - An array of `SendRow` objects representing the stamp sends.
+ * @returns The rendered StampSends component.
+ */
 export function StampSends({ sends }: { sends: SendRow[] }) {
   return (
     <div className="relative overflow-x-auto shadow-md sm:rounded-lg max-h-96 max-w-256">

components/src20/SRC20HoldersInfo.tsx

@@ -9,7 +9,11 @@ interface HoldersInfoProps {
 }
 export const SRC20HoldersInfo = (props: HoldersInfoProps) => {
   const { holders, total_holders, total_mints, total_sends } = props;
-  const labels = holders.map((holder) => holder.percentage);
+  const labels = holders
+    .map((holder) => parseFloat(holder.percentage))
+    .filter((percentage) => !isNaN(percentage));
+  // problem here with NaN values
+  // console.log(holders);
 
   return (
     <div class="mx-auto w-full p-4 flex flex-col md:flex-row space-between">

fresh.gen.ts

@@ -46,6 +46,7 @@ import * as $wallet_address_ from "./routes/wallet/[address].tsx";
 import * as $BlockSelector from "./islands/BlockSelector.tsx";
 import * as $Header from "./islands/Header.tsx";
 import * as $MempoolWeather from "./islands/MempoolWeather.tsx";
+import * as $StampSearch from "./islands/StampSearch.tsx";
 import * as $Toast_ToastComponent from "./islands/Toast/ToastComponent.tsx";
 import * as $Toast_toast from "./islands/Toast/toast.tsx";
 import * as $Wallet_ConnectWallet from "./islands/Wallet/ConnectWallet.tsx";
@@ -117,6 +118,7 @@ const manifest = {
     "./islands/BlockSelector.tsx": $BlockSelector,
     "./islands/Header.tsx": $Header,
     "./islands/MempoolWeather.tsx": $MempoolWeather,
+    "./islands/StampSearch.tsx": $StampSearch,
     "./islands/Toast/ToastComponent.tsx": $Toast_ToastComponent,
     "./islands/Toast/toast.tsx": $Toast_toast,
     "./islands/Wallet/ConnectWallet.tsx": $Wallet_ConnectWallet,

islands/BlockSelector.tsx

@@ -40,7 +40,7 @@ export default function Block(props: BlockProps) {
       </div>
       <div class="flex items-center justify-between text-xs sm:text-sm">
         <span>Stamps: {block.issuances}</span>
-        <span>Sends: {block.sends}</span>
+        {/* <span>Sends: {block.sends}</span> */}
       </div>
     </a>
   );

islands/Header.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "preact/hooks";
 import { ConnectWallet } from "$islands/Wallet/ConnectWallet.tsx";
+import { StampSearchClient } from "$islands/StampSearch.tsx";
 
 export function Header() {
   const [open, setOpen] = useState(false);
@@ -46,6 +47,7 @@ export function Header() {
               className="w-auto h-12 md:h-16"
             />
           </a>
+          {/* <StampSearchClient /> */}
           <button
             onClick={toggleMenu}
             className="border border-solid border-blue-600 px-3 py-1 rounded text-blue-600 opacity-50 hover:opacity-75 md:hidden"
@@ -67,29 +69,32 @@ export function Header() {
             href="/block/last"
             f-partial={"/block/last"}
             onClick={toggleMenu}
-            className={`p-2 lg:px-4 md:mx-2 hover:text-gray-700 transition-colors duration-300 ${
+            className={`p-2 lg:px-4 md:mx-2 hover:text-gray-700 transition-colors duration-300 flex justify-center items-center ${
               path === "block" ? activeClass : inactiveClass
             }`}
+            style={{ textDecoration: "none" }}
           >
             BLOCKS
           </a>
           <a
             href="/stamp"
             f-partial={"/stamp"}
             onClick={toggleMenu}
-            className={`p-2 lg:px-4 md:mx-2  hover:text-gray-700 transition-colors duration-300 ${
+            className={`p-2 lg:px-4 md:mx-2  hover:text-gray-700 transition-colors duration-300 flex justify-center items-center ${
               path === "stamp" ? activeClass : inactiveClass
             }`}
+            style={{ textDecoration: "none" }}
           >
             STAMPS
           </a>
           <a
             href="/src20"
             f-partial={"/src20"}
             onClick={toggleMenu}
-            className={`p-2 lg:px-4 md:mx-2  hover:text-gray-700 transition-colors duration-300 ${
+            className={`p-2 lg:px-4 md:mx-2  hover:text-gray-700 transition-colors duration-300 flex justify-center items-center ${
               path === "src20" ? activeClass : inactiveClass
             }`}
+            style={{ textDecoration: "none" }}
           >
             SRC20
           </a>

islands/StampSearch.tsx

@@ -0,0 +1,19 @@
+export function StampSearchClient() {
+  const handleSearch = (event) => {
+    const searchTerm = event.target.value;
+    // if (!isNaN(Number(searchTerm))) {
+    // const stampId = parseInt(searchTerm);
+    // Redirect to /stamp/[id] route with the stampId
+    window.location.href = `/stamp/${searchTerm}`;
+    // }
+  };
+
+  return (
+    <input
+      type="text"
+      className="h-1/2 w-full p-2 border-2 border-black rounded-lg bg-gray-800"
+      placeholder="Search for a Stamp, CPID, Transaction, or Address"
+      onInput={handleSearch}
+    />
+  );
+}

lib/controller/wallet.ts

@@ -40,6 +40,13 @@ export const api_get_src20_valid_tx = async (tx_hash: string) => {
   }
 };
 
+/**
+ * Retrieves the SRC20 token balances for a given address.
+ *
+ * @param address - The address for which to retrieve the SRC20 token balances.
+ * @returns A Promise that resolves to an array of SRC20 token balances.
+ * @throws If there is an error while retrieving the SRC20 token balances.
+ */
 export const api_get_src20_balance = async (address: string) => {
   try {
     const client = await connectDb();
@@ -58,6 +65,14 @@ export const api_get_src20_balance = async (address: string) => {
   }
 };
 
+/**
+ * Retrieves the balance of a specific SRC20 token for a given address and tick.
+ *
+ * @param address - The address for which to retrieve the balance.
+ * @param tick - The tick of the SRC20 token.
+ * @returns The balance of the SRC20 token for the given address and tick.
+ * @throws If an error occurs while retrieving the balance.
+ */
 export const api_get_src20_balance_by_tick = async (
   address: string,
   tick: string,
@@ -78,6 +93,13 @@ export const api_get_src20_balance_by_tick = async (
   }
 };
 
+/**
+ * Retrieves the balance information for a given address.
+ * @param address - The address for which to retrieve the balance.
+ * @param limit - The maximum number of results to return per page. Default is 50.
+ * @param page - The page number to retrieve. Default is 1.
+ * @returns An object containing the balance information.
+ */
 export const api_get_balance = async (
   address: string,
   limit = 50,