add support for absolute imports

djeck1432 · Jan 27, 2025 · bcd572c · bcd572c
1 parent 8cba2d5
commit bcd572c
Show file tree

Hide file tree

Showing 40 changed files with 201 additions and 209 deletions.
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
@@ -1,30 +1,30 @@
 import React, { useState, useEffect } from 'react';
 import { Routes, Route, useNavigate, useLocation } from 'react-router-dom';
 import './globals.css';
-import Header from './components/layout/header/Header';
-import Dashboard from './pages/dashboard/Dashboard';
-import Footer from './components/layout/footer/Footer';
-import SpotnetApp from './pages/spotnet-app/SpotnetApp';
-import Form from './pages/form/Form';
+import Header from '@/components/layout/header/Header';
+import Dashboard from '@/pages/dashboard/Dashboard';
+import Footer from '@/components/layout/footer/Footer';
+import SpotnetApp from '@/pages/spotnet-app/SpotnetApp';
+import Form from '@/pages/form/Form';
 import { createPortal } from 'react-dom';
-import { logout } from './services/wallet';
-import { getTelegramUserWalletId } from './services/telegram';
-import Documentation from './pages/documentation/Documentation';
-import TermsAndConditionsPage from './pages/terms-and-conditions/TermsAndConditions';
+import { logout } from '@/services/wallet';
+import { getTelegramUserWalletId } from '@/services/telegram';
+import Documentation from '@/pages/documentation/Documentation';
+import TermsAndConditionsPage from '@/pages/terms-and-conditions/TermsAndConditions';
 
-import Withdraw from './pages/withdraw/Withdraw';
-import { useWalletStore } from './stores/useWalletStore';
-import { Notifier, notify } from './components/layout/notifier/Notifier';
-import { useConnectWallet } from './hooks/useConnectWallet';
-import OverviewPage from './pages/overview/Overview';
-import { ActionModal } from './components/ui/action-modal';
-import Stake from './pages/stake/Stake';
-import { TELEGRAM_BOT_LINK } from './utils/constants';
-import { useCheckMobile } from './hooks/useCheckMobile';
-import PositionHistory from './pages/position-history/PositionHistory';
-import WithdrawAll from './pages/spotnet/dashboard/withdraw-all/WithdrawAll';
-import { DefiSpringPage } from './pages/spotnet/defi-spring/DefiSpring';
-import { AddDeposit } from './pages/add-deposit/AddDeposit';
+import Withdraw from '@/pages/withdraw/Withdraw';
+import { useWalletStore } from '@/stores/useWalletStore';
+import { Notifier, notify } from '@/components/layout/notifier/Notifier';
+import { useConnectWallet } from '@/hooks/useConnectWallet';
+import OverviewPage from '@/pages/overview/Overview';
+import { ActionModal } from '@/components/ui/action-modal';
+import Stake from '@/pages/stake/Stake';
+import { TELEGRAM_BOT_LINK } from '@/utils/constants';
+import { useCheckMobile } from '@/hooks/useCheckMobile';
+import PositionHistory from '@/pages/position-history/PositionHistory';
+import WithdrawAll from '@/pages/spotnet/dashboard/withdraw-all/WithdrawAll';
+import { DefiSpringPage } from '@/pages/spotnet/defi-spring/DefiSpring';
+import { AddDeposit } from '@/pages/add-deposit/AddDeposit';
 
 function App() {
   const { setWalletId, removeWalletId } = useWalletStore();

diff --git a/frontend/src/components/dashboard/borrow/Borrow.jsx b/frontend/src/components/dashboard/borrow/Borrow.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import './borrow.css';
-import BorrowIcon from '../../../assets/icons/borrow_dynamic.svg?react';
+import BorrowIcon from '@/assets/icons/borrow_dynamic.svg?react';
 
 function Borrow({ data }) {
   return (

diff --git a/frontend/src/components/dashboard/collateral/Collateral.jsx b/frontend/src/components/dashboard/collateral/Collateral.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import './collateral.css';
-import CollateralIcon from '../../../assets/icons/collateral_dynamic.svg?react';
+import CollateralIcon from '@/assets/icons/collateral_dynamic.svg?react';
 import { TrendingDown, TrendingUp } from 'lucide-react';
 
 function Collateral({ data, startSum, currentSum, getCurrentSumColor }) {

diff --git a/frontend/src/components/dashboard/dashboard-tab/DashboardTabs.jsx b/frontend/src/components/dashboard/dashboard-tab/DashboardTabs.jsx
@@ -1,8 +1,8 @@
 import './dashboardTabs.css';
-import DepositIcon from '../../../assets/icons/deposited_dynamic.svg?react';
-import CollateralIcon from '../../../assets/icons/collateral_dynamic.svg?react';
-import BorrowIcon from '../../../assets/icons/borrow_dynamic.svg?react';
-import { DASHBOARD_TABS } from '../../../utils/constants';
+import DepositIcon from '@/assets/icons/deposited_dynamic.svg?react';
+import CollateralIcon from '@/assets/icons/collateral_dynamic.svg?react';
+import BorrowIcon from '@/assets/icons/borrow_dynamic.svg?react';
+import { DASHBOARD_TABS } from '@/utils/constants';
 
 function DashboardTabs({ activeTab, switchTab }) {
   const { COLLATERAL, BORROW, DEPOSITED } = DASHBOARD_TABS;

diff --git a/frontend/src/components/dashboard/deposited/Deposited.jsx b/frontend/src/components/dashboard/deposited/Deposited.jsx
@@ -1,7 +1,7 @@
 import './deposited.css';
-import EthIcon from '../../../assets/icons/ethereum.svg?react';
-import StrkIcon from '../../../assets/icons/strk.svg?react';
-import UsdIcon from '../../../assets/icons/usdc-icon.svg?react';
+import EthIcon from '@/assets/icons/ethereum.svg?react';
+import StrkIcon from '@/assets/icons/strk.svg?react';
+import UsdIcon from '@/assets/icons/usdc-icon.svg?react';
 
 function Deposited({ data }) {
   return (

diff --git a/frontend/src/components/home/about/About.jsx b/frontend/src/components/home/about/About.jsx
@@ -1,9 +1,10 @@
 import React from 'react';
-import ZkLend from '../../../assets/icons/zklend_eth_collateral.svg?react';
-import BorrowUSDC from '../../../assets/icons/borrow_usdc.svg?react';
-import EkuboSwap from '../../../assets/icons/ekubo_swap.svg?react';
-import Repeat from '../../../assets/icons/repeats.svg?react';
-import StarMaker from '../../layout/star-maker/StarMaker';
+import ZkLend from '@/assets/icons/zklend_eth_collateral.svg?react';
+import BorrowUSDC from '@/assets/icons/borrow_usdc.svg?react';
+import EkuboSwap from '@/assets/icons/ekubo_swap.svg?react';
+import Repeat from '@/assets/icons/repeats.svg?react';
+import StarMaker from '@/components/layout/star-maker/StarMaker';
+
 import './about.css';
 
 const CardData = [

diff --git a/frontend/src/components/home/dont-miss/DontMiss.jsx b/frontend/src/components/home/dont-miss/DontMiss.jsx
@@ -1,11 +1,11 @@
 import './dontMiss.css';
 import React from 'react';
-import Rocket from '../../../assets/icons/rocket.svg?react';
-import Hand from '../../../assets/images/hand.svg?react';
-import Star from '../../../assets/particles/star.svg?react';
+import Rocket from '@/assets/icons/rocket.svg?react';
+import Hand from '@/assets/images/hand.svg?react';
+import Star from '@/assets/particles/star.svg?react';
 import { useNavigate } from 'react-router-dom';
-import { notify } from '../../../components/layout/notifier/Notifier';
-import { useWalletStore } from '../../../stores/useWalletStore';
+import { notify } from '@/components/layout/notifier/Notifier';
+import { useWalletStore } from '@/stores/useWalletStore';
 
 const DontMiss = () => {
   const { walletId } = useWalletStore();

diff --git a/frontend/src/components/home/home/Home.jsx b/frontend/src/components/home/home/Home.jsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
-import SmallStar from '../../../assets/particles/small_star.svg?react';
-import StarMaker from '../../layout/star-maker/StarMaker';
-import Decoration from '../../../assets/particles/deco.svg?react';
-import Starknet from '../../../assets/particles/starknet.svg?react';
-import Rocket from '../../../assets/icons/rocket.svg?react';
+import SmallStar from '@/assets/particles/small_star.svg?react';
+import StarMaker from '@/components/layout/star-maker/StarMaker';
+import Decoration from '@/assets/particles/deco.svg?react';
+import Starknet from '@/assets/particles/starknet.svg?react';
+import Rocket from '@/assets/icons/rocket.svg?react';
 import './home.css';
-import { useWalletStore } from '../../../stores/useWalletStore';
-import { notify } from '../../layout/notifier/Notifier';
+import { useWalletStore } from '@/stores/useWalletStore';
+import { notify } from '@/components/layout/notifier/Notifier';
 
 function Home() {
   const { walletId } = useWalletStore();

diff --git a/frontend/src/components/home/information/Information.jsx b/frontend/src/components/home/information/Information.jsx
@@ -1,7 +1,7 @@
 import './information.css';
 import React, { useEffect, useState } from 'react';
-import StarMaker from '../../layout/star-maker/StarMaker';
-import { axiosInstance } from '../../../utils/axios';
+import StarMaker from '@/components/layout/star-maker/StarMaker';
+import { axiosInstance } from '@/utils/axios';
 
 const Information = () => {
   const [data, setData] = useState({ total_opened_amount: 0, unique_users: 0 });

diff --git a/frontend/src/components/home/partnership/Partnership.jsx b/frontend/src/components/home/partnership/Partnership.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import './partnership.css';
-import ZklendLogo from '../../../assets/images/zklend_logo.svg?react';
-import EkuboLogo from '../../../assets/images/ekubo_logo.svg?react';
-import Star from '../../../assets/particles/star.svg?react';
+import ZklendLogo from '@/assets/images/zklend_logo.svg?react';
+import EkuboLogo from '@/assets/images/ekubo_logo.svg?react';
+import Star from '@/assets/particles/star.svg?react';
 
 const Partnership = () => {
   const logos = [];

diff --git a/frontend/src/components/layout/footer/Footer.jsx b/frontend/src/components/layout/footer/Footer.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
-import TwitterIcon from '../../../assets/icons/new-twitter.svg?react';
-import TelegramIcon from '../../../assets/icons/telegram.svg?react';
-import GithubIcon from '../../../assets/icons/github.svg?react';
-import DashboardIcon from '../../../assets/icons/dashboard-icon.svg?react';
-import FormIcon from '../../../assets/icons/form-icon.svg?react';
+import TwitterIcon from '@/assets/icons/new-twitter.svg?react';
+import TelegramIcon from '@/assets/icons/telegram.svg?react';
+import GithubIcon from '@/assets/icons/github.svg?react';
+import DashboardIcon from '@/assets/icons/dashboard-icon.svg?react';
+import FormIcon from '@/assets/icons/form-icon.svg?react';
 
 import './footer.css';
 

diff --git a/frontend/src/components/layout/header/Header.jsx b/frontend/src/components/layout/header/Header.jsx
@@ -1,15 +1,15 @@
 import React, { useState, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import { NavLink } from 'react-router-dom';
-import Logo from '../../../assets/icons/spotnet-logo.svg?react';
-import WalletSection from '../wallet-section/WalletSection';
-import NavigationLinks from '../navigation-links/NavigationLinks';
-import useLockBodyScroll from '../../../hooks/useLockBodyScroll';
-import MobDropdownMenu from '../mob-dropdown-menu/MobDropdownMenu';
+import Logo from '@/assets/icons/spotnet-logo.svg?react';
+import WalletSection from '@/components/layout/wallet-section/WalletSection';
+import NavigationLinks from '@/components/layout/navigation-links/NavigationLinks';
+import useLockBodyScroll from '@/hooks/useLockBodyScroll';
+import MobDropdownMenu from '@/components/layout/mob-dropdown-menu/MobDropdownMenu';
 import './header.css';
-import '../../../globals.css';
-import { ReportBugButton } from '../../../components/report-button/ReportBugButton';
-import { ReportBugModal } from '../../../components/report-modal/ReportBugModal';
+import '@/globals.css';
+import { ReportBugButton } from '@/components/report-button/ReportBugButton';
+import { ReportBugModal } from '@/components/report-modal/ReportBugModal';
 
 function Header({ onConnectWallet, onLogout }) {
   const [isModalOpen, setIsModalOpen] = useState(false);

diff --git a/frontend/src/components/layout/mob-dropdown-menu/MobDropdownMenu.jsx b/frontend/src/components/layout/mob-dropdown-menu/MobDropdownMenu.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
-import ArrowDownIcon from '../../../assets/icons/dropdown-arrow.svg?react';
-import ReloadIcon from '../../../assets/icons/reload.svg?react';
-import OpenBotIcon from '../../../assets/icons/bot.svg?react';
-import TermsIcon from '../../../assets/icons/terms.svg?react';
+import ArrowDownIcon from '@/assets/icons/dropdown-arrow.svg?react';
+import ReloadIcon from '@/assets/icons/reload.svg?react';
+import OpenBotIcon from '@/assets/icons/bot.svg?react';
+import TermsIcon from '@/assets/icons/terms.svg?react';
 import './mobDropdownMenu.css';
 
 const menuItems = [

diff --git a/frontend/src/components/layout/sidebar/SidebarItem.jsx b/frontend/src/components/layout/sidebar/SidebarItem.jsx
@@ -1,4 +1,4 @@
-import addSquare from '../../../assets/icons/add-square.svg?react';
+import addSquare from '@/assets/icons/add-square.svg?react';
 import { ChevronDown, ChevronUp } from 'lucide-react';
 
 export const SidebarItem = ({ item: { icon, name }, isExpanded, hasChildren, isNested }) => {

diff --git a/frontend/src/components/layout/star-maker/StarMaker.jsx b/frontend/src/components/layout/star-maker/StarMaker.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import Star from '../../../assets/particles/star.svg?react';
+import Star from '@/assets/particles/star.svg?react';
 
 const StarMaker = ({ starData }) =>
   starData.map((star, index) => (

diff --git a/frontend/src/components/layout/wallet-section/WalletSection.jsx b/frontend/src/components/layout/wallet-section/WalletSection.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { Button } from '../../../components/ui/custom-button/Button';
-import { useWalletStore } from '../../../stores/useWalletStore';
+import { Button } from '@/assets/components/ui/custom-button/Button';
+import { useWalletStore } from '@/assetsstores/useWalletStore';
 
 const WalletSection = ({ onConnectWallet, onLogout }) => {
   const { walletId } = useWalletStore();

diff --git a/frontend/src/components/report-modal/ReportBugModal.jsx b/frontend/src/components/report-modal/ReportBugModal.jsx
@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 import './ReportBugModal.css';
-import telegramIcon from '../../assets/icons/telegram.svg';
-import { Button } from '../../components/ui/custom-button/Button';
-import { useWalletStore } from '../../stores/useWalletStore';
-import { useBugReport } from '../../hooks/useBugReport';
+import telegramIcon from '@/assets/icons/telegram.svg';
+import { Button } from '@/components/ui/custom-button/Button';
+import { useWalletStore } from '@/stores/useWalletStore';
+import { useBugReport } from '@/hooks/useBugReport';
 
 export function ReportBugModal({ onClose }) {
   const { walletId } = useWalletStore();

diff --git a/frontend/src/components/ui/action-modal/ActionModal.jsx b/frontend/src/components/ui/action-modal/ActionModal.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import './actionModal.css';
-import { Button } from '../../../components/ui/custom-button/Button';
-import useLockBodyScroll from '../../../hooks/useLockBodyScroll';
+import { Button } from '@/assets/components/ui/custom-button/Button';
+import useLockBodyScroll from '@/assets/hooks/useLockBodyScroll';
 
 const ActionModal = ({
   isOpen,

diff --git a/frontend/src/components/ui/balance-cards/BalanceCards.jsx b/frontend/src/components/ui/balance-cards/BalanceCards.jsx
@@ -1,10 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import { useMatchMedia } from '../../../hooks/useMatchMedia';
-import { getBalances } from '../../../services/wallet';
-import { useWalletStore } from '../../../stores/useWalletStore';
-import ETH from '../../../assets/icons/ethereum.svg?react';
-import USDC from '../../../assets/icons/borrow_usdc.svg?react';
-import STRK from '../../../assets/icons/strk.svg?react';
+import { useMatchMedia } from '@/hooks/useMatchMedia';
+import { getBalances } from '@/services/wallet';
+import { useWalletStore } from '@/stores/useWalletStore';
+
+import ETH from '@/assets/icons/ethereum.svg?react';
+import USDC from '@/assets/icons/borrow_usdc.svg?react';
+import STRK from '@/assets/icons/strk.svg?react';
 import './balanceCards.css';
 
 const BalanceCards = ({ className }) => {

diff --git a/frontend/src/components/ui/multiplier-selector/MultiplierSelector.jsx b/frontend/src/components/ui/multiplier-selector/MultiplierSelector.jsx
@@ -1,6 +1,6 @@
 import React, { useMemo, useCallback, useState, useRef, useEffect } from 'react';
-import { useMaxMultiplier } from '../../../hooks/useMaxMultiplier';
-import sliderThumb from '../../../assets/icons/slider_thumb.svg?react';
+import { useMaxMultiplier } from '@/hooks/useMaxMultiplier';
+import sliderThumb from '@/assets/icons/slider_thumb.svg?react';
 import './multiplier.css';
 
 const MultiplierSelector = ({ setSelectedMultiplier, selectedToken }) => {

diff --git a/frontend/src/components/ui/token-selector/TokenSelector.jsx b/frontend/src/components/ui/token-selector/TokenSelector.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import ETH from '../../../assets/icons/ethereum.svg?react';
-import USDC from '../../../assets/icons/borrow_usdc.svg?react';
-import STRK from '../../../assets/icons/strk.svg?react';
+import ETH from '@/assets/icons/ethereum.svg?react';
+import USDC from '@/assets/icons/borrow_usdc.svg?react';
+import STRK from '@/assets/icons/strk.svg?react';
 import './tokenSelector.css';
 
 const Tokens = [

diff --git a/frontend/src/components/vault/VaultLayout.jsx b/frontend/src/components/vault/VaultLayout.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Outlet } from 'react-router-dom';
 import './vaultLayout.css';
-import Sidebar from '../../components/layout/sidebar/Sidebar';
+import Sidebar from '@/components/layout/sidebar/Sidebar';
 
 export function VaultLayout({ children }) {
   const vaultItems = [

diff --git a/frontend/src/components/vault/gas-fee/GasFee.jsx b/frontend/src/components/vault/gas-fee/GasFee.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import SettingIcon from '../../../assets/icons/settings.svg?react';
+import SettingIcon from '@/assets/icons/settings.svg?react';
 import './gasFee.css';
 
 export default function GasFee() {

diff --git a/frontend/src/pages/DashboardLayout.jsx b/frontend/src/pages/DashboardLayout.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import Sidebar from '../components/layout/sidebar/Sidebar';
+import Sidebar from '@/components/layout/sidebar/Sidebar';
 import './DashboardLayout.css';
-import clockIcon from '../assets/icons/clock.svg';
-import computerIcon from '../assets/icons/computer-icon.svg';
-import depositIcon from '../assets/icons/deposit.svg';
-import withdrawIcon from '../assets/icons/withdraw.svg';
+import clockIcon from '@/assets/icons/clock.svg';
+import computerIcon from '@/assets/icons/computer-icon.svg';
+import depositIcon from '@/assets/icons/deposit.svg';
+import withdrawIcon from '@/assets/icons/withdraw.svg';
 
 const dashboardItems = [
   {

diff --git a/frontend/src/pages/add-deposit/AddDeposit.jsx b/frontend/src/pages/add-deposit/AddDeposit.jsx
@@ -1,19 +1,14 @@
-import React, { useState } from 'react';
-import HealthIcon from '../../assets/icons/health.svg?react';
-import EthIcon from '../../assets/icons/ethereum.svg?react';
-import { useAddDeposit } from '../../hooks/useAddDeposit';
+import EthIcon from '@/assets/icons/ethereum.svg?react';
+import HealthIcon from '@/assets/icons/health.svg?react';
+import Card from '@/components/ui/card/Card';
+import { Button } from '@/components/ui/custom-button/Button';
+import TokenSelector from '@/components/ui/token-selector/TokenSelector';
+import { useAddDeposit } from '@/hooks/useAddDeposit';
+import useDashboardData from '@/hooks/useDashboardData';
+import { NUMBER_REGEX } from '@/utils/regex';
+import { useState } from 'react';
 import DashboardLayout from '../DashboardLayout';
 import './addDeposit.css';
-import Card from '../../components/ui/card/Card';
-import TokenSelector from '../../components/ui/token-selector/TokenSelector';
-import { NUMBER_REGEX } from '../../utils/regex';
-import { Button } from '../../components/ui/custom-button/Button';
-import Sidebar from '../../components/layout/sidebar/Sidebar';
-import clockIcon from '../../assets/icons/clock.svg';
-import computerIcon from '../../assets/icons/computer-icon.svg';
-import depositIcon from '../../assets/icons/deposit.svg';
-import withdrawIcon from '../../assets/icons/withdraw.svg';
-import useDashboardData from '../../hooks/useDashboardData';
 
 export const AddDeposit = () => {
   const formatNumber = (value, currency = false) => {