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