feat: bitcoin-icons-react with popicons (#3072)

* feat: replace bitcoin-icons-react with popicons Signed-off-by: amitamrutiya2210 <[email protected]> * feat: add all possible popicons icons Signed-off-by: amitamrutiya2210 <[email protected]> * feat: add svg icons and remove bitcoin-icons-react library Signed-off-by: amitamrutiya2210 <[email protected]> * fix: accountmenu, add missing icon * fix: icon link cards * fix: publishers table * fix: transaction table & modal * fix: onboard * fix: accounts list styles * fix: smaller icons on connect commando * fix: svg optimize * fix: use props in popicons * fix: use circlelineicon * fix: add satoshi icon * fix: remove manage wallets link * fix: copy button behavior --------- Signed-off-by: amitamrutiya2210 <[email protected]> Co-authored-by: René Aaron <[email protected]>
getAlby · Mar 14, 2024 · c6cef19 · c6cef19
1 parent 61689e8
commit c6cef19
Show file tree

Hide file tree

Showing 46 changed files with 241 additions and 190 deletions.
diff --git a/package.json b/package.json
@@ -35,7 +35,6 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@bitcoin-design/bitcoin-icons-react": "^0.1.10",
     "@bitcoinerlab/secp256k1": "^1.1.1",
     "@getalby/sdk": "^3.4.0",
     "@headlessui/react": "^1.7.18",

diff --git a/src/app/components/AccountDetailLayout/index.tsx b/src/app/components/AccountDetailLayout/index.tsx
@@ -1,6 +1,6 @@
-import { CaretLeftIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
 import Header from "@components/Header";
 import IconButton from "@components/IconButton";
+import { PopiconsChevronLeftLine } from "@popicons/react";
 import { useTranslation } from "react-i18next";
 import { Outlet, useMatch, useNavigate, useParams } from "react-router-dom";
 import Avatar from "~/app/components/Avatar";
@@ -31,7 +31,7 @@ function AccountDetailLayout() {
         headerLeft={
           <IconButton
             onClick={back}
-            icon={<CaretLeftIcon className="w-4 h-4" />}
+            icon={<PopiconsChevronLeftLine className="w-5 h-5" />}
           />
         }
       >

diff --git a/src/app/components/AccountMenu/index.test.tsx b/src/app/components/AccountMenu/index.test.tsx
@@ -72,6 +72,5 @@ describe("AccountMenu", () => {
     expect(screen.getByText("LND account")).toBeInTheDocument();
     expect(screen.getByText("Galoy account")).toBeInTheDocument();
     expect(screen.getByText("Connect a Wallet")).toBeInTheDocument();
-    expect(screen.getByText("Manage Wallets")).toBeInTheDocument();
   });
 });
diff --git a/src/app/components/AccountMenu/index.tsx b/src/app/components/AccountMenu/index.tsx
@@ -1,10 +1,8 @@
 import {
-  AddressBookIcon,
-  CaretDownIcon,
-  GlobeIcon,
-  PlusIcon,
-  WalletIcon,
-} from "@bitcoin-design/bitcoin-icons-react/filled";
+  PopiconsChevronBottomLine,
+  PopiconsCirclePlusLine,
+  PopiconsWalletLine,
+} from "@popicons/react";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
@@ -16,6 +14,7 @@ import { useAccounts } from "~/app/context/AccountsContext";
 import { isAlbyLNDHubAccount, isAlbyOAuthAccount } from "~/app/utils";
 import utils from "~/common/lib/utils";
 
+import PopiconsGlobeLine from "~/app/icons/popicons/GlobeLine";
 import Menu from "../Menu";
 
 export type Props = {
@@ -58,7 +57,7 @@ function AccountMenu({ showOptions = true }: Props) {
   }
 
   return (
-    <div className="relative pl-2 flex justify-end w-72">
+    <div className="relative pl-2 flex justify-end w-72 text-gray-800 dark:text-neutral-200">
       <Menu as="div">
         <Menu.Button className="h-full px-2 rounded-md hover:bg-gray-100 dark:hover:bg-white/10 transition-colors duration-200">
           <div className="flex items-center">
@@ -79,7 +78,7 @@ function AccountMenu({ showOptions = true }: Props) {
             >
               <div
                 title={title || ""}
-                className="text-sm font-medium text-gray-700 dark:text-neutral-400 text-ellipsis overflow-hidden whitespace-nowrap"
+                className="text-sm font-medium text-ellipsis overflow-hidden whitespace-nowrap"
               >
                 {accountLoading ? (
                   <SkeletonLoader className="w-20" />
@@ -88,7 +87,7 @@ function AccountMenu({ showOptions = true }: Props) {
                 )}
               </div>
             </div>
-            <CaretDownIcon className="h-4 w-4 dark:text-white" />
+            <PopiconsChevronBottomLine className="h-4 w-4" />
             <span className="sr-only">{t("screen_reader")}</span>
           </div>
         </Menu.Button>
@@ -99,7 +98,7 @@ function AccountMenu({ showOptions = true }: Props) {
                 !title && !balancesDecorated ? "w-28" : ""
               }`}
             >
-              <span className="text-xs text-gray-500 dark:text-neutral-300">
+              <span className="text-xs text-gray-600 dark:text-neutral-400">
                 {tCommon("balance")}
               </span>
               <p className="flex justify-between">
@@ -110,7 +109,7 @@ function AccountMenu({ showOptions = true }: Props) {
                     balancesDecorated.accountBalance
                   )}
                 </span>
-                <span className="text-gray-500 dark:text-neutral-300">
+                <span className="text-gray-600 dark:text-neutral-400">
                   {accountLoading ? (
                     <SkeletonLoader className="w-12" />
                   ) : (
@@ -127,7 +126,7 @@ function AccountMenu({ showOptions = true }: Props) {
               openOptions(`accounts/${authAccount?.id}`);
             }}
           >
-            <WalletIcon className="h-5 w-5 mr-2 text-gray-700 dark:text-neutral-300 shrink-0" />
+            <PopiconsWalletLine className="w-4 h-4 mr-2 shrink-0" />
             {t("options.account.wallet_settings")}
           </Menu.ItemButton>
           {(isAlbyLNDHubAccount(
@@ -140,7 +139,7 @@ function AccountMenu({ showOptions = true }: Props) {
                 window.open(`https://getalby.com/user`, "_blank");
               }}
             >
-              <GlobeIcon className="h-5 w-5 mr-2 text-gray-700 dark:text-neutral-300 shrink-0" />
+              <PopiconsGlobeLine className="w-4 h-4 mr-2 shrink-0" />
               {t("options.account.go_to_web_wallet")} →
             </Menu.ItemButton>
           )}
@@ -192,17 +191,9 @@ function AccountMenu({ showOptions = true }: Props) {
                   openOptions("accounts/new");
                 }}
               >
-                <PlusIcon className="h-5 w-5 mr-2 text-gray-700 dark:text-neutral-300" />
+                <PopiconsCirclePlusLine className="h-4 w-4 mr-2 shrink-0" />
                 {t("options.account.add")}
               </Menu.ItemButton>
-              <Menu.ItemButton
-                onClick={() => {
-                  openOptions("accounts");
-                }}
-              >
-                <AddressBookIcon className="h-5 w-5 mr-2 text-gray-700 dark:text-neutral-300" />
-                {t("options.account.manage")}
-              </Menu.ItemButton>
             </>
           )}
         </Menu.List>

diff --git a/src/app/components/CardButton/index.tsx b/src/app/components/CardButton/index.tsx
@@ -1,14 +1,18 @@
-import React from "react";
+import { FunctionComponent, SVGProps } from "react";
 
 export type Props = {
   title: string;
   description: string;
-  icon: React.ComponentType<{
-    className?: string;
-  }>;
+  icon: IconType;
   onClick: () => void;
 };
 
+interface IconTypeProps {
+  className?: string;
+}
+
+type IconType = FunctionComponent<IconTypeProps & SVGProps<SVGSVGElement>>;
+
 export default function CardButton({
   title,
   description,

diff --git a/src/app/components/Enable/AlbyEnable.tsx b/src/app/components/Enable/AlbyEnable.tsx
@@ -1,7 +1,7 @@
-import { CheckIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
 import ConfirmOrCancel from "@components/ConfirmOrCancel";
 import Container from "@components/Container";
 import PublisherCard from "@components/PublisherCard";
+import { PopiconsCheckLine } from "@popicons/react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import Alert from "~/app/components/Alert";
@@ -76,11 +76,11 @@ function AlbyEnableComponent(props: Props) {
             <p className="mb-2">{tCommon("enable.allow")}</p>
 
             <div className="mb-2 flex items-center">
-              <CheckIcon className="w-5 h-5 mr-2" />
+              <PopiconsCheckLine className="w-5 h-5 mr-2" />
               <p className="dark:text-white">{tCommon("enable.request1")}</p>
             </div>
             <div className="mb-2 flex items-center">
-              <CheckIcon className="w-5 h-5 mr-2" />
+              <PopiconsCheckLine className="w-5 h-5 mr-2" />
               <p className="dark:text-white">{t("request2")}</p>
             </div>
           </div>

diff --git a/src/app/components/Enable/LiquidEnable.tsx b/src/app/components/Enable/LiquidEnable.tsx
@@ -1,7 +1,7 @@
-import { CheckIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
 import ConfirmOrCancel from "@components/ConfirmOrCancel";
 import Container from "@components/Container";
 import PublisherCard from "@components/PublisherCard";
+import { PopiconsCheckLine } from "@popicons/react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import Alert from "~/app/components/Alert";
@@ -76,11 +76,11 @@ function LiquidEnableComponent(props: Props) {
             <p className="mb-2">{tCommon("enable.allow")}</p>
 
             <div className="mb-2 flex items-center">
-              <CheckIcon className="w-5 h-5 mr-2" />
+              <PopiconsCheckLine className="w-5 h-5 mr-2" />
               <p className="dark:text-white">{tCommon("enable.request1")}</p>
             </div>
             <div className="mb-2 flex items-center">
-              <CheckIcon className="w-5 h-5 mr-2" />
+              <PopiconsCheckLine className="w-5 h-5 mr-2" />
               <p className="dark:text-white">{t("request2")}</p>
             </div>
           </div>

diff --git a/src/app/components/Enable/NostrEnable.tsx b/src/app/components/Enable/NostrEnable.tsx
@@ -1,7 +1,7 @@
-import { CheckIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
 import ConfirmOrCancel from "@components/ConfirmOrCancel";
 import Container from "@components/Container";
 import PublisherCard from "@components/PublisherCard";
+import { PopiconsCheckLine } from "@popicons/react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import Alert from "~/app/components/Alert";
@@ -76,11 +76,11 @@ function NostrEnableComponent(props: Props) {
             <p className="mb-2">{tCommon("enable.allow")}</p>
 
             <div className="mb-2 flex items-center">
-              <CheckIcon className="w-5 h-5 mr-2" />
+              <PopiconsCheckLine className="w-5 h-5 mr-2" />
               <p className="dark:text-white">{t("request1")}</p>
             </div>
             <div className="mb-2 flex items-center">
-              <CheckIcon className="w-5 h-5 mr-2" />
+              <PopiconsCheckLine className="w-5 h-5 mr-2" />
               <p className="dark:text-white">{t("request2")}</p>
             </div>
           </div>

diff --git a/src/app/components/Enable/WebbtcEnable.tsx b/src/app/components/Enable/WebbtcEnable.tsx
@@ -1,7 +1,7 @@
-import { CheckIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
 import ConfirmOrCancel from "@components/ConfirmOrCancel";
 import Container from "@components/Container";
 import PublisherCard from "@components/PublisherCard";
+import { PopiconsCheckLine } from "@popicons/react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import Alert from "~/app/components/Alert";
@@ -76,11 +76,11 @@ function WebbtcEnableComponent(props: Props) {
             <p className="mb-2">{tCommon("enable.allow")}</p>
 
             <div className="mb-2 flex items-center">
-              <CheckIcon className="w-5 h-5 mr-2" />
+              <PopiconsCheckLine className="w-5 h-5 mr-2" />
               <p className="dark:text-white">{tCommon("enable.request1")}</p>
             </div>
             <div className="mb-2 flex items-center">
-              <CheckIcon className="w-5 h-5 mr-2" />
+              <PopiconsCheckLine className="w-5 h-5 mr-2" />
               <p className="dark:text-white">{t("request2")}</p>
             </div>
           </div>

diff --git a/src/app/components/Enable/WeblnEnable.tsx b/src/app/components/Enable/WeblnEnable.tsx
@@ -1,7 +1,7 @@
-import { CheckIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
 import ConfirmOrCancel from "@components/ConfirmOrCancel";
 import Container from "@components/Container";
 import PublisherCard from "@components/PublisherCard";
+import { PopiconsCheckLine } from "@popicons/react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import Alert from "~/app/components/Alert";
@@ -76,11 +76,11 @@ function WeblnEnableComponent(props: Props) {
             <p className="mb-2">{tCommon("enable.allow")}</p>
 
             <div className="mb-2 flex items-center">
-              <CheckIcon className="w-5 h-5 mr-2" />
+              <PopiconsCheckLine className="w-5 h-5 mr-2" />
               <p className="dark:text-white">{tCommon("enable.request1")}</p>
             </div>
             <div className="mb-2 flex items-center">
-              <CheckIcon className="w-5 h-5 mr-2" />
+              <PopiconsCheckLine className="w-5 h-5 mr-2" />
               <p className="dark:text-white">{t("request2")}</p>
             </div>
           </div>

diff --git a/src/app/components/IconLinkCard/IconLinkCard.tsx b/src/app/components/IconLinkCard/IconLinkCard.tsx
@@ -1,4 +1,4 @@
-import { PopiconsChevronRightSolid } from "@popicons/react";
+import { PopiconsChevronRightLine } from "@popicons/react";
 
 export type IconLinkCardProps = {
   title: string;
@@ -18,7 +18,9 @@ export function IconLinkCard({
       className="border border-gray-200 dark:border-neutral-800 rounded-xl p-4 bg-white dark:bg-surface-01dp hover:bg-gray-50 dark:hover:bg-surface-02dp text-gray-800 dark:text-neutral-200 cursor-pointer flex flex-row items-center gap-3"
       onClick={onClick}
     >
-      <div className="flex-shrink-0 flex justify-center md:px-3">{icon}</div>
+      <div className="flex-shrink-0 flex justify-center md:px-3 text-gray-400 dark:text-neutral-600">
+        {icon}
+      </div>
       <div className="flex-grow space-y-0.5">
         <div className="font-medium leading-5 text-sm md:text-base">
           {title}
@@ -28,7 +30,7 @@ export function IconLinkCard({
         </div>
       </div>
       <div className="flex-shrink-0 flex justify-end text-gray-400 dark:text-neutral-600 ">
-        <PopiconsChevronRightSolid className="w-5" />
+        <PopiconsChevronRightLine className="w-5" />
       </div>
     </div>
   );

diff --git a/src/app/components/InputCopyButton/index.tsx b/src/app/components/InputCopyButton/index.tsx
@@ -1,6 +1,5 @@
-import { CopyIcon as CopyFilledIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
-import { CopyIcon } from "@bitcoin-design/bitcoin-icons-react/outline";
-import { useState } from "react";
+import { PopiconsCopyLine } from "@popicons/react";
+import { t } from "i18next";
 import toast from "~/app/components/Toast";
 import { classNames } from "~/app/utils";
 
@@ -10,31 +9,27 @@ type Props = {
 };
 
 function InputCopyButton({ value, className }: Props) {
-  const [copied, setCopied] = useState(false);
-  const CurrentIcon = copied ? CopyFilledIcon : CopyIcon;
   return (
     <button
       type="button"
       tabIndex={-1}
       className={classNames(
         "flex justify-center items-center h-8 w-10",
+        "text-gray-400 dark:text-neutral-600 hover:text-gray-600 hover:dark:text-neutral-400",
         !!className && className
       )}
       onClick={async () => {
         try {
           navigator.clipboard.writeText(value);
-          setCopied(true);
-          setTimeout(() => {
-            setCopied(false);
-          }, 1000);
+          toast.success(t("common:actions.copied_to_clipboard"));
         } catch (e) {
           if (e instanceof Error) {
             toast.error(e.message);
           }
         }
       }}
     >
-      <CurrentIcon className="w-6 h-6" />
+      <PopiconsCopyLine className="w-6 h-6" />
     </button>
   );
 }

diff --git a/src/app/components/Modal/index.tsx b/src/app/components/Modal/index.tsx
@@ -1,4 +1,4 @@
-import { CrossIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
+import { PopiconsXLine } from "@popicons/react";
 import ReactModal from "react-modal";
 import { classNames } from "~/app/utils";
 
@@ -42,7 +42,7 @@ export default function Modal({
         onClick={closeModal}
         className="absolute right-5 top-5 text-gray-600 dark:text-neutral-400 hover:text-gray-700 dark:hover:text-neutral-300"
       >
-        <CrossIcon className="w-6 h-6" />
+        <PopiconsXLine className="w-6 h-6" />
       </button>
       {children}
     </ReactModal>

diff --git a/src/app/components/PublishersTable/index.tsx b/src/app/components/PublishersTable/index.tsx
@@ -1,4 +1,4 @@
-import { CaretRightIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
+import { PopiconsChevronRightLine } from "@popicons/react";
 import { useTranslation } from "react-i18next";
 import BadgesList from "~/app/components/BadgesList";
 import { useSettings } from "~/app/context/SettingsContext";
@@ -53,7 +53,7 @@ export default function PublishersTable({
                       </p>
                       <BadgesList allowance={publisher} />
                     </div>
-                    <div className="text-sm space-x-2 text-gray-500 dark:text-neutral-400">
+                    <div className="text-sm space-x-2 text-gray-600 dark:text-neutral-400">
                       <span>{publisher.host}</span>
                       <span>•</span>
                       <span>
@@ -84,7 +84,7 @@ export default function PublishersTable({
                 </div>
               </td>
               <td className="w-10">
-                <CaretRightIcon className="h-6 w-6 text-gray-500" />
+                <PopiconsChevronRightLine className="h-6 w-6 text-gray-600 dark:text-neutral-400" />
               </td>
             </tr>
           ))}

diff --git a/src/app/components/QrcodeAdornment/index.tsx b/src/app/components/QrcodeAdornment/index.tsx
@@ -1,4 +1,4 @@
-import { QrCodeIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
+import { PopiconsQrCodeMinimalLine } from "@popicons/react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 
@@ -20,7 +20,7 @@ export default function QrcodeAdornment({ route }: Props) {
         navigate("/scanQRCode", { state: { route: route }, replace: true });
       }}
     >
-      <QrCodeIcon className="h-6 w-6 text-blue-600" />
+      <PopiconsQrCodeMinimalLine className="h-5 w-5 text-blue-600" />
     </button>
   );
 }