refactor: always use CustomIcon to render svg

src/components/Templates.vue

@@ -79,7 +79,7 @@ const { locale } = toRefs(store.state.wallet)
 
 const templatesAdapted = computed(() => {
   return Object.entries(templates.value)
-    .map((template: any) => {
+    .map((template: [string, any]) => {
       return {
         id: template[0],
         ...template[1],
@@ -127,7 +127,7 @@ const displayModalCreateDR = (templateToSet: any) => {
   dialogVisible.value = true
   currentTemplate.value = templateToSet
 }
-const fileInput = ref()
+const fileInput = ref('')
 const readFile = () => {
   const file = fileInput.value.files[0]
   const reader = new FileReader()

src/components/Transaction.vue

@@ -2,7 +2,11 @@
   <FrameOutside @click="hideDetails" @focus="hideDetails">
     <div class="border" :class="{ locked: timelocked }">
       <div class="transaction" @click="showDetails = !showDetails">
-        <arrowIcon data-test="negative-positive" class="icon" />
+        <CustomIcon
+          data-test="negative-positive"
+          class="icon"
+          :name="iconName"
+        />
         <Amount
           :unit-dark="true"
           data-test="amount"
@@ -95,8 +99,6 @@
 
 <script setup lang="ts">
 import { ref, computed, type Ref } from 'vue'
-import PositiveIcon from '@/resources/svg/positive.svg'
-import NegativeIcon from '@/resources/svg/negative.svg'
 
 const showDetails: Ref<boolean> = ref(false)
 
@@ -193,8 +195,8 @@ const props = defineProps({
 
 const hideDetails = () => (showDetails.value = false)
 const origin = computed(() => (props.type === 'POSITIVE' ? 'from' : 'to'))
-const arrowIcon = computed(() =>
-  props.type === 'POSITIVE' ? PositiveIcon : NegativeIcon,
+const iconName = computed(() =>
+  props.type === 'POSITIVE' ? 'positive' : 'negative',
 )
 </script>
 

src/components/card/TemplateCard.vue

@@ -27,10 +27,9 @@
           aria-expanded="true"
           @click.stop
         >
-          <img
+          <CustomIcon
             v-if="type === 'marketplace'"
-            src="@/resources/svg/options-marketplace.svg"
-            alt=""
+            name="options-marketplace"
           />
           <CustomIcon v-else name="options" />
         </div>

src/constants.ts

@@ -79,29 +79,32 @@ export const LANGUAGES: LanguageDictionary = {
 
 export const DEFAULT_LOCALE = 'en'
 
-export const CUSTOM_ICON_NAMES = [
+export const CUSTOM_DARK_ICON_NAMES = [
   'add-operator',
   'add',
   'close-btn',
   'close-btn-light',
   'close',
-  'delete-btn',
-  'disconnected',
   'down',
   'exit-icon',
   'long-arrow',
-  'negative',
   'open',
   'operator-arrow',
   'options-marketplace',
   'options',
-  'positive',
   'sheikah-icon',
   'sheikah-small',
   'sheikah',
   'sort-down',
   'sort-up',
   'up',
+]
+
+export const CUSTOM_ICON_NAMES = [
+  ...CUSTOM_DARK_ICON_NAMES,
+  'disconnected',
+  'positive',
+  'negative',
   'email',
   'telegram',
   'discord',
@@ -110,29 +113,6 @@ export const CUSTOM_ICON_NAMES = [
   'medium',
   'reddit',
 ]
-export const CUSTOM_DARK_ICON_NAMES = [
-  'add-operator',
-  'add',
-  'close-btn',
-  'close-btn-light',
-  'close',
-  'delete-btn',
-  'down',
-  'exit-icon',
-  'long-arrow',
-  'negative',
-  'open',
-  'operator-arrow',
-  'options-marketplace',
-  'options',
-  'positive',
-  'sheikah-icon',
-  'sheikah-small',
-  'sheikah',
-  'sort-down',
-  'sort-up',
-  'up',
-]
 
 export const THEMES = {
   LIGHT: 'light',

src/store/rad.js

@@ -36,8 +36,6 @@ import {
 } from '@/store/mutation-types'
 import { api } from '@/main'
 
-// import wallet from './wallet'
-
 export default {
   state: {
     errors: {
@@ -68,7 +66,7 @@ export default {
     },
   },
   mutations: {
-    setDefaultTemplates: function () {
+    setDefaultTemplates() {
       RAD_EXAMPLES.forEach(example => {
         const radRequest = {
           retrieve: example.radRequest.data.data_request.retrieve,

src/store/wallet.js

@@ -132,9 +132,6 @@ export default {
   getters: {
     network: state => state.status.network,
     unlockedWallet: state => {
-      console.log('unlockedWallet -----')
-      console.log(state.walletInfos)
-      console.log(state.walletIdx)
       return Number.isInteger(state.walletIdx)
         ? state.walletInfos[state.walletIdx]
         : null

src/styles/_colors.scss

@@ -14,7 +14,7 @@ $alt-grey-1: #c6c5d3;
 $alt-grey-2: #aaa8bd;
 $alt-grey-3: #716d92;
 $alt-grey-4: #5a5775;
-$alt-grey-4-alt: rgb(80, 77, 106);
+$alt-grey-4-alt: #504d6a;
 $alt-grey-5: #444258;
 $alt-grey-6: #2d2c3a;
 $black: #1a1a1a;

src/styles/element/index.scss

@@ -107,23 +107,11 @@ $key: (
   'footer-padding': 10px,
   'border': 1px solid red,
 );
-// $select-dropdown: () !default;
-// $dropdown: () !default;
+
 @forward 'element-plus/theme-chalk/src/common/var.scss' with (
   // do not use same name, it will override.
   $colors: $--colors,
-  // $button-padding-horizontal: ("default": 50px)
-  $border-color: $--border-color,
-  // $select-dropdown: map.merge($key, $select-dropdown),
-  // $dropdown: map.merge(
-  //   (
-  //     'menu-box-shadow': pink,
-  //     'menuItem-hover-fill': red,
-  //     'menuItem-hover-color': red,
-  //     'menu-index': 10,
-  //   ),
-  //   $dropdown
-  // ),
+  $border-color: $--border-color
 );
 
 // if you want to import all