Add Switch action to endpoint change (#3320)

packages/apps/src/SideBar/Endpoints.tsx

@@ -10,7 +10,7 @@ import React, { useCallback, useState } from 'react';
 import punycode from 'punycode';
 import styled from 'styled-components';
 import { createEndpoints } from '@polkadot/apps-config/settings';
-import { ChainImg, Icon, Input, Sidebar, Toggle } from '@polkadot/react-components';
+import { Button, ChainImg, Icon, Input, Sidebar, Toggle } from '@polkadot/react-components';
 import uiSettings from '@polkadot/ui-settings';
 import { isAscii } from '@polkadot/util';
 
@@ -109,26 +109,32 @@ function Endpoints ({ className = '', offset, onClose }: Props): React.ReactElem
     []
   );
 
-  const _onClose = useCallback(
+  const _onApply = useCallback(
     (): void => {
-      if (hasUrlChanged && isUrlValid) {
-        const settings = uiSettings.get();
-
-        uiSettings.set({ ...settings, apiUrl });
-        window.location.reload();
-      }
+      uiSettings.set({ ...(uiSettings.get()), apiUrl });
+      window.location.reload();
 
       onClose();
     },
-    [apiUrl, hasUrlChanged, isUrlValid, onClose]
+    [apiUrl, onClose]
   );
 
   return (
     <Sidebar
+      button={
+        (hasUrlChanged && isUrlValid)
+          ? (
+            <Button
+              icon='sync'
+              label={t<string>('Switch')}
+              onClick={_onApply}
+            />
+          )
+          : undefined
+      }
       className={className}
-      closeIcon={(hasUrlChanged && isUrlValid) ? 'sync' : 'times'}
       offset={offset}
-      onClose={_onClose}
+      onClose={onClose}
       position='left'
     >
       {endpoints.map(({ header, networks }, typeIndex): React.ReactNode => (
@@ -194,7 +200,7 @@ export default React.memo(styled(Endpoints)`
   }
 
   .endpointType {
-    margin-top: 0.25rem;
+    margin-top: 2rem;
 
     &+.endpointType {
       margin-top: 1rem;

packages/react-components/src/Sidebar.tsx

@@ -2,32 +2,32 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { IconName } from '@fortawesome/fontawesome-svg-core';
-
 import React from 'react';
 import styled from 'styled-components';
 
 import Button from './Button';
 
 interface Props {
+  button?: React.ReactNode;
   children: React.ReactNode;
   className?: string;
-  closeIcon?: IconName;
   offset?: number | string;
   onClose: () => void;
   position: 'left' | 'right';
 }
 
-function Sidebar ({ children, className = '', closeIcon = 'times', onClose }: Props): React.ReactElement<Props> {
+function Sidebar ({ button, children, className = '', onClose }: Props): React.ReactElement<Props> {
   return (
     <div className={`ui--Sidebar ${className}`}>
-      <Button
-        className='ui--Sidebar-close'
-        icon={closeIcon}
-        isBasic
-        isCircular
-        onClick={onClose}
-      />
+      <Button.Group className='ui--Sidebar-buttons'>
+        {button}
+        <Button
+          icon='times'
+          isBasic
+          isCircular
+          onClick={onClose}
+        />
+      </Button.Group>
       {children}
     </div>
   );
@@ -47,7 +47,7 @@ export default React.memo(styled(Sidebar)(({ offset = 0, position }: Props) => `
   z-index: 999;
   ${position}: ${offset};
 
-  .ui--Sidebar-close {
+  .ui--Sidebar-buttons {
     position: absolute;
     right: 0.5rem;
     top: 0.5rem;