Skip to content

Commit

Permalink
Update Connected Sites modal design (#8262)
Browse files Browse the repository at this point in the history
  • Loading branch information
@whymarrh
whymarrh authored Mar 31, 2020
1 parent 2d66e90 commit cb7f81b
Show file tree
Hide file tree
Showing 22 changed files with 348 additions and 585 deletions.
45 changes: 18 additions & 27 deletions app/_locales/en/messages.json
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,22 @@
{
"connectedSites": {
"message": "Connected Sites"
},
"connectedSitesDescription": {
"message": "$1 is connected to these sites. They can view your account address."
},
"connectManually": {
"message": "Manually connect to current site"
},
"disconnect": {
"message": "Disconnect"
},
"disconnectSite": {
"message": "Disconnect $1?"
},
"disconnectAccountConfirmationDescription": {
"message": "Are you sure you want to disconnect? You may lose site functionality."
},
"migrateSai": {
"message": "A message from Maker: The new Multi-Collateral Dai token has been released. Your old tokens are now called Sai. Please upgrade your Sai tokens to the new Dai."
},
Expand All @@ -20,16 +38,9 @@
"chartOnlyAvailableEth": {
"message": "Chart only available on Ethereum networks."
},
"connectedSites": {
"message": "Connected Sites"
},
"connectingWithMetaMask": {
"message": "Connecting With MetaMask..."
},
"connectTo": {
"message": "Connect to $1",
"description": "$1 is the name/origin of a site/dapp that the user can connect to metamask"
},
"chooseAnAcount": {
"message": "Choose an account"
},
Expand Down Expand Up @@ -408,24 +419,12 @@
"details": {
"message": "Details"
},
"disconnectAccount": {
"message": "Disconnect account"
},
"disconnectAll": {
"message": "Disconnect All"
},
"disconnectAllModalDescription": {
"message": "Are you sure? You will be disconnected from all sites on all accounts."
},
"disconnectAccountModalDescription": {
"message": "Are you sure? Your account (\"$1\") will be disconnected from this site."
},
"disconnectAccountQuestion": {
"message": "Disconnect account?"
},
"disconnectFromThisAccount": {
"message": "Disconnect from this account?"
},
"disconnectAllAccountsQuestion": {
"message": "Disconnect all accounts?"
},
Expand All @@ -435,10 +434,6 @@
"directDepositEtherExplainer": {
"message": "If you already have some Ether, the quickest way to get Ether in your new wallet by direct deposit."
},
"domainLastConnect": {
"message": "Last Connected: $1",
"description": "$1 is the date at which the user was last connected to a given domain"
},
"done": {
"message": "Done"
},
Expand Down Expand Up @@ -499,10 +494,6 @@
"endOfFlowMessage10": {
"message": "All Done"
},
"extensionId": {
"message": "Extension ID: $1",
"description": "$1 is a string of random letters that are the id of another extension connecting to MetaMask"
},
"externalExtension": {
"message": "External Extension"
},
Expand Down
24 changes: 0 additions & 24 deletions app/_locales/it/messages.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,6 @@
"connectingWithMetaMask": {
"message": "Connettendo con MetaMask..."
},
"connectTo": {
"message": "Collegati a $1",
"description": "$1 is the name/origin of a site/dapp that the user can connect to metamask"
},
"chooseAnAcount": {
"message": "Scegli un account"
},
Expand Down Expand Up @@ -408,24 +404,12 @@
"details": {
"message": "Dettagli"
},
"disconnectAccount": {
"message": "Disconnetti account"
},
"disconnectAll": {
"message": "Disconnetti Tutti"
},
"disconnectAllModalDescription": {
"message": "Sei sicuro? Sarai disconnesso da tutti i siti su tutti gli account."
},
"disconnectAccountModalDescription": {
"message": "Sei sicuro? Il tuo account (\"$1\") sarà disconnesso da questo sito."
},
"disconnectAccountQuestion": {
"message": "Disconnettere account?"
},
"disconnectFromThisAccount": {
"message": "Disconnettersi da questo account?"
},
"disconnectAllAccountsQuestion": {
"message": "Disconnettere tutti gli account?"
},
Expand All @@ -435,10 +419,6 @@
"directDepositEtherExplainer": {
"message": "Se possiedi già degli Ether, questa è la via più veloce per aggiungere Ether al tuo portafoglio con un deposito diretto."
},
"domainLastConnect": {
"message": "Ultima Connessione: $1",
"description": "$1 is the date at which the user was last connected to a given domain"
},
"done": {
"message": "Finito"
},
Expand Down Expand Up @@ -499,10 +479,6 @@
"endOfFlowMessage10": {
"message": "Tutto Fatto"
},
"extensionId": {
"message": "ID Estensione: $1",
"description": "$1 is a string of random letters that are the id of another extension connecting to MetaMask"
},
"externalExtension": {
"message": "Estensione Esterna"
},
Expand Down
34 changes: 1 addition & 33 deletions test/e2e/permissions.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,16 +137,8 @@ describe('MetaMask', function () {

await driver.findElement(By.xpath(`//h2[contains(text(), 'Connected Sites')]`))

const domains = await driver.findClickableElements(By.css('.connected-sites-list__domain'))
const domains = await driver.findClickableElements(By.css('.connected-sites__domain-name'))
assert.equal(domains.length, 1)

const domainName = await driver.findElement(By.css('.connected-sites-list__domain-name'))
assert.equal(await domainName.getText(), 'E2E Test Dapp')

await domains[0].click()

const permissionDescription = await driver.findElement(By.css('.connected-sites-list__permission-description'))
assert.equal(await permissionDescription.getText(), `View the addresses of the user's chosen accounts.`)
})

it('can get accounts within the dapp', async function () {
Expand All @@ -158,29 +150,5 @@ describe('MetaMask', function () {
const getAccountsResult = await driver.findElement(By.css('#getAccountsResult'))
assert.equal((await getAccountsResult.getText()).toLowerCase(), publicAddress.toLowerCase())
})

it('can disconnect all accounts', async function () {
await driver.switchToWindow(extension)

await driver.clickElement(By.xpath(`//button[contains(text(), 'Disconnect All')]`))
await driver.clickElement(By.css('.popover-header__close'))

const disconnectModal = await driver.findElement(By.css('span .modal'))

await driver.clickElement(By.css('.disconnect-all-modal .btn-danger'))

await driver.wait(until.stalenessOf(disconnectModal))
await driver.delay(regularDelayMs)
})

it('can no longer get accounts within the dapp', async function () {
await driver.switchToWindow(dapp)
await driver.delay(regularDelayMs)

await driver.clickElement(By.xpath(`//button[contains(text(), 'eth_accounts')]`))

const getAccountsResult = await driver.findElement(By.css('#getAccountsResult'))
assert.equal(await getAccountsResult.getText(), 'Not able to get accounts')
})
})
})
154 changes: 22 additions & 132 deletions ui/app/components/app/connected-sites-list/connected-sites-list.component.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import Button from '../../ui/button'
import IconWithFallBack from '../../ui/icon-with-fallback'

export default class ConnectedSitesList extends Component {
Expand All @@ -10,148 +8,40 @@ export default class ConnectedSitesList extends Component {
}

static propTypes = {
renderableDomains: PropTypes.arrayOf(PropTypes.shape({
connectedDomains: PropTypes.arrayOf(PropTypes.shape({
name: PropTypes.string,
icon: PropTypes.string,
key: PropTypes.string,
lastConnectedTime: PropTypes.string,
permissionDescriptions: PropTypes.array,
})).isRequired,
domains: PropTypes.object,
showDisconnectAccountModal: PropTypes.func.isRequired,
showDisconnectAllModal: PropTypes.func.isRequired,
tabToConnect: PropTypes.object,
legacyExposeAccounts: PropTypes.func.isRequired,
selectedAddress: PropTypes.string.isRequired,
getOpenMetamaskTabsIds: PropTypes.func.isRequired,
}

state = {
expandedDomain: '',
}

UNSAFE_componentWillMount () {
const { getOpenMetamaskTabsIds } = this.props
getOpenMetamaskTabsIds()
}

handleDomainItemClick (domainKey) {
if (this.state.expandedDomain === domainKey) {
this.setState({ expandedDomain: '' })
} else {
this.setState({ expandedDomain: domainKey })
}
onDisconnectSite: PropTypes.func.isRequired,
}

render () {
const {
renderableDomains,
domains,
showDisconnectAccountModal,
showDisconnectAllModal,
tabToConnect,
legacyExposeAccounts,
selectedAddress,
} = this.props
const { expandedDomain } = this.state
const { connectedDomains, onDisconnectSite } = this.props
const { t } = this.context

return (
<div className="connected-sites-list">
{
renderableDomains.map((domain, domainIndex) => {
const domainIsExpanded = expandedDomain === domain.key
return (
<div
className={classnames('connected-sites-list__domain', {
'connected-sites-list__domain--expanded': domainIsExpanded,
})}
key={`connected-domain-${domainIndex}`}
>
<div className="connected-sites-list__domain-item" onClick={ () => this.handleDomainItemClick(domain.key) }>
<div className="connected-sites-list__domain-item-info-container">
<IconWithFallBack icon={domain.icon} name={domain.name} />

<div className="connected-sites-list__domain-info">
<div className="connected-sites-list__domain-names">
<div className="connected-sites-list__domain-name">
{ domain.extensionId ? t('externalExtension') : domain.name }
</div>
</div>
{ domain.lastConnectedTime
? (
<div className="connected-sites-list__domain-last-connected">
{ t('domainLastConnect', [domain.lastConnectedTime]) }
</div>
)
: null
}
{domainIsExpanded
? (
<div className="connected-sites-list__domain-origin">
{ domain.extensionId ? t('extensionId', [domain.extensionId]) : domain.secondaryName }
</div>
)
: null
}
</div>
</div>
<div className="connected-sites-list__expand-arrow">
{ domainIsExpanded ? <i className="fa fa-chevron-up fa-sm" /> : <i className="fa fa-chevron-down fa-sm" /> }
</div>
</div>
{ domainIsExpanded
? (
<div className="connected-sites-list__permissions">
<div className="connected-sites-list__permission-list">
{
domain.permissionDescriptions.map((description, pdIndex) => {
return (
<div className="connected-sites-list__permission" key={`permissionDescription-${pdIndex}`}>
<i className="fa fa-check-square fa-sm" />
<div className="connected-sites-list__permission-description">
{ description }
</div>
</div>
)
})
}
</div>
<div
className="connected-sites-list__disconnect"
onClick={ () => showDisconnectAccountModal(domain.key, domains[domain.key]) }
>
{ t('disconnectAccount') }
</div>
</div>
)
: null
<main className="connected-sites__content-rows">
{ connectedDomains.map((domain) => (
<div key={domain.key} className="connected-sites__content-row">
<div className="connected-sites__domain-info">
<IconWithFallBack icon={domain.icon} name={domain.name} />
<span className="connected-sites__domain-name" title={domain.extensionId || domain.key}>
{
domain.extensionId
? t('externalExtension')
: domain.key
}
</div>
)
})
}
<div className="connected-sites-list__bottom-buttons">
<div className="connected-sites-list__disconnect-all">
<Button onClick={showDisconnectAllModal} type="danger" >
{ t('disconnectAll') }
</Button>
</span>
</div>
<i
className="fas fa-trash-alt connected-sites__trash"
title={t('disconnect')}
onClick={() => onDisconnectSite(domain.key, domain.name)}
/>
</div>
{ tabToConnect
? (
<div className="connected-sites-list__connect-to">
<Button
onClick={() => legacyExposeAccounts(tabToConnect.origin, selectedAddress)}
type="primary"
>
{ t('connectTo', [tabToConnect.title || tabToConnect.origin]) }
</Button>
</div>
)
: null
}
</div>
</div>
)) }
</main>
)
}
}
Loading

0 comments on commit cb7f81b

Please sign in to comment.