Hide tabs at extension width (#55)

This commit is contained in:
Armani Ferrante 2021-06-16 16:18:32 -07:00 committed by GitHub
parent 65284636de
commit 15c9845bdc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 33 additions and 29 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "@project-serum/swap-ui", "name": "@project-serum/swap-ui",
"version": "0.1.5", "version": "0.1.6",
"main": "dist/index.js", "main": "dist/index.js",
"types": "dist/index.d.ts", "types": "dist/index.d.ts",
"homepage": "https://github.com/project-serum/swap-ui", "homepage": "https://github.com/project-serum/swap-ui",

View File

@ -16,6 +16,7 @@ import {
} from "@material-ui/core"; } from "@material-ui/core";
import { TokenIcon } from "./Swap"; import { TokenIcon } from "./Swap";
import { useSwappableTokens } from "../context/TokenList"; import { useSwappableTokens } from "../context/TokenList";
import { useMediaQuery } from "@material-ui/core";
const useStyles = makeStyles((theme) => ({ const useStyles = makeStyles((theme) => ({
dialogContent: { dialogContent: {
@ -53,6 +54,7 @@ export default function TokenDialog({
const styles = useStyles(); const styles = useStyles();
const { swappableTokens, swappableTokensSollet, swappableTokensWormhole } = const { swappableTokens, swappableTokensSollet, swappableTokensWormhole } =
useSwappableTokens(); useSwappableTokens();
const displayTabs = !useMediaQuery("(max-width:450px)");
const selectedTokens = const selectedTokens =
tabSelection === 0 tabSelection === 0
? swappableTokens ? swappableTokens
@ -107,6 +109,7 @@ export default function TokenDialog({
))} ))}
</List> </List>
</DialogContent> </DialogContent>
{displayTabs && (
<DialogActions> <DialogActions>
<Tabs <Tabs
value={tabSelection} value={tabSelection}
@ -135,6 +138,7 @@ export default function TokenDialog({
/> />
</Tabs> </Tabs>
</DialogActions> </DialogActions>
)}
</Dialog> </Dialog>
); );
} }