Integrate chopsticks

packages/apps/package.json

@@ -16,6 +16,7 @@
   "type": "module",
   "version": "0.133.2-96-x",
   "dependencies": {
+    "@acala-network/chopsticks-core": "^0.9.8",
     "@polkadot/apps-config": "^0.133.2-96-x",
     "@polkadot/apps-routing": "^0.133.2-96-x",
     "@polkadot/dev": "^0.78.4",

packages/apps/public/locales/en/apps.json

@@ -2,8 +2,10 @@
   "Accounts": "Accounts",
   "Developer": "Developer",
   "Files": "Files",
+  "Fork Locally": "Fork Locally",
   "Governance": "Governance",
   "Initializing connection": "Initializing connection",
+  "Local fork powered by ": "Local fork powered by ",
   "Network": "Network",
   "Relay chain": "Relay chain",
   "Settings": "Settings",

packages/apps/public/locales/en/translation.json

@@ -277,6 +277,7 @@
   "Forget": "",
   "Forget this account": "",
   "Forget this address": "",
+  "Fork Locally": "",
   "Forks": "",
   "Free balance": "",
   "From JSON": "",
@@ -338,6 +339,7 @@
   "Lifetime (# of blocks)": "",
   "Light theme": "",
   "Loading": "",
+  "Local fork powered by ": "",
   "Locked funds (e.g. for staking) are counted.": "",
   "Locked1x": "",
   "Locked2x": "",

packages/apps/public/locales/zh/translation.json

@@ -215,6 +215,7 @@
   "Forget this asset": "忘记这个资产",
   "Forget this code hash": "忘记这个代码哈希",
   "Forget this contract": "忘记该合约",
+  "Fork Locally": "本地分叉",
   "Forks": "(Forks)分叉",
   "Full Legal Name": "法定全称",
   "Future versions of the web-only interface will drop support for non-external accounts, much like the IPFS version.": "未来版本的纯 web 界面将不再支持非外部帐户，这与 IPFS 版本非常相似。",

packages/apps/src/Apps.tsx

@@ -12,8 +12,8 @@ import Signer from '@polkadot/react-signer';
 
 import Content from './Content/index.js';
 import Menu from './Menu/index.js';
+import BottomOverlay from './overlays/Bottom.js';
 import ConnectingOverlay from './overlays/Connecting.js';
-import DotAppsOverlay from './overlays/DotApps.js';
 import WarmUp from './WarmUp.js';
 
 export const PORTAL_ID = 'portals';
@@ -39,7 +39,7 @@ function Apps ({ className = '' }: Props): React.ReactElement<Props> {
             <Content />
           </Signer>
           <ConnectingOverlay />
-          <DotAppsOverlay />
+          <BottomOverlay />
           <div id={PORTAL_ID} />
         </AccountSidebar>
       </StyledDiv>

packages/apps/src/Endpoints/index.tsx

@@ -120,7 +120,11 @@ function loadAffinities (groups: Group[]): Record<string, string> {
 
 function isSwitchDisabled (hasUrlChanged: boolean, apiUrl: string, isUrlValid: boolean): boolean {
   if (!hasUrlChanged) {
-    return true;
+    if (store.get('isLocalFork')) {
+      return false;
+    } else {
+      return true;
+    }
   } else if (apiUrl.startsWith('light://')) {
     return false;
   } else if (isUrlValid) {
@@ -130,6 +134,22 @@ function isSwitchDisabled (hasUrlChanged: boolean, apiUrl: string, isUrlValid: b
   return true;
 }
 
+function isLocalForkDisabled (hasUrlChanged: boolean, apiUrl: string, isUrlValid: boolean): boolean {
+  if (!hasUrlChanged) {
+    if (store.get('isLocalFork')) {
+      return true;
+    } else {
+      return false;
+    }
+  } else if (apiUrl.startsWith('light://')) {
+    return true;
+  } else if (isUrlValid) {
+    return false;
+  }
+
+  return true;
+}
+
 function Endpoints ({ className = '', offset, onClose }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const linkOptions = createWsEndpoints(t);
@@ -223,12 +243,32 @@ function Endpoints ({ className = '', offset, onClose }: Props): React.ReactElem
 
   const _onApply = useCallback(
     (): void => {
+      store.set('isLocalFork', false);
+      settings.set({ ...(settings.get()), apiUrl });
+      window.location.assign(`${window.location.origin}${window.location.pathname}?rpc=${encodeURIComponent(apiUrl)}${window.location.hash}`);
+
+      if (!hasUrlChanged) {
+        window.location.reload();
+      }
+
+      onClose();
+    },
+    [apiUrl, onClose, hasUrlChanged]
+  );
+
+  const _onLocalFork = useCallback(
+    (): void => {
+      store.set('isLocalFork', true);
       settings.set({ ...(settings.get()), apiUrl });
       window.location.assign(`${window.location.origin}${window.location.pathname}?rpc=${encodeURIComponent(apiUrl)}${window.location.hash}`);
-      // window.location.reload();
+
+      if (!hasUrlChanged) {
+        window.location.reload();
+      }
+
       onClose();
     },
-    [apiUrl, onClose]
+    [apiUrl, onClose, hasUrlChanged]
   );
 
   const _saveApiEndpoint = useCallback(
@@ -249,6 +289,11 @@ function Endpoints ({ className = '', offset, onClose }: Props): React.ReactElem
     [hasUrlChanged, apiUrl, isUrlValid]
   );
 
+  const canLocalFork = useMemo(
+    () => isLocalForkDisabled(hasUrlChanged, apiUrl, isUrlValid),
+    [hasUrlChanged, apiUrl, isUrlValid]
+  );
+
   return (
     <StyledSidebar
       button={
@@ -263,6 +308,15 @@ function Endpoints ({ className = '', offset, onClose }: Props): React.ReactElem
       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/Base.tsx

@@ -60,8 +60,8 @@ const StyledDiv = styled.div`
   z-index: 500;
 
   &.isBottom {
-    bottom: 0.75rem;
-    top: auto;
+    position: static;
+    z-index: 0;
   }
 
   &.isFull {

packages/apps/src/overlays/Bottom.tsx

@@ -0,0 +1,40 @@
+// Copyright 2017-2024 @polkadot/apps authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+
+import { styled } from '@polkadot/react-components';
+
+import DotApps from './DotApps.js';
+import LocalFork from './LocalFork.js';
+
+interface Props {
+  className?: string;
+}
+
+function Bottom ({ className }: Props): React.ReactElement<Props> | null {
+  return (
+    <StyledDiv className={className}>
+      <LocalFork />
+      <DotApps />
+    </StyledDiv>
+  );
+}
+
+const StyledDiv = styled.div`
+  position: fixed;
+  bottom: 0.75rem;
+  right: 0.75rem;
+  left: 0.75rem;
+  top: auto;
+  padding: 1rem;
+  z-index: 500;
+  display: flex;
+  flex-direction: column;
+  row-gap: 0.75rem;;
+  div.isInfo:before {
+    content: none;
+  }
+`;
+
+export default React.memo(Bottom);

packages/apps/src/overlays/LocalFork.tsx

@@ -0,0 +1,44 @@
+// Copyright 2017-2024 @polkadot/apps authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+import store from 'store';
+
+import { useTranslation } from '../translate.js';
+import BaseOverlay from './Base.js';
+
+interface Props {
+  className?: string;
+}
+
+function LocalFork ({ className }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
+
+  if (store.get('isLocalFork')) {
+    return (
+      <BaseOverlay
+        className={className}
+        icon='link'
+        isBottom
+        isFull
+        type='info'
+      >
+        <div>
+          {t('Local fork powered by ')}
+          <a
+            href='https://github.com/AcalaNetwork/chopsticks'
+            rel='noreferrer'
+            target='_blank'
+          >
+            Chopsticks
+          </a>
+          .
+        </div>
+      </BaseOverlay>
+    );
+  }
+
+  return null;
+}
+
+export default React.memo(LocalFork);

packages/react-api/src/Api.tsx

@@ -7,6 +7,7 @@ import type { ChainProperties, ChainType } from '@polkadot/types/interfaces';
 import type { KeyringStore } from '@polkadot/ui-keyring/types';
 import type { ApiProps, ApiState } from './types.js';
 
+import { ChopsticksProvider, setStorage } from '@acala-network/chopsticks-core';
 import * as Sc from '@substrate/connect';
 import React, { useEffect, useMemo, useState } from 'react';
 import store from 'store';
@@ -232,11 +233,23 @@ async function getLightProvider (chain: string): Promise<ScProvider> {
 async function createApi (apiUrl: string, signer: ApiSigner, onError: (error: unknown) => void): Promise<Record<string, Record<string, string>>> {
   const types = getDevTypes();
   const isLight = apiUrl.startsWith('light://');
+  let provider;
 
   try {
-    const provider = isLight
-      ? await getLightProvider(apiUrl.replace('light://', ''))
-      : new WsProvider(apiUrl);
+    if (isLight) {
+      provider = await getLightProvider(apiUrl.replace('light://', ''));
+    } else if (store.get('isLocalFork')) {
+      provider = await ChopsticksProvider.fromEndpoint(apiUrl);
+      await setStorage(provider.chain, {
+        System: {
+          Account: [
+            [['5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY'], { data: { free: 1000 * 1e12 }, providers: 1 }]
+          ]
+        }
+      });
+    } else {
+      provider = new WsProvider(apiUrl);
+    }
 
     statics.api = new ApiPromise({
       provider,
@@ -257,7 +270,7 @@ async function createApi (apiUrl: string, signer: ApiSigner, onError: (error: un
   return types;
 }
 
-export function ApiCtxRoot ({ apiUrl, children, isElectron, store }: Props): React.ReactElement<Props> | null {
+export function ApiCtxRoot ({ apiUrl, children, isElectron, store: keyringStore }: Props): React.ReactElement<Props> | null {
   const { queuePayload, queueSetTxStatus } = useQueue();
   const [state, setState] = useState<ApiState>(EMPTY_STATE);
   const [isApiConnected, setIsApiConnected] = useState(false);
@@ -303,15 +316,20 @@ export function ApiCtxRoot ({ apiUrl, children, isElectron, store }: Props): Rea
 
           const urlIsEthereum = !!location.href.includes('keyring-type=ethereum');
 
-          loadOnReady(statics.api, apiEndpoint, injectedPromise, store, types, urlIsEthereum)
+          loadOnReady(statics.api, apiEndpoint, injectedPromise, keyringStore, types, urlIsEthereum)
             .then(setState)
             .catch(onError);
         });
 
+        if (store.get('isLocalFork')) {
+          statics.api.connect()
+            .catch(onError);
+        }
+
         setIsApiInitialized(true);
       })
       .catch(onError);
-  }, [apiEndpoint, apiUrl, queuePayload, queueSetTxStatus, store]);
+  }, [apiEndpoint, apiUrl, queuePayload, queueSetTxStatus, keyringStore]);
 
   if (!value.isApiInitialized) {
     return null;

packages/react-components/src/Sidebar.tsx

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