Multiple subgraphs config

.changeset/hip-bags-marry.md

@@ -0,0 +1,5 @@
+---
+'frontend': patch
+---
+
+SOV-106: Graph configuration

apps/frontend/.env.example

@@ -1 +1,5 @@
 REACT_APP_GOOGLE_ANALYTICS=GTM-PX36D3G
+
+REACT_APP_GRAPH_RSK=https://subgraph.test.sovryn.app/subgraphs/name/DistributedCollective/sovryn-subgraph
+
+REACT_APP_GRAPH_PERPS=https://api.thegraph.com/subgraphs/name/distributedcollective/sovryn-perpetual-futures

apps/frontend/.env.staging

@@ -1 +1,5 @@
-REACT_APP_GOOGLE_ANALYTICS=GTM-PX36D3G-STAGING
+REACT_APP_GOOGLE_ANALYTICS=GTM-PX36D3G-STAGING
+
+REACT_APP_GRAPH_RSK=https://subgraph.sovryn.app/subgraphs/name/DistributedCollective/sovryn-subgraph
+
+REACT_APP_GRAPH_PERPS=https://api.thegraph.com/subgraphs/name/distributedcollective/sovryn-perpetual-futures

apps/frontend/codegen.fetch.yml

@@ -0,0 +1,11 @@
+generates:
+  {
+    './src/utils/graphql/rsk/schema.graphql':
+      { schema: '${REACT_APP_GRAPH_RSK}', plugins: ['schema-ast'] },
+    './src/utils/graphql/perps/schema.graphql':
+      { schema: '${REACT_APP_GRAPH_PERPS}', plugins: ['schema-ast'] },
+  }
+
+hooks:
+  afterAllFileWrite:
+    - prettier ./src/utils/graphql/**/schema.graphql --write

apps/frontend/codegen.yml

@@ -0,0 +1,31 @@
+generates:
+  {
+    './src/utils/graphql/rsk/generated.tsx':
+      {
+        schema: './src/utils/graphql/rsk/schema.graphql',
+        documents: './src/utils/graphql/rsk/operations/*.graphql',
+        plugins:
+          ['typescript', 'typescript-operations', 'typescript-react-apollo'],
+        config:
+          {
+            withHooks: true,
+            scalars: [Bytes: string, BigInt: string, BigDecimal: string],
+          },
+      },
+    './src/utils/graphql/perps/generated.tsx':
+      {
+        schema: './src/utils/graphql/perps/schema.graphql',
+        documents: './src/utils/graphql/perps/operations/*.graphql',
+        plugins:
+          ['typescript', 'typescript-operations', 'typescript-react-apollo'],
+        config:
+          {
+            withHooks: true,
+            scalars: [Bytes: string, BigInt: string, BigDecimal: string],
+          },
+      },
+  }
+
+hooks:
+  afterAllFileWrite:
+    - prettier ./src/utils/graphql --write

apps/frontend/package.json

@@ -26,7 +26,11 @@
     "react-i18next": "12.0.0",
     "react-router-dom": "6.4.2",
     "react-scripts": "5.0.1",
-    "reactjs-localstorage": "1.0.1"
+    "reactjs-localstorage": "1.0.1",
+    "@apollo/client": "3.7.1",
+    "@apollo/react-hooks": "4.0.0",
+    "graphql": "16.6.0",
+    "env-cmd": "10.1.0"
   },
   "devDependencies": {
     "@babel/core": "7.18.2",
@@ -45,14 +49,25 @@
     "stream-browserify": "^3.0.0",
     "ts-loader": "^9.3.1",
     "typescript": "^4.7.4",
-    "webpack": "^5.74.0"
+    "webpack": "^5.74.0",
+    "@graphql-codegen/add": "3.2.1",
+    "@graphql-codegen/cli": "2.13.12",
+    "@graphql-codegen/schema-ast": "2.5.1",
+    "@graphql-codegen/typescript": "2.8.2",
+    "@graphql-codegen/typescript-operations": "2.5.7",
+    "@graphql-codegen/typescript-react-apollo": "3.3.6"
   },
   "scripts": {
+    "predev": "yarn generate:graphql",
     "dev": "craco start",
+    "prebuild": "yarn generate:graphql",
     "build": "craco build",
     "test": "craco test --watchAll=false --passWithNoTests",
     "test:staged": "craco test --watchAll=false --passWithNoTests --bail --onlyChanged",
-    "lint": "eslint -c .eslintrc.js ./"
+    "lint": "eslint -c .eslintrc.js ./",
+    "generate:graphql": "graphql-codegen",
+    "generate:graphql:fetch:testnet": "env-cmd -f .env.development.local graphql-codegen -c codegen.fetch.yml",
+    "generate:graphql:fetch:mainnet": "env-cmd -f .env.staging graphql-codegen -c codegen.fetch.yml"
   },
   "browserslist": {
     "production": [

apps/frontend/src/app/2_molecules/DebugContent.tsx

@@ -1,4 +1,4 @@
-import React, { useReducer } from 'react';
+import React, { useMemo, useReducer } from 'react';
 
 import { useTranslation } from 'react-i18next';
 
@@ -8,9 +8,11 @@ import { TransactionStep } from '../3_organisms';
 import { useTheme, useWalletConnect } from '../../hooks';
 import { translations } from '../../locales/i18n';
 import { AppTheme } from '../../types/tailwind';
+import { useGetTokenRatesQuery } from '../../utils/graphql/rsk/generated';
 import { CollateralRatio } from './CollateralRatio/CollateralRatio';
 import { ConnectWalletButton } from './ConnectWalletButton/ConnectWalletButton';
 import { ExampleProviderCall } from './ExampleProviderCall';
+import { ExampleTokenDetails } from './ExampleTokenDetails';
 
 // usage example, to be removed
 export const DebugContent = () => {
@@ -20,10 +22,37 @@ export const DebugContent = () => {
   const { connectWallet, disconnectWallet, wallets, pending } =
     useWalletConnect();
 
+  // const perpsClient = new ApolloClient({
+  //   uri: graphPerpsUrl,
+  //   cache: new InMemoryCache({
+  //     resultCaching: false,
+  //   }),
+  // });
+
+  const { data: tokensData } = useGetTokenRatesQuery({
+    pollInterval: 0,
+  });
+
+  // const { data: tradesData } = useGetTradesQuery({
+  //   client: perpsClient,
+  // });
+
+  const sovToken = useMemo(
+    () =>
+      tokensData
+        ? tokensData?.tokens.find(token => token.symbol === 'SOV')
+        : undefined,
+    [tokensData],
+  );
+
   return (
     <Accordion label="Debug content" open={isOpen} onClick={toggle}>
       <ExampleProviderCall />
 
+      <div>USD price of SOV from the RSK graph: {sovToken?.lastPriceUsd}</div>
+
+      <ExampleTokenDetails />
+
       <hr className="my-12" />
 
       <div className="flex items-center gap-4">

apps/frontend/src/index.tsx

@@ -1,3 +1,5 @@
+import { ApolloProvider, ApolloClient, InMemoryCache } from '@apollo/client';
+
 import React from 'react';
 
 import ReactDOM from 'react-dom/client';
@@ -10,17 +12,27 @@ import App from './app/5_pages/App/App';
 import { chains } from './config/chains';
 import './locales/i18n';
 import './styles/tailwindcss/index.css';
+import { graphRskUrl } from './utils/constants';
 
 setupChains(chains);
 
+const rskClient = new ApolloClient({
+  uri: graphRskUrl,
+  cache: new InMemoryCache({
+    resultCaching: false,
+  }),
+});
+
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement,
 );
 root.render(
   <React.StrictMode>
     <BrowserRouter>
-      <App />
-      <OnboardProvider />
+      <ApolloProvider client={rskClient}>
+        <App />
+        <OnboardProvider />
+      </ApolloProvider>
     </BrowserRouter>
   </React.StrictMode>,
 );

apps/frontend/src/utils/constants.ts

@@ -11,3 +11,6 @@ export const sovrynLinks = {
 };
 
 export const requiredChain = ChainIds.RSK_TESTNET;
+
+export const graphRskUrl = process.env.REACT_APP_GRAPH_RSK;
+export const graphPerpsUrl = process.env.REACT_APP_GRAPH_PERPS;