tmp

2023-05-15 18:38:26 +01:00 · 2023-05-15 18:38:26 +01:00 · 6ca55309e9
parent 167f1c5e65
commit 6ca55309e9
22 changed files with 2933 additions and 3802 deletions
--- a/packages/app/.babelrc
+++ b/packages/app/.babelrc
@ -1,3 +0,0 @@
-{
-  "plugins": [["formatjs"]]
-}
--- a/packages/app/.eslintrc.cjs
+++ b/packages/app/.eslintrc.cjs
@ -3,11 +3,11 @@ module.exports = {
  parser: "@typescript-eslint/parser",
  plugins: ["@typescript-eslint"],
  root: true,
-  ignorePatterns: ["build/", "*.test.ts"],
+  ignorePatterns: ["build/", "*.test.ts", "*.js"],
  env: {
    browser: true,
    worker: true,
    commonjs: true,
-    node: true,
+    node: false,
  },
 };
--- a/packages/app/babel.config.json
+++ b/packages/app/babel.config.json
@ -0,0 +1,11 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    [
+      "formatjs"
+    ]
+  ]
+}
--- a/packages/app/config-overrides.js
+++ b/packages/app/config-overrides.js
@ -1,4 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const { useBabelRc, override } = require("customize-cra");
-
-module.exports = override(useBabelRc());
--- a/packages/app/custom.d.ts
+++ b/packages/app/custom.d.ts
--- a/packages/app/package.json
+++ b/packages/app/package.json
@ -52,10 +52,9 @@
    "workbox-streams": "^6.4.2"
  },
  "scripts": {
-    "start": "react-app-rewired start",
-    "build": "react-app-rewired build",
-    "test": "react-app-rewired test",
-    "eject": "react-scripts eject",
+    "start": "webpack serve",
+    "build": "webpack --mode=production",
+    "test": "",
    "intl-extract": "formatjs extract 'src/**/*.ts*' --ignore='**/*.d.ts' --out-file src/lang.json --flatten true",
    "intl-compile": "formatjs compile src/lang.json --out-file src/translations/en.json",
    "format": "prettier --write .",
@ -83,22 +82,37 @@
  },
  "devDependencies": {
    "@babel/plugin-syntax-import-assertions": "^7.20.0",
+    "@babel/preset-env": "^7.21.5",
+    "@babel/preset-react": "^7.18.6",
    "@formatjs/cli": "^6.0.1",
+    "@formatjs/ts-transformer": "^3.13.1",
    "@types/jest": "^29.2.5",
    "@types/node": "^18.11.18",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.10",
    "@types/webscopeio__react-textarea-autocomplete": "^4.7.2",
    "@types/webtorrent": "^0.109.3",
+    "@webpack-cli/generators": "^3.0.4",
    "@webscopeio/react-textarea-autocomplete": "^4.9.2",
-    "babel-plugin-formatjs": "^10.3.36",
+    "babel-loader": "^9.1.2",
+    "babel-plugin-formatjs": "^10.5.1",
+    "css-loader": "^6.7.3",
+    "css-minimizer-webpack-plugin": "^5.0.0",
    "customize-cra": "^1.0.0",
+    "eslint-plugin-formatjs": "^4.10.1",
+    "eslint-webpack-plugin": "^4.0.1",
+    "html-webpack-plugin": "^5.5.1",
    "husky": ">=6",
    "lint-staged": ">=10",
+    "mini-css-extract-plugin": "^2.7.5",
    "prettier": "2.8.3",
-    "react-app-rewired": "^2.2.1",
-    "react-scripts": "5.0.1",
-    "typescript": "^4.9.4"
+    "ts-loader": "^9.4.2",
+    "typescript": "^5.0.4",
+    "webpack": "^5.82.1",
+    "webpack-bundle-analyzer": "^4.8.0",
+    "webpack-cli": "^5.1.1",
+    "webpack-dev-server": "^4.15.0",
+    "workbox-webpack-plugin": "^6.5.4"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx,css,md}": "prettier --write"
--- a/packages/app/public/icons.svg
+++ b/packages/app/public/icons.svg
@ -157,6 +157,18 @@
    <symbol id="piggy-bank" viewBox="0 0 22 20" fill="none">
      <path d="M3.99993 11C3.99993 12.6484 4.66466 14.1415 5.74067 15.226C5.84445 15.3305 5.89633 15.3828 5.92696 15.4331C5.95619 15.4811 5.9732 15.5224 5.98625 15.5771C5.99993 15.6343 5.99993 15.6995 5.99993 15.8298V18.2C5.99993 18.48 5.99993 18.62 6.05443 18.727C6.10236 18.8211 6.17885 18.8976 6.27293 18.9455C6.37989 19 6.5199 19 6.79993 19H8.69993C8.97996 19 9.11997 19 9.22693 18.9455C9.32101 18.8976 9.3975 18.8211 9.44543 18.727C9.49993 18.62 9.49993 18.48 9.49993 18.2V17.8C9.49993 17.52 9.49993 17.38 9.55443 17.273C9.60236 17.1789 9.67885 17.1024 9.77293 17.0545C9.87989 17 10.0199 17 10.2999 17H11.6999C11.98 17 12.12 17 12.2269 17.0545C12.321 17.1024 12.3975 17.1789 12.4454 17.273C12.4999 17.38 12.4999 17.52 12.4999 17.8V18.2C12.4999 18.48 12.4999 18.62 12.5544 18.727C12.6024 18.8211 12.6789 18.8976 12.7729 18.9455C12.8799 19 13.0199 19 13.2999 19H15.2C15.48 19 15.62 19 15.727 18.9455C15.8211 18.8976 15.8976 18.8211 15.9455 18.727C16 18.62 16 18.48 16 18.2V17.2243C16 17.0223 16 16.9212 16.0288 16.8401C16.0563 16.7624 16.0911 16.708 16.15 16.6502C16.2114 16.59 16.3155 16.5417 16.5237 16.445C17.5059 15.989 18.344 15.2751 18.9511 14.3902C19.0579 14.2346 19.1112 14.1568 19.1683 14.1108C19.2228 14.0668 19.2717 14.0411 19.3387 14.021C19.4089 14 19.4922 14 19.6587 14H20.2C20.48 14 20.62 14 20.727 13.9455C20.8211 13.8976 20.8976 13.8211 20.9455 13.727C21 13.62 21 13.48 21 13.2V9.78575C21 9.51916 21 9.38586 20.9505 9.28303C20.9013 9.181 20.819 9.09867 20.717 9.04953C20.6141 9 20.4808 9 20.2143 9C20.0213 9 19.9248 9 19.8471 8.9738C19.7633 8.94556 19.7045 8.90798 19.6437 8.84377C19.5874 8.78422 19.5413 8.68464 19.4493 8.48547C19.1538 7.84622 18.7492 7.26777 18.2593 6.77404C18.1555 6.66945 18.1036 6.61716 18.073 6.56687C18.0437 6.51889 18.0267 6.47759 18.0137 6.42294C18 6.36567 18 6.30051 18 6.17018V5.06058C18 4.70053 18 4.52051 17.925 4.39951C17.8593 4.29351 17.7564 4.21588 17.6365 4.18184C17.4995 4.14299 17.3264 4.19245 16.9802 4.29136L14.6077 4.96922C14.5673 4.98074 14.5472 4.9865 14.5267 4.99054C14.5085 4.99414 14.4901 4.99671 14.4716 4.99826C14.4508 5 14.4298 5 14.3879 5H13.959M3.99993 11C3.99993 8.69594 5.29864 6.6952 7.20397 5.6899M3.99993 11H3C1.89543 11 1 10.1046 1 9C1 8.25972 1.4022 7.61337 2 7.26756M14 4.5C14 6.433 12.433 8 10.5 8C8.567 8 7 6.433 7 4.5C7 2.567 8.567 1 10.5 1C12.433 1 14 2.567 14 4.5Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </symbol>
+    <symbol id="clock" viewBox="0 0 22 22" fill="none">
+      <path d="M11 5V11L15 13M21 11C21 16.5228 16.5228 21 11 21C5.47715 21 1 16.5228 1 11C1 5.47715 5.47715 1 11 1C16.5228 1 21 5.47715 21 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    </symbol>
+    <symbol id="book-closed" viewBox="0 0 18 22" fill="none">
+      <path d="M17 18V15H4C2.34315 15 1 16.3431 1 18M5.8 21H13.8C14.9201 21 15.4802 21 15.908 20.782C16.2843 20.5903 16.5903 20.2843 16.782 19.908C17 19.4802 17 18.9201 17 17.8V4.2C17 3.07989 17 2.51984 16.782 2.09202C16.5903 1.71569 16.2843 1.40973 15.908 1.21799C15.4802 1 14.9201 1 13.8 1H5.8C4.11984 1 3.27976 1 2.63803 1.32698C2.07354 1.6146 1.6146 2.07354 1.32698 2.63803C1 3.27976 1 4.11984 1 5.8V16.2C1 17.8802 1 18.7202 1.32698 19.362C1.6146 19.9265 2.07354 20.3854 2.63803 20.673C3.27976 21 4.11984 21 5.8 21Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    </symbol>
+    <symbol id="shopping-bag" viewBox="0 0 22 22" fill="none">
+      <path d="M15.0004 8V5C15.0004 2.79086 13.2095 1 11.0004 1C8.79123 1 7.00037 2.79086 7.00037 5V8M2.59237 9.35196L1.99237 15.752C1.82178 17.5717 1.73648 18.4815 2.03842 19.1843C2.30367 19.8016 2.76849 20.3121 3.35839 20.6338C4.0299 21 4.94374 21 6.77142 21H15.2293C17.057 21 17.9708 21 18.6423 20.6338C19.2322 20.3121 19.6971 19.8016 19.9623 19.1843C20.2643 18.4815 20.179 17.5717 20.0084 15.752L19.4084 9.35197C19.2643 7.81535 19.1923 7.04704 18.8467 6.46616C18.5424 5.95458 18.0927 5.54511 17.555 5.28984C16.9444 5 16.1727 5 14.6293 5L7.37142 5C5.82806 5 5.05638 5 4.44579 5.28984C3.90803 5.54511 3.45838 5.95458 3.15403 6.46616C2.80846 7.04704 2.73643 7.81534 2.59237 9.35196Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    </symbol>
+    <symbol id="wifi" viewBox="0 0 24 18" fill="none">
+      <path d="M12 16.5H12.01M22.8064 5.70076C19.9595 3.09199 16.1656 1.5 11.9999 1.5C7.83414 1.5 4.04023 3.09199 1.19336 5.70076M4.73193 9.24297C6.67006 7.53566 9.21407 6.5 12 6.5C14.7859 6.5 17.3299 7.53566 19.268 9.24297M15.6983 12.7751C14.6792 11.9763 13.3952 11.5 11.9999 11.5C10.5835 11.5 9.28172 11.9908 8.25537 12.8116" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+    </symbol>

  </defs>
 </svg>
--- a/packages/app/public/index.html
+++ b/packages/app/public/index.html
@ -2,7 +2,6 @@
 <html lang="en">
  <head>
    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Fast nostr web ui" />
@ -13,8 +12,8 @@
    <link rel="preconnect" href="https://imgproxy.snort.social" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/nostrich_512.png" />
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="apple-touch-icon" href="/nostrich_512.png" />
+    <link rel="manifest" href="/manifest.json" />
    <title>snort.social - Nostr interface</title>
  </head>

--- a/packages/app/src/Element/NoteToSelf.tsx
+++ b/packages/app/src/Element/NoteToSelf.tsx
@ -1,11 +1,10 @@
 import "./NoteToSelf.css";
 import { Link, useNavigate } from "react-router-dom";
 import { FormattedMessage } from "react-intl";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faBook, faCertificate } from "@fortawesome/free-solid-svg-icons";
 import { profileLink } from "Util";

 import messages from "./messages";
+import Icon from "Icons/Icon";

 export interface NoteToSelfProps {
  pubkey: string;
@ -17,7 +16,7 @@ export interface NoteToSelfProps {
 function NoteLabel() {
  return (
    <div>
-      <FormattedMessage {...messages.NoteToSelf} /> <FontAwesomeIcon icon={faCertificate} size="xs" />
+      <FormattedMessage {...messages.NoteToSelf} /> <Icon name="book-closed" />
    </div>
  );
 }
@ -35,7 +34,7 @@ export default function NoteToSelf({ pubkey, clickable, className, link }: NoteT
    <div className={`nts${className ? ` ${className}` : ""}`}>
      <div className="avatar-wrapper">
        <div className={`avatar${clickable ? " clickable" : ""}`}>
-          <FontAwesomeIcon onClick={clickLink} className="note-to-self" icon={faBook} size="2xl" />
+          <Icon onClick={clickLink} className="note-to-self" name="book-closed" size={48} />
        </div>
      </div>
      <div className="f-grow">
--- a/packages/app/src/Element/Relay.tsx
+++ b/packages/app/src/Element/Relay.tsx
@ -1,33 +1,23 @@
 import "./Relay.css";
 import { useMemo } from "react";
-import { useIntl, FormattedMessage } from "react-intl";
+import { FormattedMessage } from "react-intl";
 import { useNavigate } from "react-router-dom";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faPlug,
-  faSquareCheck,
-  faSquareXmark,
-  faWifi,
-  faPlugCircleXmark,
-  faGear,
-  faWarning,
-} from "@fortawesome/free-solid-svg-icons";
 import { RelaySettings } from "@snort/nostr";

 import useRelayState from "Feed/RelayState";
 import { System } from "System";
 import { getRelayName, unixNowMs, unwrap } from "Util";
-
-import messages from "./messages";
 import useLogin from "Hooks/useLogin";
 import { setRelays } from "Login";
+import Icon from "Icons/Icon";
+
+import messages from "./messages";

 export interface RelayProps {
  addr: string;
 }

 export default function Relay(props: RelayProps) {
-  const { formatMessage } = useIntl();
  const navigate = useNavigate();
  const login = useLogin();
  const relaySettings = unwrap(login.relays.item[props.addr] ?? System.Sockets.get(props.addr)?.Settings ?? {});
@ -50,7 +40,7 @@ export default function Relay(props: RelayProps) {
    <>
      <div className={`relay w-max`}>
        <div className={`flex ${state?.connected ? "bg-success" : "bg-error"}`}>
-          <FontAwesomeIcon icon={faPlug} />
+          <Icon name="wifi" />
        </div>
        <div className="f-grow f-col">
          <div className="flex mb10">
@ -65,7 +55,7 @@ export default function Relay(props: RelayProps) {
                    read: relaySettings.read,
                  })
                }>
-                <FontAwesomeIcon icon={relaySettings.write ? faSquareCheck : faSquareXmark} />
+                <Icon name={relaySettings.write ? "check" : "close"} size={12} />
              </span>
            </div>
            <div className="f-1">
@ -78,28 +68,15 @@ export default function Relay(props: RelayProps) {
                    read: !relaySettings.read,
                  })
                }>
-                <FontAwesomeIcon icon={relaySettings.read ? faSquareCheck : faSquareXmark} />
+                <Icon name={relaySettings.read ? "check" : "close"} size={12} />
              </span>
            </div>
          </div>
          <div className="flex">
-            <div className="f-grow">
-              <FontAwesomeIcon icon={faWifi} className="mr5 ml5" />
-              {latency > 2000
-                ? formatMessage(messages.Seconds, {
-                    n: (latency / 1000).toFixed(0),
-                  })
-                : formatMessage(messages.Milliseconds, {
-                    n: latency.toLocaleString(),
-                  })}
-              &nbsp;
-              <FontAwesomeIcon icon={faPlugCircleXmark} className="mr5 ml5" /> {state?.disconnects}
-              <FontAwesomeIcon icon={faWarning} className="mr5 ml5" />
-              {state?.pendingRequests?.length}
-            </div>
+            <div className="f-grow"></div>
            <div>
              <span className="icon-btn" onClick={() => navigate(state?.id ?? "")}>
-                <FontAwesomeIcon icon={faGear} />
+                <Icon name="gear" size={12} />
              </span>
            </div>
          </div>
--- a/packages/app/src/Hooks/useLoginHandler.tsx
+++ b/packages/app/src/Hooks/useLoginHandler.tsx
@ -3,7 +3,7 @@ import { useIntl } from "react-intl";
 import { EmailRegex, MnemonicRegex } from "Const";
 import { LoginStore } from "Login";
 import { generateBip39Entropy, entropyToPrivateKey } from "nip6";
-import { getNip05PubKey } from "Pages/Login";
+import { getNip05PubKey } from "Pages/LoginPage";
 import { bech32ToHex } from "Util";

 export default function useLoginHandler() {
--- a/packages/app/src/Icons/Icon.tsx
+++ b/packages/app/src/Icons/Icon.tsx
@ -1,4 +1,5 @@
 import { MouseEventHandler } from "react";
+import IconsSvg from "public/icons.svg";

 type Props = {
  name: string;
@ -9,7 +10,7 @@ type Props = {

 const Icon = (props: Props) => {
  const size = props.size || 20;
-  const href = "/icons.svg#" + props.name;
+  const href = `${IconsSvg}#` + props.name;

  return (
    <svg width={size} height={size} className={props.className} onClick={props.onClick}>
--- a/packages/app/src/Pages/LoginPage.css
+++ b/packages/app/src/Pages/LoginPage.css
--- a/packages/app/src/Pages/LoginPage.tsx
+++ b/packages/app/src/Pages/LoginPage.tsx
@ -1,4 +1,4 @@
-import "./Login.css";
+import "./LoginPage.css";

 import { CSSProperties, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
--- a/packages/app/src/Pages/NostrLinkHandler.tsx
+++ b/packages/app/src/Pages/NostrLinkHandler.tsx
@ -5,7 +5,7 @@ import { useNavigate, useParams } from "react-router-dom";

 import Spinner from "Icons/Spinner";
 import { parseNostrLink, profileLink } from "Util";
-import { getNip05PubKey } from "Pages/Login";
+import { getNip05PubKey } from "Pages/LoginPage";
 import { System } from "System";

 export default function NostrLinkHandler() {
--- a/packages/app/src/Pages/ProfilePage.tsx
+++ b/packages/app/src/Pages/ProfilePage.tsx
@ -42,7 +42,7 @@ import BadgeList from "Element/BadgeList";
 import { ProxyImg } from "Element/ProxyImg";
 import useHorizontalScroll from "Hooks/useHorizontalScroll";
 import { EmailRegex } from "Const";
-import { getNip05PubKey } from "Pages/Login";
+import { getNip05PubKey } from "Pages/LoginPage";
 import { LNURL } from "LNURL";
 import useLogin from "Hooks/useLogin";

--- a/packages/app/src/Pages/WalletPage.tsx
+++ b/packages/app/src/Pages/WalletPage.tsx
@ -3,14 +3,13 @@ import "./WalletPage.css";
 import { useEffect, useState } from "react";
 import { RouteObject, useNavigate } from "react-router-dom";
 import { FormattedMessage, FormattedNumber, useIntl } from "react-intl";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCheck, faClock, faXmark } from "@fortawesome/free-solid-svg-icons";

 import NoteTime from "Element/NoteTime";
 import { WalletInvoice, Sats, WalletInfo, WalletInvoiceState, useWallet, LNWallet, Wallets, WalletKind } from "Wallet";
 import AsyncButton from "Element/AsyncButton";
 import { unwrap } from "Util";
 import { WebLNWallet } from "Wallet/WebLN";
+import Icon from "Icons/Icon";

 export const WalletRoutes: RouteObject[] = [
  {
@ -63,11 +62,11 @@ export default function WalletPage() {
  function stateIcon(s: WalletInvoiceState) {
    switch (s) {
      case WalletInvoiceState.Pending:
-        return <FontAwesomeIcon icon={faClock} className="mr5" />;
+        return <Icon name="clock" className="mr5" />;
      case WalletInvoiceState.Paid:
-        return <FontAwesomeIcon icon={faCheck} className="mr5" />;
+        return <Icon name="check" className="mr5" />;
      case WalletInvoiceState.Expired:
-        return <FontAwesomeIcon icon={faXmark} className="mr5" />;
+        return <Icon name="close" className="mr5" />;
    }
  }

--- a/packages/app/src/Pages/settings/Profile.tsx
+++ b/packages/app/src/Pages/settings/Profile.tsx
@ -3,8 +3,6 @@ import Nostrich from "nostrich.webp";
 import { useEffect, useState } from "react";
 import { FormattedMessage } from "react-intl";
 import { useNavigate } from "react-router-dom";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faShop } from "@fortawesome/free-solid-svg-icons";

 import useEventPublisher from "Feed/EventPublisher";
 import { useUserProfile } from "Hooks/useUserProfile";
@ -13,9 +11,10 @@ import useFileUpload from "Upload";
 import AsyncButton from "Element/AsyncButton";
 import { mapEventToProfile, UserCache } from "Cache";
 import useLogin from "Hooks/useLogin";
+import AvatarEditor from "Element/AvatarEditor";
+import Icon from "Icons/Icon";

 import messages from "./messages";
-import AvatarEditor from "Element/AvatarEditor";

 export interface ProfileSettingsProps {
  avatar?: boolean;
@ -147,7 +146,7 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
          <div>
            <input type="text" className="mr10" value={nip05} onChange={e => setNip05(e.target.value)} />
            <button type="button" onClick={() => navigate("/verification")}>
-              <FontAwesomeIcon icon={faShop} />
+              <Icon name="shopping-bag" />
              &nbsp; <FormattedMessage {...messages.Buy} />
            </button>
          </div>
--- a/packages/app/src/Wallet/NostrWalletConnect.ts
+++ b/packages/app/src/Wallet/NostrWalletConnect.ts
@ -1,4 +1,4 @@
-import { Connection, RawEvent } from "@snort/nostr";
+import { Connection, EventKind, RawEvent } from "@snort/nostr";
 import { EventBuilder } from "System";
 import { EventExt } from "System/EventExt";
 import { LNWallet, WalletError, WalletErrorCode, WalletInfo, WalletInvoice, WalletInvoiceState } from "Wallet";
@ -156,7 +156,7 @@ export class NostrConnectWallet implements LNWallet {
      params,
    });
    const eb = new EventBuilder();
-    eb.kind(23194)
+    eb.kind(23194 as EventKind)
      .content(await EventExt.encryptData(payload, this.#config.walletPubkey, this.#config.secret))
      .tag(["p", this.#config.walletPubkey]);

@ -166,7 +166,7 @@ export class NostrConnectWallet implements LNWallet {
        "REQ",
        evCommand.id.slice(0, 12),
        {
-          kinds: [23195],
+          kinds: [23195 as EventKind],
          authors: [this.#config.walletPubkey],
          ["#e"]: [evCommand.id],
        },
--- a/packages/app/src/index.tsx
+++ b/packages/app/src/index.tsx
@ -1,5 +1,6 @@
 import "./index.css";
 import "@szhsin/react-menu/dist/index.css";
+import "public/manifest.json";

 import { StrictMode } from "react";
 import { QueryClient, QueryClientProvider } from "react-query";
@ -12,7 +13,7 @@ import { IntlProvider } from "IntlProvider";
 import { unwrap } from "Util";
 import Store from "State/Store";
 import Layout from "Pages/Layout";
-import LoginPage from "Pages/Login";
+import LoginPage from "Pages/LoginPage";
 import ProfilePage from "Pages/ProfilePage";
 import { RootRoutes } from "Pages/Root";
 import NotificationsPage from "Pages/Notifications";
--- a/packages/app/webpack.config.js
+++ b/packages/app/webpack.config.js
@ -0,0 +1,91 @@
+// Generated using webpack-cli https://github.com/webpack/webpack-cli
+
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const WorkboxWebpackPlugin = require("workbox-webpack-plugin");
+const ESLintPlugin = require("eslint-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+const TsTransformer = require("@formatjs/ts-transformer");
+
+const isProduction = process.env.NODE_ENV == "production";
+
+const config = {
+  entry: "./src/index.tsx",
+  target: "browserslist",
+  devtool: "source-map",
+  output: {
+    publicPath: "/",
+    path: path.resolve(__dirname, "build"),
+    filename: "[name].[chunkhash].js",
+    clean: true,
+  },
+  devServer: {
+    open: true,
+    host: "localhost",
+    historyApiFallback: true,
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: "public/index.html",
+      favicon: "public/favicon.ico",
+    }),
+    new ESLintPlugin(),
+    new MiniCssExtractPlugin({
+      filename: "[name].[chunkhash].css",
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.(ts|tsx)$/i,
+        use: [
+          "babel-loader",
+          {
+            loader: "ts-loader",
+            options: {
+              getCustomTransformers() {
+                return {
+                  before: [
+                    TsTransformer.transform({
+                      overrideIdFn: "[sha512:contenthash:base64:6]",
+                    }),
+                  ],
+                };
+              },
+            },
+          },
+        ],
+        exclude: ["/node_modules/"],
+      },
+      {
+        test: /\.css$/i,
+        use: [MiniCssExtractPlugin.loader, "css-loader"],
+      },
+      {
+        test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif|webp)$/i,
+        type: "asset",
+      },
+    ],
+  },
+  optimization: {
+    usedExports: true,
+    minimizer: ["...", new CssMinimizerPlugin()],
+  },
+  resolve: {
+    extensions: [".tsx", ".ts", ".jsx", ".js", "..."],
+    modules: ["node_modules", __dirname, path.resolve(__dirname, "src")],
+  },
+};
+
+module.exports = () => {
+  if (isProduction) {
+    config.mode = "production";
+
+    config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
+  } else {
+    config.mode = "development";
+    config.output.clean = false;
+  }
+  return config;
+};
--- a/yarn.lock
+++ b/yarn.lock