Merge pull request #634 from subquery/feat/progress

feat: progress
subquery · Jan 15, 2024 · 8d4fb87 · 8d4fb87
2 parents 439a842 + 5d506d0
commit 8d4fb87
Show file tree

Hide file tree

Showing 25 changed files with 243 additions and 143 deletions.
diff --git a/.env b/.env
@@ -9,7 +9,6 @@ VITE_TOKEN=SQT
 VITE_STABLE_TOKEN=USDC.e
 VITE_STABLE_TOKEN_ADDRESS=0x2791Bca1f2de4661ED88A30C99A7a9449Aa84174
 VITE_FLEXPLAN_ENABLED=true
-VITE_STUDIO_ENABLED=false
 VITE_NETWORK=mainnet
 VITE_GQL_PROXY=https://gql-proxy.subquery.network
 VITE_AUTH_URL=https://kepler-auth.subquery.network

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

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -4,7 +4,6 @@
 import * as React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { AccountActions } from '@components/AccountActions';
-import { useStudioEnabled } from '@hooks';
 import { ConnectButton } from '@rainbow-me/rainbowkit';
 import { Button, Header as SubqlHeader } from '@subql/components';
 import { entryLinks, externalAppLinks } from '@utils/links';
@@ -38,21 +37,17 @@ export interface AppNavigation {
 export const Header: React.FC = () => {
   const { address: account } = useAccount();
   const navigate = useNavigate();
-  const studioEnabled = useStudioEnabled();
   const calEntryLinks = React.useMemo(() => {
-    if (!studioEnabled) {
-      return entryLinks.map((entry) => {
-        if (entry.key === 'explorer') {
-          return {
-            ...entry,
-            dropdown: undefined,
-          };
-        }
-        return entry;
-      });
-    }
-    return entryLinks;
-  }, [studioEnabled]);
+    return entryLinks.map((entry) => {
+      if (entry.key === 'explorer') {
+        return {
+          ...entry,
+          dropdown: undefined,
+        };
+      }
+      return entry;
+    });
+  }, []);
 
   return (
     <div className={styles.header}>

diff --git a/src/components/IndexerDetails/Row.tsx b/src/components/IndexerDetails/Row.tsx
@@ -125,10 +125,12 @@ const ConnectedRow: React.FC<{
       setProjectMaxTargetHeightInfo(deploymentId, maxTargetHeight);
     }
 
+    console.warn(meta);
+
     return {
       startBlock: meta?.startHeight ?? 0,
       targetBlock: maxTargetHeight,
-      currentBlock: meta?.lastProcessedHeight ?? 0,
+      currentBlock: meta?.lastHeight ?? 0,
     };
   }, [indexerMetadata.url, indexer]);
 

diff --git a/src/hooks/useSortedIndexer.tsx b/src/hooks/useSortedIndexer.tsx
@@ -61,16 +61,15 @@ export interface UseSortedIndexerReturn {
 }
 
 export function useSortedIndexer(account: string): AsyncData<UseSortedIndexerReturn> & { refresh?: () => void } {
-  const { currentEra, refetch } = useEra();
+  const { currentEra } = useEra();
   const indexerQueryParams = { address: account ?? '' };
-  const indexerData = useGetIndexerQuery({ variables: indexerQueryParams, pollInterval: 10000 });
+  const indexerData = useGetIndexerQuery({ variables: indexerQueryParams, fetchPolicy: 'network-only' });
   const delegationQueryParams = { id: `${account ?? ''}:${account}` };
-  const indexerDelegation = useGetDelegationQuery({ variables: delegationQueryParams });
+  const indexerDelegation = useGetDelegationQuery({ variables: delegationQueryParams, fetchPolicy: 'network-only' });
 
   const { loading, error, data } = mergeAsync(currentEra, indexerData, indexerDelegation);
 
   const refresh = async () => {
-    refetch();
     indexerData.refetch();
     indexerDelegation.refetch();
   };

diff --git a/src/pages/account/Rewards/Rewards.tsx b/src/pages/account/Rewards/Rewards.tsx
@@ -11,6 +11,7 @@ import { TableTitle } from '@subql/components';
 import { GetEraRewardsByIndexerAndPageQuery } from '@subql/network-query';
 import { renderAsync, useGetEraRewardsByIndexerAndPageLazyQuery, useGetRewardsQuery } from '@subql/react-hooks';
 import { ExcludeNull, formatEther, notEmpty } from '@utils';
+import { retry } from '@utils/retry';
 import { useMount, useUpdate } from 'ahooks';
 import { Table, TableProps, Tag, Tooltip } from 'antd';
 import dayjs from 'dayjs';
@@ -26,6 +27,8 @@ export const Rewards: React.FC = () => {
   const update = useUpdate();
   const filterParams = { address: account || '' };
   const rewards = useGetRewardsQuery({ variables: filterParams, fetchPolicy: 'network-only' });
+
+  const [loading, setLoading] = React.useState(false);
   const queryParams = React.useRef({
     offset: 0,
     pageSize: 10,
@@ -117,62 +120,80 @@ export const Rewards: React.FC = () => {
     fetchIndexerEraRewards();
   }, [account]);
 
-  useMount(() => {
-    fetchIndexerEraRewards();
+  useMount(async () => {
+    try {
+      setLoading(true);
+      fetchIndexerEraRewards();
+    } finally {
+      setLoading(false);
+    }
   });
 
   return (
     <div className={styles.rewardsContainer}>
       <div className={styles.rewardsList}>
-        {renderAsync(indexerEraRewards, {
-          error: (error) => <Typography>{`Failed to get pending rewards: ${error.message}`}</Typography>,
-          loading: () => <Spinner />,
-          data: (data) => {
-            const filterEmptyData = data.eraRewards?.nodes.filter(notEmpty);
-            return (
-              <>
-                <div className="flex">
-                  <InfoCircleOutlined style={{ fontSize: 14, color: '#3AA0FF', marginRight: 8 }} />
-                  <Typography type="secondary">{t('rewards.info')}</Typography>
-                  <span style={{ flex: 1 }}></span>
-                  {totalUnclaimedRewards > 0 && unclaimedRewards?.indexers && (
-                    <ClaimRewards
-                      indexers={unclaimedRewards?.indexers as string[]}
-                      account={account ?? ''}
-                      totalUnclaimed={formatEther(unclaimedRewards?.totalAmount)}
-                    />
-                  )}
-                </div>
-                <div className={styles.claim}>
-                  <Typography className={styles.header}>
-                    {t('rewards.totalUnclaimReward', { count: totalUnclaimedRewards })}
-                  </Typography>
-                </div>
+        {renderAsync(
+          {
+            ...indexerEraRewards,
+            loading,
+          },
+          {
+            error: (error) => <Typography>{`Failed to get pending rewards: ${error.message}`}</Typography>,
+            loading: () => <Spinner />,
+            data: (data) => {
+              const filterEmptyData = data.eraRewards?.nodes.filter(notEmpty);
+              return (
+                <>
+                  <div className="flex">
+                    <InfoCircleOutlined style={{ fontSize: 14, color: '#3AA0FF', marginRight: 8 }} />
+                    <Typography type="secondary">{t('rewards.info')}</Typography>
+                    <span style={{ flex: 1 }}></span>
+                    {totalUnclaimedRewards > 0 && unclaimedRewards?.indexers && (
+                      <ClaimRewards
+                        indexers={unclaimedRewards?.indexers as string[]}
+                        account={account ?? ''}
+                        totalUnclaimed={formatEther(unclaimedRewards?.totalAmount)}
+                        onClaimed={() => {
+                          retry(() => {
+                            fetchIndexerEraRewards();
+                            rewards.refetch();
+                          });
+                        }}
+                      />
+                    )}
+                  </div>
+                  <div className={styles.claim}>
+                    <Typography className={styles.header}>
+                      {t('rewards.totalUnclaimReward', { count: totalUnclaimedRewards })}
+                    </Typography>
+                  </div>
 
-                <Table
-                  columns={columns}
-                  dataSource={filterEmptyData || []}
-                  scroll={{ x: 600 }}
-                  rowKey="id"
-                  pagination={{
-                    current: Math.floor(queryParams.current.offset / queryParams.current.pageSize) + 1,
-                    pageSize: queryParams.current.pageSize,
-                    total: queryParams.current.totalCount,
-                    onChange(page, pageSize) {
-                      const offset = pageSize !== queryParams.current.pageSize ? 0 : (page - 1) * pageSize;
-                      queryParams.current = {
-                        ...queryParams.current,
-                        pageSize: pageSize,
-                        offset,
-                      };
-                      fetchIndexerEraRewards();
-                    },
-                  }}
-                />
-              </>
-            );
+                  <Table
+                    columns={columns}
+                    dataSource={filterEmptyData || []}
+                    scroll={{ x: 600 }}
+                    rowKey="id"
+                    loading={indexerEraRewards.loading}
+                    pagination={{
+                      current: Math.floor(queryParams.current.offset / queryParams.current.pageSize) + 1,
+                      pageSize: queryParams.current.pageSize,
+                      total: queryParams.current.totalCount,
+                      onChange(page, pageSize) {
+                        const offset = pageSize !== queryParams.current.pageSize ? 0 : (page - 1) * pageSize;
+                        queryParams.current = {
+                          ...queryParams.current,
+                          pageSize: pageSize,
+                          offset,
+                        };
+                        fetchIndexerEraRewards();
+                      },
+                    }}
+                  />
+                </>
+              );
+            },
           },
-        })}
+        )}
       </div>
     </div>
   );

diff --git a/src/pages/account/Staking/index.tsx b/src/pages/account/Staking/index.tsx
@@ -18,7 +18,8 @@ import Breakdown from './Breakdown';
 import styles from './index.module.less';
 
 const Staking: FC = () => {
-  const { address: account } = useAccount();
+  // const { address: account } = useAccount();
+  const account = '0x21A787fddeF5b69A8a1065a05E364f7382c8cdAc';
 
   const navigate = useNavigate();
   const indexerDelegators = useGetIndexerDelegatorsQuery({ variables: { id: account ?? '', offset: 0 } });
@@ -28,7 +29,7 @@ const Staking: FC = () => {
       account: account || '',
     },
   });
-
+  console.warn(delegateToOthersByEra);
   const totalStaked = useMemo(() => {
     return sortedIndexer.data?.totalStake;
   }, [sortedIndexer]);

diff --git a/src/pages/account/Withdrawn/Locked/DoWithdraw/DoWithdraw.tsx b/src/pages/account/Withdrawn/Locked/DoWithdraw/DoWithdraw.tsx
@@ -17,9 +17,10 @@ import styles from './DoWithdraw.module.css';
 interface DoWithdrawProps {
   unlockedAmount: string;
   disabled: boolean;
+  onSuccess: () => void;
 }
 
-export const DoWithdraw: React.FC<DoWithdrawProps> = ({ unlockedAmount, disabled }) => {
+export const DoWithdraw: React.FC<DoWithdrawProps> = ({ unlockedAmount, disabled, onSuccess }) => {
   const { t } = useTranslation();
   const { contracts } = useWeb3Store();
 
@@ -44,6 +45,7 @@ export const DoWithdraw: React.FC<DoWithdrawProps> = ({ unlockedAmount, disabled
         variant={disabled ? 'disabledButton' : 'button'}
         onClick={handleClick}
         buttonClassName={styles.withdrawButton}
+        onSuccess={onSuccess}
         renderContent={(onSubmit, _, isLoading, error) => {
           return (
             <>

diff --git a/src/pages/account/Withdrawn/Locked/Home/Locked.module.less b/src/pages/account/Withdrawn/Locked/Home/Locked.module.less
@@ -25,7 +25,6 @@
 // TODO: replace it when components finishi
 .cancelModal {
   :global .ant-modal-content {
-    padding: 32px;
     .ant-modal-close {
       display: none;
     }