From 5c9a32fc4dfb956a6eb01900907202e232f18781 Mon Sep 17 00:00:00 2001
From: HoseinBaseri <ho3ein8280@gmail.com>
Date: Thu, 16 Jan 2025 16:15:19 +0330
Subject: [PATCH 01/12] add color utility functions and Tailwind CSS
 configuration

---
 lib/global.css                    |  18 +++
 lib/store/options.store.ts        |   6 +
 lib/utils/color/constants.ts      |  46 ++++++
 lib/utils/color/createSwatches.ts |  79 +++++++++++
 lib/utils/color/helpers.ts        | 229 ++++++++++++++++++++++++++++++
 lib/utils/color/scales.ts         |  90 ++++++++++++
 lib/utils/color/setupColors.ts    |  40 ++++++
 lib/utils/color/types.ts          |  25 ++++
 package.json                      |   3 +
 pnpm-lock.yaml                    |  64 +++++++++
 tailwind.config.js                |  22 ++-
 11 files changed, 619 insertions(+), 3 deletions(-)
 create mode 100644 lib/utils/color/constants.ts
 create mode 100644 lib/utils/color/createSwatches.ts
 create mode 100644 lib/utils/color/helpers.ts
 create mode 100644 lib/utils/color/scales.ts
 create mode 100644 lib/utils/color/setupColors.ts
 create mode 100644 lib/utils/color/types.ts

diff --git a/lib/global.css b/lib/global.css
index f8b272e..ff58868 100644
--- a/lib/global.css
+++ b/lib/global.css
@@ -1,5 +1,23 @@
 @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+    --mts-primary-50: 233 251 240;
+    --mts-primary-100: 207 247 222;
+    --mts-primary-200: 159 239 188;
+    --mts-primary-300: 111 230 155;
+    --mts-primary-400: 64 222 122;
+    --mts-primary-500: 34 197 94;
+    --mts-primary-600: 27 157 75;
+    --mts-primary-700: 20 117 56;
+    --mts-primary-800: 13 78 37;
+    --mts-primary-900: 7 39 19;
+    --mts-primary-950: 4 22 10;
+}
+
 .mts-default {
     --border-color: #f4f4f5;
     --primary-color: #22c55e;
diff --git a/lib/store/options.store.ts b/lib/store/options.store.ts
index 0b46ef9..a206b2f 100644
--- a/lib/store/options.store.ts
+++ b/lib/store/options.store.ts
@@ -5,6 +5,7 @@ import { useSwapStore } from './swap.store';
 import { MyTonSwapClient } from '@mytonswap/sdk';
 import { WIDGET_VERSION } from '../constants';
 import { useWalletStore } from './wallet.store';
+import { setupColors } from '../utils/color/setupColors';
 
 export type SwapOptions = {
     default_pay_token?: string;
@@ -24,6 +25,7 @@ export type SwapOptions = {
         | 'omniston';
     layout_direction?: 'ltr' | 'rtl';
     ui_preferences?: {
+        primary_color?: string;
         disable_provided_text?: boolean;
         show_swap_details?: boolean;
         show_settings_wallet?: boolean;
@@ -52,6 +54,7 @@ export const useOptionsStore = create<SwapOptionsActions & SwapOptionsStates>(
         options: {
             liquidity_provider: 'mytonswap',
             ui_preferences: {
+                primary_color: '#22C55E',
                 disable_provided_text: false,
                 disable_token_select_pay: false,
                 disable_token_select_receive: false,
@@ -68,6 +71,9 @@ export const useOptionsStore = create<SwapOptionsActions & SwapOptionsStates>(
         setOptions: (option) => {
             const { options, userOptions } = get();
             if (JSON.stringify(option) === JSON.stringify(userOptions)) return;
+            if (option.ui_preferences?.primary_color) {
+                setupColors(option.ui_preferences.primary_color);
+            }
             const newSchema = defaultsDeep(
                 option,
                 options
diff --git a/lib/utils/color/constants.ts b/lib/utils/color/constants.ts
new file mode 100644
index 0000000..5d5cc3f
--- /dev/null
+++ b/lib/utils/color/constants.ts
@@ -0,0 +1,46 @@
+import type { Mode, PaletteConfig } from './types';
+
+export const DEFAULT_STOP = 500;
+export const DEFAULT_STOPS = [
+    0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950, 1000,
+];
+
+export const MODES: Mode[] = [`hex`, `p-3`, 'oklch'];
+export const DEFAULT_MODE = MODES[0];
+
+export const DEFAULT_PALETTE_CONFIG: PaletteConfig = {
+    id: ``,
+    name: ``,
+    value: ``,
+    valueStop: DEFAULT_STOP,
+    swatches: [],
+    h: 0,
+    s: 0,
+    lMin: 0,
+    lMax: 100,
+    useLightness: true,
+    mode: MODES[0],
+};
+
+export const RANDOM_PALETTES = [
+    {
+        name: `blue`,
+        value: `3B82F6`,
+    },
+    {
+        name: `red`,
+        value: `EF4444`,
+    },
+    {
+        name: `green`,
+        value: `22C55E`,
+    },
+    {
+        name: `purple`,
+        value: `A855F7`,
+    },
+    {
+        name: `brand`,
+        value: `2522FC`,
+    },
+];
diff --git a/lib/utils/color/createSwatches.ts b/lib/utils/color/createSwatches.ts
new file mode 100644
index 0000000..30e07e3
--- /dev/null
+++ b/lib/utils/color/createSwatches.ts
@@ -0,0 +1,79 @@
+import { DEFAULT_PALETTE_CONFIG } from './constants';
+import {
+    clamp,
+    hexToHSL,
+    HSLToHex,
+    lightnessFromHSLum,
+    luminanceFromHex,
+    unsignedModulo,
+} from './helpers';
+import {
+    createDistributionValues,
+    createHueScale,
+    createSaturationScale,
+} from './scales';
+import type { PaletteConfig } from './types';
+
+export function createSwatches(palette: PaletteConfig) {
+    const { value, valueStop } = palette;
+
+    // Tweaks may be passed in, otherwise use defaults
+    const useLightness =
+        palette.useLightness ?? DEFAULT_PALETTE_CONFIG.useLightness;
+    const h = palette.h ?? DEFAULT_PALETTE_CONFIG.h;
+    const s = palette.s ?? DEFAULT_PALETTE_CONFIG.s;
+    const lMin = palette.lMin ?? DEFAULT_PALETTE_CONFIG.lMin;
+    const lMax = palette.lMax ?? DEFAULT_PALETTE_CONFIG.lMax;
+
+    // Create hue and saturation scales based on tweaks
+    const hueScale = createHueScale(h, valueStop);
+    const saturationScale = createSaturationScale(s, valueStop);
+
+    // Get the base hex's H/S/L values
+    const { h: valueH, s: valueS, l: valueL } = hexToHSL(value);
+
+    // Create lightness scales based on tweak + lightness/luminance of current value
+    const lightnessValue = useLightness ? valueL : luminanceFromHex(value);
+    const distributionScale = createDistributionValues(
+        lMin,
+        lMax,
+        lightnessValue,
+        valueStop
+    );
+
+    const swatches = hueScale.map(({ stop }, stopIndex) => {
+        const newH = unsignedModulo(valueH + hueScale[stopIndex].tweak, 360);
+        const newS = clamp(valueS + saturationScale[stopIndex].tweak, 0, 100);
+        let newL = useLightness
+            ? distributionScale[stopIndex].tweak
+            : lightnessFromHSLum(
+                  newH,
+                  newS,
+                  distributionScale[stopIndex].tweak
+              );
+        newL = clamp(newL, 0, 100);
+
+        const newHex = HSLToHex(newH, newS, newL);
+
+        return {
+            stop,
+            // Sometimes the initial value is changed slightly during conversion,
+            // overriding that with the original value
+            hex:
+                stop === valueStop
+                    ? `#${value.toUpperCase()}`
+                    : newHex.toUpperCase(),
+            // Used in graphs
+            h: newH,
+            hScale:
+                ((unsignedModulo(hueScale[stopIndex].tweak + 180, 360) - 180) /
+                    180) *
+                50,
+            s: newS,
+            sScale: newS - 50,
+            l: newL,
+        };
+    });
+
+    return swatches;
+}
diff --git a/lib/utils/color/helpers.ts b/lib/utils/color/helpers.ts
new file mode 100644
index 0000000..9ab4a2e
--- /dev/null
+++ b/lib/utils/color/helpers.ts
@@ -0,0 +1,229 @@
+import { DEFAULT_PALETTE_CONFIG } from './constants';
+
+export function luminanceFromRGB(r: number, g: number, b: number) {
+    // Formula from WCAG 2.0
+    const [R, G, B] = [r, g, b].map(function (c) {
+        c /= 255; // to 0-1 range
+        return c < 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+    });
+    return 21.26 * R + 71.52 * G + 7.22 * B;
+}
+
+export function luminanceFromHex(H: string) {
+    const values: [number, number, number] = Object.values(hexToRGB(H)).map(
+        (item) => Number(item)
+    ) as [number, number, number];
+    return round(luminanceFromRGB(...values), 2);
+}
+
+// TODO: Even out this function, luminance values aren't linear/good
+export function lightnessFromHSLum(H: number, S: number, Lum: number) {
+    const vals: { [key: number]: number } = {};
+    for (let L = 99; L >= 0; L--) {
+        const values: [number, number, number] = Object.values(
+            HSLtoRGB(H, S, L)
+        ) as [number, number, number];
+        vals[L] = Math.abs(Lum - luminanceFromRGB(...values));
+    }
+
+    // Run through all these and find the closest to 0
+    let lowestDiff = 100;
+    let newL = 100;
+    for (let i = Object.keys(vals).length - 1; i >= 0; i--) {
+        if (vals[i] < lowestDiff) {
+            newL = i;
+            lowestDiff = vals[i];
+        }
+    }
+
+    return newL;
+}
+
+export function hexToRGB(H: string) {
+    if (H.length === 6 && !H.startsWith(`#`)) {
+        H = `#${H}`;
+    }
+
+    let r = `0`;
+    let g = `0`;
+    let b = `0`;
+    if (H.length === 4) {
+        r = `0x${H[1]}${H[1]}`;
+        g = `0x${H[2]}${H[2]}`;
+        b = `0x${H[3]}${H[3]}`;
+    } else if (H.length === 7) {
+        r = `0x${H[1]}${H[2]}`;
+        g = `0x${H[3]}${H[4]}`;
+        b = `0x${H[5]}${H[6]}`;
+    }
+
+    return { r, g, b };
+}
+
+export function hexToHSL(H: string) {
+    if (H.length === 6 && !H.startsWith(`#`)) {
+        H = `#${H}`;
+    }
+
+    // Convert hex to RGB first
+    const rgbValues = hexToRGB(H);
+    let { r, g, b } = {
+        r: parseInt(rgbValues.r),
+        g: parseInt(rgbValues.g),
+        b: parseInt(rgbValues.b),
+    };
+    // Then to HSL
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const cmin = Math.min(r, g, b);
+    const cmax = Math.max(r, g, b);
+    const delta = cmax - cmin;
+    let h = 0;
+    let s = 0;
+    let l = 0;
+
+    if (delta === 0) h = 0;
+    else if (cmax === r) h = ((g - b) / delta) % 6;
+    else if (cmax === g) h = (b - r) / delta + 2;
+    else h = (r - g) / delta + 4;
+
+    h = Math.round(h * 60);
+
+    if (h < 0) h += 360;
+
+    l = (cmax + cmin) / 2;
+    s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+    s = +(s * 100).toFixed(1);
+    l = +(l * 100).toFixed(1);
+
+    //   return `hsl(${h},${s}%,${l}%)`;
+    return { h, s, l };
+}
+
+export function HSLtoRGB(h: number, s: number, l: number) {
+    s = clamp(s, 0, 100) / 100;
+    l = clamp(l, 0, 100) / 100;
+
+    const c = (1 - Math.abs(2 * l - 1)) * s;
+    const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+    const m = l - c / 2;
+    let r = 0;
+    let g = 0;
+    let b = 0;
+
+    if (h >= 0 && h < 60) {
+        r = c;
+        g = x;
+        b = 0;
+    } else if (h >= 60 && h < 120) {
+        r = x;
+        g = c;
+        b = 0;
+    } else if (h >= 120 && h < 180) {
+        r = 0;
+        g = c;
+        b = x;
+    } else if (h >= 180 && h < 240) {
+        r = 0;
+        g = x;
+        b = c;
+    } else if (h >= 240 && h < 300) {
+        r = x;
+        g = 0;
+        b = c;
+    } else if (h >= 300 && h < 360) {
+        r = c;
+        g = 0;
+        b = x;
+    }
+
+    return {
+        r: Math.round((r + m) * 255),
+        g: Math.round((g + m) * 255),
+        b: Math.round((b + m) * 255),
+    };
+}
+
+export function HSLToHex(h: number, s: number, l: number) {
+    const rgbValues = HSLtoRGB(h, s, l);
+    let { r, g, b } = {
+        r: '',
+        g: '',
+        b: '',
+    };
+
+    // Having obtained RGB, convert channels to hex
+    r = rgbValues.r.toString(16);
+    g = rgbValues.g.toString(16);
+    b = rgbValues.b.toString(16);
+
+    // Prepend 0s, if necessary
+    if (r.length === 1) r = `0${r}`;
+    if (g.length === 1) g = `0${g}`;
+    if (b.length === 1) b = `0${b}`;
+
+    return `#${r}${g}${b}`;
+}
+
+export function isHex(value: string) {
+    const valueHex =
+        value.length === 6 && !value.startsWith(`#`) ? `#${value}` : value;
+
+    const re = new RegExp(/^#[0-9A-F]{6}$/i);
+
+    return re.test(valueHex.toUpperCase());
+}
+
+export function isValidName(name: string) {
+    const re = new RegExp(/^[A-Za-z]{3,24}$/i);
+
+    return re.test(name);
+}
+
+export function round(value: number, precision: number = 0) {
+    const multiplier = Math.pow(10, precision);
+    return Math.round(value * multiplier) / multiplier;
+}
+
+export function removeTrailingSlash(s: string) {
+    return s.endsWith('/') ? s.slice(0, -1) : s;
+}
+
+export function titleCase(s: string) {
+    return s.charAt(0).toUpperCase() + s.slice(1);
+}
+
+export function arrayObjectDiff(
+    before: { [key: string]: string | number | boolean }[],
+    current: { [key: string]: string | number | boolean }[]
+) {
+    const defaultKeys = Object.keys(DEFAULT_PALETTE_CONFIG);
+
+    // TODO: Fix this TS string-key-nonsense
+    const changedKeys: (string | null)[] = defaultKeys
+        .map((key) => {
+            const beforeValues = before
+                .map((p) => p[key])
+                .sort()
+                .join();
+
+            const currentValues = current
+                .map((p) => p[key])
+                .sort()
+                .join();
+
+            return beforeValues === currentValues ? null : key;
+        })
+        .filter(Boolean);
+
+    return changedKeys;
+}
+
+export function unsignedModulo(x: number, n: number) {
+    return ((x % n) + n) % n;
+}
+
+export function clamp(x: number, min: number, max: number) {
+    return Math.min(Math.max(x, min), max);
+}
diff --git a/lib/utils/color/scales.ts b/lib/utils/color/scales.ts
new file mode 100644
index 0000000..809759c
--- /dev/null
+++ b/lib/utils/color/scales.ts
@@ -0,0 +1,90 @@
+import { DEFAULT_STOP, DEFAULT_STOPS } from './constants';
+
+export function createSaturationScale(
+    tweak: number = 0,
+    stop: number = DEFAULT_STOP
+) {
+    const stops = DEFAULT_STOPS;
+    const index = stops.indexOf(stop);
+
+    if (index === -1) {
+        throw new Error(`Invalid key value: ${stop}`);
+    }
+
+    return stops.map((stop) => {
+        const diff = Math.abs(stops.indexOf(stop) - index);
+        const tweakValue = tweak
+            ? Math.round((diff + 1) * tweak * (1 + diff / 10))
+            : 0;
+
+        if (tweakValue > 100) {
+            return { stop, tweak: 100 };
+        }
+
+        return { stop, tweak: tweakValue };
+    });
+}
+
+export function createHueScale(tweak: number = 0, stop: number = DEFAULT_STOP) {
+    const stops = DEFAULT_STOPS;
+    const index = stops.indexOf(stop);
+
+    if (index === -1) {
+        throw new Error(`Invalid parameter value: ${stop}`);
+    }
+
+    return stops.map((stop) => {
+        const diff = Math.abs(stops.indexOf(stop) - index);
+        const tweakValue = tweak ? diff * tweak : 0;
+
+        return { stop, tweak: tweakValue };
+    });
+}
+
+export function createDistributionValues(
+    min: number = 0,
+    max: number = 100,
+    lightness: number,
+    stop: number = DEFAULT_STOP
+) {
+    const stops = DEFAULT_STOPS;
+
+    // Create known stops
+    const newValues = [
+        { stop: 0, tweak: max },
+        { stop, tweak: lightness },
+        { stop: 1000, tweak: min },
+    ];
+
+    // Create missing stops
+    for (let i = 0; i < stops.length; i++) {
+        const stopValue = stops[i];
+
+        if (stopValue === 0 || stopValue === 1000 || stopValue === stop) {
+            continue;
+        }
+
+        const diff = Math.abs((stopValue - stop) / 100);
+        const totalDiff =
+            stopValue < stop
+                ? Math.abs(
+                      stops.indexOf(stop) - stops.indexOf(DEFAULT_STOPS[0])
+                  ) - 1
+                : Math.abs(
+                      stops.indexOf(stop) -
+                          stops.indexOf(DEFAULT_STOPS[DEFAULT_STOPS.length - 1])
+                  ) - 1;
+        const increment = stopValue < stop ? max - lightness : lightness - min;
+
+        const tweak =
+            stopValue < stop
+                ? (increment / totalDiff) * diff + lightness
+                : lightness - (increment / totalDiff) * diff;
+
+        newValues.push({ stop: stopValue, tweak: Math.round(tweak) });
+    }
+
+    newValues.sort((a, b) => a.stop - b.stop);
+
+    return newValues;
+}
diff --git a/lib/utils/color/setupColors.ts b/lib/utils/color/setupColors.ts
new file mode 100644
index 0000000..0b6a5df
--- /dev/null
+++ b/lib/utils/color/setupColors.ts
@@ -0,0 +1,40 @@
+import { DEFAULT_PALETTE_CONFIG } from './constants';
+import { nanoid } from 'nanoid';
+import { createSwatches } from './createSwatches';
+import Color from 'color';
+export const setupColors = (color_raw: string) => {
+    try {
+        const color = Color(color_raw).hex();
+        const pallet = createSwatches({
+            ...DEFAULT_PALETTE_CONFIG,
+            id: nanoid(),
+
+            value: color.replace('#', '').toUpperCase(),
+            swatches: [],
+        }).map((item) => item.hex);
+
+        // Remove the first and last item
+        const modifiedPallet = pallet.slice(1, -1);
+        const cssVariableKeys = [
+            '--mts-primary-50',
+            '--mts-primary-100',
+            '--mts-primary-200',
+            '--mts-primary-300',
+            '--mts-primary-400',
+            '--mts-primary-500',
+            '--mts-primary-600',
+            '--mts-primary-700',
+            '--mts-primary-800',
+            '--mts-primary-900',
+            '--mts-primary-950',
+        ];
+        modifiedPallet.map((item, idx) => {
+            document.documentElement.style.setProperty(
+                cssVariableKeys[idx],
+                Color(item).rgb().array().join(' ')
+            );
+        });
+    } catch (error) {
+        console.log(error);
+    }
+};
diff --git a/lib/utils/color/types.ts b/lib/utils/color/types.ts
new file mode 100644
index 0000000..6ebc06d
--- /dev/null
+++ b/lib/utils/color/types.ts
@@ -0,0 +1,25 @@
+export interface SwatchValue {
+    hex: string;
+    stop: number;
+    h: number;
+    hScale: number;
+    s: number;
+    sScale: number;
+    l: number;
+}
+
+export type Mode = `hex` | `p-3` | `oklch`;
+
+export interface PaletteConfig {
+    id: string;
+    name: string;
+    value: string;
+    valueStop: number;
+    swatches: SwatchValue[];
+    useLightness: boolean;
+    h: number;
+    s: number;
+    lMin: number;
+    lMax: number;
+    mode: Mode;
+}
diff --git a/package.json b/package.json
index 1ce1a79..a1ac10c 100644
--- a/package.json
+++ b/package.json
@@ -78,6 +78,7 @@
         "@storybook/react": "^8.3.6",
         "@storybook/react-vite": "^8.3.6",
         "@storybook/test": "^8.3.6",
+        "@types/color": "^4.2.0",
         "@types/lodash": "^4.17.10",
         "@types/node": "^22.7.4",
         "@types/react": "^18.3.10",
@@ -124,10 +125,12 @@
         "@uidotdev/usehooks": "^2.4.1",
         "axios": "^1.7.7",
         "axios-retry": "^4.5.0",
+        "color": "^4.2.3",
         "framer-motion": "^11.11.2",
         "i18next": "^23.16.4",
         "i18next-browser-languagedetector": "^8.0.0",
         "lodash": "^4.17.21",
+        "nanoid": "^5.0.9",
         "react-error-boundary": "^4.1.2",
         "react-hot-toast": "^2.4.1",
         "react-i18next": "^15.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f00ca4f..b0e6b15 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,6 +38,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      color:
+        specifier: ^4.2.3
+        version: 4.2.3
       framer-motion:
         specifier: ^11.11.2
         version: 11.11.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -50,6 +53,9 @@ importers:
       lodash:
         specifier: ^4.17.21
         version: 4.17.21
+      nanoid:
+        specifier: ^5.0.9
+        version: 5.0.9
       react:
         specifier: ^18.3.1
         version: 18.3.1
@@ -123,6 +129,9 @@ importers:
       '@storybook/test':
         specifier: ^8.3.6
         version: 8.3.6(storybook@8.3.6)
+      '@types/color':
+        specifier: ^4.2.0
+        version: 4.2.0
       '@types/lodash':
         specifier: ^4.17.10
         version: 4.17.10
@@ -1392,6 +1401,15 @@ packages:
   '@types/body-parser@1.19.5':
     resolution: {integrity: sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==}
 
+  '@types/color-convert@2.0.4':
+    resolution: {integrity: sha512-Ub1MmDdyZ7mX//g25uBAoH/mWGd9swVbt8BseymnaE18SU4po/PjmCrHxqIIRjBo3hV/vh1KGr0eMxUhp+t+dQ==}
+
+  '@types/color-name@1.1.5':
+    resolution: {integrity: sha512-j2K5UJqGTxeesj6oQuGpMgifpT5k9HprgQd8D1Y0lOFqKHl3PJu5GMeS4Y5EgjS55AE6OQxf8mPED9uaGbf4Cg==}
+
+  '@types/color@4.2.0':
+    resolution: {integrity: sha512-6+xrIRImMtGAL2X3qYkd02Mgs+gFGs+WsK0b7VVMaO4mYRISwyTjcqNrO0mNSmYEoq++rSLDB2F5HDNmqfOe+A==}
+
   '@types/connect@3.4.38':
     resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==}
 
@@ -2017,6 +2035,13 @@ packages:
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
+  color-string@1.9.1:
+    resolution: {integrity: sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==}
+
+  color@4.2.3:
+    resolution: {integrity: sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==}
+    engines: {node: '>=12.5.0'}
+
   colorette@2.0.20:
     resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==}
 
@@ -2818,6 +2843,9 @@ packages:
     resolution: {integrity: sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==}
     engines: {node: '>= 0.4'}
 
+  is-arrayish@0.3.2:
+    resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
+
   is-binary-path@2.1.0:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
     engines: {node: '>=8'}
@@ -3214,6 +3242,11 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  nanoid@5.0.9:
+    resolution: {integrity: sha512-Aooyr6MXU6HpvvWXKoVoXwKMs/KyVakWwg7xQfv5/S/RIgJMy0Ifa45H9qqYy7pTCszrHzP21Uk4PZq2HpEM8Q==}
+    engines: {node: ^18 || >=20}
+    hasBin: true
+
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
@@ -3831,6 +3864,9 @@ packages:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
 
+  simple-swizzle@0.2.2:
+    resolution: {integrity: sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==}
+
   slice-ansi@3.0.0:
     resolution: {integrity: sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==}
     engines: {node: '>=8'}
@@ -5655,6 +5691,16 @@ snapshots:
       '@types/connect': 3.4.38
       '@types/node': 22.7.4
 
+  '@types/color-convert@2.0.4':
+    dependencies:
+      '@types/color-name': 1.1.5
+
+  '@types/color-name@1.1.5': {}
+
+  '@types/color@4.2.0':
+    dependencies:
+      '@types/color-convert': 2.0.4
+
   '@types/connect@3.4.38':
     dependencies:
       '@types/node': 22.7.4
@@ -6366,6 +6412,16 @@ snapshots:
 
   color-name@1.1.4: {}
 
+  color-string@1.9.1:
+    dependencies:
+      color-name: 1.1.4
+      simple-swizzle: 0.2.2
+
+  color@4.2.3:
+    dependencies:
+      color-convert: 2.0.1
+      color-string: 1.9.1
+
   colorette@2.0.20: {}
 
   combined-stream@1.0.8:
@@ -7277,6 +7333,8 @@ snapshots:
       call-bind: 1.0.7
       has-tostringtag: 1.0.2
 
+  is-arrayish@0.3.2: {}
+
   is-binary-path@2.1.0:
     dependencies:
       binary-extensions: 2.3.0
@@ -7612,6 +7670,8 @@ snapshots:
 
   nanoid@3.3.7: {}
 
+  nanoid@5.0.9: {}
+
   natural-compare@1.4.0: {}
 
   negotiator@0.6.3: {}
@@ -8266,6 +8326,10 @@ snapshots:
 
   signal-exit@4.1.0: {}
 
+  simple-swizzle@0.2.2:
+    dependencies:
+      is-arrayish: 0.3.2
+
   slice-ansi@3.0.0:
     dependencies:
       ansi-styles: 4.3.0
diff --git a/tailwind.config.js b/tailwind.config.js
index e962d13..a8d1d6d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -2,15 +2,31 @@
 export default {
     content: [
         // refrence the library only
-        "./lib/**/**/*.{js,ts,jsx,tsx}",
+        './lib/**/**/*.{js,ts,jsx,tsx}',
     ],
     theme: {
         extend: {
             gridTemplateColumns: {
-                swapcard: "1fr auto",
+                swapcard: '1fr auto',
+            },
+            colors: {
+                'mts-primary': {
+                    50: 'rgb(var(--mts-primary-50) / <alpha-value>)',
+                    100: 'rgb(var(--mts-primary-100) / <alpha-value>)',
+                    200: 'rgb(var(--mts-primary-200) / <alpha-value>)',
+                    300: 'rgb(var(--mts-primary-300) / <alpha-value>)',
+                    400: 'rgb(var(--mts-primary-400) / <alpha-value>)',
+                    500: 'rgb(var(--mts-primary-500) / <alpha-value>)',
+                    600: 'rgb(var(--mts-primary-600) / <alpha-value>)',
+                    700: 'rgb(var(--mts-primary-700) / <alpha-value>)',
+                    800: 'rgb(var(--mts-primary-800) / <alpha-value>)',
+                    900: 'rgb(var(--mts-primary-900) / <alpha-value>)',
+                    950: 'rgb(var(--mts-primary-950) / <alpha-value>)',
+                },
             },
         },
     },
     plugins: [],
-    darkMode: "class",
+    darkMode: 'class',
+    prefix: 'mts-',
 };

From cae5b1a73db4f2bd2c64ff62fd7f4bc8a0389010 Mon Sep 17 00:00:00 2001
From: HoseinBaseri <ho3ein8280@gmail.com>
Date: Sat, 18 Jan 2025 16:50:55 +0330
Subject: [PATCH 02/12] refactor: update Tailwind CSS configuration and utility
 functions for improved styling

---
 lib/components/Header/Header.tsx              |  24 +--
 lib/components/Header/SettingPopover.tsx      |  48 +++---
 lib/components/Header/SlippageSetting.tsx     |  48 +++---
 lib/components/Header/TokensSettings.tsx      |  28 ++--
 lib/components/Header/Wallet.tsx              |  48 +++---
 lib/components/Swap/Swap.scss                 |  14 +-
 lib/components/Swap/Swap.stories.tsx          |   7 +
 .../SwapButton/ConfirmationModal.tsx          | 100 ++++++------
 lib/components/SwapButton/Inprogress.tsx      |  30 ++--
 lib/components/SwapButton/SwapButton.tsx      |  13 +-
 .../SwapButton/WaitingForWallet.tsx           |  32 ++--
 lib/components/SwapCard/Card.tsx              | 142 ++++++++++--------
 lib/components/SwapCard/CardButton.tsx        |  25 ++-
 lib/components/SwapCard/CardDialog.tsx        |  70 +++++----
 lib/components/SwapCard/FavList.tsx           |  30 ++--
 lib/components/SwapCard/SwapCard.tsx          |  15 +-
 lib/components/SwapCard/Token.tsx             |  36 +++--
 lib/components/SwapDetails/SwapDetails.tsx    |  35 +++--
 lib/components/SwapDetails/SwapKeyValue.tsx   |   9 +-
 lib/global.css                                |   4 +-
 lib/utils/cn.ts                               |   8 +-
 tailwind.config.js                            |   2 +-
 22 files changed, 404 insertions(+), 364 deletions(-)

diff --git a/lib/components/Header/Header.tsx b/lib/components/Header/Header.tsx
index fd63665..bfe5ada 100644
--- a/lib/components/Header/Header.tsx
+++ b/lib/components/Header/Header.tsx
@@ -1,10 +1,10 @@
-import SettingPopover from "./SettingPopover";
-import "./Header.scss";
-import { useOptionsStore } from "../../store/options.store";
-import Refresh from "../Common/Refresh";
-import { useSwapStore } from "../../store/swap.store";
-import { useTranslation } from "react-i18next";
-import Setting from "../icons/Setting";
+import SettingPopover from './SettingPopover';
+import './Header.scss';
+import { useOptionsStore } from '../../store/options.store';
+import Refresh from '../Common/Refresh';
+import { useSwapStore } from '../../store/swap.store';
+import { useTranslation } from 'react-i18next';
+import Setting from '../icons/Setting';
 const Header = () => {
     const { t } = useTranslation();
     const { options } = useOptionsStore();
@@ -12,12 +12,12 @@ const Header = () => {
         useSwapStore();
 
     return (
-        <div className="header-container">
-            <div data-testid="swap-header-title">{t("swap")}</div>
-            <div className="header-setting">
+        <div className="mts-flex mts-justify-between mts-items-center mts-px-1 mts-text-primary-950 mts-font-bold mts-text-lg">
+            <div data-testid="swap-header-title">{t('swap')}</div>
+            <div className="mts-flex mts-items-center mts-gap-2">
                 {options.ui_preferences?.show_refresh && (
                     <div
-                        className="loading-container"
+                        className="mts-w-6 mts-h-6 mts-cursor-pointer"
                         onClick={refetchBestRoute}
                     >
                         <Refresh
@@ -28,7 +28,7 @@ const Header = () => {
                 )}
                 {options.ui_preferences?.show_settings && (
                     <SettingPopover>
-                        <Setting className="setting-icon" />
+                        <Setting className="mts-text-primary-950 mts-text-2xl" />
                     </SettingPopover>
                 )}
             </div>
diff --git a/lib/components/Header/SettingPopover.tsx b/lib/components/Header/SettingPopover.tsx
index f818ec4..ab20b6d 100644
--- a/lib/components/Header/SettingPopover.tsx
+++ b/lib/components/Header/SettingPopover.tsx
@@ -1,16 +1,16 @@
-import { FC, PropsWithChildren, useRef, useState } from "react";
-import SlippageSetting from "./SlippageSetting";
-import { useOnClickOutside } from "usehooks-ts";
-import TokensSettings from "./TokensSettings";
-import { AnimatePresence, motion } from "framer-motion";
+import { FC, PropsWithChildren, useRef, useState } from 'react';
+import SlippageSetting from './SlippageSetting';
+import { useOnClickOutside } from 'usehooks-ts';
+import TokensSettings from './TokensSettings';
+import { AnimatePresence, motion } from 'framer-motion';
 
-import "./SettingPopover.scss";
-import Wallet from "./Wallet";
-import { useOptionsStore } from "../../store/options.store";
-import { useTranslation } from "react-i18next";
-import { useMediaQuery } from "@uidotdev/usehooks";
-import { modalAnimationDesktop, modalAnimationMobile } from "../../constants";
-import { IoClose } from "react-icons/io5";
+import './SettingPopover.scss';
+import Wallet from './Wallet';
+import { useOptionsStore } from '../../store/options.store';
+import { useTranslation } from 'react-i18next';
+import { useMediaQuery } from '@uidotdev/usehooks';
+import { modalAnimationDesktop, modalAnimationMobile } from '../../constants';
+import { IoClose } from 'react-icons/io5';
 
 export type SettingPopoverProps = PropsWithChildren & {};
 
@@ -36,14 +36,18 @@ const SettingPopover: FC<SettingPopoverProps> = ({ children }) => {
     const handleCloseSetting = () => {
         setIsOpen(false);
     };
-    const isDesktop = useMediaQuery("(min-width: 768px)");
+    const isDesktop = useMediaQuery('(min-width: 768px)');
 
     const modalAnimation = isDesktop
         ? modalAnimationDesktop
         : modalAnimationMobile;
     return (
-        <div className="popover-container">
-            <button onClick={handleButtonClick} data-testid="setting-button">
+        <div className="mts-flex mts-relative mts-items-center mts-z-[2]">
+            <button
+                onClick={handleButtonClick}
+                data-testid="setting-button"
+                className="mts-flex mts-justify-center mts-items-center"
+            >
                 {children}
             </button>
             <AnimatePresence>
@@ -52,23 +56,23 @@ const SettingPopover: FC<SettingPopoverProps> = ({ children }) => {
                         initial={{ opacity: 0 }}
                         animate={{ opacity: 1 }}
                         exit={{ opacity: 0 }}
-                        transition={{ ease: "easeOut", duration: 0.15 }}
-                        className="modal-backdrop"
+                        transition={{ ease: 'easeOut', duration: 0.15 }}
+                        className="mts-fixed mts-top-0 mts-left-0 mts-bg-black/50 mts-w-full mts-h-full"
                     >
                         <motion.div
                             initial={modalAnimation.initial}
                             animate={modalAnimation.animate}
                             exit={modalAnimation.exit}
-                            transition={{ ease: "easeOut", duration: 0.15 }}
+                            transition={{ ease: 'easeOut', duration: 0.15 }}
                             ref={ref}
-                            className="popover"
+                            className="mts-flex mts-fixed mts-bottom-0 mts-left-0 mts-flex-col mts-gap-3 mts-shadow-sm mts-rounded-t-2xl mts-bg-white mts-p-4 mts-w-full mts-min-w-60 mts-h-fit mts-text-primary-950 rtl:mts-right-auto rtl:left-0 md:mts-min-w-80 md:mts-max-w-[32.5rem] md:mts-rounded-2xl"
                             data-testid="setting-popover"
                         >
-                            <div className="popover-header">
-                                <div>{t("setting")}</div>
+                            <div className="mts-flex mts-items-center mts-justify-between">
+                                <div>{t('setting')}</div>
                                 <button
                                     onClick={handleCloseSetting}
-                                    className="popover-header-close"
+                                    className="mts-text-primary-950"
                                 >
                                     <IoClose />
                                 </button>
diff --git a/lib/components/Header/SlippageSetting.tsx b/lib/components/Header/SlippageSetting.tsx
index 4750e1a..1587324 100644
--- a/lib/components/Header/SlippageSetting.tsx
+++ b/lib/components/Header/SlippageSetting.tsx
@@ -3,6 +3,7 @@ import { AnimatePresence, motion } from 'framer-motion';
 import { useSwapStore } from '../../store/swap.store';
 import './SlippageSetting.scss';
 import { useTranslation } from 'react-i18next';
+import { cn } from '../../utils/cn';
 
 const SlippageSetting = () => {
     const { t } = useTranslation();
@@ -50,13 +51,13 @@ const SlippageSetting = () => {
 
     return (
         <div
-            className="slippage-setting-container"
+            className="mts-flex mts-flex-col gap-1 md:mts-gap-2 md:mts-text-sm"
             data-testid="slippage-setting"
         >
-            <button className="button-container">
+            <button className="mts-flex mts-text-xs mts-justify-between mts-w-full mts-text-black md:mts-text-sm">
                 <div>{t('max_slippage')}</div>
                 <div
-                    className="slippage-indicator"
+                    className="mts-flex mts-justify-center mts-items-center"
                     data-testid="slippage-indicator"
                 >
                     {slippage === 'auto' ? t('auto') : `${slippage}%`}{' '}
@@ -67,41 +68,51 @@ const SlippageSetting = () => {
                     initial={{ opacity: 0 }}
                     animate={{ opacity: 1 }}
                     exit={{ opacity: 0 }}
-                    className="slippage-setting-dropdown"
+                    className="mts-grid mts-grid-cols-4 mts-justify-around mts-gap-x-2 mts-w-full mts-text-sm"
                 >
                     <div
                         onClick={handleOnAutoClick}
-                        className={`dropdown-item ${
-                            slippage === 'auto' ? 'active' : 'inactive-border'
-                        }`}
+                        className={cn(
+                            `mts-flex mts-relative mts-justify-center mts-items-center mts-transition-all mts-duration-300 mts-cursor-pointer mts-m-[0.125rem] mts-border-[1px] mts-border-transparent mts-rounded-xl mts-bg-zinc-100 mts-p-1 mts-h-8 md:mts-h-10 md:mts-m-1`,
+                            slippage === 'auto'
+                                ? 'mts-border-primary-500'
+                                : 'inactive-border'
+                        )}
                         data-testid="slippage-setting-auto"
                     >
                         {t('auto')}
                     </div>
                     <div
                         onClick={() => handleOnPercentClick(2)}
-                        className={`dropdown-item ${
-                            slippage === 2 ? 'active' : 'inactive-border'
-                        }`}
+                        className={cn(
+                            `mts-flex mts-relative mts-justify-center mts-items-center mts-transition-all mts-duration-300 mts-cursor-pointer mts-m-[0.125rem] mts-border-[1px] mts-border-transparent mts-rounded-xl mts-bg-zinc-100 mts-p-1 mts-h-8 md:mts-h-10`,
+                            slippage === 2
+                                ? 'mts-border-primary-500'
+                                : 'inactive-border'
+                        )}
                         data-testid="slippage-setting-2"
                     >
                         2%
                     </div>
                     <div
                         onClick={() => handleOnPercentClick(5)}
-                        className={`dropdown-item ${
-                            slippage === 5 ? 'active' : 'inactive-border'
-                        }`}
+                        className={cn(
+                            `mts-flex mts-relative mts-justify-center mts-items-center mts-transition-all mts-duration-300 mts-cursor-pointer mts-m-[0.125rem] mts-border-[1px] mts-border-transparent mts-rounded-xl mts-bg-zinc-100 mts-p-1 mts-h-8 md:mts-h-10`,
+                            slippage === 5
+                                ? 'mts-border-primary-500'
+                                : 'inactive-border'
+                        )}
                         data-testid="slippage-setting-5"
                     >
                         5%
                     </div>
                     <div
-                        className={`controllers dropdown-item ${
+                        className={cn(
+                            `mts-flex mts-justify-between mts-items-center mts-gap-1 mts-relative mts-transition-all mts-duration-300 mts-cursor-pointer mts-m-[0.125rem] mts-border-[1px] mts-border-transparent mts-rounded-xl mts-bg-zinc-100 mts-h-8 md:mts-h-10`,
                             ['auto', 2, 5].includes(slippage)
                                 ? 'inactive-border'
-                                : 'active'
-                        }`}
+                                : 'mts-border-primary-500'
+                        )}
                     >
                         <input
                             value={userInput}
@@ -109,10 +120,11 @@ const SlippageSetting = () => {
                             data-testid="slippage-setting-input"
                             type="text"
                             dir="rtl"
-                            className={`slippage-input `}
                             placeholder="1"
                         />
-                        <span className="slippage-input-percent">%</span>
+                        <span className="mts-text-xs md:text-sm mts-pr-1">
+                            %
+                        </span>
                     </div>
                 </motion.div>
             </AnimatePresence>
diff --git a/lib/components/Header/TokensSettings.tsx b/lib/components/Header/TokensSettings.tsx
index fab0829..49369ed 100644
--- a/lib/components/Header/TokensSettings.tsx
+++ b/lib/components/Header/TokensSettings.tsx
@@ -1,30 +1,30 @@
-import clsx from "clsx";
-import { useSwapStore } from "../../store/swap.store";
-import "./TokensSettings.scss";
-import { useTranslation } from "react-i18next";
+import { useSwapStore } from '../../store/swap.store';
+import { useTranslation } from 'react-i18next';
+import { cn } from '../../utils/cn';
+
 const TokensSettings = () => {
     const { t } = useTranslation();
     const { communityTokens, setCommunityTokens } = useSwapStore();
     return (
-        <div className="token-setting-container">
-            <div className="token-setting-text">
-                <span>{t("community_tokens")}</span>
+        <div className="mts-flex mts-justify-between mts-items-center mts-px-1 mts-text-xs md:mts-text-sm">
+            <div className="mts-text-black">
+                <span>{t('community_tokens')}</span>
             </div>
             <div>
                 <button
-                    className={clsx(
-                        "checkbox",
-                        communityTokens ? "checkbox-active" : ""
+                    className={cn(
+                        'mts-flex mts-relative mts-justify-start mts-items-center mts-transition-all mts-duration-300 mts-rounded-full mts-bg-zinc-100 mts-p-1 mts-w-12 mts-h-6',
+                        communityTokens ? 'mts-bg-primary-500' : ''
                     )}
                     onClick={() => setCommunityTokens(!communityTokens)}
                     data-testid="community-token-setting"
                 >
                     <div
-                        className={clsx(
-                            "checkbox-inner",
+                        className={cn(
+                            'mts-absolute mts-transition-all mts-duration-300 mts-ease mts-rounded-full mts-w-4 mts-h-4',
                             communityTokens
-                                ? "checkbox-inner-active"
-                                : "checkbox-inner-inactive"
+                                ? 'mts-left-7 mts-bg-white'
+                                : 'mts-left-1 mts-bg-primary-500'
                         )}
                     ></div>
                 </button>
diff --git a/lib/components/Header/Wallet.tsx b/lib/components/Header/Wallet.tsx
index 7e37044..ef18d0a 100644
--- a/lib/components/Header/Wallet.tsx
+++ b/lib/components/Header/Wallet.tsx
@@ -1,14 +1,14 @@
-import { fromNano } from "@mytonswap/sdk";
-import { TON_ADDR } from "../../constants";
-import { useWalletStore } from "../../store/wallet.store";
-import "./Wallet.scss";
-import formatNumber from "../../utils/formatNum";
-import shortAddress from "../../utils/shortAddress";
-import { FaCheck, FaCopy } from "react-icons/fa6";
-import { useState } from "react";
-import { MdArrowOutward } from "react-icons/md";
-import { useOptionsStore } from "../../store/options.store";
-import { useTranslation } from "react-i18next";
+import { fromNano } from '@mytonswap/sdk';
+import { TON_ADDR } from '../../constants';
+import { useWalletStore } from '../../store/wallet.store';
+import './Wallet.scss';
+import formatNumber from '../../utils/formatNum';
+import shortAddress from '../../utils/shortAddress';
+import { FaCheck, FaCopy } from 'react-icons/fa6';
+import { useState } from 'react';
+import { MdArrowOutward } from 'react-icons/md';
+import { useOptionsStore } from '../../store/options.store';
+import { useTranslation } from 'react-i18next';
 // import { useTonConnectUI } from "@tonconnect/ui-react";
 
 const Wallet = () => {
@@ -45,24 +45,24 @@ const Wallet = () => {
     return (
         <>
             {wallet && (
-                <div className="wallet-card">
-                    <p className="title">{t("account")}</p>
-                    <div className="wallet-content">
-                        <p className="balance-title">{t("balance")}</p>
-                        <div className="balance-amount">
+                <div className="mts-rounded-lg mts-p-2">
+                    <p className="mts-opacity-75 mts-text-xs">{t('account')}</p>
+                    <div className="mts-flex mts-flex-col">
+                        <p className="mts-mt-2 mts-text-sm">{t('balance')}</p>
+                        <div className="mts-my-2 mts-text-primary-500 mts-font-black mts-text-xl">
                             {TON_BALANCE}
-                            {t("ton")}
+                            {t('ton')}
                         </div>
-                        <div className="address-section">
-                            <div className="address">
+                        <div className="mts-flex mts-items-center mts-gap-1">
+                            <div className="mts-flex mts-opacity-75 mts-rounded mts-bg-zinc-100 mts-px-2 mts-py-1 mts-w-fit mts-text-sm">
                                 {shortAddress(
                                     wallet.account.address,
-                                    "mainnet",
+                                    'mainnet',
                                     4
                                 )}
                             </div>
                             <button
-                                className="wallet-icon"
+                                className="mts-flex mts-justify-center mts-items-center mts-opacity-75 mts-cursor-pointer mts-rounded mts-bg-zinc-100 mts-w-8 mts-h-8 mts-text-black mts-text-xs disabled:mts-opacity-50 disabled:mts-cursor-not-allowed"
                                 disabled={copied}
                                 onClick={() =>
                                     copyToClipboard(wallet.account.address)
@@ -71,7 +71,7 @@ const Wallet = () => {
                                 {copied ? <FaCheck /> : <FaCopy />}
                             </button>
                             <a
-                                className="wallet-icon"
+                                className="mts-flex mts-justify-center mts-items-center mts-opacity-75 mts-cursor-pointer mts-rounded mts-bg-zinc-100 mts-w-8 mts-h-8 mts-text-black mts-text-xs"
                                 target="_blank"
                                 href={`https://tonviewer.com/${wallet.account.address}`}
                             >
@@ -79,10 +79,10 @@ const Wallet = () => {
                             </a>
                         </div>
                         <button
-                            className="disconnect-wallet"
+                            className="mts-flex mts-justify-center mts-items-center mts-transition-all mts-duration-300 mts-ease-in-out mts-cursor-pointer mts-mt-2 mts-rounded mts-bg-zinc-100 mts-h-10 mts-text-black mts-text-sm"
                             onClick={handleDisconnect}
                         >
-                            {t("disconnect_wallet")}
+                            {t('disconnect_wallet')}
                         </button>
                     </div>
                 </div>
diff --git a/lib/components/Swap/Swap.scss b/lib/components/Swap/Swap.scss
index 75aa7b2..1ada41c 100644
--- a/lib/components/Swap/Swap.scss
+++ b/lib/components/Swap/Swap.scss
@@ -22,23 +22,13 @@
         font-family: 'Plus Jakarta Sans', sans-serif !important;
         -webkit-tap-highlight-color: transparent;
     }
-    button {
-        cursor: pointer;
-        border: none;
-        background: transparent;
-        font-family: Inter, sans-serif;
-    }
+
     input {
         outline: none;
         border: none;
         background: none;
         width: 100%;
     }
-    * {
-        box-sizing: border-box;
-        margin: 0;
-        padding: 0;
-    }
 
     .animate-spin {
         animation: spin 1s linear infinite;
@@ -69,7 +59,7 @@
         border-style: solid;
         border-color: var(--swap-container-border-color);
         border-radius: 1rem;
-        background: var(--swap-container-background-color);
+        // background: var(--swap-container-background-color);
         padding: 0.5rem;
         max-width: 21.875rem;
         overflow: hidden;
diff --git a/lib/components/Swap/Swap.stories.tsx b/lib/components/Swap/Swap.stories.tsx
index 695c47e..2175557 100644
--- a/lib/components/Swap/Swap.stories.tsx
+++ b/lib/components/Swap/Swap.stories.tsx
@@ -29,6 +29,13 @@ export default meta;
 type Story = StoryObj<typeof Swap>;
 
 export const Default: Story = {
+    args: {
+        options: {
+            ui_preferences: {
+                primary_color: '#1971ff',
+            },
+        },
+    },
     decorators: [
         (Story) => (
             <div className="mts-default">
diff --git a/lib/components/SwapButton/ConfirmationModal.tsx b/lib/components/SwapButton/ConfirmationModal.tsx
index d40b151..8dcfef4 100644
--- a/lib/components/SwapButton/ConfirmationModal.tsx
+++ b/lib/components/SwapButton/ConfirmationModal.tsx
@@ -1,14 +1,13 @@
-import { IoMdClose } from "react-icons/io";
-import { ModalState, useSwapStore } from "../../store/swap.store";
-import { fromNano } from "@mytonswap/sdk";
-import { FaArrowRightArrowLeft } from "react-icons/fa6";
-import SwapKeyValue from "../SwapDetails/SwapKeyValue";
-import formatNumber from "../../utils/formatNum";
-import swap from "../../utils/swap";
-import { FC, useEffect } from "react";
-import "./ConfirmationModal.scss";
-import { useOptionsStore } from "../../store/options.store";
-import { useTranslation } from "react-i18next";
+import { IoMdClose } from 'react-icons/io';
+import { ModalState, useSwapStore } from '../../store/swap.store';
+import { fromNano } from '@mytonswap/sdk';
+import { FaArrowRightArrowLeft } from 'react-icons/fa6';
+import SwapKeyValue from '../SwapDetails/SwapKeyValue';
+import formatNumber from '../../utils/formatNum';
+import swap from '../../utils/swap';
+import { FC, useEffect } from 'react';
+import { useOptionsStore } from '../../store/options.store';
+import { useTranslation } from 'react-i18next';
 type ConfirmationModalProps = {
     setConfirmModal: (state: ModalState) => void;
 };
@@ -16,7 +15,7 @@ type ConfirmationModalProps = {
 const ConfirmationModal: FC<ConfirmationModalProps> = ({ setConfirmModal }) => {
     const { t } = useTranslation();
     const handleConfirmClose = () => {
-        setConfirmModal(ModalState.NONE);
+        setConfirmModal(ModalState.IN_PROGRESS);
     };
     const { tonConnectInstance } = useOptionsStore();
     useEffect(() => {
@@ -44,38 +43,43 @@ const ConfirmationModal: FC<ConfirmationModalProps> = ({ setConfirmModal }) => {
         }
     };
     return (
-        <div className="confirm-modal-container">
-            <div className="confirm-modal-header">
-                <span className="title">{t("confirm.confirm_title")}</span>{" "}
-                <IoMdClose onClick={handleConfirmClose} className="icon" />
+        <div className="mts-flex mts-flex-col mts-items-center mts-gap-3 mts-pt-2 mts-pb-2 mts-w-full mts-h-full">
+            <div className="mts-flex mts-justify-between mts-items-center mts-pr-4 mts-pl-4 mts-w-full">
+                <span className="mts-opacity-50 mts-text-black mts-font-bold">
+                    {t('confirm.confirm_title')}
+                </span>{' '}
+                <IoMdClose
+                    onClick={handleConfirmClose}
+                    className="mts-cursor-pointer mts-text-black mts-text-xl"
+                />
             </div>
-            <div className="confirm-modal-images">
+            <div className="mts-flex mts-items-center mts-pt-1">
                 <div
-                    className="pay-image"
+                    className="mts-translate-x-3 mts-border-5 mts-border-solid mts-border-modal-background mts-rounded-full mts-bg-contain mts-w-16 mts-h-16"
                     style={{
                         background: `url(${pay_token?.image})`,
                     }}
                 ></div>
                 <div
-                    className="receive-image"
+                    className="mts--translate-x-0.5 mts-border-5 mts-border-solid mts-border-modal-background mts-rounded-full mts-bg-contain mts-w-16 mts-h-16"
                     style={{
                         background: `url(${receive_token?.image})`,
                     }}
                 ></div>
             </div>
-            <div className="confirm-modal-change-rate ">
+            <div className="mts-flex mts-flex-col mts-items-center mts-opacity-70 mts-text-black mts-font-bold mts-text-center">
                 <div>
-                    {fromNano(pay_amount, pay_token?.decimal)}{" "}
+                    {fromNano(pay_amount, pay_token?.decimal)}{' '}
                     {pay_token?.symbol}
                 </div>
                 <div>
-                    <FaArrowRightArrowLeft className="change-icon" />
+                    <FaArrowRightArrowLeft className="mts-rotate-90 mts-opacity-60 mts-text-xs" />
                 </div>
                 <div>
                     {bestRoute!.pool_data.receive_show!} {receive_token?.symbol}
                 </div>
-                <div className="rate">
-                    ≈{" "}
+                <div className="mts-opacity-60 mts-text-xs">
+                    ≈{' '}
                     {formatNumber(
                         Number(bestRoute!.pool_data.receive_show) *
                             receive_rate!.USD,
@@ -84,15 +88,15 @@ const ConfirmationModal: FC<ConfirmationModalProps> = ({ setConfirmModal }) => {
                     $
                 </div>
             </div>
-            <div className="confirm-modal-detail">
+            <div className="mts-flex mts-flex-grow mts-flex-col mts-justify-center mts-gap-3 mts-mt-0.5 mts-pr-4 mts-pl-4 mts-w-full mts-h-fit mts-text-lg">
                 <SwapKeyValue
-                    keyText={t("slippage_tolerance")}
-                    value={slippage === "auto" ? "1% Auto" : slippage + "%"}
+                    keyText={t('slippage_tolerance')}
+                    value={slippage === 'auto' ? '1% Auto' : slippage + '%'}
                 />
                 <SwapKeyValue
-                    keyText={t("minimum_received")}
+                    keyText={t('minimum_received')}
                     value={
-                        <div className="min-receive">
+                        <div className="mts-flex mts-gap-1">
                             {formatNumber(
                                 bestRoute!.pool_data.minimumReceive_show,
                                 4
@@ -102,44 +106,28 @@ const ConfirmationModal: FC<ConfirmationModalProps> = ({ setConfirmModal }) => {
                     }
                 />
                 <SwapKeyValue
-                    keyText={t("blockchain_fee")}
+                    keyText={t('blockchain_fee')}
                     value={bestRoute!.pool_data.blockchainFee}
                 />
                 <SwapKeyValue
-                    keyText={t("route")}
+                    keyText={t('route')}
                     value={
                         bestRoute ? (
-                            <div className="best-route">
-                                {/* <span className="flex items-center justify-center gap-x-1">
-                                <div
-                                    className="w-3 h-3  !bg-contain"
-                                    style={{
-                                        background: `url(${
-                                            bestRoute
-                                                .selected_pool
-                                                .dex ===
-                                            "dedust"
-                                                ? "https://dedust.io/favicon-32x32.png"
-                                                : "https://ston.fi/images/tild3432-3236-4431-b139-376231383134__favicon.svg"
-                                        })`,
-                                    }}
-                                ></div>
-                                {bestRoute.selected_pool
-                                    .dex === "dedust"
-                                    ? "Dedust -"
-                                    : "Ston.fi -"}
-                            </span> */}
-                                {bestRoute.pool_data.route_view.join(" > ")}
+                            <div className="mts-flex mts-justify-center mts-items-center mts-gap-1">
+                                {bestRoute.pool_data.route_view.join(' > ')}
                             </div>
                         ) : (
-                            "Enter amount"
+                            'Enter amount'
                         )
                     }
                 />
             </div>
-            <div className="confirm-modal-button-container">
-                <button onClick={handleConfirmSwap} className="confirm-button">
-                    {t("confirm.confirm_button")}
+            <div className="mts-mt-0.5 mts-pr-4 mts-pl-4 mts-w-full">
+                <button
+                    onClick={handleConfirmSwap}
+                    className="mts-cursor-pointer mts-rounded-lg mts-bg-primary-500 mts-w-full mts-h-12 mts-text-white mts-text-base"
+                >
+                    {t('confirm.confirm_button')}
                 </button>
             </div>
         </div>
diff --git a/lib/components/SwapButton/Inprogress.tsx b/lib/components/SwapButton/Inprogress.tsx
index 089c2cd..5c64d75 100644
--- a/lib/components/SwapButton/Inprogress.tsx
+++ b/lib/components/SwapButton/Inprogress.tsx
@@ -5,7 +5,6 @@ import { Dex, fromNano } from '@mytonswap/sdk';
 import { FaArrowRightArrowLeft } from 'react-icons/fa6';
 import formatNumber from '../../utils/formatNum';
 import { ImSpinner8 } from 'react-icons/im';
-import './Inprogress.scss';
 import { useEventsStore } from '../../store/events.store';
 import { useTranslation } from 'react-i18next';
 
@@ -78,34 +77,37 @@ const Inprogress = () => {
     };
 
     return (
-        <div className="inprogress-container">
-            <IoClose onClick={handleCloseModal} className=" close-button" />
-            <div className="inprogress-modal-images">
+        <div className="mts-flex mts-flex-col mts-justify-center mts-items-center mts-h-full">
+            <IoClose
+                onClick={handleCloseModal}
+                className="mts-absolute mts-top-4 mts-right-4 mts-opacity-70 mts-cursor-pointer mts-text-black mts-text-xl"
+            />
+            <div className="mts-flex mts-items-center mts-pt-1">
                 <div
-                    className="pay-image"
+                    className="mts-transform mts-translate-x-1 mts-border-2 mts-border-solid mts-border-zinc-100 mts-rounded-full !mts-bg-contain mts-w-16 mts-h-16 md:mts-w-10 md:mts-h-10"
                     style={{
                         background: `url(${pay_token?.image})`,
                     }}
                 ></div>
                 <div
-                    className="receive-image"
+                    className="mts-transform mts--translate-x-1 mts-border-2 mts-border-solid mts-border-zinc-100 mts-rounded-full !mts-bg-contain mts-w-16 mts-h-16 md:mts-w-10 md:mts-h-10"
                     style={{
                         background: `url(${receive_token?.image})`,
                     }}
                 ></div>
             </div>
-            <div className="inprogress-modal-change-rate ">
+            <div className="mts-flex mts-flex-col mts-items-center mts-opacity-70 mts-text-black mts-font-bold mts-text-lg mts-text-center">
                 <div>
                     {fromNano(pay_amount, pay_token?.decimal)}{' '}
                     {pay_token?.symbol}
                 </div>
                 <div>
-                    <FaArrowRightArrowLeft className="change-icon" />
+                    <FaArrowRightArrowLeft className="mts-transform mts-rotate-90 mts-opacity-60 mts-text-sm md:mts-text-xs" />
                 </div>
                 <div>
                     {bestRoute!.pool_data.receive_show!} {receive_token?.symbol}
                 </div>
-                <div className="rate">
+                <div className="mts-opacity-60 mts-text-sm md:mts-text-xs">
                     ≈{' '}
                     {formatNumber(
                         Number(bestRoute!.pool_data.receive_show) *
@@ -116,12 +118,14 @@ const Inprogress = () => {
                 </div>
             </div>
 
-            <div className="description">{t('transaction.pending')}</div>
-            <p className="description-2">
+            <div className="mts-mt-4 mts-text-black mts-font-bold mts-text-xl mts-text-center">
+                {t('transaction.pending')}
+            </div>
+            <p className="mts-text-black mts-text-base">
                 {t('transaction.action_in_progress')}
             </p>
-            <div className="loading-icon">
-                <ImSpinner8 className="animate-spin icon" />
+            <div className="mts-flex mts-justify-center mts-items-center mts-mt-1 mts-w-full mts-text-black mts-text-3xl md:mts-mt-4 md:mts-text-4xl">
+                <ImSpinner8 className="mts-animate-spin mts-opacity-50" />
             </div>
         </div>
     );
diff --git a/lib/components/SwapButton/SwapButton.tsx b/lib/components/SwapButton/SwapButton.tsx
index 5e06ba5..2fde65e 100644
--- a/lib/components/SwapButton/SwapButton.tsx
+++ b/lib/components/SwapButton/SwapButton.tsx
@@ -6,7 +6,6 @@ import ConfirmationModal from './ConfirmationModal';
 import WaitingForWallet from './WaitingForWallet';
 import Inprogress from './Inprogress';
 import Done from './Done';
-import './SwapButton.scss';
 import { useMediaQuery } from 'usehooks-ts';
 import {
     modalAnimationDesktop,
@@ -39,8 +38,8 @@ const SwapButton = () => {
     const getSwapText = () => {
         if (isSelectingToken)
             return (
-                <span className="loading-button">
-                    <CgSpinnerTwo className="animate-loading" /> Loading ...
+                <span className="mts-flex mts-justify-center mts-items-center mts-gap-2">
+                    <CgSpinnerTwo className="mts-animate-spin" /> Loading ...
                 </span>
             );
         if (!tonConnectInstance?.wallet) return t('button_text.connect_wallet');
@@ -97,11 +96,11 @@ const SwapButton = () => {
                         initial={{ opacity: 0 }}
                         animate={{ opacity: 1 }}
                         exit={{ opacity: 0 }}
-                        className="modal-container"
+                        className="mts-fixed mts-top-0 mts-left-0 mts-z-[9999999999999999999999999] mts-bg-[rgba(0,0,0,0.5)] mts-w-full mts-h-full mts-overflow-hidden"
                     >
                         <motion.div
                             transition={{ ease: [0.6, -0.05, 0.01, 0.99] }}
-                            className="modal-container-inner raw-bottom-telegram"
+                            className="mts-flex mts-fixed mts-bottom-0 mts-left-0 mts-flex-col mts-justify-center mts-items-center mts-shadow-[0px_0px_5px_rgba(0,0,0,0.05)] mts-border-t mts-border-solid mts-border-black/10 mts-rounded-t-lg mts-bg-zinc-100 mts-p-2 mts-w-full mts-h-full mts-max-h-[26.875rem] md:mts-shadow-[0_0px_10px_rgba(0,0,0,0.05)] md:mts-rounded-lg md:mts-w-[90%] md:mts-max-w-[28.125rem] md:mtsx-max-h-[80%] md:mts-max-h-[30rem] lg:mts-w-[32.5rem] lg:mts-max-w-[32.5rem]"
                             initial={modalAnimation.initial}
                             animate={modalAnimation.animate}
                             exit={modalAnimation.exit}
@@ -127,11 +126,11 @@ const SwapButton = () => {
             </AnimatePresence>
             <button
                 className={cn(
-                    'swap-button',
+                    'mts-mt-3 mts-rounded-lg mts-bg-primary-500 mts-w-full mts-h-[3.75rem] mts-text-white mts-text-base md:mts-h-[3.25rem] md:mts-text-md lg:mts-rounded-xl lg:mts-h-[3.5rem] lg:mts-text-md',
                     tonConnectInstance?.wallet &&
                         isRouteAvailable &&
                         !bestRoute.pool_data.status
-                        ? 'price-impact'
+                        ? 'mts-bg-[var(--price-impact-color)]'
                         : ''
                 )}
                 data-testid="swap-button"
diff --git a/lib/components/SwapButton/WaitingForWallet.tsx b/lib/components/SwapButton/WaitingForWallet.tsx
index b9ea43b..927c85a 100644
--- a/lib/components/SwapButton/WaitingForWallet.tsx
+++ b/lib/components/SwapButton/WaitingForWallet.tsx
@@ -1,11 +1,10 @@
-import { ImSpinner8 } from "react-icons/im";
-import { IoClose } from "react-icons/io5";
-import { ModalState, useSwapStore } from "../../store/swap.store";
-import "./WaitingForWallet.scss";
-import { motion } from "framer-motion";
-import { useOptionsStore } from "../../store/options.store";
-import { useTranslation } from "react-i18next";
-import { Trans } from "react-i18next";
+import { ImSpinner8 } from 'react-icons/im';
+import { IoClose } from 'react-icons/io5';
+import { ModalState, useSwapStore } from '../../store/swap.store';
+import { motion } from 'framer-motion';
+import { useOptionsStore } from '../../store/options.store';
+import { useTranslation } from 'react-i18next';
+import { Trans } from 'react-i18next';
 
 const WaitingForWallet = () => {
     const { t } = useTranslation();
@@ -20,22 +19,25 @@ const WaitingForWallet = () => {
             initial={{ opacity: 0 }}
             whileInView={{ opacity: 1 }}
             exit={{ opacity: 0 }}
-            className="waiting-for-wallet-container"
+            className="mts-flex mts-relative mts-flex-col mts-justify-center mts-items-center mts-px-4 mts-h-full mts-text-black"
         >
-            <IoClose onClick={handleCloseModal} className="close-button" />
+            <IoClose
+                onClick={handleCloseModal}
+                className="mts-absolute mts-top-4 mts-right-4 mts-opacity-70 mts-cursor-pointer mts-text-2xl"
+            />
 
-            <div className="loading-icon-container">
-                <ImSpinner8 className="animate-spin icon" />
+            <div className="mts-flex mts-justify-center mts-items-center mts-scale-150 mts-w-full mts-text-3xl md:mts-text-4xl">
+                <ImSpinner8 className="mts-animate-spin mts-opacity-70 mts-text-primary-500" />
             </div>
-            <div className="loading-text">
+            <div className="mts-mt-4 mts-font-bold mts-text-2xl md:mts-text-xl mts-text-center">
                 <Trans
-                    i18nKey={"confirm.confirm_in_wallet"}
+                    i18nKey={'confirm.confirm_in_wallet'}
                     values={{
                         wallet: tonConnectInstance?.wallet?.device.appName,
                     }}
                 ></Trans>
             </div>
-            <p>{t("confirm.action_in_progress")}</p>
+            <p>{t('confirm.action_in_progress')}</p>
         </motion.div>
     );
 };
diff --git a/lib/components/SwapCard/Card.tsx b/lib/components/SwapCard/Card.tsx
index aabee6e..f1beddd 100644
--- a/lib/components/SwapCard/Card.tsx
+++ b/lib/components/SwapCard/Card.tsx
@@ -1,18 +1,19 @@
-import { ChangeEvent, CSSProperties, FC, useEffect, useState } from "react";
-import { MdKeyboardArrowDown } from "react-icons/md";
-import CardDialog from "./CardDialog";
-import { useSwapStore } from "../../store/swap.store";
-import { Asset, BestRoute, fromNano } from "@mytonswap/sdk";
-import formatNumber from "../../utils/formatNum";
-import CardButton from "./CardButton";
-import { toNano } from "@mytonswap/sdk";
-import { useWalletStore } from "../../store/wallet.store";
-import { TON_ADDR } from "../../constants";
-import "./Card.scss";
-import { useOptionsStore } from "../../store/options.store";
-import { useTranslation } from "react-i18next";
+import { ChangeEvent, CSSProperties, FC, useEffect, useState } from 'react';
+import { MdKeyboardArrowDown } from 'react-icons/md';
+import CardDialog from './CardDialog';
+import { useSwapStore } from '../../store/swap.store';
+import { Asset, BestRoute, fromNano } from '@mytonswap/sdk';
+import formatNumber from '../../utils/formatNum';
+import CardButton from './CardButton';
+import { toNano } from '@mytonswap/sdk';
+import { useWalletStore } from '../../store/wallet.store';
+import { TON_ADDR } from '../../constants';
+import './Card.scss';
+import { useOptionsStore } from '../../store/options.store';
+import { useTranslation } from 'react-i18next';
+import { cn } from '../../utils/cn';
 type CardProps = {
-    type: "pay" | "receive";
+    type: 'pay' | 'receive';
 };
 
 const Card: FC<CardProps> = ({ type }) => {
@@ -20,7 +21,7 @@ const Card: FC<CardProps> = ({ type }) => {
     const [isSelectVisible, setIsSelectVisible] = useState(false);
     const [typingTimeout, setTypingTimeout] =
         useState<ReturnType<typeof setTimeout>>();
-    const [userInput, setUserInput] = useState("");
+    const [userInput, setUserInput] = useState('');
     const {
         setPayToken,
         pay_token,
@@ -37,7 +38,7 @@ const Card: FC<CardProps> = ({ type }) => {
     const { balance } = useWalletStore();
     const { options } = useOptionsStore();
     const onTokenSelect = (asset: Asset) => {
-        if (type === "pay") {
+        if (type === 'pay') {
             setPayToken(asset);
         } else {
             setReceiveToken(asset);
@@ -46,7 +47,7 @@ const Card: FC<CardProps> = ({ type }) => {
     };
 
     const tokenRate = (() => {
-        if (type === "pay") {
+        if (type === 'pay') {
             return pay_rate?.USD ?? 0;
         } else {
             return receive_rate?.USD ?? 0;
@@ -54,7 +55,7 @@ const Card: FC<CardProps> = ({ type }) => {
     })();
 
     const token = (() => {
-        if (type === "pay") {
+        if (type === 'pay') {
             return pay_token;
         } else {
             return receive_token;
@@ -64,9 +65,9 @@ const Card: FC<CardProps> = ({ type }) => {
     const isRouteAvailable = bestRoute && bestRoute.pool_data;
 
     const value =
-        type === "pay"
+        type === 'pay'
             ? userInput
-            : (isRouteAvailable && bestRoute?.pool_data.receive_show) ?? 0;
+            : ((isRouteAvailable && bestRoute?.pool_data.receive_show) ?? 0);
 
     const calculatePayRate = (payAmount: bigint, tokenRate: number) =>
         payAmount
@@ -88,7 +89,7 @@ const Card: FC<CardProps> = ({ type }) => {
             : 0;
 
     const calculatedRate =
-        type === "pay"
+        type === 'pay'
             ? calculatePayRate(pay_amount, tokenRate)
             : calculateReceiveRate(bestRoute, tokenRate);
 
@@ -106,11 +107,11 @@ const Card: FC<CardProps> = ({ type }) => {
         e.preventDefault();
         const decimalRegexp = /^\d*(?:\.\d{0,18})?$/; // Allow up to 18 decimal places
 
-        let userInput = e.target.value.replace(/,/g, ".");
+        let userInput = e.target.value.replace(/,/g, '.');
 
         // Handle empty string input
-        if (userInput === "") {
-            setUserInput("");
+        if (userInput === '') {
+            setUserInput('');
             timeoutSetPayAmount(0n);
             return;
         }
@@ -118,11 +119,11 @@ const Card: FC<CardProps> = ({ type }) => {
         // If input matches the decimal pattern
         if (decimalRegexp.test(userInput)) {
             // Avoid leading zeros (except for values like "0." or "0.1")
-            userInput = userInput.replace(/^0+(?=\d)/, "");
+            userInput = userInput.replace(/^0+(?=\d)/, '');
 
             // Handle case where input is exactly "0." (valid scenario)
-            if (userInput === "." || userInput === "0.") {
-                setUserInput("0.");
+            if (userInput === '.' || userInput === '0.') {
+                setUserInput('0.');
             } else {
                 setUserInput(userInput);
             }
@@ -137,13 +138,13 @@ const Card: FC<CardProps> = ({ type }) => {
     };
 
     useEffect(() => {
-        if (type === "pay") {
+        if (type === 'pay') {
             setUserInput(fromNano(pay_amount, pay_token?.decimal));
         }
     }, [pay_amount]);
 
     const balanceToken = (() => {
-        if (type === "pay") {
+        if (type === 'pay') {
             return pay_token ? balance.get(pay_token.address) : null;
         } else {
             return receive_token ? balance.get(receive_token.address) : null;
@@ -164,20 +165,28 @@ const Card: FC<CardProps> = ({ type }) => {
         setPayAmount(payAmount);
     };
     const isDisabled = (() => {
-        if (type === "pay" && options.lock_pay_token) return true;
-        if (type === "receive" && options.lock_receive_token) return true;
+        if (type === 'pay' && options.lock_pay_token) return true;
+        if (type === 'receive' && options.lock_receive_token) return true;
         return false;
     })();
     return (
         <>
-            <div className="swapcard-card">
-                <div className="card-head">
-                    <span data-testid="swapcard-title" className="card-title">
-                        {type === "pay" ? t("you_pay") : t("you_receive")}
+            <div className="mts-flex mts-flex-col mts-w-full mts-text-base">
+                <div className="mts-flex mts-justify-between mts-items-center mts-px-1">
+                    <span
+                        data-testid="swapcard-title"
+                        className="mts-opacity-70 mts-text-black"
+                    >
+                        {type === 'pay' ? t('you_pay') : t('you_receive')}
                     </span>
-                    {type === "pay" && balanceToken ? (
-                        <span className="max-button" onClick={handleMaxClick}>
-                            <span className="max-text">{t("max")} : </span>
+                    {type === 'pay' && balanceToken ? (
+                        <span
+                            className="mts-cursor-pointer mts-text-black"
+                            onClick={handleMaxClick}
+                        >
+                            <span className="mts-text-primary-500">
+                                {t('max')} :{' '}
+                            </span>
                             <span>
                                 {formatNumber(
                                     +fromNano(
@@ -186,12 +195,12 @@ const Card: FC<CardProps> = ({ type }) => {
                                     ),
                                     2,
                                     false
-                                )}{" "}
+                                )}{' '}
                                 {pay_token?.symbol}
                             </span>
                         </span>
                     ) : (
-                        <span className="max-button pay">
+                        <span className="mts-cursor-auto mts-text-black">
                             {balanceToken && receive_token && (
                                 <span>
                                     {formatNumber(
@@ -201,17 +210,22 @@ const Card: FC<CardProps> = ({ type }) => {
                                         ),
                                         2,
                                         false
-                                    )}{" "}
+                                    )}{' '}
                                     {receive_token?.symbol}
                                 </span>
                             )}
                         </span>
                     )}
                 </div>
-                <div className={`card-content ${type}`}>
-                    <div className="card-inputs">
-                        {((type === "receive" && !isFindingBestRoute) ||
-                            type === "pay") && (
+                <div
+                    className={cn(
+                        `mts-grid mts-grid-cols-[1fr_auto] mts-gap-1 mts-mt-3.5 mts-rounded-lg mts-bg-white mts-p-4 mts-w-full`,
+                        type === 'pay' ? 'mts-bg-white' : 'mts-bg-zinc-200'
+                    )}
+                >
+                    <div className="mts-flex mts-flex-col mts-justify-center mts-gap-1 mts-w-full">
+                        {((type === 'receive' && !isFindingBestRoute) ||
+                            type === 'pay') && (
                             <input
                                 type="text"
                                 inputMode="decimal"
@@ -219,61 +233,63 @@ const Card: FC<CardProps> = ({ type }) => {
                                 autoCorrect="off"
                                 minLength={1}
                                 maxLength={14}
-                                value={value ?? ""}
+                                value={value ?? ''}
                                 disabled={
-                                    type === "receive" || options.lock_input
+                                    type === 'receive' || options.lock_input
                                 }
                                 onChange={handlePayAmountChange}
                                 pattern="^[0-9]*[.,]?[0-9]*$"
                                 placeholder="0"
-                                className={`card-input ${type}`}
+                                className={`mts-outline-none mts-bg-transparent mts-h-7.5 mts-text-black mts-font-bold mts-text-2xl mts-font-inherit ${type}`}
                                 data-testid={`swapcard-input-${type}`}
                             />
                         )}
-                        {type === "receive" && isFindingBestRoute && (
+                        {type === 'receive' && isFindingBestRoute && (
                             <div
-                                className="card-input-loading"
+                                className="mts-rounded-lg mts-w-24 mts-h-[2rem]"
                                 data-skeleton
                                 style={{
                                     ...({
-                                        "--skeleton-bg": `var(--input-token-color)`,
-                                        "--skeleton-shine": `var(--skeleton-shine-color)`,
+                                        '--skeleton-bg': `var(--input-token-color)`,
+                                        '--skeleton-shine': `var(--skeleton-shine-color)`,
                                     } as CSSProperties),
                                 }}
                             />
                         )}
-                        {((type === "receive" && !isFindingBestRoute) ||
-                            type === "pay") && (
-                            <span className="card-rate">${calculatedRate}</span>
+                        {((type === 'receive' && !isFindingBestRoute) ||
+                            type === 'pay') && (
+                            <span className="mts-flex mts-items-center mts-opacity-50 mts-h-5 mts-text-black mts-text-base mts-font-inherit mts-text-left">
+                                ${calculatedRate}
+                            </span>
                         )}
-                        {type === "receive" && isFindingBestRoute && (
+                        {type === 'receive' && isFindingBestRoute && (
                             <div
-                                className="card-rate-loading"
+                                className="mts-rounded-lg mts-w-12 mts-h-5"
                                 data-skeleton
                                 style={{
                                     ...({
-                                        "--skeleton-bg": `var(--input-token-color)`,
-                                        "--skeleton-shine": `var(--skeleton-shine-color)`,
+                                        '--skeleton-bg': `var(--input-token-color)`,
+                                        '--skeleton-shine': `var(--skeleton-shine-color)`,
                                     } as CSSProperties),
                                 }}
                             />
                         )}
                     </div>
-                    <div className="card-button">
+                    <div className="mts-flex mts-items-center">
                         <CardButton
                             type={type}
                             onClick={() => setIsSelectVisible(true)}
                             isLoading={isLoading || !token}
                         >
                             <div
-                                className="selection-box"
+                                className="mts-rounded-full !mts-bg-contain mts-w-8 mts-h-8"
                                 style={{
-                                    background: `url(${token?.image})`,
+                                    background: `url(${token?.image}) `,
                                 }}
                             ></div>
                             <div>{token?.symbol}</div>
                             {!isDisabled && (
-                                <div className="dropdown-icon">
+                                <div className="mts-dropdown-icon">
                                     <MdKeyboardArrowDown />
                                 </div>
                             )}
diff --git a/lib/components/SwapCard/CardButton.tsx b/lib/components/SwapCard/CardButton.tsx
index 7a2b734..67d4dae 100644
--- a/lib/components/SwapCard/CardButton.tsx
+++ b/lib/components/SwapCard/CardButton.tsx
@@ -1,10 +1,11 @@
 import { FC, PropsWithChildren } from 'react';
-import clsx from 'clsx';
 import { MdKeyboardArrowDown } from 'react-icons/md';
 import './CardButton.scss';
 import { useOptionsStore } from '../../store/options.store';
 import { useTranslation } from 'react-i18next';
 import { useSwapStore } from '../../store/swap.store';
+import { cn } from '../../utils/cn';
+
 type CardButtonProps = {
     isLoading: boolean;
     onClick: () => void;
@@ -26,6 +27,7 @@ const CardButton: FC<CardButtonProps & PropsWithChildren> = ({
         if (type === 'receive' && options.lock_receive_token) return true;
         return false;
     })();
+
     return (
         <button
             disabled={isDisabled}
@@ -36,20 +38,17 @@ const CardButton: FC<CardButtonProps & PropsWithChildren> = ({
                     : {}),
             }}
             data-testid={`card-button-${type}`}
-            className={clsx(
-                'selection-box-container',
-                isLoading && 'loading',
-                type === 'pay' && isLoading && 'pay-loading',
-                type === 'receive' && isLoading && 'receive-loading'
+            className={cn(
+                'mts-flex mts-gap-1 mts-items-center mts-transition-all mts-ease-in-out mts-rounded-full mts-py-1 mts-pr-2 mts-pl-1 mts-h-10 mts-font-bold mts-text-2xl mts-ltr mts-bg-zinc-100 mts-text-black',
+                isLoading && 'mts-w-20 mts-h-10',
+                type === 'pay' && isLoading && 'mts-pointer-events-none',
+                type === 'receive' &&
+                    isLoading &&
+                    'mts-justify-center mts-px-2 mts-w-fit'
             )}
             style={{
                 ...(isDisabled && { opacity: 0.7, cursor: 'auto' }),
-                ...(isLoading && type === 'pay'
-                    ? { color: `var(--text-black-color)` }
-                    : {
-                          background: `var(--input-token-color)`,
-                          color: `var(--text-black-color)`,
-                      }),
+
                 ...{
                     '--skeleton-bg': `var(--input-token-color)`,
                     '--skeleton-shine': `var(--skeleton-shine-color)`,
@@ -61,7 +60,7 @@ const CardButton: FC<CardButtonProps & PropsWithChildren> = ({
             ) : type === 'receive' ? (
                 <>
                     {t('select')}{' '}
-                    <div className="dropdown-icon">
+                    <div className="mts-flex mts-justify-center mts-items-center">
                         <MdKeyboardArrowDown />
                     </div>
                 </>
diff --git a/lib/components/SwapCard/CardDialog.tsx b/lib/components/SwapCard/CardDialog.tsx
index 4a08bda..611f0f9 100644
--- a/lib/components/SwapCard/CardDialog.tsx
+++ b/lib/components/SwapCard/CardDialog.tsx
@@ -268,32 +268,36 @@ const CardDialog: FC<CardDialogProps> = ({
                         initial={{ opacity: 0 }}
                         animate={{ opacity: 1 }}
                         exit={{ opacity: 0 }}
-                        className={clsx('card-dialog-container')}
+                        className={clsx(
+                            'mts-fixed mts-top-0 mts-left-0 mts-z-[9999999999999999999999999] mts-bg-black/50 mts-w-full mts-h-full mts-overflow-hidden'
+                        )}
                     >
                         <motion.div
                             initial={modalAnimation.initial}
                             animate={modalAnimation.animate}
                             exit={modalAnimation.exit}
-                            className={clsx('card-dialog')}
+                            className={clsx(
+                                'mts-fixed mts-bottom-0 mts-left-0 mts-flex mts-flex-col mts-shadow-[0px_0px_10px_rgba(0,0,0,0.05)] mts-rounded-t-2xl mts-bg-white mts-p-3 mts-pt-4 mts-pb-2 mts-w-full mts-min-h-[92.5dvh] mts-max-h-[92.5dvh] mts-overflow-y-auto md:mts-shadow-[0_0px_10px_rgba(0,0,0,0.05)] md:mts-rounded-2xl md:mts-w-[90%] md:mts-max-w-[34.375rem] md:mts-h-auto md:mts-min-h-[21.875rem] md:mts-max-h-[70dvh]'
+                            )}
                             ref={ref}
                             onClick={(e) => {
                                 e.stopPropagation();
                             }}
                         >
-                            <div className="dialog-head">
+                            <div className="mts-flex mts-justify-between mts-items-center mts-text-black mts-font-bold mts-text-xl">
                                 <div>{t('select_a_token')}</div>
                                 <button
                                     onClick={handleOnClose}
-                                    className="card-dialog-close"
+                                    className="mts-hidden mts-opacity-50 mts-text-black mts-text-xl md:mts-block"
                                 >
                                     <IoClose />
                                 </button>
                             </div>
                             <div>
-                                <div className="dialog-search">
-                                    <MdOutlineSearch className="dialog-search-icon" />
+                                <div className="mts-flex mts-items-center mts-transition-all mts-duration-200 mts-ease-in-out mts-mt-6 mts-mb-2 mts-border mts-border-black/10 mts-rounded-lg mts-bg-white mts-px-2 mts-w-full mts-h-[3.25rem] hover:mts-bg-zinc-100 focus-within:mts-border-primary-500">
+                                    <MdOutlineSearch className="mts-text-black mts-text-lg md:mts-opacity-50" />
                                     <input
-                                        className="dialog-search-input"
+                                        className="mts-outline-none mts-bg-transparent mts-px-1 mts-w-full mts-h-full mts-text-black mts-text-base md:mts-text-lg"
                                         type="text"
                                         placeholder={t('search')}
                                         data-testid="dialog-search-input"
@@ -304,18 +308,18 @@ const CardDialog: FC<CardDialogProps> = ({
                                 </div>
                             </div>
                             {pinnedTokens && (
-                                <div className="pinned-token-container">
+                                <div className="mts-flex mts-items-center mts-gap-2 mts-py-3">
                                     {pinnedTokens.map((item) => {
                                         return (
                                             <button
-                                                className="pinned-token"
+                                                className="mts-flex mts-items-center mts-gap-1 mts-opacity-80 mts-transition-all mts-duration-300 mts-ease-in-out mts-cursor-pointer mts-rounded-full mts-bg-zinc-100 mts-p-1 mts-px-2 mts-text-black mts-text-[0.9rem] hover:mts-opacity-100"
                                                 onClick={() => {
                                                     handleOnTokenSelect(item);
                                                 }}
                                                 key={item.address}
                                             >
                                                 <div
-                                                    className="pinned-token-image"
+                                                    className="mts-rounded-full mts-bg-contain mts-w-5 mts-h-5"
                                                     style={{
                                                         background: `url(${item.image}) var(--background-color)`,
                                                     }}
@@ -328,12 +332,12 @@ const CardDialog: FC<CardDialogProps> = ({
                             )}
                             {!promptForCommunity && (
                                 <>
-                                    <div className="tab-container">
+                                    <div className="mts-flex mts-items-center mts-gap-5 mts-mt-3 mts-mb-2 mts-border-b mts-border-black/10 mts-px-3 mts-pb-2 mts-w-full mts-text-black mts-font-light mts-text-lg">
                                         <button
                                             className={clsx(
-                                                'tab-item',
+                                                'mts-relative mts-transition-all mts-duration-300 mts-ease-in-out mts-bg-transparent mts-text-black mts-text-base',
                                                 activeTab === TABS.ALL &&
-                                                    'active'
+                                                    'mts-text-primary-500 mts-font-semibold'
                                             )}
                                             onClick={() =>
                                                 setActiveTab(TABS.ALL)
@@ -348,15 +352,15 @@ const CardDialog: FC<CardDialogProps> = ({
                                                     animate={{
                                                         opacity: 1,
                                                     }}
-                                                    className="tab-item-cursor"
+                                                    className="mts-absolute mts-bottom-[-9px] mts-bg-primary-500 mts-w-full mts-h-[1px]"
                                                 ></motion.div>
                                             )}
                                         </button>
                                         <button
                                             className={clsx(
-                                                'tab-item',
+                                                'mts-relative mts-transition-all mts-duration-300 mts-ease-in-out mts-bg-transparent mts-text-black mts-text-base',
                                                 activeTab === TABS.FAVORITES &&
-                                                    'active'
+                                                    'mts-text-primary-500 mts-font-semibold'
                                             )}
                                             onClick={() =>
                                                 setActiveTab(TABS.FAVORITES)
@@ -367,17 +371,17 @@ const CardDialog: FC<CardDialogProps> = ({
                                                 <motion.div
                                                     initial={{ opacity: 0 }}
                                                     animate={{ opacity: 1 }}
-                                                    className="tab-item-cursor"
+                                                    className="mts-absolute mts-bottom-[-9px] mts-bg-primary-500 mts-w-full mts-h-[1px]"
                                                 ></motion.div>
                                             )}
                                         </button>
                                     </div>
                                     {activeTab === TABS.ALL && (
                                         <div
-                                            className="dialog-tokens-container"
+                                            className="mts-flex-grow mts-h-[50vh] mts-overflow-y-scroll"
                                             style={{
                                                 ...({
-                                                    '--thumb-scrollbar': `var(--primary-color)`,
+                                                    '--thumb-scrollbar': `rgb(var(--mts-primary-500))`,
                                                 } as CSSProperties),
                                             }}
                                             id="scroll-div"
@@ -390,21 +394,21 @@ const CardDialog: FC<CardDialogProps> = ({
                                                 next={() => onNextPage(page)}
                                                 scrollableTarget="scroll-div"
                                                 loader={
-                                                    <div className="infinite-scroll-loading">
-                                                        <CgSpinnerTwo className="animate-spin" />
+                                                    <div className="mts-flex mts-justify-center mts-items-center mts-h-10 mts-text-[var(--text-black-color)] mts-text-[1.25rem]">
+                                                        <CgSpinnerTwo className="mts-animate-spin" />
                                                     </div>
                                                 }
                                                 endMessage={
                                                     filteredAssets.length ===
                                                     0 ? (
                                                         <div
-                                                            className="no-token-found"
+                                                            className="mts-flex mts-grow mts-flex-col mts-justify-center mts-items-center mts-mt-4 mts-h-full mts-text-[var(--text-black-color)]"
                                                             data-testid="token-not-found"
                                                         >
                                                             {t(
                                                                 'token_notfound'
                                                             )}
-                                                            <span>
+                                                            <span className="mts-opacity-70 mts-text-xs">
                                                                 {t(
                                                                     'not_found_desc'
                                                                 )}
@@ -412,7 +416,7 @@ const CardDialog: FC<CardDialogProps> = ({
                                                         </div>
                                                     ) : (
                                                         <div
-                                                            className="no-token-found"
+                                                            className="mts-flex mts-grow mts-flex-col mts-justify-center mts-items-center mts-mt-4 mts-h-full mts-text-[var(--text-black-color)]"
                                                             data-testid="no-more-token"
                                                         >
                                                             {t(
@@ -444,18 +448,18 @@ const CardDialog: FC<CardDialogProps> = ({
                                 </>
                             )}
                             {promptForCommunity && (
-                                <div className="dialog-community-modal">
+                                <div className="mts-flex mts-grow mts-flex-col mts-h-full">
                                     {contractCommunity && (
                                         <>
-                                            <div className="community-modal-container">
-                                                <div className="community-modal-warning">
-                                                    <TiWarning className="icon" />
-                                                    <h1 className="title">
+                                            <div className="mts-flex mts-grow mts-flex-col mts-gap-2">
+                                                <div className="mts-flex mts-flex-col mts-justify-center mts-items-center mts-mt-1 mts-mb-1 mts-rounded-lg mts-bg-[var(--input-card-color)] mts-p-2 mts-text-[var(--text-black-color)]">
+                                                    <TiWarning className="mts-text-[#f59e00] mts-text-[1.875rem]" />
+                                                    <h1 className="mts-font-bold mts-text-base">
                                                         {t(
                                                             'trade_warning.trade_title'
                                                         )}
                                                     </h1>
-                                                    <p className="description">
+                                                    <p className="mts-px-5 mts-text-sm mts-text-center">
                                                         {t(
                                                             'trade_warning.trade_description'
                                                         )}
@@ -474,7 +478,7 @@ const CardDialog: FC<CardDialogProps> = ({
                                                 )}
                                             </div>
                                             <button
-                                                className="accept-button"
+                                                className="mts-flex mts-justify-center mts-items-center mts-rounded-lg mts-bg-[var(--primary-color)] mts-w-full mts-h-10 mts-text-[var(--text-black-color)] mts-text-sm"
                                                 onClick={() => {
                                                     addToken(
                                                         contractCommunity!
@@ -491,10 +495,10 @@ const CardDialog: FC<CardDialogProps> = ({
                                     )}
                                 </div>
                             )}
-                            <div className="close-footer">
+                            <div className="mts-flex mts-justify-center mts-items-center mts-cursor-pointer mts-pt-2 mts-text-sm md:mts-hidden">
                                 <button
                                     onClick={handleOnClose}
-                                    className="close-footer-button"
+                                    className="mts-flex mts-justify-center mts-items-center mts-transition-all mts-duration-300 mts-ease-in-out mts-rounded-lg mts-bg-[var(--secondary-color)] mts-w-full mts-h-12 mts-text-[var(--text-black-color)] mts-text-center active:mts-scale-95"
                                 >
                                     Close
                                 </button>
diff --git a/lib/components/SwapCard/FavList.tsx b/lib/components/SwapCard/FavList.tsx
index 71dbe2b..5529066 100644
--- a/lib/components/SwapCard/FavList.tsx
+++ b/lib/components/SwapCard/FavList.tsx
@@ -1,13 +1,13 @@
-import { CSSProperties, FC, useEffect, useState } from "react";
-import { useFavoriteStore } from "../../store/favtorite.store";
-import { useSwapStore } from "../../store/swap.store";
-import { Asset } from "@mytonswap/sdk";
-import Token from "./Token";
-import { CgSpinnerTwo } from "react-icons/cg";
+import { CSSProperties, FC, useEffect, useState } from 'react';
+import { useFavoriteStore } from '../../store/favtorite.store';
+import { useSwapStore } from '../../store/swap.store';
+import { Asset } from '@mytonswap/sdk';
+import Token from './Token';
+import { CgSpinnerTwo } from 'react-icons/cg';
 
 type FavListProps = {
     onTokenSelect: (asset: Asset) => void;
-    type: "pay" | "receive";
+    type: 'pay' | 'receive';
 };
 
 const FavList: FC<FavListProps> = ({ onTokenSelect, type }) => {
@@ -32,10 +32,10 @@ const FavList: FC<FavListProps> = ({ onTokenSelect, type }) => {
     }, []);
     return (
         <div
-            className="dialog-tokens-container"
+            className="mts-flex-grow mts-h-50vh mts-overflow-y-scroll"
             style={{
                 ...({
-                    "--thumb-scrollbar": `var(--primary-color)`,
+                    '--thumb-scrollbar': `var(--mts-primary-500)`,
                 } as CSSProperties),
             }}
             id="scroll-div"
@@ -49,18 +49,20 @@ const FavList: FC<FavListProps> = ({ onTokenSelect, type }) => {
                 />
             ))}
             {isLoading && (
-                <div className="infinite-scroll-loading">
-                    <CgSpinnerTwo className="animate-spin" />
+                <div className="mts-flex mts-justify-center mts-items-center mts-h-10 mts-text-black mts-text-xl">
+                    <CgSpinnerTwo className="mts-animate-spin mts-text-primary-500" />
                 </div>
             )}
             {isError && (
-                <div className="infinite-scroll-loading">
+                <div className="mts-flex mts-justify-center mts-items-center mts-h-10 mts-text-black mts-text-xl">
                     <div>Something went wrong...</div>
                 </div>
             )}
             {!isLoading && !isError && favItems?.length === 0 && (
-                <div className="infinite-scroll-loading">
-                    <div className="fav-no-item">No favorite tokens</div>
+                <div className="mts-flex mts-justify-center mts-items-center mts-h-10 mts-text-black mts-text-xl">
+                    <div className="mts-opacity-70 mts-text-xs">
+                        No favorite tokens
+                    </div>
                 </div>
             )}
         </div>
diff --git a/lib/components/SwapCard/SwapCard.tsx b/lib/components/SwapCard/SwapCard.tsx
index 4b9c5d3..eab5be3 100644
--- a/lib/components/SwapCard/SwapCard.tsx
+++ b/lib/components/SwapCard/SwapCard.tsx
@@ -1,9 +1,8 @@
-import { useSwapStore } from "../../store/swap.store";
-import Card from "./Card";
-import { LuArrowDownUp } from "react-icons/lu";
+import { useSwapStore } from '../../store/swap.store';
+import Card from './Card';
+import { LuArrowDownUp } from 'react-icons/lu';
 
-import "./SwapCard.scss";
-import { useOptionsStore } from "../../store/options.store";
+import { useOptionsStore } from '../../store/options.store';
 const SwapCard = () => {
     const { changeDirection } = useSwapStore();
     const { options } = useOptionsStore();
@@ -13,16 +12,16 @@ const SwapCard = () => {
 
     const isDisabled = options.lock_pay_token || options.lock_receive_token;
     return (
-        <div className="swap-card-container">
+        <div className="mts-flex mts-relative mts-flex-col mts-items-center mts-gap-3 mts-mt-3.5 mts-rounded-xl mts-bg-zinc-100 mts-p-3 mts-font-medium">
             <Card type="pay" />
-            <div className="line"></div>
+            <div className="mts-absolute mts-top-1/2 mts-bg-white mts-w-full mts-h-[3px] md:mts-h-[5px]"></div>
             {shouldShowChangeDirection && (
                 <button
                     disabled={isDisabled}
                     onClick={() => {
                         changeDirection();
                     }}
-                    className="change-direction-button"
+                    className="mts-flex mts-relative mts-justify-center mts-items-center mts-z-1 mts-transition-all mts-duration-300 mts-ease mts-rounded-full mts-bg-primary-500 mts-py-3 mts-px-14 md:mts-px-15 mts-text-white mts-text-2xl active:mts-scale-95 disabled:mts-opacity-50 disabled:mts-cursor-not-allowed"
                     data-testid="change-direction-button"
                 >
                     <LuArrowDownUp />
diff --git a/lib/components/SwapCard/Token.tsx b/lib/components/SwapCard/Token.tsx
index 95d52c4..c204b89 100644
--- a/lib/components/SwapCard/Token.tsx
+++ b/lib/components/SwapCard/Token.tsx
@@ -4,16 +4,14 @@ import { FC } from 'react';
 import formatNumber from '../../utils/formatNum';
 import './Token.scss';
 import { RiExternalLinkLine } from 'react-icons/ri';
-import { PiStarBold } from 'react-icons/pi';
-
-import { PiStarFill } from 'react-icons/pi';
-
+import { PiStarBold, PiStarFill } from 'react-icons/pi';
 import { TokenTon } from '../icons/TokenTon';
 import { TON_ADDR } from '../../constants';
 import { toFixedDecimal } from '../../utils/toFixedDecimals';
 import { useFavoriteStore } from '../../store/favtorite.store';
 import clsx from 'clsx';
 import { useSwapStore } from '../../store/swap.store';
+
 type TokenProps = {
     asset: Asset;
     onTokenSelect: (asset: Asset) => void;
@@ -41,26 +39,31 @@ const Token: FC<TokenProps> = ({ asset, onTokenSelect, type }) => {
             ? pay_token?.address === asset.address
             : receive_token?.address === asset.address ||
               pay_token?.address === asset.address;
+
     return (
         <div
             onClick={isSelected ? undefined : () => onTokenSelect(asset)}
-            className={clsx('token-container', isSelected && 'selected')}
+            className={clsx(
+                'mts-flex mts-items-center mts-cursor-pointer mts-mt-1 mts-rounded-lg mts-px-2 mts-w-full mts-h-12',
+                isSelected && 'mts-opacity-50 mts-cursor-auto'
+            )}
             data-testid={asset.address}
         >
-            <div className="token-content">
+            <div className="mts-flex mts-flex-grow mts-items-center mts-gap-2">
                 <div
-                    className="token-image "
+                    className="mts-rounded-full !mts-bg-contain mts-w-11 mts-h-11"
                     style={{ background: `url(${asset.image})` }}
                 ></div>
-                <div className="token-details">
-                    <div className="token-details-symbol-balance">
-                        <div className="symbol">
+                <div className="mts-flex-grow">
+                    <div className="mts-flex mts-justify-between mts-items-center mts-overflow-hidden mts-text-black mts-font-medium mts-text-base mts-truncate">
+                        <div className="mts-flex mts-items-center mts-gap-0.5 mts-text-base">
                             {asset.symbol}{' '}
                             <span>
                                 <a
                                     href={`https://tonviewer.com/${asset.address}`}
                                     onClick={(e) => e.stopPropagation()}
                                     target="_blank"
+                                    className="mts-flex mts-items-center mts-opacity-50 mts-text-inherit mts-no-underline"
                                 >
                                     <RiExternalLinkLine />
                                 </a>
@@ -68,11 +71,11 @@ const Token: FC<TokenProps> = ({ asset, onTokenSelect, type }) => {
                         </div>
                         <div>{tokenBalance}</div>
                     </div>
-                    <div className="token-details-name-rate">
-                        <div className="line-clamp-1 name-liq">
+                    <div className="mts-flex mts-justify-between mts-items-center mts-opacity-50 mts-text-black mts-text-xs">
+                        <div className="mts-flex mts-items-center mts-gap-0.5">
                             {asset.name}
                             {asset.address !== TON_ADDR && (
-                                <span className="liq">
+                                <span className="mts-flex mts-items-center mts-gap-0.5">
                                     | <TokenTon /> {asset.liquidity_text}
                                 </span>
                             )}
@@ -81,7 +84,12 @@ const Token: FC<TokenProps> = ({ asset, onTokenSelect, type }) => {
                     </div>
                 </div>
                 <div>
-                    <div className={clsx('fav', isTokenFav && 'faved')}>
+                    <div
+                        className={clsx(
+                            'mts-opacity-50 mts-transition-transform mts-duration-200 mts-ease-in-out mts-text-black mts-text-2xl',
+                            isTokenFav && 'mts-opacity-100 mts-text-primary-500'
+                        )}
+                    >
                         {isTokenFav ? (
                             <PiStarFill
                                 onClick={(e) => {
diff --git a/lib/components/SwapDetails/SwapDetails.tsx b/lib/components/SwapDetails/SwapDetails.tsx
index 6e25f22..06178db 100644
--- a/lib/components/SwapDetails/SwapDetails.tsx
+++ b/lib/components/SwapDetails/SwapDetails.tsx
@@ -6,7 +6,6 @@ import { AnimatePresence, motion } from 'framer-motion';
 import { useSwapStore } from '../../store/swap.store';
 import formatNumber from '../../utils/formatNum';
 import { CgSpinnerTwo } from 'react-icons/cg';
-import './SwapDetails.scss';
 import { useTranslation } from 'react-i18next';
 import { useMeasure } from '@uidotdev/usehooks';
 import { BsArrowRightShort, BsChevronRight } from 'react-icons/bs';
@@ -19,15 +18,15 @@ const SwapDetails = () => {
     const [ref, { height }] = useMeasure();
     return (
         <motion.button
-            className="detail-accordion-container"
+            className="mts-flex mts-flex-col mts-items-center mts-mt-3 mts-rounded-lg mts-bg-zinc-100 mts-px-3 mts-w-full mts-min-h-12 mts-text-black"
             onClick={() => {
                 setIsOpen((prev) => !prev);
             }}
             data-testid="swap-details"
         >
-            <div className="detail-accordion">
+            <div className="mts-flex mts-justify-between mts-items-center mts-w-full mts-min-h-12 mts-font-medium mts-text-sm">
                 {onePayRoute && onePayRoute.pool_data && !isFindingBestRoute ? (
-                    <div className="one-pay">
+                    <div className="one-pay mts-ltr">
                         1 {onePayRoute.pool_data.route_view[0]} ≈{' '}
                         {formatNumber(onePayRoute.pool_data.receive_show, 4)}{' '}
                         {
@@ -37,14 +36,17 @@ const SwapDetails = () => {
                         }
                     </div>
                 ) : (
-                    <div className="finding">
-                        <CgSpinnerTwo className="animate-spin" />
+                    <div className="mts-flex mts-gap-1 mts-items-center">
+                        <CgSpinnerTwo className="mts-animate-spin mts-text-primary-500" />
                         {t('fetching_best_route')}
                     </div>
                 )}
                 <div>
                     <MdKeyboardArrowDown
-                        className={clsx('icon', isOpen ? 'is-open' : '')}
+                        className={clsx(
+                            'mts-transition-all mts-duration-200 mts-ease-in-out mts-text-lg',
+                            isOpen ? 'mts-rotate-180' : ''
+                        )}
                     />
                 </div>
             </div>
@@ -58,13 +60,16 @@ const SwapDetails = () => {
                             height: height ?? 0,
                         }}
                         exit={{ opacity: 0, height: 0 }}
-                        className="detail-accordion-content"
+                        className="mts-flex mts-flex-col mts-gap-1 mts-w-full mts-overflow-hidden"
                     >
-                        <div ref={ref} className="details-inner-container">
+                        <div
+                            ref={ref}
+                            className="mts-flex mts-flex-col mts-gap-1 mts-p-1 mts-pb-4"
+                        >
                             <SwapKeyValue
                                 keyText={t('slippage_tolerance')}
                                 value={
-                                    <div className="slippage-box">
+                                    <div className="mts-rounded-md mts-bg-slippage-box-color mts-px-2 mts-py-1 mts-text-black">
                                         {slippage === 'auto' ? '1' : slippage}%{' '}
                                         {slippage === 'auto' ? t('auto') : ''}
                                     </div>
@@ -99,13 +104,13 @@ const SwapDetails = () => {
                                 keyText={t('route')}
                                 value={
                                     bestRoute ? (
-                                        <div className="route-container">
+                                        <div className="mts-flex mts-justify-center mts-gap-0.5">
                                             <span
-                                                className="dex"
+                                                className="mts-flex mts-justify-center mts-items-center mts-gap-1"
                                                 data-testid="dex-container"
                                             >
                                                 <div
-                                                    className="image"
+                                                    className="!mts-bg-contain mts-w-3 mts-h-3"
                                                     style={{
                                                         background: `url(${
                                                             bestRoute
@@ -143,12 +148,12 @@ const SwapDetails = () => {
 
 const RouteView: FC<{ routes: string[] }> = ({ routes }) => {
     return (
-        <span className="route-view-token">
+        <span className="mts-flex mts-items-center mts-gap-0.5">
             {routes.map((route, idx) => (
                 <>
                     {route}{' '}
                     {idx !== routes.length - 1 && (
-                        <BsChevronRight className="route-icon" />
+                        <BsChevronRight className="mts-text-xs" />
                     )}
                 </>
             ))}
diff --git a/lib/components/SwapDetails/SwapKeyValue.tsx b/lib/components/SwapDetails/SwapKeyValue.tsx
index 8e7122c..6f1d021 100644
--- a/lib/components/SwapDetails/SwapKeyValue.tsx
+++ b/lib/components/SwapDetails/SwapKeyValue.tsx
@@ -1,5 +1,4 @@
-import { FC, ReactNode } from "react";
-import "./SwapKeyValue.scss";
+import { FC, ReactNode } from 'react';
 type SwapKeyValueProps = {
     keyText: ReactNode;
     value: ReactNode;
@@ -7,9 +6,9 @@ type SwapKeyValueProps = {
 
 const SwapKeyValue: FC<SwapKeyValueProps> = ({ keyText, value }) => {
     return (
-        <div className="details-key-value">
-            <div className="details-key-value-key">{keyText}</div>
-            <div className="details-key-value-value">{value}</div>
+        <div className="mts-flex mts-justify-between mts-items-center mts-font-medium mts-text-sm mts-font-inter">
+            <div className="mts-opacity-60 mts-text-black">{keyText}</div>
+            <div className="mts-text-black">{value}</div>
         </div>
     );
 };
diff --git a/lib/global.css b/lib/global.css
index ff58868..71809f3 100644
--- a/lib/global.css
+++ b/lib/global.css
@@ -173,7 +173,7 @@ input[type='number']::-webkit-outer-spin-button {
 }
 
 .icon_overlay.overlay {
-    color: #22c55e;
+    color: rgb(var(--mts-primary-500));
 }
 
 .active {
@@ -239,7 +239,6 @@ input[type='number']::-webkit-outer-spin-button {
             50% -50%,
             150% 50%
         );
-        color: #f2f2f2;
     }
 
     to {
@@ -251,7 +250,6 @@ input[type='number']::-webkit-outer-spin-button {
             50% -50%,
             150% 50%
         );
-        color: #6c6c6c;
     }
 }
 
diff --git a/lib/utils/cn.ts b/lib/utils/cn.ts
index e644794..ac834e0 100644
--- a/lib/utils/cn.ts
+++ b/lib/utils/cn.ts
@@ -1,5 +1,9 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { type ClassValue, clsx } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+
+const twMerge = extendTailwindMerge({
+    prefix: 'mts-',
+});
 
 export function cn(...inputs: ClassValue[]) {
     return twMerge(clsx(inputs));
diff --git a/tailwind.config.js b/tailwind.config.js
index a8d1d6d..3046420 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,7 +10,7 @@ export default {
                 swapcard: '1fr auto',
             },
             colors: {
-                'mts-primary': {
+                primary: {
                     50: 'rgb(var(--mts-primary-50) / <alpha-value>)',
                     100: 'rgb(var(--mts-primary-100) / <alpha-value>)',
                     200: 'rgb(var(--mts-primary-200) / <alpha-value>)',

From c7795b121557fbed93c186f0c9442d21e4c250a0 Mon Sep 17 00:00:00 2001
From: HoseinBaseri <ho3ein8280@gmail.com>
Date: Sun, 19 Jan 2025 09:43:03 +0330
Subject: [PATCH 03/12] refactor: improve error handling and styling in swap
 components

---
 .../SwapButton/ConfirmationModal.tsx          | 26 ++++++-----
 lib/components/SwapButton/Done.tsx            | 44 +++++++++++--------
 lib/components/SwapButton/ErrorTonConnect.tsx | 21 +++++----
 .../WalletProfile/WalletProfile.tsx           | 34 +++++++-------
 4 files changed, 70 insertions(+), 55 deletions(-)

diff --git a/lib/components/SwapButton/ConfirmationModal.tsx b/lib/components/SwapButton/ConfirmationModal.tsx
index 8dcfef4..8c7456d 100644
--- a/lib/components/SwapButton/ConfirmationModal.tsx
+++ b/lib/components/SwapButton/ConfirmationModal.tsx
@@ -13,9 +13,24 @@ type ConfirmationModalProps = {
 };
 
 const ConfirmationModal: FC<ConfirmationModalProps> = ({ setConfirmModal }) => {
+    const {
+        pay_amount,
+        pay_token,
+        bestRoute,
+        receive_token,
+        receive_rate,
+        slippage,
+        setModalState,
+        setErrorMessage,
+    } = useSwapStore();
     const { t } = useTranslation();
+
     const handleConfirmClose = () => {
-        setConfirmModal(ModalState.IN_PROGRESS);
+        setErrorMessage({
+            errorMessage: t('error.cancel_swap'),
+            errorTitle: t('error.cancel_swap_title'),
+        });
+        setConfirmModal(ModalState.ERROR);
     };
     const { tonConnectInstance } = useOptionsStore();
     useEffect(() => {
@@ -26,15 +41,6 @@ const ConfirmationModal: FC<ConfirmationModalProps> = ({ setConfirmModal }) => {
         }
     }, [tonConnectInstance]);
 
-    const {
-        pay_amount,
-        pay_token,
-        bestRoute,
-        receive_token,
-        receive_rate,
-        slippage,
-        setModalState,
-    } = useSwapStore();
     const handleConfirmSwap = () => {
         if (tonConnectInstance?.wallet) {
             swap(tonConnectInstance, bestRoute!);
diff --git a/lib/components/SwapButton/Done.tsx b/lib/components/SwapButton/Done.tsx
index 09e9717..eface52 100644
--- a/lib/components/SwapButton/Done.tsx
+++ b/lib/components/SwapButton/Done.tsx
@@ -1,10 +1,11 @@
-import { FaArrowRightArrowLeft, FaCircleCheck } from "react-icons/fa6";
-import { IoClose } from "react-icons/io5";
-import { ModalState, useSwapStore } from "../../store/swap.store";
-import { fromNano } from "@mytonswap/sdk";
-import formatNumber from "../../utils/formatNum";
-import "./Done.scss";
-import { useTranslation } from "react-i18next";
+import { FaArrowRightArrowLeft, FaCircleCheck } from 'react-icons/fa6';
+import { IoClose } from 'react-icons/io5';
+import { ModalState, useSwapStore } from '../../store/swap.store';
+import { fromNano } from '@mytonswap/sdk';
+import formatNumber from '../../utils/formatNum';
+import './Done.scss';
+import { useTranslation } from 'react-i18next';
+
 const Done = () => {
     const { t } = useTranslation();
     const { bestRoute, pay_amount, pay_token, receive_token, receive_rate } =
@@ -14,39 +15,44 @@ const Done = () => {
         setModalState(ModalState.NONE);
     };
     return (
-        <div className="done-container">
-            <IoClose onClick={handleCloseModal} className=" close-icon" />
-            <div className="done-icon">
+        <div className="mts-flex mts-flex-col mts-justify-center mts-items-center mts-h-full">
+            <IoClose
+                onClick={handleCloseModal}
+                className="mts-absolute mts-top-4 mts-right-4 mts-opacity-70 mts-cursor-pointer mts-text-black mts-text-xl"
+            />
+            <div className="mts-flex mts-justify-center mts-items-center mts-w-full mts-text-primary mts-text-5xl mts-text-green-500">
                 <FaCircleCheck />
             </div>
-            <div className="done-text">{t("transaction.complete")}</div>
-            <div className="done-modal-images">
+            <div className="mts-mb-8 mts-text-black mts-font-bold mts-text-xl mts-text-center">
+                {t('transaction.complete')}
+            </div>
+            <div className="mts-flex mts-items-center mts-pt-1">
                 <div
-                    className="pay-image"
+                    className="mts-translate-x-3 mts-border-4 mts-border-solid mts-border-zinc-100 mts-rounded-full !mts-bg-contain mts-w-16 mts-h-16"
                     style={{
                         background: `url(${pay_token?.image})`,
                     }}
                 ></div>
                 <div
-                    className="receive-image"
+                    className="mts--translate-x-0.5 mts-border-4 mts-border-solid mts-border-zinc-100 mts-rounded-full !mts-bg-contain mts-w-16 mts-h-16"
                     style={{
                         background: `url(${receive_token?.image})`,
                     }}
                 ></div>
             </div>
-            <div className="done-modal-change-rate ">
+            <div className="mts-flex mts-flex-col mts-items-center mts-opacity-70 mts-text-black mts-font-bold mts-text-center">
                 <div>
-                    {fromNano(pay_amount, pay_token?.decimal)}{" "}
+                    {fromNano(pay_amount, pay_token?.decimal)}{' '}
                     {pay_token?.symbol}
                 </div>
                 <div>
-                    <FaArrowRightArrowLeft className="change-icon" />
+                    <FaArrowRightArrowLeft className="mts-rotate-90 mts-opacity-60 mts-text-xs" />
                 </div>
                 <div>
                     {bestRoute!.pool_data.receive_show!} {receive_token?.symbol}
                 </div>
-                <div className="rate">
-                    ≈{" "}
+                <div className="mts-opacity-60 mts-text-xs">
+                    ≈{' '}
                     {formatNumber(
                         Number(bestRoute!.pool_data.receive_show) *
                             receive_rate!.USD,
diff --git a/lib/components/SwapButton/ErrorTonConnect.tsx b/lib/components/SwapButton/ErrorTonConnect.tsx
index d769ce3..9bd806b 100644
--- a/lib/components/SwapButton/ErrorTonConnect.tsx
+++ b/lib/components/SwapButton/ErrorTonConnect.tsx
@@ -1,7 +1,7 @@
-import { ModalState, useSwapStore } from "../../store/swap.store";
-import { IoClose } from "react-icons/io5";
-import { IoCloseCircle } from "react-icons/io5";
-import "./ErrorTonConnect.scss";
+import { ModalState, useSwapStore } from '../../store/swap.store';
+import { IoClose } from 'react-icons/io5';
+import { IoCloseCircle } from 'react-icons/io5';
+
 const ErrorTonConnect = () => {
     const { transactionError, transactionErrorBody, setModalState } =
         useSwapStore();
@@ -14,11 +14,14 @@ const ErrorTonConnect = () => {
         setModalState(ModalState.NONE);
     };
     return (
-        <div className="error-container">
-            <IoCloseCircle className="icon" />
-            <IoClose onClick={handleCloseModal} className=" close-button" />
-            <div className="text">
-                <p className="title">{transactionError}</p>
+        <div className="mts-flex mts-flex-col mts-justify-center mts-items-center mts-h-full mts-text-black">
+            <IoCloseCircle className="mts-text-red-500 mts-text-6xl" />
+            <IoClose
+                onClick={handleCloseModal}
+                className="mts-absolute mts-top-4 mts-right-4 mts-opacity-70 mts-cursor-pointer mts-text-xl"
+            />
+            <div className="mts-mt-4 mts-px-7 mts-text-center">
+                <p className="mts-font-bold mts-text-xl">{transactionError}</p>
                 <p>{transactionErrorBody}</p>
             </div>
         </div>
diff --git a/lib/components/WalletProfile/WalletProfile.tsx b/lib/components/WalletProfile/WalletProfile.tsx
index 9b1b27a..7a19e67 100644
--- a/lib/components/WalletProfile/WalletProfile.tsx
+++ b/lib/components/WalletProfile/WalletProfile.tsx
@@ -1,16 +1,16 @@
-import { FC, useEffect, useRef, useState } from "react";
-import { useWalletStore } from "../../store/wallet.store";
-import { ConnectedWallet, TonConnectUI } from "@tonconnect/ui-react";
-import shortAddress from "../../utils/shortAddress";
+import { FC, useEffect, useRef, useState } from 'react';
+import { useWalletStore } from '../../store/wallet.store';
+import { ConnectedWallet, TonConnectUI } from '@tonconnect/ui-react';
+import shortAddress from '../../utils/shortAddress';
 
-import "./WalletProfile.scss";
-import "../Header/SettingPopover.scss";
-import "../Swap/Swap.scss";
+import './WalletProfile.scss';
+import '../Header/SettingPopover.scss';
+import '../Swap/Swap.scss';
 
-import { AnimatePresence, motion } from "framer-motion";
-import Wallet from "../Header/Wallet";
-import { useOnClickOutside } from "usehooks-ts";
-import { popOverVariationsKeyValue } from "../../constants";
+import { AnimatePresence, motion } from 'framer-motion';
+import Wallet from '../Header/Wallet';
+import { useOnClickOutside } from 'usehooks-ts';
+import { popOverVariationsKeyValue } from '../../constants';
 export type WalletProfileProps = {
     tonConnectInstance: TonConnectUI;
     position?: keyof typeof popOverVariationsKeyValue;
@@ -26,7 +26,7 @@ export type WalletProfileProps = {
 
 export const WalletProfile: FC<WalletProfileProps> = ({
     tonConnectInstance,
-    position = "top-right",
+    position = 'top-right',
 }) => {
     const { setWallet, disconnect, wallet } = useWalletStore();
 
@@ -66,15 +66,15 @@ export const WalletProfile: FC<WalletProfileProps> = ({
 
     const popOverAnimationVariation = popOverVariationsKeyValue[position];
     return (
-        <div className="wallet-profile-mts mytonswap-app">
+        <div className="mts-relative">
             <div
-                className={`wallet-profile-button ${wallet ? "connected" : ""}`}
+                className={`mts-cursor-pointer mts-border mts-rounded-full mts-bg-primary mts-px-3 mts-py-2 mts-text-white mts-font-medium mts-text-sm mts-select-none ${wallet ? 'mts-bg-zinc-100 mts-text-black' : ''}`}
                 onClick={wallet ? handleButtonClick : handleConnectWallet}
                 ref={buttonRef}
             >
                 {wallet
-                    ? shortAddress(wallet.account.address, "mainnet", 4)
-                    : "Connect Wallet"}
+                    ? shortAddress(wallet.account.address, 'mainnet', 4)
+                    : 'Connect Wallet'}
             </div>
 
             <AnimatePresence>
@@ -83,7 +83,7 @@ export const WalletProfile: FC<WalletProfileProps> = ({
                         initial={popOverAnimationVariation.initial}
                         exit={popOverAnimationVariation.exit}
                         animate={popOverAnimationVariation.animate}
-                        transition={{ ease: "easeOut", duration: 0.15 }}
+                        transition={{ ease: 'easeOut', duration: 0.15 }}
                         ref={ref}
                         className="wallet-popover"
                     >

From 8940eb5ad8f6154f6d20a7c9e89516d20e51b91e Mon Sep 17 00:00:00 2001
From: HoseinBaseri <ho3ein8280@gmail.com>
Date: Tue, 21 Jan 2025 16:37:02 +0330
Subject: [PATCH 04/12] feat: add new icons and update styling for Swap
 components

---
 lib/components/Header/Header.tsx              |  4 +-
 lib/components/Header/SettingPopover.tsx      |  2 +-
 lib/components/Header/SlippageSetting.tsx     | 24 ++---
 lib/components/Header/TokensSettings.tsx      |  5 +-
 lib/components/Header/Wallet.tsx              | 72 +++++++++-----
 lib/components/Swap/Swap.scss                 | 14 +--
 lib/components/Swap/Swap.stories.tsx          |  2 +-
 lib/components/Swap/Swap.tsx                  | 10 +-
 .../SwapButton/ConfirmationModal.tsx          | 38 ++++---
 lib/components/SwapButton/Done.tsx            | 21 ++--
 lib/components/SwapButton/ErrorTonConnect.tsx | 17 ++--
 lib/components/SwapButton/Inprogress.tsx      | 18 ++--
 lib/components/SwapButton/SwapButton.tsx      |  6 +-
 .../SwapButton/WaitingForWallet.tsx           | 68 ++++++++++---
 lib/components/SwapCard/Card.tsx              | 98 ++++++++++---------
 lib/components/SwapCard/CardButton.tsx        |  2 +-
 lib/components/SwapCard/CardDialog.tsx        | 44 +++++----
 lib/components/SwapCard/SwapCard.tsx          | 26 ++---
 lib/components/SwapCard/Token.tsx             | 38 ++++---
 lib/components/SwapDetails/SwapDetails.tsx    |  8 +-
 lib/components/SwapDetails/SwapKeyValue.tsx   |  6 +-
 .../WalletProfile/WalletProfile.tsx           | 15 ++-
 lib/components/icons/Close.tsx                | 27 +++++
 lib/components/icons/Copy.tsx                 | 27 +++++
 lib/components/icons/Link.tsx                 | 35 +++++++
 lib/components/icons/Menu.tsx                 | 25 +++++
 lib/components/icons/Refresh.tsx              | 28 ++++++
 lib/components/icons/Search.tsx               | 24 +++++
 lib/components/icons/Spinner.tsx              | 27 +++++
 lib/components/icons/Warning.tsx              | 29 ++++++
 lib/global.css                                | 13 ++-
 31 files changed, 546 insertions(+), 227 deletions(-)
 create mode 100644 lib/components/icons/Close.tsx
 create mode 100644 lib/components/icons/Copy.tsx
 create mode 100644 lib/components/icons/Link.tsx
 create mode 100644 lib/components/icons/Menu.tsx
 create mode 100644 lib/components/icons/Refresh.tsx
 create mode 100644 lib/components/icons/Search.tsx
 create mode 100644 lib/components/icons/Spinner.tsx
 create mode 100644 lib/components/icons/Warning.tsx

diff --git a/lib/components/Header/Header.tsx b/lib/components/Header/Header.tsx
index bfe5ada..2967662 100644
--- a/lib/components/Header/Header.tsx
+++ b/lib/components/Header/Header.tsx
@@ -4,7 +4,7 @@ import { useOptionsStore } from '../../store/options.store';
 import Refresh from '../Common/Refresh';
 import { useSwapStore } from '../../store/swap.store';
 import { useTranslation } from 'react-i18next';
-import Setting from '../icons/Setting';
+import Menu from '../icons/Menu';
 const Header = () => {
     const { t } = useTranslation();
     const { options } = useOptionsStore();
@@ -28,7 +28,7 @@ const Header = () => {
                 )}
                 {options.ui_preferences?.show_settings && (
                     <SettingPopover>
-                        <Setting className="mts-text-primary-950 mts-text-2xl" />
+                        <Menu className="mts-text-primary-950 mts-text-2xl mts-rotate-90" />
                     </SettingPopover>
                 )}
             </div>
diff --git a/lib/components/Header/SettingPopover.tsx b/lib/components/Header/SettingPopover.tsx
index ab20b6d..6445de3 100644
--- a/lib/components/Header/SettingPopover.tsx
+++ b/lib/components/Header/SettingPopover.tsx
@@ -65,7 +65,7 @@ const SettingPopover: FC<SettingPopoverProps> = ({ children }) => {
                             exit={modalAnimation.exit}
                             transition={{ ease: 'easeOut', duration: 0.15 }}
                             ref={ref}
-                            className="mts-flex mts-fixed mts-bottom-0 mts-left-0 mts-flex-col mts-gap-3 mts-shadow-sm mts-rounded-t-2xl mts-bg-white mts-p-4 mts-w-full mts-min-w-60 mts-h-fit mts-text-primary-950 rtl:mts-right-auto rtl:left-0 md:mts-min-w-80 md:mts-max-w-[32.5rem] md:mts-rounded-2xl"
+                            className="mts-flex mts-fixed mts-bottom-0 mts-left-0 mts-flex-col mts-gap-3 mts-shadow-sm mts-rounded-t-2xl mts-bg-zinc-100 mts-p-4 mts-w-full mts-min-w-60 mts-h-fit mts-text-primary-950 rtl:mts-right-auto rtl:left-0 md:mts-min-w-80 md:mts-max-w-[32.5rem] md:mts-rounded-2xl"
                             data-testid="setting-popover"
                         >
                             <div className="mts-flex mts-items-center mts-justify-between">
diff --git a/lib/components/Header/SlippageSetting.tsx b/lib/components/Header/SlippageSetting.tsx
index 1587324..bfd678d 100644
--- a/lib/components/Header/SlippageSetting.tsx
+++ b/lib/components/Header/SlippageSetting.tsx
@@ -54,10 +54,12 @@ const SlippageSetting = () => {
             className="mts-flex mts-flex-col gap-1 md:mts-gap-2 md:mts-text-sm"
             data-testid="slippage-setting"
         >
-            <button className="mts-flex mts-text-xs mts-justify-between mts-w-full mts-text-black md:mts-text-sm">
-                <div>{t('max_slippage')}</div>
+            <button className="mts-flex  mts-justify-between mts-w-full mts-text-black ">
+                <div className="mts-text-lg mts-text-zinc-600">
+                    {t('max_slippage')}
+                </div>
                 <div
-                    className="mts-flex mts-justify-center mts-items-center"
+                    className="mts-flex mts-justify-center mts-items-center mts-text-sm mts-text-zinc-600"
                     data-testid="slippage-indicator"
                 >
                     {slippage === 'auto' ? t('auto') : `${slippage}%`}{' '}
@@ -73,10 +75,10 @@ const SlippageSetting = () => {
                     <div
                         onClick={handleOnAutoClick}
                         className={cn(
-                            `mts-flex mts-relative mts-justify-center mts-items-center mts-transition-all mts-duration-300 mts-cursor-pointer mts-m-[0.125rem] mts-border-[1px] mts-border-transparent mts-rounded-xl mts-bg-zinc-100 mts-p-1 mts-h-8 md:mts-h-10 md:mts-m-1`,
+                            `mts-flex mts-relative mts-justify-center mts-items-center mts-transition-all mts-duration-300 mts-cursor-pointer mts-m-[0.125rem] mts-border-[1px] mts-border-transparent mts-rounded-lg mts-bg-white mts-p-1 mts-h-12 md:mts-h-10 md:mts-m-1`,
                             slippage === 'auto'
                                 ? 'mts-border-primary-500'
-                                : 'inactive-border'
+                                : 'mts-border-zinc-200'
                         )}
                         data-testid="slippage-setting-auto"
                     >
@@ -85,10 +87,10 @@ const SlippageSetting = () => {
                     <div
                         onClick={() => handleOnPercentClick(2)}
                         className={cn(
-                            `mts-flex mts-relative mts-justify-center mts-items-center mts-transition-all mts-duration-300 mts-cursor-pointer mts-m-[0.125rem] mts-border-[1px] mts-border-transparent mts-rounded-xl mts-bg-zinc-100 mts-p-1 mts-h-8 md:mts-h-10`,
+                            `mts-flex mts-relative mts-justify-center mts-items-center mts-transition-all mts-duration-300 mts-cursor-pointer mts-m-[0.125rem] mts-border-[1px] mts-border-transparent mts-rounded-lg mts-bg-white mts-p-1 mts-h-12 md:mts-h-10`,
                             slippage === 2
                                 ? 'mts-border-primary-500'
-                                : 'inactive-border'
+                                : 'mts-border-zinc-200'
                         )}
                         data-testid="slippage-setting-2"
                     >
@@ -97,10 +99,10 @@ const SlippageSetting = () => {
                     <div
                         onClick={() => handleOnPercentClick(5)}
                         className={cn(
-                            `mts-flex mts-relative mts-justify-center mts-items-center mts-transition-all mts-duration-300 mts-cursor-pointer mts-m-[0.125rem] mts-border-[1px] mts-border-transparent mts-rounded-xl mts-bg-zinc-100 mts-p-1 mts-h-8 md:mts-h-10`,
+                            `mts-flex mts-relative mts-justify-center mts-items-center mts-transition-all mts-duration-300 mts-cursor-pointer mts-m-[0.125rem] mts-border-[1px] mts-border-transparent mts-rounded-lg mts-bg-white mts-p-1 mts-h-12 md:mts-h-10`,
                             slippage === 5
                                 ? 'mts-border-primary-500'
-                                : 'inactive-border'
+                                : 'mts-border-zinc-200'
                         )}
                         data-testid="slippage-setting-5"
                     >
@@ -108,9 +110,9 @@ const SlippageSetting = () => {
                     </div>
                     <div
                         className={cn(
-                            `mts-flex mts-justify-between mts-items-center mts-gap-1 mts-relative mts-transition-all mts-duration-300 mts-cursor-pointer mts-m-[0.125rem] mts-border-[1px] mts-border-transparent mts-rounded-xl mts-bg-zinc-100 mts-h-8 md:mts-h-10`,
+                            `mts-flex mts-justify-between mts-items-center mts-gap-1 mts-relative mts-transition-all mts-duration-300 mts-cursor-pointer mts-m-[0.125rem] mts-border-[1px] mts-border-transparent mts-rounded-lg mts-bg-white mts-h-12 md:mts-h-10`,
                             ['auto', 2, 5].includes(slippage)
-                                ? 'inactive-border'
+                                ? 'mts-border-zinc-200'
                                 : 'mts-border-primary-500'
                         )}
                     >
diff --git a/lib/components/Header/TokensSettings.tsx b/lib/components/Header/TokensSettings.tsx
index 49369ed..2c80136 100644
--- a/lib/components/Header/TokensSettings.tsx
+++ b/lib/components/Header/TokensSettings.tsx
@@ -7,13 +7,14 @@ const TokensSettings = () => {
     const { communityTokens, setCommunityTokens } = useSwapStore();
     return (
         <div className="mts-flex mts-justify-between mts-items-center mts-px-1 mts-text-xs md:mts-text-sm">
-            <div className="mts-text-black">
+            <div className="mts-text-zinc-600 mts-text-lg ">
                 <span>{t('community_tokens')}</span>
             </div>
             <div>
                 <button
                     className={cn(
-                        'mts-flex mts-relative mts-justify-start mts-items-center mts-transition-all mts-duration-300 mts-rounded-full mts-bg-zinc-100 mts-p-1 mts-w-12 mts-h-6',
+                        'mts-flex mts-relative mts-justify-start mts-items-center mts-transition-all mts-duration-300 mts-rounded-full mts-bg-zinc-100 mts-p-1 mts-w-12 mts-h-6 mts-shadow-[0px_0px_0px_4px_rgb(var(--mts-primary-100))]',
+
                         communityTokens ? 'mts-bg-primary-500' : ''
                     )}
                     onClick={() => setCommunityTokens(!communityTokens)}
diff --git a/lib/components/Header/Wallet.tsx b/lib/components/Header/Wallet.tsx
index ef18d0a..7dbcebc 100644
--- a/lib/components/Header/Wallet.tsx
+++ b/lib/components/Header/Wallet.tsx
@@ -4,14 +4,20 @@ import { useWalletStore } from '../../store/wallet.store';
 import './Wallet.scss';
 import formatNumber from '../../utils/formatNum';
 import shortAddress from '../../utils/shortAddress';
-import { FaCheck, FaCopy } from 'react-icons/fa6';
-import { useState } from 'react';
-import { MdArrowOutward } from 'react-icons/md';
+import { FaCheck } from 'react-icons/fa6';
+import { FC, useState } from 'react';
 import { useOptionsStore } from '../../store/options.store';
 import { useTranslation } from 'react-i18next';
+import Copy from '../icons/Copy';
+import Link from '../icons/Link';
+import { cn } from '../../utils/cn';
 // import { useTonConnectUI } from "@tonconnect/ui-react";
 
-const Wallet = () => {
+type WalletProps = {
+    isWalletPopover?: boolean;
+};
+
+const Wallet: FC<WalletProps> = ({ isWalletPopover }) => {
     // make function and state for copy to clipboard address button
     const { t } = useTranslation();
     const [copied, setCopied] = useState(false);
@@ -43,18 +49,32 @@ const Wallet = () => {
     );
 
     return (
-        <>
-            {wallet && (
-                <div className="mts-rounded-lg mts-p-2">
-                    <p className="mts-opacity-75 mts-text-xs">{t('account')}</p>
+        wallet && (
+            <div
+                className={cn(
+                    'mts-flex mts-flex-col mts-gap-3 mts-w-full',
+                    isWalletPopover && 'mts-px-2 mts-pt-2 mts-pb-2 '
+                )}
+            >
+                <div
+                    className={cn(
+                        'mts-rounded-2xl mts-p-4 mts-border-zinc-200 mts-bg-white mts-border-[1px]',
+                        isWalletPopover && 'mts-border-none mts-p-0'
+                    )}
+                >
+                    <p className="mts-opacity-75 mts-text-sm">{t('account')}</p>
                     <div className="mts-flex mts-flex-col">
-                        <p className="mts-mt-2 mts-text-sm">{t('balance')}</p>
-                        <div className="mts-my-2 mts-text-primary-500 mts-font-black mts-text-xl">
+                        <p className="mts-mt-3 mts-text-lg mts-font-medium">
+                            {t('balance')}
+                        </p>
+                        <div className="mts-mt-2 mts-mb-1  mts-font-black mts-text-3xl">
                             {TON_BALANCE}
-                            {t('ton')}
+                            <span className="mts-text-primary-500">
+                                {t('ton')}
+                            </span>
                         </div>
                         <div className="mts-flex mts-items-center mts-gap-1">
-                            <div className="mts-flex mts-opacity-75 mts-rounded mts-bg-zinc-100 mts-px-2 mts-py-1 mts-w-fit mts-text-sm">
+                            <div className="mts-flex mts-opacity-75 mts-rounded mts-white mts-border-[1px] mts-border-zinc-200 mts-px-2 mts-py-1 mts-w-fit mts-text-sm mts-h-10  mts-items-center">
                                 {shortAddress(
                                     wallet.account.address,
                                     'mainnet',
@@ -62,32 +82,36 @@ const Wallet = () => {
                                 )}
                             </div>
                             <button
-                                className="mts-flex mts-justify-center mts-items-center mts-opacity-75 mts-cursor-pointer mts-rounded mts-bg-zinc-100 mts-w-8 mts-h-8 mts-text-black mts-text-xs disabled:mts-opacity-50 disabled:mts-cursor-not-allowed"
+                                className="mts-flex mts-justify-center mts-items-center mts-opacity-75 mts-cursor-pointer mts-rounded-md mts-text-white    mts-text-xs disabled:mts-opacity-50 disabled:mts-cursor-not-allowed mts-h-10 mts-w-10 mts-bg-primary-900"
                                 disabled={copied}
                                 onClick={() =>
                                     copyToClipboard(wallet.account.address)
                                 }
                             >
-                                {copied ? <FaCheck /> : <FaCopy />}
+                                {copied ? (
+                                    <FaCheck />
+                                ) : (
+                                    <Copy className="mts-text-xl" />
+                                )}
                             </button>
                             <a
-                                className="mts-flex mts-justify-center mts-items-center mts-opacity-75 mts-cursor-pointer mts-rounded mts-bg-zinc-100 mts-w-8 mts-h-8 mts-text-black mts-text-xs"
+                                className="mts-flex mts-justify-center mts-items-center mts-opacity-75 mts-cursor-pointer mts-rounded-md mts-text-white  mts-text-xs mts-h-10 mts-w-10 mts-bg-primary-900"
                                 target="_blank"
                                 href={`https://tonviewer.com/${wallet.account.address}`}
                             >
-                                <MdArrowOutward />
+                                <Link className="mts-text-xl" />
                             </a>
                         </div>
-                        <button
-                            className="mts-flex mts-justify-center mts-items-center mts-transition-all mts-duration-300 mts-ease-in-out mts-cursor-pointer mts-mt-2 mts-rounded mts-bg-zinc-100 mts-h-10 mts-text-black mts-text-sm"
-                            onClick={handleDisconnect}
-                        >
-                            {t('disconnect_wallet')}
-                        </button>
                     </div>
                 </div>
-            )}
-        </>
+                <button
+                    className="mts-flex mts-justify-center mts-items-center mts-transition-all mts-duration-300 mts-ease-in-out mts-cursor-pointer  mts-bg-primary-500 mts-h-10 mts-text-white mts-border-[1px] mts-border-primary-600 mts-rounded-lg mts-text-sm "
+                    onClick={handleDisconnect}
+                >
+                    {t('disconnect_wallet')}
+                </button>
+            </div>
+        )
     );
 };
 
diff --git a/lib/components/Swap/Swap.scss b/lib/components/Swap/Swap.scss
index 1ada41c..417179e 100644
--- a/lib/components/Swap/Swap.scss
+++ b/lib/components/Swap/Swap.scss
@@ -17,12 +17,6 @@
 }
 
 .mytonswap-app {
-    font-family: 'Plus Jakarta Sans', sans-serif;
-    * {
-        font-family: 'Plus Jakarta Sans', sans-serif !important;
-        -webkit-tap-highlight-color: transparent;
-    }
-
     input {
         outline: none;
         border: none;
@@ -55,10 +49,10 @@
         line-clamp: 1;
     }
     .container {
-        border-width: 1px;
-        border-style: solid;
-        border-color: var(--swap-container-border-color);
-        border-radius: 1rem;
+        // border-width: 1px;
+        // border-style: solid;
+        // border-color: var(--swap-container-border-color);
+        // border-radius: 1rem;
         // background: var(--swap-container-background-color);
         padding: 0.5rem;
         max-width: 21.875rem;
diff --git a/lib/components/Swap/Swap.stories.tsx b/lib/components/Swap/Swap.stories.tsx
index 2175557..1f87849 100644
--- a/lib/components/Swap/Swap.stories.tsx
+++ b/lib/components/Swap/Swap.stories.tsx
@@ -32,7 +32,7 @@ export const Default: Story = {
     args: {
         options: {
             ui_preferences: {
-                primary_color: '#1971ff',
+                primary_color: '#f94905',
             },
         },
     },
diff --git a/lib/components/Swap/Swap.tsx b/lib/components/Swap/Swap.tsx
index 2e96e04..7e4af1b 100644
--- a/lib/components/Swap/Swap.tsx
+++ b/lib/components/Swap/Swap.tsx
@@ -161,13 +161,17 @@ export const SwapComponent: FC<SwapProps> = ({
     return (
         <ErrorBoundary fallback={<div>Something went wrong</div>}>
             <div className={cn('mytonswap-app', direction)}>
-                <div className={clsx('container')}>
+                <div
+                    className={clsx(
+                        'mts-rounded-lg mts-p-2 mts-max-w-[21.875rem] mts-overflow-hidden md:mts-p-3 md:mts-w-[28.125rem] md:mts-max-w-[28.125rem] lg:mts-w-[calc(34.375rem+24px)] lg:mts-max-w-[calc(34.375rem+24px)]'
+                    )}
+                >
                     <Header />
                     <SwapCard />
-                    {shouldShowSwapDetails && <SwapDetails />}
                     <SwapButton />
+                    {shouldShowSwapDetails && <SwapDetails />}
                     {shouldShowProvidedText && (
-                        <div className="text-provided">
+                        <div className="mts-mt-2 mts-mb-1 mts-w-full mts-text-black mts-text-[10px] mts-text-center">
                             {t('service_provided')}{' '}
                             <a
                                 href="https://mytonswap.com"
diff --git a/lib/components/SwapButton/ConfirmationModal.tsx b/lib/components/SwapButton/ConfirmationModal.tsx
index 8c7456d..b83570f 100644
--- a/lib/components/SwapButton/ConfirmationModal.tsx
+++ b/lib/components/SwapButton/ConfirmationModal.tsx
@@ -1,4 +1,3 @@
-import { IoMdClose } from 'react-icons/io';
 import { ModalState, useSwapStore } from '../../store/swap.store';
 import { fromNano } from '@mytonswap/sdk';
 import { FaArrowRightArrowLeft } from 'react-icons/fa6';
@@ -8,6 +7,7 @@ import swap from '../../utils/swap';
 import { FC, useEffect } from 'react';
 import { useOptionsStore } from '../../store/options.store';
 import { useTranslation } from 'react-i18next';
+import Close from '../icons/Close';
 type ConfirmationModalProps = {
     setConfirmModal: (state: ModalState) => void;
 };
@@ -21,16 +21,11 @@ const ConfirmationModal: FC<ConfirmationModalProps> = ({ setConfirmModal }) => {
         receive_rate,
         slippage,
         setModalState,
-        setErrorMessage,
     } = useSwapStore();
     const { t } = useTranslation();
 
     const handleConfirmClose = () => {
-        setErrorMessage({
-            errorMessage: t('error.cancel_swap'),
-            errorTitle: t('error.cancel_swap_title'),
-        });
-        setConfirmModal(ModalState.ERROR);
+        setConfirmModal(ModalState.NONE);
     };
     const { tonConnectInstance } = useOptionsStore();
     useEffect(() => {
@@ -49,25 +44,24 @@ const ConfirmationModal: FC<ConfirmationModalProps> = ({ setConfirmModal }) => {
         }
     };
     return (
-        <div className="mts-flex mts-flex-col mts-items-center mts-gap-3 mts-pt-2 mts-pb-2 mts-w-full mts-h-full">
-            <div className="mts-flex mts-justify-between mts-items-center mts-pr-4 mts-pl-4 mts-w-full">
-                <span className="mts-opacity-50 mts-text-black mts-font-bold">
+        <div className="mts-flex mts-flex-col mts-items-center mts-gap-3 mts-px-2 mts-pt-2 mts-pb-2 mts-w-full mts-h-full">
+            <div className="mts-flex mts-justify-between mts-items-center mts-w-full">
+                <span className="mts-text-black mts-font-bold mts-text-lg">
                     {t('confirm.confirm_title')}
                 </span>{' '}
-                <IoMdClose
-                    onClick={handleConfirmClose}
-                    className="mts-cursor-pointer mts-text-black mts-text-xl"
-                />
+                <button onClick={handleConfirmClose}>
+                    <Close className="mts-cursor-pointer mts-text-black mts-text-2xl" />
+                </button>
             </div>
             <div className="mts-flex mts-items-center mts-pt-1">
                 <div
-                    className="mts-translate-x-3 mts-border-5 mts-border-solid mts-border-modal-background mts-rounded-full mts-bg-contain mts-w-16 mts-h-16"
+                    className="mts-translate-x-3 mts-border-5 mts-border-solid mts-border-modal-background mts-rounded-full !mts-bg-contain mts-w-11 mts-h-11"
                     style={{
                         background: `url(${pay_token?.image})`,
                     }}
                 ></div>
                 <div
-                    className="mts--translate-x-0.5 mts-border-5 mts-border-solid mts-border-modal-background mts-rounded-full mts-bg-contain mts-w-16 mts-h-16"
+                    className="mts--translate-x-0.5 mts-border-5 mts-border-solid mts-border-modal-background mts-rounded-full !mts-bg-contain mts-w-11 mts-h-11"
                     style={{
                         background: `url(${receive_token?.image})`,
                     }}
@@ -94,10 +88,14 @@ const ConfirmationModal: FC<ConfirmationModalProps> = ({ setConfirmModal }) => {
                     $
                 </div>
             </div>
-            <div className="mts-flex mts-flex-grow mts-flex-col mts-justify-center mts-gap-3 mts-mt-0.5 mts-pr-4 mts-pl-4 mts-w-full mts-h-fit mts-text-lg">
+            <div className="mts-flex mts-flex-grow mts-flex-col mts-justify-center mts-gap-3 mts-mt-0.5 mts-w-full mts-h-fit mts-text-lg">
                 <SwapKeyValue
                     keyText={t('slippage_tolerance')}
-                    value={slippage === 'auto' ? '1% Auto' : slippage + '%'}
+                    value={
+                        <div className="mts-px-2 mts-py-1 mts-bg-zinc-200 mts-rounded-full">
+                            {slippage === 'auto' ? '1% Auto' : slippage + '%'}
+                        </div>
+                    }
                 />
                 <SwapKeyValue
                     keyText={t('minimum_received')}
@@ -128,10 +126,10 @@ const ConfirmationModal: FC<ConfirmationModalProps> = ({ setConfirmModal }) => {
                     }
                 />
             </div>
-            <div className="mts-mt-0.5 mts-pr-4 mts-pl-4 mts-w-full">
+            <div className="mts-mt-0.5 mts-w-full">
                 <button
                     onClick={handleConfirmSwap}
-                    className="mts-cursor-pointer mts-rounded-lg mts-bg-primary-500 mts-w-full mts-h-12 mts-text-white mts-text-base"
+                    className="mts-cursor-pointer mts-rounded-lg mts-bg-primary-500 mts-w-full mts-h-12 mts-text-white mts-text-base mts-border-[1px] mts-border-primary-600"
                 >
                     {t('confirm.confirm_button')}
                 </button>
diff --git a/lib/components/SwapButton/Done.tsx b/lib/components/SwapButton/Done.tsx
index eface52..3f35e04 100644
--- a/lib/components/SwapButton/Done.tsx
+++ b/lib/components/SwapButton/Done.tsx
@@ -1,10 +1,10 @@
 import { FaArrowRightArrowLeft, FaCircleCheck } from 'react-icons/fa6';
-import { IoClose } from 'react-icons/io5';
 import { ModalState, useSwapStore } from '../../store/swap.store';
 import { fromNano } from '@mytonswap/sdk';
 import formatNumber from '../../utils/formatNum';
 import './Done.scss';
 import { useTranslation } from 'react-i18next';
+import Close from '../icons/Close';
 
 const Done = () => {
     const { t } = useTranslation();
@@ -16,31 +16,30 @@ const Done = () => {
     };
     return (
         <div className="mts-flex mts-flex-col mts-justify-center mts-items-center mts-h-full">
-            <IoClose
-                onClick={handleCloseModal}
-                className="mts-absolute mts-top-4 mts-right-4 mts-opacity-70 mts-cursor-pointer mts-text-black mts-text-xl"
-            />
-            <div className="mts-flex mts-justify-center mts-items-center mts-w-full mts-text-primary mts-text-5xl mts-text-green-500">
+            <button onClick={handleCloseModal}>
+                <Close className="mts-absolute mts-top-4 mts-right-4 mts-opacity-70 mts-cursor-pointer mts-text-2xl" />
+            </button>
+            <div className="mts-flex mts-justify-center mts-items-center mts-text-primary mts-text-5xl mts-text-green-500 mts-h-20 mts-w-20 mts-border-[1px] mts-border-zinc-200 mts-bg-zinc-100 mts-rounded-full">
                 <FaCircleCheck />
             </div>
-            <div className="mts-mb-8 mts-text-black mts-font-bold mts-text-xl mts-text-center">
+            <div className="mts-mt-6 mts-text-black mts-font-bold mts-text-lg mts-text-center">
                 {t('transaction.complete')}
             </div>
-            <div className="mts-flex mts-items-center mts-pt-1">
+            <div className="mts-flex mts-items-center mts-pt-6">
                 <div
-                    className="mts-translate-x-3 mts-border-4 mts-border-solid mts-border-zinc-100 mts-rounded-full !mts-bg-contain mts-w-16 mts-h-16"
+                    className="mts-translate-x-3 mts-border-5 mts-border-solid mts-border-modal-background mts-rounded-full !mts-bg-contain mts-w-11 mts-h-11"
                     style={{
                         background: `url(${pay_token?.image})`,
                     }}
                 ></div>
                 <div
-                    className="mts--translate-x-0.5 mts-border-4 mts-border-solid mts-border-zinc-100 mts-rounded-full !mts-bg-contain mts-w-16 mts-h-16"
+                    className="mts--translate-x-0.5 mts-border-5 mts-border-solid mts-border-modal-background mts-rounded-full !mts-bg-contain mts-w-11 mts-h-11"
                     style={{
                         background: `url(${receive_token?.image})`,
                     }}
                 ></div>
             </div>
-            <div className="mts-flex mts-flex-col mts-items-center mts-opacity-70 mts-text-black mts-font-bold mts-text-center">
+            <div className="mts-flex mts-flex-col mts-items-center mts-opacity-70 mts-text-black mts-font-bold mts-text-center mts-mt-6">
                 <div>
                     {fromNano(pay_amount, pay_token?.decimal)}{' '}
                     {pay_token?.symbol}
diff --git a/lib/components/SwapButton/ErrorTonConnect.tsx b/lib/components/SwapButton/ErrorTonConnect.tsx
index 9bd806b..18abba6 100644
--- a/lib/components/SwapButton/ErrorTonConnect.tsx
+++ b/lib/components/SwapButton/ErrorTonConnect.tsx
@@ -1,6 +1,6 @@
 import { ModalState, useSwapStore } from '../../store/swap.store';
-import { IoClose } from 'react-icons/io5';
 import { IoCloseCircle } from 'react-icons/io5';
+import Close from '../icons/Close';
 
 const ErrorTonConnect = () => {
     const { transactionError, transactionErrorBody, setModalState } =
@@ -15,13 +15,14 @@ const ErrorTonConnect = () => {
     };
     return (
         <div className="mts-flex mts-flex-col mts-justify-center mts-items-center mts-h-full mts-text-black">
-            <IoCloseCircle className="mts-text-red-500 mts-text-6xl" />
-            <IoClose
-                onClick={handleCloseModal}
-                className="mts-absolute mts-top-4 mts-right-4 mts-opacity-70 mts-cursor-pointer mts-text-xl"
-            />
-            <div className="mts-mt-4 mts-px-7 mts-text-center">
-                <p className="mts-font-bold mts-text-xl">{transactionError}</p>
+            <button onClick={handleCloseModal}>
+                <Close className="mts-absolute mts-top-4 mts-right-4 mts-opacity-70 mts-cursor-pointer mts-text-2xl" />
+            </button>
+            <div className="mts-h-20 mts-w-20 mts-flex mts-justify-center mts-items-center mts-border-[1px] mts-border-zinc-200 mts-bg-zinc-100 mts-rounded-full">
+                <IoCloseCircle className="mts-text-red-500 mts-text-6xl" />
+            </div>
+            <div className="mts-mt-4 mts-px-7 mts-text-center mts-min-h-52 mts-m-6 mts-flex mts-flex-col mts-items-center mts-justify-center">
+                <p className="mts-font-bold mts-text-lg">{transactionError}</p>
                 <p>{transactionErrorBody}</p>
             </div>
         </div>
diff --git a/lib/components/SwapButton/Inprogress.tsx b/lib/components/SwapButton/Inprogress.tsx
index 5c64d75..eb702f9 100644
--- a/lib/components/SwapButton/Inprogress.tsx
+++ b/lib/components/SwapButton/Inprogress.tsx
@@ -4,9 +4,9 @@ import { IoClose } from 'react-icons/io5';
 import { Dex, fromNano } from '@mytonswap/sdk';
 import { FaArrowRightArrowLeft } from 'react-icons/fa6';
 import formatNumber from '../../utils/formatNum';
-import { ImSpinner8 } from 'react-icons/im';
 import { useEventsStore } from '../../store/events.store';
 import { useTranslation } from 'react-i18next';
+import Spinner from '../icons/Spinner';
 
 const Inprogress = () => {
     const { t } = useTranslation();
@@ -84,30 +84,30 @@ const Inprogress = () => {
             />
             <div className="mts-flex mts-items-center mts-pt-1">
                 <div
-                    className="mts-transform mts-translate-x-1 mts-border-2 mts-border-solid mts-border-zinc-100 mts-rounded-full !mts-bg-contain mts-w-16 mts-h-16 md:mts-w-10 md:mts-h-10"
+                    className="mts-translate-x-3 mts-border-5 mts-border-solid mts-border-modal-background mts-rounded-full !mts-bg-contain mts-w-11 mts-h-11"
                     style={{
                         background: `url(${pay_token?.image})`,
                     }}
                 ></div>
                 <div
-                    className="mts-transform mts--translate-x-1 mts-border-2 mts-border-solid mts-border-zinc-100 mts-rounded-full !mts-bg-contain mts-w-16 mts-h-16 md:mts-w-10 md:mts-h-10"
+                    className="mts--translate-x-0.5 mts-border-5 mts-border-solid mts-border-modal-background mts-rounded-full !mts-bg-contain mts-w-11 mts-h-11"
                     style={{
                         background: `url(${receive_token?.image})`,
                     }}
                 ></div>
             </div>
-            <div className="mts-flex mts-flex-col mts-items-center mts-opacity-70 mts-text-black mts-font-bold mts-text-lg mts-text-center">
+            <div className="mts-flex mts-flex-col mts-items-center mts-opacity-70 mts-text-black mts-font-bold mts-text-center mts-mt-6">
                 <div>
                     {fromNano(pay_amount, pay_token?.decimal)}{' '}
                     {pay_token?.symbol}
                 </div>
                 <div>
-                    <FaArrowRightArrowLeft className="mts-transform mts-rotate-90 mts-opacity-60 mts-text-sm md:mts-text-xs" />
+                    <FaArrowRightArrowLeft className="mts-rotate-90 mts-opacity-60 mts-text-xs" />
                 </div>
                 <div>
                     {bestRoute!.pool_data.receive_show!} {receive_token?.symbol}
                 </div>
-                <div className="mts-opacity-60 mts-text-sm md:mts-text-xs">
+                <div className="mts-opacity-60 mts-text-xs">
                     ≈{' '}
                     {formatNumber(
                         Number(bestRoute!.pool_data.receive_show) *
@@ -118,14 +118,14 @@ const Inprogress = () => {
                 </div>
             </div>
 
-            <div className="mts-mt-4 mts-text-black mts-font-bold mts-text-xl mts-text-center">
+            <div className="mts-mt-4 mts-font-bold mts-text-lg md:mts-text-xl mts-text-center">
                 {t('transaction.pending')}
             </div>
             <p className="mts-text-black mts-text-base">
                 {t('transaction.action_in_progress')}
             </p>
-            <div className="mts-flex mts-justify-center mts-items-center mts-mt-1 mts-w-full mts-text-black mts-text-3xl md:mts-mt-4 md:mts-text-4xl">
-                <ImSpinner8 className="mts-animate-spin mts-opacity-50" />
+            <div className="mts-flex mts-justify-center mts-items-center mts-text-3xl md:mts-text-4xl mts-h-20 mts-w-20 mts-border-[1px] mts-bg-zinc-100 mts-border-zinc-200 mts-rounded-full mts-mt-6">
+                <Spinner className="mts-text-[30px] mts-text-primary-500 mts-animate-spin" />
             </div>
         </div>
     );
diff --git a/lib/components/SwapButton/SwapButton.tsx b/lib/components/SwapButton/SwapButton.tsx
index 2fde65e..df58f41 100644
--- a/lib/components/SwapButton/SwapButton.tsx
+++ b/lib/components/SwapButton/SwapButton.tsx
@@ -100,7 +100,7 @@ const SwapButton = () => {
                     >
                         <motion.div
                             transition={{ ease: [0.6, -0.05, 0.01, 0.99] }}
-                            className="mts-flex mts-fixed mts-bottom-0 mts-left-0 mts-flex-col mts-justify-center mts-items-center mts-shadow-[0px_0px_5px_rgba(0,0,0,0.05)] mts-border-t mts-border-solid mts-border-black/10 mts-rounded-t-lg mts-bg-zinc-100 mts-p-2 mts-w-full mts-h-full mts-max-h-[26.875rem] md:mts-shadow-[0_0px_10px_rgba(0,0,0,0.05)] md:mts-rounded-lg md:mts-w-[90%] md:mts-max-w-[28.125rem] md:mtsx-max-h-[80%] md:mts-max-h-[30rem] lg:mts-w-[32.5rem] lg:mts-max-w-[32.5rem]"
+                            className="mts-flex mts-fixed mts-bottom-0 mts-left-0 mts-flex-col mts-justify-center mts-items-center mts-shadow-[0px_0px_5px_rgba(0,0,0,0.05)] mts-border-t mts-border-solid mts-border-black/10 mts-rounded-t-lg mts-bg-white mts-p-2 mts-w-full mts-h-full mts-max-h-[28.75rem] md:mts-shadow-[0_0px_10px_rgba(0,0,0,0.05)] md:mts-rounded-lg md:mts-w-[90%] md:mts-max-w-[28.125rem] md:mtsx-max-h-[80%] md:mts-max-h-[30rem] lg:mts-w-[32.5rem] lg:mts-max-w-[32.5rem]"
                             initial={modalAnimation.initial}
                             animate={modalAnimation.animate}
                             exit={modalAnimation.exit}
@@ -126,11 +126,11 @@ const SwapButton = () => {
             </AnimatePresence>
             <button
                 className={cn(
-                    'mts-mt-3 mts-rounded-lg mts-bg-primary-500 mts-w-full mts-h-[3.75rem] mts-text-white mts-text-base md:mts-h-[3.25rem] md:mts-text-md lg:mts-rounded-xl lg:mts-h-[3.5rem] lg:mts-text-md',
+                    'mts-mt-3 mts-rounded-lg mts-bg-primary-500 mts-border-[1px]  mts-w-full mts-h-11 mts-text-white mts-text-sm md:mts-h-[3.25rem] md:mts-text-md lg:mts-rounded-xl lg:mts-h-[3.5rem] lg:mts-text-md disabled:mts-bg-primary-300 disabled:mts-cursor-not-allowed',
                     tonConnectInstance?.wallet &&
                         isRouteAvailable &&
                         !bestRoute.pool_data.status
-                        ? 'mts-bg-[var(--price-impact-color)]'
+                        ? ''
                         : ''
                 )}
                 data-testid="swap-button"
diff --git a/lib/components/SwapButton/WaitingForWallet.tsx b/lib/components/SwapButton/WaitingForWallet.tsx
index 927c85a..054f65a 100644
--- a/lib/components/SwapButton/WaitingForWallet.tsx
+++ b/lib/components/SwapButton/WaitingForWallet.tsx
@@ -1,15 +1,25 @@
-import { ImSpinner8 } from 'react-icons/im';
-import { IoClose } from 'react-icons/io5';
 import { ModalState, useSwapStore } from '../../store/swap.store';
 import { motion } from 'framer-motion';
 import { useOptionsStore } from '../../store/options.store';
 import { useTranslation } from 'react-i18next';
 import { Trans } from 'react-i18next';
+import { FaArrowRightArrowLeft } from 'react-icons/fa6';
+import formatNumber from '../../utils/formatNum';
+import { fromNano } from '@mytonswap/sdk';
+import Close from '../icons/Close';
+import Spinner from '../icons/Spinner';
 
 const WaitingForWallet = () => {
     const { t } = useTranslation();
     const { tonConnectInstance } = useOptionsStore();
-    const { setModalState } = useSwapStore();
+    const {
+        pay_amount,
+        pay_token,
+        bestRoute,
+        receive_token,
+        receive_rate,
+        setModalState,
+    } = useSwapStore();
 
     const handleCloseModal = () => {
         setModalState(ModalState.NONE);
@@ -21,15 +31,46 @@ const WaitingForWallet = () => {
             exit={{ opacity: 0 }}
             className="mts-flex mts-relative mts-flex-col mts-justify-center mts-items-center mts-px-4 mts-h-full mts-text-black"
         >
-            <IoClose
-                onClick={handleCloseModal}
-                className="mts-absolute mts-top-4 mts-right-4 mts-opacity-70 mts-cursor-pointer mts-text-2xl"
-            />
-
-            <div className="mts-flex mts-justify-center mts-items-center mts-scale-150 mts-w-full mts-text-3xl md:mts-text-4xl">
-                <ImSpinner8 className="mts-animate-spin mts-opacity-70 mts-text-primary-500" />
+            <button onClick={handleCloseModal}>
+                <Close className="mts-absolute mts-top-4 mts-right-4 mts-opacity-70 mts-cursor-pointer mts-text-2xl" />
+            </button>
+            <div className="mts-flex mts-items-center mts-pt-1">
+                <div
+                    className="mts-translate-x-3 mts-border-5 mts-border-solid mts-border-modal-background mts-rounded-full !mts-bg-contain mts-w-11 mts-h-11"
+                    style={{
+                        background: `url(${pay_token?.image})`,
+                    }}
+                ></div>
+                <div
+                    className="mts--translate-x-0.5 mts-border-5 mts-border-solid mts-border-modal-background mts-rounded-full !mts-bg-contain mts-w-11 mts-h-11"
+                    style={{
+                        background: `url(${receive_token?.image})`,
+                    }}
+                ></div>
             </div>
-            <div className="mts-mt-4 mts-font-bold mts-text-2xl md:mts-text-xl mts-text-center">
+            <div className="mts-flex mts-flex-col mts-items-center mts-opacity-70 mts-text-black mts-font-bold mts-text-center mts-mt-6">
+                <div>
+                    {fromNano(pay_amount, pay_token?.decimal)}{' '}
+                    {pay_token?.symbol}
+                </div>
+                <div>
+                    <FaArrowRightArrowLeft className="mts-rotate-90 mts-opacity-60 mts-text-xs" />
+                </div>
+                <div>
+                    {bestRoute!.pool_data.receive_show!} {receive_token?.symbol}
+                </div>
+                <div className="mts-opacity-60 mts-text-xs">
+                    ≈{' '}
+                    {formatNumber(
+                        Number(bestRoute!.pool_data.receive_show) *
+                            receive_rate!.USD,
+                        4
+                    )}
+                    $
+                </div>
+            </div>
+
+            <div className="mts-mt-4 mts-font-bold mts-text-lg md:mts-text-xl mts-text-center">
                 <Trans
                     i18nKey={'confirm.confirm_in_wallet'}
                     values={{
@@ -37,7 +78,10 @@ const WaitingForWallet = () => {
                     }}
                 ></Trans>
             </div>
-            <p>{t('confirm.action_in_progress')}</p>
+            <p className="mts-text-base">{t('confirm.action_in_progress')}</p>
+            <div className="mts-flex mts-justify-center mts-items-center mts-text-3xl md:mts-text-4xl mts-h-20 mts-w-20 mts-border-[1px] mts-bg-zinc-100 mts-border-zinc-200 mts-rounded-full mts-mt-6">
+                <Spinner className="mts-animate-spin mts-opacity-70 mts-text-primary-500" />
+            </div>
         </motion.div>
     );
 };
diff --git a/lib/components/SwapCard/Card.tsx b/lib/components/SwapCard/Card.tsx
index f1beddd..1dbfb08 100644
--- a/lib/components/SwapCard/Card.tsx
+++ b/lib/components/SwapCard/Card.tsx
@@ -171,56 +171,23 @@ const Card: FC<CardProps> = ({ type }) => {
     })();
     return (
         <>
-            <div className="mts-flex mts-flex-col mts-w-full mts-text-base">
-                <div className="mts-flex mts-justify-between mts-items-center mts-px-1">
+            <div
+                className={cn(
+                    'mts-flex mts-flex-col mts-w-full mts-text-base mts-bg-zinc-50 mts-border-[1px] mts-border-zinc-200 mts-p-4 mts-rounded-lg',
+                    type === 'receive' && 'mts-m-[2px]'
+                )}
+            >
+                <div className="mts-flex mts-justify-between mts-items-center">
                     <span
                         data-testid="swapcard-title"
-                        className="mts-opacity-70 mts-text-black"
+                        className="mts-opacity-70 mts-text-black mts-text-xs mts-font-normal"
                     >
                         {type === 'pay' ? t('you_pay') : t('you_receive')}
                     </span>
-                    {type === 'pay' && balanceToken ? (
-                        <span
-                            className="mts-cursor-pointer mts-text-black"
-                            onClick={handleMaxClick}
-                        >
-                            <span className="mts-text-primary-500">
-                                {t('max')} :{' '}
-                            </span>
-                            <span>
-                                {formatNumber(
-                                    +fromNano(
-                                        balanceToken.balance,
-                                        pay_token!.decimal
-                                    ),
-                                    2,
-                                    false
-                                )}{' '}
-                                {pay_token?.symbol}
-                            </span>
-                        </span>
-                    ) : (
-                        <span className="mts-cursor-auto mts-text-black">
-                            {balanceToken && receive_token && (
-                                <span>
-                                    {formatNumber(
-                                        +fromNano(
-                                            balanceToken.balance,
-                                            receive_token!.decimal
-                                        ),
-                                        2,
-                                        false
-                                    )}{' '}
-                                    {receive_token?.symbol}
-                                </span>
-                            )}
-                        </span>
-                    )}
                 </div>
                 <div
                     className={cn(
-                        `mts-grid mts-grid-cols-[1fr_auto] mts-gap-1 mts-mt-3.5 mts-rounded-lg mts-bg-white mts-p-4 mts-w-full`,
-                        type === 'pay' ? 'mts-bg-white' : 'mts-bg-zinc-200'
+                        `mts-grid mts-grid-cols-[1fr_auto] mts-gap-1  mts-rounded-lg  mts-w-full mts-mt-3`
                     )}
                 >
                     <div className="mts-flex mts-flex-col mts-justify-center mts-gap-1 mts-w-full">
@@ -240,13 +207,13 @@ const Card: FC<CardProps> = ({ type }) => {
                                 onChange={handlePayAmountChange}
                                 pattern="^[0-9]*[.,]?[0-9]*$"
                                 placeholder="0"
-                                className={`mts-outline-none mts-bg-transparent mts-h-7.5 mts-text-black mts-font-bold mts-text-2xl mts-font-inherit ${type}`}
+                                className={`mts-outline-none mts-bg-transparent mts-h-7 mts-text-black mts-font-bold  mts-font-inherit mts-text-lg ${type}`}
                                 data-testid={`swapcard-input-${type}`}
                             />
                         )}
                         {type === 'receive' && isFindingBestRoute && (
                             <div
-                                className="mts-rounded-lg mts-w-24 mts-h-[2rem]"
+                                className="mts-rounded-lg mts-w-24 mts-h-7"
                                 data-skeleton
                                 style={{
                                     ...({
@@ -258,8 +225,8 @@ const Card: FC<CardProps> = ({ type }) => {
                         )}
                         {((type === 'receive' && !isFindingBestRoute) ||
                             type === 'pay') && (
-                            <span className="mts-flex mts-items-center mts-opacity-50 mts-h-5 mts-text-black mts-text-base mts-font-inherit mts-text-left">
-                                ${calculatedRate}
+                            <span className="mts-flex mts-items-center mts-opacity-50 mts-h-5 mts-text-black mts-text-sm mts-font-inherit mts-text-left">
+                                {calculatedRate} $
                             </span>
                         )}
                         {type === 'receive' && isFindingBestRoute && (
@@ -275,7 +242,7 @@ const Card: FC<CardProps> = ({ type }) => {
                             />
                         )}
                     </div>
-                    <div className="mts-flex mts-items-center">
+                    <div className="mts-flex mts-items-end mts-flex-col mts-gap-2">
                         <CardButton
                             type={type}
                             onClick={() => setIsSelectVisible(true)}
@@ -294,6 +261,43 @@ const Card: FC<CardProps> = ({ type }) => {
                                 </div>
                             )}
                         </CardButton>
+                        {type === 'pay' && balanceToken ? (
+                            <span
+                                className="mts-cursor-pointer  mts-text-xs mts-flex mts-items-center mts-gap-2 mts-text-zinc-500 mts-font-medium"
+                                onClick={handleMaxClick}
+                            >
+                                <span>
+                                    {formatNumber(
+                                        +fromNano(
+                                            balanceToken.balance,
+                                            pay_token!.decimal
+                                        ),
+                                        2,
+                                        false
+                                    )}{' '}
+                                    {pay_token?.symbol}
+                                </span>
+                                <span className="mts-text-black mts-px-1 mts-bg-zinc-200 mts-text-[10px] mts-rounded-full">
+                                    {t('max')}
+                                </span>
+                            </span>
+                        ) : (
+                            <span className="mts-cursor-auto  mts-text-xs mts-text-zinc-500">
+                                {balanceToken && receive_token && (
+                                    <span>
+                                        {formatNumber(
+                                            +fromNano(
+                                                balanceToken.balance,
+                                                receive_token!.decimal
+                                            ),
+                                            2,
+                                            false
+                                        )}{' '}
+                                        {receive_token?.symbol}
+                                    </span>
+                                )}
+                            </span>
+                        )}
                     </div>
                 </div>
             </div>
diff --git a/lib/components/SwapCard/CardButton.tsx b/lib/components/SwapCard/CardButton.tsx
index 67d4dae..3ebf3d8 100644
--- a/lib/components/SwapCard/CardButton.tsx
+++ b/lib/components/SwapCard/CardButton.tsx
@@ -39,7 +39,7 @@ const CardButton: FC<CardButtonProps & PropsWithChildren> = ({
             }}
             data-testid={`card-button-${type}`}
             className={cn(
-                'mts-flex mts-gap-1 mts-items-center mts-transition-all mts-ease-in-out mts-rounded-full mts-py-1 mts-pr-2 mts-pl-1 mts-h-10 mts-font-bold mts-text-2xl mts-ltr mts-bg-zinc-100 mts-text-black',
+                'mts-flex mts-gap-1 mts-items-center mts-transition-all mts-ease-in-out mts-rounded-full mts-py-1 mts-pr-2 mts-pl-1 mts-h-10 mts-font-semibold mts-text-sm mts-ltr mts-text-black mts-border-[1px]',
                 isLoading && 'mts-w-20 mts-h-10',
                 type === 'pay' && isLoading && 'mts-pointer-events-none',
                 type === 'receive' &&
diff --git a/lib/components/SwapCard/CardDialog.tsx b/lib/components/SwapCard/CardDialog.tsx
index 611f0f9..daa9cbb 100644
--- a/lib/components/SwapCard/CardDialog.tsx
+++ b/lib/components/SwapCard/CardDialog.tsx
@@ -8,8 +8,7 @@ import {
     useRef,
     useState,
 } from 'react';
-import { IoClose } from 'react-icons/io5';
-import { MdOutlineSearch } from 'react-icons/md';
+
 import { AnimatePresence, motion } from 'framer-motion';
 import Token from './Token';
 import InfiniteScroll from 'react-infinite-scroll-component';
@@ -18,7 +17,6 @@ import { Asset } from '@mytonswap/sdk';
 import sortAssets from '../../utils/sortAssets';
 import { CgSpinnerTwo } from 'react-icons/cg';
 import { address } from '@ton/ton';
-import { TiWarning } from 'react-icons/ti';
 import './CardDialog.scss';
 import { useMediaQuery, useOnClickOutside } from 'usehooks-ts';
 import { modalAnimationDesktop, modalAnimationMobile } from '../../constants';
@@ -27,6 +25,9 @@ import catchError from '../../utils/catchErrors';
 import { reportErrorWithToast } from '../../services/errorAnalytics';
 import { useTranslation } from 'react-i18next';
 import FavList from './FavList';
+import Close from '../icons/Close';
+import Search from '../icons/Search';
+import Warning from '../icons/Warning';
 type CardDialogProps = {
     isSelectVisible: boolean;
     setIsSelectVisible: Dispatch<SetStateAction<boolean>>;
@@ -277,27 +278,27 @@ const CardDialog: FC<CardDialogProps> = ({
                             animate={modalAnimation.animate}
                             exit={modalAnimation.exit}
                             className={clsx(
-                                'mts-fixed mts-bottom-0 mts-left-0 mts-flex mts-flex-col mts-shadow-[0px_0px_10px_rgba(0,0,0,0.05)] mts-rounded-t-2xl mts-bg-white mts-p-3 mts-pt-4 mts-pb-2 mts-w-full mts-min-h-[92.5dvh] mts-max-h-[92.5dvh] mts-overflow-y-auto md:mts-shadow-[0_0px_10px_rgba(0,0,0,0.05)] md:mts-rounded-2xl md:mts-w-[90%] md:mts-max-w-[34.375rem] md:mts-h-auto md:mts-min-h-[21.875rem] md:mts-max-h-[70dvh]'
+                                'mts-fixed mts-bottom-0 mts-left-0 mts-flex mts-flex-col mts-shadow-[0px_0px_10px_rgba(0,0,0,0.05)] mts-rounded-t-2xl mts-bg-white mts-p-4 mts-pt-4 mts-pb-2 mts-w-full mts-min-h-[92.5dvh] mts-max-h-[92.5dvh] mts-overflow-y-auto md:mts-shadow-[0_0px_10px_rgba(0,0,0,0.05)] md:mts-rounded-2xl md:mts-w-[90%] md:mts-max-w-[34.375rem] md:mts-h-auto md:mts-min-h-[21.875rem] md:mts-max-h-[70dvh]'
                             )}
                             ref={ref}
                             onClick={(e) => {
                                 e.stopPropagation();
                             }}
                         >
-                            <div className="mts-flex mts-justify-between mts-items-center mts-text-black mts-font-bold mts-text-xl">
+                            <div className="mts-flex mts-justify-between mts-items-center mts-text-black mts-font-bold mts-text-lg">
                                 <div>{t('select_a_token')}</div>
                                 <button
                                     onClick={handleOnClose}
-                                    className="mts-hidden mts-opacity-50 mts-text-black mts-text-xl md:mts-block"
+                                    className="mts-text-black mts-text-2xl md:mts-block"
                                 >
-                                    <IoClose />
+                                    <Close />
                                 </button>
                             </div>
                             <div>
-                                <div className="mts-flex mts-items-center mts-transition-all mts-duration-200 mts-ease-in-out mts-mt-6 mts-mb-2 mts-border mts-border-black/10 mts-rounded-lg mts-bg-white mts-px-2 mts-w-full mts-h-[3.25rem] hover:mts-bg-zinc-100 focus-within:mts-border-primary-500">
-                                    <MdOutlineSearch className="mts-text-black mts-text-lg md:mts-opacity-50" />
+                                <div className="mts-flex mts-items-center mts-transition-all mts-duration-200 mts-ease-in-out mts-mt-6 mts-mb-2 mts-border mts-border-black/10 mts-rounded-lg mts-bg-white mts-px-3 mts-w-full mts-h-10 hover:mts-bg-zinc-100 focus-within:mts-border-primary-500">
+                                    <Search className="mts-text-zinc-500 mts-text-lg md:mts-opacity-50" />
                                     <input
-                                        className="mts-outline-none mts-bg-transparent mts-px-1 mts-w-full mts-h-full mts-text-black mts-text-base md:mts-text-lg"
+                                        className="mts-outline-none mts-bg-transparent mts-px-2 mts-w-full mts-h-full mts-text-black mts-text-sm md:mts-text-lg"
                                         type="text"
                                         placeholder={t('search')}
                                         data-testid="dialog-search-input"
@@ -335,7 +336,7 @@ const CardDialog: FC<CardDialogProps> = ({
                                     <div className="mts-flex mts-items-center mts-gap-5 mts-mt-3 mts-mb-2 mts-border-b mts-border-black/10 mts-px-3 mts-pb-2 mts-w-full mts-text-black mts-font-light mts-text-lg">
                                         <button
                                             className={clsx(
-                                                'mts-relative mts-transition-all mts-duration-300 mts-ease-in-out mts-bg-transparent mts-text-black mts-text-base',
+                                                'mts-relative mts-transition-all mts-duration-300 mts-ease-in-out mts-bg-transparent mts-text-black mts-text-sm',
                                                 activeTab === TABS.ALL &&
                                                     'mts-text-primary-500 mts-font-semibold'
                                             )}
@@ -358,7 +359,7 @@ const CardDialog: FC<CardDialogProps> = ({
                                         </button>
                                         <button
                                             className={clsx(
-                                                'mts-relative mts-transition-all mts-duration-300 mts-ease-in-out mts-bg-transparent mts-text-black mts-text-base',
+                                                'mts-relative mts-transition-all mts-duration-300 mts-ease-in-out mts-bg-transparent mts-text-black mts-text-sm',
                                                 activeTab === TABS.FAVORITES &&
                                                     'mts-text-primary-500 mts-font-semibold'
                                             )}
@@ -395,7 +396,7 @@ const CardDialog: FC<CardDialogProps> = ({
                                                 scrollableTarget="scroll-div"
                                                 loader={
                                                     <div className="mts-flex mts-justify-center mts-items-center mts-h-10 mts-text-[var(--text-black-color)] mts-text-[1.25rem]">
-                                                        <CgSpinnerTwo className="mts-animate-spin" />
+                                                        <CgSpinnerTwo className="mts-animate-spin mts-text-primary-500" />
                                                     </div>
                                                 }
                                                 endMessage={
@@ -453,32 +454,33 @@ const CardDialog: FC<CardDialogProps> = ({
                                         <>
                                             <div className="mts-flex mts-grow mts-flex-col mts-gap-2">
                                                 <div className="mts-flex mts-flex-col mts-justify-center mts-items-center mts-mt-1 mts-mb-1 mts-rounded-lg mts-bg-[var(--input-card-color)] mts-p-2 mts-text-[var(--text-black-color)]">
-                                                    <TiWarning className="mts-text-[#f59e00] mts-text-[1.875rem]" />
-                                                    <h1 className="mts-font-bold mts-text-base">
+                                                    <div className="mts-h-20 mts-w-20 mts-bg-zinc-100 mts-border-zinc-200 mts-border-[1px] mts-flex mts-items-center mts-justify-center   mts-rounded-full">
+                                                        <Warning className="mts-text-red-500 mts-text-4xl " />
+                                                    </div>
+                                                    <h1 className="mts-font-bold mts-text-lg mts-mt-6 ">
                                                         {t(
                                                             'trade_warning.trade_title'
                                                         )}
                                                     </h1>
-                                                    <p className="mts-px-5 mts-text-sm mts-text-center">
+                                                    <p className="mts-px-5 mts-text-sm mts-text-center mts-mt-6">
                                                         {t(
                                                             'trade_warning.trade_description'
                                                         )}
                                                     </p>
                                                 </div>
+                                                <hr className="mts-mt-6 mts-mb-4" />
                                                 {contractCommunity && (
                                                     <Token
                                                         asset={
                                                             contractCommunity
                                                         }
-                                                        onTokenSelect={
-                                                            onTokenSelect
-                                                        }
+                                                        onTokenSelect={() => {}}
                                                         type={type}
                                                     />
                                                 )}
                                             </div>
                                             <button
-                                                className="mts-flex mts-justify-center mts-items-center mts-rounded-lg mts-bg-[var(--primary-color)] mts-w-full mts-h-10 mts-text-[var(--text-black-color)] mts-text-sm"
+                                                className="mts-flex mts-justify-center mts-items-center mts-rounded-lg mts-w-full mts-h-11 mts-border-[1px] mts-border-primary-600  mts-text-white mts-text-sm mts-bg-primary-500"
                                                 onClick={() => {
                                                     addToken(
                                                         contractCommunity!
@@ -498,7 +500,7 @@ const CardDialog: FC<CardDialogProps> = ({
                             <div className="mts-flex mts-justify-center mts-items-center mts-cursor-pointer mts-pt-2 mts-text-sm md:mts-hidden">
                                 <button
                                     onClick={handleOnClose}
-                                    className="mts-flex mts-justify-center mts-items-center mts-transition-all mts-duration-300 mts-ease-in-out mts-rounded-lg mts-bg-[var(--secondary-color)] mts-w-full mts-h-12 mts-text-[var(--text-black-color)] mts-text-center active:mts-scale-95"
+                                    className="mts-flex mts-justify-center mts-items-center mts-transition-all mts-duration-300 mts-ease-in-out mts-rounded-lg mts-bg-white mts-border-zinc-200 mts-border-[1px] mts-w-full mts-h-12 mts-text-black mts-text-center active:mts-scale-95"
                                 >
                                     Close
                                 </button>
diff --git a/lib/components/SwapCard/SwapCard.tsx b/lib/components/SwapCard/SwapCard.tsx
index eab5be3..f6c9311 100644
--- a/lib/components/SwapCard/SwapCard.tsx
+++ b/lib/components/SwapCard/SwapCard.tsx
@@ -12,20 +12,22 @@ const SwapCard = () => {
 
     const isDisabled = options.lock_pay_token || options.lock_receive_token;
     return (
-        <div className="mts-flex mts-relative mts-flex-col mts-items-center mts-gap-3 mts-mt-3.5 mts-rounded-xl mts-bg-zinc-100 mts-p-3 mts-font-medium">
+        <div className="mts-flex mts-relative mts-flex-col mts-items-center  mts-mt-3.5 mts-rounded-xl mts-font-medium">
             <Card type="pay" />
-            <div className="mts-absolute mts-top-1/2 mts-bg-white mts-w-full mts-h-[3px] md:mts-h-[5px]"></div>
+
             {shouldShowChangeDirection && (
-                <button
-                    disabled={isDisabled}
-                    onClick={() => {
-                        changeDirection();
-                    }}
-                    className="mts-flex mts-relative mts-justify-center mts-items-center mts-z-1 mts-transition-all mts-duration-300 mts-ease mts-rounded-full mts-bg-primary-500 mts-py-3 mts-px-14 md:mts-px-15 mts-text-white mts-text-2xl active:mts-scale-95 disabled:mts-opacity-50 disabled:mts-cursor-not-allowed"
-                    data-testid="change-direction-button"
-                >
-                    <LuArrowDownUp />
-                </button>
+                <div className="mts-h-0">
+                    <button
+                        disabled={isDisabled}
+                        onClick={() => {
+                            changeDirection();
+                        }}
+                        className="mts-flex mts-justify-center mts-items-center mts-z-1 mts-transition-all mts-duration-300 mts-ease mts-rounded-md mts-bg-primary-500 mts-h-10 mts-w-10 mts-text-white mts-text-xl active:mts-scale-95 disabled:mts-opacity-50 disabled:mts-cursor-not-allowed mts-absolute -mts-translate-x-1/2 -mts-translate-y-1/2"
+                        data-testid="change-direction-button"
+                    >
+                        <LuArrowDownUp />
+                    </button>
+                </div>
             )}
             <Card type="receive" />
         </div>
diff --git a/lib/components/SwapCard/Token.tsx b/lib/components/SwapCard/Token.tsx
index c204b89..dbeaef7 100644
--- a/lib/components/SwapCard/Token.tsx
+++ b/lib/components/SwapCard/Token.tsx
@@ -3,7 +3,6 @@ import { useWalletStore } from '../../store/wallet.store';
 import { FC } from 'react';
 import formatNumber from '../../utils/formatNum';
 import './Token.scss';
-import { RiExternalLinkLine } from 'react-icons/ri';
 import { PiStarBold, PiStarFill } from 'react-icons/pi';
 import { TokenTon } from '../icons/TokenTon';
 import { TON_ADDR } from '../../constants';
@@ -11,6 +10,9 @@ import { toFixedDecimal } from '../../utils/toFixedDecimals';
 import { useFavoriteStore } from '../../store/favtorite.store';
 import clsx from 'clsx';
 import { useSwapStore } from '../../store/swap.store';
+import { cn } from '../../utils/cn';
+import Link from '../icons/Link';
+import { useTranslation } from 'react-i18next';
 
 type TokenProps = {
     asset: Asset;
@@ -19,6 +21,7 @@ type TokenProps = {
 };
 
 const Token: FC<TokenProps> = ({ asset, onTokenSelect, type }) => {
+    const { t } = useTranslation();
     const { balance } = useWalletStore();
     const { pay_token, receive_token } = useSwapStore();
     const { isFav, addToFav, removeFromFav } = useFavoriteStore();
@@ -41,22 +44,22 @@ const Token: FC<TokenProps> = ({ asset, onTokenSelect, type }) => {
               pay_token?.address === asset.address;
 
     return (
-        <div
+        <button
             onClick={isSelected ? undefined : () => onTokenSelect(asset)}
             className={clsx(
-                'mts-flex mts-items-center mts-cursor-pointer mts-mt-1 mts-rounded-lg mts-px-2 mts-w-full mts-h-12',
+                'mts-flex mts-items-center mts-cursor-pointer mts-mt-1 mts-rounded-lg mts-w-full mts-h-12',
                 isSelected && 'mts-opacity-50 mts-cursor-auto'
             )}
             data-testid={asset.address}
         >
-            <div className="mts-flex mts-flex-grow mts-items-center mts-gap-2">
+            <div className="mts-flex mts-flex-grow mts-items-center mts-justify-center mts-gap-2 mts-h-full">
                 <div
-                    className="mts-rounded-full !mts-bg-contain mts-w-11 mts-h-11"
+                    className="mts-rounded-full !mts-bg-contain mts-w-10 mts-h-10 mts-min-w-10 mts-min-h-10 mts-max-h-10 mts-max-w-10"
                     style={{ background: `url(${asset.image})` }}
                 ></div>
-                <div className="mts-flex-grow">
-                    <div className="mts-flex mts-justify-between mts-items-center mts-overflow-hidden mts-text-black mts-font-medium mts-text-base mts-truncate">
-                        <div className="mts-flex mts-items-center mts-gap-0.5 mts-text-base">
+                <div className="mts-flex-grow mts-h-full mts-justify-center mts-gap-1 mts-flex mts-flex-col">
+                    <div className="mts-flex mts-justify-between mts-items-center mts-overflow-hidden mts-text-black mts-font-medium mts-text-sm mts-truncate">
+                        <div className="mts-flex mts-items-center mts-gap-1  mts-font-medium   ">
                             {asset.symbol}{' '}
                             <span>
                                 <a
@@ -65,15 +68,22 @@ const Token: FC<TokenProps> = ({ asset, onTokenSelect, type }) => {
                                     target="_blank"
                                     className="mts-flex mts-items-center mts-opacity-50 mts-text-inherit mts-no-underline"
                                 >
-                                    <RiExternalLinkLine />
+                                    <Link className="mts-text-xs" />
                                 </a>
                             </span>
+                            {asset.warning && (
+                                <div className="mts-text-xs mts-bg-primary-100 mts-rounded-full mts-px-2 mts-text-primary-500 mts-border-primary-200 mts-border-[1px]">
+                                    {t('community')}
+                                </div>
+                            )}
                         </div>
                         <div>{tokenBalance}</div>
                     </div>
-                    <div className="mts-flex mts-justify-between mts-items-center mts-opacity-50 mts-text-black mts-text-xs">
+                    <div className="mts-flex mts-justify-between mts-items-center mts-opacity-50 mts-text-black mts-text-xs mts-gap-2 ">
                         <div className="mts-flex mts-items-center mts-gap-0.5">
-                            {asset.name}
+                            <span className="mts-break-all mts-line-clamp-1 mts-truncate mts-whitespace-pre-wrap">
+                                {asset.name}
+                            </span>
                             {asset.address !== TON_ADDR && (
                                 <span className="mts-flex mts-items-center mts-gap-0.5">
                                     | <TokenTon /> {asset.liquidity_text}
@@ -85,8 +95,8 @@ const Token: FC<TokenProps> = ({ asset, onTokenSelect, type }) => {
                 </div>
                 <div>
                     <div
-                        className={clsx(
-                            'mts-opacity-50 mts-transition-transform mts-duration-200 mts-ease-in-out mts-text-black mts-text-2xl',
+                        className={cn(
+                            'mts-opacity-20 mts-transition-transform mts-duration-200 mts-ease-in-out mts-text-black mts-text-2xl',
                             isTokenFav && 'mts-opacity-100 mts-text-primary-500'
                         )}
                     >
@@ -108,7 +118,7 @@ const Token: FC<TokenProps> = ({ asset, onTokenSelect, type }) => {
                     </div>
                 </div>
             </div>
-        </div>
+        </button>
     );
 };
 
diff --git a/lib/components/SwapDetails/SwapDetails.tsx b/lib/components/SwapDetails/SwapDetails.tsx
index 06178db..3bab5cc 100644
--- a/lib/components/SwapDetails/SwapDetails.tsx
+++ b/lib/components/SwapDetails/SwapDetails.tsx
@@ -18,7 +18,7 @@ const SwapDetails = () => {
     const [ref, { height }] = useMeasure();
     return (
         <motion.button
-            className="mts-flex mts-flex-col mts-items-center mts-mt-3 mts-rounded-lg mts-bg-zinc-100 mts-px-3 mts-w-full mts-min-h-12 mts-text-black"
+            className="mts-flex mts-flex-col mts-items-center mts-mt-3 mts-rounded-lg   mts-w-full mts-min-h-12 mts-text-black"
             onClick={() => {
                 setIsOpen((prev) => !prev);
             }}
@@ -60,16 +60,16 @@ const SwapDetails = () => {
                             height: height ?? 0,
                         }}
                         exit={{ opacity: 0, height: 0 }}
-                        className="mts-flex mts-flex-col mts-gap-1 mts-w-full mts-overflow-hidden"
+                        className="mts-flex mts-flex-col mts-gap-1 mts-w-full mts-overflow-hidden mts-bg-zinc-100  mts-rounded-lg mts-border-zinc-200 mts-border-[1px]"
                     >
                         <div
                             ref={ref}
-                            className="mts-flex mts-flex-col mts-gap-1 mts-p-1 mts-pb-4"
+                            className="mts-flex mts-flex-col mts-gap-1 mts-p-4 "
                         >
                             <SwapKeyValue
                                 keyText={t('slippage_tolerance')}
                                 value={
-                                    <div className="mts-rounded-md mts-bg-slippage-box-color mts-px-2 mts-py-1 mts-text-black">
+                                    <div className="mts-rounded-full mts-bg-zinc-200 mts-px-2 mts-py-1 mts-text-black">
                                         {slippage === 'auto' ? '1' : slippage}%{' '}
                                         {slippage === 'auto' ? t('auto') : ''}
                                     </div>
diff --git a/lib/components/SwapDetails/SwapKeyValue.tsx b/lib/components/SwapDetails/SwapKeyValue.tsx
index 6f1d021..7e63640 100644
--- a/lib/components/SwapDetails/SwapKeyValue.tsx
+++ b/lib/components/SwapDetails/SwapKeyValue.tsx
@@ -6,9 +6,9 @@ type SwapKeyValueProps = {
 
 const SwapKeyValue: FC<SwapKeyValueProps> = ({ keyText, value }) => {
     return (
-        <div className="mts-flex mts-justify-between mts-items-center mts-font-medium mts-text-sm mts-font-inter">
-            <div className="mts-opacity-60 mts-text-black">{keyText}</div>
-            <div className="mts-text-black">{value}</div>
+        <div className="mts-flex mts-justify-between mts-items-center mts-font-medium mts-text-xs mts-font-inter">
+            <div className=" mts-text-primary-900">{keyText}</div>
+            <div className="mts-text-primary-900/70">{value}</div>
         </div>
     );
 };
diff --git a/lib/components/WalletProfile/WalletProfile.tsx b/lib/components/WalletProfile/WalletProfile.tsx
index 7a19e67..931da48 100644
--- a/lib/components/WalletProfile/WalletProfile.tsx
+++ b/lib/components/WalletProfile/WalletProfile.tsx
@@ -11,6 +11,8 @@ import { AnimatePresence, motion } from 'framer-motion';
 import Wallet from '../Header/Wallet';
 import { useOnClickOutside } from 'usehooks-ts';
 import { popOverVariationsKeyValue } from '../../constants';
+import { useTranslation } from 'react-i18next';
+import { cn } from '../../utils/cn';
 export type WalletProfileProps = {
     tonConnectInstance: TonConnectUI;
     position?: keyof typeof popOverVariationsKeyValue;
@@ -29,7 +31,7 @@ export const WalletProfile: FC<WalletProfileProps> = ({
     position = 'top-right',
 }) => {
     const { setWallet, disconnect, wallet } = useWalletStore();
-
+    const { t } = useTranslation();
     const [isOpen, setIsOpen] = useState(false);
     const ref = useRef(null);
     const buttonRef = useRef(null);
@@ -68,13 +70,16 @@ export const WalletProfile: FC<WalletProfileProps> = ({
     return (
         <div className="mts-relative">
             <div
-                className={`mts-cursor-pointer mts-border mts-rounded-full mts-bg-primary mts-px-3 mts-py-2 mts-text-white mts-font-medium mts-text-sm mts-select-none ${wallet ? 'mts-bg-zinc-100 mts-text-black' : ''}`}
+                className={cn(
+                    `mts-cursor-pointer mts-border mts-rounded-full mts-bg-primary-500 mts-px-3 mts-py-2 mts-text-white mts-font-medium mts-text-sm mts-select-none`,
+                    wallet && 'mts-bg-zinc-100 mts-text-black'
+                )}
                 onClick={wallet ? handleButtonClick : handleConnectWallet}
                 ref={buttonRef}
             >
                 {wallet
                     ? shortAddress(wallet.account.address, 'mainnet', 4)
-                    : 'Connect Wallet'}
+                    : t('button_text.connect_wallet')}
             </div>
 
             <AnimatePresence>
@@ -85,9 +90,9 @@ export const WalletProfile: FC<WalletProfileProps> = ({
                         animate={popOverAnimationVariation.animate}
                         transition={{ ease: 'easeOut', duration: 0.15 }}
                         ref={ref}
-                        className="wallet-popover"
+                        className="mts-absolute mts-shadow-lg mts-rounded-xl mts-bg-modal-background-color mts-p-1 mts-min-w-[15.625rem] mts-w-full  mts-h-fit mts-text-text-black-color"
                     >
-                        <Wallet />
+                        <Wallet isWalletPopover />
                     </motion.div>
                 )}
             </AnimatePresence>
diff --git a/lib/components/icons/Close.tsx b/lib/components/icons/Close.tsx
new file mode 100644
index 0000000..420bdb7
--- /dev/null
+++ b/lib/components/icons/Close.tsx
@@ -0,0 +1,27 @@
+import React, { FC } from 'react';
+
+type Props = {
+    className?: string;
+};
+
+const Close: FC<Props> = ({ className }) => {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em"
+            className={className}
+            viewBox="0 0 24 24"
+        >
+            <g fill="none" stroke="currentColor" strokeWidth={1.5}>
+                <path
+                    d="M2 12c0-4.714 0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12Z"
+                    opacity={0.5}
+                ></path>
+                <path strokeLinecap="round" d="m14.5 9.5l-5 5m0-5l5 5"></path>
+            </g>
+        </svg>
+    );
+};
+
+export default Close;
diff --git a/lib/components/icons/Copy.tsx b/lib/components/icons/Copy.tsx
new file mode 100644
index 0000000..3cc00ac
--- /dev/null
+++ b/lib/components/icons/Copy.tsx
@@ -0,0 +1,27 @@
+import { FC } from 'react';
+
+type Props = {
+    className?: string;
+};
+
+const Copy: FC<Props> = ({ className }) => {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em"
+            className={className}
+            viewBox="0 0 24 24"
+        >
+            <g fill="none" stroke="currentColor" strokeWidth={1.5}>
+                <path d="M6 11c0-2.828 0-4.243.879-5.121C7.757 5 9.172 5 12 5h3c2.828 0 4.243 0 5.121.879C21 6.757 21 8.172 21 11v5c0 2.828 0 4.243-.879 5.121C19.243 22 17.828 22 15 22h-3c-2.828 0-4.243 0-5.121-.879C6 20.243 6 18.828 6 16z"></path>
+                <path
+                    d="M6 19a3 3 0 0 1-3-3v-6c0-3.771 0-5.657 1.172-6.828S7.229 2 11 2h4a3 3 0 0 1 3 3"
+                    opacity={0.5}
+                ></path>
+            </g>
+        </svg>
+    );
+};
+
+export default Copy;
diff --git a/lib/components/icons/Link.tsx b/lib/components/icons/Link.tsx
new file mode 100644
index 0000000..f3db6ea
--- /dev/null
+++ b/lib/components/icons/Link.tsx
@@ -0,0 +1,35 @@
+import { FC } from 'react';
+
+type Props = {
+    className?: string;
+};
+
+const Link: FC<Props> = ({ className }) => {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em"
+            className={className}
+            viewBox="0 0 24 24"
+        >
+            <g
+                fill="none"
+                stroke="currentColor"
+                strokeLinecap="round"
+                strokeWidth={1.5}
+            >
+                <path
+                    strokeLinejoin="round"
+                    d="m13 11l9-9m0 0h-5.344M22 2v5.344"
+                ></path>
+                <path
+                    d="M22 12c0 4.714 0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12s0-7.071 1.464-8.536C4.93 2 7.286 2 12 2"
+                    opacity={0.5}
+                ></path>
+            </g>
+        </svg>
+    );
+};
+
+export default Link;
diff --git a/lib/components/icons/Menu.tsx b/lib/components/icons/Menu.tsx
new file mode 100644
index 0000000..87b0c02
--- /dev/null
+++ b/lib/components/icons/Menu.tsx
@@ -0,0 +1,25 @@
+import { FC } from 'react';
+
+type Props = {
+    className?: string;
+};
+
+const Menu: FC<Props> = ({ className }) => {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width={'1em'}
+            height={'1em'}
+            className={className}
+            viewBox="0 0 24 24"
+        >
+            <g fill="none" stroke="currentColor" strokeWidth={1.5}>
+                <circle cx={5} cy={12} r={2}></circle>
+                <circle cx={12} cy={12} r={2} opacity={0.5}></circle>
+                <circle cx={19} cy={12} r={2}></circle>
+            </g>
+        </svg>
+    );
+};
+
+export default Menu;
diff --git a/lib/components/icons/Refresh.tsx b/lib/components/icons/Refresh.tsx
new file mode 100644
index 0000000..3afc08d
--- /dev/null
+++ b/lib/components/icons/Refresh.tsx
@@ -0,0 +1,28 @@
+import { FC } from 'react';
+
+type Props = {
+    className?: string;
+};
+const Refresh: FC<Props> = ({ className }) => {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width={'1em'}
+            height={'1em'}
+            className={className}
+            viewBox="0 0 24 24"
+        >
+            <path
+                fill="currentColor"
+                d="M12.079 3v-.75zm-8.4 8.333h-.75zm0 1.667l-.527.532a.75.75 0 0 0 1.056 0zm2.209-1.134A.75.75 0 1 0 4.83 10.8zM2.528 10.8a.75.75 0 0 0-1.056 1.065zm16.088-3.408a.75.75 0 1 0 1.277-.786zM12.079 2.25c-5.047 0-9.15 4.061-9.15 9.083h1.5c0-4.182 3.42-7.583 7.65-7.583zm-9.15 9.083V13h1.5v-1.667zm1.28 2.2l1.679-1.667L4.83 10.8l-1.68 1.667zm0-1.065L2.528 10.8l-1.057 1.065l1.68 1.666zm15.684-5.86A9.16 9.16 0 0 0 12.08 2.25v1.5a7.66 7.66 0 0 1 6.537 3.643z"
+            ></path>
+            <path
+                fill="currentColor"
+                d="M11.883 21v.75zm8.43-8.333h.75zm0-1.667l.528-.533a.75.75 0 0 0-1.055 0zM18.1 12.133a.75.75 0 1 0 1.055 1.067zm3.373 1.067a.75.75 0 1 0 1.054-1.067zM5.318 16.606a.75.75 0 1 0-1.277.788zm6.565 5.144c5.062 0 9.18-4.058 9.18-9.083h-1.5c0 4.18-3.43 7.583-7.68 7.583zm9.18-9.083V11h-1.5v1.667zm-1.277-2.2L18.1 12.133l1.055 1.067l1.686-1.667zm0 1.066l1.687 1.667l1.054-1.067l-1.686-1.666zm-15.745 5.86a9.2 9.2 0 0 0 7.842 4.357v-1.5a7.7 7.7 0 0 1-6.565-3.644z"
+                opacity={0.5}
+            ></path>
+        </svg>
+    );
+};
+
+export default Refresh;
diff --git a/lib/components/icons/Search.tsx b/lib/components/icons/Search.tsx
new file mode 100644
index 0000000..96aec9f
--- /dev/null
+++ b/lib/components/icons/Search.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+type Props = {
+    className?: string;
+};
+
+const Search = ({ className }: Props) => {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em"
+            className={className}
+            viewBox="0 0 24 24"
+        >
+            <g fill="none" stroke="currentColor" strokeWidth={1.5}>
+                <circle cx={11.5} cy={11.5} r={9.5}></circle>
+                <path strokeLinecap="round" d="M18.5 18.5L22 22"></path>
+            </g>
+        </svg>
+    );
+};
+
+export default Search;
diff --git a/lib/components/icons/Spinner.tsx b/lib/components/icons/Spinner.tsx
new file mode 100644
index 0000000..4c1f0ce
--- /dev/null
+++ b/lib/components/icons/Spinner.tsx
@@ -0,0 +1,27 @@
+type Props = {
+    className?: string;
+};
+
+const Spinner = ({ className }: Props) => {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em"
+            className={className}
+            viewBox="0 0 24 24"
+        >
+            <g fill="currentColor">
+                <path
+                    fillRule="evenodd"
+                    d="M12 19a7 7 0 1 0 0-14a7 7 0 0 0 0 14m0 3c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10"
+                    clipRule="evenodd"
+                    opacity={0.2}
+                ></path>
+                <path d="M2 12C2 6.477 6.477 2 12 2v3a7 7 0 0 0-7 7z"></path>
+            </g>
+        </svg>
+    );
+};
+
+export default Spinner;
diff --git a/lib/components/icons/Warning.tsx b/lib/components/icons/Warning.tsx
new file mode 100644
index 0000000..05f5b71
--- /dev/null
+++ b/lib/components/icons/Warning.tsx
@@ -0,0 +1,29 @@
+import { FC } from 'react';
+
+type WarningProps = {
+    className?: string;
+};
+
+const Warning: FC<WarningProps> = ({ className }) => {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em"
+            className={className}
+            viewBox="0 0 24 24"
+        >
+            <g fill="none">
+                <path
+                    stroke="currentColor"
+                    strokeLinecap="round"
+                    strokeWidth={1.5}
+                    d="M6.31 9C8.594 5 9.967 3 12 3c2.31 0 3.77 2.587 6.688 7.762l.364.644c2.425 4.3 3.638 6.45 2.542 8.022S17.786 21 12.364 21h-.728c-5.422 0-8.134 0-9.23-1.572c-.951-1.364-.163-3.165 1.648-6.428M12 8v5"
+                ></path>
+                <circle cx={12} cy={16} r={1} fill="currentColor"></circle>
+            </g>
+        </svg>
+    );
+};
+
+export default Warning;
diff --git a/lib/global.css b/lib/global.css
index 71809f3..5a6b172 100644
--- a/lib/global.css
+++ b/lib/global.css
@@ -1,4 +1,5 @@
-@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
+/* @import url('https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap'); */
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
 
 @tailwind base;
 @tailwind components;
@@ -85,6 +86,12 @@
     --skeleton-shine-color: #585959;
 }
 
+* {
+    font-family: 'IBM Plex Mono', sans-serif !important;
+    /* font-family: 'Fira Mono', sans-serif !important; */
+    -webkit-tap-highlight-color: transparent;
+}
+
 input[type='number']::-webkit-inner-spin-button,
 input[type='number']::-webkit-outer-spin-button {
     -webkit-appearance: none;
@@ -159,7 +166,7 @@ input[type='number']::-webkit-outer-spin-button {
     transition: color 0.25s ease-in-out;
     width: 100%;
     height: auto;
-    color: rgb(108, 108, 108);
+    color: #919191;
 }
 
 .refresh_icon {
@@ -169,7 +176,7 @@ input[type='number']::-webkit-outer-spin-button {
     transition: color 0.25s ease-in-out;
     width: 100%;
     height: auto;
-    color: #6c6c6c;
+    color: #919191;
 }
 
 .icon_overlay.overlay {

From 7cfb4b6286c17161d3310db448dccd887bda910d Mon Sep 17 00:00:00 2001
From: HoseinBaseri <ho3ein8280@gmail.com>
Date: Wed, 22 Jan 2025 13:47:54 +0330
Subject: [PATCH 05/12] feat: enhance dark mode support and update UI styling
 across components

---
 lib/components/Header/Header.tsx              |   4 +-
 lib/components/Header/SettingPopover.tsx      |  14 +-
 lib/components/Header/SlippageSetting.tsx     | 127 ++++++++----------
 lib/components/Header/TokensSettings.tsx      |  10 +-
 lib/components/Header/Wallet.tsx              |  18 +--
 lib/components/Swap/Swap.scss                 |  89 ------------
 lib/components/Swap/Swap.stories.tsx          |   3 +-
 lib/components/Swap/Swap.tsx                  |  18 ++-
 .../SwapButton/ConfirmationModal.tsx          |  10 +-
 lib/components/SwapButton/Done.tsx            |  10 +-
 lib/components/SwapButton/ErrorTonConnect.tsx |   4 +-
 lib/components/SwapButton/Inprogress.tsx      |  10 +-
 lib/components/SwapButton/SwapButton.tsx      |   4 +-
 .../SwapButton/WaitingForWallet.tsx           |   6 +-
 lib/components/SwapCard/Card.tsx              |  10 +-
 lib/components/SwapCard/CardButton.tsx        |   2 +-
 lib/components/SwapCard/CardDialog.tsx        |  22 +--
 lib/components/SwapCard/FavList.tsx           |   6 +-
 lib/components/SwapCard/Token.tsx             |  13 +-
 lib/components/SwapDetails/SwapDetails.tsx    |   6 +-
 lib/components/SwapDetails/SwapKeyValue.tsx   |  10 +-
 lib/i18n/langs/en.json                        |   2 +-
 lib/store/options.store.ts                    |   1 +
 23 files changed, 161 insertions(+), 238 deletions(-)

diff --git a/lib/components/Header/Header.tsx b/lib/components/Header/Header.tsx
index 2967662..9f9c929 100644
--- a/lib/components/Header/Header.tsx
+++ b/lib/components/Header/Header.tsx
@@ -12,7 +12,7 @@ const Header = () => {
         useSwapStore();
 
     return (
-        <div className="mts-flex mts-justify-between mts-items-center mts-px-1 mts-text-primary-950 mts-font-bold mts-text-lg">
+        <div className="mts-flex mts-justify-between mts-items-center mts-px-1 mts-text-primary-950 dark:mts-text-white mts-font-bold mts-text-lg md:mts-text-xl">
             <div data-testid="swap-header-title">{t('swap')}</div>
             <div className="mts-flex mts-items-center mts-gap-2">
                 {options.ui_preferences?.show_refresh && (
@@ -28,7 +28,7 @@ const Header = () => {
                 )}
                 {options.ui_preferences?.show_settings && (
                     <SettingPopover>
-                        <Menu className="mts-text-primary-950 mts-text-2xl mts-rotate-90" />
+                        <Menu className="mts-text-primary-950 dark:mts-text-white mts-text-2xl mts-rotate-90" />
                     </SettingPopover>
                 )}
             </div>
diff --git a/lib/components/Header/SettingPopover.tsx b/lib/components/Header/SettingPopover.tsx
index 6445de3..df1791d 100644
--- a/lib/components/Header/SettingPopover.tsx
+++ b/lib/components/Header/SettingPopover.tsx
@@ -10,7 +10,7 @@ import { useOptionsStore } from '../../store/options.store';
 import { useTranslation } from 'react-i18next';
 import { useMediaQuery } from '@uidotdev/usehooks';
 import { modalAnimationDesktop, modalAnimationMobile } from '../../constants';
-import { IoClose } from 'react-icons/io5';
+import Close from '../icons/Close';
 
 export type SettingPopoverProps = PropsWithChildren & {};
 
@@ -65,16 +65,18 @@ const SettingPopover: FC<SettingPopoverProps> = ({ children }) => {
                             exit={modalAnimation.exit}
                             transition={{ ease: 'easeOut', duration: 0.15 }}
                             ref={ref}
-                            className="mts-flex mts-fixed mts-bottom-0 mts-left-0 mts-flex-col mts-gap-3 mts-shadow-sm mts-rounded-t-2xl mts-bg-zinc-100 mts-p-4 mts-w-full mts-min-w-60 mts-h-fit mts-text-primary-950 rtl:mts-right-auto rtl:left-0 md:mts-min-w-80 md:mts-max-w-[32.5rem] md:mts-rounded-2xl"
+                            className="mts-flex mts-fixed mts-bottom-0 mts-left-0 mts-flex-col mts-gap-3 mts-shadow-sm mts-rounded-t-2xl mts-bg-zinc-100 dark:mts-bg-zinc-900 mts-p-4 mts-w-full mts-min-w-60 mts-h-fit mts-text-primary-950 rtl:mts-right-auto rtl:left-0 md:mts-min-w-80 md:mts-max-w-[32.5rem] md:mts-rounded-2xl"
                             data-testid="setting-popover"
                         >
-                            <div className="mts-flex mts-items-center mts-justify-between">
-                                <div>{t('setting')}</div>
+                            <div className="mts-flex mts-items-center mts-justify-between dark:mts-text-white">
+                                <div className="mts-text-lg">
+                                    {t('setting')}
+                                </div>
                                 <button
                                     onClick={handleCloseSetting}
-                                    className="mts-text-primary-950"
+                                    className="mts-text-primary-950 dark:mts-text-white"
                                 >
-                                    <IoClose />
+                                    <Close />
                                 </button>
                             </div>
 
diff --git a/lib/components/Header/SlippageSetting.tsx b/lib/components/Header/SlippageSetting.tsx
index bfd678d..a1cebcd 100644
--- a/lib/components/Header/SlippageSetting.tsx
+++ b/lib/components/Header/SlippageSetting.tsx
@@ -1,5 +1,4 @@
 import { ChangeEvent, useState } from 'react';
-import { AnimatePresence, motion } from 'framer-motion';
 import { useSwapStore } from '../../store/swap.store';
 import './SlippageSetting.scss';
 import { useTranslation } from 'react-i18next';
@@ -51,85 +50,77 @@ const SlippageSetting = () => {
 
     return (
         <div
-            className="mts-flex mts-flex-col gap-1 md:mts-gap-2 md:mts-text-sm"
+            className="mts-flex mts-flex-col mts-gap-1 md:mts-gap-4 "
             data-testid="slippage-setting"
         >
             <button className="mts-flex  mts-justify-between mts-w-full mts-text-black ">
-                <div className="mts-text-lg mts-text-zinc-600">
+                <div className="mts-text-lg mts-text-zinc-600 dark:mts-text-zinc-200">
                     {t('max_slippage')}
                 </div>
                 <div
-                    className="mts-flex mts-justify-center mts-items-center mts-text-sm mts-text-zinc-600"
+                    className="mts-flex mts-justify-center mts-items-center mts-text-sm  mts-text-zinc-600 dark:mts-text-zinc-200"
                     data-testid="slippage-indicator"
                 >
                     {slippage === 'auto' ? t('auto') : `${slippage}%`}{' '}
                 </div>
             </button>
-            <AnimatePresence>
-                <motion.div
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1 }}
-                    exit={{ opacity: 0 }}
-                    className="mts-grid mts-grid-cols-4 mts-justify-around mts-gap-x-2 mts-w-full mts-text-sm"
+            <div className="mts-grid mts-grid-cols-4 mts-justify-around mts-gap-x-2 mts-w-full mts-text-sm md:mts-text-base ">
+                <div
+                    onClick={handleOnAutoClick}
+                    className={cn(
+                        `mts-flex mts-relative mts-justify-center mts-items-center mts-transition-all mts-duration-300 mts-cursor-pointer mts-m-[0.125rem] mts-border-[1px] mts-border-transparent mts-rounded-lg mts-bg-white dark:mts-bg-zinc-800 dark:mts-text-white mts-p-1 mts-h-12 md:mts-h-12 md:mts-m-1`,
+                        slippage === 'auto'
+                            ? 'mts-border-primary-500'
+                            : 'mts-border-zinc-200 dark:mts-border-zinc-700'
+                    )}
+                    data-testid="slippage-setting-auto"
+                >
+                    {t('auto')}
+                </div>
+                <div
+                    onClick={() => handleOnPercentClick(2)}
+                    className={cn(
+                        `mts-flex mts-relative mts-justify-center mts-items-center mts-transition-all mts-duration-300 mts-cursor-pointer mts-m-[0.125rem] mts-border-[1px] mts-border-transparent mts-rounded-lg mts-bg-white dark:mts-bg-zinc-800 dark:mts-text-white mts-p-1 mts-h-12 md:mts-h-12`,
+                        slippage === 2
+                            ? 'mts-border-primary-500'
+                            : 'mts-border-zinc-200 dark:mts-border-zinc-700'
+                    )}
+                    data-testid="slippage-setting-2"
                 >
-                    <div
-                        onClick={handleOnAutoClick}
-                        className={cn(
-                            `mts-flex mts-relative mts-justify-center mts-items-center mts-transition-all mts-duration-300 mts-cursor-pointer mts-m-[0.125rem] mts-border-[1px] mts-border-transparent mts-rounded-lg mts-bg-white mts-p-1 mts-h-12 md:mts-h-10 md:mts-m-1`,
-                            slippage === 'auto'
-                                ? 'mts-border-primary-500'
-                                : 'mts-border-zinc-200'
-                        )}
-                        data-testid="slippage-setting-auto"
-                    >
-                        {t('auto')}
-                    </div>
-                    <div
-                        onClick={() => handleOnPercentClick(2)}
-                        className={cn(
-                            `mts-flex mts-relative mts-justify-center mts-items-center mts-transition-all mts-duration-300 mts-cursor-pointer mts-m-[0.125rem] mts-border-[1px] mts-border-transparent mts-rounded-lg mts-bg-white mts-p-1 mts-h-12 md:mts-h-10`,
-                            slippage === 2
-                                ? 'mts-border-primary-500'
-                                : 'mts-border-zinc-200'
-                        )}
-                        data-testid="slippage-setting-2"
-                    >
-                        2%
-                    </div>
-                    <div
-                        onClick={() => handleOnPercentClick(5)}
-                        className={cn(
-                            `mts-flex mts-relative mts-justify-center mts-items-center mts-transition-all mts-duration-300 mts-cursor-pointer mts-m-[0.125rem] mts-border-[1px] mts-border-transparent mts-rounded-lg mts-bg-white mts-p-1 mts-h-12 md:mts-h-10`,
-                            slippage === 5
-                                ? 'mts-border-primary-500'
-                                : 'mts-border-zinc-200'
-                        )}
-                        data-testid="slippage-setting-5"
-                    >
-                        5%
-                    </div>
-                    <div
-                        className={cn(
-                            `mts-flex mts-justify-between mts-items-center mts-gap-1 mts-relative mts-transition-all mts-duration-300 mts-cursor-pointer mts-m-[0.125rem] mts-border-[1px] mts-border-transparent mts-rounded-lg mts-bg-white mts-h-12 md:mts-h-10`,
-                            ['auto', 2, 5].includes(slippage)
-                                ? 'mts-border-zinc-200'
-                                : 'mts-border-primary-500'
-                        )}
-                    >
-                        <input
-                            value={userInput}
-                            onChange={handleSlippageChange}
-                            data-testid="slippage-setting-input"
-                            type="text"
-                            dir="rtl"
-                            placeholder="1"
-                        />
-                        <span className="mts-text-xs md:text-sm mts-pr-1">
-                            %
-                        </span>
-                    </div>
-                </motion.div>
-            </AnimatePresence>
+                    2%
+                </div>
+                <div
+                    onClick={() => handleOnPercentClick(5)}
+                    className={cn(
+                        `mts-flex mts-relative mts-justify-center mts-items-center mts-transition-all mts-duration-300 mts-cursor-pointer mts-m-[0.125rem] mts-border-[1px] mts-border-transparent mts-rounded-lg mts-bg-white dark:mts-bg-zinc-800 dark:mts-text-white mts-p-1 mts-h-12 md:mts-h-12`,
+                        slippage === 5
+                            ? 'mts-border-primary-500'
+                            : 'mts-border-zinc-200 dark:mts-border-zinc-700'
+                    )}
+                    data-testid="slippage-setting-5"
+                >
+                    5%
+                </div>
+                <div
+                    className={cn(
+                        `mts-flex mts-justify-between mts-items-center mts-gap-1 mts-relative mts-transition-all mts-duration-300 mts-cursor-pointer mts-m-[0.125rem] mts-border-[1px] mts-border-transparent mts-rounded-lg mts-bg-white dark:mts-bg-zinc-800 dark:mts-text-white mts-h-12 md:mts-h-12`,
+                        ['auto', 2, 5].includes(slippage)
+                            ? 'mts-border-zinc-200 dark:mts-border-zinc-700'
+                            : 'mts-border-primary-500'
+                    )}
+                >
+                    <input
+                        value={userInput}
+                        onChange={handleSlippageChange}
+                        data-testid="slippage-setting-input"
+                        type="text"
+                        dir="rtl"
+                        placeholder="1"
+                        className="mts-w-full mts-bg-transparent mts-outline-none"
+                    />
+                    <span className="mts-text-xs md:text-sm mts-pr-1">%</span>
+                </div>
+            </div>
         </div>
     );
 };
diff --git a/lib/components/Header/TokensSettings.tsx b/lib/components/Header/TokensSettings.tsx
index 2c80136..f49ca05 100644
--- a/lib/components/Header/TokensSettings.tsx
+++ b/lib/components/Header/TokensSettings.tsx
@@ -7,15 +7,17 @@ const TokensSettings = () => {
     const { communityTokens, setCommunityTokens } = useSwapStore();
     return (
         <div className="mts-flex mts-justify-between mts-items-center mts-px-1 mts-text-xs md:mts-text-sm">
-            <div className="mts-text-zinc-600 mts-text-lg ">
+            <div className="mts-text-zinc-600 mts-text-lg dark:mts-text-zinc-200">
                 <span>{t('community_tokens')}</span>
             </div>
             <div>
                 <button
                     className={cn(
-                        'mts-flex mts-relative mts-justify-start mts-items-center mts-transition-all mts-duration-300 mts-rounded-full mts-bg-zinc-100 mts-p-1 mts-w-12 mts-h-6 mts-shadow-[0px_0px_0px_4px_rgb(var(--mts-primary-100))]',
+                        'mts-flex mts-relative mts-justify-start mts-items-center mts-transition-all mts-duration-300 mts-rounded-full mts-bg-zinc-100 mts-p-1 mts-w-12 mts-h-6 mts-shadow-[0px_0px_0px_4px_rgb(var(--mts-primary-100))] dark:mts-bg-zinc-900 dark:mts-shadow-[0px_0px_0px_4px_rgb(var(--mts-primary-800))]',
 
-                        communityTokens ? 'mts-bg-primary-500' : ''
+                        communityTokens
+                            ? 'mts-bg-primary-500 dark:mts-bg-primary-500'
+                            : ''
                     )}
                     onClick={() => setCommunityTokens(!communityTokens)}
                     data-testid="community-token-setting"
@@ -24,7 +26,7 @@ const TokensSettings = () => {
                         className={cn(
                             'mts-absolute mts-transition-all mts-duration-300 mts-ease mts-rounded-full mts-w-4 mts-h-4',
                             communityTokens
-                                ? 'mts-left-7 mts-bg-white'
+                                ? 'mts-left-7 mts-bg-white dark:mts-bg-zinc-800'
                                 : 'mts-left-1 mts-bg-primary-500'
                         )}
                     ></div>
diff --git a/lib/components/Header/Wallet.tsx b/lib/components/Header/Wallet.tsx
index 7dbcebc..2bdb0b1 100644
--- a/lib/components/Header/Wallet.tsx
+++ b/lib/components/Header/Wallet.tsx
@@ -53,28 +53,30 @@ const Wallet: FC<WalletProps> = ({ isWalletPopover }) => {
             <div
                 className={cn(
                     'mts-flex mts-flex-col mts-gap-3 mts-w-full',
-                    isWalletPopover && 'mts-px-2 mts-pt-2 mts-pb-2 '
+                    isWalletPopover ? 'mts-px-2 mts-pt-2 mts-pb-2' : 'mts-mt-4'
                 )}
             >
                 <div
                     className={cn(
-                        'mts-rounded-2xl mts-p-4 mts-border-zinc-200 mts-bg-white mts-border-[1px]',
+                        'mts-rounded-2xl mts-p-4 mts-border-zinc-200 dark:mts-bg-zinc-800 dark:mts-border-zinc-700 mts-bg-white dark:mts-text-white mts-border-[1px]',
                         isWalletPopover && 'mts-border-none mts-p-0'
                     )}
                 >
-                    <p className="mts-opacity-75 mts-text-sm">{t('account')}</p>
+                    <p className="mts-opacity-75 mts-font-normal mts-text-[12px]">
+                        {t('account')}
+                    </p>
                     <div className="mts-flex mts-flex-col">
                         <p className="mts-mt-3 mts-text-lg mts-font-medium">
                             {t('balance')}
                         </p>
-                        <div className="mts-mt-2 mts-mb-1  mts-font-black mts-text-3xl">
+                        <div className="mts-mt-2 mts-mb-1 mts-font-black mts-text-xl md:mts-text-3xl">
                             {TON_BALANCE}
                             <span className="mts-text-primary-500">
                                 {t('ton')}
                             </span>
                         </div>
                         <div className="mts-flex mts-items-center mts-gap-1">
-                            <div className="mts-flex mts-opacity-75 mts-rounded mts-white mts-border-[1px] mts-border-zinc-200 mts-px-2 mts-py-1 mts-w-fit mts-text-sm mts-h-10  mts-items-center">
+                            <div className="mts-flex mts-opacity-75 mts-rounded-lg mts-white mts-border-[1px] mts-border-zinc-200 mts-px-2 mts-py-1 mts-w-fit mts-text-sm mts-font-normal mts-h-10  mts-items-center dark:mts-bg-zinc-900 dark:mts-border-zinc-700">
                                 {shortAddress(
                                     wallet.account.address,
                                     'mainnet',
@@ -82,7 +84,7 @@ const Wallet: FC<WalletProps> = ({ isWalletPopover }) => {
                                 )}
                             </div>
                             <button
-                                className="mts-flex mts-justify-center mts-items-center mts-opacity-75 mts-cursor-pointer mts-rounded-md mts-text-white    mts-text-xs disabled:mts-opacity-50 disabled:mts-cursor-not-allowed mts-h-10 mts-w-10 mts-bg-primary-900"
+                                className="mts-flex mts-justify-center mts-items-center mts-opacity-75 mts-cursor-pointer mts-rounded-md mts-text-white    mts-text-xs disabled:mts-opacity-50 disabled:mts-cursor-not-allowed mts-h-10 mts-w-10 mts-bg-primary-900 dark:mts-bg-primary-700"
                                 disabled={copied}
                                 onClick={() =>
                                     copyToClipboard(wallet.account.address)
@@ -95,7 +97,7 @@ const Wallet: FC<WalletProps> = ({ isWalletPopover }) => {
                                 )}
                             </button>
                             <a
-                                className="mts-flex mts-justify-center mts-items-center mts-opacity-75 mts-cursor-pointer mts-rounded-md mts-text-white  mts-text-xs mts-h-10 mts-w-10 mts-bg-primary-900"
+                                className="mts-flex mts-justify-center mts-items-center mts-opacity-75 mts-cursor-pointer mts-rounded-md mts-text-white  mts-text-xs mts-h-10 mts-w-10 mts-bg-primary-900 dark:mts-bg-primary-700"
                                 target="_blank"
                                 href={`https://tonviewer.com/${wallet.account.address}`}
                             >
@@ -105,7 +107,7 @@ const Wallet: FC<WalletProps> = ({ isWalletPopover }) => {
                     </div>
                 </div>
                 <button
-                    className="mts-flex mts-justify-center mts-items-center mts-transition-all mts-duration-300 mts-ease-in-out mts-cursor-pointer  mts-bg-primary-500 mts-h-10 mts-text-white mts-border-[1px] mts-border-primary-600 mts-rounded-lg mts-text-sm "
+                    className="mts-flex mts-justify-center mts-items-center mts-transition-all mts-duration-300 mts-ease-in-out mts-cursor-pointer  mts-bg-primary-500 mts-h-11 md:mts-h-12 mts-text-white mts-border-[1px] mts-border-primary-600 mts-rounded-lg mts-text-sm "
                     onClick={handleDisconnect}
                 >
                     {t('disconnect_wallet')}
diff --git a/lib/components/Swap/Swap.scss b/lib/components/Swap/Swap.scss
index 417179e..bbe9311 100644
--- a/lib/components/Swap/Swap.scss
+++ b/lib/components/Swap/Swap.scss
@@ -1,92 +1,3 @@
-:root {
-    --font-size-xxs: 0.625rem;
-    --font-size-xs: 0.75rem;
-    --font-size-sm: 0.875rem;
-    --font-size-base: 1rem;
-    --font-size-lg: 1.125rem;
-    --font-size-xl: 1.25rem;
-    --font-size-2xl: 1.5rem;
-    --font-size-3xl: 1.875rem;
-    --font-size-4xl: 2.25rem;
-    --font-size-5xl: 3rem;
-    --font-size-6xl: 4rem;
-    --font-size-7xl: 5rem;
-    --font-size-8xl: 6rem;
-    --font-size-9xl: 7rem;
-    --font-size-10xl: 8rem;
-}
-
-.mytonswap-app {
-    input {
-        outline: none;
-        border: none;
-        background: none;
-        width: 100%;
-    }
-
-    .animate-spin {
-        animation: spin 1s linear infinite;
-        color: var(--primary-color);
-    }
-
-    .animate-loading {
-        animation: spin 1s linear infinite;
-    }
-
-    @keyframes spin {
-        0% {
-            transform: rotate(0deg);
-        }
-        100% {
-            transform: rotate(360deg);
-        }
-    }
-    .line-clamp-1 {
-        display: -webkit-box;
-        overflow: hidden;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 1;
-        line-clamp: 1;
-    }
-    .container {
-        // border-width: 1px;
-        // border-style: solid;
-        // border-color: var(--swap-container-border-color);
-        // border-radius: 1rem;
-        // background: var(--swap-container-background-color);
-        padding: 0.5rem;
-        max-width: 21.875rem;
-        overflow: hidden;
-    }
-    @media screen and (min-width: 768px) {
-        .container {
-            padding: 0.75rem;
-            width: 28.125rem;
-            max-width: 28.125rem;
-        }
-    }
-    @media screen and (min-width: 1024px) {
-        .container {
-            width: calc(34.375rem + 24px);
-            max-width: calc(34.375rem + 24px);
-        }
-    }
-
-    .text-provided {
-        margin-top: 0.5rem;
-        margin-bottom: 0.25rem;
-        width: 100%;
-        color: var(--text-black-color);
-        font-size: var(--font-size-xxs);
-        text-align: center;
-        a {
-            opacity: 0.7;
-            color: inherit;
-            text-decoration: none;
-        }
-    }
-}
-
 .mytonswap-app.rtl {
     direction: rtl;
 }
diff --git a/lib/components/Swap/Swap.stories.tsx b/lib/components/Swap/Swap.stories.tsx
index 1f87849..4c483e0 100644
--- a/lib/components/Swap/Swap.stories.tsx
+++ b/lib/components/Swap/Swap.stories.tsx
@@ -32,7 +32,8 @@ export const Default: Story = {
     args: {
         options: {
             ui_preferences: {
-                primary_color: '#f94905',
+                primary_color: '#e82113',
+                theme: 'light',
             },
         },
     },
diff --git a/lib/components/Swap/Swap.tsx b/lib/components/Swap/Swap.tsx
index 7e4af1b..176e10d 100644
--- a/lib/components/Swap/Swap.tsx
+++ b/lib/components/Swap/Swap.tsx
@@ -160,10 +160,18 @@ export const SwapComponent: FC<SwapProps> = ({
 
     return (
         <ErrorBoundary fallback={<div>Something went wrong</div>}>
-            <div className={cn('mytonswap-app', direction)}>
+            <div
+                className={cn(
+                    'mytonswap-app',
+                    direction,
+                    options?.ui_preferences?.theme === 'light'
+                        ? 'mts-light'
+                        : 'mts-dark'
+                )}
+            >
                 <div
                     className={clsx(
-                        'mts-rounded-lg mts-p-2 mts-max-w-[21.875rem] mts-overflow-hidden md:mts-p-3 md:mts-w-[28.125rem] md:mts-max-w-[28.125rem] lg:mts-w-[calc(34.375rem+24px)] lg:mts-max-w-[calc(34.375rem+24px)]'
+                        'mts-rounded-lg  mts-max-w-[21.875rem] mts-overflow-hidden md:mts-p-3 md:mts-w-[28.125rem] md:mts-max-w-[28.125rem] lg:mts-w-[calc(34.375rem+24px)] lg:mts-max-w-[calc(34.375rem+24px)]'
                     )}
                 >
                     <Header />
@@ -171,7 +179,7 @@ export const SwapComponent: FC<SwapProps> = ({
                     <SwapButton />
                     {shouldShowSwapDetails && <SwapDetails />}
                     {shouldShowProvidedText && (
-                        <div className="mts-mt-2 mts-mb-1 mts-w-full mts-text-black mts-text-[10px] mts-text-center">
+                        <div className="mts-mt-2 mts-mb-1 mts-w-full mts-text-black dark:mts-text-white mts-text-[10px] mts-text-center">
                             {t('service_provided')}{' '}
                             <a
                                 href="https://mytonswap.com"
@@ -188,8 +196,8 @@ export const SwapComponent: FC<SwapProps> = ({
             <Toaster
                 toastOptions={{
                     style: {
-                        background: `var(--background-color)`,
-                        color: `var(--text-black-color)`,
+                        background: `rgb(var(--mts-primary-950))`,
+                        color: `white`,
                     },
                 }}
             />
diff --git a/lib/components/SwapButton/ConfirmationModal.tsx b/lib/components/SwapButton/ConfirmationModal.tsx
index b83570f..930d4dd 100644
--- a/lib/components/SwapButton/ConfirmationModal.tsx
+++ b/lib/components/SwapButton/ConfirmationModal.tsx
@@ -44,13 +44,13 @@ const ConfirmationModal: FC<ConfirmationModalProps> = ({ setConfirmModal }) => {
         }
     };
     return (
-        <div className="mts-flex mts-flex-col mts-items-center mts-gap-3 mts-px-2 mts-pt-2 mts-pb-2 mts-w-full mts-h-full">
+        <div className="mts-flex mts-flex-col mts-items-center mts-gap-3 mts-px-2 mts-pt-2 mts-pb-2 mts-w-full mts-h-full ">
             <div className="mts-flex mts-justify-between mts-items-center mts-w-full">
-                <span className="mts-text-black mts-font-bold mts-text-lg">
+                <span className="mts-text-black dark:mts-text-white mts-font-bold mts-text-lg">
                     {t('confirm.confirm_title')}
                 </span>{' '}
                 <button onClick={handleConfirmClose}>
-                    <Close className="mts-cursor-pointer mts-text-black mts-text-2xl" />
+                    <Close className="mts-cursor-pointer mts-text-black mts-text-2xl dark:mts-text-white" />
                 </button>
             </div>
             <div className="mts-flex mts-items-center mts-pt-1">
@@ -67,7 +67,7 @@ const ConfirmationModal: FC<ConfirmationModalProps> = ({ setConfirmModal }) => {
                     }}
                 ></div>
             </div>
-            <div className="mts-flex mts-flex-col mts-items-center mts-opacity-70 mts-text-black mts-font-bold mts-text-center">
+            <div className="mts-flex mts-flex-col mts-items-center mts-opacity-70 mts-text-black dark:mts-text-white mts-font-bold mts-text-center">
                 <div>
                     {fromNano(pay_amount, pay_token?.decimal)}{' '}
                     {pay_token?.symbol}
@@ -92,7 +92,7 @@ const ConfirmationModal: FC<ConfirmationModalProps> = ({ setConfirmModal }) => {
                 <SwapKeyValue
                     keyText={t('slippage_tolerance')}
                     value={
-                        <div className="mts-px-2 mts-py-1 mts-bg-zinc-200 mts-rounded-full">
+                        <div className="mts-px-2 mts-py-1 mts-bg-zinc-200 dark:mts-bg-zinc-700 dark:mts-text-white mts-rounded-full">
                             {slippage === 'auto' ? '1% Auto' : slippage + '%'}
                         </div>
                     }
diff --git a/lib/components/SwapButton/Done.tsx b/lib/components/SwapButton/Done.tsx
index 3f35e04..f7b862f 100644
--- a/lib/components/SwapButton/Done.tsx
+++ b/lib/components/SwapButton/Done.tsx
@@ -15,14 +15,14 @@ const Done = () => {
         setModalState(ModalState.NONE);
     };
     return (
-        <div className="mts-flex mts-flex-col mts-justify-center mts-items-center mts-h-full">
+        <div className="mts-flex mts-flex-col mts-justify-center mts-items-center mts-h-full ">
             <button onClick={handleCloseModal}>
-                <Close className="mts-absolute mts-top-4 mts-right-4 mts-opacity-70 mts-cursor-pointer mts-text-2xl" />
+                <Close className="mts-absolute mts-top-4 mts-right-4 mts-opacity-70 mts-cursor-pointer mts-text-2xl dark:mts-text-white" />
             </button>
-            <div className="mts-flex mts-justify-center mts-items-center mts-text-primary mts-text-5xl mts-text-green-500 mts-h-20 mts-w-20 mts-border-[1px] mts-border-zinc-200 mts-bg-zinc-100 mts-rounded-full">
+            <div className="mts-flex mts-justify-center mts-items-center mts-text-primary mts-text-5xl mts-text-green-500 mts-h-20 mts-w-20 mts-border-[1px] mts-border-zinc-200 mts-bg-zinc-100 mts-rounded-full dark:mts-bg-zinc-800 dark:mts-border-zinc-700">
                 <FaCircleCheck />
             </div>
-            <div className="mts-mt-6 mts-text-black mts-font-bold mts-text-lg mts-text-center">
+            <div className="mts-mt-6 mts-text-black mts-font-bold mts-text-lg mts-text-center dark:mts-text-white">
                 {t('transaction.complete')}
             </div>
             <div className="mts-flex mts-items-center mts-pt-6">
@@ -39,7 +39,7 @@ const Done = () => {
                     }}
                 ></div>
             </div>
-            <div className="mts-flex mts-flex-col mts-items-center mts-opacity-70 mts-text-black mts-font-bold mts-text-center mts-mt-6">
+            <div className="mts-flex mts-flex-col mts-items-center mts-opacity-70 mts-text-black dark:mts-text-white mts-font-bold mts-text-center mts-mt-6">
                 <div>
                     {fromNano(pay_amount, pay_token?.decimal)}{' '}
                     {pay_token?.symbol}
diff --git a/lib/components/SwapButton/ErrorTonConnect.tsx b/lib/components/SwapButton/ErrorTonConnect.tsx
index 18abba6..6b29063 100644
--- a/lib/components/SwapButton/ErrorTonConnect.tsx
+++ b/lib/components/SwapButton/ErrorTonConnect.tsx
@@ -14,11 +14,11 @@ const ErrorTonConnect = () => {
         setModalState(ModalState.NONE);
     };
     return (
-        <div className="mts-flex mts-flex-col mts-justify-center mts-items-center mts-h-full mts-text-black">
+        <div className="mts-flex mts-flex-col mts-justify-center mts-items-center mts-h-full mts-text-black dark:mts-text-white">
             <button onClick={handleCloseModal}>
                 <Close className="mts-absolute mts-top-4 mts-right-4 mts-opacity-70 mts-cursor-pointer mts-text-2xl" />
             </button>
-            <div className="mts-h-20 mts-w-20 mts-flex mts-justify-center mts-items-center mts-border-[1px] mts-border-zinc-200 mts-bg-zinc-100 mts-rounded-full">
+            <div className="mts-h-20 mts-w-20 mts-flex mts-justify-center mts-items-center mts-border-[1px] mts-border-zinc-200 mts-bg-zinc-100 mts-rounded-full dark:mts-bg-zinc-800 dark:mts-border-zinc-700">
                 <IoCloseCircle className="mts-text-red-500 mts-text-6xl" />
             </div>
             <div className="mts-mt-4 mts-px-7 mts-text-center mts-min-h-52 mts-m-6 mts-flex mts-flex-col mts-items-center mts-justify-center">
diff --git a/lib/components/SwapButton/Inprogress.tsx b/lib/components/SwapButton/Inprogress.tsx
index eb702f9..9462413 100644
--- a/lib/components/SwapButton/Inprogress.tsx
+++ b/lib/components/SwapButton/Inprogress.tsx
@@ -80,7 +80,7 @@ const Inprogress = () => {
         <div className="mts-flex mts-flex-col mts-justify-center mts-items-center mts-h-full">
             <IoClose
                 onClick={handleCloseModal}
-                className="mts-absolute mts-top-4 mts-right-4 mts-opacity-70 mts-cursor-pointer mts-text-black mts-text-xl"
+                className="mts-absolute mts-top-4 mts-right-4 mts-opacity-70 mts-cursor-pointer mts-text-black dark:mts-text-white mts-text-xl"
             />
             <div className="mts-flex mts-items-center mts-pt-1">
                 <div
@@ -96,7 +96,7 @@ const Inprogress = () => {
                     }}
                 ></div>
             </div>
-            <div className="mts-flex mts-flex-col mts-items-center mts-opacity-70 mts-text-black mts-font-bold mts-text-center mts-mt-6">
+            <div className="mts-flex mts-flex-col mts-items-center mts-opacity-70 mts-text-black dark:mts-text-white mts-font-bold mts-text-center mts-mt-6">
                 <div>
                     {fromNano(pay_amount, pay_token?.decimal)}{' '}
                     {pay_token?.symbol}
@@ -118,13 +118,13 @@ const Inprogress = () => {
                 </div>
             </div>
 
-            <div className="mts-mt-4 mts-font-bold mts-text-lg md:mts-text-xl mts-text-center">
+            <div className="mts-mt-4 mts-font-bold mts-text-lg md:mts-text-xl mts-text-center dark:mts-text-white">
                 {t('transaction.pending')}
             </div>
-            <p className="mts-text-black mts-text-base">
+            <p className="mts-text-black dark:mts-text-white mts-text-base">
                 {t('transaction.action_in_progress')}
             </p>
-            <div className="mts-flex mts-justify-center mts-items-center mts-text-3xl md:mts-text-4xl mts-h-20 mts-w-20 mts-border-[1px] mts-bg-zinc-100 mts-border-zinc-200 mts-rounded-full mts-mt-6">
+            <div className="mts-flex mts-justify-center mts-items-center mts-text-3xl md:mts-text-4xl mts-h-20 mts-w-20 mts-border-[1px] mts-bg-zinc-100 mts-border-zinc-200 mts-rounded-full mts-mt-6  dark:mts-bg-zinc-800 dark:mts-border-zinc-700">
                 <Spinner className="mts-text-[30px] mts-text-primary-500 mts-animate-spin" />
             </div>
         </div>
diff --git a/lib/components/SwapButton/SwapButton.tsx b/lib/components/SwapButton/SwapButton.tsx
index df58f41..de684a8 100644
--- a/lib/components/SwapButton/SwapButton.tsx
+++ b/lib/components/SwapButton/SwapButton.tsx
@@ -100,7 +100,7 @@ const SwapButton = () => {
                     >
                         <motion.div
                             transition={{ ease: [0.6, -0.05, 0.01, 0.99] }}
-                            className="mts-flex mts-fixed mts-bottom-0 mts-left-0 mts-flex-col mts-justify-center mts-items-center mts-shadow-[0px_0px_5px_rgba(0,0,0,0.05)] mts-border-t mts-border-solid mts-border-black/10 mts-rounded-t-lg mts-bg-white mts-p-2 mts-w-full mts-h-full mts-max-h-[28.75rem] md:mts-shadow-[0_0px_10px_rgba(0,0,0,0.05)] md:mts-rounded-lg md:mts-w-[90%] md:mts-max-w-[28.125rem] md:mtsx-max-h-[80%] md:mts-max-h-[30rem] lg:mts-w-[32.5rem] lg:mts-max-w-[32.5rem]"
+                            className="mts-flex mts-fixed mts-bottom-0 mts-left-0 mts-flex-col mts-justify-center mts-items-center mts-shadow-[0px_0px_5px_rgba(0,0,0,0.05)] mts-border-t mts-border-solid mts-border-black/10 mts-rounded-t-lg mts-bg-white dark:mts-bg-zinc-900 mts-p-2 mts-w-full mts-h-full mts-max-h-[28.75rem] md:mts-shadow-[0_0px_10px_rgba(0,0,0,0.05)] md:mts-rounded-lg md:mts-w-[90%] md:mts-max-w-[28.125rem] md:mtsx-max-h-[80%] md:mts-max-h-[30rem] lg:mts-w-[32.5rem] lg:mts-max-w-[32.5rem]"
                             initial={modalAnimation.initial}
                             animate={modalAnimation.animate}
                             exit={modalAnimation.exit}
@@ -126,7 +126,7 @@ const SwapButton = () => {
             </AnimatePresence>
             <button
                 className={cn(
-                    'mts-mt-3 mts-rounded-lg mts-bg-primary-500 mts-border-[1px]  mts-w-full mts-h-11 mts-text-white mts-text-sm md:mts-h-[3.25rem] md:mts-text-md lg:mts-rounded-xl lg:mts-h-[3.5rem] lg:mts-text-md disabled:mts-bg-primary-300 disabled:mts-cursor-not-allowed',
+                    'mts-mt-3 mts-rounded-lg mts-bg-primary-500 mts-border-[1px] mts-border-primary-600  mts-w-full mts-h-11 mts-text-white mts-text-sm md:mts-h-[3.25rem] md:mts-text-md lg:mts-rounded-xl lg:mts-h-[3.5rem] lg:mts-text-md disabled:mts-bg-primary-300 dark:disabled:mts-bg-primary-800 dark:disabled:mts-border-transparent dark:disabled:mts-text-white/50  disabled:mts-cursor-not-allowed',
                     tonConnectInstance?.wallet &&
                         isRouteAvailable &&
                         !bestRoute.pool_data.status
diff --git a/lib/components/SwapButton/WaitingForWallet.tsx b/lib/components/SwapButton/WaitingForWallet.tsx
index 054f65a..3676cc8 100644
--- a/lib/components/SwapButton/WaitingForWallet.tsx
+++ b/lib/components/SwapButton/WaitingForWallet.tsx
@@ -29,7 +29,7 @@ const WaitingForWallet = () => {
             initial={{ opacity: 0 }}
             whileInView={{ opacity: 1 }}
             exit={{ opacity: 0 }}
-            className="mts-flex mts-relative mts-flex-col mts-justify-center mts-items-center mts-px-4 mts-h-full mts-text-black"
+            className="mts-flex mts-relative mts-flex-col mts-justify-center mts-items-center mts-px-4 mts-h-full mts-text-black dark:mts-text-white"
         >
             <button onClick={handleCloseModal}>
                 <Close className="mts-absolute mts-top-4 mts-right-4 mts-opacity-70 mts-cursor-pointer mts-text-2xl" />
@@ -48,7 +48,7 @@ const WaitingForWallet = () => {
                     }}
                 ></div>
             </div>
-            <div className="mts-flex mts-flex-col mts-items-center mts-opacity-70 mts-text-black mts-font-bold mts-text-center mts-mt-6">
+            <div className="mts-flex mts-flex-col mts-items-center mts-opacity-70 mts-text-black dark:mts-text-white mts-font-bold mts-text-center mts-mt-6">
                 <div>
                     {fromNano(pay_amount, pay_token?.decimal)}{' '}
                     {pay_token?.symbol}
@@ -79,7 +79,7 @@ const WaitingForWallet = () => {
                 ></Trans>
             </div>
             <p className="mts-text-base">{t('confirm.action_in_progress')}</p>
-            <div className="mts-flex mts-justify-center mts-items-center mts-text-3xl md:mts-text-4xl mts-h-20 mts-w-20 mts-border-[1px] mts-bg-zinc-100 mts-border-zinc-200 mts-rounded-full mts-mt-6">
+            <div className="mts-flex mts-justify-center mts-items-center mts-text-3xl md:mts-text-4xl mts-h-20 mts-w-20 mts-border-[1px] mts-bg-zinc-100 dark:mts-bg-zinc-800 dark:mts-border-zinc-700 mts-border-zinc-200 mts-rounded-full mts-mt-6">
                 <Spinner className="mts-animate-spin mts-opacity-70 mts-text-primary-500" />
             </div>
         </motion.div>
diff --git a/lib/components/SwapCard/Card.tsx b/lib/components/SwapCard/Card.tsx
index 1dbfb08..0af64db 100644
--- a/lib/components/SwapCard/Card.tsx
+++ b/lib/components/SwapCard/Card.tsx
@@ -173,14 +173,14 @@ const Card: FC<CardProps> = ({ type }) => {
         <>
             <div
                 className={cn(
-                    'mts-flex mts-flex-col mts-w-full mts-text-base mts-bg-zinc-50 mts-border-[1px] mts-border-zinc-200 mts-p-4 mts-rounded-lg',
+                    'mts-flex mts-flex-col mts-w-full mts-text-base mts-bg-zinc-50 dark:mts-bg-zinc-900 dark:mts-border-transparent mts-border-[1px] mts-border-zinc-200 mts-p-4 mts-rounded-lg',
                     type === 'receive' && 'mts-m-[2px]'
                 )}
             >
                 <div className="mts-flex mts-justify-between mts-items-center">
                     <span
                         data-testid="swapcard-title"
-                        className="mts-opacity-70 mts-text-black mts-text-xs mts-font-normal"
+                        className="mts-opacity-70 mts-text-black mts-text-xs mts-font-normal dark:mts-text-white"
                     >
                         {type === 'pay' ? t('you_pay') : t('you_receive')}
                     </span>
@@ -207,7 +207,7 @@ const Card: FC<CardProps> = ({ type }) => {
                                 onChange={handlePayAmountChange}
                                 pattern="^[0-9]*[.,]?[0-9]*$"
                                 placeholder="0"
-                                className={`mts-outline-none mts-bg-transparent mts-h-7 mts-text-black mts-font-bold  mts-font-inherit mts-text-lg ${type}`}
+                                className={`mts-outline-none mts-bg-transparent mts-h-7 mts-w-full mts-text-black dark:mts-text-white mts-font-bold  mts-font-inherit mts-text-lg ${type}`}
                                 data-testid={`swapcard-input-${type}`}
                             />
                         )}
@@ -225,7 +225,7 @@ const Card: FC<CardProps> = ({ type }) => {
                         )}
                         {((type === 'receive' && !isFindingBestRoute) ||
                             type === 'pay') && (
-                            <span className="mts-flex mts-items-center mts-opacity-50 mts-h-5 mts-text-black mts-text-sm mts-font-inherit mts-text-left">
+                            <span className="mts-flex mts-items-center mts-opacity-50 mts-h-5 mts-text-black dark:mts-text-white mts-text-sm mts-font-inherit mts-text-left">
                                 {calculatedRate} $
                             </span>
                         )}
@@ -277,7 +277,7 @@ const Card: FC<CardProps> = ({ type }) => {
                                     )}{' '}
                                     {pay_token?.symbol}
                                 </span>
-                                <span className="mts-text-black mts-px-1 mts-bg-zinc-200 mts-text-[10px] mts-rounded-full">
+                                <span className="mts-text-black mts-px-1 mts-bg-zinc-200 dark:mts-bg-zinc-700 dark:mts-text-white mts-text-[10px] mts-rounded-full">
                                     {t('max')}
                                 </span>
                             </span>
diff --git a/lib/components/SwapCard/CardButton.tsx b/lib/components/SwapCard/CardButton.tsx
index 3ebf3d8..91d8d74 100644
--- a/lib/components/SwapCard/CardButton.tsx
+++ b/lib/components/SwapCard/CardButton.tsx
@@ -39,7 +39,7 @@ const CardButton: FC<CardButtonProps & PropsWithChildren> = ({
             }}
             data-testid={`card-button-${type}`}
             className={cn(
-                'mts-flex mts-gap-1 mts-items-center mts-transition-all mts-ease-in-out mts-rounded-full mts-py-1 mts-pr-2 mts-pl-1 mts-h-10 mts-font-semibold mts-text-sm mts-ltr mts-text-black mts-border-[1px]',
+                'mts-flex mts-gap-1 mts-items-center mts-transition-all mts-ease-in-out mts-rounded-full mts-py-1 mts-pr-2 mts-pl-1 mts-h-10 mts-font-semibold mts-text-sm mts-ltr mts-text-black dark:mts-text-white dark:mts-border-zinc-800 mts-border-[1px]',
                 isLoading && 'mts-w-20 mts-h-10',
                 type === 'pay' && isLoading && 'mts-pointer-events-none',
                 type === 'receive' &&
diff --git a/lib/components/SwapCard/CardDialog.tsx b/lib/components/SwapCard/CardDialog.tsx
index daa9cbb..ba39e71 100644
--- a/lib/components/SwapCard/CardDialog.tsx
+++ b/lib/components/SwapCard/CardDialog.tsx
@@ -278,24 +278,24 @@ const CardDialog: FC<CardDialogProps> = ({
                             animate={modalAnimation.animate}
                             exit={modalAnimation.exit}
                             className={clsx(
-                                'mts-fixed mts-bottom-0 mts-left-0 mts-flex mts-flex-col mts-shadow-[0px_0px_10px_rgba(0,0,0,0.05)] mts-rounded-t-2xl mts-bg-white mts-p-4 mts-pt-4 mts-pb-2 mts-w-full mts-min-h-[92.5dvh] mts-max-h-[92.5dvh] mts-overflow-y-auto md:mts-shadow-[0_0px_10px_rgba(0,0,0,0.05)] md:mts-rounded-2xl md:mts-w-[90%] md:mts-max-w-[34.375rem] md:mts-h-auto md:mts-min-h-[21.875rem] md:mts-max-h-[70dvh]'
+                                'mts-fixed mts-bottom-0 mts-left-0 mts-flex mts-flex-col mts-shadow-[0px_0px_10px_rgba(0,0,0,0.05)] mts-rounded-t-2xl mts-bg-white dark:mts-bg-zinc-900 mts-p-4 mts-pt-4 mts-pb-2 mts-w-full mts-min-h-[92.5dvh] mts-max-h-[92.5dvh] mts-overflow-y-auto md:mts-shadow-[0_0px_10px_rgba(0,0,0,0.05)] md:mts-rounded-2xl md:mts-w-[90%] md:mts-max-w-[34.375rem] md:mts-h-auto md:mts-min-h-[21.875rem] md:mts-max-h-[70dvh]'
                             )}
                             ref={ref}
                             onClick={(e) => {
                                 e.stopPropagation();
                             }}
                         >
-                            <div className="mts-flex mts-justify-between mts-items-center mts-text-black mts-font-bold mts-text-lg">
+                            <div className="mts-flex mts-justify-between mts-items-center mts-text-black dark:mts-text-white mts-font-bold mts-text-lg">
                                 <div>{t('select_a_token')}</div>
                                 <button
                                     onClick={handleOnClose}
-                                    className="mts-text-black mts-text-2xl md:mts-block"
+                                    className="mts-text-black dark:mts-text-white mts-text-2xl md:mts-block"
                                 >
                                     <Close />
                                 </button>
                             </div>
                             <div>
-                                <div className="mts-flex mts-items-center mts-transition-all mts-duration-200 mts-ease-in-out mts-mt-6 mts-mb-2 mts-border mts-border-black/10 mts-rounded-lg mts-bg-white mts-px-3 mts-w-full mts-h-10 hover:mts-bg-zinc-100 focus-within:mts-border-primary-500">
+                                <div className="mts-flex mts-items-center mts-transition-all mts-duration-200 mts-ease-in-out mts-mt-6 mts-mb-2 mts-border mts-border-black/10 mts-rounded-lg mts-bg-white dark:mts-bg-zinc-800 dark:mts-border-zinc-700 mts-px-3 mts-w-full mts-h-10 hover:mts-bg-zinc-100 focus-within:mts-border-primary-500 dark:focus-within:mts-border-primary-500">
                                     <Search className="mts-text-zinc-500 mts-text-lg md:mts-opacity-50" />
                                     <input
                                         className="mts-outline-none mts-bg-transparent mts-px-2 mts-w-full mts-h-full mts-text-black mts-text-sm md:mts-text-lg"
@@ -313,7 +313,7 @@ const CardDialog: FC<CardDialogProps> = ({
                                     {pinnedTokens.map((item) => {
                                         return (
                                             <button
-                                                className="mts-flex mts-items-center mts-gap-1 mts-opacity-80 mts-transition-all mts-duration-300 mts-ease-in-out mts-cursor-pointer mts-rounded-full mts-bg-zinc-100 mts-p-1 mts-px-2 mts-text-black mts-text-[0.9rem] hover:mts-opacity-100"
+                                                className="mts-flex mts-items-center mts-gap-1 mts-opacity-80 mts-transition-all mts-duration-300 mts-ease-in-out mts-cursor-pointer mts-rounded-full mts-bg-zinc-100 dark:mts-bg-zinc-800 mts-p-1 mts-px-2 mts-text-black dark:mts-text-white mts-text-[0.9rem] hover:mts-opacity-100"
                                                 onClick={() => {
                                                     handleOnTokenSelect(item);
                                                 }}
@@ -336,9 +336,9 @@ const CardDialog: FC<CardDialogProps> = ({
                                     <div className="mts-flex mts-items-center mts-gap-5 mts-mt-3 mts-mb-2 mts-border-b mts-border-black/10 mts-px-3 mts-pb-2 mts-w-full mts-text-black mts-font-light mts-text-lg">
                                         <button
                                             className={clsx(
-                                                'mts-relative mts-transition-all mts-duration-300 mts-ease-in-out mts-bg-transparent mts-text-black mts-text-sm',
+                                                'mts-relative mts-transition-all mts-duration-300 mts-ease-in-out mts-bg-transparent mts-text-black dark:mts-text-white mts-text-sm',
                                                 activeTab === TABS.ALL &&
-                                                    'mts-text-primary-500 mts-font-semibold'
+                                                    'mts-text-primary-500 mts-font-semibold dark:mts-text-primary-500'
                                             )}
                                             onClick={() =>
                                                 setActiveTab(TABS.ALL)
@@ -359,9 +359,9 @@ const CardDialog: FC<CardDialogProps> = ({
                                         </button>
                                         <button
                                             className={clsx(
-                                                'mts-relative mts-transition-all mts-duration-300 mts-ease-in-out mts-bg-transparent mts-text-black mts-text-sm',
+                                                'mts-relative mts-transition-all mts-duration-300 mts-ease-in-out mts-bg-transparent mts-text-black dark:mts-text-white mts-text-sm',
                                                 activeTab === TABS.FAVORITES &&
-                                                    'mts-text-primary-500 mts-font-semibold'
+                                                    'mts-text-primary-500 mts-font-semibold dark:mts-text-primary-500'
                                             )}
                                             onClick={() =>
                                                 setActiveTab(TABS.FAVORITES)
@@ -395,7 +395,7 @@ const CardDialog: FC<CardDialogProps> = ({
                                                 next={() => onNextPage(page)}
                                                 scrollableTarget="scroll-div"
                                                 loader={
-                                                    <div className="mts-flex mts-justify-center mts-items-center mts-h-10 mts-text-[var(--text-black-color)] mts-text-[1.25rem]">
+                                                    <div className="mts-flex mts-justify-center mts-items-center mts-h-10 mts-text-[1.25rem]">
                                                         <CgSpinnerTwo className="mts-animate-spin mts-text-primary-500" />
                                                     </div>
                                                 }
@@ -500,7 +500,7 @@ const CardDialog: FC<CardDialogProps> = ({
                             <div className="mts-flex mts-justify-center mts-items-center mts-cursor-pointer mts-pt-2 mts-text-sm md:mts-hidden">
                                 <button
                                     onClick={handleOnClose}
-                                    className="mts-flex mts-justify-center mts-items-center mts-transition-all mts-duration-300 mts-ease-in-out mts-rounded-lg mts-bg-white mts-border-zinc-200 mts-border-[1px] mts-w-full mts-h-12 mts-text-black mts-text-center active:mts-scale-95"
+                                    className="mts-flex mts-justify-center mts-items-center mts-transition-all mts-duration-300 mts-ease-in-out mts-rounded-lg mts-bg-white dark:mts-bg-zinc-800 dark:mts-text-white dark:mts-border-zinc-700 mts-border-zinc-200 mts-border-[1px] mts-w-full mts-h-12 mts-text-black mts-text-center active:mts-scale-95"
                                 >
                                     Close
                                 </button>
diff --git a/lib/components/SwapCard/FavList.tsx b/lib/components/SwapCard/FavList.tsx
index 5529066..8172f97 100644
--- a/lib/components/SwapCard/FavList.tsx
+++ b/lib/components/SwapCard/FavList.tsx
@@ -49,17 +49,17 @@ const FavList: FC<FavListProps> = ({ onTokenSelect, type }) => {
                 />
             ))}
             {isLoading && (
-                <div className="mts-flex mts-justify-center mts-items-center mts-h-10 mts-text-black mts-text-xl">
+                <div className="mts-flex mts-justify-center mts-items-center mts-h-10 mts-text-black dark:mts-text-white mts-text-xl">
                     <CgSpinnerTwo className="mts-animate-spin mts-text-primary-500" />
                 </div>
             )}
             {isError && (
-                <div className="mts-flex mts-justify-center mts-items-center mts-h-10 mts-text-black mts-text-xl">
+                <div className="mts-flex mts-justify-center mts-items-center mts-h-10 mts-text-black dark:mts-text-white mts-text-xl">
                     <div>Something went wrong...</div>
                 </div>
             )}
             {!isLoading && !isError && favItems?.length === 0 && (
-                <div className="mts-flex mts-justify-center mts-items-center mts-h-10 mts-text-black mts-text-xl">
+                <div className="mts-flex mts-justify-center mts-items-center mts-h-10 mts-text-black dark:mts-text-white mts-text-xl">
                     <div className="mts-opacity-70 mts-text-xs">
                         No favorite tokens
                     </div>
diff --git a/lib/components/SwapCard/Token.tsx b/lib/components/SwapCard/Token.tsx
index dbeaef7..f186c28 100644
--- a/lib/components/SwapCard/Token.tsx
+++ b/lib/components/SwapCard/Token.tsx
@@ -58,7 +58,7 @@ const Token: FC<TokenProps> = ({ asset, onTokenSelect, type }) => {
                     style={{ background: `url(${asset.image})` }}
                 ></div>
                 <div className="mts-flex-grow mts-h-full mts-justify-center mts-gap-1 mts-flex mts-flex-col">
-                    <div className="mts-flex mts-justify-between mts-items-center mts-overflow-hidden mts-text-black mts-font-medium mts-text-sm mts-truncate">
+                    <div className="mts-flex mts-justify-between mts-items-center mts-overflow-hidden mts-text-black dark:mts-text-white mts-font-medium mts-text-sm mts-truncate">
                         <div className="mts-flex mts-items-center mts-gap-1  mts-font-medium   ">
                             {asset.symbol}{' '}
                             <span>
@@ -72,21 +72,21 @@ const Token: FC<TokenProps> = ({ asset, onTokenSelect, type }) => {
                                 </a>
                             </span>
                             {asset.warning && (
-                                <div className="mts-text-xs mts-bg-primary-100 mts-rounded-full mts-px-2 mts-text-primary-500 mts-border-primary-200 mts-border-[1px]">
+                                <div className="mts-text-xs mts-bg-primary-100 mts-rounded-full mts-px-2 mts-text-primary-500 mts-border-primary-200 dark:mts-bg-primary-900 dark:mts-border-primary-700 mts-border-[1px]">
                                     {t('community')}
                                 </div>
                             )}
                         </div>
                         <div>{tokenBalance}</div>
                     </div>
-                    <div className="mts-flex mts-justify-between mts-items-center mts-opacity-50 mts-text-black mts-text-xs mts-gap-2 ">
+                    <div className="mts-flex mts-justify-between mts-items-center mts-opacity-50 mts-text-black dark:mts-text-white mts-text-xs mts-gap-2 ">
                         <div className="mts-flex mts-items-center mts-gap-0.5">
                             <span className="mts-break-all mts-line-clamp-1 mts-truncate mts-whitespace-pre-wrap">
                                 {asset.name}
                             </span>
                             {asset.address !== TON_ADDR && (
                                 <span className="mts-flex mts-items-center mts-gap-0.5">
-                                    | <TokenTon /> {asset.liquidity_text}
+                                    | <TokenTon /> {asset.liquidity_text ?? 0}
                                 </span>
                             )}
                         </div>
@@ -96,8 +96,9 @@ const Token: FC<TokenProps> = ({ asset, onTokenSelect, type }) => {
                 <div>
                     <div
                         className={cn(
-                            'mts-opacity-20 mts-transition-transform mts-duration-200 mts-ease-in-out mts-text-black mts-text-2xl',
-                            isTokenFav && 'mts-opacity-100 mts-text-primary-500'
+                            'mts-opacity-20 mts-transition-transform mts-duration-200 mts-ease-in-out mts-text-black mts-text-2xl dark:mts-text-white',
+                            isTokenFav &&
+                                'mts-opacity-100 mts-text-primary-500 dark:mts-text-primary-500'
                         )}
                     >
                         {isTokenFav ? (
diff --git a/lib/components/SwapDetails/SwapDetails.tsx b/lib/components/SwapDetails/SwapDetails.tsx
index 3bab5cc..5047dd8 100644
--- a/lib/components/SwapDetails/SwapDetails.tsx
+++ b/lib/components/SwapDetails/SwapDetails.tsx
@@ -18,7 +18,7 @@ const SwapDetails = () => {
     const [ref, { height }] = useMeasure();
     return (
         <motion.button
-            className="mts-flex mts-flex-col mts-items-center mts-mt-3 mts-rounded-lg   mts-w-full mts-min-h-12 mts-text-black"
+            className="mts-flex mts-flex-col mts-items-center mts-mt-3 mts-rounded-lg   mts-w-full mts-min-h-12 mts-text-black dark:mts-text-white"
             onClick={() => {
                 setIsOpen((prev) => !prev);
             }}
@@ -60,7 +60,7 @@ const SwapDetails = () => {
                             height: height ?? 0,
                         }}
                         exit={{ opacity: 0, height: 0 }}
-                        className="mts-flex mts-flex-col mts-gap-1 mts-w-full mts-overflow-hidden mts-bg-zinc-100  mts-rounded-lg mts-border-zinc-200 mts-border-[1px]"
+                        className="mts-flex mts-flex-col mts-gap-1 mts-w-full mts-overflow-hidden mts-bg-zinc-100 dark:mts-bg-zinc-900 dark:mts-border-zinc-800 mts-rounded-lg mts-border-zinc-200 mts-border-[1px]"
                     >
                         <div
                             ref={ref}
@@ -69,7 +69,7 @@ const SwapDetails = () => {
                             <SwapKeyValue
                                 keyText={t('slippage_tolerance')}
                                 value={
-                                    <div className="mts-rounded-full mts-bg-zinc-200 mts-px-2 mts-py-1 mts-text-black">
+                                    <div className="mts-rounded-full mts-bg-zinc-200 dark:mts-bg-zinc-700 dark:mts-text-white mts-px-2 mts-py-1 mts-text-black">
                                         {slippage === 'auto' ? '1' : slippage}%{' '}
                                         {slippage === 'auto' ? t('auto') : ''}
                                     </div>
diff --git a/lib/components/SwapDetails/SwapKeyValue.tsx b/lib/components/SwapDetails/SwapKeyValue.tsx
index 7e63640..17a4c3a 100644
--- a/lib/components/SwapDetails/SwapKeyValue.tsx
+++ b/lib/components/SwapDetails/SwapKeyValue.tsx
@@ -6,9 +6,13 @@ type SwapKeyValueProps = {
 
 const SwapKeyValue: FC<SwapKeyValueProps> = ({ keyText, value }) => {
     return (
-        <div className="mts-flex mts-justify-between mts-items-center mts-font-medium mts-text-xs mts-font-inter">
-            <div className=" mts-text-primary-900">{keyText}</div>
-            <div className="mts-text-primary-900/70">{value}</div>
+        <div className="mts-flex mts-justify-between mts-items-center mts-font-medium mts-text-xs mts-font-inter ">
+            <div className=" mts-text-primary-900 dark:mts-text-white">
+                {keyText}
+            </div>
+            <div className="mts-text-primary-900/70 dark:mts-text-white/70">
+                {value}
+            </div>
         </div>
     );
 };
diff --git a/lib/i18n/langs/en.json b/lib/i18n/langs/en.json
index 351df14..fb5b0ba 100644
--- a/lib/i18n/langs/en.json
+++ b/lib/i18n/langs/en.json
@@ -2,7 +2,7 @@
     "swap": "Swap",
     "max_slippage": "Max Slippage",
     "auto": "Auto",
-    "search": "Search ...",
+    "search": "Search",
     "not_found_desc": "Double-check your request and try again",
     "no_more_tokens": "No more tokens",
     "service_provided": "Service provided by",
diff --git a/lib/store/options.store.ts b/lib/store/options.store.ts
index a206b2f..ae4dfec 100644
--- a/lib/store/options.store.ts
+++ b/lib/store/options.store.ts
@@ -26,6 +26,7 @@ export type SwapOptions = {
     layout_direction?: 'ltr' | 'rtl';
     ui_preferences?: {
         primary_color?: string;
+        theme?: 'light' | 'dark';
         disable_provided_text?: boolean;
         show_swap_details?: boolean;
         show_settings_wallet?: boolean;

From 12d0a9eb0de2be87b083bade0f10a70e22e1169c Mon Sep 17 00:00:00 2001
From: HoseinBaseri <ho3ein8280@gmail.com>
Date: Wed, 22 Jan 2025 15:32:00 +0330
Subject: [PATCH 06/12] refactor: update component styles for improved
 responsiveness and consistency

---
 lib/components/Swap/Swap.tsx                  |  2 +-
 .../SwapButton/ConfirmationModal.tsx          | 13 ++++++-------
 lib/components/SwapButton/Done.tsx            | 12 +++++-------
 lib/components/SwapButton/ErrorTonConnect.tsx |  1 -
 lib/components/SwapButton/Inprogress.tsx      |  9 ++++-----
 lib/components/SwapButton/SwapButton.tsx      |  2 +-
 .../SwapButton/WaitingForWallet.tsx           | 19 ++++++-------------
 lib/components/SwapCard/Card.tsx              |  4 ++--
 lib/components/SwapCard/CardButton.tsx        |  2 +-
 lib/components/SwapCard/CardDialog.tsx        |  4 ++--
 lib/components/SwapCard/Token.tsx             |  8 ++++----
 lib/components/SwapDetails/SwapDetails.tsx    |  2 +-
 12 files changed, 33 insertions(+), 45 deletions(-)

diff --git a/lib/components/Swap/Swap.tsx b/lib/components/Swap/Swap.tsx
index 176e10d..8358b90 100644
--- a/lib/components/Swap/Swap.tsx
+++ b/lib/components/Swap/Swap.tsx
@@ -171,7 +171,7 @@ export const SwapComponent: FC<SwapProps> = ({
             >
                 <div
                     className={clsx(
-                        'mts-rounded-lg  mts-max-w-[21.875rem] mts-overflow-hidden md:mts-p-3 md:mts-w-[28.125rem] md:mts-max-w-[28.125rem] lg:mts-w-[calc(34.375rem+24px)] lg:mts-max-w-[calc(34.375rem+24px)]'
+                        'mts-rounded-lg  mts-max-w-[21.875rem] mts-overflow-hidden md:mts-p-3 md:mts-w-[28.125rem] md:mts-max-w-[450px] '
                     )}
                 >
                     <Header />
diff --git a/lib/components/SwapButton/ConfirmationModal.tsx b/lib/components/SwapButton/ConfirmationModal.tsx
index 930d4dd..6f81bb3 100644
--- a/lib/components/SwapButton/ConfirmationModal.tsx
+++ b/lib/components/SwapButton/ConfirmationModal.tsx
@@ -18,7 +18,6 @@ const ConfirmationModal: FC<ConfirmationModalProps> = ({ setConfirmModal }) => {
         pay_token,
         bestRoute,
         receive_token,
-        receive_rate,
         slippage,
         setModalState,
     } = useSwapStore();
@@ -44,7 +43,7 @@ const ConfirmationModal: FC<ConfirmationModalProps> = ({ setConfirmModal }) => {
         }
     };
     return (
-        <div className="mts-flex mts-flex-col mts-items-center mts-gap-3 mts-px-2 mts-pt-2 mts-pb-2 mts-w-full mts-h-full ">
+        <div className="mts-flex mts-flex-col mts-items-center  mts-px-2 mts-pt-2 mts-pb-2 mts-w-full mts-h-full ">
             <div className="mts-flex mts-justify-between mts-items-center mts-w-full">
                 <span className="mts-text-black dark:mts-text-white mts-font-bold mts-text-lg">
                     {t('confirm.confirm_title')}
@@ -53,7 +52,7 @@ const ConfirmationModal: FC<ConfirmationModalProps> = ({ setConfirmModal }) => {
                     <Close className="mts-cursor-pointer mts-text-black mts-text-2xl dark:mts-text-white" />
                 </button>
             </div>
-            <div className="mts-flex mts-items-center mts-pt-1">
+            <div className="mts-flex mts-items-center mts-mt-6">
                 <div
                     className="mts-translate-x-3 mts-border-5 mts-border-solid mts-border-modal-background mts-rounded-full !mts-bg-contain mts-w-11 mts-h-11"
                     style={{
@@ -67,7 +66,7 @@ const ConfirmationModal: FC<ConfirmationModalProps> = ({ setConfirmModal }) => {
                     }}
                 ></div>
             </div>
-            <div className="mts-flex mts-flex-col mts-items-center mts-opacity-70 mts-text-black dark:mts-text-white mts-font-bold mts-text-center">
+            <div className="mts-flex mts-flex-col mts-items-center mts-opacity-70 mts-text-black dark:mts-text-white mts-font-bold mts-text-center mts-bg-zinc-50 mts-w-full mts-border-zinc-200 mts-border-[1px] mts-rounded-xl mts-p-2 dark:mts-bg-zinc-800 dark:mts-border-zinc-700 mts-mt-6">
                 <div>
                     {fromNano(pay_amount, pay_token?.decimal)}{' '}
                     {pay_token?.symbol}
@@ -78,7 +77,7 @@ const ConfirmationModal: FC<ConfirmationModalProps> = ({ setConfirmModal }) => {
                 <div>
                     {bestRoute!.pool_data.receive_show!} {receive_token?.symbol}
                 </div>
-                <div className="mts-opacity-60 mts-text-xs">
+                {/* <div className="mts-opacity-60 mts-text-xs">
                     ≈{' '}
                     {formatNumber(
                         Number(bestRoute!.pool_data.receive_show) *
@@ -86,9 +85,9 @@ const ConfirmationModal: FC<ConfirmationModalProps> = ({ setConfirmModal }) => {
                         4
                     )}
                     $
-                </div>
+                </div> */}
             </div>
-            <div className="mts-flex mts-flex-grow mts-flex-col mts-justify-center mts-gap-3 mts-mt-0.5 mts-w-full mts-h-fit mts-text-lg">
+            <div className="mts-flex mts-flex-grow mts-flex-col  mts-gap-3 mts-mt-6 mts-w-full mts-h-fit mts-text-lg">
                 <SwapKeyValue
                     keyText={t('slippage_tolerance')}
                     value={
diff --git a/lib/components/SwapButton/Done.tsx b/lib/components/SwapButton/Done.tsx
index f7b862f..a4cff8b 100644
--- a/lib/components/SwapButton/Done.tsx
+++ b/lib/components/SwapButton/Done.tsx
@@ -1,21 +1,19 @@
 import { FaArrowRightArrowLeft, FaCircleCheck } from 'react-icons/fa6';
 import { ModalState, useSwapStore } from '../../store/swap.store';
 import { fromNano } from '@mytonswap/sdk';
-import formatNumber from '../../utils/formatNum';
 import './Done.scss';
 import { useTranslation } from 'react-i18next';
 import Close from '../icons/Close';
 
 const Done = () => {
     const { t } = useTranslation();
-    const { bestRoute, pay_amount, pay_token, receive_token, receive_rate } =
-        useSwapStore();
+    const { bestRoute, pay_amount, pay_token, receive_token } = useSwapStore();
     const { setModalState } = useSwapStore();
     const handleCloseModal = () => {
         setModalState(ModalState.NONE);
     };
     return (
-        <div className="mts-flex mts-flex-col mts-justify-center mts-items-center mts-h-full ">
+        <div className="mts-flex mts-flex-col mts-justify-center mts-items-center mts-h-full mts-w-full mts-px-4">
             <button onClick={handleCloseModal}>
                 <Close className="mts-absolute mts-top-4 mts-right-4 mts-opacity-70 mts-cursor-pointer mts-text-2xl dark:mts-text-white" />
             </button>
@@ -39,7 +37,7 @@ const Done = () => {
                     }}
                 ></div>
             </div>
-            <div className="mts-flex mts-flex-col mts-items-center mts-opacity-70 mts-text-black dark:mts-text-white mts-font-bold mts-text-center mts-mt-6">
+            <div className="mts-flex mts-flex-col mts-items-center mts-opacity-70 mts-text-black dark:mts-text-white mts-font-bold mts-text-center mts-bg-zinc-50 mts-w-full mts-border-zinc-200 mts-border-[1px] mts-rounded-xl mts-p-2 dark:mts-bg-zinc-800 dark:mts-border-zinc-700 mts-mt-6">
                 <div>
                     {fromNano(pay_amount, pay_token?.decimal)}{' '}
                     {pay_token?.symbol}
@@ -50,7 +48,7 @@ const Done = () => {
                 <div>
                     {bestRoute!.pool_data.receive_show!} {receive_token?.symbol}
                 </div>
-                <div className="mts-opacity-60 mts-text-xs">
+                {/* <div className="mts-opacity-60 mts-text-xs">
                     ≈{' '}
                     {formatNumber(
                         Number(bestRoute!.pool_data.receive_show) *
@@ -58,7 +56,7 @@ const Done = () => {
                         4
                     )}
                     $
-                </div>
+                </div> */}
             </div>
         </div>
     );
diff --git a/lib/components/SwapButton/ErrorTonConnect.tsx b/lib/components/SwapButton/ErrorTonConnect.tsx
index 6b29063..969d976 100644
--- a/lib/components/SwapButton/ErrorTonConnect.tsx
+++ b/lib/components/SwapButton/ErrorTonConnect.tsx
@@ -10,7 +10,6 @@ const ErrorTonConnect = () => {
             transactionError: null,
             transactionErrorBody: null,
         });
-        // close modal
         setModalState(ModalState.NONE);
     };
     return (
diff --git a/lib/components/SwapButton/Inprogress.tsx b/lib/components/SwapButton/Inprogress.tsx
index 9462413..f786a91 100644
--- a/lib/components/SwapButton/Inprogress.tsx
+++ b/lib/components/SwapButton/Inprogress.tsx
@@ -3,7 +3,6 @@ import { ModalState, useSwapStore } from '../../store/swap.store';
 import { IoClose } from 'react-icons/io5';
 import { Dex, fromNano } from '@mytonswap/sdk';
 import { FaArrowRightArrowLeft } from 'react-icons/fa6';
-import formatNumber from '../../utils/formatNum';
 import { useEventsStore } from '../../store/events.store';
 import { useTranslation } from 'react-i18next';
 import Spinner from '../icons/Spinner';
@@ -77,7 +76,7 @@ const Inprogress = () => {
     };
 
     return (
-        <div className="mts-flex mts-flex-col mts-justify-center mts-items-center mts-h-full">
+        <div className="mts-flex mts-flex-col mts-justify-center mts-items-center mts-h-full mts-w-full">
             <IoClose
                 onClick={handleCloseModal}
                 className="mts-absolute mts-top-4 mts-right-4 mts-opacity-70 mts-cursor-pointer mts-text-black dark:mts-text-white mts-text-xl"
@@ -96,7 +95,7 @@ const Inprogress = () => {
                     }}
                 ></div>
             </div>
-            <div className="mts-flex mts-flex-col mts-items-center mts-opacity-70 mts-text-black dark:mts-text-white mts-font-bold mts-text-center mts-mt-6">
+            <div className="mts-flex mts-flex-col mts-items-center mts-opacity-70 mts-text-black dark:mts-text-white mts-font-bold mts-text-center mts-bg-zinc-50 mts-w-full mts-border-zinc-200 mts-border-[1px] mts-rounded-xl mts-p-2 dark:mts-bg-zinc-800 dark:mts-border-zinc-700 mts-mt-6">
                 <div>
                     {fromNano(pay_amount, pay_token?.decimal)}{' '}
                     {pay_token?.symbol}
@@ -107,7 +106,7 @@ const Inprogress = () => {
                 <div>
                     {bestRoute!.pool_data.receive_show!} {receive_token?.symbol}
                 </div>
-                <div className="mts-opacity-60 mts-text-xs">
+                {/* <div className="mts-opacity-60 mts-text-xs">
                     ≈{' '}
                     {formatNumber(
                         Number(bestRoute!.pool_data.receive_show) *
@@ -115,7 +114,7 @@ const Inprogress = () => {
                         4
                     )}
                     $
-                </div>
+                </div> */}
             </div>
 
             <div className="mts-mt-4 mts-font-bold mts-text-lg md:mts-text-xl mts-text-center dark:mts-text-white">
diff --git a/lib/components/SwapButton/SwapButton.tsx b/lib/components/SwapButton/SwapButton.tsx
index de684a8..58bec24 100644
--- a/lib/components/SwapButton/SwapButton.tsx
+++ b/lib/components/SwapButton/SwapButton.tsx
@@ -100,7 +100,7 @@ const SwapButton = () => {
                     >
                         <motion.div
                             transition={{ ease: [0.6, -0.05, 0.01, 0.99] }}
-                            className="mts-flex mts-fixed mts-bottom-0 mts-left-0 mts-flex-col mts-justify-center mts-items-center mts-shadow-[0px_0px_5px_rgba(0,0,0,0.05)] mts-border-t mts-border-solid mts-border-black/10 mts-rounded-t-lg mts-bg-white dark:mts-bg-zinc-900 mts-p-2 mts-w-full mts-h-full mts-max-h-[28.75rem] md:mts-shadow-[0_0px_10px_rgba(0,0,0,0.05)] md:mts-rounded-lg md:mts-w-[90%] md:mts-max-w-[28.125rem] md:mtsx-max-h-[80%] md:mts-max-h-[30rem] lg:mts-w-[32.5rem] lg:mts-max-w-[32.5rem]"
+                            className="mts-flex mts-fixed mts-bottom-0 mts-left-0 mts-flex-col mts-justify-center mts-items-center mts-shadow-[0px_0px_5px_rgba(0,0,0,0.05)] mts-border-t mts-border-solid mts-border-black/10 mts-rounded-t-lg mts-bg-white dark:mts-bg-zinc-900 mts-p-2 mts-w-full mts-h-full mts-max-h-[28.75rem] md:mts-shadow-[0_0px_10px_rgba(0,0,0,0.05)] md:mts-rounded-2xl md:mts-w-[90%] md:mts-max-w-[28.125rem] md:mtsx-max-h-[80%] md:mts-max-h-[30rem] lg:mts-w-[32.5rem] lg:mts-max-w-[32.5rem] md:mts-p-2 "
                             initial={modalAnimation.initial}
                             animate={modalAnimation.animate}
                             exit={modalAnimation.exit}
diff --git a/lib/components/SwapButton/WaitingForWallet.tsx b/lib/components/SwapButton/WaitingForWallet.tsx
index 3676cc8..bc5cbb1 100644
--- a/lib/components/SwapButton/WaitingForWallet.tsx
+++ b/lib/components/SwapButton/WaitingForWallet.tsx
@@ -4,7 +4,6 @@ import { useOptionsStore } from '../../store/options.store';
 import { useTranslation } from 'react-i18next';
 import { Trans } from 'react-i18next';
 import { FaArrowRightArrowLeft } from 'react-icons/fa6';
-import formatNumber from '../../utils/formatNum';
 import { fromNano } from '@mytonswap/sdk';
 import Close from '../icons/Close';
 import Spinner from '../icons/Spinner';
@@ -12,14 +11,8 @@ import Spinner from '../icons/Spinner';
 const WaitingForWallet = () => {
     const { t } = useTranslation();
     const { tonConnectInstance } = useOptionsStore();
-    const {
-        pay_amount,
-        pay_token,
-        bestRoute,
-        receive_token,
-        receive_rate,
-        setModalState,
-    } = useSwapStore();
+    const { pay_amount, pay_token, bestRoute, receive_token, setModalState } =
+        useSwapStore();
 
     const handleCloseModal = () => {
         setModalState(ModalState.NONE);
@@ -29,7 +22,7 @@ const WaitingForWallet = () => {
             initial={{ opacity: 0 }}
             whileInView={{ opacity: 1 }}
             exit={{ opacity: 0 }}
-            className="mts-flex mts-relative mts-flex-col mts-justify-center mts-items-center mts-px-4 mts-h-full mts-text-black dark:mts-text-white"
+            className="mts-flex mts-relative mts-flex-col mts-w-full mts-justify-center mts-items-center mts-px-4 mts-h-full mts-text-black dark:mts-text-white"
         >
             <button onClick={handleCloseModal}>
                 <Close className="mts-absolute mts-top-4 mts-right-4 mts-opacity-70 mts-cursor-pointer mts-text-2xl" />
@@ -48,7 +41,7 @@ const WaitingForWallet = () => {
                     }}
                 ></div>
             </div>
-            <div className="mts-flex mts-flex-col mts-items-center mts-opacity-70 mts-text-black dark:mts-text-white mts-font-bold mts-text-center mts-mt-6">
+            <div className="mts-flex mts-flex-col mts-items-center mts-opacity-70 mts-text-black dark:mts-text-white mts-font-bold mts-text-center mts-bg-zinc-50 mts-w-full mts-border-zinc-200 mts-border-[1px] mts-rounded-xl mts-p-2 dark:mts-bg-zinc-800 dark:mts-border-zinc-700 mts-mt-6">
                 <div>
                     {fromNano(pay_amount, pay_token?.decimal)}{' '}
                     {pay_token?.symbol}
@@ -59,7 +52,7 @@ const WaitingForWallet = () => {
                 <div>
                     {bestRoute!.pool_data.receive_show!} {receive_token?.symbol}
                 </div>
-                <div className="mts-opacity-60 mts-text-xs">
+                {/* <div className="mts-opacity-60 mts-text-xs">
                     ≈{' '}
                     {formatNumber(
                         Number(bestRoute!.pool_data.receive_show) *
@@ -67,7 +60,7 @@ const WaitingForWallet = () => {
                         4
                     )}
                     $
-                </div>
+                </div> */}
             </div>
 
             <div className="mts-mt-4 mts-font-bold mts-text-lg md:mts-text-xl mts-text-center">
diff --git a/lib/components/SwapCard/Card.tsx b/lib/components/SwapCard/Card.tsx
index 0af64db..241f361 100644
--- a/lib/components/SwapCard/Card.tsx
+++ b/lib/components/SwapCard/Card.tsx
@@ -207,7 +207,7 @@ const Card: FC<CardProps> = ({ type }) => {
                                 onChange={handlePayAmountChange}
                                 pattern="^[0-9]*[.,]?[0-9]*$"
                                 placeholder="0"
-                                className={`mts-outline-none mts-bg-transparent mts-h-7 mts-w-full mts-text-black dark:mts-text-white mts-font-bold  mts-font-inherit mts-text-lg ${type}`}
+                                className={`mts-outline-none mts-bg-transparent mts-h-7 mts-w-full mts-text-black dark:mts-text-white mts-font-bold  mts-font-inherit mts-text-lg md:mts-text-2xl ${type}`}
                                 data-testid={`swapcard-input-${type}`}
                             />
                         )}
@@ -225,7 +225,7 @@ const Card: FC<CardProps> = ({ type }) => {
                         )}
                         {((type === 'receive' && !isFindingBestRoute) ||
                             type === 'pay') && (
-                            <span className="mts-flex mts-items-center mts-opacity-50 mts-h-5 mts-text-black dark:mts-text-white mts-text-sm mts-font-inherit mts-text-left">
+                            <span className="mts-flex mts-items-center mts-opacity-50 mts-h-5 mts-text-black dark:mts-text-white mts-text-sm md:mts-text-base mts-font-inherit mts-font-medium mts-text-left">
                                 {calculatedRate} $
                             </span>
                         )}
diff --git a/lib/components/SwapCard/CardButton.tsx b/lib/components/SwapCard/CardButton.tsx
index 91d8d74..8e785da 100644
--- a/lib/components/SwapCard/CardButton.tsx
+++ b/lib/components/SwapCard/CardButton.tsx
@@ -39,7 +39,7 @@ const CardButton: FC<CardButtonProps & PropsWithChildren> = ({
             }}
             data-testid={`card-button-${type}`}
             className={cn(
-                'mts-flex mts-gap-1 mts-items-center mts-transition-all mts-ease-in-out mts-rounded-full mts-py-1 mts-pr-2 mts-pl-1 mts-h-10 mts-font-semibold mts-text-sm mts-ltr mts-text-black dark:mts-text-white dark:mts-border-zinc-800 mts-border-[1px]',
+                'mts-flex mts-gap-1 mts-items-center mts-transition-all mts-ease-in-out mts-rounded-full mts-py-1 mts-pr-2 mts-pl-1 mts-h-10 mts-font-semibold mts-text-sm md:mts-text-base mts-ltr mts-text-black dark:mts-text-white dark:mts-border-zinc-800 mts-border-[1px]',
                 isLoading && 'mts-w-20 mts-h-10',
                 type === 'pay' && isLoading && 'mts-pointer-events-none',
                 type === 'receive' &&
diff --git a/lib/components/SwapCard/CardDialog.tsx b/lib/components/SwapCard/CardDialog.tsx
index ba39e71..b2141c3 100644
--- a/lib/components/SwapCard/CardDialog.tsx
+++ b/lib/components/SwapCard/CardDialog.tsx
@@ -295,10 +295,10 @@ const CardDialog: FC<CardDialogProps> = ({
                                 </button>
                             </div>
                             <div>
-                                <div className="mts-flex mts-items-center mts-transition-all mts-duration-200 mts-ease-in-out mts-mt-6 mts-mb-2 mts-border mts-border-black/10 mts-rounded-lg mts-bg-white dark:mts-bg-zinc-800 dark:mts-border-zinc-700 mts-px-3 mts-w-full mts-h-10 hover:mts-bg-zinc-100 focus-within:mts-border-primary-500 dark:focus-within:mts-border-primary-500">
+                                <div className="mts-flex mts-items-center mts-transition-all mts-duration-200 mts-ease-in-out mts-mt-6 mts-mb-2 mts-border mts-border-black/10 mts-rounded-lg mts-bg-white dark:mts-bg-zinc-800 dark:mts-border-zinc-700 mts-px-3 mts-w-full mts-h-10 md:mts-h-14 hover:mts-bg-zinc-100 focus-within:mts-border-primary-500 dark:focus-within:mts-border-primary-500">
                                     <Search className="mts-text-zinc-500 mts-text-lg md:mts-opacity-50" />
                                     <input
-                                        className="mts-outline-none mts-bg-transparent mts-px-2 mts-w-full mts-h-full mts-text-black mts-text-sm md:mts-text-lg"
+                                        className="mts-outline-none mts-bg-transparent mts-px-2 mts-w-full mts-h-full mts-text-black mts-text-sm md:mts-text-sm mts-font-normal"
                                         type="text"
                                         placeholder={t('search')}
                                         data-testid="dialog-search-input"
diff --git a/lib/components/SwapCard/Token.tsx b/lib/components/SwapCard/Token.tsx
index f186c28..ae5761b 100644
--- a/lib/components/SwapCard/Token.tsx
+++ b/lib/components/SwapCard/Token.tsx
@@ -47,18 +47,18 @@ const Token: FC<TokenProps> = ({ asset, onTokenSelect, type }) => {
         <button
             onClick={isSelected ? undefined : () => onTokenSelect(asset)}
             className={clsx(
-                'mts-flex mts-items-center mts-cursor-pointer mts-mt-1 mts-rounded-lg mts-w-full mts-h-12',
+                'mts-flex mts-items-center mts-cursor-pointer mts-mt-1 mts-rounded-lg mts-w-full mts-h-12 md:mts-h-14',
                 isSelected && 'mts-opacity-50 mts-cursor-auto'
             )}
             data-testid={asset.address}
         >
             <div className="mts-flex mts-flex-grow mts-items-center mts-justify-center mts-gap-2 mts-h-full">
                 <div
-                    className="mts-rounded-full !mts-bg-contain mts-w-10 mts-h-10 mts-min-w-10 mts-min-h-10 mts-max-h-10 mts-max-w-10"
+                    className="mts-rounded-full !mts-bg-contain mts-w-10 mts-h-10 mts-min-w-10 mts-min-h-10 mts-max-h-10 mts-max-w-10 md:mts-w-12 md:mts-h-12 md:mts-min-w-12 md:mts-min-h-12 md:mts-max-h-12 md:mts-max-w-12"
                     style={{ background: `url(${asset.image})` }}
                 ></div>
                 <div className="mts-flex-grow mts-h-full mts-justify-center mts-gap-1 mts-flex mts-flex-col">
-                    <div className="mts-flex mts-justify-between mts-items-center mts-overflow-hidden mts-text-black dark:mts-text-white mts-font-medium mts-text-sm mts-truncate">
+                    <div className="mts-flex mts-justify-between mts-items-center mts-overflow-hidden mts-text-black dark:mts-text-white mts-font-medium mts-text-sm md:mts-text-base mts-truncate">
                         <div className="mts-flex mts-items-center mts-gap-1  mts-font-medium   ">
                             {asset.symbol}{' '}
                             <span>
@@ -79,7 +79,7 @@ const Token: FC<TokenProps> = ({ asset, onTokenSelect, type }) => {
                         </div>
                         <div>{tokenBalance}</div>
                     </div>
-                    <div className="mts-flex mts-justify-between mts-items-center mts-opacity-50 mts-text-black dark:mts-text-white mts-text-xs mts-gap-2 ">
+                    <div className="mts-flex mts-justify-between mts-items-center mts-opacity-50 mts-text-black dark:mts-text-white mts-text-xs md:mts-text-sm mts-gap-2 ">
                         <div className="mts-flex mts-items-center mts-gap-0.5">
                             <span className="mts-break-all mts-line-clamp-1 mts-truncate mts-whitespace-pre-wrap">
                                 {asset.name}
diff --git a/lib/components/SwapDetails/SwapDetails.tsx b/lib/components/SwapDetails/SwapDetails.tsx
index 5047dd8..376eee9 100644
--- a/lib/components/SwapDetails/SwapDetails.tsx
+++ b/lib/components/SwapDetails/SwapDetails.tsx
@@ -24,7 +24,7 @@ const SwapDetails = () => {
             }}
             data-testid="swap-details"
         >
-            <div className="mts-flex mts-justify-between mts-items-center mts-w-full mts-min-h-12 mts-font-medium mts-text-sm">
+            <div className="mts-flex mts-justify-between mts-items-center mts-w-full mts-min-h-12 mts-font-medium mts-text-xs">
                 {onePayRoute && onePayRoute.pool_data && !isFindingBestRoute ? (
                     <div className="one-pay mts-ltr">
                         1 {onePayRoute.pool_data.route_view[0]} ≈{' '}

From 73000ad6bc8cc11bd90fd9fa4ee96e8cd3f55c92 Mon Sep 17 00:00:00 2001
From: HoseinBaseri <ho3ein8280@gmail.com>
Date: Wed, 29 Jan 2025 16:36:40 +0330
Subject: [PATCH 07/12] refactor: streamline icon imports and update theme
 handling for improved consistency

---
 lib/components/Header/SettingPopover.tsx      |  2 +-
 lib/components/Header/SlippageSetting.tsx     | 20 +++++-----
 lib/components/Header/TokensSettings.tsx      |  6 +--
 lib/components/Header/Wallet.tsx              |  4 +-
 lib/components/Swap/Swap.stories.tsx          |  1 -
 lib/components/Swap/Swap.tsx                  | 10 +----
 .../SwapButton/ConfirmationModal.tsx          |  4 +-
 lib/components/SwapButton/Done.tsx            |  4 +-
 lib/components/SwapButton/ErrorTonConnect.tsx |  2 +-
 lib/components/SwapButton/Inprogress.tsx      |  4 +-
 lib/components/SwapButton/SwapButton.tsx      |  2 +-
 .../SwapButton/WaitingForWallet.tsx           |  4 +-
 lib/components/SwapCard/Card.tsx              |  8 ++--
 lib/components/SwapCard/CardButton.tsx        |  2 +-
 lib/components/SwapCard/CardDialog.tsx        | 12 +++---
 lib/components/SwapDetails/SwapDetails.tsx    |  4 +-
 .../WalletProfile/WalletProfile.tsx           |  2 +-
 lib/components/icons/Close.tsx                |  2 +-
 lib/components/icons/Search.tsx               |  2 -
 lib/global.css                                | 12 ++++++
 lib/store/options.store.ts                    |  7 +++-
 lib/utils/color/setupColors.ts                | 39 ++++++++++++++++++-
 tailwind.config.js                            | 13 +++++++
 23 files changed, 110 insertions(+), 56 deletions(-)

diff --git a/lib/components/Header/SettingPopover.tsx b/lib/components/Header/SettingPopover.tsx
index df1791d..07c8eb2 100644
--- a/lib/components/Header/SettingPopover.tsx
+++ b/lib/components/Header/SettingPopover.tsx
@@ -65,7 +65,7 @@ const SettingPopover: FC<SettingPopoverProps> = ({ children }) => {
                             exit={modalAnimation.exit}
                             transition={{ ease: 'easeOut', duration: 0.15 }}
                             ref={ref}
-                            className="mts-flex mts-fixed mts-bottom-0 mts-left-0 mts-flex-col mts-gap-3 mts-shadow-sm mts-rounded-t-2xl mts-bg-zinc-100 dark:mts-bg-zinc-900 mts-p-4 mts-w-full mts-min-w-60 mts-h-fit mts-text-primary-950 rtl:mts-right-auto rtl:left-0 md:mts-min-w-80 md:mts-max-w-[32.5rem] md:mts-rounded-2xl"
+                            className="mts-flex mts-fixed mts-bottom-0 mts-left-0 mts-flex-col mts-gap-3 mts-shadow-sm mts-rounded-t-2xl mts-bg-dark-100 dark:mts-bg-dark-900 mts-p-4 mts-w-full mts-min-w-60 mts-h-fit mts-text-primary-950 rtl:mts-right-auto rtl:left-0 md:mts-min-w-80 md:mts-max-w-[32.5rem] md:mts-rounded-2xl"
                             data-testid="setting-popover"
                         >
                             <div className="mts-flex mts-items-center mts-justify-between dark:mts-text-white">
diff --git a/lib/components/Header/SlippageSetting.tsx b/lib/components/Header/SlippageSetting.tsx
index a1cebcd..95d73c7 100644
--- a/lib/components/Header/SlippageSetting.tsx
+++ b/lib/components/Header/SlippageSetting.tsx
@@ -54,11 +54,11 @@ const SlippageSetting = () => {
             data-testid="slippage-setting"
         >
             <button className="mts-flex  mts-justify-between mts-w-full mts-text-black ">
-                <div className="mts-text-lg mts-text-zinc-600 dark:mts-text-zinc-200">
+                <div className="mts-text-lg mts-text-dark-600 dark:mts-text-dark-200">
                     {t('max_slippage')}
                 </div>
                 <div
-                    className="mts-flex mts-justify-center mts-items-center mts-text-sm  mts-text-zinc-600 dark:mts-text-zinc-200"
+                    className="mts-flex mts-justify-center mts-items-center mts-text-sm  mts-text-dark-600 dark:mts-text-dark-200"
                     data-testid="slippage-indicator"
                 >
                     {slippage === 'auto' ? t('auto') : `${slippage}%`}{' '}
@@ -68,10 +68,10 @@ const SlippageSetting = () => {
                 <div
                     onClick={handleOnAutoClick}
                     className={cn(
-                        `mts-flex mts-relative mts-justify-center mts-items-center mts-transition-all mts-duration-300 mts-cursor-pointer mts-m-[0.125rem] mts-border-[1px] mts-border-transparent mts-rounded-lg mts-bg-white dark:mts-bg-zinc-800 dark:mts-text-white mts-p-1 mts-h-12 md:mts-h-12 md:mts-m-1`,
+                        `mts-flex mts-relative mts-justify-center mts-items-center mts-transition-all mts-duration-300 mts-cursor-pointer mts-m-[0.125rem] mts-border-[1px] mts-border-transparent mts-rounded-lg mts-bg-white dark:mts-bg-dark-800 dark:mts-text-white mts-p-1 mts-h-12 md:mts-h-12 md:mts-m-1`,
                         slippage === 'auto'
                             ? 'mts-border-primary-500'
-                            : 'mts-border-zinc-200 dark:mts-border-zinc-700'
+                            : 'mts-border-dark-200 dark:mts-border-dark-700'
                     )}
                     data-testid="slippage-setting-auto"
                 >
@@ -80,10 +80,10 @@ const SlippageSetting = () => {
                 <div
                     onClick={() => handleOnPercentClick(2)}
                     className={cn(
-                        `mts-flex mts-relative mts-justify-center mts-items-center mts-transition-all mts-duration-300 mts-cursor-pointer mts-m-[0.125rem] mts-border-[1px] mts-border-transparent mts-rounded-lg mts-bg-white dark:mts-bg-zinc-800 dark:mts-text-white mts-p-1 mts-h-12 md:mts-h-12`,
+                        `mts-flex mts-relative mts-justify-center mts-items-center mts-transition-all mts-duration-300 mts-cursor-pointer mts-m-[0.125rem] mts-border-[1px] mts-border-transparent mts-rounded-lg mts-bg-white dark:mts-bg-dark-800 dark:mts-text-white mts-p-1 mts-h-12 md:mts-h-12`,
                         slippage === 2
                             ? 'mts-border-primary-500'
-                            : 'mts-border-zinc-200 dark:mts-border-zinc-700'
+                            : 'mts-border-dark-200 dark:mts-border-dark-700'
                     )}
                     data-testid="slippage-setting-2"
                 >
@@ -92,10 +92,10 @@ const SlippageSetting = () => {
                 <div
                     onClick={() => handleOnPercentClick(5)}
                     className={cn(
-                        `mts-flex mts-relative mts-justify-center mts-items-center mts-transition-all mts-duration-300 mts-cursor-pointer mts-m-[0.125rem] mts-border-[1px] mts-border-transparent mts-rounded-lg mts-bg-white dark:mts-bg-zinc-800 dark:mts-text-white mts-p-1 mts-h-12 md:mts-h-12`,
+                        `mts-flex mts-relative mts-justify-center mts-items-center mts-transition-all mts-duration-300 mts-cursor-pointer mts-m-[0.125rem] mts-border-[1px] mts-border-transparent mts-rounded-lg mts-bg-white dark:mts-bg-dark-800 dark:mts-text-white mts-p-1 mts-h-12 md:mts-h-12`,
                         slippage === 5
                             ? 'mts-border-primary-500'
-                            : 'mts-border-zinc-200 dark:mts-border-zinc-700'
+                            : 'mts-border-dark-200 dark:mts-border-dark-700'
                     )}
                     data-testid="slippage-setting-5"
                 >
@@ -103,9 +103,9 @@ const SlippageSetting = () => {
                 </div>
                 <div
                     className={cn(
-                        `mts-flex mts-justify-between mts-items-center mts-gap-1 mts-relative mts-transition-all mts-duration-300 mts-cursor-pointer mts-m-[0.125rem] mts-border-[1px] mts-border-transparent mts-rounded-lg mts-bg-white dark:mts-bg-zinc-800 dark:mts-text-white mts-h-12 md:mts-h-12`,
+                        `mts-flex mts-justify-between mts-items-center mts-gap-1 mts-relative mts-transition-all mts-duration-300 mts-cursor-pointer mts-m-[0.125rem] mts-border-[1px] mts-border-transparent mts-rounded-lg mts-bg-white dark:mts-bg-dark-800 dark:mts-text-white mts-h-12 md:mts-h-12`,
                         ['auto', 2, 5].includes(slippage)
-                            ? 'mts-border-zinc-200 dark:mts-border-zinc-700'
+                            ? 'mts-border-dark-200 dark:mts-border-dark-700'
                             : 'mts-border-primary-500'
                     )}
                 >
diff --git a/lib/components/Header/TokensSettings.tsx b/lib/components/Header/TokensSettings.tsx
index f49ca05..d5f508e 100644
--- a/lib/components/Header/TokensSettings.tsx
+++ b/lib/components/Header/TokensSettings.tsx
@@ -7,13 +7,13 @@ const TokensSettings = () => {
     const { communityTokens, setCommunityTokens } = useSwapStore();
     return (
         <div className="mts-flex mts-justify-between mts-items-center mts-px-1 mts-text-xs md:mts-text-sm">
-            <div className="mts-text-zinc-600 mts-text-lg dark:mts-text-zinc-200">
+            <div className="mts-text-dark-600 mts-text-lg dark:mts-text-dark-200">
                 <span>{t('community_tokens')}</span>
             </div>
             <div>
                 <button
                     className={cn(
-                        'mts-flex mts-relative mts-justify-start mts-items-center mts-transition-all mts-duration-300 mts-rounded-full mts-bg-zinc-100 mts-p-1 mts-w-12 mts-h-6 mts-shadow-[0px_0px_0px_4px_rgb(var(--mts-primary-100))] dark:mts-bg-zinc-900 dark:mts-shadow-[0px_0px_0px_4px_rgb(var(--mts-primary-800))]',
+                        'mts-flex mts-relative mts-justify-start mts-items-center mts-transition-all mts-duration-300 mts-rounded-full mts-bg-dark-100 mts-p-1 mts-w-12 mts-h-6 mts-shadow-[0px_0px_0px_4px_rgb(var(--mts-primary-100))] dark:mts-bg-dark-900 dark:mts-shadow-[0px_0px_0px_4px_rgb(var(--mts-primary-800))]',
 
                         communityTokens
                             ? 'mts-bg-primary-500 dark:mts-bg-primary-500'
@@ -26,7 +26,7 @@ const TokensSettings = () => {
                         className={cn(
                             'mts-absolute mts-transition-all mts-duration-300 mts-ease mts-rounded-full mts-w-4 mts-h-4',
                             communityTokens
-                                ? 'mts-left-7 mts-bg-white dark:mts-bg-zinc-800'
+                                ? 'mts-left-7 mts-bg-white dark:mts-bg-dark-800'
                                 : 'mts-left-1 mts-bg-primary-500'
                         )}
                     ></div>
diff --git a/lib/components/Header/Wallet.tsx b/lib/components/Header/Wallet.tsx
index 2bdb0b1..2ecebc4 100644
--- a/lib/components/Header/Wallet.tsx
+++ b/lib/components/Header/Wallet.tsx
@@ -58,7 +58,7 @@ const Wallet: FC<WalletProps> = ({ isWalletPopover }) => {
             >
                 <div
                     className={cn(
-                        'mts-rounded-2xl mts-p-4 mts-border-zinc-200 dark:mts-bg-zinc-800 dark:mts-border-zinc-700 mts-bg-white dark:mts-text-white mts-border-[1px]',
+                        'mts-rounded-2xl mts-p-4 mts-border-dark-200 dark:mts-bg-dark-800 dark:mts-border-dark-700 mts-bg-white dark:mts-text-white mts-border-[1px]',
                         isWalletPopover && 'mts-border-none mts-p-0'
                     )}
                 >
@@ -76,7 +76,7 @@ const Wallet: FC<WalletProps> = ({ isWalletPopover }) => {
                             </span>
                         </div>
                         <div className="mts-flex mts-items-center mts-gap-1">
-                            <div className="mts-flex mts-opacity-75 mts-rounded-lg mts-white mts-border-[1px] mts-border-zinc-200 mts-px-2 mts-py-1 mts-w-fit mts-text-sm mts-font-normal mts-h-10  mts-items-center dark:mts-bg-zinc-900 dark:mts-border-zinc-700">
+                            <div className="mts-flex mts-opacity-75 mts-rounded-lg mts-white mts-border-[1px] mts-border-dark-200 mts-px-2 mts-py-1 mts-w-fit mts-text-sm mts-font-normal mts-h-10  mts-items-center dark:mts-bg-dark-900 dark:mts-border-dark-700">
                                 {shortAddress(
                                     wallet.account.address,
                                     'mainnet',
diff --git a/lib/components/Swap/Swap.stories.tsx b/lib/components/Swap/Swap.stories.tsx
index 4c483e0..55734e5 100644
--- a/lib/components/Swap/Swap.stories.tsx
+++ b/lib/components/Swap/Swap.stories.tsx
@@ -33,7 +33,6 @@ export const Default: Story = {
         options: {
             ui_preferences: {
                 primary_color: '#e82113',
-                theme: 'light',
             },
         },
     },
diff --git a/lib/components/Swap/Swap.tsx b/lib/components/Swap/Swap.tsx
index 8358b90..d40ac93 100644
--- a/lib/components/Swap/Swap.tsx
+++ b/lib/components/Swap/Swap.tsx
@@ -160,15 +160,7 @@ export const SwapComponent: FC<SwapProps> = ({
 
     return (
         <ErrorBoundary fallback={<div>Something went wrong</div>}>
-            <div
-                className={cn(
-                    'mytonswap-app',
-                    direction,
-                    options?.ui_preferences?.theme === 'light'
-                        ? 'mts-light'
-                        : 'mts-dark'
-                )}
-            >
+            <div className={cn('mytonswap-app', direction)}>
                 <div
                     className={clsx(
                         'mts-rounded-lg  mts-max-w-[21.875rem] mts-overflow-hidden md:mts-p-3 md:mts-w-[28.125rem] md:mts-max-w-[450px] '
diff --git a/lib/components/SwapButton/ConfirmationModal.tsx b/lib/components/SwapButton/ConfirmationModal.tsx
index 6f81bb3..a776bbb 100644
--- a/lib/components/SwapButton/ConfirmationModal.tsx
+++ b/lib/components/SwapButton/ConfirmationModal.tsx
@@ -66,7 +66,7 @@ const ConfirmationModal: FC<ConfirmationModalProps> = ({ setConfirmModal }) => {
                     }}
                 ></div>
             </div>
-            <div className="mts-flex mts-flex-col mts-items-center mts-opacity-70 mts-text-black dark:mts-text-white mts-font-bold mts-text-center mts-bg-zinc-50 mts-w-full mts-border-zinc-200 mts-border-[1px] mts-rounded-xl mts-p-2 dark:mts-bg-zinc-800 dark:mts-border-zinc-700 mts-mt-6">
+            <div className="mts-flex mts-flex-col mts-items-center mts-opacity-70 mts-text-black dark:mts-text-white mts-font-bold mts-text-center mts-bg-dark-50 mts-w-full mts-border-dark-200 mts-border-[1px] mts-rounded-xl mts-p-2 dark:mts-bg-dark-800 dark:mts-border-dark-700 mts-mt-6">
                 <div>
                     {fromNano(pay_amount, pay_token?.decimal)}{' '}
                     {pay_token?.symbol}
@@ -91,7 +91,7 @@ const ConfirmationModal: FC<ConfirmationModalProps> = ({ setConfirmModal }) => {
                 <SwapKeyValue
                     keyText={t('slippage_tolerance')}
                     value={
-                        <div className="mts-px-2 mts-py-1 mts-bg-zinc-200 dark:mts-bg-zinc-700 dark:mts-text-white mts-rounded-full">
+                        <div className="mts-px-2 mts-py-1 mts-bg-dark-200 dark:mts-bg-dark-700 dark:mts-text-white mts-rounded-full">
                             {slippage === 'auto' ? '1% Auto' : slippage + '%'}
                         </div>
                     }
diff --git a/lib/components/SwapButton/Done.tsx b/lib/components/SwapButton/Done.tsx
index a4cff8b..a292bda 100644
--- a/lib/components/SwapButton/Done.tsx
+++ b/lib/components/SwapButton/Done.tsx
@@ -17,7 +17,7 @@ const Done = () => {
             <button onClick={handleCloseModal}>
                 <Close className="mts-absolute mts-top-4 mts-right-4 mts-opacity-70 mts-cursor-pointer mts-text-2xl dark:mts-text-white" />
             </button>
-            <div className="mts-flex mts-justify-center mts-items-center mts-text-primary mts-text-5xl mts-text-green-500 mts-h-20 mts-w-20 mts-border-[1px] mts-border-zinc-200 mts-bg-zinc-100 mts-rounded-full dark:mts-bg-zinc-800 dark:mts-border-zinc-700">
+            <div className="mts-flex mts-justify-center mts-items-center mts-text-primary mts-text-5xl mts-text-green-500 mts-h-20 mts-w-20 mts-border-[1px] mts-border-dark-200 mts-bg-dark-100 mts-rounded-full dark:mts-bg-dark-800 dark:mts-border-dark-700">
                 <FaCircleCheck />
             </div>
             <div className="mts-mt-6 mts-text-black mts-font-bold mts-text-lg mts-text-center dark:mts-text-white">
@@ -37,7 +37,7 @@ const Done = () => {
                     }}
                 ></div>
             </div>
-            <div className="mts-flex mts-flex-col mts-items-center mts-opacity-70 mts-text-black dark:mts-text-white mts-font-bold mts-text-center mts-bg-zinc-50 mts-w-full mts-border-zinc-200 mts-border-[1px] mts-rounded-xl mts-p-2 dark:mts-bg-zinc-800 dark:mts-border-zinc-700 mts-mt-6">
+            <div className="mts-flex mts-flex-col mts-items-center mts-opacity-70 mts-text-black dark:mts-text-white mts-font-bold mts-text-center mts-bg-dark-50 mts-w-full mts-border-dark-200 mts-border-[1px] mts-rounded-xl mts-p-2 dark:mts-bg-dark-800 dark:mts-border-dark-700 mts-mt-6">
                 <div>
                     {fromNano(pay_amount, pay_token?.decimal)}{' '}
                     {pay_token?.symbol}
diff --git a/lib/components/SwapButton/ErrorTonConnect.tsx b/lib/components/SwapButton/ErrorTonConnect.tsx
index 969d976..1a2d5ea 100644
--- a/lib/components/SwapButton/ErrorTonConnect.tsx
+++ b/lib/components/SwapButton/ErrorTonConnect.tsx
@@ -17,7 +17,7 @@ const ErrorTonConnect = () => {
             <button onClick={handleCloseModal}>
                 <Close className="mts-absolute mts-top-4 mts-right-4 mts-opacity-70 mts-cursor-pointer mts-text-2xl" />
             </button>
-            <div className="mts-h-20 mts-w-20 mts-flex mts-justify-center mts-items-center mts-border-[1px] mts-border-zinc-200 mts-bg-zinc-100 mts-rounded-full dark:mts-bg-zinc-800 dark:mts-border-zinc-700">
+            <div className="mts-h-20 mts-w-20 mts-flex mts-justify-center mts-items-center mts-border-[1px] mts-border-dark-200 mts-bg-dark-100 mts-rounded-full dark:mts-bg-dark-800 dark:mts-border-dark-700">
                 <IoCloseCircle className="mts-text-red-500 mts-text-6xl" />
             </div>
             <div className="mts-mt-4 mts-px-7 mts-text-center mts-min-h-52 mts-m-6 mts-flex mts-flex-col mts-items-center mts-justify-center">
diff --git a/lib/components/SwapButton/Inprogress.tsx b/lib/components/SwapButton/Inprogress.tsx
index f786a91..d98ae5d 100644
--- a/lib/components/SwapButton/Inprogress.tsx
+++ b/lib/components/SwapButton/Inprogress.tsx
@@ -95,7 +95,7 @@ const Inprogress = () => {
                     }}
                 ></div>
             </div>
-            <div className="mts-flex mts-flex-col mts-items-center mts-opacity-70 mts-text-black dark:mts-text-white mts-font-bold mts-text-center mts-bg-zinc-50 mts-w-full mts-border-zinc-200 mts-border-[1px] mts-rounded-xl mts-p-2 dark:mts-bg-zinc-800 dark:mts-border-zinc-700 mts-mt-6">
+            <div className="mts-flex mts-flex-col mts-items-center mts-opacity-70 mts-text-black dark:mts-text-white mts-font-bold mts-text-center mts-bg-dark-50 mts-w-full mts-border-dark-200 mts-border-[1px] mts-rounded-xl mts-p-2 dark:mts-bg-dark-800 dark:mts-border-dark-700 mts-mt-6">
                 <div>
                     {fromNano(pay_amount, pay_token?.decimal)}{' '}
                     {pay_token?.symbol}
@@ -123,7 +123,7 @@ const Inprogress = () => {
             <p className="mts-text-black dark:mts-text-white mts-text-base">
                 {t('transaction.action_in_progress')}
             </p>
-            <div className="mts-flex mts-justify-center mts-items-center mts-text-3xl md:mts-text-4xl mts-h-20 mts-w-20 mts-border-[1px] mts-bg-zinc-100 mts-border-zinc-200 mts-rounded-full mts-mt-6  dark:mts-bg-zinc-800 dark:mts-border-zinc-700">
+            <div className="mts-flex mts-justify-center mts-items-center mts-text-3xl md:mts-text-4xl mts-h-20 mts-w-20 mts-border-[1px] mts-bg-dark-100 mts-border-dark-200 mts-rounded-full mts-mt-6  dark:mts-bg-dark-800 dark:mts-border-dark-700">
                 <Spinner className="mts-text-[30px] mts-text-primary-500 mts-animate-spin" />
             </div>
         </div>
diff --git a/lib/components/SwapButton/SwapButton.tsx b/lib/components/SwapButton/SwapButton.tsx
index 58bec24..a45ad83 100644
--- a/lib/components/SwapButton/SwapButton.tsx
+++ b/lib/components/SwapButton/SwapButton.tsx
@@ -100,7 +100,7 @@ const SwapButton = () => {
                     >
                         <motion.div
                             transition={{ ease: [0.6, -0.05, 0.01, 0.99] }}
-                            className="mts-flex mts-fixed mts-bottom-0 mts-left-0 mts-flex-col mts-justify-center mts-items-center mts-shadow-[0px_0px_5px_rgba(0,0,0,0.05)] mts-border-t mts-border-solid mts-border-black/10 mts-rounded-t-lg mts-bg-white dark:mts-bg-zinc-900 mts-p-2 mts-w-full mts-h-full mts-max-h-[28.75rem] md:mts-shadow-[0_0px_10px_rgba(0,0,0,0.05)] md:mts-rounded-2xl md:mts-w-[90%] md:mts-max-w-[28.125rem] md:mtsx-max-h-[80%] md:mts-max-h-[30rem] lg:mts-w-[32.5rem] lg:mts-max-w-[32.5rem] md:mts-p-2 "
+                            className="mts-flex mts-fixed mts-bottom-0 mts-left-0 mts-flex-col mts-justify-center mts-items-center mts-shadow-[0px_0px_5px_rgba(0,0,0,0.05)] mts-border-t mts-border-solid mts-border-black/10 mts-rounded-t-lg mts-bg-white dark:mts-bg-dark-900 mts-p-2 mts-w-full mts-h-full mts-max-h-[28.75rem] md:mts-shadow-[0_0px_10px_rgba(0,0,0,0.05)] md:mts-rounded-2xl md:mts-w-[90%] md:mts-max-w-[28.125rem] md:mtsx-max-h-[80%] md:mts-max-h-[30rem] lg:mts-w-[32.5rem] lg:mts-max-w-[32.5rem] md:mts-p-2 "
                             initial={modalAnimation.initial}
                             animate={modalAnimation.animate}
                             exit={modalAnimation.exit}
diff --git a/lib/components/SwapButton/WaitingForWallet.tsx b/lib/components/SwapButton/WaitingForWallet.tsx
index bc5cbb1..37e53bd 100644
--- a/lib/components/SwapButton/WaitingForWallet.tsx
+++ b/lib/components/SwapButton/WaitingForWallet.tsx
@@ -41,7 +41,7 @@ const WaitingForWallet = () => {
                     }}
                 ></div>
             </div>
-            <div className="mts-flex mts-flex-col mts-items-center mts-opacity-70 mts-text-black dark:mts-text-white mts-font-bold mts-text-center mts-bg-zinc-50 mts-w-full mts-border-zinc-200 mts-border-[1px] mts-rounded-xl mts-p-2 dark:mts-bg-zinc-800 dark:mts-border-zinc-700 mts-mt-6">
+            <div className="mts-flex mts-flex-col mts-items-center mts-opacity-70 mts-text-black dark:mts-text-white mts-font-bold mts-text-center mts-bg-dark-50 mts-w-full mts-border-dark-200 mts-border-[1px] mts-rounded-xl mts-p-2 dark:mts-bg-dark-800 dark:mts-border-dark-700 mts-mt-6">
                 <div>
                     {fromNano(pay_amount, pay_token?.decimal)}{' '}
                     {pay_token?.symbol}
@@ -72,7 +72,7 @@ const WaitingForWallet = () => {
                 ></Trans>
             </div>
             <p className="mts-text-base">{t('confirm.action_in_progress')}</p>
-            <div className="mts-flex mts-justify-center mts-items-center mts-text-3xl md:mts-text-4xl mts-h-20 mts-w-20 mts-border-[1px] mts-bg-zinc-100 dark:mts-bg-zinc-800 dark:mts-border-zinc-700 mts-border-zinc-200 mts-rounded-full mts-mt-6">
+            <div className="mts-flex mts-justify-center mts-items-center mts-text-3xl md:mts-text-4xl mts-h-20 mts-w-20 mts-border-[1px] mts-bg-dark-100 dark:mts-bg-dark-800 dark:mts-border-dark-700 mts-border-dark-200 mts-rounded-full mts-mt-6">
                 <Spinner className="mts-animate-spin mts-opacity-70 mts-text-primary-500" />
             </div>
         </motion.div>
diff --git a/lib/components/SwapCard/Card.tsx b/lib/components/SwapCard/Card.tsx
index 241f361..d63562d 100644
--- a/lib/components/SwapCard/Card.tsx
+++ b/lib/components/SwapCard/Card.tsx
@@ -173,7 +173,7 @@ const Card: FC<CardProps> = ({ type }) => {
         <>
             <div
                 className={cn(
-                    'mts-flex mts-flex-col mts-w-full mts-text-base mts-bg-zinc-50 dark:mts-bg-zinc-900 dark:mts-border-transparent mts-border-[1px] mts-border-zinc-200 mts-p-4 mts-rounded-lg',
+                    'mts-flex mts-flex-col mts-w-full mts-text-base mts-bg-dark-50 dark:mts-bg-dark-900 dark:mts-border-transparent mts-border-[1px] mts-border-dark-200 mts-p-4 mts-rounded-lg',
                     type === 'receive' && 'mts-m-[2px]'
                 )}
             >
@@ -263,7 +263,7 @@ const Card: FC<CardProps> = ({ type }) => {
                         </CardButton>
                         {type === 'pay' && balanceToken ? (
                             <span
-                                className="mts-cursor-pointer  mts-text-xs mts-flex mts-items-center mts-gap-2 mts-text-zinc-500 mts-font-medium"
+                                className="mts-cursor-pointer  mts-text-xs mts-flex mts-items-center mts-gap-2 mts-text-dark-500 mts-font-medium"
                                 onClick={handleMaxClick}
                             >
                                 <span>
@@ -277,12 +277,12 @@ const Card: FC<CardProps> = ({ type }) => {
                                     )}{' '}
                                     {pay_token?.symbol}
                                 </span>
-                                <span className="mts-text-black mts-px-1 mts-bg-zinc-200 dark:mts-bg-zinc-700 dark:mts-text-white mts-text-[10px] mts-rounded-full">
+                                <span className="mts-text-black mts-px-1 mts-bg-dark-200 dark:mts-bg-dark-700 dark:mts-text-white mts-text-[10px] mts-rounded-full">
                                     {t('max')}
                                 </span>
                             </span>
                         ) : (
-                            <span className="mts-cursor-auto  mts-text-xs mts-text-zinc-500">
+                            <span className="mts-cursor-auto  mts-text-xs mts-text-dark-500">
                                 {balanceToken && receive_token && (
                                     <span>
                                         {formatNumber(
diff --git a/lib/components/SwapCard/CardButton.tsx b/lib/components/SwapCard/CardButton.tsx
index 8e785da..075802a 100644
--- a/lib/components/SwapCard/CardButton.tsx
+++ b/lib/components/SwapCard/CardButton.tsx
@@ -39,7 +39,7 @@ const CardButton: FC<CardButtonProps & PropsWithChildren> = ({
             }}
             data-testid={`card-button-${type}`}
             className={cn(
-                'mts-flex mts-gap-1 mts-items-center mts-transition-all mts-ease-in-out mts-rounded-full mts-py-1 mts-pr-2 mts-pl-1 mts-h-10 mts-font-semibold mts-text-sm md:mts-text-base mts-ltr mts-text-black dark:mts-text-white dark:mts-border-zinc-800 mts-border-[1px]',
+                'mts-flex mts-gap-1 mts-items-center mts-transition-all mts-ease-in-out mts-rounded-full mts-py-1 mts-pr-2 mts-pl-1 mts-h-10 mts-font-semibold mts-text-sm md:mts-text-base mts-ltr mts-text-black dark:mts-text-white  mts-border-dark-300 dark:mts-border-dark-800 mts-border-[1px]',
                 isLoading && 'mts-w-20 mts-h-10',
                 type === 'pay' && isLoading && 'mts-pointer-events-none',
                 type === 'receive' &&
diff --git a/lib/components/SwapCard/CardDialog.tsx b/lib/components/SwapCard/CardDialog.tsx
index b2141c3..7318226 100644
--- a/lib/components/SwapCard/CardDialog.tsx
+++ b/lib/components/SwapCard/CardDialog.tsx
@@ -278,7 +278,7 @@ const CardDialog: FC<CardDialogProps> = ({
                             animate={modalAnimation.animate}
                             exit={modalAnimation.exit}
                             className={clsx(
-                                'mts-fixed mts-bottom-0 mts-left-0 mts-flex mts-flex-col mts-shadow-[0px_0px_10px_rgba(0,0,0,0.05)] mts-rounded-t-2xl mts-bg-white dark:mts-bg-zinc-900 mts-p-4 mts-pt-4 mts-pb-2 mts-w-full mts-min-h-[92.5dvh] mts-max-h-[92.5dvh] mts-overflow-y-auto md:mts-shadow-[0_0px_10px_rgba(0,0,0,0.05)] md:mts-rounded-2xl md:mts-w-[90%] md:mts-max-w-[34.375rem] md:mts-h-auto md:mts-min-h-[21.875rem] md:mts-max-h-[70dvh]'
+                                'mts-fixed mts-bottom-0 mts-left-0 mts-flex mts-flex-col mts-shadow-[0px_0px_10px_rgba(0,0,0,0.05)] mts-rounded-t-2xl mts-bg-white dark:mts-bg-dark-900 mts-p-4 mts-pt-4 mts-pb-2 mts-w-full mts-min-h-[92.5dvh] mts-max-h-[92.5dvh] mts-overflow-y-auto md:mts-shadow-[0_0px_10px_rgba(0,0,0,0.05)] md:mts-rounded-2xl md:mts-w-[90%] md:mts-max-w-[34.375rem] md:mts-h-auto md:mts-min-h-[21.875rem] md:mts-max-h-[70dvh]'
                             )}
                             ref={ref}
                             onClick={(e) => {
@@ -295,8 +295,8 @@ const CardDialog: FC<CardDialogProps> = ({
                                 </button>
                             </div>
                             <div>
-                                <div className="mts-flex mts-items-center mts-transition-all mts-duration-200 mts-ease-in-out mts-mt-6 mts-mb-2 mts-border mts-border-black/10 mts-rounded-lg mts-bg-white dark:mts-bg-zinc-800 dark:mts-border-zinc-700 mts-px-3 mts-w-full mts-h-10 md:mts-h-14 hover:mts-bg-zinc-100 focus-within:mts-border-primary-500 dark:focus-within:mts-border-primary-500">
-                                    <Search className="mts-text-zinc-500 mts-text-lg md:mts-opacity-50" />
+                                <div className="mts-flex mts-items-center mts-transition-all mts-duration-200 mts-ease-in-out mts-mt-6 mts-mb-2 mts-border mts-border-black/10 mts-rounded-lg mts-bg-white dark:mts-bg-dark-800 dark:mts-border-dark-700 mts-px-3 mts-w-full mts-h-10 md:mts-h-14 hover:mts-bg-dark-100 focus-within:mts-border-primary-500 dark:focus-within:mts-border-primary-500">
+                                    <Search className="mts-text-dark-500 mts-text-lg md:mts-opacity-50" />
                                     <input
                                         className="mts-outline-none mts-bg-transparent mts-px-2 mts-w-full mts-h-full mts-text-black mts-text-sm md:mts-text-sm mts-font-normal"
                                         type="text"
@@ -313,7 +313,7 @@ const CardDialog: FC<CardDialogProps> = ({
                                     {pinnedTokens.map((item) => {
                                         return (
                                             <button
-                                                className="mts-flex mts-items-center mts-gap-1 mts-opacity-80 mts-transition-all mts-duration-300 mts-ease-in-out mts-cursor-pointer mts-rounded-full mts-bg-zinc-100 dark:mts-bg-zinc-800 mts-p-1 mts-px-2 mts-text-black dark:mts-text-white mts-text-[0.9rem] hover:mts-opacity-100"
+                                                className="mts-flex mts-items-center mts-gap-1 mts-opacity-80 mts-transition-all mts-duration-300 mts-ease-in-out mts-cursor-pointer mts-rounded-full mts-bg-dark-100 dark:mts-bg-dark-800 mts-p-1 mts-px-2 mts-text-black dark:mts-text-white mts-text-[0.9rem] hover:mts-opacity-100"
                                                 onClick={() => {
                                                     handleOnTokenSelect(item);
                                                 }}
@@ -454,7 +454,7 @@ const CardDialog: FC<CardDialogProps> = ({
                                         <>
                                             <div className="mts-flex mts-grow mts-flex-col mts-gap-2">
                                                 <div className="mts-flex mts-flex-col mts-justify-center mts-items-center mts-mt-1 mts-mb-1 mts-rounded-lg mts-bg-[var(--input-card-color)] mts-p-2 mts-text-[var(--text-black-color)]">
-                                                    <div className="mts-h-20 mts-w-20 mts-bg-zinc-100 mts-border-zinc-200 mts-border-[1px] mts-flex mts-items-center mts-justify-center   mts-rounded-full">
+                                                    <div className="mts-h-20 mts-w-20 mts-bg-dark-100 mts-border-dark-200 mts-border-[1px] mts-flex mts-items-center mts-justify-center   mts-rounded-full">
                                                         <Warning className="mts-text-red-500 mts-text-4xl " />
                                                     </div>
                                                     <h1 className="mts-font-bold mts-text-lg mts-mt-6 ">
@@ -500,7 +500,7 @@ const CardDialog: FC<CardDialogProps> = ({
                             <div className="mts-flex mts-justify-center mts-items-center mts-cursor-pointer mts-pt-2 mts-text-sm md:mts-hidden">
                                 <button
                                     onClick={handleOnClose}
-                                    className="mts-flex mts-justify-center mts-items-center mts-transition-all mts-duration-300 mts-ease-in-out mts-rounded-lg mts-bg-white dark:mts-bg-zinc-800 dark:mts-text-white dark:mts-border-zinc-700 mts-border-zinc-200 mts-border-[1px] mts-w-full mts-h-12 mts-text-black mts-text-center active:mts-scale-95"
+                                    className="mts-flex mts-justify-center mts-items-center mts-transition-all mts-duration-300 mts-ease-in-out mts-rounded-lg mts-bg-white dark:mts-bg-dark-800 dark:mts-text-white dark:mts-border-dark-700 mts-border-dark-200 mts-border-[1px] mts-w-full mts-h-12 mts-text-black mts-text-center active:mts-scale-95"
                                 >
                                     Close
                                 </button>
diff --git a/lib/components/SwapDetails/SwapDetails.tsx b/lib/components/SwapDetails/SwapDetails.tsx
index 376eee9..d14ba79 100644
--- a/lib/components/SwapDetails/SwapDetails.tsx
+++ b/lib/components/SwapDetails/SwapDetails.tsx
@@ -60,7 +60,7 @@ const SwapDetails = () => {
                             height: height ?? 0,
                         }}
                         exit={{ opacity: 0, height: 0 }}
-                        className="mts-flex mts-flex-col mts-gap-1 mts-w-full mts-overflow-hidden mts-bg-zinc-100 dark:mts-bg-zinc-900 dark:mts-border-zinc-800 mts-rounded-lg mts-border-zinc-200 mts-border-[1px]"
+                        className="mts-flex mts-flex-col mts-gap-1 mts-w-full mts-overflow-hidden mts-bg-dark-100 dark:mts-bg-dark-900 dark:mts-border-dark-800 mts-rounded-lg mts-border-dark-200 mts-border-[1px]"
                     >
                         <div
                             ref={ref}
@@ -69,7 +69,7 @@ const SwapDetails = () => {
                             <SwapKeyValue
                                 keyText={t('slippage_tolerance')}
                                 value={
-                                    <div className="mts-rounded-full mts-bg-zinc-200 dark:mts-bg-zinc-700 dark:mts-text-white mts-px-2 mts-py-1 mts-text-black">
+                                    <div className="mts-rounded-full mts-bg-dark-200 dark:mts-bg-dark-700 dark:mts-text-white mts-px-2 mts-py-1 mts-text-black">
                                         {slippage === 'auto' ? '1' : slippage}%{' '}
                                         {slippage === 'auto' ? t('auto') : ''}
                                     </div>
diff --git a/lib/components/WalletProfile/WalletProfile.tsx b/lib/components/WalletProfile/WalletProfile.tsx
index 931da48..50a453b 100644
--- a/lib/components/WalletProfile/WalletProfile.tsx
+++ b/lib/components/WalletProfile/WalletProfile.tsx
@@ -72,7 +72,7 @@ export const WalletProfile: FC<WalletProfileProps> = ({
             <div
                 className={cn(
                     `mts-cursor-pointer mts-border mts-rounded-full mts-bg-primary-500 mts-px-3 mts-py-2 mts-text-white mts-font-medium mts-text-sm mts-select-none`,
-                    wallet && 'mts-bg-zinc-100 mts-text-black'
+                    wallet && 'mts-bg-dark-100 mts-text-black'
                 )}
                 onClick={wallet ? handleButtonClick : handleConnectWallet}
                 ref={buttonRef}
diff --git a/lib/components/icons/Close.tsx b/lib/components/icons/Close.tsx
index 420bdb7..296377c 100644
--- a/lib/components/icons/Close.tsx
+++ b/lib/components/icons/Close.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import { FC } from 'react';
 
 type Props = {
     className?: string;
diff --git a/lib/components/icons/Search.tsx b/lib/components/icons/Search.tsx
index 96aec9f..5012812 100644
--- a/lib/components/icons/Search.tsx
+++ b/lib/components/icons/Search.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 type Props = {
     className?: string;
 };
diff --git a/lib/global.css b/lib/global.css
index 5a6b172..920ddfa 100644
--- a/lib/global.css
+++ b/lib/global.css
@@ -17,6 +17,18 @@
     --mts-primary-800: 13 78 37;
     --mts-primary-900: 7 39 19;
     --mts-primary-950: 4 22 10;
+
+    --mts-dark-50: 242 242 243;
+    --mts-dark-100: 226 226 228;
+    --mts-dark-200: 199 199 204;
+    --mts-dark-300: 170 170 177;
+    --mts-dark-400: 141 141 150;
+    --mts-dark-500: 113 113 123;
+    --mts-dark-600: 90 90 98;
+    --mts-dark-700: 68 68 74;
+    --mts-dark-800: 46 46 50;
+    --mts-dark-900: 22 22 24;
+    --mts-dark-950: 12 12 13;
 }
 
 .mts-default {
diff --git a/lib/store/options.store.ts b/lib/store/options.store.ts
index ae4dfec..b09dddf 100644
--- a/lib/store/options.store.ts
+++ b/lib/store/options.store.ts
@@ -26,7 +26,7 @@ export type SwapOptions = {
     layout_direction?: 'ltr' | 'rtl';
     ui_preferences?: {
         primary_color?: string;
-        theme?: 'light' | 'dark';
+        dark_color?: string;
         disable_provided_text?: boolean;
         show_swap_details?: boolean;
         show_settings_wallet?: boolean;
@@ -73,7 +73,10 @@ export const useOptionsStore = create<SwapOptionsActions & SwapOptionsStates>(
             const { options, userOptions } = get();
             if (JSON.stringify(option) === JSON.stringify(userOptions)) return;
             if (option.ui_preferences?.primary_color) {
-                setupColors(option.ui_preferences.primary_color);
+                setupColors(
+                    option.ui_preferences.primary_color,
+                    option.ui_preferences.dark_color
+                );
             }
             const newSchema = defaultsDeep(
                 option,
diff --git a/lib/utils/color/setupColors.ts b/lib/utils/color/setupColors.ts
index 0b6a5df..2effa5c 100644
--- a/lib/utils/color/setupColors.ts
+++ b/lib/utils/color/setupColors.ts
@@ -2,7 +2,7 @@ import { DEFAULT_PALETTE_CONFIG } from './constants';
 import { nanoid } from 'nanoid';
 import { createSwatches } from './createSwatches';
 import Color from 'color';
-export const setupColors = (color_raw: string) => {
+export const setupColors = (color_raw: string, dark_color_base?: string) => {
     try {
         const color = Color(color_raw).hex();
         const pallet = createSwatches({
@@ -15,6 +15,7 @@ export const setupColors = (color_raw: string) => {
 
         // Remove the first and last item
         const modifiedPallet = pallet.slice(1, -1);
+
         const cssVariableKeys = [
             '--mts-primary-50',
             '--mts-primary-100',
@@ -37,4 +38,40 @@ export const setupColors = (color_raw: string) => {
     } catch (error) {
         console.log(error);
     }
+
+    try {
+        if (!dark_color_base) return;
+        const darkColor = Color(dark_color_base).hex();
+        const darkPallet = createSwatches({
+            ...DEFAULT_PALETTE_CONFIG,
+            id: nanoid(),
+
+            value: darkColor.replace('#', '').toUpperCase(),
+            swatches: [],
+        }).map((item) => item.hex);
+
+        // Remove the first and last item
+        const modifiedDarkPallet = darkPallet.slice(1, -1);
+        const darkCssVariableKeys = [
+            '--mts-dark-50',
+            '--mts-dark-100',
+            '--mts-dark-200',
+            '--mts-dark-300',
+            '--mts-dark-400',
+            '--mts-dark-500',
+            '--mts-dark-600',
+            '--mts-dark-700',
+            '--mts-dark-800',
+            '--mts-dark-900',
+            '--mts-dark-950',
+        ];
+        modifiedDarkPallet.map((item, idx) => {
+            document.documentElement.style.setProperty(
+                darkCssVariableKeys[idx],
+                Color(item).rgb().array().join(' ')
+            );
+        });
+    } catch (error) {
+        console.log(error);
+    }
 };
diff --git a/tailwind.config.js b/tailwind.config.js
index 3046420..98a70a2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -23,6 +23,19 @@ export default {
                     900: 'rgb(var(--mts-primary-900) / <alpha-value>)',
                     950: 'rgb(var(--mts-primary-950) / <alpha-value>)',
                 },
+                dark: {
+                    50: 'rgb(var(--mts-dark-50) / <alpha-value>)',
+                    100: 'rgb(var(--mts-dark-100) / <alpha-value>)',
+                    200: 'rgb(var(--mts-dark-200) / <alpha-value>)',
+                    300: 'rgb(var(--mts-dark-300) / <alpha-value>)',
+                    400: 'rgb(var(--mts-dark-400) / <alpha-value>)',
+                    500: 'rgb(var(--mts-dark-500) / <alpha-value>)',
+                    600: 'rgb(var(--mts-dark-600) / <alpha-value>)',
+                    700: 'rgb(var(--mts-dark-700) / <alpha-value>)',
+                    800: 'rgb(var(--mts-dark-800) / <alpha-value>)',
+                    900: 'rgb(var(--mts-dark-900) / <alpha-value>)',
+                    950: 'rgb(var(--mts-dark-950) / <alpha-value>)',
+                },
             },
         },
     },

From 3e34795261ba42bf99a47eba1a39904e5c7b11fa Mon Sep 17 00:00:00 2001
From: HoseinBaseri <ho3ein8280@gmail.com>
Date: Thu, 30 Jan 2025 10:16:53 +0330
Subject: [PATCH 08/12] refactor: update styling for Swap components to enhance
 visual consistency and responsiveness

---
 lib/components/SwapButton/SwapButton.tsx | 2 +-
 lib/components/SwapCard/Card.tsx         | 8 ++++----
 lib/components/SwapCard/CardButton.tsx   | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/lib/components/SwapButton/SwapButton.tsx b/lib/components/SwapButton/SwapButton.tsx
index a45ad83..d586e6d 100644
--- a/lib/components/SwapButton/SwapButton.tsx
+++ b/lib/components/SwapButton/SwapButton.tsx
@@ -126,7 +126,7 @@ const SwapButton = () => {
             </AnimatePresence>
             <button
                 className={cn(
-                    'mts-mt-3 mts-rounded-lg mts-bg-primary-500 mts-border-[1px] mts-border-primary-600  mts-w-full mts-h-11 mts-text-white mts-text-sm md:mts-h-[3.25rem] md:mts-text-md lg:mts-rounded-xl lg:mts-h-[3.5rem] lg:mts-text-md disabled:mts-bg-primary-300 dark:disabled:mts-bg-primary-800 dark:disabled:mts-border-transparent dark:disabled:mts-text-white/50  disabled:mts-cursor-not-allowed',
+                    'mts-mt-3 mts-rounded-lg mts-bg-primary-500 mts-border-[1px] mts-border-primary-600  mts-w-full mts-h-11 mts-text-white mts-text-sm md:mts-h-12 md:mts-text-md lg:mts-rounded-xl lg:mts-text-md disabled:mts-bg-primary-300 dark:disabled:mts-bg-primary-800 dark:disabled:mts-border-transparent dark:disabled:mts-text-white/50  disabled:mts-cursor-not-allowed',
                     tonConnectInstance?.wallet &&
                         isRouteAvailable &&
                         !bestRoute.pool_data.status
diff --git a/lib/components/SwapCard/Card.tsx b/lib/components/SwapCard/Card.tsx
index d63562d..fb35a11 100644
--- a/lib/components/SwapCard/Card.tsx
+++ b/lib/components/SwapCard/Card.tsx
@@ -173,7 +173,7 @@ const Card: FC<CardProps> = ({ type }) => {
         <>
             <div
                 className={cn(
-                    'mts-flex mts-flex-col mts-w-full mts-text-base mts-bg-dark-50 dark:mts-bg-dark-900 dark:mts-border-transparent mts-border-[1px] mts-border-dark-200 mts-p-4 mts-rounded-lg',
+                    'mts-flex mts-flex-col mts-w-full mts-text-base mts-bg-dark-50 dark:mts-bg-dark-900 dark:mts-border-transparent mts-border-[1px] mts-border-dark-200 mts-p-4 mts-rounded-2xl',
                     type === 'receive' && 'mts-m-[2px]'
                 )}
             >
@@ -261,15 +261,15 @@ const Card: FC<CardProps> = ({ type }) => {
                                 </div>
                             )}
                         </CardButton>
-                        {type === 'pay' && balanceToken ? (
+                        {type === 'pay' ? (
                             <span
-                                className="mts-cursor-pointer  mts-text-xs mts-flex mts-items-center mts-gap-2 mts-text-dark-500 mts-font-medium"
+                                className="mts-cursor-pointer  mts-text-xs mts-flex mts-items-center mts-gap-2 dark:mts-text-white/70  mts-font-medium"
                                 onClick={handleMaxClick}
                             >
                                 <span>
                                     {formatNumber(
                                         +fromNano(
-                                            balanceToken.balance,
+                                            balanceToken?.balance || 0,
                                             pay_token!.decimal
                                         ),
                                         2,
diff --git a/lib/components/SwapCard/CardButton.tsx b/lib/components/SwapCard/CardButton.tsx
index 075802a..2c22831 100644
--- a/lib/components/SwapCard/CardButton.tsx
+++ b/lib/components/SwapCard/CardButton.tsx
@@ -39,7 +39,7 @@ const CardButton: FC<CardButtonProps & PropsWithChildren> = ({
             }}
             data-testid={`card-button-${type}`}
             className={cn(
-                'mts-flex mts-gap-1 mts-items-center mts-transition-all mts-ease-in-out mts-rounded-full mts-py-1 mts-pr-2 mts-pl-1 mts-h-10 mts-font-semibold mts-text-sm md:mts-text-base mts-ltr mts-text-black dark:mts-text-white  mts-border-dark-300 dark:mts-border-dark-800 mts-border-[1px]',
+                'mts-flex mts-gap-1 mts-items-center mts-transition-all mts-ease-in-out mts-rounded-full mts-py-1 mts-pr-2 mts-pl-1 mts-h-10 mts-font-semibold mts-text-sm md:mts-text-base mts-ltr mts-text-black dark:mts-text-white  mts-border-dark-300 dark:mts-border-white/10 mts-border-[1px]',
                 isLoading && 'mts-w-20 mts-h-10',
                 type === 'pay' && isLoading && 'mts-pointer-events-none',
                 type === 'receive' &&

From a23f09d963e24b1ce14c1f98f4d13331b9e9133a Mon Sep 17 00:00:00 2001
From: HoseinBaseri <ho3ein8280@gmail.com>
Date: Thu, 30 Jan 2025 10:43:00 +0330
Subject: [PATCH 09/12] refactor: comment out Sentry initialization and update
 balance token decimal handling

---
 lib/components/SwapCard/Card.tsx | 2 +-
 lib/utils/color/setupColors.ts   | 1 +
 package.json                     | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/lib/components/SwapCard/Card.tsx b/lib/components/SwapCard/Card.tsx
index fb35a11..e214bae 100644
--- a/lib/components/SwapCard/Card.tsx
+++ b/lib/components/SwapCard/Card.tsx
@@ -270,7 +270,7 @@ const Card: FC<CardProps> = ({ type }) => {
                                     {formatNumber(
                                         +fromNano(
                                             balanceToken?.balance || 0,
-                                            pay_token!.decimal
+                                            pay_token?.decimal || 0
                                         ),
                                         2,
                                         false
diff --git a/lib/utils/color/setupColors.ts b/lib/utils/color/setupColors.ts
index 2effa5c..c29e106 100644
--- a/lib/utils/color/setupColors.ts
+++ b/lib/utils/color/setupColors.ts
@@ -47,6 +47,7 @@ export const setupColors = (color_raw: string, dark_color_base?: string) => {
             id: nanoid(),
 
             value: darkColor.replace('#', '').toUpperCase(),
+            valueStop: 950,
             swatches: [],
         }).map((item) => item.hex);
 
diff --git a/package.json b/package.json
index a1ac10c..b918268 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@mytonswap/widget",
     "description": "MyTonSwap Widget - Easy to use swap widget for React on TON Blockchain",
-    "version": "2.0.30",
+    "version": "2.0.34",
     "type": "module",
     "author": {
         "name": "MyTonSwap",

From 90bae65e42c8404a57ce40496b7bdded97cbea3d Mon Sep 17 00:00:00 2001
From: HoseinBaseri <ho3ein8280@gmail.com>
Date: Mon, 3 Feb 2025 11:39:20 +0330
Subject: [PATCH 10/12] refactor: update class names for consistency in
 CardDialog component

---
 lib/components/SwapCard/CardDialog.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/components/SwapCard/CardDialog.tsx b/lib/components/SwapCard/CardDialog.tsx
index 7318226..96c3595 100644
--- a/lib/components/SwapCard/CardDialog.tsx
+++ b/lib/components/SwapCard/CardDialog.tsx
@@ -313,14 +313,14 @@ const CardDialog: FC<CardDialogProps> = ({
                                     {pinnedTokens.map((item) => {
                                         return (
                                             <button
-                                                className="mts-flex mts-items-center mts-gap-1 mts-opacity-80 mts-transition-all mts-duration-300 mts-ease-in-out mts-cursor-pointer mts-rounded-full mts-bg-dark-100 dark:mts-bg-dark-800 mts-p-1 mts-px-2 mts-text-black dark:mts-text-white mts-text-[0.9rem] hover:mts-opacity-100"
+                                                className="mts-flex mts-items-center mts-gap-1 mts-opacity-80 mts-transition-all mts-duration-300 mts-ease-in-out mts-cursor-pointer mts-rounded-full mts-bg-dark-100 dark:mts-bg-dark-800  mts-p-1 mts-px-2 mts-text-black dark:mts-text-white mts-text-[0.9rem] hover:mts-opacity-100"
                                                 onClick={() => {
                                                     handleOnTokenSelect(item);
                                                 }}
                                                 key={item.address}
                                             >
                                                 <div
-                                                    className="mts-rounded-full mts-bg-contain mts-w-5 mts-h-5"
+                                                    className="mts-rounded-full !mts-bg-contain mts-w-5 mts-h-5"
                                                     style={{
                                                         background: `url(${item.image}) var(--background-color)`,
                                                     }}

From e0fc8138c559b6998c2abfa05708995492adb65b Mon Sep 17 00:00:00 2001
From: HoseinBaseri <ho3ein8280@gmail.com>
Date: Mon, 3 Feb 2025 11:43:00 +0330
Subject: [PATCH 11/12] 2.0.35

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index b918268..e7051c6 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@mytonswap/widget",
     "description": "MyTonSwap Widget - Easy to use swap widget for React on TON Blockchain",
-    "version": "2.0.34",
+    "version": "2.0.35",
     "type": "module",
     "author": {
         "name": "MyTonSwap",

From 989f034335801ebd15628ed2cc2b1666cb2c5323 Mon Sep 17 00:00:00 2001
From: HoseinBaseri <ho3ein8280@gmail.com>
Date: Mon, 3 Feb 2025 11:44:32 +0330
Subject: [PATCH 12/12] 3.0.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e7051c6..29e01c0 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@mytonswap/widget",
     "description": "MyTonSwap Widget - Easy to use swap widget for React on TON Blockchain",
-    "version": "2.0.35",
+    "version": "3.0.0",
     "type": "module",
     "author": {
         "name": "MyTonSwap",