Hasan/chore: added click handler for live market buy sell button

libs/components/src/lib/card/live-market/buy-sell.buttons.tsx

@@ -1,15 +1,21 @@
 import { Text, TradeButton } from '@deriv/quill-design';
 import { MarketStatus } from '../types';
 
+export type BuySellButtonsProps = {
+  status: MarketStatus;
+  spread: string;
+  textClass: string;
+  onClickBuyButton?: () => void;
+  onClickSellButton?: () => void;
+};
+
 export const BuySellButtons = ({
   status,
   spread,
   textClass,
-}: {
-  status: MarketStatus;
-  spread: string;
-  textClass: string;
-}) => {
+  onClickBuyButton,
+  onClickSellButton,
+}: BuySellButtonsProps) => {
   return (
     <div className="flex flex-col gap-gap-md">
       <div className="flex flex-row gap-gap-md">
@@ -26,6 +32,7 @@ export const BuySellButtons = ({
           variant="secondary"
           disabled={status === 'closed'}
           className="flex-1"
+          onClick={onClickBuyButton}
         >
           Buy
         </TradeButton>
@@ -34,6 +41,7 @@ export const BuySellButtons = ({
           variant="secondary"
           disabled={status === 'closed'}
           className="flex-1"
+          onClick={onClickSellButton}
         >
           Sell
         </TradeButton>

libs/components/src/lib/card/live-market/index.tsx

@@ -50,6 +50,8 @@ export const LiveMarketCard: React.FC<LiveMarketCardProps> = ({
   bidPrice,
   askPrice,
   spread,
+  onClickBuyButton,
+  onClickSellButton,
 }) => {
   const textClassName =
     status === 'closed'
@@ -101,6 +103,8 @@ export const LiveMarketCard: React.FC<LiveMarketCardProps> = ({
         status={status}
         spread={spread}
         textClass={textClassName}
+        onClickBuyButton={onClickBuyButton}
+        onClickSellButton={onClickSellButton}
       />
     </div>
   );

libs/components/src/lib/card/types/index.ts

@@ -44,4 +44,6 @@ export interface LiveMarketContent {
   bidPrice: string;
   askPrice: string;
   spread: string;
+  onClickBuyButton?: () => void;
+  onClickSellButton?: () => void;
 }