Update subgraph

- Point to the staging subgraph endpoint (until the production subgraph is migrated)
- Add `skip` to all stakers query to load more than 500 stakers
- Adjust queries for new subgraph

.env.example.mainnet

@@ -1,9 +1,11 @@
-REACT_APP_GRAPHQL_ENDPOINT_MSTABLE_GOV=https://api.thegraph.com/subgraphs/name/mstable/mstable-governance
+# TODO revert once subgraph is migrated
+REACT_APP_GRAPHQL_ENDPOINT_MSTABLE_GOV=https://api.thegraph.com/subgraphs/name/mstable/mstable-governance-staging
+
 REACT_APP_MTA_ADDRESS=0xa3BeD4E1c75D00fa6f4E5E6922DB7261B5E9AcD2
 REACT_APP_CHAIN_ID=1
 REACT_APP_PORTIS_DAPP_ID=${PORTIS_DAPP_ID}
 REACT_APP_FORTMATIC_API_KEY=${FORTMATIC_API_KEY}
 REACT_APP_SQUARELINK_CLIENT_ID=${SQUARELINK_CLIENT_ID}
 REACT_APP_RPC_API_KEY=${RPC_API_KEY}
 REACT_APP_RPC_URL=https://mainnet.infura.io/v3/
-REACT_APP_SENTRY_DSN=${SENTRY_DSN}
+REACT_APP_SENTRY_DSN=${SENTRY_DSN}

src/components/pages/Stats/Metrics.tsx

@@ -5,7 +5,6 @@ import Skeleton from 'react-loading-skeleton';
 import { H3, H4, P } from '../../core/Typography';
 import { Tooltip } from '../../core/ReactTooltip';
 import { CountUp } from '../../core/CountUp';
-import { useStatsData } from './StatsDataProvider';
 import { ViewportWidth } from '../../../theme';
 import { useIncentivisedVotingLockupAtBlock } from './IncentivisedVotingLockupAtBlockProvider';
 
@@ -51,11 +50,15 @@ const InfoGroup = styled.div`
 `;
 
 export const Metrics: FC = () => {
-  const data = useStatsData();
   const { incentivisedVotingLockup } = useIncentivisedVotingLockupAtBlock();
 
-  const { totalValue, totalStakingRewards, lockTimes, votingToken } =
-    incentivisedVotingLockup || {};
+  const {
+    totalValue,
+    totalStakingRewards,
+    lockTimes,
+    votingToken,
+    totalStakers,
+  } = incentivisedVotingLockup || {};
   const totalSupply = votingToken?.totalSupply;
 
   return (
@@ -96,7 +99,7 @@ export const Metrics: FC = () => {
           )}
         </InfoRow>
         <InfoRow title="Total stakers">
-          {data.length > 0 ? <P>{data.length}</P> : <Skeleton width={100} />}
+          {totalStakers ? <P>{totalStakers}</P> : <Skeleton width={100} />}
         </InfoRow>
       </InfoGroup>
     </Container>

src/components/pages/Stats/StatsDataProvider.tsx

@@ -45,22 +45,41 @@ export const StatsDataProvider: FC = ({ children }) => {
     ? (incentivisedVotingLockup as IncentivisedVotingLockup).lastUpdateTime
     : now;
 
-  const allUserLockupsQuery = useAllUserLockupsQuery({
+  const variables = {
+    minLockTime: currentTime.toString(),
+    block: { number: block || 0 },
+    hasBlock: !!block,
+  };
+
+  // TODO Non sustainable; better to consume with `skip` iteratively
+  const allUserLockupsQuery0 = useAllUserLockupsQuery({
     variables: {
-      minLockTime: currentTime.toString(),
-      block: { number: block || 0 },
-      hasBlock: !!block,
+      ...variables,
+      skip: 0,
+    },
+  });
+  const allUserLockupsQuery1 = useAllUserLockupsQuery({
+    variables: {
+      ...variables,
+      skip: 500,
     },
-    fetchPolicy: 'cache-first',
   });
 
-  const userLockupsData =
-    allUserLockupsQuery.data?.current ?? allUserLockupsQuery.data?.historic;
+  const userLockupsData0 =
+    allUserLockupsQuery0.data?.current ??
+    allUserLockupsQuery0.data?.historic ??
+    [];
+  const userLockupsData1 =
+    allUserLockupsQuery1.data?.current ??
+    allUserLockupsQuery1.data?.historic ??
+    [];
 
   const totalSupplyRounded = totalSupply?.simpleRounded;
 
   const data = useMemo<UserLockupDatum[]>(() => {
-    const userLockups = transformAllUserLockups(userLockupsData);
+    const userLockups = transformAllUserLockups(
+      userLockupsData0.concat(userLockupsData1),
+    );
 
     return totalSupplyRounded && totalSupplyRounded > 0
       ? userLockups.map<UserLockupDatum>(userLockup => {
@@ -82,7 +101,7 @@ export const StatsDataProvider: FC = ({ children }) => {
           };
         })
       : [];
-  }, [userLockupsData, totalSupplyRounded, currentTime]);
+  }, [userLockupsData0, userLockupsData1, totalSupplyRounded, currentTime]);
 
   return <statsDataCtx.Provider value={data}>{children}</statsDataCtx.Provider>;
 };

src/components/wallet/HistoricTransactions.tsx

@@ -4,12 +4,9 @@ import { EtherscanLink } from '../core/EtherscanLink';
 import { List, ListItem } from '../core/List';
 import { P } from '../core/Typography';
 import { CountUp } from '../core/CountUp';
-import {
-  useHistoricTransactionsQuery,
-  TransactionType,
-} from '../../graphql/mstable';
+import { useHistoricTransactionsQuery } from '../../graphql/mstable';
 import { transformRawData } from './transformRawData';
-import { HistoricTransaction } from './types';
+import { HistoricTransaction, TransactionType } from './types';
 
 const TxContainer = styled.div<{}>`
   display: flex;
@@ -29,7 +26,7 @@ const LockTime = styled.p<{}>`
 
 const getTxDescription = (tx: HistoricTransaction): JSX.Element => {
   switch (tx.type) {
-    case TransactionType.CreateLock: {
+    case TransactionType.CreateLockTransaction: {
       return (
         <>
           {tx.formattedDate}: You created a lock of{' '}
@@ -38,30 +35,30 @@ const getTxDescription = (tx: HistoricTransaction): JSX.Element => {
         </>
       );
     }
-    case TransactionType.IncreaseLockAmount: {
+    case TransactionType.IncreaseLockAmountTransaction: {
       return (
         <>
           {tx.formattedDate}: You increased an amount of the lock for additional{' '}
           <Balance end={tx.value.simple} /> MTA{' '}
         </>
       );
     }
-    case TransactionType.IncreaseLockTime: {
+    case TransactionType.IncreaseLockTimeTransaction: {
       return (
         <>
           {tx.formattedDate}: You increased lock period until{' '}
           <LockTime>{tx.lockTime}</LockTime>{' '}
         </>
       );
     }
-    case TransactionType.Withdraw: {
+    case TransactionType.WithdrawTransaction: {
       return (
         <>
           {tx.formattedDate}: You withdrew <Balance end={tx.value.simple} /> MTA{' '}
         </>
       );
     }
-    case TransactionType.Claim: {
+    case TransactionType.ClaimTransaction: {
       return (
         <>
           {tx.formattedDate}: You claimed <Balance end={tx.reward.simple} /> MTA{' '}

src/components/wallet/transformRawData.tsx

@@ -1,8 +1,5 @@
-import {
-  HistoricTransactionsQueryResult,
-  TransactionType,
-} from '../../graphql/mstable';
-import { HistoricTransaction, HistoricTxsArr } from './types';
+import { HistoricTransactionsQueryResult } from '../../graphql/mstable';
+import { HistoricTransaction, HistoricTxsArr, TransactionType } from './types';
 import { BigDecimal } from '../../utils/BigDecimal';
 import { formatUnix } from '../../utils/time';
 
@@ -21,65 +18,63 @@ export const transformRawData = (
     withdrawTransactions,
   } = data;
 
-  const historicTxsData = [
+  return ([
     ...createLockTransactions,
     ...increaseLockAmountTransactions,
     ...increaseLockTimeTransactions,
     ...claimTransactions,
     ...withdrawTransactions,
-  ].sort(
-    (a, b) => parseInt(a.timestamp, 10) - parseInt(b.timestamp, 10),
-  ) as HistoricTxsArr;
+  ] as HistoricTxsArr)
+    .map(({ hash, ...tx }) => {
+      const timestamp = parseInt(tx.timestamp, 10);
+      const formattedDate = formatUnix(timestamp);
+      switch (tx.__typename) {
+        case TransactionType.ClaimTransaction:
+          return {
+            type: tx.__typename as TransactionType.ClaimTransaction,
+            timestamp,
+            formattedDate,
+            hash,
+            reward: new BigDecimal(tx.reward),
+          };
+        case TransactionType.CreateLockTransaction:
+          return {
+            type: tx.__typename as TransactionType.CreateLockTransaction,
+            timestamp,
+            formattedDate,
+            hash,
+            value: new BigDecimal(tx.value),
+            lockTime: formatUnix(parseInt(tx.lockTime as string, 10)),
+          };
+        case TransactionType.IncreaseLockAmountTransaction:
+          return {
+            type: tx.__typename as TransactionType.IncreaseLockAmountTransaction,
+            timestamp,
+            formattedDate,
+            hash,
+            value: new BigDecimal(tx.value),
+          };
+        case TransactionType.IncreaseLockTimeTransaction:
+          return {
+            type: tx.__typename as TransactionType.IncreaseLockTimeTransaction,
+            timestamp,
+            formattedDate,
+            hash,
+            lockTime: formatUnix(parseInt(tx.lockTime as string, 10)),
+          };
+        case TransactionType.WithdrawTransaction:
+          return {
+            type: tx.__typename as TransactionType.WithdrawTransaction,
+            timestamp,
+            formattedDate,
+            hash,
+            value: new BigDecimal(tx.value),
+          };
+        // Other cases
 
-  return historicTxsData.map(({ hash, ...tx }) => {
-    const timestamp = parseInt(tx.timestamp, 10);
-    const formattedDate = formatUnix(timestamp);
-    switch (tx.type) {
-      case TransactionType.Claim:
-        return {
-          type: tx.type,
-          timestamp,
-          formattedDate,
-          hash,
-          reward: new BigDecimal(tx.reward),
-        };
-      case TransactionType.CreateLock:
-        return {
-          type: tx.type,
-          timestamp,
-          formattedDate,
-          hash,
-          value: new BigDecimal(tx.value),
-          lockTime: formatUnix(parseInt(tx.lockTime as string, 10)),
-        };
-      case TransactionType.IncreaseLockAmount:
-        return {
-          type: tx.type,
-          timestamp,
-          formattedDate,
-          hash,
-          value: new BigDecimal(tx.value),
-        };
-      case TransactionType.IncreaseLockTime:
-        return {
-          type: tx.type,
-          timestamp,
-          formattedDate,
-          hash,
-          lockTime: formatUnix(parseInt(tx.lockTime as string, 10)),
-        };
-      case TransactionType.Withdraw:
-        return {
-          type: tx.type,
-          timestamp,
-          formattedDate,
-          hash,
-          value: new BigDecimal(tx.value),
-        };
-      // Other cases
-
-      default:
-        throw new Error('Unhandled transaction type');
-    }
-  });
+        default:
+          throw new Error('Unhandled transaction type');
+      }
+    })
+    .sort((a, b) => b.timestamp - a.timestamp);
 };

src/components/wallet/types.ts

@@ -1,59 +1,54 @@
 import { BigDecimal } from '../../utils/BigDecimal';
-import {
-  HistoricTransactionsQueryResult,
-  TransactionType,
-} from '../../graphql/mstable';
+import { HistoricTransactionsQueryResult } from '../../graphql/mstable';
 
 type HistoricTxsData = NonNullable<HistoricTransactionsQueryResult['data']>;
 
 export type HistoricTxsArr = Array<
-  | (HistoricTxsData['claimTransactions'][number] & {
-      type: TransactionType.Claim;
-    })
-  | (HistoricTxsData['createLockTransactions'][number] & {
-      type: TransactionType.CreateLock;
-    })
-  | (HistoricTxsData['increaseLockAmountTransactions'][number] & {
-      type: TransactionType.IncreaseLockAmount;
-    })
-  | (HistoricTxsData['increaseLockTimeTransactions'][number] & {
-      type: TransactionType.IncreaseLockTime;
-    })
-  | (HistoricTxsData['withdrawTransactions'][number] & {
-      type: TransactionType.Withdraw;
-    })
+  | HistoricTxsData['claimTransactions'][number]
+  | HistoricTxsData['createLockTransactions'][number]
+  | HistoricTxsData['increaseLockAmountTransactions'][number]
+  | HistoricTxsData['increaseLockTimeTransactions'][number]
+  | HistoricTxsData['withdrawTransactions'][number]
 >;
 
+export enum TransactionType {
+  CreateLockTransaction = 'CreateLockTransaction',
+  IncreaseLockAmountTransaction = 'IncreaseLockAmountTransaction',
+  IncreaseLockTimeTransaction = 'IncreaseLockTimeTransaction',
+  WithdrawTransaction = 'WithdrawTransaction',
+  ClaimTransaction = 'ClaimTransaction',
+}
+
 interface BaseHistoricTransaction {
+  type: TransactionType;
   hash: string;
   timestamp: number;
   formattedDate: string;
-  type: TransactionType;
 }
 
 export interface ClaimTransaction extends BaseHistoricTransaction {
-  type: TransactionType.Claim;
+  type: TransactionType.ClaimTransaction;
   reward: BigDecimal;
 }
 
 export interface CreateLockTransaction extends BaseHistoricTransaction {
-  type: TransactionType.CreateLock;
+  type: TransactionType.CreateLockTransaction;
   value: BigDecimal;
   lockTime: string;
 }
 
 export interface IncreaseLockAmountTransaction extends BaseHistoricTransaction {
-  type: TransactionType.IncreaseLockAmount;
+  type: TransactionType.IncreaseLockAmountTransaction;
   value: BigDecimal;
 }
 
 export interface IncreaseLockTimeTransaction extends BaseHistoricTransaction {
-  type: TransactionType.IncreaseLockTime;
+  type: TransactionType.IncreaseLockTimeTransaction;
   lockTime: string;
 }
 
 export interface WithdrawTransaction extends BaseHistoricTransaction {
-  type: TransactionType.Withdraw;
+  type: TransactionType.WithdrawTransaction;
   value: BigDecimal;
 }