From abd36bc50265014cfd834270acd7ae2976e1ab65 Mon Sep 17 00:00:00 2001 From: Linkie Link Date: Tue, 24 Oct 2023 16:36:06 +0200 Subject: [PATCH] Mp 3480 persist last trading pair (#578) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * MP-3480: remove favourite asset and prepare localStore * env: updated shuttle, keplr and version (#566) * fix: fixed dust left when trying to buy max amount without leverage (#565) * feat: added squidrouter to the bridges (#561) * feat: added squidrouter to the bridges * fix: copy update * MP-3521: updated the APR calculation (#572) * Table fixes (#563) * fix: fixed the sorting of the tables * fix: added sorting functions * fix: farm sorting for deposit cap * fix: fixed Row types * Build(deps-dev): bump prettier-plugin-tailwindcss from 0.5.5 to 0.5.6 (#567) Bumps [prettier-plugin-tailwindcss](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) from 0.5.5 to 0.5.6. - [Release notes](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/releases) - [Changelog](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/blob/main/CHANGELOG.md) - [Commits](https://github.com/tailwindlabs/prettier-plugin-tailwindcss/compare/v0.5.5...v0.5.6) --- updated-dependencies: - dependency-name: prettier-plugin-tailwindcss dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Build(deps): bump react-router-dom from 6.16.0 to 6.17.0 (#571) Bumps [react-router-dom](https://github.com/remix-run/react-router/tree/HEAD/packages/react-router-dom) from 6.16.0 to 6.17.0. - [Release notes](https://github.com/remix-run/react-router/releases) - [Changelog](https://github.com/remix-run/react-router/blob/main/packages/react-router-dom/CHANGELOG.md) - [Commits](https://github.com/remix-run/react-router/commits/react-router-dom@6.17.0/packages/react-router-dom) --- updated-dependencies: - dependency-name: react-router-dom dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * ✨ HLS: Add info modal (#573) * MP-3484: remember summaryAccount tabs and auto expand both (#574) * User feedback (#575) * feat: added debt indicator and adjusted the borrowModal * fix: wallet interaction fix * Add usdc noble (#576) * env: added USDC.n * env: updated usdc noble variables * fix: fixed the pool on USDC for devnet purposes * 🐛 Fix initial status of chart (#577) * MP-3480: persist trading pair * fix: updated according to feedback * fix: remove pair from Trading View header --------- Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Bob van der Helm <34470358+bobthebuidlr@users.noreply.github.com> --- .../HLS/Farm/Table/Columns/Deposit.tsx | 6 +-- src/components/Modals/Settings/index.tsx | 53 ++----------------- .../Trade/TradeChart/TVChartContainer.tsx | 6 +-- .../Trade/TradeModule/AssetSelector/index.tsx | 33 ++++++------ src/components/Trade/TradeModule/index.tsx | 12 +---- src/constants/defaultSettings.ts | 6 ++- src/constants/localStorageKeys.ts | 2 +- src/pages/TradePage.tsx | 30 +++++++---- src/types/interfaces/store/settings.d.ts | 2 +- 9 files changed, 54 insertions(+), 96 deletions(-) diff --git a/src/components/HLS/Farm/Table/Columns/Deposit.tsx b/src/components/HLS/Farm/Table/Columns/Deposit.tsx index c60ff38f..35356384 100644 --- a/src/components/HLS/Farm/Table/Columns/Deposit.tsx +++ b/src/components/HLS/Farm/Table/Columns/Deposit.tsx @@ -1,5 +1,5 @@ import classNames from 'classnames' -import React, { useCallback } from 'react' +import { useCallback } from 'react' import ActionButton from 'components/Button/ActionButton' import { Enter } from 'components/Icons' @@ -31,7 +31,7 @@ export default function Deposit(props: Props) { openAlertDialog({ title: 'Understanding HLS Positions', content: ( -
+
{INFO_ITEMS.map((item) => (
{item.title} - {item.description} + {item.description}
))} diff --git a/src/components/Modals/Settings/index.tsx b/src/components/Modals/Settings/index.tsx index ef5bb9c7..11bc4934 100644 --- a/src/components/Modals/Settings/index.tsx +++ b/src/components/Modals/Settings/index.tsx @@ -18,7 +18,7 @@ import useAlertDialog from 'hooks/useAlertDialog' import useAutoLend from 'hooks/useAutoLend' import useLocalStorage from 'hooks/useLocalStorage' import useStore from 'store' -import { getDisplayCurrencies, getEnabledMarketAssets } from 'utils/assets' +import { getDisplayCurrencies } from 'utils/assets' import { BN } from 'utils/helpers' const slippages = [0.02, 0.03] @@ -27,7 +27,6 @@ export default function SettingsModal() { const modal = useStore((s) => s.settingsModal) const { open: showResetDialog } = useAlertDialog() const displayCurrencies = getDisplayCurrencies() - const assets = getEnabledMarketAssets() const { setAutoLendOnAllAccounts } = useAutoLend() const [customSlippage, setCustomSlippage] = useState(0) const [inputRef, setInputRef] = useState>() @@ -36,10 +35,6 @@ export default function SettingsModal() { LocalStorageKeys.DISPLAY_CURRENCY, DEFAULT_SETTINGS.displayCurrency, ) - const [preferredAsset, setPreferredAsset] = useLocalStorage( - LocalStorageKeys.PREFERRED_ASSET, - DEFAULT_SETTINGS.preferredAsset, - ) const [reduceMotion, setReduceMotion] = useLocalStorage( LocalStorageKeys.REDUCE_MOTION, DEFAULT_SETTINGS.reduceMotion, @@ -79,22 +74,6 @@ export default function SettingsModal() { [displayCurrencies], ) - const preferredAssetsOptions = useMemo( - () => - assets.map((asset, index) => ({ - label: [ -
- - - {asset.symbol} - -
, - ], - value: asset.denom, - })), - [assets], - ) - const handleReduceMotion = useCallback( (value: boolean) => { setReduceMotion(value) @@ -117,13 +96,6 @@ export default function SettingsModal() { [setTutorial], ) - const handlePreferredAsset = useCallback( - (value: string) => { - setPreferredAsset(value) - }, - [setPreferredAsset], - ) - const handleDisplayCurrency = useCallback( (value: string) => { setDisplayCurrency(value) @@ -174,17 +146,10 @@ export default function SettingsModal() { const handleResetSettings = useCallback(() => { handleDisplayCurrency(DEFAULT_SETTINGS.displayCurrency) - handlePreferredAsset(DEFAULT_SETTINGS.preferredAsset) handleSlippage(DEFAULT_SETTINGS.slippage) handleReduceMotion(DEFAULT_SETTINGS.reduceMotion) handleLendAssets(DEFAULT_SETTINGS.lendAssets) - }, [ - handleDisplayCurrency, - handleReduceMotion, - handleLendAssets, - handlePreferredAsset, - handleSlippage, - ]) + }, [handleDisplayCurrency, handleReduceMotion, handleLendAssets, handleSlippage]) const showResetModal = useCallback(() => { showResetDialog({ @@ -267,21 +232,11 @@ export default function SettingsModal() { withStatus /> { 'mainSeriesProperties.candleStyle.wickUpColor': '#3DAE9A', 'mainSeriesProperties.candleStyle.wickDownColor': '#AE3D3D', 'mainSeriesProperties.candleStyle.barColorsOnPrevClose': false, - 'scalesProperties.textColor': 'rgba(255, 255, 255, 0.3)', - 'paneProperties.legendProperties.showSeriesTitle': false, + 'scalesProperties.textColor': 'rgba(255, 255, 255, 0.7)', + 'paneProperties.legendProperties.showSeriesTitle': true, 'paneProperties.legendProperties.showVolume': false, 'paneProperties.legendProperties.showStudyValues': false, 'paneProperties.legendProperties.showStudyTitles': false, 'scalesProperties.axisHighlightColor': '#381730', - 'linetooltrendline.color': 'rgba( 21, 153, 128, 1)', + 'linetooltrendline.color': '#3DAE9A', 'linetooltrendline.linewidth': 10, }, overrides, diff --git a/src/components/Trade/TradeModule/AssetSelector/index.tsx b/src/components/Trade/TradeModule/AssetSelector/index.tsx index 4efd562c..ec2ebcc9 100644 --- a/src/components/Trade/TradeModule/AssetSelector/index.tsx +++ b/src/components/Trade/TradeModule/AssetSelector/index.tsx @@ -1,54 +1,51 @@ -import { useCallback, useEffect } from 'react' +import { useCallback } from 'react' import { SwapIcon } from 'components/Icons' import Text from 'components/Text' import AssetButton from 'components/Trade/TradeModule/AssetSelector/AssetButton' import AssetOverlay from 'components/Trade/TradeModule/AssetSelector/AssetOverlay' +import { DEFAULT_SETTINGS } from 'constants/defaultSettings' +import { LocalStorageKeys } from 'constants/localStorageKeys' +import useLocalStorage from 'hooks/useLocalStorage' import useStore from 'store' interface Props { buyAsset: Asset sellAsset: Asset - onChangeBuyAsset: (asset: Asset) => void - onChangeSellAsset: (asset: Asset) => void } export default function AssetSelector(props: Props) { - const { buyAsset, sellAsset, onChangeBuyAsset, onChangeSellAsset } = props + const [tradingPair, setTradingPair] = useLocalStorage( + LocalStorageKeys.TRADING_PAIR, + DEFAULT_SETTINGS.tradingPair, + ) + const { buyAsset, sellAsset } = props const assetOverlayState = useStore((s) => s.assetOverlayState) const handleSwapAssets = useCallback(() => { - onChangeBuyAsset(sellAsset) - onChangeSellAsset(buyAsset) - }, [onChangeBuyAsset, onChangeSellAsset, sellAsset, buyAsset]) + setTradingPair({ buy: sellAsset.denom, sell: buyAsset.denom }) + }, [setTradingPair, sellAsset, buyAsset]) const handleChangeBuyAsset = useCallback( (asset: Asset) => { - onChangeBuyAsset(asset) + setTradingPair({ buy: asset.denom, sell: sellAsset.denom }) useStore.setState({ assetOverlayState: 'sell' }) }, - [onChangeBuyAsset], + [setTradingPair, sellAsset], ) const handleChangeSellAsset = useCallback( (asset: Asset) => { - onChangeSellAsset(asset) + setTradingPair({ buy: buyAsset.denom, sell: asset.denom }) useStore.setState({ assetOverlayState: 'closed' }) }, - [onChangeSellAsset], + [setTradingPair, buyAsset], ) const handleChangeState = useCallback((state: OverlayState) => { useStore.setState({ assetOverlayState: state }) }, []) - useEffect(() => { - if (assetOverlayState === 'closed') { - onChangeBuyAsset(buyAsset) - onChangeSellAsset(sellAsset) - } - }, [onChangeBuyAsset, onChangeSellAsset, assetOverlayState, buyAsset, sellAsset]) - return (
Buy diff --git a/src/components/Trade/TradeModule/index.tsx b/src/components/Trade/TradeModule/index.tsx index e1e18dd5..c5cca54b 100644 --- a/src/components/Trade/TradeModule/index.tsx +++ b/src/components/Trade/TradeModule/index.tsx @@ -6,12 +6,10 @@ import SwapForm from 'components/Trade/TradeModule/SwapForm' interface Props { buyAsset: Asset sellAsset: Asset - onChangeBuyAsset: (asset: Asset) => void - onChangeSellAsset: (asset: Asset) => void } export default function TradeModule(props: Props) { - const { buyAsset, sellAsset, onChangeBuyAsset, onChangeSellAsset } = props + const { buyAsset, sellAsset } = props return (
- - +
) diff --git a/src/constants/defaultSettings.ts b/src/constants/defaultSettings.ts index eb19d961..43756554 100644 --- a/src/constants/defaultSettings.ts +++ b/src/constants/defaultSettings.ts @@ -1,11 +1,13 @@ -import { ASSETS } from 'constants/assets' import { ORACLE_DENOM } from 'constants/oracle' +import { getEnabledMarketAssets } from 'utils/assets' + +const enabledMarketAssets = getEnabledMarketAssets() export const DEFAULT_SETTINGS: Settings = { accountSummaryTabs: [true, true], reduceMotion: false, lendAssets: true, - preferredAsset: ASSETS[0].denom, + tradingPair: { buy: enabledMarketAssets[0].denom, sell: enabledMarketAssets[1].denom }, displayCurrency: ORACLE_DENOM, slippage: 0.02, tutorial: true, diff --git a/src/constants/localStorageKeys.ts b/src/constants/localStorageKeys.ts index cec3137e..bda120b1 100644 --- a/src/constants/localStorageKeys.ts +++ b/src/constants/localStorageKeys.ts @@ -1,6 +1,6 @@ export enum LocalStorageKeys { + TRADING_PAIR = 'tradingPair', ACCOUNT_SUMMARY_TABS = 'accountSummaryTabs', - PREFERRED_ASSET = 'favouriteAsset', DISPLAY_CURRENCY = 'displayCurrency', REDUCE_MOTION = 'reduceMotion', FAVORITE_ASSETS = 'favoriteAssets', diff --git a/src/pages/TradePage.tsx b/src/pages/TradePage.tsx index 9fb18906..7dfd9006 100644 --- a/src/pages/TradePage.tsx +++ b/src/pages/TradePage.tsx @@ -1,28 +1,40 @@ -import { useState } from 'react' +import { useMemo } from 'react' import MigrationBanner from 'components/MigrationBanner' import AccountDetailsCard from 'components/Trade/AccountDetailsCard' import TradeChart from 'components/Trade/TradeChart' import TradeModule from 'components/Trade/TradeModule' +import { DEFAULT_SETTINGS } from 'constants/defaultSettings' +import { LocalStorageKeys } from 'constants/localStorageKeys' +import useLocalStorage from 'hooks/useLocalStorage' import useStore from 'store' +import { byDenom } from 'utils/array' import { getEnabledMarketAssets } from 'utils/assets' export default function TradePage() { + const [tradingPair] = useLocalStorage( + LocalStorageKeys.TRADING_PAIR, + DEFAULT_SETTINGS.tradingPair, + ) const enabledMarketAssets = getEnabledMarketAssets() - const [buyAsset, setBuyAsset] = useState(enabledMarketAssets[0]) - const [sellAsset, setSellAsset] = useState(enabledMarketAssets[1]) const assetOverlayState = useStore((s) => s.assetOverlayState) + const buyAsset = useMemo( + () => enabledMarketAssets.find(byDenom(tradingPair.buy)) ?? enabledMarketAssets[0], + [tradingPair, enabledMarketAssets], + ) + const sellAsset = useMemo( + () => enabledMarketAssets.find(byDenom(tradingPair.sell)) ?? enabledMarketAssets[1], + [tradingPair, enabledMarketAssets], + ) + + if (!tradingPair) return null + return (
- +
diff --git a/src/types/interfaces/store/settings.d.ts b/src/types/interfaces/store/settings.d.ts index f9e6e15c..bb51527a 100644 --- a/src/types/interfaces/store/settings.d.ts +++ b/src/types/interfaces/store/settings.d.ts @@ -2,7 +2,7 @@ interface Settings { accountSummaryTabs: boolean[] displayCurrency: string reduceMotion: boolean - preferredAsset: string + tradingPair: { buy: string; sell: string } lendAssets: boolean slippage: number tutorial: boolean