From 47a4ee7a4226d6bc33f48178ce79b09b0e8c11f5 Mon Sep 17 00:00:00 2001 From: Jon Ator Date: Thu, 6 Jun 2024 13:41:27 -0500 Subject: [PATCH] fix CL amount input --- packages/trpc/src/balances.ts | 30 +++++++++++++++-- .../cl-deposit-input-group/index.tsx | 33 ++++++++----------- .../components/complex/add-conc-liquidity.tsx | 4 +-- packages/web/hooks/input/use-amount-input.ts | 2 +- .../increase-concentrated-liquidity.tsx | 4 +-- 5 files changed, 47 insertions(+), 26 deletions(-) diff --git a/packages/trpc/src/balances.ts b/packages/trpc/src/balances.ts index ad3d699cb0..2193bb207b 100644 --- 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 index 2f2fdfcd2d..b805d9c5e2 100644 --- 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 />
diff --git a/packages/web/components/complex/add-conc-liquidity.tsx b/packages/web/components/complex/add-conc-liquidity.tsx index 9a191293f8..5b519d2ca7 100644 --- 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 index ad7e68a3a8..2e6e4414c9 100644 --- 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 index 05855ebe48..f57b4b4fe6 100644 --- 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] )}