Merge pull request #136 from CudoVentures/cudos-dev

Dashboard Release 1.1.0.3
cudoventures · Dec 2, 2022 · d50ad9e · d50ad9e
2 parents c4bed6e + 66dfe26
commit d50ad9e
Show file tree

Hide file tree

Showing 100 changed files with 3,780 additions and 1,506 deletions.
diff --git a/.env.example b/.env.example
@@ -0,0 +1,54 @@
+# LOCAL
+VITE_APP_LOCAL_CAPTCHA_SITE_KEY=''
+VITE_APP_LOCAL_FAUCET_ADDRESS=''
+VITE_APP_LOCAL_BRIDGE_URL=''
+VITE_APP_LOCAL_GRAPHQL_URL=''
+VITE_APP_LOCAL_GRAPHQL_WS=''
+VITE_APP_LOCAL_RPC=''
+VITE_APP_LOCAL_API=''
+VITE_APP_LOCAL_EXPLORER_URL=''
+VITE_APP_LOCAL_STAKING_URL=''
+VITE_APP_LOCAL_CHAIN_NAME=''
+VITE_APP_LOCAL_CHAIN_ID=''
+
+# PRIVATE
+VITE_APP_PRIVATE_CAPTCHA_SITE_KEY=''
+VITE_APP_PRIVATE_FAUCET_ADDRESS=''
+VITE_APP_PRIVATE_BRIDGE_URL=''
+VITE_APP_PRIVATE_GRAPHQL_URL=''
+VITE_APP_PRIVATE_GRAPHQL_WS=''
+VITE_APP_PRIVATE_RPC=''
+VITE_APP_PRIVATE_API=''
+VITE_APP_PRIVATE_EXPLORER_URL=''
+VITE_APP_PRIVATE_STAKING_URL=''
+VITE_APP_PRIVATE_CHAIN_NAME=''
+VITE_APP_PRIVATE_CHAIN_ID=''
+
+# PUBLIC
+VITE_APP_PUBLIC_CAPTCHA_SITE_KEY=''
+VITE_APP_PUBLIC_FAUCET_ADDRESS=''
+VITE_APP_PUBLIC_BRIDGE_URL=''
+VITE_APP_PUBLIC_GRAPHQL_UR=''
+VITE_APP_PUBLIC_GRAPHQL_WS=''
+VITE_APP_PUBLIC_RPC=''
+VITE_APP_PUBLIC_API=''
+VITE_APP_PUBLIC_EXPLORER_URL=''
+VITE_APP_PUBLIC_STAKING_URL=''
+VITE_APP_PUBLIC_CHAIN_NAME=''
+VITE_APP_PUBLIC_CHAIN_ID=''
+
+# MAINNET
+VITE_APP_MAINNET_BRIDGE_URL=''
+VITE_APP_MAINNET_GRAPHQL_URL=''
+VITE_APP_MAINNET_GRAPHQL_WS=''
+VITE_APP_MAINNET_RPC=''
+VITE_APP_MAINNET_API=''
+VITE_APP_MAINNET_EXPLORER_URL=''
+VITE_APP_MAINNET_STAKING_URL=''
+VITE_APP_MAINNET_CHAIN_NAME=''
+VITE_APP_MAINNET_CHAIN_ID=''
+
+# GENERAL SETTINGS
+VITE_NODE_ENV='' #Production or empty
+VITE_APP_DEFAULT_NETWORK='' # LOCAL | PRIVATE | PUBLIC | MAINNET
+VITE_APP_GAS_PRICE=5000000000000
diff --git a/codegen.yaml b/codegen.yaml
@@ -11,10 +11,6 @@ generates:
       - 'typescript'
       - 'typescript-operations'
       - 'typescript-react-apollo' # To generate custom hooks per query
-  ./src/graphql/desmos_profile.ts:
-    schema: https://gql.mainnet.desmos.network/v1/graphql
-    documents:
-      - 'src/graphql/desmos_profile_graphql.ts'
     plugins:
       - 'typescript'
       - 'typescript-operations'
diff --git a/index.html b/index.html
@@ -4,7 +4,8 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/src/assets/vectors/cudos-logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>CUDOS Dashboard</title>
+    <title>CUDOS Dashboard | Stake your CUDOS & vote on proposals</title>
+    <meta name="description" content="View network statistics | Stake your tokens to a list of validators | See staked CUDOS & available rewards | Vote on active proposals to shape the network" />
     <!-- Google Tag Manager --> 
     <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-NWBZN9R');</script> 
     <!-- End Google Tag Manager -->

diff --git a/package.json b/package.json
@@ -10,8 +10,8 @@
   },
   "dependencies": {
     "@apollo/client": "^3.5.10",
-    "@cosmostation/cosmos-client": "^0.0.1",
-    "@cosmostation/extension-client": "0.1.7",
+    "@cosmostation/cosmos-client": "^0.0.4",
+    "@cosmostation/extension-client": "0.1.11",
     "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
     "@fontsource/poppins": "^4.5.5",
@@ -25,8 +25,10 @@
     "copy-to-clipboard": "^3.3.1",
     "cosmjs-types": "^0.4.1",
     "cudosjs": "^1.1.1",
+    "detect-browser": "^5.3.0",
     "dompurify": "^2.3.8",
     "graphql": "^16.3.0",
+    "graphql-tag": "^2.0.0",
     "graphql-ws": "^5.6.4",
     "jdenticon": "^3.1.1",
     "lodash": "^4.17.21",
@@ -37,31 +39,35 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-google-recaptcha": "^2.1.0",
+    "react-markdown": "^8.0.3",
     "react-redux": "^7.2.6",
+    "react-responsive": "^9.0.0",
     "react-router-dom": "^6.2.2",
     "redux": "^4.1.2",
     "redux-persist": "^6.0.0",
+    "remark-gfm": "^3.0.1",
     "uint8-to-base64": "^0.2.0",
     "vite": "^2.9.8"
   },
   "devDependencies": {
+    "@babel/core": "^7.0.0",
     "@graphql-codegen/cli": "^2.6.2",
-    "@graphql-codegen/typescript": "^2.4.8",
-    "@graphql-codegen/typescript-operations": "^2.3.5",
-    "@graphql-codegen/typescript-react-apollo": "^3.2.11",
+    "@graphql-codegen/typescript": "^2.8.1",
+    "@graphql-codegen/typescript-operations": "^2.5.6",
+    "@graphql-codegen/typescript-react-apollo": "^3.3.6",
     "@honkhonk/vite-plugin-svgr": "^1.1.0",
-    "@rollup/plugin-alias": "^3.1.9",
+    "@rollup/plugin-alias": "^4.0.2",
     "@types/big.js": "^6.1.3",
     "@types/dompurify": "^2.3.3",
     "@types/lodash": "^4.14.182",
     "@types/long": "^4.0.2",
-    "@types/node": "^17.0.23",
+    "@types/node": "^18.11.9",
     "@types/numeral": "^2.0.2",
     "@types/ramda": "^0.28.7",
     "@types/react": "^17.0.33",
     "@types/react-dom": "^17.0.10",
-    "@typescript-eslint/eslint-plugin": "^5.17.0",
-    "@typescript-eslint/parser": "^5.17.0",
+    "@typescript-eslint/eslint-plugin": "^4.0.1",
+    "@typescript-eslint/parser": "^4.0.0",
     "@vitejs/plugin-react": "^1.0.7",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^19.0.2",
@@ -72,6 +78,7 @@
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-jest": "^25.3.0",
     "eslint-plugin-jsx-a11y": "^6.5.1",
+    "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-promise": "^5.1.0",
     "eslint-plugin-react": "^7.27.1",

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,24 +1,16 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { useCallback, useEffect } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { ThemeProvider } from '@mui/material/styles'
 import { useDispatch, useSelector } from 'react-redux'
-import { CssBaseline } from '@mui/material'
-import { ApolloProvider } from '@apollo/client'
+import { Box, CssBaseline } from '@mui/material'
+import { ApolloClient, ApolloProvider, NormalizedCacheObject } from '@apollo/client'
 import { Routes, Route, useLocation, Navigate } from 'react-router-dom'
-import { fetchRedelegations } from 'api/getAccountRedelegations'
-import { fetchUndedelegations } from 'api/getAccountUndelegations'
-import BigNumber from 'bignumber.js'
 import { updateUser } from 'store/profile'
 import { updateUserTransactions } from 'store/userTransactions'
-import { fetchRewards } from 'api/getRewards'
 import NotificationPopup from 'components/NotificationPopup'
-import { fetchDelegations } from 'api/getAccountDelegations'
 import CosmosNetworkConfig from 'ledgers/CosmosNetworkConfig'
-import { connectKeplrLedger } from 'ledgers/KeplrLedger'
-import { connectCosmostationLedger } from 'ledgers/CosmoStationLedger'
 import { switchLedgerType } from 'ledgers/utils'
-import { getUnbondingBalance } from 'api/getUnbondingBalance'
-import { getStakedBalance, getWalletBalance } from './utils/projectUtils'
+import { connectUser } from './utils/projectUtils'
 import { useApollo } from './graphql/client'
 import Layout from './components/Layout'
 import RequireLedger from './components/RequireLedger/RequireLedger'
@@ -33,19 +25,31 @@ import theme from './theme'
 import { RootState } from './store'
 
 import '@fontsource/poppins'
+import { ApolloLinks, defaultApolloLinks } from 'graphql/helpers'
+import { CHAIN_DETAILS } from 'utils/constants'
+import NetworkChangingLoading from 'components/NetworkChangeLoading'
+import { networkLoadingStyles } from 'components/NetworkChangeLoading/styles'
 
 const App = () => {
   const location = useLocation()
-
   const themeColor = useSelector((state: RootState) => state.settings.theme)
-  const apolloClient = useApollo(null)
-  const { lastLoggedAddress } = useSelector((state: RootState) => state.profile)
+  const newApolloClient = useApollo(null)
+  const [currentApolloClient, setCurrentApolloClient] = useState<ApolloClient<NormalizedCacheObject>>(
+    newApolloClient(defaultApolloLinks)
+  )
+  const {
+    lastLoggedAddress,
+    chosenNetwork: currentNetwork,
+    connectedLedger,
+    loadingState
+  } = useSelector((state: RootState) => state.profile)
 
   const dispatch = useDispatch()
 
-  const connectAccount = useCallback(async (ledgerType: string) => {
+  const connectAccount = useCallback(async (chosenNetwork: string, ledgerType: string) => {
     try {
-      const { address, accountName } = await switchLedgerType(ledgerType)
+
+      const { address } = await switchLedgerType(chosenNetwork!, ledgerType)
       if (address !== lastLoggedAddress || lastLoggedAddress === '') {
         dispatch(
           updateUserTransactions({
@@ -56,36 +60,10 @@ const App = () => {
           })
         )
       }
-      const balance = await getWalletBalance(address!)
-
-      const stakedAmountBalance = await getStakedBalance(address!)
-
-      const { totalRewards, validatorArray } = await fetchRewards(address!)
-
-      const { delegationsArray } = await fetchDelegations(address)
-
-      const { redelegationsArray } = await fetchRedelegations(address)
 
-      const { undelegationsArray } = await fetchUndedelegations(address)
+      const connectedUser = await connectUser(chosenNetwork, ledgerType)
+      dispatch(updateUser(connectedUser))
 
-      const { unbondingBalance } = await getUnbondingBalance(address)
-
-      dispatch(
-        updateUser({
-          address,
-          lastLoggedAddress: address,
-          connectedLedger: ledgerType,
-          accountName,
-          balance: new BigNumber(balance),
-          availableRewards: new BigNumber(totalRewards),
-          stakedValidators: validatorArray,
-          stakedBalance: new BigNumber(stakedAmountBalance),
-          unbondingBalance: new BigNumber(unbondingBalance),
-          delegations: delegationsArray,
-          redelegations: redelegationsArray,
-          undelegations: undelegationsArray
-        })
-      )
     } catch (e) {
       throw new Error('Failed to connect!')
     }
@@ -103,28 +81,47 @@ const App = () => {
         })
       )
 
-      await connectAccount(CosmosNetworkConfig.KEPLR_LEDGER)
+      await connectAccount(currentNetwork, CosmosNetworkConfig.KEPLR_LEDGER)
     })
 
     if (window.cosmostation) {
       window.cosmostation.cosmos.on('accountChanged', async () => {
-        await connectAccount(CosmosNetworkConfig.COSMOSTATION_LEDGER)
+        await connectAccount(currentNetwork, CosmosNetworkConfig.COSMOSTATION_LEDGER)
       })
     }
 
     return () => {
       window.removeEventListener('keplr_keystorechange', async () => {
-        await connectAccount(CosmosNetworkConfig.KEPLR_LEDGER)
+        await connectAccount(currentNetwork, CosmosNetworkConfig.KEPLR_LEDGER)
       })
       window.removeEventListener('accountChanged', async () => {
-        await connectAccount(CosmosNetworkConfig.COSMOSTATION_LEDGER)
+        await connectAccount(currentNetwork, CosmosNetworkConfig.COSMOSTATION_LEDGER)
       })
     }
   }, [])
 
+
+  useEffect(() => {
+    dispatch(updateUser({ loadingState: true })
+    )
+    const newApolloLinks: ApolloLinks = {
+      uri: CHAIN_DETAILS.GRAPHQL_URL[currentNetwork! as keyof typeof CHAIN_DETAILS.GRAPHQL_URL],
+      url: CHAIN_DETAILS.GRAPHQL_WS[currentNetwork! as keyof typeof CHAIN_DETAILS.GRAPHQL_WS]
+    }
+
+    setCurrentApolloClient(newApolloClient(newApolloLinks))
+
+    if (connectedLedger) {
+      connectAccount(currentNetwork, connectedLedger)
+    }
+
+    setTimeout(() => { dispatch(updateUser({ loadingState: false })) }, 4000)
+
+  }, [currentNetwork])
+
   return (
-    <ApolloProvider client={apolloClient}>
-      <ThemeProvider theme={theme[themeColor]}>
+    <ApolloProvider client={currentApolloClient!}>
+      <ThemeProvider theme={theme[themeColor!]}>
         <CssBaseline />
         {location.pathname !== '/' ? null : (
           <>
@@ -136,31 +133,38 @@ const App = () => {
         )}
         {location.pathname === '/' ? null : (
           <Layout>
-            <Routes>
-              <Route element={<RequireLedger />}>
-                <Route path="dashboard">
-                  <Route index element={<Dashboard />} />
+            {loadingState ? <NetworkChangingLoading /> : null}
+            <Box style={loadingState ? networkLoadingStyles.hidden : networkLoadingStyles.visible}>
+              <Routes>
+                <Route element={<RequireLedger />}>
+                  <Route path="dashboard">
+                    <Route index element={<Dashboard />} />
+                  </Route>
+                  <Route path="staking">
+                    <Route index element={<Staking />} />
+                    <Route path=":validatorId" element={<ValidatorDetails />} />
+                  </Route>
+                  <Route path="proposals">
+                    <Route index element={<Proposals />} />
+                    <Route path=":proposalId" element={<ProposalDetails />} />
+                  </Route>
                 </Route>
-                <Route path="staking">
-                  <Route index element={<Staking />} />
-                  <Route path=":validatorId" element={<ValidatorDetails />} />
-                </Route>
-                <Route path="proposals">
-                  <Route index element={<Proposals />} />
-                  <Route path=":proposalId" element={<ProposalDetails />} />
-                </Route>
-              </Route>
-              {import.meta.env.VITE_CHAIN_STATUS !== 'mainnet' && (
-                <Route path="faucet">
-                  <Route index element={<Faucet />} />
-                </Route>
-              )}
-              <Route path="*" element={<Navigate to="/dashboard" />} />
-            </Routes>
-            <NotificationPopup type="error" />
-            <NotificationPopup type="warning" />
-            <NotificationPopup type="info" />
+                {
+                  CHAIN_DETAILS.CHAIN_ID[currentNetwork! as keyof typeof CHAIN_DETAILS.CHAIN_ID]
+                    === CHAIN_DETAILS.CHAIN_ID.MAINNET ? null : (
+                    <Route path="faucet">
+                      <Route index element={<Faucet />} />
+                    </Route>
+                  )}
+                <Route path="*" element={<Navigate to="/dashboard" />} />
+              </Routes>
+
+              <NotificationPopup type="error" />
+              <NotificationPopup type="warning" />
+              <NotificationPopup type="info" />
+            </Box>
           </Layout>
+
         )}
       </ThemeProvider>
     </ApolloProvider>

diff --git a/src/api/config.ts b/src/api/config.ts
@@ -1,5 +1,3 @@
 /* eslint-disable import/prefer-default-export */
 export const GET_CURRENCY_RATE_URL = (currency: string) =>
   `https://api.coingecko.com/api/v3/simple/price?ids=CUDOS&vs_currencies=${currency}`
-
-export const GET_FAUCET_TOKENS = import.meta.env.VITE_FAUCET_URL
diff --git a/src/api/getAccountDelegations.ts b/src/api/getAccountDelegations.ts
@@ -1,15 +1,17 @@
 import axios from 'axios'
+import { CHAIN_DETAILS } from 'utils/constants'
 import { AccountDelegationsDocument } from '../graphql/account_actions'
 
 export const fetchDelegations = async (
+  chosenNetwork: string,
   address: string,
   signal?: AbortSignal
 ) => {
   const delegationsArray: { address: string; amount: string }[] = []
 
   try {
     const { data } = await axios.post(
-      import.meta.env.VITE_GRAPHQL_URL?.toString(),
+      CHAIN_DETAILS.GRAPHQL_URL[chosenNetwork! as keyof typeof CHAIN_DETAILS.GRAPHQL_URL].toString(),
       {
         variables: { address },
         query: AccountDelegationsDocument