From 3d2749c4cfab93ee34e491559e1419ea7a261a2d Mon Sep 17 00:00:00 2001
From: arobsn <87387688+arobsn@users.noreply.github.com>
Date: Tue, 17 Dec 2024 16:42:57 -0300
Subject: [PATCH] remove `feather-icons` and `vue-feather`

---
 package.json                                  |  2 --
 pnpm-lock.yaml                                | 35 -------------------
 src/boot/commonSetup.ts                       |  2 --
 src/components/LedgerDevice.vue               | 15 +++-----
 src/components/SignStateModal.vue             | 13 ++-----
 src/components/TxBoxDetails.vue               |  7 ++--
 src/components/TxSignView.vue                 |  6 ++--
 src/extension/connector/views/AuthView.vue    |  9 ++---
 .../connector/views/SignDataView.vue          | 10 +++---
 src/views/TransactionHistory.vue              |  4 +--
 10 files changed, 28 insertions(+), 75 deletions(-)

diff --git a/package.json b/package.json
index 0778ecf9..df429218 100755
--- a/package.json
+++ b/package.json
@@ -43,14 +43,12 @@
     "dayjs": "^1.11.13",
     "dexie": "^4.0.10",
     "ergo-lib-wasm-browser": "^0.28.0",
-    "feather-icons": "^4.29.2",
     "ledger-ergo-js": "^0.1.20",
     "lodash-es": "^4.17.21",
     "lucide-vue-next": "^0.468.0",
     "pinia": "^2.3.0",
     "uqr": "^0.1.2",
     "vue": "^3.5.13",
-    "vue-feather": "^2.0.0",
     "vue-json-pretty": "2.4.0",
     "vue-router": "^4.5.0",
     "webext-bridge": "^6.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 46614065..15ff4c19 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -73,9 +73,6 @@ importers:
       ergo-lib-wasm-browser:
         specifier: ^0.28.0
         version: 0.28.0
-      feather-icons:
-        specifier: ^4.29.2
-        version: 4.29.2
       ledger-ergo-js:
         specifier: ^0.1.20
         version: 0.1.20
@@ -94,9 +91,6 @@ importers:
       vue:
         specifier: ^3.5.13
         version: 3.5.13(typescript@5.7.2)
-      vue-feather:
-        specifier: ^2.0.0
-        version: 2.0.0(feather-icons@4.29.2)(vue@3.5.13(typescript@5.7.2))
       vue-json-pretty:
         specifier: 2.4.0
         version: 2.4.0(vue@3.5.13(typescript@5.7.2))
@@ -1521,9 +1515,6 @@ packages:
   cipher-base@1.0.4:
     resolution: {integrity: sha512-Kkht5ye6ZGmwv40uUDZztayT2ThLQGfnj/T71N/XzeZeo3nf8foyW7zGTsPYkEya3m5f3cAypH+qe7YOrM1U2Q==}
 
-  classnames@2.5.1:
-    resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==}
-
   cleave.js@1.6.0:
     resolution: {integrity: sha512-ivqesy3j5hQVG3gywPfwKPbi/7ZSftY/UNp5uphnqjr25yI2CP8FS2ODQPzuLXXnNLi29e2+PgPkkiKUXLs/Nw==}
 
@@ -1583,9 +1574,6 @@ packages:
     resolution: {integrity: sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==}
     engines: {node: '>=12.13'}
 
-  core-js@3.39.0:
-    resolution: {integrity: sha512-raM0ew0/jJUqkJ0E6e8UDtl+y/7ktFivgWvqw8dNSQeNWoSDLvQ1H/RN3aPXB9tBd4/FhyR4RDPGhsNIMsAn7g==}
-
   core-util-is@1.0.3:
     resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==}
 
@@ -2010,9 +1998,6 @@ packages:
   fastq@1.17.1:
     resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==}
 
-  feather-icons@4.29.2:
-    resolution: {integrity: sha512-0TaCFTnBTVCz6U+baY2UJNKne5ifGh7sMG4ZC2LoBWCZdIyPa+y6UiR4lEYGws1JOFWdee8KAsAIvu0VcXqiqA==}
-
   file-entry-cache@8.0.0:
     resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
     engines: {node: '>=16.0.0'}
@@ -3552,12 +3537,6 @@ packages:
     peerDependencies:
       eslint: '>=6.0.0'
 
-  vue-feather@2.0.0:
-    resolution: {integrity: sha512-GBvxJWu2ycGTpB8duYWnc5S/TwWPPb2G5Ft2NbkwK1vZkUDUOTYqIb4Nh1HOL6A37Isfrd0Guun0lesS97PfxA==}
-    peerDependencies:
-      feather-icons: ^4.28.0
-      vue: ^3.0.0
-
   vue-json-pretty@2.4.0:
     resolution: {integrity: sha512-e9bP41DYYIc2tWaB6KuwqFJq5odZ8/GkE6vHQuGcbPn37kGk4a3n1RNw3ZYeDrl66NWXgTlOfS+M6NKkowmkWw==}
     engines: {node: '>= 10.0.0', npm: '>= 5.0.0'}
@@ -5049,8 +5028,6 @@ snapshots:
       inherits: 2.0.4
       safe-buffer: 5.2.1
 
-  classnames@2.5.1: {}
-
   cleave.js@1.6.0: {}
 
   cli-boxes@3.0.0: {}
@@ -5107,8 +5084,6 @@ snapshots:
     dependencies:
       is-what: 4.1.16
 
-  core-js@3.39.0: {}
-
   core-util-is@1.0.3: {}
 
   create-ecdh@4.0.4:
@@ -5654,11 +5629,6 @@ snapshots:
     dependencies:
       reusify: 1.0.4
 
-  feather-icons@4.29.2:
-    dependencies:
-      classnames: 2.5.1
-      core-js: 3.39.0
-
   file-entry-cache@8.0.0:
     dependencies:
       flat-cache: 4.0.1
@@ -7358,11 +7328,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vue-feather@2.0.0(feather-icons@4.29.2)(vue@3.5.13(typescript@5.7.2)):
-    dependencies:
-      feather-icons: 4.29.2
-      vue: 3.5.13(typescript@5.7.2)
-
   vue-json-pretty@2.4.0(vue@3.5.13(typescript@5.7.2)):
     dependencies:
       vue: 3.5.13(typescript@5.7.2)
diff --git a/src/boot/commonSetup.ts b/src/boot/commonSetup.ts
index caba89ff..f51f3c1e 100644
--- a/src/boot/commonSetup.ts
+++ b/src/boot/commonSetup.ts
@@ -2,7 +2,6 @@ import { Config, Inputitems, Modal, Slider, Switch } from "@oruga-ui/oruga-next"
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import { App } from "vue";
-import VueFeather from "vue-feather";
 import { createPinia } from "pinia";
 import AssetIcon from "@/components/AssetIcon.vue";
 import ClickToCopy from "@/components/ClickToCopy.vue";
@@ -36,7 +35,6 @@ export function setupApp(app: App): App {
     .use(Switch)
     .use(Config, ORUGA_SETTINGS)
     .directive("cleave", vueCleave)
-    .component("vue-feather", VueFeather)
     .component("click-to-copy", ClickToCopy)
     .component("tool-tip", ToolTip)
     .component("loading-indicator", LoadingIndicator)
diff --git a/src/components/LedgerDevice.vue b/src/components/LedgerDevice.vue
index 209bf1dc..d6b238a1 100644
--- a/src/components/LedgerDevice.vue
+++ b/src/components/LedgerDevice.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { isDefined } from "@fleet-sdk/common";
 import { computed, PropType } from "vue";
+import { CheckIcon, CircleAlertIcon, XIcon } from "lucide-vue-next";
 import ledgerS from "@/assets/images/hw-devices/ledger-s.svg";
 import ledgerX from "@/assets/images/hw-devices/ledger-x.svg";
 import { LedgerDeviceModelId } from "@/constants/ledger";
@@ -44,16 +45,8 @@ const screenPosition = computed(() =>
               type="circular"
               class="w-5 h-5 min-w-5"
             />
-            <vue-feather
-              v-else-if="state === ProverStateType.success"
-              type="check"
-              class="text-green-300"
-            />
-            <vue-feather
-              v-else-if="state === ProverStateType.error"
-              type="x"
-              class="text-red-300"
-            />
+            <check-icon v-else-if="state === ProverStateType.success" class="text-green-300" />
+            <x-icon v-else-if="state === ProverStateType.error" class="text-red-300" />
 
             <span v-if="screenText" class="font-semibold">{{ screenText }}</span>
           </div>
@@ -69,7 +62,7 @@ const screenPosition = computed(() =>
     </div>
     <div v-else-if="!validState">
       <p class="text-center text-red-600">
-        <vue-feather type="alert-circle" size="64" />
+        <circle-alert-icon :size="64" />
       </p>
       <p class="text-center font-semibold">Ledger device not found!</p>
       <p class="px-1 pt-4 text-sm text-gray-500">
diff --git a/src/components/SignStateModal.vue b/src/components/SignStateModal.vue
index 3a4ec3d1..0dd45014 100644
--- a/src/components/SignStateModal.vue
+++ b/src/components/SignStateModal.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, PropType } from "vue";
 import { isDefined } from "@fleet-sdk/common";
+import { CircleAlertIcon, CircleCheckIcon } from "lucide-vue-next";
 import { ProverStateType } from "../types/internal";
 import { useAppStore } from "@/stores/appStore";
 
@@ -58,16 +59,8 @@ function getTransactionExplorerUrl(txId: string): string {
   >
     <div class="p-5 min-w-60 max-w-85 text-center">
       <div :class="stateClass" class="w-full h-26">
-        <vue-feather
-          v-if="state === ProverStateType.success"
-          type="check-circle"
-          class="w-25 h-25"
-        />
-        <vue-feather
-          v-else-if="state === ProverStateType.error"
-          type="alert-circle"
-          class="w-25 h-25"
-        />
+        <circle-check-icon v-if="state === ProverStateType.success" class="w-25 h-25 inline" />
+        <circle-alert-icon v-else-if="state === ProverStateType.error" class="w-25 h-25 inline" />
         <loading-indicator v-else type="circular" class="w-25 h-25 !stroke-gray-500" />
       </div>
       <h1 class="pt-4 font-semibold text-xl" :class="stateClass">{{ titleText }}</h1>
diff --git a/src/components/TxBoxDetails.vue b/src/components/TxBoxDetails.vue
index 0f80968c..21eed3fe 100644
--- a/src/components/TxBoxDetails.vue
+++ b/src/components/TxBoxDetails.vue
@@ -62,7 +62,7 @@
                     </div>
                   </div>
                 </template>
-                <vue-feather type="git-commit" class="align-middle pl-2" size="18" />
+                <git-commit-vertical-icon class="align-middle pl-2" />
               </tool-tip>
             </div>
             <div>
@@ -77,7 +77,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
-import { ArrowDownUpIcon } from "lucide-vue-next";
+import { ArrowDownUpIcon, GitCommitVerticalIcon } from "lucide-vue-next";
 import { OutputAsset } from "@/chains/ergo/transaction/interpreter/outputInterpreter";
 import { ERG_TOKEN_ID } from "@/constants/ergo";
 import BabelBadge from "@/assets/images/babel-badge.svg";
@@ -89,7 +89,8 @@ export default defineComponent({
   components: {
     BabelBadge,
     EmptyLogo,
-    ArrowDownUpIcon
+    ArrowDownUpIcon,
+    GitCommitVerticalIcon
   },
   props: {
     assets: { type: Array as PropType<Array<OutputAsset>>, default: () => [] },
diff --git a/src/components/TxSignView.vue b/src/components/TxSignView.vue
index 7b8faf76..df7fad27 100644
--- a/src/components/TxSignView.vue
+++ b/src/components/TxSignView.vue
@@ -67,7 +67,7 @@
 
     <template v-if="!isLedger">
       <p v-if="isReadonly" class="text-sm text-center">
-        <vue-feather type="alert-triangle" class="text-yellow-500 align-middle" size="20" />
+        <triangle-alert-icon class="text-yellow-500 align-middle" :size="20" />
         <span class="align-middle"> This wallet cannot sign transactions.</span>
       </p>
       <div v-else class="text-left">
@@ -133,6 +133,7 @@ import {
   SignedInput,
   SignedTransaction
 } from "@fleet-sdk/common";
+import { TriangleAlertIcon } from "lucide-vue-next";
 import TxBoxDetails from "./TxBoxDetails.vue";
 import LedgerDevice from "./LedgerDevice.vue";
 import { TxInterpreter } from "@/chains/ergo/transaction/interpreter/txInterpreter";
@@ -156,7 +157,8 @@ export default defineComponent({
     SignStateModal,
     TxBoxDetails,
     VueJsonPretty,
-    LedgerDevice
+    LedgerDevice,
+    TriangleAlertIcon
   },
   props: {
     transaction: { type: Object as PropType<Readonly<EIP12UnsignedTransaction>>, required: false },
diff --git a/src/extension/connector/views/AuthView.vue b/src/extension/connector/views/AuthView.vue
index c80a76fc..00d05544 100644
--- a/src/extension/connector/views/AuthView.vue
+++ b/src/extension/connector/views/AuthView.vue
@@ -3,6 +3,7 @@ import { computed, onMounted, ref, watch } from "vue";
 import { useVuelidate } from "@vuelidate/core";
 import { helpers, requiredUnless } from "@vuelidate/validators";
 import { useEventListener } from "@vueuse/core";
+import { TriangleAlertIcon } from "lucide-vue-next";
 import { queue } from "@/extension/connector/rpc/uiRpcHandlers";
 import { error, InternalRequest, success } from "@/extension/connector/rpc/protocol";
 import { ProverStateType, WalletType } from "@/types/internal";
@@ -28,7 +29,7 @@ const isReadonly = computed(() => wallet.type === WalletType.ReadOnly);
 const isLedger = computed(() => wallet.type === WalletType.Ledger);
 const signState = computed(() => (errorMessage.value ? ProverStateType.error : undefined));
 
-const removeEventListener = useEventListener(window, "beforeunload", refuse);
+const detachBeforeUnloadListener = useEventListener(window, "beforeunload", refuse);
 const $v = useVuelidate(
   {
     password: {
@@ -89,7 +90,7 @@ async function authenticate() {
     if (!request.value) return proverError("Prover returned undefined.");
     request.value.resolve(success(result));
 
-    removeEventListener();
+    detachBeforeUnloadListener();
     window.close();
   } catch (e) {
     if (e instanceof PasswordError) {
@@ -106,7 +107,7 @@ function proverError(message: string) {
 
 function cancel() {
   refuse();
-  removeEventListener();
+  detachBeforeUnloadListener();
   window.close();
 }
 
@@ -138,7 +139,7 @@ function refuse() {
     <div class="flex-grow"></div>
 
     <p v-if="isReadonly || isLedger" class="text-sm text-center space-x-2">
-      <vue-feather type="alert-triangle" class="text-yellow-500 align-middle" size="20" />
+      <triangle-alert-icon class="text-yellow-500 align-middle inline" :size="20" />
       <span class="align-middle">This wallet cannot sign messages.</span>
     </p>
     <div v-else class="text-left">
diff --git a/src/extension/connector/views/SignDataView.vue b/src/extension/connector/views/SignDataView.vue
index 73cbf73b..39237957 100644
--- a/src/extension/connector/views/SignDataView.vue
+++ b/src/extension/connector/views/SignDataView.vue
@@ -7,6 +7,7 @@ import { ErgoMessage, MessageType } from "@fleet-sdk/core";
 import { hex } from "@fleet-sdk/crypto";
 import VueJsonPretty from "vue-json-pretty";
 import type { JsonObject } from "type-fest";
+import { TriangleAlertIcon } from "lucide-vue-next";
 import { queue } from "@/extension/connector/rpc/uiRpcHandlers";
 import { error, InternalRequest, success } from "@/extension/connector/rpc/protocol";
 import { ProverStateType, WalletType } from "@/types/internal";
@@ -39,7 +40,8 @@ const isReadonly = computed(() => wallet.type === WalletType.ReadOnly);
 const isLedger = computed(() => wallet.type === WalletType.Ledger);
 const signState = computed(() => (errorMessage.value ? ProverStateType.error : undefined));
 
-const removeEventListener = useEventListener(window, "beforeunload", refuse);
+const detachUnloadListener = useEventListener(window, "beforeunload", refuse);
+
 const $v = useVuelidate(
   {
     password: {
@@ -128,7 +130,7 @@ async function authenticate() {
     if (!request.value) return proverError("Prover returned undefined.");
     request.value.resolve(success(proof));
 
-    removeEventListener();
+    detachUnloadListener();
     window.close();
   } catch (e) {
     if (e instanceof PasswordError) {
@@ -145,7 +147,7 @@ function proverError(message: string) {
 
 function cancel() {
   refuse();
-  removeEventListener();
+  detachUnloadListener();
   window.close();
 }
 
@@ -192,7 +194,7 @@ function refuse() {
     <div class="flex-grow"></div>
 
     <p v-if="isReadonly || isLedger" class="text-sm text-center space-x-2">
-      <vue-feather type="alert-triangle" class="text-yellow-500 align-middle" size="20" />
+      <triangle-alert-icon class="text-yellow-500 align-middle inline" :size="20" />
       <span class="align-middle">This wallet cannot sign messages.</span>
     </p>
     <div v-else class="text-left">
diff --git a/src/views/TransactionHistory.vue b/src/views/TransactionHistory.vue
index 71352e51..e3117a8a 100644
--- a/src/views/TransactionHistory.vue
+++ b/src/views/TransactionHistory.vue
@@ -4,7 +4,7 @@ import { BoxSummary, orderBy, uniqBy } from "@fleet-sdk/common";
 import type { BigNumber } from "bignumber.js";
 import { ErgoAddress } from "@fleet-sdk/core";
 import { formatTimeAgo, useInfiniteScroll } from "@vueuse/core";
-import { DownloadIcon, UploadIcon } from "lucide-vue-next";
+import { ClockIcon, DownloadIcon, UploadIcon } from "lucide-vue-next";
 import EmptyLogo from "@/assets/images/tokens/asset-empty.svg";
 import { useWalletStore } from "@/stores/walletStore";
 import { graphQLService } from "@/chains/ergo/services/graphQlService";
@@ -217,7 +217,7 @@ function cancelTransaction(tx: UnconfirmedTransactionSummary) {
       v-else-if="allLoaded && !txHistory?.length"
       class="flex flex-col gap-4 pt-20 px-4 text-center items-center text-gray-500"
     >
-      <vue-feather type="clock" size="64" class="text-gray-400" />
+      <clock-icon :size="64" class="text-gray-400" />
       You have no transaction history.
     </div>
   </div>