feat: implements new activity card (#1426)

* fix: Implements new activity card

Author: Jony Bursztyn

package-lock.json

@@ -31,8 +31,8 @@
   "dependencies": {
     "@babylonlabs-io/babylon-proto-ts": "1.9.0",
     "@babylonlabs-io/btc-staking-ts": "2.5.6",
-    "@babylonlabs-io/core-ui": "1.21.0",
-    "@babylonlabs-io/wallet-connector": "1.10.7",
+    "@babylonlabs-io/core-ui": "1.24.0",
+    "@babylonlabs-io/wallet-connector": "1.11.1",
     "@bitcoin-js/tiny-secp256k1-asmjs": "2.2.3",
     "@cosmjs/proto-signing": "^0.33.1",
     "@cosmjs/stargate": "^0.33.1",

package.json

@@ -1,25 +1,7 @@
-import { ActivityCard } from "@babylonlabs-io/core-ui";
-
-interface BabyActivityCardData {
-  icon: string;
-  formattedAmount: string;
-  primaryAction?: {
-    label: string;
-    variant: "contained" | "outlined";
-    onClick: () => void;
-  };
-  details: Array<{
-    label: string;
-    value: React.ReactNode;
-  }>;
-  optionalDetails?: Array<{
-    label: string;
-    value: React.ReactNode;
-  }>;
-}
+import { ActivityCard, type ActivityCardData } from "@babylonlabs-io/core-ui";
 
 interface BabyActivityCardProps {
-  activityData: BabyActivityCardData;
+  activityData: ActivityCardData;
 }
 
 export function BabyActivityCard({ activityData }: BabyActivityCardProps) {

src/ui/baby/components/ActivityCard/index.tsx

@@ -11,6 +11,7 @@ import { formatTimeRemaining } from "@/ui/common/utils/time";
 
 import { BabyActivityCard } from "../ActivityCard";
 import { UnbondingModal } from "../UnbondingModal";
+import { ValidatorAvatar } from "../ValidatorAvatar";
 
 const { logo, coinSymbol } = getNetworkConfigBBN();
 
@@ -58,6 +59,16 @@ export function BabyActivityList() {
         delegation,
         data: {
           icon: logo,
+          iconAlt: `${coinSymbol} Logo`,
+          chainName: delegation.validator.name || delegation.validator.address,
+          chainIcon: (
+            <ValidatorAvatar
+              size="small"
+              name={delegation.validator.name || delegation.validator.address}
+            />
+          ),
+          chainIconAlt:
+            delegation.validator.name || delegation.validator.address,
           formattedAmount: `${formattedAmount} ${coinSymbol}`,
           primaryAction:
             formattedAmount > 0
@@ -67,12 +78,7 @@ export function BabyActivityList() {
                   onClick: () => openUnbondingModal(delegation),
                 }
               : undefined,
-          details: [],
-          optionalDetails: [
-            {
-              label: "Validator",
-              value: delegation.validator.name || delegation.validator.address,
-            },
+          details: [
             {
               label: "Commission",
               value: formatCommissionPercentage(
@@ -82,16 +88,30 @@ export function BabyActivityList() {
             ...(isUnbonding
               ? [
                   {
-                    label: "Unbonding",
+                    label: "Pending",
                     value: delegation.unbondingInfo
-                      ? delegation.unbondingInfo.isOptimistic
-                        ? `${babylon.utils.ubbnToBaby(delegation.unbondingInfo.amount)} ${coinSymbol} - Processing`
-                        : `${babylon.utils.ubbnToBaby(delegation.unbondingInfo.amount)} ${coinSymbol} in ${formatTimeRemaining(delegation.unbondingInfo.completionTime)}${delegation.unbondingInfo.statusSuffix || ""}`
+                      ? `${babylon.utils.ubbnToBaby(delegation.unbondingInfo.amount)} ${coinSymbol}`
                       : "In progress...",
+                    collapsible: Boolean(delegation.unbondingInfo),
+                    nestedDetails: delegation.unbondingInfo
+                      ? [
+                          {
+                            label: "Amount",
+                            value: `${babylon.utils.ubbnToBaby(delegation.unbondingInfo.amount)} ${coinSymbol}`,
+                          },
+                          {
+                            label: "Time Remaining",
+                            value: delegation.unbondingInfo.isOptimistic
+                              ? "Processing"
+                              : `${formatTimeRemaining(delegation.unbondingInfo.completionTime)}${delegation.unbondingInfo.statusSuffix || ""}`,
+                          },
+                        ]
+                      : [],
                   },
                 ]
               : []),
           ],
+          optionalDetails: [],
         },
       };
     });