migrate TransactionHistory icons

nautls · Dec 17, 2024 · cf90c74 · cf90c74
1 parent f22c51e
commit cf90c74
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 18 deletions.
diff --git a/src/views/SendView.vue b/src/views/SendView.vue
@@ -31,7 +31,7 @@
         >
           <template #trigger>
             <div class="flex-grow pl-6 text-center font-semibold">Add asset</div>
-            <vue-feather type="chevron-down" size="18" />
+            <chevron-down-icon :size="18" />
           </template>
           <template #items>
             <div class="group">
@@ -66,7 +66,7 @@
             <div class="group">
               <a class="group-item narrow" @click="addAll()">
                 <div class="flex flex-row items-center gap-2">
-                  <mdi-icon name="check-all" class="text-yellow-500 w-8 h-8" size="32" />
+                  <check-check-icon class="text-yellow-500 w-8 h-8" :size="32" />
                   <div class="flex-grow">
                     Add all
                     <p class="text-gray-400 text-xs">
@@ -96,6 +96,7 @@ import { helpers, required } from "@vuelidate/validators";
 import { isEmpty } from "@fleet-sdk/common";
 import { useVuelidate } from "@vuelidate/core";
 import { BigNumber } from "bignumber.js";
+import { CheckCheckIcon, ChevronDownIcon } from "lucide-vue-next";
 import { ERG_DECIMALS, ERG_TOKEN_ID, MIN_BOX_VALUE, SAFE_MIN_FEE_VALUE } from "@/constants/ergo";
 import { FeeSettings } from "@/types/internal";
 import { bn, decimalize, undecimalize } from "@/common/bigNumber";
@@ -124,7 +125,7 @@ const validations = {
 
 export default defineComponent({
   name: "SendView",
-  components: { AssetInput, FeeSelector, DropDown },
+  components: { AssetInput, FeeSelector, DropDown, ChevronDownIcon, CheckCheckIcon },
   setup() {
     return {
       app: useAppStore(),

diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue
@@ -79,7 +79,7 @@
             </select>
             <div class="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
               <loading-indicator v-if="loading" type="circular" class="w-4 h-4 mr-1" />
-              <vue-feather v-else type="chevron-down" class="w-4 h-4" />
+              <chevron-down-icon v-else class="w-4 h-4" />
             </div>
           </div>
         </div>
@@ -208,6 +208,7 @@ import { helpers, required } from "@vuelidate/validators";
 import { useVuelidate, Validation, ValidationArgs } from "@vuelidate/core";
 import { clone, isEqual } from "lodash-es";
 import { isEmpty } from "@fleet-sdk/common";
+import { ChevronDownIcon } from "lucide-vue-next";
 import { coinGeckoService } from "@/chains/ergo/services/coinGeckoService";
 import ExtendedPublicKeyModal from "@/components/ExtendedPublicKeyModal.vue";
 import { MAINNET } from "@/constants/ergo";
@@ -226,7 +227,7 @@ import { useFormat } from "@/composables/useFormat";
 
 export default defineComponent({
   name: "SettingsView",
-  components: { ExtendedPublicKeyModal },
+  components: { ExtendedPublicKeyModal, ChevronDownIcon },
   setup() {
     return {
       v$: useVuelidate() as Ref<Validation<ValidationArgs<unknown>, unknown>>,

diff --git a/src/views/TransactionHistory.vue b/src/views/TransactionHistory.vue
@@ -4,6 +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 EmptyLogo from "@/assets/images/tokens/asset-empty.svg";
 import { useWalletStore } from "@/stores/walletStore";
 import { graphQLService } from "@/chains/ergo/services/graphQlService";
@@ -156,13 +157,9 @@ function cancelTransaction(tx: UnconfirmedTransactionSummary) {
             :key="asset.tokenId"
             class="flex flex-row items-center gap-2"
           >
-            <vue-feather
-              v-if="asset.amount.isNegative()"
-              type="corner-left-up"
-              class="min-w-4 text-red-500"
-              size="16"
-            />
-            <vue-feather v-else type="corner-right-down" class="min-w-4 text-green-500" size="16" />
+            <upload-icon v-if="asset.amount.isNegative()" class="min-w-4 text-red-500" :size="16" />
+            <download-icon v-else class="min-w-4 text-green-500" :size="16" />
+
             <asset-icon class="h-6 w-6 min-w-6" :token-id="asset.tokenId" />
             <div class="w-full">
               {{ asset.metadata?.name ?? formatter.string.shorten(asset.tokenId, 10) }}
@@ -186,8 +183,8 @@ function cancelTransaction(tx: UnconfirmedTransactionSummary) {
         </div>
         <button
           v-if="!tx.confirmed && tx.cancelable"
-          @click="cancelTransaction(tx as unknown as UnconfirmedTransactionSummary)"
           class="btn default !py-1 mt-4"
+          @click="cancelTransaction(tx as unknown as UnconfirmedTransactionSummary)"
         >
           Cancel
         </button>
@@ -202,11 +199,8 @@ function cancelTransaction(tx: UnconfirmedTransactionSummary) {
         </div>
         <div class="p-2 flex flex-col gap-2">
           <div class="flex flex-row items-center gap-2">
-            <vue-feather
-              type="corner-right-down"
-              class="min-w-4 text-gray-300 animate-pulse"
-              size="16"
-            />
+            <download-icon class="min-w-4 text-gray-300 animate-pulse" :size="16" />
+
             <empty-logo class="h-7 w-7 min-w-7 animate-pulse fill-gray-300" />
             <div class="skeleton h-4 rounded w-5/12"></div>
             <div class="w-full"></div>