lthn/trade-frontend
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Merge pull request #40 from jejolare-dev/feat/zano_ui_integration

Browse source 
feat: integrate submodule & fix svgr imports
This commit is contained in:
Dmitrii Kolpakov 2026-01-17 19:41:49 +07:00 • committed by GitHub
commit c1df21aa17
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
45 changed files with 136 additions and 232 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
.gitmodules vendored Normal file
View file

@ -0,0 +1,3 @@
[submodule "submodules/zano_ui"]
path = submodules/zano_ui
url = https://github.com/PRavaga/zano_ui.git

12
next.config.js
View file

@ -17,8 +17,16 @@ const nextConfig = {
}, },
webpack: (config) => { webpack: (config) => {
config.module.rules.push({ config.module.rules.push({
test: /\.svg$/, test: /\.svg$/i,
use: ['@svgr/webpack', 'url-loader'], resourceQuery: /url/, // *.svg?url
type: 'asset/resource',
});
config.module.rules.push({
test: /\.svg$/i,
issuer: /\.[jt]sx?$/,
resourceQuery: { not: [/url/] },
use: ['@svgr/webpack'],
}); });
return config; return config;

3
package.json
View file

@ -11,7 +11,8 @@
"eslint": "eslint . --ext .js,.ts,.tsx,.jsx --fix", "eslint": "eslint . --ext .js,.ts,.tsx,.jsx --fix",
"format": "prettier --write .", "format": "prettier --write .",
"format:check": "prettier --check .", "format:check": "prettier --check .",
"prepare": "husky" "prepare": "husky",
"submodule": "git submodule update --init --recursive"
}, },
"lint-staged": { "lint-staged": {
"*.{js,jsx,ts,tsx}": [ "*.{js,jsx,ts,tsx}": [

6
src/components/UI/Alert/Alert.tsx
View file

@ -1,7 +1,7 @@
import Popup from '@/components/UI/Popup/Popup'; import Popup from '@/components/UI/Popup/Popup';
import successIcon from '@/assets/images/UI/success.svg'; import successIcon from '@/assets/images/UI/success.svg?url';
import smallCrossIcon from '@/assets/images/UI/cross_icon_small.svg'; import smallCrossIcon from '@/assets/images/UI/cross_icon_small.svg?url';
import errorIcon from '@/assets/images/UI/error.svg'; import errorIcon from '@/assets/images/UI/error.svg?url';
import AlertProps from '@/interfaces/props/components/UI/Alert/AlertProps'; import AlertProps from '@/interfaces/props/components/UI/Alert/AlertProps';
import Preloader from '../Preloader/Preloader'; import Preloader from '../Preloader/Preloader';
import styles from './Alert.module.scss'; import styles from './Alert.module.scss';

2
src/components/UI/CurrencyDropdown/CurrencyDropdown.tsx
View file

@ -1,4 +1,4 @@
import { ReactComponent as DropdownArrowIcon } from '@/assets/images/UI/dropdown_arrow.svg'; import DropdownArrowIcon from '@/assets/images/UI/dropdown_arrow.svg';
import { useContext, useEffect, useRef, useState } from 'react'; import { useContext, useEffect, useRef, useState } from 'react';
import Image from 'next/image'; import Image from 'next/image';
import { nanoid } from 'nanoid'; import { nanoid } from 'nanoid';

4
src/components/UI/DateRangeSelector/DateRangeSelector.tsx
View file

@ -1,5 +1,5 @@
import { ReactComponent as CalendarIcon } from '@/assets/images/UI/callendar.svg'; import CalendarIcon from '@/assets/images/UI/callendar.svg';
import { ReactComponent as CalendarArrowIcon } from '@/assets/images/UI/calendar_arrow.svg'; import CalendarArrowIcon from '@/assets/images/UI/calendar_arrow.svg';
import { useRef, useState, useEffect, ReactNode } from 'react'; import { useRef, useState, useEffect, ReactNode } from 'react';
import { nanoid } from 'nanoid'; import { nanoid } from 'nanoid';
import { toStandardDateString } from '@/utils/utils'; import { toStandardDateString } from '@/utils/utils';

2
src/components/UI/DepositTitle/DepositTitle.tsx
View file

@ -1,4 +1,4 @@
import { ReactComponent as LockIcon } from '@/assets/images/UI/lock.svg'; import LockIcon from '@/assets/images/UI/lock.svg';
import styles from './DepositTitle.module.scss'; import styles from './DepositTitle.module.scss';
import EmptyLink from '../EmptyLink/EmptyLink'; import EmptyLink from '../EmptyLink/EmptyLink';

6
src/components/UI/Dropdown/Dropdown.tsx
View file

@ -1,6 +1,6 @@
import { ReactComponent as DropdownArrowIcon } from '@/assets/images/UI/dropdown_arrow.svg'; import DropdownArrowIcon from '@/assets/images/UI/dropdown_arrow.svg';
import { ReactComponent as SearchIcon } from '@/assets/images/UI/search_icon.svg'; import SearchIcon from '@/assets/images/UI/search_icon.svg';
import { ReactComponent as StarIcon } from '@/assets/images/UI/star_icon.svg'; import StarIcon from '@/assets/images/UI/star_icon.svg';
import Image from 'next/image'; import Image from 'next/image';
import { useState, useEffect, useRef, useContext, MouseEvent } from 'react'; import { useState, useEffect, useRef, useContext, MouseEvent } from 'react';
import { Store } from '@/store/store-reducer'; import { Store } from '@/store/store-reducer';

2
src/components/UI/EmptyMessage/index.tsx
View file

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { ReactComponent as NoOffersIcon } from '@/assets/images/UI/no_offers.svg'; import NoOffersIcon from '@/assets/images/UI/no_offers.svg';
import { classes } from '@/utils/utils'; import { classes } from '@/utils/utils';
import styles from './styles.module.scss'; import styles from './styles.module.scss';
import { EmptyMessageProps } from './types'; import { EmptyMessageProps } from './types';

2
src/components/UI/Filters/Filters.tsx
View file

@ -1,5 +1,5 @@
import Button from '@/components/UI/Button/Button'; import Button from '@/components/UI/Button/Button';
import { ReactComponent as RefreshIcon } from '@/assets/images/UI/refresh_icon.svg'; import RefreshIcon from '@/assets/images/UI/refresh_icon.svg';
import Input from '@/components/UI/Input/Input'; import Input from '@/components/UI/Input/Input';
import CurrencyDropdown from '@/components/UI/CurrencyDropdown/CurrencyDropdown'; import CurrencyDropdown from '@/components/UI/CurrencyDropdown/CurrencyDropdown';
import FiltersProps from '@/interfaces/props/components/UI/Filters/FiltersProps'; import FiltersProps from '@/interfaces/props/components/UI/Filters/FiltersProps';

2
src/components/default/BackButton/BackButton.tsx
View file

@ -1,4 +1,4 @@
import { ReactComponent as ArrowWhiteIcon } from '@/assets/images/UI/arrow_white.svg'; import ArrowWhiteIcon from '@/assets/images/UI/arrow_white.svg';
import Button from '@/components/UI/Button/Button'; import Button from '@/components/UI/Button/Button';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { classes } from '@/utils/utils'; import { classes } from '@/utils/utils';

41
src/components/default/Footer/Footer.module.scss
View file

@ -1,41 +0,0 @@
.footer {
padding: 30px 35px 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
margin-top: auto;
border-top: 1px solid var(--delimiter-color);
.footer__copyright {
p {
color: var(--font-dimmed-color);
font-size: 16px;
text-align: center;
}
}
.footer__refs {
width: 100%;
display: flex;
justify-content: center;
column-gap: 20px;
row-gap: 15px;
flex-wrap: wrap;
> a {
font-size: 16px;
&.footer__ref_selected {
color: var(--footer-selected-link);
pointer-events: none;
}
&.footer__ref_disabled {
opacity: 0.5;
pointer-events: none;
}
}
}
}

73
src/components/default/Footer/Footer.tsx
View file

@ -1,73 +0,0 @@
import { classes } from '@/utils/utils';
import Link from 'next/link';
import styles from './Footer.module.scss';
type SelectedLink = 'home' | 'explorer' | 'trade' | 'auction' | 'messenger' | 'wrapped-zano';
const links: {
title: string;
type: SelectedLink;
link: string;
disabled?: boolean;
}[] = [
{
title: 'Zano Website',
type: 'home',
link: 'https://zano.org/',
},
{
title: 'Explorer',
type: 'explorer',
link: 'https://explorer.zano.org/',
},
{
title: 'Trade',
type: 'trade',
link: 'https://trade.zano.org/',
},
{
title: 'Auction',
type: 'auction',
link: 'https://wrapped.zano.org/',
disabled: true,
},
{
title: 'Messenger',
type: 'messenger',
link: 'https://messenger.zano.org/',
},
{
title: 'Wrapped Zano',
type: 'wrapped-zano',
link: 'https://wrapped.zano.org/',
},
];
const selectedLink: SelectedLink = 'trade';
function Footer() {
return (
<footer className={styles.footer}>
<div className={styles.footer__refs}>
{links.map((e) => (
<Link
className={classes(
e.type === selectedLink && styles.footer__ref_selected,
e.disabled && styles.footer__ref_disabled,
)}
key={e.type}
href={e.link}
rel="noopener noreferrer"
>
{e.title}
</Link>
))}
</div>
<div className={styles.footer__copyright}>
<p>Copyright © {new Date().getFullYear()} ZANO.org</p>
</div>
</footer>
);
}
export default Footer;

30
src/components/default/Header/Header.tsx
View file

@ -1,17 +1,17 @@
import logoImg from '@/assets/images/UI/logo_block.svg'; import logoImg from '@/assets/images/UI/logo_block.svg?url';
import logoImgWhite from '@/assets/images/UI/logo_block_dark.svg'; import logoImgWhite from '@/assets/images/UI/logo_block_dark.svg?url';
import { ReactComponent as LogOutIcon } from '@/assets/images/UI/logout.svg'; import LogOutIcon from '@/assets/images/UI/logout.svg';
import { ReactComponent as BurgerIcon } from '@/assets/images/UI/hamburger_icon.svg'; import BurgerIcon from '@/assets/images/UI/hamburger_icon.svg';
import { ReactComponent as BurgerCrossIcon } from '@/assets/images/UI/burger_cross.svg'; import BurgerCrossIcon from '@/assets/images/UI/burger_cross.svg';
import React, { useRef, useState, useEffect, useContext } from 'react'; import React, { useRef, useState, useEffect, useContext } from 'react';
import { ReactComponent as EyeIcon } from '@/assets/images/UI/eye.svg'; import EyeIcon from '@/assets/images/UI/eye.svg';
import { ReactComponent as EyeCloseIcon } from '@/assets/images/UI/eye_close.svg'; import EyeCloseIcon from '@/assets/images/UI/eye_close.svg';
import zanoIcon from '@/assets/images/UI/zano.svg'; import zanoIcon from '@/assets/images/UI/zano.svg?url';
import bitcoinWhiteIcon from '@/assets/images/UI/wbtc.svg'; import bitcoinWhiteIcon from '@/assets/images/UI/wbtc.svg?url';
import sunIcon from '@/assets/images/UI/sun_icon.svg'; import sunIcon from '@/assets/images/UI/sun_icon.svg?url';
import moonIcon from '@/assets/images/UI/moon_icon.svg'; import moonIcon from '@/assets/images/UI/moon_icon.svg?url';
import ethWhiteIcon from '@/assets/images/UI/weth.svg'; import ethWhiteIcon from '@/assets/images/UI/weth.svg?url';
import customWhiteIcon from '@/assets/images/UI/tsds.svg'; import customWhiteIcon from '@/assets/images/UI/tsds.svg?url';
import Link from 'next/link'; import Link from 'next/link';
import Tooltip from '@/components/UI/Tooltip/Tooltip'; import Tooltip from '@/components/UI/Tooltip/Tooltip';
import Button from '@/components/UI/Button/Button'; import Button from '@/components/UI/Button/Button';
@ -28,7 +28,7 @@ import Decimal from 'decimal.js';
import socket from '@/utils/socket'; import socket from '@/utils/socket';
import { OrderDataWithPair } from '@/interfaces/responses/orders/GetOrdersPageRes'; import { OrderDataWithPair } from '@/interfaces/responses/orders/GetOrdersPageRes';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import zanoImg from '@/assets/images/UI/zano.svg'; import zanoImg from '@/assets/images/UI/zano.svg?url';
import useUpdateUser from '@/hook/useUpdateUser'; import useUpdateUser from '@/hook/useUpdateUser';
import NavBar from './NavBar/NavBar'; import NavBar from './NavBar/NavBar';
import styles from './Header.module.scss'; import styles from './Header.module.scss';
@ -139,7 +139,7 @@ function Header({ isLg }: { isLg?: boolean }) {
title="ZANO" title="ZANO"
amount={Number(assets.find((e) => e.ticker === 'ZANO')?.balance) || 0} amount={Number(assets.find((e) => e.ticker === 'ZANO')?.balance) || 0}
></Row> ></Row>
{/* <img {/* <img
onClick={() => setBalanceState(!balanceSeen)} onClick={() => setBalanceState(!balanceSeen)}
src={balanceSeen ? eyeCloseIcon : eyeIcon} alt="see" src={balanceSeen ? eyeCloseIcon : eyeIcon} alt="see"
style={!balanceSeen ? {opacity: "0.6"} : {}} style={!balanceSeen ? {opacity: "0.6"} : {}}

6
src/components/default/Header/NavBar/NavBar.tsx
View file

@ -1,9 +1,9 @@
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import Link from 'next/link'; import Link from 'next/link';
import { ReactComponent as TradeIcon } from '@/assets/images/UI/trade_icon.svg'; import TradeIcon from '@/assets/images/UI/trade_icon.svg';
import { ReactComponent as SwapIcon } from '@/assets/images/UI/swap_icon.svg'; import SwapIcon from '@/assets/images/UI/swap_icon.svg';
import { ReactComponent as PersonsIcon } from '@/assets/images/UI/persons_icon.svg'; import PersonsIcon from '@/assets/images/UI/persons_icon.svg';
import NavItemProps from '@/interfaces/props/components/default/Header/NavBar/NavItemProps'; import NavItemProps from '@/interfaces/props/components/default/Header/NavBar/NavItemProps';
import NavBarProps from '@/interfaces/props/components/default/Header/NavBar/NavBarProps'; import NavBarProps from '@/interfaces/props/components/default/Header/NavBar/NavBarProps';
import NotificationIndicator from '@/components/UI/NotificationIndicator/NotificationIndicator'; import NotificationIndicator from '@/components/UI/NotificationIndicator/NotificationIndicator';

2
src/components/default/MainPageTitle/MainPageTitle.tsx
View file

@ -1,4 +1,4 @@
import { ReactComponent as ArrowRight } from '@/assets/images/UI/arrow_blue_right.svg'; import ArrowRight from '@/assets/images/UI/arrow_blue_right.svg';
import { Store } from '@/store/store-reducer'; import { Store } from '@/store/store-reducer';
import { useContext } from 'react'; import { useContext } from 'react';
import MainPageTitleProps from '@/interfaces/props/components/default/MainPageTitle/MainPageTitleProps'; import MainPageTitleProps from '@/interfaces/props/components/default/MainPageTitle/MainPageTitleProps';

14
src/components/default/Offers/Offers.js
View file

@ -1,10 +1,10 @@
import arrowIcon from '@/assets/images/UI/arrow.svg'; import arrowIcon from '@/assets/images/UI/arrow.svg?url';
import lockIcon from '@/assets/images/UI/lock.svg'; import lockIcon from '@/assets/images/UI/lock.svg?url';
import crossIcon from '@/assets/images/UI/cross_icon.svg'; import crossIcon from '@/assets/images/UI/cross_icon.svg?url';
import deleteIcon from '@/assets/images/UI/delete.svg'; import deleteIcon from '@/assets/images/UI/delete.svg?url';
import editIcon from '@/assets/images/UI/edit.svg'; import editIcon from '@/assets/images/UI/edit.svg?url';
import noOffersIcon from '@/assets/images/UI/no_offers.svg'; import noOffersIcon from '@/assets/images/UI/no_offers.svg?url';
import noChatsIcon from '@/assets/images/UI/no_chats.svg'; import noChatsIcon from '@/assets/images/UI/no_chats.svg?url';
import Link from 'next/link'; import Link from 'next/link';
import Button from '@/components/UI/Button/Button'; import Button from '@/components/UI/Button/Button';
import Input from '@/components/UI/Input/Input'; import Input from '@/components/UI/Input/Input';

2
src/components/default/OrderNotification/OrderNotification.tsx
View file

@ -1,6 +1,6 @@
import { OrderDataWithPair } from '@/interfaces/responses/orders/GetOrdersPageRes'; import { OrderDataWithPair } from '@/interfaces/responses/orders/GetOrdersPageRes';
import Button from '@/components/UI/Button/Button'; import Button from '@/components/UI/Button/Button';
import { ReactComponent as CrossIcon } from '@/assets/images/UI/dex_cross_icon.svg'; import CrossIcon from '@/assets/images/UI/dex_cross_icon.svg';
import Image from 'next/image'; import Image from 'next/image';
import { notationToString, tradingKnownCurrencies } from '@/utils/utils'; import { notationToString, tradingKnownCurrencies } from '@/utils/utils';
import Link from 'next/link'; import Link from 'next/link';

2
src/components/default/PairsTable/PairsTable.tsx
View file

@ -3,7 +3,7 @@ import { memo, useContext, useMemo } from 'react';
import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'; import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import Image from 'next/image'; import Image from 'next/image';
import { ReactComponent as ClockIcon } from '@/assets/images/UI/clock_icon.svg'; import ClockIcon from '@/assets/images/UI/clock_icon.svg';
import { Store } from '@/store/store-reducer'; import { Store } from '@/store/store-reducer';
import PairData from '@/interfaces/common/PairData'; import PairData from '@/interfaces/common/PairData';
import { ContextState } from '@/interfaces/common/ContextValue'; import { ContextState } from '@/interfaces/common/ContextValue';

2
src/components/dex/InputPanelItem/index.tsx
View file

@ -10,7 +10,7 @@ import InputPanelItemProps from '@/interfaces/props/pages/dex/trading/InputPanel
import CreateOrderData from '@/interfaces/fetch-data/create-order/CreateOrderData'; import CreateOrderData from '@/interfaces/fetch-data/create-order/CreateOrderData';
import Decimal from 'decimal.js'; import Decimal from 'decimal.js';
import Alert from '@/components/UI/Alert/Alert'; import Alert from '@/components/UI/Alert/Alert';
import infoIcon from '@/assets/images/UI/info_alert_icon.svg'; import infoIcon from '@/assets/images/UI/info_alert_icon.svg?url';
import Image from 'next/image'; import Image from 'next/image';
import { useAlert } from '@/hook/useAlert'; import { useAlert } from '@/hook/useAlert';
import { buySellValues } from '@/constants'; import { buySellValues } from '@/constants';

2
src/components/dex/MatrixConnectionBadge/index.tsx
View file

@ -1,7 +1,7 @@
import Tooltip from '@/components/UI/Tooltip/Tooltip'; import Tooltip from '@/components/UI/Tooltip/Tooltip';
import { useEffect, useRef, useState } from 'react'; import { useEffect, useRef, useState } from 'react';
import { createPortal } from 'react-dom'; import { createPortal } from 'react-dom';
import { ReactComponent as ConnectionIcon } from '@/assets/images/UI/connection.svg'; import ConnectionIcon from '@/assets/images/UI/connection.svg';
import { classes } from '@/utils/utils'; import { classes } from '@/utils/utils';
import styles from './styles.module.scss'; import styles from './styles.module.scss';
import { MatrixConnectionBadgeProps } from './types'; import { MatrixConnectionBadgeProps } from './types';

10
src/components/dex/TradingHeader/index.tsx
View file

@ -1,10 +1,10 @@
import { ReactComponent as ClockIcon } from '@/assets/images/UI/clock_icon.svg'; import ClockIcon from '@/assets/images/UI/clock_icon.svg';
import { ReactComponent as UpIcon } from '@/assets/images/UI/up_icon.svg'; import UpIcon from '@/assets/images/UI/up_icon.svg';
import { ReactComponent as DownIcon } from '@/assets/images/UI/down_icon.svg'; import DownIcon from '@/assets/images/UI/down_icon.svg';
import { ReactComponent as VolumeIcon } from '@/assets/images/UI/volume_icon.svg'; import VolumeIcon from '@/assets/images/UI/volume_icon.svg';
import BackButton from '@/components/default/BackButton/BackButton'; import BackButton from '@/components/default/BackButton/BackButton';
import { roundTo, notationToString, classes } from '@/utils/utils'; import { roundTo, notationToString, classes } from '@/utils/utils';
import questionIcon from '@/assets/images/UI/question.svg'; import questionIcon from '@/assets/images/UI/question.svg?url';
import Image from 'next/image'; import Image from 'next/image';
import { useTour } from '@/store/guide-provider'; import { useTour } from '@/store/guide-provider';
import styles from './styles.module.scss'; import styles from './styles.module.scss';

2
src/pages/_app.tsx
View file

@ -1,4 +1,6 @@
import '@/styles/globals.scss'; import '@/styles/globals.scss';
import '@/zano_ui/src/styles/globals.scss';
import '@/zano_ui/src/styles/variables.scss';
import '@/styles/themes/light.scss'; import '@/styles/themes/light.scss';
import '@/styles/themes/dark.scss'; import '@/styles/themes/dark.scss';
import Head from 'next/head'; import Head from 'next/head';

10
src/pages/dex/DexHeader/DexHeader.tsx
View file

@ -1,10 +1,10 @@
import React, { Dispatch, SetStateAction, useCallback, useState } from 'react'; import React, { Dispatch, SetStateAction, useCallback, useState } from 'react';
import styles from '@/styles/Dex.module.scss'; import styles from '@/styles/Dex.module.scss';
import { ReactComponent as SearchLogo } from '@/assets/images/UI/search_icon.svg'; import SearchLogo from '@/assets/images/UI/search_icon.svg';
import { ReactComponent as RefreshIcon } from '@/assets/images/UI/refrash_small_icon.svg'; import RefreshIcon from '@/assets/images/UI/refrash_small_icon.svg';
import { ReactComponent as InfoSmallIcon } from '@/assets/images/UI/info_outlined.svg'; import InfoSmallIcon from '@/assets/images/UI/info_outlined.svg';
import { ReactComponent as DropdownArrowIcon } from '@/assets/images/UI/dropdown_arrow_small.svg'; import DropdownArrowIcon from '@/assets/images/UI/dropdown_arrow_small.svg';
import { ReactComponent as FilterIcon } from '@/assets/images/UI/filter_icon.svg'; import FilterIcon from '@/assets/images/UI/filter_icon.svg';
import Input from '@/components/UI/Input/Input'; import Input from '@/components/UI/Input/Input';
import { Switch } from '@/components/UI/Switch/Switch'; import { Switch } from '@/components/UI/Switch/Switch';
import { IconDropdown } from '@/components/UI/IconDropdown/IconDropdown'; import { IconDropdown } from '@/components/UI/IconDropdown/IconDropdown';

6
src/pages/dex/index.tsx
View file

@ -1,7 +1,6 @@
import styles from '@/styles/Dex.module.scss'; import styles from '@/styles/Dex.module.scss';
import Footer from '@/components/default/Footer/Footer';
import Header from '@/components/default/Header/Header'; import Header from '@/components/default/Header/Header';
import { ReactComponent as HistoryIcon } from '@/assets/images/UI/history_icon.svg'; import HistoryIcon from '@/assets/images/UI/history_icon.svg';
import { useEffect, useRef, useState } from 'react'; import { useEffect, useRef, useState } from 'react';
import Button from '@/components/UI/Button/Button'; import Button from '@/components/UI/Button/Button';
import Link from 'next/link'; import Link from 'next/link';
@ -14,8 +13,7 @@ import { useInView } from 'react-intersection-observer';
import Preloader from '@/components/UI/Preloader/Preloader'; import Preloader from '@/components/UI/Preloader/Preloader';
import { PairSortOption } from '@/interfaces/enum/pair'; import { PairSortOption } from '@/interfaces/enum/pair';
import PairsTable from '@/components/default/PairsTable/PairsTable'; import PairsTable from '@/components/default/PairsTable/PairsTable';
import axios from 'axios'; import { Footer } from '@/zano_ui/src';
import { API_URL } from '@/constants';
import DexHeader from './DexHeader/DexHeader'; import DexHeader from './DexHeader/DexHeader';
import PairsList from './pairs/PairsList/PairsList'; import PairsList from './pairs/PairsList/PairsList';

4
src/pages/dex/orders/OrdersTable/OrdersTable.tsx
View file

@ -1,7 +1,7 @@
import { nanoid } from 'nanoid'; import { nanoid } from 'nanoid';
import Button from '@/components/UI/Button/Button'; import Button from '@/components/UI/Button/Button';
import { ReactComponent as DeleteIcon } from '@/assets/images/UI/delete.svg'; import DeleteIcon from '@/assets/images/UI/delete.svg';
import { ReactComponent as NoOffersIcon } from '@/assets/images/UI/no_offers.svg'; import NoOffersIcon from '@/assets/images/UI/no_offers.svg';
import EmptyLink from '@/components/UI/EmptyLink/EmptyLink'; import EmptyLink from '@/components/UI/EmptyLink/EmptyLink';
import { notationToString, toStandardDateString } from '@/utils/utils'; import { notationToString, toStandardDateString } from '@/utils/utils';
import { cancelOrder, getUserOrders } from '@/utils/methods'; import { cancelOrder, getUserOrders } from '@/utils/methods';

2
src/pages/dex/orders/index.tsx
View file

@ -1,6 +1,5 @@
import styles from '@/styles/Orders.module.scss'; import styles from '@/styles/Orders.module.scss';
import Header from '@/components/default/Header/Header'; import Header from '@/components/default/Header/Header';
import Footer from '@/components/default/Footer/Footer';
import PageTitle from '@/components/default/PageTitle/PageTitle'; import PageTitle from '@/components/default/PageTitle/PageTitle';
import HorizontalSelect from '@/components/UI/HorizontalSelect/HorizontalSelect'; import HorizontalSelect from '@/components/UI/HorizontalSelect/HorizontalSelect';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
@ -14,6 +13,7 @@ import { UserOrderData } from '@/interfaces/responses/orders/GetUserOrdersRes';
import PairValue from '@/interfaces/props/pages/dex/orders/PairValue'; import PairValue from '@/interfaces/props/pages/dex/orders/PairValue';
import DateState from '@/interfaces/common/DateState'; import DateState from '@/interfaces/common/DateState';
import useUpdateUser from '@/hook/useUpdateUser'; import useUpdateUser from '@/hook/useUpdateUser';
import { Footer } from '@/zano_ui/src';
import OrdersTable from './OrdersTable/OrdersTable'; import OrdersTable from './OrdersTable/OrdersTable';
function Orders() { function Orders() {

2
src/pages/dex/pairs/PairsCard/PairsCard.tsx
View file

@ -1,7 +1,7 @@
import { useContext } from 'react'; import { useContext } from 'react';
import Image from 'next/image'; import Image from 'next/image';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { ReactComponent as ArrowRight } from '@/assets/images/UI/arrow_right.svg'; import ArrowRight from '@/assets/images/UI/arrow_right.svg';
import { Store } from '@/store/store-reducer'; import { Store } from '@/store/store-reducer';
import PairData from '@/interfaces/common/PairData'; import PairData from '@/interfaces/common/PairData';
import { getAssetIcon, notationToString, roundTo } from '@/utils/utils'; import { getAssetIcon, notationToString, roundTo } from '@/utils/utils';

2
src/pages/dex/trading/[id].tsx
View file

@ -1,5 +1,4 @@
import styles from '@/styles/Trading.module.scss'; import styles from '@/styles/Trading.module.scss';
import Footer from '@/components/default/Footer/Footer';
import Header from '@/components/default/Header/Header'; import Header from '@/components/default/Header/Header';
import HorizontalSelect from '@/components/UI/HorizontalSelect/HorizontalSelect'; import HorizontalSelect from '@/components/UI/HorizontalSelect/HorizontalSelect';
import { useCallback, useState } from 'react'; import { useCallback, useState } from 'react';
@ -39,6 +38,7 @@ import useUpdateUser from '@/hook/useUpdateUser';
import { GuideProvider } from '@/store/guide-provider'; import { GuideProvider } from '@/store/guide-provider';
import { GetServerSidePropsContext } from 'next'; import { GetServerSidePropsContext } from 'next';
import { TradingProps } from '@/interfaces/props/pages/dex/trading/TradingProps'; import { TradingProps } from '@/interfaces/props/pages/dex/trading/TradingProps';
import { Footer } from '@/zano_ui/src';
function Trading({ function Trading({
initialOrders, initialOrders,

10
src/pages/maintenance/index.tsx
View file

@ -1,11 +1,11 @@
import React from 'react'; import React from 'react';
import logoImg from '@/assets/images/UI/logo_block.svg'; import logoImg from '@/assets/images/UI/logo_block.svg?url';
import logoImgWhite from '@/assets/images/UI/logo_block_dark.svg'; import logoImgWhite from '@/assets/images/UI/logo_block_dark.svg?url';
import useAdvancedTheme from '@/hook/useTheme'; import useAdvancedTheme from '@/hook/useTheme';
import Image from 'next/image'; import Image from 'next/image';
import { ReactComponent as TelegramIcon } from '@/assets/images/UI/social/telegram.svg'; import TelegramIcon from '@/assets/images/UI/social/telegram.svg';
import { ReactComponent as DisconrdIcon } from '@/assets/images/UI/social/discord.svg'; import DisconrdIcon from '@/assets/images/UI/social/discord.svg';
import { ReactComponent as TwitterIcon } from '@/assets/images/UI/social/twitter.svg'; import TwitterIcon from '@/assets/images/UI/social/twitter.svg';
import Link from 'next/link'; import Link from 'next/link';
import styles from './styles.module.scss'; import styles from './styles.module.scss';

4
src/pages/p2p/components/HomeTable/HomeTable.tsx
View file

@ -1,6 +1,6 @@
import EmptyLink from '@/components/UI/EmptyLink/EmptyLink'; import EmptyLink from '@/components/UI/EmptyLink/EmptyLink';
import { ReactComponent as ArrowIcon } from '@/assets/images/UI/arrow.svg'; import ArrowIcon from '@/assets/images/UI/arrow.svg';
import { ReactComponent as NoOffersIcon } from '@/assets/images/UI/no_offers.svg'; import NoOffersIcon from '@/assets/images/UI/no_offers.svg';
import ProfileWidget from '@/components/UI/ProfileWidget/ProfileWidget'; import ProfileWidget from '@/components/UI/ProfileWidget/ProfileWidget';
import PairText from '@/components/UI/PairText/PairText'; import PairText from '@/components/UI/PairText/PairText';
import Button from '@/components/UI/Button/Button'; import Button from '@/components/UI/Button/Button';

2
src/pages/p2p/components/Pagination/Pagination.tsx
View file

@ -1,4 +1,4 @@
import paginationArrowIcon from '@/assets/images/UI/pagination_arrow.svg'; import paginationArrowIcon from '@/assets/images/UI/pagination_arrow.svg?url';
import Button from '@/components/UI/Button/Button'; import Button from '@/components/UI/Button/Button';
import { nanoid } from 'nanoid'; import { nanoid } from 'nanoid';
import PaginationProps from '@/interfaces/props/pages/p2p/components/Pagination/PaginationProps'; import PaginationProps from '@/interfaces/props/pages/p2p/components/Pagination/PaginationProps';

6
src/pages/p2p/index.tsx
View file

@ -1,9 +1,8 @@
import styles from '@/styles/Home.module.scss'; import styles from '@/styles/Home.module.scss';
import Footer from '@/components/default/Footer/Footer';
import Header from '@/components/default/Header/Header'; import Header from '@/components/default/Header/Header';
import Marketplace from '@/pages/p2p/components/Marketplace/Marketplace'; import Marketplace from '@/pages/p2p/components/Marketplace/Marketplace';
import { ReactComponent as OffersIcon } from '@/assets/images/UI/offers.svg'; import OffersIcon from '@/assets/images/UI/offers.svg';
import { ReactComponent as PlusIcon } from '@/assets/images/UI/plus.svg'; import PlusIcon from '@/assets/images/UI/plus.svg';
import { useContext, useEffect, useState } from 'react'; import { useContext, useEffect, useState } from 'react';
import { getStats } from '@/utils/methods'; import { getStats } from '@/utils/methods';
import Button from '@/components/UI/Button/Button'; import Button from '@/components/UI/Button/Button';
@ -17,6 +16,7 @@ import { GetServerSidePropsContext } from 'next';
import HomeProps from '@/interfaces/props/pages/p2p/HomeProps'; import HomeProps from '@/interfaces/props/pages/p2p/HomeProps';
import OfferData from '@/interfaces/responses/offers/OfferData'; import OfferData from '@/interfaces/responses/offers/OfferData';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { Footer } from '@/zano_ui/src';
function Home(props: HomeProps) { function Home(props: HomeProps) {
const [offers, setOffers] = useState<OfferData[]>([]); const [offers, setOffers] = useState<OfferData[]>([]);

2
src/pages/p2p/process/[id].tsx
View file

@ -1,6 +1,6 @@
import styles from '@/styles/Process.module.scss'; import styles from '@/styles/Process.module.scss';
import Header from '@/components/default/Header/Header'; import Header from '@/components/default/Header/Header';
import Footer from '@/components/default/Footer/Footer'; import { Footer } from '@/zano_ui/src';
import ProcessContent from './components/ProcessContent/ProcessContent'; import ProcessContent from './components/ProcessContent/ProcessContent';
function Process() { function Process() {

8
src/pages/p2p/process/components/Messenger/Messenger.tsx
View file

@ -1,8 +1,8 @@
import Image from 'next/image'; import Image from 'next/image';
import { ReactComponent as DetailsIcon } from '@/assets/images/UI/walletsettings_icon.svg'; import DetailsIcon from '@/assets/images/UI/walletsettings_icon.svg';
import { ReactComponent as PlusIcon } from '@/assets/images/UI/plus.svg'; import PlusIcon from '@/assets/images/UI/plus.svg';
import sendIcon from '@/assets/images/UI/send.svg'; import sendIcon from '@/assets/images/UI/send.svg?url';
import crossSmallIcon from '@/assets/images/UI/cross_icon_small.svg'; import crossSmallIcon from '@/assets/images/UI/cross_icon_small.svg?url';
import Input from '@/components/UI/Input/Input'; import Input from '@/components/UI/Input/Input';
import Button from '@/components/UI/Button/Button'; import Button from '@/components/UI/Button/Button';
import ProfileWidget from '@/components/UI/ProfileWidget/ProfileWidget'; import ProfileWidget from '@/components/UI/ProfileWidget/ProfileWidget';

6
src/pages/p2p/process/components/ProcessContent/ProcessContent.tsx
View file

@ -1,6 +1,6 @@
import depositSentIcon from '@/assets/images/UI/deposit_sent.svg'; import depositSentIcon from '@/assets/images/UI/deposit_sent.svg?url';
import fundsConfirmedIcon from '@/assets/images/UI/funds_confirmed.svg'; import fundsConfirmedIcon from '@/assets/images/UI/funds_confirmed.svg?url';
import offerCanceledIcon from '@/assets/images/UI/offer_canceled.svg'; import offerCanceledIcon from '@/assets/images/UI/offer_canceled.svg?url';
import Button from '@/components/UI/Button/Button'; import Button from '@/components/UI/Button/Button';
import Messenger from '@/pages/p2p/process/components/Messenger/Messenger'; import Messenger from '@/pages/p2p/process/components/Messenger/Messenger';
import PageTitle from '@/components/default/PageTitle/PageTitle'; import PageTitle from '@/components/default/PageTitle/PageTitle';

8
src/pages/p2p/profile/ProfileTable/ProfileTable.tsx
View file

@ -1,12 +1,12 @@
import EmptyLink from '@/components/UI/EmptyLink/EmptyLink'; import EmptyLink from '@/components/UI/EmptyLink/EmptyLink';
import DepositTitle from '@/components/UI/DepositTitle/DepositTitle'; import DepositTitle from '@/components/UI/DepositTitle/DepositTitle';
import { ReactComponent as NoOffersIcon } from '@/assets/images/UI/no_offers.svg'; import NoOffersIcon from '@/assets/images/UI/no_offers.svg';
import { ReactComponent as NoChatsIcon } from '@/assets/images/UI/no_chats.svg'; import NoChatsIcon from '@/assets/images/UI/no_chats.svg';
import { toStandardDateString } from '@/utils/utils'; import { toStandardDateString } from '@/utils/utils';
import ProfileWidget from '@/components/UI/ProfileWidget/ProfileWidget'; import ProfileWidget from '@/components/UI/ProfileWidget/ProfileWidget';
import PairText from '@/components/UI/PairText/PairText'; import PairText from '@/components/UI/PairText/PairText';
import Button from '@/components/UI/Button/Button'; import Button from '@/components/UI/Button/Button';
import { ReactComponent as DeleteIcon } from '@/assets/images/UI/delete.svg'; import DeleteIcon from '@/assets/images/UI/delete.svg';
import NotificationIndicator from '@/components/UI/NotificationIndicator/NotificationIndicator'; import NotificationIndicator from '@/components/UI/NotificationIndicator/NotificationIndicator';
import { useContext, useState } from 'react'; import { useContext, useState } from 'react';
import { Store } from '@/store/store-reducer'; import { Store } from '@/store/store-reducer';
@ -156,7 +156,7 @@ function ProfileTable(props: ProfileTableProps) {
</div> </div>
)} )}
{/* {categoryState === "my-offers" && {/* {categoryState === "my-offers" &&
<Button <Button
className={styles.row__button__iconed} className={styles.row__button__iconed}
onClick={() => setPopupState(true)} onClick={() => setPopupState(true)}

8
src/pages/p2p/profile/index.tsx
View file

@ -1,6 +1,5 @@
import styles from '@/styles/Profile.module.scss'; import styles from '@/styles/Profile.module.scss';
import Header from '@/components/default/Header/Header'; import Header from '@/components/default/Header/Header';
import Footer from '@/components/default/Footer/Footer';
import Dropdown from '@/components/UI/Dropdown/Dropdown'; import Dropdown from '@/components/UI/Dropdown/Dropdown';
import PageTitle from '@/components/default/PageTitle/PageTitle'; import PageTitle from '@/components/default/PageTitle/PageTitle';
import DateRangeSelector from '@/components/UI/DateRangeSelector/DateRangeSelector'; import DateRangeSelector from '@/components/UI/DateRangeSelector/DateRangeSelector';
@ -12,6 +11,7 @@ import CategoriesState from '@/interfaces/states/pages/p2p/profile/CategoriesSta
import FiltersState, { BuySell } from '@/interfaces/states/pages/p2p/profile/FiltersState'; import FiltersState, { BuySell } from '@/interfaces/states/pages/p2p/profile/FiltersState';
import { UserChatData } from '@/interfaces/responses/user/GetUserRes'; import { UserChatData } from '@/interfaces/responses/user/GetUserRes';
import OffersStateElement from '@/interfaces/states/pages/p2p/profile/OffersState'; import OffersStateElement from '@/interfaces/states/pages/p2p/profile/OffersState';
import { Footer } from '@/zano_ui/src';
import ProfileTable from './ProfileTable/ProfileTable'; import ProfileTable from './ProfileTable/ProfileTable';
function Profile() { function Profile() {
@ -201,9 +201,9 @@ function Profile() {
setValue={(e) => setFilters({ ...filters, date: e })} setValue={(e) => setFilters({ ...filters, date: e })}
/> />
</div> </div>
{/* <Offers {/* <Offers
extended extended
withEditor={categoryState.code === "my-offers"} withEditor={categoryState.code === "my-offers"}
offers={filteredOffers} offers={filteredOffers}
categoryState={categoryState.code} categoryState={categoryState.code}
/> */} /> */}

2
src/pages/policy/index.tsx
View file

@ -1,9 +1,9 @@
import styles from '@/styles/Policy.module.scss'; import styles from '@/styles/Policy.module.scss';
import Header from '@/components/default/Header/Header'; import Header from '@/components/default/Header/Header';
import Footer from '@/components/default/Footer/Footer';
import Link from 'next/link'; import Link from 'next/link';
import PageTitle from '@/components/default/PageTitle/PageTitle'; import PageTitle from '@/components/default/PageTitle/PageTitle';
import { nanoid } from 'nanoid'; import { nanoid } from 'nanoid';
import { Footer } from '@/zano_ui/src';
function Policy() { function Policy() {
const contentList: string[] = Array(5).fill('Donec tellus felis, egestas ac tortor in;'); const contentList: string[] = Array(5).fill('Donec tellus felis, egestas ac tortor in;');

10
src/pages/swap/index.tsx
View file

@ -1,11 +1,10 @@
import styles from '@/styles/Swap.module.scss'; import styles from '@/styles/Swap.module.scss';
import Header from '@/components/default/Header/Header'; import Header from '@/components/default/Header/Header';
import Footer from '@/components/default/Footer/Footer';
import MainPageTitle from '@/components/default/MainPageTitle/MainPageTitle'; import MainPageTitle from '@/components/default/MainPageTitle/MainPageTitle';
import { ReactComponent as HistoryIcon } from '@/assets/images/UI/history_icon.svg'; import HistoryIcon from '@/assets/images/UI/history_icon.svg';
import { ReactComponent as ExchangeIcon } from '@/assets/images/UI/change_icon.svg'; import ExchangeIcon from '@/assets/images/UI/change_icon.svg';
import zanoWhiteIcon from '@/assets/images/UI/zano_white.svg'; import zanoWhiteIcon from '@/assets/images/UI/zano_white.svg?url';
import tickIcon from '@/assets/images/UI/tick_icon.svg'; import tickIcon from '@/assets/images/UI/tick_icon.svg?url';
import Link from 'next/link'; import Link from 'next/link';
import Button from '@/components/UI/Button/Button'; import Button from '@/components/UI/Button/Button';
import { nanoid } from 'nanoid'; import { nanoid } from 'nanoid';
@ -19,6 +18,7 @@ import CurvePairChart from '@/components/UI/CurvePairChart/CurvePairChart';
import SwapItemProps from '@/interfaces/props/pages/swap/SwapItemProps'; import SwapItemProps from '@/interfaces/props/pages/swap/SwapItemProps';
import CurrencyRow from '@/interfaces/common/CurrencyRow'; import CurrencyRow from '@/interfaces/common/CurrencyRow';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { Footer } from '@/zano_ui/src';
function Swap() { function Swap() {
const { state } = useContext(Store); const { state } = useContext(Store);

6
src/pages/user/index.js
View file

@ -1,11 +1,11 @@
import styles from '@/styles/User.module.scss'; import styles from '@/styles/User.module.scss';
import Header from '@/components/default/Header/Header'; import Header from '@/components/default/Header/Header';
import Footer from '@/components/default/Footer/Footer'; import infoBlueIcon from '@/assets/images/UI/info_blue.svg?url';
import infoBlueIcon from '@/assets/images/UI/info_blue.svg'; import zanoIcon from '@/assets/images/UI/zano.svg?url';
import zanoIcon from '@/assets/images/UI/zano.svg';
import Offers from '@/components/default/Offers/Offers'; import Offers from '@/components/default/Offers/Offers';
import BackButton from '@/components/default/BackButton/BackButton'; import BackButton from '@/components/default/BackButton/BackButton';
import { nanoid } from 'nanoid'; import { nanoid } from 'nanoid';
import { Footer } from '@/zano_ui/src';
function User() { function User() {
// const userInfo = { // const userInfo = {

20
src/styles/globals.scss
View file

@ -148,17 +148,17 @@ h6 {
} }
svg { svg {
&:not(.stroked) { // &:not(.stroked) {
* { // * {
fill: var(--font-main-color); // fill: var(--font-main-color);
} // }
&.dimmed { // &.dimmed {
* { // * {
fill: var(--font-dimmed-color); // fill: var(--font-dimmed-color);
} // }
} // }
} // }
&.stroked { &.stroked {
* { * {

16
src/svg.d.ts vendored
View file

@ -1,7 +1,11 @@
declare module '*.svg' { declare module '*.svg?url' {
import React = require('react'); const content: string;
export default content;
export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>; }
const src: string;
export default src; declare module '*.svg' {
import * as React from 'react';
const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
export default ReactComponent;
} }

1
submodules/zano_ui Submodule

@ -0,0 +1 @@
Subproject commit 0d2ed657a1a7fa65727b458ccca5897ad0424807

3
tsconfig.json
View file

@ -2,7 +2,8 @@
"compilerOptions": { "compilerOptions": {
"baseUrl": ".", "baseUrl": ".",
"paths": { "paths": {
"@/*": ["./src/*"] "@/*": ["./src/*"],
"@/zano_ui/*": ["./submodules/zano_ui/*"]
}, },
/* Visit https://aka.ms/tsconfig to read more about this file */ /* Visit https://aka.ms/tsconfig to read more about this file */
/* Projects */ /* Projects */