Revert tsconfig paths

src/background/container.ts

@@ -1,12 +1,12 @@
 import { asClass, asValue, createContainer, InjectionMode } from 'awilix'
 import browser, { type Browser } from 'webextension-polyfill'
-import { Background } from '@background/services/background'
+import { Background } from '@/background/services/background'
 import {
   OpenPaymentsService,
   StorageService,
   MonetizationService
 } from './services'
-import { createLogger, Logger } from '@shared/logger'
+import { createLogger, Logger } from '@/shared/logger'
 
 interface Cradle {
   logger: Logger

src/background/services/background.ts

@@ -3,16 +3,16 @@ import { type Browser } from 'webextension-polyfill'
 import {
   type ToBackgroundMessage,
   PopupToBackgroundAction
-} from '@shared/messages'
+} from '@/shared/messages'
 import type {
   MonetizationService,
   OpenPaymentsService,
   StorageService
 } from '.'
-import { Logger } from '@shared/logger'
-import { failure, success } from '@shared/helpers'
+import { Logger } from '@/shared/logger'
+import { failure, success } from '@/shared/helpers'
 import { OpenPaymentsClientError } from '@interledger/open-payments/dist/client/error'
-import { OPEN_PAYMENTS_ERRORS } from '@background/utils'
+import { OPEN_PAYMENTS_ERRORS } from '@/background/utils'
 
 export class Background {
   constructor(

src/background/services/monetization.ts

@@ -8,7 +8,7 @@ import {
 import { OpenPaymentsService, StorageService } from '.'
 import { type Browser } from 'webextension-polyfill'
 import { OpenPaymentsClientError } from '@interledger/open-payments/dist/client'
-import { Logger } from '@shared/logger'
+import { Logger } from '@/shared/logger'
 
 const getWalletAddress = (): WalletAddress => {
   // TO DO

src/background/services/openPayments.ts

@@ -14,11 +14,11 @@ import { signMessage } from 'http-message-signatures/lib/httpbis'
 import { createContentDigestHeader } from 'httpbis-digest-headers'
 import { Browser } from 'webextension-polyfill'
 import { getCurrentActiveTabId, toAmount } from '../utils'
-import { StorageService } from '@background/services/storage'
-import { exportJWK, generateEd25519KeyPair } from '@shared/crypto'
+import { StorageService } from '@/background/services/storage'
+import { exportJWK, generateEd25519KeyPair } from '@/shared/crypto'
 import { bytesToHex } from '@noble/hashes/utils'
-import { getWalletInformation } from '@shared/helpers'
-import { ConnectWalletPayload } from '@shared/messages'
+import { getWalletInformation } from '@/shared/helpers'
+import { ConnectWalletPayload } from '@/shared/messages'
 
 interface KeyInformation {
   privateKey: string

src/background/services/storage.ts

@@ -1,11 +1,11 @@
-import { DEFAULT_AMOUNT, DEFAULT_INTERVAL_MS } from '@background/config'
-import { Logger } from '@shared/logger'
+import { DEFAULT_AMOUNT, DEFAULT_INTERVAL_MS } from '@/background/config'
+import { Logger } from '@/shared/logger'
 import type {
   PopupStore,
   Storage,
   StorageKey,
   WebsiteData
-} from '@shared/types'
+} from '@/shared/types'
 import { type Browser } from 'webextension-polyfill'
 
 const defaultStorage = {

src/background/utils.ts

@@ -1,4 +1,4 @@
-import { WalletAmount } from '@shared/types'
+import { WalletAmount } from '@/shared/types'
 import { type Browser, action, runtime } from 'webextension-polyfill'
 
 const iconActive34 = runtime.getURL('assets/icons/icon-active-34.png')

src/content/container.ts

@@ -1,7 +1,7 @@
 import { asClass, asValue, createContainer, InjectionMode } from 'awilix'
 import browser, { type Browser } from 'webextension-polyfill'
 
-import { createLogger, Logger } from '@shared/logger'
+import { createLogger, Logger } from '@/shared/logger'
 import { ContentScript } from './services/contentScript'
 
 interface Cradle {

src/content/monetizationTagManager/index.ts

@@ -1,4 +1,4 @@
-import { MonetizationTagManager } from '@content/monetizationTagManager/MonetizationTagManager'
+import { MonetizationTagManager } from '@/content/monetizationTagManager/MonetizationTagManager'
 
 interface PaymentDetailsChangeArguments {
   started: PaymentDetails | null

src/content/services/contentScript.ts

@@ -1,4 +1,4 @@
-import { Logger } from '@shared/logger'
+import { Logger } from '@/shared/logger'
 
 export class ContentScript {
   constructor(private logger: Logger) {}

src/content/static/index.ts

@@ -1,4 +1,4 @@
-import { wm2Polyfill } from '@content/static/polyfill'
+import { wm2Polyfill } from '@/content/static/polyfill'
 
 function inject(configure: (_script: HTMLScriptElement) => void) {
   const script = document.createElement('script')

src/popup/Popup.tsx

@@ -1,8 +1,8 @@
-import { MainLayout } from '@popup/components/layout/MainLayout'
+import { MainLayout } from '@/popup/components/layout/MainLayout'
 import { PopupContextProvider } from './lib/context'
 
 import React from 'react'
-import { ProtectedRoute } from '@popup/components/ProtectedRoute'
+import { ProtectedRoute } from '@/popup/components/ProtectedRoute'
 import {
   RouteObject,
   RouterProvider,

src/popup/components/ConnectWalletForm.tsx

@@ -1,13 +1,13 @@
-import { Button } from '@popup/components/ui/Button'
-import { Input } from '@popup/components/ui/Input'
-import { Label } from '@popup/components/ui/Label'
+import { Button } from '@/popup/components/ui/Button'
+import { Input } from '@/popup/components/ui/Input'
+import { Label } from '@/popup/components/ui/Label'
 import { connected } from 'process'
 import React from 'react'
-import { Switch } from '@popup/components/ui/Switch'
-import { Code } from '@popup/components/ui/Code'
-import { connectWallet } from '@popup/lib/messages'
-import { getWalletInformation } from '@shared/helpers'
-import { charIsNumber, getCurrencySymbol } from '@popup/lib/utils'
+import { Switch } from '@/popup/components/ui/Switch'
+import { Code } from '@/popup/components/ui/Code'
+import { connectWallet } from '@/popup/lib/messages'
+import { getWalletInformation } from '@/shared/helpers'
+import { charIsNumber, getCurrencySymbol } from '@/popup/lib/utils'
 import { useForm } from 'react-hook-form'
 import { numericFormatter } from 'react-number-format'
 

src/popup/components/LoadingSpinner.tsx

@@ -1,7 +1,7 @@
 import { type VariantProps, cva } from 'class-variance-authority'
 import React from 'react'
 
-import { Spinner } from '@popup/components/Icons'
+import { Spinner } from '@/popup/components/Icons'
 
 const loadingSpinnerStyles = cva('animate-spin text-white', {
   variants: {

src/popup/components/PayWebsiteForm.tsx

@@ -1,8 +1,8 @@
-import { Button } from '@popup/components/ui/Button'
-import { Input } from '@popup/components/ui/Input'
-import { PopupStateContext } from '@popup/lib/context'
-import { payWebsite } from '@popup/lib/messages'
-import { getCurrencySymbol, charIsNumber } from '@popup/lib/utils'
+import { Button } from '@/popup/components/ui/Button'
+import { Input } from '@/popup/components/ui/Input'
+import { PopupStateContext } from '@/popup/lib/context'
+import { payWebsite } from '@/popup/lib/messages'
+import { getCurrencySymbol, charIsNumber } from '@/popup/lib/utils'
 import React from 'react'
 import { useForm } from 'react-hook-form'
 import { numericFormatter } from 'react-number-format'

src/popup/components/ProtectedRoute.tsx

@@ -1,4 +1,4 @@
-import { PopupStateContext } from '@popup/lib/context'
+import { PopupStateContext } from '@/popup/lib/context'
 import React from 'react'
 import { Navigate, Outlet } from 'react-router-dom'
 

src/popup/components/WalletInformation.tsx

@@ -1,11 +1,11 @@
-import { Input } from '@popup/components/ui/Input'
-import { Label } from '@popup/components/ui/Label'
+import { Input } from '@/popup/components/ui/Input'
+import { Label } from '@/popup/components/ui/Label'
 import React from 'react'
-import { Code } from '@popup/components/ui/Code'
-import { getCurrencySymbol, transformBalance } from '@popup/lib/utils'
-import { PopupStore } from '@shared/types'
-import { Button } from '@popup/components/ui/Button'
-import { disconnectWallet } from '@popup/lib/messages'
+import { Code } from '@/popup/components/ui/Code'
+import { getCurrencySymbol, transformBalance } from '@/popup/lib/utils'
+import { PopupStore } from '@/shared/types'
+import { Button } from '@/popup/components/ui/Button'
+import { disconnectWallet } from '@/popup/lib/messages'
 import { useForm } from 'react-hook-form'
 
 interface WalletInformationProps {

src/popup/components/layout/header.tsx

@@ -3,9 +3,9 @@ import { Link, useLocation } from 'react-router-dom'
 import browser from 'webextension-polyfill'
 import { ArrowBack, Settings } from '../Icons'
 import { Switch } from '../ui/Switch'
-import { ROUTES_PATH } from '@popup/Popup'
-import { PopupStateContext, ReducerActionType } from '@popup/lib/context'
-import { toggleWM } from '@popup/lib/messages'
+import { ROUTES_PATH } from '@/popup/Popup'
+import { PopupStateContext, ReducerActionType } from '@/popup/lib/context'
+import { toggleWM } from '@/popup/lib/messages'
 
 const Logo = browser.runtime.getURL('assets/images/logo.svg')
 

src/popup/components/ui/Button.tsx

@@ -1,8 +1,8 @@
 import { type VariantProps, cva } from 'class-variance-authority'
 import React, { forwardRef } from 'react'
 
-import { LoadingSpinner } from '@popup/components/LoadingSpinner'
-import { cn } from '@shared/helpers'
+import { LoadingSpinner } from '@/popup/components/LoadingSpinner'
+import { cn } from '@/shared/helpers'
 
 const buttonVariants = cva(
   [

src/popup/components/ui/Code.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Button } from './Button'
 import { CheckIcon, ClipboardIcon } from '../Icons'
-import { cn } from '@shared/helpers'
+import { cn } from '@/shared/helpers'
 
 interface CodeProps extends React.HTMLAttributes<HTMLDivElement> {
   value: string

src/popup/components/ui/Input.tsx

@@ -1,7 +1,7 @@
 import { type VariantProps, cva } from 'class-variance-authority'
 import React, { forwardRef } from 'react'
-import { cn } from '@shared/helpers'
-import { Label } from '@popup/components/ui/Label'
+import { cn } from '@/shared/helpers'
+import { Label } from '@/popup/components/ui/Label'
 
 const inputVariants = cva(
   [

src/popup/components/ui/Label.tsx

@@ -1,7 +1,7 @@
 import { type VariantProps, cva } from 'class-variance-authority'
 import React, { forwardRef } from 'react'
 
-import { cn } from '@shared/helpers'
+import { cn } from '@/shared/helpers'
 
 const labelVariants = cva(
   'flex items-center px-2 font-medium leading-6 text-medium'

src/popup/components/ui/RadioGroup.tsx

@@ -1,7 +1,7 @@
 import { type VariantProps, cva } from 'class-variance-authority'
 import React, { useEffect, useMemo, useState } from 'react'
 
-import { cn } from '@shared/helpers'
+import { cn } from '@/shared/helpers'
 
 export interface RadioProps {
   checked?: boolean

src/popup/components/ui/Slider.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react'
 
-import { cn } from '@shared/helpers'
+import { cn } from '@/shared/helpers'
 
 export interface SliderProps
   extends React.InputHTMLAttributes<HTMLInputElement> {

src/popup/components/ui/Switch.tsx

@@ -1,7 +1,7 @@
 import { type VariantProps, cva } from 'class-variance-authority'
 import React, { forwardRef } from 'react'
 
-import { cn } from '@shared/helpers'
+import { cn } from '@/shared/helpers'
 
 const switchVariants = cva(
   [

src/popup/components/ui/__tests__/Button.test.tsx

@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react'
 import React from 'react'
 
-import { Button } from '@popup/components/ui/Button'
+import { Button } from '@/popup/components/ui/Button'
 
 describe('Button', () => {
   it('should render a button with the `aria-label` attribute', () => {

src/popup/components/ui/__tests__/Input.tsx

@@ -1,7 +1,7 @@
 import { render } from '@testing-library/react'
 import React from 'react'
 
-import { Input } from '@popup/components/ui/Input'
+import { Input } from '@/popup/components/ui/Input'
 
 describe('Input', () => {
   it('should default to `type="text"`', () => {

src/popup/components/ui/__tests__/Switch.tsx

@@ -3,7 +3,7 @@ import '@testing-library/jest-dom'
 import { fireEvent, render, screen } from '@testing-library/react'
 import React from 'react'
 
-import { Switch } from '@popup/components/ui/Switch'
+import { Switch } from '@/popup/components/ui/Switch'
 
 describe('Switch', () => {
   it('renders without crashing', () => {

src/popup/lib/context.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import { getContextData } from '@popup/lib/messages'
-import { PopupStore } from '@shared/types'
+import { getContextData } from '@/popup/lib/messages'
+import { PopupStore } from '@/shared/types'
 
 export enum ReducerActionType {
   SET_DATA = 'SET_DATA',

src/popup/lib/messages.ts

@@ -3,9 +3,9 @@ import {
   PopupToBackgroundAction,
   PopupToBackgroundActionPayload,
   type PopupToBackgroundMessage
-} from '@shared/messages'
+} from '@/shared/messages'
 import browser from 'webextension-polyfill'
-import { PopupState } from '@popup/lib/context'
+import { PopupState } from '@/popup/lib/context'
 
 export const message = new MessageManager<PopupToBackgroundMessage>(browser)
 

src/popup/pages/Home.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import { PopupStateContext } from '@popup/lib/context'
-import { WarningSign } from '@popup/components/Icons'
-import { PayWebsiteForm } from '@popup/components/PayWebsiteForm'
+import { PopupStateContext } from '@/popup/lib/context'
+import { WarningSign } from '@/popup/components/Icons'
+import { PayWebsiteForm } from '@/popup/components/PayWebsiteForm'
 
 export const Component = () => {
   const {

src/popup/pages/Settings.tsx

@@ -1,6 +1,6 @@
-import { ConnectWalletForm } from '@popup/components/ConnectWalletForm'
-import { WalletInformation } from '@popup/components/WalletInformation'
-import { PopupStateContext } from '@popup/lib/context'
+import { ConnectWalletForm } from '@/popup/components/ConnectWalletForm'
+import { WalletInformation } from '@/popup/components/WalletInformation'
+import { PopupStateContext } from '@/popup/lib/context'
 import React from 'react'
 
 export const Component = () => {

src/shared/helpers.ts

@@ -1,4 +1,4 @@
-import { SuccessResponse } from '@shared/messages'
+import { SuccessResponse } from '@/shared/messages'
 import { WalletAddress } from '@interledger/open-payments/dist/types'
 import { cx, CxOptions } from 'class-variance-authority'
 import { twMerge } from 'tailwind-merge'

tsconfig.json

@@ -16,11 +16,11 @@
     "allowUmdGlobalAccess": true,
     "resolveJsonModule": true,
     "paths": {
-      "@shared/*": ["./shared/*"],
-      "@popup/*": ["./popup/*"],
-      "@background/*": ["./background/*"],
-      "@content/*": ["./content/*"],
-      "@assets/*": ["./assets/*"]
+      "@/shared/*": ["./shared/*"],
+      "@/popup/*": ["./popup/*"],
+      "@/background/*": ["./background/*"],
+      "@/content/*": ["./content/*"],
+      "@/assets/*": ["./assets/*"]
     }
   },
   "include": ["./src/**/*", "./jest.config.ts", "./jest.setup.ts"],

webpack/config.ts

@@ -72,15 +72,15 @@ export const mainConfig: Configuration = {
       async_hooks: false
     },
     alias: {
-      '@shared': path.resolve(__dirname, '..', `${DIRECTORIES.SRC}/shared/`),
-      '@popup': path.resolve(__dirname, '..', `${DIRECTORIES.SRC}/popup/`),
-      '@background': path.resolve(
+      '@/shared': path.resolve(__dirname, '..', `${DIRECTORIES.SRC}/shared/`),
+      '@/popup': path.resolve(__dirname, '..', `${DIRECTORIES.SRC}/popup/`),
+      '@/background': path.resolve(
         __dirname,
         '..',
         `${DIRECTORIES.SRC}/background/`
       ),
-      '@content': path.resolve(__dirname, '..', `${DIRECTORIES.SRC}/content/`),
-      '@assets': path.resolve(__dirname, '..', `${DIRECTORIES.SRC}/assets/`)
+      '@/content': path.resolve(__dirname, '..', `${DIRECTORIES.SRC}/content/`),
+      '@/assets': path.resolve(__dirname, '..', `${DIRECTORIES.SRC}/assets/`)
     },
     extensions: ['.js', '.jsx', '.ts', '.tsx']
   },