DO NOT MERGE: Observables -> React Query refactor

.env.sample

@@ -1,8 +1,10 @@
+REACT_APP_DEBUG_MODE=
 REACT_APP_ALCHEMY_MAINNET=
 REACT_APP_ALCHEMY_ROPSTEN=
 REACT_APP_PORTIS_DAPP_ID=
 REACT_APP_FORTMATIC_API_KEY=
 REACT_APP_APY_VISION_TOKEN=
 REACT_APP_INTOTHEBLOCK_KEY=
+REACT_APP_SENTRY_DSN=
 REACT_APP_BANCOR_DEPLOYER=
 GENERATE_SOURCEMAP=false

README.md

@@ -37,7 +37,7 @@ Builds the app for production to the `build` folder.\
 It correctly bundles React in production mode and optimizes the build for the best performance.
 
 The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
+Your app is ready to be deployed.
 
 See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
 

package.json

@@ -8,6 +8,10 @@
     "@headlessui/react": "^1.3.0",
     "@popperjs/core": "^2.9.3",
     "@reduxjs/toolkit": "^1.6.2",
+    "@sentry/react": "^7.7.0",
+    "@sentry/tracing": "^7.7.0",
+    "@tanstack/react-query": "^4.0.5",
+    "@tanstack/react-query-devtools": "^4.0.5",
     "@types/jest": "^26.0.15",
     "@types/lodash": "^4.14.170",
     "@types/node": "^12.0.0",
@@ -56,10 +60,10 @@
     "@storybook/addon-actions": "6.5.9",
     "@storybook/addon-essentials": "6.5.9",
     "@storybook/addon-links": "6.5.9",
-    "@storybook/node-logger": "6.5.9",
-    "@storybook/preset-create-react-app": "4.1.2",
     "@storybook/builder-webpack5": "6.5.9",
     "@storybook/manager-webpack5": "6.5.9",
+    "@storybook/node-logger": "6.5.9",
+    "@storybook/preset-create-react-app": "4.1.2",
     "@storybook/react": "6.5.9",
     "@typechain/ethers-v5": "^8.0.2",
     "@types/json-bigint": "^1.0.0",

src/App.tsx

@@ -10,10 +10,7 @@ import {
   setSlippageTolerance,
   setUsdToggle,
 } from 'store/user/user';
-import {
-  Notification,
-  setNotifications,
-} from 'store/notification/notification';
+import { setNotifications } from 'store/notification/notification';
 import { store, useAppSelector } from 'store';
 import { googleTagManager } from 'services/api/googleTagManager';
 import {
@@ -23,7 +20,6 @@ import {
   getUsdToggleLS,
   setNotificationsLS,
 } from 'utils/localStorage';
-import { subscribeToObservables } from 'services/observables/triggers';
 import { isUnsupportedNetwork } from 'utils/helperFunctions';
 import { MobileBottomNav } from 'elements/layoutHeader/MobileBottomNav';
 import { useWeb3React } from '@web3-react/core';
@@ -41,7 +37,7 @@ export const App = () => {
   const { chainId, account } = useWeb3React();
   useAutoConnect();
   const unsupportedNetwork = isUnsupportedNetwork(chainId);
-  const notifications = useAppSelector<Notification[]>(
+  const notifications = useAppSelector(
     (state) => state.notification.notifications
   );
 
@@ -75,8 +71,6 @@ export const App = () => {
     const slippage = getSlippageToleranceLS();
     if (slippage) dispatch(setSlippageTolerance(slippage));
 
-    subscribeToObservables(dispatch);
-
     const dark = getDarkModeLS();
     dispatch(setDarkMode(dark));
   }, [dispatch]);

src/components/tokenInput/TokenInputV3.tsx

@@ -2,12 +2,12 @@ import { memo, useMemo } from 'react';
 import { prettifyNumber } from 'utils/helperFunctions';
 import { useResizeTokenInput } from 'components/tokenInput/useResizeTokenInput';
 import { useTokenInputV3 } from 'components/tokenInput/useTokenInputV3';
-import { Token } from 'services/observables/tokens';
 import useDimensions from 'hooks/useDimensions';
 import { Image } from 'components/image/Image';
+import { getBancorLogoUrl } from 'utils/pureFunctions';
 
 export interface TokenInputV3Props {
-  token: Token;
+  dltId: string;
   inputTkn: string;
   setInputTkn: (amount: string) => void;
   inputFiat: string;
@@ -17,7 +17,7 @@ export interface TokenInputV3Props {
 }
 
 const TokenInputV3 = ({
-  token,
+  dltId,
   inputTkn,
   setInputTkn,
   inputFiat,
@@ -27,7 +27,7 @@ const TokenInputV3 = ({
 }: TokenInputV3Props) => {
   const { handleChange, inputUnit, oppositeUnit, isFocused, setIsFocused } =
     useTokenInputV3({
-      token,
+      dltId,
       setInputTkn,
       setInputFiat,
       isFiat,
@@ -55,7 +55,7 @@ const TokenInputV3 = ({
       } ${isError ? 'border-error text-error' : ''}`}
     >
       <Image
-        src={token.logoURI}
+        src={getBancorLogoUrl(dltId)}
         alt={'Token Logo'}
         className="absolute w-[40px] h-[40px] ml-20 !rounded-full"
       />

src/components/tokenInput/useTokenInputV3.tsx

@@ -1,7 +1,7 @@
-import { ChangeEvent, useCallback, useMemo, useState } from 'react';
+import { ChangeEvent, useCallback, useState } from 'react';
 import { calcFiatValue, calcTknValue } from 'utils/helperFunctions';
-import { Token } from 'services/observables/tokens';
 import { sanitizeNumberInput } from 'utils/pureFunctions';
+import { usePoolPick } from 'queries/index';
 
 export const calcOppositeValue = (
   isFiat: boolean,
@@ -17,27 +17,35 @@ export const calcOppositeValue = (
 };
 
 export interface useTokenInputV3Props {
-  token: Token;
+  dltId: string;
   setInputTkn: (amount: string) => void;
   setInputFiat: (amount: string) => void;
   isFiat: boolean;
 }
 
 export const useTokenInputV3 = ({
-  token,
+  dltId,
   setInputTkn,
   setInputFiat,
   isFiat,
 }: useTokenInputV3Props) => {
+  const { getOne } = usePoolPick(['symbol', 'decimals', 'rate']);
+  const { data } = getOne(dltId);
+  const symbol = data?.symbol;
+  const usdPrice = data?.rate?.usd;
+  const decimals = data?.decimals;
   const [isFocused, setIsFocused] = useState(false);
-  const { symbol, usdPrice, decimals } = useMemo(() => token, [token]);
   const inputUnit = isFiat ? 'USD' : symbol;
 
   const oppositeUnit = isFiat ? symbol : 'USD';
 
   const handleChange = useCallback(
     (e: ChangeEvent<HTMLInputElement>) => {
       const value = sanitizeNumberInput(e.target.value);
+      if (!usdPrice || !decimals) {
+        console.error('Missing or still loading data for calculation');
+        return;
+      }
 
       if (isFiat) {
         const oppositeValue = value

src/components/tokenInputPercentage/TokenInputPercentageV3.tsx → src/components/tokenInputPercentage/TokenInputPercentageV3New.tsx

@@ -5,15 +5,19 @@ import TokenInputV3, {
 } from 'components/tokenInput/TokenInputV3';
 import { useEffect, useState } from 'react';
 import { calcFiatValue, prettifyNumber } from 'utils/helperFunctions';
+import { usePoolPick } from 'queries/index';
 
-interface TokenInputPercentageV3Props extends TokenInputV3Props {
+interface TokenInputPercentageV3Props extends Omit<TokenInputV3Props, 'token'> {
+  dltId: string;
   label: string;
+  balance?: string;
   balanceLabel?: string;
 }
 const percentages = [25, 50, 75, 100];
 
-export const TokenInputPercentageV3 = ({
-  token,
+export const TokenInputPercentageV3New = ({
+  dltId,
+  balance,
   inputTkn,
   setInputTkn,
   inputFiat,
@@ -23,50 +27,46 @@ export const TokenInputPercentageV3 = ({
   label,
   balanceLabel = 'Balance',
 }: TokenInputPercentageV3Props) => {
-  const fieldBalance = token.balance
-    ? token.balance
-    : token && token.balance
-    ? token.balance
-    : undefined;
-
+  const { getOne } = usePoolPick(['decimals', 'rate']);
+  const { data: token } = getOne(dltId);
   const [selPercentage, setSelPercentage] = useState<number>(-1);
 
   const handleSetPercentage = (percent: number) => {
     setSelPercentage(percentages.indexOf(percent));
-    if (fieldBalance !== undefined) {
-      const amount = new BigNumber(fieldBalance).times(percent / 100);
+    if (balance !== undefined && !!token) {
+      const amount = new BigNumber(balance).times(percent / 100);
       setInputTkn(amount.toString());
-      setInputFiat(calcFiatValue(amount, token.usdPrice));
+      setInputFiat(calcFiatValue(amount, token.rate?.usd ?? 0));
     }
   };
 
   useEffect(() => {
-    if (fieldBalance !== undefined) {
+    if (balance !== undefined) {
       const percentage = new BigNumber(inputTkn)
-        .div(fieldBalance)
+        .div(balance)
         .times(100)
         .toNumber()
         .toFixed(10);
       setSelPercentage(
         percentages.findIndex((x) => percentage === x.toFixed(10))
       );
     }
-  }, [fieldBalance, inputTkn]);
+  }, [balance, inputTkn]);
 
   return (
     <div className="w-full">
       <div className="flex justify-between items-end mb-10">
         <span>{label}</span>
-        {fieldBalance && (
+        {balance && (
           <button
             onClick={() => handleSetPercentage(100)}
             className={`text-12 ${isError ? 'text-error' : ''}`}
           >
-            {balanceLabel}: {prettifyNumber(fieldBalance)}{' '}
+            {balanceLabel}: {prettifyNumber(balance)}{' '}
             <span className="text-secondary">
               (
               {prettifyNumber(
-                calcFiatValue(fieldBalance, token.usdPrice),
+                calcFiatValue(balance, token?.rate?.usd ?? 0),
                 true
               )}
               )
@@ -76,7 +76,7 @@ export const TokenInputPercentageV3 = ({
       </div>
       {token && (
         <TokenInputV3
-          token={token}
+          dltId={dltId}
           inputTkn={inputTkn}
           setInputTkn={setInputTkn}
           inputFiat={inputFiat}

src/elements/earn/pools/Statistics.tsx

@@ -1,46 +1,49 @@
-import { useAppSelector } from 'store';
 import './Statistics.css';
+import { useApiStatistics } from 'queries/api/useApiStatistics';
 
 export const Statistics = () => {
-  const stats = useAppSelector((state) => state.bancor.statistics);
-  const first = stats[0];
+  const { data: stats } = useApiStatistics();
 
-  return (
-    <section className="content-block p-20">
-      {!stats.length ? (
-        [...Array(4)].map((_, i) => (
+  if (!stats) {
+    return (
+      <>
+        {[...Array(4)].map((_, i) => (
           <div key={`stats-loading-key-${i}`}>
             <div className="loading-skeleton w-1/2 h-20 mx-auto mb-10"></div>
             <div className="loading-skeleton w-2/3 h-14 mx-auto"></div>
           </div>
-        ))
-      ) : (
+        ))}
+      </>
+    );
+  }
+
+  const first = stats[0];
+
+  return (
+    <>
+      <div className="flex items-end">
         <div>
-          <div className="flex items-end">
-            <div>
-              <div className="text-secondary mb-15">{first.label}</div>
-              <div className="text-[30px] text-black-medium dark:text-white-medium uppercase">
-                {first.value}
-              </div>
-            </div>
+          <div className="text-secondary mb-15">{first.label}</div>
+          <div className="text-[30px] text-black-medium dark:text-white-medium uppercase">
+            {first.value}
           </div>
-          <hr className="border-fog dark:border-grey my-20" />
-          <div className="grid grid-cols-2 gap-20">
-            {stats.slice(1).map((item, i) => (
-              <div key={`stats-key-${i}`}>
-                <div className="flex items-end">
-                  <div>
-                    <div className="text-secondary">{item.label}</div>
-                    <div className="text-20 text-black-medium dark:text-white-medium uppercase">
-                      {item.value}
-                    </div>
-                  </div>
+        </div>
+      </div>
+      <hr className="border-fog dark:border-grey my-20" />
+      <div className="grid grid-cols-2 gap-20">
+        {stats.slice(1).map((item, i) => (
+          <div key={`stats-key-${i}`}>
+            <div className="flex items-end">
+              <div>
+                <div className="text-secondary">{item.label}</div>
+                <div className="text-20 text-black-medium dark:text-white-medium uppercase">
+                  {item.value}
                 </div>
               </div>
-            ))}
+            </div>
           </div>
-        </div>
-      )}
-    </section>
+        ))}
+      </div>
+    </>
   );
 };