feat: Boost (snapshot-labs#4437)

* Fix close network modal

* Reduce decimals

* Use full length for time left and reduce text length

* Remove scroll

* Add boosted indicator to proposals item

* Fix

* Add reload after burn

* Add claim modal and refactor

* Fix

* Refactor

* Fix unconnected

* Handle no user vote

* Add message that boost isn't available voting type

* Fix max amount

* Fix type

* Fix type

* Fix owner design

* Fix time left

* Add nft format

* Cleanup

* Fix uri url

* Fix type

* Add space setting

* Fix strategy

* Fix claim all

* Fix string

* Fix strategy

* Updates

* Fix wrap

* Fix loading

* Refactor

* Change color

* Fixes

* Add claimed success modal

* Fix

* Fix empty web3Address

* Fix background

* Add claim tx

* Add lottery settings

* Fix text

* Add lottery conditions

* Fix modal spacing

* Fix winner amount

* Fix sorting by reward amount

* Fix

* Add whitelist and check

* Add terms modal

* Realtime countdown

* Fix reload when claim ready

* Fix boost modal text

* Fix load balances

* Remove default values and add mainnet network

* Fix token balance

* Update boost contract mainnet

* Update subgraph

* Update subgraph

* Add production whitelist

* Update subgraph

* Update safe contract sepolia

* Remove space from testnet whitelist

* whitelist fabien.eth space

* fix: Demo is currently not supported

* Add constants

* Add reward per winner footer

* Add block footer component

* Add fees footer

* Hide settings

* Change color

* Increase to 3 visible boosts

* Lighten up boost color

* Undo spinner changes

* Don't show validation when loading

* Revert "Lighten up boost color"

This reverts commit 18dd1a6.

* Revert "Change color"

This reverts commit 73fea79.

* Update boost item design

* Fix token input design

* Fix cancel button color

* Fix close icon position

* Fix

* Fix lottery text

* Fix lottery text

* Add api key

* Add hints and fix text

* Fix disabled listbox

* Fix reward per winner

* Refactor whitelist

* Border color was way to dark on darkmode

* Add message for disabled bribe

* Fixes

* Filter bribe boosts if disabled

* Add winners modal

* Update subgraph

* Add chain id on query

* Fix claimed text

* Fixes

* Fix terms

* Set max to 1024

* Revert "Set max to 1024"

This reverts commit 3eb628c.

* Fix distribution selector

* Fix no winner text

* Fix loading when click vote

* Fix await rewards loading

* Fix boost color

* Fix lottery text length and add tooltip

* Rename

* Fix item

* Fix winners modal

* Fix margin

* Get fees from contract

* Fix boost items style

* Fixes

* Fixes

* Fixes

* Fixes

* Fixes

* Fix winner profiles

* Fix format

* Add team to whitelist

* Fix lottery reward

* Limit max winners

* Fix number winners

* Fix amount

* Fix stars higher resolution

* Back to orange

* Add view less

* Remove type

* Fix terms text

* Add fee to amount

* Add docs link

* Fix docs link

* Fix devider

* Add close button to success claim modal

* Change slot name

* Refactor block components to use TuneBlock

* Fix padding

* Fix padding

* Fixes

* Fix tooltip

* Remove core

* Fix explorer network

* Fix votes choice more to center and refactor

* Fix claim item

* Use counter instead of tag

* Remove boost from space settings

* Add lottery limit

* Update sepolia boost contract

* Fix lottery limit

* Fix decimals

* Disable mainnet

* Fix lottery and limits text

* Fix terms text

* Fix boost filter

* Fix styling

* Fix manage boost text

* Remove padding

* Move reason icon next to choice

* Fix

* Fix

* Fix delay

* Fix tooltip in modal

* Fix padding

* Fix loading

* Fix border colors

* Don't show border if no eligible

* Add text to shutter and invalid choice

* Fix votes modal loading spacing

* Fix boost item id text

* Fix tooltip boost id

* Fixes

* Fix boost id

* Fix validate negative numbers

* Move block

* Fix lottery wait for onchain epoch

* Fix settings proposal page

* Fix naming

* Fix spacing

* Hide bg overflow

* Fix checkbox and radio colors

* Fix loading

* Fix proposal item boosts indicator

* Prepare for zero fees

* Fix token input overflow

* Update guard URL

* Catch winners query

* Fix formatting and math

* Update guard address

* Add lottery condition

* Fix claiming

* Fix responsive

* Add Wan's space

* Fix stars color

* Fix

* Update settings

* Fix loading

* Fix tune button

* Fix lottery epoch

* Fix showing infinity for amount to win

* Disable TOS

* Remove calculation for displayed reward and add tooltip explanation

* Remove redundant vif

* Remove redundant vif

* Make sidebar sticky

* Fix margin for action bar

* Hide input if not checked

* Fixes to boost item management

* Add loading for withdraw

* Remove base token filter

* Refactor deposit block into component

* Filter excluded tokens

* Refactor and check custom tokens

* Remove TODO

* Disable boost with shutter and show message

* Add warning when proposal is already closed

* Update contract sepolia

* Fixes

* Improve style of message

* Check proposal privacy not space

* Fix loading on boost create

* Only show message for whitelisted spaces

* Fix text

* Cleanup

* Remove redundant title

* Fix loading winners text display

* Fix input error condition

* Enable mainnet

* Fix WC and TuneModal

* Cleanup

* Show timer and refactor

* Fix and add TODOs

* Fix align and add message to docs

* Add redirect

* Fixes

* Fix winners dropdown item

---------

Co-authored-by: Less <[email protected]>

.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=ombBQyf580z-jx2EVQgJu4eTjePU-a2z

.eslintrc-auto-import.json

@@ -120,6 +120,10 @@
     "useEmailFetchClient": true,
     "useStatement": true,
     "useMixpanel": true,
-    "usePayment": true
+    "useBalances": true,
+    "useAccount": true,
+    "usePayment": true,
+    "useChangeNetwork": true,
+    "useBoost": 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",
@@ -55,6 +55,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

@@ -15,10 +15,13 @@
   --text-color: #8b949e;
   --link-color: #ffffff;
   --heading-color: #ffffff;
-  --border-color: #2d2d2d;
+  --border-color: #343434;
   --header-bg: #1c1b20;
   --block-bg: transparent;
   --shadow-color: rgba(255, 255, 255, 0.036);
+  --border-color-soft: rgba(45, 45, 45, 0.8);
+  --border-color-subtle: rgba(45, 45, 45, 0.5);
+  --border-color-faint: rgba(45, 45, 45, 0.3);
 }
 
 [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 {
@@ -56,6 +62,7 @@
 
   html {
     scrollbar-gutter: stable;
+    overflow: visible !important;
   }
 
   *,

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;
+    }
   }
 }
 
@@ -137,7 +145,7 @@
 }
 
 .tune-icon-hint {
-  @apply text-sm hover:text-skin-link;
+  @apply text-xs hover:text-skin-link;
 }
 
 .tune-error-text {
@@ -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,24 +176,12 @@
   @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;
+  @apply form-checkbox h-[20px] w-[20px] rounded-lg border-skin-text text-skin-text focus:ring-0 focus:ring-offset-0 focus-visible:ring-offset-1 focus-visible:ring-offset-skin-text;
 }
 
 .tune-input-radio {
-  @apply form-radio h-[20px] w-[20px] rounded-full 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;
+  @apply form-radio h-[20px] w-[20px] rounded-full border-skin-text text-skin-text focus:ring-0 focus:ring-offset-0 focus-visible:ring-offset-1 focus-visible:ring-offset-skin-text;
 }
 
 .tune-form-array-objects {