feat: Auto teleport V1

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/common/autoTeleport/AutoTeleportActionButton.vue

@@ -0,0 +1,90 @@
+
+<template>
+    <div class="is-flex is-flex-direction-column w-full">
+
+        <div class="is-flex is-justify-content-space-between w-full mb-4" v-if="allowAutoTeleport">
+            <div class="is-flex">
+                <p class="has-text-weight-bold">{{$t('autoTeleport.autoTeleport')}}</p>
+
+                <AutoTeleportTooltip :transition="optimalTransition" />
+            </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="openAutoTeleportModal"
+        />
+
+        <div class="is-flex is-justify-content-center mt-4" v-if="allowAutoTeleport">
+            <span class="has-text-grey">Or</span> 
+
+            <a class="ml-2" @click="rampActive = true"
+            >+ {{ $t('addFunds') }} Via Onramp</a
+            >
+        </div>
+    </div>
+
+    <AutoTeleportModal 
+        v-model="isModalOpen"
+        :transition="optimalTransition"
+        @close="isModalOpen = false"
+    />
+
+</template>
+
+<script setup lang="ts">
+import { NeoButton , NeoSwitch } from '@kodadot1/brick'
+
+const props = defineProps<{
+    amount: number,
+    label: string
+}>()
+
+const isModalOpen = ref(false)
+const rampActive = ref(false)
+const { chainSymbol , name } = useChain()
+const autoTeleport = ref(false)
+const {hasEnoughInCurrentChain, hasEnoughInRichestChain, optimalTransition } = useAutoTeleport(computed(() => props.amount))
+
+const allowAutoTeleport = computed(() => !hasEnoughInCurrentChain.value)
+
+const autoTeleportLabel = computed(() => {
+    if (hasEnoughInCurrentChain.value) {
+        return props.label
+    }
+
+    if (hasEnoughInRichestChain.value) {
+        if (autoTeleport.value) {
+            return 'Teleport and confirm purchase'
+        }
+    }
+
+    return `Not enough “${chainSymbol.value}” on “${name.value}”`
+})
+
+const localDisabled = computed(() => {
+    if (!hasEnoughInRichestChain.value || !autoTeleport.value) {
+        return true 
+    }
+
+    return false
+})
+
+const openAutoTeleportModal = () =>  {
+    isModalOpen.value = true
+}
+
+
+</script>
+
+<style scoped>
+
+</style>

components/common/autoTeleport/AutoTeleportModal.vue

@@ -0,0 +1,109 @@
+<template>
+  <NeoModal
+    :value="isModalActive"
+    :can-cancel="['outside', 'escape']"
+    scroll="clip"
+    class="top"
+    @close="onClose">
+
+    <div class="modal-width">
+
+      <header
+        class="py-5 pl-6 pr-5 is-flex is-justify-content-space-between is-align-items-center border-bottom">
+
+        <span class="modal-card-title is-size-6 has-text-weight-bold">
+          {{ $t('autoTeleport.signTransactions') }}
+        </span>
+
+        <NeoButton
+          class="py-1 px-2"
+          variant="text"
+          no-shadow
+          icon="xmark"
+          size="medium"
+          @click="onClose" />
+
+      </header>
+
+      <div class="px-6 pt-4">
+
+        <ModalIdentityItem />
+
+        <p class="py-2" v-dompurify-html="$t('autoTeleport.header', {
+            chainName: transition.destination.name,
+            amountFormatted: transition.amountFormatted,
+            amountUsd: transition.amountUsd,
+            sourceNetwork: transition.source?.name
+          })" />
+
+        <p>{{ $t('autoTeleport.dontExit') }}</p>
+
+        <hr />
+
+        <p v-dompurify-html="$t('autoTeleport.tip')"/>
+      </div>
+
+      <div class="is-flex is-justify-content-space-between py-5 px-6">
+        <NeoButton
+          :label="btnLabel"
+          variant="k-accent"
+          no-shadow
+          :disabled="false"
+          class="is-flex is-flex-grow-1 btn-height"
+          @click="confirm" />
+      </div>
+    </div>
+  </NeoModal>
+</template>
+
+<script setup lang="ts">
+import { NeoButton, NeoModal } from '@kodadot1/brick'
+import { TeleportTransition } from '@/utils/teleport'
+
+
+const emit = defineEmits(['confirm'])
+const props = defineProps<{
+  modelValue: boolean,
+  transition: TeleportTransition
+}>()
+
+const isModalActive = useVModel(props, 'modelValue')
+
+const btnLabel = computed(() => {
+  return 'Finish All Steps First'
+})
+
+
+const onClose = () => {
+}
+
+const confirm = () => {
+  emit('confirm')
+}
+
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/styles/abstracts/variables';
+
+.top {
+  z-index: 1000;
+}
+.shade-border-color {
+  @include ktheme() {
+    border-color: theme('k-shade');
+  }
+}
+.modal-width {
+  width: 25rem;
+}
+.btn-height {
+  height: 3.5rem;
+}
+
+:deep(.identity-name-font-weight-regular) {
+  .identity-name {
+    font-weight: unset !important;
+  }
+}
+</style>

components/common/autoTeleport/AutoTeleportTooltip.vue

@@ -0,0 +1,47 @@
+<template>
+    <NeoTooltip size="large" position="top" multiline>
+        <NeoIcon icon="fa-info-circle" pack="fa-regular" class="ml-2" />
+
+        <template #content>
+            <div class="is-flex">
+                <NeoIcon icon="fa-info-circle" pack="fa-regular" class="mr-2" />
+
+                <span>{{ $t('autoTeleport.autoTeleport') }}</span>
+            </div>
+
+            <p>{{ $t('autoTeleport.tooltip.first') }}</p>
+            <p>{{ $t('autoTeleport.tooltip.second') }}</p>
+
+            <p class="has-text-weight-bold">{{ $t('autoTeleport.tooltip.optimalTransferPath') }}</p>
+
+            <div v-if="transition?.source" class="w-full">
+                <div class="is-flex is-justify-items-space-between">
+                    <span>{{ transition.source.name }}</span>
+
+                    <span> -> </span>
+
+                    <span>{{ transition.destination.name }} ({{ transition.token }})</span>
+                </div>
+
+                <div class="is-flex is-justify-items-space-between">
+                    <span>{{ $t('amount') }}</span>
+
+                    <span>{{ transition.amountFormatted }} ~ {{ transition.amountUsd }}</span>
+                </div>
+
+            </div>
+
+        </template>
+    </NeoTooltip>
+</template>
+
+<script setup lang="ts">
+import { NeoTooltip, NeoIcon } from "@kodadot1/brick"
+
+defineProps<{
+    transition: TeleportTransition | null
+}>()
+
+</script>
+
+<style scoped></style>