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",
"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",

60
src/components/TokenDialog.tsx
View File

@ -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>
);
}