Merge branch 'master' into gerhard/uma-2153-ui-render-the-tenderly-si…

…mulation-button-in-the-tx-builder

package.json

@@ -42,9 +42,9 @@
     "@sentry/vite-plugin": "^2.10.1",
     "@sentry/vue": "^7.80.1",
     "@shutter-network/shutter-crypto": "1.0.1",
-    "@snapshot-labs/lock": "^0.2.1",
+    "@snapshot-labs/lock": "^0.2.2",
     "@snapshot-labs/pineapple": "^1.1.0",
-    "@snapshot-labs/snapshot.js": "^0.9.5",
+    "@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/App.vue

@@ -1,6 +1,5 @@
-<script setup>
-const { domain } = useApp();
-const { init, isReady, showSidebar } = useApp();
+<script setup lang="ts">
+const { domain, init, isReady, showSidebar } = useApp();
 const route = useRoute();
 const { restorePendingTransactions } = useTxStatus();
 

src/assets/css/tune.scss

@@ -46,19 +46,31 @@
 }
 
 .tune-button {
-  @apply flex h-[42px] cursor-pointer justify-center rounded-full border border-skin-border px-3 py-2 hover:border-skin-text disabled:cursor-not-allowed;
+  @apply h-[46px] cursor-pointer text-skin-link rounded-full bg-transparent border border-skin-border px-[22px] hover:border-skin-text;
 
   &.primary {
-    @apply border-skin-primary bg-skin-primary text-white;
+    @apply border-skin-primary bg-skin-primary text-white hover:brightness-95;
+
+    &:disabled {
+      @apply border-skin-primary bg-skin-primary text-white opacity-40;
+    }
+  }
+
+  &.danger {
+    @apply text-red hover:border-red;
+
+    &:disabled {
+      @apply text-skin-border hover:border-skin-border;
+    }
   }
 
   &.disabled {
-    @apply border-skin-border bg-skin-bg text-skin-border;
+    @apply border-skin-border bg-skin-bg text-skin-border cursor-not-allowed;
   }
 }
 
 .tune-button-select {
-  @apply relative flex w-full justify-start truncate pl-3 pr-5 text-left text-base text-skin-link rounded-full;
+  @apply relative h-[42px] w-full justify-start truncate pl-3 pr-5 text-left text-base text-skin-link rounded-full;
 
   &.disabled {
     @apply cursor-not-allowed border-skin-border;

src/components/BaseCombobox.vue

@@ -57,7 +57,7 @@ watch(
         class="absolute inset-y-0 right-1 flex items-center px-2 focus:outline-none"
         :class="{ 'cursor-not-allowed': isDisabled }"
       >
-        <i-ho-chevron-down class="text-[14px] text-skin-text" />
+        <i-ho-chevron-down class="text-[14px] text-skin-link" />
       </ComboboxButton>
       <ComboboxOptions
         v-if="items.length > 0"

src/components/BaseListbox.vue

@@ -57,7 +57,7 @@ const selectedItem = computed({
         <span
           class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-[12px]"
         >
-          <i-ho-chevron-down class="text-[14px] text-skin-text" />
+          <i-ho-chevron-down class="text-[14px] text-skin-link" />
         </span>
       </ListboxButton>
       <transition

src/components/BaseMenu.vue

@@ -39,16 +39,16 @@ const emit = defineEmits(['select']);
       :flip="16"
       :z-index="50"
     >
-      <MenuButton class="h-full" as="template">
+      <MenuButton as="template">
         <slot v-if="$slots.button" name="button" />
 
-        <BaseButton v-else class="flex items-center">
+        <TuneButton v-else class="flex items-center">
           {{ selected }}
           <i-ho-chevron-down
-            class="-mr-1 ml-1 text-xs text-skin-text"
+            class="-mr-1 ml-1 text-xs text-skin-link"
             aria-hidden="true"
           />
-        </BaseButton>
+        </TuneButton>
       </MenuButton>
 
       <MenuItems

src/components/BasePopover.vue

@@ -44,10 +44,13 @@ withDefaults(
         :class="[{ 'cursor-not-allowed': disabled }]"
       >
         <slot v-if="$slots.button" name="button" />
-        <BaseButton v-else class="flex items-center">
+        <TuneButton v-else class="flex items-center">
           <span>{{ label }}</span>
-          <i-ho-chevron-down class="ml-2 h-5 w-5" aria-hidden="true" />
-        </BaseButton>
+          <i-ho-chevron-down
+            class="ml-2 h-5 w-5 text-skin-link"
+            aria-hidden="true"
+          />
+        </TuneButton>
       </PopoverButton>
 
       <PopoverPanel

src/components/BaseSkinItem.vue

@@ -10,7 +10,7 @@ defineProps<{
 
 <template>
   <BaseBlock class="cursor-pointer hover:border-skin-text">
-    <BaseButton :class="['mb-2', skin]" primary>{{ skin }}</BaseButton>
+    <TuneButton :class="['mb-2', skin]" primary>{{ skin }}</TuneButton>
     <div class="text-skin-text">
       {{ $tc('inSpaces', [formatCompactNumber(skinsSpacesCount[skin] ?? 0)]) }}
     </div>

src/components/BaseUser.vue

@@ -5,7 +5,7 @@ const { domain } = useApp();
 
 const props = defineProps<{
   address: string;
-  space?: ExtendedSpace;
+  space?: Partial<ExtendedSpace>;
   proposal?: Proposal;
   profile?: Profile;
   hideAvatar?: boolean;

src/components/ButtonFollow.vue

@@ -35,7 +35,7 @@ watch(
     }"
     v-bind="$attrs"
   >
-    <BaseButton
+    <TuneButton
       v-bind="$attrs"
       :loading="loadingFollow === space.id"
       :disabled="isGnosisSafe"
@@ -62,7 +62,7 @@ watch(
           {{ $t('leave') }}
         </span>
       </span>
-    </BaseButton>
+    </TuneButton>
   </div>
   <teleport to="#modal">
     <ModalTerms

src/components/ButtonPlayground.vue

@@ -48,10 +48,10 @@ function clickPlayground() {
 </script>
 
 <template>
-  <BaseButton v-if="big" class="w-full" @click="clickPlayground">
+  <TuneButton v-if="big" class="w-full" @click="clickPlayground">
     {{ $t('settings.testInPlayground') }}
     <i-ho-external-link class="mb-[2px] inline-block text-xs" />
-  </BaseButton>
+  </TuneButton>
 
   <BaseButtonIcon
     v-else

src/components/ButtonShare.vue

@@ -1,6 +1,6 @@
 <template>
   <button
-    class="flex cursor-pointer select-none items-center pr-1 hover:text-skin-link"
+    class="flex cursor-pointer h-full select-none items-center pr-1 hover:text-skin-link"
   >
     <i-ho-upload class="text-base" />
     <span class="ml-1 hidden md:block">{{ $t('share') }}</span>

src/components/ExploreMenuCategories.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import categories from '@/helpers/categories.json';
+import { SPACE_CATEGORIES } from '@/helpers/constants';
 
 const props = defineProps<{
   metrics: Record<string, number>;
@@ -25,16 +25,14 @@ const categoryItems = computed(() => {
         selected: !selected.value
       }
     },
-    ...categories
-      .map(c => ({
-        text: tc(`explore.categories.${c}`),
-        action: c,
-        extras: {
-          count: props.metrics?.[c] || 0,
-          selected: selected.value === c
-        }
-      }))
-      .sort((a, b) => b.extras.count - a.extras.count)
+    ...SPACE_CATEGORIES.map(c => ({
+      text: tc(`explore.categories.${c}`),
+      action: c,
+      extras: {
+        count: props.metrics?.[c] || 0,
+        selected: selected.value === c
+      }
+    })).sort((a, b) => b.extras.count - a.extras.count)
   ];
 });
 
@@ -54,7 +52,7 @@ function selectCategory(c: string) {
     @select="selectCategory"
   >
     <template #button>
-      <BaseButton class="w-full whitespace-nowrap pr-3">
+      <TuneButton class="w-full whitespace-nowrap pr-3">
         <div class="leading-2 flex items-center leading-3">
           <i-ho-view-grid class="mr-2 text-xs" />
           <span v-if="selected">
@@ -63,9 +61,9 @@ function selectCategory(c: string) {
           <span v-else>
             {{ $tc('explore.category') }}
           </span>
-          <i-ho-chevron-down class="ml-1 text-xs text-skin-text" />
+          <i-ho-chevron-down class="ml-1 text-xs text-skin-link" />
         </div>
-      </BaseButton>
+      </TuneButton>
     </template>
     <template #item="{ item }">
       <div class="flex">

src/components/ExploreSpaces.vue

@@ -147,9 +147,9 @@ onMounted(() => {
         "
         class="px-3 text-center md:px-0"
       >
-        <BaseButton class="mt-4 w-full" @click="handleClickMore">
+        <TuneButton class="mt-4 w-full" @click="handleClickMore">
           {{ $t('homeLoadmore') }}
-        </BaseButton>
+        </TuneButton>
       </div>
       <div v-else-if="loadingMoreSpacesHome" class="mt-4 flex h-[46px]">
         <LoadingSpinner class="mx-auto" big />

src/components/InputDate.vue

@@ -17,7 +17,7 @@ const modalDateSelectOpen = ref(false);
 <template>
   <div class="w-full">
     <LabelInput :information="information">{{ title }}</LabelInput>
-    <BaseButton
+    <TuneButton
       v-tippy="{ content: tooltip }"
       class="relative inset-y-0 flex !h-[42px] w-full items-center truncate pl-[44px] pr-3 text-left"
       :class="[disabled ? 'cursor-not-allowed' : 'cursor-pointer']"
@@ -29,7 +29,7 @@ const modalDateSelectOpen = ref(false);
       <i-ho-calendar
         class="absolute left-[16px] -mt-[1px] text-sm text-skin-text"
       />
-    </BaseButton>
+    </TuneButton>
   </div>
   <teleport to="#modal">
     <ModalSelectDate

src/components/InputSelect.vue

@@ -13,7 +13,7 @@ const emit = defineEmits(['select']);
 <template>
   <div class="w-full">
     <LabelInput :information="information">{{ title }}</LabelInput>
-    <BaseButton
+    <TuneButton
       v-tippy="{ content: tooltip }"
       :class="[
         $attrs.class,
@@ -27,8 +27,8 @@ const emit = defineEmits(['select']);
         {{ modelValue }}
       </span>
       <i-ho-chevron-down
-        class="absolute inset-y-[12px] right-[14px] text-xs text-skin-text"
+        class="absolute inset-y-[12px] right-[14px] text-xs text-skin-link"
       />
-    </BaseButton>
+    </TuneButton>
   </div>
 </template>

src/components/MenuLanguages.vue

@@ -21,14 +21,14 @@ const localeItems = computed<{ text: string; action: string }[]>(() => {
 <template>
   <BaseMenu :items="localeItems" @select="selectLang($event)">
     <template #button>
-      <BaseButton
+      <TuneButton
         class="flex !h-[44px] w-full items-center !text-skin-text hover:!text-skin-link"
       >
         <i-ho-globe class="mr-2" />
         {{
           languages[$i18n.locale]?.nativeName ?? languages[$i18n.locale]?.name
         }}
-      </BaseButton>
+      </TuneButton>
     </template>
   </BaseMenu>
 </template>

src/components/MessageWarningHibernated.vue

@@ -36,7 +36,7 @@ onMounted(async () => {
 
     <p v-if="isAuthorized" class="mt-3">
       <router-link :to="{ name: 'spaceSettings' }">
-        <BaseButton> Go to Settings </BaseButton>
+        <TuneButton> Go to Settings </TuneButton>
       </router-link>
     </p>
   </BaseMessageBlock>