From 776ae97d74d605a1f948670160b5fce10441bde7 Mon Sep 17 00:00:00 2001
From: Federico Luzzi <fedeluzzi00@gmail.com>
Date: Tue, 3 Aug 2021 12:15:20 +0200
Subject: [PATCH] feat: make network switcher dropdown usable on mobile

---
 src/App.js                             |  1 -
 src/components/DropdownSelect/index.js | 51 +++++++++++++++-----------
 src/components/SideNav/index.js        |  5 +++
 3 files changed, 35 insertions(+), 22 deletions(-)

diff --git a/src/App.js b/src/App.js
index a520010..b254e3a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -52,7 +52,6 @@ const ContentWrapper = styled.div`
 
 const Center = styled.div`
   height: 100%;
-  z-index: 9999;
   transition: width 0.25s ease;
   background-color: ${({ theme }) => theme.onlyLight};
 `;
diff --git a/src/components/DropdownSelect/index.js b/src/components/DropdownSelect/index.js
index 8929ac6..c22594f 100644
--- a/src/components/DropdownSelect/index.js
+++ b/src/components/DropdownSelect/index.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import styled from "styled-components";
 
 import Row, { RowBetween } from "../Row";
@@ -6,6 +6,7 @@ import { AutoColumn } from "../Column";
 import { ChevronDown as Arrow } from "react-feather";
 import { TYPE } from "../../Theme";
 import { StyledIcon } from "..";
+import { useClickAway } from "react-use";
 
 const Wrapper = styled.div`
   z-index: 20;
@@ -27,7 +28,7 @@ const Wrapper = styled.div`
 
 const Dropdown = styled.div`
   position: absolute;
-  top: 34px;
+  top: 38px;
   padding-top: 40px;
   width: calc(100% - 40px);
   background-color: ${({ theme }) => theme.bg1};
@@ -51,9 +52,15 @@ const ArrowStyled = styled(Arrow)`
 
 const DropdownSelect = ({ options, active, setActive, color }) => {
   const [showDropdown, toggleDropdown] = useState(false);
+  const dropdownRef = useRef(null);
+  const containerRef = useRef(null);
+  useClickAway(dropdownRef, (event) => {
+    if (showDropdown && !containerRef.current.contains(event.target))
+      toggleDropdown(false);
+  });
 
   return (
-    <Wrapper open={showDropdown} color={color}>
+    <Wrapper open={showDropdown} color={color} ref={containerRef}>
       <RowBetween
         onClick={() => toggleDropdown(!showDropdown)}
         justify="center"
@@ -65,24 +72,26 @@ const DropdownSelect = ({ options, active, setActive, color }) => {
       </RowBetween>
       {showDropdown && (
         <Dropdown>
-          <AutoColumn gap="20px">
-            {Object.keys(options).map((key, index) => {
-              let option = options[key];
-              return (
-                option !== active && (
-                  <Row
-                    onClick={() => {
-                      toggleDropdown(!showDropdown);
-                      setActive(option);
-                    }}
-                    key={index}
-                  >
-                    <TYPE.body fontSize={14}>{option}</TYPE.body>
-                  </Row>
-                )
-              );
-            })}
-          </AutoColumn>
+          <div ref={dropdownRef}>
+            <AutoColumn gap="20px">
+              {Object.keys(options).map((key, index) => {
+                let option = options[key];
+                return (
+                  option !== active && (
+                    <Row
+                      onClick={() => {
+                        toggleDropdown(!showDropdown);
+                        setActive(option);
+                      }}
+                      key={index}
+                    >
+                      <TYPE.body fontSize={14}>{option}</TYPE.body>
+                    </Row>
+                  )
+                );
+              })}
+            </AutoColumn>
+          </div>
         </Dropdown>
       )}
     </Wrapper>
diff --git a/src/components/SideNav/index.js b/src/components/SideNav/index.js
index 1f0e15e..c0225d9 100644
--- a/src/components/SideNav/index.js
+++ b/src/components/SideNav/index.js
@@ -217,6 +217,11 @@ function SideNav({ history }) {
       ) : (
         <MobileWrapper>
           <Title />
+          <DropdownSelect
+            active={selectedNetwork}
+            setActive={handleSelectedNetworkChange}
+            options={Object.values(SupportedNetwork)}
+          />
         </MobileWrapper>
       )}
     </Wrapper>