Feat/updates 2023 11 28

.env

@@ -6,7 +6,7 @@ VITE_TOP_100_INDEXERS=https://leaderboard-api.subquery.network/graphql
 VITE_CONSUMER_HOST_ENDPOINT=https://kepler-chs.subquery.network
 VITE_FORUM_DOMAIN=https://forum.subquery.network
 VITE_TOKEN=kSQT
-VITE_STABLE_TOKEN=USDC
+VITE_STABLE_TOKEN=USDC.e
 VITE_STABLE_TOKEN_ADDRESS=0x2791Bca1f2de4661ED88A30C99A7a9449Aa84174
 VITE_FLEXPLAN_ENABLED=true
 VITE_STUDIO_ENABLED=false

.env.staging

@@ -6,7 +6,7 @@ VITE_TOP_100_INDEXERS=https://leaderboard-api.subquery.network/graphql
 VITE_CONSUMER_HOST_ENDPOINT=https://kepler-chs.subquery.network
 VITE_FORUM_DOMAIN=https://forum.subquery.network
 VITE_TOKEN=kSQT
-VITE_STABLE_TOKEN=USDC
+VITE_STABLE_TOKEN=USDC.e
 VITE_STABLE_TOKEN_ADDRESS=0x2791Bca1f2de4661ED88A30C99A7a9449Aa84174
 VITE_FLEXPLAN_ENABLED=true
 VITE_STUDIO_ENABLED=false

.env.testnet

@@ -2,9 +2,9 @@ VITE_IPFS_GATEWAY=https://unauthipfs.subquery.network/ipfs/api/v0
 VITE_QUERY_REGISTRY_PROJECT=https://api.subquery.network/sq/subquery/kepler-testnet
 VITE_SUBSCRIPTION_REGISTRY_PROJECT=wss://api.subquery.network/sq/subquery/kepler-testnet
 VITE_TOP_100_INDEXERS=https://leaderboard-api.thechaindata.com/graphql
-VITE_CONSUMER_HOST_ENDPOINT=https://kepler-consumer-host.thechaindata.com
+VITE_CONSUMER_HOST_ENDPOINT=https://dev-chs.thechaindata.com
 VITE_TOKEN=kSQT
-VITE_STABLE_TOKEN=USDC
+VITE_STABLE_TOKEN=USDC.e
 VITE_STABLE_TOKEN_ADDRESS=0x7E65A71046170A5b1AaB5C5cC64242EDF95CaBEA
 VITE_NETWORK=testnet
 VITE_FLEXPLAN_ENABLED=true

package.json

@@ -19,7 +19,7 @@
     "@polkadot/util": "^7.8.2",
     "@rainbow-me/rainbowkit": "^1.2.0",
     "@sentry/react": "^7.57.0",
-    "@subql/apollo-links": "^1.100.0",
+    "@subql/apollo-links": "^1.2.3",
     "@subql/components": "1.0.3-20",
     "@subql/contract-sdk": "^0.100.3",
     "@subql/network-clients": "^0.100.0",

src/components/TabButton/TabButton.module.less

@@ -2,6 +2,10 @@
   display: flex;
   margin: 0.5rem 0;
   position: relative;
+  width: 100%;
+}
+
+.withUnderline {
   &::after {
     content: ' ';
     position: absolute;
@@ -11,6 +15,7 @@
     bottom: 0;
   }
 }
+
 .whiteTabContainer {
   background: white;
 }

src/components/TabButton/TabButton.tsx

@@ -39,11 +39,19 @@ export const TabButton: React.FC<TabButtonProps> = ({ label, link, whiteTab, too
 interface TabButtonsProps {
   tabs: Array<TabButtonProps>;
   whiteTab?: boolean;
+  withUnderline?: boolean;
 }
 
-export const TabButtons: React.FC<TabButtonsProps> = ({ tabs, whiteTab }) => {
+export const TabButtons: React.FC<TabButtonsProps> = ({ tabs, whiteTab, withUnderline = false }) => {
   return (
-    <div className={clsx(styles.tabContainer, whiteTab && styles.whiteTabContainer)}>
+    <div
+      className={clsx(
+        styles.tabContainer,
+        whiteTab && styles.whiteTabContainer,
+        withUnderline ? styles.withUnderline : '',
+        'tabButtons',
+      )}
+    >
       {tabs.map((tab) => (
         <TabButton key={tab.link} {...tab} whiteTab={whiteTab} />
       ))}

src/containers/QueryApolloProvider.tsx

@@ -14,7 +14,7 @@ export const TOP_100_INDEXERS = 'top100Indexers';
 const top100IndexersLink = getHttpLink(import.meta.env.VITE_TOP_100_INDEXERS);
 
 const getDecentraliseLink = (deploymentId: string, fallbackServiceUrl?: string) => {
-  const httpOptions = { fetch, fetchOptions: { timeout: 5000 } };
+  const httpOptions = { fetchOptions: { timeout: 5000 } };
 
   // this is just a test env varible set in your local env file.
   if (import.meta.env.VITE_USE_FALLBACKURL) {
@@ -26,6 +26,8 @@ const getDecentraliseLink = (deploymentId: string, fallbackServiceUrl?: string)
     httpOptions,
     authUrl: import.meta.env.VITE_AUTH_URL,
     fallbackServiceUrl,
+    useImmediateFallbackOnError: true,
+    timeout: 5000,
   }).link;
 };
 

src/pages/explorer/Home/Home.module.css

@@ -9,6 +9,7 @@
   flex-wrap: wrap;
   row-gap: 32px;
   column-gap: 24px;
+  margin: 0 auto;
 }
 
 .header {
@@ -31,3 +32,69 @@
   width: 48px;
   height: 10px;
 }
+
+@media screen and (max-width: 4825px) {
+  .list {
+    width: 4412px;
+  }
+}
+@media screen and (max-width: 4565px) {
+  .list {
+    width: 4151px;
+  }
+}
+@media screen and (max-width: 4305px) {
+  .list {
+    width: 3890px;
+  }
+}
+@media screen and (max-width: 4045px) {
+  .list {
+    width: 3629px;
+  }
+}
+@media screen and (max-width: 3785px) {
+  .list {
+    width: 3368px;
+  }
+}
+@media screen and (max-width: 3525px) {
+  .list {
+    width: 3107px;
+  }
+}
+@media screen and (max-width: 3265px) {
+  .list {
+    width: 2846px;
+  }
+}
+@media screen and (max-width: 3005px) {
+  .list {
+    width: 2585px;
+  }
+}
+@media screen and (max-width: 2745px) {
+  .list {
+    width: 2324px;
+  }
+}
+@media screen and (max-width: 2485px) {
+  .list {
+    width: 2063px;
+  }
+}
+@media screen and (max-width: 2225px) {
+  .list {
+    width: 1802px;
+  }
+}
+@media screen and (max-width: 1965px) {
+  .list {
+    width: 1541px;
+  }
+}
+@media screen and (max-width: 1705px) {
+  .list {
+    width: 1280px;
+  }
+}

src/pages/explorer/Home/Home.tsx

@@ -61,6 +61,8 @@ const Home: React.FC = () => {
   const [searchKeywords, setSearchKeywords] = React.useState('');
   const [topProject, setTopProject] = React.useState<Project>();
   const [projects, setProjects] = React.useState<Project[]>([]);
+  // ref for fetch, state for render.
+  const fetchedProejcts = React.useRef<Project[]>([]);
   // Note why don't use Apollo client's loading.
   // Apollo client's loading seems have some delay.
   // If use it would not update by project's update.
@@ -93,34 +95,36 @@ const Home: React.FC = () => {
       } else {
         setInSearchMode(false);
       }
+      console.warn(options);
       const api = searchKeywords.length ? getProjectBySearch : getProjects;
 
       const params = searchKeywords.length
         ? {
-            offset: options?.refresh ? 0 : projects.length,
+            offset: options?.refresh ? 0 : fetchedProejcts.current.length,
             keywords: searchKeywords,
           }
         : {
             variables: {
-              offset: options?.refresh ? 0 : projects.length,
+              offset: options?.refresh ? 0 : fetchedProejcts.current.length,
               orderBy: [ProjectsOrderBy.TOTAL_REWARD_DESC, ProjectsOrderBy.UPDATED_TIMESTAMP_DESC],
               ids: ['0x06'],
             },
+            defaultOptions: { fetchPolicy: 'network-only' },
           };
-
       // The type define at top.
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       const res = await api(params);
 
-      let updatedLength = projects.length;
+      let updatedLength = fetchedProejcts.current.length;
       // implement a sorting for projects
       if (res.data?.projects?.nodes) {
         // it seems have something wrong with TypeScript
         // filter once or twice is the same.
         const nonEmptyProjects = res.data.projects?.nodes.filter(notEmpty).filter(notEmpty);
-        const mergered = options?.refresh ? [...nonEmptyProjects] : [...projects, ...nonEmptyProjects];
+        const mergered = options?.refresh ? [...nonEmptyProjects] : [...fetchedProejcts.current, ...nonEmptyProjects];
         setProjects(mergered);
+        fetchedProejcts.current = mergered;
         updatedLength = mergered.length;
         setTotal(res.data?.projects?.totalCount);
       }
@@ -137,7 +141,7 @@ const Home: React.FC = () => {
   const { mutate } = useInfiniteScroll(() => loadMore(), {
     target: document,
     isNoMore: (d) => !!d?.isNoMore,
-    threshold: 300,
+    threshold: 500,
   });
 
   useMount(() => {

src/pages/explorer/Project/Project.tsx

@@ -134,7 +134,7 @@ const ProjectInner: React.FC = () => {
                 isUnsafeDeployment={!!asyncDeploymentMetadata.data?.unsafe}
               />
             </div>
-            <TabButtons tabs={sortedTabList} />
+            <TabButtons tabs={sortedTabList} withUnderline />
           </div>
           <div style={{ padding: '0 78px 24px 78px' }}>
             {/* TODO: just render the components rather than routes. */}

src/pages/swap/Swap.module.css → src/pages/swap/Swap.module.less

@@ -23,6 +23,12 @@
   display: flex;
   justify-content: center;
   align-items: center;
+
+  :global {
+    .tabButtons {
+      width: auto;
+    }
+  }
 }
 
 .dataUpdateText {

src/pages/swap/Swap.tsx

@@ -39,7 +39,7 @@ import i18next, { TFunction } from 'i18next';
 
 import { useWeb3Store } from 'src/stores';
 
-import styles from './Swap.module.css';
+import styles from './Swap.module.less';
 import { SwapForm } from './SwapForm';
 
 const { SWAP, SELL, BUY } = ROUTES;