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

@@ -119,6 +119,8 @@
     "useEmailSubscription": true,
     "useEmailFetchClient": true,
     "useStatement": true,
-    "useMixpanel": true
+    "useMixpanel": true,
+    "useBalances": true,
+    "useAccount": true
   }
 }

package.json

@@ -44,7 +44,7 @@
     "@shutter-network/shutter-crypto": "1.0.1",
     "@snapshot-labs/lock": "^0.2.2",
     "@snapshot-labs/pineapple": "^1.1.0",
-    "@snapshot-labs/snapshot.js": "^0.9.7",
+    "@snapshot-labs/snapshot.js": "^0.9.8",
     "@vue/apollo-composable": "4.0.0-beta.11",
     "@vueuse/core": "^10.6.1",
     "@vueuse/head": "^2.0.0",

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 {
@@ -58,6 +64,12 @@
     scrollbar-gutter: stable;
   }
 
+  *,
+  ::before,
+  ::after {
+    @apply border-skin-border;
+  }
+
   body {
     overflow-x: hidden;
   }
@@ -151,18 +163,6 @@ a,
   opacity: 0.6 !important;
 }
 
-// TODO: Remove this and use border-skin-border in the templates. Tailwind has
-// dozens of modifiers (md:, sm:, hover: etc.) which would all need to be listed here.
-.border,
-.border-md,
-.border-lg,
-.border-b,
-.border-t,
-.border-r,
-.border-l {
-  @apply border-skin-border;
-}
-
 input[type='number']::-webkit-inner-spin-button,
 input[type='number']::-webkit-outer-spin-button {
   -webkit-appearance: none;

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 {
@@ -169,15 +177,11 @@
 }
 
 .tune-modal-panel {
-  @apply rounded-md border border-skin-border bg-skin-bg p-4 sm:w-[440px];
+  @apply rounded-[20px] bg-skin-bg;
 }
 
 .tune-modal-backdrop {
-  @apply bg-skin-border opacity-70;
-}
-
-.tune-modal-title {
-  @apply text-center text-lg font-medium text-skin-text;
+  @apply bg-black opacity-40;
 }
 
 .tune-input-checkbox {

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/ButtonSelectToken.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { Token } from '@/helpers/alchemy';
+
+const props = defineProps<{
+  network: string;
+  tokens: Token[];
+  selectedToken?: Token;
+}>();
+
+defineEmits(['update:selectedToken', 'addCustomToken']);
+
+const isTokenModalOpen = ref(false);
+</script>
+
+<template>
+  <TuneButtonSelect
+    label="Token"
+    class="truncate"
+    @select="isTokenModalOpen = true"
+  >
+    <div
+      v-if="selectedToken?.contractAddress"
+      class="flex flex-row space-x-2 pr-2"
+    >
+      <AvatarToken :address="selectedToken.contractAddress" />
+      <span v-if="selectedToken" class="truncate">{{
+        selectedToken.name
+      }}</span>
+      <span v-if="selectedToken"> ({{ selectedToken.symbol }}) </span>
+    </div>
+    <span v-else>Select token</span>
+  </TuneButtonSelect>
+  <teleport to="#modal">
+    <ModalTokens
+      :selected-token="selectedToken"
+      :tokens="tokens"
+      :open="isTokenModalOpen"
+      :network="network"
+      @update:selected-token="$emit('update:selectedToken', $event)"
+      @add-custom-token="$emit('addCustomToken', $event)"
+      @close="isTokenModalOpen = false"
+    />
+  </teleport>
+</template>

src/components/InputComboboxToken.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { Token } from '@/helpers/alchemy';
+
+defineProps<{
+  label: string;
+  network: string;
+  tokens: Token[];
+  amount: string;
+  selectedToken?: Token;
+  loading?: boolean;
+}>();
+
+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"
+    placeholder="0.0"
+    type="number"
+    @update:model-value="$emit('update:amount', $event)"
+  >
+    <template #after>
+      <button
+        type="button"
+        label="Token"
+        class="-mr-4 h-full 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>