[Release] - Unwrap from sOHM, Cooler Metrics Network Requests

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<string | undefined>(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 <Zoom> is loading
           TabIndicatorProps={{ style: { display: "none" } }}
         >
-          <Tab label="Positions" href={`#/lending/cooler?${getSearchParamsWithTab(0)}`} />
-          <Tab label="Metrics" href={`#/lending/cooler?${getSearchParamsWithTab(1)}`} />
+          <Tab label="Positions" href={`#/lending/cooler?${getSearchParamsWithTab(0)}`} value="positions" />
+          <Tab label="Metrics" href={`#/lending/cooler?${getSearchParamsWithTab(1)}`} value="metrics" />
         </Tabs>
 
-        {tabIndex === 0 && <CoolerPositions />}
-        {tabIndex === 1 && <CoolerDashboard />}
+        {tabIndex === "positions" && <CoolerPositions />}
+        {tabIndex === "metrics" && <CoolerDashboard />}
       </Box>
     </div>
   );

src/views/MyBalances/MyOhmBalances.tsx

@@ -84,9 +84,14 @@ export const MyOhmBalances = () => {
               {Number(sOhmBalance.toString()).toFixed(4) || "0.00"} sOHM
             </Typography>
           </Box>
-          <Link component={RouterLink} to="/stake">
-            <SecondaryButton>Wrap</SecondaryButton>
-          </Link>
+          <div>
+            <Link component={RouterLink} to="/stake">
+              <SecondaryButton>Wrap</SecondaryButton>
+            </Link>
+            <Link component={RouterLink} to="/stake?unstake=true&token=sOHM">
+              <SecondaryButton>Unwrap</SecondaryButton>
+            </Link>
+          </div>
         </Box>
       )}
       {v1OhmBalance.gt(dust) && (

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<ModalHandleSelectProps>({ name: "gOHM" });
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [stakedAssetType, setStakedAssetType] = useState<ModalHandleSelectProps>({
+    name: searchParams.get("token") || "gOHM",
+  });
   const [swapAssetType, setSwapAssetType] = useState<ModalHandleSelectProps>({ 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 && (
               <TokenModal
                 open={tokenModalOpen}
-                handleSelect={name => (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 })}