+
+ )}
+
+ );
+};
+
+export default ImgSuspense;
diff --git a/ui/src/components/molecules/infoTooltip/index.module.css b/ui/src/components/molecules/infoTooltip/index.module.css
new file mode 100644
index 0000000..7ef75b3
--- /dev/null
+++ b/ui/src/components/molecules/infoTooltip/index.module.css
@@ -0,0 +1,43 @@
+.infoTooltip {
+ pointer-events: all;
+ display: inline-block;
+}
+
+.icon {
+ width: 14px;
+ height: 14px;
+ display: flex;
+}
+
+.icon svg {
+ width: 100%;
+ height: 100%;
+ min-width: 12px;
+ min-height: 12px;
+}
+
+.infoIcon {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 14px;
+ height: 14px;
+ background-color: #e8e8e8;
+ border-radius: 50%;
+}
+
+.infoIcon svg {
+ fill: #000000;
+ width: 4px;
+ height: 8px;
+ min-width: 0;
+ min-height: 0;
+}
+
+.infoIcon:hover {
+ background-color: #9c9ea6;
+}
+
+.infoIcon:hover svg {
+ fill: #ffffff;
+}
diff --git a/ui/src/components/molecules/infoTooltip/index.tsx b/ui/src/components/molecules/infoTooltip/index.tsx
new file mode 100644
index 0000000..cd9c838
--- /dev/null
+++ b/ui/src/components/molecules/infoTooltip/index.tsx
@@ -0,0 +1,53 @@
+import React, { useRef } from 'react';
+import WaitingInfoIcon from './waitingInfo.svg';
+
+import classNames from 'classnames';
+import TooltipWrapper from '../tooltipWrapper';
+import styles from './index.module.css';
+import InfoIconComponent from './infoIcon';
+import Image from 'next/image';
+type InfoTooltipProps = {
+ tooltipText: string;
+ className?: string;
+ children: React.ReactNode;
+ classNameWrapper?: string;
+ offsetLeft?: string;
+ waitingInfo?: boolean;
+ isLoading?: boolean;
+ noCloseOnClickInside?: boolean;
+ blackTooltip?: boolean;
+ closeTimeOut?: number;
+};
+
+const InfoTooltip = ({
+ tooltipText,
+ className,
+ children,
+ classNameWrapper,
+ waitingInfo,
+ isLoading,
+ noCloseOnClickInside,
+ blackTooltip,
+ closeTimeOut,
+}: InfoTooltipProps): JSX.Element => {
+ const controlRef = useRef(null);
+
+ return (
+
+
+
+
+ );
+};
+
+export default InfoTooltip;
diff --git a/ui/src/components/molecules/infoTooltip/info.svg b/ui/src/components/molecules/infoTooltip/info.svg
new file mode 100644
index 0000000..6495d5d
--- /dev/null
+++ b/ui/src/components/molecules/infoTooltip/info.svg
@@ -0,0 +1,5 @@
+
diff --git a/ui/src/components/molecules/infoTooltip/infoIcon.svg b/ui/src/components/molecules/infoTooltip/infoIcon.svg
new file mode 100644
index 0000000..60ec24c
--- /dev/null
+++ b/ui/src/components/molecules/infoTooltip/infoIcon.svg
@@ -0,0 +1,5 @@
+
diff --git a/ui/src/components/molecules/infoTooltip/infoIcon.tsx b/ui/src/components/molecules/infoTooltip/infoIcon.tsx
new file mode 100644
index 0000000..cc643f5
--- /dev/null
+++ b/ui/src/components/molecules/infoTooltip/infoIcon.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import InfoIcon from './infoIcon.svg';
+
+import styles from './index.module.css';
+import classNames from 'classnames';
+import Image from 'next/image';
+
+const InfoIconComponent = ({ className }: { className?: string }): JSX.Element => {
+ return (
+
+
+ {waitingInfo ?
+ setHovered(true)}
+ onMouseLeave={() => setHovered(false)}
+ onClick={onClick}
+ >
+
+ );
+};
+
+type MiddleEllipsisCustomProps = {
+ children: React.ReactNode;
+ style?: CSSProperties;
+ width?: any;
+ noRedirect?: boolean;
+ fontWeight?: string | number;
+ fontSize?: any;
+ isHeader?: boolean;
+ breadCrumbs?: boolean;
+ onClick?: () => void;
+ className?: string;
+ color?: string;
+};
+
+const MiddleEllipsisCustom = ({
+ children,
+ style,
+ width,
+ noRedirect,
+ fontWeight,
+ fontSize,
+ isHeader,
+ breadCrumbs,
+ onClick,
+ className,
+ color,
+}: MiddleEllipsisCustomProps): JSX.Element => {
+ const ref = useRef(null);
+ const [startAndEnd, setStartAndEnd] = useState(0);
+ const [visible, setVisible] = useState(false);
+ useEffect(() => {
+ const timeout = setTimeout(() => setVisible(true), 50);
+ return () => {
+ clearTimeout(timeout);
+ };
+ }, []);
+
+ useEffect(() => {
+ if (fontSize) {
+ const widthSymbol = fontSize.replace(/[^0-9]/g, '') * 0.6;
+ setStartAndEnd(Math.floor(width / widthSymbol / 2));
+ }
+ }, [width, fontSize]);
+
+ return (
+
+ {firstString}
+
+ {showDots && (
+
+
+ )}
+
+ {secondString}
+
+
+
+ );
+};
+
+export default MiddleEllipsisCustom;
diff --git a/ui/src/components/molecules/pager/Pager.module.css b/ui/src/components/molecules/pager/Pager.module.css
new file mode 100644
index 0000000..6891a1b
--- /dev/null
+++ b/ui/src/components/molecules/pager/Pager.module.css
@@ -0,0 +1,37 @@
+.pager {
+ display: flex;
+}
+.btn {
+ outline: none !important;
+ border: none;
+ background-color: transparent;
+ min-width: 32px;
+ height: 32px;
+ padding: 0 4px;
+ margin-right: 4px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border-radius: 7px;
+ transition: all ease 200ms;
+ line-height: 16px;
+ user-select: none;
+ color: rgba(0, 0, 0, 0.8);
+ cursor: pointer;
+}
+
+.btn:hover {
+ background-color: #f0f1f5;
+}
+.btn:last-child {
+ margin-right: 0;
+}
+.ellipsis {
+ cursor: default;
+}
+.ellipsis:hover {
+ background-color: transparent;
+}
+.active {
+ background-color: #f0f1f5;
+}
diff --git a/ui/src/components/molecules/pager/img/ArrowIcon.svg b/ui/src/components/molecules/pager/img/ArrowIcon.svg
new file mode 100644
index 0000000..60324ba
--- /dev/null
+++ b/ui/src/components/molecules/pager/img/ArrowIcon.svg
@@ -0,0 +1,3 @@
+
diff --git a/ui/src/components/molecules/pager/index.tsx b/ui/src/components/molecules/pager/index.tsx
new file mode 100644
index 0000000..fcb7270
--- /dev/null
+++ b/ui/src/components/molecules/pager/index.tsx
@@ -0,0 +1,115 @@
+import classNames from 'classnames';
+import React from 'react';
+import style from './Pager.module.css';
+import ArrowIcon from './img/ArrowIcon.svg';
+import { useMedia } from '../../../hooks';
+import Image from 'next/image';
+
+const Pager = ({ page, count = 1, onChange, pageNeighbours = 1 }) => {
+ const showPrevButton = page !== 1;
+ const showNextButton = count !== page;
+ const media = useMedia();
+
+ const ELLIPSIS = '...';
+
+ const range = (from, to, step = 1) => {
+ let i = from;
+ const range = [];
+
+ while (i <= to) {
+ range.push(i);
+ i += step;
+ }
+
+ return range;
+ };
+
+ const fetchPageNumbers = () => {
+ const totalNumbers = pageNeighbours * 2 + 3;
+ const totalBlocks = totalNumbers + 2;
+
+ if (count > totalBlocks) {
+ const startPage = Math.max(2, page - pageNeighbours);
+ const endPage = Math.min(count - 1, page + pageNeighbours);
+ let pages = range(startPage, endPage);
+ const hasLeftSpill = startPage > 2;
+ const hasRightSpill = count - endPage > 1;
+ const spillOffset = totalNumbers - (pages.length + 1);
+ switch (true) {
+ case hasLeftSpill && !hasRightSpill: {
+ const extraPages =
+ (page + 1 + '').length > 3 && !media.greater.sm
+ ? range(startPage - spillOffset + 2, startPage - 1)
+ : range(startPage - spillOffset, startPage - 1);
+ pages = [ELLIPSIS, ...extraPages, ...pages];
+ break;
+ }
+ case !hasLeftSpill && hasRightSpill: {
+ const extraPages = range(endPage + 1, endPage + spillOffset);
+ pages = [...pages, ...extraPages, ELLIPSIS];
+ break;
+ }
+
+ case hasLeftSpill && hasRightSpill:
+ default: {
+ (page + 1 + '').length > 3 && !media.greater.sm
+ ? (pages = [ELLIPSIS, pages[1], ELLIPSIS])
+ : (pages = [ELLIPSIS, ...pages, ELLIPSIS]);
+ break;
+ }
+ }
+
+ return [1, ...pages, count];
+ }
+
+ return range(1, count);
+ };
+
+ const changeHandler = (value) => {
+ if (value > count || value < 1) return;
+ onChange(value - 1);
+ };
+
+ return (
+
+ {showPrevButton && (
+
+ )}
+
+ {fetchPageNumbers().map((el, i) => {
+ if (el === ELLIPSIS)
+ return (
+
+ );
+
+ return (
+
+ );
+ })}
+
+ {showNextButton && (
+
+ )}
+
+ );
+};
+
+export default Pager;
diff --git a/ui/src/components/molecules/pagination/Pagination.module.css b/ui/src/components/molecules/pagination/Pagination.module.css
new file mode 100644
index 0000000..3dff6f5
--- /dev/null
+++ b/ui/src/components/molecules/pagination/Pagination.module.css
@@ -0,0 +1,76 @@
+.pagination {
+ background-color: #fff;
+ position: sticky;
+ top: 0;
+ z-index: 12;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 16px 16px 16px 16px;
+ user-select: none;
+}
+
+.showing {
+ line-height: 32px;
+ flex-basis: 25%;
+ font-size: 14px;
+ color: rgba(0, 0, 0, 0.8);
+}
+
+.showingMobile {
+ flex-basis: auto;
+}
+
+.select {
+ flex-basis: 25%;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+}
+
+.select span {
+ margin-right: 8px;
+ font-size: 14px;
+ color: rgba(0, 0, 0, 0.8);
+}
+
+.totalCount {
+ margin-bottom: 4px;
+ line-height: 18px;
+}
+
+.showingLast {
+ color: #9c9ea6;
+ font-size: 12px;
+}
+
+@media (max-width: 992px) {
+ .showingHiddenOnMobile {
+ display: none;
+ }
+}
+
+@media (max-width: 768px) {
+ .pagination {
+ justify-content: center;
+ }
+ .MobileWithShowing {
+ flex-direction: column-reverse;
+ align-items: flex-start;
+ gap: 10px;
+ padding-right: 16px;
+ }
+
+ .select span {
+ display: none;
+ }
+}
+
+@media (max-width: 576px) {
+ .pagination {
+ padding: 12px 0;
+ justify-content: flex-start;
+ padding-left: 16px;
+ }
+}
diff --git a/ui/src/components/molecules/pagination/index.tsx b/ui/src/components/molecules/pagination/index.tsx
new file mode 100644
index 0000000..9721977
--- /dev/null
+++ b/ui/src/components/molecules/pagination/index.tsx
@@ -0,0 +1,97 @@
+import React from 'react';
+import style from './Pagination.module.css';
+import classNames from 'classnames';
+import { formatNum } from '../../../comman/helpers';
+import Pager from '../pager';
+import SingleSelect from '../singleSelect';
+
+type PaginationProps = {
+ currentPage: number;
+ pageLimit: number;
+ totalElements: number;
+ totalCount: number;
+ offset?: number;
+ className?: string;
+ type?: string;
+ customShowingText?: string;
+ showTotalElements?: boolean;
+ pagesCount: number;
+ isLoading: boolean;
+ limitOptions: any[];
+ onPageChange: (value: number | string) => void;
+ onLimitChange: (value: number) => void;
+};
+
+const Pagination = ({
+ currentPage,
+ pageLimit,
+ totalElements,
+ offset,
+ className,
+ totalCount,
+ type,
+ customShowingText,
+ showTotalElements = false,
+ pagesCount,
+ isLoading,
+ onPageChange,
+ onLimitChange,
+ limitOptions,
+}: PaginationProps) => {
+ const nextOffset = pageLimit * (currentPage + 1);
+
+ return (
+
+
+ );
+};
+
+export default Pagination;
diff --git a/ui/src/components/molecules/popupOverlay/PopupOverlay.module.css b/ui/src/components/molecules/popupOverlay/PopupOverlay.module.css
new file mode 100644
index 0000000..d4b18c4
--- /dev/null
+++ b/ui/src/components/molecules/popupOverlay/PopupOverlay.module.css
@@ -0,0 +1,169 @@
+@keyframes appear {
+ 0% {
+ opacity: 0;
+ pointer-events: none;
+ }
+ to {
+ opacity: 1;
+ pointer-events: auto;
+ }
+}
+
+@keyframes disappear {
+ 0% {
+ opacity: 1;
+ pointer-events: auto;
+ }
+ to {
+ opacity: 0;
+ pointer-events: none;
+ }
+}
+
+@keyframes slideUpIn {
+ 0% {
+ transform: translate3d(0, 1rem, 0);
+ opacity: 0;
+ pointer-events: none;
+ }
+ to {
+ transform: translateZ(0);
+ opacity: 1;
+ pointer-events: auto;
+ }
+}
+
+@keyframes slideUpOut {
+ 0% {
+ transform: translateZ(0);
+ opacity: 1;
+ pointer-events: auto;
+ }
+ to {
+ transform: translate3d(0, 1rem, 0);
+ opacity: 0;
+ pointer-events: none;
+ }
+}
+
+@keyframes slideRightIn {
+ 0% {
+ transform: translateX(100%);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+
+@keyframes slideRightOut {
+ 0% {
+ transform: translateX(0);
+ }
+ to {
+ transform: translateX(100%);
+ }
+}
+
+@keyframes slideLeftIn {
+ 0% {
+ transform: translateX(-100%);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+
+@keyframes slideLeftOut {
+ 0% {
+ transform: translateX(0);
+ }
+ to {
+ transform: translateX(-100%);
+ }
+}
+
+.overlayWrapper {
+ position: fixed;
+ z-index: 1000;
+ visibility: hidden;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ height: 100%;
+ width: 100vw;
+}
+
+.overlayWrapperActive {
+ visibility: visible;
+}
+
+.wrapper {
+ position: fixed;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ right: 0;
+ height: 100%;
+ width: 100vw;
+ background: rgba(61, 71, 102, 0.5);
+ transition: all 300ms ease;
+}
+
+.popupOverlay {
+ position: absolute;
+}
+
+.bottom {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ width: 100%;
+}
+
+.center {
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ transform: translateY(-50%) translateX(-50%);
+}
+
+.top {
+ position: absolute;
+ left: 50%;
+ top: 53px;
+ transform: translateX(-50%);
+}
+
+.appear {
+ animation: appear 150ms;
+}
+
+.disappear {
+ animation: disappear 300ms forwards;
+}
+
+.slideUpIn {
+ animation: slideUpIn 150ms;
+}
+
+.slideUpOut {
+ animation: slideUpOut 300ms forwards;
+}
+
+.slideRightIn {
+ animation: slideRightIn 200ms;
+}
+
+.slideRightOut {
+ animation: slideRightOut 200ms forwards;
+}
+
+.slideLeftIn {
+ animation: slideLeftIn 200ms ease normal 0ms;
+}
+
+.slideLeftOut {
+ animation: slideLeftOut 200ms ease forwards 0ms;
+}
diff --git a/ui/src/components/molecules/popupOverlay/index.tsx b/ui/src/components/molecules/popupOverlay/index.tsx
new file mode 100644
index 0000000..1e7a1ad
--- /dev/null
+++ b/ui/src/components/molecules/popupOverlay/index.tsx
@@ -0,0 +1,173 @@
+import classNames from 'classnames';
+import React, { useEffect, useState, useRef } from 'react';
+import reactDom from 'react-dom';
+import style from './PopupOverlay.module.css';
+import { useRouter } from 'next/router';
+import { useMedia } from '../../../hooks';
+
+type PopupOverlayProps = {
+ children: React.ReactNode;
+ onClose?: () => void;
+ position?: string;
+ show?: boolean;
+ animation?: string;
+ forwardedRef?: any;
+ zIndex?: number;
+ height?: string;
+};
+
+const animations = {
+ appear: {
+ in: style.appear,
+ out: style.disappear,
+ },
+ slideUp: {
+ in: style.slideUpIn,
+ out: style.slideUpOut,
+ },
+ slideRight: {
+ in: style.slideRightIn,
+ out: style.slideRightOut,
+ },
+ slideLeft: {
+ in: style.slideLeftIn,
+ out: style.slideLeftOut,
+ },
+};
+
+const PopupOverlay = ({
+ children,
+ onClose = () => {},
+ position = 'bottom',
+ show,
+ animation = 'slideUp',
+ forwardedRef,
+ zIndex = 50,
+ height = 'auto',
+}: PopupOverlayProps): JSX.Element => {
+ const location = useRouter();
+
+ const overlayRef = useRef(null);
+
+ const [showState, setShowState] = useState(false);
+ const [active, setActive] = useState(false);
+ const [timeoutID, setTimeoutID] = useState(null);
+ const [isTextSelected, setIsTextSelected] = useState(false);
+ const initBodyWidth = typeof document !== 'undefined' && document.body.offsetWidth;
+ const media = useMedia();
+
+ const checkSelection = () => {
+ const selection = window.getSelection();
+ if (selection && selection.toString().length > 0) {
+ setIsTextSelected(true);
+ } else {
+ setIsTextSelected(false);
+ }
+ };
+
+ const getAppWrapper = (): HTMLElement => {
+ return document.querySelector('.app-wrapper');
+ };
+ const showPopup = (initBodyWidth) => {
+ setActive(true);
+ setShowState(true);
+
+ const appWrapper = getAppWrapper();
+ appWrapper && media.greater.sm && (appWrapper.style.position = 'fixed');
+ document.getElementById('popup-overlay')?.classList.add(style.overlayWrapperActive);
+ document.body.style.overflowY = 'hidden';
+
+ const currentBodyWidth = document.body.offsetWidth;
+ if (initBodyWidth !== currentBodyWidth) {
+ document.body.style.paddingRight = `${currentBodyWidth - initBodyWidth}px`;
+ appWrapper && (appWrapper.style.paddingRight = `${currentBodyWidth - initBodyWidth}px`);
+ }
+ };
+
+ const closePopup = (unmount = false) => {
+ const appWrapper = getAppWrapper();
+ if (appWrapper) {
+ appWrapper.style.position = 'relative';
+ appWrapper.style.paddingRight = '0px';
+ }
+ appWrapper && media.greater.sm && (appWrapper.style.position = 'static');
+ const completeClose = document.getElementById('popup-overlay')?.children.length < 2;
+ !unmount && setActive(false);
+ if (completeClose) document.getElementById('popup-overlay')?.classList.remove(style.overlayWrapperActive);
+ const timeout = setTimeout(() => {
+ !unmount && setShowState(false);
+ !unmount && onClose();
+ if (completeClose) {
+ document.body.style.paddingRight = '0';
+ document.body.style.overflowY = 'scroll';
+ }
+ }, 300);
+ setTimeoutID(timeout);
+ };
+
+ const handleClose = () => {
+ if (active && !isTextSelected) {
+ closePopup();
+ } else {
+ setIsTextSelected(false);
+ }
+ };
+
+ useEffect(() => {
+ if (show) {
+ handleClose();
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [location.pathname]);
+
+ useEffect(() => {
+ return () => {
+ clearTimeout(timeoutID);
+ };
+ }, [active, timeoutID]);
+
+ useEffect(() => {
+ if (show) showPopup(initBodyWidth);
+ else if (!show && showState) closePopup();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [show]);
+
+ useEffect(() => {
+ return () => {
+ closePopup(true);
+ };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ return showState
+ ? reactDom.createPortal(
+ <>
+
+ {totalCount && totalElements ? (
+ <>
+
+
+ + {formatNum(totalCount)} {type} found +
++ {customShowingText || 'Showing last'} {formatNum(totalElements)} +
+ + ) : ( ++ Showing {offset + 1} - {nextOffset > totalElements ? totalElements : nextOffset} out of{' '} + {totalElements ?? '...'} +
+ )} +
+ onPageChange(page)} />
+
+
+ Show
+
+
+
+ ,
+ document.getElementById('popup-overlay')
+ )
+ : null;
+};
+
+export default PopupOverlay;
diff --git a/ui/src/components/molecules/popupOverlay/overlayWrapper.tsx b/ui/src/components/molecules/popupOverlay/overlayWrapper.tsx
new file mode 100644
index 0000000..f13c8dc
--- /dev/null
+++ b/ui/src/components/molecules/popupOverlay/overlayWrapper.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import style from './PopupOverlay.module.css';
+
+const OverlayWrapper = () => {
+ return ;
+};
+
+export default OverlayWrapper;
diff --git a/ui/src/components/molecules/portal/index.module.css b/ui/src/components/molecules/portal/index.module.css
new file mode 100644
index 0000000..0c75f31
--- /dev/null
+++ b/ui/src/components/molecules/portal/index.module.css
@@ -0,0 +1,7 @@
+.portal {
+ position: absolute;
+ width: 100%;
+ height: 0;
+ top: 0;
+ z-index: 9999;
+}
diff --git a/ui/src/components/molecules/portal/index.tsx b/ui/src/components/molecules/portal/index.tsx
new file mode 100644
index 0000000..13bc380
--- /dev/null
+++ b/ui/src/components/molecules/portal/index.tsx
@@ -0,0 +1,43 @@
+import { useEffect } from 'react';
+import reactDom from 'react-dom';
+import './index.module.css';
+
+const Portal = ({
+ children,
+ onClick,
+ customTop,
+ customClass,
+ height,
+}: {
+ children: React.ReactNode;
+ onClick?: (value: any) => void;
+ customTop?: string;
+ customClass?: string;
+ height?: string;
+}) => {
+ const elem = document.createElement('div');
+ elem.classList.add('portal');
+ if (height !== null && height !== undefined) elem.style.height = height;
+
+ if (customTop) {
+ setTimeout(() => {
+ document.querySelector('.portal').classList.add(customClass);
+ (document.querySelector(`.${customClass}`) as HTMLElement).style.top = `${customTop}px`;
+ (document.querySelector(`.${customClass}`) as HTMLElement).style.height = `calc(100% - ${customTop}px)`;
+ }, 0);
+ }
+ useEffect(() => {
+ elem.addEventListener('click', onClick);
+ document.body.appendChild(elem);
+ return () => {
+ elem.removeEventListener('click', onClick);
+ document.querySelector('.portal').remove();
+ };
+
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ return reactDom.createPortal(children, elem);
+};
+
+export default Portal;
diff --git a/ui/src/components/molecules/selectPlate/SelectPlate.module.css b/ui/src/components/molecules/selectPlate/SelectPlate.module.css
new file mode 100644
index 0000000..f0708fa
--- /dev/null
+++ b/ui/src/components/molecules/selectPlate/SelectPlate.module.css
@@ -0,0 +1,81 @@
+.selectPlate {
+ width: max-content;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ cursor: pointer;
+ padding: 4px 12px;
+ user-select: none;
+ background-color: #f0f1f5;
+ border: 2px solid transparent;
+ border-radius: 7px;
+ transition: all ease 200ms;
+ }
+
+ .selectPlate * {
+ transition: all ease 200ms;
+ }
+
+ .selectPlate > * {
+ margin-right: 6px;
+ }
+
+ .selectPlate > *:last-child {
+ margin-right: 0;
+ }
+
+ .selectTitle {
+ font-weight: 600;
+ color: rgba(0, 0, 0, 0.8);
+ line-height: 24px;
+ text-transform: capitalize;
+ white-space: nowrap;
+ }
+
+ .selectCount {
+ font-weight: 500;
+ color: rgba(0, 0, 0, 0.8);
+ line-height: 16px;
+ text-align: center;
+ padding: 2px 8px;
+ border-radius: 30px;
+ background-color: #fff;
+ }
+
+ .selectClear {
+ display: flex;
+ align-items: center;
+ transition: all ease 200ms;
+ }
+
+ .selectClear:hover {
+ transform: scale(1.2);
+ }
+
+ .arrow {
+ fill: rgba(0, 0, 0, 0.8);
+ transform: rotateX(180deg);
+ }
+
+ .arrowDisabled {
+ fill: rgba(0, 0, 0, 0.4);
+ }
+
+ .expanded {
+ border: 2px solid #ebebf0;
+ }
+
+ .active {
+ border: 2px solid #e3e8fd;
+ background-color: #eef1ff;
+ }
+
+ .active span {
+ color: #3e66ec;
+ }
+
+ .active svg {
+ fill: #3e66ec;
+ }
+
+
\ No newline at end of file
diff --git a/ui/src/components/molecules/selectPlate/img/Arrow.svg b/ui/src/components/molecules/selectPlate/img/Arrow.svg
new file mode 100644
index 0000000..4f0226c
--- /dev/null
+++ b/ui/src/components/molecules/selectPlate/img/Arrow.svg
@@ -0,0 +1,3 @@
+
diff --git a/ui/src/components/molecules/selectPlate/index.tsx b/ui/src/components/molecules/selectPlate/index.tsx
new file mode 100644
index 0000000..7547cca
--- /dev/null
+++ b/ui/src/components/molecules/selectPlate/index.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import style from './SelectPlate.module.css';
+import ArrowIcon from './img/Arrow.svg';
+import classNames from 'classnames';
+import Image from 'next/image';
+
+const SelectPlate = ({
+ clickHandler,
+ expanded,
+ title,
+ selectedCount = 0,
+ isActive,
+ disable,
+ minWidth = '0px',
+ height,
+}) => {
+ const active = selectedCount > 0 || isActive;
+
+ return (
+ e.stopPropagation()}
+ >
+ {children}
+
+
+ {title}
+
+ );
+};
+
+export default SelectPlate;
diff --git a/ui/src/components/molecules/sensitiveContent/img/background.png b/ui/src/components/molecules/sensitiveContent/img/background.png
new file mode 100644
index 0000000..52bcd48
Binary files /dev/null and b/ui/src/components/molecules/sensitiveContent/img/background.png differ
diff --git a/ui/src/components/molecules/sensitiveContent/img/eyeIcon.svg b/ui/src/components/molecules/sensitiveContent/img/eyeIcon.svg
new file mode 100644
index 0000000..2bed8ac
--- /dev/null
+++ b/ui/src/components/molecules/sensitiveContent/img/eyeIcon.svg
@@ -0,0 +1,3 @@
+
diff --git a/ui/src/components/molecules/sensitiveContent/index.module.css b/ui/src/components/molecules/sensitiveContent/index.module.css
new file mode 100644
index 0000000..9e5b965
--- /dev/null
+++ b/ui/src/components/molecules/sensitiveContent/index.module.css
@@ -0,0 +1,41 @@
+.senseContent {
+ position: relative;
+ top: 0;
+ left: 0;
+ width: 100%;
+}
+
+.background {
+ width: 100%;
+ object-fit: cover;
+}
+
+.info {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ gap: 9px;
+}
+
+.infoTitle {
+ color: rgba(255, 255, 255, 1);
+}
+
+.infoText {
+ text-align: center;
+ max-width: 219px;
+ color: rgba(255, 255, 255, 0.6);
+}
+.infoBtn {
+ cursor: pointer;
+ padding: 4px 16px;
+ background: rgba(0, 0, 0, 0.1);
+ border-radius: 24px;
+ color: rgba(255, 255, 255, 1);
+}
diff --git a/ui/src/components/molecules/sensitiveContent/index.tsx b/ui/src/components/molecules/sensitiveContent/index.tsx
new file mode 100644
index 0000000..559bd5e
--- /dev/null
+++ b/ui/src/components/molecules/sensitiveContent/index.tsx
@@ -0,0 +1,52 @@
+import React, { useState, useEffect } from 'react';
+import Background from './img/background.png';
+import EyeIcon from './img/eyeIcon.svg';
+
+import style from './index.module.css';
+import Image from 'next/image';
+import classNames from 'classnames';
+
+const SensitiveContent = ({ show, onShowClick, size, position }) => {
+ const [neededSize, setNeededSize] = useState(size ?? 'large');
+
+ useEffect(() => {
+ setNeededSize(size);
+ }, [size]);
+
+ return show ? (
+
+
+ ) : null;
+};
+
+export default SensitiveContent;
diff --git a/ui/src/components/molecules/singleSelect/SingleSelect.module.css b/ui/src/components/molecules/singleSelect/SingleSelect.module.css
new file mode 100644
index 0000000..347fce8
--- /dev/null
+++ b/ui/src/components/molecules/singleSelect/SingleSelect.module.css
@@ -0,0 +1,22 @@
+.singleSelect {
+ position: relative;
+}
+
+.dropdown {
+ padding: 0;
+ border-radius: 7px;
+}
+
+.item {
+ color: #000000cc;
+ font-size: 14px;
+ line-height: 20px;
+ padding: 6px 12px;
+ background-color: #fff;
+ transition: all ease 200ms;
+ cursor: pointer;
+}
+
+.item:hover {
+ background-color: #f9f9f9;
+}
diff --git a/ui/src/components/molecules/singleSelect/index.tsx b/ui/src/components/molecules/singleSelect/index.tsx
new file mode 100644
index 0000000..6b550d5
--- /dev/null
+++ b/ui/src/components/molecules/singleSelect/index.tsx
@@ -0,0 +1,98 @@
+import React, { useEffect, useRef, useState } from 'react';
+import style from './SingleSelect.module.css';
+import DropdownWrapper from './../dropdownWrapper/index';
+import classNames from 'classnames';
+import { useHandleClickOutside, useMedia } from '../../../hooks';
+import SelectPlate from '../selectPlate';
+import CustomScrollList from '../customScrollList';
+import { LimitOptions } from '../../../comman/types';
+
+type SingleSelectProps = {
+ options: LimitOptions;
+ selectTitle?: string;
+ onChange: (value: any) => void;
+ initValue?: number;
+ notActive?: boolean;
+ disable?: boolean;
+ minWidth?: string;
+ maxHeight?: string;
+ btnHeight?: string;
+ className?: string;
+};
+
+const SingleSelect = ({
+ options,
+ selectTitle = '',
+ onChange,
+ initValue,
+ notActive,
+ disable,
+ minWidth,
+ maxHeight,
+ btnHeight,
+ className,
+}: SingleSelectProps): JSX.Element => {
+ const [selected, setSelected] = useState
+ (neededSize === 'small' ? onShowClick() : null)}
+ />
+ {neededSize !== 'small' && (
+
+ Sensitive Content
+ )}
+ {neededSize === 'large' && (
+
+ This image contains sensitive content which some people may find offensive or disturbing
+
+ )}
+ {neededSize !== 'small' && (
+
+ Show
+
+ )}
+
+ setExpanded(!expanded)}
+ expanded={expanded}
+ title={findTextByValue(selected) || selectTitle}
+ isActive={notActive !== null && notActive !== undefined ? !notActive : findTextByValue(selected)}
+ disable={disable}
+ minWidth={minWidth}
+ height={btnHeight}
+ />
+ setExpanded(false)}
+ show={expanded}
+ parentRef={ref}
+ >
+
+ {options?.map((el) => (
+
+
+
+ );
+};
+
+export default SingleSelect;
diff --git a/ui/src/components/molecules/tooltipWrapper/index.tsx b/ui/src/components/molecules/tooltipWrapper/index.tsx
new file mode 100644
index 0000000..5a30465
--- /dev/null
+++ b/ui/src/components/molecules/tooltipWrapper/index.tsx
@@ -0,0 +1,69 @@
+import React, { Ref, useEffect, useState } from 'react';
+import FloatingTooltip from '../floatingTooltip';
+type TooltipWrapperProps = {
+ children: React.ReactNode;
+ tooltipText?: string;
+ controlRef?: Ref {
+ clickHandler(el.value);
+ }}
+ >
+ {el.text}
+
+ ))}
+
+ {children}
+
+
+
+ );
+};
+
+export default ValidatorAvatar;
diff --git a/ui/src/components/organisms/accountName/accountName.module.css b/ui/src/components/organisms/accountName/accountName.module.css
new file mode 100644
index 0000000..f58e82e
--- /dev/null
+++ b/ui/src/components/organisms/accountName/accountName.module.css
@@ -0,0 +1,78 @@
+.accountName {
+ width: 100%;
+ max-width: 100%;
+ display: flex;
+ align-items: center;
+}
+
+.nameRow {
+ width: 100%;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ color: rgba(0, 0, 0, 0.87);
+}
+
+.validator-avatar {
+ margin-right: 4px;
+}
+
+.name {
+ line-height: 18px;
+ width: calc(98% - 22px);
+ margin-left: 4px;
+ color: rgba(0, 0, 0, 0.8);
+}
+.name:hover {
+ text-decoration: none;
+ color: rgba(106, 144, 229, 0.87);
+}
+
+.name p {
+ margin-bottom: 0;
+}
+
+.nameNoRedirect:hover {
+ color: rgba(0, 0, 0, 0.8);
+}
+
+.pkRow {
+ display: flex;
+ align-items: center;
+}
+
+.pk {
+ min-width: 5px;
+ white-space: nowrap;
+ margin-left: 2px;
+}
+
+.pk span {
+ line-height: 18px;
+}
+.pkLink {
+ display: block;
+}
+
+.redirectIcon {
+ min-width: 14px;
+ margin-left: 2px;
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+}
+
+.redirectIcon > svg {
+ fill: #a9b5ff;
+}
+
+.zkLabel {
+ padding: 1px 6px;
+ background-color: #f0f1f5;
+ font-size: 12px;
+ color: rgba(156, 158, 166, 1);
+ margin-right: 6px;
+ border-radius: 4px;
+ width: max-content;
+ min-width: 26px;
+}
diff --git a/ui/src/components/organisms/accountName/index.tsx b/ui/src/components/organisms/accountName/index.tsx
new file mode 100644
index 0000000..c0ad4d3
--- /dev/null
+++ b/ui/src/components/organisms/accountName/index.tsx
@@ -0,0 +1,135 @@
+import React, { useRef, useEffect, useState } from 'react';
+import styles from './accountName.module.css';
+import classNames from 'classnames';
+import { useRouter } from 'next/router';
+import Link from 'next/link';
+import ValidatorAvatar from '../../molecules/validatorAvatar';
+import { CopyIcon } from '../../molecules/copyIcon';
+import { TruncateText } from '../../molecules/truncateText';
+import MiddleEllipsisCustom from '../../molecules/middleEllipsis';
+
+type AccountNameProps = {
+ className?: string;
+ pk?: string;
+ name?: string;
+ img?: string;
+ noRedirect?: boolean;
+ getRedirectLink?: (value: string) => string;
+ redirect?: string;
+ needTabRedirect?: boolean;
+};
+export default function AccountName({ className, pk, name, img, noRedirect, redirect }: AccountNameProps): JSX.Element {
+ const wrapperRef = useRef(null);
+ const ref = useRef();
+ const offsetWidth = wrapperRef?.current?.offsetWidth;
+ const [width, setWidth] = useState
+ {
+ setIsErrorFirst(true);
+ }}
+ loaderStyle={{ width: width, height: height }}
+ isLoading={isLoading}
+ />
+
+
+
+ );
+}
diff --git a/ui/src/components/organisms/table/Table.module.css b/ui/src/components/organisms/table/Table.module.css
new file mode 100644
index 0000000..512589b
--- /dev/null
+++ b/ui/src/components/organisms/table/Table.module.css
@@ -0,0 +1,144 @@
+.tableComponent {
+ background-color: var(--col-light);
+ border-radius: 9px 9px 0 0;
+}
+
+.bottomPagination {
+ position: static;
+}
+
+.noData {
+ padding-top: 16px;
+}
+
+.wrapper {
+ min-width: 100%;
+ display: flex;
+ position: relative;
+}
+
+.table {
+ min-width: 100%;
+ display: grid;
+}
+
+.cell {
+ position: relative;
+ font-size: 14px;
+ color: var(--col--dark);
+ line-height: 16px;
+ border-bottom: 0.5px solid var(--col--gray8);
+ padding-right: 20px;
+ background-color: var(--col-light);
+ transition: all ease 150ms;
+}
+
+.headerCell {
+ display: flex;
+ background-color: var(--col-light);
+ z-index: 10;
+ padding-right: 20px;
+ border-top: 0.5px solid var(--col--gray8);
+ padding-top: 0;
+ transition: none;
+}
+
+.infoTooltip {
+ margin-right: 4px;
+}
+
+.cellContentWrapper {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+ padding: 14px 0;
+}
+
+.loadingScreen {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+}
+
+.noDataNoPagination {
+ padding-top: 0;
+}
+
+.noTransform {
+ text-transform: none;
+}
+
+.borderHeader {
+ border-bottom: none;
+}
+
+.tableFiltersContainer {
+ width: 100%;
+ padding: 16px;
+ border-bottom: 0.5px solid #0000000d;
+}
+
+.headerCellContent {
+ display: flex;
+ color: rgba(0, 0, 0, 0.8);
+ font-size: 12px;
+ line-height: 16px;
+ padding: 14px 0;
+ padding-top: 16px;
+}
+
+.headerCellCapitalize {
+ text-transform: capitalize;
+}
+
+.headerCellNoTransform {
+ text-transform: none;
+}
+
+@media (min-width: 1401px) {
+ .headerCell {
+ position: sticky;
+ }
+}
+
+@media (max-width: 1400px) {
+ .wrapper::after {
+ content: '';
+ position: absolute;
+ z-index: 11;
+ top: 1px;
+ right: 0;
+ bottom: 1px;
+ background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
+ width: 15%;
+ transition: all ease 200ms;
+ }
+
+ .warpper {
+ overflow-x: auto;
+ scrollbar-width: 0;
+ }
+ .warpper::-webkit-scrollbar {
+ display: none;
+ }
+
+ .wrapperNoFade::after {
+ content: '';
+ right: 0;
+ position: absolute;
+ width: 3px;
+ background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
+ }
+
+ .table {
+ white-space: nowrap;
+ overflow-x: scroll;
+ position: relative;
+ scrollbar-width: 0;
+ }
+
+ .table::-webkit-scrollbar {
+ display: none;
+ }
+}
diff --git a/ui/src/components/organisms/table/columnWrapper.tsx b/ui/src/components/organisms/table/columnWrapper.tsx
new file mode 100644
index 0000000..5b47c3b
--- /dev/null
+++ b/ui/src/components/organisms/table/columnWrapper.tsx
@@ -0,0 +1,65 @@
+import classNames from 'classnames';
+import React from 'react';
+import style from './Table.module.css';
+import { useMedia } from '../../../hooks';
+
+const ColumnWrapper = ({
+ children,
+ config,
+ data,
+ rowIndex,
+ setHovered,
+ hovered,
+ active,
+ isFirst,
+ isLast,
+ disableBorder,
+ onRowClick,
+}) => {
+ const {
+ greater: { sm: smScreen, lg: lgScreen },
+ } = useMedia();
+
+ const radius = hovered && (isFirst ? '9px 0 0 9px' : isLast && '0 9px 9px 0');
+ const mobilePaddingRight = !smScreen && config.style?.mobilePaddingRight;
+ const tabletPaddingRight =
+ (smScreen && !lgScreen && config.style?.tabletPaddingRight) || config.style?.paddingRight;
+
+ const mobileWidth = !smScreen && config.style?.mobileWidth;
+ const tabletWidth = (smScreen && !lgScreen && config.style?.tabletWidth) || config.style?.width;
+
+ const mobileMinWidth = !smScreen && config.style?.mobileMinWidth;
+ const tabletMinWidth = (smScreen && !lgScreen && config.style?.tabletMinWidth) || config.style?.minWidth;
+
+ const backgroundColorActive = active && '#F7F9FF';
+ const backgroundColorHovered = (hovered && '#FAFAFC') || '#fff';
+ return (
+
+ {name === null || name === undefined ? null : (
+
+
+ {name} }
+
+ ) : (
+
+ {{name} }
+
+ )}
+
+ )}
+ {pk ? (
+
+ {finalNoRedirect ? (
+ {
+ navigator.clipboard.writeText(pk);
+ }}
+ />
+
+ ) : (
+ '-'
+ )}
+
+ {ellipsis({
+ text: pk,
+ noRedirect: true,
+ })}
+
+ ) : (
+
+ {ellipsis({
+ text: pk,
+ })}
+
+ )}
+ setHovered(true)}
+ onMouseLeave={() => setHovered(false)}
+ onClick={onRowClick ? () => onRowClick(data, rowIndex) : null}
+ >
+
+ );
+};
+
+export default ColumnWrapper;
diff --git a/ui/src/components/organisms/table/errorMessage.tsx b/ui/src/components/organisms/table/errorMessage.tsx
new file mode 100644
index 0000000..58bfce5
--- /dev/null
+++ b/ui/src/components/organisms/table/errorMessage.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import ClearIcon from './img/clear.svg';
+
+import styles from './Table.module.css';
+import Image from 'next/image';
+
+const ErrorMessage = ({ errorText, onClearStr }) => {
+ return (
+
+ {children}
+
+
+
+ );
+};
+export default ErrorMessage;
diff --git a/ui/src/components/organisms/table/img/ChevronIcon.svg b/ui/src/components/organisms/table/img/ChevronIcon.svg
new file mode 100644
index 0000000..97e4524
--- /dev/null
+++ b/ui/src/components/organisms/table/img/ChevronIcon.svg
@@ -0,0 +1,3 @@
+
diff --git a/ui/src/components/organisms/table/img/SortIcon.svg b/ui/src/components/organisms/table/img/SortIcon.svg
new file mode 100644
index 0000000..5491805
--- /dev/null
+++ b/ui/src/components/organisms/table/img/SortIcon.svg
@@ -0,0 +1,3 @@
+
diff --git a/ui/src/components/organisms/table/img/clear.svg b/ui/src/components/organisms/table/img/clear.svg
new file mode 100644
index 0000000..65723bc
--- /dev/null
+++ b/ui/src/components/organisms/table/img/clear.svg
@@ -0,0 +1,3 @@
+
diff --git a/ui/src/components/organisms/table/index.tsx b/ui/src/components/organisms/table/index.tsx
new file mode 100644
index 0000000..cccbe0f
--- /dev/null
+++ b/ui/src/components/organisms/table/index.tsx
@@ -0,0 +1,202 @@
+import React, { useEffect, useRef, useState } from 'react';
+import TableHeader from './tableHeader';
+import TableBody from './tableBody';
+import style from './Table.module.css';
+import classNames from 'classnames';
+import Pagination from '../../molecules/pagination';
+import { useIsFullyScrolled } from '../../../hooks';
+import { TableErrorMessage } from '../../atoms/tableErrorMessage';
+import { LimitOptions, TableConfig } from '../../../comman/types';
+import loader from '../../../../public/assets/loader.gif';
+import Image from 'next/image';
+
+type TableProps = {
+ data: any[];
+ config: TableConfig[];
+ isLoading: boolean;
+ currentPage: number;
+ pagesCount: number;
+ pageLimit: number;
+ totalElements: number;
+ onPageChange: (value: number) => void;
+ onLimitChange: (value: number) => void;
+ customShowingText?: string;
+ sortBy: string;
+ orderBy: string;
+ initialOrderBy?: string;
+ onSortChange?: (value: string) => void;
+ onOrderChange?: (value: string) => void;
+
+ onRowClick?: () => void;
+ activeRowIndex?: number;
+ limitOptions?: LimitOptions;
+ hidePagination?: boolean;
+ classnames?: string;
+ needPagination?: boolean;
+ hideTopPagination?: boolean;
+ noPadding?: boolean;
+ noFullMobileWidth?: boolean;
+ onClearStr?: () => void;
+ registerUrl?: string;
+ noFade?: boolean;
+ totalCount?: number;
+ type?: string;
+ filtersChild?: string;
+};
+
+const Table = ({
+ data,
+ config,
+ isLoading,
+ // pagination props
+ currentPage = 0,
+ pagesCount = 1,
+ pageLimit = 50,
+ totalElements = data?.length ?? 0,
+ onPageChange,
+ onLimitChange,
+ customShowingText,
+ sortBy,
+ orderBy,
+ initialOrderBy,
+ onSortChange,
+ onOrderChange,
+ onRowClick,
+ activeRowIndex,
+ limitOptions,
+ hidePagination,
+ classnames,
+ hideTopPagination,
+ noPadding,
+ noFullMobileWidth = false,
+ onClearStr,
+ registerUrl,
+ noFade,
+ totalCount,
+ type,
+ // render props
+ filtersChild = null,
+}: TableProps) => {
+ const [elements, setElements] = useState(totalElements);
+
+ useEffect(() => {
+ setElements(totalElements);
+ }, [totalElements]);
+
+ const wrapperRef = useRef(null);
+ const { fullyScrolled, isScrolled } = useIsFullyScrolled(wrapperRef);
+
+ useEffect(() => {
+ wrapperRef.current?.scrollTo({
+ left: 0,
+ behavior: 'smooth',
+ });
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [wrapperRef.current, isLoading]);
+
+ const offset = pageLimit * currentPage;
+
+ const generateTemplateColumn = (config) =>
+ config.map((el) => el?.style?.outerWidth ?? (el?.style?.noGrow ? 'auto' : '1fr')).join(' ');
+
+ const showPagination = totalElements > (limitOptions?.length > 0 ? limitOptions[0]?.value ?? 50 : 50);
+
+ const showErrorMessage = !isLoading && (!data || data?.length < 1 || !Object.values(data)?.length);
+
+ return (
+ {errorText ?? 'There is no data yet'}
+ {onClearStr && ( + + )} +
+ {filtersChild ?
+ );
+};
+
+export default Table;
diff --git a/ui/src/components/organisms/table/tableBody.tsx b/ui/src/components/organisms/table/tableBody.tsx
new file mode 100644
index 0000000..dc2f7d2
--- /dev/null
+++ b/ui/src/components/organisms/table/tableBody.tsx
@@ -0,0 +1,24 @@
+import React, { useState } from 'react';
+import TableRow from './tableRow';
+
+const TableBody = ({ data, config, currentPage, onRowClick, activeRowIndex }) => {
+ const [hoveredRow, setHoveredRow] = useState(null);
+
+ return data && Object.entries(data).length < 1
+ ? null
+ : data?.map((row, i) => (
+ {filtersChild}
: null}
+ {config && (
+ <>
+ {!hidePagination && !hideTopPagination && (
+
+
+ {isLoading && (
+
+
+
+
+ )}
+ {showErrorMessage &&
+
+ );
+ });
+};
+
+export default TableHeader;
diff --git a/ui/src/components/organisms/table/tableRow.tsx b/ui/src/components/organisms/table/tableRow.tsx
new file mode 100644
index 0000000..a4a6587
--- /dev/null
+++ b/ui/src/components/organisms/table/tableRow.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import ColumnWrapper from './columnWrapper';
+import TableColumn from './templates/index';
+
+const TableRow = ({ rowData, config, index, currentPage, hoveredRow, setHoveredRow, onRowClick, activeRowIndex }) => {
+ return config?.map((el, i) => (
+
+ sortClickHandler(el.sortBy, el.initialOrder) : null}>
+ {el.headerText ?? ''}
+
+ {el.sortBy && el.sortBy === sortBy && (
+
+
+ config.fields.getRedirectLink(pk, data[config.fields.isValidator])
+ : null
+ }
+ noRedirect={noRedirect}
+ />
+
+ );
+};
+
+export default AccountTemplate;
diff --git a/ui/src/components/organisms/table/templates/amountTemplate/index.module.css b/ui/src/components/organisms/table/templates/amountTemplate/index.module.css
new file mode 100644
index 0000000..f48af85
--- /dev/null
+++ b/ui/src/components/organisms/table/templates/amountTemplate/index.module.css
@@ -0,0 +1,7 @@
+.addionValue {
+ font-size: 10px;
+ color: var(--col--gray4);
+ line-height: 16px;
+ text-transform: uppercase;
+ margin-left: 5px;
+}
diff --git a/ui/src/components/organisms/table/templates/amountTemplate/index.tsx b/ui/src/components/organisms/table/templates/amountTemplate/index.tsx
new file mode 100644
index 0000000..0c50ef2
--- /dev/null
+++ b/ui/src/components/organisms/table/templates/amountTemplate/index.tsx
@@ -0,0 +1,29 @@
+import classNames from 'classnames';
+import styles from './index.module.css';
+import { formatNum } from '../../../../../comman/helpers';
+
+type AmountTemplateProps = {
+ data: any;
+ config: {
+ fields: {
+ value: string;
+ additionValue?: string;
+ };
+ };
+};
+
+const AmountTemplate = ({ data, config }: AmountTemplateProps): JSX.Element => {
+ const value = data[config.fields.value];
+ const additionValue = data[config.fields.additionValue] || config.fields.additionValue;
+
+ return (
+
+ <>
+ {formatNum(value, 2, true, true)}
+ {additionValue && {additionValue}}
+
+
+ );
+};
+
+export default AmountTemplate;
diff --git a/ui/src/components/organisms/table/templates/index.module.css b/ui/src/components/organisms/table/templates/index.module.css
new file mode 100644
index 0000000..4246913
--- /dev/null
+++ b/ui/src/components/organisms/table/templates/index.module.css
@@ -0,0 +1,31 @@
+
+.stringTemplate {
+ font-size: 14px;
+ color: var(--col--dark);
+ line-height: 16px;
+}
+
+.stringTemplateAdionValue {
+ font-size: 10px;
+ color: var(--col--gray4);
+ line-height: 16px;
+ text-transform: uppercase;
+ margin-left: 5px;
+}
+
+.accountTemplate {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ gap: 3px;
+}
+
+.accountTemplate > span {
+ display: flex;
+ align-items: center;
+}
+
+.accountTemplateIcon svg {
+ width: 10px;
+ height: 10px;
+}
diff --git a/ui/src/components/organisms/table/templates/index.tsx b/ui/src/components/organisms/table/templates/index.tsx
new file mode 100644
index 0000000..31db6dc
--- /dev/null
+++ b/ui/src/components/organisms/table/templates/index.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import StringTemplate from './stringTemplate';
+import AccountTemplate from './accountTemplate/accountTemplate';
+import AmountTemplate from './amountTemplate';
+
+const TableColumn = ({ data, config, index }) => {
+ const getTemplate = (data, config, index) => {
+ switch (config.columnTemplate) {
+ case 'string':
+ return
+ {isShowDash ? (
+ '-'
+ ) : (
+ <>
+ {prefix}
+ {!valFunc ? value : valFunc(value)}
+ {postfix}
+ {additionValue && {additionValue}}
+
+ )}
+
+ );
+};
+
+export default StringTemplate;
diff --git a/ui/src/hooks/index.ts b/ui/src/hooks/index.ts
new file mode 100644
index 0000000..554c202
--- /dev/null
+++ b/ui/src/hooks/index.ts
@@ -0,0 +1,6 @@
+export { useIsFullyScrolled } from './useIsFullyScrolled';
+export { useTable } from './useTable';
+export { useMedia } from './useMedia';
+export { useWindowResize } from './useWindowResize';
+export { useHandleClickOutside } from './useHandleClickOutside';
+export { useSpaceToRight } from './useSpaceToRight';
diff --git a/ui/src/hooks/useHandleClickOutside.ts b/ui/src/hooks/useHandleClickOutside.ts
new file mode 100644
index 0000000..94f4743
--- /dev/null
+++ b/ui/src/hooks/useHandleClickOutside.ts
@@ -0,0 +1,24 @@
+import { useCallback, useEffect } from 'react';
+
+export const useHandleClickOutside = (ref, callback) => {
+ const handleClickOutside = useCallback(
+ (e) => {
+ if (Array.isArray(ref)) {
+ const trigger = ref.filter((el) => e.composedPath().includes(el)).length < 1;
+ if (trigger) callback();
+ } else {
+ const current = ref;
+ if (!current) return;
+ if (!e.composedPath().includes(current)) {
+ callback();
+ }
+ }
+ },
+ [ref, callback]
+ );
+
+ useEffect(() => {
+ document.addEventListener('click', handleClickOutside, false);
+ return () => document.removeEventListener('click', handleClickOutside, false);
+ }, [ref]);
+};
diff --git a/ui/src/hooks/useIsFullyScrolled.ts b/ui/src/hooks/useIsFullyScrolled.ts
new file mode 100644
index 0000000..abd5061
--- /dev/null
+++ b/ui/src/hooks/useIsFullyScrolled.ts
@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+
+export const useIsFullyScrolled = (ref, triggerOffset = 0) => {
+ const [fullyScrolled, setFullyScrolled] = useState(false);
+ const [isScrolled, setIsScrolled] = useState(false);
+ const isFullyScrolledCheck = ({ target }) => {
+ if (!target) return setFullyScrolled(false);
+ target.offsetWidth + target.scrollLeft >= target.scrollWidth - triggerOffset
+ ? setFullyScrolled(true)
+ : setFullyScrolled(false);
+ };
+
+ const setIsScrolledOrNot = (ref) => {
+ if (!ref) return null;
+ if (ref.current?.scrollWidth > ref.current?.clientWidth) {
+ return setIsScrolled(true);
+ }
+ return setIsScrolled(false);
+ };
+
+ useEffect(() => {
+ isFullyScrolledCheck({ target: ref.current });
+ setIsScrolledOrNot(ref);
+ ref.current?.addEventListener('scroll', isFullyScrolledCheck);
+ ref.current?.addEventListener('load', isFullyScrolledCheck);
+ return () => {
+ ref.current?.removeEventListener('scroll', isFullyScrolledCheck);
+ ref.current?.removeEventListener('load', isFullyScrolledCheck);
+ };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [ref.current, ref.current?.scrollWidth]);
+
+ return { fullyScrolled, isScrolled };
+};
diff --git a/ui/src/hooks/useMedia.ts b/ui/src/hooks/useMedia.ts
new file mode 100644
index 0000000..5b552e2
--- /dev/null
+++ b/ui/src/hooks/useMedia.ts
@@ -0,0 +1,68 @@
+import { useEffect, useState, useCallback } from 'react';
+import _, { debounce } from 'lodash';
+
+export const useMedia = (query?: string | number) => {
+ let innerWidth;
+ if (typeof window !== 'undefined') {
+ innerWidth = window.innerWidth;
+ }
+ const [width, setWidth] = useState(innerWidth);
+ const [dimensions, setDimensions] = useState({
+ xs: width <= 576,
+ sm: width > 576 && width <= 768,
+ md: width > 768 && width <= 992,
+ lg: width > 992 && width <= 1200,
+ xl: width > 1200 && width <= 1400,
+ xxl: width > 1400,
+ });
+ const [greater, setGreater] = useState({
+ xs: width > 576,
+ sm: width > 768,
+ md: width > 992,
+ lg: width > 1200,
+ xl: width > 1400,
+ });
+ const [isGreaterThanQuery, setIsGreaterThanQuery] = useState(true);
+
+ const debouncedUpdateWidth = useCallback(
+ debounce(() => setWidth(innerWidth), 200),
+ []
+ );
+
+ useEffect(() => {
+ window.addEventListener('resize', debouncedUpdateWidth);
+ return () => {
+ window.removeEventListener('resize', debouncedUpdateWidth);
+ };
+ }, [debouncedUpdateWidth]);
+
+ useEffect(() => {
+ setDimensions({
+ xs: width <= 576,
+ sm: width > 576 && width <= 768,
+ md: width > 768 && width <= 992,
+ lg: width > 992 && width <= 1200,
+ xl: width > 1200 && width <= 1400,
+ xxl: width > 1400,
+ });
+ setGreater({
+ xs: width > 576,
+ sm: width > 768,
+ md: width > 992,
+ lg: width > 1200,
+ xl: width > 1400,
+ });
+ }, [width]);
+
+ useEffect(() => {
+ setIsGreaterThanQuery(width > Number(query));
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [width]);
+
+ return {
+ width,
+ dimensions,
+ isGreaterThanQuery,
+ greater,
+ };
+};
diff --git a/ui/src/hooks/useSpaceToRight.ts b/ui/src/hooks/useSpaceToRight.ts
new file mode 100644
index 0000000..4c5fde5
--- /dev/null
+++ b/ui/src/hooks/useSpaceToRight.ts
@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+import { useWindowResize } from './useWindowResize';
+
+export const useSpaceToRight = (ref, width) => {
+ const [hasSpaceToRight, setHasSpaceToRight] = useState(true);
+
+ const calculateSpaceToRight = (obj) => {
+ if (!obj) return;
+ return window.innerWidth - obj.getBoundingClientRect().left;
+ };
+
+ useEffect(() => {
+ setHasSpaceToRight(calculateSpaceToRight(ref) > width);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [ref]);
+
+ useWindowResize(() => setHasSpaceToRight(calculateSpaceToRight(ref) > width));
+
+ return hasSpaceToRight;
+};
diff --git a/ui/src/hooks/useTable.ts b/ui/src/hooks/useTable.ts
new file mode 100644
index 0000000..0f235ad
--- /dev/null
+++ b/ui/src/hooks/useTable.ts
@@ -0,0 +1,55 @@
+import { useEffect, useState } from 'react';
+
+export const useTable = ({ defaultState }) => {
+ let url;
+ if (typeof window !== 'undefined') {
+ url = window?.location.href;
+ }
+ const [page, setPage] = useState
+ {
+ setPage(data);
+ }}
+ onLimitChange={(data) => {
+ setLimit(data);
+ }}
+ onOrderChange={(data) => {
+ setOrderBy(data);
+ }}
+ onSortChange={(data) => {
+ setSortBy(data);
+ }}
+ limitOptions={limitOptions}
+ />
+
+
+ );
+}
diff --git a/ui/src/styles/globals.css b/ui/src/styles/globals.css
new file mode 100644
index 0000000..011a40e
--- /dev/null
+++ b/ui/src/styles/globals.css
@@ -0,0 +1,283 @@
+html,
+body {
+ margin: 0;
+ padding: 0;
+ font-family: var(--ff--inter-regular);
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 133%;
+ color: var(--col--dark);
+ background-color: var(--col--light);
+}
+
+* {
+ box-sizing: border-box !important;
+}
+
+a {
+ text-decoration: none;
+ color: inherit;
+}
+
+a:hover {
+ text-decoration: none;
+}
+
+#root {
+ height: 100vh;
+}
+
+#main {
+ max-width: var(--desktop-width);
+ margin: auto;
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+}
+
+#main footer {
+ margin-top: auto;
+}
+
+.sticky-top {
+ position: -webkit-sticky;
+ /* Safari */
+ position: sticky;
+ top: 0;
+ z-index: 999;
+}
+
+.web-nav {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ height: 85px;
+ background-color: var(--col--dark);
+ color: white;
+}
+
+.links {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: flex-start;
+ width: 100%;
+}
+
+.richText > * {
+ list-style: none;
+ padding: 0px;
+}
+
+.menu-item-subcategory {
+ color: var(--col--primary1);
+}
+
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+ -webkit-appearance: none;
+ margin: 0;
+}
+
+/* Firefox */
+input[type='number'] {
+ -moz-appearance: textfield;
+}
+
+/** Typography */
+
+p {
+ margin: 0;
+}
+
+/** Lists */
+ul {
+ list-style: none;
+}
+
+ul li {
+ position: relative;
+ padding-left: 1em;
+}
+
+ul li::before {
+ content: '\2022';
+ color: var(--col--primary1);
+ font-size: inherit;
+ font-weight: inherit;
+ line-height: inherit;
+ position: absolute;
+ left: 0;
+ width: 1em;
+}
+
+ol {
+ list-style: none;
+ counter-reset: li;
+}
+
+ol li {
+ counter-increment: li;
+ position: relative;
+ padding-left: 1em;
+}
+
+ol li::before {
+ content: counter(li);
+ color: var(--col--primary1);
+ font-size: inherit;
+ font-weight: inherit;
+ line-height: inherit;
+ position: absolute;
+ left: 0;
+ width: 1em;
+}
+
+ul li,
+ol li {
+ font-size: var(--li-md-size, 16px);
+ line-height: var(--li-md-line-height, 24px);
+}
+
+@media screen and (min-width: 960px) {
+ ul li,
+ ol li {
+ font-size: var(--li-lg-size, 18px);
+ line-height: var(--li-lf-line-height, 28px);
+ }
+}
+
+/** Links */
+
+.link-secondary-active,
+.link-primary-active {
+ font-family: var(--ff--link);
+ font-style: normal;
+ font-weight: normal;
+ text-decoration-line: underline;
+ text-transform: uppercase;
+ cursor: pointer;
+}
+
+.link-secondary-active {
+ font-size: 14px;
+ line-height: 18px;
+}
+
+.link-primary-active {
+ font-size: 18px;
+ line-height: 22px;
+}
+
+@media screen and (max-width: 960px) {
+ .link-primary-active {
+ font-size: 14px;
+ line-height: 18px;
+ }
+}
+
+/* Truncate */
+
+/* single line */
+.truncate {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+/* multi line */
+.truncate-at-2,
+.truncate-at-3,
+.truncate-at-4,
+.truncate-at-5 {
+ display: block;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.truncate-at-2 {
+ -webkit-line-clamp: 2;
+}
+
+.truncate-at-3 {
+ -webkit-line-clamp: 3;
+}
+
+.truncate-at-4 {
+ -webkit-line-clamp: 4;
+}
+
+.truncate-at-5 {
+ -webkit-line-clamp: 5;
+}
+
+_:-ms-fullscreen,
+:root .truncate-at-2,
+.truncate-at-3,
+.truncate-at-4,
+.truncate-at-5 {
+ white-space: nowrap;
+}
+
+.visually-hidden {
+ clip: rect(0 0 0 0);
+ clip-path: inset(50%);
+ height: 1px;
+ overflow: hidden;
+ position: absolute;
+ white-space: nowrap;
+ width: 1px;
+}
+
+.container {
+ width: 100%;
+ margin: 0 auto;
+}
+
+@media (max-width: 576px) {
+ .container {
+ padding: 0 16px;
+ max-width: 575px;
+ }
+}
+
+@media (min-width: 577px) {
+ .container {
+ max-width: 540px;
+ }
+}
+
+@media (min-width: 769px) {
+ .container {
+ max-width: 720px;
+ }
+}
+
+@media (min-width: 993px) {
+ .container {
+ max-width: 960px;
+ }
+}
+
+@media (min-width: 1201px) {
+ .container {
+ max-width: 1140px;
+ }
+}
+
+@media (min-width: 1401px) {
+ .container {
+ max-width: 1320px;
+ }
+}
+
+.app {
+ max-width: var(--desktop-width);
+ margin: auto;
+ display: flex;
+ flex-direction: column;
+ min-height: var(--app-height);
+}
diff --git a/ui/tsconfig.json b/ui/tsconfig.json
new file mode 100644
index 0000000..878ec74
--- /dev/null
+++ b/ui/tsconfig.json
@@ -0,0 +1,27 @@
+{
+ "ts-node": {
+ "compilerOptions": {
+ "module": "CommonJS"
+ }
+ },
+ "compilerOptions": {
+ "target": "es2017",
+ "lib": ["dom", "dom.iterable", "esnext", "es2019.array"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": false,
+ "forceConsistentCasingInFileNames": true,
+ "noEmit": true,
+ "allowSyntheticDefaultImports": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "strictNullChecks": false,
+ "incremental": true
+ },
+ "exclude": ["node_modules"],
+ "include": ["@types/**/*.d.ts", "**/*.ts", "**/*.tsx", "src/configs/env.js"]
+}
diff --git a/ui/types.d.ts b/ui/types.d.ts
new file mode 100644
index 0000000..60bd434
--- /dev/null
+++ b/ui/types.d.ts
@@ -0,0 +1,4 @@
+declare module '*.svg' {
+ const content: any;
+ export default content;
+}