feat: Transfer Redesign handover - (2) Transaction confirm

components/transfer/Transfer.vue

@@ -182,10 +182,18 @@
         class="is-flex is-flex-1 fixed-height"
         variant="k-accent"
         :disabled="disabled"
-        @click.native="submit"
+        @click.native="handleContinue"
         >{{ $t('redirect.continue') }}</NeoButton
       >
     </div>
+    <TransferConfirmModal
+      :is-modal-active="isTransferModalVisible"
+      :total-token-amount="totalTokenAmount"
+      :total-usd-value="totalUsdValue"
+      :token-icon="tokenIcon"
+      :unit="unit"
+      :target-addresses="targetAddresses"
+      @close="isTransferModalVisible = false" />
   </div>
 </template>
 
@@ -208,7 +216,7 @@ import { useFiatStore } from '@/stores/fiat'
 import { useIdentityStore } from '@/stores/identity'
 import Avatar from '@/components/shared/Avatar.vue'
 import Identity from '@/components/identity/IdentityIndex.vue'
-
+import TransferConfirmModal from '@/components/transfer/TransferConfirmModal.vue'
 import { emptyObject } from '@kodadot1/minimark/utils'
 import {
   NeoButton,
@@ -237,10 +245,11 @@ const { fetchFiatPrice, getCurrentTokenValue } = useFiatStore()
 const { initTransactionLoader, isLoading, resolveStatus } =
   useTransactionStatus()
 const { toast } = useToast()
+const isTransferModalVisible = ref(false)
 
 type Target = 'target' | `target${number}`
 type TargetMap = Record<Target, string>
-type TargetAddress = {
+export type TargetAddress = {
   address?: string
   usd?: number | string
   token?: number | string
@@ -339,6 +348,15 @@ const balanceUsdValue = computed(() =>
     decimals.value
   )
 )
+
+const handleContinue = () => {
+  if (!disabled.value) {
+    targetAddresses.value = targetAddresses.value.filter(
+      (address) => address.address && address.token && address.usd
+    )
+    isTransferModalVisible.value = true
+  }
+}
 const onAmountFieldChange = (target: TargetAddress) => {
   /* calculating usd value on the basis of price entered */
 

components/transfer/TransferConfirmModal.vue

@@ -0,0 +1,202 @@
+<template>
+  <NeoModal v-model="isModalActive" scroll="clip" @close="emit('close')">
+    <div
+      class="modal-width is-flex is-flex-direction-column is-justify-content-space-between">
+      <div>
+        <div
+          class="is-flex is-justify-content-center is-align-items-center header px-6 py-3">
+          <span class="is-size-5 has-text-weight-bold">
+            {{ $t('teleport.send') }}
+          </span>
+          <NeoIcon
+            class="position-right is-clickable mr-6"
+            icon="close"
+            pack="fas"
+            @click.native="closeModal" />
+        </div>
+        <div
+          class="px-6 is-scrollable"
+          :class="{
+            'is-bordered-top': isExpandList,
+          }">
+          <div
+            class="is-flex is-justify-content-space-between is-align-items-center py-4">
+            <span class="has-text-weight-bold is-size-6">{{
+              $t('transfers.network')
+            }}</span>
+            <div class="is-flex is-align-items-center">
+              <img class="mr-2 is-24x24" :src="tokenIcon" alt="token" />
+              {{ network }}
+            </div>
+          </div>
+          <div
+            class="is-flex is-justify-content-space-between is-align-items-center py-4 is-bordered-top">
+            <span class="has-text-weight-bold is-size-6 is-capitalized">{{
+              $t('general.from')
+            }}</span>
+            <div class="is-flex is-align-items-center">
+              <Avatar :value="accountId" :size="24" />
+              <span class="ml-2 is-size-6">
+                <Identity :address="accountId" hide-identity-popover />
+              </span>
+            </div>
+          </div>
+
+          <div
+            class="is-flex is-justify-content-space-between is-align-items-center py-4 is-bordered-top">
+            <span class="has-text-weight-bold is-size-6">{{
+              $t('transfers.sendTo')
+            }}</span>
+            <div
+              v-if="targetAddresses.length === 1"
+              class="is-flex is-align-items-center">
+              <Avatar :value="targetAddresses[0].address" :size="24" />
+              <span class="mx-2 is-size-6">
+                <Identity
+                  :address="targetAddresses[0].address"
+                  hide-identity-popover />
+              </span>
+              <NeoIcon icon="circle-info" pack="far" />
+            </div>
+            <div
+              v-else
+              class="is-clickable"
+              @click="isExpandList = !isExpandList">
+              <span class="mx-2 is-size-6">
+                {{ targetAddresses.length }} {{ $t('transfers.recipients') }}
+              </span>
+              <NeoIcon
+                :icon="isExpandList ? 'angle-up' : 'angle-down'"
+                pack="far" />
+            </div>
+          </div>
+          <div class="fixed-height">
+            <template v-if="isExpandList">
+              <div
+                v-for="(address, index) in targetAddresses"
+                :key="address.address"
+                class="py-4 is-bordered-top is-size-7">
+                <div
+                  class="is-flex is-justify-content-space-between is-align-items-center mb-2">
+                  <span class="has-text-weight-bold"
+                    >{{ $t('transfers.recipient') }} {{ index + 1 }}</span
+                  >
+                  <div class="is-flex is-align-items-center">
+                    <Avatar :value="address.address" :size="18" />
+                    <span class="mx-2">
+                      <Identity
+                        :address="address.address"
+                        hide-identity-popover />
+                    </span>
+                    <NeoIcon icon="circle-info" pack="far" />
+                  </div>
+                </div>
+                <div
+                  class="is-flex is-justify-content-space-between is-align-items-center">
+                  <span class="has-text-weight-bold">{{ $t('amount') }}</span>
+
+                  <div class="is-flex is-align-items-center">
+                    <span class="has-text-grey"
+                      >({{ address.token }} {{ unit }})</span
+                    >
+                    <span class="ml-1">${{ address.usd }}</span>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+
+      <div class="is-flex is-flex-direction-column px-6 py-5 is-bordered-top">
+        <div
+          class="is-flex is-justify-content-space-between is-align-items-center mb-3">
+          <span class="has-text-weight-bold is-size-6">{{
+            $t('transfers.totalAmount')
+          }}</span>
+          <div class="is-flex is-align-items-center">
+            <span class="is-size-7 has-text-grey mr-1"
+              >({{ totalTokenAmount }} {{ unit }})</span
+            >
+
+            <span class="has-text-weight-bold is-size-6">
+              ${{ totalUsdValue }}</span
+            >
+          </div>
+        </div>
+
+        <NeoButton
+          :label="$t('teleport.send')"
+          variant="k-accent"
+          class="fixed-button-height is-flex is-flex-1"
+          @click.native="confirmTransfer" />
+      </div>
+    </div>
+  </NeoModal>
+</template>
+
+<script setup lang="ts">
+import { NeoButton, NeoIcon, NeoModal } from '@kodadot1/brick'
+import { NAMES } from '@/libs/static/src/names'
+import Avatar from '@/components/shared/Avatar.vue'
+import Identity from '@/components/identity/IdentityIndex.vue'
+import type { TargetAddress } from '@/components/transfer/Transfer.vue'
+const props = defineProps<{
+  isModalActive: boolean
+  totalTokenAmount: string
+  totalUsdValue: number
+  tokenIcon: string
+  unit: string
+  targetAddresses: TargetAddress[]
+}>()
+
+const isModalActive = useVModel(props, 'isModalActive')
+
+const { urlPrefix } = usePrefix()
+const emit = defineEmits(['close', 'confirm'])
+
+const closeModal = () => {
+  emit('close')
+}
+
+const confirmTransfer = () => {
+  closeModal()
+  emit('confirm')
+}
+const { accountId } = useAuth()
+
+const network = computed(() => NAMES[urlPrefix.value])
+const isExpandList = ref(false)
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/abstracts/variables';
+
+.modal-width {
+  width: 28rem;
+}
+.header {
+  position: relative;
+}
+.position-right {
+  position: absolute;
+  right: 0;
+}
+
+.fixed-height {
+  height: 10rem;
+}
+
+.fixed-button-height {
+  height: 3.5rem;
+}
+
+.is-scrollable {
+  overflow-y: scroll;
+}
+.is-bordered-top {
+  @include ktheme() {
+    border-top: 1px solid theme('k-shade');
+  }
+}
+</style>

locales/en.json

@@ -98,7 +98,11 @@
     "addAddress": "Add recipient",
     "payMeLink": "Pay me link",
     "setSameAmount": "Set one amount that will be sent to all recipients",
-    "transferable": "Transferable"
+    "network": "Network",
+    "sendTo": "Sending to",
+    "recipients": "recipients",
+    "totalAmount": "Total Amount",
+     "transferable": "Transferable"
   },
   "topCollections": {
     "timeFrames": {