Add boosts modal

src/components/SpaceProposalBoost.vue

@@ -11,7 +11,8 @@ const props = defineProps<{
   proposal: Proposal;
 }>();
 
-const isOpen = ref(false);
+const createModalOpen = ref(false);
+const boostsModalOpen = ref(false);
 const boosts = ref<BoostSubgraphResult[]>([]);
 const claims = ref<{ id: string; amount: string }[]>([]);
 const loaded = ref(false);
@@ -80,9 +81,7 @@ const boostsSorted = computed(() => {
     }
   });
 
-  return [...eligible, ...claimed, ...other].filter(
-    boost => getAddress(boost.owner) !== getAddress(web3Account.value)
-  );
+  return [...eligible, ...claimed, ...other];
 });
 
 const boostsOwner = computed(() => {
@@ -94,7 +93,7 @@ const boostsOwner = computed(() => {
 
 function handleStart() {
   router.push(newBoostLink.value);
-  isOpen.value = false;
+  createModalOpen.value = false;
 }
 
 async function loadBoosts() {
@@ -139,7 +138,7 @@ function handleBoost() {
   if (dontShowModalAgain.value) {
     handleStart();
   } else {
-    isOpen.value = true;
+    createModalOpen.value = true;
   }
 }
 
@@ -243,28 +242,37 @@ watch(
               <span> New boost </span>
             </TuneButton>
           </div>
-          <div v-if="loaded" class="mt-3 space-y-2">
-            <SpaceProposalBoostOwner
-              v-if="boostsOwner.length"
-              :boosts="boostsOwner"
-              :proposal="proposal"
-            />
-            <div v-for="boost in boostsSorted" :key="boost.id">
-              <SpaceProposalBoostItem
-                :boost="boost"
-                :claims="claims"
+          <div v-if="loaded">
+            <div class="mt-3 space-y-2">
+              <SpaceProposalBoostOwner
+                v-if="boostsOwner.length"
+                :boosts="boostsOwner.slice(0, 2)"
                 :proposal="proposal"
-                :web3-account="web3Account"
-                :reward="
-                  boostRewards.find(
-                    reward =>
-                      reward.boost_id === boost.id &&
-                      reward.chain_id === boost.chainId
-                  )
-                "
-                :is-eligible="isEligible(boost)"
               />
+              <div v-for="boost in boostsSorted.slice(0, 2)" :key="boost.id">
+                <SpaceProposalBoostItem
+                  :boost="boost"
+                  :claims="claims"
+                  :proposal="proposal"
+                  :web3-account="web3Account"
+                  :reward="
+                    boostRewards.find(
+                      reward =>
+                        reward.boost_id === boost.id &&
+                        reward.chain_id === boost.chainId
+                    )
+                  "
+                  :is-eligible="isEligible(boost)"
+                />
+              </div>
             </div>
+            <TuneButton
+              v-if="boostsOwner.length > 2 || boostsSorted.length > 2"
+              class="w-full mt-3"
+              @click="boostsModalOpen = true"
+            >
+              View all
+            </TuneButton>
           </div>
           <LoadingList v-else class="mt-3" />
           <div
@@ -336,10 +344,20 @@ watch(
         </div>
       </div>
     </TuneBlock>
-    <SpaceProposalBoostModal
-      :open="isOpen"
-      @close="isOpen = false"
+    <SpaceProposalBoostModalCreate
+      :open="createModalOpen"
+      @close="createModalOpen = false"
       @start="handleStart"
     />
+    <SpaceProposalBoostModalBoosts
+      :open="boostsModalOpen"
+      :boosts="boostsSorted"
+      :boosts-owner="boostsOwner"
+      :claims="claims"
+      :proposal="proposal"
+      :rewards="boostRewards"
+      :is-eligible="isEligible"
+      @close="boostsModalOpen = false"
+    />
   </div>
 </template>

src/components/SpaceProposalBoostItem.vue

@@ -121,11 +121,7 @@ const rewardFormatted = computed(() => {
         <div v-else-if="isEligible" class="flex items-center gap-1">
           <i-ho-fire class="text-xs" />
           Eligible to
-          {{
-            rewardFormatted
-              ? `${rewardFormatted} ${boost.token.symbol}`
-              : 'reward'
-          }}
+          {{ reward ? `${rewardFormatted} ${boost.token.symbol}` : 'reward' }}
         </div>
       </div>
     </div>

src/components/SpaceProposalBoostModalBoosts.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { BoostSubgraphResult, Proposal } from '@/helpers/interfaces';
+import { Reward } from '@/helpers/boost/api';
+
+defineProps<{
+  open: boolean;
+  boosts: BoostSubgraphResult[];
+  boostsOwner: BoostSubgraphResult[];
+  claims: { id: string; amount: string }[];
+  proposal: Proposal;
+  rewards: Reward[];
+  isEligible: (boost: BoostSubgraphResult) => boolean;
+}>();
+
+defineEmits(['close']);
+
+const { web3Account } = useWeb3();
+</script>
+
+<template>
+  <TuneModal size="medium" :open="open" @close="$emit('close')">
+    <TuneModalTitle as="h4" class="flex items-center gap-1 m-3">
+      Boosts <TuneTag label="4" class="leading-none rounded-full px-2" />
+    </TuneModalTitle>
+    <div class="p-3 pt-0 space-y-2 h-[488px] overflow-y-scroll">
+      <SpaceProposalBoostOwner
+        v-if="boostsOwner.length"
+        :boosts="boostsOwner"
+        :proposal="proposal"
+      />
+      <div v-for="boost in boosts" :key="boost.id">
+        <SpaceProposalBoostItem
+          :boost="boost"
+          :claims="claims"
+          :proposal="proposal"
+          :web3-account="web3Account"
+          :reward="
+            rewards.find(
+              reward =>
+                reward.boost_id === boost.id &&
+                reward.chain_id === boost.chainId
+            )
+          "
+          :is-eligible="isEligible(boost)"
+        />
+      </div>
+    </div>
+  </TuneModal>
+</template>

src/components/Tune/TuneModal.vue

@@ -13,12 +13,20 @@ defineEmits(['close']);
 const props = defineProps<{
   open: boolean;
   hideClose?: boolean;
-  size?: 'big';
+  size?: 'big' | 'medium';
 }>();
 
 const sizeClass = computed(() => {
-  if (!props.size) return 'md:w-[440px] h-[270px] w-full';
-  if (props.size === 'big') return 'md:w-[860px] md:h-[628px] w-full';
+  if (!props.size) return 'md:w-[440px] w-full';
+  if (props.size === 'big') return 'md:w-[860px] w-full';
+  if (props.size === 'medium') return 'md:w-[578px] w-full';
+});
+
+const closePositionClass = computed(() => {
+  if (!props.size) return 'md:top-[12px] md:right-[10px]';
+  if (props.size === 'big')
+    return 'md:right-4 md:top-[26px] right-[10px] top-[10px]';
+  if (props.size === 'medium') return 'top-[12px] right-[10px]';
 });
 
 const isDesktop = useBreakpoints(SNAPSHOT_BREAKPOINTS).greater('md');
@@ -112,12 +120,13 @@ onUnmounted(() => {
             :leave-to="panelTransitionClasses.leaveTo"
           >
             <DialogPanel
-              class="rounded-t-[20px] md:rounded-[20px] bg-skin-bg transform overflow-hidden align-middle transition-all md:h-auto"
+              class="rounded-t-[20px] md:rounded-[20px] bg-skin-bg transform overflow-hidden align-middle transition-all"
               :class="sizeClass"
             >
               <div
                 v-if="!hideClose"
-                class="absolute md:right-4 md:top-[26px] right-[10px] top-[10px]"
+                class="absolute"
+                :class="closePositionClass"
               >
                 <BaseButtonIcon @click="$emit('close')">
                   <span class="sr-only">Close</span>