Some fixes

pendulum-chain · Jun 14, 2024 · 9ba0981 · 9ba0981
1 parent 1cd589c
commit 9ba0981
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 15 deletions.
diff --git a/src/components/InputKeys/From.tsx b/src/components/InputKeys/From.tsx
@@ -16,7 +16,7 @@ interface FromProps<FormFieldValues extends FieldValues, TFieldName extends Fiel
   inputHasError: boolean;
   fromFormFieldName: TFieldName;
   form: UseFormReturn<FormFieldValues>;
-  fromTokenBalances: { [key: string]: BalanceInfo };
+  tokenBalances: { [key: string]: BalanceInfo };
   offrampStarted: boolean;
 }
 
@@ -27,11 +27,11 @@ export function From<FormFieldValues extends FieldValues, TFieldName extends Fie
   inputHasError,
   fromFormFieldName,
   form,
-  fromTokenBalances,
+  tokenBalances,
   offrampStarted,
 }: FromProps<FormFieldValues, TFieldName>) {
   const { setValue } = useFormContext<SwapFormValues>();
-  const fromTokenBalance = tokenId ? fromTokenBalances[tokenId] : undefined;
+  const fromTokenBalance = tokenId ? tokenBalances[tokenId] : undefined;
 
   return (
     <div

diff --git a/src/components/InputKeys/To.tsx b/src/components/InputKeys/To.tsx
@@ -5,7 +5,7 @@ import { useFormContext } from 'react-hook-form';
 import Big from 'big.js';
 
 import pendulumIcon from '../../assets/pendulum-icon.svg';
-import { NumberLoader } from '../Nabla/TokenBalance';
+import { NumberLoader, TokenBalance } from '../Nabla/TokenBalance';
 import { Skeleton } from '../Skeleton';
 import { SwapFormValues } from '../Nabla/schema';
 import { UseTokenOutAmountResult } from '../../hooks/nabla/useTokenAmountOut';
@@ -20,7 +20,7 @@ export interface ToProps {
   toToken: TokenDetails | undefined;
   toAmountQuote: UseTokenOutAmountResult;
   fromAmount: Big | undefined;
-  fromTokenBalances: { [key: string]: BalanceInfo };
+  tokenBalances: { [key: string]: BalanceInfo };
 }
 
 export function To({
@@ -30,10 +30,9 @@ export function To({
   onOpenSelector,
   toAmountQuote,
   fromAmount,
-  fromTokenBalances,
+  tokenBalances,
 }: ToProps): JSX.Element | null {
-  const toTokenBalance =
-    fromTokenBalances && tokenId && fromTokenBalances[tokenId] ? fromTokenBalances[tokenId].approximateNumber : 0;
+  const toTokenBalance = tokenBalances && tokenId ? tokenBalances[tokenId] : undefined;
 
   // replace with use state
   const [isOpen, { toggle }] = useBoolean(true);
@@ -84,7 +83,10 @@ export function To({
       </div>
       <div className="flex justify-between items-center mt-1 dark:text-neutral-300 text-neutral-500">
         {/* <div className="text-sm mt-px">{toToken ? <NablaTokenPrice address={toToken.id} fallback="$ -" /> : '$ -'}</div> */}
-        <div className="flex gap-1 text-sm">Your balance: {toTokenBalance}</div>
+        <div className="flex gap-1 text-sm">
+          Your balance:{' '}
+          {toTokenBalance ? <TokenBalance query={toTokenBalance} symbol={toToken?.assetCode}></TokenBalance> : '0'}
+        </div>
       </div>
       <div className="mt-4 h-px -mx-4 bg-[rgba(0,0,0,0.15)]" />
       <div

diff --git a/src/components/InputKeys/index.tsx b/src/components/InputKeys/index.tsx
@@ -137,6 +137,7 @@ const InputBox: React.FC<InputBoxProps> = ({ onSubmit, dAppName }) => {
     }
 
     // check balance of the asset used to offramp directly or to pay for the swap
+    console.log('balances', balances);
     if (balances[from].preciseBigDecimal.lt(fromAmount)) {
       alert(
         `Insufficient balance to offramp. Current balance is ${
@@ -253,13 +254,13 @@ const InputBox: React.FC<InputBoxProps> = ({ onSubmit, dAppName }) => {
                       inputHasError={inputHasErrors}
                       form={form}
                       fromFormFieldName="fromAmount"
-                      fromTokenBalances={balances}
+                      tokenBalances={balances}
                     />
                     <div>{formErrorMessage !== undefined && <p className="text-red-600">{formErrorMessage}</p>}</div>
                     <div className="separator mt-10 mb-10"></div>
                     <To
                       tokenId={to}
-                      fromTokenBalances={balances}
+                      tokenBalances={balances}
                       toToken={toToken}
                       fromToken={fromToken}
                       toAmountQuote={
@@ -287,7 +288,7 @@ const InputBox: React.FC<InputBoxProps> = ({ onSubmit, dAppName }) => {
                       inputHasError={inputHasErrors}
                       form={form}
                       fromFormFieldName="fromAmount"
-                      fromTokenBalances={balances}
+                      tokenBalances={balances}
                     />
                   </Card>
                 )}

diff --git a/src/components/Nabla/BalanceState.tsx b/src/components/Nabla/BalanceState.tsx
@@ -38,7 +38,7 @@ export const useAccountBalance = (address?: string): UseAccountBalanceResponse =
 
       try {
         for (const [key, config] of Object.entries(TOKEN_CONFIG)) {
-          const response = (await apiComponents.api.query.tokens.accounts(address, config.currencyId)).toHuman() as any;
+          const response = (await apiComponents.api.query.tokens.accounts(address, config.currencyId)) as any;
 
           const rawBalance = response?.free || '0';
           const contractBalance = parseContractBalanceResponse(TOKEN_CONFIG[key].decimals, rawBalance);

diff --git a/src/hooks/nabla/useTokenAmountOut.ts b/src/hooks/nabla/useTokenAmountOut.ts
@@ -1,7 +1,12 @@
 import BigNumber from 'big.js';
 import { activeOptions, cacheKeys } from '../../constants/cache';
 import { routerAbi } from '../../contracts/Router';
-import { ContractBalance, multiplyByPowerOfTen, parseContractBalanceResponse } from '../../helpers/contracts';
+import {
+  ContractBalance,
+  multiplyByPowerOfTen,
+  parseContractBalanceResponse,
+  stringifyBigWithSignificantDecimals,
+} from '../../helpers/contracts';
 import { NABLA_ROUTER } from '../../constants/constants';
 import { useContractRead } from './useContractRead';
 import { UseQueryResult } from '@tanstack/react-query';
@@ -106,7 +111,10 @@ export function useTokenOutAmount<FormFieldValues extends FieldValues>({
 
         return {
           amountOut,
-          effectiveExchangeRate: amountOut.preciseBigDecimal.div(debouncedAmountBigDecimal).toString(),
+          effectiveExchangeRate: stringifyBigWithSignificantDecimals(
+            amountOut.preciseBigDecimal.div(debouncedAmountBigDecimal),
+            4,
+          ),
           swapFee,
         };
       },