From 3723df5393577c26e1e3cffbbb59b3669cde4046 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Fri, 21 Jul 2023 15:40:36 +0700
Subject: [PATCH 1/5] spotlight page

---
 pages/spotlight.vue | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/pages/spotlight.vue b/pages/spotlight.vue
index 26e49c5ba5..aa10df0cf2 100644
--- a/pages/spotlight.vue
+++ b/pages/spotlight.vue
@@ -17,11 +17,9 @@
   </section>
 </template>
 <script lang="ts">
-import { Component, Vue } from 'nuxt-property-decorator'
-
-@Component<Spotlight>({
+export default {
+  name: 'Spotlight',
   components: {
-    Identity: () => import('@/components/identity/IdentityIndex.vue'),
     SpotlightTable: () => import('@/components/spotlight/SpotlightTable.vue'),
   },
   head() {
@@ -38,6 +36,5 @@ import { Component, Vue } from 'nuxt-property-decorator'
       meta: [...this.$seoMeta(metaData)],
     }
   },
-})
-export default class Spotlight extends Vue {}
+}
 </script>

From 69c85fe1a0debf2e9130d6a5d29ff82f29328cb1 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Fri, 21 Jul 2023 16:45:56 +0700
Subject: [PATCH 2/5] =?UTF-8?q?=E2=9C=A8=20telport=20page=20composition=20?=
 =?UTF-8?q?api?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Teleport.vue | 355 ++++++++++++++++++++++++++++++++++
 composables/useChain.ts |   4 +
 locales/en.json         |   3 +-
 pages/teleport.vue      | 414 +---------------------------------------
 4 files changed, 365 insertions(+), 411 deletions(-)
 create mode 100644 components/Teleport.vue

diff --git a/components/Teleport.vue b/components/Teleport.vue
new file mode 100644
index 0000000000..d15b340678
--- /dev/null
+++ b/components/Teleport.vue
@@ -0,0 +1,355 @@
+<template>
+  <section>
+    <Loader v-model="isLoading" :status="status" />
+    <nuxt-link
+      v-if="$route.query.target"
+      :to="`/${urlPrefix}/u/${destinationAddress}`"
+      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('teleport.page') }} {{ unit }}
+      <span v-if="isKSM" class="has-text-primary"
+        >${{ getCurrentKSMValue }}</span
+      >
+    </p>
+
+    <NeoField>
+      <Auth />
+    </NeoField>
+
+    <AccountBalance />
+
+    <p class="subtitle is-size-6">
+      {{ routeMessage }}
+    </p>
+
+    <BasicSwitch v-model="sendingMyself" label="action.sendToMyself" />
+
+    <NeoField v-show="!sendingMyself">
+      <AddressInput v-model="destinationAddress" :strict="false" />
+    </NeoField>
+    <DisabledInput
+      v-show="correctAddress && correctAddress !== destinationAddress"
+      :label="$t('general.correctAddress')"
+      :value="correctAddress" />
+    <div class="box--container mb-3">
+      <NeoField>
+        <BalanceInput
+          v-model="price"
+          :label="$t('amount')"
+          :calculate="false"
+          @input="onAmountFieldChange" />
+      </NeoField>
+      <NeoField v-if="isKSM">
+        <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"
+        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"
+        v-clipboard:copy="getUrl()"
+        type="is-primary"
+        @click="toast($t('toast.urlCopy'))">
+        <NeoIcon pack="fas" icon="link" />
+      </b-button>
+      <b-button
+        v-if="destinationAddress"
+        v-clipboard:copy="generatePaymentLink()"
+        type="is-success"
+        icon-left="money-bill"
+        :loading="isLoading"
+        outlined
+        @click="toast($t('toast.paymentLinkCopy'))">
+        {{ $t('teleport.btnCopyPayment') }}
+      </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 { encodeAddress, isAddress } from '@polkadot/util-crypto'
+import { DispatchError } from '@polkadot/types/interfaces'
+import { onApiConnect } from '@kodadot1/sub-api'
+
+import exec, { execResultValue, txCb } from '@/utils/transactionExecutor'
+import { notificationTypes, showNotification } from '@/utils/notification'
+
+import { calculateKsmFromUsd, calculateUsdFromKsm } from '@/utils/calculation'
+import { findCall, getApiParams } from '@/utils/teleport'
+import { calculateBalance } from '@/utils/format/balance'
+import correctFormat from '@/utils/ss58Format'
+import { urlBuilderTransaction } from '@/utils/explorerGuide'
+
+import { useFiatStore } from '@/stores/fiat'
+import { NeoField, NeoIcon } from '@kodadot1/brick'
+import BasicSwitch from './shared/form/BasicSwitch.vue'
+
+const { accountId, isLogIn } = useAuth()
+const { urlPrefix } = usePrefix()
+const { chainProperties, unit, decimals, blockExplorer } = useChain()
+const { apiUrl, apiInstance } = useApi()
+const route = useRoute()
+const router = useRouter()
+const { initTransactionLoader, isLoading, resolveStatus, status } =
+  useTransactionStatus()
+const { $i18n, $consola } = useNuxtApp()
+
+const { toast } = useToast()
+const { fetchFiatPrice, getCurrentKSMValue } = useFiatStore()
+
+const price = ref(0)
+const usdValue = ref(0)
+const destinationAddress = ref('')
+const sendingMyself = ref(true)
+const paraTeleport = ref<string | null>(null)
+const transactionValue = ref('')
+
+const hasAddress = computed(() => isAddress(destinationAddress.value))
+const ss58Format = computed(() => chainProperties.value.ss58Format)
+const correctAddress = computed(() =>
+  hasAddress.value
+    ? encodeAddress(destinationAddress.value, correctFormat(ss58Format.value))
+    : ''
+)
+const isKSM = computed(() => unit.value === 'KSM')
+
+const disabled = computed(
+  () => !(isLogIn && price.value && (sendingMyself.value || hasAddress.value))
+)
+
+const getUrl = () =>
+  urlBuilderTransaction(transactionValue.value, blockExplorer.value)
+
+const getExplorerUrl = () => {
+  window.open(getUrl(), '_blank')
+}
+
+const generatePaymentLink = () =>
+  `${window.location.origin}/${urlPrefix.value}/transfer?target=${destinationAddress.value}&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=${generatePaymentLink()}`
+  window.open(url, '_blank')
+}
+const currentRoute = computed(() => {
+  if (paraTeleport.value === '') {
+    return ['relaychain', 'parachain']
+  }
+
+  if (paraTeleport.value === null) {
+    return ['unknown', 'unknown']
+  }
+
+  return [`parachain ${paraTeleport.value}`, 'relaychain']
+})
+const routeMessage = computed(() => {
+  const [from, to] = currentRoute.value
+  return $i18n.t('teleport.route', [unit.value, from, to])
+})
+
+const checkQueryParams = () => {
+  if (route.query.target) {
+    const hasAddress = isAddress(route.query.target as string)
+    if (hasAddress) {
+      destinationAddress.value = route.query.target as string
+    } else {
+      showNotification('Unable to use target address', notificationTypes.warn)
+    }
+  }
+
+  if (route.query.amount) {
+    price.value = Number(route.query.amount)
+  }
+
+  if (route.query.usdamount) {
+    usdValue.value = Number(route.query.usdamount)
+    // getting ksm value from the usd value
+    price.value = calculateKsmFromUsd(
+      getCurrentKSMValue as number,
+      usdValue.value
+    )
+  }
+}
+
+const onAmountFieldChange = () => {
+  /* calculating usd value on the basis of price entered */
+  if (price.value) {
+    usdValue.value = calculateUsdFromKsm(
+      getCurrentKSMValue as number,
+      price.value
+    )
+  } else {
+    usdValue.value = 0
+  }
+}
+
+const onUSDFieldChange = () => {
+  /* calculating price value on the basis of usd entered */
+  if (usdValue.value) {
+    price.value = calculateKsmFromUsd(
+      getCurrentKSMValue as number,
+      usdValue.value
+    )
+  } else {
+    price.value = 0
+  }
+}
+
+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 submit = async (): Promise<void> => {
+  showNotification(`${route.query.target ? 'Sent for Sign' : 'Dispatched'}`)
+  initTransactionLoader()
+
+  try {
+    const api = await apiInstance.value
+    const isParaTeleport = await api.query.parachainInfo?.parachainId()
+
+    const cb = findCall(api)
+    const arg = getApiParams(
+      api,
+      cb,
+      isParaTeleport?.toString(),
+      sendingMyself.value ? accountId.value : destinationAddress.value,
+      calculateBalance(price.value, decimals.value).toString()
+    )
+
+    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} ${unit.value} in block ${blockNumber}`,
+            notificationTypes.success
+          )
+
+          destinationAddress.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) {
+    $consola.error('[ERR: TRANSFER SUBMIT]', e)
+    if (e instanceof Error) {
+      showNotification(e.message, notificationTypes.warn)
+    }
+  }
+}
+
+onMounted(() => {
+  fetchFiatPrice()
+  checkQueryParams()
+  onApiConnect(apiUrl.value, async (api) => {
+    const paraId = await api.query.parachainInfo?.parachainId()
+    paraTeleport.value = paraId?.toString() || ''
+  })
+})
+
+watch(destinationAddress, (value) => {
+  if (value) {
+    const queryValue: any = {}
+    if (value) {
+      queryValue.target = value
+    }
+    if (route.query.usdamount) {
+      queryValue.usdamount = route.query.usdamount
+    }
+    router.replace({
+      name: String(route.name),
+      query: queryValue,
+    })
+  }
+})
+
+watch(usdValue, (value) => {
+  const queryValue: any = {}
+  if (value) {
+    queryValue.usdamount = value
+  }
+  if (route.query.target) {
+    queryValue.target = route.query.target
+  }
+  router.replace({
+    name: String(route.name),
+    query: queryValue,
+  })
+})
+</script>
diff --git a/composables/useChain.ts b/composables/useChain.ts
index 92696d243e..289e008324 100644
--- a/composables/useChain.ts
+++ b/composables/useChain.ts
@@ -30,6 +30,9 @@ export default function () {
       : symbol
   })
 
+  const blockExplorer = computed(
+    () => chainProperties.value.blockExplorer ?? 'https://kusama.subscan.io/'
+  )
   return {
     decimals,
     unit,
@@ -37,5 +40,6 @@ export default function () {
     chainProperties,
     availableChains,
     chainSymbol,
+    blockExplorer,
   }
 }
diff --git a/locales/en.json b/locales/en.json
index d9658f557d..70f4308d8a 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -889,7 +889,8 @@
     "btnCopyPayment": "Copy Payment link",
     "congratsSupport": "Congratulations for supporting",
     "tweetDonation": "Tweet about your awesome donation",
-    "donationSentTo": "Your donation will be sent to:"
+    "donationSentTo": "Your donation will be sent to:",
+    "route": "Send {0} From {1} To {2}"
   },
   "preferences": {
     "basic": "basic user interface",
diff --git a/pages/teleport.vue b/pages/teleport.vue
index 0fb8f39451..8ab2c2ecdb 100644
--- a/pages/teleport.vue
+++ b/pages/teleport.vue
@@ -1,418 +1,12 @@
 <template>
-  <section>
-    <Loader v-model="isLoading" :status="status" />
-    <nuxt-link
-      v-if="$route.query.target"
-      :to="`/${urlPrefix}/u/${destinationAddress}`"
-      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('teleport.page') }} {{ unit }}
-      <span v-if="isKSM" class="has-text-primary"
-        >${{ fiatStore.getCurrentKSMValue }}</span
-      >
-    </p>
-
-    <NeoField>
-      <Auth />
-    </NeoField>
-
-    <AccountBalance />
-
-    <p class="subtitle is-size-6">
-      {{ routeMessage }}
-    </p>
-
-    <BasicSwitch v-model="sendingMyself" label="action.sendToMyself" />
-
-    <NeoField v-show="!sendingMyself">
-      <AddressInput v-model="destinationAddress" :strict="false" />
-    </NeoField>
-    <DisabledInput
-      v-show="correctAddress && correctAddress !== destinationAddress"
-      :label="$t('general.correctAddress')"
-      :value="correctAddress" />
-    <div class="box--container mb-3">
-      <NeoField>
-        <BalanceInput
-          v-model="price"
-          :label="$t('amount')"
-          :calculate="false"
-          @input="onAmountFieldChange" />
-      </NeoField>
-      <NeoField v-if="isKSM">
-        <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"
-        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"
-        v-clipboard:copy="getUrl()"
-        type="is-primary"
-        @click="toast($t('toast.urlCopy'))">
-        <NeoIcon pack="fas" icon="link" />
-      </b-button>
-      <b-button
-        v-if="destinationAddress"
-        v-clipboard:copy="generatePaymentLink()"
-        type="is-success"
-        icon-left="money-bill"
-        :loading="isLoading"
-        outlined
-        @click="toast($t('toast.paymentLinkCopy'))">
-        {{ $t('teleport.btnCopyPayment') }}
-      </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>
+  <Teleport />
 </template>
 
 <script lang="ts">
-import { Component, Watch, mixins } from 'nuxt-property-decorator'
-import { encodeAddress, isAddress } from '@polkadot/util-crypto'
-import { DispatchError } from '@polkadot/types/interfaces'
-import { onApiConnect } from '@kodadot1/sub-api'
-
-import exec, { execResultValue, txCb } from '@/utils/transactionExecutor'
-import { notificationTypes, showNotification } from '@/utils/notification'
-
-import { calculateKsmFromUsd, calculateUsdFromKsm } from '@/utils/calculation'
-import { findCall, getApiParams } from '@/utils/teleport'
-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 { NeoField, NeoIcon } from '@kodadot1/brick'
-import { useIdentityStore } from '@/stores/identity'
-
-@Component({
-  components: {
-    Auth: () => import('@/components/shared/Auth.vue'),
-    BalanceInput: () => import('@/components/shared/BalanceInput.vue'),
-    AccountBalance: () => import('@/components/shared/AccountBalance.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'),
-    BasicSwitch: () => import('@/components/shared/form/BasicSwitch.vue'),
-    NeoField,
-    NeoIcon,
-  },
-})
-export default class Transfer extends mixins(
-  TransactionMixin,
-  AuthMixin,
-  ChainMixin,
-  UseApiMixin,
-  PrefixMixin
-) {
-  protected destinationAddress = ''
-  protected transactionValue = ''
-  protected price = 0
-  protected usdValue = 0
-  protected sendingMyself = true
-  protected isParaTeleport = true
-  protected paraTeleport: string | null = null
-
-  get disabled(): boolean {
-    return !(
-      this.accountId &&
-      this.price &&
-      (this.sendingMyself || this.hasAddress)
-    )
-  }
-  get ss58Format(): number {
-    return this.chainProperties?.ss58Format
-  }
-  get hasAddress(): boolean {
-    return isAddress(this.destinationAddress)
-  }
-  get correctAddress(): string {
-    return this.hasAddress
-      ? encodeAddress(this.destinationAddress, correctFormat(this.ss58Format))
-      : ''
-  }
-
-  get isKSM(): boolean {
-    return this.unit === 'KSM'
-  }
-
-  get fiatStore() {
-    return useFiatStore()
-  }
-
-  get identityStore() {
-    return useIdentityStore()
-  }
-
+export default {
+  name: 'Transfer',
   layout() {
     return 'centered-half-layout'
-  }
-
-  protected created() {
-    this.fiatStore.fetchFiatPrice()
-    this.checkQueryParams()
-    onApiConnect(this.apiUrl, async (api) => {
-      const paraId = await api.query.parachainInfo?.parachainId()
-      this.paraTeleport = paraId?.toString() || ''
-    })
-  }
-
-  get isRouteHidden(): boolean {
-    return this.paraTeleport === null
-  }
-
-  get routeMessage() {
-    const [from, to] = this.currentRoute
-    return this.$t('teleport.route', [this.unit, from, to])
-  }
-
-  get currentRoute(): [string, string] {
-    if (this.paraTeleport === '') {
-      return ['relaychain', 'parachain']
-    }
-
-    if (this.paraTeleport === null) {
-      return ['unknown', 'unknown']
-    }
-
-    return [`parachain ${this.paraTeleport}`, 'relaychain']
-  }
-
-  get balance(): string {
-    return this.identityStore.getAuthBalance
-  }
-
-  protected onAmountFieldChange() {
-    /* calculating usd value on the basis of price entered */
-    if (this.price) {
-      this.usdValue = calculateUsdFromKsm(
-        this.fiatStore.getCurrentKSMValue as number,
-        this.price
-      )
-    } else {
-      this.usdValue = 0
-    }
-  }
-
-  protected onUSDFieldChange() {
-    /* calculating price value on the basis of usd entered */
-    if (this.usdValue) {
-      this.price = calculateKsmFromUsd(
-        this.fiatStore.getCurrentKSMValue as number,
-        this.usdValue
-      )
-    } else {
-      this.price = 0
-    }
-  }
-
-  protected checkQueryParams() {
-    const { query } = this.$route
-
-    if (query.target) {
-      const hasAddress = isAddress(query.target as string)
-      if (hasAddress) {
-        this.destinationAddress = query.target as string
-      } else {
-        showNotification('Unable to use target address', notificationTypes.warn)
-      }
-    }
-
-    if (query.amount) {
-      this.price = Number(query.amount)
-    }
-
-    if (query.usdamount) {
-      this.usdValue = Number(query.usdamount)
-      // getting ksm value from the usd value
-      this.price = calculateKsmFromUsd(
-        this.fiatStore.getCurrentKSMValue as number,
-        this.usdValue
-      )
-    }
-  }
-
-  public async submit(): Promise<void> {
-    showNotification(
-      `${this.$route.query.target ? 'Sent for Sign' : 'Dispatched'}`
-    )
-    this.initTransactionLoader()
-
-    try {
-      const api = await this.useApi()
-      const isParaTeleport = await api.query.parachainInfo?.parachainId()
-
-      const cb = findCall(api)
-      const arg = getApiParams(
-        api,
-        cb,
-        isParaTeleport?.toString(),
-        this.sendingMyself ? this.accountId : this.destinationAddress,
-        calculateBalance(this.price, this.decimals).toString()
-      )
-
-      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} ${this.unit} in block ${blockNumber}`,
-              notificationTypes.success
-            )
-
-            this.destinationAddress = ''
-            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) {
-      this.$consola.error('[ERR: TRANSFER SUBMIT]', e)
-      if (e instanceof Error) {
-        showNotification(e.message, notificationTypes.warn)
-      }
-    }
-  }
-
-  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(): string {
-    return `${window.location.origin}/${this.urlPrefix}/transfer?target=${this.destinationAddress}&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('destinationAddress')
-  destinationChanged(value: string): void {
-    const queryValue: any = {}
-    if (value) {
-      queryValue.target = value
-    }
-    if (this.$route.query.usdamount) {
-      queryValue.usdamount = this.$route.query.usdamount
-    }
-    this.$router.replace({
-      name: String(this.$route.name),
-      query: queryValue,
-    })
-  }
-
-  @Watch('usdValue')
-  usdValueChanged(value: string): void {
-    const queryValue: any = {}
-    if (value) {
-      queryValue.usdamount = value
-    }
-    if (this.$route.query.target) {
-      queryValue.target = this.$route.query.target
-    }
-    this.$router.replace({
-      name: String(this.$route.name),
-      query: queryValue,
-    })
-  }
-
-  private toast(message: string): void {
-    this.$buefy.toast.open(message)
-  }
+  },
 }
 </script>

From 495769be0ef0d99dc2dfe607f42f501bd0cd36fc Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Fri, 21 Jul 2023 16:50:02 +0700
Subject: [PATCH 3/5] =?UTF-8?q?=F0=9F=94=A5=20delete=20old/unused=20telepo?=
 =?UTF-8?q?rt=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Teleport.vue | 355 ----------------------------------------
 pages/teleport.vue      |  12 --
 2 files changed, 367 deletions(-)
 delete mode 100644 components/Teleport.vue
 delete mode 100644 pages/teleport.vue

diff --git a/components/Teleport.vue b/components/Teleport.vue
deleted file mode 100644
index d15b340678..0000000000
--- a/components/Teleport.vue
+++ /dev/null
@@ -1,355 +0,0 @@
-<template>
-  <section>
-    <Loader v-model="isLoading" :status="status" />
-    <nuxt-link
-      v-if="$route.query.target"
-      :to="`/${urlPrefix}/u/${destinationAddress}`"
-      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('teleport.page') }} {{ unit }}
-      <span v-if="isKSM" class="has-text-primary"
-        >${{ getCurrentKSMValue }}</span
-      >
-    </p>
-
-    <NeoField>
-      <Auth />
-    </NeoField>
-
-    <AccountBalance />
-
-    <p class="subtitle is-size-6">
-      {{ routeMessage }}
-    </p>
-
-    <BasicSwitch v-model="sendingMyself" label="action.sendToMyself" />
-
-    <NeoField v-show="!sendingMyself">
-      <AddressInput v-model="destinationAddress" :strict="false" />
-    </NeoField>
-    <DisabledInput
-      v-show="correctAddress && correctAddress !== destinationAddress"
-      :label="$t('general.correctAddress')"
-      :value="correctAddress" />
-    <div class="box--container mb-3">
-      <NeoField>
-        <BalanceInput
-          v-model="price"
-          :label="$t('amount')"
-          :calculate="false"
-          @input="onAmountFieldChange" />
-      </NeoField>
-      <NeoField v-if="isKSM">
-        <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"
-        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"
-        v-clipboard:copy="getUrl()"
-        type="is-primary"
-        @click="toast($t('toast.urlCopy'))">
-        <NeoIcon pack="fas" icon="link" />
-      </b-button>
-      <b-button
-        v-if="destinationAddress"
-        v-clipboard:copy="generatePaymentLink()"
-        type="is-success"
-        icon-left="money-bill"
-        :loading="isLoading"
-        outlined
-        @click="toast($t('toast.paymentLinkCopy'))">
-        {{ $t('teleport.btnCopyPayment') }}
-      </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 { encodeAddress, isAddress } from '@polkadot/util-crypto'
-import { DispatchError } from '@polkadot/types/interfaces'
-import { onApiConnect } from '@kodadot1/sub-api'
-
-import exec, { execResultValue, txCb } from '@/utils/transactionExecutor'
-import { notificationTypes, showNotification } from '@/utils/notification'
-
-import { calculateKsmFromUsd, calculateUsdFromKsm } from '@/utils/calculation'
-import { findCall, getApiParams } from '@/utils/teleport'
-import { calculateBalance } from '@/utils/format/balance'
-import correctFormat from '@/utils/ss58Format'
-import { urlBuilderTransaction } from '@/utils/explorerGuide'
-
-import { useFiatStore } from '@/stores/fiat'
-import { NeoField, NeoIcon } from '@kodadot1/brick'
-import BasicSwitch from './shared/form/BasicSwitch.vue'
-
-const { accountId, isLogIn } = useAuth()
-const { urlPrefix } = usePrefix()
-const { chainProperties, unit, decimals, blockExplorer } = useChain()
-const { apiUrl, apiInstance } = useApi()
-const route = useRoute()
-const router = useRouter()
-const { initTransactionLoader, isLoading, resolveStatus, status } =
-  useTransactionStatus()
-const { $i18n, $consola } = useNuxtApp()
-
-const { toast } = useToast()
-const { fetchFiatPrice, getCurrentKSMValue } = useFiatStore()
-
-const price = ref(0)
-const usdValue = ref(0)
-const destinationAddress = ref('')
-const sendingMyself = ref(true)
-const paraTeleport = ref<string | null>(null)
-const transactionValue = ref('')
-
-const hasAddress = computed(() => isAddress(destinationAddress.value))
-const ss58Format = computed(() => chainProperties.value.ss58Format)
-const correctAddress = computed(() =>
-  hasAddress.value
-    ? encodeAddress(destinationAddress.value, correctFormat(ss58Format.value))
-    : ''
-)
-const isKSM = computed(() => unit.value === 'KSM')
-
-const disabled = computed(
-  () => !(isLogIn && price.value && (sendingMyself.value || hasAddress.value))
-)
-
-const getUrl = () =>
-  urlBuilderTransaction(transactionValue.value, blockExplorer.value)
-
-const getExplorerUrl = () => {
-  window.open(getUrl(), '_blank')
-}
-
-const generatePaymentLink = () =>
-  `${window.location.origin}/${urlPrefix.value}/transfer?target=${destinationAddress.value}&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=${generatePaymentLink()}`
-  window.open(url, '_blank')
-}
-const currentRoute = computed(() => {
-  if (paraTeleport.value === '') {
-    return ['relaychain', 'parachain']
-  }
-
-  if (paraTeleport.value === null) {
-    return ['unknown', 'unknown']
-  }
-
-  return [`parachain ${paraTeleport.value}`, 'relaychain']
-})
-const routeMessage = computed(() => {
-  const [from, to] = currentRoute.value
-  return $i18n.t('teleport.route', [unit.value, from, to])
-})
-
-const checkQueryParams = () => {
-  if (route.query.target) {
-    const hasAddress = isAddress(route.query.target as string)
-    if (hasAddress) {
-      destinationAddress.value = route.query.target as string
-    } else {
-      showNotification('Unable to use target address', notificationTypes.warn)
-    }
-  }
-
-  if (route.query.amount) {
-    price.value = Number(route.query.amount)
-  }
-
-  if (route.query.usdamount) {
-    usdValue.value = Number(route.query.usdamount)
-    // getting ksm value from the usd value
-    price.value = calculateKsmFromUsd(
-      getCurrentKSMValue as number,
-      usdValue.value
-    )
-  }
-}
-
-const onAmountFieldChange = () => {
-  /* calculating usd value on the basis of price entered */
-  if (price.value) {
-    usdValue.value = calculateUsdFromKsm(
-      getCurrentKSMValue as number,
-      price.value
-    )
-  } else {
-    usdValue.value = 0
-  }
-}
-
-const onUSDFieldChange = () => {
-  /* calculating price value on the basis of usd entered */
-  if (usdValue.value) {
-    price.value = calculateKsmFromUsd(
-      getCurrentKSMValue as number,
-      usdValue.value
-    )
-  } else {
-    price.value = 0
-  }
-}
-
-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 submit = async (): Promise<void> => {
-  showNotification(`${route.query.target ? 'Sent for Sign' : 'Dispatched'}`)
-  initTransactionLoader()
-
-  try {
-    const api = await apiInstance.value
-    const isParaTeleport = await api.query.parachainInfo?.parachainId()
-
-    const cb = findCall(api)
-    const arg = getApiParams(
-      api,
-      cb,
-      isParaTeleport?.toString(),
-      sendingMyself.value ? accountId.value : destinationAddress.value,
-      calculateBalance(price.value, decimals.value).toString()
-    )
-
-    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} ${unit.value} in block ${blockNumber}`,
-            notificationTypes.success
-          )
-
-          destinationAddress.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) {
-    $consola.error('[ERR: TRANSFER SUBMIT]', e)
-    if (e instanceof Error) {
-      showNotification(e.message, notificationTypes.warn)
-    }
-  }
-}
-
-onMounted(() => {
-  fetchFiatPrice()
-  checkQueryParams()
-  onApiConnect(apiUrl.value, async (api) => {
-    const paraId = await api.query.parachainInfo?.parachainId()
-    paraTeleport.value = paraId?.toString() || ''
-  })
-})
-
-watch(destinationAddress, (value) => {
-  if (value) {
-    const queryValue: any = {}
-    if (value) {
-      queryValue.target = value
-    }
-    if (route.query.usdamount) {
-      queryValue.usdamount = route.query.usdamount
-    }
-    router.replace({
-      name: String(route.name),
-      query: queryValue,
-    })
-  }
-})
-
-watch(usdValue, (value) => {
-  const queryValue: any = {}
-  if (value) {
-    queryValue.usdamount = value
-  }
-  if (route.query.target) {
-    queryValue.target = route.query.target
-  }
-  router.replace({
-    name: String(route.name),
-    query: queryValue,
-  })
-})
-</script>
diff --git a/pages/teleport.vue b/pages/teleport.vue
deleted file mode 100644
index 8ab2c2ecdb..0000000000
--- a/pages/teleport.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <Teleport />
-</template>
-
-<script lang="ts">
-export default {
-  name: 'Transfer',
-  layout() {
-    return 'centered-half-layout'
-  },
-}
-</script>

From 26e099943ae93e8c9b8e8b7a9edf1f1a4be4d187 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Fri, 21 Jul 2023 16:51:25 +0700
Subject: [PATCH 4/5] undo

---
 composables/useChain.ts | 4 ----
 locales/en.json         | 3 +--
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/composables/useChain.ts b/composables/useChain.ts
index 289e008324..92696d243e 100644
--- a/composables/useChain.ts
+++ b/composables/useChain.ts
@@ -30,9 +30,6 @@ export default function () {
       : symbol
   })
 
-  const blockExplorer = computed(
-    () => chainProperties.value.blockExplorer ?? 'https://kusama.subscan.io/'
-  )
   return {
     decimals,
     unit,
@@ -40,6 +37,5 @@ export default function () {
     chainProperties,
     availableChains,
     chainSymbol,
-    blockExplorer,
   }
 }
diff --git a/locales/en.json b/locales/en.json
index 70f4308d8a..4cbef30467 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -889,8 +889,7 @@
     "btnCopyPayment": "Copy Payment link",
     "congratsSupport": "Congratulations for supporting",
     "tweetDonation": "Tweet about your awesome donation",
-    "donationSentTo": "Your donation will be sent to:",
-    "route": "Send {0} From {1} To {2}"
+    "donationSentTo": "Your donation will be sent to:" 
   },
   "preferences": {
     "basic": "basic user interface",

From f34fd9b989be627c950fb092ce2da55041e89ff8 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Fri, 21 Jul 2023 16:52:03 +0700
Subject: [PATCH 5/5] space

---
 locales/en.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/locales/en.json b/locales/en.json
index 4cbef30467..d9658f557d 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -889,7 +889,7 @@
     "btnCopyPayment": "Copy Payment link",
     "congratsSupport": "Congratulations for supporting",
     "tweetDonation": "Tweet about your awesome donation",
-    "donationSentTo": "Your donation will be sent to:" 
+    "donationSentTo": "Your donation will be sent to:"
   },
   "preferences": {
     "basic": "basic user interface",