From abed1351384740de834a046d162bbe83b62ca209 Mon Sep 17 00:00:00 2001 From: Jycssu Date: Wed, 12 Jun 2024 12:48:12 +0200 Subject: [PATCH] feat: use runtime env instead of build env for thegraph token --- next.config.js | 1 - src/pages/_app.tsx | 30 ++++- src/repositories/subgraphs/clients.ts | 105 +++++++++++------- .../subgraphs/queries/levinswap.queries.ts | 2 +- .../subgraphs/queries/realtoken.queries.ts | 4 +- .../subgraphs/queries/rmm.queries.ts | 6 +- .../subgraphs/queries/transfers.queries.ts | 2 +- .../subgraphs/queries/user.queries.ts | 6 +- .../subgraphs/queries/yam.queries.ts | 2 +- 9 files changed, 101 insertions(+), 57 deletions(-) diff --git a/next.config.js b/next.config.js index ef000b7..ca1d6f7 100644 --- a/next.config.js +++ b/next.config.js @@ -15,7 +15,6 @@ const nextConfig = { }, publicRuntimeConfig: { version, - THEGRAPH_API_KEY: process.env.NEXT_PUBLIC_THEGRAPH_API_KEY, }, }; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 0ba5604..67d572a 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -41,6 +41,9 @@ const i18n = initLanguage(resources) type AppProps = NextAppProps & { colorScheme: MantineColorScheme locale: string + env: { + THEGRAPH_API_KEY: string + } } const queryClient = new QueryClient({}) @@ -67,7 +70,17 @@ const libraryConnectors = getConnectors({ walletConnectV2: walletConnect, } as unknown as ConnectorsAvailable) -const App = ({ Component, pageProps, colorScheme }: AppProps) => { +export const getServerSideProps = async () => ({ + props: { + THEGRAPH_API_KEY: + process.env.THEGRAPH_API_KEY ?? process.env.NEXT_PUBLIC_THEGRAPH_API_KEY, + }, +}) + +const App = ({ Component, pageProps, colorScheme, env }: AppProps) => { + if (typeof window !== 'undefined') { + process.env = { ...process.env, ...env } + } function scrollToTop() { document.getElementById('main-layout-container')?.scroll({ top: 0, @@ -104,9 +117,16 @@ const App = ({ Component, pageProps, colorScheme }: AppProps) => { ) } -App.getInitialProps = ({ ctx }: { ctx: GetServerSidePropsContext }) => ({ - colorScheme: getCookie('mantine-color-scheme', ctx) || 'dark', - locale: getCookie('react-i18next', ctx) || 'fr', -}) +App.getInitialProps = ({ ctx }: { ctx: GetServerSidePropsContext }) => { + return { + env: { + THEGRAPH_API_KEY: + process.env.THEGRAPH_API_KEY ?? + process.env.NEXT_PUBLIC_THEGRAPH_API_KEY, + }, + colorScheme: getCookie('mantine-color-scheme', ctx) || 'dark', + locale: getCookie('react-i18next', ctx) || 'fr', + } +} export default App diff --git a/src/repositories/subgraphs/clients.ts b/src/repositories/subgraphs/clients.ts index 0a3d46e..04634ff 100644 --- a/src/repositories/subgraphs/clients.ts +++ b/src/repositories/subgraphs/clients.ts @@ -1,42 +1,67 @@ -import getConfig from 'next/config' - import { ApolloClient, InMemoryCache } from '@apollo/client' -const { publicRuntimeConfig } = getConfig() -const API_KEY = publicRuntimeConfig.THEGRAPH_API_KEY as string - -export const GnosisClient = new ApolloClient({ - uri: `https://gateway-arbitrum.network.thegraph.com/api/${API_KEY}/subgraphs/id/FPPoFB7S2dcCNrRyjM5QbaMwKqRZPdbTg8ysBrwXd4SP`, - cache: new InMemoryCache(), -}) - -export const EthereumClient = new ApolloClient({ - uri: `https://gateway-arbitrum.network.thegraph.com/api/${API_KEY}/subgraphs/id/EVjGN4mMd9h9JfGR7yLC6T2xrJf9syhjQNboFb7GzxVW`, - cache: new InMemoryCache(), -}) - -export const RMM2Client = new ApolloClient({ - uri: `https://gateway-arbitrum.network.thegraph.com/api/${API_KEY}/subgraphs/id/CxvZgcPjmtvFeSoSW9N563K7ZcHCwLVv8kXMbmuBKhv1`, - cache: new InMemoryCache(), -}) - -export const RMM3Client = new ApolloClient({ - uri: `https://gateway-arbitrum.network.thegraph.com/api/${API_KEY}/subgraphs/id/2xrWGGZ5r8Z7wdNdHxhbRVKcAD2dDgv3F2NcjrZmxifJ`, - cache: new InMemoryCache(), -}) - -export const RMM3WrapperClient = new ApolloClient({ - uri: `https://gateway-arbitrum.network.thegraph.com/api/${API_KEY}/subgraphs/id/2dMMk7DbQYPX6Gi5siJm6EZ2gDQBF8nJcgKtpiPnPBsK`, - cache: new InMemoryCache(), -}) - -export const LevinSwapClient = new ApolloClient({ - uri: `https://gateway-arbitrum.network.thegraph.com/api/${API_KEY}/subgraphs/id/2zkYvVc8xsmytcEjE9pr523qFcbvqRGxhuGGtraozs66`, - cache: new InMemoryCache(), -}) - -export const YamStatisticsClient = new ApolloClient({ - uri: 'https://api.thegraph.com/subgraphs/name/jycssu-com/yam-history-gnosis', - // uri: `https://gateway-arbitrum.network.thegraph.com/api/${API_KEY}/subgraphs/id/4eJa4rKCR5f8fq48BKbYBPvf7DWHppGZRvfiVUSFXBGR`, - cache: new InMemoryCache(), -}) +function lazyInit(fn: (API_KEY: string) => T) { + let result: T | undefined + return () => { + if (!result) { + result = fn(process.env.THEGRAPH_API_KEY ?? '') + } + return result + } +} + +export const GnosisClient = lazyInit( + (API_KEY: string) => + new ApolloClient({ + uri: `https://gateway-arbitrum.network.thegraph.com/api/${API_KEY}/subgraphs/id/FPPoFB7S2dcCNrRyjM5QbaMwKqRZPdbTg8ysBrwXd4SP`, + cache: new InMemoryCache(), + }), +) + +export const EthereumClient = lazyInit( + (API_KEY: string) => + new ApolloClient({ + uri: `https://gateway-arbitrum.network.thegraph.com/api/${API_KEY}/subgraphs/id/EVjGN4mMd9h9JfGR7yLC6T2xrJf9syhjQNboFb7GzxVW`, + cache: new InMemoryCache(), + }), +) + +export const RMM2Client = lazyInit( + (API_KEY: string) => + new ApolloClient({ + uri: `https://gateway-arbitrum.network.thegraph.com/api/${API_KEY}/subgraphs/id/CxvZgcPjmtvFeSoSW9N563K7ZcHCwLVv8kXMbmuBKhv1`, + cache: new InMemoryCache(), + }), +) + +export const RMM3Client = lazyInit( + (API_KEY: string) => + new ApolloClient({ + uri: `https://gateway-arbitrum.network.thegraph.com/api/${API_KEY}/subgraphs/id/2xrWGGZ5r8Z7wdNdHxhbRVKcAD2dDgv3F2NcjrZmxifJ`, + cache: new InMemoryCache(), + }), +) + +export const RMM3WrapperClient = lazyInit( + (API_KEY: string) => + new ApolloClient({ + uri: `https://gateway-arbitrum.network.thegraph.com/api/${API_KEY}/subgraphs/id/2dMMk7DbQYPX6Gi5siJm6EZ2gDQBF8nJcgKtpiPnPBsK`, + cache: new InMemoryCache(), + }), +) + +export const LevinSwapClient = lazyInit( + (API_KEY: string) => + new ApolloClient({ + uri: `https://gateway-arbitrum.network.thegraph.com/api/${API_KEY}/subgraphs/id/2zkYvVc8xsmytcEjE9pr523qFcbvqRGxhuGGtraozs66`, + cache: new InMemoryCache(), + }), +) + +export const YamStatisticsClient = lazyInit( + (API_KEY: string) => + new ApolloClient({ + uri: `https://gateway-arbitrum.network.thegraph.com/api/${API_KEY}/subgraphs/id/4eJa4rKCR5f8fq48BKbYBPvf7DWHppGZRvfiVUSFXBGR`, + cache: new InMemoryCache(), + }), +) diff --git a/src/repositories/subgraphs/queries/levinswap.queries.ts b/src/repositories/subgraphs/queries/levinswap.queries.ts index d541704..a3c1218 100644 --- a/src/repositories/subgraphs/queries/levinswap.queries.ts +++ b/src/repositories/subgraphs/queries/levinswap.queries.ts @@ -17,7 +17,7 @@ export async function getLevinSwapBalances( const executeQuery = useCacheWithLocalStorage( async (addressList: string[]) => - LevinSwapClient.query({ + LevinSwapClient().query({ query: LevinSwapQuery, variables: { addressList }, }), diff --git a/src/repositories/subgraphs/queries/realtoken.queries.ts b/src/repositories/subgraphs/queries/realtoken.queries.ts index c556250..38b13fe 100644 --- a/src/repositories/subgraphs/queries/realtoken.queries.ts +++ b/src/repositories/subgraphs/queries/realtoken.queries.ts @@ -18,11 +18,11 @@ export async function getRealtokenBalances(addressList: string[]) { const executeQuery = useCacheWithLocalStorage( async (addressList: string[]) => Promise.all([ - GnosisClient.query({ + GnosisClient().query({ query: RealtokenQuery, variables: { addressList }, }), - EthereumClient.query({ + EthereumClient().query({ query: RealtokenQuery, variables: { addressList }, }), diff --git a/src/repositories/subgraphs/queries/rmm.queries.ts b/src/repositories/subgraphs/queries/rmm.queries.ts index d52adea..d0c76fc 100644 --- a/src/repositories/subgraphs/queries/rmm.queries.ts +++ b/src/repositories/subgraphs/queries/rmm.queries.ts @@ -39,7 +39,7 @@ export interface RmmPosition { const executeRMM2Query = useCacheWithLocalStorage( async (addressList: string[]) => - RMM2Client.query({ + RMM2Client().query({ query: RmmQuery, variables: { addressList }, }), @@ -52,12 +52,12 @@ const executeRMM2Query = useCacheWithLocalStorage( const executeRMM3Query = useCacheWithLocalStorage( async (addressList: string[]) => { - const mainQuery = RMM3Client.query({ + const mainQuery = RMM3Client().query({ query: RmmQuery, variables: { addressList }, }) - const wrapperQuery = RMM3WrapperClient.query({ + const wrapperQuery = RMM3WrapperClient().query({ query: RmmWrapperQuery, variables: { addressList }, }) diff --git a/src/repositories/subgraphs/queries/transfers.queries.ts b/src/repositories/subgraphs/queries/transfers.queries.ts index d3aab34..afa04b6 100644 --- a/src/repositories/subgraphs/queries/transfers.queries.ts +++ b/src/repositories/subgraphs/queries/transfers.queries.ts @@ -32,7 +32,7 @@ async function executeQuery( if (!client) throw new Error(`Chain ID ${chainId} is not supported`) const execute = async (lastId: string) => - client.query({ + client().query({ query: RealTokenTransferQuery, variables: { addressList, limit, lastId, timestamp }, }) diff --git a/src/repositories/subgraphs/queries/user.queries.ts b/src/repositories/subgraphs/queries/user.queries.ts index 9387daf..3b8374f 100644 --- a/src/repositories/subgraphs/queries/user.queries.ts +++ b/src/repositories/subgraphs/queries/user.queries.ts @@ -36,7 +36,7 @@ function formatUserDetails(result: GetUserDetailsResult) { const executeGetUserIdQuery = useCacheWithLocalStorage( async (address: string) => - GnosisClient.query({ + GnosisClient().query({ query: GetUserIdQuery, variables: { address }, }), @@ -49,7 +49,7 @@ const executeGetUserIdQuery = useCacheWithLocalStorage( const executeGetTrustedIntermediaryQuery = useCacheWithLocalStorage( async () => - GnosisClient.query({ + GnosisClient().query({ query: GetTrustedIntermediaryQuery, }), { @@ -61,7 +61,7 @@ const executeGetTrustedIntermediaryQuery = useCacheWithLocalStorage( const executeGetUserDetailsQuery = useCacheWithLocalStorage( async (userId: string) => - GnosisClient.query({ + GnosisClient().query({ query: GetUserDetailsQuery, variables: { userId }, }), diff --git a/src/repositories/subgraphs/queries/yam.queries.ts b/src/repositories/subgraphs/queries/yam.queries.ts index 9503d39..6d528c2 100644 --- a/src/repositories/subgraphs/queries/yam.queries.ts +++ b/src/repositories/subgraphs/queries/yam.queries.ts @@ -17,7 +17,7 @@ export async function getRealtokenYamStatistics(address: string) { const executeQuery = useCacheWithLocalStorage( async (address: string) => - YamStatisticsClient.query({ + YamStatisticsClient().query({ query: YamStatisticsQuery, variables: { address,