add NetworkSelector component

This commit is contained in:
Agustín Longoni 2021-05-27 16:26:17 -03:00
parent 5eef50ea4a
commit e697aba2dd
5 changed files with 109 additions and 116 deletions

View File

@ -7,6 +7,7 @@ import * as React from 'react'
import { Link } from 'react-router-dom'
import Provider from './Provider'
import NetworkSelector from './NetworkSelector'
import Spacer from 'src/components/Spacer'
import Col from 'src/components/layout/Col'
@ -55,6 +56,7 @@ const styles = () => ({
const Layout = ({ classes, providerDetails, providerInfo }) => {
const { clickAway, open, toggle } = useStateHandler()
const { clickAway: clickAwayNetworks, open: openNetworks, toggle: toggleNetworks } = useStateHandler()
return (
<Row className={classes.summary}>
@ -90,6 +92,32 @@ const Layout = ({ classes, providerDetails, providerInfo }) => {
</Popper>
)}
/>
<NetworkSelector
open={openNetworks}
toggle={toggleNetworks}
render={(networkRef) => (
<Popper
anchorEl={networkRef.current}
className={classes.popper}
open={openNetworks}
placement="bottom"
popperOptions={{ positionFixed: true }}
>
{({ TransitionProps }) => (
<Grow {...TransitionProps}>
<>
<ClickAwayListener mouseEvent="onClick" onClickAway={clickAwayNetworks} touchEvent={false}>
<List className={classes.root} component="div">
Networks list
{/* {providerDetails} */}
</List>
</ClickAwayListener>
</>
</Grow>
)}
</Popper>
)}
/>
</Row>
)
}

View File

@ -0,0 +1,69 @@
import IconButton from '@material-ui/core/IconButton'
import { withStyles } from '@material-ui/core/styles'
import ExpandLess from '@material-ui/icons/ExpandLess'
import ExpandMore from '@material-ui/icons/ExpandMore'
import * as React from 'react'
import NetworkLabel from './NetworkLabel'
import Col from 'src/components/layout/Col'
import Divider from 'src/components/layout/Divider'
import { screenSm, sm } from 'src/theme/variables'
const styles = () => ({
root: {
alignItems: 'center',
display: 'flex',
height: '100%',
[`@media (min-width: ${screenSm}px)`]: {
flexBasis: '284px' /* should be 184px */,
marginRight: '20px',
},
},
provider: {
alignItems: 'center',
cursor: 'pointer',
display: 'flex',
flex: '1 1 auto',
padding: sm,
[`@media (min-width: ${screenSm}px)`]: {
paddingLeft: sm,
paddingRight: sm,
},
},
expand: {
height: '30px',
width: '30px',
},
})
class NetworkSelector extends React.Component<any> {
myRef
constructor(props) {
super(props)
this.myRef = React.createRef()
}
render() {
const { render, classes, open, toggle } = this.props
return (
<>
<div className={classes.root} ref={this.myRef}>
<Col className={classes.provider} end="sm" middle="xs" onClick={toggle}>
<NetworkLabel />
<IconButton className={classes.expand} disableRipple>
{open ? <ExpandLess /> : <ExpandMore />}
</IconButton>
</Col>
<Divider />
</div>
{render(this.myRef)}
</>
)
}
}
export default withStyles(styles as any)(NetworkSelector)

View File

@ -16,7 +16,7 @@ import { upperFirst } from 'src/utils/css'
import { ETHEREUM_NETWORK } from 'src/config/networks/network.d'
import { getExplorerInfo } from 'src/config'
import { KeyRing } from 'src/components/AppLayout/Header/components/KeyRing'
import { CircleDot } from '../CircleDot'
/* import { CircleDot } from '../CircleDot' */
import { createStyles } from '@material-ui/core'
import styled from 'styled-components'
@ -108,7 +108,7 @@ const useStyles = makeStyles(styles)
export const UserDetails = ({
connected,
network,
/* network, */
onDisconnect,
openDashboard,
provider,
@ -160,7 +160,7 @@ export const UserDetails = ({
</Paragraph>
</Row>
<Hairline margin="xs" />
<Row className={classes.details}>
{/* <Row className={classes.details}>
<Paragraph align="right" className={classes.labels} noMargin>
Network
</Paragraph>
@ -169,8 +169,8 @@ export const UserDetails = ({
<Paragraph align="right" className={classes.labels} noMargin weight="bolder">
{upperFirst(ETHEREUM_NETWORK[network])}
</Paragraph>
</Row>
<Hairline margin="xs" />
</Row>
<Hairline margin="xs" /> */}
{openDashboard && (
<Row className={classes.dashboard}>
<Button color="primary" fullWidth onClick={openDashboard} size="medium" variant="contained">

View File

@ -2,7 +2,6 @@ import { makeStyles } from '@material-ui/core/styles'
import * as React from 'react'
import { EthHashInfo, Text } from '@gnosis.pm/safe-react-components'
import NetworkLabel from '../NetworkLabel'
import Col from 'src/components/layout/Col'
import Paragraph from 'src/components/layout/Paragraph'
import WalletIcon from '../WalletIcon'
@ -105,9 +104,6 @@ const ProviderInfo = ({ connected, provider, userAddress }: ProviderInfoProps):
</Paragraph> */}
</div>
</Col>
<Col className={classes.networkLabel} layout="column" start="sm">
<NetworkLabel />
</Col>
</>
)
}

114
yarn.lock
View File

@ -1393,7 +1393,7 @@
ripemd160 "^2.0.2"
sha3 "^2.1.3"
"@eslint/eslintrc@^0.4.0", "@eslint/eslintrc@^0.4.1":
"@eslint/eslintrc@^0.4.1":
version "0.4.1"
resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.1.tgz#442763b88cecbe3ee0ec7ca6d6dd6168550cbf14"
integrity sha512-5v7TDE9plVhvxQeWLXDTvFvJBdH6pEsdnl2g/dAptmuFEPedQ4Erq5rsDsX+mvAM610IhNaO2W5V1dOOnDKxkQ==
@ -1903,7 +1903,7 @@
dependencies:
invariant "2"
"@ledgerhq/devices@^5.50.0", "@ledgerhq/devices@^5.51.1":
"@ledgerhq/devices@^5.51.1":
version "5.51.1"
resolved "https://registry.yarnpkg.com/@ledgerhq/devices/-/devices-5.51.1.tgz#d741a4a5d8f17c2f9d282fd27147e6fe1999edb7"
integrity sha512-4w+P0VkbjzEXC7kv8T1GJ/9AVaP9I6uasMZ/JcdwZBS3qwvKo5A5z9uGhP5c7TvItzcmPb44b5Mw2kT+WjUuAA==
@ -3822,18 +3822,6 @@
semver "^7.3.2"
tsutils "^3.17.1"
"@typescript-eslint/experimental-utils@4.22.1":
version "4.22.1"
resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.22.1.tgz#3938a5c89b27dc9a39b5de63a62ab1623ab27497"
integrity sha512-svYlHecSMCQGDO2qN1v477ax/IDQwWhc7PRBiwAdAMJE7GXk5stF4Z9R/8wbRkuX/5e9dHqbIWxjeOjckK3wLQ==
dependencies:
"@types/json-schema" "^7.0.3"
"@typescript-eslint/scope-manager" "4.22.1"
"@typescript-eslint/types" "4.22.1"
"@typescript-eslint/typescript-estree" "4.22.1"
eslint-scope "^5.0.0"
eslint-utils "^2.0.0"
"@typescript-eslint/experimental-utils@4.23.0", "@typescript-eslint/experimental-utils@^4.0.1":
version "4.23.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.23.0.tgz#f2059434cd6e5672bfeab2fb03b7c0a20622266f"
@ -3867,14 +3855,6 @@
"@typescript-eslint/typescript-estree" "4.23.0"
debug "^4.1.1"
"@typescript-eslint/scope-manager@4.22.1":
version "4.22.1"
resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.22.1.tgz#5bb357f94f9cd8b94e6be43dd637eb73b8f355b4"
integrity sha512-d5bAiPBiessSmNi8Amq/RuLslvcumxLmyhf1/Xa9IuaoFJ0YtshlJKxhlbY7l2JdEk3wS0EnmnfeJWSvADOe0g==
dependencies:
"@typescript-eslint/types" "4.22.1"
"@typescript-eslint/visitor-keys" "4.22.1"
"@typescript-eslint/scope-manager@4.23.0":
version "4.23.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.23.0.tgz#8792ef7eacac122e2ec8fa2d30a59b8d9a1f1ce4"
@ -3888,11 +3868,6 @@
resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-3.10.1.tgz#1d7463fa7c32d8a23ab508a803ca2fe26e758727"
integrity sha512-+3+FCUJIahE9q0lDi1WleYzjCwJs5hIsbugIgnbB+dSCYUxl8L6PwmsyOPFZde2hc1DlTo/xnkOgiTLSyAbHiQ==
"@typescript-eslint/types@4.22.1":
version "4.22.1"
resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.22.1.tgz#bf99c6cec0b4a23d53a61894816927f2adad856a"
integrity sha512-2HTkbkdAeI3OOcWbqA8hWf/7z9c6gkmnWNGz0dKSLYLWywUlkOAQ2XcjhlKLj5xBFDf8FgAOF5aQbnLRvgNbCw==
"@typescript-eslint/types@4.23.0":
version "4.23.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.23.0.tgz#da1654c8a5332f4d1645b2d9a1c64193cae3aa3b"
@ -3912,19 +3887,6 @@
semver "^7.3.2"
tsutils "^3.17.1"
"@typescript-eslint/typescript-estree@4.22.1":
version "4.22.1"
resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.22.1.tgz#dca379eead8cdfd4edc04805e83af6d148c164f9"
integrity sha512-p3We0pAPacT+onSGM+sPR+M9CblVqdA9F1JEdIqRVlxK5Qth4ochXQgIyb9daBomyQKAXbygxp1aXQRV0GC79A==
dependencies:
"@typescript-eslint/types" "4.22.1"
"@typescript-eslint/visitor-keys" "4.22.1"
debug "^4.1.1"
globby "^11.0.1"
is-glob "^4.0.1"
semver "^7.3.2"
tsutils "^3.17.1"
"@typescript-eslint/typescript-estree@4.23.0":
version "4.23.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.23.0.tgz#0753b292097523852428a6f5a1aa8ccc1aae6cd9"
@ -3945,14 +3907,6 @@
dependencies:
eslint-visitor-keys "^1.1.0"
"@typescript-eslint/visitor-keys@4.22.1":
version "4.22.1"
resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.22.1.tgz#6045ae25a11662c671f90b3a403d682dfca0b7a6"
integrity sha512-WPkOrIRm+WCLZxXQHCi+WG8T2MMTUFR70rWjdWYddLT7cEfb2P4a3O/J2U1FBVsSFTocXLCoXWY6MZGejeStvQ==
dependencies:
"@typescript-eslint/types" "4.22.1"
eslint-visitor-keys "^2.0.0"
"@typescript-eslint/visitor-keys@4.23.0":
version "4.23.0"
resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.23.0.tgz#7215cc977bd3b4ef22467b9023594e32f9e4e455"
@ -4707,7 +4661,7 @@ array-unique@^0.3.2:
resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
integrity sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=
array.prototype.flat@^1.2.1, array.prototype.flat@^1.2.3, array.prototype.flat@^1.2.4:
array.prototype.flat@^1.2.1, array.prototype.flat@^1.2.4:
version "1.2.4"
resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.2.4.tgz#6ef638b43312bd401b4c6199fdec7e2dc9e9a123"
integrity sha512-4470Xi3GAPAjZqFcljX2xzckv1qeKPizoNkiS0+O4IoPR2ZNpcjE0pkhdihlDouK+x6QOast26B4Q/O9DJnwSg==
@ -6969,11 +6923,6 @@ constants-browserify@^1.0.0:
resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
integrity sha1-wguW2MYXdIqvHBYCF2DNJ/y4y3U=
contains-path@^0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/contains-path/-/contains-path-0.1.0.tgz#fe8cf184ff6670b6baef01a9d4861a5cbec4120a"
integrity sha1-/ozxhP9mcLa67wGp1IYaXL7EEgo=
contains-path@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/contains-path/-/contains-path-1.0.0.tgz#3458b332185603e8eed18f518d4a10888a3abc91"
@ -7995,14 +7944,6 @@ dns-txt@^2.0.2:
dependencies:
buffer-indexof "^1.0.0"
doctrine@1.5.0:
version "1.5.0"
resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.5.0.tgz#379dce730f6166f76cefa4e6707a159b02c5a6fa"
integrity sha1-N53Ocw9hZvds76TmcHoVmwLFpvo=
dependencies:
esutils "^2.0.2"
isarray "^1.0.0"
doctrine@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d"
@ -8513,7 +8454,7 @@ errno@^0.1.3, errno@~0.1.1, errno@~0.1.7:
dependencies:
prr "~1.0.1"
error-ex@^1.2.0, error-ex@^1.3.1:
error-ex@^1.3.1:
version "1.3.2"
resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
@ -8702,7 +8643,7 @@ eslint-import-resolver-node@^0.3.4:
debug "^2.6.9"
resolve "^1.13.1"
eslint-module-utils@^2.6.0, eslint-module-utils@^2.6.1:
eslint-module-utils@^2.6.1:
version "2.6.1"
resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.6.1.tgz#b51be1e473dd0de1c5ea638e22429c2490ea8233"
integrity sha512-ZXI9B8cxAJIH4nfkhTwcRTEAnrVfobYqwjWy/QMCZ8rHkZHFjf9yO4BzpiF9kCSfNlMG54eKigISHpX0+AaT4A==
@ -13205,16 +13146,6 @@ listr2@^3.2.2:
through "^2.3.8"
wrap-ansi "^7.0.0"
load-json-file@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-2.0.0.tgz#7947e42149af80d696cbf797bcaabcfe1fe29ca8"
integrity sha1-eUfkIUmvgNaWy/eXvKq8/h/inKg=
dependencies:
graceful-fs "^4.1.2"
parse-json "^2.2.0"
pify "^2.0.0"
strip-bom "^3.0.0"
load-json-file@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-4.0.0.tgz#2f5f45ab91e33216234fd53adab668eb4ec0993b"
@ -14630,7 +14561,7 @@ object.pick@^1.3.0:
dependencies:
isobject "^3.0.1"
object.values@^1.1.0, object.values@^1.1.1, object.values@^1.1.3:
object.values@^1.1.0, object.values@^1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.1.3.tgz#eaa8b1e17589f02f698db093f7c62ee1699742ee"
integrity sha512-nkF6PfDB9alkOUxpf1HNm/QlkeW3SReqL5WXeBLpEJJnlPSvRaDQpW3gQTksTN3fgJX4hL42RzKyOin6ff3tyw==
@ -14986,13 +14917,6 @@ parse-headers@^2.0.0:
resolved "https://registry.yarnpkg.com/parse-headers/-/parse-headers-2.0.3.tgz#5e8e7512383d140ba02f0c7aa9f49b4399c92515"
integrity sha512-QhhZ+DCCit2Coi2vmAKbq5RGTRcQUOE2+REgv8vdyu7MnYx2eZztegqtTx99TZ86GTIwqiy3+4nQTWZ2tgmdCA==
parse-json@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-2.2.0.tgz#f480f40434ef80741f8469099f8dea18f55a4dc9"
integrity sha1-9ID0BDTvgHQfhGkJn43qGPVaTck=
dependencies:
error-ex "^1.2.0"
parse-json@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-4.0.0.tgz#be35f5425be1f7f6c747184f98a788cb99477ee0"
@ -15156,13 +15080,6 @@ path-to-regexp@^1.7.0:
dependencies:
isarray "0.0.1"
path-type@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/path-type/-/path-type-2.0.0.tgz#f012ccb8415b7096fc2daa1054c3d72389594c73"
integrity sha1-8BLMuEFbcJb8LaoQVMPXI4lZTHM=
dependencies:
pify "^2.0.0"
path-type@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/path-type/-/path-type-3.0.0.tgz#cef31dc8e0a1a3bb0d105c0cd97cf3bf47f4e36f"
@ -17101,14 +17018,6 @@ read-config-file@6.0.0:
json5 "^2.1.2"
lazy-val "^1.0.4"
read-pkg-up@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-2.0.0.tgz#6b72a8048984e0c41e79510fd5e9fa99b3b549be"
integrity sha1-a3KoBImE4MQeeVEP1en6mbO1Sb4=
dependencies:
find-up "^2.0.0"
read-pkg "^2.0.0"
read-pkg-up@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-3.0.0.tgz#3ed496685dba0f8fe118d0691dc51f4a1ff96f07"
@ -17126,15 +17035,6 @@ read-pkg-up@^7.0.1:
read-pkg "^5.2.0"
type-fest "^0.8.1"
read-pkg@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-2.0.0.tgz#8ef1c0623c6a6db0dc6713c4bfac46332b2368f8"
integrity sha1-jvHAYjxqbbDcZxPEv6xGMysjaPg=
dependencies:
load-json-file "^2.0.0"
normalize-package-data "^2.3.2"
path-type "^2.0.0"
read-pkg@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-3.0.0.tgz#9cbc686978fee65d16c00e2b19c237fcf6e38389"
@ -17839,7 +17739,7 @@ rustbn.js@~0.2.0:
resolved "https://registry.yarnpkg.com/rustbn.js/-/rustbn.js-0.2.0.tgz#8082cb886e707155fd1cb6f23bd591ab8d55d0ca"
integrity sha512-4VlvkRUuCJvr2J6Y0ImW7NvTCriMi7ErOAqWk1y69vAdoNIzCF3yPmgeNzx+RQTLEDFq5sHfscn1MwHxP9hNfA==
rxjs@6, rxjs@^6.1.0, rxjs@^6.4.0, rxjs@^6.6.0, rxjs@^6.6.3, rxjs@^6.6.7:
rxjs@6, rxjs@^6.1.0, rxjs@^6.4.0, rxjs@^6.6.0, rxjs@^6.6.3:
version "6.6.7"
resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.7.tgz#90ac018acabf491bf65044235d5863c4dab804c9"
integrity sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==