From e449448d48b7809c3367c213bd3ae7d357979761 Mon Sep 17 00:00:00 2001
From: drafish <xwlyy1991@163.com>
Date: Mon, 29 Jul 2024 10:31:26 +0800
Subject: [PATCH] split homepage

---
 apps/remix-dapp/src/App.tsx                   |  11 +-
 .../remix-dapp/src/components/Home/mobile.tsx |  88 +++++++++++++
 apps/remix-dapp/src/components/Home/pc.tsx    |  47 +++++++
 apps/remix-dapp/src/pages/Home/index.tsx      | 124 ------------------
 apps/remix-dapp/src/reducers/state.ts         |   1 +
 apps/remix-dapp/src/router.tsx                |  11 --
 6 files changed, 143 insertions(+), 139 deletions(-)
 create mode 100644 apps/remix-dapp/src/components/Home/mobile.tsx
 create mode 100644 apps/remix-dapp/src/components/Home/pc.tsx
 delete mode 100644 apps/remix-dapp/src/pages/Home/index.tsx
 delete mode 100644 apps/remix-dapp/src/router.tsx

diff --git a/apps/remix-dapp/src/App.tsx b/apps/remix-dapp/src/App.tsx
index ebe6722f39..79b770ae58 100644
--- a/apps/remix-dapp/src/App.tsx
+++ b/apps/remix-dapp/src/App.tsx
@@ -1,18 +1,19 @@
 import React, { useEffect, useReducer } from 'react';
-import { RouterProvider } from 'react-router-dom';
-import router from './router';
 import { IntlProvider } from 'react-intl';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import { AppContext } from './contexts';
 import { appInitialState, appReducer } from './reducers/state';
-import { initDispatch, updateState } from './actions';
+import { initDispatch, initInstance, updateState } from './actions';
 import enJson from './locales/en';
 import zhJson from './locales/zh';
 import esJson from './locales/es';
 import frJson from './locales/fr';
 import itJson from './locales/it';
 import './App.css';
+import { isMobile } from './utils/tools';
+import MobilePage from './components/Home/mobile';
+import PCPage from './components/Home/pc';
 
 const localeMap: Record<string, any> = {
   zh: zhJson,
@@ -31,7 +32,9 @@ function App(): JSX.Element {
   useEffect(() => {
     initDispatch(dispatch);
     updateState(appState);
+    initInstance();
   }, []);
+
   return (
     <AppContext.Provider
       value={{
@@ -43,7 +46,7 @@ function App(): JSX.Element {
         locale={selectedLocaleCode}
         messages={localeMap[selectedLocaleCode]}
       >
-        <RouterProvider router={router} />
+        {isMobile() ? <MobilePage /> : <PCPage />}
         <ToastContainer
           position="bottom-right"
           newestOnTop
diff --git a/apps/remix-dapp/src/components/Home/mobile.tsx b/apps/remix-dapp/src/components/Home/mobile.tsx
new file mode 100644
index 0000000000..96e569c78a
--- /dev/null
+++ b/apps/remix-dapp/src/components/Home/mobile.tsx
@@ -0,0 +1,88 @@
+import React, { useContext, useEffect, useState } from 'react';
+import { UniversalDappUI } from '../../components/UniversalDappUI';
+import { SettingsUI } from '../../components/SettingsUI';
+import DappTop from '../../components/DappTop';
+import { AppContext } from '../../contexts';
+import TxList from '../../components/UiTerminal/TxList';
+
+const MobilePage: React.FC = () => {
+  const {
+    appState: { instance },
+  } = useContext(AppContext);
+  const [active, setActive] = useState('functions');
+
+  return <div>
+    <div
+      className={`${
+        active === 'functions' ? '' : 'd-none'
+      } col-xl-9 col-lg-8 col-md-7 pr-0`}
+    >
+      <div className="mx-3 my-2 row">
+        <div className="col-2 text-center px-0 d-flex align-items-center">
+          <img src="/assets/logo.png" style={{ width: 55, height: 55 }} />
+        </div>
+        <DappTop />
+      </div>
+      <UniversalDappUI />
+    </div>
+    {!instance.noTerminal && (
+      <div className={`${active === 'transactions' ? '' : 'd-none'}`}>
+        <TxList />
+      </div>
+    )}
+    <div
+      className={`${
+        active === 'settings' ? '' : 'd-none'
+      } col-xl-3 col-lg-4 col-md-5 pl-0`}
+    >
+      <SettingsUI />
+    </div>
+    <ul
+      className="nav nav-pills justify-content-center fixed-bottom row bg-light"
+      style={{ zIndex: 'auto' }}
+    >
+      <li
+        className={`nav-item col text-center p-2`}
+        onClick={() => {
+          setActive('functions');
+        }}
+      >
+        <span
+          className={`${active === 'functions' ? 'active' : ''} nav-link`}
+        >
+        Functions
+        </span>
+      </li>
+      {!instance.noTerminal && (
+        <li
+          className={`nav-item col text-center p-2`}
+          onClick={() => {
+            setActive('transactions');
+          }}
+        >
+          <span
+            className={`${
+              active === 'transactions' ? 'active' : ''
+            } nav-link`}
+          >
+          Transactions
+          </span>
+        </li>
+      )}
+      <li
+        className={`${
+          active === 'settings' ? 'active' : ''
+        } nav-item col text-center p-2`}
+        onClick={() => {
+          setActive('settings');
+        }}
+      >
+        <span className={`${active === 'settings' ? 'active' : ''} nav-link`}>
+        Settings
+        </span>
+      </li>
+    </ul>
+  </div>
+};
+
+export default MobilePage;
diff --git a/apps/remix-dapp/src/components/Home/pc.tsx b/apps/remix-dapp/src/components/Home/pc.tsx
new file mode 100644
index 0000000000..0cb31f3d02
--- /dev/null
+++ b/apps/remix-dapp/src/components/Home/pc.tsx
@@ -0,0 +1,47 @@
+import React, { useContext, useEffect } from 'react';
+import { UniversalDappUI } from '../../components/UniversalDappUI';
+import { SettingsUI } from '../../components/SettingsUI';
+import RemixUiTerminal from '../../components/UiTerminal';
+import DragBar from '../../components/DragBar';
+import DappTop from '../../components/DappTop';
+import { AppContext } from '../../contexts';
+
+const PCPage: React.FC = () => {
+  const {
+    appState: { terminal, instance },
+  } = useContext(AppContext);
+  const { height } = terminal;
+
+  return <div>
+    <div
+      className="row m-0 pt-3"
+      style={{
+        height: instance.noTerminal
+          ? window.innerHeight
+          : window.innerHeight - height - 5,
+        overflowY: 'auto',
+      }}
+    >
+      <div className="col-xl-9 col-lg-8 col-md-7 d-inline-block pr-0">
+        <div className="mx-3 my-2 row">
+          <div className="col-2 text-center">
+            <img src="/assets/logo.png" style={{ width: 95, height: 95 }} />
+          </div>
+          <DappTop />
+        </div>
+        <UniversalDappUI />
+      </div>
+      <div className="col-xl-3 col-lg-4 col-md-5 d-inline-block pl-0">
+        <SettingsUI />
+      </div>
+    </div>
+    {!instance.noTerminal && (
+      <>
+        <DragBar />
+        <RemixUiTerminal />
+      </>
+    )}
+  </div>
+};
+
+export default PCPage;
diff --git a/apps/remix-dapp/src/pages/Home/index.tsx b/apps/remix-dapp/src/pages/Home/index.tsx
deleted file mode 100644
index 61b53be5b9..0000000000
--- a/apps/remix-dapp/src/pages/Home/index.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import React, { useContext, useEffect, useState } from 'react';
-import { UniversalDappUI } from '../../components/UniversalDappUI';
-import { SettingsUI } from '../../components/SettingsUI';
-import RemixUiTerminal from '../../components/UiTerminal';
-import DragBar from '../../components/DragBar';
-import DappTop from '../../components/DappTop';
-import { AppContext } from '../../contexts';
-import { initInstance } from '../../actions';
-import { isMobile } from '../../utils/tools';
-import TxList from '../../components/UiTerminal/TxList';
-
-const HomePage: React.FC = () => {
-  const {
-    appState: { terminal, instance },
-  } = useContext(AppContext);
-  const [active, setActive] = useState('functions');
-  const { height } = terminal;
-  useEffect(() => {
-    initInstance();
-  }, []);
-
-  return isMobile() ? (
-    <div>
-      <div
-        className={`${
-          active === 'functions' ? '' : 'd-none'
-        } col-xl-9 col-lg-8 col-md-7 pr-0`}
-      >
-        <DappTop />
-        <UniversalDappUI />
-      </div>
-      {!instance.noTerminal && (
-        <div className={`${active === 'transactions' ? '' : 'd-none'}`}>
-          <TxList />
-        </div>
-      )}
-      <div
-        className={`${
-          active === 'settings' ? '' : 'd-none'
-        } col-xl-3 col-lg-4 col-md-5 pl-0`}
-      >
-        <SettingsUI />
-      </div>
-      <ul
-        className="nav nav-pills justify-content-center fixed-bottom row bg-light"
-        style={{ zIndex: 'auto' }}
-      >
-        <li
-          className={`nav-item col text-center p-2`}
-          onClick={() => {
-            setActive('functions');
-          }}
-        >
-          <span
-            className={`${active === 'functions' ? 'active' : ''} nav-link`}
-          >
-            Functions
-          </span>
-        </li>
-        {!instance.noTerminal && (
-          <li
-            className={`nav-item col text-center p-2`}
-            onClick={() => {
-              setActive('transactions');
-            }}
-          >
-            <span
-              className={`${
-                active === 'transactions' ? 'active' : ''
-              } nav-link`}
-            >
-              Transactions
-            </span>
-          </li>
-        )}
-        <li
-          className={`${
-            active === 'settings' ? 'active' : ''
-          } nav-item col text-center p-2`}
-          onClick={() => {
-            setActive('settings');
-          }}
-        >
-          <span className={`${active === 'settings' ? 'active' : ''} nav-link`}>
-            Settings
-          </span>
-        </li>
-      </ul>
-    </div>
-  ) : (
-    <div>
-      <div
-        className="row m-0 pt-3"
-        style={{
-          height: instance.noTerminal
-            ? window.innerHeight
-            : window.innerHeight - height - 5,
-          overflowY: 'auto',
-        }}
-      >
-        <div className="col-xl-9 col-lg-8 col-md-7 d-inline-block pr-0">
-          <div className="mx-3 my-2 row">
-            <div className="col-2 text-center">
-              <img src="/assets/logo.png" style={{ width: 95, height: 95 }} />
-            </div>
-            <DappTop />
-          </div>
-          <UniversalDappUI />
-        </div>
-        <div className="col-xl-3 col-lg-4 col-md-5 d-inline-block pl-0">
-          <SettingsUI />
-        </div>
-      </div>
-      {!instance.noTerminal && (
-        <>
-          <DragBar />
-          <RemixUiTerminal />
-        </>
-      )}
-    </div>
-  );
-};
-
-export default HomePage;
diff --git a/apps/remix-dapp/src/reducers/state.ts b/apps/remix-dapp/src/reducers/state.ts
index eee54d6b51..bcf01f4158 100644
--- a/apps/remix-dapp/src/reducers/state.ts
+++ b/apps/remix-dapp/src/reducers/state.ts
@@ -7,6 +7,7 @@ export const appInitialState: any = {
     decodedResponse: {},
     abi: [],
     solcVersion: {},
+    containers: []
   },
   settings: {
     sendValue: '0',
diff --git a/apps/remix-dapp/src/router.tsx b/apps/remix-dapp/src/router.tsx
deleted file mode 100644
index 370bfe4fc8..0000000000
--- a/apps/remix-dapp/src/router.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { createBrowserRouter } from 'react-router-dom';
-import HomePage from './pages/Home';
-
-const router = createBrowserRouter([
-  {
-    path: '/',
-    element: <HomePage />,
-  },
-]);
-
-export default router;