glias · homu-chain · Dec 9, 2020 · Dec 11, 2020 · Dec 14, 2020 · Dec 14, 2020
diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
     "react-scripts": "3.4.3",
     "react-test-renderer": "16.13.1",
     "react-transition-group": "^4.4.1",
+    "sanitize.css": "^12.0.1",
     "styled-components": "5.2.0",
     "unstated-next": "1.1.0",
     "web3": "1.2.6",

diff --git a/public/index.html b/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
@@ -43,10 +43,3 @@
 
   </style>
 </html>
-<style>
-  #root {
-    min-width: 1000px;
-    min-height: 600px;
-    height: 100vh;
-  }
-</style>
diff --git a/src/components/Header/AssetsManager/index.tsx b/src/components/Header/AssetsManager/index.tsx
@@ -35,7 +35,7 @@ const AssetManagerWrapper = styled.div`
   overflow-y: auto;
 `
 
-export const AssetManager: React.FC = () => {
+export const AssetManagerControl = () => {
   // check and clean the pending cell when the cell was dead
   useEffect(() => {
     const taskId = setInterval(() => {
@@ -49,12 +49,18 @@ export const AssetManager: React.FC = () => {
     }
   })
 
+  return (
+    <AssetManagerContainer.Provider>
+      <Control />
+    </AssetManagerContainer.Provider>
+  )
+}
+
+export const AssetManager: React.FC = () => {
   return (
     <AssetManagerWrapper>
       <MemoryRouter>
-        <AssetManagerContainer.Provider>
-          <Control />
-        </AssetManagerContainer.Provider>
+        <AssetManagerControl />
       </MemoryRouter>
     </AssetManagerWrapper>
   )

diff --git a/src/components/Header/styled.tsx b/src/components/Header/styled.tsx
@@ -88,7 +88,6 @@ export const HeaderPanel = styled.div`
 
 export const HeaderLogo = styled.h1`
   margin: 0 0 0 10px;
-  font-family: Lato;
   font-size: 18px;
   font-weight: 800;
   font-stretch: normal;

diff --git a/src/components/RippleSpinner/index.tsx b/src/components/RippleSpinner/index.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+import './ripple.css'
+
+export const RippleSpinner = () => {
+  return (
+    <div className="lds-ripple">
+      <div />
+      <div />
+    </div>
+  )
+}
diff --git a/src/components/RippleSpinner/ripple.css b/src/components/RippleSpinner/ripple.css
@@ -0,0 +1,32 @@
+.lds-ripple {
+  display: inline-block;
+  position: relative;
+  width: 300px;
+  height: 300px;
+}
+.lds-ripple div {
+  position: absolute;
+  border: 4px solid #6b70e0;
+  opacity: 1;
+  border-radius: 50%;
+  animation: lds-ripple 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+}
+.lds-ripple div:nth-child(2) {
+  animation-delay: -0.75s;
+}
+@keyframes lds-ripple {
+  0% {
+    top: 142px;
+    left: 142px;
+    width: 0;
+    height: 0;
+    opacity: 1;
+  }
+  100% {
+    top: 0px;
+    left: 0px;
+    width: 270px;
+    height: 270px;
+    opacity: 0;
+  }
+}
diff --git a/src/index-desktop.tsx b/src/index-desktop.tsx
@@ -0,0 +1,29 @@
+import 'ant-design-icons/dist/anticons.min.css'
+import React from 'react'
+import styled from 'styled-components'
+import { TransactionListenerContainer } from './containers/listener'
+import { OrderContainer } from './containers/order'
+import { WalletContainer } from './containers/wallet'
+import './index.css'
+import Routers from './routes'
+import './utils/i18n'
+
+const AppDiv = styled.div`
+  width: 100%;
+  height: 100%;
+`
+const DesktopApp: React.FC = () => {
+  return (
+    <WalletContainer.Provider>
+      <TransactionListenerContainer.Provider>
+        <OrderContainer.Provider>
+          <AppDiv>
+            <Routers />
+          </AppDiv>
+        </OrderContainer.Provider>
+      </TransactionListenerContainer.Provider>
+    </WalletContainer.Provider>
+  )
+}
+
+export default DesktopApp
diff --git a/src/index-mobile.tsx b/src/index-mobile.tsx
@@ -0,0 +1,27 @@
+import 'ant-design-icons/dist/anticons.min.css'
+import 'mobile/index.css'
+import Routers from 'mobile/route'
+import { theme } from 'mobile/theme'
+import React from 'react'
+import 'sanitize.css'
+import { ThemeProvider } from 'styled-components'
+import { TransactionListenerContainer } from './containers/listener'
+import { OrderContainer } from './containers/order'
+import { WalletContainer } from './containers/wallet'
+import './utils/i18n'
+
+const MobileApp: React.FC = () => {
+  return (
+    <ThemeProvider theme={theme}>
+      <WalletContainer.Provider>
+        <TransactionListenerContainer.Provider>
+          <OrderContainer.Provider>
+            <Routers />
+          </OrderContainer.Provider>
+        </TransactionListenerContainer.Provider>
+      </WalletContainer.Provider>
+    </ThemeProvider>
+  )
+}
+
+export default MobileApp
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,28 +1,16 @@
-import 'ant-design-icons/dist/anticons.min.css'
 import React from 'react'
 import ReactDOM from 'react-dom'
-import styled from 'styled-components'
-import { TransactionListenerContainer } from './containers/listener'
-import { OrderContainer } from './containers/order'
-import { WalletContainer } from './containers/wallet'
-import './index.css'
-import Routers from './routes'
-import './utils/i18n'
+import { RippleSpinner } from './components/RippleSpinner'
+import { checkIsMobileAndTablet } from './utils/user-agent'
 
-const AppDiv = styled.div`
-  width: 100%;
-  height: 100%;
-`
+const Root = () => {
+  const App = React.lazy(() => (checkIsMobileAndTablet() ? import('./index-mobile') : import('./index-desktop')))
 
-ReactDOM.render(
-  <WalletContainer.Provider>
-    <TransactionListenerContainer.Provider>
-      <OrderContainer.Provider>
-        <AppDiv>
-          <Routers />
-        </AppDiv>
-      </OrderContainer.Provider>
-    </TransactionListenerContainer.Provider>
-  </WalletContainer.Provider>,
-  document.getElementById('root'),
-)
+  return (
+    <React.Suspense fallback={<RippleSpinner />}>
+      <App />
+    </React.Suspense>
+  )
+}
+
+ReactDOM.render(<Root />, document.getElementById('root'))
diff --git a/src/mobile/components/AssetManager/index.tsx b/src/mobile/components/AssetManager/index.tsx
@@ -0,0 +1,15 @@
+import { AssetManagerControl } from 'components/Header/AssetsManager'
+import React from 'react'
+import styled from 'styled-components'
+
+const MobileAssetManagerWrapper = styled.div`
+  background: #fff;
+`
+
+export const AssetManager = () => {
+  return (
+    <MobileAssetManagerWrapper>
+      <AssetManagerControl />
+    </MobileAssetManagerWrapper>
+  )
+}
diff --git a/src/mobile/components/Header/AppHeader.tsx b/src/mobile/components/Header/AppHeader.tsx
@@ -0,0 +1,115 @@
+import { MenuOutlined } from '@ant-design/icons'
+import { Modal } from 'antd'
+import MetaMaskLogo from 'assets/img/wallet/metamask.png'
+import { getChainData, getProviderOptions } from 'components/Header/chain'
+import WalletContainer from 'containers/wallet'
+import React, { useCallback, useEffect, useMemo } from 'react'
+import { Link, useHistory } from 'react-router-dom'
+import styled from 'styled-components'
+import { ellipsisCenter } from 'utils/common'
+import i18n from 'utils/i18n'
+import Web3Modal from 'web3modal'
+
+const AppHeaderWrapper = styled.header`
+  padding: 0 8px;
+  height: 60px;
+  width: 100vw;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: ${props => props.theme.primaryColor};
+
+  .logo a {
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 800;
+    line-height: 22px;
+    letter-spacing: 0em;
+    text-align: left;
+    color: #ffffff;
+  }
+`
+
+const ConnectionButton = styled.div`
+  background-color: #ffffff;
+  color: ${props => props.theme.primaryColor};
+  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.08);
+  border-radius: 10px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 4px;
+
+  & > * {
+    margin: 4px;
+  }
+
+  img {
+    width: 20px;
+    height: 20px;
+  }
+`
+
+const CLOSE_BY_THE_USER_ERROR_MSG = 'Modal closed by user'
+const UNKNOWN_CONNECT_WALLET_FAILED = 'Connect wallet failed, please check wallet settings.'
+
+export const AppHeader = () => {
+  const { connectWallet, resetWallet, ckbWallet, connectStatus, web3ModalRef } = WalletContainer.useContainer()
+  const history = useHistory()
+
+  const handleWalletConnect = useCallback(() => {
+    connectWallet().catch(error => {
+      resetWallet()
+      if (error === CLOSE_BY_THE_USER_ERROR_MSG) {
+        return
+      }
+      Modal.error({
+        title: 'Connection Error',
+        content: error?.message ?? error ?? UNKNOWN_CONNECT_WALLET_FAILED,
+      })
+    })
+  }, [connectWallet, resetWallet])
+
+  useEffect(() => {
+    const modal = new Web3Modal({
+      network: getChainData(1).network,
+      cacheProvider: true,
+      providerOptions: getProviderOptions(),
+    })
+
+    web3ModalRef.current = modal
+
+    if (modal.cachedProvider) {
+      handleWalletConnect()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  const connectButtonElement = useMemo(() => {
+    if (connectStatus === 'connected')
+      return (
+        <ConnectionButton onClick={() => history.push('/assets')}>
+          <span>
+            <img src={MetaMaskLogo} alt="metamask" />
+          </span>
+          <span>{ellipsisCenter(ckbWallet.address, 6, 4)}</span>
+          <MenuOutlined translate="menu" />
+        </ConnectionButton>
+      )
+
+    if (connectStatus === 'connecting') return <ConnectionButton>{i18n.t('header.connecting')}</ConnectionButton>
+
+    return <ConnectionButton onClick={handleWalletConnect}>{i18n.t('header.wallet')}</ConnectionButton>
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [connectStatus])
+
+  return (
+    <AppHeaderWrapper>
+      <div className="logo">
+        <Link to="/">GLIASWAP</Link>
+      </div>
+      {connectButtonElement}
+    </AppHeaderWrapper>
+  )
+}
diff --git a/src/mobile/components/Header/NavigationMenu.tsx b/src/mobile/components/Header/NavigationMenu.tsx
@@ -0,0 +1,51 @@
+import { Menu } from 'antd'
+import React from 'react'
+import { useHistory, useLocation } from 'react-router-dom'
+import styled from 'styled-components'
+import i18n from 'utils/i18n'
+
+const NavigatorMenuWrapper = styled.div`
+  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.08);
+
+  .ant-menu {
+    background-color: #5c61da;
+    color: #ffffff;
+    text-align: center;
+  }
+  .ant-menu-horizontal {
+    border-bottom: none;
+  }
+
+  .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover,
+  .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover,
+  .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-active,
+  .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-active,
+  .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-open,
+  .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-open,
+  .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-selected,
+  .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected {
+    color: #ffffff;
+    font-weight: 600;
+    border-bottom: 4px solid #ffffff;
+  }
+`
+
+export const NavigationMenu = () => {
+  const { pathname } = useLocation()
+  const history = useHistory()
+
+  return (
+    <NavigatorMenuWrapper>
+      <Menu
+        defaultSelectedKeys={[pathname.substring(1) || 'trade']}
+        mode="horizontal"
+        className="menu"
+        onClick={e => history.push(`/${e.key}`)}
+      >
+        <Menu.Item key="trade">{i18n.t(`header.Trade`)}</Menu.Item>
+        <Menu.Item key="pool">{i18n.t(`header.Pool`)}</Menu.Item>
+        <Menu.Item key="match">{i18n.t(`header.Match`)}</Menu.Item>
+      </Menu>
+    </NavigatorMenuWrapper>
+  )
+}
diff --git a/src/mobile/components/Header/index.ts b/src/mobile/components/Header/index.ts
@@ -0,0 +1,2 @@
+export { AppHeader } from './AppHeader'
+export { NavigationMenu } from './NavigationMenu'
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { AppHeader } from './AppHeader'
		export { NavigationMenu } from './NavigationMenu'