From 4421cb0c0164362976780327200db84978f6b529 Mon Sep 17 00:00:00 2001
From: ahmadtaimoor-deriv
 <129935294+ahmadtaimoor-deriv@users.noreply.github.com>
Date: Mon, 20 May 2024 14:08:25 +0800
Subject: [PATCH 1/2] chore: placeholder

---
 .../AppV2/Containers/Chart/chart-placeholder.tsx   | 14 ++++++++++++++
 .../trader/src/AppV2/Containers/Chart/chart.scss   | 13 +++++++++++++
 .../trader/src/AppV2/Containers/Chart/index.ts     |  4 ++++
 .../ContractDetails/contract-details.tsx           |  3 ++-
 4 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 packages/trader/src/AppV2/Containers/Chart/chart-placeholder.tsx
 create mode 100644 packages/trader/src/AppV2/Containers/Chart/chart.scss
 create mode 100644 packages/trader/src/AppV2/Containers/Chart/index.ts

diff --git a/packages/trader/src/AppV2/Containers/Chart/chart-placeholder.tsx b/packages/trader/src/AppV2/Containers/Chart/chart-placeholder.tsx
new file mode 100644
index 000000000000..e10d650d640a
--- /dev/null
+++ b/packages/trader/src/AppV2/Containers/Chart/chart-placeholder.tsx
@@ -0,0 +1,14 @@
+import { Text } from '@deriv-com/quill-ui';
+import React from 'react';
+
+const ChartPlaceholder = () => {
+    return (
+        <div className='chart-placeholder'>
+            <Text className='placeholder-text' size='sm' centered>
+                Placeholder Chart
+            </Text>
+        </div>
+    );
+};
+
+export default ChartPlaceholder;
diff --git a/packages/trader/src/AppV2/Containers/Chart/chart.scss b/packages/trader/src/AppV2/Containers/Chart/chart.scss
new file mode 100644
index 000000000000..c54b351b9811
--- /dev/null
+++ b/packages/trader/src/AppV2/Containers/Chart/chart.scss
@@ -0,0 +1,13 @@
+.chart-placeholder {
+    height: 360px;
+    margin: 0.5rem;
+    background-color: var(--core-color-solid-grape-100);
+    border: 1px dashed var(--core-color-solid-grape-700);
+    .placeholder-text {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        color: var(--core-color-solid-grape-700);
+        justify-content: center;
+    }
+}
diff --git a/packages/trader/src/AppV2/Containers/Chart/index.ts b/packages/trader/src/AppV2/Containers/Chart/index.ts
new file mode 100644
index 000000000000..7871e37e34c5
--- /dev/null
+++ b/packages/trader/src/AppV2/Containers/Chart/index.ts
@@ -0,0 +1,4 @@
+import ChartPlaceholder from './chart-placeholder';
+import './chart.scss';
+
+export default ChartPlaceholder;
diff --git a/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.tsx b/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.tsx
index 3f33947b6c52..6cd179c8b46f 100644
--- a/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.tsx
+++ b/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Text } from '@deriv-com/quill-ui';
+import ChartPlaceholder from '../Chart';
 
 const ContractDetails = () => {
     return (
@@ -14,7 +15,7 @@ const ContractDetails = () => {
                 <Text size='sm'>Contract card</Text>
             </div>
             <div className='placeholder'>
-                <Text size='sm'>Chart placeholder</Text>
+                <ChartPlaceholder />
             </div>
             <div className='placeholder'>
                 <Text size='sm'>Take profit</Text>

From cd58cd063017c06e2ba88e9fc2e7bc17453b6949 Mon Sep 17 00:00:00 2001
From: ahmadtaimoor-deriv
 <129935294+ahmadtaimoor-deriv@users.noreply.github.com>
Date: Mon, 20 May 2024 14:16:19 +0800
Subject: [PATCH 2/2] fix: min height

---
 .../src/AppV2/Containers/ContractDetails/contract-details.scss  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.scss b/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.scss
index 62508755cd6a..1666ca745585 100644
--- a/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.scss
+++ b/packages/trader/src/AppV2/Containers/ContractDetails/contract-details.scss
@@ -2,7 +2,7 @@
     background-color: rgba(0, 0, 0, 0.48);
 }
 .placeholder {
-    height: 100px;
+    min-height: 100px;
     margin: 4px 8px;
     background-color: #fff;
 }