From c6cef1900fa87f37ab6f7eb1215db9ae30978f83 Mon Sep 17 00:00:00 2001 From: Amit Amrutiya Date: Thu, 14 Mar 2024 15:24:33 +0530 Subject: [PATCH] feat: bitcoin-icons-react with popicons (#3072) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: replace bitcoin-icons-react with popicons Signed-off-by: amitamrutiya2210 * feat: add all possible popicons icons Signed-off-by: amitamrutiya2210 * feat: add svg icons and remove bitcoin-icons-react library Signed-off-by: amitamrutiya2210 * 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 Co-authored-by: René Aaron --- package.json | 1 - .../components/AccountDetailLayout/index.tsx | 4 +-- src/app/components/AccountMenu/index.test.tsx | 1 - src/app/components/AccountMenu/index.tsx | 35 +++++++------------ src/app/components/CardButton/index.tsx | 12 ++++--- src/app/components/Enable/AlbyEnable.tsx | 6 ++-- src/app/components/Enable/LiquidEnable.tsx | 6 ++-- src/app/components/Enable/NostrEnable.tsx | 6 ++-- src/app/components/Enable/WebbtcEnable.tsx | 6 ++-- src/app/components/Enable/WeblnEnable.tsx | 6 ++-- .../components/IconLinkCard/IconLinkCard.tsx | 8 +++-- src/app/components/InputCopyButton/index.tsx | 15 +++----- src/app/components/Modal/index.tsx | 4 +-- src/app/components/PublishersTable/index.tsx | 6 ++-- src/app/components/QrcodeAdornment/index.tsx | 4 +-- src/app/components/QrcodeScanner/index.tsx | 4 +-- src/app/components/SatButtons/index.tsx | 5 ++- src/app/components/Toast/index.tsx | 4 +-- .../TransactionsTable/TransactionModal.tsx | 24 ++++++------- .../components/TransactionsTable/index.tsx | 13 +++---- src/app/components/onboard/index.tsx | 13 +++---- src/app/icons/SatoshiIcon.tsx | 14 ++++++++ src/app/icons/popicons/BitcoinCircleLine.tsx | 27 ++++++++++++++ src/app/icons/popicons/CircleInfoLine.tsx | 31 ++++++++++++++++ src/app/icons/popicons/GlobeLine.tsx | 21 +++++++++++ src/app/screens/Accounts/index.tsx | 13 +++---- .../Bitcoin/ConfirmGetAddress/index.tsx | 4 +-- src/app/screens/Home/AllowanceView/index.tsx | 4 +-- src/app/screens/Home/DefaultView/index.tsx | 18 ++++------ src/app/screens/Keysend/index.tsx | 4 +-- src/app/screens/LNURLPay/index.tsx | 16 ++++----- src/app/screens/LNURLRedeem/index.tsx | 4 +-- src/app/screens/Liquid/ConfirmGetAddress.tsx | 4 +-- src/app/screens/Liquid/ConfirmSignPset.tsx | 4 +-- src/app/screens/Nostr/ConfirmDecrypt.tsx | 4 +-- src/app/screens/Nostr/ConfirmGetPublicKey.tsx | 4 +-- src/app/screens/OnChainReceive/index.tsx | 4 +-- src/app/screens/Receive/index.tsx | 23 ++++++------ src/app/screens/ReceiveInvoice/index.tsx | 9 ++--- src/app/screens/ScanQRCode/index.tsx | 4 +-- src/app/screens/Send/index.tsx | 4 +-- .../screens/SendToBitcoinAddress/index.tsx | 10 +++--- .../connectors/ConnectCommando/index.tsx | 12 +++---- .../screens/connectors/ConnectLnd/index.tsx | 4 +-- src/i18n/locales/en/translation.json | 1 - yarn.lock | 5 --- 46 files changed, 241 insertions(+), 190 deletions(-) create mode 100644 src/app/icons/SatoshiIcon.tsx create mode 100644 src/app/icons/popicons/BitcoinCircleLine.tsx create mode 100644 src/app/icons/popicons/CircleInfoLine.tsx create mode 100644 src/app/icons/popicons/GlobeLine.tsx diff --git a/package.json b/package.json index a2e59da10c..99bfae97b9 100644 --- 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 index 3d4e62e93f..39a6604c0d 100644 --- 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={ } + icon={} /> } > diff --git a/src/app/components/AccountMenu/index.test.tsx b/src/app/components/AccountMenu/index.test.tsx index 77a29c71fa..1a8c6970de 100644 --- 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 index 9468fc6399..48c2eba1d2 100644 --- 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 ( -
+
@@ -79,7 +78,7 @@ function AccountMenu({ showOptions = true }: Props) { >
{accountLoading ? ( @@ -88,7 +87,7 @@ function AccountMenu({ showOptions = true }: Props) { )}
- + {t("screen_reader")}
@@ -99,7 +98,7 @@ function AccountMenu({ showOptions = true }: Props) { !title && !balancesDecorated ? "w-28" : "" }`} > - + {tCommon("balance")}

@@ -110,7 +109,7 @@ function AccountMenu({ showOptions = true }: Props) { balancesDecorated.accountBalance )} - + {accountLoading ? ( ) : ( @@ -127,7 +126,7 @@ function AccountMenu({ showOptions = true }: Props) { openOptions(`accounts/${authAccount?.id}`); }} > - + {t("options.account.wallet_settings")} {(isAlbyLNDHubAccount( @@ -140,7 +139,7 @@ function AccountMenu({ showOptions = true }: Props) { window.open(`https://getalby.com/user`, "_blank"); }} > - + {t("options.account.go_to_web_wallet")} → )} @@ -192,17 +191,9 @@ function AccountMenu({ showOptions = true }: Props) { openOptions("accounts/new"); }} > - + {t("options.account.add")} - { - openOptions("accounts"); - }} - > - - {t("options.account.manage")} - )} diff --git a/src/app/components/CardButton/index.tsx b/src/app/components/CardButton/index.tsx index 23c9fe2a6c..fbbae10181 100644 --- 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>; + export default function CardButton({ title, description, diff --git a/src/app/components/Enable/AlbyEnable.tsx b/src/app/components/Enable/AlbyEnable.tsx index 8db3fa7184..cc0262b0be 100644 --- 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) {

{tCommon("enable.allow")}

- +

{tCommon("enable.request1")}

- +

{t("request2")}

diff --git a/src/app/components/Enable/LiquidEnable.tsx b/src/app/components/Enable/LiquidEnable.tsx index 7e63089526..78dc6d6b38 100644 --- 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) {

{tCommon("enable.allow")}

- +

{tCommon("enable.request1")}

- +

{t("request2")}

diff --git a/src/app/components/Enable/NostrEnable.tsx b/src/app/components/Enable/NostrEnable.tsx index bfbbbba40e..f35e0f8d82 100644 --- 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) {

{tCommon("enable.allow")}

- +

{t("request1")}

- +

{t("request2")}

diff --git a/src/app/components/Enable/WebbtcEnable.tsx b/src/app/components/Enable/WebbtcEnable.tsx index 101ef891fa..353adf9fbe 100644 --- 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) {

{tCommon("enable.allow")}

- +

{tCommon("enable.request1")}

- +

{t("request2")}

diff --git a/src/app/components/Enable/WeblnEnable.tsx b/src/app/components/Enable/WeblnEnable.tsx index 8434fbe94b..11c0ee0095 100644 --- 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) {

{tCommon("enable.allow")}

- +

{tCommon("enable.request1")}

- +

{t("request2")}

diff --git a/src/app/components/IconLinkCard/IconLinkCard.tsx b/src/app/components/IconLinkCard/IconLinkCard.tsx index 7c5da442bf..52639c6d11 100644 --- 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} > -
{icon}
+
+ {icon} +
{title} @@ -28,7 +30,7 @@ export function IconLinkCard({
- +
); diff --git a/src/app/components/InputCopyButton/index.tsx b/src/app/components/InputCopyButton/index.tsx index 274b6eb7c7..8b0011ec08 100644 --- 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,23 +9,19 @@ type Props = { }; function InputCopyButton({ value, className }: Props) { - const [copied, setCopied] = useState(false); - const CurrentIcon = copied ? CopyFilledIcon : CopyIcon; return ( ); } diff --git a/src/app/components/Modal/index.tsx b/src/app/components/Modal/index.tsx index 791a08257d..7d9580fe51 100644 --- 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" > - + {children} diff --git a/src/app/components/PublishersTable/index.tsx b/src/app/components/PublishersTable/index.tsx index e4aa098027..386f21c058 100644 --- 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({

-
+
{publisher.host} • @@ -84,7 +84,7 @@ export default function PublishersTable({
- + ))} diff --git a/src/app/components/QrcodeAdornment/index.tsx b/src/app/components/QrcodeAdornment/index.tsx index 555514f3ae..297fe99330 100644 --- 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 }); }} > - + ); } diff --git a/src/app/components/QrcodeScanner/index.tsx b/src/app/components/QrcodeScanner/index.tsx index a3c1b54c99..711721cf14 100644 --- a/src/app/components/QrcodeScanner/index.tsx +++ b/src/app/components/QrcodeScanner/index.tsx @@ -1,4 +1,4 @@ -import { QrCodeIcon } from "@bitcoin-design/bitcoin-icons-react/filled"; +import { PopiconsQrCodeMinimalLine } from "@popicons/react"; import { Html5Qrcode, Html5QrcodeScannerState } from "html5-qrcode"; import { useEffect, useRef, useState } from "react"; import { useTranslation } from "react-i18next"; @@ -130,7 +130,7 @@ function QrcodeScanner({ onClick={handleRequestCameraPermissions} />
- + )} diff --git a/src/app/components/SatButtons/index.tsx b/src/app/components/SatButtons/index.tsx index 33e45ecdbc..8b746ddeb1 100644 --- a/src/app/components/SatButtons/index.tsx +++ b/src/app/components/SatButtons/index.tsx @@ -1,5 +1,4 @@ -import { SatoshiV2Icon } from "@bitcoin-design/bitcoin-icons-react/filled"; - +import SatoshiIcon from "~/app/icons/SatoshiIcon"; import Button from "../Button"; type Props = { @@ -17,7 +16,7 @@ function SatButtons({ onClick, disabled, min, max }: Props) { {sizes.map((size) => (