Merge branch 'master' into refactor/manifest-v3-support

getAlby · Dec 13, 2022 · bf8a9d1 · bf8a9d1
2 parents b9d97f3 + b58b2b9
commit bf8a9d1
Show file tree

Hide file tree

Showing 31 changed files with 836 additions and 404 deletions.
diff --git a/package.json b/package.json
@@ -91,8 +91,8 @@
     "@types/react-modal": "^3.13.1",
     "@types/uuid": "^9.0.0",
     "@types/webextension-polyfill": "^0.9.2",
-    "@typescript-eslint/eslint-plugin": "^5.42.0",
-    "@typescript-eslint/parser": "^5.42.0",
+    "@typescript-eslint/eslint-plugin": "^5.45.1",
+    "@typescript-eslint/parser": "^5.45.1",
     "autoprefixer": "^10.4.13",
     "buffer": "^6.0.3",
     "clean-webpack-plugin": "^4.0.0",
@@ -102,7 +102,7 @@
     "css-loader": "^6.7.2",
     "css-minimizer-webpack-plugin": "^4.2.2",
     "del-cli": "^5.0.0",
-    "eslint": "^8.27.0",
+    "eslint": "^8.29.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-react": "^7.31.11",
@@ -118,8 +118,8 @@
     "mini-css-extract-plugin": "^2.7.0",
     "msw": "^0.49.0",
     "postcss": "^8.4.19",
-    "postcss-cli": "^10.0.0",
-    "postcss-loader": "^7.0.1",
+    "postcss-cli": "^10.1.0",
+    "postcss-loader": "^7.0.2",
     "pptr-testing-library": "^0.7.0",
     "prettier": "^2.8.0",
     "process": "^0.11.10",

diff --git a/src/app/components/CompanionDownloadInfo.tsx b/src/app/components/CompanionDownloadInfo.tsx
@@ -13,10 +13,11 @@ function CompanionDownloadInfo({ hasTorCallback }: Props) {
   });
 
   function getOS() {
-    if (navigator.appVersion.indexOf("Win") != -1) return "Windows";
-    if (navigator.appVersion.indexOf("Mac") != -1) return "MacOS";
-    if (navigator.appVersion.indexOf("X11") != -1) return "UNIX";
-    if (navigator.appVersion.indexOf("Linux") != -1) return "Linux";
+    const userAgent = navigator.userAgent;
+    if (userAgent.indexOf("Win") !== -1) return "Windows";
+    if (userAgent.indexOf("Mac") !== -1) return "MacOS";
+    if (userAgent.indexOf("X11") !== -1) return "UNIX";
+    if (userAgent.indexOf("Linux") !== -1) return "Linux";
   }
 
   // TODO: check if the companion app is already installed

diff --git a/src/app/components/SatButtons/index.tsx b/src/app/components/SatButtons/index.tsx
@@ -12,29 +12,29 @@ function SatButtons({ onClick, disabled }: Props) {
     <div className="flex gap-2">
       <Button
         icon={<SatoshiV2Icon className="w-4 h-4" />}
-        label="100 ⚡"
-        onClick={() => onClick("100")}
+        label="1k ⚡"
+        onClick={() => onClick("1000")}
         fullWidth
         disabled={disabled}
       />
       <Button
         icon={<SatoshiV2Icon className="w-4 h-4" />}
-        label="1K ⚡"
-        onClick={() => onClick("1000")}
+        label="5k ⚡"
+        onClick={() => onClick("5000")}
         fullWidth
         disabled={disabled}
       />
       <Button
         icon={<SatoshiV2Icon className="w-4 h-4" />}
-        label="5K ⚡"
-        onClick={() => onClick("5000")}
+        label="10k ⚡"
+        onClick={() => onClick("10000")}
         fullWidth
         disabled={disabled}
       />
       <Button
         icon={<SatoshiV2Icon className="w-4 h-4" />}
-        label="10K ⚡"
-        onClick={() => onClick("10000")}
+        label="25k ⚡"
+        onClick={() => onClick("25000")}
         fullWidth
         disabled={disabled}
       />

diff --git a/src/app/context/SettingsContext.tsx b/src/app/context/SettingsContext.tsx
@@ -114,7 +114,7 @@ export const SettingsProvider = ({
 
     // need to switch i.e. `pt_BR` to `pt-br`
     const daysjsLocaleFormatted = settings.locale
-      .toLocaleLowerCase()
+      .toLowerCase()
       .replace("_", "-");
     dayjs.locale(daysjsLocaleFormatted);
   }, [settings.locale]);

diff --git a/src/app/screens/ConfirmKeysend/index.tsx b/src/app/screens/ConfirmKeysend/index.tsx
@@ -122,45 +122,51 @@ function ConfirmKeysend() {
     });
   }
 
+  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    confirm();
+  }
+
   return (
     <div className="h-full flex flex-col overflow-y-auto no-scrollbar">
       <ScreenHeader title={t("title")} />
       {!successMessage ? (
         <Container justifyBetween maxWidth="sm">
-          <div>
-            <PublisherCard
-              title={origin.name}
-              image={origin.icon}
-              url={origin.host}
-            />
-            <div className="my-4">
-              <div className="shadow mb-4 bg-white dark:bg-surface-02dp p-4 rounded-lg">
-                <PaymentSummary
-                  amount={amount}
-                  fiatAmount={fiatAmount}
-                  description={t("payment_summary.description", {
-                    destination,
-                  })}
+          <form onSubmit={handleSubmit}>
+            <div>
+              <PublisherCard
+                title={origin.name}
+                image={origin.icon}
+                url={origin.host}
+              />
+              <div className="my-4">
+                <div className="shadow mb-4 bg-white dark:bg-surface-02dp p-4 rounded-lg">
+                  <PaymentSummary
+                    amount={amount}
+                    fiatAmount={fiatAmount}
+                    description={t("payment_summary.description", {
+                      destination,
+                    })}
+                  />
+                </div>
+
+                <BudgetControl
+                  fiatAmount={fiatBudgetAmount}
+                  remember={rememberMe}
+                  onRememberChange={(event) => {
+                    setRememberMe(event.target.checked);
+                  }}
+                  budget={budget}
+                  onBudgetChange={(event) => setBudget(event.target.value)}
                 />
               </div>
-
-              <BudgetControl
-                fiatAmount={fiatBudgetAmount}
-                remember={rememberMe}
-                onRememberChange={(event) => {
-                  setRememberMe(event.target.checked);
-                }}
-                budget={budget}
-                onBudgetChange={(event) => setBudget(event.target.value)}
-              />
             </div>
-          </div>
-          <ConfirmOrCancel
-            disabled={loading}
-            loading={loading}
-            onConfirm={confirm}
-            onCancel={reject}
-          />
+            <ConfirmOrCancel
+              disabled={loading}
+              loading={loading}
+              onCancel={reject}
+            />
+          </form>
         </Container>
       ) : (
         <Container maxWidth="sm">

diff --git a/src/app/screens/ConfirmPayment/index.tsx b/src/app/screens/ConfirmPayment/index.tsx
@@ -132,52 +132,58 @@ function ConfirmPayment() {
     });
   }
 
+  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    confirm();
+  }
+
   return (
     <div className="h-full flex flex-col overflow-y-auto no-scrollbar">
       <ScreenHeader title={!successMessage ? t("title") : tCommon("success")} />
       {!successMessage ? (
         <Container justifyBetween maxWidth="sm">
-          <div>
-            {navState.origin && (
-              <PublisherCard
-                title={navState.origin.name}
-                image={navState.origin.icon}
-                url={navState.origin.host}
-              />
-            )}
-            <div className="my-4">
-              <div className="mb-4 p-4 shadow bg-white dark:bg-surface-02dp rounded-lg">
-                <PaymentSummary
-                  amount={invoice.satoshis || "0"} // how come that sathoshis can be undefined, bolt11?
-                  fiatAmount={fiatAmount}
-                  description={invoice.tagsObject.description}
-                />
-              </div>
+          <form onSubmit={handleSubmit}>
+            <div>
               {navState.origin && (
-                <BudgetControl
-                  fiatAmount={fiatBudgetAmount}
-                  remember={rememberMe}
-                  onRememberChange={(event) => {
-                    setRememberMe(event.target.checked);
-                  }}
-                  budget={budget}
-                  onBudgetChange={(event) => setBudget(event.target.value)}
+                <PublisherCard
+                  title={navState.origin.name}
+                  image={navState.origin.icon}
+                  url={navState.origin.host}
                 />
               )}
+              <div className="my-4">
+                <div className="mb-4 p-4 shadow bg-white dark:bg-surface-02dp rounded-lg">
+                  <PaymentSummary
+                    amount={invoice.satoshis || "0"} // how come that sathoshis can be undefined, bolt11?
+                    fiatAmount={fiatAmount}
+                    description={invoice.tagsObject.description}
+                  />
+                </div>
+                {navState.origin && (
+                  <BudgetControl
+                    fiatAmount={fiatBudgetAmount}
+                    remember={rememberMe}
+                    onRememberChange={(event) => {
+                      setRememberMe(event.target.checked);
+                    }}
+                    budget={budget}
+                    onBudgetChange={(event) => setBudget(event.target.value)}
+                  />
+                )}
+              </div>
             </div>
-          </div>
-          <div>
-            <ConfirmOrCancel
-              disabled={loading}
-              loading={loading}
-              onConfirm={confirm}
-              onCancel={reject}
-              label={t("actions.pay_now")}
-            />
-            <p className="mb-4 text-center text-sm text-gray-400">
-              <em>{tComponents("only_trusted")}</em>
-            </p>
-          </div>
+            <div>
+              <ConfirmOrCancel
+                disabled={loading}
+                loading={loading}
+                onCancel={reject}
+                label={t("actions.pay_now")}
+              />
+              <p className="mb-4 text-center text-sm text-gray-400">
+                <em>{tComponents("only_trusted")}</em>
+              </p>
+            </div>
+          </form>
         </Container>
       ) : (
         <Container justifyBetween maxWidth="sm">

diff --git a/src/app/screens/ConfirmRequestPermission/index.tsx b/src/app/screens/ConfirmRequestPermission/index.tsx
@@ -35,52 +35,58 @@ const ConfirmRequestPermission: FC = () => {
     msg.error(USER_REJECTED_ERROR);
   };
 
+  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    enable();
+  }
+
   return (
     <div className="h-full flex flex-col overflow-y-auto no-scrollbar">
       <ScreenHeader title={t("title")} />
       <Container justifyBetween maxWidth="sm">
-        <div>
-          <PublisherCard
-            title={origin.name}
-            image={origin.icon}
-            url={origin.host}
-            isSmall={false}
-          />
+        <form onSubmit={handleSubmit}>
+          <div>
+            <PublisherCard
+              title={origin.name}
+              image={origin.icon}
+              url={origin.host}
+              isSmall={false}
+            />
 
-          <div className="dark:text-white pt-6">
-            <p className="mb-4">{t("allow", { host: origin.host })}</p>
-            <div className="mb-4 flex items-center">
-              <CheckIcon className="w-5 h-5 mr-2" />
-              <p className="dark:text-white">
-                {t("enable_method", { method: requestMethod })}
-              </p>
-            </div>
-            <div className="flex items-center">
-              <Checkbox
-                id="always_allow"
-                name="always_allow"
-                checked={alwaysAllow}
-                onChange={() => setAlwaysAllow((prev) => !prev)}
-              />
-              <label
-                htmlFor="always_allow"
-                className="cursor-pointer ml-2 block text-sm text-gray-900 font-medium dark:text-white"
-              >
-                {t("always_allow", {
-                  method: requestMethod,
-                  host: origin.host,
-                })}
-              </label>
+            <div className="dark:text-white pt-6">
+              <p className="mb-4">{t("allow", { host: origin.host })}</p>
+              <div className="mb-4 flex items-center">
+                <CheckIcon className="w-5 h-5 mr-2" />
+                <p className="dark:text-white">
+                  {t("enable_method", { method: requestMethod })}
+                </p>
+              </div>
+              <div className="flex items-center">
+                <Checkbox
+                  id="always_allow"
+                  name="always_allow"
+                  checked={alwaysAllow}
+                  onChange={() => setAlwaysAllow((prev) => !prev)}
+                />
+                <label
+                  htmlFor="always_allow"
+                  className="cursor-pointer ml-2 block text-sm text-gray-900 font-medium dark:text-white"
+                >
+                  {t("always_allow", {
+                    method: requestMethod,
+                    host: origin.host,
+                  })}
+                </label>
+              </div>
             </div>
           </div>
-        </div>
-        <div className="mb-4 text-center flex flex-col">
-          <ConfirmOrCancel
-            label={tCommon("actions.confirm")}
-            onConfirm={enable}
-            onCancel={reject}
-          />
-        </div>
+          <div className="mb-4 text-center flex flex-col">
+            <ConfirmOrCancel
+              label={tCommon("actions.confirm")}
+              onCancel={reject}
+            />
+          </div>
+        </form>
       </Container>
     </div>
   );