feat: improve table layout

package.json

@@ -13,7 +13,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@burnt-labs/abstraxion": "^1.0.0-alpha.38",
+    "@burnt-labs/abstraxion": "^1.0.0-alpha.39",
     "@burnt-labs/constants": "^0.1.0-alpha.6",
     "@burnt-labs/ui": "^0.1.0-alpha.7",
     "@cosmjs/cosmwasm-stargate": "^0.32.2",

src/constants.ts

@@ -1,13 +1,10 @@
 export const isTestnet = true;
 
+// // For local testing
 // export const dashboardUrl =
 //   process.env.NODE_ENV === "production" ? undefined : "http://localhost:3000";
-export const dashboardUrl = undefined;
 
-// export const rpcEndpoint =
-//   typeof window === "undefined"
-//     ? "https://rpc.xion-testnet-1.burnt.com:443"
-//     : `${window.location.origin}/rpc`;
+export const dashboardUrl = undefined;
 
 // export const rpcEndpoint = "https://rpc.xion-testnet-1.burnt.com:443";
 export const rpcEndpoint = "https://rpc.xion-testnet.forbole.com";
@@ -19,8 +16,8 @@ export const xionToUSD = 10;
 
 export const defaultAvatar = `${basePath}/default-avatar.svg`;
 
-// Even if this can be retrieved from the params, hardcode it to avoid an
-// extra request. It can be retrieved with this:
+// // Even if this can be retrieved from the params, hardcode it to avoid an
+// // extra request. It can be retrieved with this:
 // const params = await queryClient.staking.params();
 export const unbondingDays = isTestnet ? 3 : 21;
 

src/features/core/components/table.tsx

@@ -61,3 +61,14 @@ export const HeaderTitleBase = <SortMethod extends string>({
     </div>
   );
 };
+
+export const ValidatorLogo = ({ logo }: { logo: string }) => (
+  <div className="flex items-center justify-start">
+    <img
+      alt="Validator logo"
+      className="block w-[50px] rounded-full"
+      src={logo}
+      style={{ height: 50, minHeight: 50, minWidth: 50, width: 50 }}
+    />
+  </div>
+);

src/features/staking/components/address-short.tsx

@@ -7,7 +7,7 @@ type Props = {
 const AddressShort = ({ address }: Props) => {
   if (!address) return null;
 
-  const charsDisplayed = 5;
+  const charsDisplayed = 7;
 
   const formattedAddress = (() => {
     const left = address.slice(0, charsDisplayed);

src/features/staking/components/delegation-details.tsx

@@ -7,7 +7,10 @@ import {
   ButtonPill,
   FloatingDropdown,
 } from "@/features/core/components/base";
-import { HeaderTitleBase } from "@/features/core/components/table";
+import {
+  HeaderTitleBase,
+  ValidatorLogo,
+} from "@/features/core/components/table";
 import { menu, pointer } from "@/features/core/lib/icons";
 import { sortUtil } from "@/features/core/utils";
 
@@ -113,16 +116,9 @@ const DelegationRowBase = ({
   return (
     <div className={rowStyle} style={gridStyle}>
       <div className="flex flex-1 flex-row justify-start gap-4">
-        <div className="flex items-center justify-start">
-          <img
-            alt="Validator logo"
-            className="block w-[50px] rounded-full"
-            src={logo}
-            style={{ height: 50, width: 50 }}
-          />
-        </div>
-        <div className="flex flex-col justify-center gap-2 text-left">
-          <div className="text-[14px] font-bold leading-[20px]">
+        <ValidatorLogo logo={logo} />
+        <div className="flex flex-col justify-center gap-[2px] text-left">
+          <div className="max-w-[150px] overflow-hidden truncate text-[14px] font-bold leading-[20px] md:max-w-[250px]">
             {validator?.description.moniker || ""}
           </div>
           <AddressShort address={validator?.operatorAddress || ""} />

src/features/staking/components/validators-table.tsx

@@ -12,7 +12,10 @@ import {
   TabButton,
   Title,
 } from "@/features/core/components/base";
-import { HeaderTitleBase } from "@/features/core/components/table";
+import {
+  HeaderTitleBase,
+  ValidatorLogo,
+} from "@/features/core/components/table";
 import { sortUtil } from "@/features/core/utils";
 
 import { useStaking } from "../context/hooks";
@@ -71,16 +74,9 @@ const ValidatorRow = ({
         style={gridStyle}
       >
         <div className="flex flex-1 flex-row justify-start gap-4">
-          <div className="flex items-center justify-start">
-            <img
-              alt="Validator logo"
-              className="block w-[50px] rounded-full"
-              src={logo}
-              style={{ height: 50, minHeight: 50, minWidth: 50, width: 50 }}
-            />
-          </div>
-          <div className="flex flex-col justify-center gap-2 text-left">
-            <div className="max-w-[300px] overflow-hidden truncate text-[14px] font-bold leading-[20px]">
+          <ValidatorLogo logo={logo} />
+          <div className="flex flex-col justify-center gap-[2px] text-left">
+            <div className="max-w-[150px] overflow-hidden truncate text-[14px] font-bold leading-[20px] md:max-w-[300px]">
               {validator.description.moniker}
             </div>
             <AddressShort address={validator.operatorAddress} />