6 files changed, 35 insertions, 84 deletions
diff --git a/src/webex/pages/benchmark.tsx b/src/webex/pages/benchmark.tsx
index 1d91ac0bd..b250bc20a 100644
--- a/src/webex/pages/benchmark.tsx
+++ b/src/webex/pages/benchmark.tsx
@@ -23,14 +23,13 @@
 
 import * as i18n from "../../i18n";
 
-import { runOnceWhenReady } from "./common";
-
 import { BenchmarkResult } from "../../walletTypes";
 
 import * as wxApi from "../wxApi";
 
 import * as React from "react";
 import * as ReactDOM from "react-dom";
+import { registerMountPage } from "../renderHtml";
 
 
 interface BenchmarkRunnerState {
@@ -103,9 +102,6 @@ class BenchmarkRunner extends React.Component<any, BenchmarkRunnerState> {
   }
 }
 
-
-runOnceWhenReady(() => {
-  ReactDOM.render(<BenchmarkRunner />, document.getElementById("container")!);
-  // Will be used by the backend to detect when the popup gets closed,
-  // so we can clear notifications
+registerMountPage(() => {
+  return <BenchmarkRunner />;
 });
diff --git a/src/webex/pages/common.ts b/src/webex/pages/common.ts
deleted file mode 100644
index 695e5fc1d..000000000
--- a/src/webex/pages/common.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
- This file is part of TALER
- (C) 2018 GNUnet e.V.
-
- TALER is free software; you can redistribute it and/or modify it under the
- terms of the GNU General Public License as published by the Free Software
- Foundation; either version 3, or (at your option) any later version.
-
- TALER is distributed in the hope that it will be useful, but WITHOUT ANY
- WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
-
- You should have received a copy of the GNU General Public License along with
- TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
- */
-
-/**
- * Common helper functions for all web extension pages.
- */
-
-/**
- * Make sure that a function is executed exactly once
- * after the DOM has been loaded.
- */
-export function runOnceWhenReady(f: () => void): void {
-  if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", f);
-    return;
-  }
-  f();
-}
diff --git a/src/webex/pages/pay.html b/src/webex/pages/pay.html
index d3bf992ad..20605ac49 100644
--- a/src/webex/pages/pay.html
+++ b/src/webex/pages/pay.html
@@ -72,7 +72,7 @@
 <body>
   <section id="main">
     <h1>GNU Taler Wallet</h1>
-    <article id="contract" class="fade"></article>
+    <article id="container" class="fade"></article>
   </section>
 </body>
 
diff --git a/src/webex/pages/pay.tsx b/src/webex/pages/pay.tsx
index 95d12b69a..c266f6d48 100644
--- a/src/webex/pages/pay.tsx
+++ b/src/webex/pages/pay.tsx
@@ -24,19 +24,13 @@
  */
 import * as i18n from "../../i18n";
 
-import { runOnceWhenReady } from "./common";
-
-import { ExchangeRecord, ProposalDownloadRecord } from "../../dbTypes";
-import { ContractTerms } from "../../talerTypes";
 import { CheckPayResult, PreparePayResult } from "../../walletTypes";
 
-import { renderAmount, ProgressButton } from "../renderHtml";
+import { renderAmount, ProgressButton, registerMountPage } from "../renderHtml";
 import * as wxApi from "../wxApi";
 
 import React, { useState, useEffect } from "react";
-import * as ReactDOM from "react-dom";
 import URI = require("urijs");
-import { WalletApiError } from "../wxApi";
 
 import * as Amounts from "../../amounts";
 
@@ -153,22 +147,11 @@ function TalerPayDialog({ talerPayUri }: { talerPayUri: string }) {
   );
 }
 
-runOnceWhenReady(() => {
-  try {
-    const url = new URI(document.location.href);
-    const query: any = URI.parseQuery(url.query());
+registerMountPage(() => {
+  const url = new URI(document.location.href);
+  const query: any = URI.parseQuery(url.query());
 
-    let talerPayUri = query.talerPayUri;
+  let talerPayUri = query.talerPayUri;
 
-    ReactDOM.render(
-      <TalerPayDialog talerPayUri={talerPayUri} />,
-      document.getElementById("contract")!,
-    );
-  } catch (e) {
-    ReactDOM.render(
-      <span>Fatal error: {e.message}</span>,
-      document.getElementById("contract")!,
-    );
-    console.error(e);
-  }
+  return <TalerPayDialog talerPayUri={talerPayUri} />;
 });
diff --git a/src/webex/pages/popup.html b/src/webex/pages/popup.html
index 98f24bccc..7929da765 100644
--- a/src/webex/pages/popup.html
+++ b/src/webex/pages/popup.html
@@ -12,7 +12,7 @@
 </head>
 
 <body>
-  <div id="content" style="margin:0;padding:0"></div>
+  <div id="container" style="margin:0;padding:0"></div>
 </body>
 
 </html>
diff --git a/src/webex/pages/popup.tsx b/src/webex/pages/popup.tsx
index 91ab515e4..205945471 100644
--- a/src/webex/pages/popup.tsx
+++ b/src/webex/pages/popup.tsx
@@ -26,8 +26,6 @@
  */
 import * as i18n from "../../i18n";
 
-import { runOnceWhenReady } from "./common";
-
 import { AmountJson } from "../../amounts";
 import * as Amounts from "../../amounts";
 
@@ -37,7 +35,12 @@ import {
   WalletBalanceEntry,
 } from "../../walletTypes";
 
-import { abbrev, renderAmount, PageLink } from "../renderHtml";
+import {
+  abbrev,
+  renderAmount,
+  PageLink,
+  registerMountPage,
+} from "../renderHtml";
 import * as wxApi from "../wxApi";
 
 import * as React from "react";
@@ -196,8 +199,7 @@ function EmptyBalanceView() {
     <div>
       <i18n.Translate wrap="p">
         You have no balance to show. Need some{" "}
-        <PageLink pageName="welcome.html">help</PageLink> getting
-        started?
+        <PageLink pageName="welcome.html">help</PageLink> getting started?
       </i18n.Translate>
     </div>
   );
@@ -303,7 +305,8 @@ class WalletBalanceView extends React.Component<any, any> {
         <div>
           <p>{i18n.str`Error: could not retrieve balance information.`}</p>
           <p>
-            Click <PageLink pageName="welcome.html">here</PageLink> for help and diagnostics.
+            Click <PageLink pageName="welcome.html">here</PageLink> for help and
+            diagnostics.
           </p>
         </div>
       );
@@ -551,22 +554,22 @@ function openTab(page: string) {
   };
 }
 
-const el = (
-  <div>
-    <WalletNavBar />
-    <div style={{ margin: "1em" }}>
-      <Router>
-        <WalletBalanceView route="/balance" default />
-        <WalletHistory route="/history" />
-        <WalletDebug route="/debug" />
-      </Router>
+function WalletPopup() {
+  return (
+    <div>
+      <WalletNavBar />
+      <div style={{ margin: "1em" }}>
+        <Router>
+          <WalletBalanceView route="/balance" default />
+          <WalletHistory route="/history" />
+          <WalletDebug route="/debug" />
+        </Router>
+      </div>
     </div>
-  </div>
-);
+  );
+}
 
-runOnceWhenReady(() => {
-  ReactDOM.render(el, document.getElementById("content")!);
-  // Will be used by the backend to detect when the popup gets closed,
-  // so we can clear notifications
+registerMountPage(() => {
   chrome.runtime.connect({ name: "popup" });
+  return <WalletPopup />
 });