Add kvstore to Staking dashboard (#3036)

* Add kvstore to Staking dashboard * Add category selector Test for dashboard server method Check chainId in KVStore methods Make sure there's no empty keys on set/setup requests * Remove node-sass from ui-2024 Modify hooks to remove invalid chain error when wallet is not connected * Remove filter for empty values in KVStore table Remove / from VITE_APP_DASHBOARD_API_URL * Improved kvstore hook by using api service and added response validation * Enable again kvstore filter * Modify input type set number for fee * Add validation to exclude custom keys that are not updated * Fix prettier typing error
humanprotocol · Jan 27, 2025 · 9953bfa · 9953bfa
1 parent cc1acdf
commit 9953bfa
Show file tree

Hide file tree

Showing 33 changed files with 1,406 additions and 739 deletions.
diff --git a/packages/apps/dashboard/server/src/modules/details/details.controller.ts b/packages/apps/dashboard/server/src/modules/details/details.controller.ts
@@ -15,6 +15,7 @@ import { DetailsService } from './details.service';
 import {
   DetailsResponseDto,
   DetailsPaginationResponseDto,
+  KVStoreDataDto,
 } from './dto/details-response.dto';
 import {
   DetailsTransactionsPaginationDto,
@@ -159,4 +160,24 @@ export class DetailsController {
 
     return response;
   }
+
+  @Get('/kvstore/:address')
+  @HttpCode(200)
+  @ApiOperation({
+    summary: 'Get KVStore data by address',
+    description: 'Returns all the data stored in KVStore for a given address.',
+  })
+  @ApiQuery({ name: 'chain_id', enum: ChainId, required: true })
+  @ApiResponse({
+    status: 200,
+    description: 'Data retrieved successfully',
+    type: KVStoreDataDto,
+    isArray: true,
+  })
+  public async KVStore(
+    @Param('address', AddressValidationPipe) address: string,
+    @Query('chain_id') chainId: ChainId,
+  ): Promise<KVStoreDataDto[]> {
+    return this.detailsService.getKVStoreData(chainId, address);
+  }
 }
diff --git a/packages/apps/dashboard/server/src/modules/details/details.service.ts b/packages/apps/dashboard/server/src/modules/details/details.service.ts
@@ -10,6 +10,7 @@ import {
   NETWORKS,
   ILeadersFilter,
   OrderDirection,
+  KVStoreUtils,
 } from '@human-protocol/sdk';
 
 import { WalletDto } from './dto/wallet.dto';
@@ -30,6 +31,7 @@ import {
   MIN_AMOUNT_STAKED,
 } from '../../common/constants/leader';
 import { GetLeadersPaginationOptions } from 'src/common/types';
+import { KVStoreDataDto } from './dto/details-response.dto';
 
 @Injectable()
 export class DetailsService {
@@ -339,4 +341,20 @@ export class DetailsService {
 
     return sortedLeaders;
   }
+
+  public async getKVStoreData(
+    chainId: ChainId,
+    address: string,
+  ): Promise<KVStoreDataDto[]> {
+    const kvStoreData = await KVStoreUtils.getKVStoreData(chainId, address);
+
+    const data: KVStoreDataDto[] = kvStoreData.map((data: any) => {
+      return plainToInstance(KVStoreDataDto, {
+        key: data.key,
+        value: data.value,
+      });
+    });
+
+    return data;
+  }
 }
diff --git a/packages/apps/dashboard/server/src/modules/details/details.spec.ts b/packages/apps/dashboard/server/src/modules/details/details.spec.ts
@@ -9,6 +9,7 @@ import {
   ChainId,
   ILeader,
   OperatorUtils,
+  KVStoreUtils,
   OrderDirection,
 } from '@human-protocol/sdk';
 import { LeadersOrderBy } from '../../common/enums/leader';
@@ -18,6 +19,9 @@ jest.mock('@human-protocol/sdk', () => ({
   OperatorUtils: {
     getLeaders: jest.fn(),
   },
+  KVStoreUtils: {
+    getKVStoreData: jest.fn(),
+  },
 }));
 
 jest.mock('../../common/constants/leader', () => ({
@@ -162,4 +166,22 @@ describe('DetailsService', () => {
       }),
     ]);
   });
+
+  it('should fetch and return KV store data', async () => {
+    const mockKVStoreData = [
+      { key: 'key1', value: 'value1' },
+      { key: 'key2', value: 'value2' },
+    ];
+
+    jest
+      .spyOn(KVStoreUtils, 'getKVStoreData')
+      .mockResolvedValue(mockKVStoreData);
+
+    const result = await service.getKVStoreData(ChainId.MAINNET, '0x123');
+
+    expect(result).toEqual([
+      expect.objectContaining({ key: 'key1', value: 'value1' }),
+      expect.objectContaining({ key: 'key2', value: 'value2' }),
+    ]);
+  });
 });
diff --git a/packages/apps/dashboard/server/src/modules/details/dto/details-response.dto.ts b/packages/apps/dashboard/server/src/modules/details/dto/details-response.dto.ts
@@ -41,3 +41,11 @@ export class DetailsPaginationResponseDto {
   @IsArray()
   public results: EscrowPaginationDto[] | TransactionPaginationDto[];
 }
+
+export class KVStoreDataDto {
+  @ApiProperty({ example: 'key' })
+  public key: string;
+
+  @ApiProperty({ example: 'value' })
+  public value: string;
+}
diff --git a/packages/apps/dashboard/ui-2024/package.json b/packages/apps/dashboard/ui-2024/package.json
@@ -26,12 +26,12 @@
     "axios": "^1.7.2",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.11",
-    "node-sass": "^9.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-number-format": "^5.4.3",
     "react-router-dom": "^6.23.1",
     "recharts": "^2.13.0-alpha.4",
+    "sass": "^1.83.4",
     "simplebar-react": "^3.2.5",
     "styled-components": "^6.1.11",
     "swiper": "^11.1.3",
@@ -49,7 +49,7 @@
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.11",
     "prettier": "3.4.2",
-    "sass": "^1.78.0",
+    "sass": "^1.83.4",
     "stylelint-prettier": "^5.0.0",
     "typescript": "^5.2.2",
     "vite": "^5.4.7",

diff --git a/packages/apps/staking/.env.example b/packages/apps/staking/.env.example
@@ -1,4 +1,4 @@
-VITE_APP_DASHBOARD_SERVER_URL=
+VITE_APP_DASHBOARD_API_URL=
 VITE_APP_ENVIRONMENT=testnet
 VITE_APP_SUPPORTED_CHAINS=80002
 # links to footer socials

diff --git a/packages/apps/staking/src/assets/KVStoreIcon.tsx b/packages/apps/staking/src/assets/KVStoreIcon.tsx
@@ -0,0 +1,186 @@
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+import { FC } from 'react';
+
+export const KVStoreIcon: FC<SvgIconProps> = (props) => {
+  return (
+    <SvgIcon
+      {...props}
+      style={{
+        width: '130',
+        height: '130',
+      }}
+    >
+      <svg
+        width="130"
+        height="130"
+        viewBox="0 0 130 130"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g filter="url(#filter0_d_2247_31600)">
+          <path
+            d="M98 41C98 59.2254 83.2254 74 65 74C46.7746 74 32 59.2254 32 41C32 22.7746 46.7746 8 65 8C83.2254 8 98 22.7746 98 41Z"
+            fill="url(#paint0_radial_2247_31600)"
+          />
+        </g>
+        <g filter="url(#filter1_d_2247_31600)">
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M65 69.9304C80.9778 69.9304 93.9304 56.9778 93.9304 41C93.9304 25.0222 80.9778 12.0696 65 12.0696C49.0222 12.0696 36.0696 25.0222 36.0696 41C36.0696 56.9778 49.0222 69.9304 65 69.9304ZM65 74C83.2254 74 98 59.2254 98 41C98 22.7746 83.2254 8 65 8C46.7746 8 32 22.7746 32 41C32 59.2254 46.7746 74 65 74Z"
+            fill="url(#paint1_linear_2247_31600)"
+          />
+        </g>
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M79.4124 47.0702V32.0494V31.661H79.3739C78.8552 29.0538 73.158 27 66.2062 27C59.2544 27 53.5572 29.0538 53.0385 31.661H53V32.0494V50.6935V51.0819H53.0385C53.5572 53.6892 59.2544 55.7429 66.2062 55.7429C68.2846 55.7429 70.2508 55.5594 72 55.2323V58.1477L79.081 62.0551L86.162 58.1477V50.6887L79.4124 47.0702Z"
+          fill="url(#paint2_linear_2247_31600)"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M49.6 29.438C49.9314 29.438 50.2 29.7066 50.2 30.038V47.9052C50.2 48.2366 49.9314 48.5052 49.6 48.5052C49.2686 48.5052 49 48.2366 49 47.9052V30.038C49 29.7066 49.2686 29.438 49.6 29.438ZM76.0124 29.438C76.3438 29.438 76.6124 29.7066 76.6124 30.038V41.9C76.6124 42.2314 76.3438 42.5 76.0124 42.5C75.6811 42.5 75.4124 42.2314 75.4124 41.9V30.038C75.4124 29.7066 75.6811 29.438 76.0124 29.438Z"
+          fill="#320A8D"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M51.0402 28.1291C50.4461 28.6661 50.2 29.1808 50.2 29.6494C50.2 30.118 50.4461 30.6328 51.0402 31.1698C51.6342 31.7068 52.5275 32.2179 53.6823 32.6595C55.9878 33.541 59.2135 34.0989 62.8062 34.0989C66.399 34.0989 69.6246 33.541 71.9301 32.6595C73.085 32.2179 73.9782 31.7068 74.5723 31.1698C75.1663 30.6328 75.4124 30.118 75.4124 29.6494C75.4124 29.1808 75.1663 28.6661 74.5723 28.1291C73.9782 27.592 73.085 27.0809 71.9301 26.6394C69.6246 25.7578 66.399 25.2 62.8062 25.2C59.2135 25.2 55.9878 25.7578 53.6823 26.6394C52.5275 27.0809 51.6342 27.592 51.0402 28.1291ZM53.2537 25.5185C55.7279 24.5725 59.1054 24 62.8062 24C66.507 24 69.8845 24.5725 72.3587 25.5185C73.5937 25.9907 74.6345 26.5677 75.377 27.2389C76.1194 27.9101 76.6124 28.7237 76.6124 29.6494C76.6124 30.5752 76.1194 31.3888 75.377 32.06C74.6345 32.7312 73.5937 33.3081 72.3587 33.7804C69.8845 34.7264 66.507 35.2989 62.8062 35.2989C59.1054 35.2989 55.7279 34.7264 53.2537 33.7804C52.0187 33.3081 50.9779 32.7312 50.2355 32.06C49.493 31.3888 49 30.5752 49 29.6494C49 28.7237 49.493 27.9101 50.2355 27.2389C50.9779 26.5677 52.0187 25.9907 53.2537 25.5185Z"
+          fill="#320A8D"
+        />
+        <path
+          d="M53.6965 51.1956C55.9976 52.1431 59.2181 52.7431 62.8062 52.7431C64.8589 52.7431 66.7913 52.5468 68.5 52.2013V53.4244C66.7619 53.7586 64.8323 53.9431 62.8062 53.9431C59.1008 53.9431 55.7181 53.3258 53.2396 52.3052C52.0017 51.7955 50.9604 51.1734 50.2193 50.4518C49.4762 49.7285 49 48.8677 49 47.9053H50.2C50.2 48.4445 50.4629 49.0142 51.0563 49.592C51.6517 50.1716 52.5445 50.7213 53.6965 51.1956Z"
+          fill="#320A8D"
+        />
+        <path
+          d="M53.6965 44.9805C55.9976 45.928 59.2181 46.528 62.8062 46.528C64.8589 46.528 66.7913 46.3317 68.5 45.9862V47.2093C66.7619 47.5435 64.8323 47.728 62.8062 47.728C59.1008 47.728 55.7181 47.1107 53.2396 46.0901C52.0017 45.5804 50.9604 44.9583 50.2193 44.2368C49.4762 43.5134 49 42.6526 49 41.6902H50.2C50.2 42.2294 50.4629 42.7991 51.0563 43.3769C51.6517 43.9566 52.5445 44.5062 53.6965 44.9805Z"
+          fill="#320A8D"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M53.6677 38.9825C55.978 39.7979 59.2089 40.3135 62.8062 40.3135C66.4035 40.3135 69.6344 39.7979 71.9447 38.9825C73.1026 38.5738 73.9969 38.1011 74.5902 37.606C75.1868 37.1082 75.4124 36.6479 75.4124 36.2524H76.6124C76.6124 37.144 76.0989 37.91 75.359 38.5274C74.6158 39.1476 73.5761 39.6793 72.3441 40.1141C69.8747 40.9856 66.5025 41.5135 62.8062 41.5135C59.1099 41.5135 55.7377 40.9856 53.2683 40.1141C52.0363 39.6793 50.9967 39.1476 50.2534 38.5274C49.5135 37.91 49 37.144 49 36.2524H50.2C50.2 36.6479 50.4256 37.1082 51.0222 37.606C51.6155 38.1011 52.5098 38.5738 53.6677 38.9825Z"
+          fill="#320A8D"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M76.2815 42L83.162 45.6887V53.1477L76.081 57.0551L69 53.1477V45.8963L76.2815 42Z"
+          stroke="#320A8D"
+        />
+        <path
+          d="M69.1436 46.0244L76.088 49.6619L83.2687 45.8118"
+          stroke="#320A8D"
+        />
+        <path d="M76.0909 57.055V49.6145" stroke="#320A8D" />
+        <defs>
+          <filter
+            id="filter0_d_2247_31600"
+            x="0"
+            y="0"
+            width="130"
+            height="130"
+            filterUnits="userSpaceOnUse"
+            colorInterpolationFilters="sRGB"
+          >
+            <feFlood floodOpacity="0" result="BackgroundImageFix" />
+            <feColorMatrix
+              in="SourceAlpha"
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+              result="hardAlpha"
+            />
+            <feOffset dy="24" />
+            <feGaussianBlur stdDeviation="16" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix
+              type="matrix"
+              values="0 0 0 0 0.0486111 0 0 0 0 0.127083 0 0 0 0 0.833333 0 0 0 0.06 0"
+            />
+            <feBlend
+              mode="normal"
+              in2="BackgroundImageFix"
+              result="effect1_dropShadow_2247_31600"
+            />
+            <feBlend
+              mode="normal"
+              in="SourceGraphic"
+              in2="effect1_dropShadow_2247_31600"
+              result="shape"
+            />
+          </filter>
+          <filter
+            id="filter1_d_2247_31600"
+            x="0"
+            y="0"
+            width="130"
+            height="130"
+            filterUnits="userSpaceOnUse"
+            colorInterpolationFilters="sRGB"
+          >
+            <feFlood floodOpacity="0" result="BackgroundImageFix" />
+            <feColorMatrix
+              in="SourceAlpha"
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+              result="hardAlpha"
+            />
+            <feOffset dy="24" />
+            <feGaussianBlur stdDeviation="16" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix
+              type="matrix"
+              values="0 0 0 0 0.0486111 0 0 0 0 0.127083 0 0 0 0 0.833333 0 0 0 0.06 0"
+            />
+            <feBlend
+              mode="normal"
+              in2="BackgroundImageFix"
+              result="effect1_dropShadow_2247_31600"
+            />
+            <feBlend
+              mode="normal"
+              in="SourceGraphic"
+              in2="effect1_dropShadow_2247_31600"
+              result="shape"
+            />
+          </filter>
+          <radialGradient
+            id="paint0_radial_2247_31600"
+            cx="0"
+            cy="0"
+            r="1"
+            gradientUnits="userSpaceOnUse"
+            gradientTransform="translate(65 18.6895) rotate(90) scale(55.3105)"
+          >
+            <stop stopColor="#F0F0FF" />
+            <stop stopColor="#F1F1FD" />
+            <stop offset="0.703125" stopColor="white" />
+          </radialGradient>
+          <linearGradient
+            id="paint1_linear_2247_31600"
+            x1="104.526"
+            y1="74"
+            x2="109.495"
+            y2="52.1101"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#F7F8FD" />
+            <stop offset="1" stopColor="white" />
+          </linearGradient>
+          <linearGradient
+            id="paint2_linear_2247_31600"
+            x1="58.8725"
+            y1="27"
+            x2="96.1314"
+            y2="50.4872"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#244CB3" stopOpacity="0.2" />
+            <stop offset="1" stopColor="#B4C2E5" stopOpacity="0.07" />
+          </linearGradient>
+        </defs>
+      </svg>
+    </SvgIcon>
+  );
+};
diff --git a/packages/apps/staking/src/assets/styles/_shadow-icon.scss b/packages/apps/staking/src/assets/styles/_shadow-icon.scss
@@ -0,0 +1,29 @@
+.shadow-icon{
+  display: flex;
+  gap: 16px;
+  height: 90px;
+  &__icon {
+    width: 65px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  img, svg {
+    transform: translateY(17%);
+    width: 130px;
+    height: 130px;
+  }
+  span{
+    padding-top: 20px;
+    font-size: 28px;
+    font-weight: 600;
+  }
+
+    @media (max-width: 400px) {
+      span {
+        padding-top: 30px;
+        font-size: 20px;
+        font-weight: 500;
+      }
+    }
+}
diff --git a/packages/apps/staking/src/assets/styles/main.scss b/packages/apps/staking/src/assets/styles/main.scss
@@ -3,4 +3,5 @@
 @use 'page-wrapper';
 @use 'footer';
 @use 'home-page';
-@use 'breadcrumbs';
+@use 'breadcrumbs';
+@use 'shadow-icon';
diff --git a/packages/apps/staking/src/components/Account/index.tsx b/packages/apps/staking/src/components/Account/index.tsx
@@ -16,7 +16,7 @@ export function Account() {
 
   const theme = useTheme();
   const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));
-  const isMediumScreen = useMediaQuery(theme.breakpoints.down(1500));
+  const isMediumScreen = useMediaQuery(theme.breakpoints.down(1800));
 
   const formattedAddress = isMediumScreen ? formatAddress(address) : address;
 

diff --git a/packages/apps/staking/src/components/Footer/Footer.tsx b/packages/apps/staking/src/components/Footer/Footer.tsx
@@ -46,7 +46,7 @@ const Footer: FC = () => {
             </Typography>
           </div>
           <Typography variant="subtitle1" color="text.secondary">
-            © 2021 HPF. HUMAN Protocol® is a registered trademark
+            © 2025 HPF. HUMAN Protocol® is a registered trademark
           </Typography>
         </div>
         <div className="footer-icon">