Endpoint toggle adjustments (#3319)

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<string>('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<string>('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<string>('rpc.mandala', 'Mandala (Acala Testnet, hosted by Acala)', { ns: 'apps-config' }),
-      value: 'wss://node-6684611762228215808.jm.onfinality.io/ws'
+      info: 'nodle',
+      text: t<string>('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<string>('rpc.flamingfir', 'Flaming Fir (Substrate Testnet, hosted by Parity)', { ns: 'apps-config' }),
       value: 'wss://substrate-rpc.parity.io'
     },
-    {
-      info: 'nodle',
-      text: t<string>('rpc.arcadia', 'Arcadia (Nodle Testnet, hosted by Nodle)', { ns: 'apps-config' }),
-      value: 'wss://arcadia1.nodleprotocol.io'
-    },
     {
       info: 'datahighway',
       isDisabled: true,
       text: t<string>('rpc.datahighway.harbour', 'Harbour (DataHighway Testnet, hosted by MXC)', { ns: 'apps-config' }),
       value: 'wss://testnet-harbour.datahighway.com'
+    },
+    {
+      info: 'acala',
+      text: t<string>('rpc.mandala', 'Mandala (Acala Testnet, hosted by Acala)', { ns: 'apps-config' }),
+      value: 'wss://node-6684611762228215808.jm.onfinality.io/ws'
     }
   ];
 }

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}
         >
           <div className='endpointHeader'>{header}</div>
-          {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 (
               <div
-                className={`endpointGroup${isOpen ? ' isOpen' : ''}${isSelected ? ' isSelected ui--highlight--shadow' : ''}`}
+                className={`endpointGroup${isOpen ? ' isOpen' : ''}${isSelected ? ' isSelected ui--highlight--before' : ''}`}
                 key={index}
                 onClick={_setOpenIndex(index)}
               >
-                <div className='endpointSection'>
+                <div className={`endpointSection${isChild ? ' isChild' : ''}`}>
                   <ChainImg
                     className='endpointIcon'
                     logo={icon === 'local' ? 'empty' : icon}
@@ -162,6 +164,7 @@ function Endpoints ({ className = '', offset, onClose }: Props): React.ReactElem
                 {providers.map(({ name, url }): React.ReactNode => (
                   <Toggle
                     className='endpointProvider'
+                    isRadio
                     key={url}
                     label={name}
                     onChange={_setApiUrl(url)}
@@ -227,9 +230,9 @@ export default React.memo(styled(Endpoints)`
   }
 
   .endpointIcon {
-    height: 32px;
+    height: 24px;
     margin-right: 0.75rem;
-    width: 32px;
+    width: 24px;
   }
 
   .endpointProvider {
@@ -244,14 +247,18 @@ export default React.memo(styled(Endpoints)`
     justify-content: flex-start;
     position: relative;
 
+    &.isChild .endpointIcon {
+      margin-left: 1.25rem;
+    }
+
     .endpointOpen {
       position: absolute;
       right: 0.5rem;
-      top: 0.5rem;
+      top: 0.375rem;
     }
 
     &+.endpointProvider {
-      margin-top: -0.5rem;
+      margin-top: -0.125rem;
     }
   }
 `);

packages/page-explorer/src/SummarySession.tsx

@@ -20,7 +20,7 @@ interface Props {
 function SummarySession ({ withEra = true, withSession = true }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
-  const sessionInfo = useCall<DeriveSessionProgress>(api.derive.session?.progress, []);
+  const sessionInfo = useCall<DeriveSessionProgress>(api.query.staking && api.derive.session?.progress, []);
   const forcing = useCall<Forcing>(api.query.staking?.forceEra, []);
   const eraLabel = useMemo(() =>
     t<string>('era')

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;
+  }
 `);

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<Props> {
+function Toggle ({ className = '', isDisabled, isRadio, label, onChange, preventDefault, value }: Props): React.ReactElement<Props> {
   const _onClick = useCallback(
     (event: React.MouseEvent<HTMLDivElement, MouseEvent>): void => {
       if (!isDisabled) {
@@ -31,11 +32,11 @@ function Toggle ({ className = '', isDisabled, label, onChange, preventDefault,
 
   return (
     <div
-      className={`ui--Toggle${value ? ' isChecked' : ''}${isDisabled ? ' isDisabled' : ''} ${className}`}
+      className={`ui--Toggle${value ? ' isChecked' : ''}${isDisabled ? ' isDisabled' : ''}${isRadio ? ' isRadio' : ''} ${className}`}
       onClick={_onClick}
     >
       {label && <label>{label}</label>}
-      <div className='ui--Toggle-Slider' />
+      <div className={`ui--Toggle-Slider${isRadio ? ' ui--highlight--before-border' : ''}`} />
     </div>
   );
 }
@@ -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;
+    }
   }
 `);

packages/react-components/src/styles/index.ts

@@ -31,6 +31,10 @@ export default createGlobalStyle<Props>`
     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<Props>`
       }
     }
 
-    .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<Props>`
     &.error,
     &.warning {
       font-size: 0.95rem;
+      margin-left: 2.25rem;
       padding: 0.75rem 1rem;
-
-      &:not(.full) {
-        margin-left: 2.25rem;
-      }
     }
 
     &.nomargin {

packages/react-query/src/Bonded.tsx

@@ -19,10 +19,10 @@ interface Props {
 
 function BondedDisplay ({ children, className = '', label, params }: Props): React.ReactElement<Props> {
   const { api } = useApi();
-  const controllerId = useCall<AccountId | null>(api.query.staking.bonded, [params], {
+  const controllerId = useCall<AccountId | null>(api.query.staking?.bonded, [params], {
     transform: (value: Option<AccountId>) => value.unwrapOr(null)
   });
-  const stakingLedger = useCall<StakingLedger | null>(controllerId && api.query.staking.ledger, [controllerId], {
+  const stakingLedger = useCall<StakingLedger | null>(controllerId && api.query.staking?.ledger, [controllerId], {
     transform: (value: Option<StakingLedger>) => value.unwrapOr(null)
   });