fix: switch rpc in url should not auto use local fork (#10308)

* fix: switch rpc in url auto use local fork #10305

* fix: lint

packages/apps/src/Endpoints/index.tsx

@@ -120,7 +120,7 @@ function loadAffinities (groups: Group[]): Record<string, string> {
 
 function isSwitchDisabled (hasUrlChanged: boolean, apiUrl: string, isUrlValid: boolean): boolean {
   if (!hasUrlChanged) {
-    if (store.get('isLocalFork')) {
+    if (store.get('localFork') === apiUrl) {
       return false;
     } else {
       return true;
@@ -136,7 +136,7 @@ function isSwitchDisabled (hasUrlChanged: boolean, apiUrl: string, isUrlValid: b
 
 function isLocalForkDisabled (hasUrlChanged: boolean, apiUrl: string, isUrlValid: boolean): boolean {
   if (!hasUrlChanged) {
-    if (store.get('isLocalFork')) {
+    if (store.get('localFork') === apiUrl) {
       return true;
     } else {
       return false;
@@ -243,7 +243,7 @@ function Endpoints ({ className = '', offset, onClose }: Props): React.ReactElem
 
   const _onApply = useCallback(
     (): void => {
-      store.set('isLocalFork', false);
+      store.set('localFork', '');
       settings.set({ ...(settings.get()), apiUrl });
       window.location.assign(`${window.location.origin}${window.location.pathname}?rpc=${encodeURIComponent(apiUrl)}${window.location.hash}`);
 
@@ -258,7 +258,7 @@ function Endpoints ({ className = '', offset, onClose }: Props): React.ReactElem
 
   const _onLocalFork = useCallback(
     (): void => {
-      store.set('isLocalFork', true);
+      store.set('localFork', apiUrl);
       settings.set({ ...(settings.get()), apiUrl });
       window.location.assign(`${window.location.origin}${window.location.pathname}?rpc=${encodeURIComponent(apiUrl)}${window.location.hash}`);
 
@@ -296,27 +296,27 @@ function Endpoints ({ className = '', offset, onClose }: Props): React.ReactElem
 
   return (
     <StyledSidebar
-      button={
-        <Button
-          icon='sync'
-          isDisabled={canSwitch}
-          label={t('Switch')}
-          onClick={_onApply}
-        />
+      buttons={
+        <>
+          <Button
+            icon='code-fork'
+            isDisabled={canLocalFork}
+            label={t('Fork Locally')}
+            onClick={_onLocalFork}
+            tooltip='fork-locally-btn'
+          />
+          <Button
+            icon='sync'
+            isDisabled={canSwitch}
+            label={t('Switch')}
+            onClick={_onApply}
+          />
+        </>
       }
       className={className}
       offset={offset}
       onClose={onClose}
       position='left'
-      secondaryButton={
-        <Button
-          icon='code-fork'
-          isDisabled={canLocalFork}
-          label={t('Fork Locally')}
-          onClick={_onLocalFork}
-          tooltip='fork-locally-btn'
-        />
-      }
       sidebarRef={sidebarRef}
     >
       {groups.map((group, index): React.ReactNode => (

packages/apps/src/overlays/LocalFork.tsx

@@ -4,6 +4,8 @@
 import React from 'react';
 import store from 'store';
 
+import { settings } from '@polkadot/ui-settings';
+
 import { useTranslation } from '../translate.js';
 import BaseOverlay from './Base.js';
 
@@ -14,7 +16,7 @@ interface Props {
 function LocalFork ({ className }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
 
-  if (store.get('isLocalFork')) {
+  if (store.get('localFork') === settings.get().apiUrl) {
     return (
       <BaseOverlay
         className={className}

packages/react-api/src/Api.tsx

@@ -238,7 +238,7 @@ async function createApi (apiUrl: string, signer: ApiSigner, onError: (error: un
   try {
     if (isLight) {
       provider = await getLightProvider(apiUrl.replace('light://', ''));
-    } else if (store.get('isLocalFork')) {
+    } else if (store.get('localFork') === apiUrl) {
       provider = await ChopsticksProvider.fromEndpoint(apiUrl);
       await setStorage(provider.chain, {
         System: {
@@ -321,7 +321,7 @@ export function ApiCtxRoot ({ apiUrl, children, isElectron, store: keyringStore
             .catch(onError);
         });
 
-        if (store.get('isLocalFork')) {
+        if (store.get('localFork') === apiUrl) {
           statics.api.connect()
             .catch(onError);
         }

packages/react-components/src/Sidebar.tsx

@@ -7,8 +7,7 @@ import Button from './Button/index.js';
 import { styled } from './styled.js';
 
 interface Props {
-  button?: React.ReactNode;
-  secondaryButton?: React.ReactNode;
+  buttons?: React.ReactNode;
   children: React.ReactNode;
   className?: string;
   dataTestId?: string;
@@ -18,7 +17,7 @@ interface Props {
   sidebarRef: React.RefObject<HTMLDivElement>;
 }
 
-function Sidebar ({ button, children, className = '', dataTestId = '', onClose, position, secondaryButton, sidebarRef }: Props): React.ReactElement<Props> {
+function Sidebar ({ buttons, children, className = '', dataTestId = '', onClose, position, sidebarRef }: Props): React.ReactElement<Props> {
   return (
     <StyledDiv
       className={`${className} ui--Sidebar ${position}Position`}
@@ -26,8 +25,7 @@ function Sidebar ({ button, children, className = '', dataTestId = '', onClose,
       ref={sidebarRef}
     >
       <Button.Group className='ui--Sidebar-buttons'>
-        {button}
-        {secondaryButton}
+        {buttons}
         <Button
           dataTestId='close-sidebar-button'
           icon='times'