Merge branch 'main' into test/fee

STYLE_GUIDE.md

@@ -36,7 +36,7 @@ With a few exceptions, code and comments should be written in **English** only.
 ```
 
 ### Composition API
-Since we want to upgrade to Nuxt 3 in the near future, we should pre-emptively work towards a compatible codebase, such that the transition will be as smooth as possible. Therefore, every new feature is required to be written in the new **Composition API** and should follow the following recommendations: 
+Since we want to upgrade to Nuxt 3 in the near future, we should pre-emptively work towards a compatible codebase, such that the transition will be as smooth as possible. Therefore, every new feature is required to be written in the new **Composition API** and should follow the following recommendations:
 
 ```vue
 <script lang="ts" setup>
@@ -177,7 +177,7 @@ const getItemsWithText = computed(() => props.items.filter(item => item.text) ||
 </script>
 ```
 
-## Vuex Conventions
+## Vuex Conventions (old, now we're using pinia)
 - each module is defined in its own file -> Explorer Module has its state, actions, mutations, getters defined in `explorer.ts`
 - **mutations** should only be **triggered via actions** and should be named in **SCREAMING_SNAKE_CASE**:
 ```typescript

components/bsx/Create/CreateToken.vue

@@ -119,6 +119,7 @@ import ApiUrlMixin from '@/utils/mixins/apiUrlMixin'
 import { getKusamaAssetId } from '@/utils/api/bsx/query'
 import { uploadDirectWhenMultiple } from '@/utils/directUpload'
 import { usePinningStore } from '@/stores/pinning'
+import { usePreferencesStore } from '@/stores/preferences'
 
 type MintedCollection = BaseMintedCollection & {
   name?: string
@@ -153,6 +154,7 @@ export default class CreateToken extends mixins(
   ApiUrlMixin
 ) {
   @Prop({ type: Boolean, default: false }) showExplainerText!: boolean
+  private preferencesStore = usePreferencesStore()
 
   public base: BaseTokenType<MintedCollection> = {
     name: '',
@@ -176,7 +178,6 @@ export default class CreateToken extends mixins(
   }
   protected metadata = ''
   protected balanceNotEnough = false
-  public hasCarbonOffset = this.$store.state.preferences.hasCarbonOffset
   @Ref('balanceInput') readonly balanceInput
   @Ref('baseTokenForm') readonly baseTokenForm
 
@@ -186,6 +187,10 @@ export default class CreateToken extends mixins(
     this.balanceInput.checkValidity()
   }
 
+  get hasCarbonOffset() {
+    return this.preferencesStore.hasCarbonOffset
+  }
+
   get balanceNotEnoughMessage() {
     if (this.balanceNotEnough) {
       return this.$t('tooltip.notEnoughBalance')

components/collection/CollectionList.vue

@@ -35,11 +35,12 @@ import 'lazysizes'
 import collectionListWithSearch from '@/queries/subsquid/general/collectionListWithSearch.graphql'
 import { getDenyList } from '~/utils/prefix'
 import CollectionCard from '@/components/collection/CollectionCard.vue'
-
-const { urlPrefix, client } = usePrefix()
-const { $store, $apollo } = useNuxtApp()
+import { usePreferencesStore } from '@/stores/preferences'
 
 const route = useRoute()
+const { $apollo } = useNuxtApp()
+const { urlPrefix, client } = usePrefix()
+const preferencesStore = usePreferencesStore()
 
 const collections = ref<Collection[]>([])
 const isLoading = ref(true)
@@ -75,10 +76,7 @@ const buildSearchParam = (): Record<string, unknown>[] => {
 onBeforeMount(() => {
   fetchPageData(startPage.value)
   // setting the default layout until redesign explorer menubar: YOLO
-  $store.dispatch(
-    'preferences/setLayoutClass',
-    'is-one-quarter-desktop is-one-third-tablet'
-  )
+  preferencesStore.setLayoutClass('is-one-quarter-desktop is-one-third-tablet')
 })
 
 const fetchPageData = async (page: number, loadDirection = 'down') => {

components/common/ConnectWallet/ConnectWalletModal.vue

@@ -11,25 +11,7 @@
         {{ headerTitle }}
       </span>
       <a class="is-flex is-align-items-center" @click="emit('close')">
-        <svg
-          width="15"
-          height="15"
-          viewBox="0 0 15 15"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg">
-          <line
-            x1="0.33914"
-            y1="0.632598"
-            x2="13.3391"
-            y2="12.6326"
-            stroke="currentColor" />
-          <line
-            x1="0.646447"
-            y1="12.6464"
-            x2="12.6464"
-            y2="0.646447"
-            stroke="currentColor" />
-        </svg>
+        <NeoIcon icon="close" />
       </a>
     </header>
     <section v-if="showAccount">
@@ -48,34 +30,12 @@
         class="is-flex is-align-items-center pt-4 pb-3 is-size-7 has-text-grey more-option-button"
         @click="toggleShowUninstalledWallet">
         {{ $i18n.t('walletConnect.moreOption') }}
-
-        <svg
+        <NeoIcon
           v-if="showUninstalledWallet"
           class="ml-1"
-          width="9"
-          height="4"
-          viewBox="0 0 9 4"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M8.20068 0.5L4.60068 3.5L1.00068 0.5"
-            stroke="currentColor"
-            stroke-width="0.761905" />
-        </svg>
+          icon="chevron-down" />
 
-        <svg
-          v-else
-          class="ml-1"
-          width="5"
-          height="8"
-          viewBox="0 0 5 8"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M1 0.399658L4 3.99966L1 7.59966"
-            stroke="currentColor"
-            stroke-width="0.761905" />
-        </svg>
+        <NeoIcon v-else class="ml-1" icon="chevron-right" />
       </a>
       <div v-if="showUninstalledWallet" class="buttons">
         <WalletMenuItem
@@ -96,17 +56,7 @@
           @click.native="setUserAuthValue">
           <span class="is-flex is-align-items-center is-justify-content-center">
             {{ $i18n.t('walletConnect.confirm') }}
-            <svg
-              class="ml-2"
-              width="13"
-              height="13"
-              viewBox="0 0 13 13"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg">
-              <path
-                d="M4.675 1.5L3.5 2.67498L7.31667 6.49992L3.5 10.3249L4.675 11.4998L9.675 6.49992L4.675 1.5Z"
-                fill="currentColor" />
-            </svg>
+            <NeoIcon class="ml-2" icon="chevron-right" />
           </span>
         </NeoButton>
       </b-field>
@@ -122,17 +72,7 @@
         href="https://docs.kodadot.xyz/tutorial-overview.html"
         target="_blank"
         rel="noopener noreferrer">
-        <svg
-          class="mr-2"
-          width="9"
-          height="10"
-          viewBox="0 0 9 10"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M4.5 0.5C2.0187 0.5 0 2.5187 0 5C0 7.4813 2.0187 9.5 4.5 9.5C6.9813 9.5 9 7.4813 9 5C9 2.5187 6.9813 0.5 4.5 0.5ZM4.95 7.25H4.05V4.55H4.95V7.25ZM4.95 3.65H4.05V2.75H4.95V3.65Z"
-            fill="#6188E7" />
-        </svg>
+        <NeoIcon class="mr-2" icon="circle-info" />
         {{ $i18n.t('walletConnect.walletLink') }}
       </a>
     </footer>
@@ -142,7 +82,7 @@
 <script lang="ts" setup>
 import { SupportedWallets } from '@/utils/config/wallets'
 import { BaseDotsamaWallet } from '@/utils/config/wallets/BaseDotsamaWallet'
-import { NeoButton } from '@kodadot1/brick'
+import { NeoButton, NeoIcon } from '@kodadot1/brick'
 import WalletMenuItem from '@/components/common/ConnectWallet/WalletMenuItem'
 import WalletAsset from '@/components/common/ConnectWallet/WalletAsset'
 

components/common/ConnectWallet/WalletMenuItem.vue

@@ -15,36 +15,11 @@
           <span class="is-size-6 ml-2 is-capitalized">{{ wallet.name }}</span>
         </span>
 
-        <svg
-          v-if="!wallet.installed"
-          width="14"
-          height="15"
-          viewBox="0 0 14 15"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M11.0832 13.3334H2.9165V12.1667H11.0832V13.3334ZM6.99984 11.0001L3.49984 7.50008L4.32234 6.67758L6.4165 8.76591V1.66675H7.58317V8.76591L9.67734 6.67758L10.4998 7.50008L6.99984 11.0001Z"
-            fill="currentColor" />
-        </svg>
-        <svg
-          v-else-if="showAccountList"
-          width="15"
-          height="8"
-          viewBox="0 0 15 8"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg">
-          <path d="M14 0.5L7.5 6.5L0.5 0.499999" stroke="currentColor" />
-        </svg>
+        <NeoIcon v-if="!wallet.installed" icon="download" />
 
-        <svg
-          v-else
-          width="8"
-          height="15"
-          viewBox="0 0 8 15"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg">
-          <path d="M1 0.75L7 7.25L1 14.25" stroke="currentColor" />
-        </svg>
+        <NeoIcon v-else-if="showAccountList" icon="chevron-down" />
+
+        <NeoIcon v-else icon="chevron-right" />
       </div>
     </b-button>
 
@@ -82,6 +57,7 @@ import shouldUpdate from '@/utils/shouldUpdate'
 import { formatAddress } from '@/utils/account'
 import shortAddress from '@/utils/shortAddress'
 import { useWalletStore } from '@/stores/wallet'
+import { NeoIcon } from '@kodadot1/brick'
 
 defineProps<{
   wallet: BaseDotsamaWallet

components/explore/ExploreGrid.vue

@@ -25,18 +25,19 @@
 
 <script setup lang="ts">
 import { NeoButton } from '@kodadot1/brick'
+import { usePreferencesStore } from '@/stores/preferences'
 
-const { $store } = useNuxtApp()
+const preferencesStore = usePreferencesStore()
 
-const gridSize = computed(() => $store.getters['preferences/getGridSize'])
+const gridSize = computed(() => preferencesStore.getGridSize)
 
 const smallGridLayout = ref('is-half-desktop is-half-tablet is-half-mobile')
 const largeGridLayout = ref(
   'is-one-quarter-desktop is-one-third-tablet is-half-mobile'
 )
 
 const changeGridLayout = (layout: string, grid: string) => {
-  $store.dispatch('preferences/setGalleryLayoutClass', layout)
-  $store.dispatch('preferences/setGridSize', grid)
+  preferencesStore.setGalleryLayoutClass(layout)
+  preferencesStore.setGridSize(grid)
 }
 </script>

components/explore/ExploreSort.vue

@@ -70,14 +70,30 @@ const options = computed(() => {
     : NFT_SQUID_SORT_COLLECTIONS
 })
 
-function enforceArray(options: string[]) {
-  return Array.isArray(options) ? options : []
+function removeDuplicateSortKeys(options: string[]) {
+  const uniqueOptions = {}
+
+  if (!Array.isArray(options)) {
+    return []
+  }
+
+  options.forEach((option) => {
+    const opt = option.split('_')
+    const identifier = opt[0]
+    const sort = opt[1]
+
+    uniqueOptions[identifier] = sort
+  })
+
+  return Object.keys(uniqueOptions).map((identifier) => {
+    return `${identifier}_${uniqueOptions[identifier]}`
+  })
 }
 
 const sortOptions = ref<string[]>([])
 const selectedSort = computed({
   get: () => sortOptions.value,
-  set: (value) => (sortOptions.value = enforceArray(value)),
+  set: (value) => (sortOptions.value = removeDuplicateSortKeys(value)),
 })
 
 function onChange(selected) {
@@ -86,7 +102,7 @@ function onChange(selected) {
     query: {
       ...route.query,
       page: '1',
-      sort: enforceArray(selected),
+      sort: removeDuplicateSortKeys(selected),
     },
   })
 }

components/explore/FilterMenuButton.vue

@@ -23,8 +23,10 @@
 <script setup lang="ts">
 import { NeoButton } from '@kodadot1/brick'
 import ActiveCount from './ActiveCount.vue'
+import { usePreferencesStore } from '@/stores/preferences'
+
 const route = useRoute()
-const { $store } = useNuxtApp()
+const preferencesStore = usePreferencesStore()
 
 const disabled = computed(() => {
   const allowedList = ['prefix-explore-items', 'prefix-collection-id']
@@ -33,7 +35,7 @@ const disabled = computed(() => {
 })
 
 const isSidebarFiltersOpen = computed(
-  () => $store.getters['preferences/getsidebarFilterCollapse']
+  () => preferencesStore.getsidebarFilterCollapse
 )
 
 const numOfActiveFilters = computed(() => {
@@ -45,15 +47,11 @@ const numOfActiveFilters = computed(() => {
   return activeFilters.length
 })
 
-const toggleSidebarFilters = () => {
-  $store.dispatch(
-    'preferences/setSidebarFilterCollapse',
-    !isSidebarFiltersOpen.value
-  )
-}
-const openMobileFilters = () => {
-  $store.dispatch('preferences/setMobileFilterCollapse', true)
-}
+const toggleSidebarFilters = () =>
+  (preferencesStore.sidebarFilterCollapseOpen = !isSidebarFiltersOpen.value)
+
+const openMobileFilters = () =>
+  (preferencesStore.mobileFilterCollapseOpen = true)
 </script>
 
 <style lang="scss" scoped>