feat: implements TableElement from core-ui (#1287)

* chore: Implements TableElement from core-ui

Author: Jony Bursztyn

src/ui/common/components/Multistaking/FinalityProviders/FinalityProviderTable.tsx

@@ -3,11 +3,10 @@
  */
 import "core-js/features/array/to-sorted";
 
-import { Button, Loader } from "@babylonlabs-io/core-ui";
+import { Loader, TableElement } from "@babylonlabs-io/core-ui";
 
 import warningOctagon from "@/ui/common/assets/warning-octagon.svg";
 import warningTriangle from "@/ui/common/assets/warning-triangle.svg";
-import { FinalityProviderLogo } from "@/ui/common/components/Staking/FinalityProviders/FinalityProviderLogo";
 import { StatusView } from "@/ui/common/components/Staking/FinalityProviders/FinalityProviderTableStatusView";
 import { getNetworkConfigBTC } from "@/ui/common/config/network/btc";
 import { useFinalityProviderBsnState } from "@/ui/common/state/FinalityProviderBsnState";
@@ -76,6 +75,7 @@ export const FinalityProviderTable = ({ selectedFP, onSelectRow }: Props) => {
       {finalityProviders.map((fp) => {
         const isSelected = selectedFP === fp.btcPk;
         const isSelectable = isRowSelectable(fp);
+
         const totalDelegation = maxDecimals(
           satoshiToBtc(fp.activeTVLSat || 0),
           8,
@@ -84,62 +84,31 @@ export const FinalityProviderTable = ({ selectedFP, onSelectRow }: Props) => {
         const status = FinalityProviderStateLabels[fp.state] || "Unknown";
 
         return (
-          <div
+          <TableElement
             key={fp.btcPk}
-            className={`bg-secondary-highlight h-[316px] overflow-hidden p-4 flex flex-col rounded justify-between`}
-          >
-            <div className="flex gap-2 items-center">
-              <FinalityProviderLogo
-                logoUrl={fp.logo_url}
-                rank={fp.rank}
-                moniker={fp.description?.moniker}
-                className="w-10 h-10"
-              />
-              <div className="flex flex-col">
-                <div className="text-xs text-accent-secondary">
-                  {fp.btcPk
-                    ? `${fp.btcPk.slice(0, 6)}...${fp.btcPk.slice(-6)}`
-                    : ""}
-                </div>
-                <div className="text-base font-medium text-accent-primary">
-                  {fp.description?.moniker || "Unnamed Provider"}
-                </div>
-              </div>
-            </div>
-            <div className="w-full h-px bg-secondary-strokeLight" />
-            <div className="text-sm flex flex-row justify-between">
-              <div className="text-accent-secondary">Status</div>
-              <div className="text-accent-primary font-medium">{status}</div>
-            </div>
-            <div className="text-sm flex flex-row justify-between">
-              <div className="text-accent-secondary">{coinSymbol} PK</div>
-              <div className="text-accent-primary font-medium">
-                {fp.btcPk
-                  ? `${fp.btcPk.slice(0, 5)}...${fp.btcPk.slice(-5)}`
-                  : ""}
-              </div>
-            </div>
-            <div className="text-sm flex flex-row justify-between">
-              <div className="text-accent-secondary">Total Delegation</div>
-              <div className="text-accent-primary font-medium">
-                {totalDelegation} {coinSymbol}
-              </div>
-            </div>
-            <div className="text-sm flex flex-row justify-between">
-              <div className="text-accent-secondary">Commission</div>
-              <div className="text-accent-primary font-medium">
-                {commission}%
-              </div>
-            </div>
-            <Button
-              className="mt-4"
-              onClick={() => handleSelect(fp.btcPk)}
-              disabled={!isSelectable}
-              variant={isSelected ? "contained" : "outlined"}
-            >
-              {isSelected ? "Selected" : "Select"}
-            </Button>
-          </div>
+            providerItemProps={{
+              bsnId: fp.bsnId || "",
+              bsnName: fp.chain || "",
+              address: fp.btcPk,
+              provider: {
+                logo_url: fp.logo_url,
+                rank: fp.rank,
+                description: fp.description,
+              },
+            }}
+            attributes={{
+              Status: status,
+              "Total Delegation": (
+                <>
+                  {totalDelegation} {coinSymbol}
+                </>
+              ),
+              Commission: `${commission}%`,
+            }}
+            isSelected={isSelected}
+            isSelectable={isSelectable}
+            onSelect={() => handleSelect(fp.btcPk)}
+          />
         );
       })}
     </div>