-
-
{
- 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 (
-
- )
- }
-
- 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 (
-
- )
- }
-
- 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 (
-
- )
- }
-
- 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 (
-
- )
- } else {
- if (ensName && !showLocal) {
- return (
-
- )
- }
- }
- }
-
- 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' ? (
-
- >
- )
- }
-
- 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 (
-
- )
- }
-}
-
-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 (
-
- )
- }
-
- 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 }) => (
s)
- const { showAddAccounts } = this.props.data
+ const { showAddAccounts, view } = this.props.data
return showAddAccounts ? (
@@ -177,8 +179,8 @@ class Dash extends React.Component {
}
{...this.props}
/>
- ) : (
-
+ ) : view === 'signers' ? (
+
{/*
@@ -202,6 +204,8 @@ class Dash extends React.Component {
+ ) : (
+
)
}
}
diff --git a/app/dash/Chains/Chain/ChainExpanded/index.js b/app/workspace/Spaces/Chains/Chain/ChainExpanded/index.js
similarity index 96%
rename from app/dash/Chains/Chain/ChainExpanded/index.js
rename to app/workspace/Spaces/Chains/Chain/ChainExpanded/index.js
index 0f702eeb6..22713dfa9 100644
--- a/app/dash/Chains/Chain/ChainExpanded/index.js
+++ b/app/workspace/Spaces/Chains/Chain/ChainExpanded/index.js
@@ -1,7 +1,7 @@
import { useState, useEffect } from 'react'
-import link from '../../../../../resources/link'
-import { Cluster } from '../../../../../resources/Components/Cluster'
+import link from '../../../../../../resources/link'
+import { Cluster } from '../../../../../../resources/Components/Cluster'
import Connection from '../Connection'
import {
diff --git a/app/dash/Chains/Chain/ChainNew/index.js b/app/workspace/Spaces/Chains/Chain/ChainNew/index.js
similarity index 99%
rename from app/dash/Chains/Chain/ChainNew/index.js
rename to app/workspace/Spaces/Chains/Chain/ChainNew/index.js
index 971220703..0ca9e51f8 100644
--- a/app/dash/Chains/Chain/ChainNew/index.js
+++ b/app/workspace/Spaces/Chains/Chain/ChainNew/index.js
@@ -1,7 +1,7 @@
import { useState } from 'react'
import chainDefault from '../chainDefault'
-import link from '../../../../../resources/link'
+import link from '../../../../../../resources/link'
import {
ChainHeader,
EditChainColor,
diff --git a/app/dash/Chains/Chain/ChainPreview/index.js b/app/workspace/Spaces/Chains/Chain/ChainPreview/index.js
similarity index 81%
rename from app/dash/Chains/Chain/ChainPreview/index.js
rename to app/workspace/Spaces/Chains/Chain/ChainPreview/index.js
index 189189539..9717ebff0 100644
--- a/app/dash/Chains/Chain/ChainPreview/index.js
+++ b/app/workspace/Spaces/Chains/Chain/ChainPreview/index.js
@@ -1,7 +1,7 @@
import { ChainHeader } from '../Components'
import Connection from '../Connection'
-import Gas from '../../../../../resources/Components/Monitor'
-import { ClusterBox, Cluster } from '../../../../../resources/Components/Cluster'
+import Gas from '../../../../../../resources/Components/Monitor'
+import { ClusterBox, Cluster } from '../../../../../../resources/Components/Cluster'
const ChainPreview = (props) => {
const { type, id, primaryColor, icon, name, on } = props
diff --git a/app/dash/Chains/Chain/Components/index.js b/app/workspace/Spaces/Chains/Chain/Components/index.js
similarity index 96%
rename from app/dash/Chains/Chain/Components/index.js
rename to app/workspace/Spaces/Chains/Chain/Components/index.js
index 78af52a17..dc11ff7bc 100644
--- a/app/dash/Chains/Chain/Components/index.js
+++ b/app/workspace/Spaces/Chains/Chain/Components/index.js
@@ -1,9 +1,9 @@
import { useState } from 'react'
-import link from '../../../../../resources/link'
-import svg from '../../../../../resources/svg'
-import RingIcon from '../../../../../resources/Components/RingIcon'
-import { chainUsesEth } from '../../../../../resources/utils/chains'
+import link from '../../../../../../resources/link'
+import svg from '../../../../../../resources/svg'
+import RingIcon from '../../../../../../resources/Components/RingIcon'
+import { chainUsesEth } from '../../../../../../resources/utils/chains'
import chainDefault from '../chainDefault'
diff --git a/app/dash/Chains/Chain/Connection/index.js b/app/workspace/Spaces/Chains/Chain/Connection/index.js
similarity index 95%
rename from app/dash/Chains/Chain/Connection/index.js
rename to app/workspace/Spaces/Chains/Chain/Connection/index.js
index 936e540f4..ee19a2d04 100644
--- a/app/dash/Chains/Chain/Connection/index.js
+++ b/app/workspace/Spaces/Chains/Chain/Connection/index.js
@@ -1,14 +1,14 @@
import React, { createRef } from 'react'
import Restore from 'react-restore'
-import Dropdown from '../../../../../resources/Components/Dropdown'
-import { ClusterRow, ClusterValue } from '../../../../../resources/Components/Cluster'
-import { isInvalidCustomTarget } from '../../../../../resources/connections'
-import { capitalize } from '../../../../../resources/utils'
-
-import link from '../../../../../resources/link'
-import svg from '../../../../../resources/svg'
-import { NETWORK_PRESETS } from '../../../../../resources/constants'
+import Dropdown from '../../../../../../resources/Components/Dropdown'
+import { ClusterRow, ClusterValue } from '../../../../../../resources/Components/Cluster'
+import { isInvalidCustomTarget } from '../../../../../../resources/connections'
+import { capitalize } from '../../../../../../resources/utils'
+
+import link from '../../../../../../resources/link'
+import svg from '../../../../../../resources/svg'
+import { NETWORK_PRESETS } from '../../../../../../resources/constants'
function mapToPreset(chainId, key) {
return { text: key, value: `ethereum:${chainId}:${key}` }
diff --git a/app/dash/Chains/Chain/chainDefault.js b/app/workspace/Spaces/Chains/Chain/chainDefault.js
similarity index 100%
rename from app/dash/Chains/Chain/chainDefault.js
rename to app/workspace/Spaces/Chains/Chain/chainDefault.js
diff --git a/app/dash/Chains/Chain/index.js b/app/workspace/Spaces/Chains/Chain/index.js
similarity index 100%
rename from app/dash/Chains/Chain/index.js
rename to app/workspace/Spaces/Chains/Chain/index.js
diff --git a/app/dash/Chains/Chain/style/index.styl b/app/workspace/Spaces/Chains/Chain/style/index.styl
similarity index 97%
rename from app/dash/Chains/Chain/style/index.styl
rename to app/workspace/Spaces/Chains/Chain/style/index.styl
index 01656c435..8067189f9 100644
--- a/app/dash/Chains/Chain/style/index.styl
+++ b/app/workspace/Spaces/Chains/Chain/style/index.styl
@@ -1,7 +1,7 @@
.addChainTitle
padding 42px
font-size 24px
- font-weight 300
+ font-weight 400
.addChain
font-size 16px
@@ -83,7 +83,7 @@
border-radius 20px
font-family 'MainFont'
padding 16px
- font-weight 300
+ font-weight 400
color var(--outerspace)
margin-top 5px
@@ -93,7 +93,7 @@
.chainInputLabel
font-size 10px
text-transform uppercase
- font-weight 500
+ font-weight 600
padding 8px 0px 4px 16px
letter-spacing 1px
@@ -143,7 +143,7 @@
padding 8px 3px 8px 17px
margin 8px auto 16px auto
font-size 11px
- font-weight 500
+ font-weight 600
display flex
align-items center
justify-content space-between
diff --git a/app/dash/Tokens/AddToken/index.js b/app/workspace/Spaces/Chains/Tokens/AddToken/index.js
similarity index 97%
rename from app/dash/Tokens/AddToken/index.js
rename to app/workspace/Spaces/Chains/Tokens/AddToken/index.js
index 77814c5e7..89dab0788 100644
--- a/app/dash/Tokens/AddToken/index.js
+++ b/app/workspace/Spaces/Chains/Tokens/AddToken/index.js
@@ -1,11 +1,11 @@
import { isValidAddress } from '@ethereumjs/util'
import { Component, useEffect, useRef, useState } from 'react'
import Restore from 'react-restore'
-import RingIcon from '../../../../resources/Components/RingIcon'
-import { chainUsesEth } from '../../../../resources/utils/chains'
-import { displayName } from '../../../../resources/utils'
-import link from '../../../../resources/link'
-import svg from '../../../../resources/svg'
+import RingIcon from '../../../../../../resources/Components/RingIcon'
+import { chainUsesEth } from '../../../../../../resources/utils/chains'
+import { displayName } from '../../../../../../resources/utils'
+import link from '../../../../../../resources/link'
+import svg from '../../../../../../resources/svg'
const ERRORS = {
invalidFormat: 'INVALID CONTRACT ADDRESS',
diff --git a/app/dash/Tokens/AddToken/style/index.styl b/app/workspace/Spaces/Chains/Tokens/AddToken/style/index.styl
similarity index 94%
rename from app/dash/Tokens/AddToken/style/index.styl
rename to app/workspace/Spaces/Chains/Tokens/AddToken/style/index.styl
index 94a455ae6..24f95d743 100644
--- a/app/dash/Tokens/AddToken/style/index.styl
+++ b/app/workspace/Spaces/Chains/Tokens/AddToken/style/index.styl
@@ -7,7 +7,7 @@
.addTokenTitle
padding 40px 0px 60px 0px
font-size 24px
- font-weight 300
+ font-weight 400
.addToken
font-size 16px
@@ -36,7 +36,7 @@
.newTokenErrorTitle
text-align center
font-size 14px
- font-weight 300
+ font-weight 400
box-sizing border-box
margin-bottom 20px
@@ -52,14 +52,14 @@
.newTokenChainSelectSubtitle
margin-top 3px
font-size 10px
- font-weight 300
+ font-weight 400
text-transform uppercase
.newTokenChainSelectFooter
margin-top 40px
margin-bottom: 40px
font-size 10px
- font-weight 300
+ font-weight 400
text-align: center
text-transform uppercase
@@ -123,7 +123,7 @@
background var(--ghostA)
border-radius 20px
padding 23px 3px 20px 3px
- font-weight 300
+ font-weight 400
color var(--outerspace)
&.dropdown
@@ -133,24 +133,24 @@
.tokenInputLabel
font-size 12px
text-transform uppercase
- font-weight 300
+ font-weight 400
input
margin-bottom 5px
.tokenInputDim
font-size 16px !important
- font-weight 300 !important
+ font-weight 400 !important
color var(--outerspace03)
.tokenInputAddress
font-family 'FiraCode'
- font-weight 300
+ font-weight 400
font-size 14px
.tokenSetAddress
font-size 13px
text-transform uppercase
- font-weight 300
+ font-weight 400
padding 10px 50px
background var(--ghostA)
border-radius 12px
@@ -165,7 +165,7 @@
margin auto
height 64px
border-radius 20px
- font-weight 300
+ font-weight 400
box-sizing border-box
padding 12px 24px
text-align center
diff --git a/app/dash/Tokens/CustomTokens/index.js b/app/workspace/Spaces/Chains/Tokens/CustomTokens/index.js
similarity index 94%
rename from app/dash/Tokens/CustomTokens/index.js
rename to app/workspace/Spaces/Chains/Tokens/CustomTokens/index.js
index b663e7016..2354dbc35 100644
--- a/app/dash/Tokens/CustomTokens/index.js
+++ b/app/workspace/Spaces/Chains/Tokens/CustomTokens/index.js
@@ -1,11 +1,11 @@
import React from 'react'
import Restore from 'react-restore'
-import svg from '../../../../resources/svg'
-import link from '../../../../resources/link'
+import svg from '../../../../../../resources/svg'
+import link from '../../../../../../resources/link'
-import RingIcon from '../../../../resources/Components/RingIcon'
-import { NATIVE_CURRENCY } from '../../../../resources/constants'
-import { chainUsesEth } from '../../../../resources/utils/chains'
+import RingIcon from '../../../../../../resources/Components/RingIcon'
+import { NATIVE_CURRENCY } from '../../../../../../resources/constants'
+import { chainUsesEth } from '../../../../../../resources/utils/chains'
class CustomTokens extends React.Component {
constructor(props, context) {
diff --git a/app/dash/Tokens/CustomTokens/style/index.styl b/app/workspace/Spaces/Chains/Tokens/CustomTokens/style/index.styl
similarity index 83%
rename from app/dash/Tokens/CustomTokens/style/index.styl
rename to app/workspace/Spaces/Chains/Tokens/CustomTokens/style/index.styl
index 9758da01f..61ddd319c 100644
--- a/app/dash/Tokens/CustomTokens/style/index.styl
+++ b/app/workspace/Spaces/Chains/Tokens/CustomTokens/style/index.styl
@@ -2,7 +2,7 @@
.customTokensTitle
font-size 16px
- font-weight 300
+ font-weight 400
height 47px
display flex
justify-content space-between
@@ -21,7 +21,7 @@
font-size 11px
padding 0px 12px
letter-spacing 1px
- font-weight 300
+ font-weight 400
text-transform uppercase
cursor pointer
*
@@ -38,7 +38,7 @@
height 64px
font-family 'MainFont'
font-size 20px
- font-weight 400
+ font-weight 500
display flex
justify-content center
align-items center
@@ -62,7 +62,7 @@
bottom 0px
display flex
font-size 16px
- font-weight 300
+ font-weight 400
justify-content center
align-items center
text-transform uppercase
@@ -114,7 +114,36 @@
justify-content center
align-items center
font-family 'MainFont'
- font-weight 300
+ font-weight 400
+
+ img:before
+ content attr(alt)
+ top 0
+ bottom 0
+ left 0
+ right 0
+ border-radius 13px
+ position absolute
+ background var(--outerspace)
+ color var(--ghostD)
+ display flex
+ justify-content center
+ align-items center
+ font-size 11px
+ font-weight 400
+ letter-spacing -0.5px
+ margin-left -0.5px
+ top -0.5px
+
+ img
+ position relative
+ height 28px
+ width 28px
+ border-radius 20px
+ margin-right 12px
+ border 2px solid var(--ghostC)
+ background var(--ghostC)
+ overflow hidden
.customTokensListItemText
display flex
@@ -124,7 +153,7 @@
margin-left 12px
.customTokensListItemSymbol
- font-weight 300
+ font-weight 400
margin-bottom 1px
margin-top 2px
font-size 16px
@@ -134,12 +163,12 @@
.customTokensListItemSub
// margin-left 5px
- font-weight 300
+ font-weight 400
margin-top 4px
margin-bottom 1px
margin-left 0px
font-size 12px
- font-weight 300
+ font-weight 400
font-family 'MainFont'
color var(--outerspace05)
line-height 12px
@@ -149,15 +178,15 @@
justify-content center
align-items center
font-size 18px
- font-weight 400
+ font-weight 500
.customTokensListItemChainLabel
font-size 10px
text-transform uppercase
margin 0px 5px 0px 1px
- font-weight 300
+ font-weight 400
margin-top 1px
- font-weight 300
+ font-weight 400
.customTokensListItemAddress
display flex
@@ -218,4 +247,4 @@
justify-content center
align-items center
font-size 18px
- font-weight 400
+ font-weight 500
diff --git a/app/dash/Tokens/index.js b/app/workspace/Spaces/Chains/Tokens/index.js
similarity index 100%
rename from app/dash/Tokens/index.js
rename to app/workspace/Spaces/Chains/Tokens/index.js
diff --git a/app/dash/Tokens/style/index.styl b/app/workspace/Spaces/Chains/Tokens/style/index.styl
similarity index 100%
rename from app/dash/Tokens/style/index.styl
rename to app/workspace/Spaces/Chains/Tokens/style/index.styl
diff --git a/app/dash/Chains/index.js b/app/workspace/Spaces/Chains/index.js
similarity index 93%
rename from app/dash/Chains/index.js
rename to app/workspace/Spaces/Chains/index.js
index ba277b93d..c41f10687 100644
--- a/app/dash/Chains/index.js
+++ b/app/workspace/Spaces/Chains/index.js
@@ -2,7 +2,8 @@ import React from 'react'
import Restore from 'react-restore'
import Chain from './Chain'
-import link from '../../../resources/link'
+import Tokens from './Tokens'
+import link from '../../../../resources/link'
class Settings extends React.Component {
constructor(props, context) {
@@ -38,18 +39,6 @@ class Settings extends React.Component {
}
}
- discord() {
- return (
-
link.send('tray:openExternal', 'https://discord.gg/UH7NGqY')}
- >
-
Need help?
-
Join our Discord!
-
- )
- }
-
quit() {
return (
@@ -121,16 +110,19 @@ class Settings extends React.Component {
})
})
+ // TODO: add toeksn into the chain module
return (
-
+
{this.renderConnections()}
{this.renderConnections(true)}
- {this.discord()}
+ {/*
+
+
*/}
)
}
@@ -188,6 +180,7 @@ class Settings extends React.Component {
render() {
const { selectedChain, newChain } = this.props.data
+
if (selectedChain) {
return this.renderChain(selectedChain)
} else if (newChain) {
diff --git a/app/dash/Chains/style/index.styl b/app/workspace/Spaces/Chains/style/index.styl
similarity index 98%
rename from app/dash/Chains/style/index.styl
rename to app/workspace/Spaces/Chains/style/index.styl
index 29d234402..0c6f3fc9e 100644
--- a/app/dash/Chains/style/index.styl
+++ b/app/workspace/Spaces/Chains/style/index.styl
@@ -43,7 +43,7 @@
// bottom 1px
// font-size 18px
// text-align left
- // font-weight 300
+ // font-weight 400
// padding-left 0px
// font-family 'MainFont'
// display flex
@@ -102,7 +102,7 @@
background transparent
text-align center
font-size 16px
- font-weight 300
+ font-weight 400
color var(--outerspace)
font-family 'MainFont'
@@ -136,7 +136,7 @@
input
font-size 22px
text-align left
- font-weight 300
+ font-weight 400
.phaseNetworkSymbol
position absolute
@@ -181,7 +181,7 @@
z-index 9999999
border-radius 13px
height 26px
- font-weight 300
+ font-weight 400
width 26px
font-size 23px
text-transform uppercase
@@ -236,7 +236,7 @@
align-items flex-start
height 30px
font-size 26px
- font-weight 300
+ font-weight 400
padding 0px 17px 17px 17px
margin 67px 0px 0px 0px
@@ -281,17 +281,19 @@
cursor pointer
.discordInvite
- margin 30px 8px 30px 8px
+ margin 16px 8px
font-size 13px
- font-weight 300
+ font-weight 400
border-radius 20px
display flex
justify-content center
align-items center
width calc(100% - 16px)
+ cursor pointer
+ background var(--ghostA)
.discordLink
- font-weight 300
+ font-weight 400
padding-left 5px
transition var(--standardFast)
transform translateY(0px)
@@ -320,7 +322,7 @@
padding 8px 16px
letter-spacing 1px
margin-left -1px
- font-weight 300
+ font-weight 400
color var(--outerspace08)
.infoContainer
@@ -328,7 +330,7 @@
margin 10px 10px 12px 10px
border-radius 12px
font-size 14px
- font-weight 300
+ font-weight 400
.chainCurrencyItem
@@ -340,13 +342,13 @@
.chainCurrencyItemSymbol, .sliceChainIdNumber
font-size 13px
- font-weight 400
+ font-weight 500
.chainCurrencyItemAt
margin -2px 8px 0px 8px
color var(--good)
font-size 12px
- font-weight 400
+ font-weight 500
.sliceContainer
background var(--ghostZ)
@@ -355,7 +357,7 @@
border-radius 20px
padding 3px 0px 3px 0px
font-size 14px
- font-weight 300
+ font-weight 400
.sliceContainerClose
cursor pointer
@@ -391,7 +393,7 @@
height 64px
box-sizing border-box
font-size 12px
- font-weight 300
+ font-weight 400
*
pointer-events none
@@ -419,7 +421,7 @@
color var(--outerspace)
text-transform uppercase
font-size 14px
- font-weight 400
+ font-weight 500
letter-spacing 1px
.sliceTileBlock
@@ -428,7 +430,7 @@
padding-right 11px
font-family 'FiraCode'
font-size 14px
- font-weight 300
+ font-weight 400
position relative
top 1px
bottom 0px
@@ -574,7 +576,7 @@
text-transform uppercase
font-size 11px
letter-spacing 1px
- font-weight 400
+ font-weight 500
// margin 0px -15px -15px -15px
// padding 0px 15px 15px 15px
z-index 40
@@ -648,7 +650,7 @@
.appInfo
font-size 14px
- font-weight 300
+ font-weight 400
transition var(--standard)
transform translateZ(0)
z-index 20
@@ -686,7 +688,7 @@
text-align center
font-size 11px
text-transform uppercase
- font-weight 400
+ font-weight 500
letter-spacing 1px
margin-top 24px
color var(--outerspace06)
@@ -702,7 +704,7 @@
text-align center
font-size 11px
text-transform uppercase
- font-weight 400
+ font-weight 500
letter-spacing 1px
line-height 30px
@@ -771,7 +773,7 @@
font-size 16px
background transparent
padding 10px
- font-weight 300
+ font-weight 400
color var(--outerspace)
.connectionCustomInputOn
@@ -872,7 +874,7 @@
font-size 10px
text-transform uppercase
letter-spacing 2px
- font-weight 500
+ font-weight 600
color var(--outerspace)
.networkBreak:first-child
@@ -890,7 +892,7 @@
padding 15px
box-sizing border-box
text-transform uppercase
- font-weight 400
+ font-weight 500
letter-spacing 2px
cursor pointer
*
@@ -928,7 +930,7 @@
border-radius 8px
box-sizing border-box
font-size 13px
- font-weight 400
+ font-weight 500
.chainConfigRow:last-child
margin-bottom 0px
diff --git a/app/workspace/Spaces/Command/Dock/index.js b/app/workspace/Spaces/Command/Dock/index.js
new file mode 100644
index 000000000..cdd46dd97
--- /dev/null
+++ b/app/workspace/Spaces/Command/Dock/index.js
@@ -0,0 +1,89 @@
+import svg from '../../../../../resources/svg'
+import styled from 'styled-components'
+import link from '../../../../../resources/link'
+
+const Dock = styled.div`
+ position: fixed;
+ height: 64px;
+ bottom: 16px;
+ border-radius: 16px;
+ background: var(--ghostA);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ padding: 0px 8px;
+`
+
+const DappRow = styled.div`
+ display: flex;
+ align-items: center;
+ justify-content: center;
+`
+
+const DappIcon = styled.div`
+ width: 42px;
+ height: 42px;
+ margin: 16px 4px;
+ border-radius: 16px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ background: var(--ghostB);
+ border-radius: 8px;
+
+ * {
+ pointer-events: none;
+ }
+
+ &:hover {
+ background: var(--ghostC);
+ transform: scale(1.2);
+ transition: transform 0.2s ease-in-out;
+ }
+`
+
+const DappIconBreak = styled.div`
+ width: 3px;
+ height: 42px;
+ background: var(--ghostZ);
+ border-radius: 1.5px;
+ margin: 0px 8px;
+`
+
+export default () => {
+ return (
+
+ {
+ // updateNavData
+ link.send('workspace:nav:update:data', window.frameId, { station: 'command' })
+ }}
+ >
+ {'C'}
+
+ {
+ // updateNavData
+ link.send('workspace:nav:update:data', window.frameId, { station: 'dashboard' })
+ }}
+ >
+ {'D'}
+
+
+ {
+ link.send('workspace:nav:update:data', window.frameId, { station: 'dapp' })
+ link.send('workspace:run', 'dapp', {}, ['send.frame.eth'])
+ }}
+ >
+ {svg.send(15)}
+
+ {'-'}
+ {'-'}
+ {'-'}
+ {'-'}
+ {'-'}
+
+ )
+}
diff --git a/app/workspace/Spaces/Command/index.js b/app/workspace/Spaces/Command/index.js
new file mode 100644
index 000000000..28dd7e83b
--- /dev/null
+++ b/app/workspace/Spaces/Command/index.js
@@ -0,0 +1,181 @@
+import styled from 'styled-components'
+import svg from '../../../../resources/svg'
+import link from '../../../../resources/link'
+import React from 'react'
+
+import { Cluster, ClusterRow, ClusterValue } from '../../../../resources/Components/Cluster'
+
+const Container = styled.div`
+ position: relative;
+ display: flex;
+ flex-direction: row;
+ margin: auto auto;
+ width: 900px;
+ padding-left: 64px;
+`
+
+const MainButton = styled.div`
+ height: 64px;
+ width: 348px;
+ border-radius: 16px;
+ background: var(--ghostAZ);
+ cursor: pointer;
+ /* background: linear-gradient(170deg, #211d23, #1c181e);
+ box-shadow: 6px 6px 12px #1a171c, -6px -6px 12px #241f26; */
+ /* box-shadow: 20px 20px 60px #1e1a21, -20px -20px 60px #28242d; */
+ /* box-shadow: 4px 4px 6px var(--ghostA), -4px -4px 6px var(--ghostC); */
+ /* box-shadow: -6px 6px 12px var(--ghostA), 5px -5px 12px #ffffff, inset -6px 6px 12px var(--ghostC),
+ inset -5px -5px 14px rgba(255, 255, 255, 0.15); */
+ &:hover {
+ background: var(--ghostA);
+ }
+`
+
+class Settings extends React.Component {
+ constructor(...args) {
+ super(...args)
+ this.state = {
+ expand: false,
+ name: '',
+ showMore: false,
+ newName: '',
+ editName: false
+ }
+ }
+ render() {
+ return (
+
+
+
+ <>
+ {this.state.editName ? (
+
+
+
+
+ {
+ this.setState({ name: e.target.value })
+ link.send('tray:renameAccount', this.props.account, e.target.value)
+ }}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter') {
+ this.setState({ editName: false })
+ }
+ }}
+ />
+
+
+
+
+ ) : (
+
+ {
+ this.setState({ editName: true })
+ }}
+ >
+ {'Update Name'}
+
+
+ )}
+
+ {
+ link.rpc('removeAccount', this.props.account, {}, () => {})
+ }}
+ style={
+ this.state.editName
+ ? {
+ opacity: 0.3,
+ pointerEvents: 'none',
+ color: 'var(--bad)'
+ }
+ : {
+ opacity: 1,
+ color: 'var(--bad)'
+ }
+ }
+ >
+ {'Remove Account'}
+
+
+ >
+
+
+
+ )
+ }
+}
+
+const HomeCenter = styled.div`
+ height: 400px;
+ width: 65%;
+ min-height: 100%;
+ border-radius: 16px;
+`
+const HomeRight = styled.div`
+ width: 35%;
+ min-height: 550px;
+ border-radius: 16px;
+ background: var(--ghostA);
+ margin-left: 16px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+`
+const CommandBar = styled.div`
+ height: 64px;
+ width: 100%;
+ border-radius: 16px;
+ background: var(--ghostA);
+ margin-bottom: 16px;
+`
+const Portfolio = styled.div`
+ height: 200px;
+ width: 100%;
+ border-radius: 16px;
+ background: var(--ghostA);
+ margin-bottom: 16px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+`
+
+const AssetList = styled.div`
+ height: 200px;
+ width: 100%;
+ border-radius: 16px;
+ background: var(--ghostA);
+ margin-bottom: 16px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+`
+
+const Home = ({ data }) => (
+
+ {data.station === 'command' ? (
+
+ ) : data.station === 'dashboard' ? (
+ <>
+
+ Value
+ Assets
+ Inventory
+
+
+ {'Account activity'}
+
+ >
+ ) : (
+ {JSON.stringify(data, null, 4)}
+ )}
+
+)
+
+export default Home
diff --git a/app/dash/Dapps/DappDetails/index.js b/app/workspace/Spaces/Dapps/DappDetails/index.js
similarity index 90%
rename from app/dash/Dapps/DappDetails/index.js
rename to app/workspace/Spaces/Dapps/DappDetails/index.js
index ca9a9653f..5e2fd3fc3 100644
--- a/app/dash/Dapps/DappDetails/index.js
+++ b/app/workspace/Spaces/Dapps/DappDetails/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 { chainUsesEth } from '../../../../resources/utils/chains'
-import { displayName } from '../../../../resources/utils'
-import svg from '../../../../resources/svg'
+import link from '../../../../../resources/link'
+import RingIcon from '../../../../../resources/Components/RingIcon'
+import { chainUsesEth } from '../../../../../resources/utils/chains'
+import { displayName } from '../../../../../resources/utils'
+import svg from '../../../../../resources/svg'
class DappDetails extends React.Component {
updateOriginChain() {
diff --git a/app/dash/Dapps/index.js b/app/workspace/Spaces/Dapps/index.js
similarity index 92%
rename from app/dash/Dapps/index.js
rename to app/workspace/Spaces/Dapps/index.js
index 26486ebb4..f5470a0da 100644
--- a/app/dash/Dapps/index.js
+++ b/app/workspace/Spaces/Dapps/index.js
@@ -1,12 +1,12 @@
import React, { createRef } from 'react'
import Restore from 'react-restore'
-import link from '../../../resources/link'
-import { isNetworkConnected, isNetworkEnabled } from '../../../resources/utils/chains'
-import { chainUsesEth } from '../../../resources/utils/chains'
-import { displayName } from '../../../resources/utils'
-// import svg from '../../../resources/svg'
+import link from '../../../../resources/link'
+import { isNetworkConnected, isNetworkEnabled } from '../../../../resources/utils/chains'
+import { chainUsesEth } from '../../../../resources/utils/chains'
+import { displayName } from '../../../../resources/utils'
+// import svg from '../../../../resources/svg'
-import RingIcon from '../../../resources/Components/RingIcon'
+import RingIcon from '../../../../resources/Components/RingIcon'
import DappDetails from './DappDetails'
@@ -184,7 +184,7 @@ class Dapps extends React.Component {
return
} else {
return (
-
+
{enabledChains.map((chain) => {
const chainOrigins = getOriginsForChain(chain, origins)
const { primaryColor, icon } = this.store('main.networksMeta.ethereum', chain.id)
diff --git a/app/dash/Dapps/style/index.styl b/app/workspace/Spaces/Dapps/style/index.styl
similarity index 97%
rename from app/dash/Dapps/style/index.styl
rename to app/workspace/Spaces/Dapps/style/index.styl
index c98e4fe47..c126bbcc7 100644
--- a/app/dash/Dapps/style/index.styl
+++ b/app/workspace/Spaces/Dapps/style/index.styl
@@ -6,7 +6,7 @@
justify-content center
align-items center
text-transform uppercase
- font-weight 400
+ font-weight 500
.sliceTileUsageCount
font-size 17px
@@ -25,7 +25,7 @@
height 52px
box-sizing border-box
font-size 14px
- font-weight 400
+ font-weight 500
margin 6px
border-radius 26px
background var(--ghostA)
@@ -37,14 +37,14 @@
.sliceOriginTitle
padding 0px 48px 1px 48px
color var(--outerspace)
- font-weight 400
+ font-weight 500
width 180px
direction rtl
text-overflow ellipsis
overflow hidden
text-align left
white-space nowrap
- font-weight 300
+ font-weight 400
.sliceOrigin:hover
background var(--ghostB)
@@ -59,7 +59,7 @@
height 52px
font-size 10px
letter-spacing 2px
- font-weight 400
+ font-weight 500
margin 6px
border-radius 26px
background var(--ghostZ)
@@ -75,7 +75,7 @@
padding 5px
text-transform uppercase
font-size 10px
- font-weight 300
+ font-weight 400
color var(--good)
cursor pointer
*
@@ -125,13 +125,13 @@
margin-top 2px
font-size 8px
text-transform uppercase
- font-weight 500
+ font-weight 600
.originSwapOrigin
height 120px
width 100%
font-size 20px
- font-weight 300
+ font-weight 400
display flex
align-items center
justify-content center
@@ -145,7 +145,7 @@
justify-content center
text-transform uppercase
font-size 12px
- font-weight 500
+ font-weight 600
padding-bottom 6px
letter-spacing 1px
padding-left 1px
@@ -167,7 +167,7 @@
box-shadow 0px 2px 4px var(--ghostX)
margin-bottom 10px
font-size 18px
- font-weight 400
+ font-weight 500
border-bottom 2px solid var(--ghostZ)
transform translateY(0px)
diff --git a/app/dash/Settings/index.js b/app/workspace/Spaces/Settings/App.js
similarity index 81%
rename from app/dash/Settings/index.js
rename to app/workspace/Spaces/Settings/App.js
index f0faa3a6b..1cd6619fc 100644
--- a/app/dash/Settings/index.js
+++ b/app/workspace/Spaces/Settings/App.js
@@ -2,9 +2,9 @@ import Restore from 'react-restore'
import styled from 'styled-components'
import { Component } from 'react'
-import link from '../../../resources/link'
-import Dropdown from '../../../resources/Components/Dropdown'
-import KeyboardShortcutConfigurator from '../../../resources/Components/KeyboardShortcutConfigurator'
+import link from '../../../../resources/link'
+import Dropdown from '../../../../resources/Components/Dropdown'
+import KeyboardShortcutConfigurator from '../../../../resources/Components/KeyboardShortcutConfigurator'
const EditShortcut = styled.div`
position: absolute;
@@ -39,6 +39,82 @@ class Settings extends Component {
}
}
+ 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
+
+ )}
+
+
+ )
+ }
+
inputLatticeEndpoint(e) {
e.preventDefault()
clearTimeout(this.inputLatticeTimeout)
@@ -58,6 +134,198 @@ class Settings extends Component {
return (
+
+ {'signer settings'}
+
+
+
+
Trezor Derivation
+
link.send('tray:action', 'setTrezorDerivation', value)}
+ options={[
+ { text: 'Standard', value: 'standard' },
+ { text: 'Legacy', value: 'legacy' },
+ { text: 'Testnet', value: 'testnet' }
+ ]}
+ />
+
+
{'Derivation path for connected Trezor devices'}
+
+
+
+
Ledger Derivation
+
link.send('tray:action', 'setLedgerDerivation', value)}
+ options={[
+ { text: 'Live', value: 'live' },
+ { text: 'Legacy', value: 'legacy' },
+ { text: 'Standard', value: 'standard' },
+ { text: 'Testnet', value: 'testnet' }
+ ]}
+ />
+
+
{'Derivation path for connected Ledger devices'}
+
+ {this.store('main.ledger.derivation') === 'live' ? (
+
+
+
Ledger Live Accounts
+
link.send('tray:action', 'setLiveAccountLimit', value)}
+ options={[
+ { text: '5', value: 5 },
+ { text: '10', value: 10 },
+ { text: '20', value: 20 },
+ { text: '40', value: 40 }
+ ]}
+ />
+
+
The number of live accounts to derive
+
+ ) : null}
+
+
+
Lattice Derivation
+
link.send('tray:action', 'setLatticeDerivation', value)}
+ options={[
+ { text: 'Standard', value: 'standard' },
+ { text: 'Legacy', value: 'legacy' },
+ { text: 'Live', value: 'live' }
+ ]}
+ />
+
+
{'Derivation path for connected Lattice devices'}
+
+
+
+
Lattice Accounts
+
link.send('tray:action', 'setLatticeAccountLimit', value)}
+ options={[
+ { text: '5', value: 5 },
+ { text: '10', value: 10 },
+ { text: '20', value: 20 },
+ { text: '40', value: 40 }
+ ]}
+ />
+
+
The number of lattice accounts to derive
+
+
+
+
Lattice Relay
+
{
+ link.send('tray:action', 'setLatticeEndpointMode', value)
+ this.setState({ latticeEndpointMode: value })
+ }}
+ options={[
+ { text: 'Default', value: 'default' },
+ { text: 'Custom', value: 'custom' }
+ ]}
+ />
+
+
+ this.inputLatticeEndpoint(e)}
+ />
+
+
+
+
+
+
Lock Hot Signers on
+
link.send('tray:action', 'setAccountCloseLock', value)}
+ options={[
+ { text: 'Close', value: true },
+ { text: 'Quit', value: false }
+ ]}
+ />
+
+
When should Frame relock your hot signers?
+
+
+ {' '}
+ {'appearance'}
+
+
+
+
Colorway
+
link.send('tray:action', 'setColorway', value)}
+ options={[
+ { text: 'Dark', value: 'dark' },
+ { text: 'Light', value: 'light' }
+ ]}
+ />
+
+
+ Set Frame's visual theme
+
+
+ {this.store('platform') === 'darwin' ? (
+
+
+
Display Gas in Menubar
+
+ link.send('tray:action', 'setMenubarGasPrice', !this.store('main.menubarGasPrice'))
+ }
+ >
+
+
+
+
Show mainnet gas price (Gwei) in menubar
+
+ ) : null}
+
+
+
+
Show Account Name with ENS
+
{
+ link.send('tray:action', 'toggleShowLocalNameWithENS')
+ }}
+ >
+
+
+
+
{'Show local account name when ENS is resolved'}
+
+
+
+ {' '}
+ {'windowing'}
+
@@ -166,28 +434,10 @@ class Settings extends Component {
{"Mouse to display's right edge to summon Frame"}
-
- {this.store('platform') === 'darwin' ? (
-
-
-
Display Gas in Menubar
-
- link.send('tray:action', 'setMenubarGasPrice', !this.store('main.menubarGasPrice'))
- }
- >
-
-
-
-
Show mainnet gas price (Gwei) in menubar
-
- ) : null}
-
+
+ {' '}
+ {'privacy'}
+
Error Reporting
@@ -208,168 +458,7 @@ class Settings extends Component {
Help improve Frame by anonymously reporting errors
-
-
-
-
Show Account Name with ENS
-
{
- link.send('tray:action', 'toggleShowLocalNameWithENS')
- }}
- >
-
-
-
-
{'Show local account name when ENS is resolved'}
-
-
-
-
-
Colorway
-
link.send('tray:action', 'setColorway', value)}
- options={[
- { text: 'Dark', value: 'dark' },
- { text: 'Light', value: 'light' }
- ]}
- />
-
-
- Set Frame's visual theme
-
-
-
-
-
-
Trezor Derivation
-
link.send('tray:action', 'setTrezorDerivation', value)}
- options={[
- { text: 'Standard', value: 'standard' },
- { text: 'Legacy', value: 'legacy' },
- { text: 'Testnet', value: 'testnet' }
- ]}
- />
-
-
{'Derivation path for connected Trezor devices'}
-
-
-
-
Ledger Derivation
-
link.send('tray:action', 'setLedgerDerivation', value)}
- options={[
- { text: 'Live', value: 'live' },
- { text: 'Legacy', value: 'legacy' },
- { text: 'Standard', value: 'standard' },
- { text: 'Testnet', value: 'testnet' }
- ]}
- />
-
-
{'Derivation path for connected Ledger devices'}
-
- {this.store('main.ledger.derivation') === 'live' ? (
-
-
-
Ledger Live Accounts
-
link.send('tray:action', 'setLiveAccountLimit', value)}
- options={[
- { text: '5', value: 5 },
- { text: '10', value: 10 },
- { text: '20', value: 20 },
- { text: '40', value: 40 }
- ]}
- />
-
-
The number of live accounts to derive
-
- ) : null}
-
-
-
Lattice Derivation
-
link.send('tray:action', 'setLatticeDerivation', value)}
- options={[
- { text: 'Standard', value: 'standard' },
- { text: 'Legacy', value: 'legacy' },
- { text: 'Live', value: 'live' }
- ]}
- />
-
-
{'Derivation path for connected Lattice devices'}
-
-
-
-
Lattice Accounts
-
link.send('tray:action', 'setLatticeAccountLimit', value)}
- options={[
- { text: '5', value: 5 },
- { text: '10', value: 10 },
- { text: '20', value: 20 },
- { text: '40', value: 40 }
- ]}
- />
-
-
The number of lattice accounts to derive
-
-
-
-
Lattice Relay
-
{
- link.send('tray:action', 'setLatticeEndpointMode', value)
- this.setState({ latticeEndpointMode: value })
- }}
- options={[
- { text: 'Default', value: 'default' },
- { text: 'Custom', value: 'custom' }
- ]}
- />
-
-
- this.inputLatticeEndpoint(e)}
- />
-
-
-
-
-
-
Lock Hot Signers on
-
link.send('tray:action', 'setAccountCloseLock', value)}
- options={[
- { text: 'Close', value: true },
- { text: 'Quit', value: false }
- ]}
- />
-
-
When should Frame relock your hot signers?
-
+ {this.appInfo()}
)
diff --git a/app/dash/Notify/AddToken/index.js b/app/workspace/Spaces/Settings/Notify/AddToken/index.js
similarity index 99%
rename from app/dash/Notify/AddToken/index.js
rename to app/workspace/Spaces/Settings/Notify/AddToken/index.js
index 1489630d5..f602da7c2 100644
--- a/app/dash/Notify/AddToken/index.js
+++ b/app/workspace/Spaces/Settings/Notify/AddToken/index.js
@@ -1,6 +1,6 @@
import React from 'react'
import Restore from 'react-restore'
-import link from '../../../../resources/link'
+import link from '../../../../../../resources/link'
class AddToken extends React.Component {
constructor(props, context) {
diff --git a/app/dash/Notify/index.js b/app/workspace/Spaces/Settings/Notify/index.js
similarity index 98%
rename from app/dash/Notify/index.js
rename to app/workspace/Spaces/Settings/Notify/index.js
index 1d8e2aee5..e21f48525 100644
--- a/app/dash/Notify/index.js
+++ b/app/workspace/Spaces/Settings/Notify/index.js
@@ -1,14 +1,14 @@
import React from 'react'
import Restore from 'react-restore'
-import svg from '../../../resources/svg'
-import link from '../../../resources/link'
+import svg from '../../../../../resources/svg'
+import link from '../../../../../resources/link'
import BigNumber from 'bignumber.js'
-import { usesBaseFee } from '../../../resources/domain/transaction'
+import { usesBaseFee } from '../../../../../resources/domain/transaction'
-import Confirm from '../../../resources/Components/Confirm'
+import Confirm from '../../../../../resources/Components/Confirm'
import AddToken from './AddToken'
-import frameIcon from '../../../asset/FrameIcon.png'
+import frameIcon from '../../../../../asset/FrameIcon.png'
const FEE_WARNING_THRESHOLD_USD = 50
const capitalize = (s) => s[0].toUpperCase() + s.slice(1)
diff --git a/app/dash/Notify/style/index.styl b/app/workspace/Spaces/Settings/Notify/style/index.styl
similarity index 97%
rename from app/dash/Notify/style/index.styl
rename to app/workspace/Spaces/Settings/Notify/style/index.styl
index eb007c3a7..eef919cb2 100644
--- a/app/dash/Notify/style/index.styl
+++ b/app/workspace/Spaces/Settings/Notify/style/index.styl
@@ -27,7 +27,7 @@
align-items center
text-transform uppercase
font-size 11px
- font-weight 300
+ font-weight 400
cursor pointer
background var(--ghostB)
color var(--moon)
@@ -119,7 +119,7 @@
padding 0px 0px
text-transform uppercase
font-size 16px
- font-weight 300
+ font-weight 400
font-family 'MainFont'
.notifyBodyLineUrl
@@ -136,7 +136,7 @@
border-radius 8px
margin-top 50px
font-size 13px
- font-weight 300
+ font-weight 400
.notifyBodyBlock
padding 8px
@@ -181,7 +181,7 @@
position relative
justify-content center
align-items center
- font-weight 400
+ font-weight 500
z-index 3
margin-top 16px
margin-left 8px
@@ -234,12 +234,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
*
@@ -302,11 +302,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
@@ -320,7 +320,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/dash/card.styl b/app/workspace/Spaces/Settings/card.styl
similarity index 100%
rename from app/dash/card.styl
rename to app/workspace/Spaces/Settings/card.styl
diff --git a/app/dash/index.styl b/app/workspace/Spaces/Settings/index.styl
similarity index 89%
rename from app/dash/index.styl
rename to app/workspace/Spaces/Settings/index.styl
index bbb811c6c..c7690f024 100644
--- a/app/dash/index.styl
+++ b/app/workspace/Spaces/Settings/index.styl
@@ -1,16 +1,16 @@
-html, body
- margin 0
- border 0
- font-family 'MainFont'
- font-weight 300
- -webkit-app-region no-drag
- overflow hidden
- color var(--outerspace)
- background var(--ghostY)
-
-div
- user-select none
- cursor default
+// html, body
+// margin 0
+// border 0
+// font-family 'MainFont'
+// font-weight 400
+// -webkit-app-region no-drag
+// overflow hidden
+// color var(--outerspace)
+// background var(--ghostY)
+
+// div
+// user-select none
+// cursor default
::-webkit-scrollbar
width 0px
@@ -30,11 +30,31 @@ div
.dash
width 100%
height 100%
- overflow-y scroll
- overflow-x hidden
- background var(--ghostA)
+ overflow hidden
+ // background var(--ghostA)
position relative
+ .dashLeft
+ width 300px
+ position absolute
+ top 0
+ left 0
+ bottom 0
+ overflow-y scroll
+ overflow-x hidden
+ background var(--ghostAZ)
+
+ .dashRight
+ position absolute
+ top 0
+ left 300px
+ bottom 0
+ right 0
+ overflow-y scroll
+ overflow-x hidden
+ background var(--ghostA)
+
+
.dashMain
position absolute
top 80px
@@ -74,7 +94,7 @@ div
font-size 18px
display flex
align-items center
- font-weight 400
+ font-weight 500
.originTitleIcon
margin 9px 16px
@@ -87,7 +107,7 @@ div
margin 74px 6px 7px 6px
height 38px
border-radius 20px
- font-weight 500
+ font-weight 600
box-sizing border-box
padding 18px 16px 16px 17px
text-align center
@@ -144,7 +164,7 @@ div
letter-spacing 1px
color var(--outerspace)
font-family 'MainFont'
- font-weight 400
+ font-weight 500
z-index 5
transform translateY(0px)
@@ -161,7 +181,7 @@ div
display flex
justify-content center
align-items center
- font-weight 300
+ font-weight 400
.newAccount:hover
background var(--ghostB)
@@ -204,7 +224,7 @@ div
margin-top 20px
margin-bottom 20px
font-size 14px
- font-weight 400
+ font-weight 500
height 50px
display flex
justify-content center
@@ -225,7 +245,7 @@ div
text-transform uppercase
font-size 11px
letter-spacing 1px
- font-weight 300
+ font-weight 400
padding-bottom 1px
padding-left 1px
display none
@@ -238,7 +258,7 @@ div
.accountTypeSelect
height 100px
- font-weight 400
+ font-weight 500
border-radius 27px
margin 6px 6px 8px 6px
display flex
@@ -283,7 +303,7 @@ div
font-size 12px
text-transform uppercase
letter-spacing 1px
- font-weight 400
+ font-weight 500
.noSigners
position relative
@@ -298,7 +318,7 @@ div
justify-content center
align-items center
font-size 11px
- font-weight 400
+ font-weight 500
letter-spacing 2px
text-transform uppercase
box-shadow 0px 4px 8px var(--ghostY)
diff --git a/app/dapp/DappTile/index.js b/app/workspace/Spaces/Views/DappTile/index.js
similarity index 100%
rename from app/dapp/DappTile/index.js
rename to app/workspace/Spaces/Views/DappTile/index.js
diff --git a/app/dapp/DappTile/style/index.styl b/app/workspace/Spaces/Views/DappTile/style/index.styl
similarity index 95%
rename from app/dapp/DappTile/style/index.styl
rename to app/workspace/Spaces/Views/DappTile/style/index.styl
index b0ca56f24..094771f32 100644
--- a/app/dapp/DappTile/style/index.styl
+++ b/app/workspace/Spaces/Views/DappTile/style/index.styl
@@ -23,4 +23,4 @@
.dappName
font-size 10px
text-transform uppercase
- font-weight 400
+ font-weight 500
diff --git a/app/workspace/Spaces/Views/index.js b/app/workspace/Spaces/Views/index.js
new file mode 100644
index 000000000..5eb12f35f
--- /dev/null
+++ b/app/workspace/Spaces/Views/index.js
@@ -0,0 +1,107 @@
+import React from 'react'
+import useStore from '../../../../resources/Hooks/useStore.js'
+import link from '../../../../resources/link/index.js'
+
+import styled from 'styled-components'
+
+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
+}
+
+const ViewWrap = styled.div`
+ position: absolute;
+ top: 80px;
+ left: 8px;
+ right: 8px;
+ bottom: 8px;
+ z-index: 99999999;
+ /* background: linear-gradient(135deg, var(--ghostA), var(--ghostAZ)); */
+ border: 1px solid linear-gradient(135deg, red, var(--ghostAZ));
+ background: var(--ghostAZ);
+ border-radius: 8px;
+ box-shadow: 0px 0px 16px var(--ghostY);
+`
+
+const App = ({ id }) => {
+ const dapp = useStore(`main.dapp.details.${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 = useStore('windows.workspaces', window.frameId)
+ // TODO: allow multiple views, this also needs to use meta area
+ // const { ready } = frame?.nav[0].views ? frame?.nav[0].views[0] : {}
+
+ const ready = true
+
+ // Hard code send dapp status for now
+ const sendDapp =
+ useStore('main.dapps', '0xe8d705c28f65bc3fe10df8b22f9daa265b99d0e1893b2df49fd38120f0410bca') || {}
+
+ const mainnet = useStore('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'
+
+ // TODO: sendDapp no longer has colors property after merge
+ // const bg = sendDapp.colors.background || null
+
+ return (
+ <>
+ {/*
*/}
+ {/*
+
+ {shouldDisplayError ? (
+
+ ) : (
+ !ready &&
+ )}
+
*/}
+ >
+ )
+}
+
+export default App
diff --git a/app/workspace/Workspace.js b/app/workspace/Workspace.js
new file mode 100644
index 000000000..b26c059af
--- /dev/null
+++ b/app/workspace/Workspace.js
@@ -0,0 +1,137 @@
+import styled from 'styled-components'
+import useStore from '../../resources/Hooks/useStore.js'
+
+// import link from '../../resources/link'
+
+import Overlay from '../../resources/Components/Overlay'
+import { Fluid } from '../../resources/Components/Fluid'
+
+import Command from './Spaces/Command'
+import Accounts from './Spaces/Accounts'
+import Chains from './Spaces/Chains'
+import Settings from './Spaces/Settings/App'
+import Dapps from './Spaces/Dapps'
+import Views from './Spaces/Views'
+import Onboard from '../onboard/App'
+
+import Ribbon from './Ribbon'
+
+const Splash = styled.div`
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ right: 0px;
+ bottom: 0px;
+ z-index: 0;
+ background: var(--ghostAZ);
+`
+
+const Main = styled.div`
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ bottom: 0px;
+ right: 0px;
+ color: var(--outerspace);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ -webkit-user-select: none;
+ user-select: none;
+ z-index: 9999;
+ /* border-top: 1px solid var(--ghostZ); */
+`
+
+const Space = ({ space, data }) => {
+ if (space === 'command') {
+ return
+ } else if (space === 'dapp') {
+ return (
+
+
+
+ )
+ } else if (space === 'settings') {
+ return (
+
+
+
+ )
+ } else if (space === 'onboard') {
+ return (
+
+
+
+ )
+ } else if (space === 'chains') {
+ return (
+
+
+
+ )
+ } else if (space === 'dapps') {
+ return (
+
+
+
+ )
+ } else if (space === 'accounts') {
+ return (
+
+
+
+ )
+ } else {
+ return (
+
+ {'view not found'}
+ {view}
+
{JSON.stringify(data, null, 4)}
+
+ )
+ }
+}
+
+const SpaceWrap = styled.div`
+ position: absolute;
+ top: 0px;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ margin: auto auto;
+ padding: 128px 0px;
+ overflow-y: scroll;
+ overflow-x: hidden;
+ max-width: 900px;
+`
+
+const TopHandle = styled.div`
+ position: fixed;
+ top: 0px;
+ left: 0px;
+ right: 0px;
+ height: 64px;
+ z-index: 999999999; // Top z-index
+ -webkit-app-region: drag;
+ pointer-events: none;
+`
+
+const Workspace = (props) => {
+ const frameState = useStore('windows.workspaces', frameId)
+ const nav = frameState?.nav[0] || { space: 'command', data: {} }
+ if (!nav || !nav.space) return null
+ return (
+
+
+
+
+
+
+
+
+
+
+ )
+}
+
+export default Workspace
diff --git a/app/workspace/dash/Accounts/Add/style/index.styl b/app/workspace/dash/Accounts/Add/style/index.styl
new file mode 100644
index 000000000..56061bc51
--- /dev/null
+++ b/app/workspace/dash/Accounts/Add/style/index.styl
@@ -0,0 +1,508 @@
+.addAccountItem
+ display flex
+ justify-content center
+ align-items center
+ flex-direction column
+ transition var(--standardSlowest)
+ transition-delay 0.32s
+ position relative
+ overflow hidden
+ position relative
+ position absolute
+ top 0
+ left 0
+ bottom 0
+ right 0
+
+ .addAccountItemWrap
+ width 100%
+ height 100%
+ background var(--ghostZ)
+ border-radius 4px
+ z-index 2
+ display flex
+ justify-content center
+ align-items center
+ flex-direction column
+ position relative
+
+ .addAccountItemClose
+ position absolute
+ top 18px
+ right 10px
+ border-radius 8px
+ cursor pointer
+ background var(--ghostB)
+ width 90px
+ height 30px
+ display flex
+ justify-content center
+ align-items center
+ font-size 11px
+ letter-spacing 1px
+ font-weight 400
+ padding-bottom 1px
+ padding-left 1px
+ text-transform uppercase
+
+ *
+ pointer-events none
+
+ .addAccountItemClose:hover
+ background var(--ghostC)
+
+ .addAccountItemTopType
+ position absolute
+ top 0
+ left 0
+ right 0
+ display flex
+ justify-content center
+ align-items center
+ font-size 22px
+ font-family 'MainFont'
+ font-weight 400
+ width 100%
+ margin 16px 0px
+
+ .addAccountItemIconLedger
+ position relative
+ top -2px
+
+ .addAccountItemIconTrezor
+ position relative
+ top -2px
+
+ // .addAccountItemIconHot
+ // color var(--hot)
+
+ // .addAccountItemIconMock
+ // color rgb(205, 170, 255)
+
+ .addAccountItemTopTitle
+ margin-top 0px
+ margin-left 0px
+ margin-bottom 2px
+ text-transform capitalize
+ text-shadow 0px 4px 8px var(--ghostX)
+
+ .addAccountItemIcon
+ position relative
+ height 40px
+ width 40px
+ display flex
+ justify-content center
+ align-items center
+ color var(--outerspace)
+ margin 2px 9px 2px 0px
+ border-radius 12px
+ transform scale(1)
+
+ .addAccountItemIconHex
+ width 45px
+ height 45px
+ opacity 1
+ position absolute
+ border-radius 8px
+ display none
+
+ .addAccountItemSummary
+ display flex
+ align-items center
+ justify-content center
+ z-index 9999
+ font-size 13px
+ text-align center
+ box-sizing border-box
+ position absolute
+ font-weight 500
+ top 80px
+ left 50px
+ right 50px
+ padding 16px
+ border 1px solid var(--outerspace)
+ border-radius 12px
+
+ .addAccountItemTrezorBridgeWarning
+ display flex
+ align-items center
+ justify-content space-between
+ flex-direction column
+ z-index 9999999
+ text-transform uppercase
+ letter-spacing 0px
+ text-align center
+ min-height 22px
+ box-sizing border-box
+ position absolute
+ font-weight 500
+ bottom 20px
+ left 20px
+ right 20px
+
+ .openBridgeUrl
+ color var(--good)
+ cursor pointer
+
+ .openBridgeUrl:hover
+ text-decoration underline
+ transform translateY(0)
+ transition var(--standardFast)
+
+ .addAccountItemFooter:before
+ content ''
+ position absolute
+ top 0px
+ left 8px
+ right 8px
+ height 4px
+ border-radius 2px
+ background var(--ghostA)
+
+ .addAccountItemFooter
+ display flex
+ align-items center
+ justify-content center
+ z-index 9999999
+ line-height 22px
+ font-size 11px
+ text-transform uppercase
+ letter-spacing 1px
+ text-align justify
+ text-align-last center-justify
+ min-height 50px
+ box-sizing border-box
+ position absolute
+ bottom 8px
+ left 8px
+ right 8px
+ display none
+
+ .addAccountItemDevices
+ position absolute
+ top 120px
+ left 0px
+ bottom 0px
+ right 0px
+ padding 10px
+ font-size 12px
+ text-transform uppercase
+ letter-spacing 2px
+ margin-top 12px
+ transition var(--standardSlow)
+ overflow hidden
+ font-weight 500
+ flex-direction column
+ overflow-y scroll
+
+ .addAccountItemDevice
+ margin-top 10px
+ display flex
+ justify-content center
+ align-items center
+ flex-direction column
+ padding 0px 7px
+
+ .addAccountItemDevice:hover
+ background rgba(5, 25, 35, 0.1)
+
+ .addAccountItemDeviceTitle
+ font-weight 400
+ text-align center
+
+ .addAccountItemDeviceStatus
+ font-size 10px
+ display flex
+ justify-content center
+ align-items center
+ text-align center
+
+ .addAccountItemOption
+ position absolute
+ top 150px
+ left 0
+ right 0
+ bottom 60px
+ line-height 22px
+ font-size 14px
+ text-transform uppercase
+ transition var(--standardSlow)
+ overflow hidden
+ font-weight 500
+
+ .addAccountItemOptionSetup
+ position absolute
+ top 0px
+ right 0
+ bottom 0
+ left 0
+ opacity 0
+ pointer-events none
+ transition var(--standardSlow)
+ transform translateX(0%)
+
+ .addAccountItemOptionSetupFrames
+ display flex
+ width 1000%
+ height 100%
+
+ .addAccountItemOptionSetupFrame
+ display flex
+ align-items center
+ flex-direction column
+ transition var(--standardSlow)
+ width 10%
+ overflow-y scroll
+ height 100%
+ display flex
+ justify-content center
+ align-items center
+ padding 0px 10px
+ box-sizing border-box
+
+ .signerAddressAdded
+ color var(--good)
+
+ .addAccountItemOptionTitle
+ margin-bottom 12px
+ text-align center
+ font-size 15px
+ font-weight 500
+ box-sizing border-box
+
+ .addAccountItemOptionError
+ height 34px
+ padding 0px 20px
+ margin-top 12px
+ font-size 12px
+ color var(--moon)
+ text-align center
+
+ .addAccountItemOptionProcessing
+ height 34px
+ padding 0px 20px
+ margin-top 12px
+ font-size 12px
+ text-align center
+
+ .addAccountItemOptionSubmit
+ height 32px
+ border-radius 16px
+ padding 0px 40px
+ margin-top 12px
+ display flex
+ text-align center
+ justify-content center
+ align-items center
+ cursor pointer
+ background var(--ghostA)
+ border-bottom 2px solid var(--ghostZ)
+ transform translate3d(0, 0, 0)
+ box-shadow 0px 1px 6px var(--ghostY)
+
+ .addAccountItemOptionSubmit:hover
+ background var(--ghostC)
+
+ .addAccountResolvingEns
+
+ .addAccountItemOptionSubmit
+ margin-top 28px
+
+ .addAccountItemOptionList
+ width calc(100% - 0px)
+ border-radius 4px
+ padding 50px 0px
+ height calc(100% - 60px)
+ top 20px
+ position relative
+ overflow hidden
+ box-sizing border-box
+ overflow-x hidden
+ overflow-y scroll
+
+ .fira
+ font-family 'FiraCode'
+ text-transform none
+
+ .addAccountItemOptionListItem
+ text-align center
+ padding 16px 8px 16px 8px
+ margin-left -3px
+ margin 10px
+ font-weight 400
+ cursor pointer
+ border-radius 8px
+ background var(--ghostB)
+ *
+ cursor pointer
+
+ .actingAccountAddress
+ font-family 'FiraCode'
+ font-size 20px
+ display flex
+ justify-content center
+ align-items center
+ text-transform none
+
+ svg
+ padding 2px 3px 0px 3px
+
+ .actingAccountTag
+ font-weight 500
+ font-size 12px
+ text-transform none
+ color var(--outerspace08)
+
+ .addAccountItemOptionListItem:hover
+ background var(--ghostC)
+
+ .addAccountItemOptionInput
+ width calc(100% - 40px)
+ border-radius 6px
+ height 50px
+ padding 10px
+ position relative
+ overflow hidden
+ background var(--ghostA)
+
+ textarea
+ width calc(100%)
+ background transparent
+ border none
+ outline none
+ color var(--foreverwhite)
+ text-align center
+ font-size 13px
+ line-height 20px
+ font-family 'FiraCode'
+ padding-bottom 100px
+ overflow hidden
+ margin 4px 0px 0px 3px
+
+ textarea::selection
+ background rgba(5, 25, 35, 1)
+
+ .addAccountItemOptionInput
+ width 100%
+ border-radius 16px
+ padding 0px 0px
+ position relative
+ overflow hidden
+ background var(--ghostA)
+ border-bottom 2px solid var(--ghostZ)
+ transform translate3d(0, 0, 0)
+ box-shadow 0px 2px 8px var(--ghostY)
+ color var(--outerspace)
+
+ input
+ width 100%
+ height 100%
+ padding 10px 20px 13px 21px
+ background transparent
+ border none
+ outline none
+ color var(--outerspace)
+ text-align center
+ font-size 22px
+ line-height 20px
+ font-weight 500
+ display flex
+ justify-content center
+ align-items center
+ letter-spacing 1px
+ resize none
+ transform translate3d(0, 0, 0)
+ font-family 'MainFont'
+
+ input::selection
+ background var(--moon)
+
+ .addAccountItemOptionInput.phrase
+ height 122px
+
+ // display flex
+ // justify-content center
+ // align-items center
+ // text-align center
+
+ .addAccountItemOptionSubtitle
+ position absolute
+ bottom 0
+ display flex
+ justify-content center
+ align-items center
+ text-align center
+ font-size 8px
+ width 100%
+ font-weight 400
+ letter-spacing 1px
+ box-sizing border-box
+
+ textarea
+ width 100%
+ height 100%
+ padding 10px 20px
+ background transparent
+ border none
+ outline none
+ color var(--outerspace)
+ text-align center
+ font-size 15px
+ line-height 20px
+ font-family 'FiraCode'
+ display flex
+ justify-content center
+ align-items center
+ overflow-x hidden
+ overflow-y scroll
+ resize none
+
+ textarea::selection
+ background var(--moon)
+
+ .addAccountItemOptionInput.address
+
+ input
+ font-size 12px
+ padding 10px 10px
+
+ .addAccountItemOptionInputPassword
+ height 72px
+
+ .addAccountItemColorBar
+ position absolute
+ top 0px
+ left -40px
+ right -40px
+ height 4px
+ background var(--outerspace)
+ border-radius 6px
+
+ // .addAccountItemHardware
+ // background var(--hardware)
+
+ // .addAccountItemHot
+ // background rgb(255, 150, 150)
+
+ // .addAccountItemMock
+ // background rgb(205, 170, 255)
+
+.addAccountItemAdding
+ .addAccountItemOptionIntro
+ opacity 0
+ pointer-events none
+ .addAccountItemOptionSetup
+ opacity 1
+ pointer-events auto
+
+.addAccountMainActive
+ .addAccountMainInner
+ .addAccountItem
+ opacity 1
+ transform translateY(0) scale(1)
+
+.addAccountMainActive
+ pointer-events auto
+ opacity 1
+ transform translateY(0px) scale(1) rotateY(0deg)
+ transition-delay 0.00s
diff --git a/app/workspace/dash/Chains/Chain/style/index.styl b/app/workspace/dash/Chains/Chain/style/index.styl
new file mode 100644
index 000000000..8067189f9
--- /dev/null
+++ b/app/workspace/dash/Chains/Chain/style/index.styl
@@ -0,0 +1,157 @@
+.addChainTitle
+ padding 42px
+ font-size 24px
+ font-weight 400
+
+.addChain
+ font-size 16px
+ position relative
+ z-index 3
+ word-break break-word
+ width 100%
+ box-sizing border-box
+ padding-bottom 32px
+
+.chainColorSwatches
+ display flex
+ margin-top 4px
+ margin-bottom 4px
+ background var(--ghostZ)
+ border-radius 16px
+ padding 3px
+
+ .chainColorSwatch
+ height 16px
+ width calc(100% / 8)
+ margin-left 3px
+ border-radius 3px
+ cursor pointer
+ // box-shadow 0px 2px 4px var(--ghostX)
+ box-sizing border-box
+ position relative
+
+ .chainColorSwatch:hover
+ transform translateY(-1px)
+ box-shadow 0px 4px 8px var(--ghostX)
+ position relative
+ z-index 100
+ margin-bottom -1px
+
+ // .chainColorSwatch:active
+ // transform translateY(0px)
+ // box-shadow 0px 1px 2px var(--ghostX)
+
+ .chainColorSwatch:first-child
+ border-top-left-radius 12px
+ border-bottom-left-radius 12px
+ margin-left 0px
+
+ .chainColorSwatch:last-child
+ border-top-right-radius 12px
+ border-bottom-right-radius 12px
+
+ .chainColorSwatchSelected::before
+ content ''
+ position absolute
+ width 5px
+ height 5px
+ border-radius 2.5px
+ top 50%
+ left 50%
+ margin-top -2.5px
+ margin-left -2.5px
+ background var(--ghostZ)
+ z-index 3000000
+
+.chainId
+ width calc(50% - 5px)
+
+.chainSymbol
+ width calc(50% - 5px)
+
+.chainRpc
+ width 100%
+
+.chainInput
+ background transparent
+ outline none
+ border none
+ text-align center
+ font-size 18px
+ width 100%
+ background var(--ghostZ)
+ border-radius 20px
+ font-family 'MainFont'
+ padding 16px
+ font-weight 400
+ color var(--outerspace)
+ margin-top 5px
+
+.chainInputDim
+ color var(--outerspace03)
+
+.chainInputLabel
+ font-size 10px
+ text-transform uppercase
+ font-weight 600
+ padding 8px 0px 4px 16px
+ letter-spacing 1px
+
+.chainFieldDisplay
+ padding 10px
+ margin-top 5px
+ text-align center
+
+.addChainSubmit
+ background var(--ghostC)
+ width 100%
+ margin-top 25px
+ margin-bottom 25px
+ height 48px
+ border-radius 8px
+ box-sizing border-box
+ padding 13px
+ text-align center
+ margin-bottom 5px
+ display flex
+ justify-content center
+ align-items center
+ font-size 15px
+ text-transform uppercase
+ opacity 0.5
+
+ svg
+ margin-right 10px
+
+.addChainSubmitEnabled
+ background var(--ghostD)
+ color var(--good)
+ opacity 1
+ cursor pointer
+ *
+ pointer-events none
+
+.chainRow
+ width 100%
+ display flex
+ justify-content space-between
+ padding 0px 16px 16px 16px
+ box-sizing border-box
+ flex-direction column
+
+.chainRowTestnet
+ padding 8px 3px 8px 17px
+ margin 8px auto 16px auto
+ font-size 11px
+ font-weight 600
+ display flex
+ align-items center
+ justify-content space-between
+ border 3px solid var(--ghostZ)
+ border-radius 26px
+ text-transform uppercase
+ letter-spacing 1px
+ width 140px
+
+.chainRowRemove
+ padding 8px 0px 8px 0px
diff --git a/app/workspace/dash/Chains/style/index.styl b/app/workspace/dash/Chains/style/index.styl
new file mode 100644
index 000000000..b8666bab6
--- /dev/null
+++ b/app/workspace/dash/Chains/style/index.styl
@@ -0,0 +1,949 @@
+.network
+ margin 6px 6px 32px 6px
+ position relative
+ box-shadow 0px 4px 8px var(--ghostY)
+ border-radius 27px
+ background var(--ghostAZ)
+ box-shadow 0px 4px 6px var(--ghostY)
+ border-bottom 2px solid var(--ghostZ)
+
+ .chainModules
+ padding-bottom 0px
+
+ // .networkActive
+ // position relative
+ // display flex
+ // align-items space-between
+ // width 100%
+ // box-sizing border-box
+ // height 74px
+
+ // .chainBadge
+ // position absolute
+ // left 16px
+ // top 18px
+ // border-radius 16px
+ // background var(--ghostB)
+ // box-sizing border-box
+ // display flex
+ // justify-content center
+ // align-items center
+ // color var(--outerspace)
+
+ // img
+ // max-height 22px
+ // max-width 22px
+ // color var(--outerspace)
+
+ // .networkName
+ // position absolute
+ // left 66px
+ // right 100px
+ // top 1px
+ // bottom 1px
+ // font-size 18px
+ // text-align left
+ // font-weight 400
+ // padding-left 0px
+ // font-family 'MainFont'
+ // display flex
+ // align-items center
+
+// .signerPermissionToggle
+// // position absolute
+// // right 16px
+// // top 50%
+// margin-top -9px
+// height 18px
+// width 38px
+// border-radius 12px
+
+// .signerPermissionToggleSwitch
+// position absolute
+// top 2px
+// left 2px
+// bottom 2px
+// width 14px
+// border-radius 10px
+
+
+// .signerPermissionToggleOn
+// background var(--good)
+// .signerPermissionToggleSwitch
+// position absolute
+// transform translateX(20px)
+
+.phaseNetworkLine
+ position relative
+ height 84px
+
+.localSettings
+ display flex
+ justify-content center
+ flex-direction column
+ transition var(--standardFast)
+ transform translateZ(0)
+
+ .customInput
+ position absolute
+ top 0
+ left 0
+ right 0
+ bottom 0
+ width 100%
+ height 100%
+ border none
+ outline none
+ background transparent
+ text-align center
+ font-size 16px
+ font-weight 400
+ color var(--outerspace)
+ font-family 'MainFont'
+
+ div
+ z-index 3
+ display flex
+ justify-content center
+ align-items center
+
+ .phaseNetworkRemove:hover
+ background var(--bad)
+
+ .phaseNetworkSubmit
+ position absolute
+ right 0
+ bottom 1px
+ top 45px
+ width 60px
+
+ svg
+ position relative
+ z-index 2
+
+ .phaseNetworkName
+ position absolute
+ top 1px
+ left 0px
+ right 160px
+ bottom 40px
+
+ input
+ font-size 22px
+ text-align left
+ font-weight 400
+
+ .phaseNetworkSymbol
+ position absolute
+ top 0
+ bottom 40px
+ right 0px
+ width 60px
+
+ input
+ font-size 16px
+ font-family 'FiraCode'
+
+ .phaseNetworkId
+ position absolute
+ right 80px
+ top 0
+ bottom 40px
+ width 60px
+
+ input
+ font-size 16px
+ font-family 'FiraCode'
+
+ .phaseNetworkExplorer
+ position absolute
+ right 80px
+ left 0
+ top 45px
+ bottom 0px
+
+ input
+ text-align left
+
+
+ .localSettingsAddNetwork
+ position absolute
+ right 145px
+ display flex
+ justify-content center
+ align-items center
+ height 26px
+ z-index 9999999
+ border-radius 13px
+ height 26px
+ font-weight 400
+ width 26px
+ font-size 23px
+ text-transform uppercase
+ background var(--ghostD)
+ overflow hidden
+ box-shadow cardDrop, 0px 2px 1px var(--thin)
+ padding 0px 0px 0px 0px
+ transition var(--standard), 0s linear background
+ transform translateZ(0)
+ cursor pointer
+
+ .localSettingsAddNetwork:hover
+ background var(--ghostD)
+
+ .localSettingsWrapFadeTop
+ position absolute
+ top 0
+ left 0
+ right 0
+ height 140px
+ pointer-events none
+ z-index 5
+
+ .localSettingsWrapFadeBot
+ position absolute
+ bottom 0
+ left 0
+ right 0
+ height 140px
+ pointer-events none
+ z-index 5
+
+ .localSettingsWrap
+ overflow-x hidden
+ overflow-y scroll
+ position relative
+ z-index 2
+
+ .localSettingsTitle:before
+ content ''
+ position absolute
+ bottom -2px
+ right 10px
+ left 10px
+ height 4px
+ border-radius 2px
+ background var(--thin)
+
+ .localSettingsTitle
+ position relative
+ display flex
+ align-items flex-start
+ height 30px
+ font-size 26px
+ font-weight 400
+ padding 0px 17px 17px 17px
+ margin 67px 0px 0px 0px
+
+ .localSettingsTitleText
+ margin-top -5px
+
+.signerSetting
+ display flex
+ justify-content center
+ align-items center
+ padding 0px 0px 20px 0px
+ flex-direction column
+
+.settingsTitle
+ width 100%
+ display flex
+ justify-content center
+ align-items center
+ padding 20px 0px 20px 0px
+ background rgba(255, 255, 255, 0.8)
+
+.settingsItems
+ width 100%
+ display flex
+ justify-content center
+ align-items center
+ padding 20px 0px 20px 0px
+ background rgba(0,0,50,0.1)
+ flex-direction column
+
+.settingsItem
+ width 100%
+ display flex
+ justify-content flex-start
+ align-items center
+ padding 20px
+
+.discordInvite:hover
+ .discordLink
+ position relative
+ transform translateY(-2px)
+ cursor pointer
+
+.discordInvite
+ margin 16px 8px
+ font-size 13px
+ font-weight 400
+ border-radius 20px
+ display flex
+ justify-content center
+ align-items center
+ width calc(100% - 16px)
+ cursor pointer
+
+ .discordLink
+ font-weight 400
+ padding-left 5px
+ transition var(--standardFast)
+ transform translateY(0px)
+
+ .discordLink
+ font-weight 400
+ padding-left 5px
+ transition var(--standardFast)
+ transform translateY(0px)
+
+.quitFrame
+ padding 0px
+ margin-top 30px
+ margin-bottom 30px
+
+.connectionLevels
+ position relative
+ z-index 999999999
+ width 100%
+ min-width 100%
+
+ .connectionLevel
+ position relative
+
+ .connectionTitle
+ height 12px
+ display flex
+ justify-content center
+ align-items center
+ font-size 8px
+ text-transform uppercase
+ padding 8px 16px
+ letter-spacing 1px
+ margin-left -1px
+ font-weight 400
+ color var(--outerspace08)
+
+.infoContainer
+ position relative
+ margin 10px 10px 12px 10px
+ border-radius 12px
+ font-size 14px
+ font-weight 400
+
+
+.chainCurrencyItem
+ display flex
+ justify-content center
+ align-items center
+ position relative
+ border-radius 12px
+
+.chainCurrencyItemSymbol, .sliceChainIdNumber
+ font-size 13px
+ font-weight 500
+
+.chainCurrencyItemAt
+ margin -2px 8px 0px 8px
+ color var(--good)
+ font-size 12px
+ font-weight 500
+
+.sliceContainer
+ background var(--ghostZ)
+ position relative
+ margin 0px 6px 12px 6px
+ border-radius 20px
+ padding 3px 0px 3px 0px
+ font-size 14px
+ font-weight 400
+
+ .sliceContainerClose
+ cursor pointer
+ height 16px
+ display flex
+ justify-content center
+ align-items center
+ border-radius 8px
+ color black
+ div
+ pointer-events none
+ position relative
+ margin 0px 18px
+ top 2px
+
+ .sliceContainerClose:hover
+ color var(--white)
+
+ .sliceTileCenter
+ justify-content center
+
+ .sliceTile
+ cursor pointer
+ display flex
+ justify-content space-between
+ align-items center
+ transition var(--standardFast)
+ transform translateZ(0)
+ transform scale(1)
+ background var(--ghostA)
+ position relative
+ border-radius 16px
+ height 64px
+ box-sizing border-box
+ font-size 12px
+ font-weight 400
+ *
+ pointer-events none
+
+ .sliceTile:first-child
+ margin 0px 3px 0px 3px
+
+ .sliceTileHighlight
+ background var(--ghostB)
+
+ .sliceTileClickable:hover
+ background var(--ghostB)
+ box-shadow 0px 2px 2px var(--ghostZ)
+ // animation 4s shake ease-in-out infinite alternate
+
+ .sliceTileClickable:active
+ transform translateY(0px)
+ // animation-name shake-little
+ // animation-duration 2s
+ // animation-timing-function: ease-in-out
+ // animation-iteration-count: infinite
+ // box-shadow 0px 1px 1px var(--ghostZ)
+
+.sliceTileConnectionName
+ padding 1px 20px 0px 20px
+ color var(--outerspace)
+ text-transform uppercase
+ font-size 14px
+ font-weight 500
+ letter-spacing 1px
+
+.sliceTileBlock
+ display flex
+ align-items center
+ padding-right 11px
+ font-family 'FiraCode'
+ font-size 14px
+ font-weight 400
+ position relative
+ top 1px
+ bottom 0px
+
+ .sliceTileBlockIcon
+ color var(--good)
+ padding-right 5px
+
+ .sliceTileChainId
+ padding-right 15px
+
+.sliceTileIndicator
+ color var(--outerspace)
+ cursor pointer
+ position absolute
+ top 50%
+ margin-top -2px
+ left 13px
+ bottom 0px
+ width 5px
+ height 5px
+ border-radius 3px
+ display flex
+ justify-content center
+ align-items center
+ border-radius 12px
+ background var(--good)
+ *
+ pointer-events none
+
+
+.sliceTileIndicatorLarge
+ color var(--outerspace)
+ margin-left 8px
+ margin-top 4px
+ width 10px
+ height 10px
+ border-radius 4px
+ display flex
+ justify-content center
+ align-items center
+ border-radius 12px
+ background var(--good)
+ *
+ pointer-events none
+
+.sliceTileIndicatorActive
+ background var(--goodHighlight)
+ box-shadow 0px 0px 4px var(--goodHighlight)
+
+.sliceTileIndicatorGood
+ background var(--good)
+ box-shadow 0px 0px 4px var(--good)
+
+.sliceTileIndicatorPending
+ background var(--pending)
+ box-shadow 0px 0px 4px var(--pending)
+
+.sliceTileIndicatorWarning
+ background var(--warning)
+ box-shadow 0px 0px 4px var(--warning)
+
+.sliceTileIndicatorBad
+ background var(--bad)
+ box-shadow 0px 0px 4px var(--bad)
+
+.sliceTileChangeChain
+ color var(--outerspace)
+ cursor pointer
+ position absolute
+ top 0px
+ right 0px
+ bottom 0px
+ width 41px
+ display flex
+ justify-content center
+ align-items center
+ border-radius 12px
+ *
+ pointer-events none
+
+.sliceTileChangeChain:hover
+ background var(--ghostB)
+
+.sliceTileChangeConnected
+ background var(--good)
+
+.sliceChainId
+ display flex
+ justify-content center
+ align-items center
+ font-family 'FiraCode'
+ font-size 12px
+ margin 10px
+
+ .sliceChainIdIcon
+ margin-right 6px
+
+.sliceContainer:last-child
+ margin 0px 6px 0px 6px
+
+.connectionTitle
+ justify-content space-between
+ height 26px
+ max-height 26px
+
+.connectionOption
+ align-items space-between
+ transition var(--standard)
+ transform translateZ(0)
+ padding 8px 16px
+ margin 2px
+ transform scale(1)
+
+ .connectionOptionToggle
+ width 100%
+ display flex
+ justify-content space-between
+ align-items center
+ height 25px
+ transform translateZ(0)
+
+ .connectionOptionDetails
+ transition var(--standard)
+ transition-delay 0ms, 0ms
+ transition-property height, opacity
+ opacity 1
+ transform translateZ(0)
+ z-index 40
+ position relative
+ margin-top 0px
+ transition var(--standard)
+ pointer-events none
+ padding 8px 0px
+
+ .connectionOptionDetailsInset
+ height 25px
+ width 100%
+ // color var(--outerspace08)
+ display flex
+ justify-content space-between
+ align-items center
+ text-transform uppercase
+ font-size 11px
+ letter-spacing 1px
+ font-weight 500
+ // margin 0px -15px -15px -15px
+ // padding 0px 15px 15px 15px
+ z-index 40
+
+ .connectionOptionStatus
+ display flex
+ height 25px
+
+ .connectionOptionStatusIndicator
+ height 20px
+ margin-top 5px
+ margin-right 14px
+ display flex
+ align-items center
+ div
+ width 11px
+ height 11px
+ border-radius 5.5px
+ .connectionOptionStatusIndicatorGood
+ background var(--good)
+ .connectionOptionStatusIndicatorBad
+ background var(--bad)
+ .connectionOptionStatusIndicatorPending
+ background var(--pending)
+ .connectionOptionStatusIndicatorWarning
+ background var(--warning)
+
+ .connectionOptionStatusText
+ height 20px
+ margin-top 5px
+ display flex
+ align-items center
+
+ .signerOptionSetWrap
+ height 25px
+
+ .signerOptionSet
+ display flex
+ height 21px
+ margin-top 5px
+ border-radius 10.5px
+ letter-spacing 1px
+ padding 0px 0px
+ justify-content center
+ align-items center
+ padding 0px 3px 0px 3px
+ background var(--ghostD)
+ box-shadow cardDrop
+
+ .signerOptionSetButton
+ display flex
+ justify-content center
+ align-items center
+ height 20px
+ width 25px
+ border-radius 10px
+
+ svg
+ color var(--outerspace)
+ opacity 0.3
+ transition var(--standardFast)
+ transform translateZ(0)
+
+ .signerOptionSet:hover
+ .signerOptionSetButton
+ svg
+ opacity 0.5
+
+ svg:hover
+ opacity 1
+
+.appInfo
+ font-size 14px
+ font-weight 400
+ transition var(--standard)
+ transform translateZ(0)
+ z-index 20
+ padding-bottom 50px
+
+ .appInfoIcon
+ transition var(--standard)
+ height 30px
+ display flex
+ justify-content center
+ align-items center
+ flex-direction column
+ transform translateZ(0)
+
+ .appInfoHandle
+ width 30px
+ height 4px
+ border-radius 2px
+ background var(--outerspace03)
+ transition var(--standard)
+ transform translateZ(0)
+
+ .appInfoLine
+ left 0
+ right 0
+ display flex
+ justify-content center
+ align-items center
+ flex-direction column
+ transform translateZ(0)
+ color var(--outerspace06)
+
+ .appInfoViewLicense
+ width 100%
+ text-align center
+ font-size 11px
+ text-transform uppercase
+ font-weight 500
+ letter-spacing 1px
+ margin-top 24px
+ color var(--outerspace06)
+ cursor pointer
+
+ .appInfoViewLicense:hover
+ cursor pointer
+ color var(--outerspace08)
+
+ .appInfoLineReset
+ margin-top 15px
+ margin-left 4px
+ text-align center
+ font-size 11px
+ text-transform uppercase
+ font-weight 500
+ letter-spacing 1px
+ line-height 30px
+
+ .appInfoLineResetConfirm
+ color var(--outerspace)
+ span
+ margin-left 15px
+
+ .appInfoLineResetButton
+ cursor pointer
+
+ .appInfoLineResetButton:hover
+ color var(--bad)
+
+ .appInfoLineResetConfirmButton
+ color var(--outerspace)
+ cursor pointer
+
+ .appInfoLineResetConfirmButton:hover
+ color var(--bad)
+
+ .appInfoLineVersion
+ font-family 'FiraCode'
+ font-size 13px
+
+ .appInfoLineInstanceId
+ color var(--outerspace06)
+ cursor pointer
+ font-family 'VCR'
+ font-size 12px
+ margin-top 50px
+ margin-left 0px
+ margin-bottom 52px
+ text-transform uppercase
+
+ .appInfoLineInstanceId:hover
+ color var(--outerspace08)
+
+ .instanceIdCopied
+ text-transform uppercase
+
+.connectionCustomInput
+ margin-top 0px
+ margin-bottom 0px
+ height 0px
+ opacity 0
+ position relative
+ padding-top 0px
+ transition var(--standardFast)
+ background var(--ghostZ)
+ border-radius 8px
+ transform translateZ(0)
+ z-index 20
+
+ input
+ position absolute
+ top 0
+ right 0
+ bottom 0
+ left 0px
+ outline none
+ border none
+ width 100%
+ text-align center
+ font-family 'MainFont'
+ font-size 16px
+ background transparent
+ padding 10px
+ font-weight 400
+ color var(--outerspace)
+
+.connectionCustomInputOn
+ margin-top 10px
+ margin-bottom 2px
+ height 35px
+ opacity 1
+
+.signerPermissionNetwork
+ padding 0
+
+.mainnetToggleLock
+ position absolute
+ right 16px
+ top 0
+ margin-top 22px
+ height 20px
+ width 40px
+ border-radius 12px
+ background var(--ghostZ)
+ display flex
+ justify-content center
+ align-items center
+
+ svg
+ color var(--outerspace03)
+
+.chainIdBadgeBackground
+ position absolute
+ right 13px
+ top 50%
+ margin-top -13px
+ height 26px
+ width 136px
+ border-radius 12px
+ background var(--ghostZ)
+ display flex
+ justify-content center
+ align-items center
+ cursor pointer
+ transition var(--standardFast)
+ display none
+
+.chainIdBadge
+ position relative
+ top 2px
+ height 20px
+ border-radius 12px
+ margin-left 8px
+ background var(--ghostB)
+ display flex
+ justify-content center
+ align-items center
+ cursor pointer
+ transition var(--standardFast)
+ padding 0px 8px 0px 6px
+ z-index 4
+ font-family 'FiraCode'
+ font-size 12px
+ *
+ pointer-events none
+
+ .chainIdBadgeIcon
+ color var(--good)
+ position relative
+ top 0px
+ margin-right 6px
+
+.chainSettings
+ position absolute
+ right 60px
+ top 50%
+ margin-top -10px
+ height 20px
+ width 40px
+ border-radius 12px
+ background var(--ghostC)
+ display flex
+ justify-content center
+ align-items center
+ cursor pointer
+ transition var(--standardFast)
+ *
+ pointer-events none
+
+ svg
+ transition var(--standardFast)
+ color var(--outerspace08)
+
+.chainSettings:hover
+ background var(--ghostD)
+ svg
+ color var(--outerspace)
+
+.networkBreak
+ padding 16px 16px 0px 16px
+ margin-bottom 8px
+ font-size 10px
+ text-transform uppercase
+ letter-spacing 2px
+ font-weight 600
+ color var(--outerspace)
+
+.networkBreak:first-child
+ padding 0px 16px 0px 16px
+
+.networkAdd
+ padding 32px 0px 16px 0px
+
+ .networkAddButton
+ font-size 14px
+ height 48px
+ background var(--ghostB)
+ text-align center
+ border-radius 24px
+ padding 15px
+ box-sizing border-box
+ text-transform uppercase
+ font-weight 500
+ letter-spacing 2px
+ cursor pointer
+ *
+ pointer-events none
+
+ .networkAddButton:hover
+ background var(--ghostC)
+ color var(--good)
+
+.chainConfig
+ padding 8px
+ margin 4px
+ border-radius 8px
+ position relative
+ z-index 99999999
+ background var(--ghostA)
+
+ .chainConfigRow
+ position relative
+ display flex
+ justify-content space-between
+ margin-bottom 8px
+
+ .chainIdInput
+ width 80px
+
+ .chainSymbolInput
+ width 102px
+ text-transform uppercase
+
+ input
+ position relative
+ height 28px
+ background var(--ghostZ05)
+ border-radius 8px
+ box-sizing border-box
+ font-size 13px
+ font-weight 500
+
+ .chainConfigRow:last-child
+ margin-bottom 0px
+
+.chainData
+ padding 10px
+
+.chainConfigSave
+ cursor pointer
+ padding 8px
+
+.chainMore
+ cursor pointer
+ padding 8px
+
+@import '../Chain/style/index.styl'
diff --git a/app/dash/Command/style/index.styl b/app/workspace/dash/Command/style/index.styl
similarity index 98%
rename from app/dash/Command/style/index.styl
rename to app/workspace/dash/Command/style/index.styl
index e2178e2ad..450948de8 100644
--- a/app/dash/Command/style/index.styl
+++ b/app/workspace/dash/Command/style/index.styl
@@ -17,7 +17,7 @@
align-items center
text-transform uppercase
letter-spacing 2px
- font-weight 500
+ font-weight 600
font-size 11px
.commandItem
diff --git a/app/workspace/dash/Dapps/style/index.styl b/app/workspace/dash/Dapps/style/index.styl
new file mode 100644
index 000000000..c126bbcc7
--- /dev/null
+++ b/app/workspace/dash/Dapps/style/index.styl
@@ -0,0 +1,202 @@
+.sliceTileUsage
+ width 100%
+ height 100%
+ display flex
+ font-size 10px
+ justify-content center
+ align-items center
+ text-transform uppercase
+ font-weight 500
+
+ .sliceTileUsageCount
+ font-size 17px
+ margin-right 7px
+ border-radius 16px
+ display flex
+ justify-content center
+ align-items center
+
+.sliceOrigin
+ cursor pointer
+ display flex
+ justify-content space-between
+ align-items center
+ position relative
+ height 52px
+ box-sizing border-box
+ font-size 14px
+ font-weight 500
+ margin 6px
+ border-radius 26px
+ background var(--ghostA)
+ border-bottom 2px solid var(--ghostZ)
+ box-shadow 0px 2px 4px var(--ghostY)
+ *
+ pointer-events none
+
+ .sliceOriginTitle
+ padding 0px 48px 1px 48px
+ color var(--outerspace)
+ font-weight 500
+ width 180px
+ direction rtl
+ text-overflow ellipsis
+ overflow hidden
+ text-align left
+ white-space nowrap
+ font-weight 400
+
+.sliceOrigin:hover
+ background var(--ghostB)
+
+.sliceOriginNoDapp
+ display flex
+ justify-content center
+ align-items center
+ position relative
+ text-transform uppercase
+ box-sizing border-box
+ height 52px
+ font-size 10px
+ letter-spacing 2px
+ font-weight 500
+ margin 6px
+ border-radius 26px
+ background var(--ghostZ)
+ border 3px solid var(--ghostY)
+ *
+ pointer-events none
+
+.viewAllOrigin
+ display flex
+ justify-content center
+ align-items center
+ height 10px
+ padding 5px
+ text-transform uppercase
+ font-size 10px
+ font-weight 400
+ color var(--good)
+ cursor pointer
+ *
+ pointer-events none
+
+.viewAllOrigin:hover
+ color var(--goodLight)
+
+.sliceOriginIndicator
+ color var(--outerspace)
+ cursor pointer
+ position absolute
+ top 50%
+ margin-top -3px
+ left 20px
+ bottom 0px
+ width 7px
+ height 7px
+ border-radius 4px
+ display flex
+ justify-content center
+ align-items center
+ border-radius 12px
+ background var(--good)
+ *
+ pointer-events none
+
+.sliceOriginIndicatorOff
+ background var(--ghostY)
+ box-shadow 0px 0px 0px var(--ghostX)
+
+.sliceOriginIndicatorActive
+ background var(--goodHighlight)
+ box-shadow 0px 0px 4px var(--goodHighlight)
+
+.sliceOriginReqs
+ margin-right 24px
+ display flex
+ justify-content center
+ align-items center
+
+ .sliceOriginReqsNumber
+ font-size 16px
+ margin-right 5px
+
+ .sliceOriginReqsLabel
+ margin-top 2px
+ font-size 8px
+ text-transform uppercase
+ font-weight 600
+
+.originSwapOrigin
+ height 120px
+ width 100%
+ font-size 20px
+ font-weight 400
+ display flex
+ align-items center
+ justify-content center
+
+ .originSwapOriginText
+ margin-left 10px
+
+.originSwapTitle
+ width 100%
+ display flex
+ justify-content center
+ text-transform uppercase
+ font-size 12px
+ font-weight 600
+ padding-bottom 6px
+ letter-spacing 1px
+ padding-left 1px
+
+.originSwapChainList
+ background var(--ghostZ)
+ border-radius 12px
+
+ .originChainItem
+ position relative
+ display flex
+ justify-content flex-start
+ align-items center
+ height 64px
+ margin 6px
+ border-radius 26px
+ cursor pointer
+ background var(--ghostA)
+ box-shadow 0px 2px 4px var(--ghostX)
+ margin-bottom 10px
+ font-size 18px
+ font-weight 500
+ border-bottom 2px solid var(--ghostZ)
+ transform translateY(0px)
+
+ .originChainItem:hover
+ background var(--ghostB)
+ box-shadow 0px 4px 8px var(--ghostX)
+ transform translateY(-1px)
+
+ .originChainItem:active
+ background var(--ghostB)
+ box-shadow 0px 1px 2px var(--ghostX)
+ transform translateY(0px)
+
+ .originChainItemIcon
+ padding 1px 16px 0px 16px
+ *
+ cursor pointer
+
+ .originChainItemCheck
+ position absolute
+ bottom 11px
+ right 11px
+ height 42px
+ width 42px
+ display flex
+ justify-content center
+ align-items center
+ background var(--ghostZ)
+ border-radius 12px
+
+ .originChainItemActive
+ color var(--good)
diff --git a/app/dash/Main/style/index.styl b/app/workspace/dash/Main/style/index.styl
similarity index 97%
rename from app/dash/Main/style/index.styl
rename to app/workspace/dash/Main/style/index.styl
index c933830ff..372fa3621 100644
--- a/app/dash/Main/style/index.styl
+++ b/app/workspace/dash/Main/style/index.styl
@@ -43,16 +43,16 @@
background var(--ghostA)
.requestFeatureButton
- padding 0px 30px
+ // padding 0px 30px
border-radius 26px
- height 74px
+ height 90px
font-size 14px
display flex
justify-content center
align-items center
- width 294px
+ width calc(100% - 16px)
margin-bottom 8px
- font-weight 400
+ font-weight 500
cursor pointer
box-sizing border-box
background var(--ghostAZ)
@@ -75,7 +75,7 @@
transform translateZ(0)
padding 0px 10px
font-size 13px
- font-weight 400
+ font-weight 500
font-family 'MainFont'
position relative
z-index 1
@@ -116,8 +116,8 @@
display flex
justify-content center
align-items center
- height 74px
- width 74px
+ height 64px
+ width 64px
border-radius 26px
margin 8px
cursor pointer
@@ -139,7 +139,7 @@
// border-radius 26px
.dashModule
- height 120px
+ height 90px
margin-bottom 8px
border-radius 26px
cursor pointer
@@ -148,7 +148,7 @@
align-items center
margin 6px
font-size 18px
- font-weight 300
+ font-weight 400
border-radius 26px
background var(--ghostAZ)
box-shadow 0px 2px 4px var(--ghostY)
@@ -239,7 +239,7 @@
justify-content space-between
padding 12px 0px 0px 0px
font-size 15px
- font-weight 300
+ font-weight 400
transform translateZ(0)
z-index 2000
border-radius 26px
@@ -262,14 +262,14 @@
font-size 13px
padding 12px 0px 0px 1px
z-index 20
- font-weight 300
+ font-weight 400
font-family 'MainFont'
line-height 18px
.keyCommand
margin-left 5px
padding 1px 6px 2px 6px
- font-weight 400
+ font-weight 500
border-radius 5px
font-size 12px
border 1px solid var(--outerspace05)
@@ -279,7 +279,7 @@
.keyCommandLoading
margin-left 5px
padding 1px 6px 2px 6px
- font-weight 400
+ font-weight 500
border-radius 5px
font-size 12px
border 1px solid var(--outerspace05)
@@ -298,7 +298,7 @@
padding-right 8px
background var(--bad)
padding-bottom 1px
- font-weight 400
+ font-weight 500
color #f3f6fd
text-shadow 0px 1px 2px rgba(100, 0, 0, 0.2), 0px 1px 0px rgba(100, 0, 0, 0.2)
transform translateZ(0)
@@ -315,11 +315,11 @@
overflow hidden
text-align left
white-space nowrap
- font-weight 300
+ font-weight 400
margin-top 2px
.signerPermissionNoPermissions
- font-weight 300
+ font-weight 400
text-align center
width 100%
font-size 14px
@@ -333,8 +333,8 @@
text-align left
white-space nowrap
font-family 'MainFont'
- font-weight 300
- font-size 18px
+ font-weight 400
+ font-size 16px
position relative
padding-top 4px
@@ -352,7 +352,7 @@
height 46px
font-size 13px
text-transform uppercase
- font-weight 400
+ font-weight 500
letter-spacing 1px
display flex
justify-content center
diff --git a/app/workspace/dash/Notify/style/index.styl b/app/workspace/dash/Notify/style/index.styl
new file mode 100644
index 000000000..eef919cb2
--- /dev/null
+++ b/app/workspace/dash/Notify/style/index.styl
@@ -0,0 +1,328 @@
+.notify
+ width 100%
+ height 100%
+ pointer-events auto
+ transition var(--standard)
+ display flex
+ justify-content center
+ align-items center
+ text-align center
+ opacity 1
+ border-radius 10px
+ background var(--ghostZ)
+
+ ::selection
+ background var(--moon)
+
+ .notifyCloseButton
+ position absolute
+ top 23px
+ width 100px
+ margin-left -50px
+ left 50%
+ height 25px
+ border-radius 8px
+ display flex
+ justify-content center
+ align-items center
+ text-transform uppercase
+ font-size 11px
+ font-weight 400
+ cursor pointer
+ background var(--ghostB)
+ color var(--moon)
+
+ *
+ pointer-events none
+
+ .notifyBoxWrap
+ border-radius 27px
+ box-sizing border-box
+ position absolute
+ top 6px
+ bottom 6px
+ left 6px
+ right 6px
+ transition var(--standard)
+ background var(--ghostA)
+ display flex
+ justify-content center
+ align-items center
+ text-align center
+ opacity 1
+ overflow-x hidden
+ z-index 4000
+
+ .notifyBoxSlide
+ overflow-y scroll
+ overflow-x hidden
+ max-height 100%
+ width 100%
+
+ .notifyClose
+ position absolute
+ top 0px
+ right 0px
+ color var(--outerspace)
+ z-index 3
+ height 40px
+ width 40px
+ display flex
+ justify-content center
+ align-items center
+
+ .notifyBox
+ border-top 1px solid var(--ghostA)
+ border-bottom 1px solid var(--ghostA)
+ width 100%
+ overflow hidden
+ padding 64px 0px
+
+ .notifyTitle
+ font-size 19px
+ position relative
+ z-index 3
+ margin-bottom 40px
+ color var(--moon)
+
+ .notifySubtitle
+ font-size 16px
+ position relative
+ z-index 3
+ margin-bottom 24px
+
+ .notifyFrameIcon
+ height 106px
+ width 100%
+ position relative
+ z-index 4
+ display flex
+ justify-content center
+ align-items center
+
+ img
+ width 96px
+ height 96px
+ border-radius 24px
+
+ .notifyBody
+ font-size 17px
+ position relative
+ z-index 3
+ padding 4px
+ word-break break-word
+ width 100%
+ box-sizing border-box
+ padding 20px
+
+ .notifyBodyLine
+ padding 0px 0px
+ text-transform uppercase
+ font-size 16px
+ font-weight 400
+ font-family 'MainFont'
+
+ .notifyBodyLineUrl
+ padding-bottom 56px
+ font-family 'FiraCode'
+ font-size 16px
+ word-break break-all
+
+ .notifyBodyUpdate
+ padding 8px
+ margin-bottom 8px
+ background var(--moon)
+ color var(--moonOver)
+ border-radius 8px
+ margin-top 50px
+ font-size 13px
+ font-weight 400
+
+ .notifyBodyBlock
+ padding 8px
+ margin-bottom 8px
+ background var(--ghostB)
+ border-radius 12px
+ border 3px solid var(--ghostZ)
+
+ .notifyBodyBlockBig
+ padding 32px
+ font-size 16px
+ background var(--ghostB)
+
+ .notifyBodyLink
+ text-decoration underline
+ cursor pointer
+
+ .notifyBodyHash
+ font-size 14px
+ font-family 'FiraCode'
+ background var(--ghostB)
+ line-height 20px
+ box-shadow inset 0px 2px 14px var(--ghostB)
+ padding 18px
+ border-radius 12px
+ margin-top 10px
+ border 1px solid var(--ghostC)
+ text-shadow 0px 2px 0px var(--ghostB)
+ min-height 58px
+ max-height 58px
+
+ .notifyBodyPrice
+ margin-top 4px
+ font-size 23px
+
+ .notifyBodyQuestion
+ padding-top 40px
+ color var(--moon)
+
+ .notifyCheck
+ display flex
+ position relative
+ justify-content center
+ align-items center
+ font-weight 500
+ z-index 3
+ margin-top 16px
+ margin-left 8px
+ padding 0px 30px
+
+ .notifyCheckBox
+ width 32px
+ height 32px
+ min-width 32px
+ min-height 32px
+ border-radius 16px
+ background var(--ghostC)
+ border 1px solid var(--ghostZ)
+ box-shadow cardDrop, 0px 2px 1px var(--ghostA), 0px 0px 7px 2px var(--ghostB)
+ margin-right 10px
+ box-sizing border-box
+ display flex
+ position relative
+ justify-content center
+ align-items center
+ cursor pointer
+ *
+ pointer-events none
+
+ svg
+ height 22px
+
+ .notifyCheckBox:hover
+ background var(--ghostD)
+
+ .notifyCheckText
+ text-align left
+ font-size 13px
+ line-height 13px
+ width 210px
+
+ .notifyInput
+ display flex
+ position relative
+ justify-content space-between
+ z-index 3
+ margin 40px 8px 0px 8px
+
+ .notifyInputOption
+ position relative
+ width calc(50% - 1px)
+ display flex
+ justify-content center
+ align-items center
+ box-sizing border-box
+ background var(--ghostA)
+ height 40px
+ 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 500
+ letter-spacing 1px
+ cursor pointer
+ *
+ pointer-events none
+
+ .notifyInputOptionText
+ position relative
+ z-index 200
+ padding-bottom 2px
+
+ .notifyBetaGo
+ color var(--good)
+
+ .notifyInputOption:hover:before
+ background var(--ghostD)
+
+ .notifyInputDeny:before
+ content ''
+ position absolute
+ top 0
+ left 0
+ right 0
+ bottom 2px
+ background var(--ghostB)
+ z-index 2
+ border-top-left-radius 19px
+ border-bottom-left-radius 19px
+
+ .notifyInputDeny
+ border-top-left-radius 20px
+ border-bottom-left-radius 20px
+
+ .notifyInputProceed:before
+ content ''
+ position absolute
+ top 0
+ left 0
+ right 0
+ bottom 2px
+ background var(--ghostB)
+ z-index 2
+ border-top-right-radius 19px
+ border-bottom-right-radius 19px
+
+ .notifyInputProceed
+ border-top-right-radius 20px
+ border-bottom-right-radius 20px
+
+ .notifyInputSingleButton
+ left 50%
+ transform translate(-50%, 0)
+ border-radius 12px
+ height 50px
+ background var(--ghostB)
+ background var(--ghostB)
+ border 3px solid var(--ghostZ)
+
+ .introInstructions
+ position relative
+ z-index 3
+ margin -10px
+ font-size 12px
+ font-weight 400
+ border-radius 6px
+ text-align cleft
+ line-height 18px
+ font-weight 400
+ color var(--outerspace08)
+
+ .introInstructionItem
+ margin-bottom 20px
+ padding 0px 20px
+ span
+ color var(--pending)
+ text-decoration none
+
+ .introInstructionList
+ margin 18px 5px 30px 5px
+ border-radius 6px
+ padding 16px
+ font-weight 500
+ background var(--pending)
+ color var(--spacewhite)
+ div
+ font-size 14px
+ line-height 26px
diff --git a/app/workspace/dash/Signer/SignerStatus/style/index.styl b/app/workspace/dash/Signer/SignerStatus/style/index.styl
new file mode 100644
index 000000000..af16c9f6d
--- /dev/null
+++ b/app/workspace/dash/Signer/SignerStatus/style/index.styl
@@ -0,0 +1,159 @@
+@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)
+
+@keyframes fadeInDown
+ 0%
+ opacity 0
+ transform translate3d(0, -20px, 0)
+ 100%
+ opacity 1
+ transform translate3d(0, 0, 0)
+
+.signerStatus
+ position relative
+ // z-index 99999
+ // top 0px
+ // left 3px
+ // right 3px
+ // pointer-events auto
+
+ .signerStatusWrap
+ position relative
+ // width 100%
+ // height 100%
+ // animation-name fadeInDown
+ // animation-duration 400ms
+ // animation-timing-function cubic-bezier(.82,0,.12,1)
+ // z-index 40000
+
+ .signerStatusTop
+ position relative
+ height 7px
+ display none
+
+ .signerStatusTopArrow
+ background var(--ghostB)
+ width 20px
+ height 20px
+ border-top-left-radius 3px
+ transform rotate(45deg)
+ position absolute
+ top 6px
+ left 26px
+
+ .signerStatusMain
+ background var(--ghostZ)
+ border-radius 20px
+ // box-shadow 0px 0px 10px var(--ghostZ), 0px 10px 20px var(--ghostZ)
+ padding 3px
+ margin 12px 6px 21px 6px
+
+.signerStatusHidden
+ transform translateY(-40px)
+ opacity 0
+ pointer-events none
+
+.signerUnlockWrap
+ display flex
+ align-items center
+ flex-direction column
+ transform translateY(0px)
+ width 100%
+
+ .signerUnlockHeader
+ padding-bottom 32px
+ text-transform uppercase
+ font-size 13px
+ font-weight 500
+ text-shadow 0px 1px 2px var(--ghostX)
+
+ .signerUnlockInput
+ position relative
+ height 61px
+ width 100%
+ border 0
+ outline 0
+ background var(--ghostZ)
+ font-size 26px
+ letter-spacing 6px
+ display flex
+ justify-content center
+ align-items center
+ text-align center
+ color var(--outerspace)
+ box-sizing border-box
+ border-radius 8px
+ border-top-right-radius 17px
+ border-top-left-radius 17px
+ position relative
+ z-index 4
+ padding-bottom 10px
+
+ .signerUnlockInputLabel
+ position absolute
+ top 46px
+ font-size 9px
+ border-radius 8px
+ border-bottom-left-radius 17px
+ border-bottom-right-radius 17px
+ display flex
+ justify-content center
+ align-items center
+ text-transform uppercase
+ margin-top 4px
+ font-weight 500
+ z-index 40000
+ letter-spacing 1px
+ margin-left -1px
+
+ .signerUnlockSubmit
+ height 30px
+ background var(--ghostA)
+ color var(--outerspace)
+ font-size 12px
+ box-sizing border-box
+ padding-top 1px
+ margin 3px 0px 0px 0px
+ width 140px
+ border-radius 8px
+ display flex
+ justify-content center
+ align-items center
+ font-weight 600
+ cursor pointer
+ width 100%
+ text-transform uppercase
+ cursor pointer
+ border-bottom-left-radius 17px
+ border-bottom-right-radius 17px
+
+ *
+ pointer-events none
+
+ .signerUnlockSubmit:hover
+ background var(--ghostB)
+ // animation 5s shake ease-in-out infinite alternate
+ // box-shadow 0px 2px 8px var(--ghostZ)
+
+ .signerUnlockSubmit:active
+ transform translateY(0px)
+ // animation shake-little 2s ease-in-out infinite
+ // box-shadow 0px 2px 8px var(--ghostZ)
+
+.headShake
+ animation-duration 1s
+ animation-fill-mode both
+ animation-timing-function ease-in-out
+ animation-name headShake
+ transform translateZ(0)
diff --git a/app/workspace/dash/Signer/style/index.styl b/app/workspace/dash/Signer/style/index.styl
new file mode 100644
index 000000000..381362a3f
--- /dev/null
+++ b/app/workspace/dash/Signer/style/index.styl
@@ -0,0 +1,706 @@
+.expandedSigner
+ position relative
+ overflow hidden
+ box-sizing border-box
+ margin 6px
+ padding-bottom 24px
+ border-radius 27px
+ background var(--ghostA)
+ transform translate3d(0, 0, 0)
+ padding-top 8px
+
+// .signer
+// position relative
+// width 100%
+// overflow hidden
+// box-sizing border-box
+// margin 16px 0px 0px 0px
+// padding-bottom 24px
+// border-radius 27px
+// box-shadow 0px 4px 8px var(--ghostY)
+// transform translate3d(0, 0, 0)
+// border-radius 27px
+// background var(--ghostAZ)
+// box-shadow 0px 4px 8px var(--ghostY), 0px 2px 8px var(--ghostY)
+// border-bottom 2px solid var(--ghostY)
+
+.signerMenuItems
+ display flex
+ justify-content center
+ align-items center
+
+.signerTop
+ position relative
+ display flex
+ justify-content space-between
+ align-items center
+ padding 24px 16px
+
+.signerDetails
+ display flex
+ justify-content center
+ align-items center
+
+ .signerName
+ height 28px
+ padding-left 14px
+ border-radius 8px
+ font-size 18px
+ font-weight 400
+ padding-top 4px
+ box-sizing border-box
+ font-family 'MainFont'
+ text-transform capitalize
+ letter-spacing 0px
+ font-weight 500
+ white-space nowrap
+ overflow hidden
+ text-overflow ellipsis
+ width 190px
+
+ .signerNameUpdate
+ position absolute
+ width 28px
+ height 28px
+ right -34px
+ color var(--good)
+ display flex
+ align-items center
+ cursor pointer
+ pointer-events none
+ opacity 0
+ *
+ pointer-events none
+
+.signerExpand
+ height 26px
+ width 54px
+ border-radius 20px
+ box-sizing border-box
+ background var(--ghostA)
+ border 3px solid var(--ghostZ)
+ cursor pointer
+ display flex
+ justify-content center
+ align-items center
+
+ *
+ pointer-events none
+
+.signerExpand:hover
+ background var(--ghostB)
+
+.signerNameFocused
+ background var(--ghostZ)
+ .signerNameUpdate
+ opacity 1
+
+.signerType
+ position absolute
+ top 20px
+ right 44px
+ font-size 11px
+ text-transform uppercase
+ font-weight 500
+ letter-spacing 0px
+
+
+.signerStatusIndicator
+ position absolute
+ top 26px
+ right 18px
+ font-size 12px
+ text-transform uppercase
+ font-weight 500
+ background var(--ghostZ)
+ width 10px
+ height 10px
+ border-radius 5px
+
+.signerStatusIndicatorLocked
+ background var(--moon)
+
+.signerStatusIndicatorReady
+ background var(--good)
+
+.signerStatusText
+ padding 0px 32px 16px 32px
+ margin 0px 6px 6px 6px
+ border-radius 20px
+ font-size 12px
+ text-transform uppercase
+ text-align center
+ font-weight 600
+ letter-spacing 1px
+ color var(--outerspace)
+
+.signerStatusError
+ color var(--bad)
+
+.signerStatusIssue
+ color var(--moon)
+
+.signerStatusReady
+ color var(--good)
+
+.signerBottom
+ left 0
+ right 0
+ bottom 0
+ height 20px
+ display flex
+ justify-content space-between
+ align-items center
+ font-size 14px
+ font-weight 400
+ display flex
+ justify-content center
+ align-items center
+ padding 18px 16px 10px 16px
+
+ .signerBottomPages
+ border-radius 8px
+ font-size 13px
+ font-weight 500
+ width 66px
+ text-align center
+
+ .signerBottomPageBack
+ background var(--ghostA)
+ padding 2px 1px 2px 2px
+ height 30px
+ width 45px
+ border-radius 15px
+ cursor pointer
+ box-sizing border-box
+ border 3px solid var(--ghostZ)
+ cursor pointer
+ box-sizing border-box
+ display flex
+ justify-content center
+ *
+ pointer-events none
+
+ .signerBottomPageNext
+ background var(--ghostA)
+ transform rotate(180deg)
+ padding 2px 2px 2px 1px
+ height 30px
+ width 45px
+ border-radius 15px
+ cursor pointer
+ box-sizing border-box
+ border 3px solid var(--ghostZ)
+ display flex
+ justify-content center
+ *
+ pointer-events none
+
+ .signerBottomPageBack:hover, .signerBottomPageNext:hover
+ background var(--ghostB)
+
+.signerDrawer
+ position relative
+ height 60px
+
+ .showControls
+ position absolute
+ height 20px
+ border-radius 13px
+ border 3px solid var(--ghostZ)
+ background var(--ghostA)
+ z-index 2
+ top 14px
+ left 50%
+ width 100px
+ margin-left -53px
+ padding-bottom 2px
+ letter-spacing 1px
+ font-size 11px
+ display flex
+ justify-content center
+ align-items center
+ text-transform uppercase
+ cursor pointer
+ color var(--outerspace)
+ transition var(--standardFast)
+ font-weight 500
+
+ .showControls:hover
+ background var(--ghostB)
+ color var(--outerspace)
+
+ .showControlsLine
+ height 3px
+ position absolute
+ top 50%
+ left 0
+ right 0
+ background var(--ghostZ)
+ z-index 1
+ margin-top -3px
+
+.signerControls
+ padding-top 16px
+
+ .signerControlDetail
+ height 40px
+ margin 0px 10px 11px 10px
+ display flex
+ justify-content center
+ align-items center
+ box-sizing border-box
+ font-size 16px
+ font-weight 500
+ border 2px solid var(--ghostA)
+ border-radius 9px
+
+ .signerControlDetailKey
+ font-size 11px
+ margin 4px 4px 6px 4px
+ letter-spacing 1px
+
+ .signerControlDetailValue
+ margin 4px
+ font-family 'FiraCode'
+
+ .signerControlOption
+ height 52px
+ margin 0px 10px 11px 10px
+ background var(--ghostA)
+ border-radius 20px
+ color var(--outerspace)
+ display flex
+ justify-content center
+ align-items center
+ font-weight 500
+ font-size 13px
+ cursor pointer
+ letter-spacing 0px
+ box-sizing border-box
+ text-transform uppercase
+ border 3px solid var(--ghostZ)
+
+ *
+ pointer-events none
+
+ .signerControlOption:hover
+ background var(--ghostB)
+
+ .signerControlOptionImportant
+ color var(--bad)
+
+ .signerControlOptionEffect
+ color var(--moon)
+
+ .signerControlOptionSuccess
+ color var(--good)
+
+.signerLatticePair
+ height 200px
+
+ .signerLatticePairTitle
+ height 40px
+ display flex
+ justify-content center
+ align-items center
+ font-size 14px
+ font-weight 400
+ text-transform none
+ color var(--moon)
+
+ .signerLatticePairInput
+ background var(--ghostC)
+ height 60px
+ border-radius 12px
+ margin 10px 10px 20px 10px
+
+ input
+ width 100%
+ height 100%
+ background transparent
+ border none
+ outline none
+ color var(--outerspace)
+ text-align center
+ font-size 22px
+ letter-spacing 6px
+ padding-left 6px
+ font-family 'MainFont'
+
+ .signerLatticePairSubmit
+ width 100px
+ height 30px
+ display flex
+ justify-content center
+ align-items center
+ background var(--ghostC)
+ border-radius 12px
+ position relative
+ left 50%
+ margin-left -50px
+ cursor pointer
+ letter-spacing 1px
+ font-size 13px
+ text-transform uppercase
+ font-weight 400
+ padding-left 1px
+
+ *
+ pointer-events none
+
+.signerAccountsTitle
+ // background pink
+ font-size 12px
+ font-weight 400
+ display flex
+ justify-content center
+ align-items center
+ // height 40px
+ padding 0px 12px 0px 12px
+
+.signerAccountsTitleActive
+ text-transform uppercase
+ font-size 10px
+ font-weight 400
+ letter-spacing 1px
+ display flex
+ justify-content center
+ align-items center
+ color var(--outerspace)
+
+ .signerAccountsTitleActiveCount
+ font-size 13px
+ margin-left 5px
+ font-weight 500
+ margin-top -1px
+ height 24px
+ width 24px
+ border-radius 12px
+ box-sizing border-box
+ display flex
+ justify-content center
+ align-items center
+ padding-left 1px
+ background var(--ghostB)
+
+.signerAccounts
+ //position absolute
+ // bottom 30px
+ // right 8px
+ // left 8px
+ margin 7px 6px
+ // padding 8px
+ text-align center
+
+ // border-radius 8px
+ font-size 11px
+ // text-transform uppercase
+ font-weight 500
+ // height 204px
+ overflow hidden
+ // overflow-x hidden
+ background var(--ghostZ)
+ border-radius 20px
+
+ .signerAccount:first-child
+ border-top-right-radius 17px
+ border-top-left-radius 17px
+
+ .signerAccount:last-child
+ border-bottom-right-radius 17px
+ border-bottom-left-radius 17px
+
+ .signerAccount:first-child:last-child
+ border-radius 17px
+
+ .signerAccountsAdd
+ padding 16px
+ font-size 12px
+ cursor pointer
+ text-transform uppercase
+ font-weight 500
+ letter-spacing 1px
+
+ .signerAccountsAdd:hover
+ color var(--good)
+
+ .signerAccount
+ display flex
+ height 36px
+ margin 3px
+ width calc(100% - 6px)
+ position relative
+ background var(--ghostZ)
+ color var(--outerspace)
+ border-radius 8px
+ box-sizing border-box
+ cursor pointer
+
+ *
+ pointer-events none
+
+ .signerAccountIndex
+ position absolute
+ top 2px
+ left 3px
+ bottom 3px
+ width 30px
+ display flex
+ justify-content center
+ align-items center
+ font-weight 600
+
+ .signerAccountAddress
+ display flex
+ justify-content center
+ align-items center
+ position absolute
+ left 30px
+ bottom 7px
+ right 40px
+ font-size 15px
+ overflow hidden
+ font-family 'FiraCode'
+ font-weight 250
+
+ svg
+ margin 2px 4px 0px 4px
+
+ .signerAccountCheck
+ position absolute
+ top 15px
+ right 16px
+ bottom 0
+ width 6px
+ height 6px
+ border-radius 3px
+ display flex
+ justify-content center
+ align-items center
+ color var(--ghostZ)
+ background var(--outerspace)
+
+ .signerAccountAdded
+ background var(--ghostA)
+
+ // .signerAccountIndex
+ // color var(--good)
+
+ .signerAccountCheck
+ background var(--good)
+
+ .signerAccount:hover
+ background var(--ghostA)
+
+ .signerAccountAdded:hover
+ background var(--ghostB)
+
+ .signerAccountDisabled
+ background var(--ghostA)
+ cursor auto
+
+ .signerAccountDisabled:hover
+ background var(--ghostA)
+
+.signerLoading
+ height 60px
+ display flex
+ justify-content center
+ align-items center
+ padding 20px
+
+.signerLoadingLoader, .signerLoadingLoaderafter
+ border-radius 50%
+ width 50px
+ height 50px
+
+.signerLoadingLoader
+ margin 60px auto
+ font-size 10px
+ position relative
+ text-indent -9999em
+ border-top 3px solid var(--ghostZ)
+ border-right 3px solid var(--ghostZ)
+ border-bottom 3px solid var(--ghostZ)
+ border-left 3px solid var(--good)
+ transform translateZ(0)
+ animation load8 0.5s infinite linear
+ will-change transform
+
+@keyframes load8
+ 0%
+ -webkit-transform rotate(0deg)
+ transform rotate(0deg)
+
+ 100%
+ -webkit-transform rotate(360deg)
+ transform rotate(360deg)
+
+.signerInterface
+ font-size 16px
+ width 100%
+ transition var(--standard)
+ position relative
+ display flex
+ text-align center
+ flex-direction column
+ overflow hidden
+ font-size 14px
+
+ .trezorPhraseInput
+ position relative
+ display flex
+ justify-content center
+ align-items center
+ background var(--ghostY)
+ height 36px
+ border-radius 8px
+ width calc(100% - 20px)
+ overflow hidden
+ margin-bottom 18px
+
+ svg
+ margin 0px 5px
+
+ input
+ position absolute
+ top 0
+ right 0
+ bottom 0
+ left 0
+ width 100%
+ height 100%
+ text-align center
+ font-size 20px
+ outline 0
+ border 0
+ background transparent
+ color var(--outerspace)
+ letter-spacing 4px
+
+ .trezorPinWrap
+ width 100%
+ position relative
+ display flex
+ justify-content center
+ transition var(--standard)
+ overflow hidden
+ display flex
+ justify-content center
+ align-items center
+ flex-direction column
+ z-index 20
+ padding-bottom 0.5em
+
+ .signerPinMessageOr
+ font-size 10px
+ text-transform uppercase
+ font-weight 400
+ padding 5px
+
+ .signerPinMessage
+ height 32px
+ width 140px
+ display flex
+ justify-content center
+ align-items center
+ overflow hidden
+ position relative
+ font-size 13px
+ padding-bottom 2px
+ background var(--ghostB)
+ box-shadow 0px 2px 6px var(--ghostZ)
+
+ .signerPinDelete
+ position absolute
+ display flex
+ justify-content center
+ align-items center
+ top 0px
+ bottom 0px
+ width 40px
+ left -40px
+ border-radius 8px
+ background var(--ghostC)
+ cursor pointer
+
+ .signerPinDelete:hover
+ background var(--ghostD)
+
+ .signerPinSubmit
+ width 250px
+ border-radius 8px
+ cursor pointer
+ font-size 12px
+ text-transform uppercase
+ text-align center
+ font-weight 400
+ display flex
+ justify-content center
+
+ .signerPinDelete
+ left 0px
+
+ .signerPinSubmit:hover
+ background var(--ghostC)
+
+ .trezorPinInputWrap
+ width 100%
+ position relative
+ display flex
+ justify-content center
+ transition var(--standard)
+ padding 10px 0px 25px 0px
+ height 100px
+
+ .trezorPinInput
+ display flex
+ width 120px
+ height 120px
+ flex-wrap wrap-reverse
+ z-index 1000
+
+ .trezorPinInputButton
+ min-width 40px
+ min-height 40px
+ display flex
+ justify-content center
+ align-items center
+
+ .trezorPinInputButton:hover
+ svg
+ transform scale(1.7)
+
+ .trezorPinInputButton:active
+ svg
+ transform scale(2.1)
+ transition none
+
+.expandedSignerTitle
+ display flex
+ justify-content center
+ align-items center
+ text-transform none
+ font-family 'MainFont'
+ letter-spacing 0px
+ font-size 16px
+ font-weight 500
+ padding-right 2px
+ text-transform capitalize
+
+ .expandedSignerIcon
+ margin-right 12px
+
+.signerAddedAccountTitle
+ display flex
+ justify-content center
+ align-items center
+ text-transform uppercase
+ font-size 9px
+ margin 2px 0px 4px 0px
+ font-weight 600
+ letter-spacing 1px
+ padding-top 8px
+
+@import '../SignerStatus/style'
diff --git a/app/workspace/dash/Tokens/AddToken/style/index.styl b/app/workspace/dash/Tokens/AddToken/style/index.styl
new file mode 100644
index 000000000..24f95d743
--- /dev/null
+++ b/app/workspace/dash/Tokens/AddToken/style/index.styl
@@ -0,0 +1,199 @@
+.addTokenTop
+ display flex
+ justify-content center
+ align-items center
+ flex-direction column
+
+.addTokenTitle
+ padding 40px 0px 60px 0px
+ font-size 24px
+ font-weight 400
+
+.addToken
+ font-size 16px
+ position relative
+ z-index 3
+ word-break break-word
+ width 100%
+ box-sizing border-box
+ padding-bottom 32px
+
+.newTokenView
+ min-height 100%
+ width 100%
+ display flex
+ justify-content center
+ align-items center
+ flex-direction column
+
+.newTokenChainSelectTitle
+ padding-bottom 40px
+ display flex
+ justify-content center
+ align-items center
+ flex-direction column
+
+.newTokenErrorTitle
+ text-align center
+ font-size 14px
+ font-weight 400
+ box-sizing border-box
+ margin-bottom 20px
+
+.newTokenChainAddress
+ font-family 'FiraCode'
+ font-size 18px
+ svg
+ margin 4px 5px
+
+.newTokenChainSelectChain
+ width 100%
+
+.newTokenChainSelectSubtitle
+ margin-top 3px
+ font-size 10px
+ font-weight 400
+ text-transform uppercase
+
+.newTokenChainSelectFooter
+ margin-top 40px
+ margin-bottom: 40px
+ font-size 10px
+ font-weight 400
+ text-align: center
+ text-transform uppercase
+
+ .newTokenEnableChainLink
+ color: var(--good)
+ margin-left: 4px
+ display: inline-block
+ cursor: pointer
+
+ .newTokenEnableChainLink:hover
+ color: var(--goodOver)
+
+.tokenRow
+ width 100%
+ display flex
+ justify-content space-between
+ padding 0px 5px 40px 5px
+ box-sizing border-box
+
+.tokenRow:last-child
+ padding 0px 5px 0px 5px
+
+.tokenName
+ width 100%
+ text-align center
+
+.tokenAddress
+ width 100%
+ text-align center
+
+.tokenLogoUri
+ width 100%
+ text-align center
+
+.tokenChainId
+ width calc(35% - 5px)
+
+.tokenDecimals
+ width calc(50% - 5px)
+ text-align center
+
+.tokenSymbol
+ width calc(50% - 5px)
+ text-align center
+
+.tokenExplorer
+ width 100%
+
+.tokenRpc
+ width 100%
+
+.tokenInput
+ background transparent
+ outline none
+ border none
+ text-align center
+ font-size 16px
+ padding 0px
+ width 100%
+ font-family 'MainFont'
+ background var(--ghostA)
+ border-radius 20px
+ padding 23px 3px 20px 3px
+ font-weight 400
+ color var(--outerspace)
+
+ &.dropdown
+ margin-top: 17px
+ padding: 0px
+
+.tokenInputLabel
+ font-size 12px
+ text-transform uppercase
+ font-weight 400
+ input
+ margin-bottom 5px
+
+.tokenInputDim
+ font-size 16px !important
+ font-weight 400 !important
+ color var(--outerspace03)
+
+.tokenInputAddress
+ font-family 'FiraCode'
+ font-weight 400
+ font-size 14px
+
+.tokenSetAddress
+ font-size 13px
+ text-transform uppercase
+ font-weight 400
+ padding 10px 50px
+ background var(--ghostA)
+ border-radius 12px
+ cursor pointer
+ margin-top 10px
+
+.tokenSetAddress:hover
+ background var(--ghostB)
+
+.addTokenSubmit
+ background var(--ghostA)
+ margin auto
+ height 64px
+ border-radius 20px
+ font-weight 400
+ box-sizing border-box
+ padding 12px 24px
+ text-align center
+ display flex
+ justify-content space-around
+ align-items center
+ font-size 15px
+ text-transform uppercase
+ border 3px solid var(--ghostZ)
+ pointer-events none
+
+ span
+ opacity 0.4
+
+ svg
+ margin-right 10px
+
+.addTokenSubmit:hover
+ background var(--ghostA)
+
+.addTokenSubmitEnabled
+ background var(--ghostB)
+ cursor pointer
+ pointer-events auto
+ outline none
+ span
+ pointer-events none
+ opacity 1
+
+.addTokenSubmitEnabled:hover
+ background var(--ghostC)
diff --git a/app/workspace/dash/Tokens/CustomTokens/style/index.styl b/app/workspace/dash/Tokens/CustomTokens/style/index.styl
new file mode 100644
index 000000000..61ddd319c
--- /dev/null
+++ b/app/workspace/dash/Tokens/CustomTokens/style/index.styl
@@ -0,0 +1,250 @@
+.customTokens
+
+ .customTokensTitle
+ font-size 16px
+ font-weight 400
+ height 47px
+ display flex
+ justify-content space-between
+ padding 0px 10px
+ align-items center
+ border-radius 6px
+ box-shadow 0px 5px 7px -3px var(--ghostZ)
+
+ .customTokensAddToken
+ background var(--ghostC)
+ height 30px
+ border-radius 12px
+ display flex
+ justify-content center
+ align-items center
+ font-size 11px
+ padding 0px 12px
+ letter-spacing 1px
+ font-weight 400
+ text-transform uppercase
+ cursor pointer
+ *
+ pointer-events none
+
+ .customTokensAddToken:hover
+ background var(--ghostD)
+
+ .customTokensFooter
+ position absolute
+ bottom 0
+ left 0
+ right 0
+ height 64px
+ font-family 'MainFont'
+ font-size 20px
+ font-weight 500
+ display flex
+ justify-content center
+ align-items center
+
+ .customTokensList
+ // position absolute
+ // top 40px
+ // left 5px
+ // bottom 0px
+ // right 5px
+ // overflow-y scroll
+ padding-top 20px
+ padding-bottom 20px
+ z-index 2
+
+ .customTokensListNoTokens
+ position absolute
+ top 140px
+ left 5px
+ right 5px
+ bottom 0px
+ display flex
+ font-size 16px
+ font-weight 400
+ justify-content center
+ align-items center
+ text-transform uppercase
+ font-family 'MainFont'
+ color var(--outerspace05)
+
+ .customTokensListItem
+ position relative
+ transition var(--standard)
+ box-sizing border-box
+ height 50px
+ padding 0px 4px
+ overflow hidden
+ border-bottom 1px solid var(--ghostY)
+
+ .customTokensListItemTitle
+ display flex
+ justify-content space-between
+ align-items center
+ font-size 16px
+ height 50px
+ box-sizing border-box
+ padding 6px
+
+ .customTokensListItemExpand
+ text-align center
+ width 30px
+ height 30px
+ margin-left 10px
+ border-radius 12px
+ cursor pointer
+ padding 7px
+ box-sizing border-box
+ background var(--ghostB)
+ transition var(--standardFast)
+ transform rotate(-180deg)
+
+ *
+ pointer-events none
+
+ .customTokensListItemExpand:hover
+ background var(--ghostC)
+
+ .customTokensListItemExpandActive
+ transform rotate(0deg)
+
+ .customTokensListItemName
+ display flex
+ justify-content center
+ align-items center
+ font-family 'MainFont'
+ font-weight 400
+
+ img:before
+ content attr(alt)
+ top 0
+ bottom 0
+ left 0
+ right 0
+ border-radius 13px
+ position absolute
+ background var(--outerspace)
+ color var(--ghostD)
+ display flex
+ justify-content center
+ align-items center
+ font-size 11px
+ font-weight 400
+ letter-spacing -0.5px
+ margin-left -0.5px
+ top -0.5px
+
+ img
+ position relative
+ height 28px
+ width 28px
+ border-radius 20px
+ margin-right 12px
+ border 2px solid var(--ghostC)
+ background var(--ghostC)
+ overflow hidden
+
+ .customTokensListItemText
+ display flex
+ flex-direction column
+ align-items flex-start
+ justify-content flex-start
+ margin-left 12px
+
+ .customTokensListItemSymbol
+ font-weight 400
+ margin-bottom 1px
+ margin-top 2px
+ font-size 16px
+ font-family 'MainFont'
+ line-height 13px
+ letter-spacing 1px
+
+ .customTokensListItemSub
+ // margin-left 5px
+ font-weight 400
+ margin-top 4px
+ margin-bottom 1px
+ margin-left 0px
+ font-size 12px
+ font-weight 400
+ font-family 'MainFont'
+ color var(--outerspace05)
+ line-height 12px
+
+ .customTokensListItemChain
+ display flex
+ justify-content center
+ align-items center
+ font-size 18px
+ font-weight 500
+
+ .customTokensListItemChainLabel
+ font-size 10px
+ text-transform uppercase
+ margin 0px 5px 0px 1px
+ font-weight 400
+ margin-top 1px
+ font-weight 400
+
+ .customTokensListItemAddress
+ display flex
+ justify-content center
+ align-items center
+ font-size 12.5px
+ height 26px
+ margin 0px 10px
+ border-radius 9px
+ font-family 'FiraCode'
+ background var(--ghostB)
+ // border-radius 12px
+ // margin 0px 3px 0px 3px
+ padding-top 1px
+ cursor pointer
+ *
+ pointer-events none
+
+ .customTokensListItemBottom
+ height 40px
+ display flex
+ align-items center
+ padding 0px 10px
+ font-size 12px
+
+ .customTokensListItemButton
+ display flex
+ justify-content center
+ align-items center
+ width 50%
+ height 26px
+ box-sizing border-box
+ border-radius 10px
+ cursor pointer
+ text-transform uppercase
+ background var(--ghostB)
+
+ *
+ pointer-events none
+
+ .customTokensListItemButton:hover
+ background var(--ghostC)
+
+ .editButton
+ color var(--good)
+ margin-right 8px
+
+ .removeButton
+ color var(--bad)
+ margin-left 8px
+
+ .customTokensListItemExpanded
+ height 122px
+ // background var(--ghostY)
+
+ .customTokensListItemChainDecimal
+ display flex
+ justify-content center
+ align-items center
+ font-size 18px
+ font-weight 500
diff --git a/app/workspace/dash/Tokens/style/index.styl b/app/workspace/dash/Tokens/style/index.styl
new file mode 100644
index 000000000..716fe387e
--- /dev/null
+++ b/app/workspace/dash/Tokens/style/index.styl
@@ -0,0 +1,2 @@
+@import '../AddToken/style'
+@import '../CustomTokens/style'
\ No newline at end of file
diff --git a/app/workspace/dash/card.styl b/app/workspace/dash/card.styl
new file mode 100644
index 000000000..c92019887
--- /dev/null
+++ b/app/workspace/dash/card.styl
@@ -0,0 +1,50 @@
+@keyframes cardShow
+ 0%
+ opacity 0
+
+ 15.82%
+ opacity 0
+ transform matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -9.026, 0, 0, 1)
+
+ 21.02%
+ transform matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -19.292, 0, 0, 1)
+
+ 35.34%
+ transform matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -3.681, 0, 0, 1)
+
+ 49.55%
+ opacity 1
+ transform matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.594, 0, 0, 1)
+
+ 78.18%
+ transform matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.018, 0, 0, 1)
+
+ 100%
+ transform matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
+
+
+// @keyframes cardHide
+// 0%
+// opacity 1
+// transform translateX(0px)
+
+// 50%
+// opacity 0
+// transform translateX(100px)
+
+// 100%
+// opacity 0
+// transform translateX(500px)
+
+.cardShow
+ animation cardShow 400ms linear both
+ animation-delay 0s
+
+.cardHide
+ // display none
+ // z-index 3000000
+ // animation cardHide 200ms cubic-bezier(.82,0,.12,1) both// 700ms linear both400s normal forwards cubic-bezier(.82,0,.12,1)
+ // transition var(--standardSlower)
+ opacity 0 // !important
+ // transform translateX(500px)
+ pointer-events none
diff --git a/app/workspace/dash/index.styl b/app/workspace/dash/index.styl
new file mode 100644
index 000000000..117f6d031
--- /dev/null
+++ b/app/workspace/dash/index.styl
@@ -0,0 +1,321 @@
+html, body
+ margin 0
+ border 0
+ font-family 'MainFont'
+ font-weight 400
+ -webkit-app-region no-drag
+ overflow hidden
+ color var(--outerspace)
+ background var(--ghostY)
+
+div
+ user-select none
+ cursor default
+
+::-webkit-scrollbar
+ width 0px
+ background transparent
+
+@keyframes showFooter
+ 0%
+ opacity 0
+ transform translateY(4px)
+ 60%
+ opacity 0
+ transform translateY(4px)
+ 100%
+ opacity 1
+ transform translateY(0px)
+
+.dash
+ width 100%
+ height 100%
+ overflow-y scroll
+ overflow-x hidden
+ background var(--ghostA)
+ position relative
+
+ .dashMain
+ position absolute
+ top 80px
+ right 8px
+ bottom 40px
+ left 8px
+ z-index 1000
+ background var(--ghostZ)
+ border-radius 32px
+ padding-bottom 20px
+ transition var(--standard)
+
+ .dashMainScroll
+ position absolute
+ top 0px
+ right 0px
+ bottom 0px
+ left 0px
+ z-index 2000
+ border-radius 32px
+ overflow-y scroll
+ overflow-x hidden
+
+ .dashMainOverlay
+ position absolute
+ top 0px
+ right 0px
+ bottom 0px
+ left 0px
+ border-radius 32px
+ z-index 40000000
+ box-shadow inset 0px 0px 6px var(--ghostY)
+ pointer-events none
+
+ .originTitle
+ margin 30px 8px 5px 0px
+ font-size 18px
+ display flex
+ align-items center
+ font-weight 500
+
+ .originTitleIcon
+ margin 9px 16px
+
+ .originTitleText
+ margin-top -2px
+
+ .clearOriginsButton
+ background var(--ghostA)
+ margin 74px 6px 7px 6px
+ height 38px
+ border-radius 20px
+ font-weight 600
+ box-sizing border-box
+ padding 18px 16px 16px 17px
+ text-align center
+ margin-bottom 5px
+ display flex
+ justify-content center
+ align-items center
+ font-size 13px
+ text-transform uppercase
+ cursor pointer
+ border-bottom 2px solid var(--ghostZ)
+ box-shadow 0px 2px 4px var(--ghostY)
+ letter-spacing 1px
+ transform translateY(0px)
+ *
+ pointer-events none
+
+ .clearOriginsButton:hover
+ background var(--ghostB)
+ box-shadow 0px 4px 8px var(--ghostY)
+ transform translateY(-1px)
+
+ .clearOriginsButton:active
+ background var(--ghostB)
+ box-shadow 0px 1px 2px var(--ghostY)
+ transform translateY(0px)
+
+ .dashFooter
+ background var(--ghostZ)
+ position absolute
+ bottom 40px
+ height 60px
+ left 8px
+ right 8px
+ border-radius 30px
+ padding 3px 3px 1px 3px
+ animation showFooter 0.64s ease-in-out
+ box-sizing border-box
+
+ .dashFooterButton
+ height 56px
+ position relative
+ background var(--ghostA)
+ border-radius 28px
+ display flex
+ justify-content center
+ align-items center
+ cursor pointer
+ font-size 16px
+ box-shadow 0px 2px 4px var(--ghostY)
+ border-bottom 2px solid var(--ghostZ)
+ box-sizing border-box
+ box-sizing border-box
+ letter-spacing 1px
+ color var(--outerspace)
+ font-family 'MainFont'
+ font-weight 500
+ z-index 5
+ transform translateY(0px)
+
+ *
+ pointer-events none
+
+ .newAccountIcon
+ position absolute
+ top 0
+ left 0
+ bottom 0px
+ width 64px
+ font-size 28px
+ display flex
+ justify-content center
+ align-items center
+ font-weight 400
+
+ .newAccount:hover
+ background var(--ghostB)
+
+ .dashFooterButton:hover
+ transform translateY(-1px)
+ box-shadow 0px 4px 8px var(--ghostY)
+ background var(--ghostB)
+
+ .dashFooterButton:active
+ transform translateY(0px)
+ box-shadow 0px 1px 2px var(--ghostY)
+ background var(--ghostB)
+
+ .panelScrollOverlay
+ position absolute
+ top 0px
+ right 0px
+ bottom 0px
+ left 0px
+ border-radius 16px
+ z-index 40000000
+ box-shadow inset 0px 0px 6px var(--ghostX)
+ pointer-events none
+
+ .addAccounts
+ position absolute
+ top 0px
+ left 0
+ right 0
+ bottom 0
+ background var(--ghostZ)
+ z-index 4000
+ overflow-y scroll
+ overflow-x hidden
+ padding-bottom 60px
+
+ .addAccountsHeader
+ .addAccountsHeaderTitle
+ margin-top 20px
+ margin-bottom 20px
+ font-size 14px
+ font-weight 500
+ height 50px
+ display flex
+ justify-content center
+ align-items center
+
+ .addAccountsHeaderClose
+ position absolute
+ top 18px
+ right 10px
+ border-radius 8px
+ cursor pointer
+ background var(--ghostB)
+ width 90px
+ height 30px
+ display flex
+ justify-content center
+ align-items center
+ text-transform uppercase
+ font-size 11px
+ letter-spacing 1px
+ font-weight 400
+ padding-bottom 1px
+ padding-left 1px
+ display none
+
+ *
+ pointer-events none
+
+ .addAccountsHeaderClose:hover
+ background var(--ghostC)
+
+ .accountTypeSelect
+ height 100px
+ font-weight 500
+ border-radius 27px
+ margin 6px 6px 8px 6px
+ display flex
+ justify-content center
+ align-items center
+ cursor pointer
+ background var(--ghostA)
+ box-shadow 0px 4px 8px var(--ghostY)
+ font-size 16px
+ border-bottom 2px solid var(--ghostZ)
+ transform translateY(0px)
+ position relative
+ *
+ pointer-event none
+
+ .accountTypeSelectIcon
+ margin-right 16px
+
+ .accountTypeSelect:hover
+ transform translateY(-1px)
+ box-shadow 0px 4px 12px var(--ghostY)
+ background var(--ghostB)
+ z-index 200
+
+ .accountTypeSelect:active
+ transform translateY(0px)
+ box-shadow 0px 2px 4px var(--ghostY)
+ z-index 201
+
+ // .signers
+ // width 100%
+
+ // .signersHeader
+ // width calc(100% - 32px)
+ // display flex
+ // justify-content center
+ // align-items center
+ // position relative
+ // height 32px
+ // margin 0px 16px 12px 16px
+ // box-sizing border-box
+ // font-size 12px
+ // text-transform uppercase
+ // letter-spacing 1px
+ // font-weight 500
+
+ // .noSigners
+ // position relative
+ // width 100%
+ // height 48px
+ // overflow hidden
+ // background var(--ghostA)
+ // box-sizing border-box
+ // margin 0px 0px 40px 0px
+ // border-radius 12px
+ // display flex
+ // justify-content center
+ // align-items center
+ // font-size 11px
+ // font-weight 500
+ // letter-spacing 2px
+ // text-transform uppercase
+ // box-shadow 0px 4px 8px var(--ghostY)
+
+ // .signersMid
+ // padding 0px 6px 64px 6px
+
+ // .signersList
+ // display flex
+ // flex-wrap wrap
+
+@import './Chains/style'
+@import './Dapps/style'
+@import './Command/style'
+@import './Main/style'
+@import './Accounts/Add/style'
+@import './Signer/style'
+@import './Notify/style'
+@import './Tokens/style'
+@import './card.styl'
diff --git a/app/dapp/index.dev.html b/app/workspace/index.dev.html
similarity index 92%
rename from app/dapp/index.dev.html
rename to app/workspace/index.dev.html
index 67ebf5bff..f13de30f1 100644
--- a/app/dapp/index.dev.html
+++ b/app/workspace/index.dev.html
@@ -13,12 +13,12 @@
object-src 'none';
"
/>
-
Dapp
+
Workspace
-
+