[ShanaBoo] Show available margin in Add/Remove margin modal

solution.javascript

@@ -0,0 +1,23 @@
+--- a/src/components/AddRemoveMarginModal/AddRemoveMarginModal.js
++++ b/src/components/AddRemoveMarginModal/AddRemoveMarginModal.js
+@@ -12,16 +12,16 @@ class AddRemoveMarginModal extends Component {
+         <div>
+           <h3>Add/Remove Margin</h3>
+           <p>Current {action} margin: {formatCurrency(margin, { maximumFractionDigits: 2 })}</p>
+           <p>Available wallet balance: {formatCurrency(walletBalance, { maximumFractionDigits: 2 })}</p>
+         </div>
+@@ -35,7 +35,7 @@ class AddRemoveMarginModal extends Component {
+   render() {
+     const { action, margin, walletBalance, formatCurrency } = this.props;
+
+     return (
+       <div>
+         <h3>Add/Remove Margin</h3>
+-        <p>Current {action} margin: {formatCurrency(margin, { maximumFractionDigits: 2 })}</p>
+-        <p>Available wallet balance: {formatCurrency(walletBalance, { maximumFractionDigits: 2 })}</p>
++        <p>Available margin: {formatCurrency(walletBalance, { maximumFractionDigits: 2 })}</p>
++        <p>Current {action} margin: {formatCurrency(margin, { maximumFractionDigits: 2 })}</p>
++        <p>Available wallet balance: {formatCurrency(walletBalance, { maximumFractionDigits: 2 })}</p>
+       </div>
+     );
+   }

src/components/AddRemoveMarginModal.js

@@ -0,0 +1,21 @@
+import React, { useState, useEffect } from 'react';
+import { BigNumber, ethers } from 'ethers';
+
+const AddRemoveMargin = ({ positionManager, userAddress, token }) => {
+  // Your solution would go here
+  return (
+    <div>
+      <h3>Add/Remove Margin</h3>
+      <div>
+        {positionManager && (
+          <div>
+            <h4>Position: {positionManager.id}</h4>
+            <p>Wallet Balance: {positionManager.margin}</p>
+            <p>Available for removal: {positionManager.margin}</p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+export default AddRemoveMargin;

src/components/Trading/Modals/AddRemoveMarginModal.js

@@ -0,0 +1,2 @@
+    "private": "false"
+}

src/components/modals/AddRemoveMargin.svelte

@@ -0,0 +1,59 @@
+<script>
+	import { onMount } from 'svelte'
+	import { addMargin, removeMargin } from '../../lib/margin'
+	import { walletBalance } from '../../lib/wallet'
+	import { availableMarginToRemove } from '../../lib/positions'
+	import { toFixed } from '../../lib/utils'
+	import Modal from './Modal.svelte'
+
+	export let position = {}
+
+	let amount = ''
+	let walletBalanceValue = 0
+	let availableToRemove = 0
+
+	$: isAdding = type === 'add'
+	$: title = isAdding ? 'Add Margin' : 'Remove Margin'
+	onMount(async () => {
+		// Focus input
+		document.getElementById('margin-amount')?.focus()
+
+		// Get wallet balance for adding margin
+		if (isAdding) {
+			const unsubscribe = walletBalance.subscribe(value => {
+				walletBalanceValue = value
+			})
+			return () => unsubscribe()
+		} else {
+			// Get available margin to remove
+			availableToRemove = availableMarginToRemove(position)
+		}
+	})
+
+	async function handleSubmit() {
+		</div>
+	</div>
+
+	<div class='balance-info'>
+		{#if isAdding}
+			<span>Wallet Balance: {toFixed(walletBalanceValue, 6)}</span>
+		{:else}
+			<span>Available to Remove: {toFixed(availableToRemove, 6)}</span>
+		{/if}
+	</div>
+
+	<div class='buttons'>
+		<button type='button' class='primary' on:click={handleSubmit}>
+			{title}
+		font-size: 14px;
+		color: var(--text-secondary);
+	}
+	.balance-info {
+		margin-top: 12px;
+		font-size: 13px;
+		color: var(--text-secondary);
+		text-align: right;
+	}
+	.buttons {
+		margin-top: 20px;
+	}

src/lib/positions.js

@@ -0,0 +1,11 @@
+// Positions library
+
+export const positions = writable([])
+
+export function availableMarginToRemove(position) {
+	// Calculate available margin that can be removed
+	// This is the position's margin minus any required minimum margin
+	if (!position || !position.margin) return 0
+	const requiredMargin = position.size * 0.01 / position.leverage || 0
+	return Math.max(0, position.margin - requiredMargin)
+}

src/lib/wallet.js

@@ -0,0 +1,5 @@
+// Wallet library
+
+import { writable } from 'svelte/store'
+
+export const walletBalance = writable(0)