Merge pull request #656 from subquery/feat/robust

feat: enhance robust

.env

@@ -1,9 +1,9 @@
 VITE_IPFS_GATEWAY=https://unauthipfs.subquery.network/ipfs/api/v0
-VITE_QUERY_REGISTRY_PROJECT=https://api.subquery.network/sq/subquery/kepler-network
-VITE_TOP_100_INDEXERS=https://leaderboard-api.subquery.network/graphql
-VITE_CONSUMER_HOST_ENDPOINT=https://kepler-chs.subquery.network
+VITE_QUERY_REGISTRY_PROJECT=https://api.subquery.network/sq/subquery/subquery-mainnet
+VITE_TOP_100_INDEXERS=https://lb-api.subquery.network/graphql
+VITE_CONSUMER_HOST_ENDPOINT=https://chs.subquery.network
 VITE_FORUM_DOMAIN=https://forum.subquery.network
 VITE_NETWORK=mainnet
 VITE_GQL_PROXY=https://gql-proxy.subquery.network
-VITE_AUTH_URL=https://kepler-auth.subquery.network
+VITE_AUTH_URL=https://auth.subquery.network
 VITE_NETWORK_DEPLOYMENT_ID=QmWfLyhgwyhwAfbnHQfg4YhJG9Vuj4cuDH5R4oW35t6MYn

.env.staging

@@ -1,9 +1,9 @@
 VITE_IPFS_GATEWAY=https://unauthipfs.subquery.network/ipfs/api/v0
-VITE_QUERY_REGISTRY_PROJECT=https://api.subquery.network/sq/subquery/kepler-network-staging
-VITE_TOP_100_INDEXERS=https://leaderboard-api.subquery.network/graphql
-VITE_CONSUMER_HOST_ENDPOINT=https://kepler-chs.subquery.network
+VITE_QUERY_REGISTRY_PROJECT=https://api.subquery.network/sq/subquery/subquery-mainnet
+VITE_TOP_100_INDEXERS=https://lb-api.subquery.network/graphql
+VITE_CONSUMER_HOST_ENDPOINT=https://chs.subquery.network
 VITE_FORUM_DOMAIN=https://forum.subquery.network
 VITE_NETWORK=mainnet
 VITE_GQL_PROXY=https://gql-proxy.subquery.network
-VITE_AUTH_URL=https://kepler-auth.subquery.network
+VITE_AUTH_URL=https://auth.subquery.network
 VITE_NETWORK_DEPLOYMENT_ID=QmWfLyhgwyhwAfbnHQfg4YhJG9Vuj4cuDH5R4oW35t6MYn

package.json

@@ -21,11 +21,11 @@
     "@sentry/react": "^7.57.0",
     "@subql/apollo-links": "^1.3.0",
     "@subql/components": "1.0.3-29",
-    "@subql/contract-sdk": "0.116.1",
-    "@subql/network-clients": "^0.114.0",
-    "@subql/network-config": "^0.114.1-0",
-    "@subql/network-query": "0.112.1-3",
-    "@subql/react-hooks": "^0.114.1-1",
+    "@subql/contract-sdk": "1.0.0",
+    "@subql/network-clients": "1.1.0",
+    "@subql/network-config": "1.1.1",
+    "@subql/network-query": "1.1.0",
+    "@subql/react-hooks": "1.1.0",
     "@web3-name-sdk/core": "^0.1.5",
     "@web3-react/core": "^6.1.9",
     "@web3-react/injected-connector": "^6.0.7",

src/components/DoAllocate/DoAllocate.tsx

@@ -65,8 +65,6 @@ const DoAllocate: FC<IProps> = ({ projectId, deploymentId, actionBtn, onSuccess,
     };
   }, [account]);
 
-  console.warn(runnerAllocation.data?.total.toString(), runnerAllocation.data?.used.toString());
-
   const allocationRewardsRate = useAsyncMemo(async () => {
     const rewards = await contracts?.rewardsBooster.boosterQueryRewardRate(
       project.data?.type === ProjectType.RPC ? 1 : 0,

src/components/Dropdown/Dropdown.tsx

@@ -11,7 +11,7 @@ import styles from './Dropdown.module.css';
 
 interface keyPair {
   key: string;
-  label: string;
+  label: React.ReactNode;
   icon?: React.ReactNode;
   onClick?: (key: string) => void;
 }
@@ -48,7 +48,9 @@ export const Dropdown: React.FC<DropdownProps> = ({ menu, menuItem, dropdownCont
     <AntdDropdown overlay={menuList} className={clsx(styles.hosted, 'flex-center', styleProps)}>
       {typeof dropdownContent === 'string' || !dropdownContent ? (
         <div>
-          {dropdownContent || menu[0]?.label} <BsChevronDown className={styles.downIcon} />
+          <span style={{ maxWidth: 400 }} className="overflowEllipsis">
+            {dropdownContent || menu[0]?.label} <BsChevronDown className={styles.downIcon} />
+          </span>
         </div>
       ) : (
         dropdownContent

src/components/NormalError/index.module.less

@@ -0,0 +1,12 @@
+.normalError {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  row-gap: 8px;
+}
+
+.withWrapper {
+  width: 100%;
+  height: 100%;
+}

src/components/NormalError/index.tsx

@@ -0,0 +1,38 @@
+// Copyright 2020-2022 SubQuery Pte Ltd authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React, { FC } from 'react';
+import { Typography } from '@subql/components';
+import { clsx } from 'clsx';
+
+import styles from './index.module.less';
+
+interface IProps {
+  size?: 'normal' | 'small';
+  children?: React.ReactNode;
+  withWrapper?: boolean;
+}
+
+const NormalError: FC<IProps> = (props) => {
+  const { size = 'normal', children, withWrapper = false } = props;
+
+  return (
+    <div className={clsx(styles.normalError, withWrapper ? styles.withWrapper : '')}>
+      <img
+        src="/static/rpcError.svg"
+        alt="rpc"
+        style={{
+          width: 96,
+          height: 74,
+        }}
+      ></img>
+      <Typography variant={size === 'small' ? 'h6' : 'h5'} weight={500}>
+        Oops! Something went wrong.
+      </Typography>
+      <Typography type="secondary" style={{ textAlign: 'center' }}>
+        {children}
+      </Typography>
+    </div>
+  );
+};
+export default NormalError;

src/components/ProjectCard/ProjectCard.tsx

@@ -40,7 +40,7 @@ const ProjectCard: React.FC<Props> = ({ project, onClick }) => {
         renderPlaceholder={() => <div style={{ width: '100%', height: '205px', background: '#fff' }}></div>}
       />
       <div style={{ flex: 1 }}>
-        <Typography style={{ marginTop: 16, marginBottom: 6, height: 48 }} weight={600}>
+        <Typography className="overflowEllipsis2" style={{ marginTop: 16, marginBottom: 6, height: 48 }} weight={600}>
           {project.metadata?.name || project.id}
         </Typography>
       </div>
@@ -87,7 +87,7 @@ const ProjectCard: React.FC<Props> = ({ project, onClick }) => {
             Last updated
           </Typography>
           <Typography variant="small" style={{ marginLeft: 8 }}>
-            {dayjs(project.updatedTimestamp).utc().fromNow()}
+            {dayjs(project.updatedTimestamp).utc(true).fromNow()}
           </Typography>
         </div>
       )}

src/components/ProjectDeployments/ProjectDeployments.tsx

@@ -90,7 +90,11 @@ const ProjectDeployments: React.FC<Props> = ({ deployments, projectId, currentDe
             dataIndex: 'version',
             key: 'version',
             title: <TableTitle>{t('deployments.header1')}</TableTitle>,
-            render: (val) => <Typography>{val}</Typography>,
+            render: (val) => (
+              <Typography className="overflowEllipsis" style={{ maxWidth: 150 }}>
+                {val}
+              </Typography>
+            ),
           },
           {
             dataIndex: 'deploymentId',

src/components/ProjectHeader/ProjectHeader.tsx

@@ -10,6 +10,7 @@ import { Address, Typography } from '@subql/components';
 import { ProjectType } from '@subql/network-query';
 import { formatNumber, formatSQT } from '@utils';
 import { Button } from 'antd';
+import clsx from 'clsx';
 import dayjs from 'dayjs';
 
 import Detail from '../Detail';
@@ -48,7 +49,14 @@ const ProjectHeader: React.FC<Props> = ({
         deployment?.deploymentBoosterSummariesByDeploymentId?.groupedAggregates?.[0]?.keys?.[0] === key
           ? deployment?.deploymentBoosterSummariesByDeploymentId?.groupedAggregates?.[0]?.sum?.totalAmount || '0'
           : '0';
-      return { key, label: `${value} - Booster: ${formatNumber(formatSQT(booster))}` };
+      return {
+        key,
+        label: (
+          <Typography style={{ maxWidth: 400 }} className="overflowEllipsis">{`${value} - Booster: ${formatNumber(
+            formatSQT(booster),
+          )}`}</Typography>
+        ),
+      };
     });
 
     const handleOnClick = (key: string) => {
@@ -60,7 +68,7 @@ const ProjectHeader: React.FC<Props> = ({
         menu={menu}
         handleOnClick={handleOnClick}
         dropdownContent={currentVersion ? versions[currentVersion] : versions[0]}
-        styleProps={styles.dropdown}
+        styleProps={clsx(styles.dropdown)}
       />
     );
   };
@@ -73,7 +81,12 @@ const ProjectHeader: React.FC<Props> = ({
       <div className={styles.inner}>
         <div className={styles.upper}>
           <div className={styles.titleVersion}>
-            <Typography variant="h4" className={styles.name} weight={600} style={{ marginRight: 8 }}>
+            <Typography
+              variant="h4"
+              className={clsx(styles.name, 'overflowEllipsis')}
+              weight={600}
+              style={{ marginRight: 8, maxWidth: 500 }}
+            >
               {project.metadata.name}
             </Typography>
             {isUnsafeDeployment && <UnsafeWarn></UnsafeWarn>}
@@ -87,11 +100,14 @@ const ProjectHeader: React.FC<Props> = ({
           <Address address={project.owner} size="small" />
 
           <div style={{ marginTop: 8, display: 'flex', flexWrap: 'wrap', gap: 8 }}>
+            {/* in case of someone skip the legal process add more than 2 categories */}
             {project.metadata.categories &&
-              project.metadata.categories.map((val) => {
+              project.metadata.categories.slice(2).map((val) => {
                 return (
-                  <Button key={val} type="primary" shape="round" className="staticButton">
-                    {val}
+                  <Button key={val} type="primary" shape="round" className={clsx('staticButton', 'overflowEllipsis')}>
+                    <span className="overflowEllipsis" style={{ maxWidth: 300 }}>
+                      {val}
+                    </span>
                   </Button>
                 );
               })}

src/components/ProjectOverview/ProjectOverview.tsx

@@ -43,7 +43,9 @@ export const ExternalLink: React.FC<{ link?: string; icon: 'globe' | 'github' }>
       ) : (
         <BsGlobe style={{ color: 'var(--sq-blue600)', marginRight: 8 }}></BsGlobe>
       )}
-      <Typography.Link href={link as string}>{link || 'N/A'}</Typography.Link>
+      <Typography.Link href={link as string} className="overflowEllipsis" style={{ maxWidth: 700 }}>
+        {link || 'N/A'}
+      </Typography.Link>
     </div>
   );
 };

src/containers/IPFS.ts

@@ -44,7 +44,9 @@ function useIPFSImpl(
       return cachedRes;
     }
 
-    const results = ipfs.current.cat(cid);
+    const results = ipfs.current.cat(cid, {
+      length: 1024 * 1024 * 2, // 2MB
+    });
 
     let res: Uint8Array | undefined = undefined;
 

src/hooks/useProjectFromQuery.tsx

@@ -17,7 +17,7 @@ export type ProjectDetailsQuery = Omit<Project, 'metadata' | '__typename'> & {
 
 export function useProjectFromQuery(id: string): AsyncData<ProjectDetailsQuery> {
   const { getMetadataFromCid } = useProjectMetadata();
-  const [now] = useState(dayjs().utc().toDate());
+  const [now] = useState(dayjs().utc(true).toDate());
   const { data, loading, error } = useGetProjectQuery({
     variables: {
       id,

src/index.less

@@ -273,6 +273,15 @@ label,
   text-overflow: ellipsis;
 }
 
+
+.overflowEllipsis2 {
+  overflow : hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  word-break: break-all;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
 /* For antD UI - for future lib usage*/
 /* For antD table header */
 // TODO: Those should be define at components.

src/pages/explorer/Project/Project.tsx

@@ -4,6 +4,7 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Navigate, Route, Routes, useLocation, useNavigate, useParams } from 'react-router';
+import NormalError from '@components/NormalError';
 import { useGetDeploymentManifest } from '@hooks/useGetDeploymentManifest';
 import { useGetIfUnsafeDeployment } from '@hooks/useGetIfUnsafeDeployment';
 import { ServiceAgreementsTable } from '@pages/consumer/ServiceAgreements/ServiceAgreementsTable';
@@ -104,7 +105,11 @@ const ProjectInner: React.FC = () => {
 
   const page = renderAsync(asyncProject, {
     loading: () => <Spinner />,
-    error: (e) => <span>{`Failed to load project: ${e.message}`}</span>,
+    error: (e) => (
+      <NormalError withWrapper>
+        This project looks like have wrong metadata, Please contact the project creator to fix it.
+      </NormalError>
+    ),
     data: (project) => {
       if (!project) {
         // Should never happen
@@ -128,7 +133,11 @@ const ProjectInner: React.FC = () => {
                 },
                 {
                   key: 'current',
-                  title: project.metadata.name,
+                  title: (
+                    <Typography variant="medium" className="overflowEllipsis" style={{ maxWidth: 300 }}>
+                      {project.metadata.name}
+                    </Typography>
+                  ),
                 },
               ]}
             ></Breadcrumb>

src/pages/projects/Create/Create.tsx

@@ -15,7 +15,7 @@ import { t } from 'i18next';
 import { FTextInput, ImageInput } from '../../../components';
 import { useCreateProject, useProject, useRouteQuery, useUpdateProjectMetadata } from '../../../hooks';
 import { FormCreateProjectMetadata, newDeploymentSchema, projectMetadataSchema, ProjectType } from '../../../models';
-import { categoriesOptions, parseError, ROUTES, rpcCategoriesOptions } from '../../../utils';
+import { categoriesOptions, parseError, ROUTES } from '../../../utils';
 import { ProjectDeploymentsDetail } from '../Project/Project';
 import styles from './Create.module.less';
 

src/pages/projects/Project/Project.tsx

@@ -4,6 +4,7 @@
 import * as React from 'react';
 import { useNavigate, useParams } from 'react-router';
 import Expand from '@components/Expand/Expand';
+import NormalError from '@components/NormalError';
 import { ExternalLink } from '@components/ProjectOverview/ProjectOverview';
 import UnsafeWarn from '@components/UnsafeWarn';
 import { useGetIfUnsafeDeployment } from '@hooks/useGetIfUnsafeDeployment';
@@ -126,7 +127,11 @@ const Project: React.FC = () => {
   return renderAsync(asyncProject, {
     loading: () => <Spinner />,
     error: (error: Error) => {
-      return <Typography>{`Failed to load project: ${parseError(error)}`}</Typography>;
+      return (
+        <NormalError withWrapper>
+          This project looks like have wrong metadata, Please contact the project creator to fix it.
+        </NormalError>
+      );
     },
     data: (project) => {
       if (!project) {
@@ -159,7 +164,11 @@ const Project: React.FC = () => {
                 },
                 {
                   key: 'current',
-                  title: project.metadata.name,
+                  title: (
+                    <Typography variant="medium" className="overflowEllipsis" style={{ maxWidth: 300 }}>
+                      {project.metadata.name}
+                    </Typography>
+                  ),
                 },
               ]}
             ></Breadcrumb>
@@ -171,7 +180,7 @@ const Project: React.FC = () => {
               />{' '}
               <div className="col-flex" style={{ flex: 1 }}>
                 <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }}>
-                  <Typography variant="h4" weight={600}>
+                  <Typography variant="h4" weight={600} className="overflowEllipsis" style={{ maxWidth: 500 }}>
                     {project.metadata.name}
                   </Typography>