From 84848ca2a2d15e1c3694f73414d44d5d4219c70f Mon Sep 17 00:00:00 2001
From: Antonov Dmitry <AntonovDmitry21@gmail.com>
Date: Thu, 4 Jul 2024 13:38:06 +0300
Subject: [PATCH] fix: renamed variables and changed text on Splash modal.

---
 src/ApplicationRoutes.tsx                     |  8 ++--
 .../PreSplashModal/PreSplashModal.tsx         | 37 ---------------
 src/components/SplashModal/SplashModal.tsx    | 47 +++++++++++++++++++
 3 files changed, 51 insertions(+), 41 deletions(-)
 delete mode 100644 src/components/PreSplashModal/PreSplashModal.tsx
 create mode 100644 src/components/SplashModal/SplashModal.tsx

diff --git a/src/ApplicationRoutes.tsx b/src/ApplicationRoutes.tsx
index 0720ea5c7..7c6fcf1f9 100644
--- a/src/ApplicationRoutes.tsx
+++ b/src/ApplicationRoutes.tsx
@@ -7,9 +7,9 @@ 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 { SplashModal } from './components/SplashModal/SplashModal.tsx';
 import { useApplicationSettings } from './context';
 import { AddLiquidity } from './pages/AddLiquidity/AddLiquidity';
 import { CreatePool } from './pages/CreatePool/CreatePool';
@@ -142,8 +142,8 @@ export const ApplicationRoutes: FC = () => {
 
   const [settings] = useApplicationSettings();
 
-  const openPreSplashModal = () =>
-    Modal.open(({ close }) => <PreSplashModal close={close} />);
+  const openSplashModal = () =>
+    Modal.open(({ close }) => <SplashModal close={close} />);
 
   useEffect(() => {
     fireAnalyticsEvent('App Loaded');
@@ -160,7 +160,7 @@ export const ApplicationRoutes: FC = () => {
 
     if (network !== 'ergo') {
       const timer = setTimeout(() => {
-        openPreSplashModal();
+        openSplashModal();
       }, 5000);
 
       return () => clearTimeout(timer);
diff --git a/src/components/PreSplashModal/PreSplashModal.tsx b/src/components/PreSplashModal/PreSplashModal.tsx
deleted file mode 100644
index c6308b9eb..000000000
--- a/src/components/PreSplashModal/PreSplashModal.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-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://app.splash.trade', '_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>
-    </>
-  );
-};
diff --git a/src/components/SplashModal/SplashModal.tsx b/src/components/SplashModal/SplashModal.tsx
new file mode 100644
index 000000000..adc70baa5
--- /dev/null
+++ b/src/components/SplashModal/SplashModal.tsx
@@ -0,0 +1,47 @@
+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 SplashModal: React.FC<{ close: (result?: any) => void }> = ({
+  close,
+}) => {
+  const { valBySize } = useDevice();
+
+  const handleClick = () => {
+    window.open('https://app.splash.trade', '_blank');
+    close();
+  };
+
+  return (
+    <>
+      <Modal.Title>
+        <Typography.Title level={3}>Product Update</Typography.Title>
+      </Modal.Title>
+      <Modal.Content width={valBySize<CSSProperties['width']>('100%', 480)}>
+        <Flex col gap={4}>
+          <Typography.Body>
+            Spectrum Cardano DEX will change its brand name to Splash soon.
+            <br />
+            All pools will be migrated to the Splash interface.
+            <br />
+            Funds will be accessible through the new interface.
+          </Typography.Body>
+          <Typography.Body strong>
+            This interface will be shut down on 1st Aug 2024.
+          </Typography.Body>
+          <Flex justify="center">
+            <Button
+              type="primary"
+              size="large"
+              width={'130px'}
+              onClick={handleClick}
+            >
+              <Trans>Go to Splash</Trans>
+            </Button>
+          </Flex>
+        </Flex>
+      </Modal.Content>
+    </>
+  );
+};