From 697b3b89cc6e9e0e3267e57e341d79f88444be89 Mon Sep 17 00:00:00 2001
From: Hideo Hattori <hhatto.jp@gmail.com>
Date: Sun, 16 Jan 2022 23:43:52 +0900
Subject: [PATCH] use local storage

---
 .../organisms/ControlChain/destination.tsx    | 17 ------
 .../organisms/ControlChain/index.tsx          | 58 -------------------
 packages/web/src/pages/_app.tsx               | 12 ++--
 packages/web/src/pages/index.tsx              |  8 ---
 4 files changed, 6 insertions(+), 89 deletions(-)
 delete mode 100644 packages/web/src/components/organisms/ControlChain/destination.tsx
 delete mode 100644 packages/web/src/components/organisms/ControlChain/index.tsx

diff --git a/packages/web/src/components/organisms/ControlChain/destination.tsx b/packages/web/src/components/organisms/ControlChain/destination.tsx
deleted file mode 100644
index 37b74f41..00000000
--- a/packages/web/src/components/organisms/ControlChain/destination.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { NextRouter } from 'next/router'
-import { ChainName } from 'src/fixtures/wallet/utility'
-import { SPLITTER } from './index'
-
-export const destination = (router: NextRouter, network: ChainName) => {
-  const index = router.pathname.split(SPLITTER).findIndex(x => x === '[network]')
-  const replaced =
-    index > -1
-      ? router.asPath
-          .split(SPLITTER)
-          .map((v, i) => {
-            return i === index ? network : v
-          })
-          .join(SPLITTER)
-      : `/${network}${router.asPath}`
-  return replaced
-}
diff --git a/packages/web/src/components/organisms/ControlChain/index.tsx b/packages/web/src/components/organisms/ControlChain/index.tsx
deleted file mode 100644
index b038f02c..00000000
--- a/packages/web/src/components/organisms/ControlChain/index.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React, { useMemo } from 'react'
-import { useDetectChain, useProvider } from 'src/fixtures/wallet/hooks'
-import { Modal } from 'antd'
-import Link from 'next/link'
-import { ChainName } from 'src/fixtures/wallet/utility'
-import styled from 'styled-components'
-import { useNetworkInRouter } from 'src/fixtures/utility'
-
-export const NETWORK_DEPENDENTS = [/^\/0x/, /^\/create/, /^\/invite/, /^\/liquidity/, /^\/positions/, /^\/stats/]
-
-const Content = styled.div`
-  display: grid;
-  gap: 2rem;
-  a {
-    display: block;
-    padding: 1rem;
-    text-align: center;
-    border-radius: 5px;
-    border: 2px solid;
-  }
-`
-
-export const SPLITTER = '/'
-const hyphenToCapitalize = (str: string) =>
-  str
-    .split(/(\s|-)+/)
-    .map(v => {
-      return v === '-' ? '' : v.charAt(0).toUpperCase() + v.slice(1).toLowerCase()
-    })
-    .join(' ')
-
-export const ControlChain = ({ network }: { network?: ChainName }) => {
-  const { router } = useNetworkInRouter()
-  const { ethersProvider } = useProvider()
-  const { name } = useDetectChain(ethersProvider)
-  const shouldChooseNetwork = useMemo(() => NETWORK_DEPENDENTS.some(test => test.test(router.asPath)), [router.asPath])
-
-  return network !== undefined && name !== undefined && network !== name ? (
-    <Modal visible={true} closable={false} title="Please switch the network" footer={null} zIndex={9999}>
-      {`Your wallet is connected to ${hyphenToCapitalize(
-        name
-      )}. But this page is only available in ${hyphenToCapitalize(network)}.`}
-    </Modal>
-  ) : shouldChooseNetwork ? (
-    <Modal visible={true} closable={false} title="Select a network" footer={null} zIndex={9999}>
-      <Content>
-        <Link passHref href={`/ethereum${router.asPath}`}>
-          <a>Ethereum</a>
-        </Link>
-        <Link passHref href={`/arbitrum-one${router.asPath}`}>
-          <a>Arbitrum</a>
-        </Link>
-      </Content>
-    </Modal>
-  ) : (
-    <></>
-  )
-}
diff --git a/packages/web/src/pages/_app.tsx b/packages/web/src/pages/_app.tsx
index 6170f54a..17d5eebd 100644
--- a/packages/web/src/pages/_app.tsx
+++ b/packages/web/src/pages/_app.tsx
@@ -19,7 +19,7 @@ const client = new ApolloClient({
 })
 
 class NextApp extends App<AppInitialProps & WithApolloProps<{}>> {
-  state = { isCurrencyDEV: true, web3: undefined, ethersProvider: undefined, selectedChain: 'ethereum' }
+  state = { isCurrencyDEV: true, web3: undefined, ethersProvider: undefined, selectedChain: 'ethereum' as ChainName }
 
   componentDidMount = () => {
     message.config({
@@ -28,8 +28,8 @@ class NextApp extends App<AppInitialProps & WithApolloProps<{}>> {
 
     const settings = localStorage.getItem('settings')
     if (settings) {
-      const { currency } = JSON.parse(settings)
-      this.setState({ isCurrencyDEV: currency === 'DEV' })
+      const { currency, selectedChain } = JSON.parse(settings)
+      this.setState({ isCurrencyDEV: currency === 'DEV', selectedChain })
     }
 
     // Google Analytics
@@ -60,9 +60,9 @@ class NextApp extends App<AppInitialProps & WithApolloProps<{}>> {
   setChain = (chain: ChainName) => {
     localStorage.setItem(
       'settings',
-      JSON.stringify({ currency: !this.state.isCurrencyDEV ? 'DEV' : 'USD', selectedChain: chain })
+      JSON.stringify({ currency: this.state.isCurrencyDEV ? 'DEV' : 'USD', selectedChain: chain })
     )
-    this.setState({ isCurrencyDEV: !this.state.isCurrencyDEV, selectedChain: chain })
+    this.setState({ isCurrencyDEV: this.state.isCurrencyDEV, selectedChain: chain })
   }
 
   render() {
@@ -81,7 +81,7 @@ class NextApp extends App<AppInitialProps & WithApolloProps<{}>> {
             value={{
               isCurrencyDEV: this.state.isCurrencyDEV,
               toggleCurrency: this.toggleCurrency,
-              selectedChain: 'ethereum',
+              selectedChain: this.state.selectedChain,
               setChain: this.setChain
             }}
           >
diff --git a/packages/web/src/pages/index.tsx b/packages/web/src/pages/index.tsx
index de3626da..2e4094b9 100644
--- a/packages/web/src/pages/index.tsx
+++ b/packages/web/src/pages/index.tsx
@@ -10,8 +10,6 @@ import { DevChart } from 'src/components/organisms/DevChart'
 import { Container } from 'src/components/atoms/Container'
 import styled from 'styled-components'
 import { useDetectChain, useProvider } from 'src/fixtures/wallet/hooks'
-import Text from 'antd/lib/typography/Text'
-import { ControlChain } from 'src/components/organisms/ControlChain'
 
 type Props = {}
 
@@ -22,16 +20,11 @@ const StyledHeadline = styled(Headline)`
 const DevProtocolStats = (_: Props) => {
   const { nonConnectedEthersProvider } = useProvider()
   const { name: chain } = useDetectChain(nonConnectedEthersProvider)
-  const isL1 = chain === 'ethereum'
 
   return chain === undefined ? (
     <div style={{ display: 'flex', minHeight: '100vh', justifyContent: 'center', alignItems: 'center' }}>
       <Spin />
     </div>
-  ) : !isL1 ? (
-    <div style={{ display: 'flex', minHeight: '100vh', justifyContent: 'center', alignItems: 'center' }}>
-      <Text type="secondary">(Not provide this feature yet on L2)</Text>
-    </div>
   ) : (
     <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
       <Header />
@@ -47,7 +40,6 @@ const DevProtocolStats = (_: Props) => {
       <Container>
         <DevChart />
       </Container>
-      <ControlChain />
       <Footer />
     </div>
   )