Merge pull request #123 from threshold-network/update-subgraph-servic…

…e-querying-implementation

Refactor query implementation for the Graph's service migration

## Description

Refactor the querying implementation in response to The Graph's recent
transition from the hosted-service to the Studio service. 

Key changes include:

Updated query format to be compatible with The Graph Studio services.
Introduced requirements for a subgraph ID and a subgraph API key secret to
authenticate queries.

These changes are necessary to maintain our application's connectivity with The
Graph's services and ensure seamless data querying.

- [x]
[update subgraph service querying implementation](e9e18c4)

## Notice

- [x] Have you checked to ensure there aren't other open
[Pull Requests](https://github.com/shapeshift/web/pulls) for the same
update/change?

## Pull Request Type

- [x] New Feature (Breaking/Non-breaking Change)

Fixes #121 

## Testing

Please outline all testing steps
1. Clone the repo - git clone https://github.com/threshold-network/website.git
2. Install dependencies - yarn install
3. Build the app - yarn build
4. Run the app - yarn start

.github/workflows/ci.yml

@@ -46,6 +46,7 @@ jobs:
           POSTHOG_HOSTNAME_HTTP: ${{ secrets.MAINNET_POSTHOG_HOSTNAME_HTTP }}
           GATSBY_GTM_SUPPORT: true
           GATSBY_GTM_ID: ${{ secrets.GTM_ID }}
+          SUBGRAPH_API_KEY: ${{ secrets.SUBGRAPH_API_KEY }}
 
       - uses: actions/upload-artifact@v3
         with:

src/config/subgraph.ts

@@ -1,5 +1,7 @@
 export const T_NETWORK_SUBGRAPH_URL =
   "https://api.studio.thegraph.com/query/24143/threshold/0.0.4"
 
-export const TBTC_SUBGRAPH_URL =
-  "https://api.thegraph.com/subgraphs/name/suntzu93/threshold-tbtc"
+export const T_NETWORK_SUBGRAPH_ID =
+  "5TJAMbsRwm1avUTV4CofaLT4apfQoAiNcysEit9BWr6R"
+
+export const TBTC_SUBGRAPH_URL = `https://gateway-arbitrum.network.thegraph.com/api/${process.env.SUBGRAPH_API_KEY}/subgraphs/id/DETCX5Xm6tJfctRcZAxhQB9q3aK8P4BXLbujHmzEBXYV`

src/hooks/tBTC/useTotalMints.ts

@@ -1,6 +1,6 @@
 import { gql, request } from "graphql-request"
-import { TBTC_SUBGRAPH_URL } from "../../config/subgraph"
 import { useEffect, useState } from "react"
+import { TBTC_SUBGRAPH_URL } from "../../config/subgraph"
 
 export const useTotalMints = () => {
   const [totalMints, setTotalMints] = useState<number | undefined>(undefined)
@@ -22,8 +22,7 @@ export const useTotalMints = () => {
         ) {
           id
         }
-      }
-    `
+      }`
 
       const result: { transactions: { id: string }[] } = await request(
         TBTC_SUBGRAPH_URL,

src/templates/earn-page/btc/index.tsx

@@ -4,7 +4,6 @@ import { Box, Stack, VStack } from "@chakra-ui/react"
 import RolePageTemplate from "../RolePageTemplate"
 import SectionTemplate from "../../home-page/SectionTemplate"
 import { BodyLg, H4, H5 } from "../../../components"
-import { LPCardGroup } from "../../../components/LPCard"
 import { TBTCStats } from "./TBTCStats"
 import { gql } from "graphql-request"
 import { TBTC_SUBGRAPH_URL } from "../../../config/subgraph"

src/templates/earn-page/staker/NetworkDistribution/index.tsx

@@ -1,4 +1,4 @@
-import { Box, HStack, Icon, SimpleGrid, Stack } from "@chakra-ui/react"
+import { Box, HStack, Icon, Stack } from "@chakra-ui/react"
 import { gql } from "graphql-request"
 import Card from "../../../../components/Card"
 import TStakedChart from "./TStakedChart"
@@ -11,12 +11,8 @@ import {
   formatTokenAmount,
   formatUnits,
 } from "../../../../utils"
-import StatBox from "../../../../components/StatBox"
 import { useTTokenPrice } from "../../../../contexts/TokenPriceContext"
-import {
-  BsFillInfoCircleFill,
-  IoInformationCircleOutline,
-} from "react-icons/all"
+import { BsFillInfoCircleFill } from "react-icons/all"
 
 function NetworkDistribution() {
   const { isFetching, data, error } = useQuery<{

src/templates/home-page/Hero/index.tsx

@@ -63,7 +63,7 @@ const Hero: FC<{
   const { epoches } = totalStakedData || {
     epoches: [{ totalStaked: "0" }],
   }
-  const totalStaked = !error ? epoches[0].totalStaked : "0"
+  const totalStaked = !totalStakedError ? epoches[0].totalStaked : "0"
   const tPrice = useTTokenPrice()
   const totalValueStakedInUSD = exchangeAPI
     .toUsdBalance(formatUnits(totalStaked), tPrice)