From b2b419bdc8fbd17805dd082e601e08531d963153 Mon Sep 17 00:00:00 2001
From: hasan-deriv <abuhasan@deriv.com>
Date: Fri, 15 Dec 2023 15:32:54 +0800
Subject: [PATCH] chore: added click handler for live market buy sell button

---
 .../lib/card/live-market/buy-sell.buttons.tsx  | 18 +++++++++++++-----
 .../src/lib/card/live-market/index.tsx         |  4 ++++
 libs/components/src/lib/card/types/index.ts    |  2 ++
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/libs/components/src/lib/card/live-market/buy-sell.buttons.tsx b/libs/components/src/lib/card/live-market/buy-sell.buttons.tsx
index c46ffa26a..e6dd7ecef 100644
--- a/libs/components/src/lib/card/live-market/buy-sell.buttons.tsx
+++ b/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>
diff --git a/libs/components/src/lib/card/live-market/index.tsx b/libs/components/src/lib/card/live-market/index.tsx
index c853b6274..38313dfe2 100644
--- a/libs/components/src/lib/card/live-market/index.tsx
+++ b/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>
   );
diff --git a/libs/components/src/lib/card/types/index.ts b/libs/components/src/lib/card/types/index.ts
index e76d1639b..a562e03ed 100644
--- a/libs/components/src/lib/card/types/index.ts
+++ b/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;
 }