Update Date Picker

Author: AlexeyTripleA

packages/frontend/src/app/validator/[hash]/BlocksChart.js

@@ -7,6 +7,7 @@ import { CalendarIcon } from './../../../components/ui/icons'
 import { ErrorMessageBlock } from '../../../components/Errors'
 import { DateRangePicker } from '../../../components/calendar'
 import './TimeframeSelector.scss'
+import './TimeframeMenu.scss'
 import './TabsChart.scss'
 
 const chartConfig = {
@@ -50,10 +51,13 @@ const TimeframeSelector = ({ config, isActive, changeCallback, openStateCallback
     if (typeof openStateCallback === 'function') openStateCallback(menuIsOpen)
   }, [menuIsOpen])
 
+  const calendarHandler = (value) => {
+    // console.log('calendarHandler', value)
+  }
+
   return (
     <div className={`TimeframeSelector ${menuIsOpen ? 'TimeframeSelector--MenuActive' : ''}`}>
       <div className={'TimeframeSelector__Menu TimeframeMenu'}>
-
         <div className={'TimeframeMenu__ValuesContainer'}>
           <div className={'TimeframeMenu__ValuesTitle'}>
             Select a day, period or Timeframe:
@@ -82,6 +86,7 @@ const TimeframeSelector = ({ config, isActive, changeCallback, openStateCallback
             monthsToShow={7}
             noTopNavigation={true}
             noWeekDay={true}
+            changeHandler={calendarHandler}
           />
         </div>
       </div>

packages/frontend/src/app/validator/[hash]/TabsChart.scss

@@ -14,3 +14,21 @@
     }
   }
 }
+
+.TabsChart .TimeframeSelector {
+  &__Button {
+
+  }
+
+  @media screen and (max-width: 555px) {
+    &__Button {
+      top: 10px;
+      right: 10px;
+      z-index: 11;
+
+      &--Active {
+        display: none;
+      }
+    }
+  }
+}

packages/frontend/src/app/validator/[hash]/TimeframeMenu.scss

@@ -0,0 +1,51 @@
+@use '../../../styles/mixins.scss';
+@import '../../../styles/variables.scss';
+
+.TimeframeMenu {
+  padding: 12px;
+  border-radius: 20px;
+
+  &__ValuesContainer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  &__ValuesTitle {
+    font-family: $font-mono;
+    color: #fff;
+    opacity: .5;
+    font-size: 0.75rem;
+  }
+
+  &__Values {
+    display: flex;
+    flex-wrap: nowrap;
+    justify-content: flex-end;
+  }
+
+  &__ValueButton {
+    margin-left: 10px;
+
+    &--Active {
+      background-color: $color-brand-normal !important;
+      color: #fff !important;
+    }
+  }
+
+  &__Calendar {
+    width: 100%;
+    height: 100%;
+  }
+
+  @media screen and (max-width: 555px) {
+    &__Values {
+      flex-wrap: wrap;
+      margin-bottom: -8px;
+    }
+
+    &__ValueButton {
+      margin-bottom: 8px;
+    }
+  }
+}

packages/frontend/src/app/validator/[hash]/TimeframeSelector.scss

@@ -39,52 +39,3 @@
     }
   }
 }
-
-.TimeframeMenu {
-  padding: 12px;
-  border-radius: 20px;
-
-  &__ValuesContainer {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-  }
-
-  &__ValuesTitle {
-    font-family: $font-mono;
-    color: #fff;
-    opacity: .5;
-    font-size: 0.75rem;
-  }
-
-  &__Values {
-    display: flex;
-    flex-wrap: nowrap;
-    justify-content: flex-end;
-  }
-
-  &__ValueButton {
-    margin-left: 10px;
-
-    &--Active {
-      background-color: $color-brand-normal !important;
-      color: #fff !important;
-    }
-  }
-
-  &__Calendar {
-    width: 100%;
-    height: 100%;
-  }
-
-  @media screen and (max-width: 555px) {
-    &__Values {
-      flex-wrap: wrap;
-      margin-bottom: -8px;
-    }
-
-    &__ValueButton {
-      margin-bottom: 8px;
-    }
-  }
-}

packages/frontend/src/app/validator/[hash]/Validator.js

@@ -66,23 +66,20 @@ function Validator ({ hash }) {
 
   useEffect(() => {
     if (!validator.data?.identity) return
-    setTransactions(state => ({ ...state, loading: true }))
 
-    const identifier = validator.data.identity
-    // const identifier = 'HVfqSPfdmiHsrajx7EmErGnV597uYdH3JGhvwpVDcdAT' // test
+    setTransactions(state => ({ ...state, loading: true }))
 
-    Api.getTransactionsByIdentity(identifier, transactions.props.currentPage + 1, pageSize, 'desc')
+    Api.getTransactionsByIdentity(validator.data.identity, transactions.props.currentPage + 1, pageSize, 'desc')
       .then(res => fetchHandlerSuccess(setTransactions, res))
       .catch(err => fetchHandlerError(setTransactions, err))
   }, [validator, transactions.props.currentPage])
 
   useEffect(() => {
     if (!validator.data?.identity) return
-    setTransfers(state => ({ ...state, loading: true }))
 
-    const identifier = validator.data.identity
+    setTransfers(state => ({ ...state, loading: true }))
 
-    Api.getTransfersByIdentity(identifier, transfers.props.currentPage + 1, pageSize, 'desc')
+    Api.getTransfersByIdentity(validator.data.identity, transfers.props.currentPage + 1, pageSize, 'desc')
       .then(res => fetchHandlerSuccess(setTransfers, res))
       .catch(err => fetchHandlerError(setTransfers, err))
   }, [validator, transfers.props.currentPage])
@@ -381,15 +378,15 @@ function Validator ({ hash }) {
                 <Tab isDisabled>Reward Earned</Tab>
               </TabList>
               <TabPanels>
-                  <TabPanel height={'400px'} position={'relative'}>
+                  <TabPanel height={'350px'} position={'relative'}>
                     <BlocksChart
                       blockBorders={false}
                       hash={hash}
                       isActive={activeChartTab === 0}
                       loading={validator.loading}
                     />
                   </TabPanel>
-                  <TabPanel height={'400px'}>
+                  <TabPanel height={'350px'} position={'relative'}>
                     Reward Earned
                   </TabPanel>
               </TabPanels>

packages/frontend/src/components/calendar/DateRangePicker.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import Calendar from 'react-calendar'
 import 'react-calendar/dist/Calendar.css'
 import './DateRangePicker.scss'
@@ -13,11 +13,22 @@ const DateRangePicker = ({
 }) => {
   const [range, setRange] = useState([null, null])
   const [currentMonthIndex, setCurrentMonthIndex] = useState(disableFutureDates ? -monthsToShow : 0)
+  const [showSingleCalendar, setShowSingleCalendar] = useState(window.innerWidth < 600)
   const today = new Date()
 
+  useEffect(() => {
+    const handleResize = () => {
+      setShowSingleCalendar(window.innerWidth < 600)
+    }
+    window.addEventListener('resize', handleResize)
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [])
+
   const generateMonthPairs = () => {
     const months = []
-    for (let i = 0; i < monthsToShow; i += 2) {
+    for (let i = 0; i < monthsToShow; i += showSingleCalendar ? 1 : 2) {
       const date1 = new Date(today.getFullYear(), today.getMonth() + currentMonthIndex + i, 1)
       const date2 = new Date(today.getFullYear(), today.getMonth() + currentMonthIndex + i + 1, 1)
 
@@ -33,6 +44,16 @@ const DateRangePicker = ({
     return months
   }
 
+  // Получаем заголовки для диапазона
+  const getHeaderLabel = (range) => {
+    if (!range[0] || !range[1]) return ['', '']
+
+    const startLabel = range[0].toLocaleString('en-US', { month: 'long', year: 'numeric' })
+    const endLabel = range[1].toLocaleString('en-US', { month: 'long', year: 'numeric' })
+    
+    return [startLabel, endLabel]
+  }
+
   const monthPairs = generateMonthPairs()
 
   const onDateChange = (dates) => {
@@ -44,11 +65,11 @@ const DateRangePicker = ({
   }
 
   const handleNext = () => {
-    setCurrentMonthIndex(prev => prev + 2)
+    setCurrentMonthIndex(prev => prev + (showSingleCalendar ? 1 : 2))
   }
 
   const handlePrev = () => {
-    setCurrentMonthIndex(prev => prev - 2)
+    setCurrentMonthIndex(prev => prev - (showSingleCalendar ? 1 : 2))
   }
 
   const handleSetRange = (start1, end2) => {
@@ -60,19 +81,25 @@ const DateRangePicker = ({
     return false
   }
 
+  // Получаем заголовки на основе текущего выбранного диапазона
+  const [headerStart, headerEnd] = getHeaderLabel(range)
+
   return (
     <div className={'DateRangePicker ' +
       `${className || ''} ` +
       `${noTopNavigation ? 'DateRangePicker--NoTopNavigation' : ''} ` +
       `${noWeekDay ? 'DateRangePicker--NoWeekDay' : ''} `}
     >
+      {/* Заголовки месяцев */}
       <div className={'DateRangePicker__Header'}>
         <div className={'DateRangePicker__HeaderMonth'}>
-          {monthPairs[0].label.split(' - ')[0]}
-        </div>
-        <div className={'DateRangePicker__HeaderMonth'}>
-          {monthPairs[0].label.split(' - ')[1]}
+          {headerStart || monthPairs[0].label.split(' - ')[0]} {/* Отображаем выбранный месяц или месяц по умолчанию */}
         </div>
+        {!showSingleCalendar && (
+          <div className={'DateRangePicker__HeaderMonth'}>
+            {headerEnd || monthPairs[0].label.split(' - ')[1]} {/* Отображаем выбранный месяц или месяц по умолчанию */}
+          </div>
+        )}
       </div>
 
       <div className={'DateRangePicker__Calendar'}>
@@ -82,12 +109,12 @@ const DateRangePicker = ({
           onChange={onDateChange}
           value={range}
           tileDisabled={tileDisabled}
-          showDoubleView={true}
+          showDoubleView={!showSingleCalendar}
         />
       </div>
 
       <div className="DateRangePicker__MonthSelector">
-        <button className={'DateRangePicker__Arrow DateRangePicker__Arrow--left'} onClick={handlePrev}>
+        <button className={'DateRangePicker__Arrow DateRangePicker__Arrow--Left'} onClick={handlePrev}>
           &lt;
         </button>
 
@@ -102,11 +129,11 @@ const DateRangePicker = ({
             onClick={() => handleSetRange(pair.start1, pair.end2)}
             disabled={disableFutureDates && pair.start1 > today}
           >
-            {pair.labelShort}
+            {showSingleCalendar ? pair.labelShort.split(' - ')[0] : pair.labelShort}
           </button>
         ))}
 
-        <button className={'DateRangePicker__Arrow DateRangePicker__Arrow--right'} onClick={handleNext}>
+        <button className={'DateRangePicker__Arrow DateRangePicker__Arrow--Right'} onClick={handleNext}>
           &gt;
         </button>
       </div>

packages/frontend/src/components/calendar/DateRangePicker.scss

@@ -74,10 +74,19 @@ $font-color: #fff;
   }
 
   &__MonthButton {
+    &--Active {
+      background-color: $color-brand-normal;
+    }
   }
 
   &__Arrow {
+    &--Left {
+      margin-right: auto;
+    }
 
+    &--Right {
+      margin-left: auto;
+    }
   }
 
   .react-calendar {

packages/frontend/src/components/ui/containers/InfoContainer.scss

@@ -59,6 +59,10 @@
         padding: 0 24px;
         padding-bottom: 1px;
       }
+
+      .chakra-tabs__tab {
+        padding: 8px;
+      }
     }
   }
 
@@ -79,4 +83,17 @@
       }
     }
   }
+
+  @media screen and (max-width: $breakpoint-sm) {
+    &--Tabs {
+      .chakra-tabs__tablist {
+        padding: 0 16px;
+        padding-bottom: 1px;
+      }
+
+      .chakra-tabs__tab {
+        padding: 8px 4px;
+      }
+    }
+  }
 }

packages/frontend/src/components/validators/ValidatorCard.js

@@ -5,8 +5,6 @@ import { HorisontalSeparator } from '../ui/separators'
 import Link from 'next/link'
 
 export default function ValidatorCard ({ validator, rate, className }) {
-  console.log('validator', validator)
-
   return (
     <div className={`InfoBlock InfoBlock--Gradient ValidatorCard ${validator.loading ? 'ValidatorCard--Loading' : ''} ${className || ''}`}>
       <div className={'ValidatorCard__Header'}>

packages/frontend/src/styles/components/InfoBlock.scss

@@ -4,7 +4,7 @@
 $border-radius: var(--chakra-radii-block);
 
 .InfoBlock {
-  @include mixins.Block();
+  @include mixins.Block(true);
   position: relative;
   padding: 20px 32px 32px 32px !important;