From 2a6685ae76ebd4cc44c4c4ba4c80f94ff0418991 Mon Sep 17 00:00:00 2001 From: Artem Date: Fri, 23 Dec 2022 11:22:27 +0200 Subject: [PATCH 01/45] QUIPU-676 Add UI add/remove form --- .../components/forms/v3-add-liq-form/index.ts | 1 + .../v3-add-liq-form/use-v3-add-liq-form.vm.ts | 14 ++++++ .../v3-add-liq-form.module.scss | 4 ++ .../forms/v3-add-liq-form/v3-add-liq-form.tsx | 10 ++++ .../v3-add-liq-form/v3-add-liq-form.view.tsx | 38 +++++++++++++++ .../forms/v3-remove-liq-form/index.ts | 1 + .../use-v3-remove-liq-form.vm.ts | 27 +++++++++++ .../v3-remove-liq-form.module.scss | 4 ++ .../v3-remove-liq-form/v3-remove-liq-form.tsx | 10 ++++ .../v3-remove-liq-form.view.tsx | 38 +++++++++++++++ .../liquidity-v3-form-tabs-card/index.ts | 1 + .../liquidity-v3-form-tabs-card.tsx | 46 +++++++++++++++++++ .../use-liquidity-v3-form-tabs-card.vm.ts | 43 +++++++++++++++++ .../pages/v3-item-page/use-v3-item-page.vm.ts | 11 ++++- .../pages/v3-item-page/v3-item-page.tsx | 8 +++- 15 files changed, 253 insertions(+), 3 deletions(-) create mode 100644 src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/index.ts create mode 100644 src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/use-v3-add-liq-form.vm.ts create mode 100644 src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/v3-add-liq-form.module.scss create mode 100644 src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/v3-add-liq-form.tsx create mode 100644 src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/v3-add-liq-form.view.tsx create mode 100644 src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/index.ts create mode 100644 src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts create mode 100644 src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/v3-remove-liq-form.module.scss create mode 100644 src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/v3-remove-liq-form.tsx create mode 100644 src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/v3-remove-liq-form.view.tsx create mode 100644 src/modules/liquidity/pages/v3-item-page/components/liquidity-v3-form-tabs-card/index.ts create mode 100644 src/modules/liquidity/pages/v3-item-page/components/liquidity-v3-form-tabs-card/liquidity-v3-form-tabs-card.tsx create mode 100644 src/modules/liquidity/pages/v3-item-page/components/liquidity-v3-form-tabs-card/use-liquidity-v3-form-tabs-card.vm.ts diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/index.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/index.ts new file mode 100644 index 000000000..d33450783 --- /dev/null +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/index.ts @@ -0,0 +1 @@ +export * from './v3-add-liq-form'; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/use-v3-add-liq-form.vm.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/use-v3-add-liq-form.vm.ts new file mode 100644 index 000000000..04a293c02 --- /dev/null +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/use-v3-add-liq-form.vm.ts @@ -0,0 +1,14 @@ +import { useLiquidityV3ItemTokens } from '@modules/liquidity/hooks'; + +/* eslint-disable no-console */ +export const useV3AddLiqFormViewModel = () => { + const { tokenX, tokenY } = useLiquidityV3ItemTokens(); + + return { + data: [ + { value: '', label: 'Input', tokens: tokenX, onInputChange: () => console.log('click') }, + { value: '', label: 'Input', tokens: tokenY, onInputChange: () => console.log('click') } + ], + onSubmit: () => console.log('click') + }; +}; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/v3-add-liq-form.module.scss b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/v3-add-liq-form.module.scss new file mode 100644 index 000000000..90a730dc2 --- /dev/null +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/v3-add-liq-form.module.scss @@ -0,0 +1,4 @@ +.svg { + display: block; + margin: 8px auto; +} diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/v3-add-liq-form.tsx b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/v3-add-liq-form.tsx new file mode 100644 index 000000000..b0d40e994 --- /dev/null +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/v3-add-liq-form.tsx @@ -0,0 +1,10 @@ +import { FC } from 'react'; + +import { useV3AddLiqFormViewModel } from './use-v3-add-liq-form.vm'; +import { V3AddLiqFormView } from './v3-add-liq-form.view'; + +export const V3AddLiqForm: FC = () => { + const params = useV3AddLiqFormViewModel(); + + return ; +}; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/v3-add-liq-form.view.tsx b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/v3-add-liq-form.view.tsx new file mode 100644 index 000000000..22a464faa --- /dev/null +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/v3-add-liq-form.view.tsx @@ -0,0 +1,38 @@ +import { FC } from 'react'; + +import { Button, ConnectWalletOrDoSomething, Iterator, TokenInput, TokenInputProps } from '@shared/components'; +import { Plus } from '@shared/svg'; +import stylesCommonContainer from '@styles/CommonContainer.module.scss'; +import { useTranslation } from '@translation'; + +import styles from './v3-add-liq-form.module.scss'; + +interface Props { + data: TokenInputProps[]; + onSubmit: () => void; +} + +export const V3AddLiqFormView: FC = ({ data, onSubmit }) => { + const { t } = useTranslation(); + + return ( + <> +
+ } /> +
+ + + +
+ + + ); +}; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/index.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/index.ts new file mode 100644 index 000000000..0b3a29f67 --- /dev/null +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/index.ts @@ -0,0 +1 @@ +export * from './v3-remove-liq-form'; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts new file mode 100644 index 000000000..99da76a68 --- /dev/null +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts @@ -0,0 +1,27 @@ +import { useLiquidityV3ItemTokens } from '@modules/liquidity/hooks'; + +/* eslint-disable no-console */ +export const useV3RemoveLiqFormViewModel = () => { + const { tokenX, tokenY } = useLiquidityV3ItemTokens(); + + return { + data: [ + { value: '', label: 'Amount', tokens: [tokenX, tokenY], onInputChange: () => console.log('click') }, + { + value: '', + label: 'Output', + tokens: tokenX, + hiddenPercentSelector: true, + onInputChange: () => console.log('click') + }, + { + value: '', + label: 'Output', + tokens: tokenY, + hiddenPercentSelector: true, + onInputChange: () => console.log('click') + } + ], + onSubmit: () => console.log('click') + }; +}; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/v3-remove-liq-form.module.scss b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/v3-remove-liq-form.module.scss new file mode 100644 index 000000000..90a730dc2 --- /dev/null +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/v3-remove-liq-form.module.scss @@ -0,0 +1,4 @@ +.svg { + display: block; + margin: 8px auto; +} diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/v3-remove-liq-form.tsx b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/v3-remove-liq-form.tsx new file mode 100644 index 000000000..09976f6c5 --- /dev/null +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/v3-remove-liq-form.tsx @@ -0,0 +1,10 @@ +import { FC } from 'react'; + +import { useV3RemoveLiqFormViewModel } from './use-v3-remove-liq-form.vm'; +import { V3RemoveLiqFormView } from './v3-remove-liq-form.view'; + +export const V3RemoveLiqForm: FC = () => { + const params = useV3RemoveLiqFormViewModel(); + + return ; +}; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/v3-remove-liq-form.view.tsx b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/v3-remove-liq-form.view.tsx new file mode 100644 index 000000000..42fa6da7d --- /dev/null +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/v3-remove-liq-form.view.tsx @@ -0,0 +1,38 @@ +import { FC } from 'react'; + +import { Button, ConnectWalletOrDoSomething, Iterator, TokenInput, TokenInputProps } from '@shared/components'; +import { Plus } from '@shared/svg'; +import stylesCommonContainer from '@styles/CommonContainer.module.scss'; +import { useTranslation } from '@translation'; + +import styles from './v3-remove-liq-form.module.scss'; + +interface Props { + data: TokenInputProps[]; + onSubmit: () => void; +} + +export const V3RemoveLiqFormView: FC = ({ data, onSubmit }) => { + const { t } = useTranslation(); + + return ( + <> +
+ } /> +
+ + + +
+ + + ); +}; diff --git a/src/modules/liquidity/pages/v3-item-page/components/liquidity-v3-form-tabs-card/index.ts b/src/modules/liquidity/pages/v3-item-page/components/liquidity-v3-form-tabs-card/index.ts new file mode 100644 index 000000000..ead38bf33 --- /dev/null +++ b/src/modules/liquidity/pages/v3-item-page/components/liquidity-v3-form-tabs-card/index.ts @@ -0,0 +1 @@ +export * from './liquidity-v3-form-tabs-card'; diff --git a/src/modules/liquidity/pages/v3-item-page/components/liquidity-v3-form-tabs-card/liquidity-v3-form-tabs-card.tsx b/src/modules/liquidity/pages/v3-item-page/components/liquidity-v3-form-tabs-card/liquidity-v3-form-tabs-card.tsx new file mode 100644 index 000000000..47b42afcb --- /dev/null +++ b/src/modules/liquidity/pages/v3-item-page/components/liquidity-v3-form-tabs-card/liquidity-v3-form-tabs-card.tsx @@ -0,0 +1,46 @@ +/* eslint-disable no-console */ +import { observer } from 'mobx-react-lite'; + +import { FormHeader } from '@modules/liquidity/components'; +import { LiquidityTabs } from '@modules/liquidity/liquidity-routes.enum'; +import { Card, SettingsButton, Skeleton, Tabs } from '@shared/components'; +import { CFC } from '@shared/types'; +import styles from '@styles/CommonContainer.module.scss'; + +import { useLiquidityV3FromTabsCard } from './use-liquidity-v3-form-tabs-card.vm'; + +interface Props { + tabActiveId: LiquidityTabs; +} + +export const LiquidityV3FormTabsCard: CFC = observer(({ tabActiveId, children }) => { + const { isLoading, changeTabHandle, TabsContent, backHref } = useLiquidityV3FromTabsCard(); + + if (isLoading) { + return ; + } + + return ( + + }} + subheader={{ + content: ( + changeTabHandle(id as LiquidityTabs)} + className={styles.tabs} + /> + ), + button: , + className: styles.header + }} + contentClassName={styles.content} + data-test-id="liquidityFromTabsCard" + > + {children} + + ); +}); diff --git a/src/modules/liquidity/pages/v3-item-page/components/liquidity-v3-form-tabs-card/use-liquidity-v3-form-tabs-card.vm.ts b/src/modules/liquidity/pages/v3-item-page/components/liquidity-v3-form-tabs-card/use-liquidity-v3-form-tabs-card.vm.ts new file mode 100644 index 000000000..c6a7c2a8b --- /dev/null +++ b/src/modules/liquidity/pages/v3-item-page/components/liquidity-v3-form-tabs-card/use-liquidity-v3-form-tabs-card.vm.ts @@ -0,0 +1,43 @@ +import { useCallback } from 'react'; + +import { useNavigate } from 'react-router-dom'; + +import { AppRootRoutes } from '@app.router'; +import { useLiquidityV3PoolStore, useLiquidityV3PositionStore } from '@modules/liquidity/hooks'; +import { LiquidityRoutes, LiquidityTabs } from '@modules/liquidity/liquidity-routes.enum'; +import { i18n } from '@translation'; + +const TabsContent = [ + { + id: LiquidityTabs.add, + label: i18n.t('common|Add') + }, + { + id: LiquidityTabs.remove, + label: i18n.t('common|Remove') + } +]; + +export const useLiquidityV3FromTabsCard = () => { + const { positionId } = useLiquidityV3PositionStore(); + const { poolId } = useLiquidityV3PoolStore(); + const navigate = useNavigate(); + + const backHref = `${AppRootRoutes.Liquidity}${LiquidityRoutes.v3}/${poolId}`; + + const changeTabHandle = useCallback( + (tab: LiquidityTabs) => { + const url = `${AppRootRoutes.Liquidity}${LiquidityRoutes.v3}/${poolId}/${tab}/${positionId}`; + + navigate(url); + }, + [navigate, positionId, poolId] + ); + + return { + TabsContent, + isLoading: false, + changeTabHandle, + backHref + }; +}; diff --git a/src/modules/liquidity/pages/v3-item-page/use-v3-item-page.vm.ts b/src/modules/liquidity/pages/v3-item-page/use-v3-item-page.vm.ts index cc66a26b1..9cb9d9b5c 100644 --- a/src/modules/liquidity/pages/v3-item-page/use-v3-item-page.vm.ts +++ b/src/modules/liquidity/pages/v3-item-page/use-v3-item-page.vm.ts @@ -1,12 +1,15 @@ import { useEffect } from 'react'; +import { useParams } from 'react-router-dom'; + import { useLiquidityV3PoolStore, useLiquidityV3ItemTokens, useLiquidityV3PositionsStore } from '@modules/liquidity/hooks'; import { useGetLiquidityV3ItemBalances } from '@modules/liquidity/hooks/loaders/use-get-liquidity-v3-item-balances'; -import { isNull } from '@shared/helpers'; +import { LiquidityTabs } from '@modules/liquidity/liquidity-routes.enum'; +import { isEqual, isNull } from '@shared/helpers'; import { useGetLiquidityV3Pool } from '../../hooks/loaders/use-get-liquidity-v3-pool'; @@ -16,17 +19,21 @@ export const useV3ItemPageViewModel = () => { const v3PositionsStore = useLiquidityV3PositionsStore(); const { getLiquidityV3Pool } = useGetLiquidityV3Pool(); const { tokenX, tokenY } = useLiquidityV3ItemTokens(); + const { tab } = useParams(); const poolId = v3PositionsStore.poolId; const isLoading = v3PoolStore.itemIsLoading || isNull(tokenX) || isNull(tokenY); const error = v3PoolStore.error ?? v3PoolStore.contractBalanceStore.error; + const isAddLiqForm = isEqual(tab, LiquidityTabs.add); + const tabId = (tab as LiquidityTabs) || LiquidityTabs.add; + useEffect(() => { void getLiquidityV3Pool(); void getLiquidityV3ItemBalances(); void v3PositionsStore.positionsStore.load(); }, [getLiquidityV3ItemBalances, getLiquidityV3Pool, v3PositionsStore.positionsStore, poolId]); - return { isLoading, error }; + return { isLoading, error, isAddLiqForm, tabId }; }; diff --git a/src/modules/liquidity/pages/v3-item-page/v3-item-page.tsx b/src/modules/liquidity/pages/v3-item-page/v3-item-page.tsx index 92ac18b82..2d0958199 100644 --- a/src/modules/liquidity/pages/v3-item-page/v3-item-page.tsx +++ b/src/modules/liquidity/pages/v3-item-page/v3-item-page.tsx @@ -7,12 +7,15 @@ import { Skeleton, StateWrapper, StickyBlock } from '@shared/components'; import { useTranslation } from '@translation'; import { PageTitleContainer, PositionDetails, PositionFeesList } from './components'; +import { V3AddLiqForm } from './components/forms/v3-add-liq-form'; +import { V3RemoveLiqForm } from './components/forms/v3-remove-liq-form'; +import { LiquidityV3FormTabsCard } from './components/liquidity-v3-form-tabs-card'; import { useV3ItemPageViewModel } from './use-v3-item-page.vm'; import styles from './v3-item-page.module.scss'; export const V3ItemPage: FC = observer(() => { const { t } = useTranslation(); - const { isLoading } = useV3ItemPageViewModel(); + const { isLoading, isAddLiqForm, tabId } = useV3ItemPageViewModel(); return ( <> @@ -24,6 +27,9 @@ export const V3ItemPage: FC = observer(() => { + + {isAddLiqForm ? : } + From 42c31460f1f876e03f094d92baaff1cd188cfbef Mon Sep 17 00:00:00 2001 From: Artem Date: Tue, 27 Dec 2022 14:37:43 +0200 Subject: [PATCH 02/45] QUIPU-676 Add validation, recalc on remove form --- .../components/forms/interface/index.ts | 1 + .../interface/v3-liquidity-form-values.ts | 21 +++ .../use-v3-add-liq-form.validation.ts | 40 ++++++ .../v3-add-liq-form/use-v3-add-liq-form.vm.ts | 61 ++++++++- .../forms/v3-add-liq-form/v3-add-liq-form.tsx | 6 +- .../use-v3-remove-liq-form.validation.ts | 21 +++ .../use-v3-remove-liq-form.vm.ts | 124 +++++++++++++++--- .../v3-remove-liq-form.view.tsx | 7 +- src/shared/helpers/get-user-balances.ts | 6 + src/shared/helpers/index.ts | 1 + src/translation/locales/en/liquidity.ts | 1 + 11 files changed, 261 insertions(+), 28 deletions(-) create mode 100644 src/modules/liquidity/pages/v3-item-page/components/forms/interface/index.ts create mode 100644 src/modules/liquidity/pages/v3-item-page/components/forms/interface/v3-liquidity-form-values.ts create mode 100644 src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/use-v3-add-liq-form.validation.ts create mode 100644 src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.validation.ts create mode 100644 src/shared/helpers/get-user-balances.ts diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/interface/index.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/interface/index.ts new file mode 100644 index 000000000..db79d056e --- /dev/null +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/interface/index.ts @@ -0,0 +1 @@ +export * from './v3-liquidity-form-values'; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/interface/v3-liquidity-form-values.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/interface/v3-liquidity-form-values.ts new file mode 100644 index 000000000..02d7d1f8a --- /dev/null +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/interface/v3-liquidity-form-values.ts @@ -0,0 +1,21 @@ +export enum V3AddTokenInput { + firstTokenInput = 'tokenInput-0', + secondTokenInput = 'tokenInput-1' +} + +export interface V3AddFormValues { + [V3AddTokenInput.firstTokenInput]: string; + [V3AddTokenInput.secondTokenInput]: string; +} + +export enum V3RemoveTokenInput { + firstTokenInput = 'tokenInput-0', + secondTokenInput = 'tokenInput-1', + thirdTokenInput = 'tokenInput-2' +} + +export interface V3RemoveFormValues { + [V3RemoveTokenInput.firstTokenInput]: string; + [V3RemoveTokenInput.secondTokenInput]: string; + [V3RemoveTokenInput.thirdTokenInput]: string; +} diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/use-v3-add-liq-form.validation.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/use-v3-add-liq-form.validation.ts new file mode 100644 index 000000000..67c1326fa --- /dev/null +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/use-v3-add-liq-form.validation.ts @@ -0,0 +1,40 @@ +import { useMemo } from 'react'; + +import BigNumber from 'bignumber.js'; +import * as yup from 'yup'; + +import { operationAmountSchema } from '@shared/helpers'; +import { Nullable, Token } from '@shared/types'; +import { NumberAsStringSchema } from '@shared/validators'; +import { useTranslation } from '@translation'; + +export const useV3AddLiqFormValidation = (userBalances: Nullable[], tokens: Array>) => { + const { t } = useTranslation(); + + return useMemo(() => { + const inputAmountSchemas = userBalances.map((balance, index) => { + const tokenMetadata = tokens[index]?.metadata; + + return operationAmountSchema( + balance, + false, + tokenMetadata?.decimals, + tokenMetadata && + t('common|tokenDecimalsOverflowError', { + tokenSymbol: tokenMetadata.symbol, + decimalPlaces: tokenMetadata.decimals + }) + ); + }); + + const shapeMap: Array<[string, NumberAsStringSchema]> = inputAmountSchemas.map((item, index) => { + return [`tokenInput-${index}`, item.required('Amount is required!')]; + }); + + const shape: Record = Object.fromEntries(shapeMap); + + return yup.object().shape({ + ...shape + }); + }, [t, tokens, userBalances]); +}; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/use-v3-add-liq-form.vm.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/use-v3-add-liq-form.vm.ts index 04a293c02..303015ec2 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/use-v3-add-liq-form.vm.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/use-v3-add-liq-form.vm.ts @@ -1,14 +1,65 @@ +import { FormikHelpers, FormikValues, useFormik } from 'formik'; + +import { FIRST_INDEX } from '@config/constants'; import { useLiquidityV3ItemTokens } from '@modules/liquidity/hooks'; +import { numberAsString, getUserBalances, isEqual } from '@shared/helpers'; +import { useTranslation } from '@translation'; + +import { V3AddFormValues, V3AddTokenInput } from '../interface'; +import { useV3AddLiqFormValidation } from './use-v3-add-liq-form.validation'; /* eslint-disable no-console */ export const useV3AddLiqFormViewModel = () => { + const { t } = useTranslation(); const { tokenX, tokenY } = useLiquidityV3ItemTokens(); + const tokens = [tokenX, tokenY]; + const userBalances = getUserBalances(tokens); + + const handleSubmit = (values: FormikValues, actions: FormikHelpers) => { + actions.setSubmitting(true); + console.log(values, actions); + actions.setSubmitting(false); + }; + + const validationSchema = useV3AddLiqFormValidation(userBalances, tokens); + + // TODO: Add calculations when it will be possible + const handleInputChange = (index: number) => { + return (inputAmount: string) => { + const { realValue } = numberAsString(inputAmount, tokens[index]?.metadata.decimals ?? 0); + + formik.setValues({ + [V3AddTokenInput.firstTokenInput]: realValue, + [V3AddTokenInput.secondTokenInput]: realValue + }); + }; + }; + + const formik = useFormik({ + validationSchema, + initialValues: { + [V3AddTokenInput.firstTokenInput]: '', + [V3AddTokenInput.secondTokenInput]: '' + }, + onSubmit: handleSubmit + }); + + const data = tokens.map((token, index) => { + const formikId = isEqual(FIRST_INDEX, index) ? V3AddTokenInput.firstTokenInput : V3AddTokenInput.secondTokenInput; + + return { + value: formik.values[formikId], + label: t('common|Input'), + error: formik.errors[formikId], + balance: userBalances[index], + tokens: token, + onInputChange: handleInputChange(index) + }; + }); + return { - data: [ - { value: '', label: 'Input', tokens: tokenX, onInputChange: () => console.log('click') }, - { value: '', label: 'Input', tokens: tokenY, onInputChange: () => console.log('click') } - ], - onSubmit: () => console.log('click') + data, + onSubmit: formik.handleSubmit }; }; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/v3-add-liq-form.tsx b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/v3-add-liq-form.tsx index b0d40e994..52ca6e562 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/v3-add-liq-form.tsx +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/v3-add-liq-form.tsx @@ -1,10 +1,12 @@ import { FC } from 'react'; +import { observer } from 'mobx-react-lite'; + import { useV3AddLiqFormViewModel } from './use-v3-add-liq-form.vm'; import { V3AddLiqFormView } from './v3-add-liq-form.view'; -export const V3AddLiqForm: FC = () => { +export const V3AddLiqForm: FC = observer(() => { const params = useV3AddLiqFormViewModel(); return ; -}; +}); diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.validation.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.validation.ts new file mode 100644 index 000000000..b893b48c5 --- /dev/null +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.validation.ts @@ -0,0 +1,21 @@ +import * as yup from 'yup'; + +import { PERCENT_100 } from '@config/constants'; +import { isExist } from '@shared/helpers'; +import { useTranslation } from '@translation'; + +import { V3RemoveTokenInput } from '../interface'; + +export const useV3RemoveLiqFormValidation = () => { + const { t } = useTranslation(); + + const schema = yup.string().test( + 'should be less then 100', + () => t('liquidity|valueShouldBeLessThen100'), + value => (isExist(value) ? Number(value) <= PERCENT_100 : true) + ); + + return yup.object().shape({ + [V3RemoveTokenInput.firstTokenInput]: schema.required('Amount is required!') + }); +}; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts index 99da76a68..d9fc1272f 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts @@ -1,27 +1,113 @@ -import { useLiquidityV3ItemTokens } from '@modules/liquidity/hooks'; +import BigNumber from 'bignumber.js'; +import { FormikHelpers, FormikValues, useFormik } from 'formik'; + +import { FIRST_INDEX, PERCENT_100, ZERO_AMOUNT } from '@config/constants'; +import { + useLiquidityV3ItemTokens, + useLiquidityV3PoolStore, + useLiquidityV3PositionStore +} from '@modules/liquidity/hooks'; +import { isEqual, isNull, numberAsString, toFixed, toReal } from '@shared/helpers'; +import { useTranslation } from '@translation'; + +import { calculateDeposit, findUserPosition } from '../../../helpers'; +import { usePositionsWithStats } from '../../../hooks'; +import { V3RemoveFormValues, V3RemoveTokenInput } from '../interface'; +import { useV3RemoveLiqFormValidation } from './use-v3-remove-liq-form.validation'; /* eslint-disable no-console */ export const useV3RemoveLiqFormViewModel = () => { + const { t } = useTranslation(); const { tokenX, tokenY } = useLiquidityV3ItemTokens(); + const { positionsWithStats } = usePositionsWithStats(); + const { positionId } = useLiquidityV3PositionStore(); + const poolStore = useLiquidityV3PoolStore(); + const item = poolStore.item; - return { - data: [ - { value: '', label: 'Amount', tokens: [tokenX, tokenY], onInputChange: () => console.log('click') }, - { - value: '', - label: 'Output', - tokens: tokenX, - hiddenPercentSelector: true, - onInputChange: () => console.log('click') - }, - { - value: '', - label: 'Output', - tokens: tokenY, - hiddenPercentSelector: true, - onInputChange: () => console.log('click') + const tokens = [tokenX, tokenY]; + const userPosition = findUserPosition(positionsWithStats, positionId); + + const handleSubmit = (values: FormikValues, actions: FormikHelpers) => { + if (Object.values(values).some(value => new BigNumber(value).isGreaterThan(ZERO_AMOUNT))) { + actions.setSubmitting(true); + console.log(values, actions); + actions.setSubmitting(false); + } + }; + + const validationSchema = useV3RemoveLiqFormValidation(); + + const handleInputChange = () => { + return (inputAmount: string) => { + const { realValue } = numberAsString(inputAmount, 0); + if (isNull(item) || isNull(userPosition) || isNull(tokenX) || isNull(tokenY) || Number(inputAmount) >= 1000) { + return; } - ], - onSubmit: () => console.log('click') + + const { x: tokenXAtomicDeposit, y: tokenYAtomicDeposit } = calculateDeposit(userPosition, item.storage); + + const realTokenXAtomicDeposit = toReal(tokenXAtomicDeposit, tokenX.metadata.decimals).decimalPlaces( + tokenX.metadata.decimals, + BigNumber.ROUND_DOWN + ); + + const realTokenYAtomicDeposit = toReal(tokenYAtomicDeposit, tokenY.metadata.decimals).decimalPlaces( + tokenY.metadata.decimals, + BigNumber.ROUND_DOWN + ); + + const calculatedTokenXDeposit = toFixed( + realTokenXAtomicDeposit.dividedBy(PERCENT_100).multipliedBy(new BigNumber(inputAmount)) + ); + const calculatedTokenYDeposit = toFixed( + realTokenYAtomicDeposit.dividedBy(PERCENT_100).multipliedBy(new BigNumber(inputAmount)) + ); + + formik.setValues({ + [V3RemoveTokenInput.firstTokenInput]: realValue, + [V3RemoveTokenInput.secondTokenInput]: calculatedTokenXDeposit, + [V3RemoveTokenInput.thirdTokenInput]: calculatedTokenYDeposit + }); + }; + }; + + const formik = useFormik({ + validationSchema, + initialValues: { + [V3RemoveTokenInput.firstTokenInput]: '', + [V3RemoveTokenInput.secondTokenInput]: '', + [V3RemoveTokenInput.thirdTokenInput]: '' + }, + onSubmit: handleSubmit + }); + + const outputData = tokens.map((token, index) => { + const formikId = isEqual(FIRST_INDEX, index) + ? V3RemoveTokenInput.secondTokenInput + : V3RemoveTokenInput.thirdTokenInput; + + return { + value: formik.values[formikId], + error: formik.errors[formikId], + label: t('common|Output'), + tokens: token, + hiddenPercentSelector: true, + disabled: true, + hiddenBalance: true, + onInputChange: handleInputChange() + }; + }); + + return { + lpData: { + value: formik.values[V3RemoveTokenInput.firstTokenInput], + error: formik.errors[V3RemoveTokenInput.firstTokenInput], + label: t('common|Amount'), + tokens: [tokenX, tokenY], + hiddenBalance: true, + onInputChange: handleInputChange() + }, + data: outputData, + onSubmit: formik.handleSubmit }; }; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/v3-remove-liq-form.view.tsx b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/v3-remove-liq-form.view.tsx index 42fa6da7d..799838281 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/v3-remove-liq-form.view.tsx +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/v3-remove-liq-form.view.tsx @@ -1,23 +1,26 @@ import { FC } from 'react'; import { Button, ConnectWalletOrDoSomething, Iterator, TokenInput, TokenInputProps } from '@shared/components'; -import { Plus } from '@shared/svg'; +import { Plus, ArrowDown } from '@shared/svg'; import stylesCommonContainer from '@styles/CommonContainer.module.scss'; import { useTranslation } from '@translation'; import styles from './v3-remove-liq-form.module.scss'; interface Props { + lpData: TokenInputProps; data: TokenInputProps[]; onSubmit: () => void; } -export const V3RemoveLiqFormView: FC = ({ data, onSubmit }) => { +export const V3RemoveLiqFormView: FC = ({ data, lpData, onSubmit }) => { const { t } = useTranslation(); return ( <>
+ + } />
diff --git a/src/shared/helpers/get-user-balances.ts b/src/shared/helpers/get-user-balances.ts new file mode 100644 index 000000000..d92ad6d5e --- /dev/null +++ b/src/shared/helpers/get-user-balances.ts @@ -0,0 +1,6 @@ +import { useTokenBalance } from '@shared/hooks'; +import { Nullable, Token } from '@shared/types'; + +export const getUserBalances = (tokens: Array>) => { + return tokens.map(token => useTokenBalance(token) ?? null); +}; diff --git a/src/shared/helpers/index.ts b/src/shared/helpers/index.ts index 571f96496..b0b15777c 100644 --- a/src/shared/helpers/index.ts +++ b/src/shared/helpers/index.ts @@ -69,3 +69,4 @@ export * from './sort'; export * from './token-matches-search'; export * from './fp'; export * from './tokens-value'; +export * from './get-user-balances'; diff --git a/src/translation/locales/en/liquidity.ts b/src/translation/locales/en/liquidity.ts index 4d995a5e1..0e66cffb5 100644 --- a/src/translation/locales/en/liquidity.ts +++ b/src/translation/locales/en/liquidity.ts @@ -107,6 +107,7 @@ export const liquidity = { position: 'Position', claimFee: 'Claim fee', claimingSuccessful: 'Claiming successful', + valueShouldBeLessThen100: 'Value should be less than 100!', // V3 v3ExchangeRatesError: "Oops… It seems we don't know the prices of the assets in the pool. So, dollar values related to this pool and positions in it won't be displayed.", From beb9f4fec33d4e0169f879344a23ebcac3b36b51 Mon Sep 17 00:00:00 2001 From: Artem Date: Wed, 28 Dec 2022 14:26:01 +0200 Subject: [PATCH 03/45] QUIPU-676 Add improvements --- src/config/constants.ts | 6 + .../calculate-v3-pool-price-decimals.ts | 5 + src/modules/liquidity/helpers/index.ts | 1 + src/modules/liquidity/hooks/helpers/index.ts | 1 + .../helpers/use-v3-pools-price-decimals.ts | 9 ++ .../forms/helpers/calculate-output.ts | 38 ++++++ .../components/forms/helpers/index.ts | 2 + .../helpers/is-one-of-the-output-not-zero.ts | 10 ++ .../components/forms/hooks/index.ts | 4 + .../hooks/use-calculate-input-amount-value.ts | 62 ++++++++++ .../forms/hooks/use-current-tick.ts | 28 +++++ .../forms/hooks/use-position-ticks.ts | 37 ++++++ .../forms/hooks/use-tick-spacing.ts | 7 ++ .../interface/v3-liquidity-form-values.ts | 12 +- .../v3-add-liq-form/use-v3-add-liq-form.vm.ts | 29 ++++- .../use-v3-remove-liq-form.validation.ts | 4 +- .../use-v3-remove-liq-form.vm.ts | 71 +++++------- .../v3-item-page/helpers/calculate-ticks.ts | 22 ++++ .../pages/v3-item-page/helpers/index.ts | 2 + .../helpers/v3-liquidity-helpers.ts | 109 ++++++++++++++++++ 20 files changed, 406 insertions(+), 53 deletions(-) create mode 100644 src/modules/liquidity/helpers/calculate-v3-pool-price-decimals.ts create mode 100644 src/modules/liquidity/hooks/helpers/use-v3-pools-price-decimals.ts create mode 100644 src/modules/liquidity/pages/v3-item-page/components/forms/helpers/calculate-output.ts create mode 100644 src/modules/liquidity/pages/v3-item-page/components/forms/helpers/index.ts create mode 100644 src/modules/liquidity/pages/v3-item-page/components/forms/helpers/is-one-of-the-output-not-zero.ts create mode 100644 src/modules/liquidity/pages/v3-item-page/components/forms/hooks/index.ts create mode 100644 src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-calculate-input-amount-value.ts create mode 100644 src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-current-tick.ts create mode 100644 src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-position-ticks.ts create mode 100644 src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-tick-spacing.ts create mode 100644 src/modules/liquidity/pages/v3-item-page/helpers/calculate-ticks.ts create mode 100644 src/modules/liquidity/pages/v3-item-page/helpers/v3-liquidity-helpers.ts diff --git a/src/config/constants.ts b/src/config/constants.ts index cc11495e2..1561ccae4 100644 --- a/src/config/constants.ts +++ b/src/config/constants.ts @@ -169,6 +169,12 @@ export const STABLESWAP_DIVIDENDS_ACCUM_PRECISION = 10_000_000_000; export const FARMING_FEES_PERCENTAGE_PRECISION = 16; //#endregion +export const DEFAULT_TICK_SPACING = 1; +export const MIN_TICK_INDEX = -1048575; +export const MAX_TICK_INDEX = 1048575; + +export const NON_INTERACTIVE_ELEMENT_TAB_INDEX = -1; + // error constant export const SERVER_UNAVAILABLE_MESSAGE = 'The server is temporarily unavailable.'; export const SERVER_UNAVAILABLE_ERROR_MESSAGE = '503 Service Temporarily Unavailable'; diff --git a/src/modules/liquidity/helpers/calculate-v3-pool-price-decimals.ts b/src/modules/liquidity/helpers/calculate-v3-pool-price-decimals.ts new file mode 100644 index 000000000..970dbac34 --- /dev/null +++ b/src/modules/liquidity/helpers/calculate-v3-pool-price-decimals.ts @@ -0,0 +1,5 @@ +import { getTokenDecimals } from '@shared/helpers'; +import { Nullable, Token } from '@shared/types'; + +export const calculateV3PoolPriceDecimals = (tokenX: Nullable, tokenY: Nullable) => + getTokenDecimals(tokenY) - getTokenDecimals(tokenX); diff --git a/src/modules/liquidity/helpers/index.ts b/src/modules/liquidity/helpers/index.ts index 327836d92..c4d14848f 100644 --- a/src/modules/liquidity/helpers/index.ts +++ b/src/modules/liquidity/helpers/index.ts @@ -13,3 +13,4 @@ export * from './make-liquidity-operation-log-data'; export * from './calculate-v3-item-tvl'; export * from './get-current-price'; export * from './get-symbols-string-by-active-token'; +export * from './calculate-v3-pool-price-decimals'; diff --git a/src/modules/liquidity/hooks/helpers/index.ts b/src/modules/liquidity/hooks/helpers/index.ts index 99f4c4829..ceefc17c4 100644 --- a/src/modules/liquidity/hooks/helpers/index.ts +++ b/src/modules/liquidity/hooks/helpers/index.ts @@ -5,3 +5,4 @@ export * from './use-liquidity-v3-item-tokens-symbols'; export * from './use-liquidity-v3-pool-stats'; export * from './use-liquidity-v3-pool-stats-view-model'; export * from './use-liquidity-v3-current-price'; +export * from './use-v3-pools-price-decimals'; diff --git a/src/modules/liquidity/hooks/helpers/use-v3-pools-price-decimals.ts b/src/modules/liquidity/hooks/helpers/use-v3-pools-price-decimals.ts new file mode 100644 index 000000000..bdaa45340 --- /dev/null +++ b/src/modules/liquidity/hooks/helpers/use-v3-pools-price-decimals.ts @@ -0,0 +1,9 @@ +import { calculateV3PoolPriceDecimals } from '@modules/liquidity/helpers'; + +import { useLiquidityV3ItemTokens } from './use-liquidity-v3-item-tokens'; + +export const useV3PoolPriceDecimals = () => { + const { tokenX, tokenY } = useLiquidityV3ItemTokens(); + + return calculateV3PoolPriceDecimals(tokenX, tokenY); +}; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/calculate-output.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/calculate-output.ts new file mode 100644 index 000000000..b3338b5b9 --- /dev/null +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/calculate-output.ts @@ -0,0 +1,38 @@ +import BigNumber from 'bignumber.js'; + +import { PERCENT_100 } from '@config/constants'; +import { V3LiquidityPoolApi } from '@modules/liquidity/api'; +import { LiquidityV3Position } from '@modules/liquidity/types'; +import { toReal, toFixed } from '@shared/helpers'; +import { Token } from '@shared/types'; + +import { calculateDeposit } from '../../../helpers'; + +export const calculateOutput = ( + inputAmount: string, + position: LiquidityV3Position, + poolStorage: V3LiquidityPoolApi.V3PoolStorage, + tokenX: Token, + tokenY: Token +) => { + const { x: tokenXAtomicDeposit, y: tokenYAtomicDeposit } = calculateDeposit(position, poolStorage); + + const realTokenXAtomicDeposit = toReal(tokenXAtomicDeposit, tokenX.metadata.decimals).decimalPlaces( + tokenX.metadata.decimals, + BigNumber.ROUND_DOWN + ); + + const realTokenYAtomicDeposit = toReal(tokenYAtomicDeposit, tokenY.metadata.decimals).decimalPlaces( + tokenY.metadata.decimals, + BigNumber.ROUND_DOWN + ); + + const calculatedTokenXDeposit = toFixed( + realTokenXAtomicDeposit.dividedBy(PERCENT_100).multipliedBy(new BigNumber(inputAmount)) + ); + const calculatedTokenYDeposit = toFixed( + realTokenYAtomicDeposit.dividedBy(PERCENT_100).multipliedBy(new BigNumber(inputAmount)) + ); + + return { tokenXDeposit: calculatedTokenXDeposit, tokenYDeposit: calculatedTokenYDeposit }; +}; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/index.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/index.ts new file mode 100644 index 000000000..c10a8b97c --- /dev/null +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/index.ts @@ -0,0 +1,2 @@ +export * from './calculate-output'; +export * from './is-one-of-the-output-not-zero'; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/is-one-of-the-output-not-zero.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/is-one-of-the-output-not-zero.ts new file mode 100644 index 000000000..f90b96b56 --- /dev/null +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/is-one-of-the-output-not-zero.ts @@ -0,0 +1,10 @@ +import BigNumber from 'bignumber.js'; +import { FormikValues } from 'formik'; + +import { ZERO_AMOUNT } from '@config/constants'; + +export const isOneOfTheOutputNotZero = (values: FormikValues) => { + const preparedOutputValues = Object.values(values).slice(1); + + return preparedOutputValues.some(value => new BigNumber(value).isGreaterThan(ZERO_AMOUNT)); +}; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/index.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/index.ts new file mode 100644 index 000000000..5d2de0d60 --- /dev/null +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/index.ts @@ -0,0 +1,4 @@ +// export * from './use-calculate-input-amount-value'; +export * from './use-tick-spacing'; +// export * from './use-current-tick'; +// export * from './use-position-ticks'; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-calculate-input-amount-value.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-calculate-input-amount-value.ts new file mode 100644 index 000000000..cd07259c7 --- /dev/null +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-calculate-input-amount-value.ts @@ -0,0 +1,62 @@ +export const useCalculateInputAmountValue = () => { + return ''; +}; + +// import { useCallback } from 'react'; + +// import BigNumber from 'bignumber.js'; + +// import { EMPTY_STRING } from '@config/constants'; +// import { useLiquidityV3ItemTokens } from '@modules/liquidity/hooks'; +// import { toAtomic, toReal } from '@shared/helpers'; + +// import { +// Tick, +// calculateLiquidity, +// calculateXTokenAmount, +// calculateYTokenAmount +// } from '../../../helpers/v3-liquidity-helpers'; +// import { V3AddTokenInput } from '../interface'; + +// export const useCalculateInputAmountValue = () => { +// const { tokenX, tokenY } = useLiquidityV3ItemTokens(); + +// return useCallback( +// ( +// givenInputSlug: V3AddTokenInput, +// currentTick: Tick, +// upperTick: Tick, +// lowerTick: Tick, +// realInputAmount: BigNumber +// ) => { +// if (realInputAmount.isNaN()) { +// return EMPTY_STRING; +// } + +// const tokenGiven = givenInputSlug === V3AddTokenInput.firstTokenInput ? tokenX : tokenY; +// const tokenToCalculate = tokenGiven === tokenX ? tokenY : tokenX; + +// const liquidity = calculateLiquidity( +// currentTick.index, +// lowerTick.index, +// upperTick.index, +// currentTick.price, +// lowerTick.price, +// upperTick.price, +// tokenGiven === tokenX ? toAtomic(realInputAmount, tokenX) : new BigNumber(Infinity), +// tokenGiven === tokenY ? toAtomic(realInputAmount, tokenY) : new BigNumber(Infinity) +// ); + +// const calculateTokenAmount = tokenToCalculate === tokenX ? calculateXTokenAmount : calculateYTokenAmount; +// const tokenToCalculateAtomicAmount = calculateTokenAmount( +// currentTick, +// lowerTick, +// upperTick, +// liquidity +// ).integerValue(BigNumber.ROUND_CEIL); + +// return toReal(tokenToCalculateAtomicAmount, tokenToCalculate).toFixed(); +// }, +// [tokenX, tokenY] +// ); +// }; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-current-tick.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-current-tick.ts new file mode 100644 index 000000000..e17f4ebed --- /dev/null +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-current-tick.ts @@ -0,0 +1,28 @@ +export const useCurrentTick = () => { + return ''; +}; + +// import { useMemo } from 'react'; + +// import { useLiquidityV3CurrentPrice, useV3PoolPriceDecimals } from '@modules/liquidity/hooks'; +// import { toAtomicIfPossible } from '@shared/helpers'; + +// import { calculateTickIndex } from '../../../helpers/v3-liquidity-helpers'; +// import { useTickSpacing } from './use-tick-spacing'; + +// export const useCurrentTick = () => { +// const currentPrice = useLiquidityV3CurrentPrice(); +// const tickSpacing = useTickSpacing(); +// const priceDecimals = useV3PoolPriceDecimals(); + +// return useMemo(() => { +// const currentAtomicPrice = toAtomicIfPossible(currentPrice, priceDecimals); + +// return ( +// currentAtomicPrice && { +// price: currentAtomicPrice, +// index: calculateTickIndex(currentAtomicPrice, tickSpacing) +// } +// ); +// }, [currentPrice, priceDecimals, tickSpacing]); +// }; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-position-ticks.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-position-ticks.ts new file mode 100644 index 000000000..a246a6bfe --- /dev/null +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-position-ticks.ts @@ -0,0 +1,37 @@ +export const usePositionTicks = () => { + return ''; +}; + +// import { useMemo } from 'react'; + +// import { ZERO_AMOUNT_BN } from '@config/constants'; +// import { useLiquidityV3PositionStore, useV3PoolPriceDecimals } from '@modules/liquidity/hooks'; +// import { toAtomic } from '@shared/helpers'; + +// import { calculateTicks, findUserPosition } from '../../../helpers'; +// import { usePositionsWithStats } from '../../../hooks'; +// import { useTickSpacing } from './use-tick-spacing'; + +// // eslint-disable-next-line @typescript-eslint/no-explicit-any +// export const usePositionTicks = () => { +// const priceDecimals = useV3PoolPriceDecimals(); +// const tickSpacing = useTickSpacing(); +// const { positionsWithStats } = usePositionsWithStats(); +// const { positionId } = useLiquidityV3PositionStore(); + +// const position = findUserPosition(positionsWithStats, positionId); + +// const minPrice = position?.stats.minRange; +// const maxPrice = position?.stats.maxRange; + +// return useMemo(() => { +// return { +// tickSpacing, +// ...calculateTicks( +// toAtomic(minPrice ?? ZERO_AMOUNT_BN, priceDecimals), +// toAtomic(maxPrice ?? ZERO_AMOUNT_BN, priceDecimals), +// tickSpacing +// ) +// }; +// }, [tickSpacing, minPrice, priceDecimals, maxPrice]); +// }; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-tick-spacing.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-tick-spacing.ts new file mode 100644 index 000000000..d84afd66a --- /dev/null +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-tick-spacing.ts @@ -0,0 +1,7 @@ +import { useLiquidityV3PoolStore } from '@modules/liquidity/hooks'; + +export const useTickSpacing = () => { + const poolStore = useLiquidityV3PoolStore(); + + return poolStore.item?.storage.constants.tick_spacing.toNumber(); +}; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/interface/v3-liquidity-form-values.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/interface/v3-liquidity-form-values.ts index 02d7d1f8a..7842a39e0 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/interface/v3-liquidity-form-values.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/interface/v3-liquidity-form-values.ts @@ -9,13 +9,13 @@ export interface V3AddFormValues { } export enum V3RemoveTokenInput { - firstTokenInput = 'tokenInput-0', - secondTokenInput = 'tokenInput-1', - thirdTokenInput = 'tokenInput-2' + lpTokenInput = 'lpTokenInput', + tokenXInput = 'tokenXInput', + tokenYInput = 'tokenYInput' } export interface V3RemoveFormValues { - [V3RemoveTokenInput.firstTokenInput]: string; - [V3RemoveTokenInput.secondTokenInput]: string; - [V3RemoveTokenInput.thirdTokenInput]: string; + [V3RemoveTokenInput.lpTokenInput]: string; + [V3RemoveTokenInput.tokenXInput]: string; + [V3RemoveTokenInput.tokenYInput]: string; } diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/use-v3-add-liq-form.vm.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/use-v3-add-liq-form.vm.ts index 303015ec2..d79873ea9 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/use-v3-add-liq-form.vm.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/use-v3-add-liq-form.vm.ts @@ -1,3 +1,4 @@ +// import BigNumber from 'bignumber.js'; import { FormikHelpers, FormikValues, useFormik } from 'formik'; import { FIRST_INDEX } from '@config/constants'; @@ -5,6 +6,8 @@ import { useLiquidityV3ItemTokens } from '@modules/liquidity/hooks'; import { numberAsString, getUserBalances, isEqual } from '@shared/helpers'; import { useTranslation } from '@translation'; +// import { useCalculateInputAmountValue, usePositionTicks } from '../hooks'; +// import { useCurrentTick } from '../hooks/use-current-tick'; import { V3AddFormValues, V3AddTokenInput } from '../interface'; import { useV3AddLiqFormValidation } from './use-v3-add-liq-form.validation'; @@ -12,6 +15,9 @@ import { useV3AddLiqFormValidation } from './use-v3-add-liq-form.validation'; export const useV3AddLiqFormViewModel = () => { const { t } = useTranslation(); const { tokenX, tokenY } = useLiquidityV3ItemTokens(); + // const calculateInoutAmountValue = useCalculateInputAmountValue(); + // const { lowerTick, upperTick } = usePositionTicks(); + // const currentTick = useCurrentTick(); const tokens = [tokenX, tokenY]; const userBalances = getUserBalances(tokens); @@ -22,6 +28,11 @@ export const useV3AddLiqFormViewModel = () => { actions.setSubmitting(false); }; + // currentTick: Tick, + // upperTick: Tick, + // lowerTick: Tick, + // realInputAmount: BigNumber + const validationSchema = useV3AddLiqFormValidation(userBalances, tokens); // TODO: Add calculations when it will be possible @@ -29,6 +40,22 @@ export const useV3AddLiqFormViewModel = () => { return (inputAmount: string) => { const { realValue } = numberAsString(inputAmount, tokens[index]?.metadata.decimals ?? 0); + // if (isNull(currentTick) || isNull(upperTick) || isNull(lowerTick)) { + // return; + // } + + // const formikId = isEqual(FIRST_INDEX, index) ? V3AddTokenInput.firstTokenInput : V3AddTokenInput.secondTokenInput; + + // const calculatedValue = calculateInoutAmountValue( + // formikId, + // currentTick, + // upperTick, + // lowerTick, + // new BigNumber(inputAmount) + // ); + + // console.log(calculatedValue); + formik.setValues({ [V3AddTokenInput.firstTokenInput]: realValue, [V3AddTokenInput.secondTokenInput]: realValue @@ -50,9 +77,9 @@ export const useV3AddLiqFormViewModel = () => { return { value: formik.values[formikId], - label: t('common|Input'), error: formik.errors[formikId], balance: userBalances[index], + label: t('common|Input'), tokens: token, onInputChange: handleInputChange(index) }; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.validation.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.validation.ts index b893b48c5..aaafacbb9 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.validation.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.validation.ts @@ -10,12 +10,12 @@ export const useV3RemoveLiqFormValidation = () => { const { t } = useTranslation(); const schema = yup.string().test( - 'should be less then 100', + 'should be less then or equal to 100', () => t('liquidity|valueShouldBeLessThen100'), value => (isExist(value) ? Number(value) <= PERCENT_100 : true) ); return yup.object().shape({ - [V3RemoveTokenInput.firstTokenInput]: schema.required('Amount is required!') + [V3RemoveTokenInput.lpTokenInput]: schema.required('Amount is required!') }); }; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts index d9fc1272f..1ddd5842a 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts @@ -1,21 +1,20 @@ -import BigNumber from 'bignumber.js'; import { FormikHelpers, FormikValues, useFormik } from 'formik'; -import { FIRST_INDEX, PERCENT_100, ZERO_AMOUNT } from '@config/constants'; +import { FIRST_INDEX, ZERO_AMOUNT } from '@config/constants'; import { useLiquidityV3ItemTokens, useLiquidityV3PoolStore, useLiquidityV3PositionStore } from '@modules/liquidity/hooks'; -import { isEqual, isNull, numberAsString, toFixed, toReal } from '@shared/helpers'; +import { isEqual, isNull, numberAsString } from '@shared/helpers'; import { useTranslation } from '@translation'; -import { calculateDeposit, findUserPosition } from '../../../helpers'; +import { findUserPosition } from '../../../helpers'; import { usePositionsWithStats } from '../../../hooks'; +import { calculateOutput, isOneOfTheOutputNotZero } from '../helpers'; import { V3RemoveFormValues, V3RemoveTokenInput } from '../interface'; import { useV3RemoveLiqFormValidation } from './use-v3-remove-liq-form.validation'; -/* eslint-disable no-console */ export const useV3RemoveLiqFormViewModel = () => { const { t } = useTranslation(); const { tokenX, tokenY } = useLiquidityV3ItemTokens(); @@ -28,9 +27,10 @@ export const useV3RemoveLiqFormViewModel = () => { const userPosition = findUserPosition(positionsWithStats, positionId); const handleSubmit = (values: FormikValues, actions: FormikHelpers) => { - if (Object.values(values).some(value => new BigNumber(value).isGreaterThan(ZERO_AMOUNT))) { + const isAddLiqPossible = isOneOfTheOutputNotZero(values); + + if (isAddLiqPossible) { actions.setSubmitting(true); - console.log(values, actions); actions.setSubmitting(false); } }; @@ -39,34 +39,17 @@ export const useV3RemoveLiqFormViewModel = () => { const handleInputChange = () => { return (inputAmount: string) => { - const { realValue } = numberAsString(inputAmount, 0); - if (isNull(item) || isNull(userPosition) || isNull(tokenX) || isNull(tokenY) || Number(inputAmount) >= 1000) { + const { realValue } = numberAsString(inputAmount, ZERO_AMOUNT); + if (isNull(item) || isNull(userPosition) || isNull(tokenX) || isNull(tokenY)) { return; } - const { x: tokenXAtomicDeposit, y: tokenYAtomicDeposit } = calculateDeposit(userPosition, item.storage); - - const realTokenXAtomicDeposit = toReal(tokenXAtomicDeposit, tokenX.metadata.decimals).decimalPlaces( - tokenX.metadata.decimals, - BigNumber.ROUND_DOWN - ); - - const realTokenYAtomicDeposit = toReal(tokenYAtomicDeposit, tokenY.metadata.decimals).decimalPlaces( - tokenY.metadata.decimals, - BigNumber.ROUND_DOWN - ); - - const calculatedTokenXDeposit = toFixed( - realTokenXAtomicDeposit.dividedBy(PERCENT_100).multipliedBy(new BigNumber(inputAmount)) - ); - const calculatedTokenYDeposit = toFixed( - realTokenYAtomicDeposit.dividedBy(PERCENT_100).multipliedBy(new BigNumber(inputAmount)) - ); + const { tokenXDeposit, tokenYDeposit } = calculateOutput(inputAmount, userPosition, item.storage, tokenX, tokenY); formik.setValues({ - [V3RemoveTokenInput.firstTokenInput]: realValue, - [V3RemoveTokenInput.secondTokenInput]: calculatedTokenXDeposit, - [V3RemoveTokenInput.thirdTokenInput]: calculatedTokenYDeposit + [V3RemoveTokenInput.lpTokenInput]: realValue, + [V3RemoveTokenInput.tokenXInput]: tokenXDeposit, + [V3RemoveTokenInput.tokenYInput]: tokenYDeposit }); }; }; @@ -74,17 +57,15 @@ export const useV3RemoveLiqFormViewModel = () => { const formik = useFormik({ validationSchema, initialValues: { - [V3RemoveTokenInput.firstTokenInput]: '', - [V3RemoveTokenInput.secondTokenInput]: '', - [V3RemoveTokenInput.thirdTokenInput]: '' + [V3RemoveTokenInput.lpTokenInput]: '', + [V3RemoveTokenInput.tokenXInput]: '', + [V3RemoveTokenInput.tokenYInput]: '' }, onSubmit: handleSubmit }); const outputData = tokens.map((token, index) => { - const formikId = isEqual(FIRST_INDEX, index) - ? V3RemoveTokenInput.secondTokenInput - : V3RemoveTokenInput.thirdTokenInput; + const formikId = isEqual(FIRST_INDEX, index) ? V3RemoveTokenInput.tokenXInput : V3RemoveTokenInput.tokenYInput; return { value: formik.values[formikId], @@ -98,15 +79,17 @@ export const useV3RemoveLiqFormViewModel = () => { }; }); + const lpData = { + value: formik.values[V3RemoveTokenInput.lpTokenInput], + error: formik.errors[V3RemoveTokenInput.lpTokenInput], + label: t('common|Amount'), + tokens: [tokenX, tokenY], + hiddenBalance: true, + onInputChange: handleInputChange() + }; + return { - lpData: { - value: formik.values[V3RemoveTokenInput.firstTokenInput], - error: formik.errors[V3RemoveTokenInput.firstTokenInput], - label: t('common|Amount'), - tokens: [tokenX, tokenY], - hiddenBalance: true, - onInputChange: handleInputChange() - }, + lpData, data: outputData, onSubmit: formik.handleSubmit }; diff --git a/src/modules/liquidity/pages/v3-item-page/helpers/calculate-ticks.ts b/src/modules/liquidity/pages/v3-item-page/helpers/calculate-ticks.ts new file mode 100644 index 000000000..f6de6d362 --- /dev/null +++ b/src/modules/liquidity/pages/v3-item-page/helpers/calculate-ticks.ts @@ -0,0 +1,22 @@ +export const calculateTicks = () => { + return ''; +}; + +// import BigNumber from 'bignumber.js'; + +// import { MIN_TICK_INDEX } from '@config/constants'; + +// import { calculateTick, fitUpperTick } from './v3-liquidity-helpers'; + +// export const calculateTicks = (minPrice: BigNumber, maxPrice: BigNumber, tickSpacing?: number) => { +// const lowerTick = minPrice.isNaN() ? null : calculateTick(minPrice, tickSpacing); +// const upperTick = maxPrice.isNaN() +// ? null +// : fitUpperTick( +// calculateTick(maxPrice, tickSpacing), +// lowerTick?.index ?? new BigNumber(MIN_TICK_INDEX), +// tickSpacing +// ); + +// return { lowerTick, upperTick }; +// }; diff --git a/src/modules/liquidity/pages/v3-item-page/helpers/index.ts b/src/modules/liquidity/pages/v3-item-page/helpers/index.ts index 6d4206910..bb0d593f9 100644 --- a/src/modules/liquidity/pages/v3-item-page/helpers/index.ts +++ b/src/modules/liquidity/pages/v3-item-page/helpers/index.ts @@ -6,3 +6,5 @@ export * from './map-position-with-stats'; export * from './invalid-pool-id.error'; export * from './get-create-position-amount-input-slug-by-index'; export * from './find-user-position'; +// export * from './v3-liquidity-helpers'; +// export * from './calculate-ticks'; diff --git a/src/modules/liquidity/pages/v3-item-page/helpers/v3-liquidity-helpers.ts b/src/modules/liquidity/pages/v3-item-page/helpers/v3-liquidity-helpers.ts new file mode 100644 index 000000000..e5b8643b7 --- /dev/null +++ b/src/modules/liquidity/pages/v3-item-page/helpers/v3-liquidity-helpers.ts @@ -0,0 +1,109 @@ +export {}; + +// import { BigNumber } from 'bignumber.js'; +// import { sqrtPriceForTick, liquidityDeltaToTokensDelta, tickForSqrtPrice } from 'quipuswap-v3-sdk/dist/helpers/math'; +// import { Nat, Int } from 'quipuswap-v3-sdk/dist/types'; + +// import { DEFAULT_TICK_SPACING, MAX_TICK_INDEX } from '@config/constants'; + +// import { convertToAtomicPrice } from './convert-to-atomic-price'; +// import { convertToSqrtPrice } from './convert-to-sqrt-price'; + +// export interface Tick { +// index: BigNumber; +// price: BigNumber; +// } + +// // export const calculateTickIndex = (atomicPrice: BigNumber, tickSpacing = DEFAULT_TICK_SPACING) => { +// // return atomicPrice.isFinite() +// // ? tickForSqrtPrice(new Nat(convertToSqrtPrice(atomicPrice)), new Nat(tickSpacing)).toBignumber() +// // : new BigNumber(MAX_TICK_INDEX); +// // }; + +// // export const calculateTickPrice = (index: BigNumber) => convertToAtomicPrice(sqrtPriceForTick(new Int(index))); + +// export const calculateUpperLiquidity = ( +// lowerTickPrice: BigNumber, +// upperTickPrice: BigNumber, +// xTokenAmount: BigNumber +// ) => +// xTokenAmount +// .multipliedBy(lowerTickPrice.sqrt()) +// .multipliedBy(upperTickPrice.sqrt()) +// .dividedToIntegerBy(upperTickPrice.sqrt().minus(lowerTickPrice.sqrt())); + +// export const calculateLowerLiquidity = ( +// lowerTickPrice: BigNumber, +// upperTickPrice: BigNumber, +// yTokenAmount: BigNumber +// ) => yTokenAmount.dividedToIntegerBy(upperTickPrice.sqrt().minus(lowerTickPrice.sqrt())); + +// const calculateMiddleLiquidity = ( +// currentTickPrice: BigNumber, +// lowerTickPrice: BigNumber, +// upperTickPrice: BigNumber, +// xTokenAmount: BigNumber, +// yTokenAmount: BigNumber +// ) => { +// const liquidityUpper = calculateUpperLiquidity(currentTickPrice, upperTickPrice, xTokenAmount); +// const liquidityLower = calculateLowerLiquidity(lowerTickPrice, currentTickPrice, yTokenAmount); + +// return BigNumber.min(liquidityLower, liquidityUpper); +// }; + +// export const calculateLiquidity = ( +// currentTickIndex: BigNumber, +// lowerTickIndex: BigNumber, +// upperTickIndex: BigNumber, +// currentTickPrice: BigNumber, +// lowerTickPrice: BigNumber, +// upperTickPrice: BigNumber, +// xTokenAmount: BigNumber, +// yTokenAmount: BigNumber +// ) => { +// if (currentTickIndex.isLessThan(lowerTickIndex)) { +// return calculateUpperLiquidity(lowerTickPrice, upperTickPrice, xTokenAmount); +// } + +// if (currentTickIndex.isGreaterThanOrEqualTo(upperTickIndex)) { +// return calculateLowerLiquidity(lowerTickPrice, upperTickPrice, yTokenAmount); +// } + +// return calculateMiddleLiquidity(currentTickPrice, lowerTickPrice, upperTickPrice, xTokenAmount, yTokenAmount); +// }; + +// export const shouldAddTokenX = (currentTickIndex: BigNumber, upperTickIndex: BigNumber) => +// currentTickIndex.isLessThan(upperTickIndex); + +// const calculateTokensAmount = (currentTick: Tick, lowerTick: Tick, upperTick: Tick, liquidity: BigNumber) => +// liquidityDeltaToTokensDelta( +// new Int(liquidity), +// new Int(lowerTick.index), +// new Int(upperTick.index), +// new Int(currentTick.index), +// new Nat(convertToSqrtPrice(currentTick.price)) +// ); + +// export const calculateXTokenAmount = (currentTick: Tick, lowerTick: Tick, upperTick: Tick, liquidity: BigNumber) => +// calculateTokensAmount(currentTick, lowerTick, upperTick, liquidity).x.toBignumber(); + +// export const shouldAddTokenY = (currentTickIndex: BigNumber, lowerTickIndex: BigNumber) => +// currentTickIndex.isGreaterThanOrEqualTo(lowerTickIndex); + +// export const calculateYTokenAmount = (currentTick: Tick, lowerTick: Tick, upperTick: Tick, liquidity: BigNumber) => +// calculateTokensAmount(currentTick, lowerTick, upperTick, liquidity).y.toBignumber(); + +// export const calculateTick = (tickPrice: BigNumber, tickSpacing = DEFAULT_TICK_SPACING) => { +// const tickIndex = calculateTickIndex(tickPrice, tickSpacing); + +// return { index: tickIndex, price: calculateTickPrice(tickIndex) }; +// }; + +// export const fitUpperTick = (tick: Tick, lowerTickIndex: BigNumber, tickSpacing = DEFAULT_TICK_SPACING) => { +// const fittingTickIndex = BigNumber.maximum(tick.index, lowerTickIndex.plus(tickSpacing)); + +// return { +// index: fittingTickIndex, +// price: calculateTickPrice(fittingTickIndex) +// }; +// }; From 5ee71d3d38d277445034771c0c14d3664289420c Mon Sep 17 00:00:00 2001 From: Artem Date: Thu, 29 Dec 2022 12:10:03 +0200 Subject: [PATCH 04/45] QUIPU-676 Add calculation (Add), improvements --- .../components/forms/helpers/index.ts | 1 + .../helpers/prevent-redunant-recalculation.ts | 4 + .../components/forms/hooks/index.ts | 6 +- .../hooks/use-calculate-input-amount-value.ts | 116 +++++++++--------- .../forms/hooks/use-current-tick.ts | 42 +++---- .../forms/hooks/use-position-ticks.ts | 57 ++++----- .../interface/v3-liquidity-form-values.ts | 3 +- .../v3-add-liq-form/use-v3-add-liq-form.vm.ts | 67 +++++----- .../use-v3-remove-liq-form.vm.ts | 16 ++- 9 files changed, 157 insertions(+), 155 deletions(-) create mode 100644 src/modules/liquidity/pages/v3-item-page/components/forms/helpers/prevent-redunant-recalculation.ts diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/index.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/index.ts index c10a8b97c..5dd806835 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/index.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/index.ts @@ -1,2 +1,3 @@ export * from './calculate-output'; export * from './is-one-of-the-output-not-zero'; +export * from './prevent-redunant-recalculation'; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/prevent-redunant-recalculation.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/prevent-redunant-recalculation.ts new file mode 100644 index 000000000..56ab7e4a9 --- /dev/null +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/prevent-redunant-recalculation.ts @@ -0,0 +1,4 @@ +import { PERCENT_100 } from '@config/constants'; + +export const preventRedundantRecalculation = (inputAmount: string) => + Number(inputAmount) > PERCENT_100 ? String(PERCENT_100) : inputAmount; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/index.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/index.ts index 5d2de0d60..ea43630ae 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/index.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/index.ts @@ -1,4 +1,4 @@ -// export * from './use-calculate-input-amount-value'; +export * from './use-calculate-input-amount-value'; export * from './use-tick-spacing'; -// export * from './use-current-tick'; -// export * from './use-position-ticks'; +export * from './use-current-tick'; +export * from './use-position-ticks'; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-calculate-input-amount-value.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-calculate-input-amount-value.ts index cd07259c7..f38b5173e 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-calculate-input-amount-value.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-calculate-input-amount-value.ts @@ -1,62 +1,58 @@ +import { useCallback } from 'react'; + +import BigNumber from 'bignumber.js'; + +import { EMPTY_STRING } from '@config/constants'; +import { useLiquidityV3ItemTokens } from '@modules/liquidity/hooks'; +import { toAtomic, toReal } from '@shared/helpers'; + +import { + Tick, + calculateLiquidity, + calculateXTokenAmount, + calculateYTokenAmount +} from '../../../helpers/v3-liquidity-helpers'; +import { V3AddTokenInput } from '../interface'; + export const useCalculateInputAmountValue = () => { - return ''; + const { tokenX, tokenY } = useLiquidityV3ItemTokens(); + + return useCallback( + ( + givenInputSlug: V3AddTokenInput, + currentTick: Tick, + upperTick: Tick, + lowerTick: Tick, + realInputAmount: BigNumber + ) => { + if (realInputAmount.isNaN()) { + return EMPTY_STRING; + } + + const tokenGiven = givenInputSlug === V3AddTokenInput.firstTokenInput ? tokenX : tokenY; + const tokenToCalculate = tokenGiven === tokenX ? tokenY : tokenX; + + const liquidity = calculateLiquidity( + currentTick.index, + lowerTick.index, + upperTick.index, + currentTick.price, + lowerTick.price, + upperTick.price, + tokenGiven === tokenX ? toAtomic(realInputAmount, tokenX) : new BigNumber(Infinity), + tokenGiven === tokenY ? toAtomic(realInputAmount, tokenY) : new BigNumber(Infinity) + ); + + const calculateTokenAmount = tokenToCalculate === tokenX ? calculateXTokenAmount : calculateYTokenAmount; + const tokenToCalculateAtomicAmount = calculateTokenAmount( + currentTick, + lowerTick, + upperTick, + liquidity + ).integerValue(BigNumber.ROUND_CEIL); + + return toReal(tokenToCalculateAtomicAmount, tokenToCalculate).toFixed(); + }, + [tokenX, tokenY] + ); }; - -// import { useCallback } from 'react'; - -// import BigNumber from 'bignumber.js'; - -// import { EMPTY_STRING } from '@config/constants'; -// import { useLiquidityV3ItemTokens } from '@modules/liquidity/hooks'; -// import { toAtomic, toReal } from '@shared/helpers'; - -// import { -// Tick, -// calculateLiquidity, -// calculateXTokenAmount, -// calculateYTokenAmount -// } from '../../../helpers/v3-liquidity-helpers'; -// import { V3AddTokenInput } from '../interface'; - -// export const useCalculateInputAmountValue = () => { -// const { tokenX, tokenY } = useLiquidityV3ItemTokens(); - -// return useCallback( -// ( -// givenInputSlug: V3AddTokenInput, -// currentTick: Tick, -// upperTick: Tick, -// lowerTick: Tick, -// realInputAmount: BigNumber -// ) => { -// if (realInputAmount.isNaN()) { -// return EMPTY_STRING; -// } - -// const tokenGiven = givenInputSlug === V3AddTokenInput.firstTokenInput ? tokenX : tokenY; -// const tokenToCalculate = tokenGiven === tokenX ? tokenY : tokenX; - -// const liquidity = calculateLiquidity( -// currentTick.index, -// lowerTick.index, -// upperTick.index, -// currentTick.price, -// lowerTick.price, -// upperTick.price, -// tokenGiven === tokenX ? toAtomic(realInputAmount, tokenX) : new BigNumber(Infinity), -// tokenGiven === tokenY ? toAtomic(realInputAmount, tokenY) : new BigNumber(Infinity) -// ); - -// const calculateTokenAmount = tokenToCalculate === tokenX ? calculateXTokenAmount : calculateYTokenAmount; -// const tokenToCalculateAtomicAmount = calculateTokenAmount( -// currentTick, -// lowerTick, -// upperTick, -// liquidity -// ).integerValue(BigNumber.ROUND_CEIL); - -// return toReal(tokenToCalculateAtomicAmount, tokenToCalculate).toFixed(); -// }, -// [tokenX, tokenY] -// ); -// }; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-current-tick.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-current-tick.ts index e17f4ebed..169444baf 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-current-tick.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-current-tick.ts @@ -1,28 +1,24 @@ -export const useCurrentTick = () => { - return ''; -}; - -// import { useMemo } from 'react'; +import { useMemo } from 'react'; -// import { useLiquidityV3CurrentPrice, useV3PoolPriceDecimals } from '@modules/liquidity/hooks'; -// import { toAtomicIfPossible } from '@shared/helpers'; +import { useLiquidityV3CurrentPrice, useV3PoolPriceDecimals } from '@modules/liquidity/hooks'; +import { toAtomicIfPossible } from '@shared/helpers'; -// import { calculateTickIndex } from '../../../helpers/v3-liquidity-helpers'; -// import { useTickSpacing } from './use-tick-spacing'; +import { calculateTickIndex } from '../../../helpers/v3-liquidity-helpers'; +import { useTickSpacing } from './use-tick-spacing'; -// export const useCurrentTick = () => { -// const currentPrice = useLiquidityV3CurrentPrice(); -// const tickSpacing = useTickSpacing(); -// const priceDecimals = useV3PoolPriceDecimals(); +export const useCurrentTick = () => { + const currentPrice = useLiquidityV3CurrentPrice(); + const tickSpacing = useTickSpacing(); + const priceDecimals = useV3PoolPriceDecimals(); -// return useMemo(() => { -// const currentAtomicPrice = toAtomicIfPossible(currentPrice, priceDecimals); + return useMemo(() => { + const currentAtomicPrice = toAtomicIfPossible(currentPrice, priceDecimals); -// return ( -// currentAtomicPrice && { -// price: currentAtomicPrice, -// index: calculateTickIndex(currentAtomicPrice, tickSpacing) -// } -// ); -// }, [currentPrice, priceDecimals, tickSpacing]); -// }; + return ( + currentAtomicPrice && { + price: currentAtomicPrice, + index: calculateTickIndex(currentAtomicPrice, tickSpacing) + } + ); + }, [currentPrice, priceDecimals, tickSpacing]); +}; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-position-ticks.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-position-ticks.ts index a246a6bfe..8e07afbb7 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-position-ticks.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-position-ticks.ts @@ -1,37 +1,32 @@ -export const usePositionTicks = () => { - return ''; -}; - -// import { useMemo } from 'react'; +import { useMemo } from 'react'; -// import { ZERO_AMOUNT_BN } from '@config/constants'; -// import { useLiquidityV3PositionStore, useV3PoolPriceDecimals } from '@modules/liquidity/hooks'; -// import { toAtomic } from '@shared/helpers'; +import { ZERO_AMOUNT_BN } from '@config/constants'; +import { useLiquidityV3PositionStore, useV3PoolPriceDecimals } from '@modules/liquidity/hooks'; +import { toAtomic } from '@shared/helpers'; -// import { calculateTicks, findUserPosition } from '../../../helpers'; -// import { usePositionsWithStats } from '../../../hooks'; -// import { useTickSpacing } from './use-tick-spacing'; +import { calculateTicks, findUserPosition } from '../../../helpers'; +import { usePositionsWithStats } from '../../../hooks'; +import { useTickSpacing } from './use-tick-spacing'; -// // eslint-disable-next-line @typescript-eslint/no-explicit-any -// export const usePositionTicks = () => { -// const priceDecimals = useV3PoolPriceDecimals(); -// const tickSpacing = useTickSpacing(); -// const { positionsWithStats } = usePositionsWithStats(); -// const { positionId } = useLiquidityV3PositionStore(); +export const usePositionTicks = () => { + const priceDecimals = useV3PoolPriceDecimals(); + const tickSpacing = useTickSpacing(); + const { positionsWithStats } = usePositionsWithStats(); + const { positionId } = useLiquidityV3PositionStore(); -// const position = findUserPosition(positionsWithStats, positionId); + const position = findUserPosition(positionsWithStats, positionId); -// const minPrice = position?.stats.minRange; -// const maxPrice = position?.stats.maxRange; + const minPrice = position?.stats.minRange; + const maxPrice = position?.stats.maxRange; -// return useMemo(() => { -// return { -// tickSpacing, -// ...calculateTicks( -// toAtomic(minPrice ?? ZERO_AMOUNT_BN, priceDecimals), -// toAtomic(maxPrice ?? ZERO_AMOUNT_BN, priceDecimals), -// tickSpacing -// ) -// }; -// }, [tickSpacing, minPrice, priceDecimals, maxPrice]); -// }; + return useMemo(() => { + return { + tickSpacing, + ...calculateTicks( + toAtomic(minPrice ?? ZERO_AMOUNT_BN, priceDecimals), + toAtomic(maxPrice ?? ZERO_AMOUNT_BN, priceDecimals), + tickSpacing + ) + }; + }, [tickSpacing, minPrice, priceDecimals, maxPrice]); +}; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/interface/v3-liquidity-form-values.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/interface/v3-liquidity-form-values.ts index 7842a39e0..496f26a84 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/interface/v3-liquidity-form-values.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/interface/v3-liquidity-form-values.ts @@ -4,8 +4,7 @@ export enum V3AddTokenInput { } export interface V3AddFormValues { - [V3AddTokenInput.firstTokenInput]: string; - [V3AddTokenInput.secondTokenInput]: string; + [x: string]: string; } export enum V3RemoveTokenInput { diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/use-v3-add-liq-form.vm.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/use-v3-add-liq-form.vm.ts index d79873ea9..cd9345c2d 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/use-v3-add-liq-form.vm.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/use-v3-add-liq-form.vm.ts @@ -1,13 +1,13 @@ -// import BigNumber from 'bignumber.js'; +import BigNumber from 'bignumber.js'; import { FormikHelpers, FormikValues, useFormik } from 'formik'; -import { FIRST_INDEX } from '@config/constants'; +import { FIRST_INDEX, OPPOSITE_INDEX } from '@config/constants'; import { useLiquidityV3ItemTokens } from '@modules/liquidity/hooks'; -import { numberAsString, getUserBalances, isEqual } from '@shared/helpers'; +import { numberAsString, getUserBalances, isEqual, isNull } from '@shared/helpers'; import { useTranslation } from '@translation'; -// import { useCalculateInputAmountValue, usePositionTicks } from '../hooks'; -// import { useCurrentTick } from '../hooks/use-current-tick'; +import { useCalculateInputAmountValue, usePositionTicks } from '../hooks'; +import { useCurrentTick } from '../hooks/use-current-tick'; import { V3AddFormValues, V3AddTokenInput } from '../interface'; import { useV3AddLiqFormValidation } from './use-v3-add-liq-form.validation'; @@ -15,60 +15,63 @@ import { useV3AddLiqFormValidation } from './use-v3-add-liq-form.validation'; export const useV3AddLiqFormViewModel = () => { const { t } = useTranslation(); const { tokenX, tokenY } = useLiquidityV3ItemTokens(); - // const calculateInoutAmountValue = useCalculateInputAmountValue(); - // const { lowerTick, upperTick } = usePositionTicks(); - // const currentTick = useCurrentTick(); + const calculateInoutAmountValue = useCalculateInputAmountValue(); + const { lowerTick, upperTick } = usePositionTicks(); + const currentTick = useCurrentTick(); const tokens = [tokenX, tokenY]; const userBalances = getUserBalances(tokens); + const initialValues: Record = { + [V3AddTokenInput.firstTokenInput]: '', + [V3AddTokenInput.secondTokenInput]: '' + }; + const handleSubmit = (values: FormikValues, actions: FormikHelpers) => { actions.setSubmitting(true); console.log(values, actions); actions.setSubmitting(false); }; - // currentTick: Tick, - // upperTick: Tick, - // lowerTick: Tick, - // realInputAmount: BigNumber - const validationSchema = useV3AddLiqFormValidation(userBalances, tokens); - // TODO: Add calculations when it will be possible const handleInputChange = (index: number) => { return (inputAmount: string) => { const { realValue } = numberAsString(inputAmount, tokens[index]?.metadata.decimals ?? 0); - // if (isNull(currentTick) || isNull(upperTick) || isNull(lowerTick)) { - // return; - // } + if (isNull(currentTick) || isNull(upperTick) || isNull(lowerTick)) { + return; + } + + const localInput = isEqual(FIRST_INDEX, index) + ? V3AddTokenInput.firstTokenInput + : V3AddTokenInput.secondTokenInput; + const notLocInput = isEqual(OPPOSITE_INDEX, index) + ? V3AddTokenInput.firstTokenInput + : V3AddTokenInput.secondTokenInput; - // const formikId = isEqual(FIRST_INDEX, index) ? V3AddTokenInput.firstTokenInput : V3AddTokenInput.secondTokenInput; + const formikId = isEqual(FIRST_INDEX, index) ? V3AddTokenInput.firstTokenInput : V3AddTokenInput.secondTokenInput; - // const calculatedValue = calculateInoutAmountValue( - // formikId, - // currentTick, - // upperTick, - // lowerTick, - // new BigNumber(inputAmount) - // ); + const calculatedValue = calculateInoutAmountValue( + formikId, + currentTick, + upperTick, + lowerTick, + new BigNumber(inputAmount) + ); - // console.log(calculatedValue); + console.log(calculatedValue); formik.setValues({ - [V3AddTokenInput.firstTokenInput]: realValue, - [V3AddTokenInput.secondTokenInput]: realValue + [localInput]: realValue, + [notLocInput]: calculatedValue }); }; }; const formik = useFormik({ validationSchema, - initialValues: { - [V3AddTokenInput.firstTokenInput]: '', - [V3AddTokenInput.secondTokenInput]: '' - }, + initialValues, onSubmit: handleSubmit }); diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts index 1ddd5842a..9fe909331 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts @@ -11,7 +11,7 @@ import { useTranslation } from '@translation'; import { findUserPosition } from '../../../helpers'; import { usePositionsWithStats } from '../../../hooks'; -import { calculateOutput, isOneOfTheOutputNotZero } from '../helpers'; +import { calculateOutput, isOneOfTheOutputNotZero, preventRedundantRecalculation } from '../helpers'; import { V3RemoveFormValues, V3RemoveTokenInput } from '../interface'; import { useV3RemoveLiqFormValidation } from './use-v3-remove-liq-form.validation'; @@ -35,8 +35,6 @@ export const useV3RemoveLiqFormViewModel = () => { } }; - const validationSchema = useV3RemoveLiqFormValidation(); - const handleInputChange = () => { return (inputAmount: string) => { const { realValue } = numberAsString(inputAmount, ZERO_AMOUNT); @@ -44,7 +42,15 @@ export const useV3RemoveLiqFormViewModel = () => { return; } - const { tokenXDeposit, tokenYDeposit } = calculateOutput(inputAmount, userPosition, item.storage, tokenX, tokenY); + const _inputAmount = preventRedundantRecalculation(inputAmount); + + const { tokenXDeposit, tokenYDeposit } = calculateOutput( + _inputAmount, + userPosition, + item.storage, + tokenX, + tokenY + ); formik.setValues({ [V3RemoveTokenInput.lpTokenInput]: realValue, @@ -54,6 +60,8 @@ export const useV3RemoveLiqFormViewModel = () => { }; }; + const validationSchema = useV3RemoveLiqFormValidation(); + const formik = useFormik({ validationSchema, initialValues: { From 9b15a3f3ef57f5a9a4969317ca317cb5791e8dfe Mon Sep 17 00:00:00 2001 From: Artem Date: Fri, 6 Jan 2023 11:33:50 +0200 Subject: [PATCH 05/45] QUIPU-676 Add improvements, fix some issues --- .../forms/helpers/get-count-of-tokens.ts | 28 +++++++++ .../helpers/get-current-formik-key-add.ts | 7 +++ .../components/forms/helpers/index.ts | 2 + .../components/forms/hooks/index.ts | 1 + .../forms/hooks/use-calculate-value.ts | 31 ++++++++++ .../v3-add-liq-form/use-v3-add-liq-form.vm.ts | 58 ++++++++++--------- .../use-v3-remove-liq-form.vm.ts | 5 +- 7 files changed, 103 insertions(+), 29 deletions(-) create mode 100644 src/modules/liquidity/pages/v3-item-page/components/forms/helpers/get-count-of-tokens.ts create mode 100644 src/modules/liquidity/pages/v3-item-page/components/forms/helpers/get-current-formik-key-add.ts create mode 100644 src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-calculate-value.ts diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/get-count-of-tokens.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/get-count-of-tokens.ts new file mode 100644 index 000000000..25b7da728 --- /dev/null +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/get-count-of-tokens.ts @@ -0,0 +1,28 @@ +import BigNumber from 'bignumber.js'; + +import { FIRST_INDEX } from '@config/constants'; +import { isNull, isUndefined } from '@shared/helpers'; +import { Nullable, Token, Undefined } from '@shared/types'; + +const LAST_TOKEN_INDEX = 1; + +export const getCountOfTokens = ( + currentPrice: Nullable, + minPrice: Undefined, + maxPrice: Undefined, + tokens: Array> +) => { + if (isNull(currentPrice) || tokens.some(token => isNull(token)) || isUndefined(minPrice) || isUndefined(maxPrice)) { + return []; + } + + if (currentPrice.isLessThan(minPrice)) { + return tokens.slice(FIRST_INDEX, LAST_TOKEN_INDEX); + } + + if (currentPrice.isGreaterThan(maxPrice)) { + return tokens.slice(LAST_TOKEN_INDEX); + } + + return tokens; +}; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/get-current-formik-key-add.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/get-current-formik-key-add.ts new file mode 100644 index 000000000..0c6b555d1 --- /dev/null +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/get-current-formik-key-add.ts @@ -0,0 +1,7 @@ +import { FIRST_INDEX } from '@config/constants'; +import { isEqual } from '@shared/helpers'; + +import { V3AddTokenInput } from '../interface'; + +export const getCurrentFormikKeyAdd = (currentIndex: number, indexToCompare = FIRST_INDEX) => + isEqual(currentIndex, indexToCompare) ? V3AddTokenInput.firstTokenInput : V3AddTokenInput.secondTokenInput; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/index.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/index.ts index 5dd806835..6cff6b4f2 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/index.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/index.ts @@ -1,3 +1,5 @@ export * from './calculate-output'; export * from './is-one-of-the-output-not-zero'; export * from './prevent-redunant-recalculation'; +export * from './get-count-of-tokens'; +export * from './get-current-formik-key-add'; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/index.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/index.ts index ea43630ae..a2cb746ac 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/index.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/index.ts @@ -2,3 +2,4 @@ export * from './use-calculate-input-amount-value'; export * from './use-tick-spacing'; export * from './use-current-tick'; export * from './use-position-ticks'; +export * from './use-calculate-value'; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-calculate-value.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-calculate-value.ts new file mode 100644 index 000000000..ece33238a --- /dev/null +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-calculate-value.ts @@ -0,0 +1,31 @@ +import BigNumber from 'bignumber.js'; + +import { ZERO_AMOUNT } from '@config/constants'; +import { isEqual, isNull } from '@shared/helpers'; +import { Nullable, Token } from '@shared/types'; + +import { V3AddTokenInput } from '../interface'; +import { useCalculateInputAmountValue } from './use-calculate-input-amount-value'; +import { useCurrentTick } from './use-current-tick'; +import { usePositionTicks } from './use-position-ticks'; + +const MAX_COUNT_OF_INPUTS = 2; +const ZERO_AMOUNT_STR = String(ZERO_AMOUNT); + +export const useCalculateValue = () => { + const { lowerTick, upperTick } = usePositionTicks(); + const currentTick = useCurrentTick(); + const calculateInputAmountValue = useCalculateInputAmountValue(); + + const calculateValue = (localInput: V3AddTokenInput, inputAmount: string, tokens: Array>) => { + if (isNull(currentTick) || isNull(upperTick) || isNull(lowerTick)) { + return ZERO_AMOUNT_STR; + } + + return isEqual(tokens.length, MAX_COUNT_OF_INPUTS) + ? calculateInputAmountValue(localInput, currentTick, upperTick, lowerTick, new BigNumber(inputAmount)) + : ZERO_AMOUNT_STR; + }; + + return { calculateValue }; +}; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/use-v3-add-liq-form.vm.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/use-v3-add-liq-form.vm.ts index cd9345c2d..7fd3878b3 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/use-v3-add-liq-form.vm.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/use-v3-add-liq-form.vm.ts @@ -1,12 +1,19 @@ -import BigNumber from 'bignumber.js'; import { FormikHelpers, FormikValues, useFormik } from 'formik'; -import { FIRST_INDEX, OPPOSITE_INDEX } from '@config/constants'; -import { useLiquidityV3ItemTokens } from '@modules/liquidity/hooks'; -import { numberAsString, getUserBalances, isEqual, isNull } from '@shared/helpers'; +import { OPPOSITE_INDEX } from '@config/constants'; +import { + useLiquidityV3CurrentPrice, + useLiquidityV3ItemTokens, + useLiquidityV3PositionStore +} from '@modules/liquidity/hooks'; +import { numberAsString, isNull, isExist } from '@shared/helpers'; +import { useTokensBalancesOnly } from '@shared/hooks'; import { useTranslation } from '@translation'; -import { useCalculateInputAmountValue, usePositionTicks } from '../hooks'; +import { findUserPosition } from '../../../helpers'; +import { usePositionsWithStats } from '../../../hooks'; +import { getCurrentFormikKeyAdd, getCountOfTokens } from '../helpers'; +import { useCalculateValue, usePositionTicks } from '../hooks'; import { useCurrentTick } from '../hooks/use-current-tick'; import { V3AddFormValues, V3AddTokenInput } from '../interface'; import { useV3AddLiqFormValidation } from './use-v3-add-liq-form.validation'; @@ -15,12 +22,20 @@ import { useV3AddLiqFormValidation } from './use-v3-add-liq-form.validation'; export const useV3AddLiqFormViewModel = () => { const { t } = useTranslation(); const { tokenX, tokenY } = useLiquidityV3ItemTokens(); - const calculateInoutAmountValue = useCalculateInputAmountValue(); const { lowerTick, upperTick } = usePositionTicks(); const currentTick = useCurrentTick(); + const currentPrice = useLiquidityV3CurrentPrice(); + const { positionsWithStats } = usePositionsWithStats(); + const { positionId } = useLiquidityV3PositionStore(); + const { calculateValue } = useCalculateValue(); - const tokens = [tokenX, tokenY]; - const userBalances = getUserBalances(tokens); + const position = findUserPosition(positionsWithStats, positionId); + + const minPrice = position?.stats.minRange; + const maxPrice = position?.stats.maxRange; + + const tokens = getCountOfTokens(currentPrice, minPrice, maxPrice, [tokenX, tokenY]); + const userBalances = useTokensBalancesOnly(tokens.filter(isExist)); const initialValues: Record = { [V3AddTokenInput.firstTokenInput]: '', @@ -43,24 +58,10 @@ export const useV3AddLiqFormViewModel = () => { return; } - const localInput = isEqual(FIRST_INDEX, index) - ? V3AddTokenInput.firstTokenInput - : V3AddTokenInput.secondTokenInput; - const notLocInput = isEqual(OPPOSITE_INDEX, index) - ? V3AddTokenInput.firstTokenInput - : V3AddTokenInput.secondTokenInput; - - const formikId = isEqual(FIRST_INDEX, index) ? V3AddTokenInput.firstTokenInput : V3AddTokenInput.secondTokenInput; - - const calculatedValue = calculateInoutAmountValue( - formikId, - currentTick, - upperTick, - lowerTick, - new BigNumber(inputAmount) - ); + const localInput = getCurrentFormikKeyAdd(index); + const notLocInput = getCurrentFormikKeyAdd(index, OPPOSITE_INDEX); - console.log(calculatedValue); + const calculatedValue = calculateValue(localInput, inputAmount, tokens); formik.setValues({ [localInput]: realValue, @@ -76,11 +77,12 @@ export const useV3AddLiqFormViewModel = () => { }); const data = tokens.map((token, index) => { - const formikId = isEqual(FIRST_INDEX, index) ? V3AddTokenInput.firstTokenInput : V3AddTokenInput.secondTokenInput; + const formikKey = getCurrentFormikKeyAdd(index); return { - value: formik.values[formikId], - error: formik.errors[formikId], + id: `v3-add-liq-form-${index}`, + value: formik.values[formikKey], + error: formik.errors[formikKey], balance: userBalances[index], label: t('common|Input'), tokens: token, diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts index 9fe909331..c67a4a647 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts @@ -1,6 +1,6 @@ import { FormikHelpers, FormikValues, useFormik } from 'formik'; -import { FIRST_INDEX, ZERO_AMOUNT } from '@config/constants'; +import { FIRST_INDEX, PERCENTAGE_100, ZERO_AMOUNT } from '@config/constants'; import { useLiquidityV3ItemTokens, useLiquidityV3PoolStore, @@ -76,6 +76,7 @@ export const useV3RemoveLiqFormViewModel = () => { const formikId = isEqual(FIRST_INDEX, index) ? V3RemoveTokenInput.tokenXInput : V3RemoveTokenInput.tokenYInput; return { + id: `v3-output-${index}`, value: formik.values[formikId], error: formik.errors[formikId], label: t('common|Output'), @@ -88,8 +89,10 @@ export const useV3RemoveLiqFormViewModel = () => { }); const lpData = { + id: 'v3-lp-input', value: formik.values[V3RemoveTokenInput.lpTokenInput], error: formik.errors[V3RemoveTokenInput.lpTokenInput], + balance: PERCENTAGE_100, label: t('common|Amount'), tokens: [tokenX, tokenY], hiddenBalance: true, From 61c47cdf8046b0d68f6f1fd389ff5fcb50b34d33 Mon Sep 17 00:00:00 2001 From: Artem Date: Fri, 6 Jan 2023 12:46:05 +0200 Subject: [PATCH 06/45] QUIPU-676 remove excess code --- .../liquidity-v3-form-tabs-card.tsx | 1 - src/shared/helpers/get-user-balances.ts | 6 ------ src/shared/helpers/index.ts | 1 - 3 files changed, 8 deletions(-) delete mode 100644 src/shared/helpers/get-user-balances.ts diff --git a/src/modules/liquidity/pages/v3-item-page/components/liquidity-v3-form-tabs-card/liquidity-v3-form-tabs-card.tsx b/src/modules/liquidity/pages/v3-item-page/components/liquidity-v3-form-tabs-card/liquidity-v3-form-tabs-card.tsx index 47b42afcb..4e0c12b36 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/liquidity-v3-form-tabs-card/liquidity-v3-form-tabs-card.tsx +++ b/src/modules/liquidity/pages/v3-item-page/components/liquidity-v3-form-tabs-card/liquidity-v3-form-tabs-card.tsx @@ -1,4 +1,3 @@ -/* eslint-disable no-console */ import { observer } from 'mobx-react-lite'; import { FormHeader } from '@modules/liquidity/components'; diff --git a/src/shared/helpers/get-user-balances.ts b/src/shared/helpers/get-user-balances.ts deleted file mode 100644 index d92ad6d5e..000000000 --- a/src/shared/helpers/get-user-balances.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { useTokenBalance } from '@shared/hooks'; -import { Nullable, Token } from '@shared/types'; - -export const getUserBalances = (tokens: Array>) => { - return tokens.map(token => useTokenBalance(token) ?? null); -}; diff --git a/src/shared/helpers/index.ts b/src/shared/helpers/index.ts index ac85b611b..0718638c2 100644 --- a/src/shared/helpers/index.ts +++ b/src/shared/helpers/index.ts @@ -69,5 +69,4 @@ export * from './sort'; export * from './token-matches-search'; export * from './fp'; export * from './tokens-value'; -export * from './get-user-balances'; export * from './math'; From 28fcf04fdf61cad0aa6f0b9af153f2e44aebfad8 Mon Sep 17 00:00:00 2001 From: Inokentii Mazhara Date: Tue, 10 Jan 2023 12:39:40 +0200 Subject: [PATCH 07/45] Remove 'Stableswap Liquidity' tab --- .../header/navigation/navigation-data.tsx | 21 ++++--------------- src/translation/locales/en/common.ts | 1 + 2 files changed, 5 insertions(+), 17 deletions(-) diff --git a/src/shared/components/header/navigation/navigation-data.tsx b/src/shared/components/header/navigation/navigation-data.tsx index b6a844a52..ed58293a7 100644 --- a/src/shared/components/header/navigation/navigation-data.tsx +++ b/src/shared/components/header/navigation/navigation-data.tsx @@ -81,23 +81,10 @@ export const NAVIGATION_DATA: NavigationDataProps[] = [ Icon: GameIcon }, { - id: 'Stableswap', - to: AppRootRoutes.Stableswap, - label: i18n.t('common|Stableswap'), - Icon: StableswapIcon, - opened: true, - links: [ - { - id: 'Stableswap_Dividends', - to: `${AppRootRoutes.Stableswap}${StableswapRoutes.dividends}`, - label: i18n.t('common|Dividends') - }, - { - id: 'Stableswap_Liquidity', - to: `${AppRootRoutes.Stableswap}${StableswapRoutes.liquidity}`, - label: i18n.t('common|Liquidity') - } - ] + id: 'Stableswap_Dividends', + to: `${AppRootRoutes.Stableswap}${StableswapRoutes.dividends}`, + label: i18n.t('common|Stableswap Dividends'), + Icon: StableswapIcon }, { id: 'Analytics', diff --git a/src/translation/locales/en/common.ts b/src/translation/locales/en/common.ts index c1daf5b5b..07703aa10 100644 --- a/src/translation/locales/en/common.ts +++ b/src/translation/locales/en/common.ts @@ -16,6 +16,7 @@ export const common = { Stableswap: 'Stableswap', Dividends: 'Dividends', 'Stableswap Liquidity': 'Stableswap Liquidity', + 'Stableswap Dividends': 'Stableswap Dividends', Feedback: 'Feedback', Analytics: 'Analytics', Allbridge: 'Allbridge', From 7a1976bf047c2c3d500dd568bb25a6128e084741 Mon Sep 17 00:00:00 2001 From: Inokentii Mazhara Date: Tue, 10 Jan 2023 15:08:40 +0200 Subject: [PATCH 08/45] Rename tab --- src/shared/components/header/navigation/navigation-data.tsx | 2 +- src/translation/locales/en/common.ts | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/shared/components/header/navigation/navigation-data.tsx b/src/shared/components/header/navigation/navigation-data.tsx index ed58293a7..c8150559e 100644 --- a/src/shared/components/header/navigation/navigation-data.tsx +++ b/src/shared/components/header/navigation/navigation-data.tsx @@ -83,7 +83,7 @@ export const NAVIGATION_DATA: NavigationDataProps[] = [ { id: 'Stableswap_Dividends', to: `${AppRootRoutes.Stableswap}${StableswapRoutes.dividends}`, - label: i18n.t('common|Stableswap Dividends'), + label: i18n.t('common|Dividends'), Icon: StableswapIcon }, { diff --git a/src/translation/locales/en/common.ts b/src/translation/locales/en/common.ts index 07703aa10..c1daf5b5b 100644 --- a/src/translation/locales/en/common.ts +++ b/src/translation/locales/en/common.ts @@ -16,7 +16,6 @@ export const common = { Stableswap: 'Stableswap', Dividends: 'Dividends', 'Stableswap Liquidity': 'Stableswap Liquidity', - 'Stableswap Dividends': 'Stableswap Dividends', Feedback: 'Feedback', Analytics: 'Analytics', Allbridge: 'Allbridge', From 5b93fa61ee22693f628d6e8ca564bc2a31c53c4a Mon Sep 17 00:00:00 2001 From: Inokentii Mazhara Date: Tue, 10 Jan 2023 16:03:22 +0200 Subject: [PATCH 09/45] Remove 'Stableswap liquidity' page --- cypress/e2e/SSL/PoolExists.spec.js | 2 +- cypress/e2e/SSL/VisualTesting.spec.js | 16 --- .../pages/list/liquidity-list.page.tsx | 2 +- .../components/form-header/form-header.tsx | 14 +-- .../stableswap-form-tabs-card.tsx | 6 +- .../use-stableswap-form-tabs-card.vm.ts | 4 + src/modules/stableswap/hooks/loaders/index.ts | 2 - .../hooks/loaders/use-get-stableswap-list.ts | 32 ------ .../hooks/loaders/use-get-stableswap-stats.ts | 26 ----- src/modules/stableswap/hooks/store/index.ts | 2 - .../store/use-stableswap-filter-store.ts | 9 -- .../hooks/store/use-stableswap-list-store.ts | 9 -- .../components/create-form/create-form.tsx | 10 +- .../stableswap-liquidity-create.page.tsx | 3 +- .../stableswap-liquidity/pages/index.ts | 1 - .../pages/list/components/index.ts | 3 - .../list/components/pool-creation/index.ts | 1 - .../pool-creation/pool-creation.module.scss | 56 ---------- .../pool-creation/pool-creation.tsx | 34 ------ .../index.ts | 1 - ...leswap-liquidity-general-stats.module.scss | 19 ---- .../stableswap-liquidity-general-stats.tsx | 23 ---- .../stableswap-liquidity-general-stats.vm.ts | 9 -- .../stableswap-liquidity-list-filter/index.ts | 1 - ...ableswap-liquidity-list-filter.module.scss | 35 ------ .../stableswap-liquidity-list-filter.tsx | 13 --- ...use-stableswap-liquidity-list-filter.vm.ts | 100 ----------------- .../pages/list/components/tvl/index.ts | 1 - .../pages/list/components/tvl/tvl.module.scss | 33 ------ .../pages/list/components/tvl/tvl.tsx | 34 ------ .../pages/list/helpers/index.ts | 1 - .../pages/list/helpers/sorter.helpers.ts | 38 ------- .../stableswap-liquidity/pages/list/index.ts | 1 - ...stableswap-liquidity-list.page.module.scss | 5 - .../list/stableswap-liquidity-list.page.tsx | 33 ------ .../pages/list/types/index.ts | 1 - .../pages/list/types/sort.ts | 9 -- .../use-stableswap-liquidity-list.page.vm.ts | 101 ------------------ .../stableswap-liquidity.routing.tsx | 3 - .../stableswap-liquidity.routing.vm.ts | 9 +- src/modules/stableswap/stableswap.routing.tsx | 8 +- src/modules/stableswap/store/index.ts | 2 - .../store/stableswap-filter.store.ts | 47 -------- .../stableswap/store/stableswap-list.store.ts | 48 --------- .../components/sorter-view/sorter.view.tsx | 11 +- src/shared/store/root.store.ts | 22 ---- 46 files changed, 20 insertions(+), 820 deletions(-) delete mode 100644 cypress/e2e/SSL/VisualTesting.spec.js delete mode 100644 src/modules/stableswap/hooks/loaders/use-get-stableswap-list.ts delete mode 100644 src/modules/stableswap/hooks/loaders/use-get-stableswap-stats.ts delete mode 100644 src/modules/stableswap/hooks/store/use-stableswap-filter-store.ts delete mode 100644 src/modules/stableswap/hooks/store/use-stableswap-list-store.ts delete mode 100644 src/modules/stableswap/stableswap-liquidity/pages/list/components/index.ts delete mode 100644 src/modules/stableswap/stableswap-liquidity/pages/list/components/pool-creation/index.ts delete mode 100644 src/modules/stableswap/stableswap-liquidity/pages/list/components/pool-creation/pool-creation.module.scss delete mode 100644 src/modules/stableswap/stableswap-liquidity/pages/list/components/pool-creation/pool-creation.tsx delete mode 100644 src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-general-stats/index.ts delete mode 100644 src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-general-stats/stableswap-liquidity-general-stats.module.scss delete mode 100644 src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-general-stats/stableswap-liquidity-general-stats.tsx delete mode 100644 src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-general-stats/stableswap-liquidity-general-stats.vm.ts delete mode 100644 src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-list-filter/index.ts delete mode 100644 src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-list-filter/stableswap-liquidity-list-filter.module.scss delete mode 100644 src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-list-filter/stableswap-liquidity-list-filter.tsx delete mode 100644 src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-list-filter/use-stableswap-liquidity-list-filter.vm.ts delete mode 100644 src/modules/stableswap/stableswap-liquidity/pages/list/components/tvl/index.ts delete mode 100644 src/modules/stableswap/stableswap-liquidity/pages/list/components/tvl/tvl.module.scss delete mode 100644 src/modules/stableswap/stableswap-liquidity/pages/list/components/tvl/tvl.tsx delete mode 100644 src/modules/stableswap/stableswap-liquidity/pages/list/helpers/index.ts delete mode 100644 src/modules/stableswap/stableswap-liquidity/pages/list/helpers/sorter.helpers.ts delete mode 100644 src/modules/stableswap/stableswap-liquidity/pages/list/index.ts delete mode 100644 src/modules/stableswap/stableswap-liquidity/pages/list/stableswap-liquidity-list.page.module.scss delete mode 100644 src/modules/stableswap/stableswap-liquidity/pages/list/stableswap-liquidity-list.page.tsx delete mode 100644 src/modules/stableswap/stableswap-liquidity/pages/list/types/index.ts delete mode 100644 src/modules/stableswap/stableswap-liquidity/pages/list/types/sort.ts delete mode 100644 src/modules/stableswap/stableswap-liquidity/pages/list/use-stableswap-liquidity-list.page.vm.ts delete mode 100644 src/modules/stableswap/store/stableswap-filter.store.ts delete mode 100644 src/modules/stableswap/store/stableswap-list.store.ts diff --git a/cypress/e2e/SSL/PoolExists.spec.js b/cypress/e2e/SSL/PoolExists.spec.js index e3ac70118..fa2b55ad6 100644 --- a/cypress/e2e/SSL/PoolExists.spec.js +++ b/cypress/e2e/SSL/PoolExists.spec.js @@ -19,6 +19,6 @@ describe('Specific pool exist', () => { // check if 'back to list' arrow works it('Should_DisplaySSLList_When_ClickOnBackArrow', () => { cy.get('[data-test-id="stableswapFromTabsCard"] [data-test-id="backTTListButton"]').click(); - cy.get('[data-test-id="SSLPageTitle"]').should('contain', 'Stableswap Liquidity'); + cy.get('[data-test-id="LiquidityListTitle"]').should('contain', 'Liquidity'); }); }); diff --git a/cypress/e2e/SSL/VisualTesting.spec.js b/cypress/e2e/SSL/VisualTesting.spec.js deleted file mode 100644 index 23c464b7e..000000000 --- a/cypress/e2e/SSL/VisualTesting.spec.js +++ /dev/null @@ -1,16 +0,0 @@ -/// - -import { DEFAULT_WAIT_TIMEOUT } from '../../const'; - -describe('Visual testing of the SSL form', () => { - it.skip('Should_DisplayCorrectSSLForm_When_OpenedSSLPage', () => { - cy.visit('/stableswap/liquidity'); - cy.get('[data-test-id="acceptCookieButton"]').click(); - cy.wait(DEFAULT_WAIT_TIMEOUT); - cy.percySnapshot('SSLPagelayout', { - percyCSS: ` - [data-test-id="SSLDashboardStatsInfo"], [data-test-id="stableliquidityList"] { display: none; }; - ` - }) - }); -}); diff --git a/src/modules/liquidity/pages/list/liquidity-list.page.tsx b/src/modules/liquidity/pages/list/liquidity-list.page.tsx index 6360f1d7a..e0bc8d8d1 100644 --- a/src/modules/liquidity/pages/list/liquidity-list.page.tsx +++ b/src/modules/liquidity/pages/list/liquidity-list.page.tsx @@ -17,7 +17,7 @@ export const LiquidityListPage: FC = observer(() => { return ( <> - {t('liquidity|Liquidity')} + {t('liquidity|Liquidity')} diff --git a/src/modules/stableswap/components/form-header/form-header.tsx b/src/modules/stableswap/components/form-header/form-header.tsx index a50e92b76..69ec66016 100644 --- a/src/modules/stableswap/components/form-header/form-header.tsx +++ b/src/modules/stableswap/components/form-header/form-header.tsx @@ -1,29 +1,21 @@ import { FC } from 'react'; -import { AppRootRoutes } from '@app.router'; import { Button } from '@shared/components'; import { ArrowDown } from '@shared/svg'; import { useTranslation } from '@translation'; -import { StableswapContentRoutes } from '../../stableswap-routes.enum'; import styles from './form-header.module.scss'; interface Props { - subpath: StableswapContentRoutes; + backHref: string; } -export const FormHeader: FC = ({ subpath }) => { +export const FormHeader: FC = ({ backHref }) => { const { t } = useTranslation(); return (
- {t('common|Back')} diff --git a/src/modules/stableswap/components/stableswap-form-tabs-card/stableswap-form-tabs-card.tsx b/src/modules/stableswap/components/stableswap-form-tabs-card/stableswap-form-tabs-card.tsx index 40ccd8b5e..9b6a78db0 100644 --- a/src/modules/stableswap/components/stableswap-form-tabs-card/stableswap-form-tabs-card.tsx +++ b/src/modules/stableswap/components/stableswap-form-tabs-card/stableswap-form-tabs-card.tsx @@ -1,10 +1,10 @@ import { observer } from 'mobx-react-lite'; +import { StableswapContentRoutes } from '@modules/stableswap/stableswap-routes.enum'; import { Card, SettingsButton, Skeleton, Tabs } from '@shared/components'; import { CFC } from '@shared/types'; import styles from '@styles/CommonContainer.module.scss'; -import { StableswapContentRoutes } from '../../stableswap-routes.enum'; import { StableswapFormTabs } from '../../types'; import { FormHeader } from '../form-header'; import { TabsContent, useStableswapFormTabsCardViewModel } from './use-stableswap-form-tabs-card.vm'; @@ -15,7 +15,7 @@ interface Props { } export const StableswapFormTabsCard: CFC = observer(({ subpath, tabActiveId, children }) => { - const { isLoading, changeTabHandle } = useStableswapFormTabsCardViewModel({ subpath }); + const { backHref, isLoading, changeTabHandle } = useStableswapFormTabsCardViewModel({ subpath }); if (isLoading) { return ; @@ -24,7 +24,7 @@ export const StableswapFormTabsCard: CFC = observer(({ subpath, tabActive return ( + content: }} subheader={{ content: ( diff --git a/src/modules/stableswap/components/stableswap-form-tabs-card/use-stableswap-form-tabs-card.vm.ts b/src/modules/stableswap/components/stableswap-form-tabs-card/use-stableswap-form-tabs-card.vm.ts index 5724945b9..70f1ac150 100644 --- a/src/modules/stableswap/components/stableswap-form-tabs-card/use-stableswap-form-tabs-card.vm.ts +++ b/src/modules/stableswap/components/stableswap-form-tabs-card/use-stableswap-form-tabs-card.vm.ts @@ -56,6 +56,10 @@ export const useStableswapFormTabsCardViewModel = ({ subpath }: Params) => { ); return { + backHref: + subpath === StableswapRoutes.liquidity + ? AppRootRoutes.Liquidity + : `${AppRootRoutes.Stableswap}${StableswapRoutes.dividends}`, isLoading: !Boolean(stableswapItemStore?.item) && !Boolean(stableDividendsItemStore?.item), changeTabHandle }; diff --git a/src/modules/stableswap/hooks/loaders/index.ts b/src/modules/stableswap/hooks/loaders/index.ts index 8c472811d..12d470b26 100644 --- a/src/modules/stableswap/hooks/loaders/index.ts +++ b/src/modules/stableswap/hooks/loaders/index.ts @@ -1,5 +1,3 @@ export * from './use-get-stabledividends-list'; -export * from './use-get-stableswap-list'; export * from './use-get-stableswap-item'; -export * from './use-get-stableswap-stats'; export * from './use-get-stabledividends-item'; diff --git a/src/modules/stableswap/hooks/loaders/use-get-stableswap-list.ts b/src/modules/stableswap/hooks/loaders/use-get-stableswap-list.ts deleted file mode 100644 index 2383ee0d4..000000000 --- a/src/modules/stableswap/hooks/loaders/use-get-stableswap-list.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { useCallback } from 'react'; - -import { useReady } from '@providers/use-dapp'; -import { useAuthStore } from '@shared/hooks'; -import { noopMap } from '@shared/mapping'; -import { useToasts } from '@shared/utils'; - -import { useStableswapListStore } from '../store'; - -export const useGetStableswapList = () => { - const { showErrorToast } = useToasts(); - const authStore = useAuthStore(); - const isReady = useReady(); - const { listStore } = useStableswapListStore(); - - const getStableswapList = useCallback(async () => { - if (!isReady) { - return; - } - - try { - await listStore.load(); - } catch (error) { - showErrorToast(error as Error); - } - - // We need it only for dependency for loading list based on it. - noopMap(authStore.accountPkh); - }, [authStore.accountPkh, isReady, showErrorToast, listStore]); - - return { getStableswapList }; -}; diff --git a/src/modules/stableswap/hooks/loaders/use-get-stableswap-stats.ts b/src/modules/stableswap/hooks/loaders/use-get-stableswap-stats.ts deleted file mode 100644 index d2f850ce6..000000000 --- a/src/modules/stableswap/hooks/loaders/use-get-stableswap-stats.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { useCallback } from 'react'; - -import { useReady } from '@providers/use-dapp'; -import { useToasts } from '@shared/utils'; - -import { useStableswapListStore } from '../store'; - -export const useGetStableswapStats = () => { - const { showErrorToast } = useToasts(); - const stableswapListStore = useStableswapListStore(); - const isReady = useReady(); - - const getStableswapStats = useCallback(async () => { - if (!isReady) { - return; - } - - try { - await stableswapListStore.statsStore.load(); - } catch (error) { - showErrorToast(error as Error); - } - }, [isReady, showErrorToast, stableswapListStore.statsStore]); - - return { getStableswapStats }; -}; diff --git a/src/modules/stableswap/hooks/store/index.ts b/src/modules/stableswap/hooks/store/index.ts index 2930380ff..83ec12d3a 100644 --- a/src/modules/stableswap/hooks/store/index.ts +++ b/src/modules/stableswap/hooks/store/index.ts @@ -1,7 +1,5 @@ export * from './use-stabledividends-list.store'; -export * from './use-stableswap-list-store'; export * from './use-stableswap-item-store'; export * from './use-stableswap-item-form-store'; -export * from './use-stableswap-filter-store'; export * from './use-stabledividends-filter.store'; export * from './use-stabledividends-item.store'; diff --git a/src/modules/stableswap/hooks/store/use-stableswap-filter-store.ts b/src/modules/stableswap/hooks/store/use-stableswap-filter-store.ts deleted file mode 100644 index 0491e2f1e..000000000 --- a/src/modules/stableswap/hooks/store/use-stableswap-filter-store.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { useRootStore } from '@providers/root-store-provider'; - -import { StableswapFilterStore } from '../../store'; - -export const useStableswapFilterStore = () => { - const { stableswapFilterStore } = useRootStore(); - - return stableswapFilterStore as StableswapFilterStore; -}; diff --git a/src/modules/stableswap/hooks/store/use-stableswap-list-store.ts b/src/modules/stableswap/hooks/store/use-stableswap-list-store.ts deleted file mode 100644 index 1b9a16abe..000000000 --- a/src/modules/stableswap/hooks/store/use-stableswap-list-store.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { useRootStore } from '@providers/root-store-provider'; - -import { StableswapListStore } from '../../store'; - -export const useStableswapListStore = () => { - const { stableswapListStore } = useRootStore(); - - return stableswapListStore as StableswapListStore; -}; diff --git a/src/modules/stableswap/stableswap-liquidity/pages/create/components/create-form/create-form.tsx b/src/modules/stableswap/stableswap-liquidity/pages/create/components/create-form/create-form.tsx index b4a2d21de..4ac3000ec 100644 --- a/src/modules/stableswap/stableswap-liquidity/pages/create/components/create-form/create-form.tsx +++ b/src/modules/stableswap/stableswap-liquidity/pages/create/components/create-form/create-form.tsx @@ -2,6 +2,7 @@ import { FC } from 'react'; import { observer } from 'mobx-react-lite'; +import { AppRootRoutes } from '@app.router'; import { Card, Button, @@ -17,16 +18,11 @@ import styles from '@styles/CommonContainer.module.scss'; import { i18n } from '@translation'; import { FormHeader } from '../../../../../components'; -import { StableswapContentRoutes } from '../../../../../stableswap-routes.enum'; import { CreationCost, SelectTokensButton } from '../../components'; import createFormStyles from './create-form.module.scss'; import { useCreateFormViewModel } from './create-form.vm'; -interface Props { - subpath: StableswapContentRoutes; -} - -export const CreateForm: FC = observer(({ subpath }) => { +export const CreateForm: FC = observer(() => { const { liquidityProvidersFeeInputParams, tokenInputsParams, @@ -40,7 +36,7 @@ export const CreateForm: FC = observer(({ subpath }) => { return ( + content: }} contentClassName={styles.content} data-test-id="stableswapCreateForm" diff --git a/src/modules/stableswap/stableswap-liquidity/pages/create/stableswap-liquidity-create.page.tsx b/src/modules/stableswap/stableswap-liquidity/pages/create/stableswap-liquidity-create.page.tsx index e21c9cf22..666bcb204 100644 --- a/src/modules/stableswap/stableswap-liquidity/pages/create/stableswap-liquidity-create.page.tsx +++ b/src/modules/stableswap/stableswap-liquidity/pages/create/stableswap-liquidity-create.page.tsx @@ -1,7 +1,6 @@ import { PageTitle, StickyBlock, TestnetAlert } from '@shared/components'; import { i18n } from '@translation'; -import { StableswapRoutes } from '../../../stableswap-routes.enum'; import { CreateForm, DetailsRules } from './components'; export const StableswapLiquidityCreatePage = () => { @@ -11,7 +10,7 @@ export const StableswapLiquidityCreatePage = () => { {i18n.t('stableswap|newPool')} - + diff --git a/src/modules/stableswap/stableswap-liquidity/pages/index.ts b/src/modules/stableswap/stableswap-liquidity/pages/index.ts index 1f0bfc318..6c5647ed9 100644 --- a/src/modules/stableswap/stableswap-liquidity/pages/index.ts +++ b/src/modules/stableswap/stableswap-liquidity/pages/index.ts @@ -1,3 +1,2 @@ export * from './item'; -export * from './list'; export * from './create'; diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/components/index.ts b/src/modules/stableswap/stableswap-liquidity/pages/list/components/index.ts deleted file mode 100644 index ddaf86671..000000000 --- a/src/modules/stableswap/stableswap-liquidity/pages/list/components/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './pool-creation'; -export * from './stableswap-liquidity-list-filter'; -export * from './stableswap-liquidity-general-stats'; diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/components/pool-creation/index.ts b/src/modules/stableswap/stableswap-liquidity/pages/list/components/pool-creation/index.ts deleted file mode 100644 index 633cc4538..000000000 --- a/src/modules/stableswap/stableswap-liquidity/pages/list/components/pool-creation/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './pool-creation'; diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/components/pool-creation/pool-creation.module.scss b/src/modules/stableswap/stableswap-liquidity/pages/list/components/pool-creation/pool-creation.module.scss deleted file mode 100644 index db837d31f..000000000 --- a/src/modules/stableswap/stableswap-liquidity/pages/list/components/pool-creation/pool-creation.module.scss +++ /dev/null @@ -1,56 +0,0 @@ -@import '@styles/variables'; -@import '@styles/breakpoints'; - -.createPool { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding: 24px; -} - -.poolCreateDescription { - font-weight: 600; - font-size: 14px; - line-height: 24px; - white-space: nowrap; - margin-bottom: 16px; -} - -.button { - max-width: 280px; -} - -.light { - &.poolCreateDescription { - color: $text-01; - } -} - -.dark { - &.poolCreateDescription { - color: $text-inverse; - } -} - -@include media('>tablet') { - .createPool { - flex-direction: column; - height: 128px; - } - - .button { - max-width: 160px; - margin-left: 24px; - } -} - -@include media('>Ltablet') { - .createPool { - flex-direction: row; - } - - .poolCreateDescription { - margin-bottom: 0; - } -} diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/components/pool-creation/pool-creation.tsx b/src/modules/stableswap/stableswap-liquidity/pages/list/components/pool-creation/pool-creation.tsx deleted file mode 100644 index be43c0f5a..000000000 --- a/src/modules/stableswap/stableswap-liquidity/pages/list/components/pool-creation/pool-creation.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { FC, useContext } from 'react'; - -import cx from 'classnames'; - -import { AppRootRoutes } from '@app.router'; -import { ColorThemeContext, ColorModes } from '@providers/color-theme-context'; -import { Button } from '@shared/components'; -import { useTranslation } from '@translation'; - -import { StableswapRoutes } from '../../../../../stableswap-routes.enum'; -import { StableswapLiquidityFormTabs } from '../../../../../types'; -import styles from './pool-creation.module.scss'; - -const modeClass = { - [ColorModes.Light]: styles.light, - [ColorModes.Dark]: styles.dark -}; - -export const PoolCreation: FC = () => { - const { colorThemeMode } = useContext(ColorThemeContext); - const { t } = useTranslation('stableswap'); - - return ( -
-
{t('stableswap|createOwnPool')}
- -
- ); -}; diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-general-stats/index.ts b/src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-general-stats/index.ts deleted file mode 100644 index bc22bd8eb..000000000 --- a/src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-general-stats/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './stableswap-liquidity-general-stats'; diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-general-stats/stableswap-liquidity-general-stats.module.scss b/src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-general-stats/stableswap-liquidity-general-stats.module.scss deleted file mode 100644 index fb10dbb77..000000000 --- a/src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-general-stats/stableswap-liquidity-general-stats.module.scss +++ /dev/null @@ -1,19 +0,0 @@ -@import '@styles/variables'; -@import '@styles/breakpoints'; - -.dashboardStatsInfoMB { - margin-bottom: 64px; -} - -.cardContent { - display: flex; - flex-direction: column; - align-items: center; - padding: 0; -} - -@include media('>tablet') { - .cardContent { - flex-direction: row; - } -} diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-general-stats/stableswap-liquidity-general-stats.tsx b/src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-general-stats/stableswap-liquidity-general-stats.tsx deleted file mode 100644 index b0324a81d..000000000 --- a/src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-general-stats/stableswap-liquidity-general-stats.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { FC } from 'react'; - -import { observer } from 'mobx-react-lite'; - -import { DashboardStatsInfo } from '@shared/components'; - -import { Tvl } from '../tvl'; -import styles from './stableswap-liquidity-general-stats.module.scss'; -import { useStableswapLiquidityGeneralStatsViewModel } from './stableswap-liquidity-general-stats.vm'; - -// TODO: add PoolCreation -export const StableswapLiquidityGeneralStats: FC = observer(() => { - const { tvl } = useStableswapLiquidityGeneralStatsViewModel(); - - return ( - ]} - contentClassName={styles.cardContent} - className={styles.dashboardStatsInfoMB} - DTI="SSLDashboardStatsInfo" - /> - ); -}); diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-general-stats/stableswap-liquidity-general-stats.vm.ts b/src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-general-stats/stableswap-liquidity-general-stats.vm.ts deleted file mode 100644 index cb65a4a62..000000000 --- a/src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-general-stats/stableswap-liquidity-general-stats.vm.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { useStableswapListStore } from '@modules/stableswap/hooks'; - -export const useStableswapLiquidityGeneralStatsViewModel = () => { - const { stats } = useStableswapListStore(); - - return { - tvl: stats?.totalTvlInUsd ?? null - }; -}; diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-list-filter/index.ts b/src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-list-filter/index.ts deleted file mode 100644 index b0bf733d5..000000000 --- a/src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-list-filter/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './stableswap-liquidity-list-filter'; diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-list-filter/stableswap-liquidity-list-filter.module.scss b/src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-list-filter/stableswap-liquidity-list-filter.module.scss deleted file mode 100644 index 00dd4f4e8..000000000 --- a/src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-list-filter/stableswap-liquidity-list-filter.module.scss +++ /dev/null @@ -1,35 +0,0 @@ -@import "@styles/variables"; -@import "@styles/breakpoints"; - -.switcherContainer { - display: flex; - align-items: center; - column-gap: 8px; - flex: 1; - span { - color: $text-03; - font-weight: 600; - font-size: 14px; - line-height: 16px; - } -} - -.switcherTranslation { - min-width: max-content; -} - -@include media(">Lphone") { - .switcherWhitelistedOnly { - grid-row: 3 / 4; - } -} - -@include media(">Ltablet") { - .switcherWhitelistedOnly { - grid-column: 3 / 4; - } - - .switcherWhitelistedOnly { - grid-row: none; - } -} diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-list-filter/stableswap-liquidity-list-filter.tsx b/src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-list-filter/stableswap-liquidity-list-filter.tsx deleted file mode 100644 index 6931f4222..000000000 --- a/src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-list-filter/stableswap-liquidity-list-filter.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { FC } from 'react'; - -import { observer } from 'mobx-react-lite'; - -import { ListFilterInputView } from '@shared/components'; - -import { useStableswapLiquidityListFilterViewModel } from './use-stableswap-liquidity-list-filter.vm'; - -export const StableswapLiquidityListFilter: FC = observer(() => { - const params = useStableswapLiquidityListFilterViewModel(); - - return ; -}); diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-list-filter/use-stableswap-liquidity-list-filter.vm.ts b/src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-list-filter/use-stableswap-liquidity-list-filter.vm.ts deleted file mode 100644 index 11653e62b..000000000 --- a/src/modules/stableswap/stableswap-liquidity/pages/list/components/stableswap-liquidity-list-filter/use-stableswap-liquidity-list-filter.vm.ts +++ /dev/null @@ -1,100 +0,0 @@ -import cx from 'classnames'; - -import { ListFilterInputViewProps } from '@shared/components'; -import { isDirectOrder } from '@shared/helpers'; -import { useBaseFilterStoreConverter } from '@shared/hooks'; -import { useTranslation } from '@translation'; - -import { useStableswapFilterStore } from '../../../../../hooks'; -import { StableswapSortField, StableswapSortFieldItem } from '../../types'; -import styles from './stableswap-liquidity-list-filter.module.scss'; - -export const useStableswapLiquidityListFilterViewModel = (): ListFilterInputViewProps => { - const { t } = useTranslation(); - const stableswapFilterStore = useStableswapFilterStore(); - - const { - search, - tokenIdValue, - sortDirection, - - onSearchChange, - onTokenIdChange, - - handleIncrement, - handleDecrement, - - handleSortDirectionToggle - } = useBaseFilterStoreConverter(stableswapFilterStore); - - const { sortField, whitelistedOnly } = stableswapFilterStore; - - const handleSortFieldChange = (value: unknown) => { - const item = value as StableswapSortFieldItem; - - return stableswapFilterStore.onSortFieldChange(item.field); - }; - - const sortingValues: StableswapSortFieldItem[] = [ - { label: t('common|Default'), field: StableswapSortField.ID }, - { label: t('farm|tvl'), field: StableswapSortField.TVL } - ]; - - const sortingValue = sortingValues - .map(item => ({ - ...item, - label: `Sorted by ${item.label}` - })) - .find(({ field }) => field === sortField); - - const sortDirectionRotate = isDirectOrder(sortDirection); - - const setWhitelistedOnly = (state: boolean) => { - return stableswapFilterStore.setWhitelistedOnly(state); - }; - - const switcherDataList = [ - { - value: whitelistedOnly, - onClick: setWhitelistedOnly, - switcherDTI: 'whitelistedOnlySwitcher', - switcherTranslationDTI: 'whitelistedOnlySwitcherTranslation', - translation: t('stableswap|Whitelisted Only'), - translationClassName: styles.switcherTranslation, - className: cx(styles.switcherContainer, styles.switcherWhitelistedOnly) - } - ]; - - const inputDTI = { - searchInputDTI: 'searchInput', - numberInputDTI: 'numberInput' - }; - - const translation = { - inputPlaceholderTranslation: t('common|Search'), - numberInputPlaceholderTranslation: t('common|Token ID') - }; - - const sorterProps = { - sortingValue, - sortDirectionRotate, - sortingValues, - handleSortFieldChange, - handleSortDirectionToggle, - buttonDTI: 'SSLASC/DESCSortButton', - sorterSelectDTI: 'sorterSelect' - }; - - return { - search, - tokenIdValue, - onSearchChange, - onTokenIdChange, - handleIncrement, - handleDecrement, - translation, - sorterProps, - switcherDataList, - inputDTI - }; -}; diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/components/tvl/index.ts b/src/modules/stableswap/stableswap-liquidity/pages/list/components/tvl/index.ts deleted file mode 100644 index b7aea6bac..000000000 --- a/src/modules/stableswap/stableswap-liquidity/pages/list/components/tvl/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './tvl'; diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/components/tvl/tvl.module.scss b/src/modules/stableswap/stableswap-liquidity/pages/list/components/tvl/tvl.module.scss deleted file mode 100644 index e6c7c0f5e..000000000 --- a/src/modules/stableswap/stableswap-liquidity/pages/list/components/tvl/tvl.module.scss +++ /dev/null @@ -1,33 +0,0 @@ -@import '@styles/variables'; -@import '@styles/breakpoints'; - -.tvl { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - padding: 24px; -} - -.tvlTitle { - display: flex; - align-items: center; - color: $text-03; - font-weight: 600; - font-size: 16px; - line-height: 24px; - margin-bottom: 8px; -} - -.amount { - font-weight: 600; - font-size: 18px; - line-height: 24px; -} - -@include media('>tablet') { - .amount { - font-size: 32px; - line-height: 48px; - } -} diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/components/tvl/tvl.tsx b/src/modules/stableswap/stableswap-liquidity/pages/list/components/tvl/tvl.tsx deleted file mode 100644 index 671c8c776..000000000 --- a/src/modules/stableswap/stableswap-liquidity/pages/list/components/tvl/tvl.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { FC } from 'react'; - -import { BigNumber } from 'bignumber.js'; - -import { DOLLAR } from '@config/constants'; -import { StateCurrencyAmount, Tooltip } from '@shared/components'; -import { Nullable } from '@shared/types'; -import { useTranslation } from '@translation'; - -import styles from './tvl.module.scss'; - -interface Props { - amount: Nullable; -} - -export const Tvl: FC = ({ amount }) => { - const { t } = useTranslation('stableswap'); - - return ( -
-
- {t('stableswap|tvl')} - -
- -
- ); -}; diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/helpers/index.ts b/src/modules/stableswap/stableswap-liquidity/pages/list/helpers/index.ts deleted file mode 100644 index 5bf2347bb..000000000 --- a/src/modules/stableswap/stableswap-liquidity/pages/list/helpers/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './sorter.helpers'; diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/helpers/sorter.helpers.ts b/src/modules/stableswap/stableswap-liquidity/pages/list/helpers/sorter.helpers.ts deleted file mode 100644 index 92c1e725c..000000000 --- a/src/modules/stableswap/stableswap-liquidity/pages/list/helpers/sorter.helpers.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { cloneArray, isNull, sortBigNumber, SortDirection } from '@shared/helpers'; - -import { StableswapItemModel } from '../../../../models'; -import { StableswapSortField } from '../types'; - -const sortById = (first: StableswapItemModel, second: StableswapItemModel, sortDirection: SortDirection) => - sortBigNumber(first.id, second.id, sortDirection); - -const sortByTvl = (first: StableswapItemModel, second: StableswapItemModel, sortDirection: SortDirection) => - sortBigNumber(first.tvlInUsd, second.tvlInUsd, sortDirection); - -const stableswapSorts = { - [StableswapSortField.ID]: sortById, - [StableswapSortField.TVL]: sortByTvl -}; - -const sortStableswap = ( - first: StableswapItemModel, - second: StableswapItemModel, - sortField: StableswapSortField, - sortDirection: SortDirection -) => stableswapSorts[sortField](first, second, sortDirection); - -export const sortStableswapList = ( - list: Array, - sortField: StableswapSortField, - sortDirection: SortDirection -) => { - if (isNull(sortField)) { - return list; - } - - const localList = cloneArray(list); - - localList.sort((first, second) => sortStableswap(first, second, sortField, sortDirection)); - - return localList; -}; diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/index.ts b/src/modules/stableswap/stableswap-liquidity/pages/list/index.ts deleted file mode 100644 index ceaf644d8..000000000 --- a/src/modules/stableswap/stableswap-liquidity/pages/list/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './stableswap-liquidity-list.page'; diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/stableswap-liquidity-list.page.module.scss b/src/modules/stableswap/stableswap-liquidity/pages/list/stableswap-liquidity-list.page.module.scss deleted file mode 100644 index c54da3117..000000000 --- a/src/modules/stableswap/stableswap-liquidity/pages/list/stableswap-liquidity-list.page.module.scss +++ /dev/null @@ -1,5 +0,0 @@ -.list { - display: flex; - flex-direction: column; - row-gap: 32px; -} diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/stableswap-liquidity-list.page.tsx b/src/modules/stableswap/stableswap-liquidity/pages/list/stableswap-liquidity-list.page.tsx deleted file mode 100644 index 4bf25c37b..000000000 --- a/src/modules/stableswap/stableswap-liquidity/pages/list/stableswap-liquidity-list.page.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { FC } from 'react'; - -import { observer } from 'mobx-react-lite'; - -import { Iterator, ListItemCard, PageTitle, StateWrapper, TestnetAlert } from '@shared/components'; -import { NotFound } from '@shared/svg'; - -import { PoolCreation, StableswapLiquidityGeneralStats, StableswapLiquidityListFilter } from './components'; -import styles from './stableswap-liquidity-list.page.module.scss'; -import { useStableswapLiquidityPageViewModel } from './use-stableswap-liquidity-list.page.vm'; - -export const StableswapLiquidityListPage: FC = observer(() => { - const { isLoading, title, list } = useStableswapLiquidityPageViewModel(); - - return ( - <> - - {title} - - - }> - - - - - ); -}); diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/types/index.ts b/src/modules/stableswap/stableswap-liquidity/pages/list/types/index.ts deleted file mode 100644 index b79f1a3e3..000000000 --- a/src/modules/stableswap/stableswap-liquidity/pages/list/types/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './sort'; diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/types/sort.ts b/src/modules/stableswap/stableswap-liquidity/pages/list/types/sort.ts deleted file mode 100644 index cacfa6b5f..000000000 --- a/src/modules/stableswap/stableswap-liquidity/pages/list/types/sort.ts +++ /dev/null @@ -1,9 +0,0 @@ -export enum StableswapSortField { - ID = 'ID', - TVL = 'TVL' -} - -export interface StableswapSortFieldItem { - label: string; - field: StableswapSortField; -} diff --git a/src/modules/stableswap/stableswap-liquidity/pages/list/use-stableswap-liquidity-list.page.vm.ts b/src/modules/stableswap/stableswap-liquidity/pages/list/use-stableswap-liquidity-list.page.vm.ts deleted file mode 100644 index 5624942c5..000000000 --- a/src/modules/stableswap/stableswap-liquidity/pages/list/use-stableswap-liquidity-list.page.vm.ts +++ /dev/null @@ -1,101 +0,0 @@ -import { useEffect } from 'react'; - -import { AppRootRoutes } from '@app.router'; -import { DOLLAR, PERCENT } from '@config/constants'; -import { useReady } from '@providers/use-dapp'; -import { LabelComponentProps } from '@shared/components'; -import { extractTokens, getTokenSymbol } from '@shared/helpers'; -import { ActiveStatus } from '@shared/types'; -import { useTranslation } from '@translation'; - -import { useStableswapListStore, useGetStableswapList, useGetStableswapStats } from '../../../hooks'; -import { StableswapRoutes } from '../../../stableswap-routes.enum'; -import { StableswapLiquidityFormTabs } from '../../../types'; - -export const useStableswapLiquidityPageViewModel = () => { - const stableswapListStore = useStableswapListStore(); - - const isReady = useReady(); - const { getStableswapList } = useGetStableswapList(); - const { getStableswapStats } = useGetStableswapStats(); - - const { t } = useTranslation(); - const title = t('common|Stableswap Liquidity'); - const link = `${AppRootRoutes.Stableswap}${StableswapRoutes.liquidity}/${StableswapLiquidityFormTabs.add}`; - - /* - Load data - */ - useEffect(() => { - if (isReady) { - void getStableswapList(); - void getStableswapStats(); - } - }, [getStableswapList, getStableswapStats, isReady]); - - const { listStore, list } = stableswapListStore; - const { isLoading } = listStore; - - const listData = list?.map(({ id, tokensInfo, tvlInUsd, isWhitelisted, providersFee }) => { - const idFixed = id.toFixed(); - const labels: Array = []; - - if (isWhitelisted) { - labels.push({ - status: ActiveStatus.ACTIVE, - label: t('common|whiteListed').toUpperCase(), - DTI: 'whitelistedLabel' - }); - } - - return { - farmingItemDTI: `farming-item-${idFixed}`, - href: `${link}/${idFixed}`, - inputToken: extractTokens(tokensInfo), - labels, - status: { - status: ActiveStatus.ACTIVE, - DTI: 'activeLabel', - filled: true - }, - itemStats: [ - ...tokensInfo.map(({ reserves, reservesInUsd, token }, index) => ({ - cellName: t('common|tokenValue'), - tooltip: t('stableswap|tokenValuesTooltip'), - DTI: `tokenValues-${index}`, - amounts: { - amount: reserves, - dollarEquivalent: reservesInUsd, - currency: getTokenSymbol(token) - } - })), - { - cellName: t('common|tvl'), - tooltip: t('stableswap|tvlPoolTooltip'), - DTI: 'tvlPool', - amounts: { - amount: tvlInUsd, - currency: DOLLAR, - dollarEquivalent: tvlInUsd, - dollarEquivalentOnly: true - } - }, - { - cellName: t('stableswap|liquidityProvidersFee'), - tooltip: t('stableswap|liquidityProvidersFeeTooltip'), - DTI: 'lpFee', - amounts: { - amount: providersFee, - currency: PERCENT - } - } - ] - }; - }); - - return { - isLoading, - list: listData ?? [], - title - }; -}; diff --git a/src/modules/stableswap/stableswap-liquidity/stableswap-liquidity.routing.tsx b/src/modules/stableswap/stableswap-liquidity/stableswap-liquidity.routing.tsx index e123ee9fb..7b532c04f 100644 --- a/src/modules/stableswap/stableswap-liquidity/stableswap-liquidity.routing.tsx +++ b/src/modules/stableswap/stableswap-liquidity/stableswap-liquidity.routing.tsx @@ -15,7 +15,6 @@ import { StableswapLiquidityFormTabs } from '../types'; import { StableswapLiquidityAddItemPage, StableswapLiquidityCreatePage, - StableswapLiquidityListPage, StableswapLiquidityRemoveItemPage } from './pages'; import { useStableswapLiquidityRouterViewModel } from './stableswap-liquidity.routing.vm'; @@ -59,8 +58,6 @@ export const StableswapLiquidityRouter: FC = observer(() => { element={} /> - } /> - } /> diff --git a/src/modules/stableswap/stableswap-liquidity/stableswap-liquidity.routing.vm.ts b/src/modules/stableswap/stableswap-liquidity/stableswap-liquidity.routing.vm.ts index 9c958836f..b5925946a 100644 --- a/src/modules/stableswap/stableswap-liquidity/stableswap-liquidity.routing.vm.ts +++ b/src/modules/stableswap/stableswap-liquidity/stableswap-liquidity.routing.vm.ts @@ -12,16 +12,9 @@ export const useStableswapLiquidityRouterViewModel = () => { useEffect(() => { (async () => { try { - if ( - isNull(rootStore.stableswapListStore) || - isNull(rootStore.stableswapItemStore) || - isNull(rootStore.stableswapItemFormStore) || - isNull(rootStore.stableswapFilterStore) - ) { - await rootStore.createStableswapListStore(); + if (isNull(rootStore.stableswapItemStore) || isNull(rootStore.stableswapItemFormStore)) { await rootStore.createStableswapItemStore(); await rootStore.createStableswapItemFormStore(); - await rootStore.createStableswapFilterStore(); } setIsInitialazied(true); } catch (_error) { diff --git a/src/modules/stableswap/stableswap.routing.tsx b/src/modules/stableswap/stableswap.routing.tsx index 9c3bc39da..3fd91c2a9 100644 --- a/src/modules/stableswap/stableswap.routing.tsx +++ b/src/modules/stableswap/stableswap.routing.tsx @@ -1,8 +1,7 @@ import { FC } from 'react'; -import { Navigate, Route } from 'react-router-dom'; +import { Route } from 'react-router-dom'; -import { AppRootRoutes } from '@app.router'; import { SentryRoutes } from '@shared/services'; import { PageNotFoundPage } from '../errors'; @@ -16,11 +15,6 @@ export const StableswapRouter: FC = () => { } /> } /> - } - /> - } /> ); diff --git a/src/modules/stableswap/store/index.ts b/src/modules/stableswap/store/index.ts index e0a11d0e8..4f18677ca 100644 --- a/src/modules/stableswap/store/index.ts +++ b/src/modules/stableswap/store/index.ts @@ -1,6 +1,4 @@ export * from './stabledividends-list.store'; -export * from './stableswap-list.store'; -export * from './stableswap-filter.store'; export * from './stableswap-item.store'; export * from './stableswap-item-form.store'; export * from './stabledividends-filter.store'; diff --git a/src/modules/stableswap/store/stableswap-filter.store.ts b/src/modules/stableswap/store/stableswap-filter.store.ts deleted file mode 100644 index b816b4d8d..000000000 --- a/src/modules/stableswap/store/stableswap-filter.store.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { action, makeObservable, observable } from 'mobx'; - -import { BaseFilterStore } from '@shared/store'; - -import { StableswapItemModel } from '../models'; -import { sortStableswapList } from '../stableswap-liquidity/pages/list/helpers'; -import { StableswapSortField } from '../stableswap-liquidity/pages/list/types'; - -export class StableswapFilterStore extends BaseFilterStore { - whitelistedOnly = false; - sortField: StableswapSortField = StableswapSortField.ID; - - constructor() { - super(); - - makeObservable(this, { - whitelistedOnly: observable, - sortField: observable, - - setWhitelistedOnly: action, - onSortFieldChange: action - }); - } - - filterAndSort(list: Array) { - let localList = [...list]; - if (this.whitelistedOnly) { - localList = localList.filter(({ isWhitelisted }) => isWhitelisted); - } - - if (this.search) { - localList = localList.filter(({ tokensInfo }) => - tokensInfo.map(({ token }) => this.tokenMatchesSearch(token)).some(Boolean) - ); - } - - return sortStableswapList(localList, this.sortField, this.sortDirection); - } - - setWhitelistedOnly(state: boolean) { - this.whitelistedOnly = state; - } - - onSortFieldChange(field: StableswapSortField) { - this.sortField = field; - } -} diff --git a/src/modules/stableswap/store/stableswap-list.store.ts b/src/modules/stableswap/store/stableswap-list.store.ts deleted file mode 100644 index 2b61fd7be..000000000 --- a/src/modules/stableswap/store/stableswap-list.store.ts +++ /dev/null @@ -1,48 +0,0 @@ -import { computed, makeObservable } from 'mobx'; - -import { Led, ModelBuilder } from '@shared/model-builder'; -import { LoadingErrorData, RootStore } from '@shared/store'; -import { Undefined } from '@shared/types'; - -import { getStableswapListApi, getStableswapStatsApi } from '../api'; -import { StableswapItemModel, StableswapListModel, StableswapStatsModel } from '../models'; - -const defaultStableswapList = { - list: [] -}; - -@ModelBuilder() -export class StableswapListStore { - //#region stableswap list store - @Led({ - default: defaultStableswapList, - loader: getStableswapListApi, - model: StableswapListModel - }) - readonly listStore: LoadingErrorData; - - get list(): Undefined> { - return this.rootStore.stableswapFilterStore?.filterAndSort(this.listStore.model.list); - } - //#endregion stableswap list store - - //#region stableswap stats store - @Led({ - default: null, - loader: getStableswapStatsApi, - model: StableswapStatsModel - }) - readonly statsStore: LoadingErrorData; - - get stats() { - return this.statsStore.model; - } - //#endregion stableswap stats store - - constructor(private rootStore: RootStore) { - makeObservable(this, { - list: computed, - stats: computed - }); - } -} diff --git a/src/shared/components/sorter-view/sorter.view.tsx b/src/shared/components/sorter-view/sorter.view.tsx index e8d8e64cf..1bf972375 100644 --- a/src/shared/components/sorter-view/sorter.view.tsx +++ b/src/shared/components/sorter-view/sorter.view.tsx @@ -7,7 +7,6 @@ import Select, { Props as SelectProps } from 'react-select'; import { FarmingSortFieldItem } from '@modules/farming/pages/list/types'; import { LiquiditySortFieldItem } from '@modules/liquidity/pages/list/types'; import { StableDividendsSortFieldItem } from '@modules/stableswap/stabledividends/pages/list/types'; -import { StableswapSortFieldItem } from '@modules/stableswap/stableswap-liquidity/pages/list/types'; import { ColorModes, ColorThemeContext } from '@providers/color-theme-context'; import { Button } from '@shared/components'; import { Sort } from '@shared/svg'; @@ -16,15 +15,9 @@ import { Undefined } from '@shared/types'; import styles from './sorter.module.scss'; export interface SorterProps { - sortingValue: Undefined< - FarmingSortFieldItem | StableswapSortFieldItem | StableDividendsSortFieldItem | LiquiditySortFieldItem - >; + sortingValue: Undefined; sortDirectionRotate: boolean; - sortingValues: - | FarmingSortFieldItem[] - | StableswapSortFieldItem[] - | StableDividendsSortFieldItem[] - | LiquiditySortFieldItem[]; + sortingValues: FarmingSortFieldItem[] | StableDividendsSortFieldItem[] | LiquiditySortFieldItem[]; buttonDTI: string; sorterSelectDTI: string; handleSortFieldChange: (value: unknown) => void; diff --git a/src/shared/store/root.store.ts b/src/shared/store/root.store.ts index f6aeaa80e..663ac3c7c 100644 --- a/src/shared/store/root.store.ts +++ b/src/shared/store/root.store.ts @@ -20,10 +20,8 @@ import { LiquidityV3PositionsStore as ILiquidityV3PositionsStore } from '@modules/liquidity'; import { - StableswapFilterStore as IStableswapFilterStore, StableswapItemStore as IStableswapItemStore, StableswapItemFormStore as IStableswapItemFormStore, - StableswapListStore as IStableswapListStore, StableDividendsListStore as IStableDividendsListStore, StableDividendsFilterStore as IStableDividendsFilterStore, StableDividendsItemStore as IStableDividendsItemStore @@ -56,10 +54,8 @@ export class RootStore { farmingYouvesItemStore: Nullable = null; harvestAndRollStore: Nullable = null; - stableswapListStore: Nullable = null; stableswapItemStore: Nullable = null; stableswapItemFormStore: Nullable = null; - stableswapFilterStore: Nullable = null; stableDividendsListStore: Nullable = null; stableDividendsFilterStore: Nullable = null; @@ -93,11 +89,9 @@ export class RootStore { farmingFilterStore: observable, farmingItemStore: observable, - stableswapListStore: observable, farmingListStore: observable, stableswapItemStore: observable, stableswapItemFormStore: observable, - stableswapFilterStore: observable, stableDividendsListStore: observable, stableDividendsFilterStore: observable, @@ -116,10 +110,8 @@ export class RootStore { createFarmingItemStore: action, createCoinflipStore: action, - createStableswapListStore: action, createStableswapItemStore: action, createStableswapItemFormStore: action, - createStableswapFilterStore: action, createStableDividendsListStore: action, createStableDividendsFilterStore: action, @@ -194,13 +186,6 @@ export class RootStore { } } - async createStableswapListStore() { - if (isNull(this.stableswapListStore)) { - const { StableswapListStore } = await import('@modules/stableswap/store/stableswap-list.store'); - this.stableswapListStore = new StableswapListStore(this); - } - } - async createStableswapItemStore() { if (isNull(this.stableswapItemStore)) { const { StableswapItemStore } = await import('@modules/stableswap/store/stableswap-item.store'); @@ -215,13 +200,6 @@ export class RootStore { } } - async createStableswapFilterStore() { - if (isNull(this.stableswapFilterStore)) { - const { StableswapFilterStore } = await import('@modules/stableswap/store/stableswap-filter.store'); - this.stableswapFilterStore = new StableswapFilterStore(); - } - } - async createStableDividendsFilterStore() { if (isNull(this.stableDividendsFilterStore)) { const { StableDividendsFilterStore } = await import('@modules/stableswap/store/stabledividends-filter.store'); From 2bc27680ad22bd9071e590bdd38de2dc8f4457c6 Mon Sep 17 00:00:00 2001 From: Inokentii Mazhara Date: Tue, 10 Jan 2023 17:08:09 +0200 Subject: [PATCH 10/45] Fix filters layout for Safari --- .../pages/list/components/list-filter/list-filter.module.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/modules/liquidity/pages/list/components/list-filter/list-filter.module.scss b/src/modules/liquidity/pages/list/components/list-filter/list-filter.module.scss index f437084ae..cef565c0e 100644 --- a/src/modules/liquidity/pages/list/components/list-filter/list-filter.module.scss +++ b/src/modules/liquidity/pages/list/components/list-filter/list-filter.module.scss @@ -10,7 +10,6 @@ flex-wrap: wrap !important; * { - width: fit-content !important; order: 4 !important; } } From 52ca3e94243cc1ebe9884f9f4c94aa879c4e01ec Mon Sep 17 00:00:00 2001 From: Artem Date: Tue, 10 Jan 2023 21:51:27 +0200 Subject: [PATCH 11/45] QUIPU-676 Fix comments --- .../helpers/is-one-of-the-output-not-zero.ts | 8 ++-- .../v3-add-liq-form/use-v3-add-liq-form.vm.ts | 6 ++- .../v3-add-liq-form/v3-add-liq-form.view.tsx | 38 ++++++++--------- .../use-v3-remove-liq-form.validation.ts | 4 +- .../use-v3-remove-liq-form.vm.ts | 14 +++++-- .../v3-remove-liq-form.view.tsx | 42 +++++++++---------- 6 files changed, 62 insertions(+), 50 deletions(-) diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/is-one-of-the-output-not-zero.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/is-one-of-the-output-not-zero.ts index f90b96b56..7f99d64cd 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/is-one-of-the-output-not-zero.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/is-one-of-the-output-not-zero.ts @@ -1,10 +1,12 @@ -import BigNumber from 'bignumber.js'; import { FormikValues } from 'formik'; import { ZERO_AMOUNT } from '@config/constants'; +import { isEqual } from '@shared/helpers'; + +const MAX_ZERO_INPUTS_AMOUNT = 1; export const isOneOfTheOutputNotZero = (values: FormikValues) => { - const preparedOutputValues = Object.values(values).slice(1); + const amountOfZeroInputs = Object.values(values).filter(value => isEqual(Number(value), ZERO_AMOUNT)).length; - return preparedOutputValues.some(value => new BigNumber(value).isGreaterThan(ZERO_AMOUNT)); + return amountOfZeroInputs <= MAX_ZERO_INPUTS_AMOUNT; }; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/use-v3-add-liq-form.vm.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/use-v3-add-liq-form.vm.ts index 7fd3878b3..adda6c2f2 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/use-v3-add-liq-form.vm.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/use-v3-add-liq-form.vm.ts @@ -18,7 +18,6 @@ import { useCurrentTick } from '../hooks/use-current-tick'; import { V3AddFormValues, V3AddTokenInput } from '../interface'; import { useV3AddLiqFormValidation } from './use-v3-add-liq-form.validation'; -/* eslint-disable no-console */ export const useV3AddLiqFormViewModel = () => { const { t } = useTranslation(); const { tokenX, tokenY } = useLiquidityV3ItemTokens(); @@ -44,7 +43,6 @@ export const useV3AddLiqFormViewModel = () => { const handleSubmit = (values: FormikValues, actions: FormikHelpers) => { actions.setSubmitting(true); - console.log(values, actions); actions.setSubmitting(false); }; @@ -90,8 +88,12 @@ export const useV3AddLiqFormViewModel = () => { }; }); + const disabled = formik.isSubmitting; + return { data, + isSubmitting: formik.isSubmitting, + disabled, onSubmit: formik.handleSubmit }; }; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/v3-add-liq-form.view.tsx b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/v3-add-liq-form.view.tsx index 22a464faa..fa216835e 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/v3-add-liq-form.view.tsx +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/v3-add-liq-form.view.tsx @@ -10,29 +10,29 @@ import styles from './v3-add-liq-form.module.scss'; interface Props { data: TokenInputProps[]; onSubmit: () => void; + disabled: boolean; + isSubmitting: boolean; } -export const V3AddLiqFormView: FC = ({ data, onSubmit }) => { +export const V3AddLiqFormView: FC = ({ data, onSubmit, disabled, isSubmitting }) => { const { t } = useTranslation(); return ( - <> - - } /> -
- - - -
- - +
+ } /> +
+ + + +
+ ); }; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.validation.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.validation.ts index aaafacbb9..e793196bf 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.validation.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.validation.ts @@ -10,12 +10,12 @@ export const useV3RemoveLiqFormValidation = () => { const { t } = useTranslation(); const schema = yup.string().test( - 'should be less then or equal to 100', + 'less-or-equal-to-100', () => t('liquidity|valueShouldBeLessThen100'), value => (isExist(value) ? Number(value) <= PERCENT_100 : true) ); return yup.object().shape({ - [V3RemoveTokenInput.lpTokenInput]: schema.required('Amount is required!') + [V3RemoveTokenInput.lpTokenInput]: schema.required(t('common|amountRequired')) }); }; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts index c67a4a647..1458fa8aa 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts @@ -29,10 +29,14 @@ export const useV3RemoveLiqFormViewModel = () => { const handleSubmit = (values: FormikValues, actions: FormikHelpers) => { const isAddLiqPossible = isOneOfTheOutputNotZero(values); - if (isAddLiqPossible) { - actions.setSubmitting(true); - actions.setSubmitting(false); + if (!isAddLiqPossible) { + return; } + // eslint-disable-next-line no-console + console.log(values); + + actions.setSubmitting(true); + actions.setSubmitting(false); }; const handleInputChange = () => { @@ -99,9 +103,13 @@ export const useV3RemoveLiqFormViewModel = () => { onInputChange: handleInputChange() }; + const disabled = formik.isSubmitting; + return { lpData, data: outputData, + disabled, + isSubmitting: formik.isSubmitting, onSubmit: formik.handleSubmit }; }; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/v3-remove-liq-form.view.tsx b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/v3-remove-liq-form.view.tsx index 799838281..b7e072881 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/v3-remove-liq-form.view.tsx +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/v3-remove-liq-form.view.tsx @@ -11,31 +11,31 @@ interface Props { lpData: TokenInputProps; data: TokenInputProps[]; onSubmit: () => void; + disabled: boolean; + isSubmitting: boolean; } -export const V3RemoveLiqFormView: FC = ({ data, lpData, onSubmit }) => { +export const V3RemoveLiqFormView: FC = ({ data, lpData, onSubmit, disabled, isSubmitting }) => { const { t } = useTranslation(); return ( - <> -
- - - } /> -
- - - -
- - +
+ + + } /> +
+ + + +
+ ); }; From 9ed88db7f5a1dfa2fc7bd636b1d8d45a88abb012 Mon Sep 17 00:00:00 2001 From: Artem Date: Tue, 10 Jan 2023 22:04:12 +0200 Subject: [PATCH 12/45] QUIPU-676 remove console.log --- .../forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts index 1458fa8aa..2e7b824c3 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts @@ -32,8 +32,6 @@ export const useV3RemoveLiqFormViewModel = () => { if (!isAddLiqPossible) { return; } - // eslint-disable-next-line no-console - console.log(values); actions.setSubmitting(true); actions.setSubmitting(false); From 8759902ed09efd9f1ab7f0a25173532bdecf1da7 Mon Sep 17 00:00:00 2001 From: Inokentii Mazhara Date: Wed, 11 Jan 2023 11:24:41 +0200 Subject: [PATCH 13/45] Fix 'Liquidity' navigation item highlighting for stableswap pages --- src/shared/components/header/navigation/utils.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/shared/components/header/navigation/utils.ts b/src/shared/components/header/navigation/utils.ts index 493f692ac..d66f86a25 100644 --- a/src/shared/components/header/navigation/utils.ts +++ b/src/shared/components/header/navigation/utils.ts @@ -11,5 +11,9 @@ export const isActivePath = (pathname: string, href: string) => { return pathname.replace('/send/', '/swap/').startsWith(href); } + if (pathname.startsWith('/stableswap/liquidity')) { + return pathname.replace('/stableswap/liquidity', '/liquidity/stableswap').startsWith(href); + } + return pathname.startsWith(href); }; From 8bb1a614dfc81b14bb1fcba65900f7350f47a151 Mon Sep 17 00:00:00 2001 From: Artem Date: Wed, 11 Jan 2023 17:31:24 +0200 Subject: [PATCH 14/45] QUIPU-663 Removing liquidity to the position --- .../liquidity/pages/v3-item-page/api/index.ts | 1 + .../api/v3-remove-liquidity.api.ts | 31 ++++++++ .../forms/helpers/get-tokens-values.ts | 12 ++++ .../components/forms/helpers/index.ts | 1 + .../components/forms/hooks/index.ts | 1 + .../forms/hooks/use-v3-remove-liquidity.ts | 71 +++++++++++++++++++ .../use-v3-remove-liq-form.vm.ts | 5 +- .../pages/v3-item-page/types/index.ts | 2 + .../v3-item-page/types/liquidity-form.ts | 6 ++ 9 files changed, 129 insertions(+), 1 deletion(-) create mode 100644 src/modules/liquidity/pages/v3-item-page/api/index.ts create mode 100644 src/modules/liquidity/pages/v3-item-page/api/v3-remove-liquidity.api.ts create mode 100644 src/modules/liquidity/pages/v3-item-page/components/forms/helpers/get-tokens-values.ts create mode 100644 src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-v3-remove-liquidity.ts create mode 100644 src/modules/liquidity/pages/v3-item-page/types/index.ts create mode 100644 src/modules/liquidity/pages/v3-item-page/types/liquidity-form.ts diff --git a/src/modules/liquidity/pages/v3-item-page/api/index.ts b/src/modules/liquidity/pages/v3-item-page/api/index.ts new file mode 100644 index 000000000..3ed81cfbf --- /dev/null +++ b/src/modules/liquidity/pages/v3-item-page/api/index.ts @@ -0,0 +1 @@ +export * from './v3-remove-liquidity.api'; diff --git a/src/modules/liquidity/pages/v3-item-page/api/v3-remove-liquidity.api.ts b/src/modules/liquidity/pages/v3-item-page/api/v3-remove-liquidity.api.ts new file mode 100644 index 000000000..deb7a1fac --- /dev/null +++ b/src/modules/liquidity/pages/v3-item-page/api/v3-remove-liquidity.api.ts @@ -0,0 +1,31 @@ +import { TezosToolkit } from '@taquito/taquito'; +import { BigNumber } from 'bignumber.js'; + +import { QUIPUSWAP_REFERRAL_CODE, ZERO_AMOUNT_BN } from '@config/constants'; + +import { MaximumTokensContributed } from '../types'; + +export const V3RemoveLiquidityApi = async ( + tezos: TezosToolkit, + contractAddress: string, + positionId: BigNumber, + liquidityDelta: BigNumber, + tokenXAddress: string, + tokenYAddress: string, + deadline: string, + maximumTokensContributed: MaximumTokensContributed +) => { + const v3Contract = await tezos.wallet.at(contractAddress); + + const dexTwoLiquidityParams = v3Contract.methodsObject.update_position({ + position_id: positionId, + liquidity_delta: ZERO_AMOUNT_BN.minus(liquidityDelta), + to_x: tokenXAddress, + to_y: tokenYAddress, + deadline, + maximum_tokens_contributed: maximumTokensContributed, + referral_code: QUIPUSWAP_REFERRAL_CODE + }); + + return await dexTwoLiquidityParams.send(); +}; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/get-tokens-values.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/get-tokens-values.ts new file mode 100644 index 000000000..a117d654a --- /dev/null +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/get-tokens-values.ts @@ -0,0 +1,12 @@ +import { BigNumber } from 'bignumber.js'; +import { FormikValues } from 'formik'; + +import { toAtomic } from '@shared/helpers'; +import { Token } from '@shared/types'; + +import { V3RemoveTokenInput } from '../interface'; + +export const getTokensValues = (inputAmounts: FormikValues, tokenX: Token, tokenY: Token) => ({ + x: toAtomic(new BigNumber(inputAmounts[V3RemoveTokenInput.tokenXInput]), tokenX).integerValue(BigNumber.ROUND_DOWN), + y: toAtomic(new BigNumber(inputAmounts[V3RemoveTokenInput.tokenYInput]), tokenY).integerValue(BigNumber.ROUND_DOWN) +}); diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/index.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/index.ts index 6cff6b4f2..eb1420f7d 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/index.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/index.ts @@ -3,3 +3,4 @@ export * from './is-one-of-the-output-not-zero'; export * from './prevent-redunant-recalculation'; export * from './get-count-of-tokens'; export * from './get-current-formik-key-add'; +export * from './get-tokens-values'; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/index.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/index.ts index a2cb746ac..ea4259a5f 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/index.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/index.ts @@ -3,3 +3,4 @@ export * from './use-tick-spacing'; export * from './use-current-tick'; export * from './use-position-ticks'; export * from './use-calculate-value'; +export * from './use-v3-remove-liquidity'; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-v3-remove-liquidity.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-v3-remove-liquidity.ts new file mode 100644 index 000000000..4a00c22b8 --- /dev/null +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-v3-remove-liquidity.ts @@ -0,0 +1,71 @@ +import { FormikValues } from 'formik'; + +import { + useLiquidityV3ItemTokens, + useLiquidityV3PoolStore, + useLiquidityV3PositionStore +} from '@modules/liquidity/hooks'; +import { useRootStore } from '@providers/root-store-provider'; +import { useAccountPkh } from '@providers/use-dapp'; +import { getTransactionDeadline, isNull } from '@shared/helpers'; +import { useSettingsStore } from '@shared/hooks/use-settings-store'; +import { amplitudeService } from '@shared/services'; +import { useConfirmOperation, useToasts } from '@shared/utils'; +import { useTranslation } from '@translation'; + +import { V3RemoveLiquidityApi } from '../../../api'; +import { findUserPosition } from '../../../helpers'; +import { usePositionsWithStats } from '../../../hooks'; +import { getTokensValues } from '../helpers'; + +// TODO: logData + +export const useV3RemoveLiquidity = () => { + const { tezos } = useRootStore(); + const { showErrorToast } = useToasts(); + const confirmOperation = useConfirmOperation(); + const { t } = useTranslation(); + const { + settings: { transactionDeadline } + } = useSettingsStore(); + const accountPkh = useAccountPkh(); + const poolStore = useLiquidityV3PoolStore(); + const { positionsWithStats } = usePositionsWithStats(); + const { positionId } = useLiquidityV3PositionStore(); + const { tokenX, tokenY } = useLiquidityV3ItemTokens(); + const item = poolStore.item; + + const position = findUserPosition(positionsWithStats, positionId); + + const removeLiquidity = async (inputAmounts: FormikValues) => { + if (isNull(tezos) || isNull(accountPkh) || isNull(position) || isNull(tokenX) || isNull(tokenY) || isNull(item)) { + return; + } + + const tokensValues = getTokensValues(inputAmounts, tokenX, tokenY); + const deadline = await getTransactionDeadline(tezos, transactionDeadline); + + const logData = {}; + + try { + amplitudeService.logEvent('V3_LIQUIDITY_REMOVE', logData); + const operation = await V3RemoveLiquidityApi( + tezos, + item.contractAddress, + position.id, + position.liquidity, + tokenX.contractAddress, + tokenY.contractAddress, + deadline, + tokensValues + ); + await confirmOperation(operation.opHash, { message: t('liquidity|successfullyRemoved') }); + amplitudeService.logEvent('V3_LIQUIDITY_REMOVE_SUCCESS', logData); + } catch (error) { + showErrorToast(error as Error); + amplitudeService.logEvent('V3_LIQUIDITY_REMOVE_FAILED', { ...logData, error }); + } + }; + + return { removeLiquidity }; +}; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts index 2e7b824c3..732541135 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts @@ -12,6 +12,7 @@ import { useTranslation } from '@translation'; import { findUserPosition } from '../../../helpers'; import { usePositionsWithStats } from '../../../hooks'; import { calculateOutput, isOneOfTheOutputNotZero, preventRedundantRecalculation } from '../helpers'; +import { useV3RemoveLiquidity } from '../hooks'; import { V3RemoveFormValues, V3RemoveTokenInput } from '../interface'; import { useV3RemoveLiqFormValidation } from './use-v3-remove-liq-form.validation'; @@ -20,13 +21,14 @@ export const useV3RemoveLiqFormViewModel = () => { const { tokenX, tokenY } = useLiquidityV3ItemTokens(); const { positionsWithStats } = usePositionsWithStats(); const { positionId } = useLiquidityV3PositionStore(); + const { removeLiquidity } = useV3RemoveLiquidity(); const poolStore = useLiquidityV3PoolStore(); const item = poolStore.item; const tokens = [tokenX, tokenY]; const userPosition = findUserPosition(positionsWithStats, positionId); - const handleSubmit = (values: FormikValues, actions: FormikHelpers) => { + const handleSubmit = async (values: FormikValues, actions: FormikHelpers) => { const isAddLiqPossible = isOneOfTheOutputNotZero(values); if (!isAddLiqPossible) { @@ -34,6 +36,7 @@ export const useV3RemoveLiqFormViewModel = () => { } actions.setSubmitting(true); + await removeLiquidity(values); actions.setSubmitting(false); }; diff --git a/src/modules/liquidity/pages/v3-item-page/types/index.ts b/src/modules/liquidity/pages/v3-item-page/types/index.ts new file mode 100644 index 000000000..459249205 --- /dev/null +++ b/src/modules/liquidity/pages/v3-item-page/types/index.ts @@ -0,0 +1,2 @@ +export * from './liquidity-form'; +export * from './create-position-form'; diff --git a/src/modules/liquidity/pages/v3-item-page/types/liquidity-form.ts b/src/modules/liquidity/pages/v3-item-page/types/liquidity-form.ts new file mode 100644 index 000000000..77d08c715 --- /dev/null +++ b/src/modules/liquidity/pages/v3-item-page/types/liquidity-form.ts @@ -0,0 +1,6 @@ +import { BigNumber } from 'bignumber.js'; + +export interface MaximumTokensContributed { + x: BigNumber; + y: BigNumber; +} From 0f7d6cf4ba6d3c1f10428855156a106e78f3a014 Mon Sep 17 00:00:00 2001 From: Artem Date: Wed, 11 Jan 2023 18:55:12 +0200 Subject: [PATCH 15/45] QUIPU-663 Add improvements, fix bug --- .../forms/helpers/get-tokens-values.ts | 4 ++-- .../forms/hooks/use-v3-remove-liquidity.ts | 11 ++++++++++- .../interface/v3-liquidity-form-values.ts | 12 ++++++------ .../use-v3-remove-liq-form.validation.ts | 2 +- .../use-v3-remove-liq-form.vm.ts | 18 +++++++++--------- 5 files changed, 28 insertions(+), 19 deletions(-) diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/get-tokens-values.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/get-tokens-values.ts index a117d654a..b9a942e34 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/get-tokens-values.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/get-tokens-values.ts @@ -7,6 +7,6 @@ import { Token } from '@shared/types'; import { V3RemoveTokenInput } from '../interface'; export const getTokensValues = (inputAmounts: FormikValues, tokenX: Token, tokenY: Token) => ({ - x: toAtomic(new BigNumber(inputAmounts[V3RemoveTokenInput.tokenXInput]), tokenX).integerValue(BigNumber.ROUND_DOWN), - y: toAtomic(new BigNumber(inputAmounts[V3RemoveTokenInput.tokenYInput]), tokenY).integerValue(BigNumber.ROUND_DOWN) + x: toAtomic(new BigNumber(inputAmounts[V3RemoveTokenInput.tokenXOutput]), tokenX).integerValue(BigNumber.ROUND_DOWN), + y: toAtomic(new BigNumber(inputAmounts[V3RemoveTokenInput.tokenYOutput]), tokenY).integerValue(BigNumber.ROUND_DOWN) }); diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-v3-remove-liquidity.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-v3-remove-liquidity.ts index 4a00c22b8..ff8d67d93 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-v3-remove-liquidity.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-v3-remove-liquidity.ts @@ -1,5 +1,7 @@ +import BigNumber from 'bignumber.js'; import { FormikValues } from 'formik'; +import { PERCENTAGE_100 } from '@config/constants'; import { useLiquidityV3ItemTokens, useLiquidityV3PoolStore, @@ -17,6 +19,7 @@ import { V3RemoveLiquidityApi } from '../../../api'; import { findUserPosition } from '../../../helpers'; import { usePositionsWithStats } from '../../../hooks'; import { getTokensValues } from '../helpers'; +import { V3RemoveTokenInput } from '../interface'; // TODO: logData @@ -42,6 +45,12 @@ export const useV3RemoveLiquidity = () => { return; } + const percantage = new BigNumber(inputAmounts[V3RemoveTokenInput.percantageInput]); + const liquidity = position.liquidity + .dividedBy(PERCENTAGE_100) + .multipliedBy(percantage) + .integerValue(BigNumber.ROUND_DOWN); + const tokensValues = getTokensValues(inputAmounts, tokenX, tokenY); const deadline = await getTransactionDeadline(tezos, transactionDeadline); @@ -53,7 +62,7 @@ export const useV3RemoveLiquidity = () => { tezos, item.contractAddress, position.id, - position.liquidity, + liquidity, tokenX.contractAddress, tokenY.contractAddress, deadline, diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/interface/v3-liquidity-form-values.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/interface/v3-liquidity-form-values.ts index 496f26a84..647398a9a 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/interface/v3-liquidity-form-values.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/interface/v3-liquidity-form-values.ts @@ -8,13 +8,13 @@ export interface V3AddFormValues { } export enum V3RemoveTokenInput { - lpTokenInput = 'lpTokenInput', - tokenXInput = 'tokenXInput', - tokenYInput = 'tokenYInput' + percantageInput = 'percantageInput', + tokenXOutput = 'tokenXOutput', + tokenYOutput = 'tokenYOutput' } export interface V3RemoveFormValues { - [V3RemoveTokenInput.lpTokenInput]: string; - [V3RemoveTokenInput.tokenXInput]: string; - [V3RemoveTokenInput.tokenYInput]: string; + [V3RemoveTokenInput.percantageInput]: string; + [V3RemoveTokenInput.tokenXOutput]: string; + [V3RemoveTokenInput.tokenYOutput]: string; } diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.validation.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.validation.ts index e793196bf..5a00bccc1 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.validation.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.validation.ts @@ -16,6 +16,6 @@ export const useV3RemoveLiqFormValidation = () => { ); return yup.object().shape({ - [V3RemoveTokenInput.lpTokenInput]: schema.required(t('common|amountRequired')) + [V3RemoveTokenInput.percantageInput]: schema.required(t('common|amountRequired')) }); }; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts index 732541135..1ed426afa 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts @@ -58,9 +58,9 @@ export const useV3RemoveLiqFormViewModel = () => { ); formik.setValues({ - [V3RemoveTokenInput.lpTokenInput]: realValue, - [V3RemoveTokenInput.tokenXInput]: tokenXDeposit, - [V3RemoveTokenInput.tokenYInput]: tokenYDeposit + [V3RemoveTokenInput.percantageInput]: realValue, + [V3RemoveTokenInput.tokenXOutput]: tokenXDeposit, + [V3RemoveTokenInput.tokenYOutput]: tokenYDeposit }); }; }; @@ -70,15 +70,15 @@ export const useV3RemoveLiqFormViewModel = () => { const formik = useFormik({ validationSchema, initialValues: { - [V3RemoveTokenInput.lpTokenInput]: '', - [V3RemoveTokenInput.tokenXInput]: '', - [V3RemoveTokenInput.tokenYInput]: '' + [V3RemoveTokenInput.percantageInput]: '', + [V3RemoveTokenInput.tokenXOutput]: '', + [V3RemoveTokenInput.tokenYOutput]: '' }, onSubmit: handleSubmit }); const outputData = tokens.map((token, index) => { - const formikId = isEqual(FIRST_INDEX, index) ? V3RemoveTokenInput.tokenXInput : V3RemoveTokenInput.tokenYInput; + const formikId = isEqual(FIRST_INDEX, index) ? V3RemoveTokenInput.tokenXOutput : V3RemoveTokenInput.tokenYOutput; return { id: `v3-output-${index}`, @@ -95,8 +95,8 @@ export const useV3RemoveLiqFormViewModel = () => { const lpData = { id: 'v3-lp-input', - value: formik.values[V3RemoveTokenInput.lpTokenInput], - error: formik.errors[V3RemoveTokenInput.lpTokenInput], + value: formik.values[V3RemoveTokenInput.percantageInput], + error: formik.errors[V3RemoveTokenInput.percantageInput], balance: PERCENTAGE_100, label: t('common|Amount'), tokens: [tokenX, tokenY], From ce4476ccd43d90954a4d77a3583aa4d2eaa219a9 Mon Sep 17 00:00:00 2001 From: Artem Date: Wed, 11 Jan 2023 23:46:46 +0200 Subject: [PATCH 16/45] QUIPU-663 add loader, improvements, fix bugs --- .../get-user-reward.helper.ts | 5 ++- .../loaders/use-get-liquidity-v3-position.ts | 34 +++++++++++++++++++ .../forms/helpers/calculate-output.ts | 11 ++---- .../forms/hooks/use-v3-remove-liquidity.ts | 13 +++---- .../use-v3-remove-liq-form.vm.ts | 11 ++++-- .../v3-remove-liq-form.view.tsx | 6 ++-- ...umber.ts => get-precentage-from-number.ts} | 2 +- src/shared/helpers/index.ts | 1 + 8 files changed, 57 insertions(+), 26 deletions(-) create mode 100644 src/modules/liquidity/hooks/loaders/use-get-liquidity-v3-position.ts rename src/shared/helpers/{get-precantage-from-number.ts => get-precentage-from-number.ts} (72%) diff --git a/src/modules/farming/pages/item/components/farming-reward-info/get-user-reward.helper.ts b/src/modules/farming/pages/item/components/farming-reward-info/get-user-reward.helper.ts index 3a49abbff..2d41dd80f 100644 --- a/src/modules/farming/pages/item/components/farming-reward-info/get-user-reward.helper.ts +++ b/src/modules/farming/pages/item/components/farming-reward-info/get-user-reward.helper.ts @@ -1,7 +1,6 @@ import { BigNumber } from 'bignumber.js'; -import { isExist } from '@shared/helpers'; -import { getPercantageFromNumber } from '@shared/helpers/get-precantage-from-number'; +import { isExist, getPercentageFromNumber } from '@shared/helpers'; import { Optional } from '@shared/types'; export const getUserReward = (rewardInAtomic: Optional, fee: Optional) => { @@ -9,5 +8,5 @@ export const getUserReward = (rewardInAtomic: Optional, fee: Optional return null; } - return rewardInAtomic.minus(getPercantageFromNumber(rewardInAtomic, fee)); + return rewardInAtomic.minus(getPercentageFromNumber(rewardInAtomic, fee)); }; diff --git a/src/modules/liquidity/hooks/loaders/use-get-liquidity-v3-position.ts b/src/modules/liquidity/hooks/loaders/use-get-liquidity-v3-position.ts new file mode 100644 index 000000000..e4386a3d4 --- /dev/null +++ b/src/modules/liquidity/hooks/loaders/use-get-liquidity-v3-position.ts @@ -0,0 +1,34 @@ +import { useCallback } from 'react'; + +import { DELAY_BEFORE_DATA_UPDATE } from '@config/constants'; +import { useReady } from '@providers/use-dapp'; +import { sleep } from '@shared/helpers'; +import { useToasts } from '@shared/utils'; + +import { useLiquidityV3PositionsStore } from '../store'; + +export const useGetLiquidityV3Position = () => { + const { showErrorToast } = useToasts(); + const isReady = useReady(); + const v3PositionsStore = useLiquidityV3PositionsStore(); + + const getLiquidityV3Position = useCallback(async () => { + if (!isReady) { + return; + } + + try { + await v3PositionsStore.positionsStore.load(); + } catch (error) { + showErrorToast(error as Error); + } + }, [isReady, v3PositionsStore.positionsStore, showErrorToast]); + + const delayedGetLiquidityV3Position = useCallback(async () => { + await sleep(DELAY_BEFORE_DATA_UPDATE); + + await getLiquidityV3Position(); + }, [getLiquidityV3Position]); + + return { getLiquidityV3Position, delayedGetLiquidityV3Position }; +}; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/calculate-output.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/calculate-output.ts index b3338b5b9..1df42f72e 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/calculate-output.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/calculate-output.ts @@ -1,9 +1,8 @@ import BigNumber from 'bignumber.js'; -import { PERCENT_100 } from '@config/constants'; import { V3LiquidityPoolApi } from '@modules/liquidity/api'; import { LiquidityV3Position } from '@modules/liquidity/types'; -import { toReal, toFixed } from '@shared/helpers'; +import { toReal, toFixed, getPercentageFromNumber } from '@shared/helpers'; import { Token } from '@shared/types'; import { calculateDeposit } from '../../../helpers'; @@ -27,12 +26,8 @@ export const calculateOutput = ( BigNumber.ROUND_DOWN ); - const calculatedTokenXDeposit = toFixed( - realTokenXAtomicDeposit.dividedBy(PERCENT_100).multipliedBy(new BigNumber(inputAmount)) - ); - const calculatedTokenYDeposit = toFixed( - realTokenYAtomicDeposit.dividedBy(PERCENT_100).multipliedBy(new BigNumber(inputAmount)) - ); + const calculatedTokenXDeposit = toFixed(getPercentageFromNumber(realTokenXAtomicDeposit, new BigNumber(inputAmount))); + const calculatedTokenYDeposit = toFixed(getPercentageFromNumber(realTokenYAtomicDeposit, new BigNumber(inputAmount))); return { tokenXDeposit: calculatedTokenXDeposit, tokenYDeposit: calculatedTokenYDeposit }; }; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-v3-remove-liquidity.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-v3-remove-liquidity.ts index ff8d67d93..0edc6b0bb 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-v3-remove-liquidity.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-v3-remove-liquidity.ts @@ -1,7 +1,6 @@ import BigNumber from 'bignumber.js'; import { FormikValues } from 'formik'; -import { PERCENTAGE_100 } from '@config/constants'; import { useLiquidityV3ItemTokens, useLiquidityV3PoolStore, @@ -9,7 +8,7 @@ import { } from '@modules/liquidity/hooks'; import { useRootStore } from '@providers/root-store-provider'; import { useAccountPkh } from '@providers/use-dapp'; -import { getTransactionDeadline, isNull } from '@shared/helpers'; +import { getTransactionDeadline, isNull, getPercentageFromNumber } from '@shared/helpers'; import { useSettingsStore } from '@shared/hooks/use-settings-store'; import { amplitudeService } from '@shared/services'; import { useConfirmOperation, useToasts } from '@shared/utils'; @@ -46,11 +45,7 @@ export const useV3RemoveLiquidity = () => { } const percantage = new BigNumber(inputAmounts[V3RemoveTokenInput.percantageInput]); - const liquidity = position.liquidity - .dividedBy(PERCENTAGE_100) - .multipliedBy(percantage) - .integerValue(BigNumber.ROUND_DOWN); - + const liquidity = getPercentageFromNumber(position.liquidity, percantage).integerValue(BigNumber.ROUND_DOWN); const tokensValues = getTokensValues(inputAmounts, tokenX, tokenY); const deadline = await getTransactionDeadline(tezos, transactionDeadline); @@ -63,8 +58,8 @@ export const useV3RemoveLiquidity = () => { item.contractAddress, position.id, liquidity, - tokenX.contractAddress, - tokenY.contractAddress, + accountPkh, + accountPkh, deadline, tokensValues ); diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts index 1ed426afa..3e25ec9f7 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts @@ -6,6 +6,7 @@ import { useLiquidityV3PoolStore, useLiquidityV3PositionStore } from '@modules/liquidity/hooks'; +import { useGetLiquidityV3Position } from '@modules/liquidity/hooks/loaders/use-get-liquidity-v3-position'; import { isEqual, isNull, numberAsString } from '@shared/helpers'; import { useTranslation } from '@translation'; @@ -22,6 +23,7 @@ export const useV3RemoveLiqFormViewModel = () => { const { positionsWithStats } = usePositionsWithStats(); const { positionId } = useLiquidityV3PositionStore(); const { removeLiquidity } = useV3RemoveLiquidity(); + const { delayedGetLiquidityV3Position } = useGetLiquidityV3Position(); const poolStore = useLiquidityV3PoolStore(); const item = poolStore.item; @@ -36,8 +38,13 @@ export const useV3RemoveLiqFormViewModel = () => { } actions.setSubmitting(true); + await removeLiquidity(values); + + await delayedGetLiquidityV3Position(); + actions.setSubmitting(false); + actions.resetForm(); }; const handleInputChange = () => { @@ -93,7 +100,7 @@ export const useV3RemoveLiqFormViewModel = () => { }; }); - const lpData = { + const percantageInputData = { id: 'v3-lp-input', value: formik.values[V3RemoveTokenInput.percantageInput], error: formik.errors[V3RemoveTokenInput.percantageInput], @@ -107,7 +114,7 @@ export const useV3RemoveLiqFormViewModel = () => { const disabled = formik.isSubmitting; return { - lpData, + percantageInputData, data: outputData, disabled, isSubmitting: formik.isSubmitting, diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/v3-remove-liq-form.view.tsx b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/v3-remove-liq-form.view.tsx index b7e072881..8d02a279c 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/v3-remove-liq-form.view.tsx +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/v3-remove-liq-form.view.tsx @@ -8,19 +8,19 @@ import { useTranslation } from '@translation'; import styles from './v3-remove-liq-form.module.scss'; interface Props { - lpData: TokenInputProps; + percantageInputData: TokenInputProps; data: TokenInputProps[]; onSubmit: () => void; disabled: boolean; isSubmitting: boolean; } -export const V3RemoveLiqFormView: FC = ({ data, lpData, onSubmit, disabled, isSubmitting }) => { +export const V3RemoveLiqFormView: FC = ({ data, percantageInputData, onSubmit, disabled, isSubmitting }) => { const { t } = useTranslation(); return (
- + } />
diff --git a/src/shared/helpers/get-precantage-from-number.ts b/src/shared/helpers/get-precentage-from-number.ts similarity index 72% rename from src/shared/helpers/get-precantage-from-number.ts rename to src/shared/helpers/get-precentage-from-number.ts index cc06ce43f..415e29056 100644 --- a/src/shared/helpers/get-precantage-from-number.ts +++ b/src/shared/helpers/get-precentage-from-number.ts @@ -2,5 +2,5 @@ import { BigNumber } from 'bignumber.js'; import { PERCENTAGE_100 } from '@config/constants'; -export const getPercantageFromNumber = (amount: BigNumber, percent: BigNumber) => +export const getPercentageFromNumber = (amount: BigNumber, percent: BigNumber) => amount.div(PERCENTAGE_100).multipliedBy(percent); diff --git a/src/shared/helpers/index.ts b/src/shared/helpers/index.ts index 0718638c2..6217cd9bb 100644 --- a/src/shared/helpers/index.ts +++ b/src/shared/helpers/index.ts @@ -70,3 +70,4 @@ export * from './token-matches-search'; export * from './fp'; export * from './tokens-value'; export * from './math'; +export * from './get-precentage-from-number'; From ce700c619164e66fd438707934d511054fbb6988 Mon Sep 17 00:00:00 2001 From: Artem Date: Thu, 12 Jan 2023 13:23:55 +0200 Subject: [PATCH 17/45] QUIPU-663 add navigate to positions list --- .../v3-item-page/api/v3-remove-liquidity.api.ts | 11 +++++------ .../forms/hooks/use-v3-remove-liquidity.ts | 1 - .../v3-remove-liq-form/use-v3-remove-liq-form.vm.ts | 12 +++++++++++- 3 files changed, 16 insertions(+), 8 deletions(-) diff --git a/src/modules/liquidity/pages/v3-item-page/api/v3-remove-liquidity.api.ts b/src/modules/liquidity/pages/v3-item-page/api/v3-remove-liquidity.api.ts index deb7a1fac..8003b7a3a 100644 --- a/src/modules/liquidity/pages/v3-item-page/api/v3-remove-liquidity.api.ts +++ b/src/modules/liquidity/pages/v3-item-page/api/v3-remove-liquidity.api.ts @@ -10,22 +10,21 @@ export const V3RemoveLiquidityApi = async ( contractAddress: string, positionId: BigNumber, liquidityDelta: BigNumber, - tokenXAddress: string, - tokenYAddress: string, + receiverAddress: string, deadline: string, maximumTokensContributed: MaximumTokensContributed ) => { const v3Contract = await tezos.wallet.at(contractAddress); - const dexTwoLiquidityParams = v3Contract.methodsObject.update_position({ + const V3LiquidityParams = v3Contract.methodsObject.update_position({ position_id: positionId, liquidity_delta: ZERO_AMOUNT_BN.minus(liquidityDelta), - to_x: tokenXAddress, - to_y: tokenYAddress, + to_x: receiverAddress, + to_y: receiverAddress, deadline, maximum_tokens_contributed: maximumTokensContributed, referral_code: QUIPUSWAP_REFERRAL_CODE }); - return await dexTwoLiquidityParams.send(); + return await V3LiquidityParams.send(); }; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-v3-remove-liquidity.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-v3-remove-liquidity.ts index 0edc6b0bb..f8e9dfa38 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-v3-remove-liquidity.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-v3-remove-liquidity.ts @@ -59,7 +59,6 @@ export const useV3RemoveLiquidity = () => { position.id, liquidity, accountPkh, - accountPkh, deadline, tokensValues ); diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts index 3e25ec9f7..70ae81380 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts @@ -1,12 +1,15 @@ import { FormikHelpers, FormikValues, useFormik } from 'formik'; +import { useNavigate } from 'react-router-dom'; -import { FIRST_INDEX, PERCENTAGE_100, ZERO_AMOUNT } from '@config/constants'; +import { AppRootRoutes } from '@app.router'; +import { FIRST_INDEX, PERCENTAGE_100, PERCENT_100, SLASH, ZERO_AMOUNT } from '@config/constants'; import { useLiquidityV3ItemTokens, useLiquidityV3PoolStore, useLiquidityV3PositionStore } from '@modules/liquidity/hooks'; import { useGetLiquidityV3Position } from '@modules/liquidity/hooks/loaders/use-get-liquidity-v3-position'; +import { LiquidityRoutes } from '@modules/liquidity/liquidity-routes.enum'; import { isEqual, isNull, numberAsString } from '@shared/helpers'; import { useTranslation } from '@translation'; @@ -25,7 +28,10 @@ export const useV3RemoveLiqFormViewModel = () => { const { removeLiquidity } = useV3RemoveLiquidity(); const { delayedGetLiquidityV3Position } = useGetLiquidityV3Position(); const poolStore = useLiquidityV3PoolStore(); + const navigate = useNavigate(); + const item = poolStore.item; + const backHref = `${AppRootRoutes.Liquidity}${LiquidityRoutes.v3}${SLASH}${poolStore.poolId}`; const tokens = [tokenX, tokenY]; const userPosition = findUserPosition(positionsWithStats, positionId); @@ -41,6 +47,10 @@ export const useV3RemoveLiqFormViewModel = () => { await removeLiquidity(values); + if (isEqual(Number(values[V3RemoveTokenInput.percantageInput]), PERCENT_100)) { + navigate(backHref); + } + await delayedGetLiquidityV3Position(); actions.setSubmitting(false); From 9d54209a363c2eac47a91958a45a71e0aeeb4efb Mon Sep 17 00:00:00 2001 From: Artem Date: Thu, 12 Jan 2023 15:47:59 +0200 Subject: [PATCH 18/45] QUIPU-676 debugging --- .../hooks/use-calculate-input-amount-value.ts | 12 +++++++ .../use-v3-remove-liq-form.vm.ts | 6 ++-- .../helpers/v3-liquidity-helpers.ts | 35 +++++++++++++++++-- src/shared/helpers/math.ts | 4 ++- 4 files changed, 52 insertions(+), 5 deletions(-) diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-calculate-input-amount-value.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-calculate-input-amount-value.ts index f38b5173e..e9781278d 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-calculate-input-amount-value.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-calculate-input-amount-value.ts @@ -32,6 +32,18 @@ export const useCalculateInputAmountValue = () => { const tokenGiven = givenInputSlug === V3AddTokenInput.firstTokenInput ? tokenX : tokenY; const tokenToCalculate = tokenGiven === tokenX ? tokenY : tokenX; + // eslint-disable-next-line no-console + console.log( + currentTick.index.toFixed(), + lowerTick.index.toFixed(), + upperTick.index.toFixed(), + currentTick.price.toFixed(), + lowerTick.price.toFixed(), + upperTick.price.toFixed(), + tokenGiven === tokenX ? toAtomic(realInputAmount, tokenX).toFixed() : new BigNumber(Infinity).toFixed(), + tokenGiven === tokenY ? toAtomic(realInputAmount, tokenY).toFixed() : new BigNumber(Infinity).toFixed() + ); + const liquidity = calculateLiquidity( currentTick.index, lowerTick.index, diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts index 2e7b824c3..65102a162 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts @@ -1,6 +1,6 @@ import { FormikHelpers, FormikValues, useFormik } from 'formik'; -import { FIRST_INDEX, PERCENTAGE_100, ZERO_AMOUNT } from '@config/constants'; +import { FIRST_INDEX, PERCENTAGE_100 } from '@config/constants'; import { useLiquidityV3ItemTokens, useLiquidityV3PoolStore, @@ -15,6 +15,8 @@ import { calculateOutput, isOneOfTheOutputNotZero, preventRedundantRecalculation import { V3RemoveFormValues, V3RemoveTokenInput } from '../interface'; import { useV3RemoveLiqFormValidation } from './use-v3-remove-liq-form.validation'; +const PERCENTAGE_INPUT_DECIMALS = 2; + export const useV3RemoveLiqFormViewModel = () => { const { t } = useTranslation(); const { tokenX, tokenY } = useLiquidityV3ItemTokens(); @@ -39,7 +41,7 @@ export const useV3RemoveLiqFormViewModel = () => { const handleInputChange = () => { return (inputAmount: string) => { - const { realValue } = numberAsString(inputAmount, ZERO_AMOUNT); + const { realValue } = numberAsString(inputAmount, PERCENTAGE_INPUT_DECIMALS); if (isNull(item) || isNull(userPosition) || isNull(tokenX) || isNull(tokenY)) { return; } diff --git a/src/modules/liquidity/pages/v3-item-page/helpers/v3-liquidity-helpers.ts b/src/modules/liquidity/pages/v3-item-page/helpers/v3-liquidity-helpers.ts index afc9072d9..93fea17d5 100644 --- a/src/modules/liquidity/pages/v3-item-page/helpers/v3-liquidity-helpers.ts +++ b/src/modules/liquidity/pages/v3-item-page/helpers/v3-liquidity-helpers.ts @@ -1,3 +1,4 @@ +/* eslint-disable no-console */ import { BigNumber } from 'bignumber.js'; import { sqrtPriceForTick, liquidityDeltaToTokensDelta, tickForSqrtPrice } from 'quipuswap-v3-sdk/dist/helpers/math'; import { Nat, Int } from 'quipuswap-v3-sdk/dist/types'; @@ -119,16 +120,46 @@ export const calculateLiquidity = ( .integerValue(BigNumber.ROUND_CEIL) : analyticalEstimation; + console.log('deltaIsLessOrEqual', analyticalEstimationDelta, expectedTokensDelta); + console.log('analyticalEstimation', analyticalEstimation.toFixed()); + console.log( + 'multipliedBy && BigNumber.max', + JSON.stringify(expectedTokensDelta), + JSON.stringify(analyticalEstimationDelta) + ); + + // liquidity => { + // console.log('x1', liquidity.toFixed(); + // const delta = calculateTokensDelta(liquidity); + // console.log(JSON.stringify(delta), expectedTokensDelta.x?.toFixed()); + // return delta.x.minus(expectedTokensDelta.x!); + // } + + // eslint-disable-next-line no-console + console.log('1', expectedTokensDelta, lowerEstimation.toFixed(), upperEstimation.toFixed()); + const estimationByTokenX = isExist(expectedTokensDelta.x) ? integerChordMethod( - liquidity => calculateTokensDelta(liquidity).x.minus(expectedTokensDelta.x!), + liquidity => { + console.log('x1', liquidity.toFixed()); + const delta = calculateTokensDelta(liquidity); + console.log(JSON.stringify(delta), expectedTokensDelta.x?.toFixed()); + + return delta.x.minus(expectedTokensDelta.x!); + }, lowerEstimation, upperEstimation ) : Infinity; const estimationByTokenY = isExist(expectedTokensDelta.y) ? integerChordMethod( - liquidity => calculateTokensDelta(liquidity).y.minus(expectedTokensDelta.y!), + liquidity => { + console.log('y1', liquidity.toFixed()); + const delta = calculateTokensDelta(liquidity); + console.log(JSON.stringify(delta), expectedTokensDelta.y?.toFixed()); + + return delta.y.minus(expectedTokensDelta.y!); + }, lowerEstimation, upperEstimation ) diff --git a/src/shared/helpers/math.ts b/src/shared/helpers/math.ts index e72e7a9ed..c8887f156 100644 --- a/src/shared/helpers/math.ts +++ b/src/shared/helpers/math.ts @@ -1,8 +1,9 @@ +/* eslint-disable no-console */ import BigNumber from 'bignumber.js'; import { clamp } from './clamp'; -export const getBaseLog = (base: number, value: number) => Math.log(value) / Math.log(base); +export const getBaseLog = (base: number, value: number) => Math.log(value) / Math.log(base); // const INTEGER_CHORD_METHOD_EPSILON = 1; @@ -14,6 +15,7 @@ const INTEGER_CHORD_METHOD_EPSILON = 1; * @returns the integer value of X for which f(X) <= 0 and is closest to 0. */ export const integerChordMethod = (f: (x: BigNumber) => BigNumber, x0: BigNumber, x1: BigNumber): BigNumber => { + console.log('x0', x0.toFixed()); const y0 = f(x0); const y1 = f(x1); From 6a92528b93e9703aa8dfed124c356934197edd15 Mon Sep 17 00:00:00 2001 From: Artem Date: Thu, 12 Jan 2023 18:06:30 +0200 Subject: [PATCH 19/45] QUIPU-676 add percent, fix calculation on add --- .../components/forms/helpers/index.ts | 1 + .../remove-percent-from-input-value.ts | 3 ++ .../hooks/use-calculate-input-amount-value.ts | 23 ++---------- .../use-v3-remove-liq-form.validation.ts | 3 +- .../use-v3-remove-liq-form.vm.ts | 23 ++++++++---- .../helpers/v3-liquidity-helpers.ts | 35 ++----------------- src/shared/helpers/math.ts | 4 +-- 7 files changed, 29 insertions(+), 63 deletions(-) create mode 100644 src/modules/liquidity/pages/v3-item-page/components/forms/helpers/remove-percent-from-input-value.ts diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/index.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/index.ts index 6cff6b4f2..253c0679b 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/index.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/index.ts @@ -3,3 +3,4 @@ export * from './is-one-of-the-output-not-zero'; export * from './prevent-redunant-recalculation'; export * from './get-count-of-tokens'; export * from './get-current-formik-key-add'; +export * from './remove-percent-from-input-value'; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/remove-percent-from-input-value.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/remove-percent-from-input-value.ts new file mode 100644 index 000000000..7e9fe7baf --- /dev/null +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/remove-percent-from-input-value.ts @@ -0,0 +1,3 @@ +import { EMPTY_STRING, PERCENT } from '@config/constants'; + +export const removePercentFromInputValue = (inputValue: string) => inputValue.replace(PERCENT, EMPTY_STRING); diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-calculate-input-amount-value.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-calculate-input-amount-value.ts index e9781278d..300789d0d 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-calculate-input-amount-value.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-calculate-input-amount-value.ts @@ -6,12 +6,7 @@ import { EMPTY_STRING } from '@config/constants'; import { useLiquidityV3ItemTokens } from '@modules/liquidity/hooks'; import { toAtomic, toReal } from '@shared/helpers'; -import { - Tick, - calculateLiquidity, - calculateXTokenAmount, - calculateYTokenAmount -} from '../../../helpers/v3-liquidity-helpers'; +import { Tick, calculateLiquidity, calculateXTokenAmount, calculateYTokenAmount } from '../../../helpers'; import { V3AddTokenInput } from '../interface'; export const useCalculateInputAmountValue = () => { @@ -32,18 +27,6 @@ export const useCalculateInputAmountValue = () => { const tokenGiven = givenInputSlug === V3AddTokenInput.firstTokenInput ? tokenX : tokenY; const tokenToCalculate = tokenGiven === tokenX ? tokenY : tokenX; - // eslint-disable-next-line no-console - console.log( - currentTick.index.toFixed(), - lowerTick.index.toFixed(), - upperTick.index.toFixed(), - currentTick.price.toFixed(), - lowerTick.price.toFixed(), - upperTick.price.toFixed(), - tokenGiven === tokenX ? toAtomic(realInputAmount, tokenX).toFixed() : new BigNumber(Infinity).toFixed(), - tokenGiven === tokenY ? toAtomic(realInputAmount, tokenY).toFixed() : new BigNumber(Infinity).toFixed() - ); - const liquidity = calculateLiquidity( currentTick.index, lowerTick.index, @@ -51,8 +34,8 @@ export const useCalculateInputAmountValue = () => { currentTick.price, lowerTick.price, upperTick.price, - tokenGiven === tokenX ? toAtomic(realInputAmount, tokenX) : new BigNumber(Infinity), - tokenGiven === tokenY ? toAtomic(realInputAmount, tokenY) : new BigNumber(Infinity) + tokenGiven === tokenX ? toAtomic(realInputAmount, tokenX) : null, + tokenGiven === tokenY ? toAtomic(realInputAmount, tokenY) : null ); const calculateTokenAmount = tokenToCalculate === tokenX ? calculateXTokenAmount : calculateYTokenAmount; diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.validation.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.validation.ts index e793196bf..36aff4b78 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.validation.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.validation.ts @@ -4,6 +4,7 @@ import { PERCENT_100 } from '@config/constants'; import { isExist } from '@shared/helpers'; import { useTranslation } from '@translation'; +import { removePercentFromInputValue } from '../helpers'; import { V3RemoveTokenInput } from '../interface'; export const useV3RemoveLiqFormValidation = () => { @@ -12,7 +13,7 @@ export const useV3RemoveLiqFormValidation = () => { const schema = yup.string().test( 'less-or-equal-to-100', () => t('liquidity|valueShouldBeLessThen100'), - value => (isExist(value) ? Number(value) <= PERCENT_100 : true) + value => (isExist(value) ? Number(removePercentFromInputValue(value)) <= PERCENT_100 : true) ); return yup.object().shape({ diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts index 65102a162..ad2dc415a 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts @@ -1,17 +1,23 @@ import { FormikHelpers, FormikValues, useFormik } from 'formik'; -import { FIRST_INDEX, PERCENTAGE_100 } from '@config/constants'; +import { FIRST_INDEX, PERCENT, PERCENTAGE_100 } from '@config/constants'; import { useLiquidityV3ItemTokens, useLiquidityV3PoolStore, useLiquidityV3PositionStore } from '@modules/liquidity/hooks'; -import { isEqual, isNull, numberAsString } from '@shared/helpers'; +import { setCaretPosition } from '@modules/stableswap/stableswap-liquidity/pages/create/components/create-form/positions.helper'; +import { isEmptyString, isEqual, isNull, numberAsString } from '@shared/helpers'; import { useTranslation } from '@translation'; import { findUserPosition } from '../../../helpers'; import { usePositionsWithStats } from '../../../hooks'; -import { calculateOutput, isOneOfTheOutputNotZero, preventRedundantRecalculation } from '../helpers'; +import { + calculateOutput, + isOneOfTheOutputNotZero, + preventRedundantRecalculation, + removePercentFromInputValue +} from '../helpers'; import { V3RemoveFormValues, V3RemoveTokenInput } from '../interface'; import { useV3RemoveLiqFormValidation } from './use-v3-remove-liq-form.validation'; @@ -41,12 +47,14 @@ export const useV3RemoveLiqFormViewModel = () => { const handleInputChange = () => { return (inputAmount: string) => { - const { realValue } = numberAsString(inputAmount, PERCENTAGE_INPUT_DECIMALS); + const { realValue } = numberAsString(removePercentFromInputValue(inputAmount), PERCENTAGE_INPUT_DECIMALS); if (isNull(item) || isNull(userPosition) || isNull(tokenX) || isNull(tokenY)) { return; } + const _inputAmount = preventRedundantRecalculation(realValue); - const _inputAmount = preventRedundantRecalculation(inputAmount); + const input = document.getElementById('v3-lp-input'); + setCaretPosition(input as HTMLInputElement); const { tokenXDeposit, tokenYDeposit } = calculateOutput( _inputAmount, @@ -94,9 +102,12 @@ export const useV3RemoveLiqFormViewModel = () => { const lpData = { id: 'v3-lp-input', - value: formik.values[V3RemoveTokenInput.lpTokenInput], + value: isEmptyString(formik.values[V3RemoveTokenInput.lpTokenInput]) + ? formik.values[V3RemoveTokenInput.lpTokenInput] + : `${formik.values[V3RemoveTokenInput.lpTokenInput]}${PERCENT}`, error: formik.errors[V3RemoveTokenInput.lpTokenInput], balance: PERCENTAGE_100, + decimals: PERCENTAGE_INPUT_DECIMALS, label: t('common|Amount'), tokens: [tokenX, tokenY], hiddenBalance: true, diff --git a/src/modules/liquidity/pages/v3-item-page/helpers/v3-liquidity-helpers.ts b/src/modules/liquidity/pages/v3-item-page/helpers/v3-liquidity-helpers.ts index 93fea17d5..afc9072d9 100644 --- a/src/modules/liquidity/pages/v3-item-page/helpers/v3-liquidity-helpers.ts +++ b/src/modules/liquidity/pages/v3-item-page/helpers/v3-liquidity-helpers.ts @@ -1,4 +1,3 @@ -/* eslint-disable no-console */ import { BigNumber } from 'bignumber.js'; import { sqrtPriceForTick, liquidityDeltaToTokensDelta, tickForSqrtPrice } from 'quipuswap-v3-sdk/dist/helpers/math'; import { Nat, Int } from 'quipuswap-v3-sdk/dist/types'; @@ -120,46 +119,16 @@ export const calculateLiquidity = ( .integerValue(BigNumber.ROUND_CEIL) : analyticalEstimation; - console.log('deltaIsLessOrEqual', analyticalEstimationDelta, expectedTokensDelta); - console.log('analyticalEstimation', analyticalEstimation.toFixed()); - console.log( - 'multipliedBy && BigNumber.max', - JSON.stringify(expectedTokensDelta), - JSON.stringify(analyticalEstimationDelta) - ); - - // liquidity => { - // console.log('x1', liquidity.toFixed(); - // const delta = calculateTokensDelta(liquidity); - // console.log(JSON.stringify(delta), expectedTokensDelta.x?.toFixed()); - // return delta.x.minus(expectedTokensDelta.x!); - // } - - // eslint-disable-next-line no-console - console.log('1', expectedTokensDelta, lowerEstimation.toFixed(), upperEstimation.toFixed()); - const estimationByTokenX = isExist(expectedTokensDelta.x) ? integerChordMethod( - liquidity => { - console.log('x1', liquidity.toFixed()); - const delta = calculateTokensDelta(liquidity); - console.log(JSON.stringify(delta), expectedTokensDelta.x?.toFixed()); - - return delta.x.minus(expectedTokensDelta.x!); - }, + liquidity => calculateTokensDelta(liquidity).x.minus(expectedTokensDelta.x!), lowerEstimation, upperEstimation ) : Infinity; const estimationByTokenY = isExist(expectedTokensDelta.y) ? integerChordMethod( - liquidity => { - console.log('y1', liquidity.toFixed()); - const delta = calculateTokensDelta(liquidity); - console.log(JSON.stringify(delta), expectedTokensDelta.y?.toFixed()); - - return delta.y.minus(expectedTokensDelta.y!); - }, + liquidity => calculateTokensDelta(liquidity).y.minus(expectedTokensDelta.y!), lowerEstimation, upperEstimation ) diff --git a/src/shared/helpers/math.ts b/src/shared/helpers/math.ts index c8887f156..e72e7a9ed 100644 --- a/src/shared/helpers/math.ts +++ b/src/shared/helpers/math.ts @@ -1,9 +1,8 @@ -/* eslint-disable no-console */ import BigNumber from 'bignumber.js'; import { clamp } from './clamp'; -export const getBaseLog = (base: number, value: number) => Math.log(value) / Math.log(base); // +export const getBaseLog = (base: number, value: number) => Math.log(value) / Math.log(base); const INTEGER_CHORD_METHOD_EPSILON = 1; @@ -15,7 +14,6 @@ const INTEGER_CHORD_METHOD_EPSILON = 1; * @returns the integer value of X for which f(X) <= 0 and is closest to 0. */ export const integerChordMethod = (f: (x: BigNumber) => BigNumber, x0: BigNumber, x1: BigNumber): BigNumber => { - console.log('x0', x0.toFixed()); const y0 = f(x0); const y1 = f(x1); From 15d00fed1097009c237e0e66fd5058b52279ace0 Mon Sep 17 00:00:00 2001 From: Artem Date: Fri, 13 Jan 2023 10:51:54 +0200 Subject: [PATCH 20/45] QUIPU-663 fix path --- .../forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts | 3 +-- .../pages/create/components/create-form/hooks.ts | 4 ++-- src/shared/helpers/index.ts | 1 + .../helpers/set-caret-position.ts} | 0 4 files changed, 4 insertions(+), 4 deletions(-) rename src/{modules/stableswap/stableswap-liquidity/pages/create/components/create-form/positions.helper.ts => shared/helpers/set-caret-position.ts} (100%) diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts index f3a9d9bc7..decdcd40c 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-remove-liq-form/use-v3-remove-liq-form.vm.ts @@ -10,8 +10,7 @@ import { } from '@modules/liquidity/hooks'; import { useGetLiquidityV3Position } from '@modules/liquidity/hooks/loaders/use-get-liquidity-v3-position'; import { LiquidityRoutes } from '@modules/liquidity/liquidity-routes.enum'; -import { setCaretPosition } from '@modules/stableswap/stableswap-liquidity/pages/create/components/create-form/positions.helper'; -import { isEmptyString, isEqual, isNull, numberAsString } from '@shared/helpers'; +import { isEmptyString, isEqual, isNull, numberAsString, setCaretPosition } from '@shared/helpers'; import { useTranslation } from '@translation'; import { findUserPosition } from '../../../helpers'; diff --git a/src/modules/stableswap/stableswap-liquidity/pages/create/components/create-form/hooks.ts b/src/modules/stableswap/stableswap-liquidity/pages/create/components/create-form/hooks.ts index b4727e97f..5f398e10c 100644 --- a/src/modules/stableswap/stableswap-liquidity/pages/create/components/create-form/hooks.ts +++ b/src/modules/stableswap/stableswap-liquidity/pages/create/components/create-form/hooks.ts @@ -13,7 +13,8 @@ import { getFormikError, isNull, isEmptyString, - isEmptyArray + isEmptyArray, + setCaretPosition } from '@shared/helpers'; import { Nullable, Optional, Token } from '@shared/types'; import { NumberAsStringSchema } from '@shared/validators'; @@ -28,7 +29,6 @@ import { MIN_QUANTITY_OF_TOKENS_IN_STABLEPOOL, MAX_QUANTITY_OF_TOKENS_IN_STABLEPOOL } from './constants'; -import { setCaretPosition } from './positions.helper'; const MAX_DECIMALS_AMOUNT = 10; const MAX_REAL_VALUE_AMOUNT = new BigNumber(UPPER_LIQUIDITY_PROVIDERS_FEE.value); diff --git a/src/shared/helpers/index.ts b/src/shared/helpers/index.ts index 6217cd9bb..4517f93c3 100644 --- a/src/shared/helpers/index.ts +++ b/src/shared/helpers/index.ts @@ -71,3 +71,4 @@ export * from './fp'; export * from './tokens-value'; export * from './math'; export * from './get-precentage-from-number'; +export * from './set-caret-position'; diff --git a/src/modules/stableswap/stableswap-liquidity/pages/create/components/create-form/positions.helper.ts b/src/shared/helpers/set-caret-position.ts similarity index 100% rename from src/modules/stableswap/stableswap-liquidity/pages/create/components/create-form/positions.helper.ts rename to src/shared/helpers/set-caret-position.ts From 09d672777c9616e3c2026342d1122b038bca7d38 Mon Sep 17 00:00:00 2001 From: Artem Date: Fri, 13 Jan 2023 11:33:57 +0200 Subject: [PATCH 21/45] QUIPU-663 calculation fixes --- .../forms/helpers/calculate-output.ts | 33 +++++++++++++------ .../helpers/get-precentage-from-number.ts | 2 +- 2 files changed, 24 insertions(+), 11 deletions(-) diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/calculate-output.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/calculate-output.ts index 1df42f72e..e0210b3db 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/calculate-output.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/calculate-output.ts @@ -2,11 +2,13 @@ import BigNumber from 'bignumber.js'; import { V3LiquidityPoolApi } from '@modules/liquidity/api'; import { LiquidityV3Position } from '@modules/liquidity/types'; -import { toReal, toFixed, getPercentageFromNumber } from '@shared/helpers'; +import { toReal, getPercentageFromNumber, toFixed } from '@shared/helpers'; import { Token } from '@shared/types'; import { calculateDeposit } from '../../../helpers'; +const PERCENT_DECIMAL_PRECISION = 1e2; + export const calculateOutput = ( inputAmount: string, position: LiquidityV3Position, @@ -16,18 +18,29 @@ export const calculateOutput = ( ) => { const { x: tokenXAtomicDeposit, y: tokenYAtomicDeposit } = calculateDeposit(position, poolStorage); - const realTokenXAtomicDeposit = toReal(tokenXAtomicDeposit, tokenX.metadata.decimals).decimalPlaces( - tokenX.metadata.decimals, - BigNumber.ROUND_DOWN + const atomicCalculatedTokenXDeposit = getPercentageFromNumber( + tokenXAtomicDeposit.multipliedBy(PERCENT_DECIMAL_PRECISION), + new BigNumber(inputAmount).multipliedBy(PERCENT_DECIMAL_PRECISION) + ); + + const atomicCalculatedTokenYDeposit = getPercentageFromNumber( + tokenYAtomicDeposit.multipliedBy(PERCENT_DECIMAL_PRECISION), + new BigNumber(inputAmount).multipliedBy(PERCENT_DECIMAL_PRECISION) ); - const realTokenYAtomicDeposit = toReal(tokenYAtomicDeposit, tokenY.metadata.decimals).decimalPlaces( - tokenY.metadata.decimals, - BigNumber.ROUND_DOWN + const realTokenXAtomicDeposit = toFixed( + toReal(atomicCalculatedTokenXDeposit, tokenX.metadata.decimals).decimalPlaces( + tokenX.metadata.decimals, + BigNumber.ROUND_DOWN + ) ); - const calculatedTokenXDeposit = toFixed(getPercentageFromNumber(realTokenXAtomicDeposit, new BigNumber(inputAmount))); - const calculatedTokenYDeposit = toFixed(getPercentageFromNumber(realTokenYAtomicDeposit, new BigNumber(inputAmount))); + const realTokenYAtomicDeposit = toFixed( + toReal(atomicCalculatedTokenYDeposit, tokenY.metadata.decimals).decimalPlaces( + tokenY.metadata.decimals, + BigNumber.ROUND_DOWN + ) + ); - return { tokenXDeposit: calculatedTokenXDeposit, tokenYDeposit: calculatedTokenYDeposit }; + return { tokenXDeposit: realTokenXAtomicDeposit, tokenYDeposit: realTokenYAtomicDeposit }; }; diff --git a/src/shared/helpers/get-precentage-from-number.ts b/src/shared/helpers/get-precentage-from-number.ts index 415e29056..2749268c0 100644 --- a/src/shared/helpers/get-precentage-from-number.ts +++ b/src/shared/helpers/get-precentage-from-number.ts @@ -3,4 +3,4 @@ import { BigNumber } from 'bignumber.js'; import { PERCENTAGE_100 } from '@config/constants'; export const getPercentageFromNumber = (amount: BigNumber, percent: BigNumber) => - amount.div(PERCENTAGE_100).multipliedBy(percent); + amount.dividedBy(PERCENTAGE_100).multipliedBy(percent); From 9cf1327cbc8a051dc24933890df1848f9f9bd278 Mon Sep 17 00:00:00 2001 From: Artem Date: Fri, 13 Jan 2023 13:14:22 +0200 Subject: [PATCH 22/45] QUIPU-663 fixes after review --- .../api/v3-remove-liquidity.api.ts | 4 +-- .../forms/helpers/calculate-output.ts | 29 +++++-------------- 2 files changed, 10 insertions(+), 23 deletions(-) diff --git a/src/modules/liquidity/pages/v3-item-page/api/v3-remove-liquidity.api.ts b/src/modules/liquidity/pages/v3-item-page/api/v3-remove-liquidity.api.ts index 8003b7a3a..6fbb59d9d 100644 --- a/src/modules/liquidity/pages/v3-item-page/api/v3-remove-liquidity.api.ts +++ b/src/modules/liquidity/pages/v3-item-page/api/v3-remove-liquidity.api.ts @@ -1,7 +1,7 @@ import { TezosToolkit } from '@taquito/taquito'; import { BigNumber } from 'bignumber.js'; -import { QUIPUSWAP_REFERRAL_CODE, ZERO_AMOUNT_BN } from '@config/constants'; +import { QUIPUSWAP_REFERRAL_CODE } from '@config/constants'; import { MaximumTokensContributed } from '../types'; @@ -18,7 +18,7 @@ export const V3RemoveLiquidityApi = async ( const V3LiquidityParams = v3Contract.methodsObject.update_position({ position_id: positionId, - liquidity_delta: ZERO_AMOUNT_BN.minus(liquidityDelta), + liquidity_delta: liquidityDelta.negated(), to_x: receiverAddress, to_y: receiverAddress, deadline, diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/calculate-output.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/calculate-output.ts index e0210b3db..0af6bc1fe 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/calculate-output.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/helpers/calculate-output.ts @@ -7,8 +7,6 @@ import { Token } from '@shared/types'; import { calculateDeposit } from '../../../helpers'; -const PERCENT_DECIMAL_PRECISION = 1e2; - export const calculateOutput = ( inputAmount: string, position: LiquidityV3Position, @@ -19,28 +17,17 @@ export const calculateOutput = ( const { x: tokenXAtomicDeposit, y: tokenYAtomicDeposit } = calculateDeposit(position, poolStorage); const atomicCalculatedTokenXDeposit = getPercentageFromNumber( - tokenXAtomicDeposit.multipliedBy(PERCENT_DECIMAL_PRECISION), - new BigNumber(inputAmount).multipliedBy(PERCENT_DECIMAL_PRECISION) - ); + tokenXAtomicDeposit, + new BigNumber(inputAmount) + ).integerValue(BigNumber.ROUND_DOWN); const atomicCalculatedTokenYDeposit = getPercentageFromNumber( - tokenYAtomicDeposit.multipliedBy(PERCENT_DECIMAL_PRECISION), - new BigNumber(inputAmount).multipliedBy(PERCENT_DECIMAL_PRECISION) - ); - - const realTokenXAtomicDeposit = toFixed( - toReal(atomicCalculatedTokenXDeposit, tokenX.metadata.decimals).decimalPlaces( - tokenX.metadata.decimals, - BigNumber.ROUND_DOWN - ) - ); + tokenYAtomicDeposit, + new BigNumber(inputAmount) + ).integerValue(BigNumber.ROUND_DOWN); - const realTokenYAtomicDeposit = toFixed( - toReal(atomicCalculatedTokenYDeposit, tokenY.metadata.decimals).decimalPlaces( - tokenY.metadata.decimals, - BigNumber.ROUND_DOWN - ) - ); + const realTokenXAtomicDeposit = toFixed(toReal(atomicCalculatedTokenXDeposit, tokenX)); + const realTokenYAtomicDeposit = toFixed(toReal(atomicCalculatedTokenYDeposit, tokenY)); return { tokenXDeposit: realTokenXAtomicDeposit, tokenYDeposit: realTokenYAtomicDeposit }; }; From a2c834d47333802837ce0ef61baeca70bd989ea9 Mon Sep 17 00:00:00 2001 From: Artem Date: Fri, 13 Jan 2023 14:03:14 +0200 Subject: [PATCH 23/45] QUIPU-663 fixes --- .../pages/v3-item-page/api/v3-remove-liquidity.api.ts | 9 ++++----- .../components/forms/hooks/use-v3-remove-liquidity.ts | 5 +---- .../forms/interface/v3-liquidity-form-values.ts | 10 +++++----- .../v3-add-liq-form/use-v3-add-liq-form.validation.ts | 2 +- 4 files changed, 11 insertions(+), 15 deletions(-) diff --git a/src/modules/liquidity/pages/v3-item-page/api/v3-remove-liquidity.api.ts b/src/modules/liquidity/pages/v3-item-page/api/v3-remove-liquidity.api.ts index 6fbb59d9d..aba7c142f 100644 --- a/src/modules/liquidity/pages/v3-item-page/api/v3-remove-liquidity.api.ts +++ b/src/modules/liquidity/pages/v3-item-page/api/v3-remove-liquidity.api.ts @@ -1,9 +1,9 @@ import { TezosToolkit } from '@taquito/taquito'; import { BigNumber } from 'bignumber.js'; -import { QUIPUSWAP_REFERRAL_CODE } from '@config/constants'; +import { QUIPUSWAP_REFERRAL_CODE, ZERO_AMOUNT_BN } from '@config/constants'; -import { MaximumTokensContributed } from '../types'; +const DEFAULT_TOKENS_CONTRIBUTED = { x: ZERO_AMOUNT_BN, y: ZERO_AMOUNT_BN }; export const V3RemoveLiquidityApi = async ( tezos: TezosToolkit, @@ -11,8 +11,7 @@ export const V3RemoveLiquidityApi = async ( positionId: BigNumber, liquidityDelta: BigNumber, receiverAddress: string, - deadline: string, - maximumTokensContributed: MaximumTokensContributed + deadline: string ) => { const v3Contract = await tezos.wallet.at(contractAddress); @@ -22,7 +21,7 @@ export const V3RemoveLiquidityApi = async ( to_x: receiverAddress, to_y: receiverAddress, deadline, - maximum_tokens_contributed: maximumTokensContributed, + maximum_tokens_contributed: DEFAULT_TOKENS_CONTRIBUTED, referral_code: QUIPUSWAP_REFERRAL_CODE }); diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-v3-remove-liquidity.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-v3-remove-liquidity.ts index f8e9dfa38..c82296c7f 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-v3-remove-liquidity.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/hooks/use-v3-remove-liquidity.ts @@ -17,7 +17,6 @@ import { useTranslation } from '@translation'; import { V3RemoveLiquidityApi } from '../../../api'; import { findUserPosition } from '../../../helpers'; import { usePositionsWithStats } from '../../../hooks'; -import { getTokensValues } from '../helpers'; import { V3RemoveTokenInput } from '../interface'; // TODO: logData @@ -46,7 +45,6 @@ export const useV3RemoveLiquidity = () => { const percantage = new BigNumber(inputAmounts[V3RemoveTokenInput.percantageInput]); const liquidity = getPercentageFromNumber(position.liquidity, percantage).integerValue(BigNumber.ROUND_DOWN); - const tokensValues = getTokensValues(inputAmounts, tokenX, tokenY); const deadline = await getTransactionDeadline(tezos, transactionDeadline); const logData = {}; @@ -59,8 +57,7 @@ export const useV3RemoveLiquidity = () => { position.id, liquidity, accountPkh, - deadline, - tokensValues + deadline ); await confirmOperation(operation.opHash, { message: t('liquidity|successfullyRemoved') }); amplitudeService.logEvent('V3_LIQUIDITY_REMOVE_SUCCESS', logData); diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/interface/v3-liquidity-form-values.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/interface/v3-liquidity-form-values.ts index 647398a9a..2751fa4a1 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/interface/v3-liquidity-form-values.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/interface/v3-liquidity-form-values.ts @@ -1,6 +1,6 @@ export enum V3AddTokenInput { - firstTokenInput = 'tokenInput-0', - secondTokenInput = 'tokenInput-1' + firstTokenInput = 'token-input-0', + secondTokenInput = 'token-input-1' } export interface V3AddFormValues { @@ -8,9 +8,9 @@ export interface V3AddFormValues { } export enum V3RemoveTokenInput { - percantageInput = 'percantageInput', - tokenXOutput = 'tokenXOutput', - tokenYOutput = 'tokenYOutput' + percantageInput = 'percantage-input', + tokenXOutput = 'token-x-output', + tokenYOutput = 'token-y-output' } export interface V3RemoveFormValues { diff --git a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/use-v3-add-liq-form.validation.ts b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/use-v3-add-liq-form.validation.ts index 67c1326fa..6bbf06fb4 100644 --- a/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/use-v3-add-liq-form.validation.ts +++ b/src/modules/liquidity/pages/v3-item-page/components/forms/v3-add-liq-form/use-v3-add-liq-form.validation.ts @@ -28,7 +28,7 @@ export const useV3AddLiqFormValidation = (userBalances: Nullable[], t }); const shapeMap: Array<[string, NumberAsStringSchema]> = inputAmountSchemas.map((item, index) => { - return [`tokenInput-${index}`, item.required('Amount is required!')]; + return [`token-input-${index}`, item.required('Amount is required!')]; }); const shape: Record = Object.fromEntries(shapeMap); From 09612165a6e98aa7a2177b7b7a83861e2072fa0f Mon Sep 17 00:00:00 2001 From: Inokentii Mazhara Date: Fri, 13 Jan 2023 15:59:56 +0200 Subject: [PATCH 24/45] QUIPU-368 Set navigation menu height from window.innerHeight property --- .../components/header/menu/menu.module.scss | 1 - src/shared/components/header/menu/menu.tsx | 17 +++++++++++++++-- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/src/shared/components/header/menu/menu.module.scss b/src/shared/components/header/menu/menu.module.scss index b6241cb08..1bd46311d 100644 --- a/src/shared/components/header/menu/menu.module.scss +++ b/src/shared/components/header/menu/menu.module.scss @@ -3,7 +3,6 @@ .root { width: 100%; - height: calc(var(--vh, 1vh) * 100); background-color: $ui-01; overflow: auto; display: flex; diff --git a/src/shared/components/header/menu/menu.tsx b/src/shared/components/header/menu/menu.tsx index fccc9d20b..ed15a05ca 100644 --- a/src/shared/components/header/menu/menu.tsx +++ b/src/shared/components/header/menu/menu.tsx @@ -1,4 +1,4 @@ -import { FC, useContext } from 'react'; +import { FC, useContext, useEffect, useState } from 'react'; import cx from 'classnames'; @@ -31,8 +31,21 @@ export const Menu: FC = ({ className }) => { amplitudeService.logEvent('MADFISH_CLICK'); }; + const [innerHeight, setInnerHeight] = useState(window.innerHeight); + + useEffect(() => { + const handleResize = () => setInnerHeight(window.innerHeight); + window.addEventListener('resize', handleResize); + + return () => window.removeEventListener('resize', handleResize); + }, []); + return ( -
+