feat: Collection Atomic Swaps support

components/collection/CollectionSwaps.vue → components/collection/CollectionTrades.vue

@@ -19,8 +19,11 @@
 
 <script setup lang="ts">
 import { type TradeTableQuery } from '@/components/trade/TradeActivityTable.vue'
+import type { TradeType } from '@/components/trade/types'
 
-const tradeType = TradeType.SWAP
+defineProps<{
+  tradeType: TradeType
+}>()
 
 const route = useRoute()
 

components/common/BaseCartItemDetailsSkeleton.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="w-full h-[50px]">
+    <div class="flex justify-between">
+      <div class="flex">
+        <div>
+          <NeoSkeleton
+            no-margin
+            height="48px"
+            width="48px"
+            :rounded="false"
+          />
+        </div>
+
+        <div class="flex flex-col justify-between ml-4 w-[100px] md:w-[170px]">
+          <NeoSkeleton
+            no-margin
+            :rounded="false"
+            width="130px"
+          />
+
+          <NeoSkeleton
+            no-margin
+            :rounded="false"
+            width="90px"
+          />
+        </div>
+      </div>
+
+      <div class="flex items-end">
+        <NeoSkeleton
+          no-margin
+          :rounded="false"
+          width="60px"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NeoSkeleton } from '@kodadot1/brick'
+</script>

components/common/ConnectWallet/WalletAsset.vue

@@ -7,22 +7,30 @@
       <MultipleBalances />
     </div>
 
-    <WalletAssetMenu />
+    <div class="h-full flex flex-col justify-end gap-5">
+      <WalletAssetTrades v-if="tradeVisible(urlPrefix) && vm === walletVm" />
+      <WalletAssetMenu />
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import WalletAssetIdentity from './WalletAssetIdentity.vue'
 import WalletAssetNfts from './WalletAssetNfts.vue'
 import WalletAssetMenu from './WalletAssetMenu.vue'
+import WalletAssetTrades from './WalletAssetTrades.vue'
 import { useIdentityStore } from '@/stores/identity'
+import { tradeVisible } from '@/utils/config/permission.config'
 
 const MultipleBalances = defineAsyncComponent(
   () => import('@/components/balance/MultipleBalances.vue'),
 )
 
 const identityStore = useIdentityStore()
 const { $consola } = useNuxtApp()
+const { urlPrefix } = usePrefix()
+const { vm } = useChain()
+const { getWalletVM: walletVm } = storeToRefs(useWalletStore())
 
 if (identityStore.getAuthAddress) {
   $consola.log('fetching balance...')

components/common/ConnectWallet/WalletAssetMenu.vue

@@ -1,79 +1,77 @@
 <template>
-  <div class="h-full flex flex-col justify-end">
-    <div
-      :class="{ 'border-t': filteredMenus.length }"
-      class="wallet-asset-container flex flex-col"
-      data-testid="sidebar-wallet-container"
-    >
-      <div>
-        <a
-          v-for="menu in filteredMenus"
-          :key="menu.label"
-          v-safe-href="menu.to"
-          class="wallet-asset-menu"
-        >
-          <span>{{ menu.label }}</span>
-          <NeoIcon
-            icon="angle-right"
-            size="medium"
-            class="text-k-grey"
-          />
-        </a>
-      </div>
-      <div class="wallet-asset-footer flex py-5 text-xs text-k-grey">
-        <!-- light/dark mode -->
-        <ColorModeSwitch />
+  <div
+    :class="{ 'border-t': filteredMenus.length }"
+    class="wallet-asset-container flex flex-col"
+    data-testid="sidebar-wallet-container"
+  >
+    <div>
+      <a
+        v-for="menu in filteredMenus"
+        :key="menu.label"
+        v-safe-href="menu.to"
+        class="wallet-asset-menu"
+      >
+        <span>{{ menu.label }}</span>
+        <NeoIcon
+          icon="angle-right"
+          size="medium"
+          class="text-k-grey"
+        />
+      </a>
+    </div>
+    <div class="wallet-asset-footer flex py-5 text-xs text-k-grey">
+      <!-- light/dark mode -->
+      <ColorModeSwitch />
 
-        <!-- language -->
-        <div
-          data-testid="sidebar-language"
-          class="language-selector"
+      <!-- language -->
+      <div
+        data-testid="sidebar-language"
+        class="language-selector"
+      >
+        <NeoDropdown
+          position="top-left"
+          aria-role="menu"
+          mobile-modal
         >
-          <NeoDropdown
-            position="top-left"
-            aria-role="menu"
-            mobile-modal
-          >
-            <template #trigger>
-              <div class="flex items-center">
-                <NeoIcon
-                  icon="globe"
-                  size="medium"
-                />
-                <span class="is-hidden-mobile ml-1">
-                  {{ $t('profileMenu.language') }}
-                </span>
-              </div>
-            </template>
+          <template #trigger>
+            <div class="flex items-center">
+              <NeoIcon
+                icon="globe"
+                size="medium"
+              />
+              <span class="is-hidden-mobile ml-1">
+                {{ $t('profileMenu.language') }}
+              </span>
+            </div>
+          </template>
 
-            <NeoDropdownItem
-              v-for="lang in langsFlags"
-              :key="lang.value"
-              aria-role="listitem"
-              :data-testid="`sidebar-language-${lang.value}`"
-              :value="lang.value"
-              :class="{ 'is-active': $i18n.locale === lang.value }"
-              @click="setUserLocale(lang.value)"
-            >
-              <span>{{ lang.flag }} {{ lang.label }}</span>
-            </NeoDropdownItem>
-          </NeoDropdown>
-        </div>
-
-        <!-- settings -->
-        <nuxt-link
-          to="/settings"
-          class="text-k-grey items-center"
-          data-testid="sidebar-link-settings"
-          @click="closeModal"
-        >
-          <NeoIcon
-            icon="gear"
-            size="medium"
-          />
-          <span class="is-hidden-mobile">{{ $t('settings') }}</span>
-        </nuxt-link>
+          <NeoDropdownItem
+            v-for="lang in langsFlags"
+            :key="lang.value"
+            aria-role="listitem"
+            :data-testid="`sidebar-language-${lang.value}`"
+            :value="lang.value"
+            :class="{ 'is-active': $i18n.locale === lang.value }"
+            @click="setUserLocale(lang.value)"
+          >
+            <span>{{ lang.flag }} {{ lang.label }}</span>
+          </NeoDropdownItem>
+        </NeoDropdown>
       </div>
+
+      <!-- settings -->
+      <nuxt-link
+        to="/settings"
+        class="text-k-grey items-center"
+        data-testid="sidebar-link-settings"
+        @click="closeModal"
+      >
+        <NeoIcon
+          icon="gear"
+          size="medium"
+        />
+        <span class="is-hidden-mobile">{{ $t('settings') }}</span>
+      </nuxt-link>
     </div>
   </div>
 </template>
@@ -100,7 +98,7 @@ const menus = ref<{ label: string, to: string, check: (v: Prefix) => boolean }[]
     check: teleportVisible,
   },
   {
-    label: $i18n.t('swap.swap'),
+    label: $i18n.t('swap.createSwap'),
     to: `/${urlPrefix.value}/swap`,
     check: swapVisible,
   },