diff --git a/.github/workflows/post-publish-update-version.yml b/.github/workflows/post-publish-update-version.yml index 60385d1bb..6ab09df03 100644 --- a/.github/workflows/post-publish-update-version.yml +++ b/.github/workflows/post-publish-update-version.yml @@ -12,7 +12,8 @@ jobs: - uses: actions/checkout@v3 - name: Update version id: update-version - run: sh scripts/update-version.sh + shell: bash + run: ./scripts/update-version.sh - name: Commit & Push new version run: | git config user.name github-actions diff --git a/app/dapp/App.js b/app/dapp/App.js deleted file mode 100644 index 90dac7247..000000000 --- a/app/dapp/App.js +++ /dev/null @@ -1,96 +0,0 @@ -import React from 'react' -import Restore from 'react-restore' - -import link from '../../resources/link' -import Native from '../../resources/Native' - -const FailedToLoad = () => { - return ( -
-
{'Send dapp failed to load'}
-
- ) -} - -const MainnetDisconnected = () => { - return ( - <> -
-
{'Mainnet connection required'}
-
{'to resolve ENS for Send dapp'}
-
-
{ - link.send('tray:action', 'navDash', { view: 'chains', data: {} }) - setTimeout(() => { - link.send('frame:close') - }, 100) - }} - > - View Chains -
- - ) -} - -const Error = ({ isMainnetConnected }) => { - if (!isMainnetConnected) { - return - } - - return -} - -class App extends React.Component { - constructor(...args) { - super(...args) - this.state = { ready: false } - } - - render() { - const dapp = this.store(`main.dapp.details.${this.props.id}`) - let name = dapp ? dapp.domain : null - if (name) { - name = name.split('.') - name.pop() - name.reverse() - name.forEach((v, i) => { - name[i] = v.charAt(0).toUpperCase() + v.slice(1) - }) - name = name.join(' ') - } - - const frame = this.store('main.frames', window.frameId) - const { ready } = frame.views[frame.currentView] || {} - - // Hard code send dapp status for now - const sendDapp = - this.store('main.dapps', '0xe8d705c28f65bc3fe10df8b22f9daa265b99d0e1893b2df49fd38120f0410bca') || {} - - const mainnet = this.store('main.networks.ethereum.1') - const isMainnetConnected = - mainnet.on && (mainnet.connection.primary.connected || mainnet.connection.secondary.connected) - - const shouldDisplayError = - (sendDapp.status !== 'ready' && !isMainnetConnected) || sendDapp.status === 'failed' - - return ( -
- -
-
-
- {shouldDisplayError ? ( - - ) : ( - !ready &&
- )} -
-
-
- ) - } -} - -export default Restore.connect(App) diff --git a/app/dash/App.js b/app/dash/App.js deleted file mode 100644 index ad1fe5dbd..000000000 --- a/app/dash/App.js +++ /dev/null @@ -1,85 +0,0 @@ -import React from 'react' -import Restore from 'react-restore' - -import Command from './Command' -import Main from './Main' -import Accounts from './Accounts' -import Signer from './Signer' -import Chains from './Chains' -import Notify from './Notify' -import Dapps from './Dapps' -import Tokens from './Tokens' -import Settings from './Settings' -import svg from '../../resources/svg' -import link from '../../resources/link' -import { capitalize } from '../../resources/utils' - -function itemName(view) { - return capitalize(view.slice(0, -1)) -} - -const AddNewItemButton = ({ view, req }) => { - const dataMap = { - accounts: { showAddAccounts: true }, - chains: { newChain: {} }, - tokens: { notify: 'addToken', notifyData: req } - } - - return ( -
-
link.send('tray:action', 'navDash', { view, data: dataMap[view] })} - > -
{svg.plus(16)}
- Add New {itemName(view)} -
-
- ) -} - -class Dash extends React.Component { - constructor(props, context) { - super(props, context) - this.input = React.createRef() - this.state = { - showAddAccounts: false, - selected: 'home' - } - } - - renderPanel(view, data) { - if (view === 'accounts') return - if (view === 'expandedSigner' && data.signer) { - const signerId = data.signer - const signer = this.store('main.signers', signerId) - - return - } - if (view === 'chains') return - if (view === 'dapps') return - if (view === 'tokens') return - if (view === 'settings') return - if (view === 'notify') return - return
- } - - render() { - const { view, data } = this.store('windows.dash.nav')[0] || { view: 'default', data: {} } - const showAddButton = - ['chains', 'accounts', 'tokens'].includes(view) && (!data || Object.keys(data).length === 0) - - return ( -
- -
-
-
{this.renderPanel(view, data)}
-
- {showAddButton && } -
- ) - } -} - -export default Restore.connect(Dash) diff --git a/app/dash/Command/index.js b/app/dash/Command/index.js deleted file mode 100644 index defa20538..000000000 --- a/app/dash/Command/index.js +++ /dev/null @@ -1,62 +0,0 @@ -import React from 'react' -import Restore from 'react-restore' -import link from '../../../resources/link' -import svg from '../../../resources/svg' - -class Command extends React.Component { - renderSignerIcon(type) { - if (type === 'ledger') { - return
{svg.ledger(20)}
- } else if (type === 'trezor') { - return
{svg.trezor(20)}
- } else if (type === 'seed' || type === 'ring') { - return
{svg.flame(23)}
- } else if (type === 'lattice') { - return
{svg.lattice(22)}
- } else { - return
{svg.logo(20)}
- } - } - renderSignerTitle() { - const { data = {} } = this.store('windows.dash.nav')[0] || { view: '', data: {} } - const signer = data.signer ? this.store('main.signers', data.signer) : {} - if (!signer) return null - return ( -
- {/*
{this.props.model}
*/} - {this.renderSignerIcon(signer.type)} -
{signer.name}
-
- ) - } - render() { - const { view } = this.store('windows.dash.nav')[0] || { view: '', data: {} } - return ( -
- {this.store('windows.dash.nav').length ? ( -
{ - link.send('tray:action', 'backDash') - }} - > - {svg.chevronLeft(16)} -
- ) : null} -
- {view === 'expandedSigner' ? this.renderSignerTitle() : view} -
-
{ - link.send('tray:action', 'closeDash') - }} - > - {svg.x(16)} -
-
- ) - } -} - -export default Restore.connect(Command) diff --git a/app/dash/Main/index.js b/app/dash/Main/index.js deleted file mode 100644 index 9362c27df..000000000 --- a/app/dash/Main/index.js +++ /dev/null @@ -1,372 +0,0 @@ -import React from 'react' -import Restore from 'react-restore' -import { okPort, okProtocol } from '../../../resources/connections' -import link from '../../../resources/link' -import svg from '../../../resources/svg' - -class Settings extends React.Component { - constructor(props, context) { - super(props, context) - this.customMessage = 'Custom Endpoint' - const latticeEndpoint = context.store('main.latticeSettings.endpointCustom') - const latticeEndpointMode = context.store('main.latticeSettings.endpointMode') - this.state = { - localShake: {}, - latticeEndpoint, - latticeEndpointMode, - resetConfirm: false, - expandNetwork: false, - instanceIdHover: false, - instanceIdCopied: false - } - } - - appInfo() { - // TODO: move this to global passed over IPC - // eslint-disable-next-line - const appVersion = require('../../../package.json').version - const instanceId = this.store('main.instanceId') - return ( -
-
{ - e.stopPropagation() - e.preventDefault() - this.setState({ instanceIdHover: true }) - }} - onMouseLeave={(e) => { - e.stopPropagation() - e.preventDefault() - this.setState({ instanceIdHover: false, instanceIdCopied: false }) - }} - onClick={() => { - if (this.state.instanceIdHover) { - clearTimeout(this.instanceIdCopiedTimeout) - link.send('tray:clipboardData', instanceId) - this.setState({ instanceIdCopied: true }) - this.instanceIdCopiedTimeout = setTimeout( - () => this.setState({ instanceIdCopied: false }), - 1800 - ) - } - }} - > - {this.state.instanceIdCopied ? ( - {'Instance ID Copied'} - ) : ( - instanceId - )} -
-
{`v${appVersion}`}
-
- link.send('tray:openExternal', 'https://github.com/floating/frame/blob/master/LICENSE') - } - > - View License -
-
- {this.state.resetConfirm ? ( - <> - Are you sure you want to reset everything? - - link.send('tray:resetAllSettings')} - > - Yes - - / - this.setState({ resetConfirm: false })} - > - No - - - - ) : ( - this.setState({ resetConfirm: true })}> - Reset All Settings & Data - - )} -
-
- ) - } - - customPrimaryFocus() { - if (this.state.primaryCustom === this.customMessage) this.setState({ primaryCustom: '' }) - } - - customPrimaryBlur() { - if (this.state.primaryCustom === '') this.setState({ primaryCustom: this.customMessage }) - } - - inputPrimaryCustom(e) { - e.preventDefault() - clearTimeout(this.customPrimaryInputTimeout) - const value = e.target.value.replace(/\s+/g, '') - this.setState({ primaryCustom: value }) - const { type, id } = this.store('main.currentNetwork') - this.customPrimaryInputTimeout = setTimeout( - () => link.send('tray:action', 'setPrimaryCustom', type, id, this.state.primaryCustom), - 1000 - ) - } - - inputSecondaryCustom(e) { - e.preventDefault() - clearTimeout(this.customSecondaryInputTimeout) - const value = e.target.value.replace(/\s+/g, '') - this.setState({ secondaryCustom: value }) - const { type, id } = this.store('main.currentNetwork') - this.customSecondaryInputTimeout = setTimeout( - () => link.send('tray:action', 'setSecondaryCustom', type, id, this.state.secondaryCustom), - 1000 - ) - } - - inputLatticeEndpoint(e) { - e.preventDefault() - clearTimeout(this.inputLatticeTimeout) - const value = e.target.value.replace(/\s+/g, '') - this.setState({ latticeEndpoint: value }) - // TODO: Update to target specific Lattice device rather than global - this.inputLatticeTimeout = setTimeout( - () => link.send('tray:action', 'setLatticeEndpointCustom', this.state.latticeEndpoint), - 1000 - ) - } - - localShake(key) { - const localShake = Object.assign({}, this.state.localShake) - localShake[key] = true - this.setState({ localShake }) - setTimeout(() => { - const localShake = Object.assign({}, this.state.localShake) - localShake[key] = false - this.setState({ localShake }) - }, 1010) - } - - status(layer) { - const { type, id } = this.store('main.currentNetwork') - const connection = this.store('main.networks', type, id, 'connection', layer) - let status = connection.status - const current = connection.current - - if (current === 'custom') { - if ( - layer === 'primary' && - this.state.primaryCustom !== '' && - this.state.primaryCustom !== this.customMessage - ) { - if (!okProtocol(this.state.primaryCustom)) status = 'invalid target' - else if (!okPort(this.state.primaryCustom)) status = 'invalid port' - } - - if ( - layer === 'secondary' && - this.state.secondaryCustom !== '' && - this.state.secondaryCustom !== this.customMessage - ) { - if (!okProtocol(this.state.secondaryCustom)) status = 'invalid target' - else if (!okPort(this.state.secondaryCustom)) status = 'invalid port' - } - } - if (status === 'connected' && !connection.network) status = 'loading' - return ( -
- {this.indicator(status)} -
{status}
-
- ) - } - - discord() { - return ( -
link.send('tray:openExternal', 'https://discord.gg/UH7NGqY')} - > -
Need help?
-
Join our Discord!
-
- ) - } - - quit() { - return ( -
-
link.send('tray:quit')}> - Quit -
-
- ) - } - - indicator(status) { - if (status === 'connected') { - return ( -
-
-
- ) - } else if (status === 'loading' || status === 'syncing' || status === 'pending' || status === 'standby') { - return ( -
-
-
- ) - } else { - return ( -
-
-
- ) - } - } - - selectNetwork(network) { - const [type, id] = network.split(':') - if (network.type !== type || network.id !== id) link.send('tray:action', 'selectNetwork', type, id) - } - - expandNetwork(e, expand) { - e.stopPropagation() - this.setState({ expandNetwork: expand !== undefined ? expand : !this.state.expandNetwork }) - } - - render() { - const networks = this.store('main.networks') - const networkOptions = [] - - Object.keys(networks).forEach((type) => { - Object.keys(networks[type]).forEach((id) => { - networkOptions.push({ text: networks[type][id].name, value: type + ':' + id }) - }) - }) - return ( -
-
-
-
link.send('tray:action', 'navDash', { view: 'accounts', data: {} })} - > -
{svg.accounts(24)}
-
{'Accounts'}
-
-
link.send('tray:action', 'navDash', { view: 'chains', data: {} })} - > -
{svg.chain(24)}
-
{'Chains'}
-
-
link.send('tray:action', 'navDash', { view: 'tokens', data: {} })} - > -
{svg.tokens(24)}
-
{'Tokens'}
-
-
link.send('tray:action', 'navDash', { view: 'dapps', data: {} })} - > -
{svg.window(24)}
-
{'Dapps'}
-
-
link.send('tray:action', 'navDash', { view: 'settings', data: {} })} - > -
{svg.settings(24)}
-
{'Settings'}
-
-
-
-
Using a dapp that doesn't support Frame natively?
-
-
- link.send( - 'tray:openExternal', - 'https://chrome.google.com/webstore/detail/frame-alpha/ldcoohedfbjoobcadoglnnmmfbdlmmhf' - ) - } - > - {svg.chrome(28)} -
-
- link.send( - 'tray:openExternal', - 'https://addons.mozilla.org/en-US/firefox/addon/frame-extension' - ) - } - > - {svg.firefox(28)} -
- {/*
- {svg.safari(28)} -
*/} -
-
Inject a connection with our browser extension!
-
-
-
{ - link.send('tray:openExternal', 'https://feedback.frame.sh') - }} - > - Request a Feature -
-
-
-
{ - link.send('tray:openExternal', 'https://discord.gg/UH7NGqY') - }} - > - Need help? Join our Discord! -
-
-
-
{ - link.send('tray:action', 'setOnboard', { showing: true }) - }} - > - Open Frame Tutorial -
-
-
-
{ - link.send('tray:quit') - }} - > - Quit -
-
- {this.appInfo()} -
-
- ) - } -} - -export default Restore.connect(Settings) diff --git a/app/dash/index.js b/app/dash/index.js deleted file mode 100644 index 5d4a49376..000000000 --- a/app/dash/index.js +++ /dev/null @@ -1,44 +0,0 @@ -import * as Sentry from '@sentry/electron' -import { createRoot } from 'react-dom/client' -import Restore from 'react-restore' - -import App from './App' - -import link from '../../resources/link' -import appStore from '../store' - -Sentry.init({ dsn: 'https://7b09a85b26924609bef5882387e2c4dc@o1204372.ingest.sentry.io/6331069' }) - -document.addEventListener('dragover', (e) => e.preventDefault()) -document.addEventListener('drop', (e) => e.preventDefault()) - -if (process.env.NODE_ENV !== 'development') { - window.eval = global.eval = () => { - throw new Error(`This app does not support window.eval()`) - } // eslint-disable-line -} - -function AppComponent() { - return -} - -link.rpc('getState', (err, state) => { - if (err) return console.error('Could not get initial state from main') - const store = appStore(state) - window.store = store - store.observer(() => { - document.body.classList.remove('dark', 'light') - document.body.classList.add('clip', store('main.colorway')) - setTimeout(() => { - document.body.classList.remove('clip') - }, 100) - }) - const root = createRoot(document.getElementById('dash')) - const Dash = Restore.connect(AppComponent, store) - root.render() -}) - -document.addEventListener('contextmenu', (e) => link.send('*:contextmenu', e.clientX, e.clientY)) - -// document.addEventListener('mouseout', e => { if (e.clientX < 0) link.send('tray:mouseout') }) -// document.addEventListener('contextmenu', e => link.send('tray:contextmenu', e.clientX, e.clientY)) diff --git a/app/notify/App/index.styl b/app/notify/App/index.styl index 6cc14a5d4..8e90ddb80 100644 --- a/app/notify/App/index.styl +++ b/app/notify/App/index.styl @@ -4,7 +4,7 @@ body margin 0 padding 0px font-family 'MainFont' - font-weight 300 + font-weight 400 background var(--ghostZ) ::-webkit-scrollbar diff --git a/app/onboard/App/index.styl b/app/onboard/App/index.styl index b4bc0ed9a..c1faccc0e 100644 --- a/app/onboard/App/index.styl +++ b/app/onboard/App/index.styl @@ -4,7 +4,7 @@ body margin 0 padding 0px font-family 'MainFont' - font-weight 300 + font-weight 400 ::-webkit-scrollbar width 0px diff --git a/app/tray/Account/Account.js b/app/tray/Account/Account.js index 5db4583f0..9ef79c4aa 100644 --- a/app/tray/Account/Account.js +++ b/app/tray/Account/Account.js @@ -1,19 +1,22 @@ -import React from 'react' +import React, { useState } from 'react' import Restore from 'react-restore' import svg from '../../../resources/svg' import link from '../../../resources/link' +import { Fluid, Entity, useFluid } from '../../../resources/Components/Fluid' +import useStore from '../../../resources/Hooks/useStore' + import Default from './Default' import Activity from './Activity' +import Contacts from './Contacts' import Chains from './Chains' import Balances from './Balances' import Gas from '../../../resources/Components/Monitor' import Inventory from './Inventory' import Permissions from './Permissions' import Requests from './Requests' -import Settings from './Settings' import Signer from './Signer' // move @@ -39,14 +42,14 @@ const requests = { const modules = { gas: Gas, + contacts: Contacts, requests: Requests, chains: Chains, activity: Activity, inventory: Inventory, permissions: Permissions, balances: Balances, - signer: Signer, - settings: Settings + signer: Signer } class _AccountModule extends React.Component { @@ -68,7 +71,7 @@ class _AccountModule extends React.Component { const { id, module, top, index, expanded, expandedData, account, filter } = this.props let hidden = false let style = { - transform: `translateY(${top}px)`, + // transform: `translateY(${top}px)`, zIndex: 9999 - index, height: module.height, opacity: 1 @@ -76,7 +79,7 @@ class _AccountModule extends React.Component { if (hidden) { style = { - transform: `translateY(${top}px)`, + // transform: `translateY(${top}px)`, zIndex: 9999 - index, height: 0, opacity: 0, @@ -89,11 +92,21 @@ class _AccountModule extends React.Component { } else { return (
-
-
- {this.getModule(id, account, expanded, expandedData, filter)} + { + return this.props.updateModuleOrder(dragItem.id, id, position) + }} + > +
+
+ {this.getModule(id, account, expanded, expandedData, filter)} +
-
+
) } @@ -102,89 +115,125 @@ class _AccountModule extends React.Component { const AccountModule = Restore.connect(_AccountModule) -// account module is position absolute and with a translateX -class _AccountMain extends React.Component { - constructor(...args) { - super(...args) - this.state = { - expandedModule: '' - } - } - renderAccountFilter() { - return ( -
-
{svg.search(12)}
-
- { - const value = e.target.value - this.setState({ accountModuleFilter: value }) - }} - value={this.state.accountModuleFilter} - /> -
- {this.state.accountModuleFilter ? ( -
{ - this.setState({ accountModuleFilter: '' }) - }} - > - {svg.close(12)} -
- ) : null} +const AccountMain = (props) => { + const { id } = props + + const moduleOrder = useStore('panel.account.moduleOrder') + const footerHeight = useStore('windows.panel.footer.height') + const accountModules = useStore('panel.account.modules') + + const { setScrollTrigger } = useFluid() + + const [state, setState] = useState({ + expandedModule: '', + moduleOrder, + accountModuleFilter: '' + }) + + const accountModuleOrder = state.moduleOrder + + const renderAccountFilter = () => ( +
+
{svg.search(12)}
+
+ { + const value = e.target.value + setState((prevState) => ({ ...prevState, accountModuleFilter: value })) + }} + value={state.accountModuleFilter} + />
+ {state.accountModuleFilter ? ( +
{ + setState((prevState) => ({ ...prevState, accountModuleFilter: '' })) + }} + > + {svg.close(12)} +
+ ) : null} +
+ ) + + let slideHeight = 0 + const modules = accountModuleOrder.map((moduleId, i) => { + const module = accountModules[moduleId] || { height: 0 } + slideHeight += module.height + 12 + return ( + { + let hasOrderChanged = false + setState((prevState) => { + let originalArray = [...prevState.moduleOrder] + let array = [...prevState.moduleOrder] + let dragIndex = array.indexOf(dragId) + if (dragIndex === -1) { + console.error('dragId not found in the array') + return originalArray + } + array.splice(dragIndex, 1) + let overIndex = array.indexOf(overId) + if (overIndex === -1) { + console.error('overId not found in the array') + return originalArray + } + if (position === 'top' || position === 'left') { + array.splice(overIndex, 0, dragId) + } else if (position === 'bottom' || position === 'right') { + array.splice(overIndex + 1, 0, dragId) + } else { + throw new Error('Invalid position') + } + for (let i = 0; i < originalArray.length; i++) { + if (originalArray[i] !== array[i]) { + hasOrderChanged = true + break + } + } + return { moduleOrder: array } + }) + return hasOrderChanged + }} + /> ) - } + }) - render() { - const accountModules = this.store('panel.account.modules') - const accountModuleOrder = this.store('panel.account.moduleOrder') - let slideHeight = 0 - const modules = accountModuleOrder.map((id, i) => { - const module = accountModules[id] || { height: 0 } - slideHeight += module.height + 12 - return ( - - ) - }) - const footerHeight = this.store('windows.panel.footer.height') - return ( -
-
- {this.renderAccountFilter()} -
- {modules} -
+ return ( +
+
+
{ + setScrollTrigger(e) + }} + > +
+ {renderAccountFilter()} + {modules}
- ) - } +
+ ) } -const AccountMain = Restore.connect(_AccountMain) - // AccountView is a reusable template that provides the option to nav back to main class _AccountView extends React.Component { render() { - const accountOpen = this.store('selected.open') const footerHeight = this.store('windows.panel.footer.height') return ( -
+
this.props.back()}> {svg.chevronLeft(16)} @@ -306,7 +355,11 @@ class _AccountBody extends React.Component { ) } else { - return + return ( + + + + ) } } } @@ -315,13 +368,10 @@ const AccountBody = Restore.connect(_AccountBody) class Account extends React.Component { render() { - const minimized = this.store('selected.minimized') - return ( diff --git a/app/tray/Account/Activity/Expanded/index.js b/app/tray/Account/Activity/Expanded/index.js new file mode 100644 index 000000000..cf4a4043a --- /dev/null +++ b/app/tray/Account/Activity/Expanded/index.js @@ -0,0 +1,76 @@ +import React from 'react' +import Restore from 'react-restore' +import link from '../../../../../resources/link' + +import { ClusterBox, Cluster, ClusterRow, ClusterValue } from '../../../../../resources/Components/Cluster' + +class DappsPermissionsExpanded extends React.Component { + constructor(...args) { + super(...args) + this.moduleRef = React.createRef() + } + + render() { + const permissions = this.store('main.permissions', this.props.account) || {} + let permissionList = Object.keys(permissions).sort((a, b) => (a.origin < b.origin ? -1 : 1)) + if (!this.props.expanded) permissionList = permissionList.slice(0, 3) + + return ( +
+ + +
+ {permissionList.length === 0 ? ( + + +
+
+
No Permissions Set
+
+
+
+
+ ) : ( + permissionList.map((o) => { + return ( + + +
+
+
{permissions[o].origin}
+
link.send('tray:action', 'toggleAccess', this.props.account, o)} + > +
+
+
+
+ + + ) + }) + )} +
+ + +
+
{ + link.send('tray:action', 'clearPermissions', this.props.account) + }} + className='moduleButton' + > + Clear All Permissions +
+
+
+ ) + } +} + +export default Restore.connect(DappsPermissionsExpanded) diff --git a/app/tray/Account/Activity/OriginExpanded/index.js b/app/tray/Account/Activity/OriginExpanded/index.js new file mode 100644 index 000000000..615ff61e8 --- /dev/null +++ b/app/tray/Account/Activity/OriginExpanded/index.js @@ -0,0 +1,232 @@ +import React, { useState } from 'react' +import link from '../../../../../resources/link' +import styled, { css } from 'styled-components' + +import { OriginToggle } from './styled' + +import svg from '../../../../../resources/svg' +import useStore from '../../../../../resources/Hooks/useStore' +// import { matchFilter } from '../../../../../resources/utils' + +import { + ClusterBox, + Cluster, + ClusterRow, + ClusterValue, + ClusterBoxHeader +} from '../../../../../resources/Components/Cluster' +// import CollectionList from '../CollectionList' + +function bySessionStartTime(a, b) { + return b.session.startedAt - a.session.startedAt +} + +function byLastUpdated(a, b) { + return b.session.lastUpdatedAt - a.session.lastUpdatedAt +} + +const originFilter = ['frame-internal', 'frame-extension'] + +function getOriginsForChain(chain) { + const origins = useStore('main.origins') + Objec + const { connectedOrigins, disconnectedOrigins } = Object.entries(origins).reduce( + (acc, [id, origin]) => { + if (origin.chain.id === chain.id && !originFilter.includes(origin.name)) { + acc[connected ? 'connectedOrigins' : 'disconnectedOrigins'].push({ ...origin, id }) + } + + return acc + }, + { connectedOrigins: [], disconnectedOrigins: [] } + ) + + return { + connected: connectedOrigins.sort(bySessionStartTime), + disconnected: disconnectedOrigins + .sort(byLastUpdated) + .filter((origin) => Date.now() - origin.session.lastUpdatedAt < 60 * 60 * 1000) + } +} + +const OriginModule = styled.div` + width: 100%; +` + +const OriginName = styled.div` + /* font-family: 'VCR'; */ + padding: 20px; + font-weight: 400; + font-size: 16px; +` + +const OriginPermissions = styled.div` + width: 100%; +` + +const OriginRequestss = styled.div` + font-family: 'VCR'; + padding: 20px; + border-bottom: 2px solid var(--ghostZ); +` + +const OriginPermission = styled.div` + font-family: 'VCR'; + padding: 20px; + border-bottom: 2px solid var(--ghostZ); +` + +const OriginDrawer = styled.div` + width: 100%; +` + +const OriginDrawerFooter = styled.div` + display: flex; + justify-content: flex-start; + align-items: space-between; + padding: 8px; +` + +const OriginPermissionName = styled.div` + height: 32px; + display: flex; + align-items: center; + justify-content: center; + font-weight: 300; + font-size: 16px; +` + +const OriginDrawerMenuItem = styled.div` + width: 32px; + height: 32px; + display: flex; + justify-content: center; + align-items: center; +` + +const OriginPermissionTitle = styled.div` + text-transform: uppercase; + padding: 8px; + font-size: 10px; + font-weight: 500; + width: calc(100% - 16px); + margin: 0px 8px; + box-sizing: border-box; + display: flex; + justify-content: center; + align-items: center; + border-bottom: 1px solid var(--ghostY); +` + +const OriginDrawerPermission = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + margin: 0px 8px; + padding: 8px; + box-sizing: border-box; +` + +const OriginRequests = ({ originId }) => { + const [averageRequests, setRequests] = React.useState('0.0') + const origin = useStore('main.origins', originId) || {} + if (!origin || !origin.session) return null + const connected = + (origin.session.startedAt && !origin.session.endedAt) || origin.session.startedAt > origin.session.endedAt + + const updateRequestRate = () => { + const now = new Date().getTime() + const sessionLength = now - origin.session.startedAt + const sessionLengthSeconds = sessionLength / Math.min(sessionLength, 1000) + setRequests(origin.session.requests.toFixed(2)) + } + + useEffect(() => { + const requestUpdates = setInterval(() => { + updateRequestRate() + }, 1000) + return () => { + clearInterval(requestUpdates) + } + }) + + return ( +
+
+ {/* */} +
+
{averageRequests}
+
{'reqs/min'}
+
+
+
+ ) +} + +const OriginExpanded = ({ expandedData, moduleId, account }) => { + const [collectionFilter, setCollectionFilter] = useState('') + const currentOrigin = useStore('main.hiddenCollections') || [] + + const { originId } = expandedData || {} + + const origins = useStore('main.origins') || {} + + const origin = useStore('main.origins', originId) || {} + + const accountOrigin = useStore('main.permissions', account, originId) || {} + + const permission = useStore('main.permissions', account, originId) || {} + + return ( +
+ + + {svg.window(14)} + {permission.origin} + + + + + + {/* {'Permissions'} */} + + {'Account Access'} + link.send('tray:action', 'toggleAccess', account, originId)} + /> + + + + + + + + {}}> + + + + {svg.chain(16)} + {'Default Chain'} + + {'Mainnet'} + + + + + {}}> + + + + {svg.trash(16)} + {'Remove Dapp'} + + + + +
+ ) +} + +export default OriginExpanded diff --git a/app/tray/Account/Activity/OriginExpanded/styled/index.js b/app/tray/Account/Activity/OriginExpanded/styled/index.js new file mode 100644 index 000000000..fda88700f --- /dev/null +++ b/app/tray/Account/Activity/OriginExpanded/styled/index.js @@ -0,0 +1,94 @@ +import styled, { css } from 'styled-components' + +import svg from '../../../../../../resources/svg' + +const OriginPermissionToggleSwitch = styled.div` + position: absolute; + top: 2px; + left: 2px; + bottom: 2px; + width: 16px; + border-radius: 10px; + transition: var(--standard); + background: var(--ghostC); + transform: translateZ(0); + pointer-events: none; + border-bottom: 2px solid var(--ghostZ); +` + +const OriginPermissionToggleSwitchLocked = styled.div` + position: absolute; + top: 0px; + left: 0px; + bottom: 0px; + right: 0px; + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + + ${OriginPermissionToggleSwitch} { + opacity: 1; + transition: var(--standard); + } + + svg { + transition: var(--standard); + color: var(--ghostC); + } +` + +const OriginPermissionToggle = styled.div` + position: relative; + background: var(--bad); + height: 20px; + width: 40px; + margin-right: 6px; + margin-left: 12px; + margin-top: 4px; + border-radius: 10px; + transition: var(--standard); + transform: translateZ(0); + cursor: pointer; + min-width: 40px; + + * { + pointer-events: none; + } + + ${OriginPermissionToggleSwitch} { + background: var(--ghostD); + } + + &:hover { + ${OriginPermissionToggleSwitch} { + opacity: ${({ isLocked }) => (isLocked ? 0 : 1)}; + transition: ${({ isLocked }) => (isLocked ? 'var(--standardFast)' : 'var(--standard)')}; + } + ${OriginPermissionToggleSwitchLocked} { + opacity: ${({ isLocked }) => (isLocked ? 1 : 0)}; + transition: var(--standardFast); + } + } + + ${(props) => + props.isOn && + css` + background: var(--good); + + ${OriginPermissionToggleSwitch} { + position: absolute; + transform: translateX(20px); + } + `} +` + +export const OriginToggle = ({ isOn, isLocked, onClick }) => { + return ( + + {svg.lock(10)} + + + ) +} diff --git a/app/tray/Account/Activity/Preview/index.js b/app/tray/Account/Activity/Preview/index.js new file mode 100644 index 000000000..17622f241 --- /dev/null +++ b/app/tray/Account/Activity/Preview/index.js @@ -0,0 +1,36 @@ +import React from 'react' +import link from '../../../../../resources/link' +import svg from '../../../../../resources/svg' +import { matchFilter } from '../../../../../resources/utils' +import useStore from '../../../../../resources/Hooks/useStore' +import useAccountModule from '../../../../../resources/Hooks/useAccountModule' + +import { Cluster, ClusterRow, ClusterValue } from '../../../../../resources/Components/Cluster' + +const DappsPreview = ({ filter = '', moduleId, account }) => { + const [moduleRef] = useAccountModule(moduleId) + const permissions = useStore('main.permissions', account) || {} + let permissionList = Object.keys(permissions) + .filter((o) => { + return matchFilter(filter, [permissions[o].origin]) + }) + .sort((a, b) => (a.origin < b.origin ? -1 : 1)) + .slice(0, 4) + + return ( +
+
+ {svg.pulse(14)} + {'Activity'} +
+
{'received 20 eth'}
+
{'sent 2 USDC'}
+
{'approved permit'}
+
{'connected to app.aave.com'}
+
{'received 20 eth'}
+
{'received 20 eth'}
+
+ ) +} + +export default DappsPreview diff --git a/app/tray/Account/Activity/index.js b/app/tray/Account/Activity/index.js index 4529e2ba0..ad87237bb 100644 --- a/app/tray/Account/Activity/index.js +++ b/app/tray/Account/Activity/index.js @@ -1,37 +1,20 @@ import React from 'react' import Restore from 'react-restore' -import link from '../../../../resources/link' -import svg from '../../../../resources/svg' -class Activity extends React.Component { - constructor(...args) { - super(...args) - this.moduleRef = React.createRef() - this.resizeObserver = new ResizeObserver(() => { - if (this.moduleRef && this.moduleRef.current) { - link.send('tray:action', 'updateAccountModule', this.props.moduleId, { - height: this.moduleRef.current.clientHeight - }) - } - }) - this.state = { - expand: false - } - } - componentDidMount() { - this.resizeObserver.observe(this.moduleRef.current) - } +import DappsPreview from './Preview' +import DappsExpanded from './Expanded' + +import OriginExpanded from './OriginExpanded' + +class Dapps extends React.Component { render() { - return ( -
-
- {svg.inbox(13)} - {'Activity'} -
-
{'Coming Soon'}
-
- ) + const expandedData = this.props.expandedData || {} + if (expandedData.originId) { + return + } else { + return this.props.expanded ? : + } } } -export default Restore.connect(Activity) +export default Restore.connect(Dapps) diff --git a/app/tray/Account/Activity/style/index.styl b/app/tray/Account/Activity/style/index.styl new file mode 100644 index 000000000..25838772b --- /dev/null +++ b/app/tray/Account/Activity/style/index.styl @@ -0,0 +1,114 @@ +.clearPermissionsButton + padding 6px + +.moduleMainPermissions + border-radius 20px + overflow auto + +.signerPermissionOrigin + background transparent + width 250px + direction rtl + text-overflow ellipsis + overflow hidden + text-align left + white-space nowrap + font-weight 400 + margin-top 4px + +.signerPermission + position relative + justify-content space-between + padding 12px + font-size 15px + font-weight 400 + transform translateZ(0) + z-index 2000 + width 100% + + .signerPermissionControls + display flex + position relative + justify-content space-between + transform translateZ(0) + z-index 40 + + .signerPermissionDetails + display flex + position relative + justify-content space-between + transform translateZ(0) + font-size 13px + padding 10px 0px 0px 1px + z-index 20 + font-weight 400 + +.signerPermissionToggle + position relative + background var(--bad) + height 20px + width 40px + border-radius 10px + transition var(--standard) + transform translateZ(0) + margin-top 4px + cursor pointer + + .signerPermissionToggleSwitch + position absolute + top 2px + left 2px + bottom 2px + width 16px + border-radius 10px + transition var(--standard) + background var(--ghostD) + transform translateZ(0) + // box-shadow 5px 5px 9px 0px var(--tripleThick) + pointer-events none + +.signerPermissionToggleOn + background var(--good) + .signerPermissionToggleSwitch + position absolute + transform translateX(20px) + +.signerPermissionToggle:hover + .signerPermissionToggleSwitch + background var(--ghostD) + +.signerPermissionToggleSmall + position relative + background var(--bad) + height 14px + width 30px + border-radius 10px + transition var(--standard) + transform translateZ(0) + margin-top 2px + margin-right 4px + cursor pointer + + .signerPermissionToggleSwitch + position absolute + top 2px + left 2px + bottom 2px + width 10px + border-radius 10px + transition var(--standard) + background var(--ghostC) + transform translateZ(0) + box-shadow 0px 3px 3px 0px var(--tripleThick) + pointer-events none + +.signerPermissionToggleSmallOn + background var(--good) + + .signerPermissionToggleSwitch + position absolute + transform translateX(16px) + +.signerPermissionToggleSmall:hover + .signerPermissionToggleSwitch + background var(--ghostD) diff --git a/app/tray/Account/Balances/Balance/index.js b/app/tray/Account/Balances/Balance/index.js index a95deee4b..d0bbbcd81 100644 --- a/app/tray/Account/Balances/Balance/index.js +++ b/app/tray/Account/Balances/Balance/index.js @@ -1,4 +1,6 @@ import React from 'react' +import styled from 'styled-components' + import { DisplayFiatPrice, DisplayValue } from '../../../../../resources/Components/DisplayValue' import RingIcon from '../../../../../resources/Components/RingIcon' import useStore from '../../../../../resources/Hooks/useStore' @@ -6,7 +8,21 @@ import { NATIVE_CURRENCY } from '../../../../../resources/constants' import { chainUsesEth } from '../../../../../resources/utils/chains' const displayName = (name = '') => (name.length > 24 ? name.slice(0, 22) + '..' : name) -const displayChain = (name = '') => (name.length > 14 ? name.slice(0, 12) + '..' : name) + +const AccountOverlay = styled.div` + position: absolute; + inset: 0; + opacity: 0.02; + pointer-events: none; + background: ${({ color }) => `linear-gradient(90deg, transparent 0%, ${color} 20%, transparent 100%)`}; +` + +const displayChain = (name = '') => { + if (name.length > 14) { + return name.slice(0, 12).trim() + '..' + } + return name +} const Balance = ({ symbol = '', balance, i, scanning, chainId, address }) => { const isNative = address === NATIVE_CURRENCY @@ -47,6 +63,7 @@ const Balance = ({ symbol = '', balance, i, scanning, chainId, address }) => {
{scanning &&
}
+
{ setOpen(-1) - link.send('*:addFrame', 'dappLauncher') + link.send('workspace:run', 'dapp', {}, ['send.frame.eth']) }} >
{svg.send(14)}
diff --git a/app/tray/Account/Balances/index.js b/app/tray/Account/Balances/index.js index e6b3084cd..1ca1c328f 100644 --- a/app/tray/Account/Balances/index.js +++ b/app/tray/Account/Balances/index.js @@ -57,7 +57,7 @@ class Balances extends React.Component { return { rawBalances, rates, ethereumNetworks, networksMeta, populatedChains } } - getBalances(filter, tokenPreferences, returnHidden = false) { + getBalances(filter, tokenPreferences = {}, returnHidden = false) { const { rawBalances, rates, ethereumNetworks, networksMeta, populatedChains } = this.getStoreValues() const shouldShowBalance = shouldShow(ethereumNetworks, tokenPreferences, populatedChains, returnHidden) const createBalance = toBalance(networksMeta, rates, ethereumNetworks) diff --git a/app/tray/Account/Balances/style/index.styl b/app/tray/Account/Balances/style/index.styl index 8a3eca278..406344c3a 100644 --- a/app/tray/Account/Balances/style/index.styl +++ b/app/tray/Account/Balances/style/index.styl @@ -4,7 +4,7 @@ .signerBalanceWarning position relative - font-weight 400 + font-weight 500 padding 4px 0px .signerBalanceDrawerItem @@ -92,7 +92,7 @@ padding 8px 20px 12px 20px box-sizing border-box font-size 12px - font-weight 300 + font-weight 400 .signerBalanceTotal position relative @@ -152,7 +152,7 @@ justify-content center align-items center font-size 11px - font-weight 400 + font-weight 500 letter-spacing 1px text-transform uppercase padding 1px 20px 0px 21px @@ -226,7 +226,7 @@ .signerBalance position relative - opacity 1 + opacity 10 width 100% transition 0.1s ease-out all font-family 'MainFont' @@ -259,21 +259,22 @@ .signerBalanceMain position absolute left 67px - top 25px + top 24px right 18px - bottom 26px - font-size 16px + bottom 25px + font-size 17px display flex font-weight 300 white-space nowrap align-items center z-index 2 overflow hidden - font-family 'FiraCode' + font-family 'VCR' + .signerBalanceCurrencyLine background var(--ghostY) height 1px - margin 0px 12px 0px 12px + margin 2px 12px 0px 12px flex 1 .signerBalanceChain @@ -284,7 +285,7 @@ font-size 10px display flex align-items center - font-weight 600 + font-weight 700 white-space nowrap z-index 2 text-transform uppercase @@ -297,16 +298,16 @@ .signerBalancePrice position absolute - right 20px + right 18px bottom 10px - left 68px - font-size 12px - font-weight 400 + left 67px + font-size 13px + font-weight 700 color var(--mint) display flex align-items center justify-content space-between - font-family 'FiraCode' + font-family 'VCR' .signerBalanceOk display flex @@ -368,7 +369,7 @@ justify-content center align-items center font-size 11px - font-weight 300 + font-weight 400 letter-spacing -0.5px margin-left -0.5px @@ -388,8 +389,8 @@ display flex align-items center font-family 'FiraCode' - font-weight 300 - font-family 'VCR' + font-weight 400 + // .displayValueSymbol // font-family 'MainFont' @@ -503,7 +504,7 @@ justify-content center align-items center font-size 11px - font-weight 400 + font-weight 600 letter-spacing 1px text-transform uppercase padding 1px 20px 0px 21px diff --git a/app/tray/Account/Contacts/Expanded/index.js b/app/tray/Account/Contacts/Expanded/index.js new file mode 100644 index 000000000..cf4a4043a --- /dev/null +++ b/app/tray/Account/Contacts/Expanded/index.js @@ -0,0 +1,76 @@ +import React from 'react' +import Restore from 'react-restore' +import link from '../../../../../resources/link' + +import { ClusterBox, Cluster, ClusterRow, ClusterValue } from '../../../../../resources/Components/Cluster' + +class DappsPermissionsExpanded extends React.Component { + constructor(...args) { + super(...args) + this.moduleRef = React.createRef() + } + + render() { + const permissions = this.store('main.permissions', this.props.account) || {} + let permissionList = Object.keys(permissions).sort((a, b) => (a.origin < b.origin ? -1 : 1)) + if (!this.props.expanded) permissionList = permissionList.slice(0, 3) + + return ( +
+ + +
+ {permissionList.length === 0 ? ( + + +
+
+
No Permissions Set
+
+
+
+
+ ) : ( + permissionList.map((o) => { + return ( + + +
+
+
{permissions[o].origin}
+
link.send('tray:action', 'toggleAccess', this.props.account, o)} + > +
+
+
+
+ + + ) + }) + )} +
+ + +
+
{ + link.send('tray:action', 'clearPermissions', this.props.account) + }} + className='moduleButton' + > + Clear All Permissions +
+
+
+ ) + } +} + +export default Restore.connect(DappsPermissionsExpanded) diff --git a/app/tray/Account/Contacts/OriginExpanded/index.js b/app/tray/Account/Contacts/OriginExpanded/index.js new file mode 100644 index 000000000..a54860a50 --- /dev/null +++ b/app/tray/Account/Contacts/OriginExpanded/index.js @@ -0,0 +1,173 @@ +import React, { useState } from 'react' +import link from '../../../../../resources/link' +import styled, { css } from 'styled-components' + +import { OriginToggle } from './styled' + +import svg from '../../../../../resources/svg' +import useStore from '../../../../../resources/Hooks/useStore' +// import { matchFilter } from '../../../../../resources/utils' + +import { + ClusterBox, + Cluster, + ClusterRow, + ClusterValue, + ClusterBoxHeader +} from '../../../../../resources/Components/Cluster' +// import CollectionList from '../CollectionList' + +function bySessionStartTime(a, b) { + return b.session.startedAt - a.session.startedAt +} + +function byLastUpdated(a, b) { + return b.session.lastUpdatedAt - a.session.lastUpdatedAt +} + +const originFilter = ['frame-internal', 'frame-extension'] + +function getOriginsForChain(chain) { + const origins = useStore('main.origins') + Objec + const { connectedOrigins, disconnectedOrigins } = Object.entries(origins).reduce( + (acc, [id, origin]) => { + if (origin.chain.id === chain.id && !originFilter.includes(origin.name)) { + acc[connected ? 'connectedOrigins' : 'disconnectedOrigins'].push({ ...origin, id }) + } + + return acc + }, + { connectedOrigins: [], disconnectedOrigins: [] } + ) + + return { + connected: connectedOrigins.sort(bySessionStartTime), + disconnected: disconnectedOrigins + .sort(byLastUpdated) + .filter((origin) => Date.now() - origin.session.lastUpdatedAt < 60 * 60 * 1000) + } +} + +const OriginPermissions = styled.div` + width: 100%; +` + +const OriginPermissionName = styled.div` + height: 32px; + display: flex; + align-items: center; + justify-content: center; + font-weight: 300; + font-size: 16px; +` + +const OriginDrawerMenuItem = styled.div` + width: 32px; + height: 32px; + display: flex; + justify-content: center; + align-items: center; +` + +const OriginDrawerPermission = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + margin: 0px 8px; + padding: 8px; + box-sizing: border-box; +` + +const OriginRequests = ({ originId }) => { + const [averageRequests, setRequests] = React.useState('0.0') + const origin = useStore('main.origins', originId) || {} + if (!origin || !origin.session) return null + const connected = + (origin.session.startedAt && !origin.session.endedAt) || origin.session.startedAt > origin.session.endedAt + + const updateRequestRate = () => { + setRequests(origin.session.requests.toFixed(2)) + } + + useEffect(() => { + const requestUpdates = setInterval(() => { + updateRequestRate() + }, 1000) + return () => { + clearInterval(requestUpdates) + } + }) + + return ( +
+
+ {/* */} + {/*
{origin.name}
*/} +
+
{averageRequests}
+
{'reqs/min'}
+
+
+
+ ) +} + +const OriginExpanded = ({ expandedData, moduleId, account }) => { + const { originId } = expandedData || {} + + const permission = useStore('main.permissions', account, originId) || {} + + return ( +
+ + + {svg.window(14)} + {permission.origin} + + + + + + {/* {'Permissions'} */} + + {'Account Access'} + link.send('tray:action', 'toggleAccess', account, originId)} + /> + + + + + + + + {}}> + + + + {svg.chain(16)} + {'Default Chain'} + + {'Mainnet'} + + + + + {}}> + + + + {svg.trash(16)} + {'Remove Dapp'} + + + + +
+ ) +} + +export default OriginExpanded diff --git a/app/tray/Account/Contacts/OriginExpanded/styled/index.js b/app/tray/Account/Contacts/OriginExpanded/styled/index.js new file mode 100644 index 000000000..fda88700f --- /dev/null +++ b/app/tray/Account/Contacts/OriginExpanded/styled/index.js @@ -0,0 +1,94 @@ +import styled, { css } from 'styled-components' + +import svg from '../../../../../../resources/svg' + +const OriginPermissionToggleSwitch = styled.div` + position: absolute; + top: 2px; + left: 2px; + bottom: 2px; + width: 16px; + border-radius: 10px; + transition: var(--standard); + background: var(--ghostC); + transform: translateZ(0); + pointer-events: none; + border-bottom: 2px solid var(--ghostZ); +` + +const OriginPermissionToggleSwitchLocked = styled.div` + position: absolute; + top: 0px; + left: 0px; + bottom: 0px; + right: 0px; + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + + ${OriginPermissionToggleSwitch} { + opacity: 1; + transition: var(--standard); + } + + svg { + transition: var(--standard); + color: var(--ghostC); + } +` + +const OriginPermissionToggle = styled.div` + position: relative; + background: var(--bad); + height: 20px; + width: 40px; + margin-right: 6px; + margin-left: 12px; + margin-top: 4px; + border-radius: 10px; + transition: var(--standard); + transform: translateZ(0); + cursor: pointer; + min-width: 40px; + + * { + pointer-events: none; + } + + ${OriginPermissionToggleSwitch} { + background: var(--ghostD); + } + + &:hover { + ${OriginPermissionToggleSwitch} { + opacity: ${({ isLocked }) => (isLocked ? 0 : 1)}; + transition: ${({ isLocked }) => (isLocked ? 'var(--standardFast)' : 'var(--standard)')}; + } + ${OriginPermissionToggleSwitchLocked} { + opacity: ${({ isLocked }) => (isLocked ? 1 : 0)}; + transition: var(--standardFast); + } + } + + ${(props) => + props.isOn && + css` + background: var(--good); + + ${OriginPermissionToggleSwitch} { + position: absolute; + transform: translateX(20px); + } + `} +` + +export const OriginToggle = ({ isOn, isLocked, onClick }) => { + return ( + + {svg.lock(10)} + + + ) +} diff --git a/app/tray/Account/Contacts/Preview/index.js b/app/tray/Account/Contacts/Preview/index.js new file mode 100644 index 000000000..a50cd0b99 --- /dev/null +++ b/app/tray/Account/Contacts/Preview/index.js @@ -0,0 +1,41 @@ +import React from 'react' +import styled from 'styled-components' +import link from '../../../../../resources/link' +import svg from '../../../../../resources/svg' +import { matchFilter } from '../../../../../resources/utils' +import useStore from '../../../../../resources/Hooks/useStore' +import useAccountModule from '../../../../../resources/Hooks/useAccountModule' + +import { Cluster, ClusterRow, ClusterValue } from '../../../../../resources/Components/Cluster' + +const ModuleHeaderTitle = styled.div` + display: flex; + align-items: center; + justify-content: center; + + span { + margin-top: 2px; + margin-left: 12px; + } +` + +const DappsPreview = ({ filter = '', moduleId, account }) => { + const [moduleRef] = useAccountModule(moduleId) + + return ( +
+
+ + {svg.contact(14)} + {'Contacts'} + + {svg.expandArrows(14)} +
+
+ {'Newly interacted-with addresses the user may want to add to their contact list.'} +
+
+ ) +} + +export default DappsPreview diff --git a/app/tray/Account/Contacts/index.js b/app/tray/Account/Contacts/index.js new file mode 100644 index 000000000..ad87237bb --- /dev/null +++ b/app/tray/Account/Contacts/index.js @@ -0,0 +1,20 @@ +import React from 'react' +import Restore from 'react-restore' + +import DappsPreview from './Preview' +import DappsExpanded from './Expanded' + +import OriginExpanded from './OriginExpanded' + +class Dapps extends React.Component { + render() { + const expandedData = this.props.expandedData || {} + if (expandedData.originId) { + return + } else { + return this.props.expanded ? : + } + } +} + +export default Restore.connect(Dapps) diff --git a/app/tray/Account/Contacts/style/index.styl b/app/tray/Account/Contacts/style/index.styl new file mode 100644 index 000000000..25838772b --- /dev/null +++ b/app/tray/Account/Contacts/style/index.styl @@ -0,0 +1,114 @@ +.clearPermissionsButton + padding 6px + +.moduleMainPermissions + border-radius 20px + overflow auto + +.signerPermissionOrigin + background transparent + width 250px + direction rtl + text-overflow ellipsis + overflow hidden + text-align left + white-space nowrap + font-weight 400 + margin-top 4px + +.signerPermission + position relative + justify-content space-between + padding 12px + font-size 15px + font-weight 400 + transform translateZ(0) + z-index 2000 + width 100% + + .signerPermissionControls + display flex + position relative + justify-content space-between + transform translateZ(0) + z-index 40 + + .signerPermissionDetails + display flex + position relative + justify-content space-between + transform translateZ(0) + font-size 13px + padding 10px 0px 0px 1px + z-index 20 + font-weight 400 + +.signerPermissionToggle + position relative + background var(--bad) + height 20px + width 40px + border-radius 10px + transition var(--standard) + transform translateZ(0) + margin-top 4px + cursor pointer + + .signerPermissionToggleSwitch + position absolute + top 2px + left 2px + bottom 2px + width 16px + border-radius 10px + transition var(--standard) + background var(--ghostD) + transform translateZ(0) + // box-shadow 5px 5px 9px 0px var(--tripleThick) + pointer-events none + +.signerPermissionToggleOn + background var(--good) + .signerPermissionToggleSwitch + position absolute + transform translateX(20px) + +.signerPermissionToggle:hover + .signerPermissionToggleSwitch + background var(--ghostD) + +.signerPermissionToggleSmall + position relative + background var(--bad) + height 14px + width 30px + border-radius 10px + transition var(--standard) + transform translateZ(0) + margin-top 2px + margin-right 4px + cursor pointer + + .signerPermissionToggleSwitch + position absolute + top 2px + left 2px + bottom 2px + width 10px + border-radius 10px + transition var(--standard) + background var(--ghostC) + transform translateZ(0) + box-shadow 0px 3px 3px 0px var(--tripleThick) + pointer-events none + +.signerPermissionToggleSmallOn + background var(--good) + + .signerPermissionToggleSwitch + position absolute + transform translateX(16px) + +.signerPermissionToggleSmall:hover + .signerPermissionToggleSwitch + background var(--ghostD) diff --git a/app/tray/Account/Inventory/CollectionList/index.js b/app/tray/Account/Inventory/CollectionList/index.js index e4abc4c24..ef0615c07 100644 --- a/app/tray/Account/Inventory/CollectionList/index.js +++ b/app/tray/Account/Inventory/CollectionList/index.js @@ -18,15 +18,15 @@ import { } from './styled' const displayName = (name = '') => { - if (name.length > 24) { - return name.slice(0, 22) + '..' + if (name.length > 26) { + return name.slice(0, 24).trim() + '..' } return name } const displayChain = (name = '') => { - if (name.length > 14) { - return name.slice(0, 12) + '..' + if (name.length > 12) { + return name.slice(0, 10).trim() + '..' } return name } diff --git a/app/tray/Account/Inventory/style/index.styl b/app/tray/Account/Inventory/style/index.styl index f604ab961..9fd829f7a 100644 --- a/app/tray/Account/Inventory/style/index.styl +++ b/app/tray/Account/Inventory/style/index.styl @@ -45,7 +45,7 @@ padding 16px 12px 16px 16px font-size 14px cursor pointer - font-weight 400 + font-weight 500 * pointer-events none @@ -77,7 +77,7 @@ font-size 16px margin-bottom -2px border 2px solid var(--ghostZ) - font-weight 400 + font-weight 500 font-size 14px .inventoryCollection:last-child @@ -88,7 +88,7 @@ font-size 10px text-transform uppercase color var(--mint) - font-weight 400 + font-weight 500 text-align center .inventoryPreview @@ -147,7 +147,7 @@ justify-content center align-items center font-size 11px - font-weight 300 + font-weight 400 letter-spacing -0.5px margin-left -0.5px @@ -240,7 +240,7 @@ justify-content center align-items center font-size 8px - font-weight 400 + font-weight 500 letter-spacing -0.5px padding 4px text-align center @@ -256,7 +256,7 @@ bottom 26px font-size 12px display flex - font-weight 500 + font-weight 600 white-space nowrap align-items center z-index 2 diff --git a/app/tray/Account/Permissions/DappsList/index.js b/app/tray/Account/Permissions/DappsList/index.js new file mode 100644 index 000000000..d5c170e51 --- /dev/null +++ b/app/tray/Account/Permissions/DappsList/index.js @@ -0,0 +1,219 @@ +import React, { useState, createRef, useEffect } from 'react' +import styled from 'styled-components' + +import link from '../../../../../resources/link' +import svg from '../../../../../resources/svg' +import { matchFilter } from '../../../../../resources/utils' +import useStore from '../../../../../resources/Hooks/useStore' + +import { OriginToggle } from './styled' + +import { Cluster, ClusterRow, ClusterValue } from '../../../../../resources/Components/Cluster' + +function bySessionStartTime(a, b) { + return b.session.startedAt - a.session.startedAt +} + +function byLastUpdated(a, b) { + return b.session.lastUpdatedAt - a.session.lastUpdatedAt +} + +const originFilter = ['frame-internal', 'frame-extension'] + +function getOriginsForChain(chain) { + const origins = useStore('main.origins') + Objec + const { connectedOrigins, disconnectedOrigins } = Object.entries(origins).reduce( + (acc, [id, origin]) => { + if (origin.chain.id === chain.id && !originFilter.includes(origin.name)) { + acc[connected ? 'connectedOrigins' : 'disconnectedOrigins'].push({ ...origin, id }) + } + + return acc + }, + { connectedOrigins: [], disconnectedOrigins: [] } + ) + + return { + connected: connectedOrigins.sort(bySessionStartTime), + disconnected: disconnectedOrigins + .sort(byLastUpdated) + .filter((origin) => Date.now() - origin.session.lastUpdatedAt < 60 * 60 * 1000) + } +} + +const OriginName = styled.div` + padding: 20px; + font-weight: 400; + font-size: 16px; +` + +const OriginPermissions = styled.div` + width: 100%; +` + +const OriginPermissionName = styled.div` + height: 32px; + display: flex; + align-items: center; + justify-content: center; + font-weight: 300; + font-size: 16px; +` + +const OriginDrawerMenuItem = styled.div` + width: 32px; + height: 32px; + display: flex; + justify-content: center; + align-items: center; +` + +const OriginPermissionTitle = styled.div` + text-transform: uppercase; + padding: 8px; + font-size: 10px; + font-weight: 500; + width: calc(100% - 16px); + margin: 0px 8px; + box-sizing: border-box; + display: flex; + justify-content: center; + align-items: center; + border-bottom: 1px solid var(--ghostY); +` + +const OriginDrawerPermission = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + margin: 0px 8px; + padding: 8px; + box-sizing: border-box; +` + +const OriginRequests = ({ originId }) => { + const [averageRequests, setRequests] = React.useState('0.0') + const origin = useStore('main.origins', originId) || {} + if (!origin || !origin.session) return null + + const updateRequestRate = () => { + setRequests(origin.session.requests.toFixed(2)) + } + + useEffect(() => { + const requestUpdates = setInterval(() => { + updateRequestRate() + }, 1000) + return () => { + clearInterval(requestUpdates) + } + }) + + return ( +
+
+
+
{averageRequests}
+
{'reqs/min'}
+
+
+
+ ) +} + +const OriginItem = ({ moduleId, originId, account, toggleOpen, open, first, last }) => { + if (!originId) return null + const permission = useStore('main.permissions', account, originId) || {} + const origin = useStore('main.origins', originId) || {} + return ( + <> + {open && !first &&
} + + { + const crumb = { + view: 'expandedModule', + data: { + id: moduleId, + account: account, + originId: permission.handlerId, + title: 'Dapp Settings' + } + } + link.send('nav:forward', 'panel', crumb) + }} + active={open} + > + {permission.origin} + + + + {open && ( + <> + + + + {'Permissions'} + + {'Account Access'} + link.send('tray:action', 'toggleAccess', account, originId)} + /> + + + + + + {}}> + {svg.chain(16)} + + + {}}> + {svg.trash(16)} + + + + )} + {open && !last &&
} + + ) +} + +const OriginsList = ({ moduleId, permissionList, account }) => { + const [open, setOpen] = useState(-1) + return ( + + {permissionList.length === 0 ? ( + + +
+
+
No Permissions Set
+
+
+
+
+ ) : ( + permissionList.map((originId, i) => { + // useStore('main.origins', originId) + return ( + setOpen(open === i ? -1 : i)} + /> + ) + }) + )} +
+ ) +} + +export default OriginsList diff --git a/app/tray/Account/Permissions/DappsList/styled/index.js b/app/tray/Account/Permissions/DappsList/styled/index.js new file mode 100644 index 000000000..fda88700f --- /dev/null +++ b/app/tray/Account/Permissions/DappsList/styled/index.js @@ -0,0 +1,94 @@ +import styled, { css } from 'styled-components' + +import svg from '../../../../../../resources/svg' + +const OriginPermissionToggleSwitch = styled.div` + position: absolute; + top: 2px; + left: 2px; + bottom: 2px; + width: 16px; + border-radius: 10px; + transition: var(--standard); + background: var(--ghostC); + transform: translateZ(0); + pointer-events: none; + border-bottom: 2px solid var(--ghostZ); +` + +const OriginPermissionToggleSwitchLocked = styled.div` + position: absolute; + top: 0px; + left: 0px; + bottom: 0px; + right: 0px; + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + + ${OriginPermissionToggleSwitch} { + opacity: 1; + transition: var(--standard); + } + + svg { + transition: var(--standard); + color: var(--ghostC); + } +` + +const OriginPermissionToggle = styled.div` + position: relative; + background: var(--bad); + height: 20px; + width: 40px; + margin-right: 6px; + margin-left: 12px; + margin-top: 4px; + border-radius: 10px; + transition: var(--standard); + transform: translateZ(0); + cursor: pointer; + min-width: 40px; + + * { + pointer-events: none; + } + + ${OriginPermissionToggleSwitch} { + background: var(--ghostD); + } + + &:hover { + ${OriginPermissionToggleSwitch} { + opacity: ${({ isLocked }) => (isLocked ? 0 : 1)}; + transition: ${({ isLocked }) => (isLocked ? 'var(--standardFast)' : 'var(--standard)')}; + } + ${OriginPermissionToggleSwitchLocked} { + opacity: ${({ isLocked }) => (isLocked ? 1 : 0)}; + transition: var(--standardFast); + } + } + + ${(props) => + props.isOn && + css` + background: var(--good); + + ${OriginPermissionToggleSwitch} { + position: absolute; + transform: translateX(20px); + } + `} +` + +export const OriginToggle = ({ isOn, isLocked, onClick }) => { + return ( + + {svg.lock(10)} + + + ) +} diff --git a/app/tray/Account/Permissions/DappsPreview/index.js b/app/tray/Account/Permissions/DappsPreview/index.js index 91faa9925..8c70c78b7 100644 --- a/app/tray/Account/Permissions/DappsPreview/index.js +++ b/app/tray/Account/Permissions/DappsPreview/index.js @@ -1,109 +1,50 @@ import React from 'react' -import Restore from 'react-restore' import link from '../../../../../resources/link' import svg from '../../../../../resources/svg' import { matchFilter } from '../../../../../resources/utils' +import useStore from '../../../../../resources/Hooks/useStore' +import useAccountModule from '../../../../../resources/Hooks/useAccountModule' -import { Cluster, ClusterRow, ClusterValue } from '../../../../../resources/Components/Cluster' +import DappsList from '../DappsList' -class DappsPermissionsPreview extends React.Component { - constructor(...args) { - super(...args) - this.moduleRef = React.createRef() - if (!this.props.expanded) { - this.resizeObserver = new ResizeObserver(() => { - if (this.moduleRef && this.moduleRef.current) { - link.send('tray:action', 'updateAccountModule', this.props.moduleId, { - height: this.moduleRef.current.clientHeight - }) - } - }) - } - } +const DappsPreview = ({ filter = '', moduleId, account }) => { + const [moduleRef] = useAccountModule(moduleId) + const permissions = useStore('main.permissions', account) || {} + let permissionList = Object.keys(permissions) + .filter((o) => { + return matchFilter(filter, [permissions[o].origin]) + }) + .sort((a, b) => (a.origin < b.origin ? -1 : 1)) + .slice(0, 4) - componentDidMount() { - if (this.resizeObserver) this.resizeObserver.observe(this.moduleRef.current) - } - - componentWillUnmount() { - if (this.resizeObserver) this.resizeObserver.disconnect() - } - - render() { - const permissions = this.store('main.permissions', this.props.account) || {} - let permissionList = Object.keys(permissions) - .filter((o) => { - const { filter = '' } = this.props - return matchFilter(filter, [permissions[o].origin]) - }) - .sort((a, b) => (a.origin < b.origin ? -1 : 1)) - if (!this.props.expanded) permissionList = permissionList.slice(0, 4) - - return ( -
-
- {svg.window(14)} - {'Dapps'} -
- - {permissionList.length === 0 ? ( - - -
-
-
No Permissions Set
-
-
-
-
- ) : ( - permissionList.map((o) => { - return ( - - -
-
-
{permissions[o].origin}
-
link.send('tray:action', 'toggleAccess', this.props.account, o)} - > -
-
-
-
- - - ) - }) - )} - -
-
-
{ - const crumb = { - view: 'expandedModule', - data: { - id: this.props.moduleId, - account: this.props.account - } + return ( +
+
+ {svg.window(14)} + {'Dapps'} +
+ +
+
+
{ + const crumb = { + view: 'expandedModule', + data: { + id: moduleId, + account: account } - link.send('nav:forward', 'panel', crumb) - }} - > - More -
+ } + link.send('nav:forward', 'panel', crumb) + }} + > + More
- ) - } +
+ ) } -export default Restore.connect(DappsPermissionsPreview) +export default DappsPreview diff --git a/app/tray/Account/Permissions/OriginExpanded/index.js b/app/tray/Account/Permissions/OriginExpanded/index.js new file mode 100644 index 000000000..9f72ef600 --- /dev/null +++ b/app/tray/Account/Permissions/OriginExpanded/index.js @@ -0,0 +1,107 @@ +import React, { useState } from 'react' +import link from '../../../../../resources/link' +import styled, { css } from 'styled-components' + +import { OriginToggle } from './styled' + +import svg from '../../../../../resources/svg' +import useStore from '../../../../../resources/Hooks/useStore' +// import { matchFilter } from '../../../../../resources/utils' + +import { + ClusterBox, + Cluster, + ClusterRow, + ClusterValue, + ClusterBoxHeader +} from '../../../../../resources/Components/Cluster' +// import CollectionList from '../CollectionList' + +const OriginPermissions = styled.div` + width: 100%; +` + +const OriginPermissionName = styled.div` + height: 32px; + display: flex; + align-items: center; + justify-content: center; + font-weight: 300; + font-size: 16px; +` + +const OriginDrawerMenuItem = styled.div` + width: 32px; + height: 32px; + display: flex; + justify-content: center; + align-items: center; +` + +const OriginDrawerPermission = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + margin: 0px 8px; + padding: 8px; + box-sizing: border-box; +` + +const OriginExpanded = ({ expandedData, moduleId, account }) => { + const { originId } = expandedData || {} + + const permission = useStore('main.permissions', account, originId) || {} + + return ( +
+ + + {svg.window(14)} + {permission.origin} + + + + + + {/* {'Permissions'} */} + + {'Account Access'} + link.send('tray:action', 'toggleAccess', account, originId)} + /> + + + + + + + + {}}> + + + + {svg.chain(16)} + {'Default Chain'} + + {'Mainnet'} + + + + + {}}> + + + + {svg.trash(16)} + {'Remove Dapp'} + + + + +
+ ) +} + +export default OriginExpanded diff --git a/app/tray/Account/Permissions/OriginExpanded/styled/index.js b/app/tray/Account/Permissions/OriginExpanded/styled/index.js new file mode 100644 index 000000000..fda88700f --- /dev/null +++ b/app/tray/Account/Permissions/OriginExpanded/styled/index.js @@ -0,0 +1,94 @@ +import styled, { css } from 'styled-components' + +import svg from '../../../../../../resources/svg' + +const OriginPermissionToggleSwitch = styled.div` + position: absolute; + top: 2px; + left: 2px; + bottom: 2px; + width: 16px; + border-radius: 10px; + transition: var(--standard); + background: var(--ghostC); + transform: translateZ(0); + pointer-events: none; + border-bottom: 2px solid var(--ghostZ); +` + +const OriginPermissionToggleSwitchLocked = styled.div` + position: absolute; + top: 0px; + left: 0px; + bottom: 0px; + right: 0px; + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + + ${OriginPermissionToggleSwitch} { + opacity: 1; + transition: var(--standard); + } + + svg { + transition: var(--standard); + color: var(--ghostC); + } +` + +const OriginPermissionToggle = styled.div` + position: relative; + background: var(--bad); + height: 20px; + width: 40px; + margin-right: 6px; + margin-left: 12px; + margin-top: 4px; + border-radius: 10px; + transition: var(--standard); + transform: translateZ(0); + cursor: pointer; + min-width: 40px; + + * { + pointer-events: none; + } + + ${OriginPermissionToggleSwitch} { + background: var(--ghostD); + } + + &:hover { + ${OriginPermissionToggleSwitch} { + opacity: ${({ isLocked }) => (isLocked ? 0 : 1)}; + transition: ${({ isLocked }) => (isLocked ? 'var(--standardFast)' : 'var(--standard)')}; + } + ${OriginPermissionToggleSwitchLocked} { + opacity: ${({ isLocked }) => (isLocked ? 1 : 0)}; + transition: var(--standardFast); + } + } + + ${(props) => + props.isOn && + css` + background: var(--good); + + ${OriginPermissionToggleSwitch} { + position: absolute; + transform: translateX(20px); + } + `} +` + +export const OriginToggle = ({ isOn, isLocked, onClick }) => { + return ( + + {svg.lock(10)} + + + ) +} diff --git a/app/tray/Account/Permissions/index.js b/app/tray/Account/Permissions/index.js index 2ab886b53..60d969955 100644 --- a/app/tray/Account/Permissions/index.js +++ b/app/tray/Account/Permissions/index.js @@ -4,9 +4,16 @@ import Restore from 'react-restore' import DappsPreview from './DappsPreview' import DappsExpanded from './DappsExpanded' +import OriginExpanded from './OriginExpanded' + class Dapps extends React.Component { render() { - return this.props.expanded ? : + const expandedData = this.props.expandedData || {} + if (expandedData.originId) { + return + } else { + return this.props.expanded ? : + } } } diff --git a/app/tray/Account/Permissions/style/index.styl b/app/tray/Account/Permissions/style/index.styl index 103c013ba..25838772b 100644 --- a/app/tray/Account/Permissions/style/index.styl +++ b/app/tray/Account/Permissions/style/index.styl @@ -13,7 +13,7 @@ overflow hidden text-align left white-space nowrap - font-weight 300 + font-weight 400 margin-top 4px .signerPermission @@ -21,7 +21,7 @@ justify-content space-between padding 12px font-size 15px - font-weight 300 + font-weight 400 transform translateZ(0) z-index 2000 width 100% @@ -41,7 +41,7 @@ font-size 13px padding 10px 0px 0px 1px z-index 20 - font-weight 300 + font-weight 400 .signerPermissionToggle position relative diff --git a/app/tray/Account/Requests/AddTokenRequest/style/index.styl b/app/tray/Account/Requests/AddTokenRequest/style/index.styl index b40431db9..1c06d040a 100644 --- a/app/tray/Account/Requests/AddTokenRequest/style/index.styl +++ b/app/tray/Account/Requests/AddTokenRequest/style/index.styl @@ -14,7 +14,7 @@ .requestTokenOrigin font-size 22px - font-weight 300 + font-weight 400 width 100% text-align center transform translateZ(0px) @@ -33,7 +33,7 @@ .requestTokenOriginSub width 100% font-size 12px - font-weight 300 + font-weight 400 text-transform uppercase width 100% text-align center @@ -47,7 +47,7 @@ border-radius 12px text-align center background var(--ghostA) - font-weight 300 + font-weight 400 font-size 26px padding 10px 0px diff --git a/app/tray/Account/Requests/ChainRequest/style/index.styl b/app/tray/Account/Requests/ChainRequest/style/index.styl index 3380e906d..ec671c655 100644 --- a/app/tray/Account/Requests/ChainRequest/style/index.styl +++ b/app/tray/Account/Requests/ChainRequest/style/index.styl @@ -15,7 +15,7 @@ .requestChainOrigin font-size 22px - font-weight 300 + font-weight 400 width 100% text-align center transform translateZ(0px) @@ -34,7 +34,7 @@ .requestChainOriginSub width 100% font-size 12px - font-weight 300 + font-weight 400 text-transform uppercase width 100% text-align center @@ -48,6 +48,6 @@ border-radius 12px text-align center background var(--ghostA) - font-weight 300 + font-weight 400 font-size 26px - padding 10px 0px \ No newline at end of file + padding 10px 0px diff --git a/app/tray/Account/Requests/SignPermitRequest/style/index.styl b/app/tray/Account/Requests/SignPermitRequest/style/index.styl index 7d7a460fa..d6374c742 100644 --- a/app/tray/Account/Requests/SignPermitRequest/style/index.styl +++ b/app/tray/Account/Requests/SignPermitRequest/style/index.styl @@ -21,7 +21,7 @@ font-size 16px color var(--outerspace) text-transform uppercase - font-weight 300 + font-weight 400 letter-spacing 1px div @@ -31,7 +31,7 @@ color var(--moon) .approveTokenSpendEditTitle - font-weight 300 + font-weight 400 font-size 12px margin-top 4px margin-left 2px @@ -59,7 +59,7 @@ padding 0px 15px 1px 16px font-size 12px text-transform uppercase - font-weight 300 + font-weight 400 box-sizing border-box letter-spacing 1px * @@ -91,7 +91,7 @@ .approveTokenSpendSpender font-size 12px - font-weight 400 + font-weight 500 text-transform uppercase line-height 25px letter-spacing 1px @@ -122,7 +122,7 @@ .approveTokenSpendSub font-size 12px - font-weight 300 + font-weight 400 text-transform uppercase letter-spacing 1px margin 10px @@ -141,7 +141,7 @@ .approveTokenSpendTokenSymbol text-transform uppercase - font-weight 300 + font-weight 400 letter-spacing 3px display block @@ -162,7 +162,7 @@ .approveTokenSpendTokenName - font-weight 300 + font-weight 400 font-size 12px margin-top 4px margin-left 1px @@ -182,7 +182,7 @@ box-sizing border-box position relative overflow hidden - font-weight 400 + font-weight 500 .approveTokenSpendAmountLabel position absolute @@ -213,7 +213,7 @@ padding-right 20px padding-left 16px font-size 10px - font-weight 500 + font-weight 600 text-transform uppercase color var(--moon) cursor pointer @@ -236,7 +236,7 @@ align-items center text-transform uppercase margin-top 4px - font-weight 500 + font-weight 600 z-index 40000 letter-spacing 1px margin-left -1px @@ -267,7 +267,7 @@ color var(--outerspace) font-size 20px font-family 'FiraCode' - font-weight 300 + font-weight 400 display flex justify-content center align-items center diff --git a/app/tray/Account/Requests/TransactionRequest/AdjustFee/style/index.styl b/app/tray/Account/Requests/TransactionRequest/AdjustFee/style/index.styl index 918abe0d8..9d429af0f 100644 --- a/app/tray/Account/Requests/TransactionRequest/AdjustFee/style/index.styl +++ b/app/tray/Account/Requests/TransactionRequest/AdjustFee/style/index.styl @@ -56,7 +56,7 @@ display flex justify-content center text-transform uppercase - font-weight 300 + font-weight 400 // .txModuleDataBodyCopied // position absolute @@ -85,7 +85,7 @@ top 9px right 15px font-size 11px - font-weight 400 + font-weight 500 font-family 'MainFont' text-transform uppercase @@ -94,7 +94,7 @@ top 9px left 15px font-size 11px - font-weight 400 + font-weight 500 font-family 'MainFont' text-transform uppercase @@ -135,12 +135,12 @@ text-align center font-size 17px font-family 'MainFont' - font-weight 300 + font-weight 400 .decodedDataContractMethod text-align center font-family 'MainFont' - font-weight 300 + font-weight 400 font-size 16px color var(--moon) @@ -149,7 +149,7 @@ font-family 'MainFont' text-transform uppercase letter-spacing 2px - font-weight 400 + font-weight 500 text-align center height 30px display flex @@ -172,7 +172,7 @@ right 0 height 30px font-size 12px - font-weight 400 + font-weight 500 font-family 'MainFont' display flex align-items center diff --git a/app/tray/Account/Requests/TransactionRequest/TokenSpend/style/index.styl b/app/tray/Account/Requests/TransactionRequest/TokenSpend/style/index.styl index fd0c3396a..32b5316d5 100644 --- a/app/tray/Account/Requests/TransactionRequest/TokenSpend/style/index.styl +++ b/app/tray/Account/Requests/TransactionRequest/TokenSpend/style/index.styl @@ -21,7 +21,7 @@ font-size 16px color var(--outerspace) text-transform uppercase - font-weight 300 + font-weight 400 letter-spacing 1px div @@ -31,7 +31,7 @@ color var(--moon) .approveTokenSpendEditTitle - font-weight 300 + font-weight 400 font-size 12px margin-top 4px margin-left 2px @@ -59,7 +59,7 @@ padding 0px 15px 1px 16px font-size 12px text-transform uppercase - font-weight 300 + font-weight 400 box-sizing border-box letter-spacing 1px * @@ -91,7 +91,7 @@ .approveTokenSpendSpender font-size 12px - font-weight 400 + font-weight 500 text-transform uppercase line-height 25px letter-spacing 1px @@ -122,7 +122,7 @@ .approveTokenSpendSub font-size 12px - font-weight 300 + font-weight 400 text-transform uppercase letter-spacing 1px margin 10px @@ -141,7 +141,7 @@ .approveTokenSpendTokenSymbol text-transform uppercase - font-weight 300 + font-weight 400 letter-spacing 3px display block @@ -162,7 +162,7 @@ .approveTokenSpendTokenName - font-weight 300 + font-weight 400 font-size 12px margin-top 4px margin-left 1px @@ -186,7 +186,7 @@ align-items center text-transform uppercase margin-top 4px - font-weight 500 + font-weight 600 z-index 40000 letter-spacing 1px margin-left -1px @@ -200,7 +200,7 @@ display flex justify-content center align-items center - font-weight 400 + font-weight 500 @keyframes land 0% @@ -219,7 +219,7 @@ padding-right 20px padding-left 16px font-size 10px - font-weight 500 + font-weight 600 text-transform uppercase color var(--moon) cursor pointer @@ -257,7 +257,7 @@ color var(--outerspace) font-size 20px font-family 'FiraCode' - font-weight 300 + font-weight 400 display flex justify-content center align-items center diff --git a/app/tray/Account/Requests/TransactionRequest/TxData/style/index.styl b/app/tray/Account/Requests/TransactionRequest/TxData/style/index.styl index 7e9ebb93d..2c2f1bff2 100644 --- a/app/tray/Account/Requests/TransactionRequest/TxData/style/index.styl +++ b/app/tray/Account/Requests/TransactionRequest/TxData/style/index.styl @@ -5,13 +5,13 @@ letter-spacing 2px padding 16px 0px 8px 18px font-family 'MainFont' - font-weight 500 + font-weight 600 display flex align-items center ._txDataValue font-size 17px - font-weight 400 + font-weight 500 display flex justify-content center align-items center @@ -48,14 +48,14 @@ text-transform uppercase font-size 15px letter-spacing 1px - font-weight 300 + font-weight 400 color var(--good) ._txDataValueContract text-transform uppercase font-size 15px letter-spacing 1px - font-weight 300 + font-weight 400 color var(--moon) ._txData:hover diff --git a/app/tray/Account/Requests/TransactionRequest/TxFee/index.js b/app/tray/Account/Requests/TransactionRequest/TxFee/index.js index fce9002c0..d229ecea9 100644 --- a/app/tray/Account/Requests/TransactionRequest/TxFee/index.js +++ b/app/tray/Account/Requests/TransactionRequest/TxFee/index.js @@ -83,7 +83,9 @@ class TxFee extends React.Component { const serializedTransaction = utils.serializeTransaction(tx) // Get current Ethereum gas price - const ethBaseFee = this.store('main.networksMeta.ethereum', 1, 'gas.price.fees.nextBaseFee') + const feeMarket = this.store('main.networksMeta.ethereum', 1, 'gas.fees') || {} + const { nextBaseFee: ethBaseFee } = feeMarket + const l1DataFee = calculateOptimismL1DataFee(serializedTransaction, ethBaseFee) // Compute the L2 execution fee diff --git a/app/tray/Account/Requests/TransactionRequest/TxFee/style/index.styl b/app/tray/Account/Requests/TransactionRequest/TxFee/style/index.styl index fbdb17623..23d2a1ee9 100644 --- a/app/tray/Account/Requests/TransactionRequest/TxFee/style/index.styl +++ b/app/tray/Account/Requests/TransactionRequest/TxFee/style/index.styl @@ -1,6 +1,6 @@ ._txFeeBar font-size 17px - font-weight 400 + font-weight 500 display flex justify-content center align-items center @@ -39,8 +39,8 @@ pointer-events none ._txFeeGweiValue - font-weight 300 - font-size 22px + font-weight 400 + font-size 23px display flex align-items center justify-content center @@ -55,7 +55,7 @@ padding-left 4px position relative top 0px - font-weight 500 + font-weight 600 font-size 11px text-transform uppercase @@ -80,14 +80,14 @@ ._txFeeUSDTagValue font-size 13px - font-weight 300 + font-weight 400 ._txFeeValue position relative display flex align-items center justify-content center - font-weight 300 + font-weight 400 font-size 14px margin-left 10px font-size 18px @@ -98,7 +98,7 @@ align-items center justify-content center font-size 14px - font-weight 400 + font-weight 500 span padding 4px @@ -134,7 +134,7 @@ font-size 18px ._txFeeUSD - font-weight 300 + font-weight 400 position relative font-size 13px @@ -310,7 +310,7 @@ // // left 50% // // margin -24px 0 0 -80px // a -// font-weight 400 +// font-weight 500 // text-transform uppercase // margin 0 // padding 0 diff --git a/app/tray/Account/Requests/TransactionRequest/TxRecipient/style/index.styl b/app/tray/Account/Requests/TransactionRequest/TxRecipient/style/index.styl index d1a620737..170c6bbfc 100644 --- a/app/tray/Account/Requests/TransactionRequest/TxRecipient/style/index.styl +++ b/app/tray/Account/Requests/TransactionRequest/TxRecipient/style/index.styl @@ -4,11 +4,11 @@ font-size 13px position relative top 0px - font-weight 300 + font-weight 400 ._txRecipient font-size 16px - font-weight 300 + font-weight 400 font-family 'FiraCode' ._txRecipientFull diff --git a/app/tray/Account/Requests/TransactionRequest/TxValue/style/index.styl b/app/tray/Account/Requests/TransactionRequest/TxValue/style/index.styl index f63d9a52d..fc124cc9d 100644 --- a/app/tray/Account/Requests/TransactionRequest/TxValue/style/index.styl +++ b/app/tray/Account/Requests/TransactionRequest/TxValue/style/index.styl @@ -15,7 +15,7 @@ display flex justify-content center align-items center - font-size 16px + font-size 18px font-weight 400 .txSendingValueSymbol @@ -57,7 +57,7 @@ ._txMainValues font-size 17px - font-weight 400 + font-weight 500 border-radius 20px -webkit-app-region no-drag transition none @@ -93,7 +93,7 @@ align-items stretch border-radius 12px overflow hidden - font-weight 300 + font-weight 400 ._txMainTransferringPart flex-grow 1 @@ -109,7 +109,7 @@ ._txMainTransferringSymbol font-size 14px - font-weight 300 + font-weight 400 margin-right 5px position relative top -1px @@ -182,7 +182,7 @@ z-index 100001 overflow hidden font-size 11px - font-weight 400 + font-weight 500 text-transform uppercase letter-spacing 1px text-align center @@ -204,7 +204,7 @@ // animation-fill-mode both overflow hidden font-size 11px - font-weight 400 + font-weight 500 text-transform uppercase letter-spacing 1px text-align center @@ -232,7 +232,7 @@ text-transform uppercase font-family 'MainFont' letter-spacing 2px - font-weight 300 + font-weight 400 font-size 14px ._txContinueButton:hover diff --git a/app/tray/Account/Requests/TransactionRequest/ViewData/style/index.styl b/app/tray/Account/Requests/TransactionRequest/ViewData/style/index.styl index 46b6674a4..426f6eae6 100644 --- a/app/tray/Account/Requests/TransactionRequest/ViewData/style/index.styl +++ b/app/tray/Account/Requests/TransactionRequest/ViewData/style/index.styl @@ -10,7 +10,7 @@ top 9px right 15px font-size 11px - font-weight 400 + font-weight 500 font-family 'MainFont' text-transform uppercase @@ -19,7 +19,7 @@ top 9px left 15px font-size 11px - font-weight 400 + font-weight 500 font-family 'MainFont' text-transform uppercase @@ -61,12 +61,12 @@ text-align center font-size 17px font-family 'MainFont' - font-weight 300 + font-weight 400 .decodedDataContractMethod text-align center font-family 'MainFont' - font-weight 300 + font-weight 400 font-size 16px color var(--moon) @@ -74,7 +74,7 @@ font-size 12px text-transform uppercase letter-spacing 2px - font-weight 300 + font-weight 400 color var(--moon) text-align center height 30px @@ -99,7 +99,7 @@ right 0 height 30px font-size 12px - font-weight 400 + font-weight 500 font-family 'MainFont' display flex align-items center diff --git a/app/tray/Account/Requests/TransactionRequest/style/new.styl b/app/tray/Account/Requests/TransactionRequest/style/new.styl index 21fab2f7e..6f8cf737a 100644 --- a/app/tray/Account/Requests/TransactionRequest/style/new.styl +++ b/app/tray/Account/Requests/TransactionRequest/style/new.styl @@ -173,7 +173,7 @@ text-transform uppercase font-size 18px text-align center - font-weight 400 + font-weight 500 letter-spacing 6px margin-left 4px opacity 1 @@ -198,7 +198,7 @@ display flex flex-direction row align-items stretch - font-weight 300 + font-weight 400 // overflow hidden ._txModuleSlice @@ -237,7 +237,7 @@ width 100% font-family 'MainFont' font-size 16px - font-weight 400 + font-weight 500 cursor pointer padding 12px @@ -256,7 +256,7 @@ ._txDescriptionSummaryTag font-size 12px - font-weight 500 + font-weight 600 text-transform uppercase text-align center white-space nowrap diff --git a/app/tray/Account/Requests/style/index.styl b/app/tray/Account/Requests/style/index.styl index f4736a7ad..854f25f73 100644 --- a/app/tray/Account/Requests/style/index.styl +++ b/app/tray/Account/Requests/style/index.styl @@ -161,7 +161,7 @@ padding 0px 10px 10px 10px text-transform uppercase letter-spacing 4px - font-weight 300 + font-weight 400 .requestCount background var(--thin) @@ -171,7 +171,7 @@ display flex justify-content center align-items center - font-weight 300 + font-weight 400 .requestBottom position relative @@ -198,11 +198,11 @@ align-items center .requestGroupName - font-weight 400 + font-weight 500 font-size 12px .requestGroupButton - font-weight 400 + font-weight 500 font-size 12px cursor pointer height 22px @@ -272,7 +272,7 @@ .noRequests font-size 10px text-transform uppercase - font-weight 400 + font-weight 500 letter-spacing 1px padding-left 1px display flex @@ -283,7 +283,7 @@ color var(--outerspace04) margin-top 3px height 48px - font-weight 400 + font-weight 500 border-radius 17px padding-top 2px border-bottom 2px solid var(--ghostZ) @@ -302,7 +302,7 @@ text-transform uppercase font-size 11px line-height 10px - font-weight 300 + font-weight 400 letter-spacing 2px transition var(--standard) color var(--outerspace08) @@ -329,7 +329,7 @@ margin-top 8px margin-bottom 10px font-size 10px - font-weight 300 + font-weight 400 position relative display flex align-items space-between @@ -371,7 +371,7 @@ .requestMetaChain font-size 18px text-align left - font-weight 400 + font-weight 500 padding-left 0px font-family 'MainFont' display flex @@ -380,7 +380,7 @@ .requestMetaOrigin font-size 12px text-align left - font-weight 400 + font-weight 500 padding-left 0px font-family 'MainFont' display flex @@ -474,7 +474,7 @@ display flex justify-content space-around align-items center - font-weight 300 + font-weight 400 z-index 999999999999999 transition var(--standard) animation 0.32s fadeUp ease-out @@ -493,7 +493,7 @@ .requestNoticeInnerText font-size 12px - font-weight 400 + font-weight 500 text-transform uppercase letter-spacing 2px white-space normal @@ -508,7 +508,7 @@ margin 16px auto 0px auto border-radius 8px letter-spacing 2px - font-weight 400 + font-weight 500 display flex justify-content center align-items center @@ -537,7 +537,7 @@ .requestProviderOrigin font-size 22px - font-weight 300 + font-weight 400 width 300px text-align center transform translateZ(0px) @@ -548,15 +548,15 @@ .requestProviderOrigin18 font-size 17 - font-weight 300 + font-weight 400 .requestProviderOrigin12 - font-weight 300 + font-weight 400 font-size 14 .requestProviderSub font-size 12px - font-weight 300 + font-weight 400 letter-spacing 2px text-transform uppercase display flex @@ -585,7 +585,7 @@ justify-content center align-items center text-transform uppercase - font-weight 300 + font-weight 400 transform scale(0.8) position absolute bottom 50px @@ -606,7 +606,7 @@ justify-content center align-items center text-transform uppercase - font-weight 300 + font-weight 400 transform scale(0.8) filter blur(20px) background linear-gradient(to top, var(--ghostZ) 25%, var(--ghostZ0) 100%) @@ -637,7 +637,7 @@ flex-wrap wrap z-index 999999999 width 100% - font-weight 400 + font-weight 500 .txActionButtonsRow width 100% @@ -758,7 +758,7 @@ display flex justify-content center align-items center - font-weight 400 + font-weight 500 font-size 14px background var(--ghostD) color var(--outerspace) @@ -785,7 +785,7 @@ padding-top 1px font-size 10px text-align center - font-weight 300 + font-weight 400 background var(--good) color var(--spacewhite) @@ -835,7 +835,7 @@ .signValue font-size 20px - font-weight 300 + font-weight 400 overflow-y scroll overflow-x hidden @@ -854,7 +854,7 @@ padding none font-size 12px text-transform uppercase - font-weight 300 + font-weight 400 display flex justify-content center align-items center @@ -874,7 +874,7 @@ white-space break-spaces user-select all font-family 'FiraCode' - font-weight 400 + font-weight 500 .transactionValue position absolute @@ -888,12 +888,12 @@ flex-direction column font-size 20px padding 15px 10px 15px 10px - font-weight 300 + font-weight 400 .transactionSubtitle text-transform uppercase font-size 13px - font-weight 400 + font-weight 500 letter-spacing 1px .transactionSymbol @@ -901,7 +901,7 @@ justify-content center align-items center font-size 16px - font-weight 300 + font-weight 400 font-family 'FiraCode' margin 2px 8px 0px 0px padding 0px 16px @@ -968,7 +968,7 @@ align-items center flex-direction column padding 15px 10px 10px 10px - font-weight 300 + font-weight 400 .transactionTotals font-size 20px @@ -976,7 +976,7 @@ .transactionTotalUSD font-size 15px padding 2px 8px - font-weight 300 + font-weight 400 .transactionData position absolute @@ -990,7 +990,7 @@ align-items center color var(--outerspace08) font-size 14px - font-weight 400 + font-weight 500 letter-spacing 1px text-transform uppercase transition var(--standard) @@ -1007,7 +1007,7 @@ align-items center text-transform uppercase letter-spacing 1px - font-weight 400 + font-weight 500 z-index 10 background var(--ghostD) box-shadow 0px 2px 0px var(--thick), 0px 8px 8px -2px var(--thick), 0px 0px 10px -2px var(--thick) @@ -1164,7 +1164,7 @@ font-size 13px opacity 0 transition var(--standard) - font-weight 300 + font-weight 400 cursor pointer z-index 200 @@ -1177,7 +1177,7 @@ margin-left 10px .transactionToSub - font-weight 400 + font-weight 500 text-transform uppercase font-size 13px letter-spacing 1px @@ -1357,7 +1357,7 @@ .txProgressConfirmsItem font-size 12px - font-weight 300 + font-weight 400 color var(--ghostY) svg max-width 14px @@ -1437,7 +1437,7 @@ display flex justify-content flex-start align-items center - font-weight 300 + font-weight 400 height 26px min-height 26px max-height 26px @@ -1483,7 +1483,7 @@ text-transform uppercase font-size 13px letter-spacing 1px - font-weight 300 + font-weight 400 span padding 0px 3px 0px 0px @@ -1497,7 +1497,7 @@ span width 48px text-align center opacity 1 - font-weight 400 + font-weight 500 font-size 13px display flex justify-content center @@ -1565,7 +1565,7 @@ span overflow-x hidden display flex justify-content space-between - font-weight 400 + font-weight 500 color var(--outerspace08) box-sizing border-box @@ -1608,7 +1608,7 @@ span align-items center text-transform uppercase letter-spacing 0.2px - font-weight 300 + font-weight 400 border-radius 16px background var(--ghostD) z-index 20000000009999 @@ -1732,7 +1732,7 @@ span display flex justify-content center align-items center - font-weight 300 + font-weight 400 transition var(--standardSlow) opacity 0 transform translateY(25px) @@ -1755,7 +1755,7 @@ span box-sizing border-box z-index 100000 font-size 14px - font-weight 400 + font-weight 500 text-transform uppercase letter-spacing 0.5px margin-left 0.5px @@ -1810,7 +1810,7 @@ span display flex justify-content center align-items center - font-weight 300 + font-weight 400 text-transform uppercase padding 4px @@ -1854,7 +1854,7 @@ span padding 0px 60px text-align center line-height 20px - font-weight 400 + font-weight 500 .txBar position absolute @@ -2078,7 +2078,7 @@ span border-radius 12px overflow hidden font-size 12px - font-weight 300 + font-weight 400 text-transform uppercase .confirmBarStartText @@ -2173,7 +2173,7 @@ span height 3px transition var(--standard) font-size 12px - font-weight 400 + font-weight 500 text-transform uppercase letter-spacing 3px height 100px @@ -2181,7 +2181,7 @@ span .simpleJsonHeader font-size 13px padding 8px 2px - font-weight 400 + font-weight 500 margin-top 40px border-bottom 2px solid var(--ghostZ) text-transform uppercase @@ -2198,7 +2198,7 @@ span .simpleJsonKey font-size 13px width 100% - font-weight 500 + font-weight 600 padding 0px 0px 0px 2px border-radius 12.5px box-sizing border-box @@ -2217,7 +2217,7 @@ span box-sizing border-box word-wrap break-word font-family 'FiraCode' - font-weight 300 + font-weight 400 user-select all !important max-width fit-content position relative diff --git a/app/tray/Account/Requests/style/next.styl b/app/tray/Account/Requests/style/next.styl index 7983af90a..1b0c8b209 100644 --- a/app/tray/Account/Requests/style/next.styl +++ b/app/tray/Account/Requests/style/next.styl @@ -7,7 +7,7 @@ z-index 2000 color var(--outerspace08) font-size 14px - font-weight 400 + font-weight 500 transition var(--standardVibe) border-radius 0px font-family 'MainFont' @@ -20,7 +20,7 @@ position absolute overflow hidden font-size 13px - font-weight 400 + font-weight 500 transform translateZ(0px) .txSectionHeader @@ -35,7 +35,7 @@ align-items center text-transform uppercase letter-spacing 1px - font-weight 400 + font-weight 500 z-index 10 .txSectionLabel @@ -94,7 +94,7 @@ .gwei text-transform uppercase font-size 9px - font-weight 300 + font-weight 400 padding-left 2px letter-spacing 0px position relative @@ -118,7 +118,7 @@ .timeUnit text-transform uppercase font-size 8px - font-weight 300 + font-weight 400 padding-left 0px letter-spacing 0px padding-left 0px @@ -140,7 +140,7 @@ text-align center text-transform uppercase font-size 10px - font-weight 300 + font-weight 400 .networkFeeSelectedHalo height 38px @@ -324,7 +324,7 @@ // height 18px // background var(--ghostD) // box-shadow cardDrop - // font-weight 400 + // font-weight 500 // box-sizing border-box .transactionWarning @@ -342,7 +342,7 @@ .transactionTotalUSD font-size 15px padding 2px 8px - font-weight 300 + font-weight 400 .txSectionBody position absolute @@ -402,7 +402,7 @@ // background var(--ghostD) // color var(--outerspace08) // font-size 14px -// font-weight 400 +// font-weight 500 // letter-spacing 1px // text-transform uppercase // transition var(--standardVibe) @@ -429,7 +429,7 @@ // align-items center // text-transform uppercase // letter-spacing 1px -// font-weight 400 +// font-weight 500 // z-index 10 // background var(--ghostD) // border-radius 9px @@ -514,7 +514,7 @@ // border-bottom-right-radius 16px text-align center color var(--outerspace08) - font-weight 300 + font-weight 400 text-transform uppercase box-sizing border-box z-index 40000 @@ -536,7 +536,7 @@ flex-direction column letter-spacing 6px margin-left 6px - font-weight 300 + font-weight 400 font-size 9px color var(--outerspace03) transition var(--standardFast) @@ -556,7 +556,7 @@ padding 4px box-sizing border-box opacity 0 - font-weight 400 + font-weight 500 font-size 11px letter-spacing 0.5px transition var(--standardFast) @@ -575,7 +575,7 @@ .txFeeTitle position absolute font-size 19px - font-weight 300 + font-weight 400 left 10px width 60px bottom 292px @@ -641,7 +641,7 @@ .txFeeSummaryValue font-size 20px - font-weight 400 + font-weight 500 line-height 20px min-width 50px text-align center @@ -661,12 +661,12 @@ .txFeeSummaryUSDSymbol font-size 13px margin-top 1px - font-weight 300 + font-weight 400 .txFeeSummarySymbol font-size 16px margin-right 0px - font-weight 400 + font-weight 500 margin-top 0px .txFeeSummaryEquivalentSymbol @@ -679,20 +679,20 @@ .txFeeSummaryTimeValue font-size 20px margin 0px 1px 0px 0px - font-weight 400 + font-weight 500 min-width 12px text-align right letter-spacing -2px .txFeeSummaryTimeUnit font-size 13px - font-weight 300 + font-weight 400 margin-top 0px margin-left 1px .txFeeSummaryLabel font-size 11px - font-weight 400 + font-weight 500 letter-spacing 1px margin-left 1px @@ -734,7 +734,7 @@ .txFeeGweiValue font-size 22px - font-weight 400 + font-weight 500 background var(--ghostD) border-radius 6px height 32px @@ -756,13 +756,13 @@ width 100% text-align center font-size 22px - font-weight 300 + font-weight 400 color var(--outerspace08) font-family 'MainFont' .txFeeGweiLabel font-size 11px - font-weight 400 + font-weight 500 letter-spacing 1px margin-left 1px margin-top 8px @@ -785,7 +785,7 @@ background var(--ghostC) box-shadow cardDrop letter-spacing 2px - font-weight 400 + font-weight 500 font-size 14px text-transform uppercase diff --git a/app/tray/Account/Settings/style/index.styl b/app/tray/Account/Settings/style/index.styl index 21b0333de..42dd83bc1 100644 --- a/app/tray/Account/Settings/style/index.styl +++ b/app/tray/Account/Settings/style/index.styl @@ -27,7 +27,7 @@ input border-radius 16px text-align center font-size 16px - font-weight 300 + font-weight 400 padding 14px font-family 'MainFont' transition var(--standardFast) @@ -43,7 +43,7 @@ input:focus box-shadow 0px 6px 42px 0px var(--ghostZ) .panelBlockTitle - font-weight 300 + font-weight 400 font-size 11px text-transform uppercase font-family 'MainFont' @@ -55,7 +55,7 @@ input:focus .panelBlockValues font-size 17px - font-weight 400 + font-weight 500 border-radius 20px -webkit-app-region no-drag transition none @@ -67,7 +67,7 @@ input:focus .panelBlockValue font-size 11px - font-weight 400 + font-weight 500 display flex justify-content center align-items center @@ -87,7 +87,7 @@ input:focus .panelBlockButton font-size 14px - font-weight 400 + font-weight 500 display flex justify-content center align-items center @@ -120,7 +120,7 @@ input:focus z-index 100001 overflow hidden font-size 11px - font-weight 300 + font-weight 400 text-transform uppercase letter-spacing 1px text-align center @@ -147,7 +147,7 @@ input:focus display flex justify-content center align-items center - font-weight 400 + font-weight 500 font-size 13px box-sizing border-box text-transform uppercase @@ -163,7 +163,7 @@ input:focus color var(--badOver) font-size 14px padding 20px - font-weight 300 + font-weight 400 display flex justify-content center text-align center diff --git a/app/tray/Account/Signer/SignerPreview/index.js b/app/tray/Account/Signer/SignerPreview/index.js index b8dd966ac..840073c22 100644 --- a/app/tray/Account/Signer/SignerPreview/index.js +++ b/app/tray/Account/Signer/SignerPreview/index.js @@ -147,44 +147,40 @@ class Signer extends React.Component {
- - { - const getUnavailableSigner = () => { - const signers = Object.values(this.store('main.signers')) - const unavailableSigners = findUnavailableSigners(activeAccount.lastSignerType, signers) - return unavailableSigners.length === 1 && unavailableSigners[0] - } - const signer = activeSigner || getUnavailableSigner() - if (!signer) { - this.setState({ - notifySuccess: false, - notifyText: 'Signer Unavailable' - }) - setTimeout(() => { - this.setState({ notifySuccess: false, notifyText: '' }) - }, 5000) - } - const crumb = signer ? signerPanelCrumb(signer) : accountPanelCrumb() - link.send('tray:action', 'navDash', crumb) + { + const getUnavailableSigner = () => { + const signers = Object.values(this.store('main.signers')) + const unavailableSigners = findUnavailableSigners(activeAccount.lastSignerType, signers) + return unavailableSigners.length === 1 && unavailableSigners[0] + } + const signer = activeSigner || getUnavailableSigner() + if (!signer) { + this.setState({ + notifySuccess: false, + notifyText: 'Signer Unavailable' + }) + setTimeout(() => { + this.setState({ notifySuccess: false, notifyText: '' }) + }, 5000) + } + const crumb = signer ? signerPanelCrumb(signer) : accountPanelCrumb() + link.send('tray:action', 'navDash', crumb) + }} + > +
-
- {this.renderSignerType(activeAccount.lastSignerType)} -
- - {this.getCurrentStatus(activeSigner, hardwareSigner)} - + {this.renderSignerType(activeAccount.lastSignerType)} +
+
+ {!watchOnly && ( - - this.verifyAddress(hardwareSigner)}> - {svg.doubleCheck(20)} - - + this.verifyAddress(hardwareSigner)}> + {svg.doubleCheck(20)} + )}
{this.state.notifyText && ( @@ -201,6 +197,9 @@ class Signer extends React.Component { )} + + {this.getCurrentStatus(activeSigner, hardwareSigner)} +
) diff --git a/app/tray/Account/Signer/style/index.styl b/app/tray/Account/Signer/style/index.styl index 92135f7fb..81d74598f 100644 --- a/app/tray/Account/Signer/style/index.styl +++ b/app/tray/Account/Signer/style/index.styl @@ -45,10 +45,10 @@ justify-content center padding 12px font-size 12px - font-weight 300 + font-weight 400 transform translateZ(0) z-index 2000 - font-weight 400 + font-weight 500 display flex align-items center padding 16px @@ -64,7 +64,7 @@ display flex justify-content center align-items center - font-weight 300 + font-weight 400 font-size 16px text-transform none diff --git a/app/tray/Account/index.js b/app/tray/Account/index.js index 7a2345f52..8ba7649ce 100644 --- a/app/tray/Account/index.js +++ b/app/tray/Account/index.js @@ -13,14 +13,9 @@ class Main extends React.Component { render() { const accounts = this.store('main.accounts') - const current = this.store('selected.current') - const open = this.store('selected.open') - if (!open) return - - const currentAccount = accounts[current] - if (!currentAccount) return null - - return + const currentAccount = Object.values(accounts).find((acct) => acct.active) || {} + if (!currentAccount.id) return null + return } } diff --git a/app/tray/Account/style/account.styl b/app/tray/Account/style/account.styl index 9a1433fea..cd9788479 100644 --- a/app/tray/Account/style/account.styl +++ b/app/tray/Account/style/account.styl @@ -77,6 +77,7 @@ pointer-events auto box-sizing border-box z-index 10000000 + width 100% .signerContainer position relative @@ -85,15 +86,16 @@ .accountMain position absolute - top 140px - right 7px - bottom 40px - left 7px + top 110px + right 0px + bottom 0px + left 0px + // padding 0px 7px z-index 3 display flex justify-content center align-items center - border-radius 26px + // border-radius 26px transition var(--standard) overflow hidden @@ -112,6 +114,38 @@ .accountModule position relative !important + .accountMainFade + position absolute + top 0 + right 0 + bottom 0 + left 0 + z-index 3000 + pointer-events none + * { + pointer-events none + } + + .accountMainFade::before + content: '' + position absolute + top 0 + right 0 + left 0 + height 96px + // background linear-gradient(180deg, var(--ghostZ), var(--ghostZ0)) + display none + + .accountMainFade::after + content: '' + position absolute + right 0 + bottom 0 + left 0 + height 32px + opacity 0.8 + background linear-gradient(0deg, var(--ghostZ), var(--ghostZ0)) + .accountMainScroll position absolute top 0 @@ -121,7 +155,8 @@ overflow-y scroll overflow-x hidden transform translate3d(0, 0, 0) - border-radius 30px + padding-bottom 64px + // border-radius 30px .accountMainSlide position relative @@ -178,7 +213,7 @@ opacity 1 pointer-events none text-transform uppercase - font-weight 400 + font-weight 500 letter-spacing 1px font-family 'MainFont' color var(--outerspace08) @@ -197,7 +232,7 @@ justify-content center align-items center font-size 13.5px - font-weight 300 + font-weight 400 pointer-events none z-index 8 cursor pointer @@ -553,14 +588,15 @@ width 100% .accountModule - position absolute - top 0 - left 2px - right 2px + // position absolute + // top 0 + // left 2px + // right 2px + position relative transform translate3d(0, 0, 0) - transition var(--standardFast) + transition var(--standard) pointer-events auto - padding-bottom 7px + padding 8px .moduleExpanded min-height 100% @@ -580,7 +616,7 @@ text-transform uppercase letter-spacing 2px font-family 'MainFont' - font-weight 500 + font-weight 600 box-sizing border-box border-radius 26px cursor pointer @@ -668,21 +704,20 @@ pointer-events none .accountModuleInner - position absolute - top 0 - left 0px - right 0px - bottom 7px + // position absolute + // top 0 + // left 0px + // right 0px + // bottom 7px transform translate3d(0, 0, 0) - padding 0px 6px - border-radius 26px + padding 0px 8px .accountModuleCard position relative - border-radius 26px + border-radius 16px background var(--ghostAZ) - box-shadow 0px 4px 8px var(--ghostY), 0px 2px 8px var(--ghostY) - border-bottom 2px solid var(--ghostY) + box-shadow 2px 2px 12px 0px var(--ghostY), -4px -4px 12px -4px var(--ghostB) + // border-bottom 2px solid var(--ghostY) .moduleHeader:before content '' @@ -701,16 +736,14 @@ font-size 11px text-transform uppercase letter-spacing 2px - padding 16px 90px 10px 20px + padding 16px height 42px font-family 'MainFont' - font-weight 500 + font-weight 600 box-sizing border-box display flex align-items center - - span - margin-right 8px + // justify-content space-between .moduleHeaderClose background var(--moon) @@ -766,7 +799,7 @@ display flex justify-content center color var(--ghostZ) - font-weight 300 + font-weight 400 font-size 24px //.moduleButtonBad:hover @@ -782,7 +815,7 @@ .moduleMainSettings font-size 11px text-transform uppercase - font-weight 400 + font-weight 500 // .moduleMid // padding-bottom 42px @@ -797,7 +830,7 @@ text-transform uppercase border-top 1px solid var(--ghostA) box-sizing border-box - font-weight 300 + font-weight 400 letter-spacing 1px padding 12px height 42px @@ -849,7 +882,7 @@ display flex justify-content center align-items center - font-weight 400 + font-weight 500 font-size 13px box-sizing border-box text-transform uppercase diff --git a/app/tray/Account/style/index.styl b/app/tray/Account/style/index.styl index 4c5b1aabb..0fdb5064f 100644 --- a/app/tray/Account/style/index.styl +++ b/app/tray/Account/style/index.styl @@ -37,12 +37,12 @@ justify-content center align-items center font-size 11px - font-weight 300 + font-weight 400 overflow hidden background-position 0 100% text-transform uppercase letter-spacing 1px - font-weight 300 + font-weight 400 cursor pointer .panelHeaderAddChainInner @@ -58,8 +58,6 @@ right 12px top 16px bottom 0 - // background red - // padding 18px cursor pointer height 32px width 66px @@ -70,7 +68,7 @@ align-items center font-family 'FiraCode' font-size 26px - font-weight 300 + font-weight 400 overflow hidden background-position 0 100% @@ -159,5 +157,206 @@ transform translateY(0px) box-shadow 0px 2px 4px var(--ghostX) +.accountSelector + position absolute + top 80px + right 8px + bottom 40px + left 8px + border-radius 26px + z-index 999 + display flex + align-items center + overflow hidden + display flex + justify-content center + align-items center + transform translateY(0px) + transition var(--standardFast) + + .accountSelectorScroll + width 100% + max-height 100% + border-radius 30px + transition var(--standard) + overflow-y scroll + overflow-x hidden + + .accountSelectorScrollWrap + width 100% + padding 48px 6px 48px 6px + box-sizing border-box + will-change scroll-position + z-index 999 + pointer-events none + + .noSigners + width 100% + display flex + justify-content center + align-items center + flex-direction column + font-weight 400 + font-size 19px + position relative + z-index 100 + padding 24px + + .introLogo + padding-bottom 38px + + svg + fill var(--outerspace) + + .getStarted + margin-top 30px + box-sizing border-box + border-radius 12px + padding 20px + font-size 14px + margin 20px + text-align center + font-weight 400 + background var(--outerspace) + color var(--spacewhite) + line-height 24px + + .getStartedPlus + display inline-block + position relative + top 4px + border 2px solid var(--spacewhite) + width 43px + height 22px + border-radius 11px + text-align center + margin 0px 5px 0px 5px + box-sizing border-box + + span + position relative + top -3px + left 2px + font-size 17px + + .featureBox + display flex + justify-content center + align-items center + flex-direction column + margin-top 30px + + .featureBoxText + font-size 13px + font-weight 500 + letter-spacing 4px + + .featureBoxSubtext + margin-top 8px + font-size 10px + font-family 'FiraCode' + justify-content center + opacity 0.7 + +@keyframes appear + 0% + filter blur(10px) + opacity 0 + + 100% + filter blur(0px) + opacity 1 + +.panelFilterMain + position fixed + top 0px + left 0px + right 0px + height 48px + z-index 99 + overflow hidden + animation appear 1s cubic-bezier(.82,0,.12,1) + +.panelFilterAccount + // position sticky + // top 0px + // left 0px + // right 0px + pointer-events auto + position relative + height 48px + width calc(100% - 16px) + z-index 99999999 + overflow hidden + animation appear 1s cubic-bezier(.82,0,.12,1) + margin: 0px 8px + +.panelFilterIcon + position absolute + top 4px + left 0 + bottom 0 + width 48px + display flex + justify-content center + align-items center + +.panelFilterInput + position absolute + top 0 + left 30px + bottom 0 + right 30px + + input, input:hover, input:focus + width 100% + height 100% + border none + outline none + text-align center + background transparent + color var(--outerspace) + font-size 20px + font-family 'MainFont' + font-weight 400 + box-shadow none + +.panelFilterClear + position absolute + top 8px + right 3px + bottom 8px + width 40px + display flex + justify-content center + align-items center + color var(--outerspace) + cursor pointer + border-radius 20px + + * + pointer-events none + +.panelFilterClear:hover + background var(--ghostA) + +.accountSelectorOpen + transform translateY(-14px) + transition var(--standard) + z-index 999999999 + pointer-events none + * + pointer-events none + +.newAccountButton + display flex + padding 16px + color var(--good) + font-weight 500 + + .newAccountIcon + padding-right 10px + + @import './account.styl' diff --git a/app/tray/Account/style/view.styl b/app/tray/Account/style/view.styl index 17576a83b..99dc65de9 100644 --- a/app/tray/Account/style/view.styl +++ b/app/tray/Account/style/view.styl @@ -40,7 +40,7 @@ align-items center text-transform uppercase letter-spacing 2px - font-weight 400 + font-weight 500 pointer-events none font-family 'MainFont' @@ -86,13 +86,3 @@ animation-delay 0.08s z-index 3 padding-top 30px - -.accountView::before - content '' - position absolute - top 0px - left 0px - right 0px - height 40px - background linear-gradient(var(--ghostZ) 30%, var(--ghostZ0)) - z-index 90 diff --git a/app/tray/AccountSelector/AccountController/index.js b/app/tray/AccountSelector/AccountController/index.js deleted file mode 100644 index 43d6578ae..000000000 --- a/app/tray/AccountSelector/AccountController/index.js +++ /dev/null @@ -1,530 +0,0 @@ -import React from 'react' -import Restore from 'react-restore' - -import svg from '../../../../resources/svg' -import link from '../../../../resources/link' -import { getAddress } from '../../../../resources/utils' - -class Account extends React.Component { - constructor(...args) { - super(...args) - this.locked = false - this.state = { - typeHover: false, - accountHighlight: 'default', - highlightIndex: 0, - unlockInput: '', - openHover: false, - addressHover: false - } - } - - componentDidMount() { - if (this.props.index === 0) this.props.resetScroll() - window.addEventListener('scroll', this.onScroll.bind(this), true) - } - - componentWillUnmount() { - window.removeEventListener('scroll', this.onScroll.bind(this), true) - } - - onScroll() { - this.setState({ addressHover: false, copied: false }) - } - - copyAddress() { - link.send('tray:clipboardData', getAddress(this.props.id)) - this.setState({ copied: true }) - setTimeout(() => this.setState({ copied: false }), 1800) - } - - unlockChange(e) { - this.setState({ unlockInput: e.target.value }) - } - - unlockSubmit() { - link.rpc('unlockSigner', this.props.id, this.state.unlockInput, () => {}) - } - - trezorPin(num) { - this.setState({ tPin: this.state.tPin + num.toString() }) - } - - submitPin() { - link.rpc('trezorPin', this.props.id, this.state.tPin, () => {}) - this.setState({ tPin: '' }) - } - - backspacePin(e) { - e.stopPropagation() - this.setState({ tPin: this.state.tPin ? this.state.tPin.slice(0, -1) : '' }) - } - - select() { - if (this.store('selected.current') === this.props.id) { - link.rpc('unsetSigner', this.props.id, (err) => { - if (err) return console.log(err) - }) - if (this.props.signer && this.store('main.accountCloseLock')) - link.rpc('lockSigner', this.props.signer, (err) => { - if (err) return console.log(err) - }) - } else { - const bounds = this.signer.getBoundingClientRect() - this.props.reportScroll() - this.store.initialSignerPos({ - top: bounds.top - 80, - bottom: document.body.clientHeight - bounds.top - this.signer.clientHeight + 3, - height: this.signer.clientHeight + 6, - index: this.props.index - }) - link.rpc('setSigner', this.props.id, (err) => { - if (err) return console.log(err) - }) - } - } - - renderTrezorPin(active) { - return ( -
-
- {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => ( -
- {svg.octicon('primitive-dot', { height: 20 })} -
- ))} -
-
- ) - } - - setSignerStatusOpen(value) { - link.send('tray:action', 'setAccountSignerStatusOpen', value) - } - - typeClick() { - if (this.props.status === 'ok') { - this.select() - this.setState({ typeActive: true }) - setTimeout(() => this.setState({ typeActive: false }), 110) - setTimeout(() => this.setSignerStatusOpen(true), 800) - } else { - this.setSignerStatusOpen(false) - this.setState({ typeShake: true }) - setTimeout(() => this.setState({ typeShake: false }), 1010) - } - } - - renderSignerIndicator() { - let accountIndicatorClass = 'accountIndicator' - if (this.props.signer) { - const signer = this.store('main.signers', this.props.signer) || {} - if (signer.status === 'locked') { - accountIndicatorClass += ' accountIndicatorLocked' - } else if (signer.status === 'ok') { - accountIndicatorClass += ' accountIndicatorGood' - } - } - return
- } - - isHotSigner(lastSignerType) { - return ['seed', 'ring'].includes(lastSignerType) - } - - renderType() { - const current = this.store('selected.current') === this.props.id && this.props.status === 'ok' - const open = current && this.store('selected.open') - const signerStatusOpen = current && this.store('selected.signerStatusOpen') - const isHotSigner = this.isHotSigner(this.props.lastSignerType) - - return ( -
{ - if (open) this.setSignerStatusOpen(!signerStatusOpen) - }} - > - {((_) => { - const type = this.props.lastSignerType - if (type === 'ledger') - return
{svg.ledger(24)}
- if (type === 'trezor') - return
{svg.trezor(24)}
- if (type === 'seed' || type === 'ring') - return
{svg.flame(25)}
- if (type === 'lattice') - return
{svg.lattice(26)}
- return
{svg.logo(22)}
- })()} -
- ) - } - - renderMenu() { - let menuClass = 'signerMenu' - menuClass += this.store('selected.view') === 'settings' ? ' signerMenuSettings' : ' signerMenuDefault' - if ((this.store('selected.current') === this.props.id) & this.store('selected.open')) - menuClass += ' signerMenuOpen' - return ( -
-
this.store.setSignerView('default')} - > -
- {svg.octicon('pulse', { height: 23 })} -
-
-
-
this.store.setSignerView('settings')} - > -
- {svg.octicon('settings', { height: 23 })} -
-
-
-
- ) - } - - setHighlight(mode, index) { - if (!this.locked) this.setState({ accountHighlight: mode, highlightIndex: index || 0 }) - } - - closeAccounts() { - if (this.store('selected.showAccounts')) this.store.toggleShowAccounts(false) - } - - setSignerIndex(index) { - this.locked = true - link.rpc('setSignerIndex', index, (err) => { - this.setState({ accountHighlight: 'inactive', highlightIndex: 0 }) - this.store.toggleShowAccounts(false) - setTimeout(() => { - this.locked = false - }, 1000) - if (err) return console.log(err) - }) - } - - getAddressSize() { - const ensName = this.store('main.accounts', this.props.id, 'ensName') - if (ensName) { - if (ensName.length <= 13) return 17 - if (ensName.length <= 16) return 16 - if (ensName.length <= 19) return 15 - return 14 - } - return 17 - } - - renderDetails() { - const { address, ensName = '' } = this.store('main.accounts', this.props.id) - const showLocal = this.store('main.showLocalNameWithENS') - const formattedAddress = getAddress(address) - - let requests = this.store('main.accounts', this.props.id, 'requests') || {} - requests = Object.keys(requests).filter((r) => requests[r].mode === 'normal') - - if (this.state.addressHover) { - return ( -
{ - e.stopPropagation() - e.preventDefault() - if (this.state.addressHover) this.copyAddress() - }} - > - {this.state.copied ? ( -
- {svg.copy(16)} - {'Address Copied'} -
- ) : ( -
{formattedAddress}
- )} -
- ) - } else { - if (ensName && !showLocal) { - return ( -
-
{ - e.stopPropagation() - e.preventDefault() - this.setState({ addressHover: true }) - }} - onMouseLeave={(e) => { - e.stopPropagation() - e.preventDefault() - this.setState({ addressHover: false, copied: false }) - }} - style={{ fontSize: this.getAddressSize() + 'px' }} - > - {ensName.length > 25 ? ensName.slice(0, 23) + '..' : ensName} -
-
- ) - } else { - return ( -
-
{this.props.name}
-
{ - e.stopPropagation() - e.preventDefault() - this.setState({ addressHover: true }) - }} - onMouseOver={(e) => { - e.stopPropagation() - e.preventDefault() - this.addressTimeout = setTimeout(() => { - this.setState({ addressHover: true }) - }, 500) - }} - onMouseLeave={(e) => { - e.stopPropagation() - e.preventDefault() - clearTimeout(this.addressTimeout) - this.setState({ addressHover: false, copied: false }) - }} - > - {ensName ? ( -
{ensName}
- ) : ( - <> -
{formattedAddress.substring(0, 5)}
-
{svg.ellipsis(16)}
-
- {formattedAddress.substr(formattedAddress.length - 3)} -
- - )} -
-
- ) - } - } - } - - renderStatus() { - const { address, ensName } = this.store('main.accounts', this.props.id) - const formattedAddress = getAddress(address) - - let requests = this.store('main.accounts', this.props.id, 'requests') || {} - requests = Object.keys(requests).filter((r) => requests[r].mode === 'normal') - - return this.props.status !== 'ok' ? ( -
{status}
- ) : ( - <> - {!this.state.addressHover ? ( -
-
- {this.props.name} -
-
- ) : null} -
-
{ - if (this.state.addressHover) { - this.copyAddress() - } - }} - > -
- {!this.state.addressHover ? ( - ensName ? ( -
{ - if (!this.state.addressHover) { - this.setState({ addressHover: true }) - } - }} - > - {ensName} -
- ) : ( -
{ - if (!this.state.addressHover) { - this.setState({ addressHover: true }) - } - }} - > -
{formattedAddress.substring(0, 5)}
-
{svg.ellipsis(16)}
-
{formattedAddress.substr(formattedAddress.length - 3)}
-
- ) - ) : null} -
-
- {this.state.copied ? ( - {'Address Copied'} - ) : ( - formattedAddress - )} -
-
-
- - ) - } - - render() { - const { id, status, active, index } = this.props - - const selectedAccountId = this.store('selected.current') - const open = this.store('selected.open') - const minimized = this.store('selected.minimized') - const selectedView = this.store('selected.view') - const showAccounts = this.store('selected.showAccounts') - const initialPosition = this.store('selected.position.initial') - const initialIndex = this.store('selected.position.initial.index') - const isAddAccountView = this.store('view.addAccount') - - const current = selectedAccountId === id && status === 'ok' - const selectedAccountOpen = current && open - - this.selected = current && !minimized - let signerClass = 'signer' - if (status === 'ok') signerClass += ' okSigner' - if (selectedAccountOpen) signerClass += ' openSigner' - if (selectedView === 'settings') signerClass += ' signerInSettings' - if (showAccounts) signerClass += ' signerAccountExpand' - - let signerTopClass = active ? 'signerTop signerTopActive' : 'signerTop' - - const style = {} - - if (current) { - // Currently selected - style.position = 'absolute' - style.top = initialPosition.top // open ? 40 : initial.top - style.bottom = initialPosition.bottom // open ? 3 : initial.bottom - style.left = '6px' - style.right = '6px' - style.zIndex = '100000000' - style.height = initialPosition.height - 6 - style.transform = selectedAccountOpen ? `translateY(${initialPosition.top * -1}px)` : 'translateY(0px)' - } else if (selectedAccountId !== '') { - // Not currently selected, but another signer is - style.pointerEvents = 'none' - style.transition = '300ms cubic-bezier(.82,0,.12,1) all' - if (open) { - signerTopClass += ' signerTopNoHover' - // Not open, but another signer is - style.transform = index > initialIndex ? 'translate(0px, 100px)' : 'translate(0px, -20px)' - style.opacity = 0 - style.pointerEvents = 'none' - } else { - // style.transition = '400ms linear all' - style.transform = 'translate(0px, 0px)' - // style.transitionDelay = '400ms' - style.opacity = 1 - } - } else { - if (isAddAccountView) { - style.opacity = 0 - style.pointerEvents = 'none' - } else { - style.transition = '1.48s cubic-bezier(.82,0,.12,1) all' - style.transitionDelay = '0s' - } - } - - let requests = this.store('main.accounts', id, 'requests') || {} - requests = Object.keys(requests).filter((r) => requests[r].mode === 'normal') - - return ( -
this.closeAccounts()} - onMouseLeave={() => { - this.setState({ addressHover: false, copied: false }) - }} - > -
{ - if (ref) this.signer = ref - }} - > -
this.setState({ openHover: true })} - // onMouseLeave={() => this.setState({ openHover: false })} - onClick={() => { - if (!selectedAccountOpen) this.typeClick() - }} - > - {!this.state.addressHover ? ( - <> - {this.renderSignerIndicator()} - {this.renderType()} - {/*
- {svg.grab(35)} -
*/} - {(() => { - if (this.state.addressHover) return null - let requestBadgeClass = 'accountNotificationBadge' - if (active) requestBadgeClass += ' accountNotificationBadgeReady' - if (requests.length > 0) requestBadgeClass += ' accountNotificationBadgeActive' - return ( -
- {requests.length} -
- ) - })()} -
-
-
-
- {svg.chevron(26)} -
-
-
-
- - ) : null} - {/* {this.renderStatus()} */} - {this.renderDetails()} -
-
-
- ) - } -} - -export default Restore.connect(Account) diff --git a/app/tray/AccountSelector/AccountController/ledgerLogo.png b/app/tray/AccountSelector/AccountController/ledgerLogo.png deleted file mode 100644 index dcfcb3326..000000000 Binary files a/app/tray/AccountSelector/AccountController/ledgerLogo.png and /dev/null differ diff --git a/app/tray/AccountSelector/AccountController/style/index.styl b/app/tray/AccountSelector/AccountController/style/index.styl deleted file mode 100644 index 12e823a37..000000000 --- a/app/tray/AccountSelector/AccountController/style/index.styl +++ /dev/null @@ -1,1022 +0,0 @@ -@keyframes slideUp - 0% - opacity 0 - 100% - opacity 1 - -@keyframes headShake - 0% - transform translateX(0) - 6.5% - transform translateX(-6px) rotateY(-9deg) - 18.5% - transform translateX(5px) rotateY(7deg) - 31.5% - transform translateX(-3px) rotateY(-5deg) - 43.5% - transform translateX(2px) rotateY(3deg) - 50% - transform translateX(0) - -.headShake - animation-duration 1s - animation-fill-mode both - animation-timing-function ease-in-out - animation-name headShake - transform translateZ(0) - -.standardFade-enter - opacity 0 - -.standardFade-enter.standardFade-enter-active - opacity 1 - transition var(--standard) - -.standardFade-leave - opacity 1 - -.standardFade-leave.standardFade-leave-active - opacity 0 - transition var(--standard) - -.signer - position relative - z-index 3001 - transition var(--standard), 0s linear height - will-change transform - transform translate3d(0, 0, 0) - pointer-events auto - box-sizing border-box - z-index 10000000 - - .signerContainer - position relative - z-index 3002 - padding 0px 0px 5px 0px - - .signerDetailsFullAddress - position absolute - display flex - justify-content center - align-items center - flex-direction column - top 0 - left 0px - right 0px - bottom 0px - cursor pointer - pointer-events auto - // animation slideUp linear 0.2s - * - pointer-events none - - .signerDetailsFullAddressCopied - display flex - align-items center - justify-content center - font-size 14px - font-weight 500 - span - margin-left 8px - - .signerDetailsFullAddressText - display flex - align-items center - max-width fit-content - font-family 'FiraCode' - margin-top 4px - pointer-events auto - border-radius 1px - font-size 13.5px - position relative - cursor pointer - - .signerDetails - position absolute - display flex - justify-content center - flex-direction column - top 0 - left 60px - right 120px - bottom 0px - pointer-events none - - .signerDetailsENSName - font-family 'FiraCode' - letter-spacing -1px - font-size 16px - font-weight 300 - margin-top 5px - pointer-events auto - max-width fit-content - - .signerDetailsName - font-family 'MainFont' - font-size 16px - font-weight 400 - margin-top 4px - pointer-events none - - .signerDetailsAddressCopy - margin-left 10px - display flex - align-items center - padding 0px 6px 0px 0px - border-radius 12px - display none - - .signerDetailsAddress - display flex - align-items center - max-width fit-content - font-family 'FiraCode' - margin-top 2px - pointer-events auto - padding 0px 0px 2px 1px - border-radius 12px - font-size 15px - position relative - cursor pointer - left -1px - transition all linear 500ms - * - pointer-events none - - .signerDetailsAddressDivide - position relative - padding 0px 1px 0px 2px - - .signerDetailsAddress:hover - color var(--moon) - - .signerAddress - font-family 'FiraCode' - - .transactionToAddressLargeWrap - position absolute - bottom 15px - left 66px - height 40px - width 164px - z-index 5 - - .transactionToAddressLarge - position absolute - bottom 0px - left 0px - max-width 100% - font-weight 300 - display flex - font-size 15px - opacity 1 - - .transactionToAddressLargeEllipsis - padding 2px 1px - - .transactionToAddressLarge:hover - background var(--ghostC) - - .transactionToAddressCopy - display flex - justify-content center - align-items center - font-size 8px - letter-spacing 1px - opacity 1 - pointer-events none - text-transform uppercase - font-weight 400 - letter-spacing 1px - font-family 'MainFont' - color var(--outerspace08) - border-radius 10px - transform translateY(0px) - bottom 30px - opacity 0 - - .transactionToAddressFull - position absolute - top 3px - right 0 - bottom 0 - left 0 - display flex - justify-content center - align-items center - font-size 13.5px - font-weight 300 - z-index 80 - cursor pointer - * - pointer-events none - - - .transactionToAddressFullCopied - position absolute - right 18px - top 25px - left 18px - font-family 'MainFont' - text-align center - - svg - position relative - top 0px - margin-left 11px - - .transactionToAddressENS - transform translateY(-11px) - font-weight 300 - - .transactionToAddressFullHidden - opacity 0 - pointer-events none - - .signerTop - position relative - opacity 1 - z-index 3030000 - border-radius 26px - transition var(--standard), background 0.2s linear - z-index 9999000 - height 74px - background var(--ghostA) - margin 0px 0px 6px 0px - box-shadow 0px 4px 8px var(--ghostY) - border-bottom 2px solid var(--ghostZ) - cursor pointer - overflow hidden - - div - z-index 3004 - - .accountNotificationBadge - position absolute - top 19px - right 64px - width 60px - z-index 300000 - height 39px - width 38px - padding-left 2px - box-sizing border-box - border-top-left-radius 13px - border-bottom-left-radius 13px - border-top-right-radius 8px - border-bottom-right-radius 8px - display flex - justify-content center - align-items center - -webkit-app-region no-drag - transform translate3d(0, 0, 0) - background var(--ghostA) - position absolute - color var(--outerspace01) - font-size 16px - font-weight 400 - transition var(--standardFast) - box-shadow 0px 2px 2px var(--ghostY) - border-bottom 2px solid var(--ghostZ) - z-index 999999999 - pointer-events none - - span - position relative - z-index 4000 - - .accountNotificationBadgeReady - color var(--outerspace) - background var(--ghostB) - - .accountNotificationBadgeActive - border-bottom none - span - color var(--goodOver) - - .accountNotificationBadgeActive::before - content '' - position absolute - z-index 3 - inset 0px - background var(--good) - border-top-left-radius 13px - border-bottom-left-radius 13px - border-top-right-radius 8px - border-bottom-right-radius 8px - border-bottom 2px solid var(--goodShade) - box-shadow 0px 2px 2px var(--ghostY) - - .transactionToAddress - .transactionToAddressLarge - svg - color var(--outerspace) - - .signerSelect - position absolute - top 16px - right 10px - z-index 300000 - border-radius 16px - height 44px - width 95px - -webkit-app-region no-drag - transition none - transform translate3d(0, 0, 0) - background var(--ghostZ) - cursor pointer - - .signerSelectButton - position absolute - top 3px - right 3px - bottom 2px - z-index 300000 - border-radius 13px - width 48px - background var(--ghostA) - display flex - justify-content center - align-items center - border-top-right-radius 13px - border-bottom-right-radius 13px - border-top-left-radius 8px - border-bottom-left-radius 8px - padding-right 4px - box-sizing border-box - border-bottom 2px solid var(--ghostZ) - box-shadow 0px 2px 2px var(--ghostY) - transform translateY(0px) - cursor pointer - transition background 0.1s linear - * - pointer-events none - - .signerSelectButton:hover - background var(--ghostC) - transform translateY(-1px) - box-shadow 0px 2px 4px var(--ghostX) - - .signerSelectButton:active - background var(--ghostC) - transform translateY(0px) - box-shadow 0px 2px 1px var(--ghostX) - - .signerSelectIconWrap - padding 1px 0px 0px 2px - pointer-events none - - div, svg - pointer-events none - - .accountActive - color var(--good) - - .signerSelectIcon - transition var(--standard) - pointer-events none - - .accountGrabber - position absolute - top 5px - bottom 5px - right 110px - width 19px - color var(--ghostX) - cursor grab - z-index 5000000000000000 - padding-top 9px - opacity 1 - transition var(--standardSlow) - - svg - position relative - left -8px - - svg, div - pointer-events none - - .accountGrabber:active - cursor grabbing - - .accountIndicator - position absolute - top 20px - left 7px - bottom 20px - box-sizing border-box - border-radius 2px - width 4px - background var(--ghostZ) - pointer-events none - - .accountIndicatorGood - background var(--good) - - .accountIndicatorLocked - background var(--moon) - - .signerType - position absolute - top 0px - left 0px - bottom 0px - width 64px - z-index 3400 - transition var(--standard) - -webkit-app-region no-drag - box-sizing border-box - z-index 300000 - pointer-events none - - .signerTypeStatusBadge - position absolute - top 13px - left 10px - width 18px - height 18px - color var(--moon) - border-radius 50% - display flex - justify-content center - align-items center - pointer-events none - - .signerTypeStatusBadgeDisconnected - color var(--outerspace) - display none - - .signerTypeStatusBadgeLocked - color var(--moon) - top 12px - left 11px - - .signerSelectIconWrap - position absolute - top 3px - left 14px - width 41px - bottom 0px - display flex - justify-content center - align-items center - - div, svg - pointer-events none - - // .signerIconHot - // color var(--hot) - - .signerIconTrezor - transform translateY(-3px) - - .signerIconLedger - transform translateY(-1px) - - .signerImage - position absolute - top 50% - left 50% - height 34px - width 34px - margin-top -9px - margin-left -9px - opacity 1 - transition var(--standardSlow) - - img - height 38px - - svg - color var(--ghostD) - filter drop-shadow(0px 10px 0px 0px var(--thick)) - - .trezorImage - height 35px - margin-top -6px - - .signerText - position absolute - top 44px - left 0 - right 0 - height 20px - display flex - flex-direction column - justify-content center - align-items center - text-transform uppercase - font-size 11px - line-height 10px - font-weight 300 - letter-spacing 2px - color var(--spacewhite) - opacity 1 - transition var(--standardSlow) - margin-left 2px - display none - - .signerTop:hover - background var(--ghostB) - .signerSelect - .signerSelectButton - background var(--ghostB) - - // .signerTopActive:hover - // background var(--ghostA) - - // .okSigner - // .signerTop:hover - // background var(--ghostA) - - - .signerTopNoHover - pointer-events none !important - * - pointer-events none !important - // border-bottom 2px solid var(--ghostZ0) - // position relative - // .signerSelect - // pointer-events auto !important - // .signerSelectButton - // pointer-events auto !important - - // .signerTopNoHover:hover - // background var(--ghostA) !important - // .signerSelect - // .signerSelectButton - // pointer-events auto !important - // background var(--ghostA) - // .signerSelectButton:hover - // background var(--ghostB) - - .accountListWrap - position absolute - top 100px - left 0 - right 0 - // height 0px - height 0px - background var(--ghostB) - // height 40px - z-index 3015 - transition var(--standardFast) - border-bottom-left-radius 16px - border-bottom-right-radius 16px - overflow hidden - box-shadow 0px 2px 3px var(--thin), 0px 19px 9px -14px var(--thin) !important - transform translateZ(0) - display none - - .accountList - position absolute - left 0 - right 0 - bottom 0 - height 330px - z-index 3018 - overflow hidden - padding 15px 0px 10px 0px - - .settingsMenu - background linear-gradient(var(--ghostB), var(--ghostD)) - display flex - justify-content center - flex-direction column - align-items center - position absolute - left 0 - right 0 - bottom 0 - height 50px - transition var(--standardSlow) - opacity 1 - pointer-events auto - .settingsMenuSelect - position relative - height 12px - width 105px - box-sizing border-box - .settingsMenuMark - height 12px - position absolute - transition var(--standard) - .settingsMenuMarkLine - position absolute - background outerspace - height 2px - top 0px - left 7px - right 7px - border-radius 1px - .settingsMenuItems - box-sizing border-box - height 33px - width 105px - display flex - .settingsMenuItem - position relative - box-sizing border-box - z-index 1230 - width 35px - height 33px - color var(--outerspace08) - .settingsMenuItemIcon - top 0 - right 0 - bottom 0px - left 0 - position absolute - z-index 1234 - padding 10px 10px - .settingsMenuItemSelected, .settingsMenuItem:hover - color var(--outerspace) - - .accountListItems - background var(--ghostB) - height 280px - min-height 280px - width 100% - display flex - justify-content flex-start - align-items center - flex-direction column - position relative - z-index 3 - transition var(--standardSlow) - // opacity 0 - transform translateY(-200px) - pointer-events none - - .accountListItem - background var(--ghostB) - width calc(100% - 40px) - height 55px - min-height 55px - border-bottom 1px solid var(--thin) - display flex - justify-content space-between - align-items center - padding 0px 20px 0px 20px - font-family 'FiraCode' - color var(--outerspace08) - position relative - z-index 4 - - .accountListItemCheck - color var(--outerspace01) - margin-bottom 3px - - .accountListItemAddress - svg - margin 0px 4px 0px 4px - - .accountListItem:last-child - border-bottom none - - .accountListItemSelected - background var(--ghostC) - color var(--outerspace) - border-radius 6px - border-bottom 1px solid var(--thick0) - box-shadow 0px 2px 3px var(--thin), 0px 19px 9px -14px var(--thin) !important - position relative - z-index 10 - .accountListItemCheck - color var(--outerspace) - - .accountPageToggle - padding-top 20px - height 20px - min-height 20px - padding-bottom 10px - width 100% - display flex - justify-content center - align-items center - font-family 'FiraCode' - position relative - z-index 2 - transition var(--standardSlow) - opacity 0 - pointer-events none - transform translateY(-200px) - - .accountPageCurrent - border-radius 3px - height 27px - width 27px - display flex - justify-content center - align-items center - font-size 18px - - .accountPageButton - border-radius 3px - height 27px - width 27px - display flex - justify-content center - align-items center - box-sizing border-box - - .accountPageButtonLeft - padding-right 1px - - .accountPageButtonRight - padding-left 1px - - .accountPageButton:hover - background var(--ghostD) - - .accountMenu - position absolute - top 64px - right 0px - left 0px - // padding-top 20px - border-radius 6px - z-index 3005 - overflow-x hidden - overflow-y hidden - // opacity 1 - transition var(--standard), 0.1s linear background - will-change transform - background var(--ghostC) - z-index 9999003 - height 40px - background var(--ghostC) - //animation-timing-function: cubic-bezier(0.1, -0.6, 0.2, 0) - // background red // var(--ghostB) - box-shadow 0px 4px 6px -1px var(--thick) - animation-delay 0.2s - .accountMenuLeft - position absolute - top 0px - left 0px - bottom 0px - display flex - .accountMenuItem - border-right 1px solid var(--thick) - .accountMenuItem:first-child - padding-left 4px - - .accountMenuRight - position absolute - top 0px - right 0px - bottom 0px - .accountMenuItem - border-left 1px solid var(--thick) - .accountMenuItem:last-child - padding-right 4px - - .accountMenuItem - height 40px - width 40px - display flex - justify-content center - align-items center - cursor pointer - - div, svg - pointer-events none - - .accountMenuItem:hover - background var(--ghostD) - - .signerMid - position absolute - top calc(22px + 83px) - right 0px - bottom 7px - left 0px - border-radius 6px - z-index 3005 - overflow-x hidden - overflow-y hidden - opacity 1 - transition var(--standard), 0.1s linear background - will-change transform - background var(--ghostC) - z-index 9999003 - box-shadow 0px 4px 6px -1px var(--thick) - animation-delay 0.4s - - > div - transition var(--standard) - opacity 0 - - .signerMidMenu - background var(--thin) - height 50px - display flex - flex-direction column - justify-content center - align-items center - - .signerMenuItems - height 25px - display flex - justify-content center - align-items center - margin-top 5px - - .signerMenuItem - height 30px - width 40px - display flex - justify-content center - align-items center - - .signerMenuSelect - height 10px - width 80px - position relative - - .signerMenuSelectMarker - position absolute - left 0px - height 2px - width 20px - // margin 0px 4px - margin 0px 10px - background black - - .signerNode - display flex - justify-content center - align-items center - font-size 12px - height 40px - border-top 1px solid var(--ghostB) - - .signerEvents - height 200px - overflow scroll - background rgba(0, 0, 50, 0.1) - width 100% - - .signerSelectDown - transform rotate(180deg) - .signerSelectArrows - .signerSelectArrow - svg - color var(--spacewhite) - - .signerSelectLeft - left 3px - - .signerSelectRight - right 3px - - .signerSelectDown.signerSelectLeft - left -50px - opacity 0 - - .signerSelectDown.signerSelectRight - right -50px - opacity 0 - - .signerReady - font-size 12px - width 100% - - .openSigner - pointer-events none - .signerTop - cursor auto - position relative - border-bottom 2px solid var(--ghostZ0) - top -5px - .signerSelect - pointer-events auto !important - .signerSelectButton - pointer-events auto !important - - .signerTop:hover - background var(--ghostA) !important - .signerSelect - .signerSelectButton - pointer-events auto !important - background var(--ghostA) - .signerSelectButton:hover - background var(--ghostB) - - .signerSelectDown.signerSelectRight - right 0 - - .signerSelectDown.signerSelectLeft - left 0 - - .accountListWrap - height 60px - -.signerInSettings - .signerTop - .addressSelect - transform translateY(0px) - pointer-events auto - .accountListWrap - height 130px - transform translateY(0px) - will-change height - -.signerAccountExpand - .addressSelectArrow:first-child - transition var(--standardSlow) - svg - transform rotate(-180deg) - .addressSelectArrow:last-child - transition var(--standardSlow) - svg - transform rotate(180deg) - .accountListWrap - transition var(--standardSlow) - height 425px - .accountList - .accountListItems - pointer-events auto - transform translateY(0px) - // opacity 1 - .accountPageToggle - opacity 1 - pointer-events auto - transform translateY(0px) - .settingsMenu - opacity 0 - pointer-events none - transform translateY(50px) - -.signerVerifyText - font-size 15px - text-align center - display flex - justify-content center - align-items center - height 70px - padding 0px 30px - -.moduleRow - height 30px - margin-bottom 4px - display flex - align-items center - - input - z-index 200 - user-select auto - background var(--ghostC) - outline none - border none - margin-left 8px - height 100% - color var(--outerspace) - border-radius 8px - padding 0px 8px - -.moduleButton - width 100% - height 40px - background var(--ghostB) - border-radius 20px - color var(--outerspace) - display flex - justify-content center - align-items center - font-weight 400 - font-size 13px - box-sizing border-box - text-transform uppercase - box-shadow 0px 1px 2px var(--ghostZ) - - svg - position relative - - span - padding-left 4px - - * - pointer-events none - -.moduleButton.signerVerifyInProgress - background var(--ghostC) - color var(--outerspace04) - -.moduleButton:hover:not(.signerVerifyInProgress) - cursor pointer - background var(--ghostD) - box-shadow 0px 4px 6px var(--ghostA) - -.moduleButtonBad - color var(--bad) - -.moduleButtonGood - color var(--good) - -.moduleButtonLocked - color var(--ghostD) - -.moduleButtonLocked:hover - background var(--ghostB) - box-shadow 0px 2px 2px var(--ghostA) diff --git a/app/tray/AccountSelector/AccountController/trezorLogo.png b/app/tray/AccountSelector/AccountController/trezorLogo.png deleted file mode 100644 index 92cb01576..000000000 Binary files a/app/tray/AccountSelector/AccountController/trezorLogo.png and /dev/null differ diff --git a/app/tray/AccountSelector/index.js b/app/tray/AccountSelector/index.js deleted file mode 100644 index 31b9adeb0..000000000 --- a/app/tray/AccountSelector/index.js +++ /dev/null @@ -1,147 +0,0 @@ -import React from 'react' -import Restore from 'react-restore' - -import AccountController from './AccountController' - -import { accountSort as byCreation } from '../../../resources/domain/account' -import { matchFilter } from '../../../resources/utils' - -import { Cluster, ClusterBox, ClusterValue, ClusterRow } from '../../../resources/Components/Cluster' - -import svg from '../../../resources/svg' -import link from '../../../resources/link' - -let firstScroll = true - -class AccountSelector extends React.Component { - constructor(props, context) { - super(props, context) - this.state = { - accountFilter: context.store('panel.accountFilter') || '' - } - } - - reportScroll() { - const ref = this.scroll.current - this.store.initialScrollPos(ref?.scrollTop) - } - - resetScroll() { - setTimeout(() => { - if (firstScroll) { - firstScroll = false - } else { - this.scroll.scrollTo({ top: -999999999999, left: 0, behavior: 'smooth' }) - } - }, 3000) - } - - renderAccountFilter() { - const accounts = this.store('main.accounts') - const open = this.store('selected.open') - if (Object.keys(accounts).length === 0 || open) return null - - return ( -
-
{svg.search(12)}
-
- { - const value = e.target.value - this.setState({ accountFilter: value }) - link.send('tray:action', 'setAccountFilter', value) - }} - value={this.state.accountFilter} - /> -
- {this.store('panel.accountFilter') ? ( -
{ - this.setState({ accountFilter: '' }) - link.send('tray:action', 'setAccountFilter', '') - }} - > - {svg.close(12)} -
- ) : null} -
- ) - } - - renderAccountList() { - const accounts = this.store('main.accounts') - const sortedAccounts = Object.values(accounts).sort(byCreation) - const filter = this.store('panel.accountFilter') - - const displayAccounts = sortedAccounts.filter(({ address, name, ensName, lastSignerType }) => { - return matchFilter(filter, [address, name, ensName, lastSignerType]) - }) - - return ( -
{ - if (ref) this.scroll = ref - }} - > - {/*
0 ? { marginTop: '-' + scrollTop + 'px' } : {}}> */} -
- {displayAccounts.length ? ( - displayAccounts.map((account, i) => ( - this.reportScroll()} - resetScroll={() => this.resetScroll()} - /> - )) - ) : Object.keys(accounts).length === 0 ? ( - - - - -
{'No Accounts Added'}
-
-
- - { - link.send('tray:action', 'navDash', { - view: 'accounts', - data: { showAddAccounts: true } - }) - }} - > -
-
{svg.accounts(16)}
-
{'Add New Account'}
-
-
-
-
-
- ) : ( -
{'No Matching Accounts'}
- )} -
-
- ) - } - - render() { - const open = this.store('selected.open') - - return ( -
- {this.renderAccountFilter()} - {this.renderAccountList()} -
- ) - } -} - -export default Restore.connect(AccountSelector) diff --git a/app/tray/AccountSelector/style/index.styl b/app/tray/AccountSelector/style/index.styl deleted file mode 100644 index 5384a28b1..000000000 --- a/app/tray/AccountSelector/style/index.styl +++ /dev/null @@ -1,198 +0,0 @@ -@import '../AccountController/style' - -.accountSelector - position absolute - top 80px - right 8px - bottom 40px - left 8px - border-radius 26px - z-index 999 - display flex - align-items center - overflow hidden - display flex - justify-content center - align-items center - transform translateY(0px) - transition var(--standardFast) - - .accountSelectorScroll - width 100% - max-height 100% - border-radius 30px - transition var(--standard) - overflow-y scroll - overflow-x hidden - - .accountSelectorScrollWrap - width 100% - padding 48px 6px 48px 6px - box-sizing border-box - will-change scroll-position - z-index 999 - pointer-events none - - .noSigners - width 100% - display flex - justify-content center - align-items center - flex-direction column - font-weight 300 - font-size 19px - position relative - z-index 100 - padding 24px - - .introLogo - padding-bottom 38px - - svg - fill var(--outerspace) - - .getStarted - margin-top 30px - box-sizing border-box - border-radius 12px - padding 20px - font-size 14px - margin 20px - text-align center - font-weight 300 - background var(--outerspace) - color var(--spacewhite) - line-height 24px - - .getStartedPlus - display inline-block - position relative - top 4px - border 2px solid var(--spacewhite) - width 43px - height 22px - border-radius 11px - text-align center - margin 0px 5px 0px 5px - box-sizing border-box - - span - position relative - top -3px - left 2px - font-size 17px - - .featureBox - display flex - justify-content center - align-items center - flex-direction column - margin-top 30px - - .featureBoxText - font-size 13px - font-weight 400 - letter-spacing 4px - - .featureBoxSubtext - margin-top 8px - font-size 10px - font-family 'FiraCode' - justify-content center - opacity 0.7 - -@keyframes appear - 0% - filter blur(10px) - opacity 0 - - 100% - filter blur(0px) - opacity 1 - -.panelFilterMain - position fixed - top 0px - left 0px - right 0px - height 48px - z-index 99 - overflow hidden - animation appear 1s cubic-bezier(.82,0,.12,1) - -.panelFilterAccount - position sticky - top 0px - left 0px - right 0px - height 48px - width 100% - z-index 99 - overflow hidden - animation appear 1s cubic-bezier(.82,0,.12,1) - -.panelFilterIcon - position absolute - top 4px - left 0 - bottom 0 - width 48px - display flex - justify-content center - align-items center - -.panelFilterInput - position absolute - top 0 - left 30px - bottom 0 - right 30px - - input, input:hover, input:focus - width 100% - height 100% - border none - outline none - text-align center - background transparent - color var(--outerspace) - font-size 20px - font-family 'MainFont' - font-weight 300 - box-shadow none - -.panelFilterClear - position absolute - top 8px - right 3px - bottom 8px - width 40px - display flex - justify-content center - align-items center - color var(--outerspace) - cursor pointer - border-radius 20px - - * - pointer-events none - -.panelFilterClear:hover - background var(--ghostA) - -.accountSelectorOpen - transform translateY(-14px) - transition var(--standard) - z-index 999999999 - pointer-events none - * - pointer-events none - -.newAccountButton - display flex - padding 16px - color var(--good) - font-weight 400 - - .newAccountIcon - padding-right 10px diff --git a/app/tray/App.js b/app/tray/App.js index cb7e63348..5cb9df993 100644 --- a/app/tray/App.js +++ b/app/tray/App.js @@ -4,11 +4,11 @@ import link from '../../resources/link' import Account from './Account' import Notify from './Notify' -import Menu from './Menu' +import { Header } from './Header' import Badge from './Badge' -import Backdrop from './Backdrop' -import AccountSelector from './AccountSelector' +import PanelMenu from '../../resources/Components/PanelMenu' + import Footer from './Footer' // import DevTools from 'restore-devtools' @@ -76,10 +76,9 @@ class Panel extends React.Component {
- - + +
-
) diff --git a/app/tray/Backdrop/index.js b/app/tray/Backdrop/index.js deleted file mode 100644 index 729031f39..000000000 --- a/app/tray/Backdrop/index.js +++ /dev/null @@ -1,96 +0,0 @@ -import React from 'react' -import Restore from 'react-restore' - -class Backdrop extends React.Component { - // getStyle () { - // const accountOpen = this.store('selected.open') - // const crumb = this.store('windows.panel.nav')[0] || {} - // if (accountOpen && crumb.view === 'requestView') { - // const { accountId, requestId } = crumb.data - // const req = this.store('main.accounts', accountId, 'requests', requestId) - // // TODO: Move this to nav data - // if (req && req.type === 'transaction' && crumb.data.step !== 'confirm') { - // return ({ - // overlay: { - // class: 'overlay', - // style: { - // top: '140px', - // bottom: '40px' - // } - // }, - // backdrop: { - // class: 'backdrop', - // style: { - // top: '140px', - // bottom: '40px' - // } - // } - // }) - // } - // return ({ - // overlay: { - // class: 'overlay', - // style: { - // top: '140px', - // bottom: '200px' - // } - // }, - // backdrop: { - // class: 'backdrop', - // style: { - // top: '140px', - // bottom: '200px' - // } - // } - // }) - // } else if (accountOpen) { - // return ({ - // overlay: { - // class: 'overlay', - // style: { - // top: '140px', - // bottom: '40px' - // } - // }, - // backdrop: { - // class: 'backdrop', - // style: { - // top: '140px', - // bottom: '40px' - // } - // } - // }) - // } else { - // return ({ - // overlay: { - // class: 'overlay', - // style: { - // top: '80px', - // bottom: '40px' - // } - // }, - // backdrop: { - // class: 'backdrop', - // style: { - // top: '80px', - // bottom: '40px' - // } - // } - // }) - // } - // } - render() { - const accountOpen = this.store('selected.open') - const footerHeight = this.store('windows.panel.footer.height') - const top = accountOpen ? '140px' : '80px' - const bottom = footerHeight + 'px' - return ( - <> -
-
- - ) - } -} - -export default Restore.connect(Backdrop) diff --git a/app/tray/Backdrop/style/index.styl b/app/tray/Backdrop/style/index.styl deleted file mode 100644 index fe3d36b54..000000000 --- a/app/tray/Backdrop/style/index.styl +++ /dev/null @@ -1,52 +0,0 @@ -.backdrop - position absolute - top 80px - right 8px - left 8px - bottom 40px - z-index 1 - pointer-events none - transition var(--standard) - background var(--ghostZ) - border-radius 30px - -.overlay - position absolute - top 80px - right 8px - left 8px - bottom 40px - z-index 1000 // top - pointer-events none - transition var(--standard) - border-radius 30px - opacity 1 - box-shadow inset 0px 0px 8px var(--ghostY) - border-top 2px solid var(--ghostZ) - -.overlayMonitor - opacity 1 - -.light - .overlayMonitor::before - content '' - position absolute - top 0px - right 0px - left 0px - bottom 0px - border-radius 26px - opacity 0.1 - background-image url('./Account/Requests/style/wave.svg') - -.dark - .overlayMonitor::before - content '' - position absolute - top 0px - right 0px - left 0px - bottom 0px - border-radius 26px - opacity 0.1 - background-image url('./Account/Requests/style/waveDark.svg') diff --git a/app/tray/Badge/style/index.styl b/app/tray/Badge/style/index.styl index 05f724d04..bf4a479c8 100644 --- a/app/tray/Badge/style/index.styl +++ b/app/tray/Badge/style/index.styl @@ -19,7 +19,7 @@ z-index 1 transition var(--standard) font-size 18px - font-weight 300 + font-weight 400 padding-bottom 120px padding-top 70px box-shadow 0px 20px 40px var(--ghostX) @@ -60,7 +60,7 @@ border-radius 12px text-transform uppercase font-size 14px - font-weight 400 + font-weight 500 letter-spacing 1px margin-left 1px cursor pointer diff --git a/app/tray/Footer/RequestCommand/TxApproval/style/index.styl b/app/tray/Footer/RequestCommand/TxApproval/style/index.styl index 88f0dd251..a872f0988 100644 --- a/app/tray/Footer/RequestCommand/TxApproval/style/index.styl +++ b/app/tray/Footer/RequestCommand/TxApproval/style/index.styl @@ -18,7 +18,7 @@ font-size 18px letter-spacing 1px text-transform uppercase - font-weight 300 + font-weight 400 font-family 'VCR' display flex justify-content space-between @@ -39,7 +39,7 @@ text-align justify text-align-last center font-family 'FiraCode' - font-weight 200 + font-weight 300 height 83px font-size 14px @@ -49,7 +49,7 @@ font-family 'MainFont' transform translateY(0px) text-transform uppercase - font-weight 300 + font-weight 400 border-radius 24px border-top-right-radius 0px border-top-left-radius 0px diff --git a/app/tray/Header/index.js b/app/tray/Header/index.js new file mode 100644 index 000000000..f88f2dda4 --- /dev/null +++ b/app/tray/Header/index.js @@ -0,0 +1,82 @@ +import React from 'react' +import styled from 'styled-components' + +import useStore from '../../../resources/Hooks/useStore' + +import { icons, list } from '../../../resources/svg/new' + +import { Cluster, ClusterRow, ClusterValue } from '../../../resources/Components/Cluster' + +export const HeaderWrap = styled.div` + position: absolute; + animation: cardShow 400ms linear both; + left: 8px; + right: 8px; + top: 48px; + height: 64px; + box-sizing: border-box; + display: flex; + justify-content: space-between; + -webkit-app-region: no-drag; + z-index: 1000000000; + opacity: 1; + transform: translate3d(0, 0, 0); + display: flex; + justify-content: center; + align-items: center; + /* border-bottom: 2px solid var(--ghostY); */ + /* background: var(--ghostZ05); */ + /* backdrop-filter: blur(16px); */ + background: var(--ghostAZ); + border-radius: 12px; + box-shadow: 2px 3px 9px 0px var(--ghostY); +` + +export const Header = () => { + const crumb = useStore('windows.panel.nav')[0] || {} + const accounts = useStore('main.accounts') + const currentAccount = Object.values(accounts).find((acct) => acct.active) || {} + + const { address, ensName } = currentAccount + const clippedAddress = + address && `${address.substr(0, 6)}...${address.substr(address.length - 4, address.length)}` + + return ( + +
+
+ {list[Math.floor(Math.random() * list.length)].icon(21)} +
+
+
+
{ensName}
+
{clippedAddress}
+
+
+ ) +} diff --git a/app/tray/Menu/index.js b/app/tray/Menu/index.js deleted file mode 100644 index 16222b9f1..000000000 --- a/app/tray/Menu/index.js +++ /dev/null @@ -1,64 +0,0 @@ -import React from 'react' -import Restore from 'react-restore' -import link from '../../../resources/link' -import svg from '../../../resources/svg' - -class Menu extends React.Component { - constructor(...args) { - super(...args) - this.state = { - glitchOnSend: false, - glitchOnSidebar: false - } - } - glitch(el, on) { - return ( -
- {[...Array(10).keys()].map((i) => ( -
- {el} -
- ))} - {!on ?
{el}
: null} -
- ) - } - render() { - return ( -
-
{ - this.setState({ glitchOnSidebar: false }) - link.send('tray:action', 'setDash', { - showing: !this.store('windows.dash.showing') - }) - }} - onMouseEnter={() => this.setState({ glitchOnSidebar: true })} - onMouseOver={() => this.setState({ glitchOnSidebar: true })} - onMouseLeave={() => this.setState({ glitchOnSidebar: false })} - > - {this.glitch(svg.sidebar(15), this.state.glitchOnSidebar)} -
-
{ - clearTimeout(this.clickTimer) - this.clickTimer = setTimeout(() => { - this.setState({ glitchOnSend: false }) - link.send('*:addFrame', 'dappLauncher') - link.send('tray:action', 'setDash', { showing: false }) - }, 50) - }} - onMouseEnter={() => this.setState({ glitchOnSend: true })} - onMouseOver={() => this.setState({ glitchOnSend: true })} - onMouseLeave={() => this.setState({ glitchOnSend: false })} - > - {this.glitch(svg.send(15), this.state.glitchOnSend)} -
-
- ) - } -} - -export default Restore.connect(Menu) diff --git a/app/tray/Menu/style/index.styl b/app/tray/Menu/style/index.styl deleted file mode 100644 index 1d2a31419..000000000 --- a/app/tray/Menu/style/index.styl +++ /dev/null @@ -1,28 +0,0 @@ -.dappTile - height 32px - width 88px - display flex - justify-content center - align-items center - cursor pointer - box-sizing border-box - border-radius 10px - background var(--ghostZ) - margin 3px 8px 3px 3px - color var(--outerspace08) - padding 5px - // border-right 1px solid var(--ghostA) - - * - pointer-events none - - svg - position relative - - img - position relative - height 100% - -.dappTile:hover - background var(--ghostA) - diff --git a/app/tray/Notify/style/index.styl b/app/tray/Notify/style/index.styl index cec70d26f..3ca97f162 100644 --- a/app/tray/Notify/style/index.styl +++ b/app/tray/Notify/style/index.styl @@ -30,7 +30,7 @@ align-items center text-transform uppercase font-size 11px - font-weight 300 + font-weight 400 cursor pointer background var(--ghostB) color var(--moon) @@ -133,7 +133,7 @@ .notifyBodyLine padding 0px 20px font-size 16px - font-weight 300 + font-weight 400 font-family 'MainFont' .notifyBodyLineUrl @@ -150,7 +150,7 @@ border-radius 8px margin-top 50px font-size 13px - font-weight 300 + font-weight 400 .notifyBodyLink text-decoration underline @@ -182,7 +182,7 @@ position relative justify-content center align-items center - font-weight 400 + font-weight 500 z-index 3 margin-top 16px margin-left 8px @@ -235,12 +235,12 @@ box-sizing border-box background var(--ghostA) height 40px - font-weight 300 + font-weight 400 padding-top 1px box-shadow cardDrop, 0px 2px 1px var(--ghostA), 0px 0px 7px 2px var(--ghostB) text-transform uppercase font-size 14px - font-weight 400 + font-weight 500 letter-spacing 1px cursor pointer * @@ -310,11 +310,11 @@ z-index 3 margin -10px font-size 12px - font-weight 300 + font-weight 400 border-radius 6px text-align cleft line-height 18px - font-weight 300 + font-weight 400 color var(--outerspace08) .introInstructionItem @@ -328,7 +328,7 @@ margin 18px 5px 30px 5px border-radius 6px padding 16px - font-weight 400 + font-weight 500 background var(--pending) color var(--spacewhite) div diff --git a/app/tray/index.styl b/app/tray/index.styl index fc7eb3166..ab5df6a5d 100644 --- a/app/tray/index.styl +++ b/app/tray/index.styl @@ -2,11 +2,11 @@ html, body margin 0 border 0 font-family 'MainFont' - font-weight 300 + font-weight 400 -webkit-app-region no-drag overflow hidden color var(--outerspace) - background var(--ghostA) + background var(--ghostZ) div user-select none @@ -55,7 +55,7 @@ div top 0px right 15px height 37px - font-weight 400 + font-weight 500 border-bottom-left-radius 4px display flex justify-content center diff --git a/app/tray/style/index.styl b/app/tray/style/index.styl index 210aa76ec..bcdc768f5 100644 --- a/app/tray/style/index.styl +++ b/app/tray/style/index.styl @@ -64,7 +64,7 @@ border-radius 3px background var(--spacewhite) font-size 14px - font-weight 300 + font-weight 400 .panelRequestGrant margin-top 40px @@ -117,177 +117,176 @@ opacity 1 transform translate3d(0, 0, 0) - .panelMenuItem - height 38px - width 48px - top 9px - border-radius 16px - display flex - justify-content center - align-items center - -webkit-app-region no-drag - transition none - pointer-events auto - transform translate3d(0, 0, 0) - background var(--ghostB) - position absolute - cursor pointer - border 3px solid var(--ghostZ) - // box-shadow 3px 3px 9px var(--ghostZ), 0px -3px 9px var(--ghostB) - // background blue - - * - pointer-events none - - .panelMenuItem:hover - background var(--ghostC) - // box-shadow 3px 7px 9px var(--ghostZ), 0px -3px 9px var(--ghostB) +.panelMenuItem + height 38px + width 48px + top 9px + border-radius 16px + display flex + justify-content center + align-items center + -webkit-app-region no-drag + transition none + pointer-events auto + transform translate3d(0, 0, 0) + background var(--ghostB) + position absolute + cursor pointer + border 3px solid var(--ghostZ) + // box-shadow 3px 3px 9px var(--ghostZ), 0px -3px 9px var(--ghostB) + // background blue - .panelMenuItem:active - background var(--ghostC) - // box-shadow 0px 2px 9px var(--ghostZ), 0px 0px 9px var(--ghostB) + * + pointer-events none - .panelMenuItemOpen - left 0px +.panelMenuItem:hover + background var(--ghostC) + // box-shadow 3px 7px 9px var(--ghostZ), 0px -3px 9px var(--ghostB) - .panelMenuItemSend - right 0px +.panelMenuItem:active + background var(--ghostC) + // box-shadow 0px 2px 9px var(--ghostZ), 0px 0px 9px var(--ghostB) - .panelTitle - position absolute - left 60px - right 170px - top 24px - bottom 10px - display flex - align-items center - justify-content center - font-family 'MainFont' - font-size 18px - font-weight 300 - display none - - .mainWindowMarker - position absolute - left 9px - top 10px - height 3px - background var(--ghostZ) - border-radius 2px - z-index 20000 - cursor pointer - width 50px - // background blue - - .panelMenuMarker - position absolute - // left 8px - right 9px - top 10px - height 3px - background var(--ghostZ) - border-radius 2px - z-index 20000 - cursor pointer - width 165px - // background blue +.panelMenuItemOpen + left 0px - .panelMenuMark - position relative - width 36px - height 3px - background var(--outerspace) - transform translateX(14px) - border-radius 2px - transition var(--standard) - margin-left -1px - z-index 20002 - .panelMenuMarkGood - background var(--good) - - .panelDetail - display flex - align-items center - margin-left 0% - transition var(--standardSlow) +.panelMenuItemSend + right 0px - .panelDetailText - transition var(--standard) - text-transform uppercase - font-size 10px - letter-spacing 1px - font-weight 300 - color var(--outerspace08) - display flex - justify-content center - align-items center - font-weight 400 - padding-right 8px - margin-right 8px - - .panelMenuData - position absolute - top 23px - right 75px - left 176px - transition var(--standard) - letter-spacing 0px - text-transform uppercase - color var(--outerspace08) - display flex - justify-content center - align-items center - font-weight 300 - font-size 11px - height 25px +.panelTitle + position absolute + left 60px + right 170px + top 24px + bottom 10px + display flex + align-items center + justify-content center + font-family 'MainFont' + font-size 18px + font-weight 400 + display none - .panelMenuDataDivide - height 100% - width 1px - background var(--ghostY) +.mainWindowMarker + position absolute + left 9px + top 10px + height 3px + background var(--ghostZ) + border-radius 2px + z-index 20000 + cursor pointer + width 50px + +.panelMenuMarker + position absolute + right 9px + top 10px + height 3px + background var(--ghostZ) + border-radius 2px + z-index 20000 + cursor pointer + width 165px + // background blue + +.panelMenuMark + position relative + width 36px + height 3px + background var(--outerspace) + transform translateX(14px) + border-radius 2px + transition var(--standard) + margin-left -1px + z-index 20002 - .panelMenuDataItem - display flex - justify-content center - padding 0px 5px 1px 5px +.panelMenuMarkGood + background var(--good) + +.panelDetail + display flex + align-items center + margin-left 0% + transition var(--standardSlow) - .svg - position relative - margin-left 4px - margin-top 4px - margin-right 3px +.panelDetailText + transition var(--standard) + text-transform uppercase + font-size 10px + letter-spacing 1px + font-weight 400 + color var(--outerspace08) + display flex + justify-content center + align-items center + font-weight 500 + padding-right 8px + margin-right 8px + +.panelMenuData + position absolute + top 23px + right 75px + left 176px + transition var(--standard) + letter-spacing 0px + text-transform uppercase + color var(--outerspace08) + display flex + justify-content center + align-items center + font-weight 400 + font-size 11px + height 25px - .usd - position relative - margin-top 3px - margin-right 1px + .panelMenuDataDivide + height 100% + width 1px + background var(--ghostY) - .panelDetailIndicator - height 3px - width 23px - margin 10px 8px 10px 8px - border-radius 5px + .panelMenuDataItem display flex - align-items center justify-content center + padding 0px 5px 1px 5px + + .svg + position relative + margin-left 4px + margin-top 4px + margin-right 3px + + .usd + position relative + margin-top 3px + margin-right 1px + +.panelDetailIndicator + height 3px + width 23px + margin 10px 8px 10px 8px + border-radius 5px + display flex + align-items center + justify-content center - .panelDetailIndicatorInner - height 3px - width 23px - border-radius 2px + .panelDetailIndicatorInner + height 3px + width 23px + border-radius 2px - .panelDetailIndicatorGood - background var(--good) + .panelDetailIndicatorGood + background var(--good) - .panelDetailIndicatorWaiting - background var(--moon) + .panelDetailIndicatorWaiting + background var(--moon) - .panelDetailIndicatorBad - background var(--bad) + .panelDetailIndicatorBad + background var(--bad) - .panelDetailIndicatorPending - transition var(--standardSlow) - background var(--pending) + .panelDetailIndicatorPending + transition var(--standardSlow) + background var(--pending) .appMenu position absolute @@ -338,7 +337,5 @@ @import './card.styl' @import '../Notify/style' @import '../Badge/style' -@import '../Backdrop/style' @import '../Account/style' -@import '../AccountSelector/style' @import '../Footer/style' diff --git a/app/workspace/Ribbon/Account/index.js b/app/workspace/Ribbon/Account/index.js new file mode 100644 index 000000000..862ad969a --- /dev/null +++ b/app/workspace/Ribbon/Account/index.js @@ -0,0 +1,87 @@ +import React from 'react' +import link from '../../../../resources/link' +import svg from '../../../../resources/svg' +import useStore from '../../../../resources/Hooks/useStore.js' +import styled from 'styled-components' + +import React from 'react' +import styled from 'styled-components' + +import useStore from '../../../../resources/Hooks/useStore' +import { icons, list } from '../../../../resources/svg/new' + +const AccountWrap = styled.div` + height: 100%; + padding: 0px 20px; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + -webkit-app-region: no-drag; + font-size: 14px; + font-family: 'Fira Code'; + * { + pointer-events: none; + } + &:hover { + background: var(--ghostC); + } +` + +// import { Cluster, ClusterRow, ClusterValue } from '../../../resources/Components/Cluster' + +export const HeaderWrap = styled.div` + position: absolute; + animation: cardShow 400ms linear both; + left: 8px; + right: 8px; + top: 48px; + height: 86px; + box-sizing: border-box; + display: flex; + justify-content: space-between; + -webkit-app-region: no-drag; + z-index: 1000000000; + opacity: 1; + transform: translate3d(0, 0, 0); + display: flex; + justify-content: center; + align-items: center; +` + +const Account = () => { + const accounts = useStore('main.accounts') + const currentAccount = Object.values(accounts).find((acct) => acct.active) || {} + + const { address, ensName } = currentAccount + const clippedAddress = + address && `${address.substr(0, 6)}...${address.substr(address.length - 4, address.length)}` + + return ( + { + link.send('workspace:nav', window.frameId, 'command', { station: 'command' }) + }} + > +
+
+ {list[Math.floor(Math.random() * list.length)].icon(16)} +
+
+
+ {/*
{ensName}
*/} +
{clippedAddress}
+
+
+ ) +} + +export default Account diff --git a/app/workspace/Ribbon/Native/index.js b/app/workspace/Ribbon/Native/index.js new file mode 100644 index 000000000..758c23989 --- /dev/null +++ b/app/workspace/Ribbon/Native/index.js @@ -0,0 +1,153 @@ +import React from 'react' +import link from '../../../../resources/link' +import svg from '../../../../resources/svg' +import useStore from '../../../../resources/Hooks/useStore.js' +import styled from 'styled-components' +import { + NativeControls, + LinuxControls, + LinuxControlsButton, + WindowsControls, + WindowsControlsButton, + MacControls, + MacTitleButton, + MacTitleClose, + MacTitleMin, + MacTitleFull +} from './styled' + +const NavigationContainer = styled.div` + position: absolute; + top: 0px; + left: 8px; + bottom: 0px; + z-index: 9999; + display: flex; + background: red; +` + +const NavBack = styled.div` + height: 26px; + width: 26px; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 8px 0px; + border-radius: 7px; + background: red; + -webkit-app-region: no-drag; + &:hover { + background: var(--ghostB); + box-shadow: 1px 1px 4px var(--ghostZ), -1px -1px 4px var(--ghostA); + } + * { + pointer-events: none; + } +` + +const RotatedSpan = styled.span` + transform: rotate(180deg); +` + +const Navigation = () => ( + + link.send('workspace:nav:back', window.frameId)}>{svg.chevronLeft(14)} + link.send('workspace:nav:forward', window.frameId)}> + {svg.chevronLeft(14)} + + +) + +const handleClose = () => link.send('frame:close') +const handleMin = () => link.send('frame:min') +const handleMax = () => link.send('frame:max') +const handleUnmax = () => link.send('frame:unmax') +const handleFull = () => link.send('frame:full') +const handleUnfull = () => link.send('frame:unfull') + +const Title = () => { + const platform = useStore('platform') + const { fullscreen, maximized, focused } = useStore('windows.workspaces', window.frameId) + + return ( + + {/* */} + {platform === 'darwin' ? ( + + + + + + + + + {maximized || fullscreen ? ( + + ) : ( + + )} + + + ) : platform === 'win32' ? ( + <> + + + + + + + {maximized || fullscreen ? ( + + + + + + ) : ( + + + + + + )} + + + + + + + + ) : ( + <> + + + + + + + {maximized || fullscreen ? ( + + + + + + ) : ( + + + + + + )} + + + + + + + + )} + + ) +} + +export default Title diff --git a/app/workspace/Ribbon/Native/styled/index.js b/app/workspace/Ribbon/Native/styled/index.js new file mode 100644 index 000000000..012188267 --- /dev/null +++ b/app/workspace/Ribbon/Native/styled/index.js @@ -0,0 +1,174 @@ +import styled, { css } from 'styled-components' + +export const NativeControls = styled.div` + position: absolute; + left: ${(props) => (props.platform === 'darwin' ? '0' : 'unset')}; + right: ${(props) => (props.platform !== 'darwin' ? '0' : 'unset')}; + top: 0px; + bottom: 0; + height: 40px; + width: 80px; +` + +export const LinuxControls = styled.div` + position: absolute; + top: 0px; + right: 8px; + bottom: 0; + display: flex; +` + +export const LinuxControlsButton = styled.div` + width: 21px; + height: 21px; + margin: 6px 0px 8px 13px; + display: flex; + justify-content: center; + align-items: center; + color: white; + border-radius: 11px; + background: rgba(255, 255, 255, 0.05); + flex: 1; + flex-shrink: 0; + + svg { + position: relative; + fill: currentColor; + transform: scale(0.7); + } + + * { + pointer-events: none; + } + + &:hover { + background: rgba(255, 255, 255, 0.1); + } + + -webkit-app-region: no-drag; + cursor: pointer; + * { + pointer-events: none; + } +` + +export const WindowsGrab = styled.div` + position: absolute; + top: 0; + left: 0px; + bottom: 0; + right: 136px; + -webkit-app-region: drag; +` + +export const WindowsControls = styled.div` + position: absolute; + top: 1px; + right: 1px; + bottom: 0; + display: flex; + justify-content: center; + align-items: center; +` + +export const WindowsControlsButton = styled.div` + width: 45px; + height: 32px; + display: flex; + justify-content: center; + align-items: center; + color: white; + border-radius: 4px; + -webkit-app-region: no-drag; + cursor: pointer; + * { + pointer-events: none; + } + + svg { + position: relative; + fill: currentColor; + } + + * { + pointer-events: none; + } + + &:hover { + background: rgba(255, 255, 255, 0.02); + } +` + +export const MacTitleButton = styled.div` + height: 20px; + width: 20px; + position: relative; + display: flex; + justify-content: center; + align-items: center; +` + +export const MacTitleClose = styled.div` + width: 13px; + height: 13px; + background: rgba(124, 124, 124, 0.24); + border-radius: 50%; + cursor: pointer; +` + +export const MacTitleMin = styled.div` + width: 13px; + height: 13px; + background: rgba(124, 124, 124, 0.24); + border-radius: 50%; + cursor: pointer; +` + +export const MacTitleFull = styled.div` + width: 13px; + height: 13px; + background: rgba(124, 124, 124, 0.24); + border-radius: 50%; + cursor: pointer; + + /* &:hover { + background: #34c84a; + } */ +` +export const MacControls = styled.div` + height: 100%; + display: flex; + justify-content: center; + align-items: center; + -webkit-app-region: no-drag; + + &:hover { + ${MacTitleClose} { + background: #fc615d; + } + + ${MacTitleMin} { + background: #fdbd41; + } + + ${MacTitleFull} { + background: #34c84a; + } + } + + ${({ focused }) => + focused && + ` + ${MacTitleClose} { + background: #fc615d; + } + + ${MacTitleMin} { + background: #fdbd41; + } + + ${MacTitleFull} { + background: #34c84a; + } + `} +` diff --git a/app/workspace/Ribbon/index.js b/app/workspace/Ribbon/index.js new file mode 100644 index 000000000..ccaf1d925 --- /dev/null +++ b/app/workspace/Ribbon/index.js @@ -0,0 +1,243 @@ +import styled, { keyframes } from 'styled-components' + +import Native from './Native' +import Account from './Account' + +import link from '../../../resources/link' +import svg from '../../../resources/svg' +import useStore from '../../../resources/Hooks/useStore' + +const Ribbon = styled.div` + position: absolute; + top: 12px; + right: 12px; + left: 12px; + height: 42px; + z-index: 999999; + pointer-events: auto; + align-items: center; + text-align: center; + display: flex; + justify-content: center; + transform: translate3d(0, 0, 0); + flex-direction: ${(props) => (props.platform === 'darwin' ? 'row-reverse' : 'row')}; +` + +const RibbonSection = styled.div` + height: 42px; + border-radius: 16px; + overflow: hidden; + z-index: 999999; + background: var(--ghostA); + opacity: 1; + /* border-bottom: 2px solid var(--ghostAZ); */ + /* box-shadow: 0px 2px 8px -2px var(--ghostY), 0px -3px 6px -2px var(--ghostB); */ + display: flex; +` + +const Options = styled.div` + font-size: 13px; + font-weight: 400; + display: flex; + height: 100%; +` +const OptionButton = styled.div` + width: 48px; + height: 100%; + border-left: 1px solid var(--ghostAZ); + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + -webkit-app-region: no-drag; + * { + pointer-events: none; + } + &:hover { + background: var(--ghostC); + } +` + +export const TopBackdrop = styled.div` + position: fixed; + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; + height: 120px; + z-index: 99999; + backdrop-filter: blur(8px); + pointer-events: none; + mask-image: linear-gradient(to bottom, black 32px, transparent); + -webkit-mask-image: linear-gradient(to bottom, black 32px, transparent); + display: none; + + &:after { + content: ''; + position: absolute; + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; + z-index: 1; + background: linear-gradient( + 90deg, + var(--ghostAZ) 5%, + transparent 10%, + transparent 90%, + var(--ghostAZ) 95% + ); + } +` + +export const TopFade = styled.div` + position: fixed; + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; + height: 120px; + z-index: 199999; + pointer-events: none; + + /* background: red; */ + background: linear-gradient(-180deg, var(--ghostAZ) 0%, transparent 100%); + + &:after { + content: ''; + position: absolute; + inset: 0px; + opacity: 0.8; + background: linear-gradient(-180deg, var(--ghostAZ) 25%, transparent 100%); + } +` + +const NavigationContainer = styled.div` + z-index: 9999; + display: flex; + height: 40px; + width: 80px; +` +const NavBack = styled.div` + height: 26px; + width: 26px; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + margin: 8px 0px; + border-radius: 7px; + -webkit-app-region: no-drag; + &:hover { + background: var(--ghostB); + box-shadow: 1px 1px 4px var(--ghostZ), -1px -1px 4px var(--ghostA); + } + * { + pointer-events: none; + } +` + +const RibbonCenter = styled.div` + display: flex; + margin: 2px 0px 0px 0px; + > * { + margin: 0 8px; + } +` + +const Navigation = () => { + return ( + + { + link.send('workspace:nav:back', window.frameId) + }} + > + {svg.chevronLeft(14)} + + { + link.send('workspace:nav:forward', window.frameId) + }} + > + {svg.chevronLeft(14)} + + + ) +} + +const fadeIn = keyframes` + 0% { + transform: translate3d(0, 0px, 0); + } + 100% { + transform: translate3d(0, -90px, 0); + } +` + +const RibbonContainer = styled.div` + position: absolute; + top: 0px; + right: 0px; + left: 0px; + transform: translate3d(0, 0, 0); + animation-delay: 0.5s; + /* animation: ${fadeIn} 2s ease-in-out alternate infinite; */ + z-index: 9999999; +` + +export default () => { + const frameState = useStore('windows.workspaces', frameId) + const nav = frameState?.nav[0] || { space: 'command', data: {} } + if (!nav || !nav.space) return null + + const { space } = nav + + const platform = useStore('platform') + + return ( + + + {/* */} + + + + + { + link.send('workspace:nav', window.frameId, 'accounts') + }} + > + {svg.accounts(14)} + + { + link.send('workspace:nav', window.frameId, 'chains') + }} + > + {svg.chain(16)} + + { + link.send('workspace:nav', window.frameId, 'dapps') + }} + > + {svg.route(14)} + + { + link.send('workspace:nav', window.frameId, 'settings') + }} + > + {svg.settings(14)} + + + + + + + + + + ) +} diff --git a/app/workspace/Spaces/Accounts/AccountManager/index.js b/app/workspace/Spaces/Accounts/AccountManager/index.js new file mode 100644 index 000000000..112b1f26c --- /dev/null +++ b/app/workspace/Spaces/Accounts/AccountManager/index.js @@ -0,0 +1,282 @@ +import React, { useState } from 'react' +import styled from 'styled-components' + +import svg from '../../../../../resources/svg' +import link from '../../../../../resources/link' +import useStore from '../../../../../resources/Hooks/useStore' +import { Entity } from '../../../../../resources/Components/Fluid' +import { ClusterBox, Cluster, ClusterRow, ClusterValue } from '../../../../../resources/Components/Cluster' + +import { icons, list } from '../../../../../resources/svg/new' + +import { moveItem, insertItemInGroup } from './organize' +import { AccountManagerWrap, AccountManagerMain, GroupHeader, GroupExpand } from './styled' + +export const Group = ({ item, setState }) => { + const [expanded, setExpanded] = useState(true) + const id = item.id + return ( + { + if (!dragEntity || dragEntity.id === id) return + setState((currentState) => { + let newState = currentState + if (dragEntity.type === 'item' && (item?.items?.length === 0 || !expanded)) { + newState = insertItemInGroup(newState, dragEntity.id, id, position) + } else if (dragEntity.id && id) { + newState = moveItem(newState, dragEntity.id, id, position) + } + return newState + }) + }} // will trigger when another entity is dragged over this entity + > + + + { + e.preventDefault() + e.stopPropagation() + setExpanded(!expanded) + }} + > + {svg.chevron(20)} + +
{item.name}
+
+ {item?.items?.length > 0 && expanded ? ( + + {item?.items?.map((item) => { + return item.type === 'group' ? ( + + ) : item.type === 'item' ? ( + + ) : null + })} + + ) : ( +
+ )} + + + ) +} + +export const Account = ({ item, setState }) => { + const id = item.id + return ( + + { + link.rpc('setSigner', item.address, (err) => { + if (err) return console.log(err) + }) + link.send('nav:back', 'panel') + }} + item={item} + onOver={(dragEntity, position) => { + // Dragging over self + if (!dragEntity || dragEntity.id === id) return + setState((currentState) => { + let newState = currentState + if (false) { + newState = insertItemInGroup(newState, dragEntity.id, id, location) + } else if (dragEntity.id && id) { + newState = moveItem(newState, dragEntity.id, id, position) + } + return newState + }) + }} + > + {}}> +
+
+ {list[Math.floor(Math.random() * list.length)].icon(21)} +
+ +
+
{item.ensName}
+
{`${item.address.substr(0, 6)}...${item.address.substr( + item.address.length - 4, + item.address.length + )}`}
+
+
+
+
+
+ ) +} + +export const AccountManagerFilter = () => { + const [accountModuleFilter, setAccountModuleFilter] = useState('') + + return ( +
+
{svg.search(12)}
+
+ { + const value = e.target.value + setAccountModuleFilter(value) + }} + value={accountModuleFilter} + /> +
+ {accountModuleFilter ? ( +
{ + setAccountModuleFilter('') + }} + > + {svg.close(12)} +
+ ) : null} +
+ ) +} + +export const AccountManagerController = ({ active, state, setState }) => { + return ( + <> + {/* + {dragOver && ( + <> +
+ {dragOver.overItem.id} + {dragOver.location} +
+
{JSON.stringify(floatingItemPosition, null, 4)}
+ + )} +
*/} + +
+ + + {state.map((item) => { + return item.type === 'group' ? ( + + ) : item.type === 'item' ? ( + + ) : null + })} + +
+ + ) +} + +const AccountManagerMenuWrap = styled.div` + width: 100%; + height: 32px; + background: var(--ghostAZ); + border-radius: 6px; + z-index: 999999; + display: flex; + justify-content: space-between; +` + +export const AccountManagerMenu = ({ children }) => { + return {children} +} + +export const AccountManager = () => { + // const crumb = useStore('windows.panel.nav')[0] || {} + const active = true // crumb.view === 'accountManager' + + const groups = [ + { + id: 'g1', + type: 'group', + name: 'Primary Accounts', + accounts: Object.keys(useStore('main.accounts')) + }, + { + id: 'g2', + type: 'group', + name: 'Hidden Accounts', + accounts: [] + }, + { + id: 'g3', + type: 'group', + name: 'Other Accounts', + accounts: [] + }, + + { + id: 'g4', + type: 'group', + name: 'Testnet Accounts', + accounts: [] + } + ] + + const accountToItem = (account) => { + // get account from store + return { + type: 'item', + ...account + } + } + + const initialState = groups.map(({ accounts, ...group }) => { + return { + ...group, + items: accounts + .map((address) => { + return useStore('main.accounts', address.toLowerCase()) + }) + .map(accountToItem) + } + }) + + const [state, setState] = useState(initialState) // initial state for your list + + return ( + + +
+ +
+
+
{'new Account'}
+
{'new Group'}
+
+
+ +
+ ) +} diff --git a/app/workspace/Spaces/Accounts/AccountManager/organize.js b/app/workspace/Spaces/Accounts/AccountManager/organize.js new file mode 100644 index 000000000..4c11abbb3 --- /dev/null +++ b/app/workspace/Spaces/Accounts/AccountManager/organize.js @@ -0,0 +1,141 @@ +const findRoute = (data, id, route = []) => { + for (let i = 0; i < data.length; i++) { + if (data[i].id === id) return [...route, i] + if (data[i].type === 'group') { + const found = findRoute(data[i].items, id, [...route, i]) + if (found) return found + } + } + return null +} + +const removeByRoute = (data, route) => { + if (route.length === 1) { + return data.splice(route[0], 1)[0] // Remove and return the item + } else { + // Continue down the path + return removeByRoute(data[route[0]].items, route.slice(1)) + } +} + +const addByRoute = (data, route, item, position) => { + const index = route[route.length - 1] + + // If the route has more than one element, it means the target item is inside a group + if (route.length > 1) { + const target = route[0] + const targetGroup = data[target] + const remainingRoute = route.slice(1) + + if (!targetGroup.items) { + console.error('Group has no items') + } + + addByRoute(targetGroup.items, remainingRoute, item, position) + + // Insert the item at the correct position inside the target group + // if (position === 'top' || position === 'left') { + // targetGroup.items.splice(index, 0, item) + // } else { + // targetGroup.items.splice(index + 1, 0, item) + // } + } else { + // If the route has only one element, the target item is at the top level + if (position === 'top' || position === 'left') { + data.splice(index, 0, item) + } else { + data.splice(index + 1, 0, item) + } + } +} + +const insertByGroupRoute = (data, route, item, position) => { + // const index = route[route.length - 1] + + // If the route has more than one element, it means the target item is inside a group + if (route.length > 1) { + const target = route[0] + const targetGroup = data[target] + const remainingRoute = route.slice(1) + + if (!targetGroup.items) { + console.error('something went wrong, group has no items') + } + + insertByGroupRoute(targetGroup.items, remainingRoute, item, position) + } else { + const target = route[0] + const targetGroup = data[target] + targetGroup.items.push(item) + // If the route has only one element, the target item is at the top level + // if (position === 'top' || position === 'left') { + // data.splice(index, 0, item) + // } else { + // data.splice(index + 1, 0, item) + // } + } +} + +export const moveItem = (data, id, targetId, position) => { + const route = findRoute(data, id) + if (!route) { + console.error(`Could not find item with id ${id}`) + return data + } + + // Creating a deep copy of the data + const tempData = JSON.parse(JSON.stringify(data)) + + const item = removeByRoute(tempData, route) + + const targetRoute = findRoute(tempData, targetId) + + if (!targetRoute) { + console.error(`Could not find target item with id ${targetId}`) + return data + } + + // Check if the target item is within the group we're trying to move + const targetWithinItemRoute = findRoute(item.items || [], targetId) + if (targetWithinItemRoute) { + console.error(`Cannot move a group next to an item within the group`) + return data + } + + addByRoute(tempData, targetRoute, item, position) + + // Returning the modified data if everything went successful + return tempData +} + +export const insertItemInGroup = (data, id, targetId, position) => { + const route = findRoute(data, id) + if (!route) { + console.error(`Could not find item with id ${id}`) + return data + } + + // Creating a deep copy of the data + const tempData = JSON.parse(JSON.stringify(data)) + + const item = removeByRoute(tempData, route) + + const targetRoute = findRoute(tempData, targetId) + + if (!targetRoute) { + console.error(`Could not find target item with id ${targetId}`) + return data + } + + // Check if the target item is within the group we're trying to move + const targetWithinItemRoute = findRoute(item.items || [], targetId) + if (targetWithinItemRoute) { + console.error(`Cannot move a group next to an item within the group`) + return data + } + + insertByGroupRoute(tempData, targetRoute, item, position) + + // Returning the modified data if everything went successful + return tempData +} diff --git a/app/workspace/Spaces/Accounts/AccountManager/styled/index.js b/app/workspace/Spaces/Accounts/AccountManager/styled/index.js new file mode 100644 index 000000000..9e290bc44 --- /dev/null +++ b/app/workspace/Spaces/Accounts/AccountManager/styled/index.js @@ -0,0 +1,130 @@ +import styled, { keyframes, css } from 'styled-components' + +export const cardUp = keyframes` + 0% { + opacity: 0; + } + 15.82% { + opacity: 0; + transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -9.026, 0, 1); + } + 21.02% { + transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -19.292, 0, 1); + } + 35.34% { + transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -3.681, 0, 1); + } + 49.55% { + opacity: 1; + transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2.594, 0, 1); + } + 78.18% { + transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.018, 0, 1); + } + 100% { + transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } +` + +export const cardDown = keyframes` + 0% { + transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); + } + 100% { + opacity: 0; + transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -9.026, 0, 1); + } +` + +export const AccountManagerWrap = styled.div` + z-index: 99999999999; + pointer-events: none; + /* animation: cardShow 400ms linear both; */ + * { + pointer-events: ${({ active }) => (active ? 'auto' : 'none')}; + } +` + +export const AccountManagerMain = styled.div` + background: var(--ghostZ); + transition: var(--standardFast); + pointer-events: ${({ active }) => (active ? 'auto' : 'none')}; + opacity: ${({ active }) => (active ? '1' : '0')}; + + * { + pointer-events: ${({ active }) => (active ? 'auto' : 'none')}; + } +` + +export const Group = styled.div` + border: 1px solid #ddd; + margin-bottom: 15px; + padding: 5px; +` + +export const GroupTitle = styled.h2` + margin: 0 0 10px 0; +` + +export const List = styled.ul` + list-style: none; + margin: 0; + padding: 0; +` + +export const ListItem = styled.li` + border: 1px solid #000; + margin-bottom: 10px; + padding: 10px; +` + +export const Debug = styled.div` + position: absolute; + z-index: 9999999999; + pointer-events: none; + background: black; + * { + pointer-events: none; + } +` + +export const Copy = styled.div` + position: absolute; + top: 0; + left: 0; + bottom: 0; + cursor: pointer; + width: 40px; + display: flex; + justify-content: center; + align-items: center; + * { + pointer-events: none; + } +` + +export const GroupHeader = styled.div` + display: flex; + position: relative; + padding: 16px 16px; + text-transform: uppercase; + font-size: 10px; + font-weight: 500; + letter-spacing: 1px; + margin-bottom: -8px; + align-items: center; +` + +export const GroupExpand = styled.div` + height: 20px; + width: 20px; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + transition: var(--standard); + transform: ${({ expanded }) => (expanded ? 'rotate(180deg)' : 'rotate(90deg)')}; + * { + pointer-events: none; + } +` diff --git a/app/dash/Accounts/Add/AddAddress/index.js b/app/workspace/Spaces/Accounts/Add/AddAddress/index.js similarity index 98% rename from app/dash/Accounts/Add/AddAddress/index.js rename to app/workspace/Spaces/Accounts/Add/AddAddress/index.js index 7dd56373e..c97cfe1d1 100644 --- a/app/dash/Accounts/Add/AddAddress/index.js +++ b/app/workspace/Spaces/Accounts/Add/AddAddress/index.js @@ -1,8 +1,8 @@ import React from 'react' import Restore from 'react-restore' -import link from '../../../../../resources/link' -import RingIcon from '../../../../../resources/Components/RingIcon' +import link from '../../../../../../resources/link' +import RingIcon from '../../../../../../resources/Components/RingIcon' const isEnsName = (input) => input.toLowerCase().includes('.eth') diff --git a/app/dash/Accounts/Add/AddHardware/index.js b/app/workspace/Spaces/Accounts/Add/AddHardware/index.js similarity index 96% rename from app/dash/Accounts/Add/AddHardware/index.js rename to app/workspace/Spaces/Accounts/Add/AddHardware/index.js index 35ce980a0..93a0a78b6 100644 --- a/app/dash/Accounts/Add/AddHardware/index.js +++ b/app/workspace/Spaces/Accounts/Add/AddHardware/index.js @@ -1,10 +1,10 @@ import React from 'react' import Restore from 'react-restore' -import link from '../../../../../resources/link' -import RingIcon from '../../../../../resources/Components/RingIcon' +import link from '../../../../../../resources/link' +import RingIcon from '../../../../../../resources/Components/RingIcon' -import Signer from '../../../Signer' +import Signer from '../../Signer' class AddHardware extends React.Component { constructor(...args) { diff --git a/app/dash/Accounts/Add/AddHardwareLattice/index.js b/app/workspace/Spaces/Accounts/Add/AddHardwareLattice/index.js similarity index 97% rename from app/dash/Accounts/Add/AddHardwareLattice/index.js rename to app/workspace/Spaces/Accounts/Add/AddHardwareLattice/index.js index 547f18e96..c82a40bbc 100644 --- a/app/dash/Accounts/Add/AddHardwareLattice/index.js +++ b/app/workspace/Spaces/Accounts/Add/AddHardwareLattice/index.js @@ -1,10 +1,10 @@ import React from 'react' import Restore from 'react-restore' -import Signer from '../../../Signer' +import Signer from '../../Signer' -import link from '../../../../../resources/link' -import RingIcon from '../../../../../resources/Components/RingIcon' +import link from '../../../../../../resources/link' +import RingIcon from '../../../../../../resources/Components/RingIcon' function parseDeviceName(name) { return name.replace(/\s+/g, '-').substring(0, 14) diff --git a/app/dash/Accounts/Add/AddKeystore/index.js b/app/workspace/Spaces/Accounts/Add/AddKeystore/index.js similarity index 95% rename from app/dash/Accounts/Add/AddKeystore/index.js rename to app/workspace/Spaces/Accounts/Add/AddKeystore/index.js index 56818432f..d06cdb41a 100644 --- a/app/dash/Accounts/Add/AddKeystore/index.js +++ b/app/workspace/Spaces/Accounts/Add/AddKeystore/index.js @@ -1,7 +1,7 @@ import { useEffect, useState } from 'react' import { AddHotAccount } from '../Components' -import link from '../../../../../resources/link' -import { PasswordInput } from '../../../../../resources/Components/Password' +import link from '../../../../../../resources/link' +import { PasswordInput } from '../../../../../../resources/Components/Password' const navForward = (accountData) => link.send('nav:forward', 'dash', { diff --git a/app/dash/Accounts/Add/AddPhrase/index.js b/app/workspace/Spaces/Accounts/Add/AddPhrase/index.js similarity index 100% rename from app/dash/Accounts/Add/AddPhrase/index.js rename to app/workspace/Spaces/Accounts/Add/AddPhrase/index.js diff --git a/app/dash/Accounts/Add/AddRing/index.js b/app/workspace/Spaces/Accounts/Add/AddRing/index.js similarity index 100% rename from app/dash/Accounts/Add/AddRing/index.js rename to app/workspace/Spaces/Accounts/Add/AddRing/index.js diff --git a/app/dash/Accounts/Add/Components/index.js b/app/workspace/Spaces/Accounts/Add/Components/index.js similarity index 94% rename from app/dash/Accounts/Add/Components/index.js rename to app/workspace/Spaces/Accounts/Add/Components/index.js index 8270e64b3..96917b779 100644 --- a/app/dash/Accounts/Add/Components/index.js +++ b/app/workspace/Spaces/Accounts/Add/Components/index.js @@ -1,10 +1,10 @@ import { useState } from 'react' -import useFocusableRef from '../../../../../resources/Hooks/useFocusableRef' -import RingIcon from '../../../../../resources/Components/RingIcon' -import { ConfirmPassword, CreatePassword } from '../../../../../resources/Components/Password' -import link from '../../../../../resources/link' -import { debounce } from '../../../../../resources/utils' +import useFocusableRef from '../../../../../../resources/Hooks/useFocusableRef' +import RingIcon from '../../../../../../resources/Components/RingIcon' +import { ConfirmPassword, CreatePassword } from '../../../../../../resources/Components/Password' +import link from '../../../../../../resources/link' +import { debounce } from '../../../../../../resources/utils' const navForward = async (newAccountType, accountData) => link.send('nav:forward', 'dash', { diff --git a/app/dash/Accounts/Add/index.js b/app/workspace/Spaces/Accounts/Add/index.js similarity index 98% rename from app/dash/Accounts/Add/index.js rename to app/workspace/Spaces/Accounts/Add/index.js index 39463604c..808490d1d 100644 --- a/app/dash/Accounts/Add/index.js +++ b/app/workspace/Spaces/Accounts/Add/index.js @@ -1,7 +1,7 @@ import React from 'react' import Restore from 'react-restore' import { Transition } from 'react-transition-group' -import svg from '../../../../resources/svg' +import svg from '../../../../../resources/svg' import AddHardware from './AddHardware' import AddHardwareLattice from './AddHardwareLattice' diff --git a/app/dash/Accounts/Add/particleWorker.js b/app/workspace/Spaces/Accounts/Add/particleWorker.js similarity index 100% rename from app/dash/Accounts/Add/particleWorker.js rename to app/workspace/Spaces/Accounts/Add/particleWorker.js diff --git a/app/dash/Accounts/Add/style/index.styl b/app/workspace/Spaces/Accounts/Add/style/index.styl similarity index 98% rename from app/dash/Accounts/Add/style/index.styl rename to app/workspace/Spaces/Accounts/Add/style/index.styl index 4b16c195a..56061bc51 100644 --- a/app/dash/Accounts/Add/style/index.styl +++ b/app/workspace/Spaces/Accounts/Add/style/index.styl @@ -40,7 +40,7 @@ align-items center font-size 11px letter-spacing 1px - font-weight 300 + font-weight 400 padding-bottom 1px padding-left 1px text-transform uppercase @@ -61,7 +61,7 @@ align-items center font-size 22px font-family 'MainFont' - font-weight 300 + font-weight 400 width 100% margin 16px 0px @@ -115,7 +115,7 @@ text-align center box-sizing border-box position absolute - font-weight 400 + font-weight 500 top 80px left 50px right 50px @@ -135,7 +135,7 @@ min-height 22px box-sizing border-box position absolute - font-weight 400 + font-weight 500 bottom 20px left 20px right 20px @@ -191,7 +191,7 @@ margin-top 12px transition var(--standardSlow) overflow hidden - font-weight 400 + font-weight 500 flex-direction column overflow-y scroll @@ -207,7 +207,7 @@ background rgba(5, 25, 35, 0.1) .addAccountItemDeviceTitle - font-weight 300 + font-weight 400 text-align center .addAccountItemDeviceStatus @@ -228,7 +228,7 @@ text-transform uppercase transition var(--standardSlow) overflow hidden - font-weight 400 + font-weight 500 .addAccountItemOptionSetup position absolute @@ -267,7 +267,7 @@ margin-bottom 12px text-align center font-size 15px - font-weight 400 + font-weight 500 box-sizing border-box .addAccountItemOptionError @@ -329,7 +329,7 @@ padding 16px 8px 16px 8px margin-left -3px margin 10px - font-weight 300 + font-weight 400 cursor pointer border-radius 8px background var(--ghostB) @@ -348,7 +348,7 @@ padding 2px 3px 0px 3px .actingAccountTag - font-weight 400 + font-weight 500 font-size 12px text-transform none color var(--outerspace08) @@ -405,7 +405,7 @@ text-align center font-size 22px line-height 20px - font-weight 400 + font-weight 500 display flex justify-content center align-items center @@ -434,7 +434,7 @@ text-align center font-size 8px width 100% - font-weight 300 + font-weight 400 letter-spacing 1px box-sizing border-box diff --git a/app/dash/Signer/ReloadSignerButton/index.jsx b/app/workspace/Spaces/Accounts/Signer/ReloadSignerButton/index.jsx similarity index 81% rename from app/dash/Signer/ReloadSignerButton/index.jsx rename to app/workspace/Spaces/Accounts/Signer/ReloadSignerButton/index.jsx index 82979dc5f..db2820d60 100644 --- a/app/dash/Signer/ReloadSignerButton/index.jsx +++ b/app/workspace/Spaces/Accounts/Signer/ReloadSignerButton/index.jsx @@ -1,4 +1,4 @@ -import link from '../../../../resources/link' +import link from '../../../../../../resources/link' const ReloadSignerButton = ({ id }) => (