feat 526 signing modal improvement (#550)

* add steps loader

* signing modal improvement

* resolve comments

* fix: lint issues

* fix: trim function

---------

Co-authored-by: David Totraev <[email protected]>

src/app/api/getDelegationsV2.ts

@@ -15,10 +15,6 @@ interface DelegationV2APIResponse {
   data: DelegationV2API;
 }
 
-interface DelegationsV2APIResponse {
-  data: DelegationV2API[];
-  pagination: Pagination;
-}
 interface DelegationV2API {
   finality_provider_btc_pks_hex: string[];
   params_version: number;
@@ -53,7 +49,7 @@ interface DelegationV2API {
 }
 
 export const getDelegationV2 = async (
-  stakingTxHashHex: string,
+  stakingTxHashHex?: string,
 ): Promise<DelegationV2 | null> => {
   if (!stakingTxHashHex) {
     throw new Error("No staking tx hash provided");

src/app/components/Modals/EOIModal/Step.tsx

@@ -1,4 +1,4 @@
-import { Text } from "@babylonlabs-io/bbn-core-ui";
+import { Loader, Text } from "@babylonlabs-io/bbn-core-ui";
 import type { PropsWithChildren, ReactNode } from "react";
 import { IoCheckmarkSharp } from "react-icons/io5";
 import { twMerge } from "tailwind-merge";
@@ -18,6 +18,14 @@ const renderIcon = (step: number, currentStep: number) => {
     );
   }
 
+  if (currentStep === step) {
+    return (
+      <div className="rounded-full bg-secondary-main flex h-10 w-10 items-center justify-center">
+        <Loader size={24} className="text-secondary-contrast" />
+      </div>
+    );
+  }
+
   return (
     <div className="rounded-full bg-secondary-main flex h-10 w-10 items-center justify-center">
       <Text variant="body1" className="text-secondary-contrast">

src/app/components/Modals/StakeModal.tsx

@@ -16,7 +16,7 @@ export const StakeModal = ({ processing, open, onSubmit }: StakeModalProps) => (
   <SubmitModal
     processing={processing}
     open={open}
-    icon={<BiSolidBadgeCheck size={52} />}
+    icon={<BiSolidBadgeCheck className="text-5xl" />}
     title="Verified"
     submitButton={`Stake on ${networkName}`}
     onSubmit={onSubmit}

src/app/components/Modals/SubmitModal.tsx

@@ -14,9 +14,10 @@ import { ResponsiveDialog } from "./ResponsiveDialog";
 interface SubmitModalProps {
   className?: string;
   processing?: boolean;
+  disabled?: boolean;
   open: boolean;
   icon: JSX.Element;
-  title: string;
+  title: string | JSX.Element;
   cancelButton?: string;
   submitButton?: string;
   onClose?: () => void;
@@ -31,6 +32,7 @@ const DEFAULT_BUTTONS = {
 export const SubmitModal = ({
   className,
   processing = false,
+  disabled = false,
   icon,
   title,
   children,
@@ -41,7 +43,7 @@ export const SubmitModal = ({
   onSubmit,
 }: PropsWithChildren<SubmitModalProps>) => (
   <ResponsiveDialog
-    className={twMerge("max-w-[660px]", className)}
+    className={twMerge("w-[660px] max-w-full", className)}
     open={open}
     onClose={onClose}
   >
@@ -66,7 +68,7 @@ export const SubmitModal = ({
 
       {onSubmit && (
         <Button
-          disabled={processing}
+          disabled={processing || disabled}
           variant="contained"
           className="flex-1"
           onClick={onSubmit}

src/app/components/Modals/VerificationModal.tsx

@@ -7,23 +7,44 @@ import { SubmitModal } from "./SubmitModal";
 interface VerificationModalProps {
   processing: boolean;
   open: boolean;
+  step: 1 | 2;
 }
 
 const { networkName } = getNetworkConfigBTC();
 
+const VERIFICATION_STEPS = {
+  1: {
+    title: (
+      <>
+        1/2 <br /> Processing Confirmation
+      </>
+    ),
+    description:
+      "Waiting for the staking confirmation to be confirmed on Babylon chain.",
+  },
+  2: {
+    title: (
+      <>
+        2/2 <br /> Pending Verification
+      </>
+    ),
+    description: "The Babylon chain is verifying your staking transaction.",
+  },
+} as const;
+
 export const VerificationModal = ({
   processing,
   open,
+  step,
 }: VerificationModalProps) => (
   <SubmitModal
-    processing={processing}
+    disabled={processing}
     open={open}
     icon={<Loader size={48} />}
-    title="Pending Verification"
+    title={VERIFICATION_STEPS[step].title}
     submitButton={`Stake on ${networkName}`}
     onSubmit={() => {}}
   >
-    The babylon blockchain has received your request. Please wait while we
-    confirm the neseccary amount of signatures
+    {VERIFICATION_STEPS[step].description}
   </SubmitModal>
 );

src/app/hooks/client/api/useDelegationV2.ts

@@ -3,7 +3,7 @@ import { ONE_SECOND } from "@/app/constants";
 
 import { useClientQuery } from "../useClient";
 
-export function useDelegationV2(stakingTxHashHex: string) {
+export function useDelegationV2(stakingTxHashHex?: string) {
   const data = useClientQuery({
     queryKey: ["DELEGATION_BY_TX_HASH", stakingTxHashHex],
     queryFn: () => getDelegationV2(stakingTxHashHex),

src/components/staking/StakingModal/index.tsx

@@ -16,7 +16,11 @@ const EOI_INDEXES: Record<string, number> = {
   "eoi-unbonding-slashing": 2,
   "eoi-proof-of-possession": 3,
   "eoi-sign-bbn": 4,
-  "eoi-send-bbn": 5,
+};
+
+const VERIFICATION_STEPS: Record<string, 1 | 2> = {
+  "eoi-send-bbn": 1,
+  verifying: 2,
 };
 
 export function StakingModal() {
@@ -61,13 +65,21 @@ export function StakingModal() {
           }}
         />
       )}
-      <EOIModal
-        open={step.startsWith("eoi")}
-        processing={processing}
-        title="Staking"
-        step={EOI_INDEXES[step] ?? 0}
-      />
-      <VerificationModal processing={processing} open={step === "verifying"} />
+      {Boolean(EOI_INDEXES[step]) && (
+        <EOIModal
+          open
+          processing={processing}
+          step={EOI_INDEXES[step]}
+          title="Staking"
+        />
+      )}
+      {Boolean(VERIFICATION_STEPS[step]) && (
+        <VerificationModal
+          open
+          processing={processing}
+          step={VERIFICATION_STEPS[step]}
+        />
+      )}
       {verifiedDelegation && (
         <StakeModal
           open={step === "verified"}

src/utils/trim.ts

@@ -13,17 +13,12 @@
  * trim("abc", 4) // returns "abc"
  * trim(undefined) // returns undefined
  */
-export const trim = (
-  str: string | undefined,
-  symbols: number = 8,
-): string | undefined => {
-  if (str === undefined) return undefined;
-  if (symbols < 0) throw new Error("Symbols count cannot be negative");
-  if (str.length <= symbols) return str;
-
-  const halfLength = Math.floor(symbols / 2);
-  const firstHalf = str.slice(0, halfLength);
-  const secondHalf = str.slice(-halfLength);
-
-  return `${firstHalf}...${secondHalf}`;
+export const trim = (str?: string, symbols: number = 8) => {
+  if (!str) return "-";
+  if (str.length <= symbols) {
+    return str;
+  } else if (symbols === 0) {
+    return "...";
+  }
+  return `${str.slice(0, symbols / 2)}...${str.slice(-symbols / 2)}`;
 };

tests/utils/trim.test.ts

@@ -3,33 +3,28 @@ import { trim } from "@/utils/trim";
 describe("trim", () => {
   const txHashHex =
     "5f43cba06bfd354ad6777d7839b6d2e65871c1ca5c2df2c10468b3f60978e8cb";
-
   it("should trim transaction hash correctly", () => {
-    expect(trim(txHashHex, 8)).toBe("5f43...e8cb");
+    expect(trim(txHashHex)).toBe("5f43...e8cb");
   });
 
   it("should trim btc address correctly", () => {
     const btcAddress = "bc1qar0srrr7xfkvy5l643lydnw9re59gtzzwf5mdq";
-    expect(trim(btcAddress, 8)).toBe("bc1q...5mdq");
+    expect(trim(btcAddress)).toBe("bc1q...5mdq");
   });
 
   it("should trim the string correctly with an odd number of symbols", () => {
     expect(trim(txHashHex, 7)).toBe("5f4...8cb");
   });
 
   it("should return original string if nothing to trim", () => {
-    expect(trim("abc", 8)).toBe("abc");
-  });
-
-  it("should handle undefined input", () => {
-    expect(trim(undefined)).toBeUndefined();
+    expect(trim("abc")).toBe("abc");
   });
 
-  it("should throw error for negative symbols", () => {
-    expect(() => trim("abc", -1)).toThrow("Symbols count cannot be negative");
+  it("should return empty string for empty string", () => {
+    expect(trim("")).toBe("-");
   });
 
-  it("should handle empty string", () => {
-    expect(trim("", 8)).toBe("");
+  it("should handle cases where symbols count is 0", () => {
+    expect(trim("abc", 0)).toBe("...");
   });
 });