Repository: vultisig/launch-web
Pull request #31: Delete-tx-history-max-allo
Author: login: realpaaao
Created: 2025-03-31T21:08:00Z | Merged: 2025-04-12T17:15:17Z

Added TX history deletion feature and max allocation of asset.

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Added a clear history option in the transaction view.
  - Enabled full balance allocation with gas fee considerations via an interactive balance display.

- **Style**
  - Enhanced visual styling with updated headers, buttons, and hover effects for improved interactivity.
  - Introduced new classes for clickable balance displays and improved text emphasis.

- **Localization**
  - Updated English text for amounts, prompts, and alerts to ensure clear user guidance.

- **Icons**
  - Refreshed wallet visuals and introduced a new trash icon for better visual cues.

- **Chores**
  - Added `.windsurfrules` to `.gitignore` to exclude specific files from version control.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->


Diff:
diff --git a/.gitignore b/.gitignore
index c925c21..29d51e3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 /dist
 /node_modules
+.windsurfrules
diff --git a/src/components/swap-history/index.scss b/src/components/swap-history/index.scss
index 0922c23..7d54b8e 100644
--- a/src/components/swap-history/index.scss
+++ b/src/components/swap-history/index.scss
@@ -5,6 +5,30 @@
   flex-direction: column;
   gap: rem(12);
 
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .button {
+    cursor: pointer;
+    display: block;
+
+    svg {
+      stroke: $text-primary;
+      transition: all 0.2s;
+      height: rem(16);
+      width: rem(16);
+    }
+
+    &:hover {
+      svg {
+        stroke: $alert-error;
+      }
+    }
+  }
+
   .ant-spin {
     .ant-spin-dot-item {
       background-color: $alert-warning;
diff --git a/src/components/swap-history/index.tsx b/src/components/swap-history/index.tsx
index 2f2f6e1..5ff57b9 100644
--- a/src/components/swap-history/index.tsx
+++ b/src/components/swap-history/index.tsx
@@ -11,9 +11,9 @@ import useSwapHistory from "hooks/swap-history";
 import useSwapVult from "hooks/swap";
 import constantKeys from "i18n/constant-keys";
 
-import { ChevronRight, CircleCheckBig, OctagonAlert } from "icons";
+import { ChevronRight, CircleCheckBig, OctagonAlert, Trash } from "icons";
 import MiddleTruncate from "components/middle-truncate";
-import { Spin } from "antd";
+import { Empty, Spin, Tooltip } from "antd";
 
 const Transaction: FC<{ address: string; transaction: TransactionProps }> = ({
   address,
@@ -112,14 +112,31 @@ const Transaction: FC<{ address: string; transaction: TransactionProps }> = ({
 const Component: FC = () => {
   const { t } = useTranslation();
   const { address = "", isConnected } = useAccount();
-  const { transactions } = useSwapHistory();
+  const { transactions, clearHistory } = useSwapHistory();
 
   return isConnected ? (
     <div className="swap-history">
-      <span className="heading">{t(constantKeys.TRANSACTIONS)}</span>
-      {transactions.map((transaction, index) => (
-        <Transaction key={index} address={address} transaction={transaction} />
-      ))}
+      <div className="header">
+        <span className="heading">{t(constantKeys.TRANSACTIONS)}</span>
+        {transactions.length > 0 && (
+          <Tooltip title={t(constantKeys.CLEAR_HISTORY)}>
+            <span className="button" onClick={clearHistory}>
+              <Trash />
+            </span>
+          </Tooltip>
+        )}
+      </div>
+      {transactions.length > 0 ? (
+        transactions.map((transaction) => (
+          <Transaction
+            key={transaction.hash}
+            address={address}
+            transaction={transaction}
+          />
+        ))
+      ) : (
+        <Empty description={t(constantKeys.NO_TRANSACTIONS_FOUND)} />
+      )}
     </div>
   ) : null;
 };
diff --git a/src/components/swap-vult/index.scss b/src/components/swap-vult/index.scss
index bdf9953..eadec62 100644
--- a/src/components/swap-vult/index.scss
+++ b/src/components/swap-vult/index.scss
@@ -138,6 +138,18 @@
           color: $text-extra-light;
           line-height: rem(14);
         }
+        
+        .available-balance {
+          cursor: pointer;
+          
+          &.clickable:hover {
+            color: $text-light;
+          }
+          
+          .balance-amount {
+            font-weight: bold;
+          }
+        }
       }
     }
 
diff --git a/src/components/swap-vult/index.tsx b/src/components/swap-vult/index.tsx
index 634e8f6..94f84b6 100644
--- a/src/components/swap-vult/index.tsx
+++ b/src/components/swap-vult/index.tsx
@@ -1,7 +1,7 @@
 import { FC, useState } from "react";
 import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { Form, Input, InputNumber, Spin } from "antd";
+import { Form, Input, InputNumber, Spin, Tooltip, message } from "antd";
 import { debounce } from "lodash";
 import { useAccount } from "wagmi";
 
@@ -30,6 +30,7 @@ interface InitialState {
 
 const Component: FC = () => {
   const { t } = useTranslation();
+  const [messageApi, contextHolder] = message.useMessage();
   const initialState: InitialState = {
     maxNetworkFee: 0,
     poolPrice: 0,
@@ -183,6 +184,47 @@ const Component: FC = () => {
     }
   };
 
+  const handleUseFullAmount = (ticker: TickerKey) => {
+    if (!loading && isConnected) {
+      let fullAmount = tokens[ticker].balance;
+      
+      // If the token is ETH, we need to reserve some for gas fees
+      if (ticker === TickerKey.ETH) {
+        // Get max network fee using the existing function
+        const estimatedGasFeeInCurrency = getMaxNetworkFee(1);
+        const ethValuePerUnit = values?.[TickerKey.ETH] || 1;
+        const estimatedGasFeeEth = estimatedGasFeeInCurrency / ethValuePerUnit;
+        
+        // Add a 10% buffer to ensure we have enough for gas fluctuations
+        const gasFeeWithBuffer = estimatedGasFeeEth * 1.1;
+        
+        // If balance is too low, set amount to 0 and show a warning
+        if (fullAmount > gasFeeWithBuffer) {
+          fullAmount -= gasFeeWithBuffer;
+        } else {
+          // Show warning message to the user
+          messageApi.warning(t(constantKeys.INSUFFICIENT_BALANCE) + ". " + 
+                         t(constantKeys.PLEASE_ADD_MORE_ETH_FOR_GAS));
+          // Set the amount to 0
+          fullAmount = 0;
+        }
+      }
+      
+      // Round to 6 decimal places to avoid floating point precision issues
+      fullAmount = Math.floor(fullAmount * 1000000) / 1000000;
+      
+      form.setFieldValue("allocateAmount", fullAmount);
+      form.setFieldValue("buyAmount", undefined);
+      
+      handleUpdateQuote(
+        ticker,
+        form.getFieldValue("buyToken"),
+        fullAmount,
+        false
+      );
+    }
+  };
+
   const handleUpdateQuote = (
     tickerA: TickerKey,
     tickerB: TickerKey,
@@ -230,6 +272,7 @@ const Component: FC = () => {
 
   return (
     <>
+      {contextHolder}
       <Settings onClose={handleMode} visible={settingsMode} />
       <Form
         form={form}
@@ -280,7 +323,14 @@ const Component: FC = () => {
                     <div className="price">
                       <span>{(amount * value).toPriceFormat(currency)}</span>
                       {isConnected && (
-                        <span>{tokens[ticker].balance.toBalanceFormat()}</span>
+                        <Tooltip title={t(constantKeys.CLICK_TO_USE_FULL_AMOUNT)}>
+                          <span 
+                            className="available-balance clickable"
+                            onClick={() => handleUseFullAmount(ticker)}
+                          >
+                            {t(constantKeys.AVAILABLE)}: <span className="balance-amount">{tokens[ticker].balance.toBalanceFormat()}</span>
+                          </span>
+                        </Tooltip>
                       )}
                     </div>
                   </>
@@ -324,12 +374,12 @@ const Component: FC = () => {
                         onChange={(value) => handleChangeToken(value, true)}
                       />
                     </div>
-                    <span className="price">
+                    <div className="price">
                       <span>{(amount * value).toPriceFormat(currency)}</span>
                       {isConnected && (
-                        <span>{tokens[ticker].balance.toBalanceFormat()}</span>
+                        <span>{t(constantKeys.AMOUNT)}: {tokens[ticker].balance.toBalanceFormat()}</span>
                       )}
-                    </span>
+                    </div>
                   </>
                 );
               }}
diff --git a/src/hooks/swap-history.ts b/src/hooks/swap-history.ts
index 86f8c9f..495d80a 100644
--- a/src/hooks/swap-history.ts
+++ b/src/hooks/swap-history.ts
@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { useAccount } from "wagmi";
 
 import { TransactionProps } from "utils/interfaces";
-import { getStoredTransactions } from "utils/storage";
+import { getStoredTransactions, setStoredTransactions } from "utils/storage";
 
 let interval: NodeJS.Timeout;
 
@@ -36,9 +36,16 @@ const useSwapHistory = () => {
     }
   };
 
+  const clearHistory = (): void => {
+    if (address) {
+      setStoredTransactions(address, []);
+      setState((prevState) => ({ ...prevState, transactions: [] }));
+    }
+  };
+
   useEffect(componentDidUpdate, [address]);
 
-  return { transactions };
+  return { transactions, clearHistory };
 };
 
 export default useSwapHistory;
diff --git a/src/i18n/constant-keys.ts b/src/i18n/constant-keys.ts
index e3d6010..eb0f1b6 100644
--- a/src/i18n/constant-keys.ts
+++ b/src/i18n/constant-keys.ts
@@ -3,12 +3,15 @@ import keyMirror from "keymirror";
 export default keyMirror({
   // A
   ADVANCED: true,
+  AMOUNT: true,
   APPROVE: true,
   AVAILABLE: true,
   // B
   BASIC: true,
   BRIDGE: true,
   // C
+  CLEAR_HISTORY: true,
+  CLICK_TO_USE_FULL_AMOUNT: true,
   CONFIRM: true,
   CONNECT_WALLET: true,
   CONNECTED_WALLET: true,
@@ -44,11 +47,13 @@ export default keyMirror({
   MIN_RECEIVED: true,
   // N
   NETWORK_FEE_EST: true,
+  NO_TRANSACTIONS_FOUND: true,
   NOT_WHITELISTED: true,
   // O
   // P
   PENDING: true,
   PER_HOUR: true,
+  PLEASE_ADD_MORE_ETH_FOR_GAS: true,
   POOL: true,
   PRICE: true,
   PRICE_IMPACT: true,
diff --git a/src/i18n/locales/en_UK.ts b/src/i18n/locales/en_UK.ts
index 7640bc3..99a0644 100644
--- a/src/i18n/locales/en_UK.ts
+++ b/src/i18n/locales/en_UK.ts
@@ -3,12 +3,15 @@ import translation from "i18n/constant-keys";
 export default {
   // A
   [translation.ADVANCED]: "Advanced",
+  [translation.AMOUNT]: "Amount",
   [translation.APPROVE]: "Approve",
   [translation.AVAILABLE]: "Available",
   // B
   [translation.BASIC]: "Basic",
   [translation.BRIDGE]: "Bridge",
   // C
+  [translation.CLICK_TO_USE_FULL_AMOUNT]: "Click to use full amount",
+  [translation.CLEAR_HISTORY]: "Clear history",
   [translation.CONFIRM]: "Confirm",
   [translation.CONNECT_WALLET]: "Connect Wallet",
   [translation.CONNECTED_WALLET]: "Connected Wallet",
@@ -44,11 +47,14 @@ export default {
   [translation.MIN_RECEIVED]: "Min Received",
   // N
   [translation.NETWORK_FEE_EST]: "Network Fee (est)",
+  [translation.NO_TRANSACTIONS_FOUND]: "No transactions found",
   [translation.NOT_WHITELISTED]: "You are not whitelisted",
   // O
   // P
   [translation.PENDING]: "Pending",
   [translation.PER_HOUR]: "Per Hour",
+  [translation.PLEASE_ADD_MORE_ETH_FOR_GAS]:
+    "Please add more ETH to your wallet for gas fees",
   [translation.POOL]: "Pool",
   [translation.PRICE]: "Price",
   [translation.PRICE_IMPACT]: "Price Impact",
@@ -59,7 +65,7 @@ export default {
   // S
   [translation.SAVE]: "Save",
   [translation.SEARCH_ADDRESS]: "Search Address",
-  [translation.SEARCH_TITLE]:"Check Whitelist eligibility",
+  [translation.SEARCH_TITLE]: "Check Whitelist eligibility",
   [translation.SETTINGS]: "Settings",
   [translation.SLOW]: "Slow",
   [translation.SLIPPAGE]: "Slippage",
diff --git a/src/icons/index.tsx b/src/icons/index.tsx
index 1cdcf00..5e6a27d 100644
--- a/src/icons/index.tsx
+++ b/src/icons/index.tsx
@@ -699,6 +699,35 @@ export const Wallet: FC<SVGProps<SVGSVGElement>> = ({
       width,
     }}
   >
-    <path d="M19 7V4C19 3.73478 18.8946 3.48043 18.7071 3.29289C18.5196 3.10536 18.2652 3 18 3H5C4.46957 3 3.96086 3.21071 3.58579 3.58579C3.21071 3.96086 3 4.46957 3 5M3 5C3 5.53043 3.21071 6.03914 3.58579 6.41421C3.96086 6.78929 4.46957 7 5 7H20C20.2652 7 20.5196 7.10536 20.7071 7.29289C20.8946 7.48043 21 7.73478 21 8V12M3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H20C20.2652 21 20.5196 20.8946 20.7071 20.7071C20.8946 20.5196 21 20.2652 21 20V16M21 12H18C17.4696 12 16.9609 12.2107 16.5858 12.5858C16.2107 12.9609 16 13.4696 16 14C16 14.5304 16.2107 15.0391 16.5858 15.4142C16.9609 15.7893 17.4696 16 18 16H21M21 12C21.2652 12 21.5196 12.1054 21.7071 12.2929C21.8946 12.4804 22 12.7348 22 13V15C22 15.2652 21.8946 15.5196 21.7071 15.7071C21.5196 15.8946 21.2652 16 21 16" />
+<path d="M19 7V4C19 3.73478 18.8946 3.48043 18.7071 3.29289C18.5196 3.10536 18.2652 3 18 3H5C4.46957 3 3.96086 3.21071 3.58579 3.58579C3.21071 3.96086 3 4.46957 3 5M3 5C3 5.53043 3.21071 6.03914 3.58579 6.41421C3.96086 6.78929 4.46957 7 5 7H20C20.2652 7 20.5196 7.10536 20.7071 7.29289C20.8946 7.48043 21 7.73478 21 8V12M3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H20C20.2652 21 20.5196 20.8946 20.7071 20.7071C20.8946 20.5196 21 20.2652 21 20V16M21 12H18C17.4696 12 16.9609 12.2107 16.5858 12.5858C16.2107 12.9609 16 13.4696 16 14C16 14.5304 16.2107 15.0391 16.5858 15.4142C16.9609 15.7893 17.4696 16 18 16H21M21 12C21.2652 12 21.5196 12.1054 21.7071 12.2929C21.8946 12.4804 22 12.7348 22 13V15C22 15.2652 21.8946 15.5196 21.7071 15.7071C21.5196 15.8946 21.2652 16 21 16" />
+  </svg>
+);
+
+export const Trash: FC<SVGProps<SVGSVGElement>> = ({
+  fill = "none",
+  height = 24,
+  stroke = "white",
+  strokeLinecap = "round",
+  strokeLinejoin = "round",
+  strokeWidth = 2,
+  width = 24,
+  ...props
+}) => (
+  <svg
+    viewBox="0 0 24 24"
+    {...{
+      ...props,
+      fill,
+      height,
+      stroke,
+      strokeLinecap,
+      strokeLinejoin,
+      strokeWidth,
+      width,
+    }}
+  >
+    <path 
+      d="M3 6H21M19 6V20C19 21 18 22 17 22H7C6 22 5 21 5 20V6M8 6V4C8 3 9 2 10 2H14C15 2 16 3 16 4V6M10 11V17M14 11V17" 
+    />
   </svg>
 );


Reviews:
user: login: coderabbitai[bot]
body: **Actionable comments posted: 0**

<details>
<summary>🧹 Nitpick comments (2)</summary><blockquote>

<details>
<summary>src/hooks/swap-history.ts (1)</summary><blockquote>

`39-44`: **Add return type to function for better type safety.**

The `clearHistory` function implementation looks good, but adding a return type would improve code clarity and type safety.


```diff
-  const clearHistory = () => {
+  const clearHistory = (): void => {
    if (address) {
      clearStoredTransactions(address);
      setState((prevState) => ({ ...prevState, transactions: [] }));
    }
  };
```

</blockquote></details>
<details>
<summary>src/utils/storage.ts (1)</summary><blockquote>

`156-172`: **Add documentation and optimize localStorage writes.**

The function is well-implemented with proper error handling, but could be improved in a few ways:

1. Add JSDoc documentation to describe the function's purpose and parameters
2. Check if the array is already empty before updating localStorage
3. Consider adding logging for errors during parsing



```diff
+/**
+ * Clears all stored transactions for a specific wallet address
+ * @param address The wallet address whose transactions should be cleared
+ */
 export const clearStoredTransactions = (address: string): void => {
   const data = localStorage.getItem(storageKey.TRANSACTIONS);
   let wallets: Record<string, TransactionProps[]>;

   try {
     if (data) {
       wallets = JSON.parse(data);
       
-      if (wallets[address]) {
+      if (wallets[address] && wallets[address].length > 0) {
         wallets[address] = [];
         localStorage.setItem(storageKey.TRANSACTIONS, JSON.stringify(wallets));
       }
     }
-  } catch {
+  } catch (error) {
     // If there's an error parsing the data, do nothing
+    console.error("Error clearing stored transactions:", error);
   }
 };
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between b49723ce167271fe465d8c7a42c2cbfa039825cd and 3e52286652cbbfb43e3a7bdbf75e2b1876cc6133.

</details>

<details>
<summary>📒 Files selected for processing (6)</summary>

* `.gitignore` (1 hunks)
* `src/components/swap-history/index.scss` (1 hunks)
* `src/components/swap-history/index.tsx` (1 hunks)
* `src/components/swap-vult/index.tsx` (3 hunks)
* `src/hooks/swap-history.ts` (2 hunks)
* `src/utils/storage.ts` (1 hunks)

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🧬 Code Definitions (2)</summary>

<details>
<summary>src/hooks/swap-history.ts (1)</summary><blockquote>

<details>
<summary>src/utils/storage.ts (1)</summary>

* `clearStoredTransactions` (156-172)

</details>

</blockquote></details>
<details>
<summary>src/utils/storage.ts (1)</summary><blockquote>

<details>
<summary>src/utils/interfaces.ts (1)</summary>

* `TransactionProps` (44-48)

</details>

</blockquote></details>

</details>

</details>

<details>
<summary>🔇 Additional comments (12)</summary><blockquote>

<details>
<summary>.gitignore (1)</summary>

`3-3`: **LGTM: Addition to gitignore.**

Adding `.windsurfrules` to the gitignore file is appropriate for excluding this file from version control.

</details>
<details>
<summary>src/hooks/swap-history.ts (2)</summary>

`5-5`: **Import statement updated correctly.**

The import statement has been properly updated to include the new `clearStoredTransactions` function.

---

`48-48`: **Return value updated correctly.**

The hook's return value has been properly updated to include the new `clearHistory` function.

</details>
<details>
<summary>src/components/swap-history/index.scss (3)</summary>

`8-12`: **LGTM: Good layout structure.**

The flex layout with space-between and aligned items is a clean way to structure the history header.

---

`14-35`: **Button styling follows good practices.**

The clear history button styling is well-implemented with:
- Appropriate hover and focus states for better accessibility
- Consistent use of variables for colors
- Smooth transition for interaction feedback

The use of the error color is appropriate for a destructive action like clearing history.

---

`37-42`: **LGTM: No-transactions message styling.**

The styling for the empty state message is clean and consistent with the rest of the application design.

</details>
<details>
<summary>src/components/swap-history/index.tsx (3)</summary>

`115-115`: **Good update to access the new clearHistory function.**

The code now correctly destructures both `transactions` and the new `clearHistory` function from the `useSwapHistory` hook, allowing the component to utilize the history clearing functionality.

---

`119-144`: **Nice UI enhancement with accessible clear history button.**

The implementation of the header with a conditional clear history button follows good practices:
- The button only appears when there are transactions to clear
- Proper aria-label is provided for accessibility
- Clear visual indicator with an SVG icon
- Clean integration with the clearHistory function

---

`145-153`: **Good user experience improvement with conditional rendering.**

The conditional rendering provides better feedback to users by showing a "No transactions found" message when the transaction list is empty, rather than displaying an empty space.

</details>
<details>
<summary>src/components/swap-vult/index.tsx (3)</summary>

`186-200`: **Well-implemented "use full amount" function.**

The `handleUseFullAmount` function correctly:
- Checks for appropriate conditions (not loading and user is connected)
- Retrieves the full token balance
- Updates the form fields appropriately
- Triggers quote update with the new amount

This provides a valuable user experience enhancement by allowing users to quickly allocate their entire token balance.

---

`299-305`: **Good UX enhancement with clickable balance.**

Making the available balance clickable with appropriate visual cues:
- Cursor pointer style indicates interactivity
- Helpful tooltip explains the action
- Bold formatting emphasizes the balance value
- Clear "Available:" label improves understanding

This change makes the "use full amount" functionality discoverable and intuitive.

---

`349-354`: **Semantic improvement to price display.**

Changing from a `<span>` to a `<div>` for price information provides better semantic structure. The label update to "Amount:" in the buy section also improves clarity for users.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-03-31T21:11:45Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 0**

<details>
<summary>🧹 Nitpick comments (2)</summary><blockquote>

<details>
<summary>src/utils/storage.ts (2)</summary><blockquote>

`167-167`: **Consider removing this empty line for consistency.**

Other sections of the file don't have extra blank lines between logical blocks in the same function.

```diff
    if (data) {
      wallets = JSON.parse(data);
-      
      if (wallets[address] && wallets[address].length > 0) {
```

---

`168-171`: **Consider simplifying the conditional storage update.**

The current code only updates localStorage if the address exists and has transactions. However, you could simplify this to always update when the address exists, regardless of whether it has transactions or not.

```diff
-      if (wallets[address] && wallets[address].length > 0) {
+      if (wallets[address]) {
        wallets[address] = [];
        localStorage.setItem(storageKey.TRANSACTIONS, JSON.stringify(wallets));
      }
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 3e52286652cbbfb43e3a7bdbf75e2b1876cc6133 and 5e57e764cf6bc8368ddd08b7155ab539bf31166a.

</details>

<details>
<summary>📒 Files selected for processing (2)</summary>

* `src/hooks/swap-history.ts` (2 hunks)
* `src/utils/storage.ts` (1 hunks)

</details>

<details>
<summary>🚧 Files skipped from review as they are similar to previous changes (1)</summary>

* src/hooks/swap-history.ts

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🧬 Code Definitions (1)</summary>

<details>
<summary>src/utils/storage.ts (1)</summary><blockquote>

<details>
<summary>src/utils/interfaces.ts (1)</summary>

* `TransactionProps` (44-48)

</details>

</blockquote></details>

</details>

</details>

<details>
<summary>🔇 Additional comments (1)</summary><blockquote>

<details>
<summary>src/utils/storage.ts (1)</summary>

`156-177`: **Well-structured transaction clearing implementation.**

The function properly retrieves transactions from localStorage, safely parses the JSON data, and conditionally clears transactions for the specified address. Good error handling practices with appropriate console logging.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-01T08:45:05Z
user: login: Ehsan-saradar
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-01T08:59:10Z
user: login: Ehsan-saradar
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-01T09:00:49Z
user: login: Ehsan-saradar
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-01T09:06:26Z
user: login: Ehsan-saradar
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-01T09:12:38Z
user: login: realpaaao
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-04-01T09:44:16Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 1**

<details>
<summary>🔭 Outside diff range comments (1)</summary><blockquote>

<details>
<summary>src/i18n/locales/en_UK.ts (1)</summary><blockquote>

`3-85`: _💡 Verification agent_

<details>
<summary>🧩 Analysis chain</summary>

**Verify all new translation keys are included.**

While you've added the translation for `NO_TRANSACTIONS_FOUND`, please verify if the other new keys mentioned in the AI summary (`CLEAR_HISTORY` and `CLICK_TO_USE_FULL_AMOUNT`) also need translations in this locale file to ensure all UI elements display properly.

---

🏁 Script executed:

```shell
#!/bin/bash
# Check for new translation keys in the constants file
grep -n "CLEAR_HISTORY\|CLICK_TO_USE_FULL_AMOUNT" src/i18n/constant-keys.ts

# See where these keys might be used in the codebase
grep -r "CLEAR_HISTORY\|CLICK_TO_USE_FULL_AMOUNT" --include="*.tsx" --include="*.ts" src/
```

Length of output: 639

---



</details>

**Action Required: Add Missing Translations for New Keys**

- The keys `CLEAR_HISTORY` and `CLICK_TO_USE_FULL_AMOUNT` are defined in `src/i18n/constant-keys.ts` and are used in components (e.g., in `src/components/swap-history/index.tsx` and `src/components/swap-vult/index.tsx`).
- These keys are currently missing from the `src/i18n/locales/en_UK.ts` file.
- Please add appropriate translation strings for both keys to ensure all UI elements are displaying the correct text.

</blockquote></details>

</blockquote></details>

<details>
<summary>🧹 Nitpick comments (2)</summary><blockquote>

<details>
<summary>src/components/swap-vult/index.tsx (2)</summary><blockquote>

`323-330`: **Use a button-like element or accessible component for better UX.**

Currently, a `<span>` is being used with inline `onClick` and `cursor: pointer`. For improved accessibility and consistency, consider using a button or another clickable component from Ant Design to align with the rest of the UI and ensure screen readers properly register this element as clickable.


```diff
-<span 
-  onClick={() => handleUseFullAmount(ticker)}
-  style={{ cursor: 'pointer' }}
->
+<button
+  type="button"
+  className="use-full-amount"
+  onClick={() => handleUseFullAmount(ticker)}
+>
```

---

`374-379`: **Localize and rename the "Amount" label to maintain consistency.**

The label "Amount:" here is not translated, and in the other section, you're using "Available:". For a more unified user experience and adherence to i18n standards, consider renaming and using a translation key for consistency.


```diff
- <span>Amount: {tokens[ticker].balance.toBalanceFormat()}</span>
+ <span>{t(constantKeys.AVAILABLE)}: {tokens[ticker].balance.toBalanceFormat()}</span>
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 94020292cbe7c62e5ccbcefb70a73a1eedaaa866 and f3165775343269480f76ccb45280bdedc3e36eee.

</details>

<details>
<summary>📒 Files selected for processing (5)</summary>

* `src/components/swap-history/index.scss` (1 hunks)
* `src/components/swap-history/index.tsx` (2 hunks)
* `src/components/swap-vult/index.tsx` (4 hunks)
* `src/i18n/constant-keys.ts` (2 hunks)
* `src/i18n/locales/en_UK.ts` (1 hunks)

</details>

<details>
<summary>🚧 Files skipped from review as they are similar to previous changes (3)</summary>

* src/i18n/constant-keys.ts
* src/components/swap-history/index.tsx
* src/components/swap-history/index.scss

</details>

<details>
<summary>🔇 Additional comments (2)</summary><blockquote>

<details>
<summary>src/i18n/locales/en_UK.ts (1)</summary>

`47-47`: **Appropriately added missing translation key.**

This addresses the mentioned feedback about adding the missing translation key for the "no transactions found" message, which is displayed when no transaction history is available.

</details>
<details>
<summary>src/components/swap-vult/index.tsx (1)</summary>

`4-4`: **No concerns with the new import statement.**

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-03T10:46:41Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 0**

<details>
<summary>🧹 Nitpick comments (3)</summary><blockquote>

<details>
<summary>src/components/swap-vult/index.tsx (3)</summary><blockquote>

`186-226`: **The handleUseFullAmount implementation looks good, with small improvement opportunities.**

The function effectively handles setting the maximum token amount while accounting for gas fees when ETH is selected. The 10% buffer for gas fees and user warning for insufficient ETH balance are good practices.


Consider these minor improvements:
1. Reuse the existing `getMaxNetworkFee` function instead of reimplementing the calculation
2. Move the inline logic to helper functions for better readability

```diff
  const handleUseFullAmount = (ticker: TickerKey) => {
    if (!loading && isConnected) {
      let fullAmount = tokens[ticker].balance;
      
      // If the token is ETH, we need to reserve some for gas fees
      if (ticker === TickerKey.ETH) {
-        // Calculate the estimated gas fee in ETH using the same formula as getMaxNetworkFee
-        const maxFeeEth = gasSettings.maxFee * 1e-9; // Convert Gwei to ETH
-        const maxPriorityFeeEth = gasSettings.maxPriorityFee * 1e-9;
-        
-        // Calculate max network fee in ETH (same formula as getMaxNetworkFee)
-        const estimatedGasFeeEth = (maxFeeEth + maxPriorityFeeEth) * gasSettings.gasLimit;
+        // Get max network fee using the existing function
+        const estimatedGasFeeEth = getMaxNetworkFee(1) / values?.[TickerKey.ETH] || 0;
        
        // Add a 10% buffer to ensure we have enough for gas fluctuations
        const gasFeeWithBuffer = estimatedGasFeeEth * 1.1;
```

---

`325-332`: **Good UX improvement for available balance.**

Making the available balance clickable with a tooltip provides an intuitive way for users to quickly set the maximum amount. The styling with bold text for the balance also improves readability.


Consider moving inline styles to CSS classes for better maintainability:

```diff
-<span 
-  onClick={() => handleUseFullAmount(ticker)}
-  style={{ cursor: 'pointer' }}
->
-  {t(constantKeys.AVAILABLE)}: <span style={{ fontWeight: 'bold' }}>{tokens[ticker].balance.toBalanceFormat()}</span>
-</span>
+<span 
+  onClick={() => handleUseFullAmount(ticker)}
+  className="available-balance clickable"
+>
+  {t(constantKeys.AVAILABLE)}: <span className="balance-amount">{tokens[ticker].balance.toBalanceFormat()}</span>
+</span>
```

---

`376-381`: **Good semantic improvement for price display.**

Changing from a `<span>` to a `<div>` for the price display is semantically more appropriate for this block element.


For consistency, consider applying the same styling approach to the "Amount" display as used in the "Available" section:

```diff
-<span>Amount: {tokens[ticker].balance.toBalanceFormat()}</span>
+<span>{t(constantKeys.AMOUNT)}: <span className="balance-amount">{tokens[ticker].balance.toBalanceFormat()}</span></span>
```

This would require adding an "AMOUNT" key to your constant keys.

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between f3165775343269480f76ccb45280bdedc3e36eee and c2d9575af1a7cdf211608ebc4465472178e9919b.

</details>

<details>
<summary>📒 Files selected for processing (1)</summary>

* `src/components/swap-vult/index.tsx` (4 hunks)

</details>

<details>
<summary>🔇 Additional comments (2)</summary><blockquote>

<details>
<summary>src/components/swap-vult/index.tsx (2)</summary>

`4-4`: **Good addition of the message component.**

Adding the `message` component from Ant Design is appropriate for showing warning messages to users and maintains consistency with the project's UI framework.

---

`202-210`: **Verify the edge case handling for low ETH balances.**

The implementation for handling low ETH balances looks good, showing a warning message and setting the amount to zero when there's insufficient ETH for gas. This directly addresses the feedback from the previous review.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-03T10:57:15Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 0**

<details>
<summary>🧹 Nitpick comments (3)</summary><blockquote>

<details>
<summary>src/components/swap-vult/index.tsx (3)</summary><blockquote>

`186-223`: **Move buffer multiplier to a named constant.**

The implementation of using full amount is good - especially how it handles ETH gas fees. However, the magic number 1.1 (10% buffer) should be extracted as a named constant for better maintainability.


```diff
+  // Buffer multiplier for gas fees (10%)
+  const GAS_FEE_BUFFER_MULTIPLIER = 1.1;
+
   const handleUseFullAmount = (ticker: TickerKey) => {
     if (!loading && isConnected) {
       let fullAmount = tokens[ticker].balance;
       
       // If the token is ETH, we need to reserve some for gas fees
       if (ticker === TickerKey.ETH) {
         // Get max network fee using the existing function
         const estimatedGasFeeEth = getMaxNetworkFee(1) / (values?.[TickerKey.ETH] || 1);
         
         // Add a 10% buffer to ensure we have enough for gas fluctuations
-        const gasFeeWithBuffer = estimatedGasFeeEth * 1.1;
+        const gasFeeWithBuffer = estimatedGasFeeEth * GAS_FEE_BUFFER_MULTIPLIER;
```

---

`203-204`: **Use a single translation key for error messages.**

The error message combines a translated part with hardcoded English text. It would be better to use a single translation key that contains the full message.


```diff
-          message.warning(t(constantKeys.INSUFFICIENT_BALANCE) + ". " + 
-                         "Please add more ETH to your wallet for gas fees.");
+          message.warning(t(constantKeys.INSUFFICIENT_ETH_FOR_GAS_FEES));
```

Make sure to add the new translation key in your i18n files.

---

`373-378`: **Consider matching format between allocate and buy sections.**

While the "allocate" section uses "Available" with a clickable balance, the "buy" section uses "Amount" with non-clickable text. Consider standardizing the terminology and styling between the two sections for better UI consistency.

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between c2d9575af1a7cdf211608ebc4465472178e9919b and d10f893816a7327cfac686eb1a33177a29b36a3b.

</details>

<details>
<summary>📒 Files selected for processing (2)</summary>

* `src/components/swap-vult/index.scss` (1 hunks)
* `src/components/swap-vult/index.tsx` (4 hunks)

</details>

<details>
<summary>🔇 Additional comments (3)</summary><blockquote>

<details>
<summary>src/components/swap-vult/index.scss (1)</summary>

`142-152`: **LGTM - Good styling approach for interactive balance.**

The addition of clickable available balance styling is well-implemented with appropriate cursor indicators and hover effects. The nested structure is clean and follows the existing code patterns.

</details>
<details>
<summary>src/components/swap-vult/index.tsx (2)</summary>

`4-4`: **LGTM - Import added for message component.**

The `message` import from antd is properly added to support the warning notification feature.

---

`322-329`: **LGTM - Well-implemented clickable balance with tooltip.**

The available balance is now properly clickable with an informative tooltip. The UI changes follow Ant Design patterns, and the translation keys are used appropriately.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-03T11:19:56Z
user: login: Ehsan-saradar
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-06T05:25:03Z
user: login: Ehsan-saradar
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-06T05:25:20Z
user: login: Ehsan-saradar
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-04-06T05:27:56Z
user: login: coderabbitai[bot]
body: **Actionable comments posted: 2**

<details>
<summary>🧹 Nitpick comments (5)</summary><blockquote>

<details>
<summary>src/components/swap-history/index.tsx (2)</summary><blockquote>

`123-131`: **Use Link instead of Button for better styling**

According to PR comments, the current button styling doesn't match other icons on the site. Consider using a Link component instead of a span with button role, and adjust the size of the Trash icon to match other icons.


```diff
-<span
-  className="clear-history-btn"
-  onClick={clearHistory}
-  role="button"
-  tabIndex={0}
->
-  <Trash />
-  {t(constantKeys.CLEAR_HISTORY)}
-</span>
+<Link
+  className="clear-history-link"
+  onClick={clearHistory}
+>
+  <Trash height={16} width={16} /> {/* Adjust size to match other icons */}
+  {t(constantKeys.CLEAR_HISTORY)}
+</Link>
```

---

`136-138`: **Use unique identifiers as keys instead of array index**

Using array indices as keys can cause issues with React's reconciliation when items are reordered or removed.


```diff
{transactions.length > 0 ? (
  transactions.map((transaction, index) => (
-    <Transaction key={index} address={address} transaction={transaction} />
+    <Transaction key={transaction.hash} address={address} transaction={transaction} />
  ))
) : (
```

</blockquote></details>
<details>
<summary>src/components/swap-vult/index.tsx (3)</summary><blockquote>

`192-209`: **Consider clearer variable naming for gas fee calculation**

While the implementation is correct, the variable naming could be clearer to distinguish between absolute ETH amounts and the proportion of value.


```diff
if (ticker === TickerKey.ETH) {
  // Get max network fee using the existing function
- const estimatedGasFeeEth = getMaxNetworkFee(1) / (values?.[TickerKey.ETH] || 1);
+ const estimatedGasFeeInCurrency = getMaxNetworkFee(1);
+ const ethValuePerUnit = values?.[TickerKey.ETH] || 1;
+ const estimatedGasFeeEth = estimatedGasFeeInCurrency / ethValuePerUnit;
  
  // Add a 10% buffer to ensure we have enough for gas fluctuations
  const gasFeeWithBuffer = estimatedGasFeeEth * 1.1;
```

---

`327-327`: **Consider accessibility improvements for clickable span**

The clickable span would benefit from additional accessibility attributes.


```diff
<span 
  className="available-balance clickable"
  onClick={() => handleUseFullAmount(ticker)}
+ aria-label={t(constantKeys.USE_FULL_AMOUNT_ARIA_LABEL)}
+ role="button"
+ tabIndex={0}
+ onKeyPress={(e) => {
+   if (e.key === 'Enter' || e.key === ' ') {
+     handleUseFullAmount(ticker);
+   }
+ }}
>
```

---

`375-380`: **Use consistent formatting for labels**

The "Amount:" label should follow the same pattern as the "Available:" label, using a translation key.


```diff
<div className="price">
  <span>{(amount * value).toPriceFormat(currency)}</span>
  {isConnected && (
-    <span>Amount: {tokens[ticker].balance.toBalanceFormat()}</span>
+    <span>{t(constantKeys.AMOUNT)}: {tokens[ticker].balance.toBalanceFormat()}</span>
  )}
</div>
```

</blockquote></details>

</blockquote></details>

<details>
<summary>📜 Review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between d10f893816a7327cfac686eb1a33177a29b36a3b and 0f548d2c1659465ec06764237022db3caa73937e.

</details>

<details>
<summary>📒 Files selected for processing (6)</summary>

* `src/components/swap-history/index.scss` (1 hunks)
* `src/components/swap-history/index.tsx` (2 hunks)
* `src/components/swap-vult/index.tsx` (6 hunks)
* `src/i18n/constant-keys.ts` (2 hunks)
* `src/i18n/locales/en_UK.ts` (1 hunks)
* `src/icons/index.tsx` (1 hunks)

</details>

<details>
<summary>🚧 Files skipped from review as they are similar to previous changes (2)</summary>

* src/components/swap-history/index.scss
* src/i18n/constant-keys.ts

</details>

<details>
<summary>🧰 Additional context used</summary>

<details>
<summary>🧬 Code Graph Analysis (1)</summary>

<details>
<summary>src/components/swap-history/index.tsx (1)</summary><blockquote>

<details>
<summary>src/icons/index.tsx (1)</summary>

* `Trash` (706-733)

</details>

</blockquote></details>

</details>

</details>

<details>
<summary>🔇 Additional comments (12)</summary><blockquote>

<details>
<summary>src/i18n/locales/en_UK.ts (2)</summary>

`47-47`: **LGTM: New translation key added for displaying empty transaction history**

The new `NO_TRANSACTIONS_FOUND` translation key provides appropriate user feedback when no transactions are available.

---

`53-53`: **LGTM: Added helpful ETH gas warning translation**

Good addition of a user-friendly message to inform users when they need additional ETH for gas fees.

</details>
<details>
<summary>src/components/swap-history/index.tsx (5)</summary>

`14-14`: **Add Trash icon to the central icons file**

The Trash icon has been correctly imported from the icons module.

---

`16-16`: **Use Ant Design's Tooltip for consistent UI**

Good use of Ant Design's Tooltip component instead of native browser tooltip, following the project's UI standards.

---

`115-115`: **Hook signature updated to include clear history functionality**

The `useSwapHistory` hook now correctly returns both transactions and the new clearHistory function.

---

`140-142`: **LGTM: Good use of the new translation key**

Appropriate use of the newly added translation key for the empty state message.

---

`119-134`: <details>
<summary>❓ Verification inconclusive</summary>

**Add confirmation dialog before deletion**

The clear history button implementation follows the project's UI patterns, but consider adding a confirmation dialog to prevent accidental deletion.



Based on PR comments from Ehsan-saradar suggesting a confirmation modal, consider modifying the implementation to include a confirmation step:

```diff
{transactions.length > 0 && (
-  <Tooltip title={t(constantKeys.CLEAR_HISTORY)}>
+  <Tooltip title={t(constantKeys.CLEAR_HISTORY_TOOLTIP)}>
    <span
      className="clear-history-btn"
      onClick={clearHistory}
-     role="button"
+     onClick={() => {
+       Modal.confirm({
+         title: t(constantKeys.CONFIRM_DELETE),
+         content: t(constantKeys.CONFIRM_DELETE_HISTORY_MESSAGE),
+         okText: t(constantKeys.DELETE),
+         cancelText: t(constantKeys.CANCEL),
+         onOk: clearHistory,
+       });
+     }}
+     role="button"
      tabIndex={0}
    >
      <Trash />
      {t(constantKeys.CLEAR_HISTORY)}
    </span>
  </Tooltip>
)}
```

Don't forget to add the required imports and translation keys.

---

Based on the absence of any evidence (assuming the shell script returns no matches) of a confirmation dialog implementation in the file, the review comment remains valid. Please update the clear history button’s onClick handler to wrap the deletion action with a confirmation dialog. Remember to update the tooltip translation key and add the necessary imports and translation entries.

**Update Clear History Button to Require Confirmation**

- Replace the onClick handler to call `Modal.confirm` with:
  - A title using `t(constantKeys.CONFIRM_DELETE)`.
  - A content/message using `t(constantKeys.CONFIRM_DELETE_HISTORY_MESSAGE)`.
  - Customized ok and cancel text using `t(constantKeys.DELETE)` and `t(constantKeys.CANCEL)`.
- Update the Tooltip text from `t(constantKeys.CLEAR_HISTORY)` to `t(constantKeys.CLEAR_HISTORY_TOOLTIP)`.
- Ensure all necessary imports (e.g., `Modal`) and translation keys are added.

Example diff for guidance:

```diff
{transactions.length > 0 && (
-  <Tooltip title={t(constantKeys.CLEAR_HISTORY)}>
+  <Tooltip title={t(constantKeys.CLEAR_HISTORY_TOOLTIP)}>
    <span
      className="clear-history-btn"
-     onClick={clearHistory}
+     onClick={() => {
+       Modal.confirm({
+         title: t(constantKeys.CONFIRM_DELETE),
+         content: t(constantKeys.CONFIRM_DELETE_HISTORY_MESSAGE),
+         okText: t(constantKeys.DELETE),
+         cancelText: t(constantKeys.CANCEL),
+         onOk: clearHistory,
+       });
+     }}
      role="button"
      tabIndex={0}
    >
      <Trash />
      {t(constantKeys.CLEAR_HISTORY)}
    </span>
  </Tooltip>
)}
```

---

🏁 Script executed:

```shell

#!/bin/bash
# Verify if a confirmation dialog is already implemented by checking for Modal.confirm usage in the file.
rg "Modal\.confirm" src/components/swap-history/index.tsx
```

Length of output: 181

---



</details>

**Implement Confirmation Dialog for Clearing History**

- Wrap the clear history action in a confirmation modal to prevent accidental deletions.
- Update the Tooltip text to use the new translation key `t(constantKeys.CLEAR_HISTORY_TOOLTIP)`.
- Modify the onClick handler to invoke `Modal.confirm` with:
  - `title`: `t(constantKeys.CONFIRM_DELETE)`
  - `content`: `t(constantKeys.CONFIRM_DELETE_HISTORY_MESSAGE)`
  - `okText`: `t(constantKeys.DELETE)`
  - `cancelText`: `t(constantKeys.CANCEL)`
  - `onOk`: `clearHistory`
- Ensure all required imports for `Modal` and the corresponding translation keys are added.

Example diff for guidance:

```diff
{transactions.length > 0 && (
-  <Tooltip title={t(constantKeys.CLEAR_HISTORY)}>
+  <Tooltip title={t(constantKeys.CLEAR_HISTORY_TOOLTIP)}>
    <span
      className="clear-history-btn"
-     onClick={clearHistory}
+     onClick={() => {
+       Modal.confirm({
+         title: t(constantKeys.CONFIRM_DELETE),
+         content: t(constantKeys.CONFIRM_DELETE_HISTORY_MESSAGE),
+         okText: t(constantKeys.DELETE),
+         cancelText: t(constantKeys.CANCEL),
+         onOk: clearHistory,
+       });
+     }}
      role="button"
      tabIndex={0}
    >
      <Trash />
      {t(constantKeys.CLEAR_HISTORY)}
    </span>
  </Tooltip>
)}
```

Please manually verify that there are no conflicting implementations (i.e., no existing `Modal.confirm` usage) in `src/components/swap-history/index.tsx` before applying these changes.

</details>
<details>
<summary>src/icons/index.tsx (1)</summary>

`706-731`: **LGTM: Well-structured new Trash icon component**

The Trash icon component follows the existing pattern for icon components with appropriate default props and SVG path definition.

</details>
<details>
<summary>src/components/swap-vult/index.tsx (4)</summary>

`4-4`: **LGTM: Added necessary imports for new features**

The added imports support the new message notification and tooltip features.

---

`33-33`: **LGTM: Proper message API setup**

Good setup of the Ant Design message API with corresponding contextHolder.

---

`187-224`: **LGTM: Well-implemented max allocation function with gas fee considerations**

The `handleUseFullAmount` function correctly handles:
1. Reserving ETH for gas fees when needed
2. Adding a buffer for gas fluctuations
3. Displaying appropriate warnings
4. Handling edge cases with insufficient balance
5. Properly rounding values to avoid precision issues

This implementation addresses the requirements mentioned in the PR objectives regarding maximum allocation limits for assets, especially ETH.

---

`273-273`: **LGTM: Added message context holder**

Correctly added the context holder required for Ant Design's message API to function.

</details>

</blockquote></details>

</details>

<!-- This is an auto-generated comment by CodeRabbit for review status -->
state: COMMENTED
author_association: NONE
submitted_at: 2025-04-11T06:38:46Z
user: login: Ehsan-saradar
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-04-12T17:15:10Z

Review comments:
diff_hunk: @@ -112,14 +112,45 @@ const Transaction: FC<{ address: string; transaction: TransactionProps }> = ({
 const Component: FC = () => {
   const { t } = useTranslation();
   const { address = "", isConnected } = useAccount();
-  const { transactions } = useSwapHistory();
+  const { transactions, clearHistory } = useSwapHistory();
 
   return isConnected ? (
     <div className="swap-history">
-      <span className="heading">{t(constantKeys.TRANSACTIONS)}</span>
-      {transactions.map((transaction, index) => (
-        <Transaction key={index} address={address} transaction={transaction} />
-      ))}
+      <div className="history-header">
+        <span className="heading">{t(constantKeys.TRANSACTIONS)}</span>
+        {transactions.length > 0 && (
+          <button 
+            className="clear-history-btn" 
+            onClick={clearHistory}
+            aria-label="Clear transaction history"
+          >
+            <svg 
path: src/components/swap-history/index.tsx
user: login: Ehsan-saradar
body: Lets store icons in https://github.com/vultisig/launch-web/blob/swap-page-improvements/src/icons/index.tsx to be able to reuse them in the future and also make the code easier to maintain 
created_at: 2025-04-01T08:59:10Z
author_association: COLLABORATOR
diff_hunk: @@ -152,3 +152,26 @@ export const setStoredTransactions = (
 
   localStorage.setItem(storageKey.TRANSACTIONS, JSON.stringify(wallets));
 };
+
+/**
+ * Clears all stored transactions for a specific wallet address
+ * @param address The wallet address whose transactions should be cleared
+ */
+export const clearStoredTransactions = (address: string): void => {
path: src/utils/storage.ts
user: login: Ehsan-saradar
body: If you want to clear all stored transactions, you can now pass an empty array to the `setStoredTransactions` function.


created_at: 2025-04-01T09:00:49Z
author_association: COLLABORATOR
diff_hunk: @@ -112,14 +112,45 @@ const Transaction: FC<{ address: string; transaction: TransactionProps }> = ({
 const Component: FC = () => {
   const { t } = useTranslation();
   const { address = "", isConnected } = useAccount();
-  const { transactions } = useSwapHistory();
+  const { transactions, clearHistory } = useSwapHistory();
 
   return isConnected ? (
     <div className="swap-history">
-      <span className="heading">{t(constantKeys.TRANSACTIONS)}</span>
-      {transactions.map((transaction, index) => (
-        <Transaction key={index} address={address} transaction={transaction} />
-      ))}
+      <div className="history-header">
+        <span className="heading">{t(constantKeys.TRANSACTIONS)}</span>
+        {transactions.length > 0 && (
+          <button 
path: src/components/swap-history/index.tsx
user: login: Ehsan-saradar
body: Most of the time, we use a `<span>` tag for buttons so that we don't need to add custom CSS. For example:

<img width="455" alt="image" src="https://github.com/user-attachments/assets/6165f25e-05c0-4f8d-b2c5-7a73a202af49" />

created_at: 2025-04-01T09:06:26Z
author_association: COLLABORATOR
diff_hunk: @@ -112,14 +112,45 @@ const Transaction: FC<{ address: string; transaction: TransactionProps }> = ({
 const Component: FC = () => {
   const { t } = useTranslation();
   const { address = "", isConnected } = useAccount();
-  const { transactions } = useSwapHistory();
+  const { transactions, clearHistory } = useSwapHistory();
 
   return isConnected ? (
     <div className="swap-history">
-      <span className="heading">{t(constantKeys.TRANSACTIONS)}</span>
-      {transactions.map((transaction, index) => (
-        <Transaction key={index} address={address} transaction={transaction} />
-      ))}
+      <div className="history-header">
+        <span className="heading">{t(constantKeys.TRANSACTIONS)}</span>
+        {transactions.length > 0 && (
+          <button 
+            className="clear-history-btn" 
+            onClick={clearHistory}
+            aria-label="Clear transaction history"
+          >
+            <svg 
+              width="24" 
+              height="24" 
+              viewBox="0 0 24 24" 
+              fill="none" 
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path 
+                d="M3 6H21M19 6V20C19 21 18 22 17 22H7C6 22 5 21 5 20V6M8 6V4C8 3 9 2 10 2H14C15 2 16 3 16 4V6M10 11V17M14 11V17" 
+                stroke="currentColor" 
+                strokeWidth="2" 
+                strokeLinecap="round" 
+                strokeLinejoin="round"
+              />
+            </svg>
+          </button>
+        )}
+      </div>
+      {transactions.length > 0 ? (
+        transactions.map((transaction, index) => (
+          <Transaction key={index} address={address} transaction={transaction} />
+        ))
+      ) : (
+        <div className="no-transactions">
+          {t("No transactions found")}
path: src/components/swap-history/index.tsx
user: login: Ehsan-saradar
body: Let's define a new reference in  
https://github.com/vultisig/launch-web/blob/main/src/i18n/constant-keys.ts
and reuse it wherever needed. This will make it easier to update the text when necessary and also help us support multiple languages more efficiently.
created_at: 2025-04-01T09:12:38Z
author_association: COLLABORATOR
diff_hunk: @@ -152,3 +152,26 @@ export const setStoredTransactions = (
 
   localStorage.setItem(storageKey.TRANSACTIONS, JSON.stringify(wallets));
 };
+
+/**
+ * Clears all stored transactions for a specific wallet address
+ * @param address The wallet address whose transactions should be cleared
+ */
+export const clearStoredTransactions = (address: string): void => {
path: src/utils/storage.ts
user: login: realpaaao
body: I think it makes sense to have a dedicated function for clarity
created_at: 2025-04-01T09:44:16Z
author_association: CONTRIBUTOR
diff_hunk: @@ -183,6 +183,46 @@ const Component: FC = () => {
     }
   };
 
+  const handleUseFullAmount = (ticker: TickerKey) => {
+    if (!loading && isConnected) {
+      let fullAmount = tokens[ticker].balance;
+      
+      // If the token is ETH, we need to reserve some for gas fees
+      if (ticker === TickerKey.ETH) {
+        // Calculate the estimated gas fee in ETH using the same formula as getMaxNetworkFee
+        const maxFeeEth = gasSettings.maxFee * 1e-9; // Convert Gwei to ETH
+        const maxPriorityFeeEth = gasSettings.maxPriorityFee * 1e-9;
+        
+        // Calculate max network fee in ETH (same formula as getMaxNetworkFee)
+        const estimatedGasFeeEth = (maxFeeEth + maxPriorityFeeEth) * gasSettings.gasLimit;
+        
+        // Add a 10% buffer to ensure we have enough for gas fluctuations
+        const gasFeeWithBuffer = estimatedGasFeeEth * 1.1;
+        
+        // Ensure we don't set a negative amount if gas fee is higher than balance
+        if (fullAmount > gasFeeWithBuffer) {
+          fullAmount -= gasFeeWithBuffer;
+        } else {
+          // If balance is too low, use half of the balance to ensure some amount for gas
+          fullAmount = fullAmount * 0.5;
+        }
+      }
+      
+      // Round to 6 decimal places to avoid floating point precision issues
+      fullAmount = Math.floor(fullAmount * 1000000) / 1000000;
+      
+      form.setFieldValue("allocateAmount", fullAmount);
+      form.setFieldValue("buyAmount", undefined);
+      
+      handleUpdateQuote(
+        ticker,
+        form.getFieldValue("buyToken"),
+        fullAmount,
+        false
+      );
+    }
+  };
path: src/components/swap-vult/index.tsx
user: login: coderabbitai[bot]
body: _🛠️ Refactor suggestion_

**Consider refining edge-case handling for extremely low balances.**

If the ETH balance is less than the estimated gas fee, the function currently falls back to using half the balance. This may still be insufficient to cover the fee, causing the transaction to fail without clear user feedback. You might want to set the allocated amount to zero or notify the user more explicitly that there's insufficient balance for gas. This approach improves user experience and prevents silent errors.


For example:

```diff
-if (fullAmount > gasFeeWithBuffer) {
-  fullAmount -= gasFeeWithBuffer;
-} else {
-  fullAmount = fullAmount * 0.5;
-}
+if (fullAmount > gasFeeWithBuffer) {
+  fullAmount = fullAmount - gasFeeWithBuffer;
+} else {
+  // Option A: Set the full amount to 0 and show a warning
+  fullAmount = 0;
+  // Option B: Provide a custom message to the user that there's not enough ETH for gas
+}
```


<!-- suggestion_start -->

<details>
<summary>📝 Committable suggestion</summary>

> ‼️ **IMPORTANT**
> Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

`````suggestion
  const handleUseFullAmount = (ticker: TickerKey) => {
    if (!loading && isConnected) {
      let fullAmount = tokens[ticker].balance;
      
      // If the token is ETH, we need to reserve some for gas fees
      if (ticker === TickerKey.ETH) {
        // Calculate the estimated gas fee in ETH using the same formula as getMaxNetworkFee
        const maxFeeEth = gasSettings.maxFee * 1e-9; // Convert Gwei to ETH
        const maxPriorityFeeEth = gasSettings.maxPriorityFee * 1e-9;
        
        // Calculate max network fee in ETH (same formula as getMaxNetworkFee)
        const estimatedGasFeeEth = (maxFeeEth + maxPriorityFeeEth) * gasSettings.gasLimit;
        
        // Add a 10% buffer to ensure we have enough for gas fluctuations
        const gasFeeWithBuffer = estimatedGasFeeEth * 1.1;
        
        // Ensure we don't set a negative amount if gas fee is higher than balance
        if (fullAmount > gasFeeWithBuffer) {
          fullAmount = fullAmount - gasFeeWithBuffer;
        } else {
          // Option A: Set the full amount to 0 and show a warning
          fullAmount = 0;
          // Option B: Provide a custom message to the user that there's not enough ETH for gas
        }
      }
      
      // Round to 6 decimal places to avoid floating point precision issues
      fullAmount = Math.floor(fullAmount * 1000000) / 1000000;
      
      form.setFieldValue("allocateAmount", fullAmount);
      form.setFieldValue("buyAmount", undefined);
      
      handleUpdateQuote(
        ticker,
        form.getFieldValue("buyToken"),
        fullAmount,
        false
      );
    }
  };
`````

</details>

<!-- suggestion_end -->

<!-- This is an auto-generated comment by CodeRabbit -->

✅ Addressed in commit c2d9575
created_at: 2025-04-03T10:46:40Z
author_association: NONE
diff_hunk: @@ -347,7 +347,7 @@ export const Clock: FC<SVGProps<SVGSVGElement>> = ({
       width,
     }}
   >
-    <path d="M12 6V12L16 14M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" />
path: src/icons/index.tsx
user: login: Ehsan-saradar
body: I did not get why we change this svg icon?
created_at: 2025-04-06T05:25:03Z
author_association: COLLABORATOR
diff_hunk: @@ -699,6 +699,38 @@ export const Wallet: FC<SVGProps<SVGSVGElement>> = ({
       width,
     }}
   >
-    <path d="M19 7V4C19 3.73478 18.8946 3.48043 18.7071 3.29289C18.5196 3.10536 18.2652 3 18 3H5C4.46957 3 3.96086 3.21071 3.58579 3.58579C3.21071 3.96086 3 4.46957 3 5M3 5C3 5.53043 3.21071 6.03914 3.58579 6.41421C3.96086 6.78929 4.46957 7 5 7H20C20.2652 7 20.5196 7.10536 20.7071 7.29289C20.8946 7.48043 21 7.73478 21 8V12M3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H20C20.2652 21 20.5196 20.8946 20.7071 20.7071C20.8946 20.5196 21 20.2652 21 20V16M21 12H18C17.4696 12 16.9609 12.2107 16.5858 12.5858C16.2107 12.9609 16 13.4696 16 14C16 14.5304 16.2107 15.0391 16.5858 15.4142C16.9609 15.7893 17.4696 16 18 16H21M21 12C21.2652 12 21.5196 12.1054 21.7071 12.2929C21.8946 12.4804 22 12.7348 22 13V15C22 15.2652 21.8946 15.5196 21.7071 15.7071C21.5196 15.8946 21.2652 16 21 16" />
path: src/icons/index.tsx
user: login: Ehsan-saradar
body: Same for this, did not get why we change this svg icon
created_at: 2025-04-06T05:25:20Z
author_association: COLLABORATOR
diff_hunk: @@ -183,6 +183,45 @@ const Component: FC = () => {
     }
   };
 
+  const handleUseFullAmount = (ticker: TickerKey) => {
+    if (!loading && isConnected) {
+      let fullAmount = tokens[ticker].balance;
+      
+      // If the token is ETH, we need to reserve some for gas fees
+      if (ticker === TickerKey.ETH) {
+        // Get max network fee using the existing function
+        const estimatedGasFeeEth = getMaxNetworkFee(1) / (values?.[TickerKey.ETH] || 1);
+        
+        // Add a 10% buffer to ensure we have enough for gas fluctuations
+        const gasFeeWithBuffer = estimatedGasFeeEth * 1.1;
+        
+        // If balance is too low, set amount to 0 and show a warning
+        if (fullAmount > gasFeeWithBuffer) {
+          fullAmount -= gasFeeWithBuffer;
+        } else {
+          // Show warning message to the user
+          message.warning(t(constantKeys.INSUFFICIENT_BALANCE) + ". " + 
+                         "Please add more ETH to your wallet for gas fees.");
path: src/components/swap-vult/index.tsx
user: login: Ehsan-saradar
body: Lets store all text in local so we can easily change them in future or support multiple language and also make the code easier to read
created_at: 2025-04-06T05:27:48Z
author_association: COLLABORATOR
diff_hunk: @@ -699,6 +699,35 @@ export const Wallet: FC<SVGProps<SVGSVGElement>> = ({
       width,
     }}
   >
-    <path d="M19 7V4C19 3.73478 18.8946 3.48043 18.7071 3.29289C18.5196 3.10536 18.2652 3 18 3H5C4.46957 3 3.96086 3.21071 3.58579 3.58579C3.21071 3.96086 3 4.46957 3 5M3 5C3 5.53043 3.21071 6.03914 3.58579 6.41421C3.96086 6.78929 4.46957 7 5 7H20C20.2652 7 20.5196 7.10536 20.7071 7.29289C20.8946 7.48043 21 7.73478 21 8V12M3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H20C20.2652 21 20.5196 20.8946 20.7071 20.7071C20.8946 20.5196 21 20.2652 21 20V16M21 12H18C17.4696 12 16.9609 12.2107 16.5858 12.5858C16.2107 12.9609 16 13.4696 16 14C16 14.5304 16.2107 15.0391 16.5858 15.4142C16.9609 15.7893 17.4696 16 18 16H21M21 12C21.2652 12 21.5196 12.1054 21.7071 12.2929C21.8946 12.4804 22 12.7348 22 13V15C22 15.2652 21.8946 15.5196 21.7071 15.7071C21.5196 15.8946 21.2652 16 21 16" />
+<path d="M19 7V4C19 3.73478 18.8946 3.48043 18.7071 3.29289C18.5196 3.10536 18.2652 3 18 3H5C4.46957 3 3.96086 3.21071 3.58579 3.58579C3.21071 3.96086 3 4.46957 3 5M3 5C3 5.53043 3.21071 6.03914 3.58579 6.41421C3.96086 6.78929 4.46957 7 5 7H20C20.2652 7 20.5196 7.10536 20.7071 7.29289C20.8946 7.48043 21 7.73478 21 8V12M3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H20C20.2652 21 20.5196 20.8946 20.7071 20.7071C20.8946 20.5196 21 20.2652 21 20V16M21 12H18C17.4696 12 16.9609 12.2107 16.5858 12.5858C16.2107 12.9609 16 13.4696 16 14C16 14.5304 16.2107 15.0391 16.5858 15.4142C16.9609 15.7893 17.4696 16 18 16H21M21 12C21.2652 12 21.5196 12.1054 21.7071 12.2929C21.8946 12.4804 22 12.7348 22 13V15C22 15.2652 21.8946 15.5196 21.7071 15.7071C21.5196 15.8946 21.2652 16 21 16" />
path: src/icons/index.tsx
user: login: coderabbitai[bot]
body: _💡 Verification agent_

<details>
<summary>🧩 Analysis chain</summary>

**Consider documenting SVG path changes**

The Wallet SVG path has been updated, but there's no clear reason for this change. Consider adding a comment explaining why this change was necessary.

---

🏁 Script executed:

```shell
#!/bin/bash
# Find places where the Wallet icon is used to verify impact of the change
rg -A 2 -B 2 "Wallet" --type=tsx
```

Length of output: 60

---

**Please document the Wallet icon update rationale.**  
It appears the previous search for Wallet usages in TSX files failed due to a file-type recognition issue. To ensure this SVG change won’t have unexpected impacts, kindly verify (using the updated search command above or manual inspection) that its usage is consistent across the codebase. In addition, add an inline comment near line 702 in `src/icons/index.tsx` explaining the motivation for updating the Wallet SVG path. This will help future maintainers understand the design decisions behind this update.



---

🏁 Script executed:

```shell

#!/bin/bash
# Re-run the search for "Wallet" in TSX files using a glob filter instead of the unrecognized file type.
rg -A 2 -B 2 "Wallet" -g "*.tsx"
```

Length of output: 2016

---



</details>

**Action Required: Document the Wallet SVG Update**

The Wallet SVG path in `src/icons/index.tsx` (around line 702) was recently updated, but the rationale behind this change isn’t clearly documented. Please add an inline comment explaining why this SVG path was modified (for example, to align with a design revision or correct a visual discrepancy). This documentation will help maintain clarity across the codebase, especially since the Wallet icon is also referenced in other parts of the application (e.g., in `src/layouts/default/index.tsx`).

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-11T06:38:45Z
author_association: NONE
diff_hunk: @@ -280,7 +321,14 @@ const Component: FC = () => {
                     <div className="price">
                       <span>{(amount * value).toPriceFormat(currency)}</span>
                       {isConnected && (
-                        <span>{tokens[ticker].balance.toBalanceFormat()}</span>
+                        <Tooltip title={t(constantKeys.CLICK_TO_USE_FULL_AMOUNT)}>
+                          <span 
+                            className="available-balance clickable"
+                            onClick={() => handleUseFullAmount(ticker)}
+                          >
+                            {t(constantKeys.AVAILABLE)}: <span className="balance-amount">{tokens[ticker].balance.toBalanceFormat()}</span>
+                          </span>
+                        </Tooltip>
path: src/components/swap-vult/index.tsx
user: login: coderabbitai[bot]
body: _⚠️ Potential issue_

**Missing translation key for tooltip**

The tooltip uses a translation key `CLICK_TO_USE_FULL_AMOUNT` that doesn't appear to be defined in the localization file.


Add the missing translation key to `src/i18n/constant-keys.ts` and the corresponding translation to `src/i18n/locales/en_UK.ts`.

<!-- This is an auto-generated comment by CodeRabbit -->
created_at: 2025-04-11T06:38:45Z
author_association: NONE

PR comments:
user: login: coderabbitai[bot]
created_at: 2025-03-31T21:08:08Z
body: <!-- This is an auto-generated comment: summarize by coderabbit.ai -->
<!-- walkthrough_start -->

## Walkthrough
The pull request introduces several enhancements across the codebase. In the version control configuration, a new ignore entry was added. The swap-history component now includes additional styling and a clear transaction history feature, which is also integrated into its hook. The swap-vult component has been updated with a function to apply the full balance with gas fee considerations and corresponding UI adjustments. Additionally, new translation entries, constant keys, and icon components have been added.

## Changes

| File(s)                                                                       | Change Summary                                                                                                                                                                               |
|-------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `.gitignore`                                                                  | Added entry `.windsurfrules` to ignore files/folders matching this name.                                                                                                                    |
| `src/components/.../swap-history/index.scss`, `.../index.tsx`,<br>`src/hooks/.../swap-history.ts` | Updated swap-history component: added styles (header, button) and a clear history button; updated the `useSwapHistory` hook to include a new `clearHistory` function.                   |
| `src/components/.../swap-vult/index.tsx`,<br>`.../swap-vult/index.scss`         | Added `handleUseFullAmount` function to allocate full token balance with a gas fee check; updated UI by making the available balance clickable and modifying its text/structural markup. |
| `src/i18n/constant-keys.ts`,<br>`src/i18n/locales/en_UK.ts`                     | Added new constant keys and translation entries for amount labeling, clear history prompts, clickable full amount instructions, no transactions message, and ETH gas fee warnings.      |
| `src/icons/index.tsx`                                                          | Replaced Wallet SVG path with new design and introduced a new Trash icon component with configurable properties.                                                                             |

## Sequence Diagram(s)
```mermaid
sequenceDiagram
    participant User
    participant SwapHistoryComponent
    participant useSwapHistory
    participant StorageUtil

    User->>SwapHistoryComponent: Click "Clear History" button
    SwapHistoryComponent->>useSwapHistory: Invoke clearHistory()
    useSwapHistory->>StorageUtil: setStoredTransactions(address, [])
    StorageUtil-->>useSwapHistory: Confirm update
    useSwapHistory-->>SwapHistoryComponent: Return empty transactions
    SwapHistoryComponent->>User: Display "No transactions found" message
```

```mermaid
sequenceDiagram
    participant User
    participant SwapVultComponent
    participant BalanceService
    participant GasFeeCalculator

    User->>SwapVultComponent: Click on "Available:" balance
    SwapVultComponent->>BalanceService: Retrieve full token balance
    alt Token is ETH
        BalanceService->>GasFeeCalculator: Estimate gas fees (with 10% buffer)
        GasFeeCalculator-->>BalanceService: Return gas fee estimate
        SwapVultComponent->>BalanceService: Validate against full balance
    end
    SwapVultComponent->>User: Update allocation field & update quote
```

## Poem
> I'm a bunny in the codewood so free,  
> Hopping through changes with delightful glee.  
> New styles, new functions, icons so grand,  
> Clearing history with a click, just as planned.  
> With carrots 🥕 and code that sings,  
> I celebrate these updates on joyful wings!  
> 🐇💕

<!-- walkthrough_end -->


---

<details>
<summary>📜 Recent review details</summary>

**Configuration used: CodeRabbit UI**
**Review profile: CHILL**
**Plan: Pro**

<details>
<summary>📥 Commits</summary>

Reviewing files that changed from the base of the PR and between 1a770ada8739f9606fe03c749ea74249d5b3a12b and b4c191e008bace77e086ecb61a45b8dc7203e0e0.

</details>

<details>
<summary>📒 Files selected for processing (4)</summary>

* `src/components/swap-history/index.scss` (1 hunks)
* `src/components/swap-history/index.tsx` (2 hunks)
* `src/hooks/swap-history.ts` (2 hunks)
* `src/i18n/locales/en_UK.ts` (3 hunks)

</details>

<details>
<summary>🚧 Files skipped from review as they are similar to previous changes (4)</summary>

* src/hooks/swap-history.ts
* src/components/swap-history/index.tsx
* src/components/swap-history/index.scss
* src/i18n/locales/en_UK.ts

</details>

</details>
<!-- internal state start -->


<!-- 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 -->

<!-- internal state end -->
<!-- tips_start -->

---



<details>
<summary>🪧 Tips</summary>

### Chat

There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai?utm_source=oss&utm_medium=github&utm_campaign=vultisig/launch-web&utm_content=31):

- Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  - `I pushed a fix in commit <commit_id>, please review it.`
  - `Generate unit testing code for this file.`
  - `Open a follow-up GitHub issue for this discussion.`
- Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples:
  - `@coderabbitai generate unit testing code for this file.`
  -	`@coderabbitai modularize this function.`
- PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.`
  - `@coderabbitai read src/utils.ts and generate unit testing code.`
  - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.`
  - `@coderabbitai help me debug CodeRabbit configuration file.`

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

### CodeRabbit Commands (Invoked using PR comments)

- `@coderabbitai pause` to pause the reviews on a PR.
- `@coderabbitai resume` to resume the paused reviews.
- `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
- `@coderabbitai full review` to do a full review from scratch and review all the files again.
- `@coderabbitai summary` to regenerate the summary of the PR.
- `@coderabbitai generate docstrings` to [generate docstrings](https://docs.coderabbit.ai/finishing-touches/docstrings) for this PR.
- `@coderabbitai resolve` resolve all the CodeRabbit review comments.
- `@coderabbitai plan` to trigger planning for file edits and PR creation.
- `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository.
- `@coderabbitai help` to get help.

### Other keywords and placeholders

- Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed.
- Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description.
- Add `@coderabbitai` anywhere in the PR title to generate the title automatically.

### CodeRabbit Configuration File (`.coderabbit.yaml`)

- You can programmatically configure CodeRabbit by adding a `.coderabbit.yaml` file to the root of your repository.
- Please see the [configuration documentation](https://docs.coderabbit.ai/guides/configure-coderabbit) for more information.
- If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: `# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json`

### Documentation and Community

- Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit.
- Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback.
- Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements.

</details>

<!-- tips_end -->
author_association: NONE
user: login: vercel[bot]
created_at: 2025-03-31T21:08:11Z
body: [vc]: #pnPBRQLP09+lWmWq+V8N9eSjM2uRbRHlNH1RXNKgBxc=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJsYXVuY2gtd2ViIiwibGl2ZUZlZWRiYWNrIjp7InJlc29sdmVkIjowLCJ1bnJlc29sdmVkIjowLCJ0b3RhbCI6MCwibGluayI6ImxhdW5jaC13ZWItZ2l0LXN3YXAtcGFnZS1pbXByb3ZlbWVudHMtdnVsdGlzaWcudmVyY2VsLmFwcCJ9LCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vdnVsdGlzaWcvbGF1bmNoLXdlYi82bTZvWVJ0Q3haVmZiaXNrZTJha3hMU21jUkhjIiwicHJldmlld1VybCI6ImxhdW5jaC13ZWItZ2l0LXN3YXAtcGFnZS1pbXByb3ZlbWVudHMtdnVsdGlzaWcudmVyY2VsLmFwcCIsIm5leHRDb21taXRTdGF0dXMiOiJERVBMT1lFRCIsInJvb3REaXJlY3RvcnkiOm51bGx9XX0=
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **launch-web** | ✅ Ready ([Inspect](https://vercel.com/vultisig/launch-web/6m6oYRtCxZVfbiske2akxLSmcRHc)) | [Visit Preview](https://launch-web-git-swap-page-improvements-vultisig.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/launch-web-git-swap-page-improvements-vultisig.vercel.app?via=pr-comment-feedback-link) | Apr 12, 2025 4:35pm |


author_association: NONE
user: login: Ehsan-saradar
created_at: 2025-04-01T09:56:47Z
body: I suggest adding a confirmation modal or popup before deleting the transaction history, to ensure we don't accidentally delete all transaction data due to a misclick.


author_association: COLLABORATOR
user: login: Ehsan-saradar
created_at: 2025-04-01T10:15:03Z
body: We use Ant Design’s Tooltip component, not the native browser tooltip. To maintain consistent structure and standards, please try to reuse Ant Design components as much as possible.

![telegram-cloud-photo-size-4-6007886393965135700-y](https://github.com/user-attachments/assets/aa2f9c72-fb0d-4a37-8ece-4f98b69c86ed)

author_association: COLLABORATOR
user: login: Ehsan-saradar
created_at: 2025-04-01T10:29:23Z
body: I think the delete icon is too large and doesn't match the size of other icons used on the Launch website.
I’d also suggest using a Link instead of a Button for this type of action, as it’s more appropriate stylistically.
<img width="103" alt="image" src="https://github.com/user-attachments/assets/f98c50f4-cd6e-497d-990d-ada4f7f6fd94" />

Icon is bigger than title
![telegram-cloud-photo-size-4-6007886393965135692-y](https://github.com/user-attachments/assets/11dbe3bc-e79e-405a-8bba-7d5dc800e475)

Additionally, the hover effect is inconsistent with other buttons across the site:
<img width="82" alt="image" src="https://github.com/user-attachments/assets/b1bb0d7c-9287-4192-a277-8560f9238226" />

author_association: COLLABORATOR
user: login: Ehsan-saradar
created_at: 2025-04-01T10:33:17Z
body: <img width="999" alt="image" src="https://github.com/user-attachments/assets/1c2c3fd9-10e9-4c03-bb79-9da3c924155b" />
Translation not added for this key

```
<div className="no-transactions">
          {t(constantKeys.NO_TRANSACTIONS_FOUND)}
        </div>
```
        
author_association: COLLABORATOR
user: login: Ehsan-saradar
created_at: 2025-04-01T10:39:15Z
body: when the selected token is ETH, we shouldn't use the full balance, since users need to keep some ETH to cover gas fees. We should deduct a small buffer for fees before setting the max value.


author_association: COLLABORATOR
user: login: Ehsan-saradar
created_at: 2025-04-06T05:27:59Z
body: 1. This is how it looks now ( Same text on both hover and  also button) <img width="335" alt="image" src="https://github.com/user-attachments/assets/57a1f3fc-d52b-4e64-b476-1377d86edfca" />
2.  We are still using button instead of span
3. You need to add {contextHolder} for proper use of message in ant design https://ant.design/components/message#message-demo-hooks

author_association: COLLABORATOR