remove feather-icons and vue-feather

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",

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)

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">

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>

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: () => [] },

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 },

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">

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">

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>