chore: update root domain on bitname register & update empty text aft…

…er loading on stamp detail page & some weird placed 000s in the Details dropdown & showed the error message more details

client/hooks/userSRC101Form.ts

@@ -31,6 +31,7 @@ interface SRC101FormState {
   file: File | null;
   psbtFees?: PSBTFees;
   maxAmount?: string;
+  root: string;
 }
 
 export function useSRC101Form(
@@ -50,6 +51,7 @@ export function useSRC101Form(
   const [apiError, setApiError] = useState<string>("");
 
   const [formState, setFormState] = useState<SRC101FormState>({
+    root: ".btc",
     toAddress: "",
     token: initialToken || "",
     amt: "",

components/shared/fee/FeeCalculatorBase.tsx

@@ -222,7 +222,7 @@ export function FeeCalculatorBase({
 
         {/* Sats Per Byte */}
         <p className={detailsText}>
-          <span className={detailsTitle}>SATS PER BYTE</span> {fee}
+          <span className={detailsTitle}>SATS PER BYTE</span> {/* {fee} */}
         </p>
 
         {/* Miner Fee */}

globals.d.ts

@@ -1,5 +1,5 @@
 // General Types ---------------------------------------------------------------
-
+export type ROOT_DOMAIN_TYPES = ".btc" | ".sats" | ".xbt" | ".x" | ".pink";
 export type SUBPROTOCOLS = "STAMP" | "SRC-20" | "SRC-721" | "SRC-101";
 export type STAMP_TYPES = // These just reformat to variations of SUBPROTOCOLS
   | "all"

islands/shared/Tables.tsx

@@ -291,7 +291,7 @@ export default function Table({
       </div>
       <ScrollContainer class="max-h-48" onScroll={handleScroll}>
         <div class="">
-          {renderTabContent()}
+          {!isLoading && renderTabContent()}
           {isLoading && (
             <div class={textLoader}>
               <span>L</span>

islands/stamp/details/StampImage.tsx

@@ -475,7 +475,7 @@ export function StampImage(
 
   useEffect(() => {
     const validateContent = async () => {
-      if (stamp.stamp_mimetype === "image/svg+xml") {
+      if (stamp.stamp_mimetype === "image/svg+xml" && src) {
         const { isValid, error } = await validateStampContent(src);
         if (isValid) {
           setValidatedContent(
@@ -507,7 +507,6 @@ export function StampImage(
         }
       }
     };
-
     validateContent();
   }, [src, stamp.stamp_mimetype]);
 

islands/stamping/src101/register/RegisterContent.tsx

@@ -5,8 +5,10 @@ import { ComplexFeeCalculator } from "$islands/fee/ComplexFeeCalculator.tsx";
 import { StatusMessages } from "$islands/stamping/StatusMessages.tsx";
 import { InputField } from "$islands/stamping/InputField.tsx";
 import DetailModal from "$islands/stamping/src101/DetailModal.tsx";
-import { SRC101Balance } from "$globals";
+import { ROOT_DOMAIN_TYPES, SRC101Balance } from "$globals";
 import { useSRC101Form } from "$client/hooks/userSRC101Form.ts";
+import { SelectField } from "$islands/stamping/SelectField.tsx";
+import { ROOT_DOMAINS } from "$lib/utils/constants.ts";
 
 // CSS Class Constants
 const bodyTools = "flex flex-col w-full items-center gap-3 mobileMd:gap-6";
@@ -79,7 +81,7 @@ export function RegisterBitnameContent({
     try {
       const url =
         `/api/v2/src101/77fb147b72a551cf1e2f0b37dccf9982a1c25623a7fe8b4d5efaac566cf63fed/${
-          btoa(formState.toAddress?.toLowerCase().replace(".btc", ""))
+          btoa((formState.toAddress + formState.root)?.toLowerCase())
         }`;
       const res = await fetch(url);
       const jsonData = await res.json();
@@ -108,8 +110,44 @@ export function RegisterBitnameContent({
       <h1 className={titlePurpleLDCenter}>REGISTER</h1>
 
       <div className={inputFieldContainer}>
-        <div class="relative w-full">
-          <div className={animatedInputContainer}>
+        <div class={animatedInputContainer}>
+          <div class="flex justify-between relative z-[2] !bg-[#100318] placeholder:!bg-[#100318] rounded-md">
+            <input
+              type="search"
+              id="search-dropdown"
+              class="h-[54px] mobileLg:h-[60px] w-full bg-transparent rounded-md pl-6 text-base mobileLg:text-lg font-bold text-stamp-grey-light placeholder:!text-stamp-grey placeholder:lowercase !outline-none focus-visible:!outline-none focus:!bg-[#100318]"
+              placeholder="Please input your bitname"
+              required
+              value={formState.toAddress || ""}
+              onChange={(e) => handleInputChange(e, "toAddress")}
+            />
+            <select
+              className="h-[54px] max-w-32 mobileLg:h-[60px] px-3 rounded-md bg-transparent text-stamp-grey-light placeholder:lowercase text-base focus-visible:!outline-none appearance-none"
+              onChange={(e) =>
+                handleInputChange(
+                  {
+                    target: {
+                      value: e.currentTarget.value,
+                    },
+                  },
+                  "root",
+                )}
+              value={formState.root}
+            >
+              {ROOT_DOMAINS.map((item: ROOT_DOMAIN_TYPES) => (
+                <option
+                  key={item}
+                  value={item}
+                  class="bg-[#100318]"
+                >
+                  {item}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {
+            /* <div className={animatedInputContainer}>
             <InputField
               type="text"
               placeholder="Please input your bitname"
@@ -135,16 +173,19 @@ export function RegisterBitnameContent({
           </div>
           <span class="absolute z-[3] right-6 top-1/2 -translate-y-1/2 text-base mobileLg:text-lg font-black text-stamp-purple pointer-events-none">
             .btc
-          </span>
+          </span> */
+          }
         </div>
         <div className="flex flex-row justify-between w-full">
           <div className="flex flex-col justify-center items-start">
             {/* message - default:noDisplay / display on user input & onClick - either already registered or available */}
             <p className="text-sm mobileLg:text-base font-medium text-[#999999]">
               {formState.toAddress && checkStatus
                 ? isExist
-                  ? `${formState.toAddress} is already registered`
-                  : `${formState.toAddress} is available`
+                  ? `${
+                    formState.toAddress + formState.root
+                  } is already registered`
+                  : `${formState.toAddress + formState.root} is available`
                 : ""}
             </p>
           </div>

islands/stamping/stamp/OlgaContent.tsx

@@ -178,9 +178,24 @@ function extractErrorMessage(error: unknown): string {
           message?: string;
         };
       };
+      response?: {
+        data?: {
+          error?: string;
+        };
+      };
       message?: string;
     };
 
+    // Check for direct error message
+    if (err.response?.data?.error) {
+      logger.debug("stamps", {
+        message: "Found direct error message",
+        path: "error.message",
+        value: err.response?.data?.error,
+      });
+      return err.response?.data?.error;
+    }
+
     // Check for direct error message
     if (err.error?.message) {
       logger.debug("stamps", {

lib/utils/constants.ts

@@ -1,3 +1,5 @@
+import { ROOT_DOMAIN_TYPES } from "$globals";
+
 export const LOGO_STAMPCHAIN = "/img/stampchain.png";
 export const LOGO = LOGO_STAMPCHAIN;
 export const MAX_XCP_RETRIES = 5;
@@ -105,3 +107,11 @@ export const ARTICLE_LINKS: ArticleLink[] = [
   { title: "REGISTER BITNAME DOMAIN", href: "/howto/registerbitname" },
   { title: "TRANSFER A BITNAME DOMAIN", href: "/howto/transferbitname" },
 ];
+
+export const ROOT_DOMAINS: ROOT_DOMAIN_TYPES[] = [
+  ".btc",
+  ".sats",
+  ".xbt",
+  ".x",
+  ".pink",
+];