fix: ui issues

forbole · Mar 8, 2024 · e4be422 · e4be422
1 parent b67fa58
commit e4be422
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 25 deletions.
diff --git a/src/constants.ts b/src/constants.ts
@@ -26,3 +26,5 @@ export const unbondingDays = isTestnet ? 3 : 21;
 
 // Arbitrary value to avoid using a bigger fee than the actual reward
 export const minClaimableXion = 0.00001;
+
+export const minDisplayedXion = 0.001;
diff --git a/src/features/core/components/base.tsx b/src/features/core/components/base.tsx
@@ -11,33 +11,45 @@ import { clipboard, loader, loader2, search } from "../lib/icons";
 
 type TypographyProps = PropsWithChildren & {
   className?: string;
+  title?: string;
 };
 
-export const Title = ({ children, className = "" }: TypographyProps) => (
+export const Title = ({ children, className = "", title }: TypographyProps) => (
   <div
     className={[
       "text-[24px] font-bold leading-[28px] text-white",
       className,
     ].join(" ")}
+    title={title}
   >
     {children}
   </div>
 );
 
-export const HeroText = ({ children, className = "" }: TypographyProps) => (
+export const HeroText = ({
+  children,
+  className = "",
+  title,
+}: TypographyProps) => (
   <div
     className={["text-[32px] font-light leading-[38px]", className].join(" ")}
+    title={title}
   >
     {children}
   </div>
 );
 
-export const Heading2 = ({ children, className = "" }: TypographyProps) => (
+export const Heading2 = ({
+  children,
+  className = "",
+  title,
+}: TypographyProps) => (
   <div
     className={[
       "text-white; text-[40px] font-bold leading-[36px]",
       className,
     ].join(" ")}
+    title={title}
   >
     {children}
   </div>
@@ -47,22 +59,29 @@ export const Heading8 = ({
   children,
   className = "",
   color = "text-typo-150",
+  title,
 }: TypographyProps & { color?: string }) => (
   <div
     className={["text-[14px] font-bold leading-[16px]", color, className].join(
       " ",
     )}
+    title={title}
   >
     {children}
   </div>
 );
 
-export const BodyMedium = ({ children, className = "" }: TypographyProps) => (
+export const BodyMedium = ({
+  children,
+  className = "",
+  title,
+}: TypographyProps) => (
   <div
     className={[
       "text-[16px] font-normal leading-[24px] text-typo-125",
       className,
     ].join(" ")}
+    title={title}
   >
     {children}
   </div>

diff --git a/src/features/core/components/nav-account.tsx b/src/features/core/components/nav-account.tsx
@@ -16,7 +16,12 @@ const Account = () => (
   <span className="flex flex-row items-center gap-[8px] rounded-[8px] bg-bg-600 px-[16px] py-[18px]">
     <span dangerouslySetInnerHTML={{ __html: wallet }} />
     <span className="font-bold">Account</span>{" "}
-    <span className="rounded-[4px] bg-successBg p-[4px] text-[12px] uppercase text-success">
+    <span
+      className={[
+        "rounded-[4px] bg-successBg p-[4px] text-[12px] uppercase",
+        isTestnet ? "text-chain-testnet" : "text-chain-mainnet",
+      ].join(" ")}
+    >
       {isTestnet ? "Testnet" : "Mainnet"}
     </span>
   </span>

diff --git a/src/features/staking/components/staking-overview.tsx b/src/features/staking/components/staking-overview.tsx
@@ -1,7 +1,8 @@
 import { useAbstraxionAccount, useModal } from "@burnt-labs/abstraxion";
+import BigNumber from "bignumber.js";
 import { memo } from "react";
 
-import { basePath } from "@/constants";
+import { basePath, minDisplayedXion } from "@/constants";
 import {
   BodyMedium,
   Button,
@@ -19,11 +20,16 @@ import {
   getTotalDelegation,
   getTotalRewards,
 } from "../context/selectors";
-import { getEmptyXionCoin } from "../lib/core/coins";
-import { formatAPR, formatCoin, formatXionToUSD } from "../lib/formatters";
+import { getEmptyXionCoin, normaliseCoin } from "../lib/core/coins";
+import {
+  formatAPR,
+  formatCoin,
+  formatToSmallDisplay,
+  formatXionToUSD,
+} from "../lib/formatters";
 import { DivisorVertical } from "./divisor";
 
-const divisorStyle = "absolute bottom-[24px] right-[10px] top-[24px]";
+const divisorStyle = "absolute bottom-[24px] right-[-8px] top-[24px]";
 const columnStyle = "relative flex h-full flex-col items-start gap-3 p-[24px]";
 
 const StakingOverview = () => {
@@ -34,7 +40,7 @@ const StakingOverview = () => {
   if (!isConnected) {
     return (
       <div
-        className="flex min-h-[212px] flex-col items-center justify-center gap-[32px] px-[12px] uppercase"
+        className="flex min-h-[212px] flex-col items-center justify-center gap-[8px] px-[12px] uppercase"
         style={{
           backgroundImage: `url(${basePath}/overview-bg.png)`,
           borderRadius: 24,
@@ -63,21 +69,28 @@ const StakingOverview = () => {
 
   const apr = getAPR(staking.state);
 
-  const availableDelegation = staking.state.tokens || getEmptyXionCoin();
+  const availableDelegation = staking.state.tokens
+    ? normaliseCoin(staking.state.tokens)
+    : getEmptyXionCoin();
 
   return (
     <div
-      className="grid min-h-[144px] flex-col items-center justify-center gap-[32px] overflow-auto"
+      className="grid min-h-[144px] flex-col items-center justify-center gap-[8px] overflow-auto"
       style={{
         backgroundImage: `url(${basePath}/overview-bg.png)`,
         borderRadius: 24,
         gridTemplateColumns: "1fr 1fr 1fr 1fr",
       }}
     >
       <div className={columnStyle}>
-        <Heading8>Claimable Rewards</Heading8>
+        <Heading8>Claimable Rewards (XION)</Heading8>
         <div className="flex flex-row items-center gap-4">
-          <Heading2>{formatXionToUSD(totalRewards)}</Heading2>
+          <Heading2 title={[totalRewards.amount, "XION"].join(" ")}>
+            {formatToSmallDisplay(
+              new BigNumber(totalRewards.amount),
+              minDisplayedXion,
+            )}
+          </Heading2>
           {getCanClaimAnyRewards(staking.state) && (
             <ButtonPill
               onClick={() => {
@@ -95,7 +108,7 @@ const StakingOverview = () => {
             </ButtonPill>
           )}
         </div>
-        <BodyMedium>{formatCoin(totalRewards)}</BodyMedium>
+        <BodyMedium>{formatXionToUSD(totalRewards)}</BodyMedium>
         <div className={divisorStyle}>
           <DivisorVertical />
         </div>
@@ -108,17 +121,24 @@ const StakingOverview = () => {
         </div>
       </div>
       <div className={columnStyle}>
-        <Heading8>Delegated Amount</Heading8>
-        <Heading2>{formatXionToUSD(totalDelegation)}</Heading2>
-        <BodyMedium>{formatCoin(totalDelegation)}</BodyMedium>
+        <Heading8>Delegated Amount (XION)</Heading8>
+        <Heading2 title={formatCoin(totalDelegation)}>
+          {formatToSmallDisplay(
+            new BigNumber(totalDelegation.amount),
+            minDisplayedXion,
+          )}
+        </Heading2>
+        <BodyMedium>{formatXionToUSD(totalDelegation)}</BodyMedium>
         <div className={divisorStyle}>
           <DivisorVertical />
         </div>
       </div>
       <div className={columnStyle}>
-        <Heading8>Available For Delegation</Heading8>
-        <Heading2>{formatXionToUSD(availableDelegation)}</Heading2>
-        <BodyMedium>{formatCoin(availableDelegation)}</BodyMedium>
+        <Heading8>Available For Delegation (XION)</Heading8>
+        <Heading2 title={formatCoin(availableDelegation)}>
+          {formatToSmallDisplay(new BigNumber(availableDelegation.amount))}
+        </Heading2>
+        <BodyMedium>{formatXionToUSD(availableDelegation)}</BodyMedium>
       </div>
     </div>
   );

diff --git a/src/features/staking/components/validator-page.tsx b/src/features/staking/components/validator-page.tsx
@@ -94,7 +94,9 @@ export default function ValidatorPage() {
       <div className="page-container flex w-full flex-col gap-[16px] px-[16px] pb-[32px]">
         <div className="mb-[32px] mt-[40px]">
           <NavLink href="/">STAKING</NavLink> {"> "}
-          <span>{validatorDetails.description.moniker}</span>
+          <span className="uppercase">
+            {validatorDetails.description.moniker}
+          </span>
         </div>
         <div
           className="flex flex-col gap-[24px] overflow-auto p-[24px]"

diff --git a/src/features/staking/components/validators-table.tsx b/src/features/staking/components/validators-table.tsx
@@ -90,7 +90,7 @@ const ValidatorRow = ({
               validator.operatorAddress,
               staking.state,
             ) && (
-              <div className="rounded-[2px] bg-successBg p-[2px] text-[11px] font-medium leading-[16px] tracking-normal text-success">
+              <div className="rounded-[2px] bg-successBg px-[8px] py-[2px] text-[11px] font-medium leading-[16px] tracking-normal text-success">
                 You staked
               </div>
             )}

diff --git a/src/features/staking/lib/formatters.ts b/src/features/staking/lib/formatters.ts
@@ -40,8 +40,15 @@ export const formatVotingPowerPerc = (perc: null | number) => {
   return `${percNum}%`;
 };
 
-export const formatToSmallDisplay = (num: BigNumber) =>
-  Intl.NumberFormat("en", { notation: "compact" }).format(num.toNumber());
+export const formatToSmallDisplay = (num: BigNumber, minNumber?: number) => {
+  if (minNumber && num.lt(minNumber)) {
+    return `<${minNumber}`;
+  }
+
+  return Intl.NumberFormat("en", { notation: "compact" }).format(
+    num.toNumber(),
+  );
+};
 
 export const formatCommission = (commissionRate: string, decimals: number) => {
   const comission = new BigNumber(commissionRate)

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -18,6 +18,10 @@ const config: Config = {
           550: "#434040",
           600: "#1A1A1A",
         },
+        chain: {
+          mainnet: "#CAF033",
+          testnet: "#FFAA4A",
+        },
         danger: "#D74506",
         dangerBg: "#402217",
         success: "#04C700",