Go to prod fixes

src/features/core/config/chain.ts

@@ -1,6 +1,15 @@
 import { ChainId, Token, TokenId } from '../types'
 
-export const defaultChainId = ChainId.Mainnet
+export const getDefaultChainId = (): ChainId => {
+  const host = window.location.host
+
+  if (host === 'app.stakestar.io') {
+    return ChainId.Mainnet
+  } else {
+    return ChainId.Goerli
+  }
+}
+
 export const chainIdLocalSorageKey = 'chainId'
 
 type Tokens = Record<TokenId, Token>
@@ -27,19 +36,25 @@ export type ChainConfig = {
   explorer: string
   urls: string[]
   tokens: Tokens
+  gpaphQlUrl: string
+  ssvApiUrL: string
 }
 
 export const chainConfigs: Record<ChainId, ChainConfig> = {
   [ChainId.Mainnet]: {
     name: 'Mainnet',
     explorer: 'https://etherscan.io',
     urls: [`https://mainnet.infura.io/v3/${process.env.INFURA_KEY}`],
-    tokens
+    tokens,
+    gpaphQlUrl: 'https://subgraph.stakestar.io/subgraphs/name/stakestar',
+    ssvApiUrL: 'https://api.ssv.network/api/v4/mainnet/'
   },
   [ChainId.Goerli]: {
     name: 'Görli',
     explorer: 'https://goerli.etherscan.io',
     urls: [`https://goerli.infura.io/v3/${process.env.INFURA_KEY}`],
-    tokens
+    tokens,
+    gpaphQlUrl: 'https://subgraph.stakestar.io/subgraphs/name/stakestar-testnet',
+    ssvApiUrL: 'https://api.ssv.network/api/v4/prater/'
   }
 }

src/features/core/config/urls.ts

@@ -1,2 +1 @@
-export const thegraphUrl = 'https://subgraph.stakestar.io/subgraphs/name/stakestar'
 export const uniswapThegraphUrl = 'https://api.thegraph.com/subgraphs/name/uniswap/uniswap-v3'

src/features/core/entities/TokenAmount.ts

@@ -1,7 +1,7 @@
 import { formatFixed } from '@ethersproject/bignumber'
 import { BigNumber, utils } from 'ethers'
 
-import { chainConfigs, chainIdLocalSorageKey, defaultChainId } from '../config'
+import { chainConfigs, chainIdLocalSorageKey, getDefaultChainId } from '../config'
 import type { Token, TokenId } from '../types'
 import { getLocalStorageItem } from '../utils'
 
@@ -137,7 +137,7 @@ function formatNumberDecimals(value: number | string, decimals: number): string
 }
 
 function getTokenById(tokenId: TokenId): Token {
-  const chainId = getLocalStorageItem(chainIdLocalSorageKey, defaultChainId)
+  const chainId = getLocalStorageItem(chainIdLocalSorageKey, getDefaultChainId())
 
   return chainConfigs[chainId].tokens[tokenId]
 }

src/features/core/hooks/useGraphQLClientSdk.ts

@@ -0,0 +1,14 @@
+import { Sdk } from '@stakestar/subgraph-client'
+import { useMemo } from 'react'
+
+import { useChainConfig } from '~/features/wallet'
+
+import { getGraphQLClientSdk } from '../utils/graphQLClient'
+
+export function useGraphQLClientSdk(): Sdk {
+  const chainConfig = useChainConfig()
+
+  return useMemo(() => {
+    return getGraphQLClientSdk(chainConfig.gpaphQlUrl)
+  }, [chainConfig])
+}

src/features/core/hooks/useSSVClient.ts

@@ -0,0 +1,15 @@
+import axios, { Axios } from 'axios'
+import { useMemo } from 'react'
+
+import { useChainConfig } from '~/features/wallet'
+
+export function useSSVClient(): Axios {
+  const chainConfig = useChainConfig()
+
+  return useMemo(() => {
+    const ssvClient = axios.create()
+    ssvClient.defaults.baseURL = chainConfig.ssvApiUrL
+
+    return ssvClient
+  }, [chainConfig])
+}

src/features/core/index.ts

@@ -1,4 +1,3 @@
-export * from './api'
 export * from './components'
 export * from './config'
 export * from './entities'

src/features/core/utils/getChainId.ts

@@ -1,7 +1,7 @@
-import { chainIdLocalSorageKey, defaultChainId } from '../config'
+import { chainIdLocalSorageKey, getDefaultChainId } from '../config'
 import { ChainId } from '../types'
 import { getLocalStorageItem } from '../utils'
 
 export function getChainId(): ChainId {
-  return getLocalStorageItem(chainIdLocalSorageKey, defaultChainId)
+  return getLocalStorageItem(chainIdLocalSorageKey, getDefaultChainId())
 }

src/features/core/utils/getChainNameId.ts

@@ -1,6 +1,6 @@
 import { Network } from '@stakestar/contracts'
 
-import { defaultChainId } from '../config'
+import { getDefaultChainId } from '../config'
 import { ChainId } from '../types'
 import { getChainId } from './getChainId'
 
@@ -10,5 +10,5 @@ const chainIdsMap: Record<ChainId, Network> = {
 }
 
 export function getChainNameId(): Network {
-  return chainIdsMap[getChainId()] || chainIdsMap[defaultChainId]
+  return chainIdsMap[getChainId()] || chainIdsMap[getDefaultChainId()]
 }

src/features/core/utils/getExplorerUrl.ts

@@ -1,8 +1,8 @@
-import { chainConfigs, chainIdLocalSorageKey, defaultChainId } from '../config'
+import { chainConfigs, chainIdLocalSorageKey, getDefaultChainId } from '../config'
 import { getLocalStorageItem } from '../utils'
 
 export function getExplorerUrl(path: 'address' | 'tx', hash: string): string {
-  const chainId = getLocalStorageItem(chainIdLocalSorageKey, defaultChainId)
+  const chainId = getLocalStorageItem(chainIdLocalSorageKey, getDefaultChainId())
 
   return `${chainConfigs[chainId].explorer}/${path}/${hash}`
 }

src/features/staking/hooks/useFetchStakingData/useFetchStakingData.ts

@@ -1,19 +1,18 @@
 import { ValidatorStatus } from '@stakestar/contracts'
 import BigNumberJs from 'bignumber.js'
-import { useCallback, useEffect, useRef } from 'react'
+import { useCallback, useEffect } from 'react'
 
 import {
   DailyTvls,
   handleError,
   setBlockNumber,
-  thegraphUrl,
   tvlChartResultsCount,
   useBlockNumber,
   useContracts,
   useDispatch,
   useSelector
 } from '~/features/core'
-import { getGraphQLClientSdk } from '~/features/core/utils/graphQLClient'
+import { useGraphQLClientSdk } from '~/features/core/hooks/useGraphQLClientSdk'
 import { useAccount, useConnector, useSstarEthContract } from '~/features/wallet'
 
 import {
@@ -62,7 +61,7 @@ export function useFetchStakingData(): {
   const { stakeStarContract, stakeStarEthContract, stakeStarRegistryContract } = useContracts()
   const sstarEthContract = useSstarEthContract()
   const { address } = useAccount()
-  const sdk = useRef(getGraphQLClientSdk(thegraphUrl))
+  const sdk = useGraphQLClientSdk()
   const activeValidatorsCount = useSelector(selectActiveValidatorsCount)
   const totalSstarEth = useSelector(selectTotalSstarEth)
   const pendingUnstakeQueueIndex = useSelector(selectPendingUnstakeQueueIndex)
@@ -84,7 +83,7 @@ export function useFetchStakingData(): {
     const stakerId = address.toLowerCase()
 
     Promise.all([
-      sdk.current.getStakerAtMomentRate({ stakerId }).then(({ data }) => data.stakerAtMomentRate),
+      sdk.getStakerAtMomentRate({ stakerId }).then(({ data }) => data.stakerAtMomentRate),
       stakeStarContract.localPoolWithdrawalHistory(stakerId),
       stakeStarContract.queue(stakerId),
       stakeStarContract.queueIndex(stakerId)
@@ -102,7 +101,7 @@ export function useFetchStakingData(): {
         dispatch(setLocalPool({ withdrawalHistory: localPoolWithdrawalHistory.toString() }))
       })
       .catch(handleError)
-  }, [address, dispatch, sstarEthToEthRate, stakeStarContract])
+  }, [address, dispatch, sstarEthToEthRate, stakeStarContract, sdk])
 
   const fetchStakingData = useCallback(() => {
     if (!sstarEthContract || !provider) {
@@ -118,9 +117,9 @@ export function useFetchStakingData(): {
       stakeStarContract.localPoolWithdrawalLimit(),
       stakeStarContract.localPoolWithdrawalPeriodLimit(),
       stakeStarContract.functions['rate()'](),
-      sdk.current.getTokenRateDailies({ first: 7 }).then(({ data }) => data.tokenRateDailies),
+      sdk.getTokenRateDailies({ first: 7 }).then(({ data }) => data.tokenRateDailies),
       stakeStarRegistryContract.countValidatorPublicKeys(ValidatorStatus.ACTIVE),
-      sdk.current.getStakeStarTvls({ first: tvlChartResultsCount }).then(({ data }) => data.stakeStarTvls)
+      sdk.getStakeStarTvls({ first: tvlChartResultsCount }).then(({ data }) => data.stakeStarTvls)
     ])
       .then(
         ([
@@ -170,7 +169,7 @@ export function useFetchStakingData(): {
         }
       )
       .catch(handleError)
-  }, [dispatch, provider, sstarEthContract, stakeStarContract, stakeStarEthContract, stakeStarRegistryContract])
+  }, [dispatch, provider, sstarEthContract, stakeStarContract, stakeStarEthContract, stakeStarRegistryContract, sdk])
 
   useEffect(() => {
     fetchStakingData()

src/features/wallet/hooks/useChainConfig.ts

@@ -1,14 +1,18 @@
+import { useMemo } from 'react'
+
 import {
   ChainConfig,
   ChainId,
   chainConfigs,
   chainIdLocalSorageKey,
-  defaultChainId,
+  getDefaultChainId,
   useLocalStorage
 } from '~/features/core'
 
 export function useChainConfig(): ChainConfig {
-  const [chainId] = useLocalStorage<ChainId>(chainIdLocalSorageKey, defaultChainId)
+  const [chainId] = useLocalStorage<ChainId>(chainIdLocalSorageKey, getDefaultChainId())
 
-  return chainConfigs[chainId]
+  return useMemo(() => {
+    return chainConfigs[chainId]
+  }, [chainId])
 }

src/features/wallet/popups/UnsupportedNetworkPopup.tsx

@@ -1,34 +1,29 @@
 import { Button, Typography } from '@onestaree/ui-kit'
-import classNames from 'classnames'
 
-import { ChainId, handleError } from '~/features/core'
+import { ChainId, getDefaultChainId, handleError } from '~/features/core'
 import { useConnector } from '~/features/wallet'
 
 import styles from './UnsupportedNetworkPopup.module.scss'
 
 export function UnsupportedNetworkPopup(): JSX.Element {
   const { connector } = useConnector()
 
-  const onClick = (isMainnet = true): void => {
-    connector.connector.activate(isMainnet ? ChainId.Mainnet : ChainId.Goerli).catch((error: Error): void => {
+  const onClick = (): void => {
+    connector.connector.activate(getDefaultChainId()).catch((error: Error): void => {
       handleError(error, {
         message: error?.message,
         displayGenericMessage: true
       })
     })
   }
 
+  const networkName = getDefaultChainId() === ChainId.Mainnet ? 'Ethereum Mainnet' : 'Goerli Testnet'
+
   return (
     <div className={styles.UnsupportedNetworkPopup}>
-      <Typography>StakeStar pool is currently available on Goerli Testnet and Ethereum Mainnet</Typography>
+      <Typography>StakeStar pool is currently available on {networkName}</Typography>
       <div className={styles.Buttons}>
-        <Button className={styles.Button} title="Switch to Ethereum Mainnet" onClick={onClick} />
-        <Button
-          className={classNames(styles.Button, styles.outlined)}
-          title="Switch to Goerli Testnet"
-          onClick={(): void => onClick(false)}
-          type="outline"
-        />
+        <Button className={styles.Button} title={`Switch to ${networkName}`} onClick={onClick} />
       </div>
     </div>
   )

src/features/wallet/providers/ConnectorProvider/ConnectorProvider.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren, createContext, useMemo } from 'react'
 
-import { ChainId, chainIdLocalSorageKey, defaultChainId, useLocalStorage } from '~/features/core'
+import { ChainId, chainIdLocalSorageKey, getDefaultChainId, useLocalStorage } from '~/features/core'
 
 import { Connector, ConnectorId } from './types'
 import { useConnectors } from './useConnectors'
@@ -20,7 +20,7 @@ export const ConnectorProviderContext = createContext<ConnectorProviderValue>({}
 export function ConnectorProvider({ children }: PropsWithChildren): JSX.Element {
   const defaultConnectorId: ConnectorId = 'network'
   const [connectorId, setConnectorId] = useLocalStorage<ConnectorId>('connectorId', defaultConnectorId)
-  const [chainId, setChainId] = useLocalStorage<ChainId>(chainIdLocalSorageKey, defaultChainId)
+  const [chainId, setChainId] = useLocalStorage<ChainId>(chainIdLocalSorageKey, getDefaultChainId())
   const connectors = useConnectors(chainId)
   const connector = getConnector(connectors, connectorId)
 

src/features/wallet/providers/ConnectorProvider/useConnectors.ts

@@ -5,7 +5,7 @@ import { Network } from '@web3-react/network'
 import { WalletConnect } from '@web3-react/walletconnect'
 import { useMemo } from 'react'
 
-import { ChainId, appName, chainConfigs } from '~/features/core'
+import { ChainId, appName, chainConfigs, getDefaultChainId } from '~/features/core'
 
 import { Connector } from './types'
 
@@ -51,8 +51,7 @@ export function useConnectors(chainId: ChainId): Connector[] {
 
           return result
         }, {} as Record<ChainId, string[]>),
-        // TODO
-        defaultChainId: ChainId.Goerli
+        defaultChainId: getDefaultChainId()
       })
   )
 

src/features/wallet/store.ts

@@ -1,6 +1,14 @@
 import { PayloadAction, createSlice } from '@reduxjs/toolkit'
 
-import { ChainId, RootState, TokenAmount, TokenAmountEncoded, TokenId, tokens } from '~/features/core'
+import {
+  ChainId,
+  RootState,
+  TokenAmount,
+  TokenAmountEncoded,
+  TokenId,
+  getDefaultChainId,
+  tokens
+} from '~/features/core'
 
 type AccountBalances = Record<TokenId, TokenAmountEncoded>
 
@@ -13,7 +21,7 @@ export type WalletState = {
 }
 
 const initialState: WalletState = {
-  chainId: 0,
+  chainId: getDefaultChainId(),
   account: {
     address: '',
     balances: Object.keys(tokens).reduce((result, tokenId) => {

src/features/wallet/utils.ts

@@ -3,7 +3,7 @@ import { CoinbaseWallet } from '@web3-react/coinbase-wallet'
 import type { Connector } from '@web3-react/types'
 import { WalletConnect } from '@web3-react/walletconnect'
 
-import { ChainId } from '~/features/core'
+import { getDefaultChainId } from '~/features/core'
 
 export function getWalletName(connector: Connector): string {
   return connector instanceof MetaMask
@@ -24,5 +24,5 @@ export function cropWalletAddress(address: string | undefined, tailsSize = 4): s
 }
 
 export function isChainIdSupported(chainId?: number): boolean {
-  return !!chainId && Object.values(ChainId).includes(chainId)
+  return !!chainId && chainId === getDefaultChainId()
 }

src/pages/DashboardPage.tsx

@@ -2,7 +2,8 @@ import { InfoCard, Table, TableProps, Typography } from '@onestaree/ui-kit'
 import { useEffect, useMemo, useState } from 'react'
 
 import { Page, TokenAmount, getOperatorsIds } from '~/features/core'
-import { handleError, ssvClient } from '~/features/core'
+import { handleError } from '~/features/core'
+import { useSSVClient } from '~/features/core/hooks/useSSVClient'
 import { TVL, useConvertEthToUsd, useFetchStakingData } from '~/features/staking'
 
 import styles from './DashboardPage.module.scss'
@@ -37,6 +38,7 @@ export function DashboardPage(): JSX.Element {
   const totalTvlInUsd = convertEthToUsd(totalTvl).toFormat(2)
   const totalTvlTokenAmount = useMemo(() => TokenAmount.fromWei('ETH', totalTvl), [totalTvl])
   const [rows, setRows] = useState<Operator[]>([])
+  const ssvClient = useSSVClient()
 
   useEffect(() => {
     const operatorsIds = getOperatorsIds()
@@ -61,7 +63,7 @@ export function DashboardPage(): JSX.Element {
         )
       })
       .catch(handleError)
-  }, [activeValidatorsCount])
+  }, [activeValidatorsCount, ssvClient])
 
   return (
     <Page className={styles.DashboardPage} title="Dashboard">