Merge pull request #854 from gnosis/feature/wallet-dashboard

Wallet dashboard
This commit is contained in:
Mati Dastugue 2020-05-05 10:59:33 -03:00 committed by GitHub
commit c6f911b8ad
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 49 additions and 847 deletions

View File

@ -29,6 +29,7 @@ type Props = {
userAddress: string, userAddress: string,
classes: Object, classes: Object,
onDisconnect: Function, onDisconnect: Function,
openDashboard?: Function,
} }
const styles = () => ({ const styles = () => ({
@ -72,6 +73,15 @@ const styles = () => ({
}, },
disconnect: { disconnect: {
padding: `${md} ${lg}`, padding: `${md} ${lg}`,
'& button': {
background: '#f02525',
},
},
dashboard: {
padding: `${md} ${lg} ${xs}`,
},
dashboardText: {
letterSpacing: '1px',
}, },
disconnectText: { disconnectText: {
letterSpacing: '1px', letterSpacing: '1px',
@ -92,7 +102,7 @@ const styles = () => ({
}, },
}) })
const UserDetails = ({ classes, connected, network, onDisconnect, provider, userAddress }: Props) => { const UserDetails = ({ classes, connected, network, onDisconnect, openDashboard, provider, userAddress }: Props) => {
const status = connected ? 'Connected' : 'Connection error' const status = connected ? 'Connected' : 'Connection error'
const address = userAddress ? shortVersionOf(userAddress, 4) : 'Address not available' const address = userAddress ? shortVersionOf(userAddress, 4) : 'Address not available'
const identiconAddress = userAddress || 'random' const identiconAddress = userAddress || 'random'
@ -154,6 +164,15 @@ const UserDetails = ({ classes, connected, network, onDisconnect, provider, user
</Paragraph> </Paragraph>
</Row> </Row>
<Hairline margin="xs" /> <Hairline margin="xs" />
{openDashboard && (
<Row className={classes.dashboard}>
<Button color="primary" fullWidth onClick={openDashboard} size="medium" variant="contained">
<Paragraph className={classes.dashboardText} color="white" noMargin size="md">
{upperFirst(provider)} Wallet
</Paragraph>
</Button>
</Row>
)}
<Row className={classes.disconnect}> <Row className={classes.disconnect}>
<Button color="primary" fullWidth onClick={onDisconnect} size="medium" variant="contained"> <Button color="primary" fullWidth onClick={onDisconnect} size="medium" variant="contained">
<Paragraph className={classes.disconnectText} color="white" noMargin size="md"> <Paragraph className={classes.disconnectText} color="white" noMargin size="md">

View File

@ -54,6 +54,10 @@ class HeaderComponent extends React.PureComponent<Props, State> {
logComponentStack(error, info) logComponentStack(error, info)
} }
getOpenDashboard = () => {
const { wallet } = onboard.getState()
return wallet.type === 'sdk' && wallet.dashboard
}
onDisconnect = () => { onDisconnect = () => {
const { closeSnackbar, enqueueSnackbar, removeProvider } = this.props const { closeSnackbar, enqueueSnackbar, removeProvider } = this.props
@ -84,6 +88,7 @@ class HeaderComponent extends React.PureComponent<Props, State> {
connected={available} connected={available}
network={network} network={network}
onDisconnect={this.onDisconnect} onDisconnect={this.onDisconnect}
openDashboard={this.getOpenDashboard()}
provider={provider} provider={provider}
userAddress={userAddress} userAddress={userAddress}
/> />

View File

@ -43,7 +43,6 @@ const wallets = [
{ {
walletName: 'portis', walletName: 'portis',
apiKey: PORTIS_DAPP_ID, apiKey: PORTIS_DAPP_ID,
label: 'Login with Email',
desktop: true, desktop: true,
}, },
{ walletName: 'authereum', desktop: false }, { walletName: 'authereum', desktop: false },

869
yarn.lock

File diff suppressed because it is too large Load Diff