Feat/choose visible wallets

package.json

@@ -86,7 +86,8 @@
     "vue": "^3.4.7",
     "vue-i18n": "^9.9.0",
     "vue-router": "^4.2.5",
-    "vuetify": "^3.4.9",
+    "vuedraggable": "^4.1.0",
+    "vuetify": "^3.5.2",
     "vuex": "^4.1.0",
     "vuex-persist": "^3.1.3",
     "web3-errors": "^1.1.4",

scripts/wallets.mjs

@@ -118,14 +118,12 @@ async function copyIcons(coins, coinDirNames) {
   await mkdir(CRYPTOS_ICONS_DIR_PATH)
 
   for (const [name, coin] of Object.entries(coins)) {
-    if (coin.defaultVisibility) {
-      const iconComponentName = `${_.capitalize(coin.symbol)}Icon.vue`
+    const iconComponentName = `${_.capitalize(coin.symbol)}Icon.vue`
 
-      await copyFile(
-        join(GENERAL_ASSETS_PATH, coinDirNames[name], 'images', 'icon.vue'),
-        join(CRYPTOS_ICONS_DIR_PATH, iconComponentName)
-      )
-    }
+    await copyFile(
+      join(GENERAL_ASSETS_PATH, coinDirNames[name], 'images', 'icon.vue'),
+      join(CRYPTOS_ICONS_DIR_PATH, iconComponentName)
+    )
   }
 }
 

src/components/AppNavigation.vue

@@ -7,7 +7,7 @@
     :elevation="0"
   >
     <!-- Wallet -->
-    <v-btn to="/home">
+    <v-btn v-if="walletShouldBeVisible" to="/home">
       <v-icon icon="mdi-wallet" />
       <span>{{ $t('bottom.wallet_button') }}</span>
     </v-btn>
@@ -72,6 +72,11 @@ export default defineComponent({
       return pages.indexOf(currentPage)
     }
     const numOfNewMessages = computed(() => store.getters['chat/totalNumOfNewMessages'])
+
+    const walletShouldBeVisible = computed(() => {
+      return !!store.getters['wallets/getVisibleSymbolsCount']
+    })
+
     watch(route, () => {
       currentPageIndex.value = getCurrentPageIndex()
     })
@@ -83,7 +88,8 @@ export default defineComponent({
       pages,
       currentPageIndex,
       getCurrentPageIndex,
-      numOfNewMessages
+      numOfNewMessages,
+      walletShouldBeVisible
     }
   }
 })

src/components/Chat/ChatMenu.vue

@@ -7,7 +7,7 @@
 
       <v-list class="chat-menu__list">
         <!-- Cryptos -->
-        <v-list-item v-for="c in cryptos" :key="c" @click="sendFunds(c)">
+        <v-list-item v-for="c in wallets" :key="c" @click="sendFunds(c)">
           <template #prepend>
             <crypto-icon :crypto="c" box-centered />
           </template>
@@ -33,7 +33,7 @@
 </template>
 
 <script>
-import { Cryptos, CryptosOrder } from '@/lib/constants'
+import { Cryptos } from '@/lib/constants'
 import ChatDialog from '@/components/Chat/ChatDialog.vue'
 import CryptoIcon from '@/components/icons/CryptoIcon.vue'
 import IconBox from '@/components/icons/IconBox.vue'
@@ -54,7 +54,6 @@ export default {
     }
   },
   data: () => ({
-    cryptos: CryptosOrder,
     menuItems: [
       {
         type: 'action',
@@ -74,6 +73,16 @@ export default {
     dialogText: '',
     crypto: ''
   }),
+  computed: {
+    orderedVisibleWalletSymbols() {
+      return this.$store.getters['wallets/getVisibleOrderedWalletSymbols']
+    },
+    wallets() {
+      return this.orderedVisibleWalletSymbols.map((crypto) => {
+        return crypto.symbol
+      })
+    }
+  },
   methods: {
     sendFunds(crypto) {
       // check if user has crypto wallet

src/components/SendFundsForm.vue

@@ -208,7 +208,6 @@ import {
   getMinAmount,
   isSelfTxAllowed,
   CryptosInfo,
-  CryptosOrder,
   isTextDataAllowed,
   MessageType,
   Fees
@@ -225,6 +224,7 @@ import partnerName from '@/mixins/partnerName'
 import WarningOnPartnerAddressDialog from '@/components/WarningOnPartnerAddressDialog.vue'
 import { isStringEqualCI } from '@/lib/textHelpers'
 import { formatSendTxError } from '@/lib/txVerify'
+import { AllCryptos } from '@/lib/constants/cryptos'
 
 /**
  * @returns {string | boolean}
@@ -255,7 +255,7 @@ export default {
     cryptoCurrency: {
       type: String,
       default: 'ADM',
-      validator: (value) => value in Cryptos
+      validator: (value) => value in AllCryptos
     },
     recipientAddress: {
       type: String,
@@ -371,7 +371,7 @@ export default {
      * @returns {string}
      */
     transferFeeCurrency() {
-      return isErc20(this.currency) ? Cryptos.ETH : this.currency
+      return isErc20(this.currency) ? AllCryptos.ETH : this.currency
     },
 
     /**
@@ -471,8 +471,13 @@ export default {
     exponent() {
       return CryptosInfo[this.currency].cryptoTransferDecimals
     },
+    orderedVisibleWalletSymbols() {
+      return this.$store.getters['wallets/getVisibleOrderedWalletSymbols']
+    },
     cryptoList() {
-      return CryptosOrder
+      return this.orderedVisibleWalletSymbols.map((crypto) => {
+        return crypto.symbol
+      })
     },
     confirmMessage() {
       const msgType =

src/components/WalletCardListActions.vue

@@ -35,7 +35,7 @@
 </template>
 
 <script>
-import { Cryptos } from '@/lib/constants'
+import { AllCryptos } from '@/lib/constants/cryptos'
 import BuyTokensDialog from '@/components/BuyTokensDialog.vue'
 import { websiteUriToOnion } from '@/lib/uri'
 
@@ -46,8 +46,8 @@ export default {
   props: {
     crypto: {
       type: String,
-      default: Cryptos.ADM,
-      validator: (v) => v in Cryptos
+      default: AllCryptos.ADM,
+      validator: (v) => v in AllCryptos
     },
     isADM: {
       required: true,

src/components/icons/CryptoIcon.vue

@@ -8,7 +8,7 @@
 import Icon from './BaseIcon.vue'
 import UnknownCryptoFillIcon from './UnknownCryptoFill.vue'
 
-import { Cryptos } from '@/lib/constants'
+import { AllCryptos } from '@/lib/constants/cryptos'
 import { strictCapitalize } from '@/lib/textHelpers'
 
 const SMALL_SIZE = 36
@@ -29,14 +29,19 @@ export default {
       type: String,
       required: true,
       validator: (value) => {
-        return value in Cryptos || value === 'UNKNOWN_CRYPTO'
+        return value in AllCryptos || value === 'UNKNOWN_CRYPTO'
       }
     },
+    /** Icon custom size: for cases when icon should be a bit larger or smaller than small/medium/large */
+    customSize: {
+      type: Number
+    },
     /** Icon size: can be either 'small' (36x36), 'medium' (48x48) or 'large' (125x125) or undefined */
     size: {
       type: String,
       validator: (value) => ['small', 'medium', 'large'].indexOf(value) >= 0
     },
+
     /** Fill color, e.g. '#BDBDBD' */
     fill: {
       type: String,
@@ -50,6 +55,9 @@ export default {
   },
   computed: {
     sizePx() {
+      if (this.customSize) {
+        return this.customSize
+      }
       if (this.size === 'small') {
         return SMALL_SIZE
       } else if (this.size === 'medium') {

src/components/icons/cryptos/BnbIcon.vue

@@ -0,0 +1,10 @@
+<template>
+  <g>
+    <path
+      d="M162.7,217.7l93.3-93.3l93.3,93.3l54.2-54.2L255.9,16.1L108.5,163.5L162.7,217.7 M15.9,256.1l54.2-54.2l54.2,54.2l-54.2,54.2L15.9,256.1z M162.7,294.4l93.3,93.3l93.3-93.3l54.2,54.2l0,0L255.9,496.1L108.5,348.6l-0.1-0.1L162.7,294.4M387.5,256.1l54.2-54.2l54.2,54.2l-54.2,54.2L387.5,256.1z"
+    />
+    <path
+      d="M311.1,256L311.1,256L256,200.9l-40.7,40.7l0,0l-4.7,4.7l-9.6,9.6l-0.1,0.1l0.1,0.1l54.9,54.9L311.1,256L311.1,256L311.1,256"
+    />
+  </g>
+</template>

src/components/icons/cryptos/BusdIcon.vue

@@ -0,0 +1,8 @@
+<template>
+  <g>
+    <path d="M256,16l59.3,60.7L166,226l-59.3-59.3L256,16z" />
+    <path d="M346,106l59.3,60.7L166,406l-59.3-59.3L346,106z" />
+    <path d="M76,196l59.3,60.7L76,316l-59.3-59.3L76,196z" />
+    <path d="M436,196l59.3,60.7L256,496l-59.3-59.3L436,196z" />
+  </g>
+</template>

src/components/icons/cryptos/EnsIcon.vue

@@ -0,0 +1,13 @@
+<template>
+  <g>
+    <path
+      d="M256,16C123.5,16,16,123.5,16,256s107.5,240,240,240s240-107.5,240-240S388.5,16,256,16z
+	 M127.3,371c-28.8-22-46.8-55.3-49.4-91.5c-1.8-15.6-2-31.3-0.4-47c2.4-14.8,6.9-29,13.3-42.5c0,0,3.4-6.4,4.9-9.4
+	c-1,5.9-1,11.9,0,17.8c1.9,13.2,6.3,25.9,12.8,37.6c64.3,109.8,140.9,220,140.9,220L127.3,371z M136.3,242.9c0,0-9.9-16.8-13.8-25.3
+	c-9.6-21.5-9.3-46.1,0.9-67.3c3.8-7,9.3-12.9,15.8-17.3l110.3-77L136.3,242.9z M389,362c-3.9,6.9-9.3,12.8-15.8,17.3L262.4,456
+	l113.2-186.9c0,0,9.9,16.8,13.8,25.3C399.2,315.9,399,340.6,389,362z M421.5,322c0,0-3.4,6.4-4.9,9.4c1-5.9,1-11.9,0-17.8
+	c-1.9-13.3-6.3-25.9-12.8-37.6c-64.3-109.7-141-220-141-220l121.7,85.5c28.8,22,46.8,55.3,49.4,91.5c1.8,15.6,2.2,31.3,0.9,47
+	C432.3,294.5,427.8,308.7,421.5,322z"
+    />
+  </g>
+</template>

src/components/icons/cryptos/HotIcon.vue

@@ -0,0 +1,19 @@
+<template>
+  <g>
+    <path
+      d="M256,16C123.5,16,16,123.5,16,256s107.5,240,240,240s240-107.5,240-240S388.5,16,256,16z
+	 M324,238.8c11.8,0.1,14.8,0.2,17.1,0.6c3.1,0.5,6.7,1.5,6.7,1.9c0,0.6-13.9,32.2-14.3,32.4c-0.2,0.1-5.7,0.3-12.1,0.3l-11.7,0.1
+	l0.2,0.9c0.1,0.5,0.6,2.1,1.1,3.7c4.6,13.9,13.2,26.3,25.1,36.4c10.1,8.3,21.8,14.5,34.3,18.1c8.1,2.3,16.4,3.5,24.8,3.7
+	c3.4,0.1,6.1,0.2,6.3,0.3c0.1,0.1,13.7,31.2,13.9,31.9c0.3,0.9-6.1,1.7-14.1,2c-19.1,0.5-38.2-2.9-55.9-10
+	c-29.2-11.7-52.9-33.1-65.5-59.3c-4.2-8.7-6.7-16.1-8.9-27l-0.1-0.6h-30.9l-0.2,1.3c-0.6,4.7-4.1,15.8-7.1,22.5
+	c-15.5,35-49.8,61.3-91,69.7c-10.1,2.1-16.1,2.6-28.3,2.6c-9.6,0-13.7-0.3-15.6-0.9c-0.4-0.1,0.5-2.5,6.7-16.5l7.1-16.4h2.3
+	c1.3,0,4.1-0.1,6.1-0.3c37-2.8,67.3-25.8,77-58.9l0.9-3l-14.5-0.1c-8.3-0.1-15.3-0.3-16.5-0.5c-5.7-0.9-8-1.5-7.8-2.2
+	c0.1-0.3,3.2-7.6,7-16.3c5.7-13,7-15.9,7.5-16.1c0.3-0.1,6-0.3,12.6-0.3c9.7,0,11.9-0.1,11.9-0.3s-0.4-1.6-0.8-3.2
+	c-3.6-13.3-10.7-25.3-20.5-34.9c-6.5-6.6-14-11.9-22.3-15.9c-12.4-6.1-23.8-9-38.3-9.5c-3.3-0.1-6-0.3-6.2-0.5
+	c-0.2-0.2-12.1-27.2-14.1-31.8c-0.2-0.6,3.5-1.3,8.4-1.7c7.1-0.5,18-0.2,26.6,0.7c28,3.5,53.4,14.9,73.7,33
+	c17.9,16,30.6,37.6,35,59.9c0.3,1.6,0.7,3.1,0.7,3.5l0.1,0.6h30.4l0.3-2c1-4.7,2.2-9.5,3.8-14.1c5.7-16.7,15-31.1,28.2-44
+	c21.6-21.1,50.6-34,82.6-36.9c5.6-0.5,18.3-0.6,22.6-0.1c3,0.3,6.8,1,7.4,1.3c0.2,0.1-1.9,5.3-6.5,15.7c-3.7,8.5-6.9,15.7-7.1,16
+	c-0.3,0.5-1,0.5-6.2,0.7c-7.6,0.2-15.1,1.2-22.4,3c-31.4,7.9-55.8,30.2-63.7,58.3l-0.5,1.9L324,238.8z"
+    />
+  </g>
+</template>

src/components/icons/cryptos/InjIcon.vue

@@ -0,0 +1,18 @@
+<template>
+  <g>
+    <path
+      d="M256,16C123.5,16,16,123.5,16,256s107.5,240,240,240s240-107.5,240-240S388.5,16,256,16z
+	 M301.9,429v2.7c0,0.9,0,0.9-0.9,1.8c-0.4,0.4-1,0.8-1.7,0.9c-18.1,2.5-36.4,1.9-54.2-1.8C170.8,419,99.9,337.5,126.2,258.8
+	c5.2-15.1,13-29.1,22.7-41.7c1-1.9,1.6-4.1,1.7-6.3c0-2.2-0.6-4.4-1.7-6.4l-20.1-30.8c-12.2,16.2-21.7,34.2-28,53.4
+	c-23.5,71.5,5.2,143,67.3,190.1c-49.3-29.1-82.5-79.2-90-135.8c-3.5-28.3-0.8-57,7.9-84.2c8.6-27.1,23.2-51.8,42.8-72.4
+	c9.5-9.1,19.8-17.6,30.6-25.3l18.4,28.9l28,42.6c20.1,28,24.4,26.2,10.5,48.9c-2.6,5.5-23.5,36.2-27.1,45.3
+	c-5.9,13.4-8.9,28-8.8,42.6c0.9,38.9,25.3,72.4,62.1,95.1c17.9,10.7,37.4,18.4,57.7,22.6c0.9,0,1.7,0.9,2.6,1.8
+	C303.7,428,303.7,428.9,301.9,429z M383.3,387.3c-9.5,9.1-19.8,17.6-30.6,25.3l-19.3-28.9l-28-42.6c-20.1-28-24.5-26.2-10.5-48.9
+	c2.6-5.5,23.5-36.2,27.1-45.3c5.9-13.4,8.9-28,8.8-42.6c-0.9-38.9-25.3-72.4-62.1-95.1c-17.8-10.7-37.3-18.4-57.7-22.6
+	c-0.9,0-1.7-0.9-2.6-1.8c-0.5-0.4-0.8-1.1-0.9-1.9v-2.7c0-0.9,0.9-1.8,2.6-1.8c0.4-0.4,1-0.8,1.7-0.9c18.1-2.5,36.4-1.9,54.2,1.8
+	c74.3,13.6,145.1,95.1,118.9,173.8c-5.2,15.1-12.9,29.1-22.7,41.7c-1,2-1.6,4.2-1.7,6.4c0,2.2,0.6,4.4,1.7,6.4l20.1,30.8
+	c12.2-16.2,21.7-34.2,28-53.4c24.5-71.5-4.3-143-66.4-190.1c49.3,29.1,82.5,79.2,90.1,135.8c3.5,28.3,0.8,57-7.9,84.2
+	C417.5,341.9,402.9,366.6,383.3,387.3z"
+    />
+  </g>
+</template>

src/components/icons/cryptos/LinkIcon.vue

@@ -0,0 +1,8 @@
+<template>
+  <g>
+    <path
+      d="M256,16l-44,25.3L92,110.7L48,136v240l44,25.3l121.1,69.4l44,25.3l44-25.3l119-69.4l44-25.3V136
+	l-44-25.3L300,41.3L256,16z M136,325.4V186.6l120-69.4l120,69.4v138.7l-120,69.4L136,325.4z"
+    />
+  </g>
+</template>

src/components/icons/cryptos/ManaIcon.vue

@@ -0,0 +1,16 @@
+<template>
+  <g>
+    <circle cx="256" cy="256" r="240" />
+    <path d="M186,172v180h150L186,172z" />
+    <path d="M36,352h150V172L36,352z" />
+    <path
+      d="M64,400c13.7,18.1,29.9,34.3,48,48h288c18.1-13.7,34.3-29.9,48-48H64z"
+    />
+    <path d="M112,448c85.3,64,202.7,64,288,0H112z" />
+    <path d="M338,268v132h110L338,268z" />
+    <path d="M338,352H36c7.4,17,16.8,33.1,28,48h274.1v-48H338z" />
+    <path d="M228,400H338V268L228,400z" />
+    <circle cx="338" cy="172" r="60" />
+    <circle cx="186" cy="106" r="30" />
+  </g>
+</template>

src/components/icons/cryptos/MaticIcon.vue

@@ -0,0 +1,14 @@
+<template>
+  <g>
+    <path
+      d="M256,16C123.5,16,16,123.5,16,256s107.5,240,240,240s240-107.5,240-240S388.5,16,256,16z
+	 M416,337.6c0,7.5-4.1,14.2-10,17.5l-67.7,39.3c-6.7,3.3-14.2,3.3-20.1,0l-67.7-39.3c-6.7-4.1-10-10.9-10-17.5V310l31.7-18.4v26.7
+	c0,7.5,4.1,14.2,10,17.5l35.9,20.9c6.7,3.3,14.2,3.3,20.1,0l35.1-20.9c6.7-4.1,10-10.9,10-17.5v-41.8c0-7.5-4.1-14.2-10-17.5
+	L337.4,238c-6.7-3.3-14.2-3.3-20.1,0l-45.9,26.7l-31.7,18.4l-45.9,26.7c-6.7,3.3-14.2,3.3-20.1,0L106,270.6
+	c-6.7-4.1-10-10.9-10-17.5v-78.5c0-6.7,3.3-13.4,10-16.7l68.5-40.1c6.7-3.3,14.2-3.3,20.1,0l66.9,39.3c6.7,4.1,10,10.9,10,17.5v28.4
+	l-31.7,18.4v-27.5c0-7.5-4.1-14.2-10-17.5l-35.9-21.7c-6.7-3.3-14.2-3.3-20.1,0l-35.9,20.9c-6.7,4.1-10,10.9-10,17.5v41.8
+	c0,7.5,4.1,14.2,10,17.5l35.9,21.7c6.7,3.3,14.2,3.3,20.1,0l45.9-27.6l31.7-17.5l46.8-27.6c6.7-3.3,14.2-3.3,20.1,0l67.7,39.3
+	c6.7,4.1,10,10.9,10,17.5V337.6z"
+    />
+  </g>
+</template>