From c085125dd78c366bf03695f70562d6baece556ab Mon Sep 17 00:00:00 2001 From: Jaco Greeff Date: Sun, 2 Aug 2020 11:40:38 +0200 Subject: [PATCH] Endpoint toggle adjustments (#3319) --- .../apps-config/src/settings/endpoints.ts | 23 +++++++++------ packages/apps/src/SideBar/Endpoints.tsx | 25 +++++++++++------ packages/page-explorer/src/SummarySession.tsx | 2 +- packages/react-components/src/Icon.tsx | 6 +++- packages/react-components/src/Toggle.tsx | 28 +++++++++++++------ packages/react-components/src/styles/index.ts | 21 ++++++++------ packages/react-query/src/Bonded.tsx | 4 +-- 7 files changed, 70 insertions(+), 39 deletions(-) diff --git a/packages/apps-config/src/settings/endpoints.ts b/packages/apps-config/src/settings/endpoints.ts index 26210751ca..cd0ae3334f 100644 --- a/packages/apps-config/src/settings/endpoints.ts +++ b/packages/apps-config/src/settings/endpoints.ts @@ -5,8 +5,9 @@ import { TFunction } from 'i18next'; import { Option } from './types'; -interface LinkOption extends Option { +export interface LinkOption extends Option { dnslink?: string; + isChild?: boolean; } interface EnvWindow { @@ -29,6 +30,7 @@ function createDev (t: TFunction): LinkOption[] { function createLive (t: TFunction): LinkOption[] { return [ + // fixed, polkadot { dnslink: 'polkadot', info: 'polkadot', @@ -60,6 +62,7 @@ function createLive (t: TFunction): LinkOption[] { text: t('rpc.kusama.ava', 'Kusama (Polkadot Canary, user-run public nodes; see https://status.cloud.ava.do/)', { ns: 'apps-config' }), value: 'wss://kusama.polkadot.cloud.ava.do' }, + // alphabetical based on chain name { dnslink: 'centrifuge', info: 'centrifuge', @@ -83,16 +86,18 @@ function createLive (t: TFunction): LinkOption[] { function createTest (t: TFunction): LinkOption[] { return [ + // fixed, polkadot { dnslink: 'westend', info: 'westend', text: t('rpc.westend', 'Westend (Polkadot Testnet, hosted by Parity)', { ns: 'apps-config' }), value: 'wss://westend-rpc.polkadot.io' }, + // alphabetical based on chain name { - info: 'acala', - text: t('rpc.mandala', 'Mandala (Acala Testnet, hosted by Acala)', { ns: 'apps-config' }), - value: 'wss://node-6684611762228215808.jm.onfinality.io/ws' + info: 'nodle', + text: t('rpc.arcadia', 'Arcadia (Nodle Testnet, hosted by Nodle)', { ns: 'apps-config' }), + value: 'wss://arcadia1.nodleprotocol.io' }, { info: 'edgeware', @@ -104,16 +109,16 @@ function createTest (t: TFunction): LinkOption[] { text: t('rpc.flamingfir', 'Flaming Fir (Substrate Testnet, hosted by Parity)', { ns: 'apps-config' }), value: 'wss://substrate-rpc.parity.io' }, - { - info: 'nodle', - text: t('rpc.arcadia', 'Arcadia (Nodle Testnet, hosted by Nodle)', { ns: 'apps-config' }), - value: 'wss://arcadia1.nodleprotocol.io' - }, { info: 'datahighway', isDisabled: true, text: t('rpc.datahighway.harbour', 'Harbour (DataHighway Testnet, hosted by MXC)', { ns: 'apps-config' }), value: 'wss://testnet-harbour.datahighway.com' + }, + { + info: 'acala', + text: t('rpc.mandala', 'Mandala (Acala Testnet, hosted by Acala)', { ns: 'apps-config' }), + value: 'wss://node-6684611762228215808.jm.onfinality.io/ws' } ]; } diff --git a/packages/apps/src/SideBar/Endpoints.tsx b/packages/apps/src/SideBar/Endpoints.tsx index 0576ce49b2..3ee211fcfe 100644 --- a/packages/apps/src/SideBar/Endpoints.tsx +++ b/packages/apps/src/SideBar/Endpoints.tsx @@ -2,7 +2,7 @@ // This software may be modified and distributed under the terms // of the Apache-2.0 license. See the LICENSE file for details. -import { Option } from '@polkadot/apps-config/settings/types'; +import type { LinkOption } from '@polkadot/apps-config/settings/endpoints'; import React, { useCallback, useState } from 'react'; // ok, this seems to be an eslint bug, this _is_ a package import @@ -20,6 +20,7 @@ interface Endpoint { header: React.ReactNode; networks: { icon?: string; + isChild?: boolean; name: string; providers: { name: string; @@ -56,7 +57,7 @@ function isValidUrl (url: string): boolean { ); } -function combineEndpoints (endpoints: Option[]): Endpoint[] { +function combineEndpoints (endpoints: LinkOption[]): Endpoint[] { return endpoints.reduce((result: Endpoint[], e): Endpoint[] => { if (e.isHeader) { result.push({ header: e.text, networks: [] }); @@ -70,6 +71,7 @@ function combineEndpoints (endpoints: Option[]): Endpoint[] { } else { prev.networks.push({ icon: e.info, + isChild: e.isChild, name, providers: [prov] }); @@ -135,18 +137,18 @@ function Endpoints ({ className = '', offset, onClose }: Props): React.ReactElem key={typeIndex} >
{header}
- {networks.map(({ icon, name, providers }, netIndex): React.ReactNode => { + {networks.map(({ icon, isChild, name, providers }, netIndex): React.ReactNode => { const isSelected = providers.some(({ url }) => url === apiUrl); const index = `${typeIndex}:${netIndex}`; const isOpen = openIndex === index; return (
-
+
( { const { t } = useTranslation(); const { api } = useApi(); - const sessionInfo = useCall(api.derive.session?.progress, []); + const sessionInfo = useCall(api.query.staking && api.derive.session?.progress, []); const forcing = useCall(api.query.staking?.forceEra, []); const eraLabel = useMemo(() => t('era') diff --git a/packages/react-components/src/Icon.tsx b/packages/react-components/src/Icon.tsx index 411bdda28e..f16b37b492 100644 --- a/packages/react-components/src/Icon.tsx +++ b/packages/react-components/src/Icon.tsx @@ -10,7 +10,7 @@ import styled from 'styled-components'; interface Props { className?: string; - color?: 'gray' | 'green' | 'normal' | 'orange' | 'red' | 'transparent'; + color?: 'gray' | 'green' | 'normal' | 'orange' | 'red' | 'transparent' | 'white'; icon: IconName; isSpinning?: boolean; onClick?: () => void; @@ -62,4 +62,8 @@ export default React.memo(styled(Icon)` &.transparentColor { color: transparent; } + + &.whiteColor { + color: white; + } `); diff --git a/packages/react-components/src/Toggle.tsx b/packages/react-components/src/Toggle.tsx index 7254038273..c893ffef27 100644 --- a/packages/react-components/src/Toggle.tsx +++ b/packages/react-components/src/Toggle.tsx @@ -8,13 +8,14 @@ import styled from 'styled-components'; interface Props { className?: string; isDisabled?: boolean; + isRadio?: boolean; label: React.ReactNode; onChange?: (isChecked: boolean) => void; preventDefault?: boolean; value?: boolean; } -function Toggle ({ className = '', isDisabled, label, onChange, preventDefault, value }: Props): React.ReactElement { +function Toggle ({ className = '', isDisabled, isRadio, label, onChange, preventDefault, value }: Props): React.ReactElement { const _onClick = useCallback( (event: React.MouseEvent): void => { if (!isDisabled) { @@ -31,11 +32,11 @@ function Toggle ({ className = '', isDisabled, label, onChange, preventDefault, return (
{label && } -
+
); } @@ -68,7 +69,7 @@ export default React.memo(styled(Toggle)` height: 1.5rem; left: 0; position: absolute; - top: 0rem; + top: 0; width: 1.5rem; } } @@ -82,13 +83,22 @@ export default React.memo(styled(Toggle)` } &.isChecked { - .ui--Toggle-Slider { - background: #2196F3; - - &:before { - border-color: #2196F3; + &:not(.isRadio) { + .ui--Toggle-Slider:before { transform: translateX(1.5rem); } } + + &.isRadio { + .ui--Toggle-Slider:before { + border-width: 0.5rem; + } + } + } + + &.isRadio { + .ui--Toggle-Slider { + width: 1.5rem; + } } `); diff --git a/packages/react-components/src/styles/index.ts b/packages/react-components/src/styles/index.ts index 6f2d237a0a..c122697b8c 100644 --- a/packages/react-components/src/styles/index.ts +++ b/packages/react-components/src/styles/index.ts @@ -31,6 +31,10 @@ export default createGlobalStyle` background: ${getHighlight} !important; } + .ui--highlight--before-border:before { + border-color: ${getHighlight} !important; + } + .ui--highlight--bg { background: ${getHighlight} !important; } @@ -132,11 +136,15 @@ export default createGlobalStyle` } } - .ui--Toggle.isChecked .ui--Toggle-Slider { - background-color: ${getHighlight} !important; + .ui--Toggle.isChecked { + &:not(.isRadio) { + .ui--Toggle-Slider { + background-color: ${getHighlight} !important; - &:before { - border-color: ${getHighlight} !important; + &:before { + border-color: ${getHighlight} !important; + } + } } } } @@ -169,11 +177,8 @@ export default createGlobalStyle` &.error, &.warning { font-size: 0.95rem; + margin-left: 2.25rem; padding: 0.75rem 1rem; - - &:not(.full) { - margin-left: 2.25rem; - } } &.nomargin { diff --git a/packages/react-query/src/Bonded.tsx b/packages/react-query/src/Bonded.tsx index 792434ecb1..e6a8853797 100644 --- a/packages/react-query/src/Bonded.tsx +++ b/packages/react-query/src/Bonded.tsx @@ -19,10 +19,10 @@ interface Props { function BondedDisplay ({ children, className = '', label, params }: Props): React.ReactElement { const { api } = useApi(); - const controllerId = useCall(api.query.staking.bonded, [params], { + const controllerId = useCall(api.query.staking?.bonded, [params], { transform: (value: Option) => value.unwrapOr(null) }); - const stakingLedger = useCall(controllerId && api.query.staking.ledger, [controllerId], { + const stakingLedger = useCall(controllerId && api.query.staking?.ledger, [controllerId], { transform: (value: Option) => value.unwrapOr(null) });