Refactor/decorator2

components/bsx/input/TokenBalanceInput.vue

@@ -7,40 +7,31 @@
     expanded />
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import BasicBalanceInput from '@/components/shared/form/BasicBalanceInput.vue'
-import AssetMixin from '@/utils/mixins/assetMixin'
-import { Component, Prop, VModel, mixins } from 'nuxt-property-decorator'
 
-@Component({
-  components: {
-    BasicBalanceInput,
-  },
-})
-export default class TokenBalanceInput extends mixins(AssetMixin) {
-  @VModel() vValue!: string | number
-  @Prop({ type: String, required: false, default: '5' }) tokenId!:
-    | string
-    | number
-  // @Prop({ type: Number, default: '0' }) min!: number
-  // @Prop({ type: Number, default: undefined }) max!: number
+const balanceInputComponent = ref<BasicBalanceInput>()
 
-  get asset() {
-    return this.assetIdOf(this.tokenId)
-  }
+const emit = defineEmits(['input'])
 
-  get unit() {
-    return this.asset.symbol
-  }
+const props = defineProps({
+  value: { type: String || Number, required: true },
+  tokenId: { type: String || Number, required: false, default: '5' },
+})
 
-  get decimals() {
-    return this.asset.decimals
-  }
+const vValue = computed({
+  get() {
+    return props.value
+  },
+  set(value) {
+    emit('input', value)
+  },
+})
 
-  public checkValidity() {
-    const balanceInputComponent = this.$refs
-      .magicBalanceInput as BasicBalanceInput
-    return balanceInputComponent.checkValidity()
-  }
+const asset = computed(() => useAsset().assetIdOf(props.tokenId))
+const unit = computed(() => asset.value.symbol)
+const decimals = computed(() => asset.value.decimals)
+function checkValidity() {
+  return balanceInputComponent.value?.checkValidity()
 }
 </script>

components/bsx/specific/MultiPaymentFeeButton.vue

@@ -4,49 +4,43 @@
   </nuxt-link>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { getAssetIdByAccount } from '@/utils/api/bsx/query'
-import { Component, Prop, Watch, mixins } from 'nuxt-property-decorator'
-import UseApiMixin from '@/utils/mixins/useApiMixin'
-import AssetMixin from '@/utils/mixins/assetMixin'
+
 import shouldUpdate from '@/utils/shouldUpdate'
 
-@Component({})
-export default class MultiPaymentFeeButton extends mixins(
-  AssetMixin,
-  UseApiMixin
-) {
-  @Prop({ type: String, required: false }) public accountId!: string
-  @Prop({ type: String, default: 'bsx', required: false })
-  public prefix!: string
-  protected tokenId = '0'
+const props = withDefaults(
+  defineProps<{
+    accountId: string
+    prefix?: string
+  }>(),
+  { prefix: 'bsx' }
+)
+const tokenId = ref('0')
+const asset = computed(() => useAsset().assetIdOf(tokenId.value))
 
-  get asset() {
-    return this.assetIdOf(this.tokenId)
-  }
+const unit = computed(() => asset.value.symbol)
+const url = computed(() => `/${props.prefix}/assets`)
 
-  get unit() {
-    return this.asset.symbol
-  }
-
-  get url(): string {
-    return `/${this.prefix}/assets`
-  }
-
-  async fetchCurrency() {
-    try {
-      const api = await this.useApi()
-      this.tokenId = await getAssetIdByAccount(api, this.accountId)
-    } catch (e) {
-      this.$consola.log(e)
-    }
+const fetchCurrency = async () => {
+  try {
+    const { apiInstance } = useApi()
+    const api = await apiInstance.value
+    tokenId.value = await getAssetIdByAccount(api, props.accountId)
+  } catch (e) {
+    console.log(e) // Use `console.log` instead of `this.$consola.log`
   }
+}
 
-  @Watch('accountId', { immediate: true })
-  onAccountIdChange(val: string, oldVal: string) {
+watch(
+  () => props.accountId,
+  (val, oldVal) => {
     if (shouldUpdate(val, oldVal)) {
-      this.fetchCurrency()
+      fetchCurrency()
     }
+  },
+  {
+    immediate: true,
   }
-}
+)
 </script>

composables/useAsset.ts

@@ -0,0 +1,11 @@
+import { useAssetsStore } from '~/stores/assets'
+
+export default function () {
+  const assetIdOf = (id: string | number) => {
+    return useAssetsStore().getAssetById(String(id))
+  }
+
+  return {
+    assetIdOf,
+  }
+}