diff --git a/CHANGELOG.md b/CHANGELOG.md index cca16f762..ef201aeae 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,13 @@ +## 1.0.0 + - Features Added + - Show active proposal status on the Proposal History page + - Show sidebar links to switch Alchemy versions and between mainnet and xDai + - Show Alchemy 2.0 announcement banner + + - Bugs Fixed + - fix display of certain token balances on Proposal cards and details + - fix display of contribution rewards in the redemptions tooltip over the Redeem button + ## 0.10.17 - Bugs Fixed - Fixed issues with automated update of blockchain data by switching from a websocket to a polling interface with the subgraph diff --git a/data/tokens.json b/data/tokens.json index d5604a38a..0a55c463c 100644 --- a/data/tokens.json +++ b/data/tokens.json @@ -33,7 +33,7 @@ "name": "Paxos Standard", "symbol": "PAX" }, - "0x0000000000085d4780B73119b644AE5ecd22b376": { + "0x0000000000085d4780b73119b644ae5ecd22b376": { "decimals": 18, "name": "TrueUSD", "symbol": "TUSD" @@ -63,7 +63,7 @@ "name": "Centrality Token", "symbol": "CENNZ" }, - "0x859401b46E0f8b1CdF5432Af4b1426a8a5E5e0C8": { + "0x859401b46e0f8b1cdf5432af4b1426a8a5e5e0c8": { "decimals": 18, "name": "i4 token", "symbol": "GEMS" @@ -114,7 +114,7 @@ "name": "USD Coin", "symbol": "USDC" }, - "0x3426d85D140c85C5ebB6E4D343C5be8e4E001869": { + "0x3426d85d140c85c5ebb6e4d343c5be8e4e001869": { "decimals": 18, "name": "API3 token", "symbol": "API3" diff --git a/package-lock.json b/package-lock.json index ae9b5f993..6ca1d76fb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "alchemy-client", - "version": "0.10.17", + "version": "1.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 2eada9200..a1a2ff264 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "alchemy-client", - "version": "0.10.17", + "version": "1.0.0", "description": "An app for collaborative networks (DAOs), based on the DAO stack.", "author": "DAOstack", "license": "GPL-3.0", diff --git a/src/assets/styles/global-variables.scss b/src/assets/styles/global-variables.scss index ebbd5dde3..dbbc00cfe 100644 --- a/src/assets/styles/global-variables.scss +++ b/src/assets/styles/global-variables.scss @@ -1,37 +1,37 @@ /* global-variables.scss */ $bg-color: gray; -$black: rgba(0, 0, 0, 1.000); -$black-septone: rgba(0, 0, 0, .6); -$black-halftone: rgba(0, 0, 0, .5); -$black-thirdtone: rgba(0, 0, 0, .3); -$black-tenthtone: rgba(0, 0, 0, .1); -$gray-border: 1px solid rgba(151, 151, 151, 1.000); -$gray-border-halftone: 1px solid rgba(151, 151, 151, .5); -$proposal-item-border-bottom: 2px solid rgba(234, 234, 234, 1.000); -$form-field-outline: 1px solid rgba(195, 191, 204, 1.000); +$black: rgba(0, 0, 0, 1); +$black-septone: rgba(0, 0, 0, 0.6); +$black-halftone: rgba(0, 0, 0, 0.5); +$black-thirdtone: rgba(0, 0, 0, 0.3); +$black-tenthtone: rgba(0, 0, 0, 0.1); +$gray-border: 1px solid rgba(151, 151, 151, 1); +$gray-border-halftone: 1px solid rgba(151, 151, 151, 0.5); +$proposal-item-border-bottom: 2px solid rgba(234, 234, 234, 1); +$form-field-outline: 1px solid rgba(195, 191, 204, 1); $white: rgba(255, 255, 255, 1); -$white-halftone: rgba(255, 255, 255, .5); +$white-halftone: rgba(255, 255, 255, 0.5); $white-transparent: rgba(255, 255, 255, 0); -$accent-1: rgba(58, 180, 208, 1.000); -$accent-1-halftone: rgba(58, 180, 208, .5); +$accent-1: rgba(58, 180, 208, 1); +$accent-1-halftone: rgba(58, 180, 208, 0.5); $accent-1-transparent: rgba(58, 180, 208, 0); -$accent-2: rgba(242, 175, 90, 1.000); -$accent-2-halftone: rgba(242, 175, 90, .5); -$accent-3: rgba(255, 0, 72, 1.000); -$accent-3-halftone: rgba(255, 0, 72, .5); -$accent-4: rgba(46, 168, 122, 1.000); -$accent-4-halftone: rgba(46, 168, 122, .5); +$accent-2: rgba(242, 175, 90, 1); +$accent-2-halftone: rgba(242, 175, 90, 0.5); +$accent-3: rgba(255, 0, 72, 1); +$accent-3-halftone: rgba(255, 0, 72, 0.5); +$accent-4: rgba(46, 168, 122, 1); +$accent-4-halftone: rgba(46, 168, 122, 0.5); $accent-4-transparent: rgba(46, 168, 122, 0); $body-font: "Open Sans"; $heading-1-font: "AccordBold"; -$shadow-1: 0 2px 4px 0 rgba(12,0,51,0.10); -$shadow-2: 0 8px 16px 0 rgba(12,0,51,0.10); -$shadow-3: 0 24px 32px 0 rgba(12,0,51,0.10); +$shadow-1: 0 2px 4px 0 rgba(12, 0, 51, 0.1); +$shadow-2: 0 8px 16px 0 rgba(12, 0, 51, 0.1); +$shadow-3: 0 24px 32px 0 rgba(12, 0, 51, 0.1); -$border-bottom-divider: 1px solid rgba(246, 246, 246, 1.000); +$border-bottom-divider: 1px solid rgba(246, 246, 246, 1); $bold: 700; $normal: 400; @@ -52,18 +52,19 @@ $max-width: 1080px; /* Alchemy Earth styles */ -$navy: rgba(18, 46, 91, 1.000); -$sky: rgba(49, 120, 202, 1.000); -$accent-1: rgba(3, 118, 255, 1.000); /* Bright blue */ -$accent-2: rgba(246, 80, 80, 1.000); /* Red */ -$accent-3: rgba(0, 190, 144, 1.000); /* Green */ -$accent-4: rgba(242, 192, 0, 1.000); /* Yellow */ -$accent-5: rgba(231, 240, 255, 1.000); /* Powder Blue */ -$accent-6: rgba(229, 235, 242, 1.000); /* Light blue background */ -$black: rgba(0, 29, 53, 1.000); -$subhead: rgba(155, 170, 182, 1.000); -$border-accent: rgba(170, 195, 227, 1.000); /* For hovers */ -$body-color: rgba(78, 97, 118, 1.000); -$gray-1: rgba(154, 169, 181, 1.000); -$gray-2: rgba(191, 203, 213, 1.000); +$navy: rgba(18, 46, 91, 1); +$sky: rgba(49, 120, 202, 1); +$accent-1: rgba(3, 118, 255, 1); /* Bright blue */ +$accent-2: rgba(246, 80, 80, 1); /* Red */ +$accent-3: rgba(0, 190, 144, 1); /* Green */ +$accent-4: rgba(242, 192, 0, 1); /* Yellow */ +$accent-5: rgba(231, 240, 255, 1); /* Powder Blue */ +$accent-6: rgba(229, 235, 242, 1); /* Light blue background */ +$black: rgba(0, 29, 53, 1); +$subhead: rgba(155, 170, 182, 1); +$border-accent: rgba(170, 195, 227, 1); /* For hovers */ +$body-color: rgba(78, 97, 118, 1); +$gray-1: rgba(154, 169, 181, 1); +$gray-2: rgba(191, 203, 213, 1); $gray-border-2: 1px solid $gray-2; +$banner-background: #d5d8ba; diff --git a/src/components/Dao/Dao.scss b/src/components/Dao/Dao.scss index ecb4f1e0a..562cb1043 100644 --- a/src/components/Dao/Dao.scss +++ b/src/components/Dao/Dao.scss @@ -124,22 +124,15 @@ button:hover { flex-grow: 2; background-color: white; padding: 11px 8px; - color: rgba(78, 97, 118, 1); - font-size: 11px; - text-align: left; + color: $black; + font-size: 12px; + font-weight: 500; + text-align: center; font-family: "Open Sans"; width: 100%; - div { - padding-left: 15px; - - img { - margin-right: 8px; - } - - b { - color: $accent-3; - } + a { + text-decoration: underline; } .notice::after { @@ -147,13 +140,6 @@ button:hover { clear: both; display: table; } - .closeNotice { - position: absolute; - border: none; - outline: none; - right: 6px; - top: 13px; - } } .membersContainer { @@ -291,24 +277,8 @@ a { } .notice { - font-size: 10px; - padding-right: 70px; + font-size: 11px; box-shadow: 0 2px 16px 0 rgba(133, 168, 208, 0.4); - - div { - padding-left: 0; - - img { - height: 18px; - float: left; - position: relative; - top: 5px; - } - } - - .closeNotice { - background-color: transparent; - } } } diff --git a/src/components/Dao/DaoContainer.tsx b/src/components/Dao/DaoContainer.tsx index 9486817df..08511294b 100644 --- a/src/components/Dao/DaoContainer.tsx +++ b/src/components/Dao/DaoContainer.tsx @@ -23,7 +23,7 @@ import DaoHistoryPage from "./DaoHistoryPage"; import DaoMembersPage from "./DaoMembersPage"; import * as css from "./Dao.scss"; import DaoLandingPage from "components/Dao/DaoLandingPage"; -import { standardPolling } from "lib/util"; +import { standardPolling, targetedNetwork } from "lib/util"; type IExternalProps = RouteComponentProps; @@ -73,7 +73,7 @@ class DaoContainer extends React.Component { />; private daoCrxProposalRoute = (routeProps: any) => ; @@ -85,6 +85,7 @@ class DaoContainer extends React.Component { public render(): RenderOutput { const daoState = this.props.data[0]; + const network = targetedNetwork(); return (
@@ -99,11 +100,9 @@ class DaoContainer extends React.Component {
-
-
- - Alchemy and Arc are in Alpha. There will be BUGS! We don't guarantee complete security. *Play at your own risk* -
+
Alchemy 2.0 has been released! Take a look here.
@@ -144,7 +143,7 @@ class DaoContainer extends React.Component { const SubscribedDaoContainer = withSubscription({ wrappedComponent: DaoContainer, - loadingComponent: , + loadingComponent: , errorComponent: (props) =>
{props.error.message}
, checkForUpdate: ["daoAvatarAddress"], createObservable: (props: IExternalProps) => { diff --git a/src/components/Dao/DaoHistoryPage.scss b/src/components/Dao/DaoHistoryPage.scss index 3d6d8ef08..f8d7428a4 100644 --- a/src/components/Dao/DaoHistoryPage.scss +++ b/src/components/Dao/DaoHistoryPage.scss @@ -19,6 +19,9 @@ font-size: 12px; font-weight: bold; text-align: left; + .status { + text-align: center; + } } .searchBox { diff --git a/src/components/Dao/DaoHistoryPage.tsx b/src/components/Dao/DaoHistoryPage.tsx index eb1fdbbc1..6064e19af 100644 --- a/src/components/Dao/DaoHistoryPage.tsx +++ b/src/components/Dao/DaoHistoryPage.tsx @@ -30,8 +30,7 @@ interface IState { type SubscriptionData = Array; type IProps = IExternalProps & IState & ISubscriptionProps; -const ProposalsHTML = (props: -{ +const ProposalsHTML = (props: { proposals: Array; history: any; daoState: IDAOState; @@ -141,7 +140,7 @@ class DaoHistoryPage extends React.Component { Title Votes Predictions - Status + Status My actions diff --git a/src/components/Daos/Daos.scss b/src/components/Daos/Daos.scss index e0da554b5..57db0b360 100644 --- a/src/components/Daos/Daos.scss +++ b/src/components/Daos/Daos.scss @@ -6,7 +6,7 @@ .paddingTop { position: sticky; - top: 50px; + top: 82px; height: 35px; z-index: 2; background-color: #e5ebf2; @@ -15,7 +15,7 @@ .topRow { display: flex; position: sticky; - top: 85px; + top: 117px; z-index: 2; background-color: rgba(229, 235, 242, 1); @@ -56,7 +56,7 @@ .otherDaos { .headerWrapper { position: sticky; - top: 138px; + top: 170px; z-index: 1; } @@ -78,14 +78,12 @@ color: rgb(104, 155, 214); padding-left: 25px; font-size: 25px; - &:hover { cursor: pointer; color: rgba(3, 118, 255, 1); } } - } .daoList { padding-top: 30px; diff --git a/src/components/Proposal/ProposalHistoryRow.scss b/src/components/Proposal/ProposalHistoryRow.scss index 9cbb34e0b..779a5ccec 100644 --- a/src/components/Proposal/ProposalHistoryRow.scss +++ b/src/components/Proposal/ProposalHistoryRow.scss @@ -32,28 +32,27 @@ } .title { - color: rgba(80, 97, 118, 1.000); + color: rgba(80, 97, 118, 1); a { - color: rgba(80, 97, 118, 1.000); + color: rgba(80, 97, 118, 1); } a:visited { - color: rgba(80, 97, 118, 1.000); + color: rgba(80, 97, 118, 1); } } .closeReason { - position: relative; - - .decisionPassed, .decisionFailed { + text-align: center; + .decisionPassed, + .decisionFailed { display: none; img { + display: block; + margin: auto; width: 15px; - position: relative; - top: 4px; - margin-right: 5px; } } @@ -62,22 +61,35 @@ } } -.closeReason.decisionPassed .decisionPassed, .closeReason.decisionFailed .decisionFailed { +.closeReason.decisionPassed .decisionPassed, +.closeReason.decisionFailed .decisionFailed, +.closeReason .decisionInProgress { display: block; } -.predictions, .votes, .myActions { - .myVote, .myStake, .passVote, .failVote, .forStake, .againstStake { +.predictions, +.votes, +.myActions { + .myVote, + .myStake, + .passVote, + .failVote, + .forStake, + .againstStake { display: none; } } -.myActions.iVoted .myVote, .myActions.iStaked .myStake { +.myActions.iVoted .myVote, +.myActions.iStaked .myStake { display: block; padding-bottom: 5px; } -.myActions.forStake .forStake, .myActions.againstStake .againstStake, .myActions.passVote .passVote, .myActions.failVote .failVote { +.myActions.forStake .forStake, +.myActions.againstStake .againstStake, +.myActions.passVote .passVote, +.myActions.failVote .failVote { display: inline-block; margin-left: 7px; position: relative; @@ -85,7 +97,7 @@ } .myActions { - color: rgba(80, 97, 118, 1.000); + color: rgba(80, 97, 118, 1); padding-top: 10px; text-align: center; } @@ -113,6 +125,7 @@ td { display: inline-block; + text-align: center; } .scheme { @@ -137,18 +150,6 @@ font-size: 13px; } - .closeReason { - - } - - .votes { - - } - - .predictions { - - } - .closeReason .decisionReason { display: block; } diff --git a/src/components/Proposal/ProposalHistoryRow.tsx b/src/components/Proposal/ProposalHistoryRow.tsx index 2573d07dc..99457d638 100644 --- a/src/components/Proposal/ProposalHistoryRow.tsx +++ b/src/components/Proposal/ProposalHistoryRow.tsx @@ -1,4 +1,4 @@ -import { Address, IDAOState, IExecutionState, IMemberState, IProposalOutcome, IProposalState, Stake, Vote, Proposal } from "@daostack/arc.js"; +import { Address, IDAOState, IExecutionState, IMemberState, IProposalOutcome, IProposalState, Stake, Vote, Proposal, IProposalStage } from "@daostack/arc.js"; import classNames from "classnames"; import AccountPopup from "components/Account/AccountPopup"; import AccountProfileName from "components/Account/AccountProfileName"; @@ -95,6 +95,8 @@ class ProposalHistoryRow extends React.Component { let currentAccountPrediction = 0; let currentAccountStakeAmount = new BN(0); let currentAccountVoteAmount = new BN(0); + const passed = proposalPassed(proposalState); + const failed = proposalFailed(proposalState); let currentVote: Vote; if (votesOfCurrentUser.length > 0) { @@ -122,8 +124,8 @@ class ProposalHistoryRow extends React.Component { const closeReasonClass = classNames({ [css.closeReason]: true, - [css.decisionPassed]: proposalPassed(proposalState), - [css.decisionFailed]: proposalFailed(proposalState), + [css.decisionPassed]: passed, + [css.decisionFailed]: failed, }); let closeReason = "Time out"; @@ -147,7 +149,7 @@ class ProposalHistoryRow extends React.Component { - + {closingTime(proposalState) ? closingTime(proposalState).format("MMM D, YYYY") : ""} @@ -174,31 +176,32 @@ class ProposalHistoryRow extends React.Component { /> -
- - Passed -
- {closeReason} + {(passed || failed) ? +
+ + {passed ? "Passed" : "Failed"} +
+ {closeReason} +
+
: +
+ {(proposalState.stage === IProposalStage.Queued) ? "Queued" : + (proposalState.stage === IProposalStage.PreBoosted) ? "PreBoosted" : + ((proposalState.stage === IProposalStage.Boosted) || + (proposalState.stage === IProposalStage.QuietEndingPeriod)) ? "Boosted" : ""}
-
-
- - Failed -
- {closeReason} -
-
+ }
{formatTokens(currentAccountVoteAmount, "Rep")} - - + +
{formatTokens(currentAccountStakeAmount, "GEN")} - - + +
@@ -212,7 +215,7 @@ const ConnectedProposalHistoryRow = connect(mapStateToProps)(ProposalHistoryRow) export default withSubscription({ wrappedComponent: ConnectedProposalHistoryRow, loadingComponent: (props) => Loading proposal {props.proposal.id.substr(0, 6)}..., - errorComponent: (props) => { props.error.message }, + errorComponent: (props) => {props.error.message}, checkForUpdate: ["currentAccountAddress"], createObservable: (props: IExternalProps) => { const proposal = props.proposal; @@ -226,10 +229,10 @@ export default withSubscription({ } else { return combineLatest( proposal.state(), - proposal.stakes({ where: { staker: props.currentAccountAddress}}), - proposal.votes({ where: { voter: props.currentAccountAddress }}), + proposal.stakes({ where: { staker: props.currentAccountAddress } }), + proposal.votes({ where: { voter: props.currentAccountAddress } }), // we set 'fetchPolicy' to 'cache-only' so as to not send queries for addresses that are not members. The cache is filled higher up. - props.daoState.dao.member(props.currentAccountAddress).state({ fetchPolicy: "cache-only"}), + props.daoState.dao.member(props.currentAccountAddress).state({ fetchPolicy: "cache-only" }), ); } }, diff --git a/src/layouts/App.scss b/src/layouts/App.scss index d3e8bacbd..ddf4148e3 100644 --- a/src/layouts/App.scss +++ b/src/layouts/App.scss @@ -23,7 +23,11 @@ body { .outer { width: 100%; height: 100%; - padding-top: 50px; + padding-top: 82px; + + &.withDAO { + padding-top: 50px; + } } .container { @@ -102,412 +106,440 @@ body { transition: opacity 1000ms ease-in; } -.header { - width: 100%; - position: fixed; - vertical-align: middle; - background-color: $navy; - height: 50px; - z-index: 10; - top: 0; - color: rgba(255, 255, 255, 1); - display: flex; - - /** the following is only meant to apply to the toggle button in the header **/ - :global { - .react-toggle.react-toggle--checked .react-toggle-track { - background-color: #0076ff !important; - } +.headerContainer { + .banner { + position: fixed; + display: none; + top: 0; + height: 32px; + width: 100%; + padding-top: 8px; + padding-bottom: 8px; + text-align: center; + color: $black; + background-color: $banner-background; + z-index: 10; - .react-toggle-thumb { - background-image: url(/assets/images/Icon/info-i.svg); - background-color: transparent !important; - background-size: 20px 20px; + &.show { + display: block; } } - .logoContainer { - margin: 0 auto; - width: 230px; - } - - .menu { - position: absolute; - width: 50px; + .header { + width: 100%; + position: fixed; + vertical-align: middle; + background-color: $navy; height: 50px; - transition: all 0.25s ease; + z-index: 10; + top: 0; + color: rgba(255, 255, 255, 1); + display: flex; - img { - position: absolute; - z-index: 100; - left: 15px; - top: 10px; - height: 30px; - transition: all 0.25s ease; - } - } + /** the following is only meant to apply to the toggle button in the header **/ + :global { + .react-toggle.react-toggle--checked .react-toggle-track { + background-color: #0076ff !important; + } - .alchemyLogo { - float: left; - padding: 9px; + .react-toggle-thumb { + background-image: url(/assets/images/Icon/info-i.svg); + background-color: transparent !important; + background-size: 20px 20px; + } + } - img { - height: 30px; + .logoContainer { + margin: 0 auto; + width: 230px; } - } - .version { - color: rgba(255, 255, 255, 0.8); - line-height: 50px; + .menu { + position: absolute; + width: 50px; + height: 50px; + transition: all 0.25s ease; - em { - font-style: normal; + img { + position: absolute; + z-index: 100; + left: 15px; + top: 10px; + height: 30px; + transition: all 0.25s ease; + } } - span { - color: rgba(255, 255, 255, 0.3); + .alchemyLogo { + float: left; + padding: 9px; + + img { + height: 30px; + } } - } - .alert { - color: white; - background-color: #44aa44; - width: 100%; - top: 60px; - position: absolute; - text-align: center; - font-weight: bold; - padding: 2px 0; - } + .version { + color: rgba(255, 255, 255, 0.8); + line-height: 50px; - .redemptionsButton { - margin: 13px 0 14px 20px; - } + em { + font-style: normal; + } - .toggleButton { - margin: 13px 0 14px auto; - } + span { + color: rgba(255, 255, 255, 0.3); + } + } - .accountInfoContainer { - display: inline-block; - padding: 0 15px; - height: 50px; - vertical-align: middle; - } + .alert { + color: white; + background-color: #44aa44; + width: 100%; + top: 60px; + position: absolute; + text-align: center; + font-weight: bold; + padding: 2px 0; + } - .accountInfo { - position: relative; - display: inline-block; - text-align: center; - width: auto; - padding: 0 20px; - transition: all 0.25s ease; - height: 50px; + .redemptionsButton { + margin: 13px 0 14px 20px; + } - > span { - height: 50px; + .toggleButton { + margin: 13px 0 14px auto; + } + + .accountInfoContainer { display: inline-block; + padding: 0 15px; + height: 50px; vertical-align: middle; } - .accountImage { - border: none; - background: transparent; - padding: 0; - margin: 0 0 0 0; + .accountInfo { position: relative; - top: 14px; + display: inline-block; + text-align: center; + width: auto; + padding: 0 20px; + transition: all 0.25s ease; + height: 50px; - &:hover { - cursor: pointer; + > span { + height: 50px; + display: inline-block; + vertical-align: middle; } - img { - width: 20px; - height: 20px; - border-radius: 3px; - } - } + .accountImage { + border: none; + background: transparent; + padding: 0; + margin: 0 0 0 0; + position: relative; + top: 14px; - .profileName { - text-align: left; - font-size: 13px; + &:hover { + cursor: pointer; + } - a { - color: rgba(0, 29, 53, 1); - padding: 0 0 0 15px; + img { + width: 20px; + height: 20px; + border-radius: 3px; + } } - } - .wallet { - position: absolute; - width: 270px; - top: 50px; - transform: scaleY(0); - transform-origin: top; - transition: transform 0.25s ease; - right: 12px; - font-size: 12px; - color: rgba(78, 97, 118, 1); - background-color: rgba(252, 253, 255, 1); - border-radius: 0 0 8px 8px; - box-shadow: 0 2px 16px 0 rgba(133, 168, 208, 0.27); + .profileName { + text-align: left; + font-size: 13px; - .walletImage { - float: left; + a { + color: rgba(0, 29, 53, 1); + padding: 0 0 0 15px; + } } - .pointer { - width: 12px; - height: 12px; - transform: rotate(45deg); - background-color: rgba(252, 253, 255, 1); + .wallet { position: absolute; - top: -3px; + width: 270px; + top: 50px; + transform: scaleY(0); + transform-origin: top; + transition: transform 0.25s ease; right: 12px; - } - - .walletDetails { - position: relative; - padding-bottom: 5px; - border-bottom: 1px solid rgba(229, 235, 242, 1); - padding: 25px; + font-size: 12px; + color: rgba(78, 97, 118, 1); + background-color: rgba(252, 253, 255, 1); + border-radius: 0 0 8px 8px; + box-shadow: 0 2px 16px 0 rgba(133, 168, 208, 0.27); .walletImage { - &.greyscale img { - filter: grayscale(100%); - } + float: left; } - .fullProfile { - text-align: left; - - a { - padding: 5px 0 0 15px; - color: rgba(1, 112, 255, 1); - font-size: 11px; - font-weight: bold; - font-family: "Open Sans"; - } + .pointer { + width: 12px; + height: 12px; + transform: rotate(45deg); + background-color: rgba(252, 253, 255, 1); + position: absolute; + top: -3px; + right: 12px; } - } - .balances { - text-align: left; - padding-left: 25px; - padding-right: 25px; - padding-top: 20px; - border-bottom: 1px solid $accent-6; - font-size: 11px; - color: $body-color; - font-weight: normal; - font-family: "Open Sans"; - - .userBalance, - .repBalance { - .heading { - font-size: 13px; - color: $black; - margin: 0; - margin-bottom: 3px; - font-weight: bold; + .walletDetails { + position: relative; + padding-bottom: 5px; + border-bottom: 1px solid rgba(229, 235, 242, 1); + padding: 25px; + + .walletImage { + &.greyscale img { + filter: grayscale(100%); + } } - } - .noReputation { - font-size: 11px; - color: rgba(130, 144, 158, 1); - } + .fullProfile { + text-align: left; - .userBalance { - padding-bottom: 20px; + a { + padding: 5px 0 0 15px; + color: rgba(1, 112, 255, 1); + font-size: 11px; + font-weight: bold; + font-family: "Open Sans"; + } + } } - .repBalance { - font-size: 12px; - margin-bottom: 20px; - background-color: rgba(252, 253, 255, 1); + .balances { + text-align: left; + padding-left: 25px; + padding-right: 25px; + padding-top: 20px; + border-bottom: 1px solid $accent-6; + font-size: 11px; + color: $body-color; font-weight: normal; font-family: "Open Sans"; - .rep { - display: flex; + .userBalance, + .repBalance { + .heading { + font-size: 13px; + color: $black; + margin: 0; + margin-bottom: 3px; + font-weight: bold; + } + } - .underline { - flex-grow: 2; - border-bottom: 1px dashed $gray-2; - margin-left: 4px; - margin-right: 4px; + .noReputation { + font-size: 11px; + color: rgba(130, 144, 158, 1); + } + + .userBalance { + padding-bottom: 20px; + } + + .repBalance { + font-size: 12px; + margin-bottom: 20px; + background-color: rgba(252, 253, 255, 1); + font-weight: normal; + font-family: "Open Sans"; + + .rep { + display: flex; + + .underline { + flex-grow: 2; + border-bottom: 1px dashed $gray-2; + margin-left: 4px; + margin-right: 4px; + } } } } - } - .copyAddress { - margin: 2px 0 0 15px; - position: relative; - overflow: hidden; - text-align: right; - - .accountAddress { - display: inline-block; - max-width: 136px; + .copyAddress { + margin: 2px 0 0 15px; + position: relative; overflow: hidden; - text-overflow: ellipsis; - color: rgba(78, 97, 118, 1); - font-family: "Open Sans"; - font-size: 11px; + text-align: right; + + .accountAddress { + display: inline-block; + max-width: 136px; + overflow: hidden; + text-overflow: ellipsis; + color: rgba(78, 97, 118, 1); + font-family: "Open Sans"; + font-size: 11px; + } } - } - .testAccounts { - padding: 12px; - position: relative; - } - - select { - margin-right: -5px; - border: none; - background: transparent; - position: absolute; - width: 177px; - top: 12px; - opacity: 0; - cursor: pointer; - z-index: 1; - height: 25px; - } + .testAccounts { + padding: 12px; + position: relative; + } - .selectTestAccount { - border: 1px solid $white-halftone; - padding: 5px 8px; - background: none; - color: rgba(0, 29, 53, 1); - display: block; - position: relative; - z-index: 0; - width: 100%; - } + select { + margin-right: -5px; + border: none; + background: transparent; + position: absolute; + width: 177px; + top: 12px; + opacity: 0; + cursor: pointer; + z-index: 1; + height: 25px; + } - .logoutButtonContainer { - padding-left: 2px; - padding-right: 17px; - padding-top: 15px; - padding-bottom: 18px; - text-align: right; + .selectTestAccount { + border: 1px solid $white-halftone; + padding: 5px 8px; + background: none; + color: rgba(0, 29, 53, 1); + display: block; + position: relative; + z-index: 0; + width: 100%; + } - .web3ProviderLogoutSection { - display: flex; - padding-left: 18px; - align-items: center; + .logoutButtonContainer { + padding-left: 2px; + padding-right: 17px; + padding-top: 15px; + padding-bottom: 18px; + text-align: right; - .provider { - text-align: left; - flex-grow: 1; + .web3ProviderLogoutSection { + display: flex; + padding-left: 18px; + align-items: center; + + .provider { + text-align: left; + flex-grow: 1; + + .title { + font-weight: bold; + font-size: 13px; + color: #001d35; + margin-bottom: 2px; + } + + .name { + font-size: 11px; + color: #4e6176; + font-weight: normal; + font-family: "Open Sans"; + } + } - .title { - font-weight: bold; - font-size: 13px; - color: #001d35; - margin-bottom: 2px; + .providerconfig { + flex-grow: 2; + text-align: left; } - .name { - font-size: 11px; - color: #4e6176; - font-weight: normal; - font-family: "Open Sans"; + .web3ProviderLogInOut { + flex-grow: 1; } } + } - .providerconfig { - flex-grow: 2; - text-align: left; + .web3ProviderLogInOut { + display: inline-block; + + .text { + color: $accent-1; + white-space: nowrap; + cursor: pointer; + display: inline-block; + margin-right: 4px; } - .web3ProviderLogInOut { - flex-grow: 1; + img { + top: 2px; + position: relative; + height: 12px; } } } + } - .web3ProviderLogInOut { - display: inline-block; + .accountInfoContainer:hover { + background-color: rgba(10, 28, 61, 1); - .text { - color: $accent-1; - white-space: nowrap; - cursor: pointer; - display: inline-block; - margin-right: 4px; - } - - img { - top: 2px; - position: relative; - height: 12px; - } + + .wallet { + transform: scaleY(1); } } - } - .accountInfoContainer:hover { - background-color: rgba(10, 28, 61, 1); - - + .wallet { + .wallet:hover { transform: scaleY(1); } - } - .wallet:hover { - transform: scaleY(1); - } - - .etherBalance { - display: inline; - } + .etherBalance { + display: inline; + } - .openTour { - position: relative; - top: 2px; - padding: 0 10px; - display: inline-block; - border: none; - outline: none; - background: none; + .openTour { + position: relative; + top: 2px; + padding: 0 10px; + display: inline-block; + border: none; + outline: none; + background: none; - &:hover { - cursor: pointer; + &:hover { + cursor: pointer; + } } - } - .profileLink { - display: inline-block; + .profileLink { + display: inline-block; - .walletImage { - &.greyscale img { - filter: grayscale(100%); + .walletImage { + &.greyscale img { + filter: grayscale(100%); + } } - } - a { - color: white; - font-size: 13px; - position: relative; - right: 12px; - } + a { + color: white; + font-size: 13px; + position: relative; + right: 12px; + } - &.noAccount { - margin-right: 10px; - opacity: 0.5; + &.noAccount { + margin-right: 10px; + opacity: 0.5; + } + } + &:after { + clear: both; + content: ""; + display: table; } } } -.header:after { - clear: both; - content: ""; - display: table; +.headerContainer.showBanner { + .banner { + display: block; + } + .header { + top: 32px; + } } .pendingTransactions { @@ -707,16 +739,41 @@ body { .headerContainer { z-index: 0; + + &:hover { + z-index: 1000; + } + + .header { + .menu { + position: absolute; + left: 0; + right: 0; + margin: 0 auto; + } + + .redemptionsButton { + margin-left: 12px; + } + + .toggleButton { + margin-left: 52px; + } + + .accountInfo { + margin-left: auto; + } + + .profileLink a { + display: none; + } + } } .outer { z-index: 1000000; } - .headerContainer:hover { - z-index: 1000; - } - .topInfo { display: block; position: absolute; @@ -744,36 +801,11 @@ body { } } - .header { - .menu { - position: absolute; - left: 0; - right: 0; - margin: 0 auto; - } - - .redemptionsButton { - margin-left: 12px; - } - - .toggleButton { - margin-left: 52px; - } - - .accountInfo { - margin-left: auto; - } - } - .topInfo a, .topInfo a:visited { color: #001c34; } - .header .profileLink a { - display: none; - } - .web3ProviderLogin button { span.connectButtonText { display: none; diff --git a/src/layouts/Header.tsx b/src/layouts/Header.tsx index 009925747..8399ce9dc 100644 --- a/src/layouts/Header.tsx +++ b/src/layouts/Header.tsx @@ -25,7 +25,7 @@ import { ETHDENVER_OPTIMIZATION } from "../settings"; import * as css from "./App.scss"; import ProviderConfigButton from "layouts/ProviderConfigButton"; import Tooltip from "rc-tooltip"; -import { standardPolling } from "lib/util"; +import { standardPolling, targetedNetwork } from "lib/util"; interface IExternalProps extends RouteComponentProps { } @@ -92,7 +92,7 @@ type IProps = IExternalProps & IStateProps & IDispatchProps & ISubscriptionProps class Header extends React.Component { - constructor(props: IProps) { + constructor (props: IProps) { super(props); this.toggleDiv = React.createRef(); this.initializeTrainingTooltipsToggle(); @@ -176,9 +176,14 @@ class Header extends React.Component { const web3ProviderInfo = getWeb3ProviderInfo(); const web3Provider = getWeb3Provider(); const trainingTooltipsOn = this.getTrainingTooltipsEnabled(); + const network = targetedNetwork(); + const inDAO = !!daoAvatarAddress; return ( -
+
+
Alchemy 2.0 has been released! Take a look here.
-
+
); } } diff --git a/src/layouts/SidebarMenu.scss b/src/layouts/SidebarMenu.scss index 2b3d5b20c..c85388eac 100644 --- a/src/layouts/SidebarMenu.scss +++ b/src/layouts/SidebarMenu.scss @@ -212,7 +212,10 @@ } .siteLinksWrapper { - height: 270px; + min-height: 315px; + &.testNet { + min-height: 270px; + } left: 0; width: 100%; border-top: 2px solid rgba(78, 137, 208, 1); @@ -354,7 +357,8 @@ } .sidebarWrapper.noDAO { - width: 125px; + width: 127px; + top: 82px; .menuContent { background-color: transparent; diff --git a/src/layouts/SidebarMenu.tsx b/src/layouts/SidebarMenu.tsx index b433f40b0..97123d6b0 100644 --- a/src/layouts/SidebarMenu.tsx +++ b/src/layouts/SidebarMenu.tsx @@ -9,7 +9,7 @@ import FollowButton from "components/Shared/FollowButton"; import withSubscription, { ISubscriptionProps } from "components/Shared/withSubscription"; import { generate } from "geopattern"; import Analytics from "lib/analytics"; -import { baseTokenName, ethErrorHandler, formatTokens, genName, getExchangesList, supportedTokens, fromWei, ethBalance, linkToEtherScan, standardPolling } from "lib/util"; +import { baseTokenName, ethErrorHandler, formatTokens, genName, getExchangesList, supportedTokens, fromWei, ethBalance, linkToEtherScan, standardPolling, targetedNetwork } from "lib/util"; import { parse } from "query-string"; import * as React from "react"; import { matchPath, Link, RouteComponentProps } from "react-router-dom"; @@ -54,7 +54,7 @@ const mapStateToProps = (state: IRootState, ownProps: IExternalProps): IExternal class SidebarMenu extends React.Component { - constructor(props: IProps) { + constructor (props: IProps) { super(props); } @@ -213,12 +213,15 @@ class SidebarMenu extends React.Component { clearfix: true, }); + const network = targetedNetwork(); + const testNet = !((network === "main") || (network === "xdai")); + return (
{this.props.daoAvatarAddress && this.props.data ? this.daoMenu() : ""} -
+