Use .js imports in src (#1224)

* Use .js imports in src

* Bump dev

* Add WP extension aliases

package.json

@@ -38,7 +38,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.21.0",
-    "@polkadot/dev": "^0.70.4",
+    "@polkadot/dev": "^0.71.1",
     "@types/node": "^18.14.5",
     "i18next-scanner": "^4.1.1",
     "sinon-chrome": "^3.0.1"

packages/extension-base/src/background/RequestBytesSign.ts

@@ -4,7 +4,7 @@
 import type { KeyringPair } from '@polkadot/keyring/types';
 import type { SignerPayloadRaw } from '@polkadot/types/types';
 import type { HexString } from '@polkadot/util/types';
-import type { RequestSign } from './types';
+import type { RequestSign } from './types.js';
 
 import { wrapBytes } from '@polkadot/extension-dapp/wrapBytes';
 import { TypeRegistry } from '@polkadot/types';

packages/extension-base/src/background/RequestExtrinsicSign.ts

@@ -4,7 +4,7 @@
 import type { KeyringPair } from '@polkadot/keyring/types';
 import type { SignerPayloadJSON } from '@polkadot/types/types';
 import type { HexString } from '@polkadot/util/types';
-import type { RequestSign } from './types';
+import type { RequestSign } from './types.js';
 
 import { TypeRegistry } from '@polkadot/types';
 

packages/extension-base/src/background/handlers/Extension.spec.ts

@@ -16,10 +16,10 @@ import { TypeRegistry } from '@polkadot/types';
 import keyring from '@polkadot/ui-keyring';
 import { cryptoWaitReady } from '@polkadot/util-crypto';
 
-import { AccountsStore } from '../../stores';
-import Extension from './Extension';
-import State, { AuthUrls } from './State';
-import Tabs from './Tabs';
+import { AccountsStore } from '../../stores/index.js';
+import Extension from './Extension.js';
+import State, { AuthUrls } from './State.js';
+import Tabs from './Tabs.js';
 
 describe('Extension', () => {
   let extension: Extension;

packages/extension-base/src/background/handlers/Extension.ts

@@ -6,7 +6,7 @@ import type { KeyringPair, KeyringPair$Json, KeyringPair$Meta } from '@polkadot/
 import type { Registry, SignerPayloadJSON, SignerPayloadRaw } from '@polkadot/types/types';
 import type { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
 import type { KeypairType } from '@polkadot/util-crypto/types';
-import type { AccountJson, AllowedPath, AuthorizeRequest, MessageTypes, MetadataRequest, RequestAccountBatchExport, RequestAccountChangePassword, RequestAccountCreateExternal, RequestAccountCreateHardware, RequestAccountCreateSuri, RequestAccountEdit, RequestAccountExport, RequestAccountForget, RequestAccountShow, RequestAccountTie, RequestAccountValidate, RequestActiveTabsUrlUpdate, RequestAuthorizeApprove, RequestBatchRestore, RequestDeriveCreate, RequestDeriveValidate, RequestJsonRestore, RequestMetadataApprove, RequestMetadataReject, RequestSeedCreate, RequestSeedValidate, RequestSigningApprovePassword, RequestSigningApproveSignature, RequestSigningCancel, RequestSigningIsLocked, RequestTypes, RequestUpdateAuthorizedAccounts, ResponseAccountExport, ResponseAccountsExport, ResponseAuthorizeList, ResponseDeriveValidate, ResponseJsonGetAccountInfo, ResponseSeedCreate, ResponseSeedValidate, ResponseSigningIsLocked, ResponseType, SigningRequest } from '../types';
+import type { AccountJson, AllowedPath, AuthorizeRequest, MessageTypes, MetadataRequest, RequestAccountBatchExport, RequestAccountChangePassword, RequestAccountCreateExternal, RequestAccountCreateHardware, RequestAccountCreateSuri, RequestAccountEdit, RequestAccountExport, RequestAccountForget, RequestAccountShow, RequestAccountTie, RequestAccountValidate, RequestActiveTabsUrlUpdate, RequestAuthorizeApprove, RequestBatchRestore, RequestDeriveCreate, RequestDeriveValidate, RequestJsonRestore, RequestMetadataApprove, RequestMetadataReject, RequestSeedCreate, RequestSeedValidate, RequestSigningApprovePassword, RequestSigningApproveSignature, RequestSigningCancel, RequestSigningIsLocked, RequestTypes, RequestUpdateAuthorizedAccounts, ResponseAccountExport, ResponseAccountsExport, ResponseAuthorizeList, ResponseDeriveValidate, ResponseJsonGetAccountInfo, ResponseSeedCreate, ResponseSeedValidate, ResponseSigningIsLocked, ResponseType, SigningRequest } from '../types.js';
 
 import { ALLOWED_PATH, PASSWORD_EXPIRY_MS } from '@polkadot/extension-base/defaults';
 import { metadataExpand } from '@polkadot/extension-chains';
@@ -16,9 +16,9 @@ import { accounts as accountsObservable } from '@polkadot/ui-keyring/observable/
 import { assert, isHex } from '@polkadot/util';
 import { keyExtractSuri, mnemonicGenerate, mnemonicValidate } from '@polkadot/util-crypto';
 
-import { withErrorLog } from './helpers';
-import State, { AuthorizedAccountsDiff } from './State';
-import { createSubscription, unsubscribe } from './subscriptions';
+import { withErrorLog } from './helpers.js';
+import State, { AuthorizedAccountsDiff } from './State.js';
+import { createSubscription, unsubscribe } from './subscriptions.js';
 
 type CachedUnlocks = Record<string, number>;
 

packages/extension-base/src/background/handlers/State.ts

@@ -3,7 +3,7 @@
 
 import type { MetadataDef, ProviderMeta } from '@polkadot/extension-inject/types';
 import type { JsonRpcResponse, ProviderInterface, ProviderInterfaceCallback } from '@polkadot/rpc-provider/types';
-import type { AccountJson, AuthorizeRequest, MetadataRequest, RequestAuthorizeTab, RequestRpcSend, RequestRpcSubscribe, RequestRpcUnsubscribe, RequestSign, ResponseRpcListProviders, ResponseSigning, SigningRequest } from '../types';
+import type { AccountJson, AuthorizeRequest, MetadataRequest, RequestAuthorizeTab, RequestRpcSend, RequestRpcSubscribe, RequestRpcUnsubscribe, RequestSign, ResponseRpcListProviders, ResponseSigning, SigningRequest } from '../types.js';
 
 import { BehaviorSubject } from 'rxjs';
 
@@ -13,8 +13,8 @@ import { knownGenesis } from '@polkadot/networks/defaults';
 import settings from '@polkadot/ui-settings';
 import { assert } from '@polkadot/util';
 
-import { MetadataStore } from '../../stores';
-import { withErrorLog } from './helpers';
+import { MetadataStore } from '../../stores/index.js';
+import { withErrorLog } from './helpers.js';
 
 interface Resolver<T> {
   reject: (error: Error) => void;

packages/extension-base/src/background/handlers/Tabs.ts

@@ -7,7 +7,7 @@ import type { KeyringPair } from '@polkadot/keyring/types';
 import type { JsonRpcResponse } from '@polkadot/rpc-provider/types';
 import type { SignerPayloadJSON, SignerPayloadRaw } from '@polkadot/types/types';
 import type { SubjectInfo } from '@polkadot/ui-keyring/observable/types';
-import type { MessageTypes, RequestAccountList, RequestAccountUnsubscribe, RequestAuthorizeTab, RequestRpcSend, RequestRpcSubscribe, RequestRpcUnsubscribe, RequestTypes, ResponseRpcListProviders, ResponseSigning, ResponseTypes, SubscriptionMessageTypes } from '../types';
+import type { MessageTypes, RequestAccountList, RequestAccountUnsubscribe, RequestAuthorizeTab, RequestRpcSend, RequestRpcSubscribe, RequestRpcUnsubscribe, RequestTypes, ResponseRpcListProviders, ResponseSigning, ResponseTypes, SubscriptionMessageTypes } from '../types.js';
 
 import { PHISHING_PAGE_REDIRECT } from '@polkadot/extension-base/defaults';
 import { canDerive } from '@polkadot/extension-base/utils';
@@ -16,11 +16,11 @@ import keyring from '@polkadot/ui-keyring';
 import { accounts as accountsObservable } from '@polkadot/ui-keyring/observable/accounts';
 import { assert, isNumber } from '@polkadot/util';
 
-import RequestBytesSign from '../RequestBytesSign';
-import RequestExtrinsicSign from '../RequestExtrinsicSign';
-import { withErrorLog } from './helpers';
-import State, { AuthResponse } from './State';
-import { createSubscription, unsubscribe } from './subscriptions';
+import RequestBytesSign from '../RequestBytesSign.js';
+import RequestExtrinsicSign from '../RequestExtrinsicSign.js';
+import { withErrorLog } from './helpers.js';
+import State, { AuthResponse } from './State.js';
+import { createSubscription, unsubscribe } from './subscriptions.js';
 
 interface AccountSub {
   subscription: Subscription;

packages/extension-base/src/background/handlers/index.ts

@@ -1,14 +1,14 @@
 // Copyright 2019-2023 @polkadot/extension authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { MessageTypes, TransportRequestMessage } from '../types';
+import type { MessageTypes, TransportRequestMessage } from '../types.js';
 
 import { assert } from '@polkadot/util';
 
-import { PORT_EXTENSION } from '../../defaults';
-import Extension from './Extension';
-import State from './State';
-import Tabs from './Tabs';
+import { PORT_EXTENSION } from '../../defaults.js';
+import Extension from './Extension.js';
+import State from './State.js';
+import Tabs from './Tabs.js';
 
 const state = new State();
 const extension = new Extension(state);

packages/extension-base/src/background/handlers/subscriptions.ts

@@ -1,7 +1,7 @@
 // Copyright 2019-2023 @polkadot/extension authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { MessageTypesWithSubscriptions, SubscriptionMessageTypes } from '../types';
+import type { MessageTypesWithSubscriptions, SubscriptionMessageTypes } from '../types.js';
 
 type Subscriptions = Record<string, chrome.runtime.Port>;
 

packages/extension-base/src/background/types.ts

@@ -11,8 +11,8 @@ import type { KeyringPairs$Json } from '@polkadot/ui-keyring/types';
 import type { HexString } from '@polkadot/util/types';
 import type { KeypairType } from '@polkadot/util-crypto/types';
 
-import { ALLOWED_PATH } from '../defaults';
-import { AuthResponse, AuthUrls } from './handlers/State';
+import { ALLOWED_PATH } from '../defaults.js';
+import { AuthResponse, AuthUrls } from './handlers/State.js';
 
 type KeysWithDefinedValues<T> = {
   [K in keyof T]: T[K] extends undefined ? never : K

packages/extension-base/src/bundle.ts

@@ -1,4 +1,4 @@
 // Copyright 2019-2023 @polkadot/extension-base authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-export { packageInfo } from './packageInfo';
+export { packageInfo } from './packageInfo.js';

packages/extension-base/src/detectPackage.ts

@@ -5,7 +5,7 @@
 
 import { detectPackage } from '@polkadot/util';
 
-import others from './detectOther';
-import { packageInfo } from './packageInfo';
+import others from './detectOther.js';
+import { packageInfo } from './packageInfo.js';
 
 detectPackage(packageInfo, null, others);

packages/extension-base/src/index.ts

@@ -4,4 +4,4 @@
 // Since we inject into pages, we skip this
 // import './detectPackage';
 
-export * from './bundle';
+export * from './bundle.js';

packages/extension-base/src/page/Accounts.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { InjectedAccount, InjectedAccounts, Unsubcall } from '@polkadot/extension-inject/types';
-import type { SendRequest } from './types';
+import type { SendRequest } from './types.js';
 
 // External to class, this.# is not private enough (yet)
 let sendRequest: SendRequest;

packages/extension-base/src/page/Injected.ts

@@ -2,12 +2,12 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { Injected } from '@polkadot/extension-inject/types';
-import type { SendRequest } from './types';
+import type { SendRequest } from './types.js';
 
-import Accounts from './Accounts';
-import Metadata from './Metadata';
-import PostMessageProvider from './PostMessageProvider';
-import Signer from './Signer';
+import Accounts from './Accounts.js';
+import Metadata from './Metadata.js';
+import PostMessageProvider from './PostMessageProvider.js';
+import Signer from './Signer.js';
 
 export default class implements Injected {
   public readonly accounts: Accounts;

packages/extension-base/src/page/Metadata.ts

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { InjectedMetadata, InjectedMetadataKnown, MetadataDef } from '@polkadot/extension-inject/types';
-import type { SendRequest } from './types';
+import type { SendRequest } from './types.js';
 
 // External to class, this.# is not private enough (yet)
 let sendRequest: SendRequest;

packages/extension-base/src/page/PostMessageProvider.ts

@@ -4,7 +4,7 @@
 import type { InjectedProvider, ProviderList, ProviderMeta } from '@polkadot/extension-inject/types';
 import type { ProviderInterfaceEmitCb, ProviderInterfaceEmitted } from '@polkadot/rpc-provider/types';
 import type { AnyFunction } from '@polkadot/types/types';
-import type { SendRequest } from './types';
+import type { SendRequest } from './types.js';
 
 import EventEmitter from 'eventemitter3';
 

packages/extension-base/src/page/Signer.ts

@@ -3,7 +3,7 @@
 
 import type { Signer as SignerInterface, SignerResult } from '@polkadot/api/types';
 import type { SignerPayloadJSON, SignerPayloadRaw } from '@polkadot/types/types';
-import type { SendRequest } from './types';
+import type { SendRequest } from './types.js';
 
 // External to class, this.# is not private enough (yet)
 let sendRequest: SendRequest;

packages/extension-base/src/page/index.ts

@@ -3,9 +3,9 @@
 
 import type { MessageTypes, MessageTypesWithNoSubscriptions, MessageTypesWithNullRequest, MessageTypesWithSubscriptions, RequestTypes, ResponseTypes, SubscriptionMessageTypes, TransportRequestMessage, TransportResponseMessage } from '../background/types';
 
-import { MESSAGE_ORIGIN_PAGE } from '../defaults';
-import { getId } from '../utils/getId';
-import Injected from './Injected';
+import { MESSAGE_ORIGIN_PAGE } from '../defaults.js';
+import { getId } from '../utils/getId.js';
+import Injected from './Injected.js';
 
 // when sending a message from the injector to the extension, we
 //  - create an event - this we send to the loader

packages/extension-base/src/stores/Accounts.ts

@@ -3,8 +3,8 @@
 
 import type { KeyringJson, KeyringStore } from '@polkadot/ui-keyring/types';
 
-import { EXTENSION_PREFIX } from '../defaults';
-import BaseStore from './Base';
+import { EXTENSION_PREFIX } from '../defaults.js';
+import BaseStore from './Base.js';
 
 export default class AccountsStore extends BaseStore<KeyringJson> implements KeyringStore {
   constructor () {

packages/extension-base/src/stores/Metadata.ts

@@ -3,8 +3,8 @@
 
 import type { MetadataDef } from '@polkadot/extension-inject/types';
 
-import { EXTENSION_PREFIX } from '../defaults';
-import BaseStore from './Base';
+import { EXTENSION_PREFIX } from '../defaults.js';
+import BaseStore from './Base.js';
 
 export default class MetadataStore extends BaseStore<MetadataDef> {
   constructor () {

packages/extension-base/src/stores/index.ts

@@ -1,5 +1,5 @@
 // Copyright 2019-2023 @polkadot/extension-base authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-export { default as AccountsStore } from './Accounts';
-export { default as MetadataStore } from './Metadata';
+export { default as AccountsStore } from './Accounts.js';
+export { default as MetadataStore } from './Metadata.js';

packages/extension-base/src/utils/getId.ts

@@ -1,7 +1,7 @@
 // Copyright 2019-2023 @polkadot/extension authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { EXTENSION_PREFIX } from '../defaults';
+import { EXTENSION_PREFIX } from '../defaults.js';
 
 let counter = 0;
 

packages/extension-base/src/utils/index.ts

@@ -1,4 +1,4 @@
 // Copyright 2019-2023 @polkadot/extension authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-export { canDerive } from './canDerive';
+export { canDerive } from './canDerive.js';

packages/extension-chains/src/bundle.ts

@@ -3,12 +3,12 @@
 
 import type { MetadataDef } from '@polkadot/extension-inject/types';
 import type { ChainProperties } from '@polkadot/types/interfaces';
-import type { Chain } from './types';
+import type { Chain } from './types.js';
 
 import { Metadata, TypeRegistry } from '@polkadot/types';
 import { base64Decode } from '@polkadot/util-crypto';
 
-export { packageInfo } from './packageInfo';
+export { packageInfo } from './packageInfo.js';
 
 // imports chain details, generally metadata. For the generation of these,
 // inside the api, run `yarn chain:info --ws <url>`

packages/extension-chains/src/detectPackage.ts

@@ -5,7 +5,7 @@
 
 import { detectPackage } from '@polkadot/util';
 
-import others from './detectOther';
-import { packageInfo } from './packageInfo';
+import others from './detectOther.js';
+import { packageInfo } from './packageInfo.js';
 
 detectPackage(packageInfo, null, others);

packages/extension-chains/src/index.ts

@@ -4,4 +4,4 @@
 // Since we inject into pages, we skip this
 // import './detectPackage';
 
-export * from './bundle';
+export * from './bundle.js';

packages/extension-compat-metamask/src/bundle.ts

@@ -10,7 +10,7 @@ import Web3 from 'web3';
 
 import { assert } from '@polkadot/util';
 
-export { packageInfo } from './packageInfo';
+export { packageInfo } from './packageInfo.js';
 
 interface RequestArguments {
   method: string;

packages/extension-compat-metamask/src/detectPackage.ts

@@ -5,7 +5,7 @@
 
 import { detectPackage } from '@polkadot/util';
 
-import others from './detectOther';
-import { packageInfo } from './packageInfo';
+import others from './detectOther.js';
+import { packageInfo } from './packageInfo.js';
 
 detectPackage(packageInfo, null, others);

packages/extension-compat-metamask/src/index.ts

@@ -4,4 +4,4 @@
 // Since we inject into pages, we skip this
 // import './detectPackage';
 
-export * from './bundle';
+export * from './bundle.js';

packages/extension-dapp/src/bundle.ts

@@ -6,11 +6,11 @@ import type { InjectedAccount, InjectedAccountWithMeta, InjectedExtension, Injec
 import { isPromise, objectSpread, u8aEq } from '@polkadot/util';
 import { decodeAddress, encodeAddress } from '@polkadot/util-crypto';
 
-import { documentReadyPromise } from './util';
+import { documentReadyPromise } from './util.js';
 
 // expose utility functions
-export { packageInfo } from './packageInfo';
-export { unwrapBytes, wrapBytes } from './wrapBytes';
+export { packageInfo } from './packageInfo.js';
+export { unwrapBytes, wrapBytes } from './wrapBytes.js';
 
 // just a helper (otherwise we cast all-over, so shorter and more readable)
 const win = window as Window & InjectedWindow;

packages/extension-dapp/src/detectPackage.ts

@@ -5,7 +5,7 @@
 
 import { detectPackage } from '@polkadot/util';
 
-import others from './detectOther';
-import { packageInfo } from './packageInfo';
+import others from './detectOther.js';
+import { packageInfo } from './packageInfo.js';
 
 detectPackage(packageInfo, null, others);

packages/extension-dapp/src/index.ts

@@ -4,4 +4,4 @@
 // Since we inject into pages, we skip this
 // import './detectPackage';
 
-export * from './bundle';
+export * from './bundle.js';

packages/extension-dapp/src/wrapBytes.spec.ts

@@ -5,7 +5,7 @@
 
 import { u8aConcat, u8aEq, u8aToString } from '@polkadot/util';
 
-import { ETHEREUM, POSTFIX, PREFIX, unwrapBytes, wrapBytes } from './wrapBytes';
+import { ETHEREUM, POSTFIX, PREFIX, unwrapBytes, wrapBytes } from './wrapBytes.js';
 
 const TEST_DATA = 'this is just some random message that we expect to be wrapped along the way';
 const TEST_ETH = u8aConcat(ETHEREUM, TEST_DATA);

packages/extension-inject/src/bundle.ts

@@ -1,11 +1,11 @@
 // Copyright 2019-2023 @polkadot/extension-inject authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { Injected, InjectedExtension, InjectedWindow, InjectOptions } from './types';
+import type { Injected, InjectedExtension, InjectedWindow, InjectOptions } from './types.js';
 
-import { cyrb53 } from './cyrb53';
+import { cyrb53 } from './cyrb53.js';
 
-export { packageInfo } from './packageInfo';
+export { packageInfo } from './packageInfo.js';
 
 // setting for new-style connect (more-secure with no details exposed without
 // user acknowledgement, however slightly less-compatible with all dapps, some

packages/extension-inject/src/detectPackage.ts

@@ -5,7 +5,7 @@
 
 import { detectPackage } from '@polkadot/util';
 
-import others from './detectOther';
-import { packageInfo } from './packageInfo';
+import others from './detectOther.js';
+import { packageInfo } from './packageInfo.js';
 
 detectPackage(packageInfo, null, others);

packages/extension-inject/src/index.ts

@@ -4,4 +4,4 @@
 // Since we inject into pages, we skip this
 // import './detectPackage';
 
-export * from './bundle';
+export * from './bundle.js';

packages/extension-ui/src/Popup/Accounts/Account.spec.tsx

@@ -14,10 +14,10 @@ import { act } from 'react-dom/test-utils';
 import { MemoryRouter } from 'react-router';
 import { ThemeProvider } from 'styled-components';
 
-import { Theme, themes } from '../../components';
-import * as messaging from '../../messaging';
-import { flushAllPromises } from '../../testHelpers';
-import Account from './Account';
+import { Theme, themes } from '../../components/index.js';
+import * as messaging from '../../messaging.js';
+import { flushAllPromises } from '../../testHelpers.js';
+import Account from './Account.js';
 
 const { configure, mount } = enzyme;
 

packages/extension-ui/src/Popup/Accounts/Account.tsx

@@ -8,12 +8,12 @@ import React, { useCallback, useContext, useEffect, useMemo, useState } from 're
 import { canDerive } from '@polkadot/extension-base/utils';
 import { ThemeProps } from '@polkadot/extension-ui/types';
 
-import { AccountContext, Address, Checkbox, Dropdown, Link, MenuDivider } from '../../components';
-import useGenesisHashOptions from '../../hooks/useGenesisHashOptions';
-import useTranslation from '../../hooks/useTranslation';
-import { editAccount, tieAccount } from '../../messaging';
-import { Name } from '../../partials';
-import { styled } from '../../styled';
+import { AccountContext, Address, Checkbox, Dropdown, Link, MenuDivider } from '../../components/index.js';
+import useGenesisHashOptions from '../../hooks/useGenesisHashOptions.js';
+import useTranslation from '../../hooks/useTranslation.js';
+import { editAccount, tieAccount } from '../../messaging.js';
+import { Name } from '../../partials/index.js';
+import { styled } from '../../styled.js';
 
 interface Props extends AccountJson {
   className?: string;

packages/extension-ui/src/Popup/Accounts/AccountsTree.tsx

@@ -5,8 +5,8 @@ import type { AccountWithChildren } from '@polkadot/extension-base/background/ty
 
 import React from 'react';
 
-import { styled } from '../../styled';
-import Account from './Account';
+import { styled } from '../../styled.js';
+import Account from './Account.js';
 
 interface Props extends AccountWithChildren {
   className?: string

packages/extension-ui/src/Popup/Accounts/AddAccount.tsx

@@ -1,15 +1,15 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../../types';
+import type { ThemeProps } from '../../types.js';
 
 import React, { useCallback, useContext } from 'react';
 
-import { ActionContext } from '../../components';
-import useTranslation from '../../hooks/useTranslation';
-import Header from '../../partials/Header';
-import { styled } from '../../styled';
-import AddAccountImage from './AddAccountImage';
+import { ActionContext } from '../../components/index.js';
+import useTranslation from '../../hooks/useTranslation.js';
+import Header from '../../partials/Header.js';
+import { styled } from '../../styled.js';
+import AddAccountImage from './AddAccountImage.js';
 
 interface Props extends ThemeProps {
   className?: string;

packages/extension-ui/src/Popup/Accounts/AddAccountImage.tsx

@@ -7,11 +7,11 @@
 /* eslint-disable react/jsx-sort-props */
 /* eslint-disable react/jsx-max-props-per-line */
 
-import type { ThemeProps } from '../../types';
+import type { ThemeProps } from '../../types.js';
 
 import React from 'react';
 
-import { styled } from '../../styled';
+import { styled } from '../../styled.js';
 
 interface Props extends ThemeProps {
   className?: string;

packages/extension-ui/src/Popup/Accounts/index.tsx

@@ -1,19 +1,19 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../../types';
+import type { ThemeProps } from '../../types.js';
 
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 
 import { AccountWithChildren } from '@polkadot/extension-base/background/types';
 import getNetworkMap from '@polkadot/extension-ui/util/getNetworkMap';
 
-import { AccountContext } from '../../components';
-import useTranslation from '../../hooks/useTranslation';
-import { Header } from '../../partials';
-import { styled } from '../../styled';
-import AccountsTree from './AccountsTree';
-import AddAccount from './AddAccount';
+import { AccountContext } from '../../components/index.js';
+import useTranslation from '../../hooks/useTranslation.js';
+import { Header } from '../../partials/index.js';
+import { styled } from '../../styled.js';
+import AccountsTree from './AccountsTree.js';
+import AddAccount from './AddAccount.js';
 
 interface Props extends ThemeProps {
   className?: string;

packages/extension-ui/src/Popup/AuthManagement/AccountManagement.tsx

@@ -1,16 +1,16 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../../types';
+import type { ThemeProps } from '../../types.js';
 
 import React, { useCallback, useContext, useEffect } from 'react';
 import { useParams } from 'react-router';
 
-import { AccountContext, ActionContext, Button } from '../../components';
-import useTranslation from '../../hooks/useTranslation';
-import { getAuthList, updateAuthorization } from '../../messaging';
-import { AccountSelection, Header } from '../../partials';
-import { styled } from '../../styled';
+import { AccountContext, ActionContext, Button } from '../../components/index.js';
+import useTranslation from '../../hooks/useTranslation.js';
+import { getAuthList, updateAuthorization } from '../../messaging.js';
+import { AccountSelection, Header } from '../../partials/index.js';
+import { styled } from '../../styled.js';
 
 interface Props extends ThemeProps {
   className?: string;
@@ -37,7 +37,7 @@ function AccountManagement ({ className }: Props): React.ReactElement<Props> {
   const _onApprove = useCallback(
     (): void => {
       updateAuthorization(selectedAccounts, url)
-        .then(() => onAction('..'))
+        .then(() => onAction('../index.js'))
         .catch(console.error);
     },
     [onAction, selectedAccounts, url]

packages/extension-ui/src/Popup/AuthManagement/WebsiteEntry.tsx

@@ -1,7 +1,7 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../../types';
+import type { ThemeProps } from '../../types.js';
 
 import React, { useCallback } from 'react';
 import { Link } from 'react-router-dom';
@@ -10,7 +10,7 @@ import { AuthUrlInfo } from '@polkadot/extension-base/background/handlers/State'
 import { RemoveAuth } from '@polkadot/extension-ui/components';
 import { useTranslation } from '@polkadot/extension-ui/components/translate';
 
-import { styled } from '../../styled';
+import { styled } from '../../styled.js';
 
 interface Props extends ThemeProps {
   className?: string;

packages/extension-ui/src/Popup/AuthManagement/index.tsx

@@ -1,18 +1,18 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../../types';
+import type { ThemeProps } from '../../types.js';
 
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { AuthUrlInfo, AuthUrls } from '@polkadot/extension-base/background/handlers/State';
 import { InputFilter } from '@polkadot/extension-ui/components';
 
-import useTranslation from '../../hooks/useTranslation';
-import { getAuthList, removeAuthorization } from '../../messaging';
-import { Header } from '../../partials';
-import { styled } from '../../styled';
-import WebsiteEntry from './WebsiteEntry';
+import useTranslation from '../../hooks/useTranslation.js';
+import { getAuthList, removeAuthorization } from '../../messaging.js';
+import { Header } from '../../partials/index.js';
+import { styled } from '../../styled.js';
+import WebsiteEntry from './WebsiteEntry.js';
 
 interface Props extends ThemeProps {
   className?: string;

packages/extension-ui/src/Popup/Authorize/Authorize.spec.tsx

@@ -13,12 +13,12 @@ import enzyme from 'enzyme';
 import React from 'react';
 import { ThemeProvider } from 'styled-components';
 
-import { AccountContext, AuthorizeReqContext, themes, Warning } from '../../components';
-import { Header } from '../../partials';
-import { buildHierarchy } from '../../util/buildHierarchy';
-import Account from '../Accounts/Account';
-import Request from './Request';
-import Authorize from '.';
+import { AccountContext, AuthorizeReqContext, themes, Warning } from '../../components/index.js';
+import { Header } from '../../partials/index.js';
+import { buildHierarchy } from '../../util/buildHierarchy.js';
+import Account from '../Accounts/Account.js';
+import Authorize from './index.js';
+import Request from './Request.js';
 
 const { configure, mount } = enzyme;
 

packages/extension-ui/src/Popup/Authorize/NoAccount.tsx

@@ -1,7 +1,7 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../../types';
+import type { ThemeProps } from '../../types.js';
 
 import { t } from 'i18next';
 import React, { useCallback } from 'react';
@@ -10,7 +10,7 @@ import { Trans } from 'react-i18next';
 import { Button, Warning } from '@polkadot/extension-ui/components';
 import { deleteAuthRequest } from '@polkadot/extension-ui/messaging';
 
-import { styled } from '../../styled';
+import { styled } from '../../styled.js';
 
 interface Props extends ThemeProps {
   authId: string;

packages/extension-ui/src/Popup/Authorize/Request.tsx

@@ -2,16 +2,16 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { RequestAuthorizeTab } from '@polkadot/extension-base/background/types';
-import type { ThemeProps } from '../../types';
+import type { ThemeProps } from '../../types.js';
 
 import React, { useCallback, useContext, useEffect } from 'react';
 
-import { AccountContext, ActionBar, ActionContext, Button, Link } from '../../components';
-import useTranslation from '../../hooks/useTranslation';
-import { approveAuthRequest, deleteAuthRequest } from '../../messaging';
-import { AccountSelection } from '../../partials';
-import { styled } from '../../styled';
-import NoAccount from './NoAccount';
+import { AccountContext, ActionBar, ActionContext, Button, Link } from '../../components/index.js';
+import useTranslation from '../../hooks/useTranslation.js';
+import { approveAuthRequest, deleteAuthRequest } from '../../messaging.js';
+import { AccountSelection } from '../../partials/index.js';
+import { styled } from '../../styled.js';
+import NoAccount from './NoAccount.js';
 
 interface Props extends ThemeProps {
   authId: string;

packages/extension-ui/src/Popup/Authorize/index.tsx

@@ -1,15 +1,15 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../../types';
+import type { ThemeProps } from '../../types.js';
 
 import React, { useContext } from 'react';
 
-import { AuthorizeReqContext } from '../../components';
-import useTranslation from '../../hooks/useTranslation';
-import { Header } from '../../partials';
-import { styled } from '../../styled';
-import Request from './Request';
+import { AuthorizeReqContext } from '../../components/index.js';
+import useTranslation from '../../hooks/useTranslation.js';
+import { Header } from '../../partials/index.js';
+import { styled } from '../../styled.js';
+import Request from './Request.js';
 
 interface Props extends ThemeProps {
   className?: string;

packages/extension-ui/src/Popup/CreateAccount/CreateAccount.spec.tsx

@@ -13,11 +13,11 @@ import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { ThemeProvider } from 'styled-components';
 
-import { ActionContext, ActionText, Button, themes } from '../../components';
-import * as messaging from '../../messaging';
-import { Header } from '../../partials';
-import { flushAllPromises } from '../../testHelpers';
-import CreateAccount from '.';
+import { ActionContext, ActionText, Button, themes } from '../../components/index.js';
+import * as messaging from '../../messaging.js';
+import { Header } from '../../partials/index.js';
+import { flushAllPromises } from '../../testHelpers.js';
+import CreateAccount from './index.js';
 
 const { configure, mount } = enzyme;
 

packages/extension-ui/src/Popup/CreateAccount/Mnemonic.tsx

@@ -3,9 +3,9 @@
 
 import React, { useCallback, useState } from 'react';
 
-import { ButtonArea, Checkbox, MnemonicSeed, NextStepButton, VerticalSpace, Warning } from '../../components';
-import useToast from '../../hooks/useToast';
-import useTranslation from '../../hooks/useTranslation';
+import { ButtonArea, Checkbox, MnemonicSeed, NextStepButton, VerticalSpace, Warning } from '../../components/index.js';
+import useToast from '../../hooks/useToast.js';
+import useTranslation from '../../hooks/useTranslation.js';
 
 interface Props {
   onNextStep: () => void;

packages/extension-ui/src/Popup/CreateAccount/index.tsx

@@ -3,16 +3,16 @@
 
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 
-import { ActionContext, Address, Dropdown, Loading } from '../../components';
-import AccountNamePasswordCreation from '../../components/AccountNamePasswordCreation';
-import useGenesisHashOptions from '../../hooks/useGenesisHashOptions';
-import useMetadata from '../../hooks/useMetadata';
-import useTranslation from '../../hooks/useTranslation';
-import { createAccountSuri, createSeed, validateSeed } from '../../messaging';
-import { HeaderWithSteps } from '../../partials';
-import { styled } from '../../styled';
-import { DEFAULT_TYPE } from '../../util/defaultType';
-import Mnemonic from './Mnemonic';
+import AccountNamePasswordCreation from '../../components/AccountNamePasswordCreation.js';
+import { ActionContext, Address, Dropdown, Loading } from '../../components/index.js';
+import useGenesisHashOptions from '../../hooks/useGenesisHashOptions.js';
+import useMetadata from '../../hooks/useMetadata.js';
+import useTranslation from '../../hooks/useTranslation.js';
+import { createAccountSuri, createSeed, validateSeed } from '../../messaging.js';
+import { HeaderWithSteps } from '../../partials/index.js';
+import { styled } from '../../styled.js';
+import { DEFAULT_TYPE } from '../../util/defaultType.js';
+import Mnemonic from './Mnemonic.js';
 
 interface Props {
   className?: string;

packages/extension-ui/src/Popup/Derive/AddressDropdown.tsx

@@ -1,14 +1,14 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../../types';
+import type { ThemeProps } from '../../types.js';
 
 import React, { useCallback, useRef, useState } from 'react';
 
 import arrow from '../../assets/arrow-down.svg';
-import { Address } from '../../components';
-import useOutsideClick from '../../hooks/useOutsideClick';
-import { styled } from '../../styled';
+import { Address } from '../../components/index.js';
+import useOutsideClick from '../../hooks/useOutsideClick.js';
+import { styled } from '../../styled.js';
 
 interface Props {
   allAddresses: [string, string | null][];

packages/extension-ui/src/Popup/Derive/DerivationPath.tsx

@@ -1,15 +1,15 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../../types';
+import type { ThemeProps } from '../../types.js';
 
 import { faLock, faLockOpen } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useCallback, useEffect, useState } from 'react';
 
-import { Button, InputWithLabel } from '../../components';
-import useTranslation from '../../hooks/useTranslation';
-import { styled } from '../../styled';
+import { Button, InputWithLabel } from '../../components/index.js';
+import useTranslation from '../../hooks/useTranslation.js';
+import { styled } from '../../styled.js';
 
 interface Props extends ThemeProps{
   className?: string;

packages/extension-ui/src/Popup/Derive/Derive.spec.tsx

@@ -15,12 +15,12 @@ import { act } from 'react-dom/test-utils';
 import { MemoryRouter, Route } from 'react-router';
 import { ThemeProvider } from 'styled-components';
 
-import { AccountContext, ActionContext, themes } from '../../components';
-import * as messaging from '../../messaging';
-import { flushAllPromises } from '../../testHelpers';
-import { buildHierarchy } from '../../util/buildHierarchy';
-import AddressDropdown from './AddressDropdown';
-import Derive from '.';
+import { AccountContext, ActionContext, themes } from '../../components/index.js';
+import * as messaging from '../../messaging.js';
+import { flushAllPromises } from '../../testHelpers.js';
+import { buildHierarchy } from '../../util/buildHierarchy.js';
+import AddressDropdown from './AddressDropdown.js';
+import Derive from './index.js';
 
 const { configure, mount } = enzyme;
 

packages/extension-ui/src/Popup/Derive/SelectParent.tsx

@@ -5,12 +5,12 @@ import React, { useCallback, useContext, useEffect, useMemo, useRef, useState }
 
 import { canDerive } from '@polkadot/extension-base/utils';
 
-import { AccountContext, ActionContext, Address, ButtonArea, InputWithLabel, Label, NextStepButton, VerticalSpace, Warning } from '../../components';
-import useTranslation from '../../hooks/useTranslation';
-import { validateAccount, validateDerivationPath } from '../../messaging';
-import { nextDerivationPath } from '../../util/nextDerivationPath';
-import AddressDropdown from './AddressDropdown';
-import DerivationPath from './DerivationPath';
+import { AccountContext, ActionContext, Address, ButtonArea, InputWithLabel, Label, NextStepButton, VerticalSpace, Warning } from '../../components/index.js';
+import useTranslation from '../../hooks/useTranslation.js';
+import { validateAccount, validateDerivationPath } from '../../messaging.js';
+import { nextDerivationPath } from '../../util/nextDerivationPath.js';
+import AddressDropdown from './AddressDropdown.js';
+import DerivationPath from './DerivationPath.js';
 
 interface Props {
   className?: string;

packages/extension-ui/src/Popup/Derive/index.tsx

@@ -4,11 +4,11 @@
 import React, { useCallback, useContext, useMemo, useState } from 'react';
 import { useParams } from 'react-router';
 
-import { AccountContext, AccountNamePasswordCreation, ActionContext, Address } from '../../components';
-import useTranslation from '../../hooks/useTranslation';
-import { deriveAccount } from '../../messaging';
-import { HeaderWithSteps } from '../../partials';
-import SelectParent from './SelectParent';
+import { AccountContext, AccountNamePasswordCreation, ActionContext, Address } from '../../components/index.js';
+import useTranslation from '../../hooks/useTranslation.js';
+import { deriveAccount } from '../../messaging.js';
+import { HeaderWithSteps } from '../../partials/index.js';
+import SelectParent from './SelectParent.js';
 
 interface Props {
   isLocked?: boolean;

packages/extension-ui/src/Popup/Export.spec.tsx

@@ -15,10 +15,10 @@ import { act } from 'react-dom/test-utils';
 import { MemoryRouter, Route } from 'react-router';
 import { ThemeProvider } from 'styled-components';
 
-import { Button, themes } from '../components';
-import * as messaging from '../messaging';
-import { flushAllPromises } from '../testHelpers';
-import Export from './Export';
+import { Button, themes } from '../components/index.js';
+import * as messaging from '../messaging.js';
+import { flushAllPromises } from '../testHelpers.js';
+import Export from './Export.js';
 
 const { configure, mount } = enzyme;
 

packages/extension-ui/src/Popup/Export.tsx

@@ -1,17 +1,17 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types';
+import type { ThemeProps } from '../types.js';
 
 import fileSaver from 'file-saver';
 import React, { useCallback, useContext, useState } from 'react';
 import { RouteComponentProps, withRouter } from 'react-router';
 
-import { ActionBar, ActionContext, ActionText, Address, Button, InputWithLabel, Warning } from '../components';
-import useTranslation from '../hooks/useTranslation';
-import { exportAccount } from '../messaging';
-import { Header } from '../partials';
-import { styled } from '../styled';
+import { ActionBar, ActionContext, ActionText, Address, Button, InputWithLabel, Warning } from '../components/index.js';
+import useTranslation from '../hooks/useTranslation.js';
+import { exportAccount } from '../messaging.js';
+import { Header } from '../partials/index.js';
+import { styled } from '../styled.js';
 
 const MIN_LENGTH = 6;
 

packages/extension-ui/src/Popup/ExportAll.tsx

@@ -1,17 +1,17 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types';
+import type { ThemeProps } from '../types.js';
 
 import fileSaver from 'file-saver';
 import React, { useCallback, useContext, useState } from 'react';
 import { RouteComponentProps, withRouter } from 'react-router';
 
-import { AccountContext, ActionBar, ActionContext, ActionText, Button, InputWithLabel, Warning } from '../components';
-import useTranslation from '../hooks/useTranslation';
-import { exportAccounts } from '../messaging';
-import { Header } from '../partials';
-import { styled } from '../styled';
+import { AccountContext, ActionBar, ActionContext, ActionText, Button, InputWithLabel, Warning } from '../components/index.js';
+import useTranslation from '../hooks/useTranslation.js';
+import { exportAccounts } from '../messaging.js';
+import { Header } from '../partials/index.js';
+import { styled } from '../styled.js';
 
 const MIN_LENGTH = 6;
 

packages/extension-ui/src/Popup/Forget.tsx

@@ -1,16 +1,16 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types';
+import type { ThemeProps } from '../types.js';
 
 import React, { useCallback, useContext, useState } from 'react';
 import { RouteComponentProps, withRouter } from 'react-router';
 
-import { ActionBar, ActionContext, ActionText, Address, Button, Warning } from '../components';
-import useTranslation from '../hooks/useTranslation';
-import { forgetAccount } from '../messaging';
-import { Header } from '../partials';
-import { styled } from '../styled';
+import { ActionBar, ActionContext, ActionText, Address, Button, Warning } from '../components/index.js';
+import useTranslation from '../hooks/useTranslation.js';
+import { forgetAccount } from '../messaging.js';
+import { Header } from '../partials/index.js';
+import { styled } from '../styled.js';
 
 interface Props extends RouteComponentProps<{ address: string }>, ThemeProps {
   className?: string;

packages/extension-ui/src/Popup/ImportLedger.tsx

@@ -7,14 +7,14 @@ import React, { useCallback, useContext, useEffect, useRef, useState } from 'rea
 
 import settings from '@polkadot/ui-settings';
 
-import { ActionContext, Address, Button, ButtonArea, Dropdown, VerticalSpace, Warning } from '../components';
-import { useLedger } from '../hooks/useLedger';
-import useTranslation from '../hooks/useTranslation';
-import { createAccountHardware } from '../messaging';
-import { Header, Name } from '../partials';
-import { styled } from '../styled';
-import { ThemeProps } from '../types';
-import ledgerChains from '../util/legerChains';
+import { ActionContext, Address, Button, ButtonArea, Dropdown, VerticalSpace, Warning } from '../components/index.js';
+import { useLedger } from '../hooks/useLedger.js';
+import useTranslation from '../hooks/useTranslation.js';
+import { createAccountHardware } from '../messaging.js';
+import { Header, Name } from '../partials/index.js';
+import { styled } from '../styled.js';
+import { ThemeProps } from '../types.js';
+import ledgerChains from '../util/legerChains.js';
 
 interface AccOption {
   text: string;

packages/extension-ui/src/Popup/ImportQr.spec.tsx

@@ -13,10 +13,10 @@ import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { MemoryRouter } from 'react-router';
 
-import { Button } from '../components';
-import * as messaging from '../messaging';
-import { flushAllPromises } from '../testHelpers';
-import ImportQr from './ImportQr';
+import { Button } from '../components/index.js';
+import * as messaging from '../messaging.js';
+import { flushAllPromises } from '../testHelpers.js';
+import ImportQr from './ImportQr.js';
 
 const { configure, mount } = enzyme;
 

packages/extension-ui/src/Popup/ImportQr.tsx

@@ -5,11 +5,11 @@ import React, { useCallback, useContext, useState } from 'react';
 
 import { QrScanAddress } from '@polkadot/react-qr';
 
-import { ActionContext, Address, ButtonArea, NextStepButton, VerticalSpace } from '../components';
-import AccountNamePasswordCreation from '../components/AccountNamePasswordCreation';
-import useTranslation from '../hooks/useTranslation';
-import { createAccountExternal, createAccountSuri, createSeed } from '../messaging';
-import { Header, Name } from '../partials';
+import AccountNamePasswordCreation from '../components/AccountNamePasswordCreation.js';
+import { ActionContext, Address, ButtonArea, NextStepButton, VerticalSpace } from '../components/index.js';
+import useTranslation from '../hooks/useTranslation.js';
+import { createAccountExternal, createAccountSuri, createSeed } from '../messaging.js';
+import { Header, Name } from '../partials/index.js';
 
 interface QrAccount {
   content: string;

packages/extension-ui/src/Popup/ImportSeed/ImportSeed.spec.tsx

@@ -13,10 +13,10 @@ import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { MemoryRouter } from 'react-router';
 
-import { ActionContext, Button, Warning } from '../../components';
-import * as messaging from '../../messaging';
-import { flushAllPromises } from '../../testHelpers';
-import ImportSeed from './';
+import { ActionContext, Button, Warning } from '../../components/index.js';
+import * as messaging from '../../messaging.js';
+import { flushAllPromises } from '../../testHelpers.js';
+import ImportSeed from './index.js';
 
 const { configure, mount } = enzyme;
 

packages/extension-ui/src/Popup/ImportSeed/SeedAndPath.tsx

@@ -2,8 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { KeypairType } from '@polkadot/util-crypto/types';
-import type { ThemeProps } from '../../types';
-import type { AccountInfo } from '.';
+import type { ThemeProps } from '../../types.js';
+import type { AccountInfo } from './index.js';
 
 import { faCaretDown, faCaretRight } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -12,10 +12,10 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { validateSeed } from '@polkadot/extension-ui/messaging';
 import { objectSpread } from '@polkadot/util';
 
-import { ButtonArea, Dropdown, InputWithLabel, NextStepButton, TextAreaWithLabel, VerticalSpace, Warning } from '../../components';
-import useGenesisHashOptions from '../../hooks/useGenesisHashOptions';
-import useTranslation from '../../hooks/useTranslation';
-import { styled } from '../../styled';
+import { ButtonArea, Dropdown, InputWithLabel, NextStepButton, TextAreaWithLabel, VerticalSpace, Warning } from '../../components/index.js';
+import useGenesisHashOptions from '../../hooks/useGenesisHashOptions.js';
+import useTranslation from '../../hooks/useTranslation.js';
+import { styled } from '../../styled.js';
 
 interface Props {
   className?: string;

packages/extension-ui/src/Popup/ImportSeed/index.tsx

@@ -3,14 +3,14 @@
 
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 
-import { AccountContext, ActionContext, Address } from '../../components';
-import AccountNamePasswordCreation from '../../components/AccountNamePasswordCreation';
-import useMetadata from '../../hooks/useMetadata';
-import useTranslation from '../../hooks/useTranslation';
-import { createAccountSuri } from '../../messaging';
-import { HeaderWithSteps } from '../../partials';
-import { DEFAULT_TYPE } from '../../util/defaultType';
-import SeedAndPath from './SeedAndPath';
+import AccountNamePasswordCreation from '../../components/AccountNamePasswordCreation.js';
+import { AccountContext, ActionContext, Address } from '../../components/index.js';
+import useMetadata from '../../hooks/useMetadata.js';
+import useTranslation from '../../hooks/useTranslation.js';
+import { createAccountSuri } from '../../messaging.js';
+import { HeaderWithSteps } from '../../partials/index.js';
+import { DEFAULT_TYPE } from '../../util/defaultType.js';
+import SeedAndPath from './SeedAndPath.js';
 
 export interface AccountInfo {
   address: string;

packages/extension-ui/src/Popup/Metadata/Request.tsx

@@ -2,15 +2,15 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { MetadataDef } from '@polkadot/extension-inject/types';
-import type { ThemeProps } from '../../types';
+import type { ThemeProps } from '../../types.js';
 
 import React, { useCallback, useContext } from 'react';
 
-import { ActionBar, ActionContext, Button, Link, Table, Warning } from '../../components';
-import useMetadata from '../../hooks/useMetadata';
-import useTranslation from '../../hooks/useTranslation';
-import { approveMetaRequest, rejectMetaRequest } from '../../messaging';
-import { styled } from '../../styled';
+import { ActionBar, ActionContext, Button, Link, Table, Warning } from '../../components/index.js';
+import useMetadata from '../../hooks/useMetadata.js';
+import useTranslation from '../../hooks/useTranslation.js';
+import { approveMetaRequest, rejectMetaRequest } from '../../messaging.js';
+import { styled } from '../../styled.js';
 
 interface Props {
   className?: string;

packages/extension-ui/src/Popup/Metadata/index.tsx

@@ -3,10 +3,10 @@
 
 import React, { useContext } from 'react';
 
-import { Loading, MetadataReqContext } from '../../components';
-import useTranslation from '../../hooks/useTranslation';
-import { Header } from '../../partials';
-import Request from './Request';
+import { Loading, MetadataReqContext } from '../../components/index.js';
+import useTranslation from '../../hooks/useTranslation.js';
+import { Header } from '../../partials/index.js';
+import Request from './Request.js';
 
 export default function Metadata (): React.ReactElement {
   const { t } = useTranslation();

packages/extension-ui/src/Popup/PhishingDetected.tsx

@@ -1,15 +1,15 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types';
+import type { ThemeProps } from '../types.js';
 
 import React from 'react';
 import { Trans } from 'react-i18next';
 import { useParams } from 'react-router';
 
-import useTranslation from '../hooks/useTranslation';
-import { Header } from '../partials';
-import { styled } from '../styled';
+import useTranslation from '../hooks/useTranslation.js';
+import { Header } from '../partials/index.js';
+import { styled } from '../styled.js';
 
 interface Props extends ThemeProps {
   className?: string;

packages/extension-ui/src/Popup/RestoreJson.tsx

@@ -9,13 +9,13 @@ import React, { useCallback, useContext, useEffect, useState } from 'react';
 
 import { u8aToString } from '@polkadot/util';
 
-import { AccountContext, ActionContext, Address, Button, InputFileWithLabel, InputWithLabel, Warning } from '../components';
-import useTranslation from '../hooks/useTranslation';
-import { batchRestore, jsonGetAccountInfo, jsonRestore } from '../messaging';
-import { Header } from '../partials';
-import { styled } from '../styled';
-import { DEFAULT_TYPE } from '../util/defaultType';
-import { isKeyringPairs$Json } from '../util/typeGuards';
+import { AccountContext, ActionContext, Address, Button, InputFileWithLabel, InputWithLabel, Warning } from '../components/index.js';
+import useTranslation from '../hooks/useTranslation.js';
+import { batchRestore, jsonGetAccountInfo, jsonRestore } from '../messaging.js';
+import { Header } from '../partials/index.js';
+import { styled } from '../styled.js';
+import { DEFAULT_TYPE } from '../util/defaultType.js';
+import { isKeyringPairs$Json } from '../util/typeGuards.js';
 
 const acceptedFormats = ['application/json', 'text/plain'].join(', ');
 

packages/extension-ui/src/Popup/Signing/Bytes.tsx

@@ -1,14 +1,14 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../../types';
+import type { ThemeProps } from '../../types.js';
 
 import React, { useMemo } from 'react';
 
 import { isAscii, u8aToString, u8aUnwrapBytes } from '@polkadot/util';
 
-import useTranslation from '../../hooks/useTranslation';
-import { styled } from '../../styled';
+import useTranslation from '../../hooks/useTranslation.js';
+import { styled } from '../../styled.js';
 
 interface Props {
   className?: string;

packages/extension-ui/src/Popup/Signing/Extrinsic.tsx

@@ -10,9 +10,9 @@ import React, { useMemo, useRef } from 'react';
 
 import { BN, bnToBn, formatNumber } from '@polkadot/util';
 
-import { Table } from '../../components';
-import useMetadata from '../../hooks/useMetadata';
-import useTranslation from '../../hooks/useTranslation';
+import { Table } from '../../components/index.js';
+import useMetadata from '../../hooks/useMetadata.js';
+import useTranslation from '../../hooks/useTranslation.js';
 
 interface Decoded {
   args: AnyJson | null;

packages/extension-ui/src/Popup/Signing/LedgerSign.tsx

@@ -8,10 +8,10 @@ import { faSync } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useCallback, useEffect, useState } from 'react';
 
-import { Button, Warning } from '../../components';
-import { useLedger } from '../../hooks/useLedger';
-import useTranslation from '../../hooks/useTranslation';
-import { styled } from '../../styled';
+import { Button, Warning } from '../../components/index.js';
+import { useLedger } from '../../hooks/useLedger.js';
+import useTranslation from '../../hooks/useTranslation.js';
+import { styled } from '../../styled.js';
 
 interface Props {
   accountIndex?: number;

packages/extension-ui/src/Popup/Signing/Qr.tsx

@@ -9,10 +9,10 @@ import React, { useCallback, useMemo, useState } from 'react';
 import { wrapBytes } from '@polkadot/extension-dapp/wrapBytes';
 import { QrDisplayPayload, QrScanSignature } from '@polkadot/react-qr';
 
-import { Button } from '../../components';
-import useTranslation from '../../hooks/useTranslation';
-import { styled } from '../../styled';
-import { CMD_MORTAL, CMD_SIGN_MESSAGE } from './Request';
+import { Button } from '../../components/index.js';
+import useTranslation from '../../hooks/useTranslation.js';
+import { styled } from '../../styled.js';
+import { CMD_MORTAL, CMD_SIGN_MESSAGE } from './Request/index.js';
 
 interface Props {
   address: string;

packages/extension-ui/src/Popup/Signing/Request/SignArea.tsx

@@ -5,11 +5,11 @@ import React, { useCallback, useContext, useEffect, useState } from 'react';
 
 import { PASSWORD_EXPIRY_MIN } from '@polkadot/extension-base/defaults';
 
-import { ActionBar, ActionContext, Button, ButtonArea, Checkbox, Link } from '../../../components';
-import useTranslation from '../../../hooks/useTranslation';
-import { approveSignPassword, cancelSignRequest, isSignLocked } from '../../../messaging';
-import { styled } from '../../../styled';
-import Unlock from '../Unlock';
+import { ActionBar, ActionContext, Button, ButtonArea, Checkbox, Link } from '../../../components/index.js';
+import useTranslation from '../../../hooks/useTranslation.js';
+import { approveSignPassword, cancelSignRequest, isSignLocked } from '../../../messaging.js';
+import { styled } from '../../../styled.js';
+import Unlock from '../Unlock.js';
 
 interface Props {
   buttonText: string;

packages/extension-ui/src/Popup/Signing/Request/index.tsx

@@ -10,14 +10,14 @@ import React, { useCallback, useContext, useEffect, useState } from 'react';
 
 import { TypeRegistry } from '@polkadot/types';
 
-import { ActionContext, Address, VerticalSpace, Warning } from '../../../components';
-import { useTranslation } from '../../../components/translate';
-import { approveSignSignature } from '../../../messaging';
-import Bytes from '../Bytes';
-import Extrinsic from '../Extrinsic';
-import LedgerSign from '../LedgerSign';
-import Qr from '../Qr';
-import SignArea from './SignArea';
+import { ActionContext, Address, VerticalSpace, Warning } from '../../../components/index.js';
+import { useTranslation } from '../../../components/translate.js';
+import { approveSignSignature } from '../../../messaging.js';
+import Bytes from '../Bytes.js';
+import Extrinsic from '../Extrinsic.js';
+import LedgerSign from '../LedgerSign.js';
+import Qr from '../Qr.js';
+import SignArea from './SignArea.js';
 
 interface Props {
   account: AccountJson;

packages/extension-ui/src/Popup/Signing/Signing.spec.tsx

@@ -15,16 +15,16 @@ import React, { useState } from 'react';
 import { act } from 'react-dom/test-utils';
 import { ThemeProvider } from 'styled-components';
 
-import { ActionContext, Address, Button, Input, SigningReqContext, themes } from '../../components';
-import * as messaging from '../../messaging';
-import * as MetadataCache from '../../MetadataCache';
-import { flushAllPromises } from '../../testHelpers';
-import Extrinsic from './Extrinsic';
-import { westendMetadata } from './metadataMock';
-import Qr from './Qr';
-import Request from './Request';
-import TransactionIndex from './TransactionIndex';
-import Signing from '.';
+import { ActionContext, Address, Button, Input, SigningReqContext, themes } from '../../components/index.js';
+import * as messaging from '../../messaging.js';
+import * as MetadataCache from '../../MetadataCache.js';
+import { flushAllPromises } from '../../testHelpers.js';
+import Request from './Request/index.js';
+import Extrinsic from './Extrinsic.js';
+import Signing from './index.js';
+import { westendMetadata } from './metadataMock.js';
+import Qr from './Qr.js';
+import TransactionIndex from './TransactionIndex.js';
 
 const { configure, mount } = enzyme;
 

packages/extension-ui/src/Popup/Signing/TransactionIndex.tsx

@@ -1,13 +1,13 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../../types';
+import type { ThemeProps } from '../../types.js';
 
 import { faArrowLeft, faArrowRight } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { useCallback } from 'react';
 
-import { styled } from '../../styled';
+import { styled } from '../../styled.js';
 
 interface Props {
   className?: string;

packages/extension-ui/src/Popup/Signing/Unlock.tsx

@@ -3,8 +3,8 @@
 
 import React, { useCallback } from 'react';
 
-import { InputWithLabel, Warning } from '../../components';
-import useTranslation from '../../hooks/useTranslation';
+import { InputWithLabel, Warning } from '../../components/index.js';
+import useTranslation from '../../hooks/useTranslation.js';
 
 interface Props {
   className?: string;

packages/extension-ui/src/Popup/Signing/index.tsx

@@ -5,11 +5,11 @@ import type { SignerPayloadJSON } from '@polkadot/types/types';
 
 import React, { useCallback, useContext, useEffect, useState } from 'react';
 
-import { Loading, SigningReqContext } from '../../components';
-import useTranslation from '../../hooks/useTranslation';
-import { Header } from '../../partials';
-import Request from './Request';
-import TransactionIndex from './TransactionIndex';
+import { Loading, SigningReqContext } from '../../components/index.js';
+import useTranslation from '../../hooks/useTranslation.js';
+import { Header } from '../../partials/index.js';
+import Request from './Request/index.js';
+import TransactionIndex from './TransactionIndex.js';
 
 export default function Signing (): React.ReactElement {
   const { t } = useTranslation();

packages/extension-ui/src/Popup/Welcome.tsx

@@ -1,14 +1,14 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types';
+import type { ThemeProps } from '../types.js';
 
 import React, { useCallback, useContext } from 'react';
 
-import { ActionContext, Box, Button, ButtonArea, List, VerticalSpace } from '../components';
-import useTranslation from '../hooks/useTranslation';
-import { Header } from '../partials';
-import { styled } from '../styled';
+import { ActionContext, Box, Button, ButtonArea, List, VerticalSpace } from '../components/index.js';
+import useTranslation from '../hooks/useTranslation.js';
+import { Header } from '../partials/index.js';
+import { styled } from '../styled.js';
 
 interface Props extends ThemeProps {
   className?: string;

packages/extension-ui/src/Popup/index.tsx

@@ -11,28 +11,28 @@ import { PHISHING_PAGE_REDIRECT } from '@polkadot/extension-base/defaults';
 import { canDerive } from '@polkadot/extension-base/utils';
 import uiSettings from '@polkadot/ui-settings';
 
-import { ErrorBoundary, Loading } from '../components';
-import { AccountContext, ActionContext, AuthorizeReqContext, MediaContext, MetadataReqContext, SettingsContext, SigningReqContext } from '../components/contexts';
-import ToastProvider from '../components/Toast/ToastProvider';
-import { subscribeAccounts, subscribeAuthorizeRequests, subscribeMetadataRequests, subscribeSigningRequests } from '../messaging';
-import { buildHierarchy } from '../util/buildHierarchy';
-import AccountManagement from './AuthManagement/AccountManagement';
-import Accounts from './Accounts';
-import AuthList from './AuthManagement';
-import Authorize from './Authorize';
-import CreateAccount from './CreateAccount';
-import Derive from './Derive';
-import Export from './Export';
-import ExportAll from './ExportAll';
-import Forget from './Forget';
-import ImportLedger from './ImportLedger';
-import ImportQr from './ImportQr';
-import ImportSeed from './ImportSeed';
-import Metadata from './Metadata';
-import PhishingDetected from './PhishingDetected';
-import RestoreJson from './RestoreJson';
-import Signing from './Signing';
-import Welcome from './Welcome';
+import { AccountContext, ActionContext, AuthorizeReqContext, MediaContext, MetadataReqContext, SettingsContext, SigningReqContext } from '../components/contexts.js';
+import { ErrorBoundary, Loading } from '../components/index.js';
+import ToastProvider from '../components/Toast/ToastProvider.js';
+import { subscribeAccounts, subscribeAuthorizeRequests, subscribeMetadataRequests, subscribeSigningRequests } from '../messaging.js';
+import { buildHierarchy } from '../util/buildHierarchy.js';
+import Accounts from './Accounts/index.js';
+import AccountManagement from './AuthManagement/AccountManagement.js';
+import AuthList from './AuthManagement/index.js';
+import Authorize from './Authorize/index.js';
+import CreateAccount from './CreateAccount/index.js';
+import Derive from './Derive/index.js';
+import ImportSeed from './ImportSeed/index.js';
+import Metadata from './Metadata/index.js';
+import Signing from './Signing/index.js';
+import Export from './Export.js';
+import ExportAll from './ExportAll.js';
+import Forget from './Forget.js';
+import ImportLedger from './ImportLedger.js';
+import ImportQr from './ImportQr.js';
+import PhishingDetected from './PhishingDetected.js';
+import RestoreJson from './RestoreJson.js';
+import Welcome from './Welcome.js';
 
 const startSettings = uiSettings.get();
 
@@ -87,7 +87,7 @@ export default function Popup (): React.ReactElement {
         return;
       }
 
-      to === '..'
+      to === '../index.js'
         // if we can't go gack from there, go to the home
         ? history.length === 1
           ? history.push('/')

packages/extension-ui/src/components/AccountNamePasswordCreation.spec.tsx

@@ -12,9 +12,9 @@ import enzyme from 'enzyme';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 
-import { flushAllPromises } from '../testHelpers';
-import BackButton from './BackButton';
-import { AccountNamePasswordCreation, Input, InputWithLabel, NextStepButton } from '.';
+import { flushAllPromises } from '../testHelpers.js';
+import BackButton from './BackButton.js';
+import { AccountNamePasswordCreation, Input, InputWithLabel, NextStepButton } from './index.js';
 
 // For this file, there are a lot of them
 /* eslint-disable @typescript-eslint/no-unsafe-argument */

packages/extension-ui/src/components/AccountNamePasswordCreation.tsx

@@ -3,8 +3,8 @@
 
 import React, { useCallback, useState } from 'react';
 
-import { Name, Password } from '../partials';
-import { BackButton, ButtonArea, NextStepButton, VerticalSpace } from '.';
+import { Name, Password } from '../partials/index.js';
+import { BackButton, ButtonArea, NextStepButton, VerticalSpace } from './index.js';
 
 interface Props {
   buttonLabel?: string;

packages/extension-ui/src/components/ActionBar.tsx

@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { styled } from '../styled';
+import { styled } from '../styled.js';
 
 interface Props {
   children: React.ReactNode;

packages/extension-ui/src/components/ActionText.tsx

@@ -2,12 +2,12 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import type { ThemeProps } from '../types';
+import type { ThemeProps } from '../types.js';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React, { MouseEventHandler } from 'react';
 
-import { styled } from '../styled';
+import { styled } from '../styled.js';
 
 interface Props {
   className?: string;

packages/extension-ui/src/components/Address.spec.tsx

@@ -15,14 +15,14 @@ import enzyme from 'enzyme';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
 
-import * as messaging from '../messaging';
-import * as MetadataCache from '../MetadataCache';
-import { westendMetadata } from '../Popup/Signing/metadataMock';
-import { flushAllPromises } from '../testHelpers';
-import { buildHierarchy } from '../util/buildHierarchy';
-import { DEFAULT_TYPE } from '../util/defaultType';
-import getParentNameSuri from '../util/getParentNameSuri';
-import { AccountContext, Address } from '.';
+import * as messaging from '../messaging.js';
+import * as MetadataCache from '../MetadataCache.js';
+import { westendMetadata } from '../Popup/Signing/metadataMock.js';
+import { flushAllPromises } from '../testHelpers.js';
+import { buildHierarchy } from '../util/buildHierarchy.js';
+import { DEFAULT_TYPE } from '../util/defaultType.js';
+import getParentNameSuri from '../util/getParentNameSuri.js';
+import { AccountContext, Address } from './index.js';
 
 const { configure, mount } = enzyme;
 

packages/extension-ui/src/components/Address.tsx

@@ -6,7 +6,7 @@ import type { Chain } from '@polkadot/extension-chains/types';
 import type { IconTheme } from '@polkadot/react-identicon/types';
 import type { SettingsStruct } from '@polkadot/ui-settings/types';
 import type { KeypairType } from '@polkadot/util-crypto/types';
-import type { ThemeProps } from '../types';
+import type { ThemeProps } from '../types.js';
 
 import { faUsb } from '@fortawesome/free-brands-svg-icons';
 import { faCopy, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
@@ -18,18 +18,18 @@ import CopyToClipboard from 'react-copy-to-clipboard';
 import { decodeAddress, encodeAddress } from '@polkadot/util-crypto';
 
 import details from '../assets/details.svg';
-import useMetadata from '../hooks/useMetadata';
-import useOutsideClick from '../hooks/useOutsideClick';
-import useToast from '../hooks/useToast';
-import useTranslation from '../hooks/useTranslation';
-import { showAccount } from '../messaging';
-import { styled } from '../styled';
-import { DEFAULT_TYPE } from '../util/defaultType';
-import getParentNameSuri from '../util/getParentNameSuri';
-import { AccountContext, SettingsContext } from './contexts';
-import Identicon from './Identicon';
-import Menu from './Menu';
-import Svg from './Svg';
+import useMetadata from '../hooks/useMetadata.js';
+import useOutsideClick from '../hooks/useOutsideClick.js';
+import useToast from '../hooks/useToast.js';
+import useTranslation from '../hooks/useTranslation.js';
+import { showAccount } from '../messaging.js';
+import { styled } from '../styled.js';
+import { DEFAULT_TYPE } from '../util/defaultType.js';
+import getParentNameSuri from '../util/getParentNameSuri.js';
+import { AccountContext, SettingsContext } from './contexts.js';
+import Identicon from './Identicon.js';
+import Menu from './Menu.js';
+import Svg from './Svg.js';
 
 export interface Props {
   actions?: React.ReactNode;

packages/extension-ui/src/components/BackButton.tsx

@@ -1,14 +1,14 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types';
+import type { ThemeProps } from '../types.js';
 
 import { faArrowLeft } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
 
-import { styled } from '../styled';
-import Button from './Button';
+import { styled } from '../styled.js';
+import Button from './Button.js';
 
 interface Props {
   className?: string;

packages/extension-ui/src/components/Box.tsx

@@ -1,11 +1,11 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types';
+import type { ThemeProps } from '../types.js';
 
 import React from 'react';
 
-import { styled } from '../styled';
+import { styled } from '../styled.js';
 
 interface Props {
   banner?: React.ReactNode;

packages/extension-ui/src/components/Button.tsx

@@ -1,12 +1,12 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types';
+import type { ThemeProps } from '../types.js';
 
 import React, { useCallback } from 'react';
 
-import { styled } from '../styled';
-import Spinner from './Spinner';
+import { styled } from '../styled.js';
+import Spinner from './Spinner.js';
 
 interface Props extends ThemeProps {
   className?: string;

packages/extension-ui/src/components/ButtonArea.tsx

@@ -1,11 +1,11 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types';
+import type { ThemeProps } from '../types.js';
 
 import React from 'react';
 
-import { styled } from '../styled';
+import { styled } from '../styled.js';
 
 interface Props extends ThemeProps {
   className?: string;

packages/extension-ui/src/components/ButtonWithSubtitle.tsx

@@ -3,8 +3,8 @@
 
 import React from 'react';
 
-import { styled } from '../styled';
-import { Button } from '.';
+import { styled } from '../styled.js';
+import { Button } from './index.js';
 
 interface ButtonWithSubtitleProps {
   title: string;

packages/extension-ui/src/components/Checkbox.tsx

@@ -1,12 +1,12 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types';
+import type { ThemeProps } from '../types.js';
 
 import React, { useCallback, useEffect } from 'react';
 
 import Checkmark from '../assets/checkmark.svg';
-import { styled } from '../styled';
+import { styled } from '../styled.js';
 
 interface Props {
   checked: boolean;

packages/extension-ui/src/components/Dropdown.tsx

@@ -1,13 +1,13 @@
 // Copyright 2019-2023 @polkadot/extension-ui authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { ThemeProps } from '../types';
+import type { ThemeProps } from '../types.js';
 
 import React, { useCallback } from 'react';
 
 import arrow from '../assets/arrow-down.svg';
-import { styled } from '../styled';
-import Label from './Label';
+import { styled } from '../styled.js';
+import Label from './Label.js';
 
 interface DropdownOption {
   text: string;

packages/extension-ui/src/components/ErrorBoundary.tsx

@@ -4,11 +4,11 @@
 import React from 'react';
 import { WithTranslation } from 'react-i18next';
 
-import Header from '../partials/Header';
-import Button from './Button';
-import ButtonArea from './ButtonArea';
-import translate from './translate';
-import VerticalSpace from './VerticalSpace';
+import Header from '../partials/Header.js';
+import Button from './Button.js';
+import ButtonArea from './ButtonArea.js';
+import translate from './translate.js';
+import VerticalSpace from './VerticalSpace.js';
 
 interface Props extends WithTranslation {
   children: React.ReactNode;

packages/extension-ui/src/components/Icon.tsx

@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { styled } from '../styled';
+import { styled } from '../styled.js';
 
 interface Props {
   className?: string;

packages/extension-ui/src/components/Identicon.tsx

@@ -2,13 +2,13 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { IconTheme } from '@polkadot/react-identicon/types';
-import type { ThemeProps } from '../types';
+import type { ThemeProps } from '../types.js';
 
 import React from 'react';
 
 import Icon from '@polkadot/react-identicon';
 
-import { styled } from '../styled';
+import { styled } from '../styled.js';
 
 interface Props {
   className?: string;