feat: Boost

.env

@@ -11,3 +11,4 @@ VITE_PUSHER_BEAMS_INSTANCE_ID=2e080021-d495-456d-b2cf-84f9fd718442
 VITE_SHUTTER_EON_PUBKEY=0x0e6493bbb4ee8b19aa9b70367685049ff01dc9382c46aed83f8bc07d2a5ba3e6030bd83b942c1fd3dff5b79bef3b40bf6b666e51e7f0be14ed62daaffad47435265f5c9403b1a801921981f7d8659a9bd91fe92fb1cf9afdb16178a532adfaf51a237103874bb03afafe9cab2118dae1be5f08a0a28bf488c1581e9db4bc23ca
 VITE_ENV=develop
 VITE_MIXPANEL_TOKEN=2ec6cd1b19e790f45cc9a9bb83980c8d
+VITE_ALCHEMY_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

.eslintrc-auto-import.json

@@ -120,6 +120,9 @@
     "useEmailFetchClient": true,
     "useStatement": true,
     "useMixpanel": true,
-    "usePayment": true
+    "useBalances": true,
+    "useAccount": true,
+    "usePayment": true,
+    "useChangeNetwork": true
   }
 }

package.json

@@ -36,8 +36,8 @@
     "@ethersproject/strings": "^5.7.0",
     "@ethersproject/units": "^5.7.0",
     "@ethersproject/wallet": "^5.7.0",
-    "@headlessui-float/vue": "^0.12.0",
-    "@headlessui/vue": "^1.7.16",
+    "@headlessui-float/vue": "^0.13.0",
+    "@headlessui/vue": "^1.7.17",
     "@pusher/push-notifications-web": "^1.1.0",
     "@sentry/vite-plugin": "^2.10.1",
     "@sentry/vue": "^7.80.1",
@@ -54,6 +54,7 @@
     "graphql-tag": "^2.12.6",
     "js-sha256": "^0.10.1",
     "jsonexport": "^3.2.0",
+    "kubo-rpc-client": "^3.0.2",
     "lodash": "^4.17.21",
     "minisearch": "^6.2.0",
     "mixpanel-browser": "^2.48.1",

src/assets/css/main.scss

@@ -19,6 +19,9 @@
   --header-bg: #1c1b20;
   --block-bg: transparent;
   --shadow-color: rgba(255, 255, 255, 0.036);
+  --border-color-soft: rgb(45, 45, 45, 0.6);
+  --border-color-subtle: rgb(45, 45, 45, 0.32);
+  --border-color-faint: rgb(45, 45, 45, 0.12);
 }
 
 [data-color-scheme='light'] {
@@ -32,6 +35,9 @@
   --header-bg: white;
   --block-bg: transparent;
   --shadow-color: #0001;
+  --border-color-soft: rgb(224, 224, 224, 0.6);
+  --border-color-subtle: rgb(224, 224, 224, 0.32);
+  --border-color-faint: rgb(224, 224, 224, 0.12);
 }
 
 @layer base {

src/assets/css/tune.scss

@@ -48,6 +48,10 @@
 .tune-button {
   @apply h-[46px] cursor-pointer text-skin-link rounded-full bg-transparent border border-skin-border px-[22px] hover:border-skin-text;
 
+  &.disabled {
+    @apply border-skin-border bg-skin-bg text-skin-border cursor-not-allowed;
+  }
+
   &.primary {
     @apply border-skin-primary bg-skin-primary text-white hover:brightness-95;
 
@@ -56,16 +60,20 @@
     }
   }
 
-  &.danger {
-    @apply text-red hover:border-red;
+  &.white-border {
+    @apply border-white/30  hover:border-white;
 
     &:disabled {
-      @apply text-skin-border hover:border-skin-border;
+      @apply border-white text-white opacity-40;
     }
   }
 
-  &.disabled {
-    @apply border-skin-border bg-skin-bg text-skin-border cursor-not-allowed;
+  &.danger {
+    @apply text-red hover:border-red border-red/40;
+
+    &:disabled {
+      @apply text-skin-border hover:border-skin-border;
+    }
   }
 }
 
@@ -149,7 +157,7 @@
 }
 
 .tune-tag {
-  @apply rounded-md border border-skin-border bg-skin-border px-2 py-1 text-sm text-skin-text;
+  @apply rounded-lg border border-[--border-color-soft] bg-[--border-color-subtle] px-[6px] py-[3px] text-sm text-skin-text;
 }
 
 .tune-menu-list {
@@ -168,18 +176,6 @@
   @apply rounded-md border bg-skin-header-bg shadow-lg;
 }
 
-.tune-modal-panel {
-  @apply rounded-md border border-skin-border bg-skin-bg p-4 sm:w-[440px];
-}
-
-.tune-modal-backdrop {
-  @apply bg-skin-border opacity-70;
-}
-
-.tune-modal-title {
-  @apply text-center text-lg font-medium text-skin-text;
-}
-
 .tune-input-checkbox {
   @apply form-checkbox h-[20px] w-[20px] rounded-lg border-skin-text bg-skin-bg text-skin-primary focus:ring-0 focus:ring-offset-0 focus-visible:ring-offset-1 focus-visible:ring-offset-skin-text;
 }

src/components/BaseBreadcrumbs.vue

@@ -5,16 +5,18 @@ defineProps<{
 </script>
 
 <template>
-  <div class="flex items-center">
+  <div class="flex items-center overflow-x-scroll no-scrollbar">
     <div v-for="(page, i) in pages" :key="i" class="flex items-center">
       <router-link v-if="!page.current" :to="page.to" class="flex items-center">
-        <span class="text-skin-link whitespace-nowrap">{{ page.name }}</span>
+        <span class="text-skin-link truncate max-w-[180px]">{{
+          page.name
+        }}</span>
       </router-link>
       <div v-else class="flex cursor-default items-center">
         <span
-          class="text-skin-link opacity-40"
+          class="text-skin-link opacity-40 truncate max-w-[180px]"
           :class="{
-            'line-clamp-1 max-w-[380px]': page.id === 'proposal-title'
+            '!max-w-[320px]': page.id === 'proposal-title'
           }"
           >{{ page.name }}</span
         >

src/components/BaseMenu.vue

@@ -27,6 +27,7 @@ const emit = defineEmits(['select']);
 <template>
   <Menu as="div" class="inline-block h-full text-left">
     <Float
+      portal
       enter="transition ease-out duration-100"
       enter-from="transform opacity-0 scale-95"
       enter-to="transform opacity-100 scale-100"

src/components/BaseSearch.vue

@@ -53,7 +53,7 @@ watch(
     />
     <i-ho-x-circle
       v-if="modelValue"
-      class="mr-[6px] flex-shrink-0 cursor-pointer text-[16px] text-skin-link"
+      class="mr-[6px] flex-shrink-0 cursor-pointer text-[16px] ml-3 text-skin-link"
       @click="clearInput"
     />
     <slot name="after" class="flex-shrink-0" />

src/components/BaseUser.vue

@@ -11,6 +11,7 @@ const props = defineProps<{
   hideAvatar?: boolean;
   hideUsername?: boolean;
   widthClass?: string;
+  textClass?: string;
 }>();
 
 const { getUsername } = useUsername();
@@ -31,6 +32,7 @@ const spaceMembers = computed(() => {
     :profile="profile"
     :proposal="proposal"
     :space="space"
+    class="flex"
   >
     <BaseLink
       :link="
@@ -47,6 +49,7 @@ const spaceMembers = computed(() => {
         <span
           v-if="!hideUsername"
           class="w-full cursor-pointer truncate text-skin-link"
+          :class="textClass"
         >
           {{ getUsername(address, profile) }}
         </span>

src/components/InputComboboxToken.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { Token } from '@/helpers/alchemy';
+
+defineProps<{
+  label: string;
+  network: string;
+  tokens: Token[];
+  amount: string;
+  selectedToken?: Token;
+  loading?: boolean;
+  error?: string;
+}>();
+
+defineEmits(['update:selectedToken', 'addCustomToken', 'update:amount']);
+
+const { web3Account } = useWeb3();
+const { modalAccountOpen } = useModal();
+
+const isTokenModalOpen = ref(false);
+
+function handleOpenTokenModal() {
+  if (!web3Account.value) return (modalAccountOpen.value = true);
+  isTokenModalOpen.value = true;
+}
+</script>
+
+<template>
+  <TuneInput
+    :model-value="amount"
+    :label="label"
+    :error="error"
+    always-show-error
+    placeholder="0.0"
+    type="number"
+    @update:model-value="$emit('update:amount', $event)"
+  >
+    <template #after>
+      <button
+        type="button"
+        label="Token"
+        class="-mr-[23px] h-[40px] bg-[--border-color-subtle] hover:bg-[--border-color-soft] rounded-r-full"
+        @click="handleOpenTokenModal"
+      >
+        <div
+          class="flex flex-row space-x-2 items-center pr-[12px] pl-3 max-w-[150px]"
+        >
+          <template v-if="loading">
+            <TuneLoadingSpinner />
+          </template>
+          <template v-else-if="selectedToken?.contractAddress">
+            <AvatarToken :address="selectedToken.contractAddress" size="20" />
+            <span v-if="selectedToken" class="text-skin-link truncate">{{
+              selectedToken.symbol
+            }}</span>
+          </template>
+          <template v-else>
+            <div>Select token</div>
+          </template>
+          <i-ho-chevron-down class="text-sm text-skin-link shrink-0" />
+        </div>
+      </button>
+    </template>
+  </TuneInput>
+
+  <teleport to="#modal">
+    <ModalTokens
+      :selected-token="selectedToken"
+      :tokens="tokens"
+      :open="isTokenModalOpen"
+      :network="network"
+      disable-base-tokens
+      @update:selected-token="$emit('update:selectedToken', $event)"
+      @add-custom-token="$emit('addCustomToken', $event)"
+      @close="isTokenModalOpen = false"
+    />
+  </teleport>
+</template>