implement RC delegations box related to issue 285

api/common/useRcDelegations.ts

+import { useQuery } from "@tanstack/react-query";
+import fetchingService from "@/services/FetchingService";
+
+const useRcDelegations = (delegatorAccount: string, limit: number) => {
+  const {
+    data: rcDelegationsData,
+    isLoading: isRcDelegationsLoading,
+    isError: isRcDelegationsError,
+  } = useQuery({
+    queryKey: ["RcDelegations", delegatorAccount, limit],
+    queryFn: () => fetchingService.getRcDelegations(delegatorAccount, limit),
+    refetchOnWindowFocus: false,
+  });
+
+  return { rcDelegationsData, isRcDelegationsLoading, isRcDelegationsError };
+};
+
+export default useRcDelegations;
\ No newline at end of file

components/account/AccountDetailsSection.tsx

@@ -10,6 +10,7 @@ import VotersDialog from "../Witnesses/VotersDialog";
 import VotesHistoryDialog from "../Witnesses/VotesHistoryDialog";
 import useWitnessDetails from "@/api/common/useWitnessDetails";
 import AccountVestingDelegationsCard from "./AccountVestingDelegationsCard";
+import AccountRcDelegationsCard from "./AccountRcDelegationsCard";
 import { config } from "@/Config";
 
 interface AccountDetailsSectionProps {
@@ -74,6 +75,10 @@ const AccountDetailsSection: React.FC<AccountDetailsSectionProps> = ({
             startAccount={null}
             limit={config.maxDelegatorsCount}
           />
+      <AccountRcDelegationsCard
+        delegatorAccount={accountName}
+        limit={config.maxDelegatorsCount}
+      />
       <VotersDialog
         accountName={accountName}
         isVotersOpen={isVotersModalOpen}

components/account/AccountRcDelegationsCard.tsx

+import React, { useState, Fragment } from "react";
+import { ArrowDown, ArrowUp } from "lucide-react";
+import Link from "next/link";
+import { Card, CardContent, CardHeader } from "../ui/card";
+import { Table, TableBody, TableRow, TableCell } from "../ui/table";
+import { cn } from "@/lib/utils";
+import useRcDelegations from "@/api/common/useRcDelegations";
+type RcDelegation = {
+  to: string;
+  delegated_rc: number;
+};
+
+type AccountRcDelegationsCardProps = {
+  delegatorAccount: string;
+  limit: number;
+};
+
+const buildTableBody = (delegations: RcDelegation[]) => {
+  return delegations.map((delegation: RcDelegation, index: number) => {
+    const isLast = index === delegations.length - 1;
+    return (
+      <Fragment key={index}>
+        <TableRow
+          className={cn(
+            {
+              "border-t border-gray-700": index !== 0,
+              "border-b border-gray-700": !isLast,
+            },
+            "hover:bg-inherit"
+          )}
+        >
+          <TableCell>{index + 1}</TableCell>
+          <TableCell className="text-right">
+            <Link className="text-blue-400" href={`/@${delegation.to}`}>
+              {delegation.to}
+            </Link>
+          </TableCell>
+          <TableCell className="text-right">{delegation.delegated_rc}</TableCell>
+        </TableRow>
+      </Fragment>
+    );
+  });
+};
+
+const AccountRcDelegationsCard: React.FC<AccountRcDelegationsCardProps> = ({
+  delegatorAccount,
+  limit,
+}) => {
+  const [isPropertiesHidden, setIsPropertiesHidden] = useState(true);
+  const {
+    rcDelegationsData,
+    isRcDelegationsLoading,
+    isRcDelegationsError,
+  } = useRcDelegations(delegatorAccount, limit);
+
+  if (isRcDelegationsLoading) {
+    return <div></div>;
+  }
+
+  if (isRcDelegationsError) {
+    return <div></div>;
+  }
+
+  const delegations = rcDelegationsData?.result || [];
+  if (!delegations.length) return <div className="text-black"></div>;
+
+  delegations.sort((a: RcDelegation, b: RcDelegation) =>
+    a.to.toLowerCase().localeCompare(b.to.toLowerCase())
+  );
+
+  const handlePropertiesVisibility = () => {
+    setIsPropertiesHidden(!isPropertiesHidden);
+  };
+
+  return (
+    <Card data-testid="rc-delegations-dropdown" className="overflow-hidden">
+      <CardHeader className="p-0">
+        <div
+          onClick={handlePropertiesVisibility}
+          className="h-full flex justify-between align-center p-2 hover:bg-slate-600 cursor-pointer px-4"
+        >
+          <div className="text-lg">RC Delegations</div>
+          {isPropertiesHidden ? <ArrowDown /> : <ArrowUp />}
+        </div>
+      </CardHeader>
+      <CardContent hidden={isPropertiesHidden}>
+        <Table>
+          <TableBody>{buildTableBody(delegations)}</TableBody>
+        </Table>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default AccountRcDelegationsCard;
\ No newline at end of file

services/FetchingService.ts

@@ -240,6 +240,16 @@ class FetchingService {
     return await this.makePostRequest(this.nodeUrl!, requestBody);
   }
 
+  async getRcDelegations (delegatorAccount: string, limit: number): Promise<any> {
+    const requestBody ={
+      jsonrpc: "2.0",
+      method: "condenser_api.list_rc_direct_delegations",
+      params: [[delegatorAccount, ""], limit],
+      id: 1
+    };
+    return await this.makePostRequest(this.nodeUrl!, requestBody);
+  }
+
   async getBlockByTime(date: Date): Promise<number> {
     const requestBody: Hive.GetBlockByTimeProps = {
       _timestamp: date,