feat: Auto teleport V1

assets/styles/global.scss

@@ -357,7 +357,7 @@ a.has-text-grey {
 
 .has-text-k-green {
   @include ktheme() {
-    color: theme('k-green');
+    color: theme('k-green') !important;
   }
 }
 .has-text-k-red {

components/balance/MultipleBalances.vue

@@ -59,40 +59,20 @@
 
 <script setup lang="ts">
 import { storeToRefs } from 'pinia'
-import { ApiPromise, WsProvider } from '@polkadot/api'
-import { decodeAddress, encodeAddress } from '@polkadot/util-crypto'
-import { CHAINS, ENDPOINT_MAP } from '@kodadot1/static'
 import { NeoSkeleton } from '@kodadot1/brick'
-import { balanceOf } from '@kodadot1/sub-api'
-import format, { formatNumber } from '@/utils/format/balance'
-import { useFiatStore } from '@/stores/fiat'
-import { calculateExactUsdFromToken } from '@/utils/calculation'
-import { getAssetIdByAccount } from '@/utils/api/bsx/query'
-import { toDefaultAddress } from '@/utils/account'
+import { formatNumber } from '@/utils/format/balance'
 
 import { ChainToken, useIdentityStore } from '@/stores/identity'
-import type { PalletBalancesAccountData } from '@polkadot/types/lookup'
 
-const { accountId } = useAuth()
-const { isTestnet } = usePrefix()
 const refetchMultipleBalanceTimer = ref()
 const identityStore = useIdentityStore()
+const { fetchMultipleBalance, currentNetwork } = useMultiBalance()
+
 const {
   multiBalances,
-  multiBalanceAssets,
-  multiBalanceAssetsTestnet,
   multiBalanceNetwork,
 } = storeToRefs(identityStore)
 
-const networkToPrefix = {
-  polkadot: 'dot',
-  kusama: 'ksm',
-  basilisk: 'bsx',
-  kusamaHub: 'ahk',
-  'basilisk-testnet': 'snek',
-  polkadotHub: 'ahp',
-}
-
 const isBalanceLoading = computed(
   () => identityStore.getStatusMultiBalances === 'loading',
 )
@@ -113,92 +93,6 @@
       filterEmptyBalanceChains(multiBalances.value.chains[chain]).length !== 0,
   )
 })
-const currentNetwork = computed(() =>
-  isTestnet.value ? 'test-network' : 'main-network',
-)
-
-const fiatStore = useFiatStore()
-function calculateUsd(amount: string, token = 'KSM') {
-  if (!amount) {
-    return 0
-  }
-
-  const amountToNumber = Number(amount.replace(/\,/g, ''))
-
-  return calculateExactUsdFromToken(
-    amountToNumber,
-    Number(fiatStore.getCurrentTokenValue(token)),
-  )
-}
-
-async function getBalance(chainName: string, token = 'KSM', tokenId = 0) {
-  const currentAddress = accountId.value
-  const prefix = networkToPrefix[chainName]
-  const chain = CHAINS[prefix]
-
-  const defaultAddress = toDefaultAddress(currentAddress)
-  const publicKey = decodeAddress(currentAddress)
-  const prefixAddress = encodeAddress(publicKey, chain.ss58Format)
-  const wsProvider = new WsProvider(ENDPOINT_MAP[prefix])
-
-  const api = await ApiPromise.create({
-    provider: wsProvider,
-  })
-
-  let currentBalance
-  let nativeBalance
-
-  if (tokenId) {
-    nativeBalance = (
-      (await api.query.tokens.accounts(
-        prefixAddress,
-        tokenId,
-      )) as PalletBalancesAccountData
-    ).free.toString()
-    currentBalance = format(nativeBalance, chain.tokenDecimals, false)
-  } else {
-    nativeBalance = await balanceOf(api, prefixAddress)
-    currentBalance = format(nativeBalance, chain.tokenDecimals, false)
-  }
-
-  let selectedTokenId = String(tokenId)
-  if (chainName === 'basilisk') {
-    selectedTokenId = await getAssetIdByAccount(api, prefixAddress)
-  }
-
-  const usd = calculateUsd(currentBalance, token)
-
-  identityStore.setMultiBalances({
-    address: defaultAddress,
-    chains: {
-      [chainName]: {
-        [token.toLowerCase()]: {
-          address: prefixAddress,
-          balance: currentBalance,
-          nativeBalance,
-          usd,
-          selected: selectedTokenId === String(tokenId),
-        },
-      },
-    },
-    chainName,
-  })
-
-  identityStore.multiBalanceNetwork = currentNetwork.value
-
-  await wsProvider.disconnect()
-}
-
-const fetchMultipleBalance = async () => {
-  await fiatStore.fetchFiatPrice()
-  const assets = isTestnet.value
-    ? multiBalanceAssetsTestnet.value
-    : multiBalanceAssets.value
-
-  assets.forEach((item) => {
-    getBalance(item.chain, item.token, Number(item.tokenId))
-  })
-}
 
 onMounted(async () => {
   if (currentNetwork.value !== multiBalanceNetwork.value) {

components/buy/Buy.vue

@@ -1,6 +1,14 @@
 <template>
   <div>
-    <ConfirmPurchaseModal @confirm="onConfirm" />
+    <ConfirmPurchaseModal >
+      <template #custom-action="{label, disabled, amount}">
+        <AutoTeleportActionButton
+          :amount="amount"
+          :label="label"
+          :action="buyAction"
+          />
+      </template>
+    </ConfirmPurchaseModal>
     <Loader v-model="isLoading" :status="status" />
   </div>
 </template>
@@ -10,10 +18,9 @@
 import { usePreferencesStore } from '@/stores/preferences'
 import { useFiatStore } from '@/stores/fiat'
 
-import { warningMessage } from '@/utils/notification'
 import ConfirmPurchaseModal from '@/components/common/confirmPurchaseModal/ConfirmPurchaseModal.vue'
 import Loader from '@/components/shared/Loader.vue'
-import { TokenToBuy } from '@/composables/transaction/types'
+import { Actions, TokenToBuy } from '@/composables/transaction/types'
 import { ShoppingCartItem } from '@/components/common/shoppingCart/types'
 
 const { urlPrefix } = usePrefix()
@@ -35,15 +42,15 @@
   }
 })
 
 const { transaction, status, isLoading } = useTransaction()
 const { $i18n } = useNuxtApp()
 
 const ShoppingCartItemToTokenToBuy = (item: ShoppingCartItem): TokenToBuy => {
   return {
-    currentOwner: item.currentOwner,
-    price: item.price,
-    id: item.id,
-    royalty: item.royalty,
+    currentOwner: item?.currentOwner,
+    price: item?.price,
+    id: item?.id,
+    royalty: item?.royalty,
   }
 }
 
@@ -57,26 +64,26 @@
   }
 })
 
-const onConfirm = () => {
+const buyAction = computed<Actions>(() => {
   if (preferencesStore.getCompletePurchaseModal.mode === 'shopping-cart') {
-    handleBuy(
+    return getBuyAction(
       items.value.map(ShoppingCartItemToTokenToBuy),
-      items.value.map((item) => item.name),
+      items.value.map((item) => item?.name),
     )
   } else {
     const item = shoppingCartStore.getItemToBuy as ShoppingCartItem
-    handleBuy(ShoppingCartItemToTokenToBuy(item), [item.name || ''])
-    shoppingCartStore.removeItemToBuy()
+    return getBuyAction(ShoppingCartItemToTokenToBuy(item), [item?.name || ''])
+//     shoppingCartStore.removeItemToBuy()
   }
-}
+})
 
-const handleBuy = async (
+
+const getBuyAction = (
   nfts: TokenToBuy | TokenToBuy[],
   nftNames: string[],
-) => {
-  try {
-    await transaction({
+): Actions => {
+  return {
       interaction: ShoppingActions.BUY,
       nfts,
       urlPrefix: urlPrefix.value,
       successMessage: {
@@ -84,9 +91,6 @@
         large: true,
       },
       errorMessage: $i18n.t('transaction.buy.error'),
-    })
-  } catch (error) {
-    warningMessage(error)
   }
 }
 </script>

components/common/autoTeleport/AutoTeleportActionButton.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="is-flex is-flex-direction-column w-full">
+    <div
+      v-if="allowAutoTeleport"
+      class="is-flex is-justify-content-space-between w-full mb-4">
+      <div class="is-flex">
+        <p class="has-text-weight-bold">
+          {{ $t('autoTeleport.autoTeleport') }}
+
+          <AutoTeleportTooltip :transition="optimalTransition" />
+        </p>
+      </div>
+
+      <NeoSwitch v-model="autoTeleport" data-testid="auto-teleport-switch" />
+    </div>
+
+    <NeoButton
+      :label="autoTeleportLabel"
+      variant="k-accent"
+      no-shadow
+      :disabled="localDisabled"
+      class="is-flex is-flex-grow-1 btn-height"
+      @click="submit" />
+
+    <div
+      v-if="allowAutoTeleport"
+      class="is-flex is-justify-content-center mt-4">
+      <span class="has-text-grey">Or</span>
+
+      <a class="ml-2" @click="onRampActive = true"
+        >+ {{ $t('autoTeleport.addFundsViaOnramp') }}</a
+      >
+    </div>
+  </div>
+
+  <AutoTeleportModal
+    v-model="isModalOpen"
+    :transition="optimalTransition"
+    :can-do-action="hasEnoughInCurrentChain"
+    :status="status"
+    @close="isModalOpen = false"
+    @confirm="transaction" />
+
+  <OnRampModal v-model="onRampActive" @close="onRampActive = false" />
+</template>
+
+<script setup lang="ts">
+import { NeoButton, NeoSwitch } from '@kodadot1/brick'
+import { Actions } from '@/composables/transaction/types'
+import OnRampModal from '@/components/shared/OnRampModal.vue'
+
+const props = defineProps<{
+  amount: number
+  label: string
+  action: Actions
+}>()
+
+const { $i18n } = useNuxtApp()
+const { chainSymbol, name } = useChain()
+const {
+  canTeleport,
+  hasEnoughInCurrentChain,
+  hasEnoughInRichestChain,
+  optimalTransition,
+  teleport,
+  status,
+  transaction,
+} = useAutoTeleport(
+  props.action,
+  computed(() => props.amount),
+)
+
+const isModalOpen = ref(false)
+const onRampActive = ref(false)
+const autoTeleport = ref(false)
+
+const allowAutoTeleport = computed(
+  () =>
+    !hasEnoughInCurrentChain.value &&
+    hasEnoughInRichestChain.value &&
+    optimalTransition.value.source &&
+    canTeleport.value,
+)
+
+const autoTeleportLabel = computed(() => {
+  if (!canTeleport.value || hasEnoughInCurrentChain.value) {
+    return props.label
+  }
+
+  if (hasEnoughInRichestChain.value && autoTeleport.value) {
+    return $i18n.t('autoTeleport.teleportAndConfirm')
+  }
+
+  return $i18n.t('autoTeleport.notEnoughTokenInChain', [
+    chainSymbol.value,
+    name.value,
+  ])
+})
+
+const localDisabled = computed(() => {
+  if (
+    hasEnoughInRichestChain.value &&
+    canTeleport.value &&
+    autoTeleport.value
+  ) {
+    return false
+  }
+
+  if (hasEnoughInCurrentChain.value) {
+    return false
+  }
+
+  return true
+})
+
+const openAutoTeleportModal = () => {
+  isModalOpen.value = true
+
+  teleport({
+    onError: () => {
+      isModalOpen.value = false
+    },
+  })
+}
+
+const submit = () => {
+  if (allowAutoTeleport.value) {
+    openAutoTeleportModal()
+  } else {
+    transaction()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.btn-height {
+  height: 3.5rem;
+}
+</style>