Usd value v2 (#747)

* style input * revamp fetch usdc price * fix dusa price estimate * fmt * remove unecessary warns * use params in custom hook again + return undefined * improve-styling * update imports * remove try catch --------- Co-authored-by: Pierre Seznec <[email protected]>
massalabs · Jun 20, 2024 · cb36440 · cb36440
1 parent 5f629fc
commit cb36440
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 53 deletions.
diff --git a/src/components/inputAmount/InputAmount.tsx b/src/components/inputAmount/InputAmount.tsx
@@ -1,15 +1,17 @@
-import { Money, formatAmount } from '@massalabs/react-ui-kit';
+import { FetchingLine, Money, formatAmount } from '@massalabs/react-ui-kit';
 import Big from 'big.js';
 import { parseUnits } from 'viem';
 import useEvmToken from '../../custom/bridge/useEvmToken';
-import { useMassaNetworkValidation } from '../../custom/bridge/useNetworkValidation';
 import { useServiceFee } from '../../custom/bridge/useServiceFee';
 import { useUsdValue } from '../../custom/usdPrice/useFetchPrice';
 import { TokenBalance, TokenOptions } from '../../pages';
-import { useGlobalStatusesStore } from '../../store/globalStatusesStore';
-import { useOperationStore } from '../../store/operationStore';
-import { useTokenStore } from '../../store/tokenStore';
+
 import Intl from '@/i18n/i18n';
+import {
+  useGlobalStatusesStore,
+  useOperationStore,
+  useTokenStore,
+} from '@/store';
 import { getAmountToReceive } from '@/utils/utils';
 
 export interface InputAmountProps {
@@ -20,20 +22,19 @@ export interface InputAmountProps {
 export const InputAmount = (props: InputAmountProps) => {
   const { isInput, massaTokens } = props;
   const { inputAmount, outputAmount, setAmounts, isMassaToEvm } =
-    useOperationStore.getState();
+    useOperationStore();
 
   const { serviceFee } = useServiceFee();
   const { selectedToken } = useTokenStore();
   const { tokenBalance: _tokenBalanceEVM, isFetched: isBalanceFetched } =
     useEvmToken();
   const { setAmountError, amountError } = useGlobalStatusesStore();
   // Price are fetched onchain from Dusa. If massa network is not valid, we don't show the price
-  const isValidMassaNetwork = useMassaNetworkValidation();
 
   const massaToEvm = isMassaToEvm();
   const decimals = selectedToken?.decimals;
 
-  const { usdValue } = useUsdValue(
+  const { usdValue, isFetching: isFetchingUsdAmount } = useUsdValue(
     isInput ? inputAmount : outputAmount,
     selectedToken,
   );
@@ -86,37 +87,35 @@ export const InputAmount = (props: InputAmountProps) => {
 
   return (
     <div className="flex flex-col w-full gap-4">
-      <div className="flex justify-between default-input border-0 pl-2 pr-10 mt-2 mb-1">
-        <div className="flex flex-col items-left gap-2 mt-4">
-          <div className="w-full">
-            <Money
-              disable={!isInput}
-              name={isInput ? 'amount' : 'receive'}
-              value={displayedAmount}
-              onValueChange={(o) => changeAmount(o.value)}
-              placeholder={Intl.t(
-                isInput
-                  ? 'index.input.placeholder.amount'
-                  : 'index.input.placeholder.receive',
-              )}
-              suffix=""
-              decimalScale={decimals}
-              error={isInput ? amountError : ''}
-            />
-          </div>
-          {isValidMassaNetwork && !!inputAmount && !!usdValue && (
-            <div className="pl-4 mb-1">USD {usdValue}</div>
+      <div className="flex justify-between default-input px-2 border-0 ">
+        <div className="flex flex-col h-full w-full gap-2 p-2 ">
+          <Money
+            customClass="h-14"
+            disable={!isInput}
+            name={isInput ? 'amount' : 'receive'}
+            value={displayedAmount}
+            onValueChange={(o) => changeAmount(o.value)}
+            placeholder={Intl.t(
+              isInput
+                ? 'index.input.placeholder.amount'
+                : 'index.input.placeholder.receive',
+            )}
+            suffix=""
+            decimalScale={decimals}
+            error={isInput ? amountError : ''}
+          />
+
+          {isFetchingUsdAmount ? (
+            <FetchingLine width={20} />
+          ) : (
+            !!usdValue && (
+              <div className="mas-caption ml-1">{`$ ${usdValue}`}</div>
+            )
           )}
         </div>
-        <div className="flex flex-col items-center gap-2 mt-2">
-          <div className="w-full">
-            <TokenOptions nativeToken={massaTokens} />
-          </div>
-          {isInput && (
-            <div className="w-full mb-2">
-              <TokenBalance />
-            </div>
-          )}
+        <div className="flex flex-col items-end h-full gap-2 p-2 ">
+          <TokenOptions nativeToken={massaTokens} />
+          {isInput && <TokenBalance />}
         </div>
       </div>
       <div className="flex justify-end gap-4">

diff --git a/src/custom/usdPrice/useFetchPrice.ts b/src/custom/usdPrice/useFetchPrice.ts
@@ -15,23 +15,42 @@ import { formatAmount } from '@massalabs/react-ui-kit';
 import { useDebounceValue } from 'usehooks-ts';
 import { useBridgeModeStore } from '../../store/modeStore';
 import { useAccountStore } from '../../store/store';
-import { IToken } from '../../store/tokenStore';
+import { useMassaNetworkValidation } from '../bridge/useNetworkValidation';
+import { IToken } from '@/store/tokenStore';
 
-export const useUsdValue = (amount?: bigint, token?: IToken) => {
-  const { isMainnet } = useBridgeModeStore();
-  const [usdValue, setUsdValue] = useState<string>();
-  const [debouncedAmount] = useDebounceValue(amount, 300);
+export function useUsdValue(
+  inputAmount: bigint | undefined,
+  selectedToken: IToken | undefined,
+) {
+  const { isMainnet, currentMode } = useBridgeModeStore();
+
+  const [debouncedAmount] = useDebounceValue(inputAmount, 300);
   const { massaClient } = useAccountStore();
 
+  const isValidMassaNetwork = useMassaNetworkValidation();
+  const [usdValue, setUsdValue] = useState<string>();
+  const [isFetching, setIsFetching] = useState<boolean>(false);
+
   const getUsdValue = useCallback(async () => {
-    if (!token || !debouncedAmount || !massaClient) {
+    if (
+      !selectedToken ||
+      !debouncedAmount ||
+      !massaClient ||
+      !inputAmount ||
+      !isValidMassaNetwork
+    ) {
+      setIsFetching(false);
+      setUsdValue(undefined);
       return;
     }
-
-    const symbol = token.symbolEVM.toUpperCase();
+    setIsFetching(true);
+    const symbol = selectedToken.symbolEVM.toUpperCase();
     let outputAmount: string;
     if (symbol.includes('USD') || symbol.includes('DAI')) {
-      outputAmount = formatAmount(debouncedAmount, token.decimals).preview;
+      outputAmount = formatAmount(
+        debouncedAmount,
+        selectedToken.decimals,
+      ).preview;
     } else {
       const chainId = isMainnet() ? ChainId.MAINNET : ChainId.BUILDNET;
       const USDC = _USDC[chainId];
@@ -70,27 +89,33 @@ export const useUsdValue = (amount?: bigint, token?: IToken) => {
       );
 
       // chooses the best trade
-      const bestTrade = TradeV2.chooseBestTrade(trades, true);
+      let bestTrade;
+
+      bestTrade = TradeV2.chooseBestTrade(trades, true);
 
       const quoter = new IQuoter(LB_QUOTER_ADDRESS[chainId], massaClient);
 
       const prices = await quoter.findBestPathFromAmountIn(
         bestTrade.route.pathToStrArr(),
         debouncedAmount.toString(),
       );
+
       // get the output amount without slippage
       outputAmount = formatAmount(
-        prices.virtualAmountsWithoutSlippage[2],
+        prices.virtualAmountsWithoutSlippage[
+          prices.virtualAmountsWithoutSlippage.length - 1
+        ],
         outputToken.decimals,
       ).preview;
     }
 
     setUsdValue(outputAmount);
-  }, [debouncedAmount, token, massaClient, isMainnet]);
+    setIsFetching(false);
+  }, [debouncedAmount, massaClient, isMainnet, inputAmount]);
 
   useEffect(() => {
     getUsdValue();
-  }, [getUsdValue]);
+  }, [getUsdValue, currentMode, selectedToken]);
 
-  return { usdValue };
-};
+  return { usdValue, isFetching };
+}
diff --git a/src/pages/IndexPage/Layouts/BridgeRedeemLayout/BoxLayoutComponents/TokenBalance.tsx b/src/pages/IndexPage/Layouts/BridgeRedeemLayout/BoxLayoutComponents/TokenBalance.tsx
@@ -35,7 +35,7 @@ export function TokenBalance() {
         {!isFetched || !selectedToken || amount === undefined ? (
           <FetchingLine />
         ) : (
-          <div className="flex gap-2 items-center">
+          <div className="flex gap-2 items-center mas-caption">
             {preview}
             <Tooltip body={full + ' ' + symbol ?? ''} />
           </div>

diff --git a/src/store/helpers/index.ts b/src/store/helpers/index.ts
@@ -0,0 +1,2 @@
+export * from './massaProviders';
+export * from './tokenSymbol';
diff --git a/src/store/index.ts b/src/store/index.ts
@@ -0,0 +1,8 @@
+export * from './accountStore';
+export * from './configStore';
+export * from './globalStatusesStore';
+export * from './modeStore';
+export * from './operationStore';
+export * from './store';
+export * from './tokenStore';
+export * from './helpers/index';