chore: minor UI adjusts; handle error on register

src/App.jsx

@@ -18,8 +18,8 @@ function App() {
 
   return (
     <div className="bg-neutral-50 h-screen flex">
-      <div className="flex-col justify-between items-center flex max-w-7xl mx-auto gap-10 w-full">
+      <div className="flex-col justify-between items-center flex max-w-7xl mx-auto gap-10 w-full pt-3">
-        <nav className="w-full flex justify-between gap-2 px-4 py-2">
+        <nav className="w-full flex justify-between gap-2 px-4 py-2 items-center">
           <img className="w-36" src={brandLogo} />
           <div className="flex items-center gap-4">
             {address && (

src/components/button/ConnectButton.jsx

@@ -32,7 +32,7 @@ const Custom = ({
 
   return (
     <button
-      className="p-1 bg-white rounded-lg shadow justify-start items-center inline-flex gap-1 cursor-pointer hover:scale-105 transition duration-200"
+      className="p-1 bg-white rounded-lg shadow justify-start items-center inline-flex gap-1 cursor-pointer hover:scale-105 transition duration-200 focus:outline-none"
       onClick={openAccountModal}
     >
       <div className="text-sky-950 font-semibold hidden md:block pl-1">

src/components/button/RegisterButton.jsx

@@ -18,7 +18,7 @@ export const RegisterButton = ({ details }) => {
         client.refetchQueries();
       })
       .catch((e) => {
-        toast.error(e.cause?.shortMessage || e.cause?.message);
+        toast.error(e.cause?.shortMessage || e.cause?.message || e?.message);
       })
       .finally(() => setLoading(false));
   };

src/components/search/Search.jsx

@@ -37,7 +37,7 @@ export const Search = () => {
           <div className="w-full p-3 bg-white rounded-b-2xl inline-flex flex-col lg:flex-row gap-2 flex-1 lg:overflow-scroll">
             <div className="flex-1 lg:w-full lg:overflow-scroll items-center gap-2 flex">
               <div
-                className="text-xl font-medium leading-loose w-full lg:w-fit overflow-scroll"
+                className="text-xl font-medium leading-loose lg:w-fit overflow-scroll"
                 style={{ scrollbarWidth: 'none' }}
               >
                 <span className="text-neutral-950">{label}</span>

src/components/search/SearchCTA.jsx

@@ -16,7 +16,7 @@ export const SearchCTA = ({ details }) => {
     const url = `https://hns.id/domain/${details.label}.${TLD}`;
     return (
       <a
-        className=" px-3 py-2 bg-white rounded-full border border-blue-600 justify-center items-center gap-2.5 inline-flex"
+        className=" px-3 py-2 bg-white rounded-full border border-blue-600 justify-center items-center gap-2.5 inline-flex w-full lg:w-auto"
         href={url}
       >
         <div className="text-blue-600 text-sm font-semibold leading-none">

src/constants.js

@@ -3,9 +3,9 @@ export const DEV_MODE = location.hostname === 'localhost';
 
 export const TLD = 'wallet';
 
-export const HERO_TEXT = 'Own your .wallet';
+export const HERO_TEXT = 'Own your .' + TLD;
 export const SUB_TEXT = 'Decentralized domains for websites, wallets and web3';
-export const SEARCH_PLACEHOLDER = 'Find your .wallet';
+export const SEARCH_PLACEHOLDER = 'Find your .' + TLD;
 export const PAGE_TITLE = HERO_TEXT;
 
 export const TWITTER_HANDLE = 'walletdomain';

src/hooks/useRegister.js

@@ -46,7 +46,7 @@ export const useRegister = ({
     enabled: isConnected,
   });
 
-  const { data } = useSimulateContract({
+  const { data, failureReason } = useSimulateContract({
     abi,
     address: REGISTER_CONTRACT_ADDR,
     functionName: 'registerWithSignature',
@@ -65,5 +65,11 @@ export const useRegister = ({
   });
 
   const { writeContractAsync } = useWriteContract();
-  return () => writeContractAsync(data?.request);
+  return () => {
+    if (failureReason && !data?.request) {
+      return Promise.reject(failureReason);
+    }
+
+    return writeContractAsync(data?.request);
+  };
 };