From 6029da43954abe7db868c336fcdd4c74b9641ad6 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Sat, 22 Jul 2023 11:34:05 +0700
Subject: [PATCH 1/2] make Auth size prop optional (remove console warning)

---
 components/shared/Auth.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/shared/Auth.vue b/components/shared/Auth.vue
index 7e58a3590a..9ee289ace3 100644
--- a/components/shared/Auth.vue
+++ b/components/shared/Auth.vue
@@ -25,7 +25,7 @@ const account = computed({
 
 withDefaults(
   defineProps<{
-    size: number
+    size?: number
   }>(),
   {
     size: 24,

From 825b84f7703d1d6574018091e63d54281b9ba42d Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Sat, 22 Jul 2023 11:34:52 +0700
Subject: [PATCH 2/2] refactor transfer page

---
 components/transfer/Transfer.vue | 432 ++++++++++++++++++++++++++++
 composables/useChain.ts          |   4 +
 pages/_prefix/transfer.vue       | 472 +------------------------------
 3 files changed, 441 insertions(+), 467 deletions(-)
 create mode 100644 components/transfer/Transfer.vue

diff --git a/components/transfer/Transfer.vue b/components/transfer/Transfer.vue
new file mode 100644
index 0000000000..137ac943ed
--- /dev/null
+++ b/components/transfer/Transfer.vue
@@ -0,0 +1,432 @@
+<template>
+  <section>
+    <Loader v-model="isLoading" :status="status" />
+    <nuxt-link
+      v-if="$route.query.target"
+      :to="`/${urlPrefix}/u/${correctAddress}`"
+      class="pl-4 is-flex is-align-items-center">
+      <NeoIcon icon="chevron-left" class="mr-2" />
+      {{ $t('teleport.artistProfile') }}
+    </nuxt-link>
+    <p class="title is-size-3">
+      {{ $t('transfer') }} {{ unit }}
+      <span class="has-text-primary">${{ getCurrentTokenValue(unit) }}</span>
+    </p>
+
+    <NeoField>
+      <Auth />
+    </NeoField>
+
+    <div v-if="targets && hasBlockExplorer" class="mb-3">
+      {{ $t('teleport.donationSentTo') }}
+      <a
+        v-for="target in targets"
+        :key="target"
+        :href="addressExplorerUrl(target)"
+        target="_blank"
+        rel="nofollow noopener noreferrer"
+        class="has-text-weight-bold">
+        <Identity ref="identity" :address="target" show-onchain-identity />
+      </a>
+    </div>
+
+    <div class="is-flex is-align-items-center">
+      <NeoField>
+        {{ $t('general.balance') }}
+        <Money :value="balance" inline />
+      </NeoField>
+    </div>
+
+    <div
+      v-for="(destinationAddress, index) in destinationAddresses"
+      :key="destinationAddress">
+      <div class="is-flex">
+        <NeoField class="is-flex-grow-1">
+          <AddressInput v-model="destinationAddresses[index]" :strict="false" />
+        </NeoField>
+        <b-button
+          v-show="index == destinationAddresses.length - 1"
+          type="is-primary"
+          size="is-small"
+          icon-left="plus"
+          class="ml-2 mt-2"
+          outlined
+          @click="addAddress">
+          Add
+        </b-button>
+      </div>
+
+      <DisabledInput
+        v-show="
+          correctAddress(destinationAddress) &&
+          correctAddress(destinationAddress) !== destinationAddress
+        "
+        :label="$t('general.correctAddress')"
+        :value="correctAddress(destinationAddress)" />
+    </div>
+    <div class="container mb-3">
+      <NeoField>
+        <BalanceInput
+          v-model="price"
+          :label="$t('amount')"
+          :calculate="false"
+          @input="onAmountFieldChange" />
+      </NeoField>
+      <NeoField>
+        <ReadOnlyBalanceInput
+          v-model="usdValue"
+          :label-input="$t('teleport.usdInput')"
+          label="USD"
+          @input="onUSDFieldChange" />
+      </NeoField>
+    </div>
+
+    <div class="buttons">
+      <b-button
+        type="is-primary"
+        icon-left="paper-plane"
+        :loading="isLoading"
+        :disabled="disabled"
+        outlined
+        @click="submit">
+        {{ $t('general.submit') }}
+      </b-button>
+      <b-button
+        v-if="transactionValue && hasBlockExplorer"
+        type="is-success"
+        class="ml-4"
+        icon-left="external-link-alt"
+        outlined
+        @click="getExplorerUrl">
+        {{ $t('View Transaction') }} {{ transactionValue.substring(0, 6)
+        }}{{ '...' }}
+      </b-button>
+      <b-button
+        v-if="transactionValue && hasBlockExplorer"
+        v-clipboard:copy="getUrl()"
+        type="is-primary"
+        @click="toast($t('toast.urlCopy'))">
+        <NeoIcon pack="fas" icon="link" />
+      </b-button>
+      <b-button
+        v-if="hasAddress"
+        v-clipboard:copy="generatePaymentLink()"
+        type="is-success"
+        icon-left="money-bill"
+        :loading="isLoading"
+        outlined
+        @click="toast($t('toast.paymentLinkCopy'))">
+        {{ $t('Copy Payment link') }}
+      </b-button>
+      <b-button
+        v-if="accountId"
+        v-clipboard:copy="generatePaymentLink(accountId)"
+        type="is-info"
+        icon-left="wallet"
+        :loading="isLoading"
+        outlined
+        @click="toast($t('general.copyRewardTooltip'))">
+        {{ $t('general.copyRewardLink') }}
+      </b-button>
+    </div>
+    <div v-if="transactionValue && $route.query.donation">
+      <div class="is-size-5">
+        🎉 {{ $t('teleport.congratsSupport') }}
+        <Identity ref="identity" :address="$route.query.target" />
+      </div>
+      <b-button
+        type="is-info"
+        class="mt-2"
+        icon-left="share-square"
+        outlined
+        @click="shareInTweet">
+        {{ $t('teleport.tweetDonation') }}
+      </b-button>
+    </div>
+  </section>
+</template>
+
+<script lang="ts" setup>
+import Connector from '@kodadot1/sub-api'
+import { ALTERNATIVE_ENDPOINT_MAP } from '@kodadot1/static'
+
+import { encodeAddress, isAddress } from '@polkadot/util-crypto'
+import { DispatchError } from '@polkadot/types/interfaces'
+
+import { calculateKsmFromUsd, calculateUsdFromKsm } from '@/utils/calculation'
+import exec, { execResultValue, txCb } from '@/utils/transactionExecutor'
+import { notificationTypes, showNotification } from '@/utils/notification'
+import { calculateBalance } from '@/utils/format/balance'
+import correctFormat from '@/utils/ss58Format'
+import { urlBuilderTransaction } from '@/utils/explorerGuide'
+
+import { useFiatStore } from '@/stores/fiat'
+import { useIdentityStore } from '@/stores/identity'
+
+import { getExplorer, hasExplorer } from '@kodadot1/static'
+import { emptyObject } from '@kodadot1/minimark/utils'
+import { NeoField, NeoIcon } from '@kodadot1/brick'
+
+const Identity = defineAsyncComponent(
+  () => import('@/components/identity/IdentityIndex.vue')
+)
+
+const Money = defineAsyncComponent(
+  () => import('@/components/shared/format/Money.vue')
+)
+
+const route = useRoute()
+const router = useRouter()
+const { $consola } = useNuxtApp()
+const { chainProperties, unit, decimals, blockExplorer } = useChain()
+const { apiInstance } = useApi()
+const { urlPrefix } = usePrefix()
+const { isLogIn, accountId } = useAuth()
+const { getAuthBalance } = useIdentityStore()
+const { fetchFiatPrice, getCurrentTokenValue } = useFiatStore()
+const { initTransactionLoader, isLoading, resolveStatus, status } =
+  useTransactionStatus()
+const { toast } = useToast()
+
+type Target = 'target' | `target${number}`
+type TargetMap = Record<Target, string>
+
+const destinationAddresses = ref([''])
+const transactionValue = ref('')
+const price = ref(0)
+const usdValue = ref(0)
+const targets = ref(emptyObject<TargetMap>())
+
+const ss58Format = computed(() => chainProperties.value?.ss58Format)
+const hasAddress = computed(() => Object.keys(targets.value).length > 0)
+const disabled = computed(
+  () => !hasAddress.value || !price.value || !isLogIn.value
+)
+const hasBlockExplorer = computed(() => hasExplorer(urlPrefix.value))
+const balance = getAuthBalance
+
+const checkQueryParams = () => {
+  const { query } = route
+  const targets = Object.entries(query)
+    .filter(([key]) => key.startsWith('target'))
+    .filter(([_, address]) => {
+      if (isAddress(address as string)) {
+        return true
+      }
+      showNotification(
+        `Unable to use target address ${address}`,
+        notificationTypes.warn
+      )
+      return false
+    })
+    .map(([_, address]) => address as string)
+  if (targets.length > 0) {
+    destinationAddresses.value = targets
+  }
+
+  if (query.amount) {
+    price.value = Number(query.amount)
+  }
+
+  if (query.usdamount) {
+    usdValue.value = Number(query.usdamount)
+
+    price.value = calculateKsmFromUsd(
+      Number(getCurrentTokenValue(unit.value)),
+      usdValue.value
+    )
+  }
+}
+
+const onAmountFieldChange = () => {
+  /* calculating usd value on the basis of price entered */
+  if (price.value) {
+    usdValue.value = calculateUsdFromKsm(
+      Number(getCurrentTokenValue(unit.value)),
+      price.value
+    )
+  } else {
+    usdValue.value = 0
+  }
+}
+
+const onUSDFieldChange = () => {
+  /* calculating price value on the basis of usd entered */
+  if (usdValue.value) {
+    price.value = calculateKsmFromUsd(
+      Number(getCurrentTokenValue(unit.value)),
+      usdValue.value
+    )
+  } else {
+    price.value = 0
+  }
+}
+
+const submit = async (
+  event: any,
+  usedNodeUrls: string[] = []
+): Promise<void> => {
+  showNotification(`${route.query.target ? 'Sent for Sign' : 'Dispatched'}`)
+  initTransactionLoader()
+
+  try {
+    const api = await apiInstance.value
+    const amountToTansfer = String(
+      calculateBalance(price.value, decimals.value)
+    )
+    const numOfTargetAddresses = Object.keys(targets.value).length
+    const cb =
+      numOfTargetAddresses > 1 ? api.tx.utility.batch : api.tx.balances.transfer
+    const arg =
+      numOfTargetAddresses > 1
+        ? [
+            Object.values(targets.value).map((target) =>
+              api.tx.balances.transfer(target, amountToTansfer)
+            ),
+          ]
+        : [targets.value['target'], amountToTansfer]
+
+    const tx = await exec(
+      accountId.value,
+      '',
+      cb,
+      arg,
+      txCb(
+        async (blockHash) => {
+          transactionValue.value = execResultValue(tx)
+          const header = await api.rpc.chain.getHeader(blockHash)
+          const blockNumber = header.number.toString()
+
+          showNotification(
+            `[${unit.value}] Transfered ${price.value * numOfTargetAddresses} ${
+              unit.value
+            } in block ${blockNumber}`,
+            notificationTypes.success
+          )
+
+          destinationAddresses.value = ['']
+          price.value = 0
+          usdValue.value = 0
+          if (route.query && !route.query.donation) {
+            router.push(route.path)
+          }
+
+          isLoading.value = false
+        },
+        (dispatchError) => {
+          execResultValue(tx)
+          onTxError(dispatchError)
+          isLoading.value = false
+        },
+        (res) => resolveStatus(res.status)
+      )
+    )
+  } catch (e: any) {
+    if (e.message === 'Cancelled') {
+      showNotification(e.message, notificationTypes.warn)
+      isLoading.value = false
+      return
+    }
+
+    const availableUrls = ALTERNATIVE_ENDPOINT_MAP[urlPrefix.value]
+    if (usedNodeUrls.length < availableUrls.length) {
+      const nextTryUrls = availableUrls.filter(
+        (url) => !usedNodeUrls.includes(url)
+      )
+      const { getInstance: Api } = Connector
+      // try to connect next possible url
+      await Api().connect(nextTryUrls[0])
+      submit(event, [nextTryUrls[0], ...usedNodeUrls])
+    }
+
+    if (e instanceof Error) {
+      $consola.error('[ERR: TRANSFER SUBMIT]', e)
+      showNotification(e.toString(), notificationTypes.warn)
+      isLoading.value = false
+    }
+  }
+}
+
+const onTxError = async (dispatchError: DispatchError): Promise<void> => {
+  const api = await apiInstance.value
+  if (dispatchError.isModule) {
+    const decoded = api.registry.findMetaError(dispatchError.asModule)
+    const { docs, name, section } = decoded
+    showNotification(
+      `[ERR] ${section}.${name}: ${docs.join(' ')}`,
+      notificationTypes.warn
+    )
+  } else {
+    showNotification(
+      `[ERR] ${dispatchError.toString()}`,
+      notificationTypes.warn
+    )
+  }
+
+  isLoading.value = false
+}
+
+const getUrl = (): string =>
+  urlBuilderTransaction(transactionValue.value, blockExplorer.value)
+
+const getExplorerUrl = (): void => {
+  const url = getUrl()
+  window.open(url, '_blank')
+}
+
+const generatePaymentLink = (address?): string => {
+  let addressQueryString: string
+  if (address) {
+    addressQueryString = `target=${address}`
+  } else {
+    addressQueryString = new URLSearchParams(targets.value).toString()
+  }
+  return `${window.location.origin}/${urlPrefix.value}/transfer?${addressQueryString}&usdamount=${usdValue.value}&donation=true`
+}
+
+const shareInTweet = () => {
+  const text =
+    'I have just helped a really cool creator by donating. Check my donation proof:'
+  const url = `https://twitter.com/intent/tweet?text=${text}&via=KodaDot&url=${getUrl()}`
+  window.open(url, '_blank')
+}
+
+const addAddress = () => {
+  destinationAddresses.value.push('')
+}
+const correctAddress = (destinationAddress): string =>
+  isAddress(destinationAddress)
+    ? encodeAddress(destinationAddress, correctFormat(ss58Format.value))
+    : ''
+const addressExplorerUrl = (address): string =>
+  getExplorer(urlPrefix.value, address) || '#'
+
+onMounted(() => {
+  fetchFiatPrice().then(checkQueryParams)
+})
+
+watch(
+  destinationAddresses,
+  () => {
+    const { usdamount } = route.query
+
+    targets.value = destinationAddresses.value
+      .filter((addr) => isAddress(addr))
+      .reduce(
+        (object, address, i) => ({
+          ...object,
+          [`target${i == 0 ? '' : i}`]: address,
+        }),
+        {} as TargetMap
+      )
+    router.replace({ query: { ...targets.value, usdamount } }).catch(() => null) // null to further not throw navigation errors
+  },
+  { deep: true }
+)
+
+watch(usdValue, (usdamount) => {
+  router
+    .replace({ query: { ...route.query, usdamount: usdamount.toString() } })
+    .catch(() => null) // null to further not throw navigation errors
+})
+</script>
diff --git a/composables/useChain.ts b/composables/useChain.ts
index 92696d243e..a520497973 100644
--- a/composables/useChain.ts
+++ b/composables/useChain.ts
@@ -30,6 +30,9 @@ export default function () {
       : symbol
   })
 
+  const blockExplorer = computed<string>(() => {
+    return chainProperties.value.blockExplorer ?? 'https://kusama.subscan.io/'
+  })
   return {
     decimals,
     unit,
@@ -37,5 +40,6 @@ export default function () {
     chainProperties,
     availableChains,
     chainSymbol,
+    blockExplorer,
   }
 }
diff --git a/pages/_prefix/transfer.vue b/pages/_prefix/transfer.vue
index a3baeecb04..81899233da 100644
--- a/pages/_prefix/transfer.vue
+++ b/pages/_prefix/transfer.vue
@@ -1,477 +1,15 @@
 <template>
-  <section>
-    <Loader v-model="isLoading" :status="status" />
-    <nuxt-link
-      v-if="$route.query.target"
-      :to="`/${urlPrefix}/u/${correctAddress}`"
-      class="pl-4 is-flex is-align-items-center">
-      <NeoIcon icon="chevron-left" class="mr-2" />
-      {{ $t('teleport.artistProfile') }}
-    </nuxt-link>
-    <p class="title is-size-3">
-      {{ $t('transfer') }} {{ unit }}
-      <span class="has-text-primary"
-        >${{ fiatStore.getCurrentTokenValue(unit) }}</span
-      >
-    </p>
-
-    <NeoField>
-      <Auth />
-    </NeoField>
-
-    <div v-if="targets && hasBlockExplorer" class="mb-3">
-      {{ $t('teleport.donationSentTo') }}
-      <a
-        v-for="target in targets"
-        :key="target"
-        :href="addressExplorerUrl(target)"
-        target="_blank"
-        rel="nofollow noopener noreferrer"
-        class="has-text-weight-bold">
-        <Identity ref="identity" :address="target" show-onchain-identity />
-      </a>
-    </div>
-
-    <div class="is-flex is-align-items-center">
-      <NeoField>
-        {{ $t('general.balance') }}
-        <Money :value="balance" inline />
-      </NeoField>
-    </div>
-
-    <div
-      v-for="(destinationAddress, index) in destinationAddresses"
-      :key="destinationAddress">
-      <div class="is-flex">
-        <NeoField class="is-flex-grow-1">
-          <AddressInput v-model="destinationAddresses[index]" :strict="false" />
-        </NeoField>
-        <b-button
-          v-show="index == destinationAddresses.length - 1"
-          type="is-primary"
-          size="is-small"
-          icon-left="plus"
-          class="ml-2 mt-2"
-          outlined
-          @click="addAddress">
-          Add
-        </b-button>
-      </div>
-
-      <DisabledInput
-        v-show="
-          correctAddress(destinationAddress) &&
-          correctAddress(destinationAddress) !== destinationAddress
-        "
-        :label="$t('general.correctAddress')"
-        :value="correctAddress(destinationAddress)" />
-    </div>
-    <div class="container mb-3">
-      <NeoField>
-        <BalanceInput
-          v-model="price"
-          :label="$t('amount')"
-          :calculate="false"
-          @input="onAmountFieldChange" />
-      </NeoField>
-      <NeoField>
-        <ReadOnlyBalanceInput
-          v-model="usdValue"
-          :label-input="$t('teleport.usdInput')"
-          label="USD"
-          @input="onUSDFieldChange" />
-      </NeoField>
-    </div>
-
-    <div class="buttons">
-      <b-button
-        type="is-primary"
-        icon-left="paper-plane"
-        :loading="isLoading"
-        :disabled="disabled"
-        outlined
-        @click="submit">
-        {{ $t('general.submit') }}
-      </b-button>
-      <b-button
-        v-if="transactionValue && hasBlockExplorer"
-        type="is-success"
-        class="ml-4"
-        icon-left="external-link-alt"
-        outlined
-        @click="getExplorerUrl">
-        {{ $t('View Transaction') }} {{ transactionValue.substring(0, 6)
-        }}{{ '...' }}
-      </b-button>
-      <b-button
-        v-if="transactionValue && hasBlockExplorer"
-        v-clipboard:copy="getUrl()"
-        type="is-primary"
-        @click="toast($t('toast.urlCopy'))">
-        <NeoIcon pack="fas" icon="link" />
-      </b-button>
-      <b-button
-        v-if="hasAddress"
-        v-clipboard:copy="generatePaymentLink()"
-        type="is-success"
-        icon-left="money-bill"
-        :loading="isLoading"
-        outlined
-        @click="toast($t('toast.paymentLinkCopy'))">
-        {{ $t('Copy Payment link') }}
-      </b-button>
-      <b-button
-        v-if="accountId"
-        v-clipboard:copy="generatePaymentLink(accountId)"
-        type="is-info"
-        icon-left="wallet"
-        :loading="isLoading"
-        outlined
-        @click="toast($t('general.copyRewardTooltip'))">
-        {{ $t('general.copyRewardLink') }}
-      </b-button>
-    </div>
-    <div v-if="transactionValue && $route.query.donation">
-      <div class="is-size-5">
-        🎉 {{ $t('teleport.congratsSupport') }}
-        <Identity ref="identity" :address="$route.query.target" />
-      </div>
-      <b-button
-        type="is-info"
-        class="mt-2"
-        icon-left="share-square"
-        outlined
-        @click="shareInTweet">
-        {{ $t('teleport.tweetDonation') }}
-      </b-button>
-    </div>
-  </section>
+  <Transfer />
 </template>
 
 <script lang="ts">
-import { Component, Watch, mixins } from 'nuxt-property-decorator'
-import Connector from '@kodadot1/sub-api'
-import { ALTERNATIVE_ENDPOINT_MAP } from '@kodadot1/static'
-
-import { encodeAddress, isAddress } from '@polkadot/util-crypto'
-import { DispatchError } from '@polkadot/types/interfaces'
-
-import { calculateKsmFromUsd, calculateUsdFromKsm } from '@/utils/calculation'
-import exec, { execResultValue, txCb } from '@/utils/transactionExecutor'
-import { notificationTypes, showNotification } from '@/utils/notification'
-import { calculateBalance } from '@/utils/format/balance'
-import correctFormat from '@/utils/ss58Format'
-import { urlBuilderTransaction } from '@/utils/explorerGuide'
-
-import AuthMixin from '@/utils/mixins/authMixin'
-import ChainMixin from '@/utils/mixins/chainMixin'
-import PrefixMixin from '@/utils/mixins/prefixMixin'
-import TransactionMixin from '@/utils/mixins/txMixin'
-import UseApiMixin from '@/utils/mixins/useApiMixin'
-import { useFiatStore } from '@/stores/fiat'
-import { useIdentityStore } from '@/stores/identity'
-
-import { getExplorer, hasExplorer } from '@kodadot1/static'
-import { emptyObject } from '@kodadot1/minimark/utils'
-import { NeoField, NeoIcon } from '@kodadot1/brick'
-
-type Target = 'target' | `target${number}`
-type TargetMap = Record<Target, string>
-
-@Component({
+export default {
+  name: 'TransferPage',
   components: {
-    Auth: () => import('@/components/shared/Auth.vue'),
-    BalanceInput: () => import('@/components/shared/BalanceInput.vue'),
-    ReadOnlyBalanceInput: () =>
-      import('@/components/shared/ReadOnlyBalanceInput.vue'),
-    Identity: () => import('@/components/identity/IdentityIndex.vue'),
-    Loader: () => import('@/components/shared/Loader.vue'),
-    AddressInput: () => import('@/components/shared/AddressInput.vue'),
-    Money: () => import('@/components/shared/format/Money.vue'),
-    DisabledInput: () => import('@/components/shared/DisabledInput.vue'),
-    NeoField,
-    NeoIcon,
+    Transfer: () => import('@/components/transfer/Transfer.vue'),
   },
-})
-export default class Transfer extends mixins(
-  TransactionMixin,
-  AuthMixin,
-  ChainMixin,
-  PrefixMixin,
-  UseApiMixin
-) {
-  protected destinationAddresses = ['']
-  protected transactionValue = ''
-  protected price = 0
-  protected usdValue = 0
-  protected targets = emptyObject<TargetMap>()
-
   layout() {
     return 'centered-half-layout'
-  }
-
-  get fiatStore() {
-    return useFiatStore()
-  }
-
-  get identityStore() {
-    return useIdentityStore()
-  }
-
-  get disabled(): boolean {
-    return (
-      !this.hasAddress || !this.price || !this.accountId || this.$nuxt.isOffline
-    )
-  }
-  get ss58Format(): number {
-    return this.chainProperties?.ss58Format
-  }
-  get hasAddress(): boolean {
-    return Object.keys(this.targets).length > 0
-  }
-  correctAddress(destinationAddress): string {
-    return isAddress(destinationAddress)
-      ? encodeAddress(destinationAddress, correctFormat(this.ss58Format))
-      : ''
-  }
-
-  get isKSM(): boolean {
-    return this.unit === 'KSM'
-  }
-
-  get hasBlockExplorer(): boolean {
-    return hasExplorer(this.urlPrefix)
-  }
-
-  addressExplorerUrl(address): string {
-    return getExplorer(this.urlPrefix, address) || '#'
-  }
-
-  get balance(): string {
-    return this.identityStore.getAuthBalance
-  }
-
-  protected addAddress() {
-    this.destinationAddresses.push('')
-  }
-
-  protected created() {
-    this.fiatStore.fetchFiatPrice().then(this.checkQueryParams)
-  }
-
-  protected onAmountFieldChange() {
-    /* calculating usd value on the basis of price entered */
-    if (this.price) {
-      this.usdValue = calculateUsdFromKsm(
-        Number(this.fiatStore.getCurrentTokenValue(this.unit)),
-        this.price
-      )
-    } else {
-      this.usdValue = 0
-    }
-  }
-
-  protected onUSDFieldChange() {
-    /* calculating price value on the basis of usd entered */
-    if (this.usdValue) {
-      this.price = calculateKsmFromUsd(
-        Number(this.fiatStore.getCurrentTokenValue(this.unit)),
-        this.usdValue
-      )
-    } else {
-      this.price = 0
-    }
-  }
-
-  protected checkQueryParams() {
-    const { query } = this.$route
-    const targets = Object.entries(query)
-      .filter(([key]) => key.startsWith('target'))
-      .filter(([_, address]) => {
-        if (isAddress(address as string)) {
-          return true
-        }
-        showNotification(
-          `Unable to use target address ${address}`,
-          notificationTypes.warn
-        )
-        return false
-      })
-      .map(([_, address]) => address as string)
-    if (targets.length > 0) {
-      this.destinationAddresses = targets
-    }
-
-    if (query.amount) {
-      this.price = Number(query.amount)
-    }
-
-    if (query.usdamount) {
-      this.usdValue = Number(query.usdamount)
-
-      this.price = calculateKsmFromUsd(
-        Number(this.fiatStore.getCurrentTokenValue(this.unit)),
-        this.usdValue
-      )
-    }
-  }
-
-  public async submit(event: any, usedNodeUrls: string[] = []): Promise<void> {
-    showNotification(
-      `${this.$route.query.target ? 'Sent for Sign' : 'Dispatched'}`
-    )
-    this.initTransactionLoader()
-
-    try {
-      const api = await this.useApi()
-      const amountToTansfer = String(
-        calculateBalance(this.price, this.decimals)
-      )
-      const numOfTargetAddresses = Object.keys(this.targets).length
-      const cb =
-        numOfTargetAddresses > 1
-          ? api.tx.utility.batch
-          : api.tx.balances.transfer
-      const arg =
-        numOfTargetAddresses > 1
-          ? [
-              Object.values(this.targets).map((target) =>
-                api.tx.balances.transfer(target, amountToTansfer)
-              ),
-            ]
-          : [this.targets['target'], amountToTansfer]
-
-      const tx = await exec(
-        this.accountId,
-        '',
-        cb,
-        arg,
-        txCb(
-          async (blockHash) => {
-            this.transactionValue = execResultValue(tx)
-            const header = await api.rpc.chain.getHeader(blockHash)
-            const blockNumber = header.number.toString()
-
-            showNotification(
-              `[${this.unit}] Transfered ${this.price * numOfTargetAddresses} ${
-                this.unit
-              } in block ${blockNumber}`,
-              notificationTypes.success
-            )
-
-            this.destinationAddresses = ['']
-            this.price = 0
-            this.usdValue = 0
-            if (this.$route.query && !this.$route.query.donation) {
-              this.$router.push(this.$route.path)
-            }
-
-            this.isLoading = false
-          },
-          (dispatchError) => {
-            execResultValue(tx)
-            this.onTxError(dispatchError)
-            this.isLoading = false
-          },
-          (res) => this.resolveStatus(res.status)
-        )
-      )
-    } catch (e: any) {
-      if (e.message === 'Cancelled') {
-        showNotification(e.message, notificationTypes.warn)
-        this.isLoading = false
-        return
-      }
-
-      const availableUrls = ALTERNATIVE_ENDPOINT_MAP[this.urlPrefix]
-      if (usedNodeUrls.length < availableUrls.length) {
-        const nextTryUrls = availableUrls.filter(
-          (url) => !usedNodeUrls.includes(url)
-        )
-        const { getInstance: Api } = Connector
-        // try to connect next possible url
-        await Api().connect(nextTryUrls[0])
-        this.submit(event, [nextTryUrls[0], ...usedNodeUrls])
-      }
-
-      if (e instanceof Error) {
-        this.$consola.error('[ERR: TRANSFER SUBMIT]', e)
-        showNotification(e.toString(), notificationTypes.warn)
-        this.isLoading = false
-      }
-    }
-  }
-
-  protected async onTxError(dispatchError: DispatchError): Promise<void> {
-    const api = await this.useApi()
-    if (dispatchError.isModule) {
-      const decoded = api.registry.findMetaError(dispatchError.asModule)
-      const { docs, name, section } = decoded
-      showNotification(
-        `[ERR] ${section}.${name}: ${docs.join(' ')}`,
-        notificationTypes.warn
-      )
-    } else {
-      showNotification(
-        `[ERR] ${dispatchError.toString()}`,
-        notificationTypes.warn
-      )
-    }
-
-    this.isLoading = false
-  }
-
-  protected getUrl(): string {
-    return urlBuilderTransaction(this.transactionValue, this.blockExplorer)
-  }
-
-  protected getExplorerUrl(): void {
-    const url = this.getUrl()
-    window.open(url, '_blank')
-  }
-
-  protected generatePaymentLink(address?): string {
-    let addressQueryString: string
-    if (address) {
-      addressQueryString = `target=${address}`
-    } else {
-      addressQueryString = new URLSearchParams(this.targets).toString()
-    }
-    return `${window.location.origin}/${this.urlPrefix}/transfer?${addressQueryString}&usdamount=${this.usdValue}&donation=true`
-  }
-
-  protected shareInTweet() {
-    const text =
-      'I have just helped a really cool creator by donating. Check my donation proof:'
-    const url = `https://twitter.com/intent/tweet?text=${text}&via=KodaDot&url=${this.getUrl()}`
-    window.open(url, '_blank')
-  }
-
-  @Watch('destinationAddresses', { deep: true })
-  destinationChanged(destinationAddresses: string[]): void {
-    const { usdamount } = this.$route.query
-    const targets = destinationAddresses
-      .filter((addr) => isAddress(addr))
-      .reduce(
-        (object, address, i) => ({
-          ...object,
-          [`target${i == 0 ? '' : i}`]: address,
-        }),
-        {} as TargetMap
-      )
-    this.targets = targets
-    this.$router.replace({ query: { ...targets, usdamount } }).catch(() => null) // null to further not throw navigation errors
-  }
-
-  @Watch('usdValue')
-  usdValueChanged(usdamount: string): void {
-    this.$router
-      .replace({ query: { ...this.$route.query, usdamount } })
-      .catch(() => null) // null to further not throw navigation errors
-  }
-
-  private toast(message: string): void {
-    this.$buefy.toast.open(message)
-  }
+  },
 }
 </script>