Another dev/UI feedback

src/assets/css/tailwind.css

@@ -75,6 +75,14 @@
     font-variant-ligatures: no-contextual;
   }
 
+  .button-gradient {
+    background: linear-gradient(258.76deg, #05dbf3 6.02%, #0468be 94.84%);
+  }
+
+  .button-gradient:hover {
+    background: linear-gradient(258.76deg, #05dbf3 30.02%, #0468be 94.84%);
+  }
+
   .text-gradient {
     @apply bg-blue-500;
 

src/assets/data/contracts/alfajores.json

@@ -69,7 +69,7 @@
   "WeightedPoolFactory": "0x997252b17F61fFc6Ca2fDDd7fa1Cb0cdb98f202D",
   "YearnLinearPoolFactory": "",
   "Multicall": "0xca11bde05977b3631167028862be2a173976ca11",
-  "SimpleMinter": "0xEc9EC0e51DBfA5aB969d91313C64f7eEF0348272",
-  "RFNFT": "0x1D2540EFe05f5b53abABb7Be1780B370Bd3407aE",
-  "RFP": "0x1b5a1fDdd235d9a4c73F061318E017Bb52aCD444"
+  "SimpleMinter": "0x236C4B59f22697aC22C8AC3A6442eBD6f2af9dbF",
+  "RFNFT": "0x976c8244061CC363d1e72d0F1c0B4DBe9a78d483",
+  "RFP": "0x8431584b4DEfaB5f4aDd6A4221161F2Cb6823DE9"
 }

src/components/_global/BalBtn/BalBtn.vue

@@ -112,14 +112,16 @@ const bgGradientClasses = computed(() => {
     fromColor = 'pink';
     toColor = 'yellow';
   } else if (props.color === 'gradient-blue-light') {
-    return 'bg-gradient-to-tr from-refi-text to-light-blue hover:from-blue-600 hover:to-blue-400';
+    return 'transition-colors button-gradient ';
   }
   if (props.disabled) {
-    return `bg-gray-300 dark:bg-gray-700 text-white dark:text-gray-500`;
+    return `bg-complementary-b dark:complementary-b text-white `;
   }
   if (props.loading) {
     return `bg-gradient-to-tr ${loadingFrom(fromColor)} ${loadingTo(toColor)}`;
   }
+  if (props.color === 'gradient') return 'transition-colors button-gradient ';
+
   return ` bg-gradient-to-tr ${gradientFrom(fromColor)} ${gradientTo(
     toColor
   )} ${hoverFrom(fromColor)} ${hoverTo(toColor)} transition-colors`;
@@ -257,6 +259,7 @@ const iconColor = computed(() => {
 .bal-btn {
   @apply overflow-hidden tracking-tight;
 
+  padding: 8px !important;
   font-variation-settings: 'wght' 500;
   transition: all 0.2s ease;
   text-decoration: none !important;

src/components/_global/BalDetailsTable/BalDetailsTable.vue

@@ -21,7 +21,12 @@ const { upToLargeBreakpoint } = useBreakpoints();
 </script>
 
 <template>
-  <BalCard class="overflow-x-auto" :square="upToLargeBreakpoint" noPad>
+  <BalCard
+    class="overflow-x-auto"
+    :square="upToLargeBreakpoint"
+    :noBorder="upToLargeBreakpoint"
+    noPad
+  >
     <template v-for="(row, i) in tableData" :key="i">
       <div v-if="row" class="table-row">
         <div class="table-row-title">
@@ -54,7 +59,7 @@ const { upToLargeBreakpoint } = useBreakpoints();
 }
 
 .table-row:first-child {
-  @apply font-semibold bg-gray-50 dark:bg-gray-800;
+  @apply font-semibold bg-white  dark:bg-gray-800;
 }
 
 .table-row:last-child {

src/components/_global/BalTable/BalTable.vue

@@ -249,10 +249,10 @@ watch([() => props.data, () => props.isLoading], ([newData]) => {
                 ? 'cursor-pointer'
                 : '',
               column.sortKey && currentSortColumn !== column.id
-                ? 'text-gray-800 hover:text-purple-600 focus:text-blue-500 dark:text-gray-100 dark:hover:text-yellow-500 dark:focus:text-yellow-500 transition-colors'
+                ? 'text-gray-800 hover:text-accent-refi focus:text-refi-text dark:text-gray-100 dark:hover:text-accent-refi dark:focus:text-yellow-500 transition-colors'
                 : '',
               currentSortColumn === column.id && currentSortDirection
-                ? 'text-blue-600 hover:text-blue-500 focus:text-purple-600 dark:text-blue-400 dark:hover:text-blue-600 dark:focus:text-blue-600 transition-colors'
+                ? 'text-refi-text hover:text-blue-500 focus:text-accent-refi dark:text-blue-400 dark:hover:text-refi-text dark:focus:text-refi-text-dark transition-colors'
                 : '',
               !square ? 'rounded-t-lg' : '',
             ]"

src/components/_global/BalTable/TotalsRow.vue

@@ -36,7 +36,7 @@ function getHorizontalStickyClass(index: number) {
         :class="[
           getHorizontalStickyClass(0),
           isColumnStuck ? 'isSticky' : '',
-          'text-center p-6 bg-white dark:bg-gray-850 border-t dark:border-gray-900 align-center',
+          'p-6 bg-white dark:bg-gray-850 border-t dark:border-gray-900 align-center',
         ]"
       >
         <span class="font-semibold text-left"> Total </span>

src/components/_global/BalTabs/BalTabs.vue

@@ -22,6 +22,7 @@ function isActiveTab(tab: Tab): boolean {
 }
 
 function onClick(tab: Tab) {
+  console.debug(tab.value);
   emit('selected', tab.value);
   emit('update:modelValue', tab.value);
 }
@@ -34,9 +35,9 @@ const containerClasses = computed(() => {
 
 function stateClasses(tab: Tab): Record<string, boolean> {
   return {
-    'border-b-2 border-blue-600 dark:border-blue-400 text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:border-blue-500 font-semibold':
+    'border-b-2 border-blue-600 dark:border-blue-400 text-refi-text dark:text-refi-text hover:text-blue-500 dark:border-blue-500 font-semibold':
       isActiveTab(tab),
-    'hover:text-purple-600 dark:hover:text-yellow-500 dark:border-gray-700 transition-colors':
+    'hover:text-accent-refi dark:hover:text-accent-refi dark:border-gray-700 transition-colors':
       !isActiveTab(tab),
   };
 }

src/components/contextual/pages/dashboard/Cards/RefiProfileCard.vue

@@ -10,9 +10,10 @@ const { isMobile, bp } = useBreakpoints();
 const { NFTData, isLoading, MintNFT, isMintingNFT } = useRFNFT();
 const { isWalletReady } = useWeb3();
 
-const nftImageSrc = computed(() => NFTData.value?.imageData || NFTImage);
-
-//TODO: Remove this ugly method and use a better one like all the info in the NFTData :)
+const nftImageSrc = computed(() => NFTData.value?.imageData);
+const hasNFT = computed(
+  () => !!NFTData.value?.imageData && isWalletReady.value
+);
 const levels = ref([
   { nextLevel: '100', votes: 1 },
   { nextLevel: '250', votes: 10 },
@@ -26,7 +27,12 @@ const levels = ref([
   <template v-if="isMobile">
     <BalCard v-if="bp === 'xs'">
       <div class="flex flex-col gap-5 justify-center items-start px-4 h-fit">
-        <img :src="nftImageSrc" class="w-full h-full rounded-md bg-slate-500" />
+        <img
+          :src="hasNFT ? nftImageSrc : NFTImage"
+          :class="`w-full h-full rounded-md bg-slate-500 ${
+            !hasNFT && 'filter grayscale'
+          }`"
+        />
         <div class="flex flex-col gap-10 w-full">
           <div class="flex flex-col gap-4">
             <h3 v-if="!isWalletReady" class="self-start text-lg">
@@ -80,7 +86,12 @@ const levels = ref([
     </BalCard>
     <BalCard v-else>
       <div class="flex flex-row gap-5 justify-center items-start px-4 h-80">
-        <img :src="nftImageSrc" class="w-48 h-full rounded-md bg-slate-500" />
+        <img
+          :src="hasNFT ? nftImageSrc : NFTImage"
+          :class="`w-48 h-full rounded-md bg-slate-500 ${
+            !hasNFT && 'filter grayscale'
+          }`"
+        />
         <div class="flex flex-col gap-10 w-full">
           <div class="flex flex-col gap-4">
             <h3 v-if="!isWalletReady" class="self-start text-lg">
@@ -139,8 +150,10 @@ const levels = ref([
         class="flex flex-row gap-8 justify-center items-center h-full h-[265px]"
       >
         <img
-          :src="nftImageSrc"
-          class="rounded-md h-[224px] w-[168px] bg-slate-500"
+          :src="hasNFT ? nftImageSrc : NFTImage"
+          :class="`rounded-md h-[224px] w-[168px] bg-slate-500 ${
+            !hasNFT && 'filter grayscale'
+          }`"
         />
         <div class="flex flex-col gap-6 w-full">
           <div class="flex flex-col gap-4">

src/components/contextual/pages/dashboard/Cards/WeeklyCard.vue

@@ -7,6 +7,30 @@ type Props = {
   weeklyVolume: number;
 };
 
+const WeeklyTiers = [
+  { level: 1, volume: 0, points: 0 },
+  { level: 2, volume: 5, points: 5 },
+  { level: 3, volume: 250, points: 10 },
+  { level: 4, volume: 1000, points: 20 },
+  { level: 5, volume: 2500, points: 35 },
+  { level: 6, volume: 5000, points: 50 },
+];
+const currentWeeklyTier = computed(() => {
+  const currentTier = WeeklyTiers.find(
+    tier => props.weeklyVolume >= tier.volume
+  );
+  return currentTier ? currentTier : WeeklyTiers[0];
+});
+
+const nextWeeklyTier = computed(() => {
+  const nextTierIndex = WeeklyTiers.findIndex(
+    tier => props.weeklyVolume < tier.volume
+  );
+  return nextTierIndex !== -1
+    ? WeeklyTiers[nextTierIndex]
+    : WeeklyTiers[WeeklyTiers.length - 1];
+});
+
 const props = defineProps<Props>();
 const { toFiatLabel } = useNumbers();
 
@@ -42,7 +66,14 @@ const { isMobile, upToSmallBreakpoint } = useBreakpoints();
               <p v-else class="text-xl">-</p>
             </div>
 
-            <div class="w-full h-10 border-complementary-b border-t-[1px]" />
+            <div
+              class="flex justify-center items-center w-full h-10 border-complementary-b border-t-[1px]"
+            >
+              <p class="w-full text-xs text-center text-complementary">
+                Tier {{ currentWeeklyTier.level }}: +
+                {{ currentWeeklyTier.points }} Points
+              </p>
+            </div>
           </div>
           <div
             class="flex flex-col justify-center items-center pt-5 w-full rounded-md border-complementary-b border-[1px]"
@@ -53,10 +84,20 @@ const { isMobile, upToSmallBreakpoint } = useBreakpoints();
               <h4 class="text-complementary text-[10px]">
                 Volume for next tier
               </h4>
-              <p class="text-xl">-</p>
+              <p v-if="!props.isLoading" class="text-xl">
+                {{ toFiatLabel(nextWeeklyTier.volume) }}
+              </p>
+              <p v-else class="text-xl">-</p>
             </div>
 
-            <div class="w-full h-10 border-complementary-b border-t-[1px]" />
+            <div
+              class="flex justify-center items-center w-full h-10 border-complementary-b border-t-[1px]"
+            >
+              <p class="w-full text-xs text-center text-complementary">
+                Tier {{ nextWeeklyTier.level }}: +{{ nextWeeklyTier.points }}
+                Points
+              </p>
+            </div>
           </div>
         </div>
       </div>
@@ -93,7 +134,14 @@ const { isMobile, upToSmallBreakpoint } = useBreakpoints();
               <p v-else class="text-xl">-</p>
             </div>
 
-            <div class="w-full h-10 border-complementary-b border-t-[1px]" />
+            <div
+              class="flex justify-center items-center w-full h-10 border-complementary-b border-t-[1px]"
+            >
+              <p class="w-full text-xs text-center text-complementary">
+                Tier {{ currentWeeklyTier.level }}: +
+                {{ currentWeeklyTier.points }} Points
+              </p>
+            </div>
           </div>
           <div
             class="flex flex-col justify-center items-center pt-5 w-full rounded-md border-complementary-b border-[1px]"
@@ -104,10 +152,20 @@ const { isMobile, upToSmallBreakpoint } = useBreakpoints();
               <h4 class="text-complementary text-[10px]">
                 Volume for next tier
               </h4>
-              <p class="text-xl">-</p>
+              <p v-if="!props.isLoading" class="text-xl">
+                {{ toFiatLabel(nextWeeklyTier.volume) }}
+              </p>
+              <p v-else class="text-xl">-</p>
             </div>
 
-            <div class="w-full h-10 border-complementary-b border-t-[1px]" />
+            <div
+              class="flex justify-center items-center w-full h-10 border-complementary-b border-t-[1px]"
+            >
+              <p class="w-full text-xs text-center text-complementary">
+                Tier {{ nextWeeklyTier.level }}: +{{ nextWeeklyTier.points }}
+                Points
+              </p>
+            </div>
           </div>
         </div>
       </div>
@@ -145,8 +203,14 @@ const { isMobile, upToSmallBreakpoint } = useBreakpoints();
               </p>
               <p v-else class="text-xl">-</p>
             </div>
-
-            <div class="w-full h-10 border-complementary-b border-t-[1px]" />
+            <div
+              class="flex justify-center items-center w-full h-10 border-complementary-b border-t-[1px]"
+            >
+              <p class="w-full text-xs text-center text-complementary">
+                Tier {{ currentWeeklyTier.level }}: +
+                {{ currentWeeklyTier.points }} Points
+              </p>
+            </div>
           </div>
           <div
             class="flex flex-col justify-center items-center pt-5 w-full rounded-md border-complementary-b border-[1px]"
@@ -157,10 +221,20 @@ const { isMobile, upToSmallBreakpoint } = useBreakpoints();
               <h4 class="text-complementary text-[10px]">
                 Volume for next tier
               </h4>
-              <p class="text-xl">-</p>
+              <p v-if="!props.isLoading" class="text-xl">
+                {{ toFiatLabel(nextWeeklyTier.volume) }}
+              </p>
+              <p v-else class="text-xl">-</p>
             </div>
 
-            <div class="w-full h-10 border-complementary-b border-t-[1px]" />
+            <div
+              class="flex justify-center items-center w-full h-10 border-complementary-b border-t-[1px]"
+            >
+              <p class="w-full text-xs text-center text-complementary">
+                Tier {{ nextWeeklyTier.level }}: +{{ nextWeeklyTier.points }}
+                Points
+              </p>
+            </div>
           </div>
         </div>
       </div>

src/components/contextual/pages/dashboard/DashboardTable/ClaimsTable.vue

@@ -5,6 +5,8 @@ import { ColumnDefinition } from '@/components/_global/BalTable/types';
 import useNumbers, { FNumFormats } from '@/composables/useNumbers';
 import RFP from '@/assets/images/icons/coins/RFP.svg';
 import { useAllocations } from '@/composables/campaigns/useAllocations';
+import useWeb3 from '@/services/web3/useWeb3';
+import { configService } from '@/services/config/config.service';
 
 /**
  * TYPES
@@ -28,6 +30,7 @@ const { currentAllocation, isLoading, claimReward } = useAllocations();
 watch(currentAllocation, () => {
   console.debug(currentAllocation.value);
 });
+
 /**
  * STATE
  */
@@ -80,8 +83,16 @@ const rewardsData = [
     value: 'NFT XP',
   },
 ];
+const { isWalletReady, isWalletConnecting } = useWeb3();
 
 const { upToLargeBreakpoint } = useBreakpoints();
+const networkName = configService.network.shortName;
+
+const noPoolsLabel = computed(() => {
+  return isWalletReady.value || isWalletConnecting.value
+    ? t('noRewardsToClaim', [networkName])
+    : t('connectYourWallet');
+});
 
 const hasCurrentAllocation = computed(() => {
   return parseInt(currentAllocation.value as string) > 0;
@@ -98,6 +109,7 @@ const hasCurrentAllocation = computed(() => {
     <BalTable
       :columns="columns"
       sticky="both"
+      :noResultsLabel="noPoolsLabel"
       :data="hasCurrentAllocation ? rewardsData : []"
       :isLoading="isLoading"
       skeletonClass="h-24"

src/components/contextual/pages/dashboard/DashboardTable/LiquidityTable.vue

@@ -45,7 +45,7 @@ const defaultPoolActions = [
  */
 const noPoolsLabel = computed(() => {
   return isWalletReady.value || isWalletConnecting.value
-    ? t('noUnstakedInvestments', [networkName])
+    ? t('noInvestments', [networkName])
     : t('connectYourWallet');
 });