From 15c9845bdc95ad83f551a226eef4f542e12686cf Mon Sep 17 00:00:00 2001
From: Armani Ferrante <armaniferrante@gmail.com>
Date: Wed, 16 Jun 2021 16:18:32 -0700
Subject: [PATCH] Hide tabs at extension width (#55)

---
 package.json                   |  2 +-
 src/components/TokenDialog.tsx | 60 ++++++++++++++++++----------------
 2 files changed, 33 insertions(+), 29 deletions(-)

diff --git a/package.json b/package.json
index 21a1f93..1dbfff0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@project-serum/swap-ui",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "homepage": "https://github.com/project-serum/swap-ui",
diff --git a/src/components/TokenDialog.tsx b/src/components/TokenDialog.tsx
index 8e1bc18..d0f9217 100644
--- a/src/components/TokenDialog.tsx
+++ b/src/components/TokenDialog.tsx
@@ -16,6 +16,7 @@ import {
 } from "@material-ui/core";
 import { TokenIcon } from "./Swap";
 import { useSwappableTokens } from "../context/TokenList";
+import { useMediaQuery } from "@material-ui/core";
 
 const useStyles = makeStyles((theme) => ({
   dialogContent: {
@@ -53,6 +54,7 @@ export default function TokenDialog({
   const styles = useStyles();
   const { swappableTokens, swappableTokensSollet, swappableTokensWormhole } =
     useSwappableTokens();
+  const displayTabs = !useMediaQuery("(max-width:450px)");
   const selectedTokens =
     tabSelection === 0
       ? swappableTokens
@@ -107,34 +109,36 @@ export default function TokenDialog({
           ))}
         </List>
       </DialogContent>
-      <DialogActions>
-        <Tabs
-          value={tabSelection}
-          onChange={(e, v) => setTabSelection(v)}
-          classes={{
-            indicator: styles.tabIndicator,
-          }}
-        >
-          <Tab
-            value={0}
-            className={styles.tab}
-            classes={{ selected: styles.tabSelected }}
-            label="Main"
-          />
-          <Tab
-            value={1}
-            className={styles.tab}
-            classes={{ selected: styles.tabSelected }}
-            label="Wormhole"
-          />
-          <Tab
-            value={2}
-            className={styles.tab}
-            classes={{ selected: styles.tabSelected }}
-            label="Sollet"
-          />
-        </Tabs>
-      </DialogActions>
+      {displayTabs && (
+        <DialogActions>
+          <Tabs
+            value={tabSelection}
+            onChange={(e, v) => setTabSelection(v)}
+            classes={{
+              indicator: styles.tabIndicator,
+            }}
+          >
+            <Tab
+              value={0}
+              className={styles.tab}
+              classes={{ selected: styles.tabSelected }}
+              label="Main"
+            />
+            <Tab
+              value={1}
+              className={styles.tab}
+              classes={{ selected: styles.tabSelected }}
+              label="Wormhole"
+            />
+            <Tab
+              value={2}
+              className={styles.tab}
+              classes={{ selected: styles.tabSelected }}
+              label="Sollet"
+            />
+          </Tabs>
+        </DialogActions>
+      )}
     </Dialog>
   );
 }