refactor(folders): move components

.dependency-cruiser.js

@@ -9,26 +9,33 @@ module.exports = {
       from: { orphan: true },
       to: {},
     },
+    {
+      name: 'script-context-not-to-another',
+      comment: 'One script context must not depend on another',
+      severity: 'error',
+      from: { path: '(^src/)([^/]+)/' },
+      to: { path: '^$1', pathNot: ['$1$2', '^src/shared'] },
+    },
     {
       name: 'only-import-state-via-hooks',
       severity: 'error',
-      from: { path: '^src/*', pathNot: ['^src/store/*'] },
+      from: { path: '^src/app/*', pathNot: ['^src/app/store/*'] },
       to: {
-        path: ['^src/store/*'],
-        pathNot: [`src.*\.hooks\.ts`, `src.*\.models\.ts`, `src.*\.utils\.ts`],
+        path: ['^src/app/store/*'],
+        pathNot: [`src/app.*\.hooks\.ts`, `src/app.*\.models\.ts`, `src/app.*\.utils\.ts`],
       },
     },
     {
       name: 'ban-jotai-outside-store',
       severity: 'error',
-      from: { path: '^src', pathNot: ['^src/store/*'] },
+      from: { path: '^src', pathNot: ['^src/app/store/*'] },
       to: { path: 'jotai*' },
     },
     {
       name: 'component-cannot-import-pages-or-features',
       severity: 'error',
-      from: { path: 'src/components*' },
-      to: { path: ['^src/pages*', '^src/features/*'] },
+      from: { path: 'src/app/components*' },
+      to: { path: ['^src/app/pages*', '^src/app/features/*'] },
     },
     {
       name: 'no-circular',
@@ -51,20 +58,8 @@ module.exports = {
     {
       name: 'features-cannot-import-pages',
       severity: 'error',
-      from: { path: '^src/features/.*' },
-      to: { path: '^src/pages/.*' },
-    },
-    {
-      name: 'background-cannot-import-content-scripts',
-      severity: 'error',
-      from: { path: '^src/background/.*' },
-      to: { path: '^src/content-scripts/.*' },
-    },
-    {
-      name: 'content-cannot-import-background-script',
-      severity: 'error',
-      from: { path: '^src/content-scripts/.*' },
-      to: { path: '^src/background/.*' },
+      from: { path: '^src/app/features/.*' },
+      to: { path: '^src/app/pages/.*' },
     },
     {
       name: 'only-allow-react-icons-fi',
@@ -77,26 +72,26 @@ module.exports = {
       name: 'no-using-pino-directly',
       comment: 'Enforce use of Pino logging library via @logger wrapper',
       severity: 'error',
-      from: { path: '^src', pathNot: ['^src/common/logger.ts$'] },
+      from: { path: '^src', pathNot: ['^src/shared/logger.ts$'] },
       to: { path: 'pino' },
     },
     {
       name: 'no-inter-pages-deps',
       comment: 'Prohibit dependencies between pages',
       severity: 'error',
-      from: { path: '^src/pages/([^/]+)/.+' },
+      from: { path: '^src/app/pages/([^/]+)/.+' },
       to: {
-        path: '^src/pages/([^/]+)/.+',
-        pathNot: '^src/pages/$1/.+',
+        path: '^src/app/pages/([^/]+)/.+',
+        pathNot: '^src/app/pages/$1/.+',
       },
     },
     {
       name: 'no-feature-component-external-use',
       comment: `Only a given feature may import its child 'src/feature/xxx/components'`,
       severity: 'error',
-      from: { path: '(^src/features/)([^/]+)' },
+      from: { path: '(^src/app/features/)([^/]+)' },
       to: {
-        path: '^src/features/[^/]+/components',
+        path: '^src/app/features/[^/]+/components',
         pathNot: '$1$2/',
       },
     },
@@ -104,8 +99,8 @@ module.exports = {
       name: 'no-feature-component-sibling-use',
       comment: `Features cannot depend on a sibling feature's components`,
       severity: 'error',
-      from: { pathNot: ['^src/features'] },
-      to: { path: '^src/features/([^/]+)/components' },
+      from: { pathNot: ['^src/app/features'] },
+      to: { path: '^src/app/features/([^/]+)/components' },
     },
   ],
   options: {

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 ymdevs
+Copyright (c) 2022 Hiro Systems PBC
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

src/app/app.tsx

@@ -3,19 +3,19 @@ import { HashRouter as Router } from 'react-router-dom';
 import { QueryClientProvider } from 'react-query';
 import { Toaster } from 'react-hot-toast';
 
-import { theme } from '@common/theme';
-import { GlobalStyles } from '@components/global-styles';
-import { VaultLoader } from '@components/vault-loader';
-import { AccountsDrawer } from '@features/accounts-drawer/accounts-drawer';
-import { NetworksDrawer } from '@features/network-drawer/networks-drawer';
-import { SettingsDropdown } from '@features/settings-dropdown/settings-dropdown';
-import { AppErrorBoundary } from '@features/errors/app-error-boundary';
-import { EditNonceDrawer } from '@features/edit-nonce-drawer/edit-nonce-drawer';
-import { IncreaseFeeDrawer } from '@features/increase-fee-drawer/increase-fee-drawer';
-import { Devtools } from '@features/devtool/devtools';
-import { initSegment } from '@common/segment-init';
-import { AppRoutes } from '@routes/app-routes';
-import { jotaiWrappedReactQueryQueryClient as queryClient } from '@store/common/common.hooks';
+import { VaultLoader } from '@app/components/vault-loader';
+import { AccountsDrawer } from '@app/features/accounts-drawer/accounts-drawer';
+import { NetworksDrawer } from '@app/features/network-drawer/networks-drawer';
+import { SettingsDropdown } from '@app/features/settings-dropdown/settings-dropdown';
+import { AppErrorBoundary } from '@app/features/errors/app-error-boundary';
+import { EditNonceDrawer } from '@app/features/edit-nonce-drawer/edit-nonce-drawer';
+import { IncreaseFeeDrawer } from '@app/features/increase-fee-drawer/increase-fee-drawer';
+import { Devtools } from '@app/features/devtool/devtools';
+import { jotaiWrappedReactQueryQueryClient as queryClient } from '@app/store/common/common.hooks';
+import { initSegment } from './common/segment-init';
+import { theme } from './common/theme';
+import { GlobalStyles } from './components/global-styles';
+import { AppRoutes } from './routes/app-routes';
 
 const devToolsEnabled = false;
 
@@ -26,6 +26,7 @@ declare global {
 }
 
 window.__APP_VERSION__ = VERSION;
+
 void initSegment();
 
 export const App = () => {

src/app/common/actions/finalize-auth-response.ts

@@ -1,12 +1,12 @@
-import { DecodedAuthRequest } from '@common/dev/types';
+import { DecodedAuthRequest } from '@app/common/dev/types';
 import {
   AuthenticationResponseMessage,
   ExternalMethods,
   MESSAGE_SOURCE,
-} from '@common/message-types';
-import { deleteTabForRequest, getTab, StorageKey } from '@common/storage';
-import { isValidUrl } from '@common/validation/validate-url';
-import { logger } from '@common/logger';
+} from '@shared/message-types';
+import { deleteTabForRequest, getTab, StorageKey } from '@shared/utils/storage';
+import { isValidUrl } from '@app/common/validation/validate-url';
+import { logger } from '@shared/logger';
 
 interface FinalizeAuthParams {
   decodedAuthRequest: DecodedAuthRequest;

src/app/common/actions/finalize-tx-signature.ts

@@ -3,9 +3,9 @@ import {
   MESSAGE_SOURCE,
   TransactionResponseMessage,
   TxResult,
-} from '@common/message-types';
-import { deleteTabForRequest, getTab, StorageKey } from '@common/storage';
-import { logger } from '@common/logger';
+} from '@shared/message-types';
+import { deleteTabForRequest, getTab, StorageKey } from '@shared/utils/storage';
+import { logger } from '@shared/logger';
 
 export const finalizeTxSignature = (requestPayload: string, data: TxResult | string) => {
   try {

src/app/common/date-utils.spec.ts

@@ -1,4 +1,4 @@
-import { isoDateToLocalDate } from '@common/date-utils';
+import { isoDateToLocalDate } from '@app/common/date-utils';
 
 test('ISO date to local date (based on timezone)', () => {
   const today = new Date().toISOString();

src/app/common/error-formatters.ts

@@ -1,7 +1,8 @@
 import BigNumber from 'bignumber.js';
-import { initBigNumber } from '@common/utils';
-import { microStxToStx } from '@common/stacks-utils';
-import { SendFormErrorMessages } from '@common/error-messages';
+
+import { initBigNumber } from '@app/common/utils';
+import { microStxToStx } from '@app/common/stacks-utils';
+import { SendFormErrorMessages } from '@app/common/error-messages';
 
 export function formatPrecisionError(symbol: string, decimals: number) {
   const error = SendFormErrorMessages.TooMuchPrecision;

src/app/common/hooks/account/use-account-names.ts

@@ -1,6 +1,6 @@
 import { Account } from '@stacks/wallet-sdk';
-import { useCurrentAccount } from '@store/accounts/account.hooks';
-import { useAllAccountNames, useCurrentAccountNames } from '@query/bns/bns.hooks';
+import { useCurrentAccount } from '@app/store/accounts/account.hooks';
+import { useAllAccountNames, useCurrentAccountNames } from '@app/query/bns/bns.hooks';
 
 export function useCurrentAccountDisplayName() {
   const names = useCurrentAccountNames();

src/app/common/hooks/account/use-account-transactions-with-transfers.hooks.ts

@@ -1,11 +1,11 @@
 import { useQuery, UseQueryOptions } from 'react-query';
-import { useCurrentAccountStxAddressState } from '@store/accounts/account.hooks';
-import { useCurrentNetworkState } from '@store/network/networks.hooks';
+import { useCurrentAccountStxAddressState } from '@app/store/accounts/account.hooks';
+import { useCurrentNetworkState } from '@app/store/network/networks.hooks';
 import { AddressTransactionWithTransfers } from '@stacks/stacks-blockchain-api-types';
-import { useAccountTransactionsWithTransfersState } from '@store/accounts/transactions-with-transfer.hooks';
-import { DEFAULT_LIST_LIMIT, QueryRefreshRates } from '@common/constants';
-import { PaginatedResults } from '@common/types';
-import { useApi } from '@store/common/api-clients.hooks';
+import { useAccountTransactionsWithTransfersState } from '@app/store/accounts/transactions-with-transfer.hooks';
+import { DEFAULT_LIST_LIMIT, QueryRefreshRates } from '@shared/constants';
+import { PaginatedResults } from '@shared/models/types';
+import { useApi } from '@app/store/common/api-clients.hooks';
 
 const QUERY_OPTIONS = {
   refetchInterval: QueryRefreshRates.MEDIUM,

src/app/common/hooks/account/use-next-tx-nonce.ts

@@ -1,8 +1,8 @@
 import { UseQueryOptions } from 'react-query';
 import { AddressNonces } from '@stacks/blockchain-api-client/lib/generated';
 
-import { useGetAccountNonce } from '@query/nonce/use-get-account-nonce';
-import { useLastApiNonceState } from '@store/accounts/nonce.hooks';
+import { useGetAccountNonce } from '@app/query/nonce/use-get-account-nonce';
+import { useLastApiNonceState } from '@app/store/accounts/nonce.hooks';
 
 export function correctNextNonce(
   apiNonce: AddressNonces

src/app/common/hooks/account/use-refresh-all-account-data.ts

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
-import { delay } from '@common/utils';
-import { useRefreshAccountData } from '@store/accounts/account.hooks';
-import { useCurrentAccountMempool } from '@query/mempool/mempool.hooks';
+import { delay } from '@app/common/utils';
+import { useRefreshAccountData } from '@app/store/accounts/account.hooks';
+import { useCurrentAccountMempool } from '@app/query/mempool/mempool.hooks';
 
 export function useRefreshAllAccountData() {
   const update = useRefreshAccountData();

src/app/common/hooks/account/use-switch-account.ts

@@ -1,11 +1,11 @@
 import { useCallback } from 'react';
-import { useWallet } from '@common/hooks/use-wallet';
+import { useWallet } from '@app/common/hooks/use-wallet';
 import {
   useCurrentAccount,
   useHasSwitchedAccounts,
   useTransactionAccountIndex,
   useTransactionNetworkVersion,
-} from '@store/accounts/account.hooks';
+} from '@app/store/accounts/account.hooks';
 
 const TIMEOUT = 350;
 

src/app/common/hooks/analytics/transactions-analytics.hooks.ts

@@ -1,6 +1,6 @@
-import { statusFromTx } from '@common/api/transactions';
-import { isAddressTransactionWithTransfers } from '@common/transactions/transaction-utils';
-import { useCurrentAccount } from '@store/accounts/account.hooks';
+import { statusFromTx } from '@app/common/api/transactions';
+import { isAddressTransactionWithTransfers } from '@app/common/transactions/transaction-utils';
+import { useCurrentAccount } from '@app/store/accounts/account.hooks';
 import {
   AddressTransactionWithTransfers,
   MempoolTransaction,

src/app/common/hooks/analytics/use-analytics.ts

@@ -1,9 +1,9 @@
-import { useCurrentNetworkState } from '@store/network/networks.hooks';
+import { useCurrentNetworkState } from '@app/store/network/networks.hooks';
 import { useLocation } from 'react-router-dom';
-import { IS_TEST_ENV } from '@common/constants';
+import { IS_TEST_ENV } from '@shared/constants';
 import { EventParams, PageParams } from '@segment/analytics-next/dist/pkg/core/arguments-resolver';
-import { analytics } from '@common/segment-init';
-import { logger } from '@common/logger';
+import { analytics } from '@app/common/segment-init';
+import { logger } from '@shared/logger';
 
 const IGNORED_PATH_REGEXPS = [/^\/$/];
 

src/app/common/hooks/auth/use-app-details.tsx

@@ -1,4 +1,4 @@
-import { useAuthRequest } from '@store/onboarding/onboarding.hooks';
+import { useAuthRequest } from '@app/store/onboarding/onboarding.hooks';
 
 export const useAppDetails = () => {
   const { appName: name, appIcon: icon, appURL: url } = useAuthRequest();

src/app/common/hooks/auth/use-magic-recovery-code.ts

@@ -2,14 +2,14 @@ import { FormEvent, useCallback, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { decrypt } from '@stacks/wallet-sdk';
 
-import { useLoading } from '@common/hooks/use-loading';
-import { useWallet } from '@common/hooks/use-wallet';
-import { useOnboardingState } from '@common/hooks/auth/use-onboarding-state';
-import { RouteUrls } from '@routes/route-urls';
+import { useLoading } from '@app/common/hooks/use-loading';
+import { useWallet } from '@app/common/hooks/use-wallet';
+import { useOnboardingState } from '@app/common/hooks/auth/use-onboarding-state';
+import { RouteUrls } from '@shared/route-urls';
 import {
   useMagicRecoveryCodePasswordState,
   useMagicRecoveryCodeState,
-} from '@store/onboarding/onboarding.hooks';
+} from '@app/store/onboarding/onboarding.hooks';
 
 export function useMagicRecoveryCode() {
   const [magicRecoveryCode, setMagicRecoveryCode] = useMagicRecoveryCodeState();

src/app/common/hooks/auth/use-onboarding-state.ts

@@ -2,7 +2,7 @@ import {
   useAuthRequest,
   useMagicRecoveryCodeValue,
   useSecretKeyState,
-} from '@store/onboarding/onboarding.hooks';
+} from '@app/store/onboarding/onboarding.hooks';
 
 export const useOnboardingState = () => {
   const secretKey = useSecretKeyState();

src/app/common/hooks/auth/use-save-auth-request-callback.ts

@@ -2,11 +2,11 @@ import { useCallback, useEffect } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { decodeToken } from 'jsontokens';
 
-import { useUpdateAuthRequest } from '@store/onboarding/onboarding.hooks';
-import { DecodedAuthRequest } from '@common/dev/types';
-import { useWallet } from '@common/hooks/use-wallet';
-import { getRequestOrigin, StorageKey } from '@common/storage';
-import { RouteUrls } from '@routes/route-urls';
+import { useUpdateAuthRequest } from '@app/store/onboarding/onboarding.hooks';
+import { DecodedAuthRequest } from '@app/common/dev/types';
+import { useWallet } from '@app/common/hooks/use-wallet';
+import { getRequestOrigin, StorageKey } from '@shared/utils/storage';
+import { RouteUrls } from '@shared/route-urls';
 
 export function useSaveAuthRequest() {
   const { wallet } = useWallet();

src/app/common/hooks/use-current-network.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { ChainID } from '@stacks/transactions';
-import { useCurrentNetworkState } from '@store/network/networks.hooks';
+import { useCurrentNetworkState } from '@app/store/network/networks.hooks';
 
 type Modes = 'testnet' | 'mainnet';
 

src/app/common/hooks/use-drawers.ts

@@ -7,7 +7,7 @@ import {
   useShowSignOut,
   useShowTxSettingsCallback,
   useShowEditNonceState,
-} from '@store/ui/ui.hooks';
+} from '@app/store/ui/ui.hooks';
 
 export function useDrawers() {
   const [accountStep, setAccountStep] = useAccountDrawerStep();

src/app/common/hooks/use-explorer-link.ts

@@ -1,6 +1,6 @@
 import { useCallback } from 'react';
-import { makeTxExplorerLink } from '@common/utils';
-import { useCurrentNetwork } from '@common/hooks/use-current-network';
+import { makeTxExplorerLink } from '@app/common/utils';
+import { useCurrentNetwork } from '@app/common/hooks/use-current-network';
 
 export function useExplorerLink() {
   const { mode } = useCurrentNetwork();

src/app/common/hooks/use-home-tabs.ts

@@ -1,4 +1,4 @@
-import { useTabState } from '@store/ui/ui.hooks';
+import { useTabState } from '@app/store/ui/ui.hooks';
 
 export function useHomeTabs() {
   const [activeTab, setActiveTab] = useTabState('HOME_TABS');

src/app/common/hooks/use-loading.ts

@@ -1,4 +1,4 @@
-import { useLoadingState } from '@store/ui/ui.hooks';
+import { useLoadingState } from '@app/store/ui/ui.hooks';
 
 export enum LoadingKeys {
   CONFIRM_DRAWER = 'loading/CONFIRM_DRAWER',

src/app/common/hooks/use-route-header.ts

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-import { useRouteHeaderState } from '@store/ui/ui.hooks';
+import { useRouteHeaderState } from '@app/store/ui/ui.hooks';
 
 export const useRouteHeader = (header: JSX.Element) => {
   const [_, setRouteHeader] = useRouteHeaderState();

src/app/common/hooks/use-selected-asset.ts

@@ -1,11 +1,11 @@
 import { useCallback, useMemo } from 'react';
 import BigNumber from 'bignumber.js';
 
-import { AssetWithMeta } from '@common/asset-types';
-import { getTicker, initBigNumber } from '@common/utils';
-import { ftDecimals, stacksValue } from '@common/stacks-utils';
-import { useCurrentAccountAvailableStxBalance } from '@store/accounts/account.hooks';
-import { useSelectedAssetState, useUpdateSelectedAsset } from '@store/assets/asset.hooks';
+import { AssetWithMeta } from '@app/common/asset-types';
+import { getTicker, initBigNumber } from '@app/common/utils';
+import { ftDecimals, stacksValue } from '@app/common/stacks-utils';
+import { useCurrentAccountAvailableStxBalance } from '@app/store/accounts/account.hooks';
+import { useSelectedAssetState, useUpdateSelectedAsset } from '@app/store/assets/asset.hooks';
 import { useAnalytics } from './analytics/use-analytics';
 
 export function getFullyQualifiedAssetName(asset?: AssetWithMeta) {

src/app/common/hooks/use-submit-stx-transaction.ts

@@ -7,17 +7,17 @@ import {
   TxBroadcastResultRejected,
 } from '@stacks/transactions';
 
-import { todaysIsoDate } from '@common/date-utils';
-import { useWallet } from '@common/hooks/use-wallet';
-import { useLoading } from '@common/hooks/use-loading';
-import { logger } from '@common/logger';
-import { RouteUrls } from '@routes/route-urls';
-import { useHomeTabs } from '@common/hooks/use-home-tabs';
-import { useRefreshAllAccountData } from '@common/hooks/account/use-refresh-all-account-data';
-import { useCurrentStacksNetworkState } from '@store/network/networks.hooks';
-import { useCurrentAccountTxIds } from '@query/transactions/transaction.hooks';
-import { useAnalytics } from '@common/hooks/analytics/use-analytics';
-import { useSetLocalTxsCallback } from '@store/accounts/account-activity.hooks';
+import { todaysIsoDate } from '@app/common/date-utils';
+import { useWallet } from '@app/common/hooks/use-wallet';
+import { useLoading } from '@app/common/hooks/use-loading';
+import { logger } from '@shared/logger';
+import { RouteUrls } from '@shared/route-urls';
+import { useHomeTabs } from '@app/common/hooks/use-home-tabs';
+import { useRefreshAllAccountData } from '@app/common/hooks/account/use-refresh-all-account-data';
+import { useCurrentStacksNetworkState } from '@app/store/network/networks.hooks';
+import { useCurrentAccountTxIds } from '@app/query/transactions/transaction.hooks';
+import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
+import { useSetLocalTxsCallback } from '@app/store/accounts/account-activity.hooks';
 
 function getErrorMessage(
   reason: TxBroadcastResultRejected['reason'] | 'ConflictingNonceInMempool'

src/app/common/hooks/use-vault-messenger.ts

@@ -1,9 +1,10 @@
 import { useCallback } from 'react';
 
-import { SetPassword, StoreSeed, UnlockWallet, SwitchAccount } from '@background/vault-types';
-import { InternalMethods } from '@common/message-types';
-import { useInnerMessageWrapper } from '@store/wallet/wallet.hooks';
-import { clearSessionLocalData } from '@common/store-utils';
+import { SetPassword, StoreSeed, UnlockWallet, SwitchAccount } from '@shared/vault/vault-types';
+import { InternalMethods } from '@shared/message-types';
+
+import { useInnerMessageWrapper } from '@app/store/wallet/wallet.hooks';
+import { clearSessionLocalData } from '@app/common/store-utils';
 import { useAnalytics } from './analytics/use-analytics';
 
 export function useVaultMessenger() {

src/app/common/hooks/use-wallet.ts

@@ -1,11 +1,11 @@
 import { useCallback } from 'react';
 import { getAccountDisplayName } from '@stacks/wallet-sdk';
 
-import { useVaultMessenger } from '@common/hooks/use-vault-messenger';
+import { useVaultMessenger } from '@app/common/hooks/use-vault-messenger';
 
 import { useOnboardingState } from './auth/use-onboarding-state';
 
-import { bytesToText } from '@common/store-utils';
+import { bytesToText } from '@app/common/store-utils';
 import {
   useEncryptedSecretKeyState,
   useFinishSignInCallback,
@@ -14,19 +14,19 @@ import {
   useSecretKey,
   useSetLatestNonceCallback,
   useWalletState,
-} from '@store/wallet/wallet.hooks';
+} from '@app/store/wallet/wallet.hooks';
 import {
   useCurrentAccount,
   useCurrentAccountIndex,
   useCurrentAccountStxAddressState,
   useTransactionNetworkVersion,
-} from '@store/accounts/account.hooks';
+} from '@app/store/accounts/account.hooks';
 import {
   useCurrentNetworkKey,
   useCurrentNetworkState,
   useNetworkState,
-} from '@store/network/networks.hooks';
-import { finalizeAuthResponse } from '@common/actions/finalize-auth-response';
+} from '@app/store/network/networks.hooks';
+import { finalizeAuthResponse } from '@app/common/actions/finalize-auth-response';
 
 export function useWallet() {
   const hasRehydratedVault = useHasRehydratedVault();

src/app/common/persistence.ts

@@ -1,8 +1,8 @@
 import { createWebStoragePersistor } from 'react-query/createWebStoragePersistor-experimental';
 
-import { IS_TEST_ENV, PERSISTENCE_CACHE_TIME } from '@common/constants';
+import { IS_TEST_ENV, PERSISTENCE_CACHE_TIME } from '@shared/constants';
 import { persistQueryClient } from 'react-query/persistQueryClient-experimental';
-import { jotaiWrappedReactQueryQueryClient as queryClient } from '@store/common/common.hooks';
+import { jotaiWrappedReactQueryQueryClient as queryClient } from '@app/store/common/common.hooks';
 
 const localStoragePersistor = createWebStoragePersistor({ storage: window.localStorage });
 

src/app/common/segment-init.ts

@@ -1,7 +1,7 @@
 import { Analytics, AnalyticsBrowser } from '@segment/analytics-next';
-import { IS_TEST_ENV } from './constants';
-import { logger } from './logger';
-import { checkUserHasGrantedPermission } from './sentry-init';
+import { IS_TEST_ENV } from '@shared/constants';
+import { logger } from '@shared/logger';
+import { checkUserHasGrantedPermission } from '@shared/utils/sentry-init';
 
 export let analytics: Analytics;
 

src/app/common/stacks-utils.spec.ts

@@ -1,4 +1,4 @@
-import { stacksValue } from '@common/stacks-utils';
+import { stacksValue } from '@app/common/stacks-utils';
 
 const uSTX_AMOUNT = 10000480064; // 10,000.480064
 

src/app/common/stacks-utils.ts

@@ -2,8 +2,8 @@ import { ChainID } from '@stacks/transactions';
 import BigNumber from 'bignumber.js';
 import { c32addressDecode } from 'c32check';
 
-import { Network, STX_DECIMALS } from './constants';
-import { abbreviateNumber, initBigNumber } from '@common/utils';
+import { Network, STX_DECIMALS } from '@shared/constants';
+import { abbreviateNumber, initBigNumber } from '@app/common/utils';
 
 export const stacksValue = ({
   value,

src/app/common/store-utils.ts

@@ -1,4 +1,4 @@
-import { userHasAllowedDiagnosticsKey } from '@store/onboarding/onboarding.hooks';
+import { userHasAllowedDiagnosticsKey } from '@shared/utils/storage';
 import hash from 'object-hash';
 import { hashQueryKey, QueryKey } from 'react-query';
 

src/app/common/token-utils.ts

@@ -1,4 +1,4 @@
-import { abbreviateNumber } from '@common/utils';
+import { abbreviateNumber } from '@app/common/utils';
 
 export function removeCommas(amountWithCommas: string) {
   return amountWithCommas.replace(/,/g, '');

src/app/common/transactions/broadcast-transaction.ts

@@ -1,7 +1,7 @@
 import { broadcastRawTransaction } from '@stacks/transactions';
 import { Buffer } from 'buffer';
-import { logger } from '@common/logger';
-import { validateTxId } from '@common/validation/validate-tx-id';
+import { logger } from '@shared/logger';
+import { validateTxId } from '@app/common/validation/validate-tx-id';
 
 interface BroadcastTransactionOptions {
   txRaw: string;

src/app/common/transactions/generate-unsigned-txs.ts

@@ -13,7 +13,7 @@ import {
   makeUnsignedContractDeploy,
 } from '@stacks/transactions';
 
-import { hexToBuff } from '@common/utils';
+import { hexToBuff } from '@app/common/utils';
 import { getPostConditions } from './post-condition-utils';
 import { isTransactionTypeSupported } from './transaction-utils';
 

src/app/common/transactions/post-condition-utils.spec.ts

@@ -1,4 +1,4 @@
-import { handlePostConditions } from '@common/transactions/post-condition-utils';
+import { handlePostConditions } from '@app/common/transactions/post-condition-utils';
 import {
   createAssetInfo,
   hexToCV,

src/app/common/transactions/post-condition-utils.ts

@@ -9,8 +9,8 @@ import {
   PostConditionType,
   STXPostCondition,
 } from '@stacks/transactions';
-import { stacksValue } from '@common/stacks-utils';
-import { postConditionFromString } from '@common/utils';
+import { stacksValue } from '@app/common/stacks-utils';
+import { postConditionFromString } from '@app/common/utils';
 
 export const getIconStringFromPostCondition = (
   pc: STXPostCondition | FungiblePostCondition | NonFungiblePostCondition

src/app/common/transactions/transaction-utils.ts

@@ -11,11 +11,11 @@ import {
 } from '@stacks/stacks-blockchain-api-types';
 import { getContractName, truncateMiddle } from '@stacks/ui-utils';
 
-import { AssetWithMeta } from '@common/asset-types';
-import { DEFAULT_FEE_RATE } from '@common/constants';
-import { displayDate, isoDateToLocalDateSafe, todaysIsoDate } from '@common/date-utils';
-import { stacksValue } from '@common/stacks-utils';
-import { FeeEstimation } from '@models/fees-types';
+import { AssetWithMeta } from '@app/common/asset-types';
+import { DEFAULT_FEE_RATE } from '@shared/constants';
+import { displayDate, isoDateToLocalDateSafe, todaysIsoDate } from '@app/common/date-utils';
+import { stacksValue } from '@app/common/stacks-utils';
+import { FeeEstimation } from '@shared/models/fees-types';
 
 type Tx = MempoolTransaction | Transaction;
 

src/app/common/utils.spec.ts

@@ -1,5 +1,5 @@
-import { getTicker } from '@common/utils';
-import { extractPhraseFromString } from '@common/utils';
+import { getTicker } from '@app/common/utils';
+import { extractPhraseFromString } from '@app/common/utils';
 import { countDecimals } from './utils';
 
 describe(countDecimals.name, () => {

src/app/common/utils.ts

@@ -1,7 +1,7 @@
 import type { ClipboardEvent } from 'react';
 import BigNumber from 'bignumber.js';
 
-import { KEBAB_REGEX, Network } from '@common/constants';
+import { KEBAB_REGEX, Network } from '@shared/constants';
 import { StacksNetwork } from '@stacks/network';
 import { BufferReader, deserializePostCondition, PostCondition } from '@stacks/transactions';
 
@@ -9,15 +9,6 @@ function kebabCase(str: string) {
   return str.replace(KEBAB_REGEX, match => '-' + match.toLowerCase());
 }
 
-export const getEventSourceWindow = (event: MessageEvent) => {
-  const isWindow =
-    !(event.source instanceof MessagePort) && !(event.source instanceof ServiceWorker);
-  if (isWindow) {
-    return event.source as Window;
-  }
-  return null;
-};
-
 export function extractPhraseFromString(value: string) {
   const clean = value.trim();
   const words = clean.match(/\S+/g);

src/app/common/utils/open-in-new-tab.ts

@@ -1,4 +1,4 @@
-import { isValidUrl } from '@common/validation/validate-url';
+import { isValidUrl } from '@app/common/validation/validate-url';
 
 export const openInNewTab = (url: string) => {
   if (!isValidUrl(url)) return;

src/app/common/validation/currency-schema.ts

@@ -1,5 +1,5 @@
-import { STX_DECIMALS } from '@common/constants';
-import { countDecimals, isNumber } from '@common/utils';
+import { STX_DECIMALS } from '@shared/constants';
+import { countDecimals, isNumber } from '@app/common/utils';
 import * as yup from 'yup';
 
 function curencyAmountSchema() {

src/app/common/validation/stx-address-schema.ts

@@ -1,7 +1,7 @@
 import * as yup from 'yup';
-import { validateAddressChain, validateStacksAddress } from '@common/stacks-utils';
-import { isString } from '@common/utils';
-import { Network } from '@common/constants';
+import { validateAddressChain, validateStacksAddress } from '@app/common/stacks-utils';
+import { isString } from '@app/common/utils';
+import { Network } from '@shared/constants';
 
 export function stxAddressNetworkValidatorFactory(currentNetwork: Network) {
   return (value: unknown) => {

src/app/common/validation/use-fee-schema.ts

@@ -1,13 +1,13 @@
 import { useCallback } from 'react';
 import BigNumber from 'bignumber.js';
 
-import { STX_DECIMALS } from '@common/constants';
-import { stxAmountSchema } from '@common/validation/currency-schema';
-import { formatInsufficientBalanceError, formatPrecisionError } from '@common/error-formatters';
-import { SendFormErrorMessages } from '@common/error-messages';
-import { isNumber } from '@common/utils';
-import { useCurrentAccountAvailableStxBalance } from '@store/accounts/account.hooks';
-import { stxToMicroStx } from '@common/stacks-utils';
+import { STX_DECIMALS } from '@shared/constants';
+import { stxAmountSchema } from '@app/common/validation/currency-schema';
+import { formatInsufficientBalanceError, formatPrecisionError } from '@app/common/error-formatters';
+import { SendFormErrorMessages } from '@app/common/error-messages';
+import { isNumber } from '@app/common/utils';
+import { useCurrentAccountAvailableStxBalance } from '@app/store/accounts/account.hooks';
+import { stxToMicroStx } from '@app/common/stacks-utils';
 
 /**
  * @param amountToSend stx amount in µSTX

src/app/common/validation/validate-memo.ts

@@ -1,6 +1,6 @@
 import * as yup from 'yup';
 import { MEMO_MAX_LENGTH_BYTES } from '@stacks/transactions';
-import { isString } from '@common/utils';
+import { isString } from '@app/common/utils';
 
 const exceedsMaxLengthBytes = (string: string, maxLengthBytes: number): boolean =>
   string ? Buffer.from(string).length > maxLengthBytes : false;

src/app/common/validation/validate-tx-id.spec.ts

@@ -1,4 +1,4 @@
-import { validateTxId } from '@common/validation/validate-tx-id';
+import { validateTxId } from '@app/common/validation/validate-tx-id';
 
 const TX_ID_WITH_NO_0x = '117a6522b4e9ec27ff10bbe3940a4a07fd58e5352010b4143992edb05a7130c7';
 const TX_ID = '0x117a6522b4e9ec27ff10bbe3940a4a07fd58e5352010b4143992edb05a7130c7';

src/app/common/validation/validate-tx-id.ts

@@ -1,4 +1,4 @@
-import { with0x } from '@common/utils';
+import { with0x } from '@app/common/utils';
 
 export function validateTxId(txid: string): boolean {
   const value = with0x(txid).toLowerCase();

src/app/components/account-avatar/account-avatar.tsx

@@ -2,8 +2,8 @@ import { BoxProps, color, Circle } from '@stacks/ui';
 import { Suspense } from 'react';
 import { Account, getAccountDisplayName } from '@stacks/wallet-sdk';
 
-import { useAccountGradient } from '@common/hooks/account/use-account-gradient';
-import { AccountWithAddress } from '@store/accounts/account.models';
+import { useAccountGradient } from '@app/common/hooks/account/use-account-gradient';
+import { AccountWithAddress } from '@app/store/accounts/account.models';
 
 interface AccountAvatarProps extends BoxProps {
   account: AccountWithAddress | Account;

src/app/components/account-balance-caption.tsx

@@ -1,5 +1,5 @@
-import { stacksValue } from '@common/stacks-utils';
-import { Caption, Text } from '@components/typography';
+import { stacksValue } from '@app/common/stacks-utils';
+import { Caption, Text } from '@app/components/typography';
 import { color } from '@stacks/ui';
 import BigNumber from 'bignumber.js';
 

src/app/components/app-icon/index.tsx

@@ -1,7 +1,7 @@
 import { Box, BoxProps } from '@stacks/ui';
 
-import { Image } from '@components/image';
-import { useAppDetails } from '@common/hooks/auth/use-app-details';
+import { Image } from '@app/components/image';
+import { useAppDetails } from '@app/common/hooks/auth/use-app-details';
 
 export const AppIcon = (props: BoxProps) => {
   const { name, icon } = useAppDetails();

src/app/components/asset-item.tsx

@@ -1,11 +1,11 @@
-import { SpaceBetween } from '@components/space-between';
+import { SpaceBetween } from '@app/components/space-between';
 import { Box, Stack, StackProps } from '@stacks/ui';
-import { AssetAvatar } from '@components/stx-avatar';
-import { Caption, Text } from '@components/typography';
+import { AssetAvatar } from '@app/components/stx-avatar';
+import { Caption, Text } from '@app/components/typography';
 import { forwardRef, memo } from 'react';
-import { usePressable } from '@components/item-hover';
-import { Tooltip } from '@components/tooltip';
-import { getFormattedAmount } from '@common/token-utils';
+import { usePressable } from '@app/components/item-hover';
+import { Tooltip } from '@app/components/tooltip';
+import { getFormattedAmount } from '@app/common/token-utils';
 import { FiCornerDownRight, FiInfo } from 'react-icons/fi';
 import { color, Flex } from '@stacks/ui';
 

src/app/components/asset-row.tsx

@@ -1,11 +1,11 @@
 import { forwardRef } from 'react';
 import { StackProps } from '@stacks/ui';
-import { ftDecimals, stacksValue } from '@common/stacks-utils';
-import type { AssetWithMeta } from '@common/asset-types';
+import { ftDecimals, stacksValue } from '@app/common/stacks-utils';
+import type { AssetWithMeta } from '@app/common/asset-types';
 import { getAssetName } from '@stacks/ui-utils';
-import { AssetItem } from '@components/asset-item';
-import { getTicker } from '@common/utils';
-import { useCurrentAccountAvailableStxBalance } from '@store/accounts/account.hooks';
+import { AssetItem } from '@app/components/asset-item';
+import { getTicker } from '@app/common/utils';
+import { useCurrentAccountAvailableStxBalance } from '@app/store/accounts/account.hooks';
 import { BigNumber } from 'bignumber.js';
 
 interface AssetRowProps extends StackProps {

src/app/components/card/index.tsx

@@ -1,6 +1,6 @@
 import { memo } from 'react';
 import { Box, BoxProps, color, Flex } from '@stacks/ui';
-import { Caption } from '@components/typography';
+import { Caption } from '@app/components/typography';
 
 interface CardProps extends BoxProps {
   title: string;

src/app/components/container/container.tsx

@@ -1,11 +1,11 @@
 import { Suspense, useCallback, useEffect } from 'react';
 import { Outlet } from 'react-router-dom';
 
-import { useWallet } from '@common/hooks/use-wallet';
-import { useAuthRequest } from '@store/onboarding/onboarding.hooks';
-import { usePendingTransaction } from '@store/transactions/transaction.hooks';
-import { useOnCancel } from '@store/transactions/requests.hooks';
-import { useRouteHeaderState } from '@store/ui/ui.hooks';
+import { useWallet } from '@app/common/hooks/use-wallet';
+import { useAuthRequest } from '@app/store/onboarding/onboarding.hooks';
+import { usePendingTransaction } from '@app/store/transactions/transaction.hooks';
+import { useOnCancel } from '@app/store/transactions/requests.hooks';
+import { useRouteHeaderState } from '@app/store/ui/ui.hooks';
 
 import { ContainerLayout } from './container.layout';
 

src/app/components/drawer/accounts/create-account.tsx

@@ -1,9 +1,9 @@
 import { useCallback, useEffect, useState } from 'react';
 import { Box, Flex, Button, Stack } from '@stacks/ui';
-import { useWallet } from '@common/hooks/use-wallet';
-import { Body } from '@components/typography';
+import { useWallet } from '@app/common/hooks/use-wallet';
+import { Body } from '@app/components/typography';
 import { SettingsSelectors } from '@tests/integration/settings.selectors';
-import { useAnalytics } from '@common/hooks/analytics/use-analytics';
+import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
 
 interface CreateAccountProps {
   close: () => void;

src/app/components/drawer/index.tsx

@@ -2,9 +2,9 @@ import { useRef, useCallback, memo, ReactNode, Suspense } from 'react';
 import { Flex, useEventListener, IconButton, color, transition } from '@stacks/ui';
 import { FiX as IconX } from 'react-icons/fi';
 
-import { useOnClickOutside } from '@common/hooks/use-onclickoutside';
-import { isString } from '@common/utils';
-import { Title } from '@components/typography';
+import { useOnClickOutside } from '@app/common/hooks/use-onclickoutside';
+import { isString } from '@app/common/utils';
+import { Title } from '@app/components/typography';
 
 export interface BaseDrawerProps {
   isShowing: boolean;

src/app/components/event-card.tsx

@@ -1,8 +1,8 @@
 import { FiMoreHorizontal } from 'react-icons/fi';
 import { Box, color, IconButton, Stack, Text } from '@stacks/ui';
 
-import { Caption } from '@components/typography';
-import { SpaceBetween } from '@components/space-between';
+import { Caption } from '@app/components/typography';
+import { SpaceBetween } from '@app/components/space-between';
 
 import { TxAssetItem } from './tx-asset-item';
 

src/app/components/fee-row/components/custom-fee-field.tsx

@@ -3,10 +3,10 @@ import BigNumber from 'bignumber.js';
 import { useField } from 'formik';
 import { color, Input, InputGroup, Stack, StackProps } from '@stacks/ui';
 
-import { stxToMicroStx } from '@common/stacks-utils';
-import { SendFormWarningMessages } from '@common/warning-messages';
-import { Caption } from '@components/typography';
-import { useFeeEstimationsState } from '@store/transactions/fees.hooks';
+import { stxToMicroStx } from '@app/common/stacks-utils';
+import { SendFormWarningMessages } from '@app/common/warning-messages';
+import { Caption } from '@app/components/typography';
+import { useFeeEstimationsState } from '@app/store/transactions/fees.hooks';
 import { SendFormSelectors } from '@tests/page-objects/send-form.selectors';
 
 interface CustomFeeFieldProps extends StackProps {

src/app/components/fee-row/components/fee-estimate-item.tsx

@@ -1,8 +1,8 @@
 import { FiChevronDown } from 'react-icons/fi';
 import { color, Stack } from '@stacks/ui';
 
-import { SpaceBetween } from '@components/space-between';
-import { Caption } from '@components/typography';
+import { SpaceBetween } from '@app/components/space-between';
+import { Caption } from '@app/components/typography';
 import { SendFormSelectors } from '@tests/page-objects/send-form.selectors';
 
 const LABELS = ['Low', 'Standard', 'High', 'Custom'];

src/app/components/fee-row/components/fee-estimate-select.tsx

@@ -1,8 +1,8 @@
 import { Dispatch, SetStateAction, useRef } from 'react';
 import { color, Fade, Stack } from '@stacks/ui';
 
-import { useOnClickOutside } from '@common/hooks/use-onclickoutside';
-import { Estimations, FeeEstimation } from '@models/fees-types';
+import { useOnClickOutside } from '@app/common/hooks/use-onclickoutside';
+import { Estimations, FeeEstimation } from '@shared/models/fees-types';
 
 import { FeeEstimateItem } from './fee-estimate-item';
 import { SendFormSelectors } from '@tests/page-objects/send-form.selectors';

src/app/components/fee-row/fee-row.tsx

@@ -3,16 +3,16 @@ import { FiInfo } from 'react-icons/fi';
 import { useField } from 'formik';
 import { Box, color, Stack, Text } from '@stacks/ui';
 
-import { microStxToStx, stacksValue } from '@common/stacks-utils';
-import { openInNewTab } from '@common/utils/open-in-new-tab';
-import { ErrorLabel } from '@components/error-label';
-import { Tooltip } from '@components/tooltip';
-import { WarningLabel } from '@components/warning-label';
-import { LoadingRectangle } from '@components/loading-rectangle';
-import { SpaceBetween } from '@components/space-between';
-import { Caption } from '@components/typography';
-import { Estimations } from '@models/fees-types';
-import { useFeeEstimationsState } from '@store/transactions/fees.hooks';
+import { microStxToStx, stacksValue } from '@app/common/stacks-utils';
+import { openInNewTab } from '@app/common/utils/open-in-new-tab';
+import { ErrorLabel } from '@app/components/error-label';
+import { Tooltip } from '@app/components/tooltip';
+import { WarningLabel } from '@app/components/warning-label';
+import { LoadingRectangle } from '@app/components/loading-rectangle';
+import { SpaceBetween } from '@app/components/space-between';
+import { Caption } from '@app/components/typography';
+import { Estimations } from '@shared/models/fees-types';
+import { useFeeEstimationsState } from '@app/store/transactions/fees.hooks';
 import { SendFormSelectors } from '@tests/page-objects/send-form.selectors';
 
 import { TransactionFee } from './components/transaction-fee';

src/app/components/header.tsx

@@ -3,12 +3,12 @@ import { useNavigate } from 'react-router-dom';
 import { Box, BoxProps, color, Flex, FlexProps, IconButton, Stack } from '@stacks/ui';
 import { FiMoreHorizontal as IconDots, FiArrowLeft as IconArrowLeft } from 'react-icons/fi';
 
-import { HiroWalletLogo } from '@components/hiro-wallet-logo';
-import { useDrawers } from '@common/hooks/use-drawers';
-import { NetworkModeBadge } from '@components/network-mode-badge';
-import { Caption, Title } from '@components/typography';
-import { RouteUrls } from '@routes/route-urls';
+import { HiroWalletLogo } from '@app/components/hiro-wallet-logo';
+import { useDrawers } from '@app/common/hooks/use-drawers';
+import { NetworkModeBadge } from '@app/components/network-mode-badge';
+import { Caption, Title } from '@app/components/typography';
 import { OnboardingSelectors } from '@tests/integration/onboarding.selectors';
+import { RouteUrls } from '@shared/route-urls';
 
 const MenuButton = memo((props: BoxProps) => {
   const { showSettings, setShowSettings } = useDrawers();

src/app/components/hiro-wallet-logo.tsx

@@ -1,7 +1,7 @@
 import { memo } from 'react';
 
 import { Stack, StackProps, color, Box, BoxProps } from '@stacks/ui';
-import { Title } from '@components/typography';
+import { Title } from '@app/components/typography';
 
 const HiroSvg = (props: BoxProps) => (
   <Box as="svg" viewBox="0 0 16 16" fill="none" {...props}>