Mp 3480 persist last trading pair (#578)
* 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] <support@github.com> 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] <support@github.com> 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] <support@github.com> 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>
This commit is contained in:
Linkie Link
GitHub
parent
ae77e96df4
commit
abd36bc502
@ -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: (
|
||||
<div className='flex flex-col gap-8 pb-8 pt-2 pr-10'>
|
||||
<div className='flex flex-col gap-8 pt-2 pb-8 pr-10'>
|
||||
{INFO_ITEMS.map((item) => (
|
||||
<div key={item.title} className='grid grid-cols-[min-content,auto]'>
|
||||
<span
|
||||
@ -44,7 +44,7 @@ export default function Deposit(props: Props) {
|
||||
</span>
|
||||
<span className='flex flex-col'>
|
||||
<Text>{item.title}</Text>
|
||||
<Text className='text-white/60 text-sm'>{item.description}</Text>
|
||||
<Text className='text-sm text-white/60'>{item.description}</Text>
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
|
||||
@ -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<number>(0)
|
||||
const [inputRef, setInputRef] = useState<React.RefObject<HTMLInputElement>>()
|
||||
@ -36,10 +35,6 @@ export default function SettingsModal() {
|
||||
LocalStorageKeys.DISPLAY_CURRENCY,
|
||||
DEFAULT_SETTINGS.displayCurrency,
|
||||
)
|
||||
const [preferredAsset, setPreferredAsset] = useLocalStorage<string>(
|
||||
LocalStorageKeys.PREFERRED_ASSET,
|
||||
DEFAULT_SETTINGS.preferredAsset,
|
||||
)
|
||||
const [reduceMotion, setReduceMotion] = useLocalStorage<boolean>(
|
||||
LocalStorageKeys.REDUCE_MOTION,
|
||||
DEFAULT_SETTINGS.reduceMotion,
|
||||
@ -79,22 +74,6 @@ export default function SettingsModal() {
|
||||
[displayCurrencies],
|
||||
)
|
||||
|
||||
const preferredAssetsOptions = useMemo(
|
||||
() =>
|
||||
assets.map((asset, index) => ({
|
||||
label: [
|
||||
<div className='flex w-full gap-2' key={index}>
|
||||
<AssetImage asset={asset} size={16} />
|
||||
<Text size='sm' className='leading-4'>
|
||||
{asset.symbol}
|
||||
</Text>
|
||||
</div>,
|
||||
],
|
||||
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
|
||||
/>
|
||||
<SettingsOptions
|
||||
label='Preferred asset'
|
||||
description='By selecting a different asset you always have the trading pair or asset selector
|
||||
pre-filled with this asset.'
|
||||
label='Display Currency'
|
||||
description='Convert all values to the selected asset/currency.'
|
||||
className='pb-6'
|
||||
>
|
||||
<Select
|
||||
label='Global'
|
||||
options={preferredAssetsOptions}
|
||||
defaultValue={preferredAsset}
|
||||
onChange={handlePreferredAsset}
|
||||
className='relative border w-60 rounded-base border-white/10'
|
||||
containerClassName='justify-end mb-4'
|
||||
/>
|
||||
<Select
|
||||
label='Display Currency'
|
||||
options={displayCurrenciesOptions}
|
||||
defaultValue={displayCurrency}
|
||||
onChange={handleDisplayCurrency}
|
||||
|
||||
@ -66,13 +66,13 @@ export const TVChartContainer = (props: Props) => {
|
||||
'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,
|
||||
|
||||
@ -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<Settings['tradingPair']>(
|
||||
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 (
|
||||
<div className='grid-rows-auto grid grid-cols-[1fr_min-content_1fr] gap-y-2 bg-white/5 p-3'>
|
||||
<Text size='sm'>Buy</Text>
|
||||
|
||||
@ -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 (
|
||||
<div
|
||||
@ -21,13 +19,7 @@ export default function TradeModule(props: Props) {
|
||||
'h-full',
|
||||
)}
|
||||
>
|
||||
<AssetSelector
|
||||
buyAsset={buyAsset}
|
||||
sellAsset={sellAsset}
|
||||
onChangeBuyAsset={onChangeBuyAsset}
|
||||
onChangeSellAsset={onChangeSellAsset}
|
||||
/>
|
||||
|
||||
<AssetSelector buyAsset={buyAsset} sellAsset={sellAsset} />
|
||||
<SwapForm buyAsset={buyAsset} sellAsset={sellAsset} />
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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',
|
||||
|
||||
@ -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<Settings['tradingPair']>(
|
||||
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 (
|
||||
<div className='flex flex-col w-full h-full gap-4'>
|
||||
<MigrationBanner />
|
||||
<div className='grid h-full w-full grid-cols-[346px_auto] gap-4'>
|
||||
<TradeModule
|
||||
buyAsset={buyAsset}
|
||||
sellAsset={sellAsset}
|
||||
onChangeBuyAsset={setBuyAsset}
|
||||
onChangeSellAsset={setSellAsset}
|
||||
/>
|
||||
<TradeModule buyAsset={buyAsset} sellAsset={sellAsset} />
|
||||
<TradeChart buyAsset={buyAsset} sellAsset={sellAsset} />
|
||||
<div />
|
||||
<AccountDetailsCard />
|
||||
|
||||
2
src/types/interfaces/store/settings.d.ts
vendored
2
src/types/interfaces/store/settings.d.ts
vendored
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user