fix: renamed variables and changed text on Splash modal.

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);

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>
+    </>
+  );
+};