From 0ad2066878df7e6dee1623a168cd18cda45d1c37 Mon Sep 17 00:00:00 2001 From: ridel1e Date: Wed, 12 Jan 2022 23:36:36 +0300 Subject: [PATCH 01/15] move unpacked type and observable hooks into common --- src/@types/dapp-wallet-web-bridge.d.ts | 2 +- src/{ => common}/hooks/useObservable.ts | 0 src/{ => common}/utils/unpacked.ts | 0 .../Header/AnalyticsDataTag/AnalyticsDataTag.tsx | 2 +- src/components/Header/Header.tsx | 2 +- src/components/WalletModal/WalletModal.tsx | 2 +- src/components/common/ActionForm/ActionForm.tsx | 2 +- .../common/ConnectWalletButton/ConnectWalletButton.tsx | 2 +- src/components/common/TokenControl/TokenControl.tsx | 2 +- .../TokenSelect/TokenListModal/TokenListModal.tsx | 2 +- .../RefundConfirmationModal.tsx | 2 +- src/hooks/usePair.ts | 2 +- src/pages/Pool/AddLiquidity/AddLiquidity.tsx | 10 +++++----- .../AddLiquidityConfirmationModal.tsx | 2 +- src/pages/Pool/Pool.tsx | 2 +- src/pages/Pool/PoolPosition/PoolPosition.tsx | 2 +- .../LiquidityPositionsItem/LiquidityPositionsItem.tsx | 2 +- src/pages/Swap/OperationSettings/OperationSettings.tsx | 2 +- src/pages/Swap/Ratio/Ratio.tsx | 2 +- src/pages/Swap/Swap.tsx | 4 +--- .../SwapConfirmationModal/SwapConfirmationModal.tsx | 2 +- src/pages/Swap/SwapTooltip/SwapTooltip.tsx | 2 +- src/services/new/balance.ts | 2 +- src/services/new/core.ts | 9 ++++++++- 24 files changed, 33 insertions(+), 28 deletions(-) rename src/{ => common}/hooks/useObservable.ts (100%) rename src/{ => common}/utils/unpacked.ts (100%) diff --git a/src/@types/dapp-wallet-web-bridge.d.ts b/src/@types/dapp-wallet-web-bridge.d.ts index 498ca2e15..a012068fc 100644 --- a/src/@types/dapp-wallet-web-bridge.d.ts +++ b/src/@types/dapp-wallet-web-bridge.d.ts @@ -27,7 +27,7 @@ namespace ErgoBridge { get_used_addresses: (paginate?: Paging) => Promise; - get_unused_addresses: () => Address[]; + get_unused_addresses: () => Promise; sign_tx: (tx: UnsignedErgoTxProxy) => Promise; diff --git a/src/hooks/useObservable.ts b/src/common/hooks/useObservable.ts similarity index 100% rename from src/hooks/useObservable.ts rename to src/common/hooks/useObservable.ts diff --git a/src/utils/unpacked.ts b/src/common/utils/unpacked.ts similarity index 100% rename from src/utils/unpacked.ts rename to src/common/utils/unpacked.ts diff --git a/src/components/Header/AnalyticsDataTag/AnalyticsDataTag.tsx b/src/components/Header/AnalyticsDataTag/AnalyticsDataTag.tsx index ee6e14aab..aeeaec0c2 100644 --- a/src/components/Header/AnalyticsDataTag/AnalyticsDataTag.tsx +++ b/src/components/Header/AnalyticsDataTag/AnalyticsDataTag.tsx @@ -1,8 +1,8 @@ import { LoadingOutlined } from '@ant-design/icons'; import React from 'react'; +import { useObservable } from '../../../common/hooks/useObservable'; import { Box, Flex, Typography } from '../../../ergodex-cdk'; -import { useObservable } from '../../../hooks/useObservable'; import { aggregatedAnalyticsData24H$ } from '../../../services/new/analytics'; import { formatToUSD } from '../../../services/number'; import { renderFractions } from '../../../utils/math'; diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 89a0e98a1..2b90c0a3a 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -2,9 +2,9 @@ import './Header.less'; import React from 'react'; +import { useObservable } from '../../common/hooks/useObservable'; import { ERG_TOKEN_NAME } from '../../constants/erg'; import { useSettings } from '../../context'; -import { useObservable } from '../../hooks/useObservable'; import { nativeTokenBalance$, WalletState, diff --git a/src/components/WalletModal/WalletModal.tsx b/src/components/WalletModal/WalletModal.tsx index 18805f457..a5eb4aa58 100644 --- a/src/components/WalletModal/WalletModal.tsx +++ b/src/components/WalletModal/WalletModal.tsx @@ -1,8 +1,8 @@ import React from 'react'; +import { useObservable } from '../../common/hooks/useObservable'; import { Box, Flex, Modal, Typography } from '../../ergodex-cdk'; import { Tabs } from '../../ergodex-cdk/components/Tabs/Tabs'; -import { useObservable } from '../../hooks/useObservable'; import { nativeTokenBalance$ } from '../../services/new/core'; import { isLowBalance } from '../../utils/walletMath'; import { AddressesTab } from './AddressesTab/AddressesTab'; diff --git a/src/components/common/ActionForm/ActionForm.tsx b/src/components/common/ActionForm/ActionForm.tsx index 03960c939..653a6d076 100644 --- a/src/components/common/ActionForm/ActionForm.tsx +++ b/src/components/common/ActionForm/ActionForm.tsx @@ -2,9 +2,9 @@ import React, { FC, ReactNode, useEffect, useState } from 'react'; import { debounceTime, first, Observable } from 'rxjs'; +import { useObservable } from '../../../common/hooks/useObservable'; import { Flex } from '../../../ergodex-cdk'; import { Form, FormGroup } from '../../../ergodex-cdk/components/Form/NewForm'; -import { useObservable } from '../../../hooks/useObservable'; import { isWalletLoading$ } from '../../../services/new/core'; import { isOnline$ } from '../../../services/new/networkConnection'; import { ActionButton, ActionButtonState } from './ActionButton/ActionButton'; diff --git a/src/components/common/ConnectWalletButton/ConnectWalletButton.tsx b/src/components/common/ConnectWalletButton/ConnectWalletButton.tsx index 42d8ee20d..d20722920 100644 --- a/src/components/common/ConnectWalletButton/ConnectWalletButton.tsx +++ b/src/components/common/ConnectWalletButton/ConnectWalletButton.tsx @@ -3,9 +3,9 @@ import './ConnectWalletButton.less'; import cn from 'classnames'; import React, { FC, ReactNode } from 'react'; +import { useObservable } from '../../../common/hooks/useObservable'; import { useAppLoadingState } from '../../../context'; import { Button, ButtonProps, Modal } from '../../../ergodex-cdk'; -import { useObservable } from '../../../hooks/useObservable'; import { isWalletSetuped$ } from '../../../services/new/core'; import { ChooseWalletModal } from './ChooseWalletModal/ChooseWalletModal'; diff --git a/src/components/common/TokenControl/TokenControl.tsx b/src/components/common/TokenControl/TokenControl.tsx index 72a72db14..82e2edfd9 100644 --- a/src/components/common/TokenControl/TokenControl.tsx +++ b/src/components/common/TokenControl/TokenControl.tsx @@ -6,13 +6,13 @@ import React, { FC, ReactNode } from 'react'; import { useTranslation } from 'react-i18next'; import { Observable, of } from 'rxjs'; +import { useObservable } from '../../../common/hooks/useObservable'; import { Currency } from '../../../common/models/Currency'; import { Animation, Box, Button, Flex, Typography } from '../../../ergodex-cdk'; import { Form, useFormContext, } from '../../../ergodex-cdk/components/Form/NewForm'; -import { useObservable } from '../../../hooks/useObservable'; import { useWalletBalance } from '../../../services/new/balance'; import { isWalletLoading$ } from '../../../services/new/core'; import { diff --git a/src/components/common/TokenControl/TokenSelect/TokenListModal/TokenListModal.tsx b/src/components/common/TokenControl/TokenSelect/TokenListModal/TokenListModal.tsx index 9c0b28662..fb5a5feed 100644 --- a/src/components/common/TokenControl/TokenSelect/TokenListModal/TokenListModal.tsx +++ b/src/components/common/TokenControl/TokenSelect/TokenListModal/TokenListModal.tsx @@ -4,8 +4,8 @@ import { AssetInfo } from '@ergolabs/ergo-sdk'; import React, { useState } from 'react'; import { Observable, of } from 'rxjs'; +import { useObservable } from '../../../../../common/hooks/useObservable'; import { Flex, Input, Modal, SearchOutlined } from '../../../../../ergodex-cdk'; -import { useObservable } from '../../../../../hooks/useObservable'; import { TokenListItem } from './TokenListItem'; interface TokenListModalProps { diff --git a/src/components/common/TxHistory/RefundConfirmationModal/RefundConfirmationModal.tsx b/src/components/common/TxHistory/RefundConfirmationModal/RefundConfirmationModal.tsx index a6c6e4861..28e0a2049 100644 --- a/src/components/common/TxHistory/RefundConfirmationModal/RefundConfirmationModal.tsx +++ b/src/components/common/TxHistory/RefundConfirmationModal/RefundConfirmationModal.tsx @@ -1,6 +1,7 @@ import { TxId } from '@ergolabs/ergo-sdk'; import React, { useState } from 'react'; +import { useObservable } from '../../../../common/hooks/useObservable'; import { Address, useSettings } from '../../../../context'; import { Box, @@ -12,7 +13,6 @@ import { Modal, Typography, } from '../../../../ergodex-cdk'; -import { useObservable } from '../../../../hooks/useObservable'; import { utxos$ } from '../../../../services/new/core'; import { submitTx } from '../../../../services/yoroi'; import { refund } from '../../../../utils/ammOperations'; diff --git a/src/hooks/usePair.ts b/src/hooks/usePair.ts index d00438d2e..0fb04cab7 100644 --- a/src/hooks/usePair.ts +++ b/src/hooks/usePair.ts @@ -2,10 +2,10 @@ import { AssetAmount } from '@ergolabs/ergo-sdk'; import { useEffect, useState } from 'react'; import { AssetPair } from '../@types/asset'; +import { useObservable } from '../common/hooks/useObservable'; import { AmmPool } from '../common/models/AmmPool'; import { isWalletLoading$ } from '../services/new/core'; import { parseUserInputToFractions, renderFractions } from '../utils/math'; -import { useObservable } from './useObservable'; interface Pair { pair?: AssetPair; diff --git a/src/pages/Pool/AddLiquidity/AddLiquidity.tsx b/src/pages/Pool/AddLiquidity/AddLiquidity.tsx index 621d9ff77..3980e65d8 100644 --- a/src/pages/Pool/AddLiquidity/AddLiquidity.tsx +++ b/src/pages/Pool/AddLiquidity/AddLiquidity.tsx @@ -17,6 +17,11 @@ import { switchMap, } from 'rxjs'; +import { + useObservable, + useSubject, + useSubscription, +} from '../../../common/hooks/useObservable'; import { ActionForm } from '../../../components/common/ActionForm/ActionForm'; import { PoolSelect } from '../../../components/common/PoolSelect/PoolSelect'; import { TokenControlFormItem } from '../../../components/common/TokenControl/TokenControl'; @@ -28,11 +33,6 @@ import { import { FormPageWrapper } from '../../../components/FormPageWrapper/FormPageWrapper'; import { Flex, Typography } from '../../../ergodex-cdk'; import { Form, useForm } from '../../../ergodex-cdk/components/Form/NewForm'; -import { - useObservable, - useSubject, - useSubscription, -} from '../../../hooks/useObservable'; import { assets$, getAvailableAssetFor } from '../../../services/new/assets'; import { useWalletBalance } from '../../../services/new/balance'; import { useMaxTotalFees, useNetworkAsset } from '../../../services/new/core'; diff --git a/src/pages/Pool/AddLiquidity/AddLiquidityConfirmationModal/AddLiquidityConfirmationModal.tsx b/src/pages/Pool/AddLiquidity/AddLiquidityConfirmationModal/AddLiquidityConfirmationModal.tsx index 196a760ac..ddb32adcd 100644 --- a/src/pages/Pool/AddLiquidity/AddLiquidityConfirmationModal/AddLiquidityConfirmationModal.tsx +++ b/src/pages/Pool/AddLiquidity/AddLiquidityConfirmationModal/AddLiquidityConfirmationModal.tsx @@ -2,12 +2,12 @@ import { minValueForOrder } from '@ergolabs/ergo-dex-sdk'; import { BoxSelection, DefaultBoxSelector, ErgoTx } from '@ergolabs/ergo-sdk'; import React, { FC } from 'react'; +import { useObservable } from '../../../../common/hooks/useObservable'; import { InfoTooltip } from '../../../../components/InfoTooltip/InfoTooltip'; import { ERG_DECIMALS, UI_FEE } from '../../../../constants/erg'; import { defaultExFee } from '../../../../constants/settings'; import { useSettings } from '../../../../context'; import { Box, Button, Flex, Modal, Typography } from '../../../../ergodex-cdk'; -import { useObservable } from '../../../../hooks/useObservable'; import { explorer } from '../../../../services/explorer'; import { useMaxTotalFees, diff --git a/src/pages/Pool/Pool.tsx b/src/pages/Pool/Pool.tsx index ee68df830..773abdae7 100644 --- a/src/pages/Pool/Pool.tsx +++ b/src/pages/Pool/Pool.tsx @@ -3,10 +3,10 @@ import './Pool.less'; import React from 'react'; import { useHistory } from 'react-router-dom'; +import { useObservable } from '../../common/hooks/useObservable'; import { ConnectWalletButton } from '../../components/common/ConnectWalletButton/ConnectWalletButton'; import { FormPageWrapper } from '../../components/FormPageWrapper/FormPageWrapper'; import { Button, Flex, PlusOutlined, Tabs } from '../../ergodex-cdk'; -import { useObservable } from '../../hooks/useObservable'; import { isWalletLoading$, isWalletSetuped$ } from '../../services/new/core'; import { availablePools$, pools$ } from '../../services/new/pools'; import { EmptyPositionsWrapper } from './components/EmptyPositionsWrapper/EmptyPositionsWrapper'; diff --git a/src/pages/Pool/PoolPosition/PoolPosition.tsx b/src/pages/Pool/PoolPosition/PoolPosition.tsx index 2a4de2c1e..3891fe187 100644 --- a/src/pages/Pool/PoolPosition/PoolPosition.tsx +++ b/src/pages/Pool/PoolPosition/PoolPosition.tsx @@ -4,6 +4,7 @@ import { PoolId } from '@ergolabs/ergo-dex-sdk'; import React, { useEffect, useState } from 'react'; import { useHistory, useParams } from 'react-router-dom'; +import { useSubject } from '../../../common/hooks/useObservable'; import { FormPageWrapper } from '../../../components/FormPageWrapper/FormPageWrapper'; import { TokenIcon } from '../../../components/TokenIcon/TokenIcon'; import { TokenIconPair } from '../../../components/TokenIconPair/TokenIconPair'; @@ -16,7 +17,6 @@ import { Skeleton, Typography, } from '../../../ergodex-cdk'; -import { useSubject } from '../../../hooks/useObservable'; import { usePair } from '../../../hooks/usePair'; import { getPoolById } from '../../../services/new/pools'; import { getPoolFee } from '../../../utils/pool'; diff --git a/src/pages/Pool/components/LiquidityPositionsList/LiquidityPositionsItem/LiquidityPositionsItem.tsx b/src/pages/Pool/components/LiquidityPositionsList/LiquidityPositionsItem/LiquidityPositionsItem.tsx index 2e84f7965..811d2b1bc 100644 --- a/src/pages/Pool/components/LiquidityPositionsList/LiquidityPositionsItem/LiquidityPositionsItem.tsx +++ b/src/pages/Pool/components/LiquidityPositionsList/LiquidityPositionsItem/LiquidityPositionsItem.tsx @@ -1,9 +1,9 @@ import { PoolId } from '@ergolabs/ergo-dex-sdk'; import React, { useEffect } from 'react'; +import { useSubject } from '../../../../../common/hooks/useObservable'; import { AmmPool } from '../../../../../common/models/AmmPool'; import { Flex } from '../../../../../ergodex-cdk'; -import { useSubject } from '../../../../../hooks/useObservable'; import { getAggregatedPoolAnalyticsDataById24H } from '../../../../../services/new/analytics'; import { LiquidityPositionsItemAnalytics } from './LiquidityPositionsItemAnalytics/LiquidityPositionsItemAnalytics'; import { LiquidityPositionsItemWrapper } from './LiquidityPositionsItemWrapper/LiquidityPositionsItemWrapper'; diff --git a/src/pages/Swap/OperationSettings/OperationSettings.tsx b/src/pages/Swap/OperationSettings/OperationSettings.tsx index 498736840..be9fb314b 100644 --- a/src/pages/Swap/OperationSettings/OperationSettings.tsx +++ b/src/pages/Swap/OperationSettings/OperationSettings.tsx @@ -1,6 +1,7 @@ import React, { useState } from 'react'; import { filter, skip } from 'rxjs'; +import { useSubscription } from '../../../common/hooks/useObservable'; import { InfoTooltip } from '../../../components/InfoTooltip/InfoTooltip'; import { MIN_NITRO } from '../../../constants/erg'; import { defaultSlippage } from '../../../constants/settings'; @@ -19,7 +20,6 @@ import { Messages, useForm, } from '../../../ergodex-cdk/components/Form/NewForm'; -import { useSubscription } from '../../../hooks/useObservable'; import { NitroInput } from './NitroInput/NitroInput'; import { SlippageInput } from './SlippageInput/SlippageInput'; diff --git a/src/pages/Swap/Ratio/Ratio.tsx b/src/pages/Swap/Ratio/Ratio.tsx index 3e1976cb0..5b2d2d1d5 100644 --- a/src/pages/Swap/Ratio/Ratio.tsx +++ b/src/pages/Swap/Ratio/Ratio.tsx @@ -3,10 +3,10 @@ import './Ratio.less'; import React, { FC, useState } from 'react'; import { debounceTime, map } from 'rxjs'; +import { useObservable } from '../../../common/hooks/useObservable'; import { Currency } from '../../../common/models/Currency'; import { Animation, Typography } from '../../../ergodex-cdk'; import { FormGroup } from '../../../ergodex-cdk/components/Form/NewForm'; -import { useObservable } from '../../../hooks/useObservable'; import { SwapFormModel } from '../SwapFormModel'; const calculateOutputPrice = ({ diff --git a/src/pages/Swap/Swap.tsx b/src/pages/Swap/Swap.tsx index 3f31fccec..18a8ee07b 100644 --- a/src/pages/Swap/Swap.tsx +++ b/src/pages/Swap/Swap.tsx @@ -17,6 +17,7 @@ import { tap, } from 'rxjs'; +import { useSubscription } from '../../common/hooks/useObservable'; import { AmmPool } from '../../common/models/AmmPool'; import { ActionForm } from '../../components/common/ActionForm/ActionForm'; import { TokenControlFormItem } from '../../components/common/TokenControl/TokenControl'; @@ -27,7 +28,6 @@ import { import { FormPageWrapper } from '../../components/FormPageWrapper/FormPageWrapper'; import { Button, Flex, SwapOutlined, Typography } from '../../ergodex-cdk'; import { useForm } from '../../ergodex-cdk/components/Form/NewForm'; -import { useSubscription } from '../../hooks/useObservable'; import { assets$, getAvailableAssetFor } from '../../services/new/assets'; import { useWalletBalance } from '../../services/new/balance'; import { useMaxTotalFees, useNetworkAsset } from '../../services/new/core'; @@ -119,8 +119,6 @@ export const Swap = (): JSX.Element => { return toAmount?.gt(pool.getAssetAmount(toAmount?.asset)); }; - useSubscription(form.valueChangesWithSilent$, (value) => console.log(value)); - useSubscription( form.controls.fromAsset.valueChangesWithSilent$, (token: AssetInfo | undefined) => updateToAssets$.next(token?.id), diff --git a/src/pages/Swap/SwapConfirmationModal/SwapConfirmationModal.tsx b/src/pages/Swap/SwapConfirmationModal/SwapConfirmationModal.tsx index 6aacf91b4..fc880da10 100644 --- a/src/pages/Swap/SwapConfirmationModal/SwapConfirmationModal.tsx +++ b/src/pages/Swap/SwapConfirmationModal/SwapConfirmationModal.tsx @@ -8,6 +8,7 @@ import { } from '@ergolabs/ergo-sdk'; import React, { FC, useEffect, useState } from 'react'; +import { useObservable } from '../../../common/hooks/useObservable'; import { TokenControlFormItem } from '../../../components/common/TokenControl/TokenControl'; import { InfoTooltip } from '../../../components/InfoTooltip/InfoTooltip'; import { ERG_DECIMALS, UI_FEE } from '../../../constants/erg'; @@ -15,7 +16,6 @@ import { defaultExFee } from '../../../constants/settings'; import { useSettings } from '../../../context'; import { Box, Button, Flex, Modal, Typography } from '../../../ergodex-cdk'; import { Form, useForm } from '../../../ergodex-cdk/components/Form/NewForm'; -import { useObservable } from '../../../hooks/useObservable'; import { explorer } from '../../../services/explorer'; import { useMaxTotalFees, diff --git a/src/pages/Swap/SwapTooltip/SwapTooltip.tsx b/src/pages/Swap/SwapTooltip/SwapTooltip.tsx index 252c87c9b..bda4862b4 100644 --- a/src/pages/Swap/SwapTooltip/SwapTooltip.tsx +++ b/src/pages/Swap/SwapTooltip/SwapTooltip.tsx @@ -2,13 +2,13 @@ import { swapVars } from '@ergolabs/ergo-dex-sdk/build/main/amm/math/swap'; import React, { FC } from 'react'; +import { useObservable } from '../../../common/hooks/useObservable'; import { InfoTooltip } from '../../../components/InfoTooltip/InfoTooltip'; import { ERG_DECIMALS, MIN_EX_FEE } from '../../../constants/erg'; import { defaultExFee } from '../../../constants/settings'; import { useSettings } from '../../../context'; import { Flex } from '../../../ergodex-cdk'; import { FormGroup } from '../../../ergodex-cdk/components/Form/NewForm'; -import { useObservable } from '../../../hooks/useObservable'; import { useMaxTotalFees, useMinExFee } from '../../../services/new/core'; import { renderFractions } from '../../../utils/math'; import { calculateTotalFee } from '../../../utils/transactions'; diff --git a/src/services/new/balance.ts b/src/services/new/balance.ts index 64ffd26ac..1677b803b 100644 --- a/src/services/new/balance.ts +++ b/src/services/new/balance.ts @@ -9,9 +9,9 @@ import { switchMap, } from 'rxjs'; +import { useObservable } from '../../common/hooks/useObservable'; import { Currency } from '../../common/models/Currency'; import { ERG_DECIMALS } from '../../constants/erg'; -import { useObservable } from '../../hooks/useObservable'; import { getListAvailableTokens } from '../../utils/getListAvailableTokens'; import { parseUserInputToFractions } from '../../utils/math'; import { assets$ } from './assets'; diff --git a/src/services/new/core.ts b/src/services/new/core.ts index e3284d853..036753ac7 100644 --- a/src/services/new/core.ts +++ b/src/services/new/core.ts @@ -17,12 +17,12 @@ import { switchMap, } from 'rxjs'; +import { useObservable } from '../../common/hooks/useObservable'; import { Currency } from '../../common/models/Currency'; import { normalizeAmount } from '../../common/utils/amount'; import { ERG_DECIMALS, ERG_TOKEN_NAME } from '../../constants/erg'; import { defaultExFee } from '../../constants/settings'; import { useSettings } from '../../context'; -import { useObservable } from '../../hooks/useObservable'; import { walletCookies } from '../../utils/cookies'; import { renderFractions } from '../../utils/math'; import { calculateTotalFee } from '../../utils/transactions'; @@ -70,6 +70,13 @@ export const isWalletSetuped$ = walletState$.pipe( refCount(), ); +export const isWalletConnected$ = walletState$.pipe( + filter((state) => state === WalletState.CONNECTED), + mapTo(true), + publishReplay(1), + refCount(), +); + export const appTick$ = walletState$.pipe( filter((state) => state === WalletState.CONNECTED), switchMap(() => interval(UPDATE_TIME).pipe(startWith(0))), From 13b1bb13e168b7c8a5431c0c603bcba162b750a2 Mon Sep 17 00:00:00 2001 From: ridel1e Date: Wed, 12 Jan 2022 23:56:15 +0300 Subject: [PATCH 02/15] update useObservable hooks --- src/common/hooks/useObservable.ts | 12 +++++++----- .../Header/AnalyticsDataTag/AnalyticsDataTag.tsx | 4 +--- src/components/common/ActionForm/ActionForm.tsx | 6 ++---- src/pages/Pool/Pool.tsx | 13 ++++--------- src/pages/Swap/Ratio/Ratio.tsx | 2 +- src/pages/Swap/SwapTooltip/SwapTooltip.tsx | 9 +++++---- src/services/new/balance.ts | 4 +--- src/services/new/core.ts | 4 +--- 8 files changed, 22 insertions(+), 32 deletions(-) diff --git a/src/common/hooks/useObservable.ts b/src/common/hooks/useObservable.ts index 1215f8b6d..2a5a5046c 100644 --- a/src/common/hooks/useObservable.ts +++ b/src/common/hooks/useObservable.ts @@ -5,22 +5,24 @@ import { Unpacked } from '../utils/unpacked'; export function useObservable( observable: Observable, - config?: { deps?: any[] }, + deps?: any[], ): [T | undefined, boolean, Error]; export function useObservable( observable: Observable, - config: { defaultValue: T; deps?: any[] }, + deps: any[], + defaultValue: T, ): [T, boolean, Error]; export function useObservable( observable: Observable, - config?: { defaultValue?: T; deps?: any[] }, + deps?: any[], + defaultValue?: T, ): [T | undefined, boolean, Error | undefined] { const [{ data, error, loading }, setParams] = useState<{ data: T | undefined; error: Error | undefined; loading: boolean; }>({ - data: config?.defaultValue, + data: defaultValue, error: undefined, loading: false, }); @@ -38,7 +40,7 @@ export function useObservable( }); return () => subscription.unsubscribe(); - }, config?.deps || []); + }, deps || []); return [data, loading, error]; } diff --git a/src/components/Header/AnalyticsDataTag/AnalyticsDataTag.tsx b/src/components/Header/AnalyticsDataTag/AnalyticsDataTag.tsx index aeeaec0c2..3c6e668cd 100644 --- a/src/components/Header/AnalyticsDataTag/AnalyticsDataTag.tsx +++ b/src/components/Header/AnalyticsDataTag/AnalyticsDataTag.tsx @@ -8,9 +8,7 @@ import { formatToUSD } from '../../../services/number'; import { renderFractions } from '../../../utils/math'; export const AnalyticsDataTag = (): JSX.Element => { - const [currentStats] = useObservable(aggregatedAnalyticsData24H$, { - defaultValue: {}, - }); + const [currentStats] = useObservable(aggregatedAnalyticsData24H$, [], {}); return ( diff --git a/src/components/common/ActionForm/ActionForm.tsx b/src/components/common/ActionForm/ActionForm.tsx index 653a6d076..cf44f4a06 100644 --- a/src/components/common/ActionForm/ActionForm.tsx +++ b/src/components/common/ActionForm/ActionForm.tsx @@ -36,10 +36,8 @@ export const ActionForm: FC> = ({ const [isWalletLoading] = useObservable(isWalletLoading$); const [value] = useObservable( form.valueChangesWithSilent$.pipe(debounceTime(100)), - { - deps: [form], - defaultValue: {}, - }, + [form], + {}, ); const [buttonData, setButtonData] = useState<{ state: ActionButtonState; diff --git a/src/pages/Pool/Pool.tsx b/src/pages/Pool/Pool.tsx index 773abdae7..4781afcfc 100644 --- a/src/pages/Pool/Pool.tsx +++ b/src/pages/Pool/Pool.tsx @@ -53,21 +53,16 @@ const PoolPageWrapper: React.FC = ({ }; const Pool = (): JSX.Element => { - const [isWalletConnected] = useObservable(isWalletSetuped$, { - defaultValue: false, - }); + const [isWalletConnected] = useObservable(isWalletSetuped$, [], false); const [isWalletLoading] = useObservable(isWalletLoading$); const [availablePools, isAvailablePoolsLoading] = useObservable( availablePools$, - { - defaultValue: [], - }, + [], + [], ); - const [pools, isPoolsLoading] = useObservable(pools$, { - defaultValue: [], - }); + const [pools, isPoolsLoading] = useObservable(pools$, [], []); const history = useHistory(); diff --git a/src/pages/Swap/Ratio/Ratio.tsx b/src/pages/Swap/Ratio/Ratio.tsx index 5b2d2d1d5..47d90c3dd 100644 --- a/src/pages/Swap/Ratio/Ratio.tsx +++ b/src/pages/Swap/Ratio/Ratio.tsx @@ -54,7 +54,7 @@ export const Ratio: FC<{ form: FormGroup }> = ({ form }) => { : `1 ${form.value.fromAsset?.name} = ${price?.toString()}`, ), ), - { deps: [form, reversedRatio] }, + [form, reversedRatio], ); const toggleReversedRatio = () => diff --git a/src/pages/Swap/SwapTooltip/SwapTooltip.tsx b/src/pages/Swap/SwapTooltip/SwapTooltip.tsx index bda4862b4..574e599ce 100644 --- a/src/pages/Swap/SwapTooltip/SwapTooltip.tsx +++ b/src/pages/Swap/SwapTooltip/SwapTooltip.tsx @@ -72,10 +72,11 @@ export const SwapTooltip = ({ }: { form: FormGroup; }): JSX.Element => { - const [value] = useObservable(form.valueChangesWithSilent$, { - deps: [form], - defaultValue: form.value, - }); + const [value] = useObservable( + form.valueChangesWithSilent$, + [form], + form.value, + ); return value.pool && value.toAsset && diff --git a/src/services/new/balance.ts b/src/services/new/balance.ts index 1677b803b..acac292d2 100644 --- a/src/services/new/balance.ts +++ b/src/services/new/balance.ts @@ -69,9 +69,7 @@ export const walletBalance$ = combineLatest([ walletBalance$.subscribe(() => {}); export const useWalletBalance = () => - useObservable(walletBalance$, { - defaultValue: new Balance([]), - }); + useObservable(walletBalance$, [], new Balance([])); export const getBalanceByAsset = (asset: AssetInfo): Observable => walletBalance$.pipe( diff --git a/src/services/new/core.ts b/src/services/new/core.ts index 036753ac7..c60844d5a 100644 --- a/src/services/new/core.ts +++ b/src/services/new/core.ts @@ -140,9 +140,7 @@ export const defaultExFee$: Observable = networkAsset$.pipe( ); export const useNetworkAsset = (): AssetInfo => { - const [_nativeToken] = useObservable(networkAsset$, { - defaultValue: networkAsset, - }); + const [_nativeToken] = useObservable(networkAsset$, [], networkAsset); return _nativeToken; }; From a3dfa2fa85f8947f1c5849d46b074823b0cca4c5 Mon Sep 17 00:00:00 2001 From: ridel1e Date: Thu, 13 Jan 2022 00:03:13 +0300 Subject: [PATCH 03/15] update useSubject protocol --- src/common/hooks/useObservable.ts | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/common/hooks/useObservable.ts b/src/common/hooks/useObservable.ts index 2a5a5046c..d098a0392 100644 --- a/src/common/hooks/useObservable.ts +++ b/src/common/hooks/useObservable.ts @@ -47,7 +47,7 @@ export function useObservable( export function useSubject Observable>( observableAction: F, - config?: { deps?: any[] }, + deps?: any[], ): [ Unpacked> | undefined, (...args: Parameters) => void, @@ -56,7 +56,8 @@ export function useSubject Observable>( ]; export function useSubject Observable>( observableAction: F, - config: { deps?: any[]; defaultValue: Unpacked> }, + deps: any[], + defaultValue: Unpacked>, ): [ Unpacked>, (...args: Parameters) => void, @@ -65,7 +66,8 @@ export function useSubject Observable>( ]; export function useSubject Observable>( observableAction: F, - config?: { deps?: any[]; defaultValue?: Unpacked> }, + deps?: any[], + defaultValue?: Unpacked>, ): [ Unpacked> | undefined, (...args: Parameters) => void, @@ -77,7 +79,7 @@ export function useSubject Observable>( error: Error | undefined; loading: boolean; }>({ - data: config?.defaultValue, + data: defaultValue, error: undefined, loading: false, }); @@ -108,7 +110,7 @@ export function useSubject Observable>( }); return () => subscription.unsubscribe(); - }, config?.deps || []); + }, deps || []); return [data, nextData.next, loading, error]; } @@ -128,7 +130,7 @@ export function useSubscription( callback: any, deps?: any[], ): void | [any] { - const [nextData, setNextData] = useState<{ + const [nextData] = useState<{ subject: Subject; next: (...args: any[]) => void; //@ts-ignore From 11a59858203068fe297b716c08fae69ba46cf5ec Mon Sep 17 00:00:00 2001 From: yashablack Date: Thu, 13 Jan 2022 11:37:05 +0300 Subject: [PATCH 04/15] feat: refactor liquidity positions ux --- src/pages/Pool/Pool.less | 2 +- src/pages/Pool/Pool.tsx | 8 +++--- .../LiquidityPositionsList.tsx | 27 ++++++++++--------- 3 files changed, 20 insertions(+), 17 deletions(-) diff --git a/src/pages/Pool/Pool.less b/src/pages/Pool/Pool.less index ba8700b60..d01b4abe7 100644 --- a/src/pages/Pool/Pool.less +++ b/src/pages/Pool/Pool.less @@ -6,7 +6,7 @@ .ant-tabs-tabpane { overflow: auto; - max-height: 62vh; + max-height: 63vh; } } } diff --git a/src/pages/Pool/Pool.tsx b/src/pages/Pool/Pool.tsx index ee68df830..4611aac69 100644 --- a/src/pages/Pool/Pool.tsx +++ b/src/pages/Pool/Pool.tsx @@ -30,7 +30,7 @@ const PoolPageWrapper: React.FC = ({ { onClick={handleAddLiquidity} > + + + {isWalletConnected ? ( { )} - - - ); diff --git a/src/pages/Pool/components/LiquidityPositionsList/LiquidityPositionsList.tsx b/src/pages/Pool/components/LiquidityPositionsList/LiquidityPositionsList.tsx index a7c9ea065..2f8b4030f 100644 --- a/src/pages/Pool/components/LiquidityPositionsList/LiquidityPositionsList.tsx +++ b/src/pages/Pool/components/LiquidityPositionsList/LiquidityPositionsList.tsx @@ -6,7 +6,9 @@ import React, { FC } from 'react'; import { useHistory } from 'react-router-dom'; import { AmmPool } from '../../../../common/models/AmmPool'; -import { Button, Flex, PlusOutlined } from '../../../../ergodex-cdk'; +import { Button, Flex, List, PlusOutlined } from '../../../../ergodex-cdk'; +import { useObservable } from '../../../../hooks/useObservable'; +import { isWalletSetuped$ } from '../../../../services/new/core'; import { EmptyPositionsWrapper } from '../EmptyPositionsWrapper/EmptyPositionsWrapper'; import { PositionListLoader } from '../PositionListLoader/PositionListLoader'; import { LiquidityPositionsItem } from './LiquidityPositionsItem/LiquidityPositionsItem'; @@ -20,10 +22,16 @@ const LiquidityPositionsList: FC = ({ loading, pools, }): JSX.Element => { + const [isWalletConnected] = useObservable(isWalletSetuped$, { + defaultValue: false, + }); + const history = useHistory(); const onPositionClick = (id: PoolId) => { - history.push(`/pool/${id}/`); + if (isWalletConnected) { + history.push(`/pool/${id}/`); + } }; function handleAddLiquidity() { @@ -51,16 +59,11 @@ const LiquidityPositionsList: FC = ({ return ( - {pools.map((pool, index) => { - return ( - - - - ); - })} + + {(pool) => ( + + )} + ); }; From d92562d765351715126e01b6fe7af7cac786d412 Mon Sep 17 00:00:00 2001 From: ridel1e Date: Thu, 13 Jan 2022 15:54:39 +0300 Subject: [PATCH 05/15] add lp wallet balance observable --- src/common/models/AmmPool.ts | 11 +++++++ .../WalletModal/TokensTab/TokensTab.tsx | 4 +-- .../common/TokenControl/TokenControl.tsx | 4 +-- src/pages/Pool/AddLiquidity/AddLiquidity.tsx | 4 +-- src/pages/Swap/Swap.tsx | 4 +-- src/services/new/assets.ts | 7 +++++ src/services/new/balance.ts | 31 +++++++++++++++---- 7 files changed, 51 insertions(+), 14 deletions(-) diff --git a/src/common/models/AmmPool.ts b/src/common/models/AmmPool.ts index fc06107b0..eab84ab96 100644 --- a/src/common/models/AmmPool.ts +++ b/src/common/models/AmmPool.ts @@ -34,6 +34,17 @@ export class AmmPool { return new Currency(this.pool.x.amount, this.pool.x.asset); } + shares(input: Currency): [Currency, Currency] { + const [assetX, assetY] = this.pool.shares( + new AssetAmount(input.asset, input.amount), + ); + + return [ + new Currency(assetX.amount, assetX.asset), + new Currency(assetY.amount, assetY.asset), + ]; + } + getAssetAmount(asset: AssetInfo): Currency { if (this.pool.x.asset.id === asset.id) { return this.x; diff --git a/src/components/WalletModal/TokensTab/TokensTab.tsx b/src/components/WalletModal/TokensTab/TokensTab.tsx index 548ae4b17..2babd1d80 100644 --- a/src/components/WalletModal/TokensTab/TokensTab.tsx +++ b/src/components/WalletModal/TokensTab/TokensTab.tsx @@ -1,11 +1,11 @@ import React from 'react'; import { Flex, List } from '../../../ergodex-cdk'; -import { useWalletBalance } from '../../../services/new/balance'; +import { useAssetWalletBalance } from '../../../services/new/balance'; import { TokenListItem } from './TokenListItem/TokenListItem'; export const TokensTab: React.FC = () => { - const [balance] = useWalletBalance(); + const [balance] = useAssetWalletBalance(); return ( diff --git a/src/components/common/TokenControl/TokenControl.tsx b/src/components/common/TokenControl/TokenControl.tsx index 82e2edfd9..2a4b45df0 100644 --- a/src/components/common/TokenControl/TokenControl.tsx +++ b/src/components/common/TokenControl/TokenControl.tsx @@ -13,7 +13,7 @@ import { Form, useFormContext, } from '../../../ergodex-cdk/components/Form/NewForm'; -import { useWalletBalance } from '../../../services/new/balance'; +import { useAssetWalletBalance } from '../../../services/new/balance'; import { isWalletLoading$ } from '../../../services/new/core'; import { TokenAmountInput, @@ -80,7 +80,7 @@ export const TokenControlFormItem: FC = ({ }) => { const { t } = useTranslation(); const { form } = useFormContext(); - const [balance, balanceLoading] = useWalletBalance(); + const [balance, balanceLoading] = useAssetWalletBalance(); const [selectedAsset] = useObservable( tokenName ? form.controls[tokenName].valueChangesWithSilent$ diff --git a/src/pages/Pool/AddLiquidity/AddLiquidity.tsx b/src/pages/Pool/AddLiquidity/AddLiquidity.tsx index 3980e65d8..6bdbdcb9f 100644 --- a/src/pages/Pool/AddLiquidity/AddLiquidity.tsx +++ b/src/pages/Pool/AddLiquidity/AddLiquidity.tsx @@ -34,7 +34,7 @@ import { FormPageWrapper } from '../../../components/FormPageWrapper/FormPageWra import { Flex, Typography } from '../../../ergodex-cdk'; import { Form, useForm } from '../../../ergodex-cdk/components/Form/NewForm'; import { assets$, getAvailableAssetFor } from '../../../services/new/assets'; -import { useWalletBalance } from '../../../services/new/balance'; +import { useAssetWalletBalance } from '../../../services/new/balance'; import { useMaxTotalFees, useNetworkAsset } from '../../../services/new/core'; import { getAvailablePoolById, @@ -51,7 +51,7 @@ const getAvailablePools = (xId?: string, yId?: string) => xId && yId ? getPoolByPair(xId, yId) : of([]); const AddLiquidity = (): JSX.Element => { - const [balance] = useWalletBalance(); + const [balance] = useAssetWalletBalance(); const totalFees = useMaxTotalFees(); const networkAsset = useNetworkAsset(); const { poolId } = useParams<{ poolId?: PoolId }>(); diff --git a/src/pages/Swap/Swap.tsx b/src/pages/Swap/Swap.tsx index 18a8ee07b..bbde0cef1 100644 --- a/src/pages/Swap/Swap.tsx +++ b/src/pages/Swap/Swap.tsx @@ -29,7 +29,7 @@ import { FormPageWrapper } from '../../components/FormPageWrapper/FormPageWrappe import { Button, Flex, SwapOutlined, Typography } from '../../ergodex-cdk'; import { useForm } from '../../ergodex-cdk/components/Form/NewForm'; import { assets$, getAvailableAssetFor } from '../../services/new/assets'; -import { useWalletBalance } from '../../services/new/balance'; +import { useAssetWalletBalance } from '../../services/new/balance'; import { useMaxTotalFees, useNetworkAsset } from '../../services/new/core'; import { getPoolByPair } from '../../services/new/pools'; import { OperationSettings } from './OperationSettings/OperationSettings'; @@ -60,7 +60,7 @@ export const Swap = (): JSX.Element => { pool: undefined, }); const networkAsset = useNetworkAsset(); - const [balance] = useWalletBalance(); + const [balance] = useAssetWalletBalance(); const totalFees = useMaxTotalFees(); const updateToAssets$ = useMemo( () => new BehaviorSubject(undefined), diff --git a/src/services/new/assets.ts b/src/services/new/assets.ts index 672178aee..a14d57e25 100644 --- a/src/services/new/assets.ts +++ b/src/services/new/assets.ts @@ -11,6 +11,13 @@ export const assets$ = pools$.pipe( refCount(), ); +export const lpAssets$ = pools$.pipe( + map((pools) => pools.map((p) => p.lp.asset)), + map((assets) => uniqBy(assets, 'id')), + publishReplay(1), + refCount(), +); + export const getAssetById = (id: string): Observable => assets$.pipe(map((assets) => find(assets, ['id', id])!)); diff --git a/src/services/new/balance.ts b/src/services/new/balance.ts index acac292d2..6871f2aa8 100644 --- a/src/services/new/balance.ts +++ b/src/services/new/balance.ts @@ -14,7 +14,7 @@ import { Currency } from '../../common/models/Currency'; import { ERG_DECIMALS } from '../../constants/erg'; import { getListAvailableTokens } from '../../utils/getListAvailableTokens'; import { parseUserInputToFractions } from '../../utils/math'; -import { assets$ } from './assets'; +import { assets$, lpAssets$ } from './assets'; import { nativeTokenBalance$, utxos$ } from './core'; const ERGO_ID = @@ -45,7 +45,7 @@ export class Balance { } } -export const walletBalance$ = combineLatest([ +export const assetWalletBalance$ = combineLatest([ nativeTokenBalance$.pipe( map((balance) => parseUserInputToFractions(balance, ERG_DECIMALS)), ), @@ -66,13 +66,32 @@ export const walletBalance$ = combineLatest([ publishReplay(1), refCount(), ); -walletBalance$.subscribe(() => {}); -export const useWalletBalance = () => - useObservable(walletBalance$, [], new Balance([])); +export const lpWalletBalance$ = combineLatest([ + utxos$.pipe(switchMap(() => lpAssets$)), + utxos$.pipe(map((utxos) => Object.values(getListAvailableTokens(utxos)))), +]).pipe( + debounceTime(200), + map(([assets, boxAssets]) => + boxAssets + .map<[bigint, AssetInfo]>((ba) => [ + ba.amount, + assets.find((a) => a.id === ba.tokenId)!, + ]) + .filter((i) => !!i[1]), + ), + map((data) => new Balance(data)), + publishReplay(1), + refCount(), +); + +assetWalletBalance$.subscribe(() => {}); + +export const useAssetWalletBalance = () => + useObservable(assetWalletBalance$, [], new Balance([])); export const getBalanceByAsset = (asset: AssetInfo): Observable => - walletBalance$.pipe( + assetWalletBalance$.pipe( map((balance) => balance.get(asset)), publishReplay(1), refCount(), From cb42f122d742dfd76d9da8e6ad208e1f4dcf2c94 Mon Sep 17 00:00:00 2001 From: ridel1e Date: Fri, 14 Jan 2022 07:50:54 +0300 Subject: [PATCH 06/15] update remove component --- src/common/models/Currency.ts | 18 +- .../ConfirmRemoveModal/ConfirmRemoveModal.tsx | 4 +- src/pages/Remove/Remove.tsx | 242 +++++++++--------- .../RemovePositionSlider.tsx | 8 +- src/services/new/balance.ts | 4 + 5 files changed, 150 insertions(+), 126 deletions(-) diff --git a/src/common/models/Currency.ts b/src/common/models/Currency.ts index 0f0a71677..835aaa95d 100644 --- a/src/common/models/Currency.ts +++ b/src/common/models/Currency.ts @@ -1,6 +1,10 @@ import { AssetInfo } from '@ergolabs/ergo-sdk/build/main/entities/assetInfo'; -import { parseUserInputToFractions, renderFractions } from '../../utils/math'; +import { + math, + parseUserInputToFractions, + renderFractions, +} from '../../utils/math'; import { getDecimalsCount, normalizeAmount } from '../utils/amount'; const createUnknownAsset = (decimals = 0): AssetInfo => ({ @@ -106,6 +110,18 @@ export class Currency { return new Currency(this.amount - currency.amount, this.asset); } + percent(percent: number | string): Currency { + if (this.amount === 0n) { + return this; + } + const fmtAmount = this.toString({ suffix: false }); + const newAmount = math.evaluate!( + `${fmtAmount} / 100 * ${percent}`, + ).toString(); + + return new Currency(normalizeAmount(newAmount, this.asset), this.asset); + } + toString(config?: { suffix: boolean }): string { if ((!config || !!config?.suffix) && !isUnknownAsset(this.asset)) { return `${renderFractions(this.amount, this.asset.decimals)} ${ diff --git a/src/pages/Remove/ConfirmRemoveModal/ConfirmRemoveModal.tsx b/src/pages/Remove/ConfirmRemoveModal/ConfirmRemoveModal.tsx index 86316617d..40a67554f 100644 --- a/src/pages/Remove/ConfirmRemoveModal/ConfirmRemoveModal.tsx +++ b/src/pages/Remove/ConfirmRemoveModal/ConfirmRemoveModal.tsx @@ -30,7 +30,7 @@ import { RemoveFormSpaceWrapper } from '../RemoveFormSpaceWrapper/RemoveFormSpac interface ConfirmRemoveModalProps { onClose: (p: Promise) => void; pool: AmmPool; - lpToRemove: number; + lpToRemove: Currency; xAmount: Currency; yAmount: Currency; } @@ -53,7 +53,7 @@ const ConfirmRemoveModal: React.FC = ({ const removeOperation = async (pool: AmmPool) => { const actions = poolActions(pool['pool']); - const lp = pool['pool'].lp.withAmount(BigInt(lpToRemove.toFixed(0))); + const lp = pool['pool'].lp.withAmount(lpToRemove.amount); const poolId = pool.id; diff --git a/src/pages/Remove/Remove.tsx b/src/pages/Remove/Remove.tsx index 7ce328ccb..35f7016fa 100644 --- a/src/pages/Remove/Remove.tsx +++ b/src/pages/Remove/Remove.tsx @@ -1,10 +1,15 @@ // TODO: REPLACE_ANTD_SKELETON_COMPONENT[EDEX-467] import { PoolId } from '@ergolabs/ergo-dex-sdk'; -import { evaluate } from 'mathjs'; -import React, { useCallback, useEffect, useState } from 'react'; +import React, { FC, useCallback, useEffect, useState } from 'react'; import { useParams } from 'react-router'; +import { combineLatest, debounceTime, map, Observable, of, skip } from 'rxjs'; -import { AssetPair } from '../../@types/asset'; +import { + useObservable, + useSubject, + useSubscription, +} from '../../common/hooks/useObservable'; +import { AmmPool } from '../../common/models/AmmPool'; import { Currency } from '../../common/models/Currency'; import { openConfirmationModal, @@ -14,145 +19,142 @@ import { FormPageWrapper } from '../../components/FormPageWrapper/FormPageWrappe import { SubmitButton } from '../../components/SubmitButton/SubmitButton'; import { TokenIconPair } from '../../components/TokenIconPair/TokenIconPair'; import { Flex, Skeleton, Typography } from '../../ergodex-cdk'; -import { usePair } from '../../hooks/usePair'; -import { usePosition } from '../../hooks/usePosition'; +import { + Form, + FormGroup, + useForm, +} from '../../ergodex-cdk/components/Form/NewForm'; +import { lpWalletBalance$ } from '../../services/new/balance'; +import { getPoolById } from '../../services/new/pools'; import { ConfirmRemoveModal } from './ConfirmRemoveModal/ConfirmRemoveModal'; import { PairSpace } from './PairSpace/PairSpace'; import { RemoveFormSpaceWrapper } from './RemoveFormSpaceWrapper/RemoveFormSpaceWrapper'; import { RemovePositionSlider } from './RemovePositionSlider/RemovePositionSlider'; -const getPercent = (val: number | undefined, percent: string): number => - Number(evaluate(`${val} * ${percent}%`)); +interface PoolData { + readonly pool: AmmPool; + readonly lpBalance: Currency; + readonly xAmount: Currency; + readonly yAmount: Currency; +} -export const Remove = (): JSX.Element => { - const { poolId } = useParams<{ poolId: PoolId }>(); +interface RemoveFormModel { + readonly percent: number; + readonly xAmount?: Currency; + readonly yAmount?: Currency; +} - const DEFAULT_SLIDER_PERCENTAGE = '100'; - const [percent, setPercent] = useState(DEFAULT_SLIDER_PERCENTAGE); - const [initialPair, setInitialPair] = useState(); - const [isFirstPairLoading, setIsFirstPairLoading] = useState(true); - const [lpToRemove, setLpToRemove] = useState(); +const getPoolDataById = (poolId: PoolId): Observable => + !poolId + ? of(undefined) + : combineLatest([getPoolById(poolId), lpWalletBalance$]).pipe( + map(([pool, balance]) => { + if (!pool) { + return undefined; + } + const lpBalance = balance.get(pool.lp.asset); + const [xAmount, assetY] = pool.shares(lpBalance); - const position = usePosition(poolId); - const { pair, lpBalance, setPair } = usePair(position); + return { pool, lpBalance, xAmount: xAmount, yAmount: assetY }; + }), + ); - useEffect(() => { - if (isFirstPairLoading && pair && lpBalance) { - setInitialPair(pair); - setIsFirstPairLoading(false); - setLpToRemove(lpBalance); - } - }, [isFirstPairLoading, pair, lpBalance]); +export const Remove: FC = () => { + const { poolId } = useParams<{ poolId: PoolId }>(); + const [poolData, updatePoolData] = useSubject(getPoolDataById); + const form = useForm({ + percent: 100, + xAmount: undefined, + yAmount: undefined, + }); + const [formValue] = useObservable( + form.valueChangesWithSilent$.pipe(debounceTime(100)), + ); - const handleChangePercent = useCallback( - (percentage) => { - setPercent(percentage); + useEffect(() => updatePoolData(poolId), []); - if (position && pair && initialPair && setPair && lpBalance) { - setLpToRemove(getPercent(lpBalance, percentage)); - setPair({ - assetX: { - name: pair.assetX.name, - asset: pair.assetX.asset, - amount: +getPercent(initialPair.assetX.amount, percentage).toFixed( - pair.assetX.asset?.decimals, - ), - earnedFees: pair.assetX?.earnedFees, - }, - assetY: { - name: pair.assetY.name, - asset: pair.assetY.asset, - amount: +getPercent(initialPair.assetY.amount, percentage).toFixed( - pair.assetY.asset?.decimals, - ), - earnedFees: pair.assetY?.earnedFees, - }, - }); - } + useSubscription( + form.controls.percent.valueChanges$.pipe(skip(1)), + (percent) => { + form.patchValue({ + xAmount: + percent === 100 + ? poolData?.xAmount + : poolData?.xAmount.percent(percent), + yAmount: + percent === 100 + ? poolData?.yAmount + : poolData?.yAmount.percent(percent), + }); }, - [position, pair, initialPair, setPair, lpBalance], + [poolData], ); - const handleRemove = () => { - if (pair && position && lpToRemove) { - const xAmount = new Currency( - pair.assetX.amount?.toString(), - position.x.asset, - ); - const yAmount = new Currency( - pair.assetY.amount?.toString(), - position.y.asset, - ); + const handleRemove = ( + form: FormGroup, + poolData: PoolData, + ) => { + const xAmount = form.value.xAmount || poolData.xAmount; + const yAmount = form.value.yAmount || poolData.yAmount; - openConfirmationModal( - (next) => { - return ( - - ); - }, - Operation.REMOVE_LIQUIDITY, - xAmount, - yAmount, - ); - } + openConfirmationModal( + (next) => { + return ( + + ); + }, + Operation.REMOVE_LIQUIDITY, + xAmount, + yAmount, + ); }; return ( - <> - - {pair ? ( + + {poolData ? ( +
handleRemove(form, poolData)}> - - - - - - - - - {pair.assetX.name} / {pair.assetY.name} - - - - - + + + + + + + + {poolData?.xAmount.asset.name} /{' '} + {poolData?.yAmount.asset.name} + + + + - + + {({ value, onChange }) => ( + + )} + @@ -162,13 +164,15 @@ export const Remove = (): JSX.Element => { {/**/} - Remove + + Remove + - ) : ( - - )} - - + + ) : ( + + )} +
); }; diff --git a/src/pages/Remove/RemovePositionSlider/RemovePositionSlider.tsx b/src/pages/Remove/RemovePositionSlider/RemovePositionSlider.tsx index a32f4c724..7861e7201 100644 --- a/src/pages/Remove/RemovePositionSlider/RemovePositionSlider.tsx +++ b/src/pages/Remove/RemovePositionSlider/RemovePositionSlider.tsx @@ -11,12 +11,12 @@ const marks = { }; interface RemovePositionSliderProps { - percent: string; + value: number; onChange: (p: number) => void; } const RemovePositionSlider: React.FC = ({ - percent, + value, onChange, }) => { return ( @@ -26,14 +26,14 @@ const RemovePositionSlider: React.FC = ({ - {percent}% + {value}% diff --git a/src/services/new/balance.ts b/src/services/new/balance.ts index 6871f2aa8..b5566f4e9 100644 --- a/src/services/new/balance.ts +++ b/src/services/new/balance.ts @@ -85,11 +85,15 @@ export const lpWalletBalance$ = combineLatest([ refCount(), ); +lpWalletBalance$.subscribe(() => {}); assetWalletBalance$.subscribe(() => {}); export const useAssetWalletBalance = () => useObservable(assetWalletBalance$, [], new Balance([])); +export const useLpWalletBalance = () => + useObservable(lpWalletBalance$, [], new Balance([])); + export const getBalanceByAsset = (asset: AssetInfo): Observable => assetWalletBalance$.pipe( map((balance) => balance.get(asset)), From aa70f7760a1d34a1fe5deb51ced0707b4db99608 Mon Sep 17 00:00:00 2001 From: ridel1e Date: Fri, 14 Jan 2022 10:05:19 +0300 Subject: [PATCH 07/15] fix hook error --- .../LiquidityPositionsList/LiquidityPositionsList.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/pages/Pool/components/LiquidityPositionsList/LiquidityPositionsList.tsx b/src/pages/Pool/components/LiquidityPositionsList/LiquidityPositionsList.tsx index 2f8b4030f..0268fca0f 100644 --- a/src/pages/Pool/components/LiquidityPositionsList/LiquidityPositionsList.tsx +++ b/src/pages/Pool/components/LiquidityPositionsList/LiquidityPositionsList.tsx @@ -5,9 +5,9 @@ import { isEmpty } from 'lodash'; import React, { FC } from 'react'; import { useHistory } from 'react-router-dom'; +import { useObservable } from '../../../../common/hooks/useObservable'; import { AmmPool } from '../../../../common/models/AmmPool'; import { Button, Flex, List, PlusOutlined } from '../../../../ergodex-cdk'; -import { useObservable } from '../../../../hooks/useObservable'; import { isWalletSetuped$ } from '../../../../services/new/core'; import { EmptyPositionsWrapper } from '../EmptyPositionsWrapper/EmptyPositionsWrapper'; import { PositionListLoader } from '../PositionListLoader/PositionListLoader'; @@ -22,9 +22,7 @@ const LiquidityPositionsList: FC = ({ loading, pools, }): JSX.Element => { - const [isWalletConnected] = useObservable(isWalletSetuped$, { - defaultValue: false, - }); + const [isWalletConnected] = useObservable(isWalletSetuped$, [], false); const history = useHistory(); From b2e7f432cd1448021a91f3ebb615188029ef8c43 Mon Sep 17 00:00:00 2001 From: ridel1e Date: Mon, 17 Jan 2022 09:09:27 +0300 Subject: [PATCH 08/15] move constants to common directory --- src/App.tsx | 2 +- src/api/addresses.ts | 9 +++ src/api/pendingTransactions.ts | 9 +++ src/api/transactionsHistory.ts | 7 ++ src/{ => common}/constants/env.ts | 0 src/{ => common}/constants/erg.ts | 0 src/{ => common}/constants/screen.ts | 0 src/{ => common}/constants/settings.ts | 2 +- .../GlobalSettingsModal.tsx | 2 +- src/components/Header/Header.tsx | 2 +- src/components/MobilePlug/MobilePlug.tsx | 2 +- .../WalletModal/AddressesTab/AddressesTab.tsx | 2 +- .../TxHistoryModal/TxHistoryModal.tsx | 9 ++- src/context/SettingsContext.tsx | 6 +- src/context/WalletContext.tsx | 2 +- src/network/common.ts | 11 +++ src/network/ergo/addresses/addresses.ts | 28 ++++++++ src/network/ergo/index.ts | 10 +++ src/network/ergo/transactions/common.ts | 1 + .../ergo/transactions/pendingTransactions.ts | 48 +++++++++++++ .../ergo/transactions/transactionsHistory.ts | 68 +++++++++++++++++++ src/network/network.ts | 12 ++++ .../AddLiquidityConfirmationModal.tsx | 3 +- .../ConfirmRemoveModal/ConfirmRemoveModal.tsx | 4 +- .../NitroInput/NitroInput.tsx | 2 +- .../OperationSettings/OperationSettings.tsx | 4 +- .../SlippageInput/SlippageInput.tsx | 2 +- .../SwapConfirmationModal.tsx | 4 +- src/pages/Swap/SwapTooltip/SwapTooltip.tsx | 4 +- src/services/explorer.ts | 2 +- src/services/new/balance.ts | 2 +- src/services/new/core.ts | 4 +- src/services/poolActions.ts | 2 +- src/utils/ammOperations.ts | 2 +- src/utils/redirect.ts | 2 +- src/utils/wallets/yoroi.tsx | 2 +- 36 files changed, 239 insertions(+), 32 deletions(-) create mode 100644 src/api/addresses.ts create mode 100644 src/api/pendingTransactions.ts create mode 100644 src/api/transactionsHistory.ts rename src/{ => common}/constants/env.ts (100%) rename src/{ => common}/constants/erg.ts (100%) rename src/{ => common}/constants/screen.ts (100%) rename src/{ => common}/constants/settings.ts (91%) create mode 100644 src/network/common.ts create mode 100644 src/network/ergo/addresses/addresses.ts create mode 100644 src/network/ergo/index.ts create mode 100644 src/network/ergo/transactions/common.ts create mode 100644 src/network/ergo/transactions/pendingTransactions.ts create mode 100644 src/network/ergo/transactions/transactionsHistory.ts create mode 100644 src/network/network.ts diff --git a/src/App.tsx b/src/App.tsx index 230757ee2..e7f1c7a70 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -5,9 +5,9 @@ import React, { Suspense, useEffect, useState } from 'react'; import { withTranslation } from 'react-i18next'; import { Redirect, Route, Router, Switch } from 'react-router-dom'; +import { TABLET_BRAKE_POINT } from './common/constants/screen'; import Layout from './components/common/Layout/Layout'; import { MobilePlug } from './components/MobilePlug/MobilePlug'; -import { TABLET_BRAKE_POINT } from './constants/screen'; import { AppLoadingProvider, SettingsProvider, diff --git a/src/api/addresses.ts b/src/api/addresses.ts new file mode 100644 index 000000000..cc2202c88 --- /dev/null +++ b/src/api/addresses.ts @@ -0,0 +1,9 @@ +import { publishReplay, refCount, switchMap } from 'rxjs'; + +import { selectedNetwork$ } from '../network/network'; + +export const addresses$ = selectedNetwork$.pipe( + switchMap((network) => network.addresses$), + publishReplay(1), + refCount(), +); diff --git a/src/api/pendingTransactions.ts b/src/api/pendingTransactions.ts new file mode 100644 index 000000000..b0288a894 --- /dev/null +++ b/src/api/pendingTransactions.ts @@ -0,0 +1,9 @@ +import { publishReplay, refCount, switchMap } from 'rxjs'; + +import { selectedNetwork$ } from '../network/network'; + +export const pendingTransactionsCount$ = selectedNetwork$.pipe( + switchMap((network) => network.pendingTransactionsCount$), + publishReplay(1), + refCount(), +); diff --git a/src/api/transactionsHistory.ts b/src/api/transactionsHistory.ts new file mode 100644 index 000000000..ddb92dfca --- /dev/null +++ b/src/api/transactionsHistory.ts @@ -0,0 +1,7 @@ +import { switchMap } from 'rxjs'; + +import { selectedNetwork$ } from '../network/network'; + +export const transactionsHistory$ = selectedNetwork$.pipe( + switchMap((network) => network.getTxHistory(50)), +); diff --git a/src/constants/env.ts b/src/common/constants/env.ts similarity index 100% rename from src/constants/env.ts rename to src/common/constants/env.ts diff --git a/src/constants/erg.ts b/src/common/constants/erg.ts similarity index 100% rename from src/constants/erg.ts rename to src/common/constants/erg.ts diff --git a/src/constants/screen.ts b/src/common/constants/screen.ts similarity index 100% rename from src/constants/screen.ts rename to src/common/constants/screen.ts diff --git a/src/constants/settings.ts b/src/common/constants/settings.ts similarity index 91% rename from src/constants/settings.ts rename to src/common/constants/settings.ts index 69e0ab94f..a5a09ee53 100644 --- a/src/constants/settings.ts +++ b/src/common/constants/settings.ts @@ -1,4 +1,4 @@ -import { fractionsToNum } from '../utils/math'; +import { fractionsToNum } from '../../utils/math'; import { DEFAULT_MINER_FEE, ERG_DECIMALS, MIN_EX_FEE } from './erg'; export const defaultMinerFee = fractionsToNum(DEFAULT_MINER_FEE, ERG_DECIMALS); diff --git a/src/components/Header/GlobalSettingsModal/GlobalSettingsModal.tsx b/src/components/Header/GlobalSettingsModal/GlobalSettingsModal.tsx index ea5e07651..15932142e 100644 --- a/src/components/Header/GlobalSettingsModal/GlobalSettingsModal.tsx +++ b/src/components/Header/GlobalSettingsModal/GlobalSettingsModal.tsx @@ -2,7 +2,7 @@ import './GlobalSettingsModal.less'; import React, { useState } from 'react'; -import { defaultMinerFee } from '../../../constants/settings'; +import { defaultMinerFee } from '../../../common/constants/settings'; import { useSettings } from '../../../context'; import { Button, diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 2b90c0a3a..cbaf082a1 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -2,8 +2,8 @@ import './Header.less'; import React from 'react'; +import { ERG_TOKEN_NAME } from '../../common/constants/erg'; import { useObservable } from '../../common/hooks/useObservable'; -import { ERG_TOKEN_NAME } from '../../constants/erg'; import { useSettings } from '../../context'; import { nativeTokenBalance$, diff --git a/src/components/MobilePlug/MobilePlug.tsx b/src/components/MobilePlug/MobilePlug.tsx index ed498d468..c76d73a92 100644 --- a/src/components/MobilePlug/MobilePlug.tsx +++ b/src/components/MobilePlug/MobilePlug.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { ReactComponent as SmartphoneImage } from '../../assets/images/smartphone.svg'; -import { LANDING_URL } from '../../constants/env'; +import { LANDING_URL } from '../../common/constants/env'; import { Button, Flex, Typography } from '../../ergodex-cdk'; const MobilePlug = (): JSX.Element => { diff --git a/src/components/WalletModal/AddressesTab/AddressesTab.tsx b/src/components/WalletModal/AddressesTab/AddressesTab.tsx index e236b8338..e5ccd07e8 100644 --- a/src/components/WalletModal/AddressesTab/AddressesTab.tsx +++ b/src/components/WalletModal/AddressesTab/AddressesTab.tsx @@ -2,7 +2,7 @@ import './AddressTab.less'; import React, { useCallback, useEffect, useMemo, useState } from 'react'; -import { ERG_DECIMALS } from '../../../constants/erg'; +import { ERG_DECIMALS } from '../../../common/constants/erg'; import { Address, useSettings, diff --git a/src/components/common/TxHistory/TxHistoryModal/TxHistoryModal.tsx b/src/components/common/TxHistory/TxHistoryModal/TxHistoryModal.tsx index e1ae5f127..faee93368 100644 --- a/src/components/common/TxHistory/TxHistoryModal/TxHistoryModal.tsx +++ b/src/components/common/TxHistory/TxHistoryModal/TxHistoryModal.tsx @@ -3,7 +3,9 @@ import { TxId } from '@ergolabs/ergo-sdk'; import { Typography } from 'antd'; import React, { useCallback, useEffect, useState } from 'react'; +import { transactionsHistory$ } from '../../../../api/transactionsHistory'; import { ReactComponent as DotsVertical } from '../../../../assets/icons/icon-dots-vertical.svg'; +import { useObservable } from '../../../../common/hooks/useObservable'; import { useWalletAddresses, WalletAddressState } from '../../../../context'; import { Box, @@ -30,8 +32,11 @@ const TxHistoryModal = (): JSX.Element => { const TXS_TO_DISPLAY = 50; const [operations, setOperations] = useState(); + const [txs] = useObservable(transactionsHistory$); const walletAddresses = useWalletAddresses(); + console.log(txs); + useEffect(() => { if (walletAddresses.state === WalletAddressState.LOADED) { networkHistory @@ -94,8 +99,8 @@ const TxHistoryModal = (): JSX.Element => { - {operations ? ( - operations.map((op, index) => { + {txs ? ( + normalizeOperations(txs).map((op, index) => { return ( ; + readonly pendingTransactionsCount$: Observable; + readonly getTxHistory: (limit: number) => Observable; +} diff --git a/src/network/ergo/addresses/addresses.ts b/src/network/ergo/addresses/addresses.ts new file mode 100644 index 000000000..1211976f4 --- /dev/null +++ b/src/network/ergo/addresses/addresses.ts @@ -0,0 +1,28 @@ +import { + combineLatest, + defer, + from, + map, + publishReplay, + refCount, + switchMap, +} from 'rxjs'; + +import { isWalletConnected$ } from '../../../services/new/core'; + +const usedAddresses$ = isWalletConnected$.pipe( + switchMap(() => defer(() => from(ergo.get_used_addresses()))), +); + +const unusedAddresses$ = isWalletConnected$.pipe( + switchMap(() => defer(() => from(ergo.get_unused_addresses()))), +); + +export const addresses$ = combineLatest([ + usedAddresses$, + unusedAddresses$, +]).pipe( + map(([usedAddrs, unusedAddrs]) => unusedAddrs.concat(usedAddrs)), + publishReplay(1), + refCount(), +); diff --git a/src/network/ergo/index.ts b/src/network/ergo/index.ts new file mode 100644 index 000000000..00dffea11 --- /dev/null +++ b/src/network/ergo/index.ts @@ -0,0 +1,10 @@ +import { Network } from '../common'; +import { addresses$ } from './addresses/addresses'; +import { pendingTransactionsCount$ } from './transactions/pendingTransactions'; +import { getTxHistory } from './transactions/transactionsHistory'; + +export const ergoNetwork: Network = { + addresses$, + pendingTransactionsCount$, + getTxHistory, +}; diff --git a/src/network/ergo/transactions/common.ts b/src/network/ergo/transactions/common.ts new file mode 100644 index 000000000..245289e6f --- /dev/null +++ b/src/network/ergo/transactions/common.ts @@ -0,0 +1 @@ +export const TX_LIMIT = 100; diff --git a/src/network/ergo/transactions/pendingTransactions.ts b/src/network/ergo/transactions/pendingTransactions.ts new file mode 100644 index 000000000..365f2fb8b --- /dev/null +++ b/src/network/ergo/transactions/pendingTransactions.ts @@ -0,0 +1,48 @@ +import { AugErgoTx } from '@ergolabs/ergo-sdk'; +import { + combineLatest, + from, + map, + Observable, + of, + publishReplay, + refCount, + switchMap, +} from 'rxjs'; + +import networkHistory from '../../../services/networkHistory'; +import { addresses$ } from '../addresses/addresses'; +import { TX_LIMIT } from './common'; + +const getUTxsByAddress = ( + address: string, + offset = 0, +): Observable => { + return from( + networkHistory.network.getUTxsByAddress(address, { + offset, + limit: TX_LIMIT, + }), + ).pipe( + switchMap(([txs, count]) => { + return count < TX_LIMIT + ? of(txs) + : getUTxsByAddress(address, offset + TX_LIMIT).pipe( + map((newTxs) => txs.concat(newTxs)), + ); + }), + ); +}; + +const uTxs$: Observable = addresses$.pipe( + switchMap((addresses) => combineLatest(addresses.map(getUTxsByAddress))), + map((uTxs) => uTxs.flatMap((i) => i)), + publishReplay(1), + refCount(), +); + +export const pendingTransactionsCount$ = uTxs$.pipe( + map((uTxs) => uTxs.length), + publishReplay(1), + refCount(), +); diff --git a/src/network/ergo/transactions/transactionsHistory.ts b/src/network/ergo/transactions/transactionsHistory.ts new file mode 100644 index 000000000..8a9038444 --- /dev/null +++ b/src/network/ergo/transactions/transactionsHistory.ts @@ -0,0 +1,68 @@ +import { AmmDexOperation } from '@ergolabs/ergo-dex-sdk'; +import { Address, AugErgoTx } from '@ergolabs/ergo-sdk'; +import { + combineLatest, + first, + from, + map, + Observable, + of, + publishReplay, + refCount, + switchMap, +} from 'rxjs'; + +import networkHistory from '../../../services/networkHistory'; +import { addresses$ } from '../addresses/addresses'; +import { TX_LIMIT } from './common'; + +const parseOp = ( + tx: AugErgoTx, + address: Address, +): AmmDexOperation | undefined => + networkHistory['parseOp'](tx, true, [address]); + +const getTxsByAddress = ( + address: string, + limit = 50, + offset = 0, + prevOperationsCount = 0, +): Observable => { + return from( + networkHistory.network.getTxsByAddress(address, { + offset, + limit: TX_LIMIT, + }), + ).pipe( + map< + [AugErgoTx[], number], + [AugErgoTx[], number, AmmDexOperation[], number] + >(([txs, txsCount]) => { + const ops = txs.map((tx) => parseOp(tx, address)).filter(Boolean); + + return [txs, txsCount, ops as any, ops.length]; + }), + switchMap(([txs, txsCount, ops, opsCount]) => { + if (txsCount < TX_LIMIT || opsCount + prevOperationsCount > limit) { + return of(ops); + } + return getTxsByAddress( + address, + limit, + offset + TX_LIMIT, + opsCount + prevOperationsCount, + ).pipe(map((newOps) => ops.concat(newOps))); + }), + ); +}; + +export const getTxHistory = (limit: number): Observable => + addresses$.pipe( + switchMap((addresses) => + combineLatest(addresses.map((a) => getTxsByAddress(a, limit))), + ), + map((txs) => txs.flatMap((tx) => tx)), + first(), + publishReplay(1), + refCount(), + ); diff --git a/src/network/network.ts b/src/network/network.ts new file mode 100644 index 000000000..22f83e059 --- /dev/null +++ b/src/network/network.ts @@ -0,0 +1,12 @@ +import { BehaviorSubject, Observable } from 'rxjs'; + +import { Network } from './common'; +import { ergoNetwork } from './ergo'; + +const updateSelectedNetwork$ = new BehaviorSubject(ergoNetwork); + +export const changeSelectedNetwork = (network: Network): void => + updateSelectedNetwork$.next(network); + +export const selectedNetwork$: Observable = + updateSelectedNetwork$.asObservable(); diff --git a/src/pages/Pool/AddLiquidity/AddLiquidityConfirmationModal/AddLiquidityConfirmationModal.tsx b/src/pages/Pool/AddLiquidity/AddLiquidityConfirmationModal/AddLiquidityConfirmationModal.tsx index ddb32adcd..e655dfaab 100644 --- a/src/pages/Pool/AddLiquidity/AddLiquidityConfirmationModal/AddLiquidityConfirmationModal.tsx +++ b/src/pages/Pool/AddLiquidity/AddLiquidityConfirmationModal/AddLiquidityConfirmationModal.tsx @@ -2,10 +2,9 @@ import { minValueForOrder } from '@ergolabs/ergo-dex-sdk'; import { BoxSelection, DefaultBoxSelector, ErgoTx } from '@ergolabs/ergo-sdk'; import React, { FC } from 'react'; +import { ERG_DECIMALS, UI_FEE } from '../../../../common/constants/erg'; import { useObservable } from '../../../../common/hooks/useObservable'; import { InfoTooltip } from '../../../../components/InfoTooltip/InfoTooltip'; -import { ERG_DECIMALS, UI_FEE } from '../../../../constants/erg'; -import { defaultExFee } from '../../../../constants/settings'; import { useSettings } from '../../../../context'; import { Box, Button, Flex, Modal, Typography } from '../../../../ergodex-cdk'; import { explorer } from '../../../../services/explorer'; diff --git a/src/pages/Remove/ConfirmRemoveModal/ConfirmRemoveModal.tsx b/src/pages/Remove/ConfirmRemoveModal/ConfirmRemoveModal.tsx index 40a67554f..4bd1a46cb 100644 --- a/src/pages/Remove/ConfirmRemoveModal/ConfirmRemoveModal.tsx +++ b/src/pages/Remove/ConfirmRemoveModal/ConfirmRemoveModal.tsx @@ -2,11 +2,11 @@ import { minValueForOrder } from '@ergolabs/ergo-dex-sdk'; import { BoxSelection, DefaultBoxSelector } from '@ergolabs/ergo-sdk'; import React from 'react'; +import { ERG_DECIMALS, UI_FEE } from '../../../common/constants/erg'; +import { defaultExFee } from '../../../common/constants/settings'; import { AmmPool } from '../../../common/models/AmmPool'; import { Currency } from '../../../common/models/Currency'; import { InfoTooltip } from '../../../components/InfoTooltip/InfoTooltip'; -import { ERG_DECIMALS, UI_FEE } from '../../../constants/erg'; -import { defaultExFee } from '../../../constants/settings'; import { useSettings } from '../../../context'; import { Box, diff --git a/src/pages/Swap/OperationSettings/NitroInput/NitroInput.tsx b/src/pages/Swap/OperationSettings/NitroInput/NitroInput.tsx index 756defa13..53e75a7e6 100644 --- a/src/pages/Swap/OperationSettings/NitroInput/NitroInput.tsx +++ b/src/pages/Swap/OperationSettings/NitroInput/NitroInput.tsx @@ -1,6 +1,6 @@ import React, { ChangeEvent, FC } from 'react'; -import { MIN_NITRO } from '../../../../constants/erg'; +import { MIN_NITRO } from '../../../../common/constants/erg'; import { Alert, Button, Flex, Input } from '../../../../ergodex-cdk'; import { Control } from '../../../../ergodex-cdk/components/Form/NewForm'; diff --git a/src/pages/Swap/OperationSettings/OperationSettings.tsx b/src/pages/Swap/OperationSettings/OperationSettings.tsx index be9fb314b..b0a21b676 100644 --- a/src/pages/Swap/OperationSettings/OperationSettings.tsx +++ b/src/pages/Swap/OperationSettings/OperationSettings.tsx @@ -1,10 +1,10 @@ import React, { useState } from 'react'; import { filter, skip } from 'rxjs'; +import { MIN_NITRO } from '../../../common/constants/erg'; +import { defaultSlippage } from '../../../common/constants/settings'; import { useSubscription } from '../../../common/hooks/useObservable'; import { InfoTooltip } from '../../../components/InfoTooltip/InfoTooltip'; -import { MIN_NITRO } from '../../../constants/erg'; -import { defaultSlippage } from '../../../constants/settings'; import { useSettings } from '../../../context'; import { Box, diff --git a/src/pages/Swap/OperationSettings/SlippageInput/SlippageInput.tsx b/src/pages/Swap/OperationSettings/SlippageInput/SlippageInput.tsx index 4a28245f2..f853c490b 100644 --- a/src/pages/Swap/OperationSettings/SlippageInput/SlippageInput.tsx +++ b/src/pages/Swap/OperationSettings/SlippageInput/SlippageInput.tsx @@ -6,7 +6,7 @@ import { defaultSlippage, SlippageMax, SlippageMin, -} from '../../../../constants/settings'; +} from '../../../../common/constants/settings'; import { Alert, Button, Flex, Input } from '../../../../ergodex-cdk'; import { Control } from '../../../../ergodex-cdk/components/Form/NewForm'; diff --git a/src/pages/Swap/SwapConfirmationModal/SwapConfirmationModal.tsx b/src/pages/Swap/SwapConfirmationModal/SwapConfirmationModal.tsx index fc880da10..b029b03bb 100644 --- a/src/pages/Swap/SwapConfirmationModal/SwapConfirmationModal.tsx +++ b/src/pages/Swap/SwapConfirmationModal/SwapConfirmationModal.tsx @@ -8,11 +8,11 @@ import { } from '@ergolabs/ergo-sdk'; import React, { FC, useEffect, useState } from 'react'; +import { ERG_DECIMALS, UI_FEE } from '../../../common/constants/erg'; +import { defaultExFee } from '../../../common/constants/settings'; import { useObservable } from '../../../common/hooks/useObservable'; import { TokenControlFormItem } from '../../../components/common/TokenControl/TokenControl'; import { InfoTooltip } from '../../../components/InfoTooltip/InfoTooltip'; -import { ERG_DECIMALS, UI_FEE } from '../../../constants/erg'; -import { defaultExFee } from '../../../constants/settings'; import { useSettings } from '../../../context'; import { Box, Button, Flex, Modal, Typography } from '../../../ergodex-cdk'; import { Form, useForm } from '../../../ergodex-cdk/components/Form/NewForm'; diff --git a/src/pages/Swap/SwapTooltip/SwapTooltip.tsx b/src/pages/Swap/SwapTooltip/SwapTooltip.tsx index 574e599ce..9c4437389 100644 --- a/src/pages/Swap/SwapTooltip/SwapTooltip.tsx +++ b/src/pages/Swap/SwapTooltip/SwapTooltip.tsx @@ -2,10 +2,10 @@ import { swapVars } from '@ergolabs/ergo-dex-sdk/build/main/amm/math/swap'; import React, { FC } from 'react'; +import { ERG_DECIMALS, MIN_EX_FEE } from '../../../common/constants/erg'; +import { defaultExFee } from '../../../common/constants/settings'; import { useObservable } from '../../../common/hooks/useObservable'; import { InfoTooltip } from '../../../components/InfoTooltip/InfoTooltip'; -import { ERG_DECIMALS, MIN_EX_FEE } from '../../../constants/erg'; -import { defaultExFee } from '../../../constants/settings'; import { useSettings } from '../../../context'; import { Flex } from '../../../ergodex-cdk'; import { FormGroup } from '../../../ergodex-cdk/components/Form/NewForm'; diff --git a/src/services/explorer.ts b/src/services/explorer.ts index e3c4d9549..a56c58da9 100644 --- a/src/services/explorer.ts +++ b/src/services/explorer.ts @@ -1,6 +1,6 @@ import { Explorer } from '@ergolabs/ergo-sdk'; -import { ERGO_BASE_URL } from '../constants/env'; +import { ERGO_BASE_URL } from '../common/constants/env'; const explorer = new Explorer(ERGO_BASE_URL); diff --git a/src/services/new/balance.ts b/src/services/new/balance.ts index b5566f4e9..d4bcb15bf 100644 --- a/src/services/new/balance.ts +++ b/src/services/new/balance.ts @@ -9,9 +9,9 @@ import { switchMap, } from 'rxjs'; +import { ERG_DECIMALS } from '../../common/constants/erg'; import { useObservable } from '../../common/hooks/useObservable'; import { Currency } from '../../common/models/Currency'; -import { ERG_DECIMALS } from '../../constants/erg'; import { getListAvailableTokens } from '../../utils/getListAvailableTokens'; import { parseUserInputToFractions } from '../../utils/math'; import { assets$, lpAssets$ } from './assets'; diff --git a/src/services/new/core.ts b/src/services/new/core.ts index c60844d5a..97d81a466 100644 --- a/src/services/new/core.ts +++ b/src/services/new/core.ts @@ -17,11 +17,11 @@ import { switchMap, } from 'rxjs'; +import { ERG_DECIMALS, ERG_TOKEN_NAME } from '../../common/constants/erg'; +import { defaultExFee } from '../../common/constants/settings'; import { useObservable } from '../../common/hooks/useObservable'; import { Currency } from '../../common/models/Currency'; import { normalizeAmount } from '../../common/utils/amount'; -import { ERG_DECIMALS, ERG_TOKEN_NAME } from '../../constants/erg'; -import { defaultExFee } from '../../constants/settings'; import { useSettings } from '../../context'; import { walletCookies } from '../../utils/cookies'; import { renderFractions } from '../../utils/math'; diff --git a/src/services/poolActions.ts b/src/services/poolActions.ts index d175a7536..bbb9253d2 100644 --- a/src/services/poolActions.ts +++ b/src/services/poolActions.ts @@ -1,6 +1,6 @@ import { makeDefaultPoolActionsSelector } from '@ergolabs/ergo-dex-sdk'; -import { UiRewardAddress } from '../constants/settings'; +import { UiRewardAddress } from '../common/constants/settings'; import { mainnetTxAssembler } from './defaultTxAssembler'; import yoroiProver from './yoroi/prover'; diff --git a/src/utils/ammOperations.ts b/src/utils/ammOperations.ts index 433dd1c9f..30b17e5bc 100644 --- a/src/utils/ammOperations.ts +++ b/src/utils/ammOperations.ts @@ -8,7 +8,7 @@ import { TxId, } from '@ergolabs/ergo-sdk'; -import { ERG_DECIMALS } from '../constants/erg'; +import { ERG_DECIMALS } from '../common/constants/erg'; import { ammOrderRefunds } from '../services/amm'; import { explorer } from '../services/explorer'; import { parseUserInputToFractions } from './math'; diff --git a/src/utils/redirect.ts b/src/utils/redirect.ts index ff6a8a11c..b95b08fe7 100644 --- a/src/utils/redirect.ts +++ b/src/utils/redirect.ts @@ -1,6 +1,6 @@ import { Address, TxId } from '@ergolabs/ergo-sdk'; -import { ERG_EXPLORER_URL } from '../constants/env'; +import { ERG_EXPLORER_URL } from '../common/constants/env'; export const exploreTx = (txId: TxId): unknown => window.open(`${ERG_EXPLORER_URL}/transactions/${txId}`, '_blank'); diff --git a/src/utils/wallets/yoroi.tsx b/src/utils/wallets/yoroi.tsx index e400774e2..77c610d90 100644 --- a/src/utils/wallets/yoroi.tsx +++ b/src/utils/wallets/yoroi.tsx @@ -4,7 +4,7 @@ import { DISCORD_SUPPORT_URL, TELEGRAM_SUPPORT_URL, YOROI_NIGHTLY_LINK, -} from '../../constants/env'; +} from '../../common/constants/env'; import { WalletContextType } from '../../context'; import { Typography } from '../../ergodex-cdk'; import { walletCookies } from '../cookies'; From 63ce9c3913b1c20ead302cbe2dd07ec5f973ed49 Mon Sep 17 00:00:00 2001 From: ridel1e Date: Mon, 17 Jan 2022 09:18:26 +0300 Subject: [PATCH 09/15] fix tx history request --- src/api/pendingTransactions.ts | 6 ++++++ .../TxHistory/TxHistoryModal/TxHistoryModal.tsx | 13 ------------- .../ergo/transactions/pendingTransactions.ts | 9 ++++++++- 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/api/pendingTransactions.ts b/src/api/pendingTransactions.ts index b0288a894..ee928cbb6 100644 --- a/src/api/pendingTransactions.ts +++ b/src/api/pendingTransactions.ts @@ -2,6 +2,12 @@ import { publishReplay, refCount, switchMap } from 'rxjs'; import { selectedNetwork$ } from '../network/network'; +// export const pendingTransactions$ = selectedNetwork$.pipe( +// switchMap((network) => network.pendingTransactions$), +// publishReplay(1), +// refCount(), +// ); + export const pendingTransactionsCount$ = selectedNetwork$.pipe( switchMap((network) => network.pendingTransactionsCount$), publishReplay(1), diff --git a/src/components/common/TxHistory/TxHistoryModal/TxHistoryModal.tsx b/src/components/common/TxHistory/TxHistoryModal/TxHistoryModal.tsx index faee93368..93e7d79b8 100644 --- a/src/components/common/TxHistory/TxHistoryModal/TxHistoryModal.tsx +++ b/src/components/common/TxHistory/TxHistoryModal/TxHistoryModal.tsx @@ -29,22 +29,9 @@ import { normalizeOperations } from '../utils'; const DotsIconVertical = () => ; const TxHistoryModal = (): JSX.Element => { - const TXS_TO_DISPLAY = 50; - - const [operations, setOperations] = useState(); const [txs] = useObservable(transactionsHistory$); const walletAddresses = useWalletAddresses(); - console.log(txs); - - useEffect(() => { - if (walletAddresses.state === WalletAddressState.LOADED) { - networkHistory - .getAllByAddresses(walletAddresses.addresses, TXS_TO_DISPLAY) - .then((ops) => setOperations(normalizeOperations(ops))); - } - }, [walletAddresses]); - const handleOpenRefundConfirmationModal = useCallback( (txId) => { if (walletAddresses.state === WalletAddressState.LOADED) { diff --git a/src/network/ergo/transactions/pendingTransactions.ts b/src/network/ergo/transactions/pendingTransactions.ts index 365f2fb8b..966ce17a1 100644 --- a/src/network/ergo/transactions/pendingTransactions.ts +++ b/src/network/ergo/transactions/pendingTransactions.ts @@ -1,4 +1,5 @@ -import { AugErgoTx } from '@ergolabs/ergo-sdk'; +import { AmmDexOperation } from '@ergolabs/ergo-dex-sdk'; +import { Address, AugErgoTx } from '@ergolabs/ergo-sdk'; import { combineLatest, from, @@ -14,6 +15,12 @@ import networkHistory from '../../../services/networkHistory'; import { addresses$ } from '../addresses/addresses'; import { TX_LIMIT } from './common'; +const parseOp = ( + tx: AugErgoTx, + address: Address, +): AmmDexOperation | undefined => + networkHistory['parseOp'](tx, false, [address]); + const getUTxsByAddress = ( address: string, offset = 0, From 50fabf54b2345cdcc6f8bd80f21c4eefec9fcc80 Mon Sep 17 00:00:00 2001 From: ridel1e Date: Mon, 17 Jan 2022 09:48:58 +0300 Subject: [PATCH 10/15] fix warnings --- src/common/hooks/useObservable.ts | 3 ++- .../TxHistory/TxHistoryModal/TxHistoryModal.tsx | 5 ++--- src/ergodex-cdk/components/Form/NewForm.tsx | 7 ++++++- src/network/common.ts | 2 -- .../ergo/transactions/pendingTransactions.ts | 9 +-------- .../ergo/transactions/transactionsHistory.ts | 2 +- .../AddLiquidityConfirmationModal.tsx | 1 - .../ConfirmRemoveModal/ConfirmRemoveModal.tsx | 2 -- src/pages/Remove/Remove.tsx | 2 +- .../SlippageInput/SlippageInput.tsx | 2 +- src/pages/Swap/Swap.tsx | 8 +++----- .../SwapConfirmationModal/SwapConfirmationModal.tsx | 7 +------ src/pages/Swap/SwapTooltip/SwapTooltip.tsx | 7 ++----- src/services/new/balance.ts | 4 ++-- src/utils/debounce.ts | 13 ------------- src/utils/getListAvailableTokens.ts | 2 +- 16 files changed, 23 insertions(+), 53 deletions(-) delete mode 100644 src/utils/debounce.ts diff --git a/src/common/hooks/useObservable.ts b/src/common/hooks/useObservable.ts index d098a0392..f31864d67 100644 --- a/src/common/hooks/useObservable.ts +++ b/src/common/hooks/useObservable.ts @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/explicit-module-boundary-types */ import { useEffect, useState } from 'react'; import { Observable, Subject, Subscription, switchMap } from 'rxjs'; @@ -125,7 +126,7 @@ export function useSubscription Observable>( callback: (value: Unpacked>) => void, deps?: any[], ): [(...args: Parameters) => void]; -export function useSubscription( +export function useSubscription( item: any, callback: any, deps?: any[], diff --git a/src/components/common/TxHistory/TxHistoryModal/TxHistoryModal.tsx b/src/components/common/TxHistory/TxHistoryModal/TxHistoryModal.tsx index 93e7d79b8..e7a3d6e84 100644 --- a/src/components/common/TxHistory/TxHistoryModal/TxHistoryModal.tsx +++ b/src/components/common/TxHistory/TxHistoryModal/TxHistoryModal.tsx @@ -1,7 +1,7 @@ import Icon from '@ant-design/icons'; import { TxId } from '@ergolabs/ergo-sdk'; import { Typography } from 'antd'; -import React, { useCallback, useEffect, useState } from 'react'; +import React, { useCallback } from 'react'; import { transactionsHistory$ } from '../../../../api/transactionsHistory'; import { ReactComponent as DotsVertical } from '../../../../assets/icons/icon-dots-vertical.svg'; @@ -16,14 +16,13 @@ import { Modal, Skeleton, } from '../../../../ergodex-cdk'; -import networkHistory from '../../../../services/networkHistory'; import { isRefundableOperation } from '../../../../utils/ammOperations'; import { exploreTx } from '../../../../utils/redirect'; import { InputOutputColumn } from '../InputOutputColumn/InputOutputColumn'; import { RefundConfirmationModal } from '../RefundConfirmationModal/RefundConfirmationModal'; import { TxStatusTag } from '../TxStatusTag/TxStatusTag'; import { TxTypeTag } from '../TxTypeTag/TxTypeTag'; -import { Operation, OperationStatus } from '../types'; +import { OperationStatus } from '../types'; import { normalizeOperations } from '../utils'; const DotsIconVertical = () => ; diff --git a/src/ergodex-cdk/components/Form/NewForm.tsx b/src/ergodex-cdk/components/Form/NewForm.tsx index 812dbf7dd..3d9329355 100644 --- a/src/ergodex-cdk/components/Form/NewForm.tsx +++ b/src/ergodex-cdk/components/Form/NewForm.tsx @@ -74,6 +74,7 @@ export class FormControl implements AbstractFormItem { constructor( public name: string, private param: FormControlParams, + // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types private parent: any, ) {} @@ -359,7 +360,11 @@ export const FormContext = createContext<{ warningMessages?: Messages; }>({} as any); -export const useFormContext = () => useContext(FormContext); +export const useFormContext = (): { + form: FormGroup; + errorMessages?: Messages; + warningMessages?: Messages; +} => useContext(FormContext); class _Form extends React.Component> { constructor(props: FormProps) { diff --git a/src/network/common.ts b/src/network/common.ts index ff1dcccb2..b3c3c4af3 100644 --- a/src/network/common.ts +++ b/src/network/common.ts @@ -2,8 +2,6 @@ import { AmmDexOperation } from '@ergolabs/ergo-dex-sdk'; import { Address } from '@ergolabs/ergo-sdk'; import { Observable } from 'rxjs'; -import { getTxHistory } from './ergo/transactions/transactionsHistory'; - export interface Network { readonly addresses$: Observable; readonly pendingTransactionsCount$: Observable; diff --git a/src/network/ergo/transactions/pendingTransactions.ts b/src/network/ergo/transactions/pendingTransactions.ts index 966ce17a1..365f2fb8b 100644 --- a/src/network/ergo/transactions/pendingTransactions.ts +++ b/src/network/ergo/transactions/pendingTransactions.ts @@ -1,5 +1,4 @@ -import { AmmDexOperation } from '@ergolabs/ergo-dex-sdk'; -import { Address, AugErgoTx } from '@ergolabs/ergo-sdk'; +import { AugErgoTx } from '@ergolabs/ergo-sdk'; import { combineLatest, from, @@ -15,12 +14,6 @@ import networkHistory from '../../../services/networkHistory'; import { addresses$ } from '../addresses/addresses'; import { TX_LIMIT } from './common'; -const parseOp = ( - tx: AugErgoTx, - address: Address, -): AmmDexOperation | undefined => - networkHistory['parseOp'](tx, false, [address]); - const getUTxsByAddress = ( address: string, offset = 0, diff --git a/src/network/ergo/transactions/transactionsHistory.ts b/src/network/ergo/transactions/transactionsHistory.ts index 8a9038444..93e685917 100644 --- a/src/network/ergo/transactions/transactionsHistory.ts +++ b/src/network/ergo/transactions/transactionsHistory.ts @@ -42,7 +42,7 @@ const getTxsByAddress = ( return [txs, txsCount, ops as any, ops.length]; }), - switchMap(([txs, txsCount, ops, opsCount]) => { + switchMap(([, txsCount, ops, opsCount]) => { if (txsCount < TX_LIMIT || opsCount + prevOperationsCount > limit) { return of(ops); } diff --git a/src/pages/Pool/AddLiquidity/AddLiquidityConfirmationModal/AddLiquidityConfirmationModal.tsx b/src/pages/Pool/AddLiquidity/AddLiquidityConfirmationModal/AddLiquidityConfirmationModal.tsx index e655dfaab..860aa4863 100644 --- a/src/pages/Pool/AddLiquidity/AddLiquidityConfirmationModal/AddLiquidityConfirmationModal.tsx +++ b/src/pages/Pool/AddLiquidity/AddLiquidityConfirmationModal/AddLiquidityConfirmationModal.tsx @@ -9,7 +9,6 @@ import { useSettings } from '../../../../context'; import { Box, Button, Flex, Modal, Typography } from '../../../../ergodex-cdk'; import { explorer } from '../../../../services/explorer'; import { - useMaxTotalFees, useMinExFee, useMinTotalFees, utxos$, diff --git a/src/pages/Remove/ConfirmRemoveModal/ConfirmRemoveModal.tsx b/src/pages/Remove/ConfirmRemoveModal/ConfirmRemoveModal.tsx index 4bd1a46cb..6f62e2395 100644 --- a/src/pages/Remove/ConfirmRemoveModal/ConfirmRemoveModal.tsx +++ b/src/pages/Remove/ConfirmRemoveModal/ConfirmRemoveModal.tsx @@ -3,7 +3,6 @@ import { BoxSelection, DefaultBoxSelector } from '@ergolabs/ergo-sdk'; import React from 'react'; import { ERG_DECIMALS, UI_FEE } from '../../../common/constants/erg'; -import { defaultExFee } from '../../../common/constants/settings'; import { AmmPool } from '../../../common/models/AmmPool'; import { Currency } from '../../../common/models/Currency'; import { InfoTooltip } from '../../../components/InfoTooltip/InfoTooltip'; @@ -23,7 +22,6 @@ import { poolActions } from '../../../services/poolActions'; import { submitTx } from '../../../services/yoroi'; import { makeTarget } from '../../../utils/ammMath'; import { parseUserInputToFractions } from '../../../utils/math'; -import { calculateTotalFee } from '../../../utils/transactions'; import { PairSpace } from '../PairSpace/PairSpace'; import { RemoveFormSpaceWrapper } from '../RemoveFormSpaceWrapper/RemoveFormSpaceWrapper'; diff --git a/src/pages/Remove/Remove.tsx b/src/pages/Remove/Remove.tsx index 35f7016fa..2d1f76b2c 100644 --- a/src/pages/Remove/Remove.tsx +++ b/src/pages/Remove/Remove.tsx @@ -1,6 +1,6 @@ // TODO: REPLACE_ANTD_SKELETON_COMPONENT[EDEX-467] import { PoolId } from '@ergolabs/ergo-dex-sdk'; -import React, { FC, useCallback, useEffect, useState } from 'react'; +import React, { FC, useEffect } from 'react'; import { useParams } from 'react-router'; import { combineLatest, debounceTime, map, Observable, of, skip } from 'rxjs'; diff --git a/src/pages/Swap/OperationSettings/SlippageInput/SlippageInput.tsx b/src/pages/Swap/OperationSettings/SlippageInput/SlippageInput.tsx index f853c490b..ec6369ca7 100644 --- a/src/pages/Swap/OperationSettings/SlippageInput/SlippageInput.tsx +++ b/src/pages/Swap/OperationSettings/SlippageInput/SlippageInput.tsx @@ -1,6 +1,6 @@ import './SlippageInput.less'; -import React, { ChangeEvent, FC, useState } from 'react'; +import React, { ChangeEvent, FC } from 'react'; import { defaultSlippage, diff --git a/src/pages/Swap/Swap.tsx b/src/pages/Swap/Swap.tsx index bbde0cef1..0e1fc8ff6 100644 --- a/src/pages/Swap/Swap.tsx +++ b/src/pages/Swap/Swap.tsx @@ -1,6 +1,5 @@ import './Swap.less'; -import { AssetInfo } from '@ergolabs/ergo-sdk/build/main/entities/assetInfo'; import { maxBy } from 'lodash'; import React, { useEffect, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; @@ -119,9 +118,8 @@ export const Swap = (): JSX.Element => { return toAmount?.gt(pool.getAssetAmount(toAmount?.asset)); }; - useSubscription( - form.controls.fromAsset.valueChangesWithSilent$, - (token: AssetInfo | undefined) => updateToAssets$.next(token?.id), + useSubscription(form.controls.fromAsset.valueChangesWithSilent$, (token) => + updateToAssets$.next(token?.id), ); useSubscription(form.controls.fromAsset.valueChanges$, () => @@ -162,7 +160,7 @@ export const Swap = (): JSX.Element => { form.controls.pool.valueChanges$, ]).pipe( debounceTime(100), - filter(([_, pool]) => !!form.value.fromAsset && !!pool), + filter(([, pool]) => !!form.value.fromAsset && !!pool), ), ([amount, pool]) => { form.patchValue( diff --git a/src/pages/Swap/SwapConfirmationModal/SwapConfirmationModal.tsx b/src/pages/Swap/SwapConfirmationModal/SwapConfirmationModal.tsx index b029b03bb..bc8de1308 100644 --- a/src/pages/Swap/SwapConfirmationModal/SwapConfirmationModal.tsx +++ b/src/pages/Swap/SwapConfirmationModal/SwapConfirmationModal.tsx @@ -9,7 +9,6 @@ import { import React, { FC, useEffect, useState } from 'react'; import { ERG_DECIMALS, UI_FEE } from '../../../common/constants/erg'; -import { defaultExFee } from '../../../common/constants/settings'; import { useObservable } from '../../../common/hooks/useObservable'; import { TokenControlFormItem } from '../../../components/common/TokenControl/TokenControl'; import { InfoTooltip } from '../../../components/InfoTooltip/InfoTooltip'; @@ -17,11 +16,7 @@ import { useSettings } from '../../../context'; import { Box, Button, Flex, Modal, Typography } from '../../../ergodex-cdk'; import { Form, useForm } from '../../../ergodex-cdk/components/Form/NewForm'; import { explorer } from '../../../services/explorer'; -import { - useMaxTotalFees, - useMinExFee, - utxos$, -} from '../../../services/new/core'; +import { useMinExFee, utxos$ } from '../../../services/new/core'; import { poolActions } from '../../../services/poolActions'; import { submitTx } from '../../../services/yoroi'; import { makeTarget } from '../../../utils/ammMath'; diff --git a/src/pages/Swap/SwapTooltip/SwapTooltip.tsx b/src/pages/Swap/SwapTooltip/SwapTooltip.tsx index 9c4437389..336251307 100644 --- a/src/pages/Swap/SwapTooltip/SwapTooltip.tsx +++ b/src/pages/Swap/SwapTooltip/SwapTooltip.tsx @@ -2,8 +2,6 @@ import { swapVars } from '@ergolabs/ergo-dex-sdk/build/main/amm/math/swap'; import React, { FC } from 'react'; -import { ERG_DECIMALS, MIN_EX_FEE } from '../../../common/constants/erg'; -import { defaultExFee } from '../../../common/constants/settings'; import { useObservable } from '../../../common/hooks/useObservable'; import { InfoTooltip } from '../../../components/InfoTooltip/InfoTooltip'; import { useSettings } from '../../../context'; @@ -11,15 +9,14 @@ import { Flex } from '../../../ergodex-cdk'; import { FormGroup } from '../../../ergodex-cdk/components/Form/NewForm'; import { useMaxTotalFees, useMinExFee } from '../../../services/new/core'; import { renderFractions } from '../../../utils/math'; -import { calculateTotalFee } from '../../../utils/transactions'; import { getBaseInputParameters } from '../../../utils/walletMath'; import { SwapFormModel } from '../SwapFormModel'; const TxInfoTooltipContent: FC<{ value: SwapFormModel }> = ({ value }) => { - const [{ slippage, minerFee, nitro }] = useSettings(); + const [{ slippage, nitro }] = useSettings(); const totalFees = useMaxTotalFees(); const minExFee = useMinExFee(); - console.log(totalFees, minExFee, minerFee); + const swapExtremums = value.fromAmount?.isPositive() && value.toAmount?.isPositive() && value.pool ? swapVars( diff --git a/src/services/new/balance.ts b/src/services/new/balance.ts index d4bcb15bf..d83568223 100644 --- a/src/services/new/balance.ts +++ b/src/services/new/balance.ts @@ -88,10 +88,10 @@ export const lpWalletBalance$ = combineLatest([ lpWalletBalance$.subscribe(() => {}); assetWalletBalance$.subscribe(() => {}); -export const useAssetWalletBalance = () => +export const useAssetWalletBalance = (): [Balance, boolean, Error] => useObservable(assetWalletBalance$, [], new Balance([])); -export const useLpWalletBalance = () => +export const useLpWalletBalance = (): [Balance, boolean, Error] => useObservable(lpWalletBalance$, [], new Balance([])); export const getBalanceByAsset = (asset: AssetInfo): Observable => diff --git a/src/utils/debounce.ts b/src/utils/debounce.ts deleted file mode 100644 index 39954d5af..000000000 --- a/src/utils/debounce.ts +++ /dev/null @@ -1,13 +0,0 @@ -const noop = (...args: any[]) => {}; - -export const debounce = - void>(fn: F | undefined, time: number) => - (...args: Parameters) => { - let timerId: any = undefined; - return (...args: any[]) => { - if (timerId) { - clearTimeout(timerId); - } - timerId = setTimeout((fn || noop).bind(null, ...args), time); - }; - }; diff --git a/src/utils/getListAvailableTokens.ts b/src/utils/getListAvailableTokens.ts index 3bd3e1578..429a4de60 100644 --- a/src/utils/getListAvailableTokens.ts +++ b/src/utils/getListAvailableTokens.ts @@ -7,7 +7,7 @@ export type Asset = { decimals?: number; }; -export const isAsset = (value: any): value is Asset => !!value?.tokenId; +// export const isAsset = (value: any): value is Asset => !!value?.tokenId; export type AssetDictionary = Record; From 95ba19d8704a5eb70aa2f1feeb736d0412281526 Mon Sep 17 00:00:00 2001 From: ridel1e Date: Mon, 17 Jan 2022 20:42:17 +0300 Subject: [PATCH 11/15] replace svg sprite with urls --- public/assets/tokens/token-ada-disabled.svg | 40 ++++++++++++++++++++ public/assets/tokens/token-ada.svg | 40 ++++++++++++++++++++ public/assets/tokens/token-empty.svg | 4 ++ public/assets/tokens/token-erdoge.svg | 42 +++++++++++++++++++++ public/assets/tokens/token-erg.svg | 4 ++ public/assets/tokens/token-kushti.svg | 5 +++ public/assets/tokens/token-lunadog.svg | 4 ++ public/assets/tokens/token-sigrsv.svg | 7 ++++ public/assets/tokens/token-sigusd.svg | 6 +++ src/components/TokenIcon/TokenIcon.tsx | 15 +++----- 10 files changed, 157 insertions(+), 10 deletions(-) create mode 100755 public/assets/tokens/token-ada-disabled.svg create mode 100755 public/assets/tokens/token-ada.svg create mode 100755 public/assets/tokens/token-empty.svg create mode 100644 public/assets/tokens/token-erdoge.svg create mode 100755 public/assets/tokens/token-erg.svg create mode 100644 public/assets/tokens/token-kushti.svg create mode 100644 public/assets/tokens/token-lunadog.svg create mode 100644 public/assets/tokens/token-sigrsv.svg create mode 100644 public/assets/tokens/token-sigusd.svg diff --git a/public/assets/tokens/token-ada-disabled.svg b/public/assets/tokens/token-ada-disabled.svg new file mode 100755 index 000000000..021109af4 --- /dev/null +++ b/public/assets/tokens/token-ada-disabled.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/tokens/token-ada.svg b/public/assets/tokens/token-ada.svg new file mode 100755 index 000000000..d98137137 --- /dev/null +++ b/public/assets/tokens/token-ada.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/tokens/token-empty.svg b/public/assets/tokens/token-empty.svg new file mode 100755 index 000000000..c997eba7c --- /dev/null +++ b/public/assets/tokens/token-empty.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/tokens/token-erdoge.svg b/public/assets/tokens/token-erdoge.svg new file mode 100644 index 000000000..1ffe0e643 --- /dev/null +++ b/public/assets/tokens/token-erdoge.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/tokens/token-erg.svg b/public/assets/tokens/token-erg.svg new file mode 100755 index 000000000..363c26306 --- /dev/null +++ b/public/assets/tokens/token-erg.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/tokens/token-kushti.svg b/public/assets/tokens/token-kushti.svg new file mode 100644 index 000000000..a2506ca9f --- /dev/null +++ b/public/assets/tokens/token-kushti.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/assets/tokens/token-lunadog.svg b/public/assets/tokens/token-lunadog.svg new file mode 100644 index 000000000..cfa2f121e --- /dev/null +++ b/public/assets/tokens/token-lunadog.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/tokens/token-sigrsv.svg b/public/assets/tokens/token-sigrsv.svg new file mode 100644 index 000000000..6b66f5d4f --- /dev/null +++ b/public/assets/tokens/token-sigrsv.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/assets/tokens/token-sigusd.svg b/public/assets/tokens/token-sigusd.svg new file mode 100644 index 000000000..fb0f59067 --- /dev/null +++ b/public/assets/tokens/token-sigusd.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/components/TokenIcon/TokenIcon.tsx b/src/components/TokenIcon/TokenIcon.tsx index 3afbdf717..49d17bcbd 100644 --- a/src/components/TokenIcon/TokenIcon.tsx +++ b/src/components/TokenIcon/TokenIcon.tsx @@ -1,7 +1,5 @@ import React from 'react'; -import sprite from '../../assets/icons/sprite/sprite.svg'; - type TokenIconProps = React.DetailedHTMLProps< React.HTMLAttributes, HTMLDivElement @@ -38,16 +36,13 @@ const TokenIcon: React.FC = ({ name, size, ...rest }) => { }} {...rest} > - - - + /> ); }; From 1471aed4c3e60a709841a80d46e0f2f84b6eb3f4 Mon Sep 17 00:00:00 2001 From: ridel1e Date: Wed, 19 Jan 2022 17:33:46 +0300 Subject: [PATCH 12/15] add header animation --- src/components/Header/Header.less | 5 +++++ src/components/Header/Header.tsx | 23 +++++++++++++++++++++-- 2 files changed, 26 insertions(+), 2 deletions(-) diff --git a/src/components/Header/Header.less b/src/components/Header/Header.less index ad19734d4..a336c516b 100644 --- a/src/components/Header/Header.less +++ b/src/components/Header/Header.less @@ -6,6 +6,7 @@ width: 100%; flex-flow: row nowrap; justify-content: space-between; + transition: transform .3s; &__wrapper { position: relative; @@ -53,4 +54,8 @@ &__btn { border: 1px solid transparent; } + + &_hidden { + transform: translateY(-72px); + } } diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index cbaf082a1..291ec54be 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -1,6 +1,7 @@ import './Header.less'; -import React from 'react'; +import cn from 'classnames'; +import React, { useEffect, useState } from 'react'; import { ERG_TOKEN_NAME } from '../../common/constants/erg'; import { useObservable } from '../../common/hooks/useObservable'; @@ -28,9 +29,27 @@ export const Header: React.FC = () => { // TODO: Update with rx [EDEX-487] const [balance] = useObservable(nativeTokenBalance$); const [walletState] = useObservable(walletState$); + const [hidden, setHidden] = useState(false); + + useEffect(() => { + let currentScrollY = window.scrollY; + const handleScroll = () => { + if (currentScrollY > window.scrollY) { + setHidden(false); + } + if (currentScrollY < window.scrollY) { + setHidden(true); + } + currentScrollY = window.scrollY; + }; + + document.addEventListener('scroll', handleScroll); + + return () => document.removeEventListener('scroll', handleScroll); + }, []); return ( -
+