Merge pull request #639 from subquery/feat/poor-network-env

feat & perf: up user exp
subquery · Jan 22, 2024 · 17d4e8a · 17d4e8a
2 parents c051b3f + fcd39c8
commit 17d4e8a
Show file tree

Hide file tree

Showing 39 changed files with 509 additions and 192 deletions.
diff --git a/package.json b/package.json
@@ -14,18 +14,18 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.2.5",
-    "@apollo/client": "^3.4.16",
+    "@apollo/client": "^3.8.10",
     "@apollo/react-testing": "^4.0.0",
     "@polkadot/util": "^7.8.2",
     "@rainbow-me/rainbowkit": "^1.2.0",
     "@sentry/react": "^7.57.0",
-    "@subql/apollo-links": "^1.2.3",
+    "@subql/apollo-links": "^1.3.0",
     "@subql/components": "1.0.3-27",
     "@subql/contract-sdk": "0.112.0",
-    "@subql/network-clients": "^0.112.1-1",
+    "@subql/network-clients": "^0.112.1-2",
     "@subql/network-config": "^0.112.0",
-    "@subql/network-query": "0.112.1-1",
-    "@subql/react-hooks": "^0.112.1-3",
+    "@subql/network-query": "0.112.1-2",
+    "@subql/react-hooks": "^0.112.1-4",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",

diff --git a/src/components/AccountActions/AccountActions.tsx b/src/components/AccountActions/AccountActions.tsx
@@ -75,7 +75,7 @@ export const AccountActions: React.FC<{ account: string }> = ({ account }) => {
               Wallet balance on Polygon
             </Typography>
             <Typography weight={600}>
-              {formatEther(balance.data, 4)} {TOKEN}
+              {formatEther(balance.result.data, 4)} {TOKEN}
             </Typography>
           </div>
           <div className="col-flex" style={{ gap: 8 }}>
@@ -97,7 +97,7 @@ export const AccountActions: React.FC<{ account: string }> = ({ account }) => {
               </Tooltip>
             </Typography>
             <Typography weight={600}>
-              {formatEther(ethSqtBalance.data, 4)} {TOKEN}
+              {formatEther(ethSqtBalance.result.data, 4)} {TOKEN}
             </Typography>
           </div>
         </div>
@@ -138,7 +138,7 @@ export const AccountActions: React.FC<{ account: string }> = ({ account }) => {
           <div style={{ display: 'flex', flexDirection: 'column' }}>
             <Typography>Billing Balance:</Typography>
             <Typography>
-              {formatEther(consumerHostBalance.data?.balance, 4)} {TOKEN}
+              {formatEther(consumerHostBalance.result.data?.balance, 4)} {TOKEN}
             </Typography>
           </div>
         </div>

diff --git a/src/components/BillingTransferModal/BillingTransferModal.tsx b/src/components/BillingTransferModal/BillingTransferModal.tsx
@@ -20,9 +20,9 @@ export const BillingExchangeModal = ({ action }: { action: TransferAction }) =>
   const { t } = useTranslation();
   const { contracts } = useWeb3Store();
   const { consumerHostAllowance, balance, consumerHostBalance } = useSQToken();
-  const sortedBalance = balance.data;
-  const sortedConsumerHostBalance = consumerHostBalance.data?.balance;
-  const requireTokenApproval = consumerHostAllowance?.data?.isZero();
+  const sortedBalance = balance.result.data;
+  const sortedConsumerHostBalance = consumerHostBalance.result.data?.balance;
+  const requireTokenApproval = consumerHostAllowance?.result.data?.isZero();
   const [loadingIncreateAllowance, setLoadingIncreateAllowance] = useState(false);
   const getModalText = (action: TransferAction) => {
     if (action === 'Transfer') {
@@ -70,7 +70,7 @@ export const BillingExchangeModal = ({ action }: { action: TransferAction }) =>
     const sortedAmount = parseEther(amount.toString());
 
     if (action === 'Transfer') {
-      if (consumerHostAllowance?.data?.lt(sortedAmount)) {
+      if (consumerHostAllowance?.result.data?.lt(sortedAmount)) {
         setLoadingIncreateAllowance(true);
         try {
           openNotification({
@@ -104,8 +104,8 @@ export const BillingExchangeModal = ({ action }: { action: TransferAction }) =>
         curAmount: getMaxAmount(action),
       }}
       onSuccess={() => {
-        consumerHostBalance.refetch(true);
-        balance.refetch(true);
+        consumerHostBalance.refetch();
+        balance.refetch();
       }}
       variant={'textBtn'}
       renderContent={(onSubmit, onCancel, isLoading, error) => {

diff --git a/src/components/ConnectWallet/ChainStatus.tsx b/src/components/ConnectWallet/ChainStatus.tsx
@@ -5,19 +5,19 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { AppTypography } from '@components/Typography';
 import { Button } from 'antd';
-import { useNetwork, useSwitchNetwork } from 'wagmi';
+import { useAccount, useNetwork, useSwitchNetwork } from 'wagmi';
 
 import { ECOSYSTEM_NETWORK } from '../../containers/Web3';
 import styles from './ChainStatus.module.css';
 
 const tipsChainIds = import.meta.env.MODE === 'testnet' ? [80001] : [137];
 
 export const ChainStatus: React.FC<React.PropsWithChildren> = ({ children }) => {
+  const { isConnected } = useAccount();
   const { chain } = useNetwork();
   const { chains, switchNetwork } = useSwitchNetwork();
   const { t } = useTranslation();
-
-  if (!tipsChainIds.includes(chain?.id || 0)) {
+  if (isConnected && !tipsChainIds.includes(chain?.id || 0)) {
     return (
       <div className={styles.container}>
         <div className={styles.content}>

diff --git a/src/components/IndexerDetails/IndexerDetails.module.less b/src/components/IndexerDetails/IndexerDetails.module.less
@@ -63,7 +63,6 @@
 
 .progressBar {
   width: 100%;
-  padding-right: 20px;
 }
 
 .indexingBlock {

diff --git a/src/components/IndexerDetails/IndexerDetails.tsx b/src/components/IndexerDetails/IndexerDetails.tsx
@@ -4,6 +4,7 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { EmptyList } from '@components/EmptyList';
+import { Manifest } from '@hooks/useGetDeploymentManifest';
 import { ProjectDetailsQuery } from '@hooks/useProjectFromQuery';
 import { Spinner, TableTitle, Typography } from '@subql/components';
 import { ServiceStatus } from '@subql/network-query';
@@ -18,6 +19,7 @@ import Row from './Row';
 type Props = {
   deploymentId: string | undefined;
   project: ProjectDetailsQuery;
+  manifest?: Manifest;
 };
 
 const NoIndexers: React.FC = () => {
@@ -33,7 +35,7 @@ const NoIndexers: React.FC = () => {
   );
 };
 
-const IndexerDetails: React.FC<Props> = ({ deploymentId, project }) => {
+const IndexerDetails: React.FC<Props> = ({ deploymentId, project, manifest }) => {
   const { t } = useTranslation();
 
   const [loadIndexersLazy, asyncIndexers] = useGetDeploymentIndexersLazyQuery();
@@ -158,7 +160,13 @@ const IndexerDetails: React.FC<Props> = ({ deploymentId, project }) => {
               .filter(notEmpty)
               .sort((indexer) => (indexer.status === ServiceStatus.READY ? -1 : 1))
               .map((indexer) => (
-                <Row type={project.type} indexer={indexer} key={indexer.indexerId} deploymentId={deploymentId} />
+                <Row
+                  type={project.type}
+                  rpcFamily={manifest?.rpcFamily}
+                  indexer={indexer}
+                  key={indexer.indexerId}
+                  deploymentId={deploymentId}
+                />
               ))}
           </>
           <div className={styles.indexersPagination}>

diff --git a/src/components/IndexerDetails/PlansTable.tsx b/src/components/IndexerDetails/PlansTable.tsx
@@ -37,7 +37,7 @@ type DoPurchaseProps = {
   indexerDetails?: IndexerDetails;
   purchasePlan: (indexer: string, planId?: string) => Promise<ContractTransaction>;
   balance: AsyncData<BigNumber>;
-  planManagerAllowance: AsyncData<BigNumber> & { refetch: () => void };
+  planManagerAllowance: { result: AsyncData<BigNumber>; refetch: () => void };
   deploymentId?: string;
 };
 
@@ -53,7 +53,7 @@ const DoPurchase: React.FC<DoPurchaseProps> = ({
   const { contracts } = useWeb3Store();
   const { pricePreview } = useStableCoin(contracts, NETWORK_NAME);
 
-  const requiresTokenApproval = planManagerAllowance.data?.isZero();
+  const requiresTokenApproval = planManagerAllowance.result.data?.isZero();
 
   const modalText = requiresTokenApproval
     ? tokenApprovalModalText
@@ -127,7 +127,7 @@ const DoPurchase: React.FC<DoPurchaseProps> = ({
       text={modalText}
       onClick={() => purchasePlan(plan.creator, last(plan.id.split(':')))}
       renderContent={(onSubmit, onCancel, isLoading, error) => {
-        return renderAsync(planManagerAllowance, {
+        return renderAsync(planManagerAllowance.result, {
           loading: () => <Spinner />,
           error: (e) => <Typography>{`Failed to check if token needs approval: ${e.message}`}</Typography>,
           data: () => {
@@ -188,7 +188,7 @@ export const PlansTable: React.FC<PlansTableProps> = ({ loadPlans, asyncPlans, p
   }, [loadPlans, asyncPlans]);
 
   React.useEffect(() => {
-    if (planManagerAllowance.error) {
+    if (planManagerAllowance.result.error) {
       planManagerAllowance.refetch();
     }
   }, []);

diff --git a/src/components/IndexerDetails/Progress.tsx b/src/components/IndexerDetails/Progress.tsx
@@ -33,18 +33,15 @@ const Progress: React.FC<{ startBlock?: number; currentBlock: number; targetBloc
 
   return (
     <div className={styles.progress}>
-      <SubqlProgress percent={maxProgress * 100} className={styles.progressBar} showInfo={false} />
-      {blocksBehind > 0 && (
-        <div>
-          <Typography variant="medium" className={styles.precentage}>
-            {`${strip(maxProgress * 100)} % `}
-          </Typography>
-          <Typography variant="medium" className={styles.indexingBlock}>
-            {t('indexerProgress.blocks')}
-          </Typography>
-          <Typography variant="medium" className={styles.indexingBlockCount}>{`#${currentBlock}`}</Typography>
-        </div>
-      )}
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <SubqlProgress percent={maxProgress * 100} className={styles.progressBar} showInfo={false} />
+        <Typography variant="medium" className={styles.precentage}>
+          {`${strip(maxProgress * 100, 1)}% `}
+        </Typography>
+      </div>
+      <Typography variant="small" type="secondary">
+        {blocksBehind > 0 ? `${blocksBehind} Block${blocksBehind > 1 ? 's' : ''} behind` : 'Fully synced'}
+      </Typography>
     </div>
   );
 };

diff --git a/src/components/IndexerDetails/Row.tsx b/src/components/IndexerDetails/Row.tsx
@@ -8,6 +8,7 @@ import { useNavigate } from 'react-router';
 import { LazyQueryResult } from '@apollo/client';
 import RpcPlayground from '@components/RpcPlayground/RpcPlayground';
 import { WalletRoute } from '@components/WalletRoute';
+import { Manifest } from '@hooks/useGetDeploymentManifest';
 import { useIsLogin } from '@hooks/useIsLogin';
 import { useRequestServiceAgreementToken } from '@hooks/useRequestServiceAgreementToken';
 import { Modal, Spinner } from '@subql/components';
@@ -81,7 +82,8 @@ const ConnectedRow: React.FC<{
   indexer: ExcludeNull<ExcludeNull<GetDeploymentIndexersQuery['indexerDeployments']>['nodes'][number]>;
   deploymentId?: string;
   type: ProjectType;
-}> = ({ indexer, deploymentId, type }) => {
+  rpcFamily?: Manifest['rpcFamily'];
+}> = ({ indexer, deploymentId, type, rpcFamily }) => {
   const { t } = useTranslation();
   const { address: account } = useAccount();
   const navigate = useNavigate();
@@ -316,7 +318,7 @@ const ConnectedRow: React.FC<{
       <Table columns={columns} dataSource={rowData} showHeader={false} pagination={false} rowKey="id" />
       {showPlans && (
         <PlansTable
-          balance={balance}
+          balance={balance.result}
           planManagerAllowance={planAllowance}
           purchasePlan={purchasePlan}
           loadPlans={loadDeploymentPlans}
@@ -386,7 +388,9 @@ const ConnectedRow: React.FC<{
         {type === ProjectType.SUBQUERY && queryUrl && trailToken && (
           <GraphiQL url={queryUrl} bearToken={trailToken} theme="dark"></GraphiQL>
         )}
-        {type === ProjectType.RPC && <RpcPlayground url={queryUrl} trailToken={trailToken}></RpcPlayground>}
+        {type === ProjectType.RPC && (
+          <RpcPlayground url={queryUrl} trailToken={trailToken} rpcFamily={rpcFamily}></RpcPlayground>
+        )}
       </AntdModal>
     </>
   );

diff --git a/src/components/ModalClaimIndexerRewards/ModalClaimIndexerRewards.tsx b/src/components/ModalClaimIndexerRewards/ModalClaimIndexerRewards.tsx
@@ -45,7 +45,7 @@ export const ModalClaimIndexerRewards: React.FC<IModalClaimIndexerRewards> = ({
       const approvalTxResult = await approvalTx.wait();
 
       if (approvalTxResult.status === 1) {
-        onSuccess && onSuccess();
+        onSuccess && (await onSuccess());
       } else {
         onFail && onFail();
       }
@@ -67,6 +67,7 @@ export const ModalClaimIndexerRewards: React.FC<IModalClaimIndexerRewards> = ({
         <Button
           shape="round"
           size="large"
+          type="primary"
           className={isLoading ? 'disabledButton' : 'button'}
           loading={isLoading}
           disabled={isLoading}

diff --git a/src/components/ProjectCard/ProjectCard.tsx b/src/components/ProjectCard/ProjectCard.tsx
@@ -46,7 +46,7 @@ const ProjectCard: React.FC<Props> = ({ project, onClick }) => {
       {project.type === ProjectType.SUBQUERY ? (
         <Address address={project.owner} size="small" />
       ) : (
-        <Typography variant="small">
+        <Typography variant="small" style={{ textTransform: 'capitalize' }}>
           {project.manifest?.rpcFamily?.[0]}
           {project.manifest?.rpcFamily?.[0] && project.manifest?.nodeType && ' - '}
           {project.manifest?.nodeType}

diff --git a/src/components/ProjectOverview/ProjectOverview.tsx b/src/components/ProjectOverview/ProjectOverview.tsx
@@ -106,7 +106,9 @@ const ProjectOverview: React.FC<Props> = ({ project, metadata, deploymentDescrip
                   <Typography variant="medium" type="secondary">
                     Family:{' '}
                   </Typography>
-                  <Typography variant="medium">{manifest?.rpcFamily?.join(' ')}</Typography>
+                  <Typography variant="medium" style={{ textTransform: 'capitalize' }}>
+                    {manifest?.rpcFamily?.join(' ')}
+                  </Typography>
                 </div>
               )}
               {manifest?.client?.name && (
@@ -122,7 +124,9 @@ const ProjectOverview: React.FC<Props> = ({ project, metadata, deploymentDescrip
                   <Typography variant="medium" type="secondary">
                     Node type:{' '}
                   </Typography>
-                  <Typography variant="medium">{manifest?.nodeType}</Typography>
+                  <Typography variant="medium" style={{ textTransform: 'capitalize' }}>
+                    {manifest?.nodeType}
+                  </Typography>
                 </div>
               )}
             </div>
@@ -148,9 +152,18 @@ const ProjectOverview: React.FC<Props> = ({ project, metadata, deploymentDescrip
               </Typography>
             </div>
 
-            <div className="flex" style={{ justifyContent: 'space-between', margin: '12px 0' }}>
+            <div className="flex" style={{ justifyContent: 'space-between' }}>
+              <Typography variant="small" type="secondary">
+                Total Active Agreements
+              </Typography>
+              <Typography variant="small">
+                {project.deployments.nodes.find((i) => i?.id === deploymentId)?.serviceAgreementsActive.totalCount || 0}
+              </Typography>
+            </div>
+
+            <div className="flex" style={{ justifyContent: 'space-between' }}>
               <Typography variant="small" type="secondary">
-                Total Agreements
+                Total Agreements over all time
               </Typography>
               <Typography variant="small">
                 {project.deployments.nodes.find((i) => i?.id === deploymentId)?.serviceAgreements.totalCount || 0}

diff --git a/src/components/RpcPlayground/RpcPlayground.tsx b/src/components/RpcPlayground/RpcPlayground.tsx
@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React, { FC, useMemo, useState } from 'react';
+import { Manifest, RPCFAMILY } from '@hooks/useGetDeploymentManifest';
 import { Typography } from '@subql/components';
 import { getAuthReqHeader } from '@utils';
 import { Button, Input } from 'antd';
@@ -12,9 +13,41 @@ import styles from './index.module.less';
 interface IProps {
   url?: string;
   trailToken: string;
+  rpcFamily?: Manifest['rpcFamily'];
 }
 
-const RpcPlayground: FC<IProps> = ({ url, trailToken }) => {
+export const playgroundValidator = {
+  [RPCFAMILY.EVM]: async (val: string) => {
+    try {
+      const valCopy = JSON.parse(val) as { [key: string]: unknown };
+      const requestFields = ['jsonrpc', 'id', 'method', 'params'];
+
+      for (const field of requestFields) {
+        if (!Object.hasOwn(valCopy, field)) {
+          return Promise.reject(new Error(`Must have field "${field}"`));
+        }
+      }
+    } catch (e) {
+      return Promise.reject(new Error('Please enter a valid json'));
+    }
+  },
+  [RPCFAMILY.SUBSTRATE]: async (val: string) => {
+    try {
+      JSON.parse(val) as { [key: string]: unknown };
+    } catch (e) {
+      return Promise.reject(new Error('Please enter a valid json'));
+    }
+  },
+};
+
+export const playgroundPlaceholder: {
+  [key: string]: string;
+} = {
+  [RPCFAMILY.EVM]: `Example: {"jsonrpc":"2.0","id": 1, "method":"eth_blockNumber","params":[]}`,
+  default: 'JSON RPC playground is a simple tool to help you test queries, click to enter you requests.',
+};
+
+const RpcPlayground: FC<IProps> = ({ url, trailToken, rpcFamily }) => {
   const [val, setVal] = useState('');
   const [loading, setLoading] = useState(false);
   const enteredRows = useMemo(() => {
@@ -27,6 +60,10 @@ const RpcPlayground: FC<IProps> = ({ url, trailToken }) => {
     if (!url) return;
     try {
       setLoading(true);
+      if (rpcFamily) {
+        const [firstFamily] = rpcFamily;
+        await playgroundValidator[firstFamily.toLowerCase() as RPCFAMILY]?.(val);
+      }
       const res = await fetchJson(
         {
           url,
@@ -65,7 +102,7 @@ const RpcPlayground: FC<IProps> = ({ url, trailToken }) => {
               setVal(e.target.value);
             }}
             style={{ resize: 'none' }}
-            placeholder="JSON RPC playground is a simple tool to help you test queries, click to enter you requests."
+            placeholder={playgroundPlaceholder[rpcFamily?.[0] || 'default']}
           ></Input.TextArea>
         </div>