Skip to content

Commit 1339ba2

Browse files
UjjwalSaini07UjjwalSaini07
committed
Add new Sections
1 parent a5fe32a commit 1339ba2

File tree

3 files changed

+222
-0
lines changed

3 files changed

+222
-0
lines changed

‎src/components/LandingPage/TradingWidgets/ForexCrossRates.jsx‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import React, { useEffect, useState, useRef, memo } from 'react';
2+
3+
function ForexCrossRates() {
4+
const container = useRef();
5+
const [height, setHeight] = useState(window.innerHeight - 100);
6+
7+
useEffect(() => {
8+
const handleResize = () => {
9+
setHeight(window.innerHeight - 100);
10+
};
11+
12+
window.addEventListener('resize', handleResize);
13+
14+
return () => {
15+
window.removeEventListener('resize', handleResize);
16+
};
17+
}, []);
18+
19+
useEffect(() => {
20+
if (container.current) {
21+
container.current.innerHTML = ''; // Clear any previous content
22+
23+
const script = document.createElement('script');
24+
script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-forex-cross-rates.js';
25+
script.type = 'text/javascript';
26+
script.async = true;
27+
script.innerHTML = `
28+
{
29+
"width": 590,
30+
"height": 520,
31+
"currencies": [
32+
"EUR",
33+
"USD",
34+
"JPY",
35+
"AUD",
36+
"CAD",
37+
"NZD",
38+
"NOK",
39+
"MXN",
40+
"PHP",
41+
"MYR",
42+
"INR"
43+
],
44+
"isTransparent": false,
45+
"colorTheme": "dark",
46+
"locale": "en",
47+
"backgroundColor": "#000000"
48+
}`;
49+
50+
container.current.appendChild(script);
51+
}
52+
}, [height]);
53+
54+
return (
55+
<div
56+
className="tradingview-widget-container"
57+
ref={container}
58+
style={{ height: `${height}px` }}
59+
>
60+
<div className="tradingview-widget-container__widget"></div>
61+
</div>
62+
);
63+
}
64+
65+
export default memo(ForexCrossRates);

‎src/components/LandingPage/TradingWidgets/IndianGainerLosser.jsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React, { useEffect, useRef, memo } from 'react';
2+
3+
function IndianGainerLosser() {
4+
const container = useRef();
5+
6+
useEffect(() => {
7+
if (container.current) {
8+
container.current.innerHTML = ''; // Clear any previous content
9+
10+
const script = document.createElement('script');
11+
script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-hotlists.js';
12+
script.type = 'text/javascript';
13+
script.async = true;
14+
script.innerHTML = `
15+
{
16+
"colorTheme": "dark",
17+
"dateRange": "12M",
18+
"exchange": "BSE",
19+
"showChart": true,
20+
"locale": "en",
21+
"largeChartUrl": "",
22+
"isTransparent": false,
23+
"showSymbolLogo": false,
24+
"showFloatingTooltip": false,
25+
"width": "400",
26+
"height": "520",
27+
"plotLineColorGrowing": "rgba(41, 98, 255, 1)",
28+
"plotLineColorFalling": "rgba(41, 98, 255, 1)",
29+
"gridLineColor": "rgba(42, 46, 57, 0)",
30+
"scaleFontColor": "rgba(219, 219, 219, 1)",
31+
"belowLineFillColorGrowing": "rgba(41, 98, 255, 0.12)",
32+
"belowLineFillColorFalling": "rgba(41, 98, 255, 0.12)",
33+
"belowLineFillColorGrowingBottom": "rgba(41, 98, 255, 0)",
34+
"belowLineFillColorFallingBottom": "rgba(41, 98, 255, 0)",
35+
"symbolActiveColor": "rgba(41, 98, 255, 0.12)"
36+
}`;
37+
38+
container.current.appendChild(script);
39+
}
40+
}, []);
41+
42+
return (
43+
<div
44+
className="tradingview-widget-container"
45+
ref={container}
46+
style={{ width: '400px', height: '550px' }}
47+
>
48+
<div className="tradingview-widget-container__widget"></div>
49+
</div>
50+
);
51+
}
52+
53+
export default memo(IndianGainerLosser);

‎src/components/LandingPage/TradingWidgets/MarketOverview.jsx‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import React, { useEffect, useRef, memo } from 'react';
2+
3+
function MarketOverview() {
4+
const container = useRef();
5+
6+
useEffect(() => {
7+
if (container.current) {
8+
container.current.innerHTML = ''; // Clear any previous content
9+
10+
const script = document.createElement('script');
11+
script.src = 'https://s3.tradingview.com/external-embedding/embed-widget-market-overview.js';
12+
script.type = 'text/javascript';
13+
script.async = true;
14+
script.innerHTML = `
15+
{
16+
"colorTheme": "dark",
17+
"dateRange": "12M",
18+
"showChart": true,
19+
"locale": "en",
20+
"largeChartUrl": "",
21+
"isTransparent": false,
22+
"showSymbolLogo": true,
23+
"showFloatingTooltip": false,
24+
"width": "400",
25+
"height": "520",
26+
"plotLineColorGrowing": "rgba(41, 98, 255, 1)",
27+
"plotLineColorFalling": "rgba(41, 98, 255, 1)",
28+
"gridLineColor": "rgba(42, 46, 57, 0)",
29+
"scaleFontColor": "rgba(219, 219, 219, 1)",
30+
"belowLineFillColorGrowing": "rgba(41, 98, 255, 0.12)",
31+
"belowLineFillColorFalling": "rgba(41, 98, 255, 0.12)",
32+
"belowLineFillColorGrowingBottom": "rgba(41, 98, 255, 0)",
33+
"belowLineFillColorFallingBottom": "rgba(41, 98, 255, 0)",
34+
"symbolActiveColor": "rgba(41, 98, 255, 0.12)",
35+
"tabs": [
36+
{
37+
"title": "Indices",
38+
"symbols": [
39+
{ "s": "FOREXCOM:SPXUSD", "d": "S&P 500 Index" },
40+
{ "s": "FOREXCOM:NSXUSD", "d": "US 100 Cash CFD" },
41+
{ "s": "FOREXCOM:DJI", "d": "Dow Jones Industrial Average Index" },
42+
{ "s": "INDEX:NKY", "d": "Japan 225" },
43+
{ "s": "INDEX:DEU40", "d": "DAX Index" },
44+
{ "s": "FOREXCOM:UKXGBP", "d": "FTSE 100 Index" },
45+
{ "s": "INDEX:BTCUSD", "d": "BTC Index" },
46+
{ "s": "CRYPTOCAP:TOTAL2", "d": "CryptoCap" },
47+
{ "s": "SKILLING:US100", "d": "CFD 100" }
48+
],
49+
"originalTitle": "Indices"
50+
},
51+
{
52+
"title": "Forex",
53+
"symbols": [
54+
{ "s": "FX:EURUSD", "d": "EUR to USD" },
55+
{ "s": "FX:GBPUSD", "d": "GBP to USD" },
56+
{ "s": "FX:USDJPY", "d": "USD to JPY" },
57+
{ "s": "FX:USDCHF", "d": "USD to CHF" },
58+
{ "s": "FX:AUDUSD", "d": "AUD to USD" },
59+
{ "s": "FX:USDCAD", "d": "USD to CAD" },
60+
{ "s": "FX_IDC:USDINR", "d": "USDINR" },
61+
{ "s": "OANDA:NZDUSD", "d": "NZDUSD" },
62+
{ "s": "OANDA:EURAUD", "d": "EURAUD" }
63+
],
64+
"originalTitle": "Forex"
65+
},
66+
{
67+
"title": "Futures",
68+
"symbols": [
69+
{ "s": "BMFBOVESPA:ISP1!", "d": "S&P 500 Index Futures" },
70+
{ "s": "BMFBOVESPA:EUR1!", "d": "Euro Futures" },
71+
{ "s": "PYTH:WTI3!", "d": "WTI CRUDE OIL" },
72+
{ "s": "BMFBOVESPA:ETH1!", "d": "Hydrous ethanol" },
73+
{ "s": "BMFBOVESPA:CCM1!", "d": "Corn" }
74+
],
75+
"originalTitle": "Futures"
76+
},
77+
{
78+
"title": "Bonds",
79+
"symbols": [
80+
{ "s": "EUREX:FGBL1!", "d": "Euro Bund" },
81+
{ "s": "EUREX:FBTP1!", "d": "Euro BTP" },
82+
{ "s": "EUREX:FGBM1!", "d": "Euro BOBL" }
83+
],
84+
"originalTitle": "Bonds"
85+
}
86+
]
87+
}`;
88+
89+
container.current.appendChild(script);
90+
}
91+
}, []);
92+
93+
return (
94+
<div
95+
className="tradingview-widget-container"
96+
ref={container}
97+
style={{ width: '400px', height: '550px' }}
98+
>
99+
<div className="tradingview-widget-container__widget"></div>
100+
</div>
101+
);
102+
}
103+
104+
export default memo(MarketOverview);

0 commit comments

Comments
 (0)