From 726fda2da50539f1f553375d6b4ba4c68ce312eb Mon Sep 17 00:00:00 2001
From: amina-deriv <amina@deriv.com>
Date: Mon, 10 Jan 2022 14:51:14 +0400
Subject: [PATCH] jump-indices-ts

---
 .../{_dBanner.js => _dBanner.tsx}             |  0
 .../jump-indices/{_dHero.js => _dHero.tsx}    |  2 +-
 .../{_jumpSection.js => _jumpSection.tsx}     |  0
 .../{_leverages.js => _leverages.tsx}         | 53 ++++++++++++-------
 .../jump-indices/{index.js => index.tsx}      |  6 +--
 tsconfig.json                                 |  3 +-
 6 files changed, 39 insertions(+), 25 deletions(-)
 rename src/pages/landing/jump-indices/{_dBanner.js => _dBanner.tsx} (100%)
 rename src/pages/landing/jump-indices/{_dHero.js => _dHero.tsx} (98%)
 rename src/pages/landing/jump-indices/{_jumpSection.js => _jumpSection.tsx} (100%)
 rename src/pages/landing/jump-indices/{_leverages.js => _leverages.tsx} (66%)
 rename src/pages/landing/jump-indices/{index.js => index.tsx} (84%)

diff --git a/src/pages/landing/jump-indices/_dBanner.js b/src/pages/landing/jump-indices/_dBanner.tsx
similarity index 100%
rename from src/pages/landing/jump-indices/_dBanner.js
rename to src/pages/landing/jump-indices/_dBanner.tsx
diff --git a/src/pages/landing/jump-indices/_dHero.js b/src/pages/landing/jump-indices/_dHero.tsx
similarity index 98%
rename from src/pages/landing/jump-indices/_dHero.js
rename to src/pages/landing/jump-indices/_dHero.tsx
index e5bd715884a..6b424f9587c 100644
--- a/src/pages/landing/jump-indices/_dHero.js
+++ b/src/pages/landing/jump-indices/_dHero.tsx
@@ -123,7 +123,7 @@ const StyledAnimationWrapper = styled(Flex)`
 `
 
 const DHero = () => {
-    const animation_container = createRef()
+    const animation_container = createRef<HTMLElement>()
     useEffect(() => {
         const anim = lottie.loadAnimation({
             container: animation_container.current,
diff --git a/src/pages/landing/jump-indices/_jumpSection.js b/src/pages/landing/jump-indices/_jumpSection.tsx
similarity index 100%
rename from src/pages/landing/jump-indices/_jumpSection.js
rename to src/pages/landing/jump-indices/_jumpSection.tsx
diff --git a/src/pages/landing/jump-indices/_leverages.js b/src/pages/landing/jump-indices/_leverages.tsx
similarity index 66%
rename from src/pages/landing/jump-indices/_leverages.js
rename to src/pages/landing/jump-indices/_leverages.tsx
index f6f1e0f1a1b..16fff1e4751 100644
--- a/src/pages/landing/jump-indices/_leverages.js
+++ b/src/pages/landing/jump-indices/_leverages.tsx
@@ -1,8 +1,8 @@
-import React from 'react'
+import React, { ReactElement } from 'react'
 import styled from 'styled-components'
 import { Flex } from 'components/containers'
 import { Header } from 'components/elements'
-import { localize } from 'components/localization'
+import { localize, Localize } from 'components/localization'
 import { LinkButton } from 'components/form'
 import device from 'themes/device.js'
 import TradingIcon from 'images/svg/jump-indices/jump-indices-24-7-trading.svg'
@@ -80,28 +80,41 @@ const StyledLinkButton = styled(LinkButton)`
     padding: 11px 16px;
 `
 
+type ContentType = {
+    imgsrc: string
+    header: ReactElement
+    title: ReactElement
+}
+
+const content: ContentType[] = [
+    {
+        imgsrc: TradingIcon,
+        header: <Localize translate_text="Available 24/7" />,
+        title: (
+            <Localize translate_text="As jump indices are synthetics, you can trade them 24/7, 365 days of the year." />
+        ),
+    },
+    {
+        imgsrc: LeverageIcon,
+        header: <Localize translate_text="High leverage" />,
+        title: (
+            <Localize translate_text="Trade with high leverage ratios to have even more opportunities to increase your position size." />
+        ),
+    },
+]
 const Leverages = () => {
     return (
         <MainWrapper>
             <ParentWrapper>
-                <EachWrapper>
-                    <ImgWrapper src={TradingIcon} />
-                    <StyledHeader type="section-title">{localize('Available 24/7')}</StyledHeader>
-                    <StyledHeaderSmall type="sub-section-title" weight="normal">
-                        {localize(
-                            'As jump indices are synthetics, you can trade them 24/7, 365 days of the year.',
-                        )}
-                    </StyledHeaderSmall>
-                </EachWrapper>
-                <EachWrapper>
-                    <ImgWrapper src={LeverageIcon} />
-                    <StyledHeader type="section-title">{localize('High leverage')}</StyledHeader>
-                    <StyledHeaderSmall type="sub-section-title" weight="normal">
-                        {localize(
-                            'Trade with high leverage ratios to have even more opportunities to increase your position size.',
-                        )}
-                    </StyledHeaderSmall>
-                </EachWrapper>
+                {content.map((item, index) => (
+                    <EachWrapper key={`key-${index}`}>
+                        <ImgWrapper src={item.imgsrc} />
+                        <StyledHeader type="section-title">{item.header}</StyledHeader>
+                        <StyledHeaderSmall type="sub-section-title" weight="normal">
+                            {item.title}
+                        </StyledHeaderSmall>
+                    </EachWrapper>
+                ))}
             </ParentWrapper>
             <BtnWrapper>
                 <StyledLinkButton
diff --git a/src/pages/landing/jump-indices/index.js b/src/pages/landing/jump-indices/index.tsx
similarity index 84%
rename from src/pages/landing/jump-indices/index.js
rename to src/pages/landing/jump-indices/index.tsx
index 57ae448d756..f5da3db1d49 100644
--- a/src/pages/landing/jump-indices/index.js
+++ b/src/pages/landing/jump-indices/index.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
 import DHero from './_dHero'
-import DBanner from './_dBanner.js'
-import JumpSection from './_jumpSection.js'
-import Leverages from './_leverages.js'
+import DBanner from './_dBanner'
+import JumpSection from './_jumpSection'
+import Leverages from './_leverages'
 import { SEO } from 'components/containers'
 import Layout from 'components/layout/layout'
 import { localize, WithIntl } from 'components/localization'
diff --git a/tsconfig.json b/tsconfig.json
index 9f1f79104e5..3fe8c154b7f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,6 +9,7 @@
         "emitDecoratorMetadata": true,
         "noEmit": true,
         "skipLibCheck": true,
-        "moduleResolution": "node"
+        "moduleResolution": "node",
+        "resolveJsonModule": true
       }
 }