Merge branch 'master' into safesnap_connext_integration

.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

@@ -38,15 +38,15 @@
     "@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",
     "@shutter-network/shutter-crypto": "1.0.1",
     "@snapshot-labs/lock": "^0.2.3",
     "@snapshot-labs/pineapple": "^1.1.0",
-    "@snapshot-labs/snapshot.js": "^0.11.3",
+    "@snapshot-labs/snapshot.js": "^0.11.8",
     "@vue/apollo-composable": "4.0.0-beta.11",
     "@vueuse/core": "^10.6.1",
     "@vueuse/head": "^2.0.0",
@@ -57,6 +57,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",
     "memoizee": "^0.4.15",
     "minisearch": "^6.2.0",

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 {