Merge branch 'master' into feat/add-account-unique-name

getAlby · Dec 2, 2023 · abb19bc · abb19bc
2 parents 839eacf + dbbc13f
commit abb19bc
Show file tree

Hide file tree

Showing 49 changed files with 221 additions and 992 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "lightning-browser-extension",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "description": "Lightning browser extension",
   "private": true,
   "repository": "https://github.com/bumi/lightning-browser-extension.git",

diff --git a/src/app/components/Modal/index.tsx b/src/app/components/Modal/index.tsx
@@ -1,12 +1,14 @@
 import { CrossIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
 import ReactModal from "react-modal";
+import { classNames } from "~/app/utils";
 
 type Props = {
   children?: React.ReactNode;
   isOpen: boolean;
   close: () => void;
   contentLabel: string;
   title?: string;
+  position?: "top" | "center";
 };
 
 export default function Modal({
@@ -15,6 +17,7 @@ export default function Modal({
   close: closeModal,
   contentLabel,
   title,
+  position = "center",
 }: Props) {
   return (
     <ReactModal
@@ -24,8 +27,12 @@ export default function Modal({
       isOpen={isOpen}
       onRequestClose={closeModal}
       contentLabel={contentLabel}
-      overlayClassName="bg-black bg-opacity-50 fixed inset-0 flex justify-center items-center cursor-pointer"
-      className="rounded-lg shadow-xl bg-white dark:bg-surface-02dp w-full max-w-md overflow-x-hidden relative p-5 cursor-auto mx-5"
+      overlayClassName={classNames(
+        "bg-black bg-opacity-50 fixed inset-0 flex justify-center cursor-pointer",
+        position == "center" && "items-center",
+        position == "top" && "items-start pt-20"
+      )}
+      className="rounded-lg shadow-xl bg-white dark:bg-surface-01dp w-full max-w-md overflow-x-hidden relative p-5 cursor-auto mx-5"
       style={{ content: { maxHeight: "90vh" } }}
     >
       {title && (

diff --git a/src/app/components/TransactionsTable/TransactionModal.tsx b/src/app/components/TransactionsTable/TransactionModal.tsx
@@ -52,16 +52,17 @@ export default function TransactionModal({
         onClose();
       }}
       contentLabel={"Transactions"}
+      position="top"
     >
       <div className="p-3 flex flex-col gap-4 justify-center ">
         <div>
           <div className="flex items-center justify-center">
             {getTransactionType(transaction) == "outgoing" ? (
-              <div className="flex justify-center items-center bg-orange-100 dark:bg-[#261911] rounded-full p-8">
+              <div className="flex justify-center items-center bg-orange-100 dark:bg-[#261911] rounded-full p-4">
                 <ArrowUpIcon className="w-8 h-8 text-orange-400 stroke-[5px]" />
               </div>
             ) : (
-              <div className="flex justify-center items-center bg-green-100 dark:bg-[#0F1E1A] rounded-full p-8">
+              <div className="flex justify-center items-center bg-green-100 dark:bg-[#0F1E1A] rounded-full p-4">
                 <ArrowDownIcon className="w-8 h-8 text-green-400 stroke-[5px]" />
               </div>
             )}

diff --git a/src/app/components/TransactionsTable/index.tsx b/src/app/components/TransactionsTable/index.tsx
@@ -49,66 +49,64 @@ export default function TransactionsTable({
         <p className="text-gray-500 dark:text-neutral-400">{noResultMsg}</p>
       ) : (
         <>
-          <div className="overflow-hidden">
-            {transactions?.map((tx) => {
-              const type = getTransactionType(tx);
+          {transactions?.map((tx) => {
+            const type = getTransactionType(tx);
 
-              return (
-                <div
-                  key={tx.id}
-                  className="px-3 py-2 hover:bg-gray-100 dark:hover:bg-surface-02dp cursor-pointer rounded-md"
-                  onClick={() => openDetails(tx)}
-                >
-                  <div className="flex gap-4">
-                    <div className="flex items-center">
-                      {type == "outgoing" ? (
-                        <div className="flex justify-center items-center bg-orange-100 dark:bg-[#261911] rounded-full w-8 h-8">
-                          <ArrowUpIcon className="w-4 h-4 text-orange-400 stroke-[4px]" />
-                        </div>
-                      ) : (
-                        <div className="flex justify-center items-center bg-green-100 dark:bg-[#0F1E1A] rounded-full w-8 h-8">
-                          <ArrowDownIcon className="w-4 h-4 text-green-400 stroke-[4px]" />
-                        </div>
-                      )}
-                    </div>
-                    <div className="overflow-hidden mr-3">
-                      <div className="text-sm font-medium text-black truncate dark:text-white">
-                        <p className="truncate">
-                          {tx.title ||
-                            tx.boostagram?.message ||
-                            (type == "incoming" ? t("received") : t("sent"))}
-                        </p>
+            return (
+              <div
+                key={tx.id}
+                className="-mx-2 px-2 py-2 hover:bg-gray-100 dark:hover:bg-surface-02dp cursor-pointer rounded-md"
+                onClick={() => openDetails(tx)}
+              >
+                <div className="flex gap-3">
+                  <div className="flex items-center">
+                    {type == "outgoing" ? (
+                      <div className="flex justify-center items-center bg-orange-100 dark:bg-[#261911] rounded-full w-8 h-8">
+                        <ArrowUpIcon className="w-4 h-4 text-orange-400 stroke-[4px]" />
+                      </div>
+                    ) : (
+                      <div className="flex justify-center items-center bg-green-100 dark:bg-[#0F1E1A] rounded-full w-8 h-8">
+                        <ArrowDownIcon className="w-4 h-4 text-green-400 stroke-[4px]" />
                       </div>
-                      <p className="text-xs text-gray-400 dark:text-neutral-500">
-                        {tx.date}
+                    )}
+                  </div>
+                  <div className="overflow-hidden mr-3">
+                    <div className="text-sm font-medium text-black truncate dark:text-white">
+                      <p className="truncate">
+                        {tx.title ||
+                          tx.boostagram?.message ||
+                          (type == "incoming" ? t("received") : t("sent"))}
                       </p>
                     </div>
-                    <div className="flex ml-auto text-right space-x-3 shrink-0 dark:text-white">
-                      <div>
-                        <p
-                          className={classNames(
-                            "text-sm font-medium",
-                            type == "incoming"
-                              ? "text-green-600 dark:color-green-400"
-                              : "text-orange-600 dark:color-orange-400"
-                          )}
-                        >
-                          {type == "outgoing" ? "-" : "+"}{" "}
-                          {getFormattedSats(tx.totalAmount)}
-                        </p>
-
-                        {!!tx.totalAmountFiat && (
-                          <p className="text-xs text-gray-400 dark:text-neutral-600">
-                            ~{tx.totalAmountFiat}
-                          </p>
+                    <p className="text-xs text-gray-400 dark:text-neutral-500">
+                      {tx.date}
+                    </p>
+                  </div>
+                  <div className="flex ml-auto text-right space-x-3 shrink-0 dark:text-white">
+                    <div>
+                      <p
+                        className={classNames(
+                          "text-sm",
+                          type == "incoming"
+                            ? "text-green-600 dark:color-green-400"
+                            : "text-orange-600 dark:color-orange-400"
                         )}
-                      </div>
+                      >
+                        {type == "outgoing" ? "-" : "+"}{" "}
+                        {getFormattedSats(tx.totalAmount)}
+                      </p>
+
+                      {!!tx.totalAmountFiat && (
+                        <p className="text-xs text-gray-400 dark:text-neutral-600">
+                          ~{tx.totalAmountFiat}
+                        </p>
+                      )}
                     </div>
                   </div>
                 </div>
-              );
-            })}
-          </div>
+              </div>
+            );
+          })}
           {transaction && (
             <TransactionModal
               transaction={transaction}

diff --git a/src/app/router/connectorRoutes.tsx b/src/app/router/connectorRoutes.tsx
@@ -3,7 +3,6 @@ import ConnectBtcpay from "@screens/connectors/ConnectBtcpay";
 import ConnectCitadel from "@screens/connectors/ConnectCitadel";
 import ConnectEclair from "@screens/connectors/ConnectEclair";
 import ConnectGaloy, { galoyUrls } from "@screens/connectors/ConnectGaloy";
-import ConnectKollider from "@screens/connectors/ConnectKollider";
 import ConnectLnbits from "@screens/connectors/ConnectLnbits";
 import ConnectLnc from "@screens/connectors/ConnectLnc";
 import ConnectLnd from "@screens/connectors/ConnectLnd";
@@ -22,7 +21,6 @@ import core_ln from "/static/assets/icons/core_ln.svg";
 import eclair from "/static/assets/icons/eclair.jpg";
 import galoyBitcoinJungle from "/static/assets/icons/galoy_bitcoin_jungle.png";
 import galoyBlink from "/static/assets/icons/galoy_blink.png";
-import kolliderLogo from "/static/assets/icons/kollider.png";
 import lightning_node from "/static/assets/icons/lightning_node.png";
 import lightning_terminal from "/static/assets/icons/lightning_terminal.png";
 import lnbits from "/static/assets/icons/lnbits.png";
@@ -66,21 +64,6 @@ const galoyPaths: { [key: string]: keyof typeof galoyUrls } = {
   bitcoinJungle: "galoy-bitcoin-jungle",
 };
 
-const kolliderConnectorRoutes: ChildRoute[] = [
-  {
-    index: true,
-    element: <ConnectKollider variant="select" />,
-  },
-  {
-    path: "create",
-    element: <ConnectKollider variant="create" />,
-  },
-  {
-    path: "login",
-    element: <ConnectKollider variant="login" />,
-  },
-];
-
 const connectorMap: { [key: string]: ConnectorRoute } = {
   lnd: {
     path: "lnd",
@@ -148,14 +131,6 @@ const connectorMap: { [key: string]: ConnectorRoute } = {
     title: i18n.t("translation:choose_connector.eclair.title"),
     logo: eclair,
   },
-  kollider: {
-    path: "kollider",
-    element: <ConnectKollider variant="select" />,
-    title: i18n.t("translation:choose_connector.kollider.title"),
-    description: i18n.t("translation:choose_connector.kollider.description"),
-    logo: kolliderLogo,
-    children: kolliderConnectorRoutes,
-  },
   [galoyPaths.blink]: {
     path: galoyPaths.blink,
     element: <ConnectGaloy instance={galoyPaths.blink} />,
@@ -251,7 +226,6 @@ function getConnectorRoutes(): ConnectorRoute[] {
     connectorMap["commando"],
     connectorMap["lnbits"],
     connectorMap["lnd-hub-go"],
-    connectorMap["kollider"],
     connectorMap["eclair"],
     connectorMap["btcpay"],
     connectorMap[galoyPaths.blink],

diff --git a/src/app/screens/ConfirmPayment/index.tsx b/src/app/screens/ConfirmPayment/index.tsx
@@ -137,7 +137,7 @@ function ConfirmPayment() {
     <div className="h-full flex flex-col overflow-y-auto no-scrollbar">
       <ScreenHeader title={!successMessage ? t("title") : tCommon("success")} />
       {!successMessage ? (
-        <form onSubmit={handleSubmit} className="h-full">
+        <form onSubmit={handleSubmit} className="grow flex">
           <Container justifyBetween maxWidth="sm">
             <div>
               {navState.origin && (
@@ -180,27 +180,29 @@ function ConfirmPayment() {
           </Container>
         </form>
       ) : (
-        <Container justifyBetween maxWidth="sm">
-          <ResultCard
-            isSuccess
-            message={
-              !navState.origin
-                ? successMessage
-                : tCommon("success_message", {
-                    amount: formattedInvoiceSats,
-                    fiatAmount: showFiat ? ` (${fiatAmount})` : ``,
-                    destination: navState.origin.name,
-                  })
-            }
-          />
-          <div className="mt-4">
-            <Button
-              onClick={close}
-              label={tCommon("actions.close")}
-              fullWidth
+        <div className="grow">
+          <Container justifyBetween maxWidth="sm">
+            <ResultCard
+              isSuccess
+              message={
+                !navState.origin
+                  ? successMessage
+                  : tCommon("success_message", {
+                      amount: formattedInvoiceSats,
+                      fiatAmount: showFiat ? ` (${fiatAmount})` : ``,
+                      destination: navState.origin.name,
+                    })
+              }
             />
-          </div>
-        </Container>
+            <div className="mt-4">
+              <Button
+                onClick={close}
+                label={tCommon("actions.close")}
+                fullWidth
+              />
+            </div>
+          </Container>
+        </div>
       )}
     </div>
   );

diff --git a/src/app/screens/Discover/websites.json b/src/app/screens/Discover/websites.json
@@ -149,12 +149,6 @@
   {
     "title": "trading",
     "items": [
-      {
-        "title": "Kollider",
-        "subtitle": "Instant Bitcoin derivatives trading",
-        "logo": "https://cdn.getalby-assets.com/alby-extension-website-screen/kollider_thumbnail.png",
-        "url": "https://kollider.xyz"
-      },
       {
         "title": "LNMarkets",
         "subtitle": "Instant Bitcoin derivatives trading",