Refactor/decorator2

components/bsx/input/TokenBalanceInput.vue

@@ -7,40 +7,33 @@
     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'
+const balanceInputComponent = ref<BasicBalanceInput>()
+const emit = defineEmits(['input'])
 
-@Component({
-  components: {
-    BasicBalanceInput,
-  },
+defineExpose({
+  checkValidity,
 })
-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
 
-  get asset() {
-    return this.assetIdOf(this.tokenId)
-  }
+const props = defineProps({
+  value: { type: String || Number, required: true },
+  tokenId: { type: String || Number, required: false, default: '5' },
+})
 
-  get unit() {
-    return this.asset.symbol
-  }
+const vValue = computed({
+  get: () => props.value,
+  set: (value) => {
+    emit('input', value)
+  },
+})
 
-  get decimals() {
-    return this.asset.decimals
-  }
+const { assets } = usePrefix()
+const asset = computed(() => assets(props.tokenId))
+const unit = computed(() => asset.value.symbol)
+const decimals = computed(() => asset.value.decimals)
 
-  public checkValidity() {
-    const balanceInputComponent = this.$refs
-      .magicBalanceInput as BasicBalanceInput
-    return balanceInputComponent.checkValidity()
-  }
+function checkValidity() {
+  return balanceInputComponent.value?.checkValidity()
 }
 </script>

components/bsx/specific/MultiPaymentFeeButton.vue

@@ -4,49 +4,45 @@
   </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'
+const { $consola } = useNuxtApp()
 
-@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 { assets } = usePrefix()
 
-  get asset() {
-    return this.assetIdOf(this.tokenId)
-  }
+const asset = computed(() => assets(tokenId.value))
 
-  get unit() {
-    return this.asset.symbol
-  }
+const unit = computed(() => asset.value.symbol)
+const url = computed(() => `/${props.prefix}/assets`)
 
-  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) {
+    $consola.warn(e)
   }
+}
 
-  @Watch('accountId', { immediate: true })
-  onAccountIdChange(val: string, oldVal: string) {
+watch(
+  () => props.accountId,
+  (val, oldVal) => {
     if (shouldUpdate(val, oldVal)) {
-      this.fetchCurrency()
+      fetchCurrency()
     }
+  },
+  {
+    immediate: true,
   }
-}
+)
 </script>