binary-com · Jan 17, 2022 · Jan 4, 2022 · Jan 4, 2022 · Jan 4, 2022 · Jan 4, 2022
@@ -17,7 +17,7 @@ exports.onCreatePage = ({ page, actions }) => {
     const is_market = /markets/g.test(page.path)
     const is_cfds = /cfds/g.test(page.path)
     const is_landing_ebooks =/landing\/ebooks/g.test(page.path)
-    
+
     if (is_landing_ebooks) {
         createRedirect({
             fromPath: `/landing/ebooks/`,
@@ -32,7 +32,7 @@ exports.onCreatePage = ({ page, actions }) => {
             isPermanent: true,
         })
     }
-    
+
     if (is_responsible_trading) {
         createRedirect({
             fromPath: `/responsible-trading/`,
@@ -307,6 +307,12 @@ exports.onCreateWebpackConfig = ({ actions, getConfig }, { ...options }) => {
     actions.setWebpackConfig({
         plugins: [new StylelintPlugin({ ...style_lint_options, ...options })],
         resolve: {
+          alias: {
+            'react': 'preact/compat',
+            'react-dom/test-utils': 'preact/test-utils',
+            'react-dom': 'preact/compat',
+            'react/jsx-runtime': 'preact/jsx-runtime',
+        },
             modules: [path.resolve(__dirname, 'src'), 'node_modules'],
         },
     })

@@ -27,6 +27,7 @@
         "gatsby-plugin-robots-txt": "^1.6.14",
         "gatsby-plugin-sharp": "^4.4.0",
         "gatsby-plugin-sitemap": "^5.4.0",
+        "gatsby-plugin-preact": "^6.5.0",
         "gatsby-plugin-svgr": "^3.0.0-beta.0",
         "gatsby-plugin-use-query-params": "^1.0.1",
         "gatsby-source-filesystem": "^4.4.0",
@@ -37,6 +38,9 @@
         "lottie-web": "^5.8.1",
         "match-sorter": "^6.3.1",
         "nprogress": "^0.2.0",
+        "postcss": "^8.4.5",
+        "preact": "^10.6.4",
+        "preact-render-to-string": "^5.1.19",
         "prop-types": "^15.8.1",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",

@@ -35,6 +35,14 @@ export default {
     Desktop,
 }
 
+NonEU.propTypes = {
+    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+}
+
+Eu.propTypes = {
+    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+}
+
 Desktop.propTypes = {
     children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
     max_width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

@@ -270,7 +270,7 @@ export const StyledLink = styled(LocalizedLink)`
     ${SharedLinkStyle}
 `
 const StyledButton = styled.span`
-    ${SharedLinkStyle}
+    ${SharedLinkStyle};
     cursor: pointer;
     user-select: none;
     white-space: nowrap;

@@ -20,6 +20,10 @@ const ImageWrapper = styled.div`
         width: 80px;
     }
 `
+const ImageTag = styled.img`
+    width: 100%;
+    height: 100%;
+`
 
 const InterestCardFlex = styled(Flex)`
     width: 340px;
@@ -150,7 +154,7 @@ const InterestFreeTrading = () => {
         <StyledContainer>
             <InterestCardFlex fd="column" ai="center" jc="center">
                 <ImageWrapper>
-                    <img src={ZeroPercent} alt="Zero percent interest" width="100%" height="100%" />
+                    <ImageTag src={ZeroPercent} alt="Zero percent interest" />
                 </ImageWrapper>
                 <InterestText size="32px">
                     <Localize translate_text="interest" />

@@ -101,6 +101,10 @@ const StyledText = styled(Text)`
         font-size: 16px;
     }
 `
+const ImageTag = styled.img`
+    width: 100%;
+    height: 100%;
+`
 const ExchangeSteps = () => {
     return (
         <Section>
@@ -110,7 +114,7 @@ const ExchangeSteps = () => {
             <CardContainer>
                 <Card>
                     <Row>
-                        <img src={RightAd} alt="" width="100%" />
+                        <ImageTag src={RightAd} alt="" />
                     </Row>
                     <Row>
                         <Column>
@@ -132,7 +136,7 @@ const ExchangeSteps = () => {
                 </Card>
                 <Card>
                     <Row>
-                        <img src={SettlePayment} alt="" width="100%" />
+                        <ImageTag src={SettlePayment} alt="" />
                     </Row>
                     <Row>
                         <Column>
@@ -154,7 +158,7 @@ const ExchangeSteps = () => {
                 </Card>
                 <Card>
                     <Row>
-                        <img src={CompleteOrder} alt="" width="100%" />
+                        <ImageTag src={CompleteOrder} alt="" />
                     </Row>
                     <Row>
                         <Column>

@@ -1,14 +1,25 @@
 {
-    "include": ["./src/**/*", "./src/custom.d.ts"],
-      "jsx": "react",
-      "compilerOptions": {
-        "baseUrl": "src",
-        "jsx": "preserve",
-        "esModuleInterop": true,
-        "experimentalDecorators": true,
-        "emitDecoratorMetadata": true,
-        "noEmit": true,
-        "skipLibCheck": true,
-        "moduleResolution": "node"
-      }
+  "include": [
+    "./src/**/*",
+    "./src/custom.d.ts"
+  ],
+  "jsx": "react",
+  "compilerOptions": {
+    "baseUrl": "src",
+    "jsx": "preserve",
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "moduleResolution": "node"
+  },
+  "paths": {
+    "react": [
+      "node_modules/preact/compat/"
+    ],
+    "react-dom": [
+      "node_modules/preact/compat/"
+    ]
+  }
 }