add claim button to wallet (#415)

babylonlabs-io · Nov 30, 2024 · 30ed0cc · 30ed0cc
1 parent 299a1c4
commit 30ed0cc
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 28 deletions.
diff --git a/src/app/components/PersonalBalance/PersonalBalance.tsx b/src/app/components/PersonalBalance/PersonalBalance.tsx
@@ -21,7 +21,15 @@ export function PersonalBalance() {
 
         <div className="divider mx-0 my-2 md:divider-horizontal" />
 
-        <StatItem loading={false} title="BBN Rewards" value="0.134 BBN" />
+        <StatItem
+          loading={false}
+          title="BBN Rewards"
+          value="0.134 BBN"
+          actionComponent={{
+            title: "Claim",
+            onAction: () => {},
+          }}
+        />
       </div>
     </div>
   );

diff --git a/src/app/components/Stats/ActionComponent.tsx b/src/app/components/Stats/ActionComponent.tsx
@@ -0,0 +1,19 @@
+import { Button, Loader } from "@babylonlabs-io/bbn-core-ui";
+
+interface ActionComponentProps {
+  title: string;
+  onAction: () => void;
+  awaitingResponse?: boolean;
+}
+
+export function ActionComponent({
+  title,
+  onAction,
+  awaitingResponse,
+}: ActionComponentProps) {
+  return (
+    <Button variant="outlined" size="small" onClick={onAction}>
+      {awaitingResponse ? <Loader size={16} className="text-white" /> : title}
+    </Button>
+  );
+}
diff --git a/src/app/components/Stats/StatItem.tsx b/src/app/components/Stats/StatItem.tsx
@@ -2,12 +2,18 @@ import { type JSX } from "react";
 import { AiOutlineInfoCircle } from "react-icons/ai";
 import { Tooltip } from "react-tooltip";
 
+import { ActionComponent } from "./ActionComponent";
+
 interface StatItemProps {
   loading?: boolean;
   icon?: JSX.Element;
   title: string;
   value: string | number;
   tooltip?: string;
+  actionComponent?: {
+    title: string;
+    onAction: () => void;
+  };
 }
 
 export const StatItem = ({
@@ -16,36 +22,45 @@ export const StatItem = ({
   title,
   value,
   tooltip,
+  actionComponent,
 }: StatItemProps) => (
-  <div className="flex items-center gap-2 md:flex-1 md:flex-col lg:flex-initial lg:flex-row flex-wrap justify-between text-primary-light text-base">
-    <div className="flex items-center gap-2">
-      {icon}
-      <div className="flex items-center gap-1">
-        <p className="dark:text-neutral-content">{title}</p>
-        {tooltip && (
-          <>
-            <span
-              className="cursor-pointer text-xs"
-              data-tooltip-id={`tooltip-${title}`}
-              data-tooltip-content={tooltip}
-              data-tooltip-place="top"
-            >
-              <AiOutlineInfoCircle />
-            </span>
-            <Tooltip id={`tooltip-${title}`} className="tooltip-wrap" />
-          </>
-        )}
+  <div className="flex gap-2 justify-between md:flex-col md:items-center lg:flex-row lg:items-center">
+    <div className="flex items-center gap-2 md:flex-1 md:flex-col lg:flex-initial lg:flex-row flex-wrap justify-between md:justify-start text-primary-light text-base">
+      <div className="flex items-center gap-2">
+        {icon}
+        <div className="flex items-center gap-1">
+          <p className="dark:text-neutral-content">{title}</p>
+          {tooltip && (
+            <>
+              <span
+                className="cursor-pointer text-xs"
+                data-tooltip-id={`tooltip-${title}`}
+                data-tooltip-content={tooltip}
+                data-tooltip-place="top"
+              >
+                <AiOutlineInfoCircle />
+              </span>
+              <Tooltip id={`tooltip-${title}`} className="tooltip-wrap" />
+            </>
+          )}
+        </div>
       </div>
-    </div>
 
-    <div>
-      <p className="flex-1 text-right">
-        {loading ? (
-          <span className="loading loading-spinner text-primary-dark" />
-        ) : (
-          <span className="text-primary-dark">{value}</span>
-        )}
-      </p>
+      <div>
+        <p className="flex-1 text-right">
+          {loading ? (
+            <span className="loading loading-spinner text-primary-dark" />
+          ) : (
+            <span className="text-primary-dark">{value}</span>
+          )}
+        </p>
+      </div>
     </div>
+    {actionComponent ? (
+      <ActionComponent
+        title={actionComponent.title}
+        onAction={actionComponent.onAction}
+      />
+    ) : null}
   </div>
 );