From 61b5ddb5fc3150271d7a46d27d00eff83e7fb83d Mon Sep 17 00:00:00 2001
From: arobsn <87387688+arobsn@users.noreply.github.com>
Date: Tue, 17 Dec 2024 12:26:41 -0300
Subject: [PATCH] remove `@mdi/js` `mdi-vue`

---
 package.json                                  |  2 -
 pnpm-lock.yaml                                | 22 -------
 public/icons/dapps/optimizer.svg              |  1 +
 src/boot/commonSetup.ts                       | 41 ------------
 src/components/AssetInfoModal.vue             |  6 +-
 src/components/ImageSandbox.vue               | 22 ++++---
 src/components/MdiIcon.vue                    |  3 -
 src/components/TxBoxDetails.vue               | 10 ++-
 src/components/WalletItem.vue                 |  8 +--
 src/dapps/DappsList.vue                       |  2 +-
 src/dapps/dappsManifest.ts                    | 10 +--
 .../WalletOptimizationDApp.vue                | 64 +++++++------------
 src/views/AssetsView.vue                      |  8 ++-
 src/views/ReceiveView.vue                     | 12 ++--
 src/views/add/AddView.vue                     |  7 +-
 15 files changed, 67 insertions(+), 151 deletions(-)
 create mode 100644 public/icons/dapps/optimizer.svg
 delete mode 100644 src/components/MdiIcon.vue

diff --git a/package.json b/package.json
index 9a1a8a36..0778ecf9 100755
--- a/package.json
+++ b/package.json
@@ -33,7 +33,6 @@
     "@fleet-sdk/serializer": "^0.8.0",
     "@fleet-sdk/wallet": "^0.8.1",
     "@ledgerhq/hw-transport-webusb": "^6.29.4",
-    "@mdi/js": "^7.4.47",
     "@oruga-ui/oruga-next": "0.6.0",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
@@ -48,7 +47,6 @@
     "ledger-ergo-js": "^0.1.20",
     "lodash-es": "^4.17.21",
     "lucide-vue-next": "^0.468.0",
-    "mdi-vue": "^3.0.13",
     "pinia": "^2.3.0",
     "uqr": "^0.1.2",
     "vue": "^3.5.13",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a4fb8bc9..46614065 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -43,9 +43,6 @@ importers:
       '@ledgerhq/hw-transport-webusb':
         specifier: ^6.29.4
         version: 6.29.4
-      '@mdi/js':
-        specifier: ^7.4.47
-        version: 7.4.47
       '@oruga-ui/oruga-next':
         specifier: 0.6.0
         version: 0.6.0(vue@3.5.13(typescript@5.7.2))
@@ -88,9 +85,6 @@ importers:
       lucide-vue-next:
         specifier: ^0.468.0
         version: 0.468.0(vue@3.5.13(typescript@5.7.2))
-      mdi-vue:
-        specifier: ^3.0.13
-        version: 3.0.13(@mdi/js@7.4.47)(vue@3.5.13(typescript@5.7.2))
       pinia:
         specifier: ^2.3.0
         version: 2.3.0(typescript@5.7.2)(vue@3.5.13(typescript@5.7.2))
@@ -633,9 +627,6 @@ packages:
   '@ledgerhq/logs@6.12.0':
     resolution: {integrity: sha512-ExDoj1QV5eC6TEbMdLUMMk9cfvNKhhv5gXol4SmULRVCx/3iyCPhJ74nsb3S0Vb+/f+XujBEj3vQn5+cwS0fNA==}
 
-  '@mdi/js@7.4.47':
-    resolution: {integrity: sha512-KPnNOtm5i2pMabqZxpUz7iQf+mfrYZyKCZ8QNz85czgEt7cuHcGorWfdzUMWYA0SD+a6Hn4FmJ+YhzzzjkTZrQ==}
-
   '@nautilus-js/eip12-types@0.1.11':
     resolution: {integrity: sha512-2KNUHUe5Gtmgyo9g+wZronQGXUYap57CpER9msV2mveMk7i4Lrn3t7Xth8HE2jviOSlZ970arDvbVmrxyv5Q6g==}
 
@@ -2585,12 +2576,6 @@ packages:
   mdast-util-to-hast@13.2.0:
     resolution: {integrity: sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==}
 
-  mdi-vue@3.0.13:
-    resolution: {integrity: sha512-QHfRJZfhTA4FLqxBh4Gzxq+U+V/XQLw9l8lSIwJGMY4L+7oP+5HkAd+rsySIGfcHLEZakN3xcYpcroLZAoh0cw==}
-    peerDependencies:
-      '@mdi/js': '*'
-      vue: '*'
-
   mdn-data@2.0.28:
     resolution: {integrity: sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==}
 
@@ -4103,8 +4088,6 @@ snapshots:
 
   '@ledgerhq/logs@6.12.0': {}
 
-  '@mdi/js@7.4.47': {}
-
   '@nautilus-js/eip12-types@0.1.11': {}
 
   '@noble/curves@1.7.0':
@@ -6255,11 +6238,6 @@ snapshots:
       unist-util-visit: 5.0.0
       vfile: 6.0.3
 
-  mdi-vue@3.0.13(@mdi/js@7.4.47)(vue@3.5.13(typescript@5.7.2)):
-    dependencies:
-      '@mdi/js': 7.4.47
-      vue: 3.5.13(typescript@5.7.2)
-
   mdn-data@2.0.28: {}
 
   mdn-data@2.0.30: {}
diff --git a/public/icons/dapps/optimizer.svg b/public/icons/dapps/optimizer.svg
new file mode 100644
index 00000000..7c9be12e
--- /dev/null
+++ b/public/icons/dapps/optimizer.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><title>consolidate</title><path d="M18 9H20V4H22V9A2 2 0 0 1 20 11H18V13L15 10L18 7M14 10A2 2 0 1 0 12 12A2 2 0 0 0 14 10M2 11V16H4V11H6V13L9 10L6 7V9H4A2 2 0 0 0 2 11M15 16L12 13L9 16H11V18A2 2 0 0 0 13 20H18V18H13V16" /></svg>
\ No newline at end of file
diff --git a/src/boot/commonSetup.ts b/src/boot/commonSetup.ts
index 4e9c86ff..caba89ff 100644
--- a/src/boot/commonSetup.ts
+++ b/src/boot/commonSetup.ts
@@ -1,31 +1,12 @@
-import {
-  mdiAlertCircleOutline,
-  mdiBackupRestore,
-  mdiCheckAll,
-  mdiCheckCircleOutline,
-  mdiClose,
-  mdiConsolidate,
-  mdiEye,
-  mdiEyeOff,
-  mdiFilter,
-  mdiFilterOff,
-  mdiIncognito,
-  mdiShieldCheckOutline,
-  mdiSwapVerticalVariant,
-  mdiWalletOutline,
-  mdiWalletPlus
-} from "@mdi/js";
 import { Config, Inputitems, Modal, Slider, Switch } from "@oruga-ui/oruga-next";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
-import mdiVue from "mdi-vue/v3";
 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";
 import LoadingIndicator from "@/components/LoadingIndicator.vue";
-import MdiIcon from "@/components/MdiIcon.vue";
 import ToolTip from "@/components/ToolTip.vue";
 import { vueCleave } from "@/directives/cleave";
 
@@ -35,26 +16,6 @@ import "@/assets/styles/main.css";
 
 dayjs.extend(relativeTime);
 
-const MDI_SETTINGS = {
-  icons: {
-    mdiIncognito,
-    mdiFilter,
-    mdiFilterOff,
-    mdiAlertCircleOutline,
-    mdiClose,
-    mdiWalletPlus,
-    mdiWalletOutline,
-    mdiBackupRestore,
-    mdiCheckAll,
-    mdiEye,
-    mdiEyeOff,
-    mdiSwapVerticalVariant,
-    mdiConsolidate,
-    mdiCheckCircleOutline,
-    mdiShieldCheckOutline
-  }
-};
-
 const ORUGA_SETTINGS = {
   switch: {
     checkCheckedClass: "bg-blue-600"
@@ -74,12 +35,10 @@ export function setupApp(app: App): App {
     .use(Slider)
     .use(Switch)
     .use(Config, ORUGA_SETTINGS)
-    .use(mdiVue, MDI_SETTINGS)
     .directive("cleave", vueCleave)
     .component("vue-feather", VueFeather)
     .component("click-to-copy", ClickToCopy)
     .component("tool-tip", ToolTip)
     .component("loading-indicator", LoadingIndicator)
-    .component("mdi-icon", MdiIcon)
     .component("asset-icon", AssetIcon);
 }
diff --git a/src/components/AssetInfoModal.vue b/src/components/AssetInfoModal.vue
index a10ebfec..476560bd 100644
--- a/src/components/AssetInfoModal.vue
+++ b/src/components/AssetInfoModal.vue
@@ -7,7 +7,7 @@
     content-class="max-h-95vh bg-transparent relative overflow-hidden !max-w-100 !w-90vw"
   >
     <button type="button" class="fixed top-0 right-0 m-2 text-light-300" @click="close()">
-      <mdi-icon name="close" size="24" />
+      <circle-x-icon />
     </button>
 
     <div v-if="!isImageNft" class="h-10" @click="close()"></div>
@@ -67,6 +67,7 @@
 import { defineComponent, PropType } from "vue";
 import { isEmpty } from "@fleet-sdk/common";
 import { BigNumber } from "bignumber.js";
+import { CircleXIcon } from "lucide-vue-next";
 import ImageSandbox from "./ImageSandbox.vue";
 import { IAssetInfo } from "@/types/database";
 import { assetInfoDbService } from "@/database/assetInfoDbService";
@@ -79,7 +80,8 @@ import { useFormat } from "@/composables/useFormat";
 export default defineComponent({
   name: "AssetInfoModal",
   components: {
-    ImageSandbox
+    ImageSandbox,
+    CircleXIcon
   },
   props: {
     tokenId: { type: String, required: false },
diff --git a/src/components/ImageSandbox.vue b/src/components/ImageSandbox.vue
index 9fe1b7a2..58924adb 100644
--- a/src/components/ImageSandbox.vue
+++ b/src/components/ImageSandbox.vue
@@ -3,22 +3,23 @@
     <loading-indicator type="circular" class="w-1/3 h-1/3 m-auto !stroke-gray-500" />
   </div>
   <div v-else-if="!contentUrl" :class="class" class="text-center flex">
-    <mdi-icon class="m-auto text-orange-400" name="alert-circle-outline" size="48" />
+    <circle-alert-icon class="m-auto text-orange-400" :size="48" />
   </div>
   <iframe
     v-show="!loading && contentUrl"
-    @load="loading = false"
-    sandbox=""
     :key="contentUrl"
-    :class="class"
     :src="contentUrl"
+    sandbox=""
+    :class="class"
     class="m-0 p-0"
     frameborder="0"
+    @load="loading = false"
   ></iframe>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
+import { CircleAlertIcon } from "lucide-vue-next";
 import {
   CONTENT_SANDBOX_URL,
   IPFS_GENERAL_GATEWAY,
@@ -44,6 +45,9 @@ function resolveIpfs(url?: string, isVideo = false): string {
 
 export default defineComponent({
   name: "ImageSandbox",
+  components: {
+    CircleAlertIcon
+  },
   props: {
     src: { type: String },
     class: { type: String },
@@ -56,11 +60,6 @@ export default defineComponent({
       loading: true
     };
   },
-  watch: {
-    src() {
-      this.loading = true;
-    }
-  },
   computed: {
     contentUrl() {
       if (!this.src) {
@@ -80,6 +79,11 @@ export default defineComponent({
 
       return `${CONTENT_SANDBOX_URL}/?url=${encodeURIComponent(resolveIpfs(this.src))}${query}`;
     }
+  },
+  watch: {
+    src() {
+      this.loading = true;
+    }
   }
 });
 </script>
diff --git a/src/components/MdiIcon.vue b/src/components/MdiIcon.vue
deleted file mode 100644
index 5e7e3cfa..00000000
--- a/src/components/MdiIcon.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <mdicon class="inline-flex" v-bind="$.attrs" />
-</template>
diff --git a/src/components/TxBoxDetails.vue b/src/components/TxBoxDetails.vue
index cef114a7..0f80968c 100644
--- a/src/components/TxBoxDetails.vue
+++ b/src/components/TxBoxDetails.vue
@@ -36,11 +36,7 @@
             v-if="babelSwap && isErg(asset.tokenId) && assets.length > 1"
             class="text-center py-2"
           >
-            <mdi-icon
-              name="swap-vertical-variant"
-              size="24"
-              class="align-middle text-gray-600 transform-flip"
-            />
+            <arrow-down-up-icon class="align-middle text-gray-600 inline" />
           </div>
           <div class="flex flex-row items-center gap-2 py-1">
             <asset-icon class="h-7 w-7" :token-id="asset.tokenId" />
@@ -81,6 +77,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType } from "vue";
+import { ArrowDownUpIcon } 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";
@@ -91,7 +88,8 @@ export default defineComponent({
   name: "TxBoxDetails",
   components: {
     BabelBadge,
-    EmptyLogo
+    EmptyLogo,
+    ArrowDownUpIcon
   },
   props: {
     assets: { type: Array as PropType<Array<OutputAsset>>, default: () => [] },
diff --git a/src/components/WalletItem.vue b/src/components/WalletItem.vue
index 8ef3c7f0..c9dc6ad0 100644
--- a/src/components/WalletItem.vue
+++ b/src/components/WalletItem.vue
@@ -3,6 +3,7 @@ import { nextTick, onMounted, PropType, ref, shallowRef } from "vue";
 import { WalletChecksum, walletChecksum } from "@emurgo/cip4-js";
 import { renderIcon } from "@download/blockies";
 import { hex } from "@fleet-sdk/crypto";
+import { VenetianMaskIcon } from "lucide-vue-next";
 import { IDbWallet } from "@/types/database";
 import { WalletType } from "@/types/internal";
 import { mountExtendedPublicKey } from "@/common/serializer";
@@ -74,12 +75,7 @@ function walletTypeToString(type: WalletType): string {
         <small class="rounded bg-gray-200 px-1 font-normal text-dark-200 uppercase">{{
           walletTypeToString(wallet.type)
         }}</small>
-        <mdi-icon
-          v-if="wallet.settings.avoidAddressReuse"
-          class="align-middle"
-          name="incognito"
-          size="16"
-        />
+        <venetian-mask-icon v-if="wallet.settings.avoidAddressReuse" class="h-4 w-4" />
         <loading-indicator v-if="loading" class="w-4 h-4" />
       </div>
     </div>
diff --git a/src/dapps/DappsList.vue b/src/dapps/DappsList.vue
index 580516bb..1bc77f87 100644
--- a/src/dapps/DappsList.vue
+++ b/src/dapps/DappsList.vue
@@ -16,7 +16,7 @@ import { dappsManifest } from "@/dapps/dappsManifest";
           class="cursor-pointer border border-gray-200 rounded w-full m-auto py-4 bg-white transition duration-250 hover:bg-gray-100 active:bg-gray-200"
           @click="navigate"
         >
-          <mdi-icon :name="dapp.icon.name" size="64" :class="dapp.icon.color || 'text-gray-500'" />
+          <img :src="`/icons/dapps/${dapp.icon}`" class="w-16 h-16 m-auto" />
           <p class="text-xs leading-tight pt-2 px-2">
             {{ dapp.name }}
           </p>
diff --git a/src/dapps/dappsManifest.ts b/src/dapps/dappsManifest.ts
index df693ee6..80a222e1 100644
--- a/src/dapps/dappsManifest.ts
+++ b/src/dapps/dappsManifest.ts
@@ -1,19 +1,13 @@
-type DAppManifestIcon = {
-  name: string;
-  source: "mdi" | "file";
-  color?: string;
-};
-
 export type DAppManifestItem = {
   name: string;
-  icon: DAppManifestIcon;
+  icon: string;
   path: string;
 };
 
 export const dappsManifest: DAppManifestItem[] = [
   {
     name: "Wallet Optimization",
-    icon: { name: "consolidate", source: "mdi", color: "text-purple-500" },
+    icon: "optimizer.svg",
     path: "/dapps/wallet-optimization"
   }
 ];
diff --git a/src/dapps/wallet-optimization/WalletOptimizationDApp.vue b/src/dapps/wallet-optimization/WalletOptimizationDApp.vue
index d79bd424..8c02c0f4 100644
--- a/src/dapps/wallet-optimization/WalletOptimizationDApp.vue
+++ b/src/dapps/wallet-optimization/WalletOptimizationDApp.vue
@@ -4,6 +4,8 @@ import { serializeBox } from "@fleet-sdk/serializer";
 import dayjs from "dayjs";
 import { minBy } from "lodash-es";
 import { Box } from "@fleet-sdk/common";
+import { AlertCircleIcon, CircleCheckIcon } from "lucide-vue-next";
+import { createReusableTemplate } from "@vueuse/core";
 import { createConsolidationTransaction } from "./transactionFactory";
 import { fetchBoxes } from "@/chains/ergo/boxFetcher";
 import { graphQLService } from "@/chains/ergo/services/graphQlService";
@@ -33,6 +35,12 @@ const fee = ref<FeeSettings>({
   value: decimalize(bn(SAFE_MIN_FEE_VALUE), ERG_DECIMALS)
 });
 
+const [DefineDataPointTemplate, DataPoint] = createReusableTemplate<{
+  title: string;
+  content: string | number;
+  healthy: boolean;
+}>();
+
 onMounted(loadBoxes);
 watch(() => wallet.id, loadBoxes);
 
@@ -82,10 +90,6 @@ function setLoading(load = true) {
   loading.value = load;
 }
 
-function successIcon(success: boolean) {
-  return success ? "check-circle-outline" : "alert-circle-outline";
-}
-
 function successColor(success: boolean) {
   return success ? "text-green-500" : "text-orange-500";
 }
@@ -116,49 +120,29 @@ function formatBytes(bytes: number, decimals = 1) {
 </script>
 
 <template>
-  <div class="stats">
-    <div class="stats-card">
-      <div v-if="loading" class="skeleton h-5 w-5 rounded-full m-auto block mb-2"></div>
-      <mdi-icon
-        v-else
-        :name="successIcon(utxoHealth.count)"
-        :class="successColor(utxoHealth.count)"
-        size="22"
-      />
-
-      <p>UTxO count</p>
-
-      <h1 v-if="loading" class="skeleton w-20 h-4 rounded inline-block"></h1>
-      <h1 v-else>{{ boxes.length }}</h1>
-    </div>
+  <define-data-point-template v-slot="{ title, content, healthy }">
     <div class="stats-card">
       <div v-if="loading" class="skeleton h-5 w-5 rounded-full m-auto block mb-2"></div>
-      <mdi-icon
-        v-else
-        :name="successIcon(utxoHealth.age)"
-        :class="successColor(utxoHealth.age)"
-        size="22"
-      />
+      <template v-else>
+        <circle-check-icon
+          v-if="healthy"
+          class="inline h-5 w-5 mb-2"
+          :class="successColor(healthy)"
+        />
+        <alert-circle-icon v-else class="inline h-5 w-5 mb-2" :class="successColor(healthy)" />
+      </template>
 
-      <p>Oldest UTxO</p>
+      <p>{{ title }}</p>
 
       <h1 v-if="loading" class="skeleton w-20 h-4 rounded inline-block"></h1>
-      <h1 v-else>{{ oldestBox }}</h1>
+      <h1 v-else>{{ content }}</h1>
     </div>
-    <div class="stats-card">
-      <div v-if="loading" class="skeleton h-5 w-5 rounded-full m-auto block mb-2"></div>
-      <mdi-icon
-        v-else
-        :name="successIcon(utxoHealth.size)"
-        :class="successColor(utxoHealth.size)"
-        size="22"
-      />
+  </define-data-point-template>
 
-      <p>Wallet size</p>
-
-      <h1 v-if="loading" class="skeleton w-20 h-4 rounded inline-block"></h1>
-      <h1 v-else>{{ formatBytes(size) }}</h1>
-    </div>
+  <div class="stats">
+    <data-point title="UTxO count" :content="boxes.length" :healthy="utxoHealth.count" />
+    <data-point title="Oldest UTxO" :content="oldestBox" :healthy="utxoHealth.age" />
+    <data-point title="Wallet size" :content="formatBytes(size)" :healthy="utxoHealth.size" />
   </div>
   <div>
     <div class="text-gray-600 text-xs">
diff --git a/src/views/AssetsView.vue b/src/views/AssetsView.vue
index 705a2a14..6e80c857 100755
--- a/src/views/AssetsView.vue
+++ b/src/views/AssetsView.vue
@@ -23,7 +23,8 @@
                   class="align-middle"
                 >
                   <a class="cursor-pointer inline-flex" @click="toggleHideBalance()">
-                    <mdi-icon :name="hideBalances ? 'eye-off' : 'eye'" size="16" />
+                    <eye-off-icon v-if="hideBalances" :size="16" />
+                    <eye-icon v-else :size="16" />
                   </a>
                 </tool-tip>
                 Balance
@@ -105,6 +106,7 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import { BigNumber } from "bignumber.js";
+import { EyeIcon, EyeOffIcon } from "lucide-vue-next";
 import { ERG_TOKEN_ID } from "@/constants/ergo";
 import EmptyLogo from "@/assets/images/tokens/asset-empty.svg";
 import AssetInfoModal from "@/components/AssetInfoModal.vue";
@@ -120,7 +122,9 @@ export default defineComponent({
   components: {
     EmptyLogo,
     AssetInfoModal,
-    StorageRentBox
+    StorageRentBox,
+    EyeIcon,
+    EyeOffIcon
   },
   setup() {
     return {
diff --git a/src/views/ReceiveView.vue b/src/views/ReceiveView.vue
index 03c2a568..976b183d 100755
--- a/src/views/ReceiveView.vue
+++ b/src/views/ReceiveView.vue
@@ -105,7 +105,7 @@
                 >
                 <tool-tip v-if="isLedger" label="Verify this address on <br /> your Ledger device">
                   <a class="cursor-pointer" @click="showOnLedger(address)">
-                    <mdi-icon name="shield-check-outline" size="15" />
+                    <shield-check-icon class="inline" :size="14" />
                   </a>
                 </tool-tip>
 
@@ -145,14 +145,14 @@ import { defineComponent } from "vue";
 import {
   CheckCircleIcon,
   CircleIcon,
+  EyeIcon,
+  EyeOffIcon,
   FilterIcon,
   FilterXIcon,
-  EyeIcon,
-  EyeOffIcon
+  ShieldCheckIcon
 } from "lucide-vue-next";
 import ConfirmAddressOnDevice from "../components/ConfirmAddressOnDevice.vue";
 import { openModal } from "@/common/componentUtils";
-import MdiIcon from "@/components/MdiIcon.vue";
 import { ERG_TOKEN_ID } from "@/constants/ergo";
 import { AddressState, StateAddress, WalletType } from "@/types/internal";
 import { useAppStore } from "@/stores/appStore";
@@ -162,14 +162,14 @@ import { useFormat, useQrCode } from "@/composables";
 export default defineComponent({
   name: "ReceiveView",
   components: {
-    MdiIcon,
     qrCode: useQrCode({ border: 0 }),
     CheckCircleIcon,
     CircleIcon,
     FilterIcon,
     FilterXIcon,
     EyeIcon,
-    EyeOffIcon
+    EyeOffIcon,
+    ShieldCheckIcon
   },
   setup() {
     return { app: useAppStore(), wallet: useWalletStore(), format: useFormat() };
diff --git a/src/views/add/AddView.vue b/src/views/add/AddView.vue
index f98334a3..e1948eaa 100755
--- a/src/views/add/AddView.vue
+++ b/src/views/add/AddView.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
+import { RotateCcwIcon, WalletIcon, WalletMinimalIcon } from "lucide-vue-next";
 import LedgerLogo from "@/assets/images/hw-devices/ledger-logo.svg";
 import { useWalletStore } from "@/stores/walletStore";
 import { browser, isPopup } from "@/common/browser";
@@ -24,7 +25,7 @@ function navigateInTab(navigate: () => unknown, href: string) {
     <router-link v-slot="{ navigate }" to="/add/new" custom>
       <button type="button" class="nav-btn" @click="navigate">
         <div class="h-full float-left flex w-8 mr-4">
-          <mdi-icon name="wallet-plus" size="32" class="m-auto text-gray-500" />
+          <wallet-icon class="m-auto text-gray-500" :size="32" />
         </div>
         <span class="title">Create wallet</span>
         <span class="subtitle"
@@ -35,7 +36,7 @@ function navigateInTab(navigate: () => unknown, href: string) {
     <router-link v-slot="{ navigate }" to="/add/restore" custom>
       <button type="button" class="nav-btn" @click="navigate">
         <div class="h-full float-left flex w-8 mr-4">
-          <mdi-icon name="backup-restore" size="32" class="m-auto text-gray-500" />
+          <rotate-ccw-icon class="m-auto text-gray-500" :size="32" />
         </div>
         <span class="title">Restore wallet</span>
         <span class="subtitle"
@@ -62,7 +63,7 @@ function navigateInTab(navigate: () => unknown, href: string) {
     <router-link v-slot="{ navigate }" to="/add/read-only" custom>
       <button role="button" type="button" class="nav-btn" @click="navigate">
         <div class="h-full float-left flex w-8 mr-4">
-          <mdi-icon name="wallet-outline" size="32" class="m-auto text-gray-500" />
+          <wallet-minimal-icon class="m-auto text-gray-500" :size="32" />
         </div>
         <span class="title">Load read-only wallet</span>
         <span class="subtitle">Enter a public key to load an Ergo wallet in read-only mode.</span>