feat: add explorer config in custom network

subscan-explorer · Mar 10, 2022 · 38ee2bc · 38ee2bc
1 parent d3bbb94
commit 38ee2bc
Show file tree

Hide file tree

Showing 9 changed files with 498 additions and 321 deletions.
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
@@ -128,6 +128,7 @@
     "pending": "Pending"
   },
   "save": "Save",
+  "add": "Add",
   "submit": "Submit",
   "submit the following extrinsic": "submit the following extrinsic",
   "submit_extrinsic": "Initiate Extrinsic",
@@ -180,7 +181,11 @@
     "add custom network success": "Add custom network success"
   },
   "network not supported": "This network is not currently supported",
-  "remark": "Remark",
-  "endpoint": "Endpoint",
-  "multisig account not exist": "Multi-signature account “{{account}}” Not found in current network"
+  "remark": "Remark Name*",
+  "endpoint": "Endpoint*",
+  "multisig account not exist": "Multi-signature account “{{account}}” Not found in current network",
+  "explorer optional": "Explorer (optional)",
+  "mainnet": "Mainnet",
+  "testnet": "Testnet",
+  "custom network": "Custom Network"
 }
diff --git a/public/locales/zh/translation.json b/public/locales/zh/translation.json
@@ -127,6 +127,7 @@
     "pending": "等待批准"
   },
   "save": "保存",
+  "add": "添加",
   "submit": "提交",
   "submit the following extrinsic": "提交下面的外部信息",
   "submit_extrinsic": "发起交易",
@@ -178,7 +179,11 @@
     "add custom network success": "保存成功"
   },
   "network not supported": "暂不支持该网络",
-  "remark": "备注",
-  "endpoint": "节点",
-  "multisig account not exist": "未在当前网络找到多签账号：“{{account}}”"
+  "remark": "备注*",
+  "endpoint": "节点*",
+  "multisig account not exist": "未在当前网络找到多签账号：“{{account}}”",
+  "explorer optional": "浏览器 (可选)",
+  "mainnet": "主网",
+  "testnet": "测试网",
+  "custom network": "自定义网络"
 }
diff --git a/src/App.tsx b/src/App.tsx
@@ -19,17 +19,19 @@ import { Path, routes } from './config/routes';
 import { useApi } from './hooks';
 import { Network } from './model';
 import { Connecting } from './pages/Connecting';
+import { isCustomRpc } from './utils';
 
 const genHeaderLinkStyle = (classes: TemplateStringsArray, network: Network) => {
   return `text-white opacity-80 hover:opacity-100 leading-normal whitespace-nowrap cursor-pointer transition-all duration-200 mr-4 dark:text-${network}-main ${classes.join(
     ' '
   )}`;
 };
 
+// eslint-disable-next-line complexity
 function App() {
   const { t } = useTranslation();
   const history = useHistory();
-  const { networkStatus, network, networkConfig } = useApi();
+  const { networkStatus, network, networkConfig, rpc } = useApi();
   const { systemChain, systemName, specName, isDevelopment, apiError } = usePolkaApi();
   const polkaLogo = useMemo(
     () => (networkStatus === 'success' ? '/image/polka-check.png' : '/image/polka-cross.png'),
@@ -46,8 +48,22 @@ function App() {
     return Object.keys(NETWORK_CONFIG).indexOf(network) >= 0 ? network : 'custom';
   }, [network]);
 
+  const { isCustomNetwork } = useMemo(() => {
+    return {
+      isCustomNetwork: isCustomRpc(rpc),
+    };
+  }, [rpc]);
+
   const [selectNetworkModalVisible, setSelectNetworkModalVisible] = useState(false);
 
+  const openExplorer = () => {
+    if (isCustomNetwork) {
+      window.open(`https://${networkConfig?.explorerHostName}.subscan.io`, '_blank');
+    } else {
+      window.open(`https://${network}.subscan.io`, '_blank');
+    }
+  };
+
   return (
     <>
       <GlobalStyle uiHighlight={uiHighlight} />
@@ -68,9 +84,11 @@ function App() {
           </span>
 
           <div className="flex items-center justify-between">
-            <span onClick={() => window.open(`https://${network}.subscan.io`, '_blank')} className={headerLinkStyle}>
-              {t('explorer')}
-            </span>
+            {(!isCustomNetwork || networkConfig?.explorerHostName) && (
+              <span onClick={openExplorer} className={headerLinkStyle}>
+                {t('explorer')}
+              </span>
+            )}
 
             <HeadAccounts />
 

diff --git a/src/components/SubscanLink.tsx b/src/components/SubscanLink.tsx
@@ -1,10 +1,10 @@
 import { Typography } from 'antd';
 import { CSSProperties, PropsWithChildren, useMemo } from 'react';
 import { CopyOutlined } from '@ant-design/icons';
-import { getThemeVar } from '../utils';
+import { getThemeVar, isCustomRpc } from '../utils';
 import { useApi } from '../hooks';
 
-const { Link } = Typography;
+const { Text } = Typography;
 
 export interface SubscanLinkProps extends PropsWithChildren<unknown> {
   address?: string;
@@ -15,8 +15,9 @@ export interface SubscanLinkProps extends PropsWithChildren<unknown> {
   copyable?: boolean;
 }
 
+// eslint-disable-next-line complexity
 export function SubscanLink({ address, extrinsic, children, copyable, block, ...other }: SubscanLinkProps) {
-  const { network } = useApi();
+  const { network, rpc, networkConfig } = useApi();
 
   const mainColor = useMemo(() => {
     return getThemeVar(network, '@project-main-bg');
@@ -26,11 +27,31 @@ export function SubscanLink({ address, extrinsic, children, copyable, block, ...
     return getThemeVar(network, '@link-color');
   }, [network]);
 
+  const { isCustomNetwork } = useMemo(() => {
+    return {
+      isCustomNetwork: isCustomRpc(rpc),
+    };
+  }, [rpc]);
+
+  const openLink = (url: string) => {
+    if (!url) {
+      return;
+    }
+    window.open(url, '_blank');
+  };
+
   if (address) {
     return (
-      <Link
-        href={`https://${network}.subscan.io/account/${address}`}
-        target="_blank"
+      <Text
+        onClick={() =>
+          openLink(
+            !isCustomNetwork
+              ? `https://${network}.subscan.io/account/${address}`
+              : networkConfig?.explorerHostName
+              ? `https://${networkConfig?.explorerHostName}.subscan.io/account/${address}`
+              : ''
+          )
+        }
         copyable={
           copyable && {
             tooltips: false,
@@ -50,28 +71,61 @@ export function SubscanLink({ address, extrinsic, children, copyable, block, ...
         style={{
           color: linkColor,
           height: '20px',
+          cursor: !isCustomNetwork || networkConfig?.explorerHostName ? 'pointer' : 'default',
         }}
       >
         {address}
-      </Link>
+      </Text>
     );
   }
 
   if (extrinsic) {
     const { height, index } = extrinsic;
 
     return (
-      <Link href={`https://${network}.subscan.io/extrinsic/${height}-${index}`} target="_blank" {...other}>
+      <Text
+        {...other}
+        onClick={() => {
+          openLink(
+            !isCustomNetwork
+              ? `https://${network}.subscan.io/extrinsic/${height}-${index}`
+              : networkConfig?.explorerHostName
+              ? `https://${networkConfig?.explorerHostName}.subscan.io/extrinsic/${height}-${index}`
+              : ''
+          );
+        }}
+        style={{
+          color: linkColor,
+          height: '20px',
+          cursor: !isCustomNetwork || networkConfig?.explorerHostName ? 'pointer' : 'default',
+        }}
+      >
         {children}
-      </Link>
+      </Text>
     );
   }
 
   if (block) {
     return (
-      <Link href={`https://${network}.subscan.io/block/${block}`} target="_blank" {...other}>
+      <Text
+        {...other}
+        onClick={() => {
+          openLink(
+            !isCustomNetwork
+              ? `https://${network}.subscan.io/block/${block}`
+              : networkConfig?.explorerHostName
+              ? `https://${networkConfig?.explorerHostName}.subscan.io/block/${block}`
+              : ''
+          );
+        }}
+        style={{
+          color: linkColor,
+          height: '20px',
+          cursor: !isCustomNetwork || networkConfig?.explorerHostName ? 'pointer' : 'default',
+        }}
+      >
         {block}
-      </Link>
+      </Text>
     );
   }