ref(swaps): pass step as prop to Preview.vue

components/swap/DestinationProfile.vue

@@ -15,12 +15,14 @@
     />
 
     <template #preview>
-      <SwapPreview />
+      <SwapPreview :step="SwapStep.DESIRED" />
     </template>
   </SwapLayoutSelection>
 </template>
 
 <script setup lang="ts">
+import { SwapStep } from '@/components/swap/types'
+
 const { accountId } = useAuth()
 const route = useRoute()
 

components/swap/GridListFilters.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex gap-4"
+    class="flex flex-wrap gap-4"
   >
     <ChainDropdown
       position="bottom-auto"

components/swap/Preview.vue

@@ -43,7 +43,7 @@
             :name="nft.name"
             :image="sanitizeIpfsUrl(nft.meta.image)"
             image-class="border border-k-shade"
-            @remove="() => swapStore.removeStepItem(nft.id)"
+            @remove="swapStore.removeStepItem(nft.id)"
           />
 
           <SwapPreviewItem
@@ -147,8 +147,12 @@ const stepDetailsMap: Partial<Record<SwapStep, StepDetails>> = {
   },
 }
 
+const props = defineProps<{
+  step: SwapStep
+}>()
+
 const swapStore = useAtomicSwapsStore()
-const { swap, step, stepItems } = storeToRefs(swapStore)
+const { swap } = storeToRefs(swapStore)
 const { $i18n } = useNuxtApp()
 const { accountId } = useAuth()
 const { decimals } = useChain()
@@ -160,19 +164,20 @@ const amount = ref()
 const itemsContainer = ref()
 
 const isTargetVisible = useElementVisibility(target)
-const surchargeDisabled = computed(() => Boolean(swap.value.surcharge))
-const stepDetails = computed(() => stepDetailsMap[step.value] as StepDetails)
+const stepItems = computed(() => swapStore.getStepItems(props.step))
+const stepDetails = computed(() => stepDetailsMap[props.step] as StepDetails)
 const title = computed(() => $i18n.t(stepDetails.value.title))
 const surchargeTitle = computed(() => $i18n.t(stepDetails.value.surchargeTitle))
+const surchargeDisabled = computed(() => Boolean(swap.value.surcharge))
 const stepHasSurcharge = computed(() => swap.value.surcharge?.direction === stepDetails.value.surchargeDirection)
 const count = computed(() => stepItems.value.length + (stepHasSurcharge.value ? 1 : 0))
-const isOverOneToOneSwap = computed(() => swap.value.offered.length > swap.value.desired.length && step.value === SwapStep.OFFERED)
+const isOverOneToOneSwap = computed(() => swap.value.offered.length > swap.value.desired.length && props.step === SwapStep.OFFERED)
 const disabled = computed(() => {
   if (!accountId.value || isOverOneToOneSwap.value) {
     return true
   }
 
-  if (step.value === SwapStep.DESIRED) {
+  if (props.step === SwapStep.DESIRED) {
     return !swap.value.desired.length
   }
 

components/swap/YourProfile.vue

@@ -15,12 +15,14 @@
     />
 
     <template #preview>
-      <SwapPreview />
+      <SwapPreview :step="SwapStep.OFFERED" />
     </template>
   </SwapLayoutSelection>
 </template>
 
 <script setup lang="ts">
+import { SwapStep } from '@/components/swap/types'
+
 const { accountId } = useAuth()
 const { swap } = storeToRefs(useAtomicSwapsStore())
 

components/swap/banner/title.vue

@@ -3,7 +3,7 @@
     <div class="px-4 py-2 bg-neutral-3 text-black text-xl rounded-full">
       {{ step }}
     </div>
-    <div class="flex flex-col justify-center">
+    <div class="flex flex-col justify-center capitalize">
       <h1 class="title">
         {{ title }}
       </h1>

stores/atomicSwaps.ts

@@ -51,17 +51,7 @@ export const useAtomicSwapsStore = defineStore('atomicSwaps', () => {
   const step = ref(SwapStep.COUNTERPARTY)
 
   const getItems = computed(() => items.value)
-  const stepItemsKey = computed(() => {
-    if (step.value === SwapStep.DESIRED) {
-      return 'desired'
-    }
-
-    if (step.value === SwapStep.OFFERED) {
-      return 'offered'
-    }
-  })
-
-  const stepItems = computed<SwapItem[]>(() => swap.value?.[stepItemsKey.value || ''] || [])
+  const stepItems = computed(() => getStepItems(step.value))
 
   const createSwap = (counterparty: string) => {
     const newAtomicSwap: AtomicSwap = {
@@ -80,14 +70,17 @@ export const useAtomicSwapsStore = defineStore('atomicSwaps', () => {
     return newAtomicSwap
   }
 
+  const getStepItems = (step: SwapStep) => swap.value[getStepItemsKey(step) || ''] || []
+
   const updateStepItems = (items: SwapItem[]) => {
-    if (swap.value && stepItemsKey.value) {
-      swap.value[stepItemsKey.value] = items
+    const key = getStepItemsKey(step.value)
+    if (key) {
+      swap.value[key] = items
     }
   }
 
   const removeStepItem = (id: string) => {
-    updateStepItems(stepItems.value.filter(item => item.id !== id))
+    updateStepItems(getStepItems(step.value).filter(item => item.id !== id))
   }
 
   return {
@@ -99,10 +92,10 @@ export const useAtomicSwapsStore = defineStore('atomicSwaps', () => {
     itemsInChain,
     getItems,
     step,
-    stepItemsKey,
     stepItems,
     // actions
     getItem,
+    getStepItems,
     swap,
     setItem,
     updateItem,

utils/swaps.ts

@@ -33,3 +33,13 @@ export const getSwapStep = (swap: AtomicSwap): SwapStep => {
 
   return SwapStep.REVIEW
 }
+
+export const getStepItemsKey = (step: SwapStep) => {
+  if (step === SwapStep.DESIRED) {
+    return 'desired'
+  }
+
+  if (step === SwapStep.OFFERED) {
+    return 'offered'
+  }
+}