Merge pull request #623 from subquery/fix/home-load

feat: upgrade & home
subquery · Dec 15, 2023 · a72d21c · a72d21c
2 parents 9a22890 + cf4fb7f
commit a72d21c
Show file tree

Hide file tree

Showing 10 changed files with 500 additions and 141 deletions.
diff --git a/.env b/.env
@@ -10,7 +10,7 @@ VITE_STABLE_TOKEN=USDC.e
 VITE_STABLE_TOKEN_ADDRESS=0x2791Bca1f2de4661ED88A30C99A7a9449Aa84174
 VITE_FLEXPLAN_ENABLED=true
 VITE_STUDIO_ENABLED=false
-VITE_NETWORK=kepler
+VITE_NETWORK=mainnet
 VITE_GQL_PROXY=https://gql-proxy.subquery.network
 VITE_AUTH_URL=https://kepler-auth.subquery.network
 VITE_NETWORK_DEPLOYMENT_ID=QmWfLyhgwyhwAfbnHQfg4YhJG9Vuj4cuDH5R4oW35t6MYn

diff --git a/.env.staging b/.env.staging
@@ -10,7 +10,7 @@ VITE_STABLE_TOKEN=USDC.e
 VITE_STABLE_TOKEN_ADDRESS=0x2791Bca1f2de4661ED88A30C99A7a9449Aa84174
 VITE_FLEXPLAN_ENABLED=true
 VITE_STUDIO_ENABLED=false
-VITE_NETWORK=kepler
+VITE_NETWORK=mainnet
 VITE_GQL_PROXY=https://gql-proxy.subquery.network
 VITE_AUTH_URL=https://kepler-auth.subquery.network
 VITE_NETWORK_DEPLOYMENT_ID=QmWfLyhgwyhwAfbnHQfg4YhJG9Vuj4cuDH5R4oW35t6MYn

diff --git a/package.json b/package.json
@@ -21,11 +21,11 @@
     "@sentry/react": "^7.57.0",
     "@subql/apollo-links": "^1.2.3",
     "@subql/components": "1.0.3-22",
-    "@subql/contract-sdk": "^0.100.3",
-    "@subql/network-clients": "^0.100.0",
-    "@subql/network-config": "^0.100.0",
-    "@subql/network-query": "0.100.3-0",
-    "@subql/react-hooks": "0.100.3-1",
+    "@subql/contract-sdk": "0.111.0",
+    "@subql/network-clients": "^0.111.0",
+    "@subql/network-config": "^0.111.0",
+    "@subql/network-query": "0.111.0",
+    "@subql/react-hooks": "^0.111.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",

diff --git a/src/containers/Web3.tsx b/src/containers/Web3.tsx
@@ -2,22 +2,26 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React from 'react';
-import keplerJSON from '@subql/contract-sdk/publish/kepler.json';
+import { SubqueryNetwork } from '@subql/contract-sdk';
+import mainnetJSON from '@subql/contract-sdk/publish/mainnet.json';
 import testnetJSON from '@subql/contract-sdk/publish/testnet.json';
 import { NETWORKS_CONFIG_INFO, SQNetworks } from '@subql/network-config';
 import { InjectedConnector } from '@web3-react/injected-connector';
 import { useAccount } from 'wagmi';
 
 export const NETWORK_NAME: SQNetworks = import.meta.env.VITE_NETWORK;
-export const isMainnet = import.meta.env.VITE_NETWORK === 'kepler';
-export const SUPPORTED_NETWORK = (isMainnet ? 'kepler' : 'testnet') as SQNetworks;
+export const isMainnet = import.meta.env.VITE_NETWORK === 'mainnet';
+export const SUPPORTED_NETWORK = (isMainnet ? 'mainnet' : 'testnet') as SQNetworks;
 export const defaultChainId = parseInt(NETWORKS_CONFIG_INFO[SUPPORTED_NETWORK].chainId, 16);
 
 export const ECOSYSTEM_NETWORK = NETWORKS_CONFIG_INFO[SUPPORTED_NETWORK].chainName;
 
-export const NETWORK_DEPLOYMENT_DETAILS = isMainnet ? keplerJSON : testnetJSON;
+export const NETWORK_DEPLOYMENT_DETAILS = isMainnet ? mainnetJSON : testnetJSON;
 
-export const SQT_TOKEN_ADDRESS = NETWORK_DEPLOYMENT_DETAILS.SQToken.address;
+// TODO: FIXME, Mainnet dont have this yet
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+export const SQT_TOKEN_ADDRESS = NETWORK_DEPLOYMENT_DETAILS.child.SQToken.address;
 
 export const injectedConntector = new InjectedConnector({
   supportedChainIds: [defaultChainId],

diff --git a/src/hooks/useProjectList.tsx b/src/hooks/useProjectList.tsx
@@ -43,7 +43,7 @@ export const useProjectList = (props: UseProjectListProps = {}) => {
     variables: { offset: 0 },
   });
 
-  const [getProject, { error: topError }] = useGetProjectLazyQuery();
+  const [getProject, { error: topError, loading: topLoading }] = useGetProjectLazyQuery();
 
   const [searchKeywords, setSearchKeywords] = React.useState('');
   const [filterCategories, setFilterCategories] = useState<string[]>([]);
@@ -121,6 +121,7 @@ export const useProjectList = (props: UseProjectListProps = {}) => {
         // filter once or twice is the same.
         const nonEmptyProjects = res.data.projects?.nodes.filter(notEmpty).filter(notEmpty);
         const mergered = options?.refresh ? [...nonEmptyProjects] : [...fetchedProejcts.current, ...nonEmptyProjects];
+        // TODO: filter by backend.
         setProjects(mergered.filter((proj) => (account ? account.toLowerCase() === proj.owner.toLowerCase() : true)));
         fetchedProejcts.current = mergered;
         updatedLength = mergered.length;
@@ -143,8 +144,8 @@ export const useProjectList = (props: UseProjectListProps = {}) => {
   });
 
   const topProjectItem = useMemo(() => {
-    if (!showTopProject) return '';
-    if (!inSearchMode && topProject)
+    if (!showTopProject || inSearchMode) return '';
+    if (topProject)
       return (
         <ProjectItem
           project={topProject}
@@ -155,33 +156,53 @@ export const useProjectList = (props: UseProjectListProps = {}) => {
         />
       );
 
-    if (!inSearchMode) return <Skeleton paragraph={{ rows: 7 }} style={{ width: 236, height: 400 }} active></Skeleton>;
+    if (topLoading) return <Skeleton paragraph={{ rows: 7 }} style={{ width: 236, height: 400 }} active></Skeleton>;
 
     return '';
-  }, [inSearchMode, topProject, showTopProject, onProjectClick]);
+  }, [inSearchMode, topProject, topLoading, showTopProject, onProjectClick]);
 
   const projectListItems = useMemo(() => {
-    if (loading) {
-      return new Array(projects.length + 10 <= total ? 10 : total - projects.length).fill(0).map((_, i) => {
-        return <Skeleton paragraph={{ rows: 7 }} active key={i} style={{ width: 236, height: 400 }}></Skeleton>;
-      });
-    }
+    const loadingItems = new Array(projects.length + 10 <= total ? 10 : total - projects.length).fill(0).map((_, i) => {
+      return <Skeleton paragraph={{ rows: 7 }} active key={i} style={{ width: 236, height: 400 }}></Skeleton>;
+    });
     if (projects.length) {
-      return projects.map((project) => (
-        <ProjectItem
-          project={project}
-          key={project.id}
-          onClick={() => {
-            onProjectClick?.(project.id);
-          }}
-        />
-      ));
+      return (
+        <>
+          {projects.map((project) => (
+            <ProjectItem
+              project={project}
+              key={project.id}
+              onClick={() => {
+                onProjectClick?.(project.id);
+              }}
+            />
+          ))}
+          {loading && loadingItems}
+        </>
+      );
+    } else {
+      if (loading) return loadingItems;
     }
 
-    if (inSearchMode) return '';
-    // TODO: ui
-    return 'No Projects';
-  }, [inSearchMode, loading, projects]);
+    return '';
+  }, [inSearchMode, loading, projects, onProjectClick]);
+
+  const emptyResult = useMemo(() => {
+    if (loading || topLoading) return '';
+    if (inSearchMode && !projects.length)
+      return (
+        <div style={{ display: 'flex', justifyContent: 'center' }}>
+          <Typography>No projects match your search</Typography>
+        </div>
+      );
+
+    if (!inSearchMode && !projects.length && !topProject)
+      return (
+        <div style={{ display: 'flex', justifyContent: 'center' }}>
+          <Typography>No projects</Typography>
+        </div>
+      );
+  }, [loading, inSearchMode, projects, topProject, showTopProject, topLoading]);
 
   const listsWithSearch = useMemo(() => {
     return (
@@ -228,11 +249,7 @@ export const useProjectList = (props: UseProjectListProps = {}) => {
           {projectListItems}
         </div>
 
-        {inSearchMode && !loading && !projects.length && (
-          <div style={{ display: 'flex', justifyContent: 'center' }}>
-            <Typography>No projects match your search</Typography>
-          </div>
-        )}
+        {emptyResult}
 
         {(error || topError) && <span>{`We have an error: ${error?.message || topError?.message}`}</span>}
       </>

diff --git a/src/i18n/en/explorer.ts b/src/i18n/en/explorer.ts
@@ -38,14 +38,6 @@ const translation = {
     disconnect: 'Disconnect',
     walletBalance: `Wallet Balance: {{balance}} ${TOKEN}`,
   },
-  globalBanner: {
-    title: 'Season 3 Frontier Testnet has started 🔥',
-    description: 'Duration: {{startDate}} - {{endDate}} Local Time',
-    duration: 'Duration',
-    seasonEndTitle: 'Season 3 has finished, SubQuery Frontier was a huge success! 🔥',
-    seasonEndDescription:
-      'The incentivised phase of the SubQuery Frontier Network has finished, get ready for the Kepler Network',
-  },
   account: {
     title: {
       delegating: 'You are Delegating',

diff --git a/src/pages/explorer/Home/Home.module.css b/src/pages/explorer/Home/Home.module.css
@@ -6,8 +6,6 @@
 
 .header {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
   flex-direction: column;
   margin-bottom: 72px;
 }

diff --git a/src/pages/explorer/Home/Home.tsx b/src/pages/explorer/Home/Home.tsx
@@ -5,7 +5,9 @@ import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router';
 import { useProjectList } from '@hooks/useProjectList';
+import { PublishNewProjectModal } from '@pages/studio/Home/Home';
 import { Typography } from '@subql/components';
+import { Button } from 'antd';
 
 import { ROUTES } from '../../../utils';
 import styles from './Home.module.css';
@@ -15,12 +17,32 @@ const { PROJECT_NAV } = ROUTES;
 // TODO move to components
 export const Header: React.FC = () => {
   const { t } = useTranslation();
+  const [showPublishModal, setShowPublishModal] = React.useState(false);
+
   return (
     <div className={styles.header}>
       <Typography variant="h3">{t('explorer.home.header')}</Typography>
-      <Typography style={{ width: 439, textAlign: 'center', marginTop: 16 }} type="secondary">
-        {t('explorer.home.headerDesc')}
-      </Typography>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+        <Typography style={{ width: 565, marginTop: 16 }} type="secondary">
+          {t('explorer.home.headerDesc')}
+        </Typography>
+        <Button
+          type="primary"
+          shape="round"
+          size="large"
+          onClick={() => {
+            setShowPublishModal(true);
+          }}
+        >
+          Publish New Project
+        </Button>
+      </div>
+      <PublishNewProjectModal
+        value={showPublishModal}
+        onChange={(val) => {
+          setShowPublishModal(val);
+        }}
+      ></PublishNewProjectModal>
     </div>
   );
 };

diff --git a/src/pages/studio/Home/Home.tsx b/src/pages/studio/Home/Home.tsx
@@ -4,6 +4,7 @@
 import * as React from 'react';
 import { useNavigate } from 'react-router';
 import { useProjectList } from '@hooks/useProjectList';
+import { usePropsValue } from '@hooks/usePropsValue';
 import { Modal, Typography } from '@subql/components';
 import { Button, Form, Input } from 'antd';
 import { useForm } from 'antd/es/form/Form';
@@ -13,6 +14,67 @@ import { ROUTES } from '../../../utils';
 
 const { STUDIO_CREATE_NAV, STUDIO_PROJECT_NAV } = ROUTES;
 
+export const PublishNewProjectModal: React.FC<{ value: boolean; onChange: (val: boolean) => void }> = ({
+  value,
+  onChange,
+}) => {
+  const navigate = useNavigate();
+  const [form] = useForm();
+  const [showCreateModal, setShowCreateModal] = usePropsValue<boolean>({
+    value,
+    onChange,
+    defaultValue: false,
+  });
+  const handleCreateProject = () => {
+    navigate(
+      `${STUDIO_CREATE_NAV}?name=${encodeURI(form.getFieldValue('projectName'))}&deploymentId=${form.getFieldValue(
+        'deploymentId',
+      )}`,
+    );
+  };
+
+  return (
+    <Modal
+      title="Publish New Project to the Decentralised Network"
+      width={572}
+      open={showCreateModal}
+      onCancel={() => setShowCreateModal(false)}
+      onOk={async () => {
+        await form.validateFields();
+
+        handleCreateProject();
+      }}
+      okText={'Next'}
+      okButtonProps={{
+        shape: 'round',
+        size: 'large',
+      }}
+      cancelButtonProps={{
+        style: { display: 'none' },
+      }}
+    >
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 24, padding: '24px 0' }}>
+        <Typography style={{ color: 'var(--sq-gray700)' }}>
+          Please enter the deployment ID of your SubQuery project below. To get the deployment ID, run subql publish
+          from your project code to publish it to IPFS. Learn how to publish a SubQuery project here.
+        </Typography>
+
+        <Form layout="vertical" form={form}>
+          <Form.Item label="Deployment ID" name="deploymentId" rules={[{ required: true }]}>
+            <Input placeholder="Deployment ID" size="large"></Input>
+          </Form.Item>
+          <div>
+            <Form.Item label="Project Name" name="projectName" rules={[{ required: true }]}>
+              <Input placeholder="Project Name" size="large"></Input>
+            </Form.Item>
+            <Typography variant="medium">Project names should be unique, you can edit this later.</Typography>
+          </div>
+        </Form>
+      </div>
+    </Modal>
+  );
+};
+
 const Home: React.FC = () => {
   const { account } = useWeb3();
   const navigate = useNavigate();
@@ -23,15 +85,7 @@ const Home: React.FC = () => {
     },
   });
 
-  const [form] = useForm();
   const [showCreateModal, setShowCreateModal] = React.useState<boolean>(false);
-  const handleCreateProject = () => {
-    navigate(
-      `${STUDIO_CREATE_NAV}?name=${encodeURI(form.getFieldValue('projectName'))}&deploymentId=${form.getFieldValue(
-        'deploymentId',
-      )}`,
-    );
-  };
   const enableCreateModal = () => setShowCreateModal(true);
 
   return (
@@ -43,44 +97,12 @@ const Home: React.FC = () => {
         </Button>
       </div>
 
-      <Modal
-        title="Publish New Project to the Decentralised Network"
-        width={572}
-        open={showCreateModal}
-        onCancel={() => setShowCreateModal(false)}
-        onOk={async () => {
-          await form.validateFields();
-
-          handleCreateProject();
+      <PublishNewProjectModal
+        value={showCreateModal}
+        onChange={(val) => {
+          setShowCreateModal(val);
         }}
-        okText={'Next'}
-        okButtonProps={{
-          shape: 'round',
-          size: 'large',
-        }}
-        cancelButtonProps={{
-          style: { display: 'none' },
-        }}
-      >
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 24, padding: '24px 0' }}>
-          <Typography style={{ color: 'var(--sq-gray700)' }}>
-            Please enter the deployment ID of your SubQuery project below. To get the deployment ID, run subql publish
-            from your project code to publish it to IPFS. Learn how to publish a SubQuery project here.
-          </Typography>
-
-          <Form layout="vertical" form={form}>
-            <Form.Item label="Deployment ID" name="deploymentId" rules={[{ required: true }]}>
-              <Input placeholder="Deployment ID" size="large"></Input>
-            </Form.Item>
-            <div>
-              <Form.Item label="Project Name" name="projectName" rules={[{ required: true }]}>
-                <Input placeholder="Project Name" size="large"></Input>
-              </Form.Item>
-              <Typography variant="medium">Project names should be unique, you can edit this later.</Typography>
-            </div>
-          </Form>
-        </div>
-      </Modal>
+      />
 
       {listsWithSearch}
     </div>