1
0
mirror of https://github.com/oceanprotocol/commons.git synced 2023-03-15 18:03:00 +01:00

amend UI for network select

This commit is contained in:
Max Berman 2020-01-13 11:31:36 +01:00
parent 05ad76c338
commit e153421771
2 changed files with 46 additions and 3 deletions

View File

@ -6,6 +6,25 @@
font-size: $font-size-mini; font-size: $font-size-mini;
} }
.networkListWrapper em {
display: inline-block;
border: 1px solid $brand-grey-lighter;
padding: 4px;
border-radius: $border-radius;
margin: 0 4px;
user-select: none;
}
.networkListWrapper em:after {
content: '';
display: inline-block;
width: 0;
height: 0;
border: 4px solid transparent;
border-bottom: none;
border-top: 4px solid $brand-grey-light;
}
.networkList { .networkList {
position: absolute; position: absolute;
border: 1px solid $brand-grey-lighter; border: 1px solid $brand-grey-lighter;
@ -13,9 +32,22 @@
border-radius: $border-radius; border-radius: $border-radius;
max-width: 200px; max-width: 200px;
display: none; display: none;
margin: 0;
width: 100%;
} }
.networkListWrapper:hover .networkList { .networkListWrapper em {
display: block;
border: 1px solid $brand-grey-lighter;
}
.networkListWrapper em span:after {
content: '';
border-right: 1px solid $brand-grey-lighter;
margin: 0 4px;
}
.networkListWrapper.on .networkList {
display: block; display: block;
} }

View File

@ -21,6 +21,7 @@ export const oceanConfig =
/* NETWORK SWITCHER */ /* NETWORK SWITCHER */
export function NetworkSwitcher() { export function NetworkSwitcher() {
const [isToggled, setIsToggled] = useState(false)
/* /*
useEffect(() => { useEffect(() => {
if (networkUrlParam !== '') { if (networkUrlParam !== '') {
@ -29,6 +30,10 @@ export function NetworkSwitcher() {
}, []) }, [])
*/ */
const handleTogle = () => {
setIsToggled(!isToggled)
}
const { network } = useContext(User) const { network } = useContext(User)
const switchNetwork = (networkName: string): any => const switchNetwork = (networkName: string): any =>
@ -37,8 +42,14 @@ export function NetworkSwitcher() {
//userContext.switchNetwork(networkName, getNetworkConfig(networkName)) //userContext.switchNetwork(networkName, getNetworkConfig(networkName))
return ( return (
<div className={styles.networkListWrapper}> <div
<em>Change</em> className={`${styles.networkListWrapper} ${
isToggled ? styles.on : ''
}`}
>
<em onClick={() => handleTogle()}>
<span>Change Network</span>
</em>
<ul className={styles.networkList}> <ul className={styles.networkList}>
{Object.keys(CONNECTIONS).map((networkName, i) => ( {Object.keys(CONNECTIONS).map((networkName, i) => (
<li <li