first kyc ui

34 files changed, 1771 insertions, 0 deletions

diff --git a/packages/kyc-ui/.gitignore b/packages/kyc-ui/.gitignore
new file mode 100644
index 000000000..30cb2774c
--- /dev/null
+++ b/packages/kyc-ui/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+/build
+/*.log
+/demobank-ui-settings.js
diff --git a/packages/kyc-ui/Makefile b/packages/kyc-ui/Makefile
new file mode 100644
index 000000000..64f9f83d1
--- /dev/null
+++ b/packages/kyc-ui/Makefile
@@ -0,0 +1,36 @@
+# This Makefile has been placed in the public domain
+
+ifeq ($(TOPLEVEL), yes)
+  $(info top-level build)
+  -include ../../.config.mk
+  override DESTDIR := $(TOP_DESTDIR)
+else
+  $(info package-level build)
+  -include ../../.config.mk
+  -include .config.mk
+endif
+
+$(info prefix is $(prefix))
+
+.PHONY: all
+all:
+	@echo run \'make install\' to install
+
+spa_dir=$(DESTDIR)$(prefix)/share/taler/aml-backoffice-ui
+
+.PHONY: install-nodeps
+install-nodeps:
+	install -d $(spa_dir)
+	install ./dist/prod/* $(spa_dir)
+
+.PHONY: deps
+deps:
+	pnpm install --frozen-lockfile --filter @gnu-taler/aml-backoffice-ui...
+	pnpm run check
+	pnpm run build
+
+.PHONY: install
+install:
+	$(MAKE) deps
+	$(MAKE) install-nodeps
+
diff --git a/packages/kyc-ui/README.md b/packages/kyc-ui/README.md
new file mode 100644
index 000000000..d876aaf2b
--- /dev/null
+++ b/packages/kyc-ui/README.md
@@ -0,0 +1,4 @@
+# KYC UI
+
+Web-based user interface for the exchange kyc.
+
diff --git a/packages/kyc-ui/build.mjs b/packages/kyc-ui/build.mjs
new file mode 100755
index 000000000..2e116d214
--- /dev/null
+++ b/packages/kyc-ui/build.mjs
@@ -0,0 +1,33 @@
+#!/usr/bin/env node
+/*
+ This file is part of GNU Taler
+ (C) 2022-2024 Taler Systems S.A.
+
+ GNU 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.
+
+ GNU 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
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import { build } from "@gnu-taler/web-util/build";
+
+await build({
+  type: "production",
+  source: {
+    js: ["src/main.js","src/index.tsx"],
+    assets: [{
+      base: "src",
+      files: [
+        "src/index.html",
+      ]
+    }],
+  },
+  destination: "./dist/prod",
+  css: "postcss",
+});
diff --git a/packages/kyc-ui/copyleft-header.js b/packages/kyc-ui/copyleft-header.js
new file mode 100644
index 000000000..7fa276bea
--- /dev/null
+++ b/packages/kyc-ui/copyleft-header.js
@@ -0,0 +1,15 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022-2024 Taler Systems S.A.
+
+ GNU 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.
+
+ GNU 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
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
diff --git a/packages/kyc-ui/dev.mjs b/packages/kyc-ui/dev.mjs
new file mode 100755
index 000000000..a6b715538
--- /dev/null
+++ b/packages/kyc-ui/dev.mjs
@@ -0,0 +1,46 @@
+#!/usr/bin/env node
+/*
+ This file is part of GNU Taler
+ (C) 2022-2024 Taler Systems S.A.
+
+ GNU 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.
+
+ GNU 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
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import { serve } from "@gnu-taler/web-util/node";
+import { initializeDev } from "@gnu-taler/web-util/build";
+
+const devEntryPoints = ["src/index.tsx", "src/main.js"];
+
+const build = initializeDev({
+  type: "development",
+  source: {
+    js: devEntryPoints,
+    assets: [{
+      base: "src",
+      files: [
+        "src/index.html",
+      ]
+    }],
+  },
+  destination: "./dist/dev",
+  public: "/app",
+  css: "postcss",
+});
+
+await build();
+
+serve({
+  folder: "./dist/dev",
+  port: 8080,
+  source: "./src",
+  onSourceUpdate: build,
+});
diff --git a/packages/kyc-ui/package.json b/packages/kyc-ui/package.json
new file mode 100644
index 000000000..e02c88fe0
--- /dev/null
+++ b/packages/kyc-ui/package.json
@@ -0,0 +1,64 @@
+{
+  "private": true,
+  "name": "@gnu-taler/kyc-ui",
+  "version": "0.12.12",
+  "author": "sebasjm",
+  "license": "AGPL-3.0-OR-LATER",
+  "description": "UI for GNU Exchange KYC.",
+  "type": "module",
+  "scripts": {
+    "build": "./build.mjs",
+    "check": "tsc",
+    "compile": "tsc && ./build.mjs",
+    "test": "./test.mjs && mocha --require source-map-support/register 'dist/test/**/*.test.js' 'dist/test/**/test.js'",
+    "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
+    "clean": "rm -rf dist lib tsconfig.tsbuildinfo",
+    "i18n:strings": "pogen extract && pogen merge",
+    "i18n:translations": "pogen emit",
+    "pretty": "prettier --write src"
+  },
+  "eslintConfig": {
+    "plugins": [
+      "header"
+    ],
+    "rules": {
+      "header/header": [
+        2,
+        "copyleft-header.js"
+      ]
+    },
+    "extends": [
+      "prettier"
+    ]
+  },
+  "devDependencies": {
+    "eslint": "^8.56.0",
+    "@typescript-eslint/eslint-plugin": "^6.19.0",
+    "@typescript-eslint/parser": "^6.19.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-react": "^7.33.2",
+    "@gnu-taler/pogen": "workspace:*",
+    "@tailwindcss/forms": "^0.5.3",
+    "@tailwindcss/typography": "^0.5.9",
+    "@types/chai": "^4.3.0",
+    "@types/history": "^4.7.8",
+    "@types/mocha": "^10.0.1",
+    "@types/node": "^18.11.17",
+    "autoprefixer": "^10.4.14",
+    "chai": "^4.3.6",
+    "esbuild": "^0.19.9",
+    "mocha": "9.2.0",
+    "po2json": "^0.4.5",
+    "tailwindcss": "^3.3.2",
+    "typescript": "5.3.3"
+  },
+  "pogen": {
+    "domain": "kyc-ui"
+  },
+  "dependencies": {
+    "swr": "2.0.3",
+    "@gnu-taler/taler-util": "workspace:*",
+    "@gnu-taler/web-util": "workspace:*",
+    "preact": "10.11.3"
+  }
+}
diff --git a/packages/kyc-ui/postcss.config.js b/packages/kyc-ui/postcss.config.js
new file mode 100644
index 000000000..c9a60a43c
--- /dev/null
+++ b/packages/kyc-ui/postcss.config.js
@@ -0,0 +1,21 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022-2024 Taler Systems S.A.
+
+ GNU 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.
+
+ GNU 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
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/packages/kyc-ui/src/Routing.tsx b/packages/kyc-ui/src/Routing.tsx
new file mode 100644
index 000000000..54bec1404
--- /dev/null
+++ b/packages/kyc-ui/src/Routing.tsx
@@ -0,0 +1,99 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022-2024 Taler Systems S.A.
+
+ GNU 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.
+
+ GNU 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
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import {
+  urlPattern,
+  useCurrentLocation,
+  useNavigationContext
+} from "@gnu-taler/web-util/browser";
+import { Fragment, VNode, h } from "preact";
+
+import { assertUnreachable } from "@gnu-taler/taler-util";
+import { useErrorBoundary } from "preact/hooks";
+import { CallengeCompleted } from "./pages/CallengeCompleted.js";
+import { Frame } from "./pages/Frame.js";
+import { Start } from "./pages/Start.js";
+
+export function Routing(): VNode {
+  // check session and defined if this is
+  // public routing or private
+  return (
+    <Frame>
+      <PublicRounting />
+    </Frame>
+  );
+}
+
+const publicPages = {
+  completed: urlPattern(/\/completed/, () => `#/completed`),
+  start: urlPattern<{ token: string }>(
+    /\/start\/(?<token>[0-9A-Za-z]+)/,
+    ({ token }) => `#/start/${token}`,
+  ),
+};
+
+function safeGetParam(
+  ps: Record<string, string[]>,
+  n: string,
+): string | undefined {
+  if (!ps[n] || ps[n].length == 0) return undefined;
+  return ps[n][0];
+}
+
+export function safeToURL(s: string | undefined): URL | undefined {
+  if (s === undefined) return undefined;
+  try {
+    return new URL(s);
+  } catch (e) {
+    return undefined;
+  }
+}
+
+function PublicRounting(): VNode {
+  const location = useCurrentLocation(publicPages);
+  const { navigateTo } = useNavigationContext();
+  useErrorBoundary((e) => {
+    console.log("error", e);
+  });
+  console.log("ASD", location.name)
+  switch (location.name) {
+    case undefined: {
+      return <div>not found</div>
+    }
+    case "start": {
+      const secret = safeGetParam(location.params, "secret");
+      const redirectURL = safeToURL(
+        safeGetParam(location.params, "redirect_uri"),
+      );
+
+      return (
+        <Start
+          clientId={location.values.token}
+          secret={secret}
+          redirectURL={redirectURL}
+          onCreated={() => {
+            navigateTo(publicPages.completed.url({}));
+          }}
+        />
+      );
+    }
+    case "completed": {
+      return <CallengeCompleted />;
+    }
+    default:
+      assertUnreachable(location);
+  }
+}
diff --git a/packages/kyc-ui/src/app.tsx b/packages/kyc-ui/src/app.tsx
new file mode 100644
index 000000000..7bee7b11a
--- /dev/null
+++ b/packages/kyc-ui/src/app.tsx
@@ -0,0 +1,160 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022-2024 Taler Systems S.A.
+
+ GNU 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.
+
+ GNU 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
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import {
+  CacheEvictor,
+  TalerExchangeCacheEviction,
+  canonicalizeBaseUrl,
+  getGlobalLogLevel,
+  setGlobalLogLevelFromString
+} from "@gnu-taler/taler-util";
+import {
+  BrowserHashNavigationProvider,
+  ExchangeApiProvider,
+  Loading,
+  TalerWalletIntegrationBrowserProvider,
+  TranslationProvider
+} from "@gnu-taler/web-util/browser";
+import { VNode, h } from "preact";
+import { useEffect, useState } from "preact/hooks";
+import { SWRConfig } from "swr";
+import { Routing } from "./Routing.js";
+import { SettingsProvider } from "./context/settings.js";
+import { strings } from "./i18n/strings.js";
+import { Frame } from "./pages/Frame.js";
+import { KycUiSettings, fetchSettings } from "./settings.js";
+
+const WITH_LOCAL_STORAGE_CACHE = false;
+
+const evictExchangeSwrCache: CacheEvictor<TalerExchangeCacheEviction> = {
+  async notifySuccess(op) {
+    // switch (op) {
+    //   default: {
+    //     assertUnreachable(op);
+    //   }
+    // }
+  },
+};
+
+export function App(): VNode {
+  const [settings, setSettings] = useState<KycUiSettings>();
+  useEffect(() => {
+    fetchSettings(setSettings);
+  }, []);
+  if (!settings) return <Loading />;
+
+  const baseUrl = getInitialBackendBaseURL(settings.backendBaseURL);
+  return (
+    <SettingsProvider value={settings}>
+      <TranslationProvider
+        source={strings}
+        forceLang="en"
+        completeness={{
+          es: strings["es"].completeness,
+          de: strings["de"].completeness,
+        }}
+      >
+        <ExchangeApiProvider
+          baseUrl={new URL("/", baseUrl)}
+          frameOnError={Frame}
+          evictors={{
+            exchange: evictExchangeSwrCache
+          }}
+        >
+          <SWRConfig
+            value={{
+              provider: WITH_LOCAL_STORAGE_CACHE
+                ? localStorageProvider
+                : undefined,
+              // normally, do not revalidate
+              revalidateOnFocus: false,
+              revalidateOnReconnect: false,
+              revalidateIfStale: false,
+              revalidateOnMount: undefined,
+              focusThrottleInterval: undefined,
+
+              // normally, do not refresh
+              refreshInterval: undefined,
+              dedupingInterval: 2000,
+              refreshWhenHidden: false,
+              refreshWhenOffline: false,
+
+              // ignore errors
+              shouldRetryOnError: false,
+              errorRetryCount: 0,
+              errorRetryInterval: undefined,
+
+              // do not go to loading again if already has data
+              keepPreviousData: true,
+            }}
+          >
+            <TalerWalletIntegrationBrowserProvider>
+              <BrowserHashNavigationProvider>
+                <Routing />
+              </BrowserHashNavigationProvider>
+            </TalerWalletIntegrationBrowserProvider>
+          </SWRConfig>
+        </ExchangeApiProvider>
+      </TranslationProvider>
+    </SettingsProvider>
+  );
+}
+
+// @ts-expect-error creating a new property for window object
+window.setGlobalLogLevelFromString = setGlobalLogLevelFromString;
+// @ts-expect-error creating a new property for window object
+window.getGlobalLevel = getGlobalLogLevel;
+
+function localStorageProvider(): Map<unknown, unknown> {
+  const map = new Map(JSON.parse(localStorage.getItem("app-cache") || "[]"));
+
+  window.addEventListener("beforeunload", () => {
+    const appCache = JSON.stringify(Array.from(map.entries()));
+    localStorage.setItem("app-cache", appCache);
+  });
+  return map;
+}
+
+function getInitialBackendBaseURL(
+  backendFromSettings: string | undefined,
+): string {
+  const overrideUrl =
+    typeof localStorage !== "undefined"
+      ? localStorage.getItem("kyc-base-url")
+      : undefined;
+  let result: string;
+
+  if (!overrideUrl) {
+    // normal path
+    if (!backendFromSettings) {
+      console.error(
+        "ERROR: backendBaseURL was overridden by a setting file and missing. Setting value to 'window.origin'",
+      );
+      result = window.origin;
+    } else {
+      result = backendFromSettings;
+    }
+  } else {
+    // testing/development path
+    result = overrideUrl;
+  }
+  try {
+    return canonicalizeBaseUrl(result);
+  } catch (e) {
+    // fall back
+    return canonicalizeBaseUrl(window.origin);
+  }
+}
diff --git a/packages/kyc-ui/src/assets/home.svg b/packages/kyc-ui/src/assets/home.svg
new file mode 100644
index 000000000..35f340162
--- /dev/null
+++ b/packages/kyc-ui/src/assets/home.svg
@@ -0,0 +1,3 @@
+<svg class="h-6 w-6 shrink-0 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
+</svg>
\ No newline at end of file
diff --git a/packages/kyc-ui/src/assets/logo-2021.svg b/packages/kyc-ui/src/assets/logo-2021.svg
new file mode 100644
index 000000000..8c5ff3e5b
--- /dev/null
+++ b/packages/kyc-ui/src/assets/logo-2021.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 201 90">
+  <g fill="#0042b3" fill-rule="evenodd" stroke-width=".3">
+    <path d="M86.7 1.1c15.6 0 29 9.4 36 23.2h-5.9A35.1 35.1 0 0086.7 6.5C67 6.5 51 23.6 51 44.7c0 10.4 3.8 19.7 10 26.6a31.4 31.4 0 01-4.2 3A45.2 45.2 0 0146 44.7c0-24 18.2-43.6 40.7-43.6zm35.8 64.3a40.4 40.4 0 01-39 22.8c3-1.5 6-3.5 8.6-5.7a35.6 35.6 0 0024.6-17.1z" />
+    <path d="M64.2 1.1l3.1.1c-3 1.6-5.9 3.5-8.5 5.8a37.5 37.5 0 00-30.2 37.7c0 14.3 7.3 26.7 18 33.3a29.6 29.6 0 01-8.5.2c-9-8-14.6-20-14.6-33.5 0-24 18.2-43.6 40.7-43.6zm5.4 81.4a35.6 35.6 0 0024.6-17.1h5.9a40.4 40.4 0 01-39 22.8c3-1.5 5.9-3.5 8.5-5.7zm24.8-58.2a37 37 0 00-12.6-12.8 29.6 29.6 0 018.5-.2c4 3.6 7.4 8 9.9 13z" />
+    <path d="M41.8 1.1c1 0 2 0 3.1.2-3 1.5-5.9 3.4-8.5 5.6A37.5 37.5 0 006.1 44.7c0 21.1 16 38.3 35.7 38.3 12.6 0 23.6-7 30-17.6h5.8a40.4 40.4 0 01-35.8 23C19.3 88.4 1 68.8 1 44.7c0-24 18.2-43.6 40.7-43.6zm30.1 23.2a38.1 38.1 0 00-4.5-6.1c1.3-1.2 2.7-2.2 4.3-3 2.3 2.7 4.4 5.8 6 9.1z" />
+  </g>
+  <path d="M76.1 34.4h9.2v-5H61.9v5H71v26h5.1zM92.6 52.9h13.7l3 7.4h5.3l-12.7-31.2h-4.7L84.5 60.3h5.2zm11.8-4.9h-9.9l5-12.4zM123.8 29.4h-4.6v31h20.6v-5h-16zM166.5 29.4H145v31h21.6v-5H150v-8.3h14.5v-4.9h-14.5v-8h16.4zM191.2 39.5c0 1.6-.5 2.8-1.6 3.8s-2.6 1.4-4.4 1.4h-7.4V34.3h7.4c1.9 0 3.4.4 4.4 1.3 1 .9 1.6 2.2 1.6 3.9zm6 20.8l-7.7-11.7c1-.3 1.9-.7 2.7-1.3a8.8 8.8 0 003.6-4.6c.4-1 .5-2.2.5-3.5 0-1.5-.2-2.9-.7-4.1a8.4 8.4 0 00-2.1-3.1c-1-.8-2-1.5-3.4-2-1.3-.4-2.8-.6-4.5-.6h-12.9v31h5V49.4h6.5l7 10.8z" />
+</svg>
\ No newline at end of file
diff --git a/packages/kyc-ui/src/assets/people.svg b/packages/kyc-ui/src/assets/people.svg
new file mode 100644
index 000000000..1dc878b81
--- /dev/null
+++ b/packages/kyc-ui/src/assets/people.svg
@@ -0,0 +1,3 @@
+<svg class="h-6 w-6 shrink-0 text-indigo-200 group-hover:text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
+</svg>
\ No newline at end of file
diff --git a/packages/kyc-ui/src/context/preferences.ts b/packages/kyc-ui/src/context/preferences.ts
new file mode 100644
index 000000000..3dc4294cb
--- /dev/null
+++ b/packages/kyc-ui/src/context/preferences.ts
@@ -0,0 +1,81 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022-2024 Taler Systems S.A.
+
+ GNU 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.
+
+ GNU 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
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import {
+  Codec,
+  TranslatedString,
+  buildCodecForObject,
+  codecForBoolean,
+} from "@gnu-taler/taler-util";
+import {
+  buildStorageKey,
+  useLocalStorage,
+  useTranslationContext,
+} from "@gnu-taler/web-util/browser";
+
+interface Preferences {
+  showDebugInfo: boolean;
+}
+
+export const codecForPreferences = (): Codec<Preferences> =>
+  buildCodecForObject<Preferences>()
+    .property("showDebugInfo", codecForBoolean())
+    .build("Preferences");
+
+const defaultPreferences: Preferences = {
+  showDebugInfo: false,
+};
+
+const PREFERENCES_KEY = buildStorageKey(
+  "kyc-preferences",
+  codecForPreferences(),
+);
+/**
+ * User preferences.
+ *
+ * @returns tuple of [state, update()]
+ */
+export function usePreferences(): [
+  Readonly<Preferences>,
+  <T extends keyof Preferences>(key: T, value: Preferences[T]) => void,
+] {
+  const { value, update } = useLocalStorage(
+    PREFERENCES_KEY,
+    defaultPreferences,
+  );
+
+  function updateField<T extends keyof Preferences>(k: T, v: Preferences[T]) {
+    const newValue = { ...value, [k]: v };
+    update(newValue);
+  }
+  return [value, updateField];
+}
+
+export function getAllBooleanPreferences(): Array<keyof Preferences> {
+  return [
+    "showDebugInfo",
+  ];
+}
+
+export function getLabelForPreferences(
+  k: keyof Preferences,
+  i18n: ReturnType<typeof useTranslationContext>["i18n"],
+): TranslatedString {
+  switch (k) {
+    case "showDebugInfo":
+      return i18n.str`Show debug info`;
+  }
+}
diff --git a/packages/kyc-ui/src/context/settings.ts b/packages/kyc-ui/src/context/settings.ts
new file mode 100644
index 000000000..1b4b6576d
--- /dev/null
+++ b/packages/kyc-ui/src/context/settings.ts
@@ -0,0 +1,44 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022-2024 Taler Systems S.A.
+
+ GNU 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.
+
+ GNU 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
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import { ComponentChildren, createContext, h, VNode } from "preact";
+import { useContext } from "preact/hooks";
+import { KycUiSettings } from "../settings.js";
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+export type Type = KycUiSettings;
+
+const initial: KycUiSettings = {};
+const Context = createContext<Type>(initial);
+
+export const useSettingsContext = (): Type => useContext(Context);
+
+export const SettingsProvider = ({
+  children,
+  value,
+}: {
+  value: KycUiSettings;
+  children: ComponentChildren;
+}): VNode => {
+  return h(Context.Provider, {
+    value,
+    children,
+  });
+};
diff --git a/packages/kyc-ui/src/declaration.d.ts b/packages/kyc-ui/src/declaration.d.ts
new file mode 100644
index 000000000..581cbcd07
--- /dev/null
+++ b/packages/kyc-ui/src/declaration.d.ts
@@ -0,0 +1,35 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022-2024 Taler Systems S.A.
+
+ GNU 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.
+
+ GNU 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
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+declare module "*.css" {
+  const mapping: Record<string, string>;
+  export default mapping;
+}
+declare module "*.svg" {
+  const content: string;
+  export default content;
+}
+declare module "*.jpeg" {
+  const content: string;
+  export default content;
+}
+declare module "*.png" {
+  const content: string;
+  export default content;
+}
+
+declare const __VERSION__: string;
+declare const __GIT_HASH__: string;
diff --git a/packages/kyc-ui/src/hooks/kyc.ts b/packages/kyc-ui/src/hooks/kyc.ts
new file mode 100644
index 000000000..564eef13b
--- /dev/null
+++ b/packages/kyc-ui/src/hooks/kyc.ts
@@ -0,0 +1,55 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022-2024 Taler Systems S.A.
+
+ GNU 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.
+
+ GNU 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
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+import {
+  TalerExchangeResultByMethod,
+  TalerHttpError
+} from "@gnu-taler/taler-util";
+import { useExchangeApiContext } from "@gnu-taler/web-util/browser";
+import _useSWR, { SWRHook, mutate } from "swr";
+import { SessionId } from "./session.js";
+const useSWR = _useSWR as unknown as SWRHook;
+
+export function revalidateKycInfo() {
+  return mutate(
+    (key) => Array.isArray(key) && key[key.length - 1] === "checkKycInfo",
+    undefined,
+    { revalidate: true },
+  );
+}
+
+export function useKycInfo(session: SessionId) {
+  const {
+    lib: { exchange: api },
+  } = useExchangeApiContext();
+
+  async function fetcher([s]: [SessionId]) {
+    return await api.checkKycInfo(s.accessToken, [], { timeout: 1000 });
+  }
+  const { data, error } = useSWR<
+    TalerExchangeResultByMethod<"checkKycInfo">,
+    TalerHttpError
+  >(!session ? undefined : [session, "checkKycInfo"], fetcher, {
+    revalidateIfStale: false,
+    errorRetryCount: 0,
+    errorRetryInterval: 1,
+    shouldRetryOnError: false,
+    keepPreviousData: true,
+  });
+
+  if (data) return data;
+  if (error) return error;
+  return undefined;
+}
diff --git a/packages/kyc-ui/src/hooks/session.ts b/packages/kyc-ui/src/hooks/session.ts
new file mode 100644
index 000000000..33ebed804
--- /dev/null
+++ b/packages/kyc-ui/src/hooks/session.ts
@@ -0,0 +1,65 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022-2024 Taler Systems S.A.
+
+ GNU 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.
+
+ GNU 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
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import {
+  AccessToken,
+  Codec,
+  buildCodecForObject
+} from "@gnu-taler/taler-util";
+import { buildStorageKey, useLocalStorage } from "@gnu-taler/web-util/browser";
+
+/**
+ * Has the information to reach and
+ * authenticate at the bank's backend.
+ */
+export type SessionId = {
+  accessToken: AccessToken;
+};
+
+
+export type SessionState = {
+};
+
+export const codecForSessionState = (): Codec<SessionState> =>
+  buildCodecForObject<SessionState>()
+//     .property("completedURL", codecOptional(codecForStringURL()))
+//     .property("lastAddress", codecOptional(codecForList(codecForLastAddress())))
+    .build("SessionState");
+
+export interface SessionStateHandler {
+  state: SessionState | undefined;
+  start(s: SessionId): void;
+}
+
+const SESSION_STATE_KEY = buildStorageKey(
+  "kyc-session",
+  codecForSessionState(),
+);
+
+/**
+ * Return getters and setters for
+ * login credentials and backend's
+ * base URL.
+ */
+export function useSessionState(): SessionStateHandler {
+  const { value: state, update } = useLocalStorage(SESSION_STATE_KEY);
+
+  return {
+    state,
+    start() {
+    },
+  };
+}
diff --git a/packages/kyc-ui/src/i18n/challenger-ui.pot b/packages/kyc-ui/src/i18n/challenger-ui.pot
new file mode 100644
index 000000000..494fbfb8f
--- /dev/null
+++ b/packages/kyc-ui/src/i18n/challenger-ui.pot
@@ -0,0 +1,199 @@
+# This file is part of GNU Taler
+# (C) 2022-2024 Taler Systems S.A.
+#
+# GNU 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.
+#
+# GNU 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
+# GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+#
+#, fuzzy
+msgid ""
+msgstr ""
+"Project-Id-Version: Kyc UI\n"
+"Report-Msgid-Bugs-To: taler@gnu.org\n"
+"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
+"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
+"Language-Team: LANGUAGE <LL@li.org>\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+#: src/pages/AnswerChallenge.tsx:55
+#, c-format
+msgid "Can't be empty"
+msgstr ""
+
+#: src/pages/AnswerChallenge.tsx:81
+#, c-format
+msgstr ""
+
+#: src/pages/AnswerChallenge.tsx:108
+#, c-format
+msgid "Invalid request"
+msgstr ""
+
+#: src/pages/AnswerChallenge.tsx:111
+#, c-format
+msgid "Invalid pin"
+msgstr ""
+
+#: src/pages/AnswerChallenge.tsx:142
+#, c-format
+msgid "Please enter the TAN you received to authenticate."
+msgstr ""
+
+#: src/pages/AnswerChallenge.tsx:147
+#, c-format
+msgid "A TAN was sent to your address &quot;%1$s&quot;."
+msgstr ""
+
+#: src/pages/AnswerChallenge.tsx:151
+#, c-format
+msgid ""
+"We recently already sent a TAN to your address &quot; %1$s&quot;. A new TAN will "
+"not be transmitted again before %2$s."
+msgstr ""
+
+#: src/pages/AnswerChallenge.tsx:161
+#, c-format
+msgid "You can try another PIN but just %1$s times more."
+msgstr ""
+
+#: src/pages/AnswerChallenge.tsx:181
+#, c-format
+msgid "TAN code"
+msgstr ""
+
+#: src/pages/AnswerChallenge.tsx:204
+#, c-format
+msgid "You have %1$s attempts left."
+msgstr ""
+
+#: src/pages/AnswerChallenge.tsx:217
+#, c-format
+msgid "Check"
+msgstr ""
+
+#: src/pages/AnswerChallenge.tsx:227
+#, c-format
+msgid "Send again"
+msgstr ""
+
+#: src/pages/AskChallenge.tsx:76
+#, c-format
+msgid "required"
+msgstr ""
+
+#: src/pages/AskChallenge.tsx:84
+#, c-format
+msgid "invalid email"
+msgstr ""
+
+#: src/pages/AskChallenge.tsx:86
+#, c-format
+msgid "emails don't match"
+msgstr ""
+
+#: src/pages/AskChallenge.tsx:130
+#, c-format
+msgid "Enter contact details"
+msgstr ""
+
+#: src/pages/AskChallenge.tsx:133
+#, c-format
+msgid ""
+"You will receive an email with a TAN code that must be provided on the next "
+"page."
+msgstr ""
+
+#: src/pages/AskChallenge.tsx:152
+#, c-format
+msgid "Email"
+msgstr ""
+
+#: src/pages/AskChallenge.tsx:180
+#, c-format
+msgid "Repeat email"
+msgstr ""
+
+#: src/pages/AskChallenge.tsx:198
+#, c-format
+msgid "You can change your email address another %1$s times."
+msgstr ""
+
+#: src/pages/AskChallenge.tsx:211
+#, c-format
+msgid "Send email"
+msgstr ""
+
+#: src/pages/AskChallenge.tsx:237
+#, c-format
+msgid "Bad request"
+msgstr ""
+
+#: src/pages/AskChallenge.tsx:238
+#, c-format
+msgid "Could not start the challenge, check configuration."
+msgstr ""
+
+#: src/pages/AskChallenge.tsx:246
+#, c-format
+msgid "Not found"
+msgstr ""
+
+#: src/pages/AskChallenge.tsx:247
+#, c-format
+msgid "Nonce not found"
+msgstr ""
+
+#: src/pages/AskChallenge.tsx:253
+#, c-format
+msgid "Not acceptable"
+msgstr ""
+
+#: src/pages/AskChallenge.tsx:254
+#, c-format
+msgid "Server has wrong template configuration"
+msgstr ""
+
+#: src/pages/AskChallenge.tsx:262
+#, c-format
+msgid "Internal error"
+msgstr ""
+
+#: src/pages/AskChallenge.tsx:263
+#, c-format
+msgid "Check logs"
+msgstr ""
+
+#: src/pages/NonceNotFound.tsx:33
+#, c-format
+msgid "The URL is wrong"
+msgstr ""
+
+#: src/pages/NonceNotFound.tsx:36
+#, c-format
+msgid "Maybe the validation check expired."
+msgstr ""
+
+#: src/pages/Setup.tsx:53
+#, c-format
+msgid "Client doesn't exist."
+msgstr ""
+
+#: src/pages/Setup.tsx:65
+#, c-format
+msgid "Setup new challenge with client ID: &quot;%1$s&quot;"
+msgstr ""
+
+#: src/pages/Setup.tsx:76
+#, c-format
+msgid "Start"
+msgstr ""
+
diff --git a/packages/kyc-ui/src/i18n/poheader b/packages/kyc-ui/src/i18n/poheader
new file mode 100644
index 000000000..ed65f25e2
--- /dev/null
+++ b/packages/kyc-ui/src/i18n/poheader
@@ -0,0 +1,26 @@
+# This file is part of GNU Taler
+# (C) 2022-2024 Taler Systems S.A.
+#
+# GNU 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.
+#
+# GNU 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
+# GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+#
+#, fuzzy
+msgid ""
+msgstr ""
+"Project-Id-Version: Kyc UI\n"
+"Report-Msgid-Bugs-To: taler@gnu.org\n"
+"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
+"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
+"Language-Team: LANGUAGE <LL@li.org>\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
diff --git a/packages/kyc-ui/src/i18n/strings.ts b/packages/kyc-ui/src/i18n/strings.ts
new file mode 100644
index 000000000..ea13fed2e
--- /dev/null
+++ b/packages/kyc-ui/src/i18n/strings.ts
@@ -0,0 +1,90 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022-2024 Taler Systems S.A.
+
+ GNU 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.
+
+ GNU 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
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+export interface StringsType {
+  // X-Domain or 'messages'
+  domain: string;
+  lang: string;
+  completeness: number;
+  plural_forms: string;
+  locale_data: {
+    messages: Record<string, unknown>;
+  };
+}
+export const strings: Record<string, StringsType> = {};
+
+strings["it"] = {
+  locale_data: {
+    messages: {
+      "": {
+        domain: "messages",
+        plural_forms: "nplurals=2; plural=n != 1;",
+        lang: "it",
+      },
+    }
+  },
+  domain: "messages",
+  plural_forms: "nplurals=2; plural=n != 1;",
+  lang: "it",
+  completeness: 14,
+};
+
+strings["es"] = {
+  locale_data: {
+    messages: {
+      "": {
+        domain: "messages",
+        plural_forms: "nplurals=2; plural=n != 1;",
+        lang: "es",
+      },
+    }
+  },
+  domain: "messages",
+  plural_forms: "nplurals=2; plural=n != 1;",
+  lang: "es",
+  completeness: 100,
+};
+
+strings["en"] = {
+  locale_data: {
+    messages: {
+      "": {
+        domain: "messages",
+        plural_forms: "nplurals=2; plural=n != 1;",
+        lang: "en",
+      },
+    }
+  },
+  domain: "messages",
+  plural_forms: "nplurals=2; plural=(n != 1);",
+  lang: "en",
+  completeness: 100,
+};
+
+strings["de"] = {
+  locale_data: {
+    messages: {
+      "": {
+        domain: "messages",
+        plural_forms: "nplurals=2; plural=n != 1;",
+        lang: "de",
+      },
+    }
+  },
+  domain: "messages",
+  plural_forms: "nplurals=2; plural=n != 1;",
+  lang: "de",
+  completeness: 4,
+};
diff --git a/packages/kyc-ui/src/index.html b/packages/kyc-ui/src/index.html
new file mode 100644
index 000000000..cbbf6addf
--- /dev/null
+++ b/packages/kyc-ui/src/index.html
@@ -0,0 +1,41 @@
+<!--
+ This file is part of GNU Taler
+ (C) 2021--2022 Taler Systems S.A.
+
+ GNU 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.
+
+ GNU 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
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+
+ @author Sebastian Javier Marchano
+-->
+<!doctype html>
+<html lang="en" class="h-full bg-gray-100">
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <meta name="taler-support" content="uri,api" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <link
+      rel="icon"
+      href="data:;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAABILAAASCwAAAAAAAAAAAAD///////////////////////////////////////////////////////////////////////////////////////////////////7//v38//78/P/+/fz//vz7///+/v/+/f3//vz7///+/v/+/fz//v38///////////////////////+/v3///7+/////////////////////////////////////////////////////////v3//v79///////+/v3///////r28v/ct5//06SG/9Gffv/Xqo7/7N/V/9e2nf/bsJb/6uDW/9Sskf/euKH/+/j2///////+/v3//////+3azv+/eE3/2rWd/9Kkhv/Vr5T/48i2/8J+VP/Qn3//3ryn/795Tf/WrpP/2LCW/8B6T//w4Nb///////Pn4P+/d0v/9u3n/+7d0v/EhV7//v///+HDr//fxLD/zph2/+TJt//8/Pv/woBX//Lm3f/y5dz/v3hN//bu6f/JjGn/4sW0///////Df1j/8OLZ//v6+P+/elH/+vj1//jy7f+/elL//////+zYzP/Eg13//////967p//MlHT/wn5X///////v4Nb/yY1s///////jw7H/06KG////////////z5t9/+fNvf//////x4pn//Pp4v/8+vn/w39X/8WEX///////5s/A/9CbfP//////27Oc/9y2n////////////9itlf/gu6f//////86Vdf/r2Mz//////8SCXP/Df1j//////+7d0v/KkG7//////+HBrf/VpYr////////////RnoH/5sq6///////Ii2n/8ubf//39/P/Cf1j/xohk/+bNvv//////wn5W//Tq4//58/D/wHxV//7+/f/59fH/v3xU//39/P/w4Nf/xIFb///////hw7H/yo9t/+/f1f/AeU3/+/n2/+nSxP/FhmD//////9qzm//Upon/4MSx/96+qf//////xINc/+3bz//48e3/v3hN//Pn3///////6M+//752S//gw6//06aK/8J+VP/kzLr/zZd1/8OCWv/q18r/17KZ/9Ooi//fv6r/v3dK/+vWyP///////v39///////27un/1aeK/9Opjv/m1cf/1KCC/9a0nP/n08T/0Jx8/82YdP/QnHz/16yR//jx7P///////v39///////+/f3///7+///////+//7//v7+///////+/v7//v/+/////////////////////////v7//v79///////////////////+/v/+/Pv//v39///+/v/+/Pv///7+//7+/f/+/Pv//v39//79/P/+/Pv///7+////////////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="
+    />
+    <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon" />
+    <title>KYC</title>
+    <!-- Entry point for the SPA. -->
+    <script type="module" src="index.js"></script>
+    <link rel="stylesheet" href="index.css" />
+  </head>
+
+  <body class="h-full">
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/packages/kyc-ui/src/index.tsx b/packages/kyc-ui/src/index.tsx
new file mode 100644
index 000000000..f559288a3
--- /dev/null
+++ b/packages/kyc-ui/src/index.tsx
@@ -0,0 +1,27 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022-2024 Taler Systems S.A.
+
+ GNU 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.
+
+ GNU 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
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import { App } from "./app.js";
+import { h, render } from "preact";
+import "./scss/main.css";
+
+const app = document.getElementById("app");
+
+if (app) {
+  render(<App />, app);
+} else {
+  console.error("HTML element with id 'app' not found.");
+}
diff --git a/packages/kyc-ui/src/main.js b/packages/kyc-ui/src/main.js
new file mode 100644
index 000000000..3272bd0bb
--- /dev/null
+++ b/packages/kyc-ui/src/main.js
@@ -0,0 +1,2 @@
+// intentionally empty
+import "./scss/main.css";
\ No newline at end of file
diff --git a/packages/kyc-ui/src/pages/CallengeCompleted.tsx b/packages/kyc-ui/src/pages/CallengeCompleted.tsx
new file mode 100644
index 000000000..c17ec540d
--- /dev/null
+++ b/packages/kyc-ui/src/pages/CallengeCompleted.tsx
@@ -0,0 +1,37 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022-2024 Taler Systems S.A.
+
+ GNU 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.
+
+ GNU 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
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+import { Attention, useTranslationContext } from "@gnu-taler/web-util/browser";
+import { Fragment, VNode, h } from "preact";
+import { useSessionState } from "../hooks/session.js";
+
+export function CallengeCompleted(): VNode {
+  const { state } = useSessionState();
+
+  const { i18n } = useTranslationContext();
+  
+  return (
+    <div class="m-4">
+      <Attention
+        title={i18n.str`Kyc completed`}
+        type="success"
+      >
+        <i18n.Translate>
+          You will be redirected to nowhere
+        </i18n.Translate>
+      </Attention>
+    </div>
+  );
+}
diff --git a/packages/kyc-ui/src/pages/Frame.tsx b/packages/kyc-ui/src/pages/Frame.tsx
new file mode 100644
index 000000000..a45fd129b
--- /dev/null
+++ b/packages/kyc-ui/src/pages/Frame.tsx
@@ -0,0 +1,132 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022-2024 Taler Systems S.A.
+
+ GNU 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.
+
+ GNU 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
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import { TranslatedString } from "@gnu-taler/taler-util";
+import {
+  Footer,
+  Header,
+  ToastBanner,
+  notifyError,
+  notifyException,
+  useTranslationContext,
+} from "@gnu-taler/web-util/browser";
+import { ComponentChildren, Fragment, VNode, h } from "preact";
+import { useEffect, useErrorBoundary } from "preact/hooks";
+import {
+  getAllBooleanPreferences,
+  getLabelForPreferences,
+  usePreferences,
+} from "../context/preferences.js";
+import { useSettingsContext } from "../context/settings.js";
+
+const GIT_HASH = typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ : undefined;
+const VERSION = typeof __VERSION__ !== "undefined" ? __VERSION__ : undefined;
+
+export function Frame({ children }: { children: ComponentChildren }): VNode {
+  const settings = useSettingsContext();
+  const [preferences, updatePreferences] = usePreferences();
+
+  const [error, resetError] = useErrorBoundary();
+  const { i18n } = useTranslationContext();
+  useEffect(() => {
+    if (error) {
+      if (error instanceof Error) {
+        console.log("Internal error, please report", error);
+        notifyException(i18n.str`Internal error, please report.`, error);
+      } else {
+        console.log("Internal error, please report", error);
+        notifyError(
+          i18n.str`Internal error, please report.`,
+          String(error) as TranslatedString,
+        );
+      }
+      resetError();
+    }
+  }, [error]);
+
+  return (
+    <div
+      class="min-h-full flex flex-col m-0 bg-slate-200"
+      style="min-height: 100vh;"
+    >
+      <Header
+        title="KYC"
+        onLogout={undefined}
+        iconLinkURL="#"
+        sites={[]}
+        supportedLangs={["en"]}
+      >
+        <li>
+          <div class="text-xs font-semibold leading-6 text-gray-400">
+            <i18n.Translate>Preferences</i18n.Translate>
+          </div>
+          <ul role="list" class="space-y-4">
+            {getAllBooleanPreferences().map((set) => {
+              const isOn: boolean = !!preferences[set];
+              return (
+                <li key={set} class="pl-2">
+                  <div class="flex items-center justify-between">
+                    <span class="flex flex-grow flex-col">
+                      <span
+                        class="text-sm text-black font-medium leading-6 "
+                        id="availability-label"
+                      >
+                        {getLabelForPreferences(set, i18n)}
+                      </span>
+                    </span>
+                    <button
+                      type="button"
+                      name={`${set} switch`}
+                      data-enabled={isOn}
+                      class="bg-indigo-600 data-[enabled=false]:bg-gray-200 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
+                      role="switch"
+                      aria-checked="false"
+                      aria-labelledby="availability-label"
+                      aria-describedby="availability-description"
+                      onClick={() => {
+                        updatePreferences(set, !isOn);
+                      }}
+                    >
+                      <span
+                        aria-hidden="true"
+                        data-enabled={isOn}
+                        class="translate-x-5 data-[enabled=false]:translate-x-0 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+                      ></span>
+                    </button>
+                  </div>
+                </li>
+              );
+            })}
+          </ul>
+        </li>
+      </Header>
+
+      <div class="fixed z-20 top-14 w-full">
+        <div class="mx-auto w-4/5">
+          <ToastBanner />
+        </div>
+      </div>
+
+      <main class="flex-1">{children}</main>
+
+      <Footer
+        testingUrlKey="kyc-base-url"
+        GIT_HASH={GIT_HASH}
+        VERSION={VERSION}
+      />
+    </div>
+  );
+}
diff --git a/packages/kyc-ui/src/pages/MissingParams.tsx b/packages/kyc-ui/src/pages/MissingParams.tsx
new file mode 100644
index 000000000..5eb1e434e
--- /dev/null
+++ b/packages/kyc-ui/src/pages/MissingParams.tsx
@@ -0,0 +1,22 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022-2024 Taler Systems S.A.
+
+ GNU 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.
+
+ GNU 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
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+import { VNode, h } from "preact";
+
+export function MissingParams() :VNode {
+  return <div>
+    missing params: {window.location.href}
+  </div>
+}
\ No newline at end of file
diff --git a/packages/kyc-ui/src/pages/NonceNotFound.tsx b/packages/kyc-ui/src/pages/NonceNotFound.tsx
new file mode 100644
index 000000000..16b3d90ef
--- /dev/null
+++ b/packages/kyc-ui/src/pages/NonceNotFound.tsx
@@ -0,0 +1,42 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022-2024 Taler Systems S.A.
+
+ GNU 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.
+
+ GNU 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
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+import {
+  useTranslationContext
+} from "@gnu-taler/web-util/browser";
+import { Fragment, VNode, h } from "preact";
+
+type Form = {
+  email: string;
+};
+
+export function NonceNotFound(): VNode {
+  const { i18n } = useTranslationContext();
+
+  return (
+    <Fragment>
+      <div class="isolate bg-white px-6 py-12">
+        <div class="mx-auto max-w-2xl text-center">
+          <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+            <i18n.Translate>The URL is wrong</i18n.Translate>
+          </h2>
+          <p class="mt-2 text-lg leading-8 text-gray-600">
+            <i18n.Translate>Maybe the validation check expired.</i18n.Translate>
+          </p>
+        </div>
+      </div>
+    </Fragment>
+  );
+}
diff --git a/packages/kyc-ui/src/pages/Start.tsx b/packages/kyc-ui/src/pages/Start.tsx
new file mode 100644
index 000000000..2b97641e0
--- /dev/null
+++ b/packages/kyc-ui/src/pages/Start.tsx
@@ -0,0 +1,213 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022-2024 Taler Systems S.A.
+
+ GNU 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.
+
+ GNU 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
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+import {
+  HttpStatusCode,
+  createRFC8959AccessTokenEncoded,
+  encodeCrock,
+  randomBytes
+} from "@gnu-taler/taler-util";
+import {
+  Button,
+  LocalNotificationBanner,
+  ShowInputErrorLabel,
+  useExchangeApiContext,
+  useLocalNotificationHandler,
+  useTranslationContext,
+} from "@gnu-taler/web-util/browser";
+import { Fragment, VNode, h } from "preact";
+import { useState } from "preact/hooks";
+import { safeToURL } from "../Routing.js";
+import { useSessionState } from "../hooks/session.js";
+
+type Props = {
+  clientId: string;
+  secret: string | undefined;
+  redirectURL: URL | undefined;
+  onCreated: () => void;
+  focus?: boolean;
+};
+export function Start({
+  clientId,
+  secret,
+  redirectURL,
+  focus,
+  onCreated,
+}: Props): VNode {
+  const { i18n } = useTranslationContext();
+  const [notification, withErrorHandler] = useLocalNotificationHandler();
+  const { lib } = useExchangeApiContext();
+  const { start } = useSessionState();
+  const [password, setPassword] = useState<string | undefined>(secret);
+  const [url, setUrl] = useState<string | undefined>(redirectURL?.href);
+
+  const errors = undefinedIfEmpty({
+    password: !password ? i18n.str`required` : undefined,
+    url: !url
+      ? i18n.str`required`
+      : !safeToURL(url)
+        ? i18n.str`invalid format`
+        : undefined,
+  });
+
+  const onStart =
+    !!errors || password === undefined || url === undefined
+      ? undefined
+      : withErrorHandler(
+          async () => {
+            return {
+              type: "ok",
+              body: {},
+            }
+            // return lib.exchange.uploadKycForm(
+            //   "clientId",
+            //   createRFC8959AccessTokenEncoded(password),
+            // );
+          },
+          (ok) => {
+            // start({
+            //   nonce: ok.body.nonce,
+            //   clientId,
+            //   redirectURL: url,
+            //   state: encodeCrock(randomBytes(32)),
+            // });
+
+            onCreated();
+          },
+          // () => {
+          //   // switch (fail.case) {
+          //   //   case HttpStatusCode.NotFound:
+          //   //     return i18n.str`Client doesn't exist.`;
+          //   // }
+          // },
+        );
+
+  return (
+    <Fragment>
+      <LocalNotificationBanner notification={notification} />
+
+      <div class="isolate bg-white px-6 py-12">
+        <div class="mx-auto max-w-2xl text-center">
+          <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
+            <i18n.Translate>
+              Setup new challenge with client ID: &quot;{clientId}&quot;
+            </i18n.Translate>
+          </h2>
+        </div>
+
+        <form
+          method="POST"
+          class="mx-auto mt-4 max-w-xl sm:mt-20"
+          onSubmit={(e) => {
+            e.preventDefault();
+          }}
+        >
+          <div class="sm:col-span-2">
+            <label
+              for="email"
+              class="block text-sm font-semibold leading-6 text-gray-900"
+            >
+              <i18n.Translate>Password</i18n.Translate>
+            </label>
+            <div class="mt-2.5">
+              <input
+                type="password"
+                name="password"
+                id="password"
+                ref={focus ? doAutoFocus : undefined}
+                maxLength={512}
+                autocomplete="password"
+                value={password}
+                onChange={(e) => {
+                  setPassword(e.currentTarget.value);
+                }}
+                readOnly={secret !== undefined}
+                class="block w-full read-only:bg-slate-200 rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+              />
+              <ShowInputErrorLabel
+                message={errors?.password}
+                isDirty={password !== undefined}
+              />
+            </div>
+          </div>
+
+          <div class="sm:col-span-2">
+            <label
+              for="email"
+              class="block text-sm font-semibold leading-6 text-gray-900"
+            >
+              <i18n.Translate>Redirect URL</i18n.Translate>
+            </label>
+            <div class="mt-2.5">
+              <input
+                type="text"
+                name="redirect_url"
+                id="redirect_url"
+                maxLength={512}
+                autocomplete="redirect_url"
+                value={url}
+                onChange={(e) => {
+                  setUrl(e.currentTarget.value);
+                }}
+                readOnly={redirectURL !== undefined}
+                class="block w-full read-only:bg-slate-200 rounded-md border-0 px-3.5 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+              />
+              <ShowInputErrorLabel
+                message={errors?.url}
+                isDirty={url !== undefined}
+              />
+            </div>
+          </div>
+        </form>
+        <div class="mt-10">
+          <Button
+            type="submit"
+            // disabled={!onStart}
+            class="block w-full disabled:bg-gray-300 rounded-md bg-indigo-600 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+            handler={onStart}
+          >
+            <i18n.Translate>Start</i18n.Translate>
+          </Button>
+        </div>
+      </div>
+    </Fragment>
+  );
+}
+
+
+/**
+ * Show the element when the load ended
+ * @param element
+ */
+export function doAutoFocus(element: HTMLElement | null): void {
+  if (element) {
+    setTimeout(() => {
+      element.focus({ preventScroll: true });
+      element.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+        inline: "center",
+      });
+    }, 100);
+  }
+}
+
+export function undefinedIfEmpty<T extends object>(obj: T): T | undefined {
+  return Object.keys(obj).some(
+    (k) => (obj as Record<string, T>)[k] !== undefined,
+  )
+    ? obj
+    : undefined;
+}
diff --git a/packages/kyc-ui/src/scss/main.css b/packages/kyc-ui/src/scss/main.css
new file mode 100644
index 000000000..b5c61c956
--- /dev/null
+++ b/packages/kyc-ui/src/scss/main.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/packages/kyc-ui/src/settings.json b/packages/kyc-ui/src/settings.json
new file mode 100644
index 000000000..c43967a16
--- /dev/null
+++ b/packages/kyc-ui/src/settings.json
@@ -0,0 +1,3 @@
+{
+  "backendBaseURL": "http://exchange.taler.test:1180/"
+}
diff --git a/packages/kyc-ui/src/settings.ts b/packages/kyc-ui/src/settings.ts
new file mode 100644
index 000000000..7db986806
--- /dev/null
+++ b/packages/kyc-ui/src/settings.ts
@@ -0,0 +1,83 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022-2024 Taler Systems S.A.
+
+ GNU 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.
+
+ GNU 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
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+import {
+  Codec,
+  buildCodecForObject,
+  canonicalizeBaseUrl,
+  codecForString,
+  codecOptional
+} from "@gnu-taler/taler-util";
+
+export interface KycUiSettings {
+  // Where exchange backend is localted
+  // default: window.origin without "webui/"
+  backendBaseURL?: string;
+
+}
+
+/**
+ * Global settings for the bank UI.
+ */
+const defaultSettings: KycUiSettings = {
+  backendBaseURL: buildDefaultBackendBaseURL(),
+};
+
+const codecForKycUiSettings = (): Codec<KycUiSettings> =>
+  buildCodecForObject<KycUiSettings>()
+    .property("backendBaseURL", codecOptional(codecForString()))
+    .build("codecForKycUiSettings");
+
+function removeUndefineField<T extends object>(obj: T): T {
+  const keys = Object.keys(obj) as Array<keyof T>;
+  return keys.reduce((prev, cur) => {
+    if (typeof prev[cur] === "undefined") {
+      delete prev[cur];
+    }
+    return prev;
+  }, obj);
+}
+
+export function fetchSettings(listener: (s: KycUiSettings) => void): void {
+  fetch("./settings.json")
+    .then((resp) => resp.json())
+    .then((json) => codecForKycUiSettings().decode(json))
+    .then((result) =>
+      listener({
+        ...defaultSettings,
+        ...removeUndefineField(result),
+      }),
+    )
+    .catch((e) => {
+      console.log("failed to fetch settings", e);
+      listener(defaultSettings);
+    });
+}
+
+function buildDefaultBackendBaseURL(): string | undefined {
+  if (typeof window !== "undefined") {
+    const currentLocation = new URL(
+      window.location.pathname,
+      window.location.origin,
+    ).href;
+    /**
+     * By default, bank backend serves the html content
+     * from the /webui root.
+     */
+    return canonicalizeBaseUrl(currentLocation.replace("/webui", ""));
+  }
+  throw Error("No default URL");
+}
diff --git a/packages/kyc-ui/tailwind.config.js b/packages/kyc-ui/tailwind.config.js
new file mode 100644
index 000000000..d384690e2
--- /dev/null
+++ b/packages/kyc-ui/tailwind.config.js
@@ -0,0 +1,28 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022-2024 Taler Systems S.A.
+
+ GNU 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.
+
+ GNU 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
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+export default {
+  content: {
+    relative: true,
+    files: [
+      "./src/**/*.{html,tsx}",
+      "./node_modules/@gnu-taler/web-util/src/**/*.{html,tsx}"
+    ],
+  },
+  theme: {
+    extend: {},
+  },
+  plugins: [require("@tailwindcss/typography"), require("@tailwindcss/forms")],
+};
diff --git a/packages/kyc-ui/tsconfig.json b/packages/kyc-ui/tsconfig.json
new file mode 100644
index 000000000..9826fac07
--- /dev/null
+++ b/packages/kyc-ui/tsconfig.json
@@ -0,0 +1,46 @@
+{
+  "compilerOptions": {
+    /* Basic Options */
+    "target": "ES2020",
+    "module": "Node16",
+    "lib": ["DOM", "ES2020"],
+    "allowJs": true /* Allow javascript files to be compiled. */,
+    // "checkJs": true,                       /* Report errors in .js files. */
+    "jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
+    "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment",
+    "noEmit": true /* Do not emit outputs. */,
+    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
+    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+    // "isolatedModules": true,               /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+    /* Strict Type-Checking Options */
+    "strict": true /* Enable all strict type-checking options. */,
+    "noImplicitAny": true /* Raise error on expressions and declarations with an implied 'any' type. */,
+    /* Additional Checks */
+    // "noUnusedLocals": true,                /* Report errors on unused locals. */
+    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
+    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+    // "noFallthroughCasesInSwitch": true,    /* Report errors for fallthrough cases in switch statement. */
+    /* Module Resolution Options */
+    "moduleResolution": "Node16" /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */,
+    "esModuleInterop": true /* */,
+    // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
+    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+    // "typeRoots": [],                       /* List of folders to include type definitions from. */
+    // "types": [],                           /* Type declaration files to be included in compilation. */
+    "allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
+    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+    /* Source Map Options */
+    // "sourceRoot": "./",                    /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    // "mapRoot": "./",                       /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+    /* Experimental Options */
+    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
+    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+    /* Advanced Options */
+    "skipLibCheck": true /* Skip type checking of declaration files. */
+  },
+  "include": ["src/**/*"]
+}