refactor: remove alias imports

apps/portal/package.json

@@ -108,7 +108,6 @@
     "storybook": "^7.6.5",
     "typescript": "^5.4.5",
     "vite": "^5.2.9",
-    "vite-plugin-svgr": "^4.2.0",
-    "vite-tsconfig-paths": "^4.3.2"
+    "vite-plugin-svgr": "^4.2.0"
   }
 }

apps/portal/src/App.Theme.tsx

@@ -1,13 +1,13 @@
 import '@talismn/ui/assets/css/talismn.css'
 
-import ATApocRevelations from '@assets/fonts/AT-Apoc-Revelations.woff'
-import SurtRegular from '@assets/fonts/Surt-Regular.woff'
-import SurtSemiBold from '@assets/fonts/Surt-SemiBold.woff2'
-import SurtSemiBoldExpanded from '@assets/fonts/Surt-SemiBoldExp.woff2'
-import SurtSemiBoldExtended from '@assets/fonts/Surt-SemiBoldExtended.woff2'
 import { Global, css } from '@emotion/react'
 import { ThemeProvider, theme, type Theme } from '@talismn/ui'
 import { type PropsWithChildren } from 'react'
+import ATApocRevelations from './assets/fonts/AT-Apoc-Revelations.woff'
+import SurtRegular from './assets/fonts/Surt-Regular.woff'
+import SurtSemiBold from './assets/fonts/Surt-SemiBold.woff2'
+import SurtSemiBoldExpanded from './assets/fonts/Surt-SemiBoldExp.woff2'
+import SurtSemiBoldExtended from './assets/fonts/Surt-SemiBoldExtended.woff2'
 
 /*
   base style definitions

apps/portal/src/App.tsx

@@ -3,24 +3,24 @@ import '@polkadot/api-augment/substrate'
 import '@talismn/astar-types/augment-api'
 import '@talismn/astar-types/types-lookup'
 
-import FairyBreadBanner from '@components/legacy/archetypes/FairyBreadBanner'
-import { TalismanHandLoader } from '@components/legacy/TalismanHandLoader'
-import ErrorBoundary from '@components/widgets/ErrorBoundary'
-import Development from '@components/widgets/development'
-import { AccountWatcher, SignetWatcher } from '@domains/accounts'
-import { BalancesWatcher } from '@domains/balances'
-import { chainDeriveState, chainQueryMultiState, chainQueryState } from '@domains/common/recoils/query'
-import { ExtensionWatcher, TalismanExtensionSynchronizer } from '@domains/extension'
-import { EvmProvider } from '@domains/extension/wagmi'
-import * as Portfolio from '@libs/portfolio'
-import TalismanProvider from '@libs/talisman'
-import router from '@routes'
 import { PolkadotApiProvider } from '@talismn/react-polkadot-api'
 import { PostHogProvider } from 'posthog-js/react'
 import { Suspense } from 'react'
 import { RouterProvider } from 'react-router-dom'
 import { RecoilRoot } from 'recoil'
 import ThemeProvider from './App.Theme'
+import { TalismanHandLoader } from './components/legacy/TalismanHandLoader'
+import FairyBreadBanner from './components/legacy/archetypes/FairyBreadBanner'
+import ErrorBoundary from './components/widgets/ErrorBoundary'
+import Development from './components/widgets/development'
+import { AccountWatcher, SignetWatcher } from './domains/accounts'
+import { BalancesWatcher } from './domains/balances'
+import { chainDeriveState, chainQueryMultiState, chainQueryState } from './domains/common'
+import { ExtensionWatcher, TalismanExtensionSynchronizer } from './domains/extension'
+import { EvmProvider } from './domains/extension/wagmi'
+import * as Portfolio from './libs/portfolio'
+import TalismanProvider from './libs/talisman'
+import router from './routes'
 
 const Loader = () => {
   return (

apps/portal/src/components/legacy/Await.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import Loader from '@icons/loader.svg?react'
+import Loader from '../../assets/icons/loader.svg?react'
 
 export const StyledLoader = styled(({ className }: { className?: string }) => (
   <div className={`await ${className ?? ''}`}>

apps/portal/src/components/legacy/Banner.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import { device } from '@util/breakpoints'
+import { device } from '../../util/breakpoints'
 
 type BannerProps = {
   backgroundImage?: string

apps/portal/src/components/legacy/Button.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/restrict-template-expressions */
-import IconLoading from '@assets/icons/loader.svg?react'
+import IconLoading from '../../assets/icons/loader.svg?react'
 import { css } from '@emotion/react'
 import styled from '@emotion/styled'
 import { omit } from 'lodash'

apps/portal/src/components/legacy/ChainLogo.tsx

@@ -1,4 +1,4 @@
-import { Image } from '@components/legacy'
+import { Image } from './'
 import styled from '@emotion/styled'
 
 export default styled(({ chain, type, className }: { chain: any; type: string; size?: number; className?: string }) => {

apps/portal/src/components/legacy/CopyButton.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import Copy from '@icons/copy.svg?react'
+import Copy from '../../assets/icons/copy.svg?react'
 
 type CopyButtonProps = {
   className?: string

apps/portal/src/components/legacy/DesktopRequired.tsx

@@ -1,6 +1,6 @@
-import { Button, useModal } from '@components/legacy'
+import { Button, useModal } from './'
 import styled from '@emotion/styled'
-import { isMobileBrowser } from '@util/helpers'
+import { isMobileBrowser } from '../../util/helpers'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 

apps/portal/src/components/legacy/Draggable.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import { type DragAndDropCallbacks, useDragAndDrop } from '@util/useDragAndDrop'
+import { type DragAndDropCallbacks, useDragAndDrop } from '../../util/useDragAndDrop'
 import { type ReactNode, useRef } from 'react'
 
 type DraggableProps = {

apps/portal/src/components/legacy/Droppable.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import { type DragAndDropCallbacks, useDragAndDrop } from '@util/useDragAndDrop'
+import { type DragAndDropCallbacks, useDragAndDrop } from '../../util/useDragAndDrop'
 import { type ReactNode, useRef } from 'react'
 
 type DraggableProps = {

apps/portal/src/components/legacy/Field.tsx

@@ -1,10 +1,10 @@
-import IconClear from '@assets/icons/x-circle.svg?react'
-import { Pill } from '@components/legacy'
 import styled from '@emotion/styled'
-import ChevronDown from '@icons/chevron-down.svg?react'
-import SearchIcon from '@icons/search.svg?react'
-import { useBoolean } from '@util/hooks'
 import { useEffect } from 'react'
+import ChevronDown from '../../assets/icons/chevron-down.svg?react'
+import SearchIcon from '../../assets/icons/search.svg?react'
+import IconClear from '../../assets/icons/x-circle.svg?react'
+import { useBoolean } from '../../util/hooks'
+import { Pill } from './'
 
 // framework
 

apps/portal/src/components/legacy/Filter.tsx

@@ -1,6 +1,6 @@
-import { Pill } from '@components/legacy'
+import { Pill } from './'
 import styled from '@emotion/styled'
-import { useSet } from '@util/hooks'
+import { useSet } from '../../util/hooks'
 import { useEffect } from 'react'
 
 const Filter = styled(({ value = [], options = {}, className, onChange = () => {}, ...rest }: any) => {

apps/portal/src/components/legacy/LeftRightPicker.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import ChevronRight from '@icons/chevron-right.svg?react'
+import ChevronRight from '../../assets/icons/chevron-right.svg?react'
 
 import { ButtonIcon } from './Button'
 

apps/portal/src/components/legacy/Menu.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import useOnClickOutside from '@util/useOnClickOutside'
+import useOnClickOutside from '../../util/useOnClickOutside'
 import React, { useRef, useState } from 'react'
 
 type MenuDropdownAlignment = 'left' | 'right'

apps/portal/src/components/legacy/Modal.tsx

@@ -1,7 +1,7 @@
 // TODO: remove legacy modal completely
 
 import { AlertDialog } from '@talismn/ui'
-import useKeyDown from '@util/useKeyDown'
+import useKeyDown from '../../util/useKeyDown'
 import { createContext, useCallback, useContext, useMemo, useState, type PropsWithChildren } from 'react'
 
 type OpenModalOptions = {

apps/portal/src/components/legacy/NoCrowdloansPlaceholder.tsx

@@ -1,5 +1,5 @@
-import crowdloanRowSkeleton from '@assets/crowdloan-row-skeleton.png'
-import { Placeholder } from '@components/legacy/Placeholder'
+import crowdloanRowSkeleton from '../../assets/crowdloan-row-skeleton.png'
+import { Placeholder } from './Placeholder'
 import styled from '@emotion/styled'
 import React from 'react'
 

apps/portal/src/components/legacy/Pendor.tsx

@@ -1,4 +1,4 @@
-import Loader from '@icons/loader.svg?react'
+import Loader from '../../assets/icons/loader.svg?react'
 import { type PropsWithChildren, type ReactElement } from 'react'
 
 export type PendorProps = {

apps/portal/src/components/legacy/Placeholder.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import { device } from '@util/breakpoints'
+import { device } from '../../util/breakpoints'
 
 type PlaceholderProps = {
   className?: string

apps/portal/src/components/legacy/Poster.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import useImageWithFallback from '@util/useImageWithFallback'
+import useImageWithFallback from '../../util/useImageWithFallback'
 import { type PropsWithChildren } from 'react'
 
 const Poster = styled(

apps/portal/src/components/legacy/SimplePlay.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled'
-import PauseCircle from '@icons/pause-circle.svg?react'
-import PlayCircle from '@icons/play-circle.svg?react'
-import { useAudio } from '@util/useAudio'
+import PauseCircle from '../../assets/icons/pause-circle.svg?react'
+import PlayCircle from '../../assets/icons/play-circle.svg?react'
+import { useAudio } from '../../util/useAudio'
 
 export const SimplePlay = styled(({ className, src }: { className?: string; src: string }) => {
   const { isPlaying, togglePlay } = useAudio(src)

apps/portal/src/components/legacy/Tags.tsx

@@ -1,6 +1,6 @@
-import { Pill } from '@components/legacy'
+import { Pill } from './'
 import styled from '@emotion/styled'
-import { useSet } from '@util/hooks'
+import { useSet } from '../../util/hooks'
 import { useEffect } from 'react'
 
 type StyledNoCrowdloansPlaceholderProps = {

apps/portal/src/components/legacy/TalismanHandLike.tsx

@@ -1,4 +1,4 @@
-import TalismanHandLikeImg from '@assets/thumbs_up_red.gif'
+import TalismanHandLikeImg from '../../assets/thumbs_up_red.gif'
 import { type ImgHTMLAttributes } from 'react'
 
 export const TalismanHandLike = (props: ImgHTMLAttributes<HTMLImageElement>) => {

apps/portal/src/components/legacy/TalismanHandLoader.tsx

@@ -1,4 +1,4 @@
-import TalismanHandLoading from '@assets/spin_red.gif'
+import TalismanHandLoading from '../../assets/spin_red.gif'
 import { type ImgHTMLAttributes } from 'react'
 
 export const TalismanHandLoader = (props: ImgHTMLAttributes<HTMLImageElement>) => {

apps/portal/src/components/legacy/Toggle.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import { useBoolean } from '@util/hooks'
+import { useBoolean } from '../../util/hooks'
 import { useEffect } from 'react'
 
 export type ToggleProps = {

apps/portal/src/components/legacy/archetypes/Crowdloan/Bonus.tsx

@@ -1,5 +1,5 @@
-import { useCrowdloanById } from '@libs/talisman'
-import { Maybe } from '@util/monads'
+import { useCrowdloanById } from '../../../../libs/talisman'
+import { Maybe } from '../../../../util/monads'
 import { type ReactNode, useMemo } from 'react'
 
 export type BonusProps = {

apps/portal/src/components/legacy/archetypes/Crowdloan/Contribute.tsx

@@ -1,18 +1,18 @@
-import { Parachain } from '@components/legacy/archetypes'
-import XCircle from '@assets/icons/x-circle.svg?react'
-import { Button, DesktopRequired, Field, MaterialLoader, useModal } from '@components/legacy'
-import { TalismanHandLike } from '@components/legacy/TalismanHandLike'
-import { TalismanHandLoader } from '@components/legacy/TalismanHandLoader'
-import { useAccountSelector } from '@components/widgets/AccountSelector'
-import { writeableSubstrateAccountsState } from '@domains/accounts'
+import { Parachain } from '..'
+import XCircle from '../../../../assets/icons/x-circle.svg?react'
+import { Button, DesktopRequired, Field, MaterialLoader, useModal } from '../..'
+import { TalismanHandLike } from '../../TalismanHandLike'
+import { TalismanHandLoader } from '../../TalismanHandLoader'
+import { useAccountSelector } from '../../../widgets/AccountSelector'
+import { writeableSubstrateAccountsState } from '../../../../domains/accounts'
 import { useTheme } from '@emotion/react'
 import styled from '@emotion/styled'
-import { ContributeEvent, useCrowdloanContribute } from '@libs/crowdloans'
-import { Acala, Moonbeam, Polkadex, overrideByIds } from '@libs/crowdloans/crowdloanOverrides'
-import { useCrowdloanById } from '@libs/talisman'
+import { ContributeEvent, useCrowdloanContribute } from '../../../../libs/crowdloans'
+import { Acala, Moonbeam, Polkadex, overrideByIds } from '../../../../libs/crowdloans/crowdloanOverrides'
+import { useCrowdloanById } from '../../../../libs/talisman'
 import { CircularProgressIndicator, Text } from '@talismn/ui'
-import { isMobileBrowser } from '@util/helpers'
-import { Maybe } from '@util/monads'
+import { isMobileBrowser } from '../../../../util/helpers'
+import { Maybe } from '../../../../util/monads'
 import { useCallback, useEffect, useMemo, useState, type MouseEventHandler } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useRecoilValue } from 'recoil'

apps/portal/src/components/legacy/archetypes/Crowdloan/Countdown.tsx

@@ -1,6 +1,6 @@
-import { Countdown as Cd, Pendor } from '@components/legacy'
+import { Countdown as Cd, Pendor } from '../..'
 import styled from '@emotion/styled'
-import { useChainmetaValue, useCrowdloanById } from '@libs/talisman'
+import { useChainmetaValue, useCrowdloanById } from '../../../../libs/talisman'
 import { type ReactNode, useEffect, useState } from 'react'
 
 type OngoingProps = {

apps/portal/src/components/legacy/archetypes/Crowdloan/Indexx.tsx

@@ -1,11 +1,11 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { Crowdloan } from '@components/legacy/archetypes'
-import { Await, Field, Grid, NoResults } from '@components/legacy'
+import { Crowdloan } from '..'
+import { Await, Field, Grid, NoResults } from '../..'
 import styled from '@emotion/styled'
-import { useCrowdloanContributions } from '@libs/crowdloans'
-import { TitlePortal } from '@routes/layout'
+import { useCrowdloanContributions } from '../../../../libs/crowdloans'
+import { TitlePortal } from '../../../../routes/layout'
 import { SearchBar } from '@talismn/ui'
-import { device } from '@util/breakpoints'
+import { device } from '../../../../util/breakpoints'
 import { useTranslation } from 'react-i18next'
 import { RootNav } from './RootNav'
 

apps/portal/src/components/legacy/archetypes/Crowdloan/Raised.tsx

@@ -1,8 +1,8 @@
-import { Pendor, ProgressBar, Stat } from '@components/legacy'
+import { Pendor, ProgressBar, Stat } from '../..'
 import styled from '@emotion/styled'
-import { useCrowdloanById } from '@libs/talisman'
+import { useCrowdloanById } from '../../../../libs/talisman'
 import { CheckCircle } from '@talismn/web-icons'
-import { shortNumber } from '@util/helpers'
+import { shortNumber } from '../../../../util/helpers'
 import { useTranslation } from 'react-i18next'
 
 const Raised = styled(

apps/portal/src/components/legacy/archetypes/Crowdloan/Rewards.tsx

@@ -1,6 +1,6 @@
-import { Stat } from '@components/legacy'
+import { Stat } from '../..'
 import styled from '@emotion/styled'
-import { useCrowdloanById } from '@libs/talisman'
+import { useCrowdloanById } from '../../../../libs/talisman'
 
 const Rewards = styled(({ id, className }: { id?: string; className?: string }) => {
   const { crowdloan } = useCrowdloanById(id)

apps/portal/src/components/legacy/archetypes/Crowdloan/Teaser.tsx

@@ -1,7 +1,7 @@
-import { Parachain } from '@components/legacy/archetypes'
-import { Pill } from '@components/legacy'
+import { Parachain } from '..'
+import { Pill } from '../..'
 import styled from '@emotion/styled'
-import { useCrowdloanById, useParachainDetailsById } from '@libs/talisman'
+import { useCrowdloanById, useParachainDetailsById } from '../../../../libs/talisman'
 import { useTranslation } from 'react-i18next'
 import { Link } from 'react-router-dom'
 

apps/portal/src/components/legacy/archetypes/Crowdloan/_hooks.tsx

@@ -1,4 +1,4 @@
-import { useLatestCrowdloans, useParachainsDetailsIndexedById } from '@libs/talisman'
+import { useLatestCrowdloans, useParachainsDetailsIndexedById } from '../../../../libs/talisman'
 import { filter, find, orderBy } from 'lodash'
 import { useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'

apps/portal/src/components/legacy/archetypes/Explore/Card.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import { device } from '@util/breakpoints'
+import { device } from '../../../../util/breakpoints'
 import { usePostHog } from 'posthog-js/react'
 import { useCallback } from 'react'
 

apps/portal/src/components/legacy/archetypes/Explore/Loading.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled'
-import { device } from '@util/breakpoints'
+import { device } from '../../../../util/breakpoints'
 
 export const TagLoading = styled(({ className }: { className?: string }) => {
   return (

apps/portal/src/components/legacy/archetypes/FairyBreadBanner.tsx

@@ -1,4 +1,4 @@
-import BaseFairyBreadBanner from '@components/recipes/FairyBreadBanner'
+import BaseFairyBreadBanner from '../../recipes/FairyBreadBanner'
 import { usePostHog } from 'posthog-js/react'
 import { useCallback, useEffect, useState } from 'react'
 

apps/portal/src/components/legacy/archetypes/JoinButton/JoinButton.tsx

@@ -1,5 +1,5 @@
-import { Button } from '@components/legacy'
-import { DISCORD_JOIN_URL } from '@util/links'
+import { Button } from '../..'
+import { DISCORD_JOIN_URL } from '../../../../util/links'
 
 export const JoinButton = ({ className = '' }: { className?: string }) => {
   return (

apps/portal/src/components/legacy/archetypes/LanguageSelector/index.tsx

@@ -1,4 +1,4 @@
-import { Field } from '@components/legacy'
+import { Field } from '../..'
 import styled from '@emotion/styled'
 import { useTranslation } from 'react-i18next'
 

apps/portal/src/components/legacy/archetypes/Parachain/Asset.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled'
-import { useParachainAssets } from '@libs/talisman'
-import useImageWithFallback from '@util/useImageWithFallback'
+import { useParachainAssets } from '../../../../libs/talisman'
+import useImageWithFallback from '../../../../util/useImageWithFallback'
 
 type ImageProps = {
   id: string

apps/portal/src/components/legacy/archetypes/Parachain/Links.tsx

@@ -1,6 +1,6 @@
-import { Pill } from '@components/legacy'
+import { Pill } from '../..'
 import styled from '@emotion/styled'
-import { useParachainDetailsById } from '@libs/talisman'
+import { useParachainDetailsById } from '../../../../libs/talisman'
 
 export type LinksProps = {
   id: number | string

apps/portal/src/components/legacy/archetypes/Portfolio/Assets.tsx

@@ -1,4 +1,4 @@
-import { balancesState, selectedBalancesState, selectedCurrencyState } from '@domains/balances'
+import { balancesState, selectedBalancesState, selectedCurrencyState } from '../../../../domains/balances'
 import { BalanceFormatter } from '@talismn/balances'
 import { useChains, useEvmNetworks, useTokenRates, useTokens } from '@talismn/balances-react'
 import { formatDecimals } from '@talismn/util'