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

@@ -0,0 +1,99 @@
+
+<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"
+        :status="status"
+        @close="isModalOpen = false"
+    />
+
+</template>
+
+<script setup lang="ts">
+import { NeoButton , NeoSwitch } from '@kodadot1/brick'
+
+const props = defineProps<{
+    amount: number,
+    label: string
+}>()
+
+const { chainSymbol , name } = useChain()
+const { hasEnoughInCurrentChain, hasEnoughInRichestChain, optimalTransition, teleport, status } = useAutoTeleport(computed(() => props.amount))
+
+const isModalOpen = ref(false)
+const rampActive = ref(false)
+const autoTeleport = ref(false)
+
+const allowAutoTeleport = computed(() => !hasEnoughInCurrentChain.value &&  hasEnoughInRichestChain.value && optimalTransition.value.source)
+
+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
+
+    teleport({
+        onSuccess:  () => {},
+        onError: () => {
+            isModalOpen.value = false
+        }
+    })
+}
+
+
+</script>
+
+<style scoped>
+
+</style>

components/common/autoTeleport/AutoTeleportModal.vue

@@ -0,0 +1,144 @@
+<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')" />
+
+        <TransactionSteps :steps="steps" class="mt-4" />
+
+      </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, TransactionStepStatus } from '@/utils/teleport'
+import TransactionSteps, { TransactionStep } from '@/components/shared/TransactionSteps/TransactionSteps.vue';
+import { AutoTeleportTransactionStatus } from '@/composables/useAutoTeleport';
+
+const emit = defineEmits(['confirm'])
+const props = defineProps<{
+  modelValue: boolean,
+  transition: TeleportTransition,
+  status: AutoTeleportTransactionStatus
+}>()
+
+const { $i18n } = useNuxtApp()
+const isModalActive = useVModel(props, 'modelValue')
+
+
+const teleporStepStatus = computed<TransactionStepStatus>(() => {
+  const status = props.status.bridge.status.value
+
+  if (status === TransactionStatus.Finalized) {
+    return TransactionStepStatus.COMPLETED
+  }
+
+  if (props.status.bridge.error.value) {
+      return TransactionStepStatus.FAILED
+  }
+
+  if (status !== TransactionStatus.Unknown ) {
+    return TransactionStepStatus.LOADING
+  }
+
+  return TransactionStepStatus.WAITING
+})
+
+
+const steps = computed<TransactionStep[]>(() => {
+  return [
+    {
+      title: $i18n.t('autoTeleport.steps.1.title'),
+      subtitle: $i18n.t('autoTeleport.steps.1.subtitle'),
+      status: teleporStepStatus,
+      children: [
+        {
+          status: teleporStepStatus,
+          title: $i18n.t('autoTeleport.steps.1_1.title'),
+          subtitle: $i18n.t('autoTeleport.steps.1_1.subtitle'),
+        }
+      ]
+    },
+    {
+      title: $i18n.t('autoTeleport.steps.2.title'),
+      subtitle: $i18n.t('autoTeleport.steps.2.subtitle'),
+      status: computed(() => TransactionStepStatus.WAITING),
+    }
+  ]
+})
+
+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>