🔧 conflicts

.eslintrc.js

@@ -7,6 +7,7 @@ module.exports = {
  extends: [
  'plugin:vue/recommended',
  'plugin:@typescript-eslint/recommended',
+ 'plugin:vue-scoped-css/recommended',
  'prettier',
  ],
  parser: 'vue-eslint-parser',
@@ -46,6 +47,11 @@ module.exports = {
  },
  ],
  'vue/multi-word-component-names': 'off',
+ 'vue-scoped-css/v-deep-pseudo-style': ['error', ':deep'],
+ 'vue-scoped-css/no-deprecated-deep-combinator': 'error',
+ 'vue-scoped-css/require-v-deep-argument': 'error',
+ 'vue-scoped-css/no-unused-selector': 'off',
+ 'vue-scoped-css/enforce-style-type': 'off',
  },
  ignorePatterns: ['*.md'],
  overrides: [

.github/workflows/playwright.yml

@@ -6,7 +6,7 @@ on:
  branches: [ main, master ]
 jobs:
  test:
- timeout-minutes: 10
+ timeout-minutes: 15
  runs-on: ubuntu-latest
  steps:
  - uses: actions/checkout@v3

README.md

@@ -1,6 +1,7 @@
 # One Stop Shop for your Polkadot NFTs
 
-![](https://github.com/kodadot/kodadot-presskit/blob/main/v3/KODA_v3.png?raw=true)
+![Frame 819](https://github.com/kodadot/nft-gallery/assets/90852205/70989633-9c78-47ee-9e23-4a60c12d8d76)
+
 
 # Contributing
 

components/Navbar.vue

@@ -355,7 +355,7 @@ useEventListener(window, 'resize', handleResize)
 </script>
 
 <style lang="scss" scoped>
-:deep .navbar-explore {
+:deep(.navbar-explore) {
  .navbar-item {
  height: 4.5rem;
  }

components/TheFooter.vue

@@ -1,13 +1,13 @@
 <template>
- <footer class="footer-container section">
+ <footer class="footer-container section" data-testid="footer-container">
  <div
  class="footer-container-inner is-flex is-align-items-start is-justify-content-space-between">
  <section class="footer-container-subs is-flex is-flex-direction-column">
  <h2 class="subtitle is-5">
  {{ $t('footer.subscribe') }}
  </h2>
  <div class="is-flex is-align-items-center footer-container-subs-items">
- <div id="custom-substack-embed"></div>
+ <div id="custom-substack-embed" data-testid="footer-subscribe"></div>
 
  <script>
  window.CustomSubstackWidget = {

components/balance/MultipleBalances.vue

@@ -7,7 +7,7 @@
  </div>
  <div v-else class="balance">
  <div class="balance-row has-text-grey is-size-7">
- <div class="is-flex-grow-2">{{ $t('general.chain') }}</div>
+ <div class="is-flex-grow-3">{{ $t('general.chain') }}</div>
  <div class="has-text-right is-flex-grow-1">
  {{ $t('general.token') }}
  </div>
@@ -25,7 +25,9 @@
  v-for="token in filterEmptyBalanceChains(chain)"
  :key="token.name"
  class="balance-row">
- <div class="is-capitalized is-flex-grow-2">{{ key }}</div>
+ <div class="is-capitalized is-flex-grow-3">
+ {{ key }}
+ </div>
  <div class="has-text-right is-flex-grow-1">
  {{ token.name.toUpperCase() }}
  </div>
@@ -69,7 +71,6 @@ import { getAssetIdByAccount } from '@/utils/api/bsx/query'
 import { toDefaultAddress } from '@/utils/account'
 
 import { ChainToken, useIdentityStore } from '@/stores/identity'
-
 import type { PalletBalancesAccountData } from '@polkadot/types/lookup'
 
 const { accountId } = useAuth()
@@ -87,9 +88,9 @@ const networkToPrefix = {
  polkadot: 'dot',
  kusama: 'ksm',
  basilisk: 'bsx',
- statemine: 'ahk',
+ kusamaHub: 'ahk',
  'basilisk-testnet': 'snek',
- statemint: 'ahp',
+ polkadotHub: 'ahp',
 }
 
 const isBalanceLoading = computed(

components/chart/PriceChart.vue

@@ -1,5 +1,5 @@
 <template>
- <div class="common-price-chart">
+ <div class="common-price-chart" data-testid="gallery-item-chart">
  <span class="chart-y-description is-size-7">
  Price ({{ chainSymbol }})
  </span>

components/collection/HeroButtons.vue

@@ -83,10 +83,7 @@
  <p class="card-header-title">{{ collection?.name }}</p>
  </header>
  <div class="card-content">
- <QRCode
- :text="currentCollectionUrl"
- color="#db2980"
- bg-color="#000" />
+ <QRCode :text="currentCollectionUrl" />
  </div>
  </div>
  </NeoModal>

components/collection/unlockable/UnlockableHeroButtons.vue

@@ -37,7 +37,7 @@
  <NeoModal v-model="QRModalActive" @close="QRModalActive = false">
  <div class="card">
  <div class="card-content">
- <QRCode :text="currentUrl" color="#db2980" bg-color="#000" />
+ <QRCode :text="currentUrl" />
  </div>
  </div>
  </NeoModal>

components/common/ConnectWallet/WalletAssetMenu.vue

@@ -139,7 +139,7 @@ const closeModal = () => {
 
  @include tablet {
  // manually center dropdown menu, because no props "postition" to center it
- :deep .o-drop__menu {
+ :deep(.o-drop__menu) {
  transform: translateX(50px);
  }
  }

components/common/confirmPurchaseModal/ConfirmPurchaseModal.vue

@@ -22,18 +22,7 @@
  @click.native="onClose" />
  </header>
  <div class="px-6 pt-4">
- <div
- class="rounded border shade-border-color is-flex is-justify-content-start is-flex-grow-1 pl-3">
- <IdentityItem
- v-if="isLogIn"
- :label="$t('confirmPurchase.connectedWith')"
- hide-identity-popover
- disable-identity-link
- :prefix="urlPrefix"
- :account="accountId"
- class="identity-name-font-weight-regular"
- data-testid="item-creator" />
- </div>
+ <ModalIdentityItem />
  </div>
  <div class="py-2">
  <ConfirmPurchaseItemRow
@@ -84,13 +73,13 @@ import { sum } from '@/utils/math'
 import { usePreferencesStore } from '@/stores/preferences'
 import { useShoppingCartStore } from '@/stores/shoppingCart'
 import CommonTokenMoney from '@/components/shared/CommonTokenMoney.vue'
-import IdentityItem from '@/components/identity/IdentityItem.vue'
 import ConfirmPurchaseItemRow from './ConfirmPurchaseItemRow.vue'
 import { totalPriceUsd } from '../shoppingCart/utils'
+import ModalIdentityItem from '@/components/shared/ModalIdentityItem.vue'
 
 const prefrencesStore = usePreferencesStore()
 const shoppingCartStore = useShoppingCartStore()
-const { isLogIn, accountId } = useAuth()
+const { isLogIn } = useAuth()
 const { urlPrefix } = usePrefix()
 const { $i18n } = useNuxtApp()
 const { balance } = useBalance()
@@ -162,19 +151,14 @@ const confirm = () => {
  border-color: theme('k-shade');
  }
 }
-
-.rounded {
- border-radius: 10rem;
-}
-
 .modal-width {
  width: 25rem;
 }
 .btn-height {
  height: 3.5rem;
 }
 
-:deep .identity-name-font-weight-regular {
+:deep(.identity-name-font-weight-regular) {
  .identity-name {
  font-weight: unset !important;
  }