From f7f9d54ffc5deefa06bd4a0db6eb8f478616c35b Mon Sep 17 00:00:00 2001
From: Dmitry <dantonov@team.amocrm.com>
Date: Sat, 18 May 2024 17:57:03 +0300
Subject: [PATCH] Created modal, which open after 5 second upon accessing the
 site.

---
 src/ApplicationRoutes.tsx                     | 13 +++++++
 .../PreSplashModal/PreSplashModal.tsx         | 37 +++++++++++++++++++
 2 files changed, 50 insertions(+)
 create mode 100644 src/components/PreSplashModal/PreSplashModal.tsx

diff --git a/src/ApplicationRoutes.tsx b/src/ApplicationRoutes.tsx
index b3dca042e..46fb55857 100644
--- a/src/ApplicationRoutes.tsx
+++ b/src/ApplicationRoutes.tsx
@@ -1,3 +1,4 @@
+import { Modal } from '@ergolabs/ui-kit';
 import { fireAnalyticsEvent, getBrowser, user } from '@spectrumlabs/analytics';
 import { DateTime } from 'luxon';
 import { FC, useEffect } from 'react';
@@ -6,6 +7,7 @@ import { Navigate, Outlet, useRoutes } from 'react-router-dom';
 import { version } from '../package.json';
 import { NetworkDomManager } from './common/services/NetworkDomManager/NetworkDomManager';
 import { Layout } from './components/common/Layout/Layout';
+import { PreSplashModal } from './components/PreSplashModal/PreSplashModal.tsx';
 import { RouteConfigExtended } from './components/RouterTitle/RouteConfigExtended';
 import { RouterTitle } from './components/RouterTitle/RouterTitle';
 import { useApplicationSettings } from './context';
@@ -140,6 +142,9 @@ export const ApplicationRoutes: FC = () => {
 
   const [settings] = useApplicationSettings();
 
+  const openPreSplashModal = () =>
+    Modal.open(({ close }) => <PreSplashModal close={close} />);
+
   useEffect(() => {
     fireAnalyticsEvent('App Loaded');
 
@@ -150,6 +155,14 @@ export const ApplicationRoutes: FC = () => {
     user.set('locale_active', settings.lang);
   }, []);
 
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      openPreSplashModal();
+    }, 5000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
   return (
     <>
       <RouterTitle
diff --git a/src/components/PreSplashModal/PreSplashModal.tsx b/src/components/PreSplashModal/PreSplashModal.tsx
new file mode 100644
index 000000000..0531cb0e1
--- /dev/null
+++ b/src/components/PreSplashModal/PreSplashModal.tsx
@@ -0,0 +1,37 @@
+import { Button, Flex, Modal, Typography, useDevice } from '@ergolabs/ui-kit';
+import { Trans } from '@lingui/macro';
+import { CSSProperties } from 'react';
+import * as React from 'react';
+
+export const PreSplashModal: React.FC<{ close: (result?: any) => void }> = ({
+  close,
+}) => {
+  const { valBySize } = useDevice();
+
+  const handleClick = () => {
+    window.open('https://pre-splash-app.spectrum.fi/SPLASH-ADA', '_blank');
+    close();
+  };
+
+  return (
+    <>
+      <Modal.Title>
+        <Typography.Title level={3}>Try new interface</Typography.Title>
+      </Modal.Title>
+      <Modal.Content width={valBySize<CSSProperties['width']>('100%', 480)}>
+        <Flex col gap={4}>
+          <Typography.Body>
+            Spectrum DEX will become Splash soon. Try a new Pre-Splash Interface
+            and meet even faster trading experience.
+          </Typography.Body>
+          <Typography.Body strong>
+            To trade SPLASH token use the new Interface as well.
+          </Typography.Body>
+          <Button type="primary" size="large" width={100} onClick={handleClick}>
+            <Trans>Try now</Trans>
+          </Button>
+        </Flex>
+      </Modal.Content>
+    </>
+  );
+};