From 3591dd54322b3e3f553d69a0aa851a54c7aabb4d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Ribeiro?= <me@joseribeiro.dev>
Date: Tue, 16 Jul 2024 10:38:19 -0300
Subject: [PATCH] Add order details links, reset fields on advanced configs
 close, balance validation, and add remove draft orders dialog (#56)

* add links on order details and create new text for order hash

* reset fields on advanced settings dialog close

* add validation if balance bigger than sell amount

* handle null price error

* add select all option on draft and open order tables

* refactor get or fetch usd price redability

* fix market price information and fix dialog padding

* remove unused imports

* add draft order delete dialog

* on back to home page preserve order tab

* Add action menu on tables to invert price (#57)

* add action menu on tables to invert price

* run formater and linter

* increase test timeout

---------

Co-authored-by: Pedro Yves Fracari <yves.fracari@gmail.com>
Co-authored-by: Pedro Yves Fracari <55461956+yvesfracari@users.noreply.github.com>
---
 package.json                                  |   2 +-
 pnpm-lock.yaml                                |   6 +-
 .../[safeAddress]/[orderId]/page.tsx          |   2 +-
 src/components/AdvancedSettingsDialog.tsx     |   9 +-
 src/components/DraftOrdersTab.tsx             |  70 ++++--
 src/components/HistoryOrdersTab.tsx           |  39 ++-
 src/components/OpenOrdersTab.tsx              |  62 +++--
 src/components/OrderDetails.tsx               | 132 +++++-----
 src/components/OrderDetailsInformation.tsx    |   2 +-
 src/components/OrderDropdownMenuCell.tsx      |  67 ++++++
 src/components/OrdersTabs.tsx                 |   5 +-
 src/components/PriceInputCard.tsx             |   1 +
 src/components/RemoveDraftOrdersDialog.tsx    |  62 +++++
 src/components/ReviewOrdersDialog.tsx         |  13 +-
 src/components/TokenInputCard.tsx             |  23 +-
 src/components/TokenSelect.tsx                |   4 +-
 .../swap-card/SwapCardSubmitButton.tsx        | 226 ++++++++----------
 src/components/swap-card/SwapForm.tsx         |   2 +-
 src/contexts/appContext.tsx                   |   2 +-
 src/contexts/ordersContext.tsx                |   2 +-
 src/contexts/swapCardContext.tsx              |  14 +-
 src/contexts/tokensContext.tsx                |  10 +-
 src/hooks/useOrderList.ts                     |   6 +-
 src/hooks/useSwap.ts                          |   6 +-
 src/hooks/useTokenList.ts                     |   4 +-
 src/hooks/useTransaction.ts                   |   2 +-
 src/hooks/useUIState.ts                       |   2 +-
 src/lib/__tests__/oracleRouter.test.ts        |  20 +-
 src/lib/schema.ts                             |   8 +-
 src/lib/tokenUtils.ts                         |  10 +-
 src/lib/tooltipDescriptions.ts                |   2 +-
 31 files changed, 515 insertions(+), 300 deletions(-)
 create mode 100644 src/components/OrderDropdownMenuCell.tsx
 create mode 100644 src/components/RemoveDraftOrdersDialog.tsx

diff --git a/package.json b/package.json
index 6521797..140a589 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,6 @@
     "clsx": "^2.1.1",
     "cmdk": "^0.2.1",
     "embla-carousel-react": "8.1.6",
-    "eslint-plugin-react-compiler": "0.0.0-experimental-0998c1e-20240625",
     "gql": "^1.1.2",
     "graphql-codegen-plugin-typescript-swr": "^0.8.5",
     "graphql-request": "6.1.0",
@@ -114,6 +113,7 @@
     "eslint-plugin-graphql": "latest",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-prettier": "latest",
+    "eslint-plugin-react-compiler": "0.0.0-experimental-0998c1e-20240625",
     "eslint-plugin-react-hooks": "latest",
     "eslint-plugin-simple-import-sort": "latest",
     "eslint-plugin-tailwindcss": "^3.17.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9189311..0ff2c0f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -149,9 +149,6 @@ importers:
       embla-carousel-react:
         specifier: 8.1.6
         version: 8.1.6(react@19.0.0-rc-df5f2736-20240712)
-      eslint-plugin-react-compiler:
-        specifier: 0.0.0-experimental-0998c1e-20240625
-        version: 0.0.0-experimental-0998c1e-20240625(eslint@8.56.0)
       gql:
         specifier: ^1.1.2
         version: 1.1.2
@@ -285,6 +282,9 @@ importers:
       eslint-plugin-prettier:
         specifier: latest
         version: 5.1.3(eslint-config-prettier@9.1.0(eslint@8.56.0))(eslint@8.56.0)(prettier@3.3.2)
+      eslint-plugin-react-compiler:
+        specifier: 0.0.0-experimental-0998c1e-20240625
+        version: 0.0.0-experimental-0998c1e-20240625(eslint@8.56.0)
       eslint-plugin-react-hooks:
         specifier: latest
         version: 4.6.0(eslint@8.56.0)
diff --git a/src/app/[chainId]/[safeAddress]/[orderId]/page.tsx b/src/app/[chainId]/[safeAddress]/[orderId]/page.tsx
index ed7bdfc..ccd8214 100644
--- a/src/app/[chainId]/[safeAddress]/[orderId]/page.tsx
+++ b/src/app/[chainId]/[safeAddress]/[orderId]/page.tsx
@@ -3,7 +3,7 @@ import { Address } from "viem";
 import { OrderDetails } from "#/components/OrderDetails";
 import { ChainId } from "#/lib/publicClients";
 
-export default async function OrderPage({
+export default function OrderPage({
   params,
 }: {
   params: {
diff --git a/src/components/AdvancedSettingsDialog.tsx b/src/components/AdvancedSettingsDialog.tsx
index 5b56bdf..dca9890 100644
--- a/src/components/AdvancedSettingsDialog.tsx
+++ b/src/components/AdvancedSettingsDialog.tsx
@@ -78,8 +78,15 @@ export function AdvancedSettingsDialog() {
 
   const receiver = useWatch({ control, name: "receiver" });
 
+  const handleOpenChange = (isOpen: boolean) => {
+    if (!isOpen) {
+      reset(advancedSettings);
+    }
+    setOpen(isOpen);
+  };
+
   return (
-    <Dialog open={open} onOpenChange={setOpen}>
+    <Dialog open={open} onOpenChange={handleOpenChange}>
       <DialogTrigger asChild>
         <button
           className={cn(areSettingsDifferentFromDefault && "text-primary")}
diff --git a/src/components/DraftOrdersTab.tsx b/src/components/DraftOrdersTab.tsx
index 45beef5..5503cb1 100644
--- a/src/components/DraftOrdersTab.tsx
+++ b/src/components/DraftOrdersTab.tsx
@@ -18,10 +18,12 @@ import { useTokenPairPrice } from "#/hooks/useTokenPairPrice";
 import { getOrderDescription } from "#/lib/orderDescription";
 import { DraftOrder } from "#/lib/types";
 
+import { OrderDropdownMenuCell } from "./OrderDropdownMenuCell";
+import { RemoveDraftOrdersDialog } from "./RemoveDraftOrdersDialog";
 import { ReviewOrdersDialog } from "./ReviewOrdersDialog";
 
 export function DraftOrdersTab() {
-  const { draftOrders, removeDraftOrders } = useOrder();
+  const { draftOrders } = useOrder();
   const [reviewDialogOpen, setReviewDialogOpen] = useState(false);
   const [selectedIds, setSelectedIds] = useState<string[]>([]);
 
@@ -41,12 +43,28 @@ export function DraftOrdersTab() {
           <TableHeader className="bg-background">
             <TableRow>
               <TableHead className="rounded-tl-md">
-                <span className="sr-only">Select</span>
+                <Checkbox
+                  checked={
+                    selectedIds.length === draftOrders.length &&
+                    !!draftOrders.length
+                  }
+                  disabled={!draftOrders.length}
+                  onCheckedChange={(checked) => {
+                    if (checked) {
+                      setSelectedIds(draftOrders.map((order) => order.id));
+                      return;
+                    }
+                    setSelectedIds([]);
+                  }}
+                />
               </TableHead>
               <TableHead>Order</TableHead>
               <TableHead>Trigger price</TableHead>
               <TableHead>Limit price</TableHead>
-              <TableHead className="rounded-tr-md">Current price</TableHead>
+              <TableHead>Current price</TableHead>
+              <TableCell className="rounded-tr-md">
+                <span className="sr-only">Actions</span>
+              </TableCell>
             </TableRow>
           </TableHeader>
           <TableBody>
@@ -56,6 +74,7 @@ export function DraftOrdersTab() {
                   <DraftOrderRow
                     order={order}
                     key={order.id}
+                    checked={selectedIds.includes(order.id)}
                     onSelect={(selected) => {
                       if (selected) {
                         setSelectedIds([...selectedIds, order.id]);
@@ -70,7 +89,7 @@ export function DraftOrdersTab() {
               })
             ) : (
               <TableRow>
-                <TableCell colSpan={5} className="text-center">
+                <TableCell colSpan={100} className="text-center">
                   <div className="py-4">
                     No draft orders. Create a new one to get started.
                   </div>
@@ -80,16 +99,10 @@ export function DraftOrdersTab() {
           </TableBody>
         </Table>
         <div className="flex justify-end gap-2">
-          <Button
-            variant="destructive"
-            disabled={!selectedIds.length}
-            onClick={() => {
-              removeDraftOrders(selectedIds);
-              setSelectedIds([]);
-            }}
-          >
-            Delete
-          </Button>
+          <RemoveDraftOrdersDialog
+            selectedIds={selectedIds}
+            setSelectedIds={setSelectedIds}
+          />
           <Button
             disabled={!selectedIds.length}
             onClick={() => {
@@ -107,10 +120,14 @@ export function DraftOrdersTab() {
 export function DraftOrderRow({
   order,
   onSelect,
+  checked,
 }: {
   order: DraftOrder;
+  checked: boolean;
   onSelect: (selected: boolean) => void;
 }) {
+  const [invertedPrice, setInvertedPrice] = useState(false);
+
   const orderDescription = getOrderDescription({
     tokenBuy: order.tokenBuy,
     tokenSell: order.tokenSell,
@@ -119,7 +136,9 @@ export function DraftOrderRow({
     amountBuy: order.amountBuy,
   });
 
-  const priceUnity = `${order.tokenBuy.symbol}/${order.tokenSell.symbol}`;
+  const priceUnity = invertedPrice
+    ? `${order.tokenSell.symbol}/${order.tokenBuy.symbol}`
+    : order.tokenBuy.symbol + "/" + order.tokenSell.symbol;
 
   const { data: marketPrice } = useTokenPairPrice(
     order.tokenSell,
@@ -130,6 +149,7 @@ export function DraftOrderRow({
     <TableRow className="text-xs">
       <TableCell>
         <Checkbox
+          checked={checked}
           onCheckedChange={(checked) => {
             onSelect(checked as boolean);
           }}
@@ -137,16 +157,30 @@ export function DraftOrderRow({
       </TableCell>
       <TableCell>{orderDescription}</TableCell>
       <TableCell>
-        {formatNumber(order.strikePrice, 4)} {priceUnity}
+        {formatNumber(
+          invertedPrice ? 1 / order.strikePrice : order.strikePrice,
+          4,
+        )}{" "}
+        {priceUnity}
       </TableCell>
       <TableCell>
-        {formatNumber(order.limitPrice, 4)} {priceUnity}
+        {formatNumber(
+          invertedPrice ? 1 / order.limitPrice : order.limitPrice,
+          4,
+        )}{" "}
+        {priceUnity}
       </TableCell>
       <TableCell>
         {marketPrice
-          ? ` ${formatNumber(marketPrice, 4)} ${priceUnity}`
+          ? ` ${formatNumber(invertedPrice ? 1 / marketPrice : marketPrice, 4)} ${priceUnity}`
           : `Market price not found`}
       </TableCell>
+      <OrderDropdownMenuCell
+        orderId={order.id}
+        invertedPrice={invertedPrice}
+        setInvertedPrice={setInvertedPrice}
+        showDetails={false}
+      />
     </TableRow>
   );
 }
diff --git a/src/components/HistoryOrdersTab.tsx b/src/components/HistoryOrdersTab.tsx
index d3efdfa..0c2ed2c 100644
--- a/src/components/HistoryOrdersTab.tsx
+++ b/src/components/HistoryOrdersTab.tsx
@@ -12,11 +12,13 @@ import {
 } from "@bleu/ui";
 import { useSafeAppsSDK } from "@safe-global/safe-apps-react-sdk";
 import { useRouter } from "next/navigation";
+import { useState } from "react";
 import { formatUnits } from "viem";
 
 import { useOrderList } from "#/hooks/useOrderList";
 import { StopLossOrderType } from "#/lib/types";
 
+import { OrderDropdownMenuCell } from "./OrderDropdownMenuCell";
 import { StatusBadge } from "./StatusBadge";
 
 export function HistoryOrdersTab() {
@@ -29,7 +31,10 @@ export function HistoryOrdersTab() {
         <TableCell>Order</TableCell>
         <TableCell>Trigger price</TableCell>
         <TableCell>Filled</TableCell>
-        <TableCell className="rounded-tr-md">Status</TableCell>
+        <TableCell>Status</TableCell>
+        <TableCell className="rounded-tr-md">
+          <span className="sr-only">Actions</span>
+        </TableCell>{" "}
       </TableHeader>
       <TableBody>
         {historyOrders.length ? (
@@ -38,7 +43,7 @@ export function HistoryOrdersTab() {
           })
         ) : (
           <TableRow>
-            <TableCell colSpan={5} className="text-center">
+            <TableCell colSpan={100} className="text-center">
               {isLoading ? (
                 <Spinner />
               ) : (
@@ -57,33 +62,35 @@ export function HistoryOrdersTab() {
 export function HistoryOrderRow({ order }: { order: StopLossOrderType }) {
   const { safe } = useSafeAppsSDK();
   const router = useRouter();
+  const [invertedPrice, setInvertedPrice] = useState(false);
 
   if (!order.stopLossData) {
     return null;
   }
 
-  const priceUnity =
-    order.stopLossData.tokenOut.symbol +
-    "/" +
-    order.stopLossData.tokenIn.symbol;
+  const priceUnity = invertedPrice
+    ? `${order.stopLossData.tokenIn.symbol}/${order.stopLossData.tokenOut.symbol}`
+    : order.stopLossData.tokenOut.symbol +
+      "/" +
+      order.stopLossData.tokenIn.symbol;
 
-  const triggerPrice = formatUnits(order.stopLossData?.strike, 18);
+  const triggerPrice = Number(formatUnits(order.stopLossData?.strike, 18));
 
   const amountSell = Number(
     formatUnits(
       order.stopLossData?.tokenAmountIn,
-      order.stopLossData.tokenIn.decimals
-    )
+      order.stopLossData.tokenIn.decimals,
+    ),
   );
   const amountBuy = Number(
     formatUnits(
       order.stopLossData?.tokenAmountOut,
-      order.stopLossData.tokenOut.decimals
-    )
+      order.stopLossData.tokenOut.decimals,
+    ),
   );
 
   const orderDateTime = epochToDate(
-    Number(order.blockTimestamp)
+    Number(order.blockTimestamp),
   ).toLocaleString();
 
   return (
@@ -104,12 +111,18 @@ export function HistoryOrderRow({ order }: { order: StopLossOrderType }) {
         </div>
       </TableCell>
       <TableCell>
-        {formatNumber(triggerPrice, 4)} {priceUnity}
+        {formatNumber(invertedPrice ? 1 / triggerPrice : triggerPrice, 4)}{" "}
+        {priceUnity}
       </TableCell>
       <TableCell>{((order.filledPct || 0) * 100).toFixed()}%</TableCell>
       <TableCell>
         <StatusBadge status={order.status} />
       </TableCell>
+      <OrderDropdownMenuCell
+        orderId={order.id}
+        invertedPrice={invertedPrice}
+        setInvertedPrice={setInvertedPrice}
+      />
     </TableRow>
   );
 }
diff --git a/src/components/OpenOrdersTab.tsx b/src/components/OpenOrdersTab.tsx
index c957043..32327dc 100644
--- a/src/components/OpenOrdersTab.tsx
+++ b/src/components/OpenOrdersTab.tsx
@@ -22,6 +22,7 @@ import { useTokenPairPrice } from "#/hooks/useTokenPairPrice";
 import { OrderCancelArgs, TRANSACTION_TYPES } from "#/lib/transactionFactory";
 import { IToken, StopLossOrderType } from "#/lib/types";
 
+import { OrderDropdownMenuCell } from "./OrderDropdownMenuCell";
 import { StatusBadge } from "./StatusBadge";
 import { Spinner } from "./ui/spinner";
 
@@ -53,20 +54,33 @@ export function OpenOrdersTab() {
       <Table className="w-full rounded-lg">
         <TableHeader className="bg-background">
           <TableCell className="rounded-tl-md">
-            <span className="sr-only">Select</span>
+            <Checkbox
+              checked={selectedIds.length === openOrders.length}
+              onCheckedChange={(checked) => {
+                if (checked) {
+                  setSelectedIds(openOrders.map((order) => order.id));
+                  return;
+                }
+                setSelectedIds([]);
+              }}
+            />
           </TableCell>
           <TableCell>Created</TableCell>
           <TableCell>Order</TableCell>
           <TableCell>Trigger price</TableCell>
-          <TableCell>Current market price</TableCell>
+          <TableCell>Current price</TableCell>
           <TableCell>Filled</TableCell>
-          <TableCell className="rounded-tr-md">Status</TableCell>
+          <TableCell>Status</TableCell>
+          <TableCell className="rounded-tr-md">
+            <span className="sr-only">Actions</span>
+          </TableCell>
         </TableHeader>
         <TableBody>
           {openOrders.length ? (
             openOrders.map((order) => {
               return (
                 <OpenOrderRow
+                  checked={selectedIds.includes(order.id)}
                   order={order}
                   key={order.id}
                   onSelect={(selected) => {
@@ -81,7 +95,7 @@ export function OpenOrdersTab() {
             })
           ) : (
             <TableRow>
-              <TableCell colSpan={7} className="text-center">
+              <TableCell colSpan={100} className="text-center">
                 {isLoading ? (
                   <Spinner />
                 ) : (
@@ -112,7 +126,9 @@ export function OpenOrdersTab() {
 export function OpenOrderRow({
   order,
   onSelect,
+  checked,
 }: {
+  checked: boolean;
   order: StopLossOrderType;
   onSelect: (selected: boolean) => void;
 }) {
@@ -121,35 +137,38 @@ export function OpenOrderRow({
 
   const { data: marketPrice } = useTokenPairPrice(
     order.stopLossData?.tokenIn as IToken,
-    order.stopLossData?.tokenOut as IToken
+    order.stopLossData?.tokenOut as IToken,
   );
 
+  const [invertedPrice, setInvertedPrice] = useState(false);
+
   if (!order.stopLossData) {
     return null;
   }
 
-  const priceUnity =
-    order.stopLossData.tokenOut.symbol +
-    "/" +
-    order.stopLossData.tokenIn.symbol;
+  const priceUnity = invertedPrice
+    ? `${order.stopLossData.tokenIn.symbol}/${order.stopLossData.tokenOut.symbol}`
+    : order.stopLossData.tokenOut.symbol +
+      "/" +
+      order.stopLossData.tokenIn.symbol;
 
-  const triggerPrice = formatUnits(order.stopLossData?.strike, 18);
+  const triggerPrice = Number(formatUnits(order.stopLossData?.strike, 18));
 
   const amountSell = Number(
     formatUnits(
       order.stopLossData?.tokenAmountIn,
-      order.stopLossData.tokenIn.decimals
-    )
+      order.stopLossData.tokenIn.decimals,
+    ),
   );
   const amountBuy = Number(
     formatUnits(
       order.stopLossData?.tokenAmountOut,
-      order.stopLossData.tokenOut.decimals
-    )
+      order.stopLossData.tokenOut.decimals,
+    ),
   );
 
   const orderDateTime = epochToDate(
-    Number(order.blockTimestamp)
+    Number(order.blockTimestamp),
   ).toLocaleString();
 
   return (
@@ -163,9 +182,10 @@ export function OpenOrderRow({
         onClick={(e) => {
           e.stopPropagation();
         }}
-        className="cursor-normal"
+        className="cursor-default"
       >
         <Checkbox
+          checked={checked}
           onCheckedChange={(checked) => {
             onSelect(checked as boolean);
           }}
@@ -182,17 +202,23 @@ export function OpenOrderRow({
         </div>
       </TableCell>
       <TableCell>
-        {formatNumber(triggerPrice, 4)} {priceUnity}
+        {formatNumber(invertedPrice ? 1 / triggerPrice : triggerPrice, 4)}{" "}
+        {priceUnity}
       </TableCell>
       <TableCell>
         {marketPrice
-          ? ` ${formatNumber(marketPrice, 4)} ${priceUnity}`
+          ? ` ${formatNumber(invertedPrice ? 1 / marketPrice : triggerPrice, 4)} ${priceUnity}`
           : `Loading...`}
       </TableCell>
       <TableCell>{((order.filledPct || 0) * 100).toFixed()}%</TableCell>
       <TableCell>
         <StatusBadge status={order.status} />
       </TableCell>
+      <OrderDropdownMenuCell
+        orderId={order.id}
+        invertedPrice={invertedPrice}
+        setInvertedPrice={setInvertedPrice}
+      />
     </TableRow>
   );
 }
diff --git a/src/components/OrderDetails.tsx b/src/components/OrderDetails.tsx
index 9ed0f36..430e0a5 100644
--- a/src/components/OrderDetails.tsx
+++ b/src/components/OrderDetails.tsx
@@ -9,30 +9,32 @@ import {
   formatNumber,
   Separator,
 } from "@bleu/ui";
-import { ArrowLeftIcon, CopyIcon, ReloadIcon } from "@radix-ui/react-icons";
-import { useSafeAppsSDK } from "@safe-global/safe-apps-react-sdk";
+import {
+  ArrowLeftIcon,
+  ArrowTopRightIcon,
+  CopyIcon,
+  ReloadIcon,
+} from "@radix-ui/react-icons";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 import useSWR from "swr";
 import { Address, formatUnits } from "viem";
 
-import { LinkComponent } from "#/components/link";
 import { OrderDetailsInformation } from "#/components/OrderDetailsInformation";
 import { StatusBadge } from "#/components/StatusBadge";
 import { TokenLogo } from "#/components/TokenLogo";
-import { InfoTooltip } from "#/components/tooltip";
+import { Spinner } from "#/components/ui/spinner";
+import { InfoTooltip } from "#/components/ui/tooltip";
+import { useOrder } from "#/contexts/ordersContext";
+import { COMPOSABLE_COW_ADDRESS } from "#/lib/contracts";
 import { getProcessedStopLossOrder } from "#/lib/orderFetcher";
 import { ChainId } from "#/lib/publicClients";
 import { formatTimeDelta } from "#/lib/timeDelta";
 import { TOOLTIP_DESCRIPTIONS } from "#/lib/tooltipDescriptions";
-import {
-  buildBlockExplorerTokenURL,
-  buildBlockExplorerTxUrl,
-  buildOrderCowExplorerUrl,
-  truncateAddress,
-} from "#/utils";
-import { Spinner } from "./Spinner";
-import { useOrder } from "#/contexts/ordersContext";
 import { OrderCancelArgs, TRANSACTION_TYPES } from "#/lib/transactionFactory";
+import { buildOrderCowExplorerUrl, truncateAddress } from "#/utils";
+
+import { BlockExplorerLink } from "./ExplorerLink";
 
 export function OrderDetails({
   orderId,
@@ -43,9 +45,8 @@ export function OrderDetails({
   address: Address;
   chainId: ChainId;
 }) {
-  const { safe } = useSafeAppsSDK();
   const orderFetcher = async () => {
-    return await getProcessedStopLossOrder({
+    return getProcessedStopLossOrder({
       chainId,
       orderId,
       address,
@@ -56,7 +57,9 @@ export function OrderDetails({
     isValidating,
     isLoading,
     mutate,
-  } = useSWR(["orderDetails"], orderFetcher);
+  } = useSWR([orderId], orderFetcher);
+
+  const router = useRouter();
 
   const {
     txManager: { writeContract, isPonderUpdating },
@@ -73,13 +76,13 @@ export function OrderDetails({
   }
 
   const orderDateTime = formatDateTime(
-    epochToDate(Number(order?.blockTimestamp))
+    epochToDate(Number(order?.blockTimestamp)),
   );
   const orderWaitTime = formatTimeDelta(
-    order?.stopLossData?.validityBucketSeconds as number
+    order?.stopLossData?.validityBucketSeconds as number,
   );
   const maxOracleUpdateTime = formatTimeDelta(
-    order?.stopLossData?.maxTimeSinceLastOracleUpdate as number
+    order?.stopLossData?.maxTimeSinceLastOracleUpdate as number,
   );
 
   const amountIn =
@@ -113,12 +116,9 @@ export function OrderDetails({
     <div className="flex size-full justify-center items-center">
       <div className="bg-foreground my-10 text-white p-10 rounded relative">
         <div className="flex flex-row justify-between items-center mb-5">
-          <LinkComponent
-            href={`/${safe.chainId}/${safe.safeAddress}`}
-            className="hover:text-primary"
-          >
+          <button onClick={router.back}>
             <ArrowLeftIcon className="size-4" />
-          </LinkComponent>
+          </button>
           <div className="flex gap-2 items-center justify-start">
             <h1 className="text-2xl font-bold">Order Details</h1>
             {isUpdating ? (
@@ -142,20 +142,17 @@ export function OrderDetails({
         </div>
         <div className="flex flex-col gap-y-1">
           <OrderDetailsInformation
-            label="Order creation"
+            label="Order Creation"
             tooltipText={TOOLTIP_DESCRIPTIONS.ORDER_CREATION}
           >
             <div className="flex items-center gap-x-1">
-              <a
-                target="_blank"
-                href={buildBlockExplorerTxUrl({
-                  txHash: order?.txHash as string,
-                  chainId: order?.chainId,
-                })}
-                className="hover:text-primary hover:underline"
-              >
-                {order?.txHash}
-              </a>
+              {order?.txHash}
+              <BlockExplorerLink
+                type="transaction"
+                label={<ArrowTopRightIcon />}
+                identifier={order?.txHash}
+                networkId={chainId as ChainId}
+              />
               <ClickToCopy text={order?.txHash as string}>
                 <CopyIcon className="hover:text-primary" />
               </ClickToCopy>
@@ -167,6 +164,12 @@ export function OrderDetails({
           >
             <div className="flex items-center gap-x-1">
               {order?.hash}
+              <BlockExplorerLink
+                type="address"
+                label={<ArrowTopRightIcon />}
+                identifier={COMPOSABLE_COW_ADDRESS}
+                networkId={chainId as ChainId}
+              />
               <ClickToCopy text={order?.hash as string}>
                 <CopyIcon className="hover:text-primary" />
               </ClickToCopy>
@@ -210,6 +213,12 @@ export function OrderDetails({
           >
             <div className="flex items-center gap-x-1">
               {order?.stopLossData?.to}
+              <BlockExplorerLink
+                type="address"
+                label={<ArrowTopRightIcon />}
+                identifier={order?.stopLossData?.to}
+                networkId={chainId as ChainId}
+              />
               <ClickToCopy text={order?.stopLossData?.to as string}>
                 <CopyIcon className="hover:text-primary" />
               </ClickToCopy>
@@ -231,17 +240,13 @@ export function OrderDetails({
                 <InfoTooltip
                   text={amountIn.toFixed(order?.stopLossData?.tokenIn.decimals)}
                 />
-                <a
-                  target="_blank"
-                  href={buildBlockExplorerTokenURL({
-                    tokenAddress: order?.stopLossData?.tokenIn
-                      .address as Address,
-                    chainId: order?.chainId,
-                  })}
-                  className="hover:text-primary hover:underline"
-                >
-                  {order?.stopLossData?.tokenIn.symbol}
-                </a>
+                {order?.stopLossData?.tokenIn.symbol}
+                <BlockExplorerLink
+                  type="address"
+                  label={<ArrowTopRightIcon />}
+                  identifier={order?.stopLossData?.tokenIn.address}
+                  networkId={chainId as ChainId}
+                />
                 <TokenLogo
                   tokenAddress={order?.stopLossData?.tokenIn.address.toLowerCase()}
                   chainId={order?.chainId as ChainId}
@@ -259,20 +264,16 @@ export function OrderDetails({
                 {formatNumber(amountOut, 4)}{" "}
                 <InfoTooltip
                   text={amountOut.toFixed(
-                    order?.stopLossData?.tokenOut.decimals
+                    order?.stopLossData?.tokenOut.decimals,
                   )}
                 />
-                <a
-                  target="_blank"
-                  href={buildBlockExplorerTokenURL({
-                    tokenAddress: order?.stopLossData?.tokenOut
-                      .address as Address,
-                    chainId: order?.chainId,
-                  })}
-                  className="hover:text-primary hover:underline"
-                >
-                  {order?.stopLossData?.tokenOut.symbol}
-                </a>
+                {order?.stopLossData?.tokenOut.symbol}
+                <BlockExplorerLink
+                  type="address"
+                  label={<ArrowTopRightIcon />}
+                  identifier={order?.stopLossData?.tokenOut.address}
+                  networkId={chainId as ChainId}
+                />
                 <TokenLogo
                   tokenAddress={order?.stopLossData?.tokenOut.address}
                   chainId={order?.chainId as ChainId}
@@ -335,6 +336,12 @@ export function OrderDetails({
           >
             <div className="flex items-center gap-x-1">
               {order?.stopLossData?.sellTokenPriceOracle}
+              <BlockExplorerLink
+                type="address"
+                label={<ArrowTopRightIcon />}
+                identifier={order?.stopLossData?.sellTokenPriceOracle}
+                networkId={chainId as ChainId}
+              />
               <ClickToCopy
                 text={order?.stopLossData?.sellTokenPriceOracle as string}
               >
@@ -348,6 +355,12 @@ export function OrderDetails({
           >
             <div className="flex items-center gap-x-1">
               {order?.stopLossData?.buyTokenPriceOracle}
+              <BlockExplorerLink
+                type="address"
+                label={<ArrowTopRightIcon />}
+                identifier={order?.stopLossData?.buyTokenPriceOracle}
+                networkId={chainId as ChainId}
+              />
               <ClickToCopy
                 text={order?.stopLossData?.buyTokenPriceOracle as string}
               >
@@ -366,10 +379,11 @@ export function OrderDetails({
               <div className="flex flex-col gap-1">
                 {order.cowOrders.map((cowOrder) => (
                   <div className="flex items-center gap-x-1">
+                    {truncateAddress(cowOrder.uid)}
                     <Link
                       className={cn(
                         "hover:text-primary hover:underline",
-                        order.status === "fulfilled" ? "font-bold" : ""
+                        order.status === "fulfilled" ? "font-bold" : "",
                       )}
                       href={buildOrderCowExplorerUrl({
                         chainId: order?.chainId as ChainId,
@@ -378,7 +392,7 @@ export function OrderDetails({
                       rel="noreferrer noopener"
                       target="_blank"
                     >
-                      {truncateAddress(cowOrder.uid)}
+                      <ArrowTopRightIcon />
                     </Link>
                     <ClickToCopy text={cowOrder.uid}>
                       <CopyIcon className="hover:text-primary" />
diff --git a/src/components/OrderDetailsInformation.tsx b/src/components/OrderDetailsInformation.tsx
index 3d40b2f..07e7873 100644
--- a/src/components/OrderDetailsInformation.tsx
+++ b/src/components/OrderDetailsInformation.tsx
@@ -1,4 +1,4 @@
-import { InfoTooltip } from "#/components/tooltip";
+import { InfoTooltip } from "#/components/ui/tooltip";
 
 export function OrderDetailsInformation({
   label,
diff --git a/src/components/OrderDropdownMenuCell.tsx b/src/components/OrderDropdownMenuCell.tsx
new file mode 100644
index 0000000..0348b95
--- /dev/null
+++ b/src/components/OrderDropdownMenuCell.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  TableCell,
+} from "@bleu/ui";
+import { DotsVerticalIcon } from "@radix-ui/react-icons";
+import { useSafeAppsSDK } from "@safe-global/safe-apps-react-sdk";
+import { useRouter } from "next/navigation";
+
+export function OrderDropdownMenuCell({
+  orderId,
+  invertedPrice,
+  setInvertedPrice,
+  showDetails = true,
+}: {
+  orderId: string;
+  invertedPrice: boolean;
+  setInvertedPrice: (invertedPrice: boolean) => void;
+  showDetails?: boolean;
+}) {
+  const { safe } = useSafeAppsSDK();
+  const router = useRouter();
+  return (
+    <TableCell
+      className="cursor-default"
+      onClick={(e) => {
+        e.stopPropagation();
+      }}
+    >
+      <DropdownMenu>
+        <DropdownMenuTrigger>
+          <DotsVerticalIcon className="size-4 hover:text-primary" />
+        </DropdownMenuTrigger>
+        <DropdownMenuPortal>
+          <DropdownMenuContent>
+            {showDetails && (
+              <DropdownMenuItem
+                className="cursor-pointer"
+                onSelect={() =>
+                  router.push(`/${safe.chainId}/${safe.safeAddress}/${orderId}`)
+                }
+              >
+                Check details
+              </DropdownMenuItem>
+            )}
+            <DropdownMenuItem
+              onSelect={() => {
+                setInvertedPrice(!invertedPrice);
+              }}
+              className="cursor-pointer"
+              onClick={(e) => {
+                e.stopPropagation();
+              }}
+            >
+              Invert price
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenuPortal>
+      </DropdownMenu>
+    </TableCell>
+  );
+}
diff --git a/src/components/OrdersTabs.tsx b/src/components/OrdersTabs.tsx
index 839b6fc..d732cc5 100644
--- a/src/components/OrdersTabs.tsx
+++ b/src/components/OrdersTabs.tsx
@@ -31,7 +31,10 @@ export function OrderTabs() {
   return (
     <TabsRoot
       className="w-3/4 h-[70vh] flex flex-col gap-2"
-      defaultValue="draft"
+      defaultValue={localStorage.getItem("tabValue") || "draft"}
+      onValueChange={(tabValue) => {
+        localStorage.setItem("tabValue", tabValue);
+      }}
     >
       <div className="flex flex-row justify-between items-center">
         <div className="flex gap-2 items-center">
diff --git a/src/components/PriceInputCard.tsx b/src/components/PriceInputCard.tsx
index c240be6..fb45762 100644
--- a/src/components/PriceInputCard.tsx
+++ b/src/components/PriceInputCard.tsx
@@ -84,6 +84,7 @@ function PriceInputCardComponent({
       setValue(fieldName, newFormPrice);
       setDisplayPrice(inputValue);
     } else {
+      setValue(fieldName, 0);
       setDisplayPrice(undefined);
     }
   };
diff --git a/src/components/RemoveDraftOrdersDialog.tsx b/src/components/RemoveDraftOrdersDialog.tsx
new file mode 100644
index 0000000..f54fd83
--- /dev/null
+++ b/src/components/RemoveDraftOrdersDialog.tsx
@@ -0,0 +1,62 @@
+"use client";
+
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+} from "@bleu/ui";
+import { useState } from "react";
+
+import { useOrder } from "#/contexts/ordersContext";
+
+export function RemoveDraftOrdersDialog({
+  selectedIds,
+  setSelectedIds,
+}: {
+  selectedIds: string[];
+  setSelectedIds: (ids: string[]) => void;
+}) {
+  const { removeDraftOrders } = useOrder();
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button
+          variant="destructive"
+          type="button"
+          disabled={!selectedIds.length}
+        >
+          Delete
+        </Button>
+      </DialogTrigger>
+      <DialogPortal>
+        <DialogOverlay />
+        <DialogContent className="max-w-[450px]">
+          <div className="flex flex-col gap-2 w-full">
+            <DialogTitle>Delete draft orders</DialogTitle>
+            <span className="text-wrap">
+              Are you sure you want to delete the all the selected draft orders?
+            </span>
+            <Button
+              className="w-full mt-3"
+              variant="destructive"
+              type="button"
+              onClick={() => {
+                removeDraftOrders(selectedIds);
+                setSelectedIds([]);
+                setOpen(false);
+              }}
+            >
+              Delete
+            </Button>
+          </div>
+        </DialogContent>
+      </DialogPortal>
+    </Dialog>
+  );
+}
diff --git a/src/components/ReviewOrdersDialog.tsx b/src/components/ReviewOrdersDialog.tsx
index 542e841..0dd367d 100644
--- a/src/components/ReviewOrdersDialog.tsx
+++ b/src/components/ReviewOrdersDialog.tsx
@@ -77,10 +77,10 @@ export function ReviewOrdersDialog({
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent
         className={cn(
-          "data-[state=open]:animate-contentShow rounded-lg focus:outline-none bg-foreground w-[90vw] max-w-[450px]",
+          "data-[state=open]:animate-contentShow rounded-lg focus:outline-none bg-foreground w-[90vw] max-w-[450px] py-6 px-2",
         )}
       >
-        <div className="flex flex-col gap-2 w-full overflow-y-scroll scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-thumb-primary scrollbar-track-background scrollbar-w-4 max-h-[85vh]">
+        <div className="flex flex-col gap-2 w-full overflow-y-scroll scrollbar scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-thumb-primary scrollbar-track-background scrollbar-w-4 max-h-[85vh] px-3">
           <div className="text-2xl font-medium ">
             Review Stop Loss order{multipleOrders ? "s" : ""}
           </div>
@@ -110,8 +110,8 @@ export function ReviewOrdersDialog({
           )}
           <Button className="w-full mt-3" onClick={onSubmit}>
             {multipleOrders
-              ? `Place all ${draftOrders.length} Stop Loss orders`
-              : `Place Stop Loss order${multipleOrders ? "s" : ""}`}
+              ? `Place all ${draftOrders.length} Stop Loss Orders`
+              : `Place Stop Loss Order`}
           </Button>
           {showAddOrders && (
             <Button
@@ -151,7 +151,10 @@ function OrderContent({ order }: { order: DraftOrder }) {
         token={order.tokenBuy}
         balance={order.amountBuy}
       />
-      <OraclePriceWarning draftOrder={order} />
+      <OraclePriceWarning
+        draftOrder={order}
+        marketPrice={marketPrice || order.fallbackMarketPrice}
+      />
       <div className="w-full flex flex-col gap-1 mt-2">
         <OrderInformation
           title="Trigger price"
diff --git a/src/components/TokenInputCard.tsx b/src/components/TokenInputCard.tsx
index 6f1b450..32043c5 100644
--- a/src/components/TokenInputCard.tsx
+++ b/src/components/TokenInputCard.tsx
@@ -38,7 +38,6 @@ function TokenInputCardComponent({ side }: { side: "Sell" | "Buy" }) {
   const amountFieldName = `amount${side}` as const;
 
   const [isAmountDisabled, setIsAmountDisabled] = useState(false);
-  const [tokenBalance, setTokenBalance] = useState<string>();
 
   const [token, isSellOrder, amount] = useWatch({
     control,
@@ -47,7 +46,17 @@ function TokenInputCardComponent({ side }: { side: "Sell" | "Buy" }) {
 
   const { data: usdPrice } = useTokenPrice(token);
 
-  const { updateOracle } = useSwapCardContext();
+  const {
+    updateOracle,
+    tokenSellBalance,
+    tokenBuyBalance,
+    setTokenBuyBalance,
+    setTokenSellBalance,
+  } = useSwapCardContext();
+  const tokenBalance = side === "Buy" ? tokenBuyBalance : tokenSellBalance;
+  const setTokenBalance =
+    side === "Buy" ? setTokenBuyBalance : setTokenSellBalance;
+
   async function updateOtherSideAmount() {
     const limitPrice = getValues("limitPrice");
     if (!limitPrice) return;
@@ -59,7 +68,7 @@ function TokenInputCardComponent({ side }: { side: "Sell" | "Buy" }) {
     const anotherSideAmount = side === "Buy" ? sellAmount : buyAmount;
     setValue(
       `amount${side === "Buy" ? "Sell" : "Buy"}` as const,
-      anotherSideAmount
+      anotherSideAmount,
     );
   }
 
@@ -75,7 +84,7 @@ function TokenInputCardComponent({ side }: { side: "Sell" | "Buy" }) {
   useEffect(() => {
     // Control if the amount field should be disabled
     setIsAmountDisabled(
-      (isSellOrder && side === "Buy") || (!isSellOrder && side === "Sell")
+      (isSellOrder && side === "Buy") || (!isSellOrder && side === "Sell"),
     );
   }, [isSellOrder, side]);
 
@@ -122,7 +131,7 @@ function TokenInputCardComponent({ side }: { side: "Sell" | "Buy" }) {
                   4,
                   "decimal",
                   "standard",
-                  0.0001
+                  0.0001,
                 )}{" "}
               </span>
               {!isAmountDisabled &&
@@ -136,7 +145,7 @@ function TokenInputCardComponent({ side }: { side: "Sell" | "Buy" }) {
                     onClick={() => {
                       setValue(
                         amountFieldName,
-                        Number(convertStringToNumberAndRoundDown(tokenBalance))
+                        Number(convertStringToNumberAndRoundDown(tokenBalance)),
                       );
                     }}
                   >
@@ -164,7 +173,7 @@ function TokenInputCardComponent({ side }: { side: "Sell" | "Buy" }) {
               amount && usdPrice ? amount * (usdPrice || 0) : 0,
               2,
               "currency",
-              "standard"
+              "standard",
             )}`}
           </i>
         </div>
diff --git a/src/components/TokenSelect.tsx b/src/components/TokenSelect.tsx
index aac502c..172f3a2 100644
--- a/src/components/TokenSelect.tsx
+++ b/src/components/TokenSelect.tsx
@@ -49,7 +49,7 @@ export function TokenSelect({
     try {
       const importedToken = await fetchTokenInfo(
         search as Address,
-        chainId as ChainId
+        chainId as ChainId,
       );
       handleSelectToken(importedToken);
       tokenList.addImportedToken(importedToken);
@@ -74,7 +74,7 @@ export function TokenSelect({
               "flex px-2 justify-between rounded-full space-x-1",
               selectedToken
                 ? "bg-foreground text-white hover:text-primary-foreground"
-                : ""
+                : "",
             )}
             disabled={disabled}
             onClick={() => setOpen(true)}
diff --git a/src/components/swap-card/SwapCardSubmitButton.tsx b/src/components/swap-card/SwapCardSubmitButton.tsx
index a7974bd..dfbcaa4 100644
--- a/src/components/swap-card/SwapCardSubmitButton.tsx
+++ b/src/components/swap-card/SwapCardSubmitButton.tsx
@@ -1,18 +1,12 @@
 "use client";
 
 import { Button } from "@bleu/ui";
-import { FieldErrors, useFormContext, useWatch } from "react-hook-form";
-import { Address } from "viem";
+import { useFormContext, useWatch } from "react-hook-form";
 
 import { useOrder } from "#/contexts/ordersContext";
 import { useSwapCardContext } from "#/contexts/swapCardContext";
 import { useTokenPairPrice } from "#/hooks/useTokenPairPrice";
-import {
-  AdvancedSwapSettings,
-  DraftOrder,
-  IToken,
-  SwapData,
-} from "#/lib/types";
+import { SwapData } from "#/lib/types";
 
 export function SwapCardSubmitButton() {
   const { draftOrders } = useOrder();
@@ -20,8 +14,13 @@ export function SwapCardSubmitButton() {
     formState: { isSubmitting, errors },
     control,
   } = useFormContext<SwapData>();
-  const { tokenBuyOracle, tokenSellOracle, advancedSettings, isLoading } =
-    useSwapCardContext();
+  const {
+    tokenBuyOracle,
+    tokenSellOracle,
+    advancedSettings,
+    isLoading,
+    tokenSellBalance,
+  } = useSwapCardContext();
   const [tokenBuy, tokenSell, buyAmount, sellAmount, strikePrice, limitPrice] =
     useWatch({
       control,
@@ -37,20 +36,93 @@ export function SwapCardSubmitButton() {
 
   const { data: marketPrice } = useTokenPairPrice(tokenSell, tokenBuy);
 
-  const { disabled, text } = getButtonState({
-    draftOrders,
-    tokenBuy,
-    tokenSell,
-    buyAmount,
-    sellAmount,
-    strikePrice,
-    marketPrice,
-    limitPrice,
-    tokenSellOracle,
-    tokenBuyOracle,
-    advancedSettings,
-    errors,
-  });
+  function getButtonState(): {
+    disabled: boolean;
+    text: string;
+  } {
+    if (draftOrders.length > 4) {
+      return {
+        disabled: true,
+        text: "You can only have 5 draft orders at a time",
+      };
+    }
+    if (!tokenBuy || !tokenSell) {
+      return {
+        disabled: true,
+        text: "Select tokens",
+      };
+    }
+    if (tokenBuy.address.toLowerCase() === tokenSell.address.toLowerCase()) {
+      return {
+        disabled: true,
+        text: "Tokens must be different",
+      };
+    }
+    if (!buyAmount && !sellAmount) {
+      return {
+        disabled: true,
+        text: "Enter amounts",
+      };
+    }
+    if (sellAmount > Number(tokenSellBalance)) {
+      return {
+        disabled: true,
+        text: "Insufficient balance",
+      };
+    }
+    if (!limitPrice) {
+      return {
+        disabled: true,
+        text: "Set the limit price",
+      };
+    }
+    if (!strikePrice) {
+      return {
+        disabled: true,
+        text: "Set the trigger price",
+      };
+    }
+    if (marketPrice && strikePrice > marketPrice) {
+      return {
+        disabled: true,
+        text: "Trigger price must be lower than market price",
+      };
+    }
+    if (
+      (!tokenBuyOracle && !advancedSettings.tokenBuyOracle) ||
+      (!tokenSellOracle && !advancedSettings.tokenSellOracle)
+    ) {
+      return {
+        disabled: true,
+        text: "Error finding token oracles, set it manually in advanced settings",
+      };
+    }
+
+    if (!marketPrice) {
+      return {
+        disabled: true,
+        text: "Error quoting tokens, make sure that CoW supports them.",
+      };
+    }
+    if (Object.values(errors).length) {
+      const errorList = Object.values(errors);
+      const firstErrorMessage = errorList[0];
+      const firstErrorKey = Object.keys(errors).find(
+        // @ts-ignore
+        (key) => errors[key] === firstErrorMessage,
+      );
+      return {
+        disabled: false,
+        text: `Error on ${firstErrorKey}: ${firstErrorMessage}. Click to try again`,
+      };
+    }
+    return {
+      disabled: false,
+      text: "Review Stop Loss order",
+    };
+  }
+
+  const { disabled, text } = getButtonState();
 
   return (
     <Button
@@ -64,109 +136,3 @@ export function SwapCardSubmitButton() {
     </Button>
   );
 }
-
-function getButtonState({
-  draftOrders,
-  tokenBuy,
-  tokenSell,
-  buyAmount,
-  sellAmount,
-  strikePrice,
-  marketPrice,
-  limitPrice,
-  tokenSellOracle,
-  tokenBuyOracle,
-  advancedSettings,
-  errors,
-}: {
-  draftOrders: DraftOrder[];
-  tokenBuy?: IToken;
-  tokenSell?: IToken;
-  buyAmount?: number;
-  sellAmount?: number;
-  strikePrice?: number;
-  marketPrice?: number;
-  limitPrice?: number;
-  tokenSellOracle?: Address;
-  tokenBuyOracle?: Address;
-  advancedSettings: AdvancedSwapSettings;
-  errors: FieldErrors<SwapData>;
-}): {
-  disabled: boolean;
-  text: string;
-} {
-  if (draftOrders.length > 4) {
-    return {
-      disabled: true,
-      text: "You can only have 5 draft orders at a time",
-    };
-  }
-  if (!tokenBuy || !tokenSell) {
-    return {
-      disabled: true,
-      text: "Select tokens",
-    };
-  }
-  if (tokenBuy.address.toLowerCase() === tokenSell.address.toLowerCase()) {
-    return {
-      disabled: true,
-      text: "Tokens must be different",
-    };
-  }
-  if (!buyAmount && !sellAmount) {
-    return {
-      disabled: true,
-      text: "Enter amounts",
-    };
-  }
-  if (!limitPrice) {
-    return {
-      disabled: true,
-      text: "Set the limit price",
-    };
-  }
-  if (!strikePrice) {
-    return {
-      disabled: true,
-      text: "Set the trigger price",
-    };
-  }
-  if (marketPrice && strikePrice > marketPrice) {
-    return {
-      disabled: true,
-      text: "Trigger price must be lower than market price",
-    };
-  }
-  if (
-    (!tokenBuyOracle && !advancedSettings.tokenBuyOracle) ||
-    (!tokenSellOracle && !advancedSettings.tokenSellOracle)
-  ) {
-    return {
-      disabled: true,
-      text: "Error finding token oracles, set it manually in advanced settings",
-    };
-  }
-
-  if (!marketPrice) {
-    return {
-      disabled: true,
-      text: "Error quoting tokens, make sure that CoW supports them.",
-    };
-  }
-  if (Object.values(errors).length) {
-    const errorList = Object.values(errors);
-    const firstErrorMessage = errorList[0];
-    const firstErrorKey = Object.keys(errors).find(
-      // @ts-ignore
-      (key) => errors[key] === firstErrorMessage
-    );
-    return {
-      disabled: false,
-      text: `Error on ${firstErrorKey}: ${firstErrorMessage}. Click to try again`,
-    };
-  }
-  return {
-    disabled: false,
-    text: "Review Stop Loss order",
-  };
-}
diff --git a/src/components/swap-card/SwapForm.tsx b/src/components/swap-card/SwapForm.tsx
index 2f4c3a9..bced1c7 100644
--- a/src/components/swap-card/SwapForm.tsx
+++ b/src/components/swap-card/SwapForm.tsx
@@ -27,7 +27,7 @@ export function SwapForm() {
 
   const formSchema = React.useMemo(
     () => generateSwapSchema(chainId as ChainId),
-    [chainId]
+    [chainId],
   );
 
   const {
diff --git a/src/contexts/appContext.tsx b/src/contexts/appContext.tsx
index f5f869f..8bb26cb 100644
--- a/src/contexts/appContext.tsx
+++ b/src/contexts/appContext.tsx
@@ -8,7 +8,7 @@ import { useTransaction } from "../hooks/useTransaction";
 import { useUIState } from "../hooks/useUIState";
 
 const AppContext = createContext<ReturnType<typeof useAppState> | undefined>(
-  undefined
+  undefined,
 );
 
 function useAppState() {
diff --git a/src/contexts/ordersContext.tsx b/src/contexts/ordersContext.tsx
index e652319..5501b61 100644
--- a/src/contexts/ordersContext.tsx
+++ b/src/contexts/ordersContext.tsx
@@ -48,7 +48,7 @@ export function OrderProvider({ children }: PropsWithChildren) {
     getProcessedStopLossOrders,
     {
       fallbackData: [],
-    }
+    },
   );
 
   const [txPendingDialog, setTxPendingDialog] = useState(false);
diff --git a/src/contexts/swapCardContext.tsx b/src/contexts/swapCardContext.tsx
index cfbbb75..d39748c 100644
--- a/src/contexts/swapCardContext.tsx
+++ b/src/contexts/swapCardContext.tsx
@@ -34,10 +34,14 @@ interface ISwapContext {
   isLoading: boolean;
   firstAccess: boolean;
   setFirstAccess: (data: boolean) => void;
+  tokenSellBalance?: string;
+  tokenBuyBalance?: string;
+  setTokenSellBalance: (data: string) => void;
+  setTokenBuyBalance: (data: string) => void;
 }
 
 export const SwapCardContext = React.createContext<ISwapContext>(
-  {} as ISwapContext
+  {} as ISwapContext,
 );
 
 const loadAdvancedSettings = (safeAddress: string): AdvancedSwapSettings => {
@@ -62,8 +66,10 @@ export const SwapCardContextProvider = ({
   const { safeAddress, chainId } = useSafeApp();
   const { draftOrders } = useOrder();
   const [reviewDialogOpen, setReviewDialogOpen] = React.useState(false);
+  const [tokenSellBalance, setTokenSellBalance] = React.useState<string>();
+  const [tokenBuyBalance, setTokenBuyBalance] = React.useState<string>();
   const [firstAccess, setFirstAccess] = React.useState(
-    localStorage.getItem("firstAccess") === null
+    localStorage.getItem("firstAccess") === null,
   );
 
   const [oracleRoute, setOracleRoute] = React.useState<IRoute>();
@@ -167,6 +173,10 @@ export const SwapCardContextProvider = ({
   return (
     <SwapCardContext.Provider
       value={{
+        tokenSellBalance,
+        tokenBuyBalance,
+        setTokenSellBalance,
+        setTokenBuyBalance,
         isLoading,
         reviewDialogOpen,
         setReviewDialogOpen,
diff --git a/src/contexts/tokensContext.tsx b/src/contexts/tokensContext.tsx
index 2321ad7..7629996 100644
--- a/src/contexts/tokensContext.tsx
+++ b/src/contexts/tokensContext.tsx
@@ -27,7 +27,7 @@ interface ITokensContext {
 }
 
 export const TokensContext = React.createContext<ITokensContext>(
-  {} as ITokensContext
+  {} as ITokensContext,
 );
 
 function fetchFromLocalStorage<T>(key: string): T | null {
@@ -58,7 +58,7 @@ export const TokensContextProvider = ({
   function getTokenList() {
     return [
       ...(cowTokenList.filter(
-        (token) => token.chainId === chainId
+        (token) => token.chainId === chainId,
       ) as IToken[]),
       ...importedTokenList,
     ];
@@ -69,7 +69,7 @@ export const TokensContextProvider = ({
     const currentTimestamp = Date.now();
     const savedPriceInfo = tokenPricesMapping?.[token.address.toLowerCase()];
     if (savedPriceInfo && savedPriceInfo.validUntil > currentTimestamp) {
-      return tokenPricesMapping[token.address].price;
+      return savedPriceInfo.price;
     }
 
     const tokenPrice = await fetchTokenUsdPrice({
@@ -97,7 +97,7 @@ export const TokensContextProvider = ({
     setImportedTokenList(newImportedTokenList);
     localStorage.setItem(
       "importedTokens",
-      JSON.stringify(newImportedTokenList)
+      JSON.stringify(newImportedTokenList),
     );
   }
 
@@ -105,7 +105,7 @@ export const TokensContextProvider = ({
     const importedTokens =
       fetchFromLocalStorage<ITokenWithChainId[]>("importedTokens");
     setImportedTokenList(
-      importedTokens?.filter((token) => token.chainId === chainId) || []
+      importedTokens?.filter((token) => token.chainId === chainId) || [],
     );
   }, [chainId]);
 
diff --git a/src/hooks/useOrderList.ts b/src/hooks/useOrderList.ts
index 1720464..e374e84 100644
--- a/src/hooks/useOrderList.ts
+++ b/src/hooks/useOrderList.ts
@@ -20,17 +20,17 @@ export const useOrderList = () => {
         chainId: cid as ChainId,
         address: address as `0x${string}`,
       }),
-    { refreshInterval: 60_000 }
+    { refreshInterval: 60_000 },
   );
 
   const openOrders =
     orders?.filter(
-      (order) => order.singleOrder && order.status !== "fulfilled"
+      (order) => order.singleOrder && order.status !== "fulfilled",
     ) || [];
 
   const historyOrders =
     orders?.filter(
-      (order) => !order.singleOrder || order.status === "fulfilled"
+      (order) => !order.singleOrder || order.status === "fulfilled",
     ) || [];
 
   return {
diff --git a/src/hooks/useSwap.ts b/src/hooks/useSwap.ts
index ab7216a..6c4a8fb 100644
--- a/src/hooks/useSwap.ts
+++ b/src/hooks/useSwap.ts
@@ -39,13 +39,13 @@ export function useSwap() {
       }
       setIsLoading(false);
     },
-    [chainId]
+    [chainId],
   );
 
   const createDraftOrder = useCallback(
     async (
       data: SwapData,
-      advancedSettings: AdvancedSwapSettings
+      advancedSettings: AdvancedSwapSettings,
     ): Promise<DraftOrder> => {
       let tokenBuyOracle = advancedSettings.tokenBuyOracle;
       let tokenSellOracle = advancedSettings.tokenSellOracle;
@@ -97,7 +97,7 @@ export function useSwap() {
 
       return draftOrder;
     },
-    [chainId, oracleRoute]
+    [chainId, oracleRoute],
   );
 
   return {
diff --git a/src/hooks/useTokenList.ts b/src/hooks/useTokenList.ts
index 22c01de..bef79f7 100644
--- a/src/hooks/useTokenList.ts
+++ b/src/hooks/useTokenList.ts
@@ -17,7 +17,7 @@ export function useTokenList() {
         chainId: ChainId;
       })[];
       setImportedTokenList(
-        parsedTokens.filter((token) => token.chainId === chainId)
+        parsedTokens.filter((token) => token.chainId === chainId),
       );
     }
   }, [chainId]);
@@ -35,7 +35,7 @@ export function useTokenList() {
     setImportedTokenList(newImportedTokenList);
     localStorage.setItem(
       "importedTokens",
-      JSON.stringify(newImportedTokenList)
+      JSON.stringify(newImportedTokenList),
     );
   }
 
diff --git a/src/hooks/useTransaction.ts b/src/hooks/useTransaction.ts
index 7fd2c64..db5d73a 100644
--- a/src/hooks/useTransaction.ts
+++ b/src/hooks/useTransaction.ts
@@ -12,7 +12,7 @@ export function useTransaction() {
 
   const sendTransactions = async (argsArray: AllTransactionArgs[]) => {
     const txs = await Promise.all(
-      argsArray.map((arg) => TransactionFactory.createRawTx(arg.type, arg))
+      argsArray.map((arg) => TransactionFactory.createRawTx(arg.type, arg)),
     );
     const { safeTxHash } = await sdk.txs.send({ txs });
     return safeTxHash as `0x${string}`;
diff --git a/src/hooks/useUIState.ts b/src/hooks/useUIState.ts
index 7800942..8b3ab54 100644
--- a/src/hooks/useUIState.ts
+++ b/src/hooks/useUIState.ts
@@ -5,7 +5,7 @@ export function useUIState() {
   const [reviewDialogOpen, setReviewDialogOpen] = useState(false);
   const [txPendingDialogOpen, setTxPendingDialogOpen] = useState(false);
   const [firstAccess, setFirstAccess] = useState(
-    localStorage.getItem("firstAccess") === null
+    localStorage.getItem("firstAccess") === null,
   );
 
   const setFirstAccessCallback = useCallback((value: boolean) => {
diff --git a/src/lib/__tests__/oracleRouter.test.ts b/src/lib/__tests__/oracleRouter.test.ts
index 5c526b2..ced9774 100644
--- a/src/lib/__tests__/oracleRouter.test.ts
+++ b/src/lib/__tests__/oracleRouter.test.ts
@@ -54,12 +54,12 @@ describe("OracleRouter", () => {
       const oracles = await mainnetRouter.findRoute();
 
       expect(oracles.tokenSellOracle.toLowerCase()).toEqual(
-        "0x2f2c0C1727Ce8C429A237DDFBBb87357893fBD5D".toLowerCase(),
+        "0x2f2c0C1727Ce8C429A237DDFBBb87357893fBD5D".toLowerCase()
       );
       expect(oracles.tokenBuyOracle.toLowerCase()).toEqual(
-        "0xbba12740DE905707251525477bAD74985DeC46D2".toLowerCase(),
+        "0xbba12740DE905707251525477bAD74985DeC46D2".toLowerCase()
       );
-    }, 15000);
+    }, 900000);
     it("should raise error for gnosis tokens", async () => {
       const mainnetRouter = new mainnetRouterFactory({
         chainId: 1,
@@ -68,9 +68,9 @@ describe("OracleRouter", () => {
       });
 
       await expect(mainnetRouter.findRoute()).rejects.toThrow(
-        "No matching oracles found",
+        "No matching oracles found"
       );
-    }, 15000);
+    }, 900000);
     it("should find WETH USD oracle", async () => {
       const mainnetRouter = new mainnetRouterFactory({
         chainId: 1,
@@ -80,7 +80,7 @@ describe("OracleRouter", () => {
 
       const wethOracles = await mainnetRouter.findSellOracle();
       expect(typeof wethOracles.USD).toBe(`string`);
-    }, 15000);
+    }, 900000);
   });
   describe("GnosisRouter", () => {
     const gnosisRouterFactory = CHAINS_ORACLE_ROUTER_FACTORY[100];
@@ -110,10 +110,10 @@ describe("OracleRouter", () => {
       const oracles = await gnosisRouter.findRoute();
 
       expect(oracles.tokenSellOracle.toLowerCase()).toEqual(
-        "0x1b723c855f7d2c2785f99486973271355e782d77".toLowerCase(),
+        "0x1b723c855f7d2c2785f99486973271355e782d77".toLowerCase()
       );
       expect(oracles.tokenBuyOracle.toLowerCase()).toEqual(
-        "0xed322a5ac55bae091190dff9066760b86751947b".toLowerCase(),
+        "0xed322a5ac55bae091190dff9066760b86751947b".toLowerCase()
       );
     });
     it("should find WETH USD oracle", async () => {
@@ -140,10 +140,10 @@ describe("OracleRouter", () => {
       const oracles = await sepoliaRouter.findRoute();
 
       expect(oracles.tokenBuyOracle.toLowerCase()).toEqual(
-        "0xEd2D417d759b1E77fe6A8920C79AE4CE6D6930F7".toLowerCase(),
+        "0xEd2D417d759b1E77fe6A8920C79AE4CE6D6930F7".toLowerCase()
       );
       expect(oracles.tokenSellOracle.toLowerCase()).toEqual(
-        "0x57Cb700070Cb1b0475E2D668FA8E89cF0Dda9509".toLowerCase(),
+        "0x57Cb700070Cb1b0475E2D668FA8E89cF0Dda9509".toLowerCase()
       );
     });
   });
diff --git a/src/lib/schema.ts b/src/lib/schema.ts
index 25fe5d3..527634a 100644
--- a/src/lib/schema.ts
+++ b/src/lib/schema.ts
@@ -53,7 +53,7 @@ const generateOracleSchema = ({ chainId }: { chainId: ChainId }) => {
     },
     {
       message: "Address does not conform to Oracle interface",
-    }
+    },
   );
 };
 
@@ -75,7 +75,7 @@ export const generateSwapSchema = (chainId: ChainId) =>
       {
         path: ["tokenBuy"],
         message: "Tokens sell and buy must be different",
-      }
+      },
     )
     .superRefine((data, ctx) => {
       const amountDecimals = data.isSellOrder
@@ -127,7 +127,7 @@ export const generateAdvancedSettingsSchema = (chainId: ChainId) =>
       {
         message: "If one oracle is set, both must be set",
         path: ["tokenSellOracle"],
-      }
+      },
     )
     .refine(
       (data) => {
@@ -139,5 +139,5 @@ export const generateAdvancedSettingsSchema = (chainId: ChainId) =>
       {
         message: "If one oracle is set, both must be set",
         path: ["tokenBuyOracle"],
-      }
+      },
     );
diff --git a/src/lib/tokenUtils.ts b/src/lib/tokenUtils.ts
index ae1ae98..360c4e1 100644
--- a/src/lib/tokenUtils.ts
+++ b/src/lib/tokenUtils.ts
@@ -86,7 +86,7 @@ export async function fetchFormattedBalanceOf({
 
 export async function fetchTokenInfo(
   tokenAddress: Address,
-  chainId: ChainId
+  chainId: ChainId,
 ): Promise<IToken> {
   const publicClient = publicClientsFromIds[chainId];
   const [symbol, decimals] = await Promise.all([
@@ -110,7 +110,7 @@ export async function fetchTokenInfo(
 
 export const getNewMinTradeToken0 = async (
   newToken0: IToken,
-  chainId: ChainId
+  chainId: ChainId,
 ) => {
   return fetchTokenUsdPrice({
     tokenAddress: newToken0.address as Address,
@@ -123,9 +123,9 @@ export const getNewMinTradeToken0 = async (
       Number(
         formatUnits(
           parseUnits(String(amount), newToken0.decimals),
-          newToken0.decimals
-        )
-      )
+          newToken0.decimals,
+        ),
+      ),
     )
     .catch(() => 0);
 };
diff --git a/src/lib/tooltipDescriptions.ts b/src/lib/tooltipDescriptions.ts
index 6d5cdb3..37c1e4b 100644
--- a/src/lib/tooltipDescriptions.ts
+++ b/src/lib/tooltipDescriptions.ts
@@ -4,7 +4,7 @@ export enum TOOLTIP_DESCRIPTIONS {
   CURRENT_ORACLE_PRICE = "The price that will be monitored to trigger the order posting.",
   CURRENT_MARKET_PRICE = "The current price of the token pair in the market.",
   ORDER_CREATION = "The transaction that created this stop loss order.",
-  ORDER_HASH = "The onchain transaction for creating this order.",
+  ORDER_HASH = "The hash of the stop loss order on the Composable CoW framework. Each order for each user has a unique hash.",
   STATUS = "The status can be open, fulfilled, partially filled or cancelled.",
   SUBMISSION_TIME = "The date and time at which the order was submitted.",
   VALIDITY_BUCKET_TIME = "After the oracle price achieves the defined trigger price, how much time the order will wait to be filled on the orderbook.",