add extension to every import

packages/taler-wallet-webextension/src/NavigationBar.tsx

@@ -25,13 +25,13 @@
  * Imports.
  */
 import { h, VNode } from "preact";
-import { JustInDevMode } from "./components/JustInDevMode";
+import { JustInDevMode } from "./components/JustInDevMode.js";
 import {
   NavigationHeader,
   NavigationHeaderHolder,
   SvgIcon,
-} from "./components/styled";
+} from "./components/styled/index.js";
-import { useTranslationContext } from "./context/translation";
+import { useTranslationContext } from "./context/translation.js";
 import settingsIcon from "./svg/settings_black_24dp.svg";
 
 /**

packages/taler-wallet-webextension/src/background.dev.ts

@@ -23,9 +23,9 @@
 /**
  * Imports.
  */
-import { platform, setupPlatform } from "./platform/api";
+import { platform, setupPlatform } from "./platform/api.js";
-import devAPI from "./platform/dev"
+import devAPI from "./platform/dev.js";
-import { wxMain } from "./wxBackend";
+import { wxMain } from "./wxBackend.js";
 
 console.log("Wallet setup for Dev API")
 setupPlatform(devAPI)

packages/taler-wallet-webextension/src/background.ts

@@ -23,10 +23,10 @@
 /**
  * Imports.
  */
-import { platform, setupPlatform } from "./platform/api";
+import { platform, setupPlatform } from "./platform/api.js";
-import firefoxAPI from "./platform/firefox"
+import firefoxAPI from "./platform/firefox.js";
-import chromeAPI from "./platform/chrome"
+import chromeAPI from "./platform/chrome.js";
-import { wxMain } from "./wxBackend";
+import { wxMain } from "./wxBackend.js";
 
 const isFirefox = typeof (window as any)['InstallTrigger'] !== 'undefined'
 

packages/taler-wallet-webextension/src/chromeBadge.ts

@@ -14,7 +14,7 @@
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { platform } from "./platform/api";
+import { platform } from "./platform/api.js";
 
 /**
  * Polyfill for requestAnimationFrame, which

packages/taler-wallet-webextension/src/components/BalanceTable.tsx

@@ -14,9 +14,9 @@
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { Amounts, amountToPretty, Balance } from "@gnu-taler/taler-util";
+import { Amounts, Balance } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
-import { TableWithRoundRows as TableWithRoundedRows } from "./styled";
+import { TableWithRoundRows as TableWithRoundedRows } from "./styled/index.js";
 
 export function BalanceTable({
   balances,

packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx

@@ -17,9 +17,9 @@
 import { PaytoUri } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
-import { useTranslationContext } from "../context/translation";
+import { useTranslationContext } from "../context/translation.js";
-import { CopiedIcon, CopyIcon } from "../svg";
+import { CopiedIcon, CopyIcon } from "../svg/index.js";
-import { ButtonBox, TooltipRight } from "./styled";
+import { ButtonBox, TooltipRight } from "./styled/index.js";
 
 export interface BankDetailsProps {
   payto: PaytoUri | undefined;

packages/taler-wallet-webextension/src/components/Banner.stories.tsx

@@ -19,11 +19,11 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { Banner } from "./Banner";
+import { Banner } from "./Banner.js";
 import { Fragment, h, VNode } from "preact";
-import { Avatar } from "../mui/Avatar";
+import { Avatar } from "../mui/Avatar.js";
-import { Icon, SvgIcon } from "./styled";
+import { Icon, SvgIcon } from "./styled/index.js";
-import { Typography } from "../mui/Typography";
+import { Typography } from "../mui/Typography.js";
 
 export default {
   title: "mui/banner",

packages/taler-wallet-webextension/src/components/Banner.tsx

@@ -1,10 +1,10 @@
 import { h, Fragment, VNode, JSX } from "preact";
-import { Divider } from "../mui/Divider";
+import { Divider } from "../mui/Divider.js";
-import { Button } from "../mui/Button";
+import { Button } from "../mui/Button.js";
-import { Typography } from "../mui/Typography";
+import { Typography } from "../mui/Typography.js";
-import { Avatar } from "../mui/Avatar";
+import { Avatar } from "../mui/Avatar.js";
-import { Grid } from "../mui/Grid";
+import { Grid } from "../mui/Grid.js";
-import { Paper } from "../mui/Paper";
+import { Paper } from "../mui/Paper.js";
 
 interface Props extends JSX.HTMLAttributes<HTMLDivElement> {
   title?: string;

packages/taler-wallet-webextension/src/components/CheckboxOutlined.tsx

@@ -14,7 +14,7 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { Outlined, StyledCheckboxLabel } from "./styled";
+import { Outlined, StyledCheckboxLabel } from "./styled/index.js";
 import { h, VNode } from "preact";
 
 interface Props {

packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx

@@ -15,7 +15,7 @@
  */
 
 import { h, VNode } from "preact";
-import { useTranslationContext } from "../context/translation";
+import { useTranslationContext } from "../context/translation.js";
 
 export function DebugCheckbox({
   enabled,

packages/taler-wallet-webextension/src/components/Diagnostics.tsx

@@ -16,7 +16,7 @@
 
 import { WalletDiagnostics } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
-import { useTranslationContext } from "../context/translation";
+import { useTranslationContext } from "../context/translation.js";
 
 interface Props {
   timedOut: boolean;

packages/taler-wallet-webextension/src/components/EditableText.tsx

@@ -16,7 +16,7 @@
 
 import { h, VNode } from "preact";
 import { useRef, useState } from "preact/hooks";
-import { useTranslationContext } from "../context/translation";
+import { useTranslationContext } from "../context/translation.js";
 
 interface Props {
   value: string;

packages/taler-wallet-webextension/src/components/ErrorMessage.tsx

@@ -16,7 +16,7 @@
 import { VNode, h, ComponentChildren } from "preact";
 import { useState } from "preact/hooks";
 import arrowDown from "../svg/chevron-down.svg";
-import { ErrorBox } from "./styled";
+import { ErrorBox } from "./styled/index.js";
 
 export function ErrorMessage({
   title,

packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx

@@ -17,8 +17,8 @@ import { TalerErrorDetail } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import arrowDown from "../svg/chevron-down.svg";
-import { useDevContext } from "../context/devContext";
+import { useDevContext } from "../context/devContext.js";
-import { ErrorBox } from "./styled";
+import { ErrorBox } from "./styled/index.js";
 
 export function ErrorTalerOperation({
   title,

packages/taler-wallet-webextension/src/components/JustInDevMode.tsx

@@ -1,5 +1,5 @@
 import { ComponentChildren, Fragment, h, VNode } from "preact";
-import { useDevContext } from "../context/devContext";
+import { useDevContext } from "../context/devContext.js";
 
 export function JustInDevMode({
   children,

packages/taler-wallet-webextension/src/components/Loading.tsx

@@ -15,8 +15,8 @@
  */
 import { Fragment, h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
-import { useTranslationContext } from "../context/translation";
+import { useTranslationContext } from "../context/translation.js";
-import { CenteredText } from "./styled";
+import { CenteredText } from "./styled/index.js";
 
 export function Loading(): VNode {
   const { i18n } = useTranslationContext();

packages/taler-wallet-webextension/src/components/LoadingError.tsx

@@ -14,9 +14,9 @@
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 import { h, VNode } from "preact";
-import { HookError } from "../hooks/useAsyncAsHook";
+import { HookError } from "../hooks/useAsyncAsHook.js";
-import { ErrorMessage } from "./ErrorMessage";
+import { ErrorMessage } from "./ErrorMessage.js";
-import { ErrorTalerOperation } from "./ErrorTalerOperation";
+import { ErrorTalerOperation } from "./ErrorTalerOperation.js";
 
 export interface Props {
   title: VNode;

packages/taler-wallet-webextension/src/components/MultiActionButton.tsx

@@ -1,6 +1,10 @@
 import { h, VNode } from "preact";
 import arrowDown from "../svg/chevron-down.svg";
-import { ButtonBoxPrimary, ButtonPrimary, ParagraphClickable } from "./styled";
+import {
+  ButtonBoxPrimary,
+  ButtonPrimary,
+  ParagraphClickable,
+} from "./styled/index.js";
 import { useState } from "preact/hooks";
 
 export interface Props {

packages/taler-wallet-webextension/src/components/Part.tsx

@@ -14,7 +14,7 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 import { AmountLike } from "@gnu-taler/taler-util";
-import { ExtraLargeText, LargeText, SmallLightText } from "./styled";
+import { ExtraLargeText, LargeText, SmallLightText } from "./styled/index.js";
 import { h, VNode } from "preact";
 
 export type Kind = "positive" | "negative" | "neutral";

packages/taler-wallet-webextension/src/components/PendingTransactions.stories.tsx

@@ -19,9 +19,9 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { PendingTransactionsView as TestedComponent } from "./PendingTransactions";
+import { PendingTransactionsView as TestedComponent } from "./PendingTransactions.js";
 import { Fragment, h, VNode } from "preact";
-import { createExample } from "../test-utils";
+import { createExample } from "../test-utils.js";
 import {
   TalerProtocolTimestamp,
   Transaction,
@@ -73,7 +73,7 @@ export const TenPendingTransactions = createExample(TestedComponent, {
     {
       amountEffective: "USD:10",
       type: TransactionType.Withdrawal,
-      timestamp: TalerProtocolTimestamp.fromSeconds(1)
+      timestamp: TalerProtocolTimestamp.fromSeconds(1),
     } as Transaction,
     {
       amountEffective: "USD:10",

packages/taler-wallet-webextension/src/components/PendingTransactions.tsx

@@ -6,12 +6,12 @@ import {
 } from "@gnu-taler/taler-util";
 import { PendingTaskInfo } from "@gnu-taler/taler-wallet-core";
 import { Fragment, h, JSX } from "preact";
-import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
+import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
-import { Avatar } from "../mui/Avatar";
+import { Avatar } from "../mui/Avatar.js";
-import { Typography } from "../mui/Typography";
+import { Typography } from "../mui/Typography.js";
-import Banner from "./Banner";
+import Banner from "./Banner.js";
-import { Time } from "./Time";
+import { Time } from "./Time.js";
-import * as wxApi from "../wxApi";
+import * as wxApi from "../wxApi.js";
 
 interface Props extends JSX.HTMLAttributes {
   goToTransaction: (id: string) => void;

packages/taler-wallet-webextension/src/components/SelectList.tsx

@@ -15,8 +15,8 @@
  */
 
 import { Fragment, h, VNode } from "preact";
-import { useTranslationContext } from "../context/translation";
+import { useTranslationContext } from "../context/translation.js";
-import { NiceSelect } from "./styled";
+import { NiceSelect } from "./styled/index.js";
 
 interface Props {
   value?: string;

packages/taler-wallet-webextension/src/components/TransactionItem.tsx

@@ -23,9 +23,9 @@ import {
   TransactionType,
 } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
-import { useTranslationContext } from "../context/translation";
+import { useTranslationContext } from "../context/translation.js";
-import { Avatar } from "../mui/Avatar";
+import { Avatar } from "../mui/Avatar.js";
-import { Pages } from "../NavigationBar";
+import { Pages } from "../NavigationBar.js";
 import {
   Column,
   ExtraLargeText,
@@ -33,8 +33,8 @@ import {
   LargeText,
   LightText,
   SmallLightText,
-} from "./styled";
+} from "./styled/index.js";
-import { Time } from "./Time";
+import { Time } from "./Time.js";
 
 export function TransactionItem(props: { tx: Transaction }): VNode {
   const tx = props.tx;

packages/taler-wallet-webextension/src/context/devContext.ts

@@ -21,7 +21,7 @@
 
 import { createContext, h, VNode } from "preact";
 import { useContext } from "preact/hooks";
-import { useLocalStorage } from "../hooks/useLocalStorage";
+import { useLocalStorage } from "../hooks/useLocalStorage.js";
 
 interface Type {
   devMode: boolean;

packages/taler-wallet-webextension/src/context/iocContext.ts

@@ -21,7 +21,7 @@
 
 import { createContext, h, VNode } from "preact";
 import { useContext } from "preact/hooks";
-import { platform } from "../platform/api";
+import { platform } from "../platform/api.js";
 
 interface Type {
   findTalerUriInActiveTab: () => Promise<string | undefined>;

packages/taler-wallet-webextension/src/context/translation.ts

@@ -21,10 +21,10 @@
 
 import { createContext, h, VNode } from "preact";
 import { useContext, useEffect } from "preact/hooks";
-import { useLang } from "../hooks/useLang";
+import { useLang } from "../hooks/useLang.js";
 //@ts-ignore: type declaration
 import * as jedLib from "jed";
-import { strings } from "../i18n/strings";
+import { strings } from "../i18n/strings.js";
 import { setupI18n, i18n } from "@gnu-taler/taler-util";
 
 interface Type {

packages/taler-wallet-webextension/src/cta/Deposit.stories.tsx

@@ -20,8 +20,8 @@
  */
 
 import { ContractTerms, PreparePayResultType } from "@gnu-taler/taler-util";
-import { createExample } from "../test-utils";
+import { createExample } from "../test-utils.js";
-import { PaymentRequestView as TestedComponent } from "./Deposit";
+import { PaymentRequestView as TestedComponent } from "./Deposit.js";
 
 export default {
   title: "cta/deposit",

packages/taler-wallet-webextension/src/cta/Deposit.tsx

@@ -38,19 +38,19 @@ import {
 import { TalerError } from "@gnu-taler/taler-wallet-core";
 import { Fragment, h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
-import { ErrorTalerOperation } from "../components/ErrorTalerOperation";
+import { ErrorTalerOperation } from "../components/ErrorTalerOperation.js";
-import { LogoHeader } from "../components/LogoHeader";
+import { LogoHeader } from "../components/LogoHeader.js";
-import { Part } from "../components/Part";
+import { Part } from "../components/Part.js";
 import {
   ErrorBox,
   SubTitle,
   SuccessBox,
   WalletAction,
   WarningBox,
-} from "../components/styled";
+} from "../components/styled/index.js";
-import { useTranslationContext } from "../context/translation";
+import { useTranslationContext } from "../context/translation.js";
-import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
+import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
-import * as wxApi from "../wxApi";
+import * as wxApi from "../wxApi.js";
 
 interface Props {
   talerPayUri?: string;

packages/taler-wallet-webextension/src/cta/Pay.stories.tsx

@@ -20,8 +20,8 @@
  */
 
 import { ContractTerms, PreparePayResultType } from "@gnu-taler/taler-util";
-import { createExample } from "../test-utils";
+import { createExample } from "../test-utils.js";
-import { PaymentRequestView as TestedComponent } from "./Pay";
+import { PaymentRequestView as TestedComponent } from "./Pay.js";
 
 export default {
   title: "cta/pay",

packages/taler-wallet-webextension/src/cta/Pay.tsx

@@ -39,12 +39,12 @@ import {
 import { TalerError } from "@gnu-taler/taler-wallet-core";
 import { Fragment, h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
-import { ErrorMessage } from "../components/ErrorMessage";
+import { ErrorMessage } from "../components/ErrorMessage.js";
-import { Loading } from "../components/Loading";
+import { Loading } from "../components/Loading.js";
-import { LoadingError } from "../components/LoadingError";
+import { LoadingError } from "../components/LoadingError.js";
-import { LogoHeader } from "../components/LogoHeader";
+import { LogoHeader } from "../components/LogoHeader.js";
-import { Part } from "../components/Part";
+import { Part } from "../components/Part.js";
-import { QR } from "../components/QR";
+import { QR } from "../components/QR.js";
 import {
   ButtonSuccess,
   Link,
@@ -55,10 +55,10 @@ import {
   SuccessBox,
   WalletAction,
   WarningBox,
-} from "../components/styled";
+} from "../components/styled/index.js";
-import { useTranslationContext } from "../context/translation";
+import { useTranslationContext } from "../context/translation.js";
-import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
+import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
-import * as wxApi from "../wxApi";
+import * as wxApi from "../wxApi.js";
 
 interface Props {
   talerPayUri?: string;

packages/taler-wallet-webextension/src/cta/Refund.stories.tsx

@@ -20,8 +20,8 @@
  */
 
 import { OrderShortInfo } from "@gnu-taler/taler-util";
-import { createExample } from "../test-utils";
+import { createExample } from "../test-utils.js";
-import { View as TestedComponent } from "./Refund";
+import { View as TestedComponent } from "./Refund.js";
 
 export default {
   title: "cta/refund",

packages/taler-wallet-webextension/src/cta/Refund.tsx

@@ -28,9 +28,9 @@ import {
 } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
-import { SubTitle, Title } from "../components/styled";
+import { SubTitle, Title } from "../components/styled/index.js";
-import { useTranslationContext } from "../context/translation";
+import { useTranslationContext } from "../context/translation.js";
-import * as wxApi from "../wxApi";
+import * as wxApi from "../wxApi.js";
 
 interface Props {
   talerRefundUri?: string;
@@ -144,8 +144,6 @@ export function renderAmount(amount: AmountJson | string): VNode {
   );
 }
 
-export const AmountView = ({
+function AmountView({ amount }: { amount: AmountJson | string }): VNode {
-  amount,
+  return renderAmount(amount);
-}: {
+}
-  amount: AmountJson | string;
-}): VNode => renderAmount(amount);

packages/taler-wallet-webextension/src/cta/TermsOfServiceSection.tsx

@@ -1,6 +1,6 @@
 import { Fragment, h, VNode } from "preact";
-import { CheckboxOutlined } from "../components/CheckboxOutlined";
+import { CheckboxOutlined } from "../components/CheckboxOutlined.js";
-import { ExchangeXmlTos } from "../components/ExchangeToS";
+import { ExchangeXmlTos } from "../components/ExchangeToS.js";
 import {
   ButtonSuccess,
   ButtonWarning,
@@ -8,9 +8,9 @@ import {
   TermsOfService,
   WarningBox,
   WarningText,
-} from "../components/styled";
+} from "../components/styled/index.js";
-import { useTranslationContext } from "../context/translation";
+import { useTranslationContext } from "../context/translation.js";
-import { TermsState } from "../utils/index";
+import { TermsState } from "../utils/index.js";
 
 interface Props {
   reviewing: boolean;

packages/taler-wallet-webextension/src/cta/Tip.stories.tsx

@@ -20,8 +20,8 @@
  */
 
 import { AbsoluteTime, TalerProtocolTimestamp } from "@gnu-taler/taler-util";
-import { createExample } from "../test-utils";
+import { createExample } from "../test-utils.js";
-import { View as TestedComponent } from "./Tip";
+import { View as TestedComponent } from "./Tip.js";
 
 export default {
   title: "cta/tip",

packages/taler-wallet-webextension/src/cta/Tip.tsx

@@ -28,10 +28,10 @@ import {
 } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
-import { Loading } from "../components/Loading";
+import { Loading } from "../components/Loading.js";
-import { Title } from "../components/styled";
+import { Title } from "../components/styled/index.js";
-import { useTranslationContext } from "../context/translation";
+import { useTranslationContext } from "../context/translation.js";
-import * as wxApi from "../wxApi";
+import * as wxApi from "../wxApi.js";
 
 interface Props {
   talerTipUri?: string;
@@ -160,5 +160,6 @@ function renderAmount(amount: AmountJson | string): VNode {
   );
 }
 
-const AmountView = ({ amount }: { amount: AmountJson | string }): VNode =>
+function AmountView({ amount }: { amount: AmountJson | string }): VNode {
-  renderAmount(amount);
+  return renderAmount(amount);
+}

packages/taler-wallet-webextension/src/cta/Withdraw.stories.tsx

@@ -20,9 +20,9 @@
  */
 
 import { amountFractionalBase, ExchangeListItem } from "@gnu-taler/taler-util";
-import { createExample } from "../test-utils";
+import { createExample } from "../test-utils.js";
-import { termsHtml, termsPdf, termsPlain, termsXml } from "./termsExample";
+import { termsHtml, termsPdf, termsPlain, termsXml } from "./termsExample.js";
-import { View as TestedComponent } from "./Withdraw";
+import { View as TestedComponent } from "./Withdraw.js";
 
 function parseFromString(s: string): Document {
   if (typeof window === "undefined") {

packages/taler-wallet-webextension/src/cta/Withdraw.tsx

@@ -29,28 +29,28 @@ import {
 } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
-import { Loading } from "../components/Loading";
+import { Loading } from "../components/Loading.js";
-import { LoadingError } from "../components/LoadingError";
+import { LoadingError } from "../components/LoadingError.js";
-import { ErrorTalerOperation } from "../components/ErrorTalerOperation";
+import { ErrorTalerOperation } from "../components/ErrorTalerOperation.js";
-import { LogoHeader } from "../components/LogoHeader";
+import { LogoHeader } from "../components/LogoHeader.js";
-import { Part } from "../components/Part";
+import { Part } from "../components/Part.js";
-import { SelectList } from "../components/SelectList";
+import { SelectList } from "../components/SelectList.js";
 import {
   ButtonSuccess,
   ButtonWarning,
   LinkSuccess,
   SubTitle,
   WalletAction,
-} from "../components/styled";
+} from "../components/styled/index.js";
-import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
+import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
 import {
   amountToString,
   buildTermsOfServiceState,
   TermsState,
-} from "../utils/index";
+} from "../utils/index.js";
-import * as wxApi from "../wxApi";
+import * as wxApi from "../wxApi.js";
-import { TermsOfServiceSection } from "./TermsOfServiceSection";
+import { TermsOfServiceSection } from "./TermsOfServiceSection.js";
-import { useTranslationContext } from "../context/translation";
+import { useTranslationContext } from "../context/translation.js";
 import { TalerError } from "@gnu-taler/taler-wallet-core";
 
 interface Props {

packages/taler-wallet-webextension/src/cta/return-coins.tsx

@@ -15,7 +15,7 @@
  */
 
 import { h, VNode } from "preact";
-import { useTranslationContext } from "../context/translation";
+import { useTranslationContext } from "../context/translation.js";
 /**
  * Return coins to own bank account.
  *

packages/taler-wallet-webextension/src/cta/termsExample.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-useless-escape */
 /*
  This file is part of GNU Taler
  (C) 2021 Taler Systems S.A.

packages/taler-wallet-webextension/src/hooks/useAsyncAsHook.ts

@@ -20,7 +20,7 @@ import {
 } from "@gnu-taler/taler-util";
 import { TalerError } from "@gnu-taler/taler-wallet-core";
 import { useEffect, useState } from "preact/hooks";
-import * as wxApi from "../wxApi";
+import * as wxApi from "../wxApi.js";
 
 interface HookOk<T> {
   hasError: false;

packages/taler-wallet-webextension/src/hooks/useBackupDeviceName.ts

@@ -15,7 +15,7 @@
  */
 
 import { useEffect, useState } from "preact/hooks";
-import * as wxApi from "../wxApi";
+import * as wxApi from "../wxApi.js";
 
 export interface BackupDeviceName {
   name: string;

packages/taler-wallet-webextension/src/hooks/useDiagnostics.ts

@@ -16,7 +16,7 @@
 
 import { WalletDiagnostics } from "@gnu-taler/taler-util";
 import { useEffect, useState } from "preact/hooks";
-import * as wxApi from "../wxApi";
+import * as wxApi from "../wxApi.js";
 
 export function useDiagnostics(): [WalletDiagnostics | undefined, boolean] {
   const [timedOut, setTimedOut] = useState(false);

packages/taler-wallet-webextension/src/hooks/useExtendedPermissions.ts

@@ -15,9 +15,9 @@
  */
 
 import { useState, useEffect } from "preact/hooks";
-import * as wxApi from "../wxApi";
+import * as wxApi from "../wxApi.js";
-import { platform } from "../platform/api";
+import { platform } from "../platform/api.js";
-import { getReadRequestPermissions } from "../permissions";
+import { getReadRequestPermissions } from "../permissions.js";
 
 export function useExtendedPermissions(): [boolean, () => Promise<void>] {
   const [enabled, setEnabled] = useState(false);

packages/taler-wallet-webextension/src/hooks/useLang.ts

@@ -14,7 +14,7 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { useNotNullLocalStorage } from "./useLocalStorage";
+import { useNotNullLocalStorage } from "./useLocalStorage.js";
 
 function getBrowserLang(): string | undefined {
   if (window.navigator.languages) return window.navigator.languages[0]

packages/taler-wallet-webextension/src/hooks/useProviderStatus.ts

@@ -16,7 +16,7 @@
 
 import { ProviderInfo } from "@gnu-taler/taler-wallet-core";
 import { useEffect, useState } from "preact/hooks";
-import * as wxApi from "../wxApi";
+import * as wxApi from "../wxApi.js";
 
 export interface ProviderStatus {
   info?: ProviderInfo;

packages/taler-wallet-webextension/src/hooks/useTalerActionURL.test.ts

@@ -13,9 +13,9 @@
  You should have received a copy of the GNU General Public License along with
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
-import { useTalerActionURL } from "./useTalerActionURL"
+import { useTalerActionURL } from "./useTalerActionURL.js"
-import { mountHook } from "../test-utils";
+import { mountHook } from "../test-utils.js";
-import { IoCProviderForTesting } from "../context/iocContext";
+import { IoCProviderForTesting } from "../context/iocContext.js";
 import { h, VNode } from "preact";
 import { expect } from "chai";
 

packages/taler-wallet-webextension/src/hooks/useTalerActionURL.ts

@@ -15,7 +15,7 @@
  */
 
 import { useEffect, useState } from "preact/hooks";
-import { useIocContext } from "../context/iocContext";
+import { useIocContext } from "../context/iocContext.js";
 
 export function useTalerActionURL(): [
   string | undefined,

packages/taler-wallet-webextension/src/mui/Avatar.tsx

@@ -1,5 +1,6 @@
 import { css } from "@linaria/core";
 import { h, JSX, VNode, ComponentChildren } from "preact";
+// eslint-disable-next-line import/extensions
 import { theme } from "./style";
 
 const root = css`

packages/taler-wallet-webextension/src/mui/Button.stories.tsx

@@ -19,7 +19,7 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { Button } from "./Button";
+import { Button } from "./Button.js";
 import { Fragment, h } from "preact";
 import DeleteIcon from "../svg/delete_24px.svg";
 import SendIcon from "../svg/send_24px.svg";

packages/taler-wallet-webextension/src/mui/Button.tsx

@@ -1,6 +1,8 @@
 import { ComponentChildren, h, VNode } from "preact";
 import { css } from "@linaria/core";
+// eslint-disable-next-line import/extensions
 import { theme, ripple, Colors } from "./style";
+// eslint-disable-next-line import/extensions
 import { alpha } from "./colors/manipulation";
 
 interface Props {

packages/taler-wallet-webextension/src/mui/Grid.stories.tsx

@@ -19,7 +19,7 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { Grid } from "./Grid";
+import { Grid } from "./Grid.js";
 import { Fragment, h } from "preact";
 
 export default {

packages/taler-wallet-webextension/src/mui/Grid.tsx

@@ -1,6 +1,7 @@
 import { css } from "@linaria/core";
 import { h, JSX, VNode, ComponentChildren, createContext } from "preact";
 import { useContext } from "preact/hooks";
+// eslint-disable-next-line import/extensions
 import { theme } from "./style";
 
 type ResponsiveKeys = "xs" | "sm" | "md" | "lg" | "xl";

packages/taler-wallet-webextension/src/mui/Paper.stories.tsx

@@ -19,8 +19,8 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { Paper } from "./Paper";
+import { Paper } from "./Paper.js";
-import { createExample } from "../test-utils";
+import { createExample } from "../test-utils.js";
 import { h } from "preact";
 
 export default {

packages/taler-wallet-webextension/src/mui/Paper.tsx

@@ -1,6 +1,8 @@
 import { css } from "@linaria/core";
 import { h, JSX, VNode, ComponentChildren } from "preact";
+// eslint-disable-next-line import/extensions
 import { alpha } from "./colors/manipulation";
+// eslint-disable-next-line import/extensions
 import { theme } from "./style";
 
 const borderVariant = {
@@ -56,7 +58,7 @@ export function Paper({
 }
 
 // Inspired by https://github.com/material-components/material-components-ios/blob/bca36107405594d5b7b16265a5b0ed698f85a5ee/components/Elevation/src/UIColor%2BMaterialElevation.m#L61
-const getOverlayAlpha = (elevation: number): number => {
+function getOverlayAlpha(elevation: number): number {
   let alphaValue;
   if (elevation < 1) {
     alphaValue = 5.11916 * elevation ** 2;
@@ -64,4 +66,4 @@ const getOverlayAlpha = (elevation: number): number => {
     alphaValue = 4.5 * Math.log(elevation + 1) + 2;
   }
   return Number((alphaValue / 100).toFixed(2));
-};
+}

packages/taler-wallet-webextension/src/mui/TextField.stories.tsx

@@ -22,7 +22,7 @@
 import { styled } from "@linaria/react";
 import { Fragment, h } from "preact";
 import { useState } from "preact/hooks";
-import { TextField, Props } from "./TextField";
+import { TextField, Props } from "./TextField.js";
 
 export default {
   title: "mui/TextField",

packages/taler-wallet-webextension/src/mui/TextField.tsx

@@ -1,13 +1,14 @@
 import { ComponentChildren, h, VNode } from "preact";
-import { FormControl } from "./input/FormControl";
+import { FormControl } from "./input/FormControl.js";
-import { FormHelperText } from "./input/FormHelperText";
+import { FormHelperText } from "./input/FormHelperText.js";
-import { InputFilled } from "./input/InputFilled";
+import { InputFilled } from "./input/InputFilled.js";
-import { InputLabel } from "./input/InputLabel";
+import { InputLabel } from "./input/InputLabel.js";
-import { InputOutlined } from "./input/InputOutlined";
+import { InputOutlined } from "./input/InputOutlined.js";
-import { InputStandard } from "./input/InputStandard";
+import { InputStandard } from "./input/InputStandard.js";
-import { SelectFilled } from "./input/SelectFilled";
+import { SelectFilled } from "./input/SelectFilled.js";
-import { SelectOutlined } from "./input/SelectOutlined";
+import { SelectOutlined } from "./input/SelectOutlined.js";
-import { SelectStandard } from "./input/SelectStandard";
+import { SelectStandard } from "./input/SelectStandard.js";
+// eslint-disable-next-line import/extensions
 import { Colors } from "./style";
 
 export interface Props {
@@ -36,6 +37,18 @@ export interface Props {
   children?: ComponentChildren;
 }
 
+const inputVariant = {
+  standard: InputStandard,
+  filled: InputFilled,
+  outlined: InputOutlined,
+};
+
+const selectVariant = {
+  standard: SelectStandard,
+  filled: SelectFilled,
+  outlined: SelectOutlined,
+};
+
 export function TextField({
   label,
   select,
@@ -55,15 +68,3 @@ export function TextField({
     </FormControl>
   );
 }
-
-const inputVariant = {
-  standard: InputStandard,
-  filled: InputFilled,
-  outlined: InputOutlined,
-};
-
-const selectVariant = {
-  standard: SelectStandard,
-  filled: SelectFilled,
-  outlined: SelectOutlined,
-};

packages/taler-wallet-webextension/src/mui/Typography.tsx

@@ -1,5 +1,6 @@
 import { css } from "@linaria/core";
-import { h, Fragment, VNode, ComponentChildren } from "preact";
+import { ComponentChildren, h, VNode } from "preact";
+// eslint-disable-next-line import/extensions
 import { theme } from "./style";
 
 type VariantEnum =

packages/taler-wallet-webextension/src/mui/colors/manipulation.test.ts

@@ -11,7 +11,7 @@ import {
   getContrastRatio,
   getLuminance,
   lighten,
-} from './manipulation';
+} from './manipulation.js';
 
 describe('utils/colorManipulator', () => {
   describe('recomposeColor', () => {

packages/taler-wallet-webextension/src/mui/colors/manipulation.ts

@@ -22,7 +22,7 @@ export interface ColorObjectWithoutAlpha {
  * @param {number} max The upper boundary of the output range
  * @returns {number} A number in the range [min, max]
  */
-function clamp(value: number, min: number = 0, max: number = 1): number {
+function clamp(value: number, min = 0, max = 1): number {
   // if (process.env.NODE_ENV !== 'production') {
   //   if (value < min || value > max) {
   //     console.error(`MUI: The value provided ${value} is out of range [${min}, ${max}].`);
@@ -76,8 +76,8 @@ export function decomposeColor(color: string): ColorObject {
 
   const marker = color.indexOf('(');
   const type = color.substring(0, marker);
-  if (type != 'rgba' && type != 'hsla' && type != 'rgb' && type != 'hsl') {
+  // if (type != 'rgba' && type != 'hsla' && type != 'rgb' && type != 'hsl') {
-  }
+  // }
 
   const values = color.substring(marker + 1, color.length - 1).split(',')
   if (type == 'rgb' || type == 'hsl') {
@@ -268,6 +268,6 @@ export function lighten(color: string, coefficient: number): string {
  * @param {number} coefficient=0.15 - multiplier in the range 0 - 1
  * @returns {string} A CSS color string. Hex input values are returned as rgb
  */
-export function emphasize(color: string, coefficient: number = 0.15): string {
+export function emphasize(color: string, coefficient = 0.15): string {
   return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient);
 }

packages/taler-wallet-webextension/src/mui/index.stories.tsx

@@ -19,9 +19,9 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import * as a1 from "./Button.stories";
+import * as a1 from "./Button.stories.js";
-import * as a3 from "./Grid.stories";
+import * as a3 from "./Grid.stories.js";
-import * as a4 from "./Paper.stories";
+import * as a4 from "./Paper.stories.js";
-import * as a5 from "./TextField.stories";
+import * as a5 from "./TextField.stories.js";
 
 export default [a1, a3, a4, a5];

packages/taler-wallet-webextension/src/mui/input/FormControl.tsx

@@ -1,6 +1,7 @@
 import { css } from "@linaria/core";
 import { ComponentChildren, createContext, h } from "preact";
 import { useContext, useState } from "preact/hooks";
+// eslint-disable-next-line import/extensions
 import { Colors } from "../style";
 
 export interface Props {
@@ -43,6 +44,8 @@ const fullWidthStyle = css`
   width: 100%;
 `;
 
+export const FormControlContext = createContext<FCCProps | null>(null);
+
 export function FormControl({
   color = "primary",
   disabled = false,
@@ -121,8 +124,6 @@ export interface FCCProps {
   variant: "filled" | "outlined" | "standard";
 }
 
-export const FormControlContext = createContext<FCCProps | null>(null);
-
 const defaultContextValue: FCCProps = {
   color: "primary",
   disabled: false,
@@ -132,10 +133,10 @@ const defaultContextValue: FCCProps = {
   fullWidth: false,
   hiddenLabel: false,
   size: "medium",
-  onBlur: () => {},
+  onBlur: () => null,
-  onEmpty: () => {},
+  onEmpty: () => null,
-  onFilled: () => {},
+  onFilled: () => null,
-  onFocus: () => {},
+  onFocus: () => null,
   required: false,
   variant: "outlined",
 };

packages/taler-wallet-webextension/src/mui/input/FormHelperText.tsx

@@ -1,7 +1,8 @@
 import { css } from "@linaria/core";
 import { ComponentChildren, h } from "preact";
+// eslint-disable-next-line import/extensions
 import { theme } from "../style";
-import { useFormControl } from "./FormControl";
+import { useFormControl } from "./FormControl.js";
 
 const root = css`
   color: ${theme.palette.text.secondary};

packages/taler-wallet-webextension/src/mui/input/FormLabel.tsx

@@ -1,7 +1,8 @@
 import { css } from "@linaria/core";
 import { ComponentChildren, h } from "preact";
+// eslint-disable-next-line import/extensions
 import { Colors, theme } from "../style";
-import { useFormControl } from "./FormControl";
+import { useFormControl } from "./FormControl.js";
 
 export interface Props {
   class?: string;

packages/taler-wallet-webextension/src/mui/input/InputBase.tsx

@@ -1,8 +1,9 @@
 import { css } from "@linaria/core";
 import { h, JSX } from "preact";
-import { useEffect, useLayoutEffect, useState } from "preact/hooks";
+import { useLayoutEffect } from "preact/hooks";
+// eslint-disable-next-line import/extensions
 import { theme } from "../style";
-import { FormControlContext, useFormControl } from "./FormControl";
+import { FormControlContext, useFormControl } from "./FormControl.js";
 
 const rootStyle = css`
   color: ${theme.palette.text.primary};

packages/taler-wallet-webextension/src/mui/input/InputLabel.tsx

@@ -1,8 +1,9 @@
 import { css } from "@linaria/core";
 import { ComponentChildren, h } from "preact";
+// eslint-disable-next-line import/extensions
 import { Colors, theme } from "../style";
-import { useFormControl } from "./FormControl";
+import { useFormControl } from "./FormControl.js";
-import { FormLabel } from "./FormLabel";
+import { FormLabel } from "./FormLabel.js";
 
 const root = css`
   display: block;

packages/taler-wallet-webextension/src/mui/input/InputStandard.tsx

@@ -1,8 +1,9 @@
 import { css } from "@linaria/core";
 import { h, VNode } from "preact";
+// eslint-disable-next-line import/extensions
 import { Colors, theme } from "../style";
-import { useFormControl } from "./FormControl";
+import { useFormControl } from "./FormControl.js";
-import { InputBase, InputBaseComponent, InputBaseRoot } from "./InputBase";
+import { InputBase, InputBaseComponent, InputBaseRoot } from "./InputBase.js";
 
 export interface Props {
   autoComplete?: string;

packages/taler-wallet-webextension/src/mui/style.tsx

@@ -9,7 +9,9 @@ import {
   lightBlue,
   green,
   grey,
+  // eslint-disable-next-line import/extensions
 } from "./colors/constants";
+// eslint-disable-next-line import/extensions
 import { getContrastRatio } from "./colors/manipulation";
 
 export type Colors =
@@ -184,7 +186,7 @@ function createTheme() {
     return createUnaryUnit(theme, 8);
   }
 
-  function createSpacing(spacingInput: number = 8): Spacing {
+  function createSpacing(spacingInput = 8): Spacing {
     // Material Design layouts are visually balanced. Most measurements align to an 8dp grid, which aligns both spacing and the overall layout.
     // Smaller components, such as icons, can align to a 4dp grid.
     // https://material.io/design/layout/understanding-layout.html#usage

packages/taler-wallet-webextension/src/platform/chrome.ts

@@ -15,7 +15,7 @@
  */
 
 import { classifyTalerUri, CoreApiResponse, TalerUriType } from "@gnu-taler/taler-util";
-import { getReadRequestPermissions } from "../permissions";
+import { getReadRequestPermissions } from "../permissions.js";
 import { CrossBrowserPermissionsApi, MessageFromBackend, Permissions, PlatformAPI } from "./api.js";
 
 const api: PlatformAPI = {

packages/taler-wallet-webextension/src/platform/dev.ts

@@ -15,7 +15,7 @@
  */
 
 import { classifyTalerUri, CoreApiResponse, TalerUriType } from "@gnu-taler/taler-util";
-import { MessageFromBackend, PlatformAPI } from "./api";
+import { MessageFromBackend, PlatformAPI } from "./api.js";
 
 const frames = ["popup", "wallet"]
 
@@ -133,8 +133,7 @@ const api: PlatformAPI = ({
 type IframeMessageType = IframeMessageNotification | IframeMessageResponse | IframeMessageCommand;
 interface IframeMessageNotification {
   type: "notification";
-  header: {
+  header: Record<string, never>,
-  },
   body: MessageFromBackend
 }
 interface IframeMessageResponse {

packages/taler-wallet-webextension/src/platform/firefox.ts

@@ -15,7 +15,7 @@
  */
 
 import { CrossBrowserPermissionsApi, Permissions, PlatformAPI } from "./api.js";
-import chromePlatform, { contains as chromeContains, remove as chromeRemove, request as chromeRequest } from "./chrome";
+import chromePlatform, { contains as chromeContains, remove as chromeRemove, request as chromeRequest } from "./chrome.js";
 
 const api: PlatformAPI = {
   ...chromePlatform,

packages/taler-wallet-webextension/src/popup/Application.tsx

@@ -25,21 +25,21 @@ import { Fragment, h, VNode } from "preact";
 import Router, { route, Route } from "preact-router";
 import { Match } from "preact-router/match";
 import { useEffect, useState } from "preact/hooks";
-import PendingTransactions from "../components/PendingTransactions";
+import PendingTransactions from "../components/PendingTransactions.js";
-import { PopupBox } from "../components/styled";
+import { PopupBox } from "../components/styled/index.js";
-import { DevContextProvider } from "../context/devContext";
+import { DevContextProvider } from "../context/devContext.js";
-import { IoCProviderForRuntime } from "../context/iocContext";
+import { IoCProviderForRuntime } from "../context/iocContext.js";
 import {
   TranslationProvider,
   useTranslationContext,
-} from "../context/translation";
+} from "../context/translation.js";
-import { useTalerActionURL } from "../hooks/useTalerActionURL";
+import { useTalerActionURL } from "../hooks/useTalerActionURL.js";
-import { Pages, PopupNavBar } from "../NavigationBar";
+import { Pages, PopupNavBar } from "../NavigationBar.js";
-import { platform } from "../platform/api";
+import { platform } from "../platform/api.js";
-import { BackupPage } from "../wallet/BackupPage";
+import { BackupPage } from "../wallet/BackupPage.js";
-import { ProviderDetailPage } from "../wallet/ProviderDetailPage";
+import { ProviderDetailPage } from "../wallet/ProviderDetailPage.js";
-import { BalancePage } from "./BalancePage";
+import { BalancePage } from "./BalancePage.js";
-import { TalerActionFound } from "./TalerActionFound";
+import { TalerActionFound } from "./TalerActionFound.js";
 
 function CheckTalerActionComponent(): VNode {
   const [talerActionUrl] = useTalerActionURL();

packages/taler-wallet-webextension/src/popup/Balance.stories.tsx

@@ -19,8 +19,8 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { createExample } from "../test-utils";
+import { createExample } from "../test-utils.js";
-import { BalanceView as TestedComponent } from "./BalancePage";
+import { BalanceView as TestedComponent } from "./BalancePage.js";
 
 export default {
   title: "popup/balance",

packages/taler-wallet-webextension/src/popup/BalancePage.tsx

@@ -22,17 +22,17 @@ import {
 } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
-import { BalanceTable } from "../components/BalanceTable";
+import { BalanceTable } from "../components/BalanceTable.js";
-import { JustInDevMode } from "../components/JustInDevMode";
+import { JustInDevMode } from "../components/JustInDevMode.js";
-import { Loading } from "../components/Loading";
+import { Loading } from "../components/Loading.js";
-import { LoadingError } from "../components/LoadingError";
+import { LoadingError } from "../components/LoadingError.js";
-import { MultiActionButton } from "../components/MultiActionButton";
+import { MultiActionButton } from "../components/MultiActionButton.js";
-import { ButtonBoxPrimary, ButtonPrimary } from "../components/styled";
+import { ButtonBoxPrimary, ButtonPrimary } from "../components/styled/index.js";
-import { useTranslationContext } from "../context/translation";
+import { useTranslationContext } from "../context/translation.js";
-import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
+import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
-import { AddNewActionView } from "../wallet/AddNewActionView";
+import { AddNewActionView } from "../wallet/AddNewActionView.js";
-import * as wxApi from "../wxApi";
+import * as wxApi from "../wxApi.js";
-import { NoBalanceHelp } from "./NoBalanceHelp";
+import { NoBalanceHelp } from "./NoBalanceHelp.js";
 
 export interface Props {
   goToWalletDeposit: (currency: string) => void;

packages/taler-wallet-webextension/src/popup/NoBalanceHelp.tsx

@@ -1,6 +1,6 @@
 import { h, VNode } from "preact";
-import { ButtonBoxWarning, WarningBox } from "../components/styled";
+import { ButtonBoxWarning, WarningBox } from "../components/styled/index.js";
-import { useTranslationContext } from "../context/translation";
+import { useTranslationContext } from "../context/translation.js";
 
 export function NoBalanceHelp({
   goToWalletManualWithdraw,
@@ -13,8 +13,7 @@ export function NoBalanceHelp({
       <p>
         <b>
           <i18n.Translate>You have no balance.</i18n.Translate>
-        </b>
+        </b>{" "}
-        {" "}
         <i18n.Translate>Withdraw some funds into your wallet.</i18n.Translate>
       </p>
       <ButtonBoxWarning onClick={() => goToWalletManualWithdraw()}>

packages/taler-wallet-webextension/src/popup/TalerActionFound.stories.tsx

@@ -19,8 +19,8 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { createExample } from "../test-utils";
+import { createExample } from "../test-utils.js";
-import { TalerActionFound as TestedComponent } from "./TalerActionFound";
+import { TalerActionFound as TestedComponent } from "./TalerActionFound.js";
 
 export default {
   title: "popup/TalerActionFound",

packages/taler-wallet-webextension/src/popup/TalerActionFound.tsx

@@ -21,9 +21,13 @@
 
 import { classifyTalerUri, TalerUriType } from "@gnu-taler/taler-util";
 import { Fragment, h } from "preact";
-import { platform } from "../platform/api";
+import { platform } from "../platform/api.js";
-import { ButtonPrimary, ButtonSuccess, Title } from "../components/styled";
+import {
-import { useTranslationContext } from "../context/translation";
+  ButtonPrimary,
+  ButtonSuccess,
+  Title,
+} from "../components/styled/index.js";
+import { useTranslationContext } from "../context/translation.js";
 
 export interface Props {
   url: string;

packages/taler-wallet-webextension/src/popup/index.stories.tsx

@@ -19,7 +19,7 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import * as a2 from "./Balance.stories";
+import * as a2 from "./Balance.stories.js";
-import * as a6 from "./TalerActionFound.stories";
+import * as a6 from "./TalerActionFound.stories.js";
 
 export default [a2, a6];

packages/taler-wallet-webextension/src/popupEntryPoint.dev.tsx

@@ -22,10 +22,10 @@
 
 import { setupI18n } from "@gnu-taler/taler-util";
 import { Fragment, h, render } from "preact";
-import { strings } from "./i18n/strings";
+import { strings } from "./i18n/strings.js";
-import { setupPlatform } from "./platform/api";
+import { setupPlatform } from "./platform/api.js";
-import devAPI from "./platform/dev";
+import devAPI from "./platform/dev.js";
-import { Application } from "./popup/Application";
+import { Application } from "./popup/Application.js";
 
 console.log("Wallet setup for Dev API");
 setupPlatform(devAPI);

packages/taler-wallet-webextension/src/popupEntryPoint.tsx

@@ -22,11 +22,11 @@
 
 import { setupI18n } from "@gnu-taler/taler-util";
 import { Fragment, h, render } from "preact";
-import { strings } from "./i18n/strings";
+import { strings } from "./i18n/strings.js";
-import { setupPlatform } from "./platform/api";
+import { setupPlatform } from "./platform/api.js";
-import chromeAPI from "./platform/chrome";
+import chromeAPI from "./platform/chrome.js";
-import firefoxAPI from "./platform/firefox";
+import firefoxAPI from "./platform/firefox.js";
-import { Application } from "./popup/Application";
+import { Application } from "./popup/Application.js";
 
 //FIXME: create different entry point for any platform instead of
 //switching in runtime

packages/taler-wallet-webextension/src/stories.test.ts

@@ -18,12 +18,12 @@
  *
  * @author Sebastian Javier Marchano (sebasjm)
  */
-import * as popup from "./popup/index.stories";
+import * as popup from "./popup/index.stories.js";
-import * as wallet from "./wallet/index.stories";
+import * as wallet from "./wallet/index.stories.js";
-import * as mui from "./mui/index.stories";
+import * as mui from "./mui/index.stories.js";
 
 import { setupI18n } from "@gnu-taler/taler-util";
-import { renderNodeOrBrowser } from "./test-utils";
+import { renderNodeOrBrowser } from "./test-utils.js";
 setupI18n("en", { en: {} });
 
 function testThisStory(st: any): any {
@@ -32,7 +32,6 @@ function testThisStory(st: any): any {
       const Component = (st as any)[k];
       if (k === "default" || !Component) return;
 
-      // eslint-disable-next-line jest/expect-expect
       it(`example: ${k}`, () => {
         renderNodeOrBrowser(Component, Component.args);
       });

packages/taler-wallet-webextension/src/stories.tsx

@@ -30,12 +30,12 @@ import {
   VNode,
 } from "preact";
 import { useEffect, useErrorBoundary, useState } from "preact/hooks";
-import { LogoHeader } from "./components/LogoHeader";
+import { LogoHeader } from "./components/LogoHeader.js";
-import { PopupBox, WalletBox } from "./components/styled";
+import { PopupBox, WalletBox } from "./components/styled/index.js";
-import * as mui from "./mui/index.stories";
+import * as mui from "./mui/index.stories.js";
-import { PopupNavBar, WalletNavBar } from "./NavigationBar";
+import { PopupNavBar, WalletNavBar } from "./NavigationBar.js";
-import * as popup from "./popup/index.stories";
+import * as popup from "./popup/index.stories.js";
-import * as wallet from "./wallet/index.stories";
+import * as wallet from "./wallet/index.stories.js";
 
 setupI18n("en", { en: {} });
 

packages/taler-wallet-webextension/src/wallet/AddNewActionView.stories.tsx

@@ -19,8 +19,8 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { createExample } from "../test-utils";
+import { createExample } from "../test-utils.js";
-import { AddNewActionView as TestedComponent } from "./AddNewActionView";
+import { AddNewActionView as TestedComponent } from "./AddNewActionView.js";
 
 export default {
   title: "wallet/add new action",

packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx

@@ -1,9 +1,13 @@
 import { classifyTalerUri, TalerUriType } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
-import { platform } from "../platform/api";
+import { platform } from "../platform/api.js";
-import { Button, ButtonSuccess, InputWithLabel } from "../components/styled";
+import {
-import { useTranslationContext } from "../context/translation";
+  Button,
+  ButtonSuccess,
+  InputWithLabel,
+} from "../components/styled/index.js";
+import { useTranslationContext } from "../context/translation.js";
 
 export interface Props {
   onCancel: () => void;

packages/taler-wallet-webextension/src/wallet/Application.tsx

@@ -25,31 +25,31 @@ import { Fragment, h, VNode } from "preact";
 import Router, { route, Route } from "preact-router";
 import Match from "preact-router/match";
 import { useEffect, useState } from "preact/hooks";
-import { LogoHeader } from "../components/LogoHeader";
+import { LogoHeader } from "../components/LogoHeader.js";
-import PendingTransactions from "../components/PendingTransactions";
+import PendingTransactions from "../components/PendingTransactions.js";
-import { SuccessBox, WalletBox } from "../components/styled";
+import { SuccessBox, WalletBox } from "../components/styled/index.js";
-import { DevContextProvider } from "../context/devContext";
+import { DevContextProvider } from "../context/devContext.js";
-import { IoCProviderForRuntime } from "../context/iocContext";
+import { IoCProviderForRuntime } from "../context/iocContext.js";
 import {
   TranslationProvider,
   useTranslationContext,
-} from "../context/translation";
+} from "../context/translation.js";
-import { PayPage } from "../cta/Pay";
+import { PayPage } from "../cta/Pay.js";
-import { RefundPage } from "../cta/Refund";
+import { RefundPage } from "../cta/Refund.js";
-import { TipPage } from "../cta/Tip";
+import { TipPage } from "../cta/Tip.js";
-import { WithdrawPage } from "../cta/Withdraw";
+import { WithdrawPage } from "../cta/Withdraw.js";
-import { Pages, WalletNavBar } from "../NavigationBar";
+import { Pages, WalletNavBar } from "../NavigationBar.js";
-import { DeveloperPage } from "./DeveloperPage";
+import { DeveloperPage } from "./DeveloperPage.js";
-import { BackupPage } from "./BackupPage";
+import { BackupPage } from "./BackupPage.js";
-import { DepositPage } from "./DepositPage";
+import { DepositPage } from "./DepositPage.js";
-import { ExchangeAddPage } from "./ExchangeAddPage";
+import { ExchangeAddPage } from "./ExchangeAddPage.js";
-import { HistoryPage } from "./History";
+import { HistoryPage } from "./History.js";
-import { ManualWithdrawPage } from "./ManualWithdrawPage";
+import { ManualWithdrawPage } from "./ManualWithdrawPage.js";
-import { ProviderAddPage } from "./ProviderAddPage";
+import { ProviderAddPage } from "./ProviderAddPage.js";
-import { ProviderDetailPage } from "./ProviderDetailPage";
+import { ProviderDetailPage } from "./ProviderDetailPage.js";
-import { SettingsPage } from "./Settings";
+import { SettingsPage } from "./Settings.js";
-import { TransactionPage } from "./Transaction";
+import { TransactionPage } from "./Transaction.js";
-import { WelcomePage } from "./Welcome";
+import { WelcomePage } from "./Welcome.js";
 
 export function Application(): VNode {
   const [globalNotification, setGlobalNotification] = useState<

packages/taler-wallet-webextension/src/wallet/Backup.stories.tsx

@@ -21,8 +21,8 @@
 
 import { ProviderPaymentType } from "@gnu-taler/taler-wallet-core";
 import { addDays } from "date-fns";
-import { BackupView as TestedComponent } from "./BackupPage";
+import { BackupView as TestedComponent } from "./BackupPage.js";
-import { createExample } from "../test-utils";
+import { createExample } from "../test-utils.js";
 import { TalerProtocolTimestamp } from "@gnu-taler/taler-util";
 
 export default {

packages/taler-wallet-webextension/src/wallet/BackupPage.tsx

@@ -27,8 +27,8 @@ import {
   intervalToDuration,
 } from "date-fns";
 import { Fragment, h, VNode } from "preact";
-import { Loading } from "../components/Loading";
+import { Loading } from "../components/Loading.js";
-import { LoadingError } from "../components/LoadingError";
+import { LoadingError } from "../components/LoadingError.js";
 import {
   BoldLight,
   ButtonPrimary,
@@ -39,11 +39,11 @@ import {
   RowBorderGray,
   SmallLightText,
   SmallText,
-} from "../components/styled";
+} from "../components/styled/index.js";
-import { useTranslationContext } from "../context/translation";
+import { useTranslationContext } from "../context/translation.js";
-import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
+import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
-import { Pages } from "../NavigationBar";
+import { Pages } from "../NavigationBar.js";
-import * as wxApi from "../wxApi";
+import * as wxApi from "../wxApi.js";
 
 interface Props {
   onAddProvider: () => void;

packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.stories.tsx

@@ -19,8 +19,8 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { createExample } from "../test-utils";
+import { createExample } from "../test-utils.js";
-import { CreateManualWithdraw as TestedComponent } from "./CreateManualWithdraw";
+import { CreateManualWithdraw as TestedComponent } from "./CreateManualWithdraw.js";
 
 export default {
   title: "wallet/manual withdraw/creation",

packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.test.ts

@@ -19,9 +19,9 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { SelectFieldHandler, TextFieldHandler, useComponentState } from "./CreateManualWithdraw";
+import { SelectFieldHandler, TextFieldHandler, useComponentState } from "./CreateManualWithdraw.js";
 import { expect } from "chai";
-import { mountHook } from "../test-utils";
+import { mountHook } from "../test-utils.js";
 
 
 const exchangeListWithARSandUSD = {

packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx

@@ -22,8 +22,8 @@
 import { AmountJson, Amounts } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
-import { ErrorMessage } from "../components/ErrorMessage";
+import { ErrorMessage } from "../components/ErrorMessage.js";
-import { SelectList } from "../components/SelectList";
+import { SelectList } from "../components/SelectList.js";
 import {
   BoldLight,
   ButtonPrimary,
@@ -34,9 +34,9 @@ import {
   LinkPrimary,
   SubTitle,
   Title,
-} from "../components/styled";
+} from "../components/styled/index.js";
-import { useTranslationContext } from "../context/translation";
+import { useTranslationContext } from "../context/translation.js";
-import { Pages } from "../NavigationBar";
+import { Pages } from "../NavigationBar.js";
 
 export interface Props {
   error: string | undefined;

packages/taler-wallet-webextension/src/wallet/DepositPage.stories.tsx

@@ -21,8 +21,8 @@
 
 import { Amounts, Balance, parsePaytoUri } from "@gnu-taler/taler-util";
 import { DepositFee } from "@gnu-taler/taler-wallet-core/src/operations/deposits";
-import { createExample } from "../test-utils";
+import { createExample } from "../test-utils.js";
-import { View as TestedComponent } from "./DepositPage";
+import { View as TestedComponent } from "./DepositPage.js";
 
 export default {
   title: "wallet/deposit",

packages/taler-wallet-webextension/src/wallet/DepositPage.test.ts

@@ -19,9 +19,9 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { useComponentState } from "./DepositPage";
+import { useComponentState } from "./DepositPage.js";
 import { expect } from "chai";
-import { mountHook } from "../test-utils";
+import { mountHook } from "../test-utils.js";
 import { Amounts, Balance } from "@gnu-taler/taler-util";
 
 

packages/taler-wallet-webextension/src/wallet/DepositPage.tsx

@@ -24,9 +24,9 @@ import {
 import { DepositFee } from "@gnu-taler/taler-wallet-core/src/operations/deposits";
 import { Fragment, h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
-import { Loading } from "../components/Loading";
+import { Loading } from "../components/Loading.js";
-import { LoadingError } from "../components/LoadingError";
+import { LoadingError } from "../components/LoadingError.js";
-import { SelectList } from "../components/SelectList";
+import { SelectList } from "../components/SelectList.js";
 import {
   Button,
   ButtonPrimary,
@@ -35,11 +35,14 @@ import {
   InputWithLabel,
   SubTitle,
   WarningBox,
-} from "../components/styled";
+} from "../components/styled/index.js";
-import { useTranslationContext } from "../context/translation";
+import { useTranslationContext } from "../context/translation.js";
-import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
+import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
-import * as wxApi from "../wxApi";
+import * as wxApi from "../wxApi.js";
-import { SelectFieldHandler, TextFieldHandler } from "./CreateManualWithdraw";
+import {
+  SelectFieldHandler,
+  TextFieldHandler,
+} from "./CreateManualWithdraw.js";
 
 interface Props {
   currency: string;

packages/taler-wallet-webextension/src/wallet/DeveloperPage.stories.tsx

@@ -20,8 +20,8 @@
  */
 
 import { PendingTaskType } from "@gnu-taler/taler-wallet-core";
-import { createExample } from "../test-utils";
+import { createExample } from "../test-utils.js";
-import { View as TestedComponent } from "./DeveloperPage";
+import { View as TestedComponent } from "./DeveloperPage.js";
 
 export default {
   title: "wallet/developer",

packages/taler-wallet-webextension/src/wallet/DeveloperPage.tsx

@@ -24,13 +24,13 @@ import { PendingTaskInfo } from "@gnu-taler/taler-wallet-core";
 import { format } from "date-fns";
 import { Fragment, h, VNode } from "preact";
 import { useRef, useState } from "preact/hooks";
-import { Diagnostics } from "../components/Diagnostics";
+import { Diagnostics } from "../components/Diagnostics.js";
-import { NotifyUpdateFadeOut } from "../components/styled";
+import { NotifyUpdateFadeOut } from "../components/styled/index.js";
-import { Time } from "../components/Time";
+import { Time } from "../components/Time.js";
-import { useTranslationContext } from "../context/translation";
+import { useTranslationContext } from "../context/translation.js";
-import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
+import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
-import { useDiagnostics } from "../hooks/useDiagnostics";
+import { useDiagnostics } from "../hooks/useDiagnostics.js";
-import * as wxApi from "../wxApi";
+import * as wxApi from "../wxApi.js";
 
 export function DeveloperPage(): VNode {
   const [status, timedOut] = useDiagnostics();
@@ -372,8 +372,6 @@ function toBase64(str: string): string {
   );
 }
 
-function runIntegrationTest() {}
-
 export async function confirmReset(
   confirmTheResetMessage: string,
 ): Promise<void> {

packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.stories.tsx

@@ -19,9 +19,9 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { termsXml } from "../cta/termsExample";
+import { termsXml } from "../cta/termsExample.js";
-import { createExample } from "../test-utils";
+import { createExample } from "../test-utils.js";
-import { View as TestedComponent } from "./ExchangeAddConfirm";
+import { View as TestedComponent } from "./ExchangeAddConfirm.js";
 
 function parseFromString(s: string): Document {
   if (typeof window === "undefined") {

packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx

@@ -5,12 +5,12 @@ import {
   ButtonSuccess,
   ButtonWarning,
   Title,
-} from "../components/styled";
+} from "../components/styled/index.js";
-import { useTranslationContext } from "../context/translation";
+import { useTranslationContext } from "../context/translation.js";
-import { TermsOfServiceSection } from "../cta/TermsOfServiceSection";
+import { TermsOfServiceSection } from "../cta/TermsOfServiceSection.js";
-import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
+import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
-import { buildTermsOfServiceState, TermsState } from "../utils/index";
+import { buildTermsOfServiceState, TermsState } from "../utils/index.js";
-import * as wxApi from "../wxApi";
+import * as wxApi from "../wxApi.js";
 
 export interface Props {
   url: string;

packages/taler-wallet-webextension/src/wallet/ExchangeAddPage.tsx

@@ -20,11 +20,11 @@ import {
 } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
-import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
+import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
-import { queryToSlashKeys } from "../utils/index";
+import { queryToSlashKeys } from "../utils/index.js";
-import * as wxApi from "../wxApi";
+import * as wxApi from "../wxApi.js";
-import { ExchangeAddConfirmPage } from "./ExchangeAddConfirm";
+import { ExchangeAddConfirmPage } from "./ExchangeAddConfirm.js";
-import { ExchangeSetUrlPage } from "./ExchangeSetUrl";
+import { ExchangeSetUrlPage } from "./ExchangeSetUrl.js";
 
 interface Props {
   currency?: string;

packages/taler-wallet-webextension/src/wallet/ExchangeAddSetUrl.stories.tsx

@@ -19,9 +19,9 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { createExample } from "../test-utils";
+import { createExample } from "../test-utils.js";
-import { queryToSlashKeys } from "../utils/index";
+import { queryToSlashKeys } from "../utils/index.js";
-import { ExchangeSetUrlPage as TestedComponent } from "./ExchangeSetUrl";
+import { ExchangeSetUrlPage as TestedComponent } from "./ExchangeSetUrl.js";
 
 export default {
   title: "wallet/exchange add/set url",

packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx

@@ -4,7 +4,7 @@ import {
 } from "@gnu-taler/taler-util";
 import { Fragment, h } from "preact";
 import { useEffect, useState } from "preact/hooks";
-import { ErrorMessage } from "../components/ErrorMessage";
+import { ErrorMessage } from "../components/ErrorMessage.js";
 import {
   Button,
   ButtonPrimary,
@@ -13,8 +13,8 @@ import {
   SubTitle,
   Title,
   WarningBox,
-} from "../components/styled";
+} from "../components/styled/index.js";
-import { useTranslationContext } from "../context/translation";
+import { useTranslationContext } from "../context/translation.js";
 
 export interface Props {
   initialValue?: string;

packages/taler-wallet-webextension/src/wallet/History.stories.tsx

@@ -32,8 +32,8 @@ import {
   TransactionWithdrawal,
   WithdrawalType,
 } from "@gnu-taler/taler-util";
-import { HistoryView as TestedComponent } from "./History";
+import { HistoryView as TestedComponent } from "./History.js";
-import { createExample } from "../test-utils";
+import { createExample } from "../test-utils.js";
 
 export default {
   title: "wallet/balance",