split homepage

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

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;

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;

apps/remix-dapp/src/pages/Home/index.tsx

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

apps/remix-dapp/src/reducers/state.ts

@@ -7,6 +7,7 @@ export const appInitialState: any = {
     decodedResponse: {},
     abi: [],
     solcVersion: {},
+    containers: []
   },
   settings: {
     sendValue: '0',

apps/remix-dapp/src/router.tsx

@@ -1,11 +0,0 @@
-import { createBrowserRouter } from 'react-router-dom';
-import HomePage from './pages/Home';
-
-const router = createBrowserRouter([
-  {
-    path: '/',
-    element: <HomePage />,
-  },
-]);
-
-export default router;