project-serum
/
swap-ui
mirror of https://github.com/project-serum/swap-ui.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
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",

60
src/components/TokenDialog.tsx
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,34 +109,36 @@ export default function TokenDialog({
))} ))}
</List> </List>
</DialogContent> </DialogContent>
<DialogActions> {displayTabs && (
<Tabs <DialogActions>
value={tabSelection} <Tabs
onChange={(e, v) => setTabSelection(v)} value={tabSelection}
classes={{ onChange={(e, v) => setTabSelection(v)}
indicator: styles.tabIndicator, classes={{
}} indicator: styles.tabIndicator,
> }}
<Tab >
value={0} <Tab
className={styles.tab} value={0}
classes={{ selected: styles.tabSelected }} className={styles.tab}
label="Main" classes={{ selected: styles.tabSelected }}
/> label="Main"
<Tab />
value={1} <Tab
className={styles.tab} value={1}
classes={{ selected: styles.tabSelected }} className={styles.tab}
label="Wormhole" classes={{ selected: styles.tabSelected }}
/> label="Wormhole"
<Tab />
value={2} <Tab
className={styles.tab} value={2}
classes={{ selected: styles.tabSelected }} className={styles.tab}
label="Sollet" classes={{ selected: styles.tabSelected }}
/> label="Sollet"
</Tabs> />
</DialogActions> </Tabs>
</DialogActions>
)}
</Dialog> </Dialog>
); );
} }