Merge branch 'main' of github.com:chigozzdevv/spotnet into feat/Add-s…

…taking-page-for-desktop

docs/spotnet.md

@@ -100,14 +100,16 @@ assertions
 claim tokens from airdrop contract
 
 if treasury address is non-zero {
-    calculate and transfer 80% to treasury
+    calculate and transfer 50% to treasury
 }
 
 approve zkLend to spend remaining tokens
 
 deposit remaining tokens into zkLend
 
 enable STRK as collateral
+
+emit event
 ```
 
 The method can be called by anyone (e.g., a keeper) to claim rewards. If the treasury address is set to zero when deploying the contract, all claimed rewards will be deposited into zkLend on behalf of the user instead of being split with the treasury. This is intended behavior; sophisticated users wanting to bypass the functionality could deploy their modified contract anyway. This serves to avoid burning the STRK.
@@ -131,6 +133,26 @@ transfer tokens from caller to contract
 approve zkLend to spend the tokens
 
 deposit tokens into zkLend position
+
+emit event
+```
+
+### withdraw
+
+The `withdraw` method withdraws tokens from zkLend position and transfers them to the owner.
+
+Parameters
+* `token`: TokenAddress - token address to withdraw from zkLend
+* `amount`: TokenAmount - amount to withdraw. Pass `0` to withdraw all
+
+It's flow can be described as follows:
+
+```
+assertions(transaction started by the owner)
+
+withdraw tokens from zkLend and transfer to the owner
+
+emit event
 ```
 
 ## Important types, events and constants
@@ -170,7 +192,29 @@ struct PositionClosed {
     repaid_amount: TokenAmount
 }
 ```
+```
+#[derive(starknet::Event, Drop)]
+struct Withdraw {
+    token: ContractAddress,
+    amount: TokenAmount
+}
+```
+```
+#[derive(starknet::Event, Drop)]
+struct ExtraDeposit {
+    token: ContractAddress,
+    amount: TokenAmount,
+    depositor: ContractAddress
+}
+```
 
+```
+#[derive(starknet::Event, Drop)]
+struct RewardClaimed {
+    treasury_amount: TokenAmount,
+    user_amount: TokenAmount
+}
+```
 ### Constants
 * ZK_SCALE_DECIMALS is used for scaling down values obtained by multiplying on zklend collateral and borrow factors.
 * STRK_ADDRESS is the same across Sepolia and Mainnet.

frontend/src/components/ClosePositionModal/ClosePositionModal.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { createPortal } from 'react-dom';
+import './closePositionModal.css';
+import { Button } from 'components/ui/Button';
+
+export const ClosePositionModal = ({ isOpen, onClose, handleSubmit }) => {
+  if (!isOpen) return null;
+
+  return createPortal(
+    <div className="close-position-overlay">
+      <div className="close-position-wrapper">
+        <div className="close-position-box">
+          <div className="close-position-content">
+            <div className="close-position-title">Open New Position</div>
+            <h2>Do you want to open new a position?</h2>
+            <p>You have already opened a position.</p>
+            <p>Please close active position to open a new one. </p>
+            <p>Click the ‘Close Active Position’ button to continue.</p>
+          </div>
+          <div className="close-position-actions">
+            <Button variant="secondary" size="md" onClick={onClose}>
+              Cancel
+            </Button>
+            <Button variant="primary" size="md" onClick={handleSubmit}>
+              Close Active Position
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>,
+    document.body
+  );
+};

frontend/src/components/ClosePositionModal/closePositionModal.css

@@ -0,0 +1,160 @@
+.close-position-overlay {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--spinner-bgn);
+  z-index: 9999;
+}
+
+.close-position-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 800px;
+  width: 90%;
+  box-shadow: var(--primary-color);
+  overflow: hidden;
+}
+
+.close-position-box {
+  border-radius: 16px;
+  max-width: 642px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  text-align: center;
+}
+
+.close-position-content {
+  text-align: center;
+  padding: 24px;
+  border: var(--nav-divider-bg) 1px solid;
+  background-color: var(--header-button-bg);
+  border-radius: 48px;
+}
+
+.close-position-title {
+  color: var(--text-gray);
+  text-align: center;
+  font-size: 16px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  margin-bottom: 24px;
+}
+
+.close-position-content h2 {
+  color: var(--primary);
+  font-size: 24px;
+  font-weight: 500;
+  margin-bottom: 16px;
+  line-height: 1.3;
+}
+
+.close-position-content p {
+  color: var(--text-gray);
+  font-size: 14px;
+  line-height: 1.5;
+  max-width: 380px;
+  margin: 0 auto;
+}
+
+.close-position-actions {
+  display: flex;
+  gap: 16px;
+}
+
+.close-position-btn {
+  flex: 1;
+  padding: 20px 16px;
+  border-radius: 40px;
+  font-size: 16px;
+  font-weight: bold;
+  background-color: var(--plain-button-bg);
+  cursor: pointer;
+}
+
+.close-position-cancel-btn {
+  color: var(--primary);
+  position: relative;
+  border: none;
+}
+
+.close-position-cancel-btn::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 40px;
+  padding: 1px;
+  background: var(--button-gradient);
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+}
+
+.close-position-confirm-btn {
+  color: var(--primary);
+  background: var(--second-gradient);
+  border: none;
+}
+
+/* Mobile Styles */
+@media screen and (max-width: 768px) {
+  .close-position-content {
+    padding: 16px;
+    border-radius: 16px;
+  }
+
+  .close-position-wrapper {
+    max-width: 390px;
+    width: 100%;
+    padding: 20px;
+  }
+
+  .close-position-title {
+    font-size: 14px;
+    padding-block: 12px;
+    margin-bottom: 16px;
+  }
+
+  .close-position-content h2 {
+    font-size: 16px;
+    margin-bottom: 12px;
+  }
+
+  .close-position-content p {
+    font-size: 14px;
+    max-width: 320px;
+  }
+
+  .close-position-actions {
+    gap: 8px;
+  }
+
+  .close-position-btn {
+    padding: 20px 8px;
+    border-radius: 16px;
+    font-size: 14px;
+  }
+
+  .close-position-cancel-btn::before {
+    border-radius: 16px;
+  }
+
+  .close-position-confirm-btn {
+    font-size: 14px;
+  }
+}

frontend/src/components/TelegramNotificationModal/TelegramNotificationModal.jsx

@@ -5,14 +5,13 @@ import { useWalletStore } from 'stores/useWalletStore';
 import Button from 'components/ui/Button/Button';
 
 const TelegramNotificationModal = ({ onClose, telegramId }) => {
-        const { walletId } = useWalletStore();
-const { subscribe, isLoading } = useTelegramNotification();
-const handleSubscribe = () => {
+  const { walletId } = useWalletStore();
+  const { subscribe, isLoading } = useTelegramNotification();
+  const handleSubscribe = () => {
     subscribe({ telegramId, walletId });
   };
- return (
+  return (
     <div className="notification-overlay">
-      <div className="notification-backdrop" onClick={onClose} />
       <div className="notification-wrapper">
         <div className="notification-box">
           <div className="notification-content">

frontend/src/components/TelegramNotificationModal/telegramNotificationModal.css

@@ -11,14 +11,6 @@
   z-index: 9999;
 }
 
-.notification-backdrop {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-
 .notification-wrapper {
   display: flex;
   align-items: center;