fix CL amount input

osmosis-labs · Jun 6, 2024 · 47a4ee7 · 47a4ee7
1 parent 340c24a
commit 47a4ee7
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 26 deletions.
diff --git a/packages/trpc/src/balances.ts b/packages/trpc/src/balances.ts
@@ -1,4 +1,10 @@
-import { queryBalances } from "@osmosis-labs/server";
+import { CoinPretty } from "@keplr-wallet/unit";
+import {
+  getAsset,
+  getShareDenomPoolId,
+  makeGammShareCurrency,
+  queryBalances,
+} from "@osmosis-labs/server";
 import z from "zod";
 
 import { createTRPCRouter, publicProcedure } from "./api";
@@ -12,6 +18,26 @@ export const balancesRouter = createTRPCRouter({
       queryBalances({
         ...input,
         ...ctx,
-      })
+      }).then((res) =>
+        res.balances.map(({ denom, amount }) =>
+          denom.startsWith("gamm")
+            ? {
+                denom,
+                amount,
+                coin: new CoinPretty(
+                  makeGammShareCurrency(getShareDenomPoolId(denom)),
+                  amount
+                ),
+              }
+            : {
+                denom,
+                amount,
+                coin: new CoinPretty(
+                  getAsset({ ...ctx, anyDenom: denom }),
+                  amount
+                ),
+              }
+        )
+      )
     ),
 });
diff --git a/packages/web/components/cl-deposit-input-group/index.tsx b/packages/web/components/cl-deposit-input-group/index.tsx
@@ -3,16 +3,17 @@ import { CoinPretty, Dec, DecUtils, RatePretty } from "@keplr-wallet/unit";
 import classNames from "classnames";
 import { observer } from "mobx-react-lite";
 import Image from "next/image";
-import React, { FunctionComponent, useCallback, useMemo } from "react";
+import React, { FunctionComponent, useMemo } from "react";
 
 import { InputBox } from "~/components/input";
 import { useTranslation } from "~/hooks";
 import { useCoinFiatValue } from "~/hooks/queries/assets/use-coin-fiat-value";
 import { useStore } from "~/stores";
+import { api } from "~/utils/trpc";
 
 export const DepositAmountGroup: FunctionComponent<{
   currency?: Currency;
-  onUpdate: (amount: number) => void;
+  onUpdate: (amount: string) => void;
   onMax: () => void;
   currentValue: string;
   percentage: RatePretty;
@@ -32,10 +33,9 @@ export const DepositAmountGroup: FunctionComponent<{
     priceInputClass,
     outOfRangeClassName,
   }) => {
-    const { chainStore, queriesStore, accountStore } = useStore();
+    const { accountStore } = useStore();
     const { t } = useTranslation();
-    const { chainId } = chainStore.osmosis;
-    const account = accountStore.getWallet(chainId);
+    const account = accountStore.getWallet(accountStore.osmosisChainId);
     const address = account?.address ?? "";
 
     const { fiatValue: currentValuePrice } = useCoinFiatValue(
@@ -53,19 +53,14 @@ export const DepositAmountGroup: FunctionComponent<{
       )
     );
 
-    const walletBalance = currency
-      ? queriesStore
-          .get(chainId)
-          .queryBalances.getQueryBech32Address(address)
-          .getBalanceFromCurrency(currency)
-      : null;
-
-    const updateValue = useCallback(
-      (val: string) => {
-        const newVal = Number(val);
-        onUpdate(newVal);
-      },
-      [onUpdate]
+    const { data: walletBalance } = api.local.balances.getUserBalances.useQuery(
+      { bech32Address: address },
+      {
+        enabled: !!account?.address,
+        select: (balances) =>
+          balances.find(({ denom }) => denom === currency?.coinMinimalDenom)
+            ?.coin,
+      }
     );
 
     if (outOfRange) {
@@ -139,7 +134,7 @@ export const DepositAmountGroup: FunctionComponent<{
                 inputClassName="!leading-4"
                 type="number"
                 currentValue={currentValue}
-                onInput={updateValue}
+                onInput={onUpdate}
                 rightEntry
               />
               <div className="caption pr-3 text-osmoverse-400">

diff --git a/packages/web/components/complex/add-conc-liquidity.tsx b/packages/web/components/complex/add-conc-liquidity.tsx
@@ -585,7 +585,7 @@ const AddConcLiqView: FunctionComponent<
             onUpdate={useCallback(
               (amount) => {
                 setAnchorAsset("base");
-                baseDepositAmountIn.setAmount(amount.toString());
+                baseDepositAmountIn.setAmount(amount);
               },
               [baseDepositAmountIn, setAnchorAsset]
             )}
@@ -601,7 +601,7 @@ const AddConcLiqView: FunctionComponent<
             onUpdate={useCallback(
               (amount) => {
                 setAnchorAsset("quote");
-                quoteDepositAmountIn.setAmount(amount.toString());
+                quoteDepositAmountIn.setAmount(amount);
               },
               [quoteDepositAmountIn, setAnchorAsset]
             )}

diff --git a/packages/web/hooks/input/use-amount-input.ts b/packages/web/hooks/input/use-amount-input.ts
@@ -45,7 +45,7 @@ export function useAmountInput({
       },
       { enabled: Boolean(account?.address) }
     );
-  const rawCurrencyBalance = balances?.balances.find(
+  const rawCurrencyBalance = balances?.find(
     (bal) => bal.denom === currency?.coinMinimalDenom
   )?.amount;
   // manage amounts, with ability to set fraction of the amount

diff --git a/packages/web/modals/increase-concentrated-liquidity.tsx b/packages/web/modals/increase-concentrated-liquidity.tsx
@@ -239,7 +239,7 @@ export const IncreaseConcentratedLiquidityModal: FunctionComponent<
             onUpdate={useCallback(
               (amount) => {
                 config.setAnchorAsset("base");
-                config.baseDepositAmountIn.setAmount(amount.toString());
+                config.baseDepositAmountIn.setAmount(amount);
               },
               [config]
             )}
@@ -256,7 +256,7 @@ export const IncreaseConcentratedLiquidityModal: FunctionComponent<
             onUpdate={useCallback(
               (amount) => {
                 config.setAnchorAsset("quote");
-                config.quoteDepositAmountIn.setAmount(amount.toString());
+                config.quoteDepositAmountIn.setAmount(amount);
               },
               [config]
             )}