remove @mdi/js mdi-vue

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

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);
 }

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

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>

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

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>

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>

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"
   }
 ];