LaconicNetwork/mars-v2-frontend
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: wrong asset selector state on overlay close (#332)

Browse Source
This commit is contained in:
Yusuf Seyrek 2023-07-31 16:23:54 +03:00 committed by GitHub
parent 2611291028
commit 1b34cb77eb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/Trade/TradeModule/AssetSelector/index.tsx
View File

@ -15,23 +15,27 @@ interface Props {
export default function AssetSelector(props: Props) { export default function AssetSelector(props: Props) {
const { buyAsset, sellAsset, onChangeBuyAsset, onChangeSellAsset } = props const { buyAsset, sellAsset, onChangeBuyAsset, onChangeSellAsset } = props
const [overlayState, setOverlayState] = useState<OverlayState>('closed') const [overlayState, setOverlayState] = useState<OverlayState>('closed')
const [cachedBuyAsset, setCachedBuyAsset] = useState<Asset>(props.buyAsset)
const [cachedSellAsset, setCachedSellAsset] = useState<Asset>(props.sellAsset)
const handleSwapAssets = useCallback(() => { const handleSwapAssets = useCallback(() => {
onChangeBuyAsset(sellAsset) onChangeBuyAsset(sellAsset)
onChangeSellAsset(buyAsset) onChangeSellAsset(buyAsset)
}, [onChangeBuyAsset, onChangeSellAsset, sellAsset, buyAsset]) }, [onChangeBuyAsset, onChangeSellAsset, sellAsset, buyAsset])
const handleChangeBuyAsset = useCallback((asset: Asset) => { const handleChangeBuyAsset = useCallback(
setCachedBuyAsset(asset) (asset: Asset) => {
setOverlayState('sell') onChangeBuyAsset(asset)
}, []) setOverlayState('sell')
},
[onChangeBuyAsset],
)
const handleChangeSellAsset = useCallback((asset: Asset) => { const handleChangeSellAsset = useCallback(
setCachedSellAsset(asset) (asset: Asset) => {
setOverlayState('closed') onChangeSellAsset(asset)
}, []) setOverlayState('closed')
},
[onChangeSellAsset],
)
const handleChangeState = useCallback( const handleChangeState = useCallback(
(state: OverlayState) => { (state: OverlayState) => {
@ -42,10 +46,10 @@ export default function AssetSelector(props: Props) {
useEffect(() => { useEffect(() => {
if (overlayState === 'closed') { if (overlayState === 'closed') {
onChangeBuyAsset(cachedBuyAsset) onChangeBuyAsset(buyAsset)
onChangeSellAsset(cachedSellAsset) onChangeSellAsset(sellAsset)
} }
}, [onChangeBuyAsset, onChangeSellAsset, overlayState, cachedBuyAsset, cachedSellAsset]) }, [onChangeBuyAsset, onChangeSellAsset, overlayState, buyAsset, sellAsset])
return ( return (
<div className='grid-rows-auto relative grid grid-cols-[1fr_min-content_1fr] gap-y-2 bg-white/5 p-3'> <div className='grid-rows-auto relative grid grid-cols-[1fr_min-content_1fr] gap-y-2 bg-white/5 p-3'>
@ -53,16 +57,16 @@ export default function AssetSelector(props: Props) {
<Text size='sm' className='col-start-3'> <Text size='sm' className='col-start-3'>
Sell Sell
</Text> </Text>
<AssetButton onClick={() => setOverlayState('buy')} asset={props.buyAsset} /> <AssetButton onClick={() => setOverlayState('buy')} asset={buyAsset} />
<button onClick={handleSwapAssets}> <button onClick={handleSwapAssets}>
<SwapIcon className='mx-2 w-4 place-self-center' /> <SwapIcon className='mx-2 w-4 place-self-center' />
</button> </button>
<AssetButton onClick={() => setOverlayState('sell')} asset={props.sellAsset} /> <AssetButton onClick={() => setOverlayState('sell')} asset={sellAsset} />
<AssetOverlay <AssetOverlay
state={overlayState} state={overlayState}
onChangeState={handleChangeState} onChangeState={handleChangeState}
buyAsset={cachedBuyAsset} buyAsset={buyAsset}
sellAsset={cachedSellAsset} sellAsset={sellAsset}
onChangeBuyAsset={handleChangeBuyAsset} onChangeBuyAsset={handleChangeBuyAsset}
onChangeSellAsset={handleChangeSellAsset} onChangeSellAsset={handleChangeSellAsset}
/> />