Merge pull request #6394 from roiLeo/chore/remove/unusedcomp

components/bsx/format/TokenMoney.vue

@@ -8,34 +8,28 @@
  :round="round" />
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import BasicMoney from '@/components/shared/format/BasicMoney.vue'
-import { Component, Prop, mixins } from 'nuxt-property-decorator'
-import AssetMixin from '@/utils/mixins/assetMixin'
+import { useAssetsStore } from '@/stores/assets'
 
-@Component({
- components: {
- BasicMoney,
- },
-})
-export default class TokenMoney extends mixins(AssetMixin) {
- @Prop({ default: '0' }) readonly value: number | string | undefined
- @Prop({ type: String, default: '5' }) tokenId!: string | number
-
- @Prop(Boolean) readonly inline!: boolean
- @Prop(Boolean) readonly hideUnit!: boolean
- @Prop({ type: Number, default: 4 }) readonly round!: number
-
- get asset() {
- return this.assetIdOf(this.tokenId)
+const assetsStore = useAssetsStore()
+const assetIdOf = (id: string | number) => assetsStore.getAssetById(String(id))
+const props = withDefaults(
+ defineProps<{
+ value: number | string | undefined
+ tokenId: string
+ inline: boolean
+ hideUnit?: boolean
+ round: number
+ }>(),
+ {
+ value: '0',
+ tokenId: '5',
+ round: 4,
  }
+)
 
- get unit() {
- return this.asset.symbol
- }
-
- get decimals() {
- return this.asset.decimals
- }
-}
+const asset = computed(() => assetIdOf(props.tokenId))
+const unit = computed(() => asset.symbol)
+const decimals = computed(() => asset.decimals)
 </script>

components/search/SearchResultItem.vue

@@ -2,7 +2,7 @@
  <div class="search-result-item" :class="{ 'loading-item': isLoading }">
  <div class="media">
  <div class="media-left" :class="{ border: !isLoading }">
- <NeoSkeleton v-if="isLoading" width="64px" height="64px"></NeoSkeleton>
+ <NeoSkeleton v-if="isLoading" width="64px" height="64px" />
  <BasicImage v-else custom-class="is-64x64" :src="image" />
  </div>
  <div
@@ -13,13 +13,13 @@
  :width="240"
  :height="22"
  size="medium"
- active></NeoSkeleton>
+ active />
  <NeoSkeleton
  :count="1"
  :width="150"
  :height="22"
  size="medium"
- active></NeoSkeleton>
+ active />
  </div>
  <div v-else class="media-content">
  <slot name="content"></slot>
@@ -28,21 +28,22 @@
  </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from 'nuxt-property-decorator'
+<script lang="ts" setup>
 import { NeoSkeleton } from '@kodadot1/brick'
+import BasicImage from '@/components/shared/view/BasicImage.vue'
 
-@Component({
- components: {
- BasicImage: () => import('@/components/shared/view/BasicImage.vue'),
- NeoSkeleton,
- },
-})
-export default class SearchResultItem extends Vue {
- @Prop({ type: Boolean, default: false }) public isLoading!: boolean
- @Prop({ type: String, default: '' }) public image!: string
-}
+withDefaults(
+ defineProps<{
+ isLoading?: boolean
+ image?: string
+ }>(),
+ {
+ isLoading: false,
+  image: '',
+ }
+)
 </script>
+
 <style scoped>
 .media-left :deep img {
  max-height: 100%;

components/shared/Auth.vue

@@ -10,40 +10,33 @@
  <ConnectWalletButton v-else label="general.connect_wallet" />
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from 'nuxt-property-decorator'
+<script lang="ts" setup>
+import Avatar from '@/components/shared/Avatar.vue'
+import ConnectWalletButton from '@/components/shared/ConnectWalletButton.vue'
+import Identity from '@/components/identity/IdentityIndex.vue'
 import { useIdentityStore } from '@/stores/identity'
 
-const components = {
- Avatar: () => import('@/components/shared/Avatar.vue'),
- ConnectWalletButton: () =>
- import('@/components/shared/ConnectWalletButton.vue'),
- Identity: () => import('@/components/identity/IdentityIndex.vue'),
- Money: () => import('@/components/shared/format/Money.vue'),
-}
-
-@Component({ components })
-export default class Auth extends Vue {
- @Prop({ default: 24 }) public size!: number
-
- public mounted() {
- if (this.account) {
- this.$emit('input', this.account)
- }
- }
-
- get identityStore() {
- return useIdentityStore()
- }
-
- set account(account: string) {
- this.identityStore.setAuth({ address: account })
+const emit = defineEmits(['input'])
+const identityStore = useIdentityStore()
+const account = computed({
+ get: () => identityStore.getAuthAddress,
+ set: (account: string) => identityStore.setAuth({ address: account }),
+})
+
+withDefaults(
+ defineProps<{
+ size: number
+ }>(),
+ {
+ size: 24,
  }
+)
 
- get account() {
- return this.identityStore.getAuthAddress
+onMounted(() => {
+ if (account.value) {
+ emit('input', account.value)
  }
-}
+})
 </script>
 
 <style scoped>

components/shared/BlockExplorerLink.vue

@@ -5,40 +5,35 @@
  </a>
 </template>
 
-<script lang="ts">
-import { Component, Prop, mixins } from 'nuxt-property-decorator'
+<script lang="ts" setup>
 import {
  BLOCK_EXPLORER_WITH_QUERY,
  blockExplorerOf,
 } from '@/utils/config/chain.config'
-import PrefixMixin from '@/utils/mixins/prefixMixin'
 
-const components = {}
+const { urlPrefix } = usePrefix()
 
-@Component({ components })
-export default class BlockExplorerLink extends mixins(PrefixMixin) {
- @Prop({ type: String, default: 'subscan' }) public provider!: string
- @Prop({ type: String, required: true }) public blockId!: string
- @Prop({ type: String, required: true }) public text!: string
-
- get blockUrl(): string {
- if (!this.hasBlockUrl || !this.blockId) {
- return '#'
- }
- if (BLOCK_EXPLORER_WITH_QUERY.includes(this.urlPrefix)) {
- return this.blockExplorer + this.blockId
- }
- return this.blockExplorer + 'block/' + this.blockId
+const props = withDefaults(
+ defineProps<{
+ provider: string
+ blockId: string
+ text: string
+ }>(),
+ {
+ provider: 'subscan',
  }
+)
 
- get blockExplorer(): string | undefined {
- return blockExplorerOf(this.urlPrefix)
- }
+const blockExplorer = computed(() => blockExplorerOf(urlPrefix.value))
+const hasBlockUrl = computed(() => Boolean(blockExplorer.value))
 
- get hasBlockUrl(): boolean {
- return Boolean(this.blockExplorer)
+const blockUrl = computed(() => {
+ if (!hasBlockUrl.value || !props.blockId) {
+ return '#'
  }
-}
+ if (BLOCK_EXPLORER_WITH_QUERY.includes(urlPrefix.value)) {
+ return blockExplorer.value + props.blockId
+ }
+ return blockExplorer.value + 'block/' + props.blockId
+})
 </script>
-
-<style scoped></style>

components/shared/CommonTokenMoney.vue

@@ -10,24 +10,26 @@
  <Money v-else :value="value" :data-cy="dataCy" inline :round="round" />
 </template>
 
-<script lang="ts">
-import { Component, Prop, mixins } from 'nuxt-property-decorator'
-import PrefixMixin from '@/utils/mixins/prefixMixin'
+<script lang="ts" setup>
+import Money from '@/components/shared/format/Money.vue'
+import TokenMoney from '@/components/bsx/format/TokenMoney.vue'
+import { getKusamaAssetId } from '@/utils/api/bsx/query'
 
-const components = {
- Money: () => import('@/components/shared/format/Money.vue'),
- TokenMoney: () => import('@/components/bsx/format/TokenMoney.vue'),
-}
-
-@Component({ components })
-export default class CommonTokenMoney extends mixins(PrefixMixin) {
- @Prop({ default: '0' }) readonly value!: number | string | undefined
- @Prop({ default: '' }) readonly customTokenId!: string | undefined
- @Prop({ type: String, default: '' }) readonly dataCy!: string
- @Prop({ type: Number, default: 4 }) readonly round!: number
-
- get currentTokenId() {
- return this.customTokenId || this.tokenId
+withDefaults(
+ defineProps<{
+ value: number | string | undefined
+ customTokenId?: string | undefined
+ dataCy: string
+ round: number
+ }>(),
+ {
+ value: '0',
+ customTokenId: '',
+ dataCy: '',
+ round: 4,
  }
-}
+)
+
+const { urlPrefix } = usePrefix()
+const tokenId = computed(() => getKusamaAssetId(urlPrefix.value))
 </script>