Merge pull request #3228 from OlympusDAO/unstakeSOHMMyBalances

allow unwrapping sOHM from My Balances View
OlympusDAO · Oct 29, 2024 · cf91d13 · cf91d13
2 parents 5f1e9c7 + ded3322
commit cf91d13
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 7 deletions.
diff --git 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
             </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) && (

diff --git 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<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 })}