diff --git a/src/views/Lending/Cooler/index.tsx b/src/views/Lending/Cooler/index.tsx index 2ce6653e18..2455a40fa8 100644 --- a/src/views/Lending/Cooler/index.tsx +++ b/src/views/Lending/Cooler/index.tsx @@ -1,4 +1,4 @@ -import { Box, Link, Tab, Tabs, useMediaQuery, useTheme } from "@mui/material"; +import { Box, Link, Tab, Tabs } from "@mui/material"; import { Icon } from "@olympusdao/component-library"; import { useEffect, useState } from "react"; import { Link as RouterLink, useSearchParams } from "react-router-dom"; @@ -10,19 +10,16 @@ import { CoolerPositions } from "src/views/Lending/Cooler/positions/Positions"; const PARAM_TAB = "tab"; export const Cooler = () => { - const theme = useTheme(); - const mobile = useMediaQuery(theme.breakpoints.down("sm")); - - const [tabIndex, setTabIndex] = useState(0); + const [tabIndex, setTabIndex] = useState(undefined); const [searchParams] = useSearchParams(); + const queryTab = searchParams.get(PARAM_TAB); // When the page loads, this causes the tab to be set to the correct value useEffect(() => { - const queryTab = searchParams.get(PARAM_TAB); - setTabIndex(queryTab ? (queryTab === "metrics" ? 1 : 0) : 0); - }, [searchParams]); + setTabIndex(queryTab === "metrics" ? "metrics" : "positions"); + }, [queryTab]); - const handleTabChange = (event: React.SyntheticEvent, newValue: number) => { + const handleTabChange = (event: React.SyntheticEvent, newValue: string) => { setTabIndex(newValue); }; @@ -63,12 +60,12 @@ export const Cooler = () => { //hides the tab underline sliding animation in while is loading TabIndicatorProps={{ style: { display: "none" } }} > - - + + - {tabIndex === 0 && } - {tabIndex === 1 && } + {tabIndex === "positions" && } + {tabIndex === "metrics" && } ); diff --git a/src/views/MyBalances/MyOhmBalances.tsx b/src/views/MyBalances/MyOhmBalances.tsx index 4a03fc8abb..fff716f50b 100644 --- a/src/views/MyBalances/MyOhmBalances.tsx +++ b/src/views/MyBalances/MyOhmBalances.tsx @@ -84,9 +84,14 @@ export const MyOhmBalances = () => { {Number(sOhmBalance.toString()).toFixed(4) || "0.00"} sOHM - - Wrap - +
+ + Wrap + + + Unwrap + +
)} {v1OhmBalance.gt(dust) && ( diff --git a/src/views/Stake/components/StakeArea/components/StakeInputArea/StakeInputArea.tsx b/src/views/Stake/components/StakeArea/components/StakeInputArea/StakeInputArea.tsx index 02156f92c5..fbf6ac1c7f 100644 --- a/src/views/Stake/components/StakeArea/components/StakeInputArea/StakeInputArea.tsx +++ b/src/views/Stake/components/StakeArea/components/StakeInputArea/StakeInputArea.tsx @@ -69,13 +69,15 @@ const StyledBox = styled(Box)(({ theme }) => ({ export const StakeInputArea: React.FC<{ isZoomed: boolean }> = props => { const networks = useTestableNetworks(); - const [stakedAssetType, setStakedAssetType] = useState({ name: "gOHM" }); + const [searchParams, setSearchParams] = useSearchParams(); + const [stakedAssetType, setStakedAssetType] = useState({ + name: searchParams.get("token") || "gOHM", + }); const [swapAssetType, setSwapAssetType] = useState({ name: "OHM" }); const { chain = { id: 1 } } = useNetwork(); const [tokenModalOpen, setTokenModalOpen] = useState(false); const [confirmationModalOpen, setConfirmationModalOpen] = useState(false); const wrapMutation = useWrapSohm(); - const [searchParams, setSearchParams] = useSearchParams(); const { data: needsRebase } = useCheckSecondsToNextEpoch(); const triggerRebase = useTriggerZeroDistributorRebase(); @@ -85,6 +87,7 @@ export const StakeInputArea: React.FC<{ isZoomed: boolean }> = props => { // Max balance stuff const [amount, setAmount] = useState(""); const [receiveAmount, setReceiveAmount] = useState(""); + const [targetToAsset, setTargetToAsset] = useState(false); const addresses = fromToken === "OHM" ? OHM_ADDRESSES : fromToken === "sOHM" ? SOHM_ADDRESSES : GOHM_ADDRESSES; const balance = useBalance(addresses)[networks.MAINNET].data; @@ -183,6 +186,8 @@ export const StakeInputArea: React.FC<{ isZoomed: boolean }> = props => { }; const GohmSwapCard = () => { + const dust = new DecimalBigNumber("0.000001", 9); + const balance = stakedAssetType.name === "sOHM" ? sOhmBalance : gOhmBalance; const tokenOnClick = sOhmBalance && !isStake ? { tokenOnClick: () => setTokenModalOpen(true) } : {}; @@ -192,6 +197,14 @@ export const StakeInputArea: React.FC<{ isZoomed: boolean }> = props => { inputProps={{ "data-testid": "staked-input", min: "0" }} token={stakedAssetType.name as OHMSwapCardProps["token"]} value={isStake ? receiveAmount : amount} + tokenOnClick={ + !isStake && sOhmBalance?.gt(dust) + ? () => { + setTargetToAsset(true); + setTokenModalOpen(true); + } + : undefined + } onChange={event => +event.target.value >= 0 && ohmOnChange(event.target.value, !isStake)} info={`Balance: ${balance ? balance.toString({ decimals: 2 }) : "0.00"} ${stakedAssetType.name}`} endString={!isStake ? "Max" : ""} @@ -219,8 +232,11 @@ export const StakeInputArea: React.FC<{ isZoomed: boolean }> = props => { {tokenModalOpen && ( (isStake ? setSwapAssetType(name) : setStakedAssetType(name))} - handleClose={() => setTokenModalOpen(false)} + handleSelect={name => (isStake && !targetToAsset ? setSwapAssetType(name) : setStakedAssetType(name))} + handleClose={() => { + setTokenModalOpen(false); + setTargetToAsset(false); + }} ohmBalance={ohmBalance && ohmBalance.toString({ decimals: 2 })} sOhmBalance={sOhmBalance && sOhmBalance.toString({ decimals: 2 })} gOhmBalance={gOhmBalance && gOhmBalance.toString({ decimals: 2 })}