diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 0000000..f3a8dbe --- /dev/null +++ b/.gitmodules @@ -0,0 +1,3 @@ +[submodule "submodules/zano_ui"] + path = submodules/zano_ui + url = https://github.com/PRavaga/zano_ui.git diff --git a/next-env.d.ts b/next-env.d.ts index d3956e1..552b2a0 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,6 +1,6 @@ /// /// -import './.next/dev/types/routes.d.ts'; +import './.next/types/routes.d.ts'; // NOTE: This file should not be edited // see https://nextjs.org/docs/pages/api-reference/config/typescript for more information. diff --git a/next.config.js b/next.config.js index 91658f9..28ffbd4 100644 --- a/next.config.js +++ b/next.config.js @@ -17,8 +17,16 @@ const nextConfig = { }, webpack: (config) => { config.module.rules.push({ - test: /\.svg$/, - use: ['@svgr/webpack', 'url-loader'], + test: /\.svg$/i, + 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; diff --git a/package.json b/package.json index 26a5327..1163b53 100644 --- a/package.json +++ b/package.json @@ -11,12 +11,13 @@ "eslint": "eslint . --ext .js,.ts,.tsx,.jsx --fix", "format": "prettier --write .", "format:check": "prettier --check .", - "prepare": "husky" + "prepare": "husky", + "submodule": "git submodule update --init --recursive" }, "lint-staged": { "*.{js,jsx,ts,tsx}": [ "prettier --write", - "eslint --fix --config .eslintrc.json" + "eslint --fix --config .eslintrc.cjs" ] }, "dependencies": { diff --git a/src/components/UI/Alert/Alert.tsx b/src/components/UI/Alert/Alert.tsx index 8a68c3a..77ee5a8 100644 --- a/src/components/UI/Alert/Alert.tsx +++ b/src/components/UI/Alert/Alert.tsx @@ -1,7 +1,7 @@ import Popup from '@/components/UI/Popup/Popup'; -import successIcon from '@/assets/images/UI/success.svg'; -import smallCrossIcon from '@/assets/images/UI/cross_icon_small.svg'; -import errorIcon from '@/assets/images/UI/error.svg'; +import successIcon from '@/assets/images/UI/success.svg?url'; +import smallCrossIcon from '@/assets/images/UI/cross_icon_small.svg?url'; +import errorIcon from '@/assets/images/UI/error.svg?url'; import AlertProps from '@/interfaces/props/components/UI/Alert/AlertProps'; import Preloader from '../Preloader/Preloader'; import styles from './Alert.module.scss'; diff --git a/src/components/UI/CurrencyDropdown/CurrencyDropdown.tsx b/src/components/UI/CurrencyDropdown/CurrencyDropdown.tsx index f795a8e..10be8ab 100644 --- a/src/components/UI/CurrencyDropdown/CurrencyDropdown.tsx +++ b/src/components/UI/CurrencyDropdown/CurrencyDropdown.tsx @@ -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 Image from 'next/image'; import { nanoid } from 'nanoid'; diff --git a/src/components/UI/DateRangeSelector/DateRangeSelector.tsx b/src/components/UI/DateRangeSelector/DateRangeSelector.tsx index d111d36..1c04d3d 100644 --- a/src/components/UI/DateRangeSelector/DateRangeSelector.tsx +++ b/src/components/UI/DateRangeSelector/DateRangeSelector.tsx @@ -1,5 +1,5 @@ -import { ReactComponent as CalendarIcon } from '@/assets/images/UI/callendar.svg'; -import { ReactComponent as CalendarArrowIcon } from '@/assets/images/UI/calendar_arrow.svg'; +import CalendarIcon from '@/assets/images/UI/callendar.svg'; +import CalendarArrowIcon from '@/assets/images/UI/calendar_arrow.svg'; import { useRef, useState, useEffect, ReactNode } from 'react'; import { nanoid } from 'nanoid'; import { toStandardDateString } from '@/utils/utils'; diff --git a/src/components/UI/DepositTitle/DepositTitle.tsx b/src/components/UI/DepositTitle/DepositTitle.tsx index 550802c..f5cdc3f 100644 --- a/src/components/UI/DepositTitle/DepositTitle.tsx +++ b/src/components/UI/DepositTitle/DepositTitle.tsx @@ -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 EmptyLink from '../EmptyLink/EmptyLink'; diff --git a/src/components/UI/Dropdown/Dropdown.tsx b/src/components/UI/Dropdown/Dropdown.tsx index 2bfb4a6..8e1fbb9 100644 --- a/src/components/UI/Dropdown/Dropdown.tsx +++ b/src/components/UI/Dropdown/Dropdown.tsx @@ -1,6 +1,6 @@ -import { ReactComponent as DropdownArrowIcon } from '@/assets/images/UI/dropdown_arrow.svg'; -import { ReactComponent as SearchIcon } from '@/assets/images/UI/search_icon.svg'; -import { ReactComponent as StarIcon } from '@/assets/images/UI/star_icon.svg'; +import DropdownArrowIcon from '@/assets/images/UI/dropdown_arrow.svg'; +import SearchIcon from '@/assets/images/UI/search_icon.svg'; +import StarIcon from '@/assets/images/UI/star_icon.svg'; import Image from 'next/image'; import { useState, useEffect, useRef, useContext, MouseEvent } from 'react'; import { Store } from '@/store/store-reducer'; diff --git a/src/components/UI/EmptyMessage/index.tsx b/src/components/UI/EmptyMessage/index.tsx index e046819..2d5ac40 100644 --- a/src/components/UI/EmptyMessage/index.tsx +++ b/src/components/UI/EmptyMessage/index.tsx @@ -1,5 +1,5 @@ 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 styles from './styles.module.scss'; import { EmptyMessageProps } from './types'; diff --git a/src/components/UI/Filters/Filters.tsx b/src/components/UI/Filters/Filters.tsx index 7ba4f37..2810a01 100644 --- a/src/components/UI/Filters/Filters.tsx +++ b/src/components/UI/Filters/Filters.tsx @@ -1,5 +1,5 @@ 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 CurrencyDropdown from '@/components/UI/CurrencyDropdown/CurrencyDropdown'; import FiltersProps from '@/interfaces/props/components/UI/Filters/FiltersProps'; diff --git a/src/components/default/BackButton/BackButton.tsx b/src/components/default/BackButton/BackButton.tsx index 0fbd994..d942262 100644 --- a/src/components/default/BackButton/BackButton.tsx +++ b/src/components/default/BackButton/BackButton.tsx @@ -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 { useRouter } from 'next/router'; import { classes } from '@/utils/utils'; diff --git a/src/components/default/Footer/Footer.module.scss b/src/components/default/Footer/Footer.module.scss deleted file mode 100644 index 78fccc3..0000000 --- a/src/components/default/Footer/Footer.module.scss +++ /dev/null @@ -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; - } - } - } -} diff --git a/src/components/default/Footer/Footer.tsx b/src/components/default/Footer/Footer.tsx deleted file mode 100644 index 134e646..0000000 --- a/src/components/default/Footer/Footer.tsx +++ /dev/null @@ -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 ( -
-
- {links.map((e) => ( - - {e.title} - - ))} -
-
-

Copyright © {new Date().getFullYear()} ZANO.org

-
-
- ); -} - -export default Footer; diff --git a/src/components/default/Header/Header.tsx b/src/components/default/Header/Header.tsx index 86d9d8f..4006c26 100644 --- a/src/components/default/Header/Header.tsx +++ b/src/components/default/Header/Header.tsx @@ -1,17 +1,17 @@ -import logoImg from '@/assets/images/UI/logo_block.svg'; -import logoImgWhite from '@/assets/images/UI/logo_block_dark.svg'; -import { ReactComponent as LogOutIcon } from '@/assets/images/UI/logout.svg'; -import { ReactComponent as BurgerIcon } from '@/assets/images/UI/hamburger_icon.svg'; -import { ReactComponent as BurgerCrossIcon } from '@/assets/images/UI/burger_cross.svg'; +import logoImg from '@/assets/images/UI/logo_block.svg?url'; +import logoImgWhite from '@/assets/images/UI/logo_block_dark.svg?url'; +import LogOutIcon from '@/assets/images/UI/logout.svg'; +import BurgerIcon from '@/assets/images/UI/hamburger_icon.svg'; +import BurgerCrossIcon from '@/assets/images/UI/burger_cross.svg'; import React, { useRef, useState, useEffect, useContext } from 'react'; -import { ReactComponent as EyeIcon } from '@/assets/images/UI/eye.svg'; -import { ReactComponent as EyeCloseIcon } from '@/assets/images/UI/eye_close.svg'; -import zanoIcon from '@/assets/images/UI/zano.svg'; -import bitcoinWhiteIcon from '@/assets/images/UI/wbtc.svg'; -import sunIcon from '@/assets/images/UI/sun_icon.svg'; -import moonIcon from '@/assets/images/UI/moon_icon.svg'; -import ethWhiteIcon from '@/assets/images/UI/weth.svg'; -import customWhiteIcon from '@/assets/images/UI/tsds.svg'; +import EyeIcon from '@/assets/images/UI/eye.svg'; +import EyeCloseIcon from '@/assets/images/UI/eye_close.svg'; +import zanoIcon from '@/assets/images/UI/zano.svg?url'; +import bitcoinWhiteIcon from '@/assets/images/UI/wbtc.svg?url'; +import sunIcon from '@/assets/images/UI/sun_icon.svg?url'; +import moonIcon from '@/assets/images/UI/moon_icon.svg?url'; +import ethWhiteIcon from '@/assets/images/UI/weth.svg?url'; +import customWhiteIcon from '@/assets/images/UI/tsds.svg?url'; import Link from 'next/link'; import Tooltip from '@/components/UI/Tooltip/Tooltip'; import Button from '@/components/UI/Button/Button'; @@ -28,7 +28,7 @@ import Decimal from 'decimal.js'; import socket from '@/utils/socket'; import { OrderDataWithPair } from '@/interfaces/responses/orders/GetOrdersPageRes'; 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 NavBar from './NavBar/NavBar'; import styles from './Header.module.scss'; @@ -139,7 +139,7 @@ function Header({ isLg }: { isLg?: boolean }) { title="ZANO" amount={Number(assets.find((e) => e.ticker === 'ZANO')?.balance) || 0} > - {/* setBalanceState(!balanceSeen)} src={balanceSeen ? eyeCloseIcon : eyeIcon} alt="see" style={!balanceSeen ? {opacity: "0.6"} : {}} diff --git a/src/components/default/Header/NavBar/NavBar.tsx b/src/components/default/Header/NavBar/NavBar.tsx index d9fcfab..0803076 100644 --- a/src/components/default/Header/NavBar/NavBar.tsx +++ b/src/components/default/Header/NavBar/NavBar.tsx @@ -1,9 +1,9 @@ import { useRouter } from 'next/router'; import Link from 'next/link'; -import { ReactComponent as TradeIcon } from '@/assets/images/UI/trade_icon.svg'; -import { ReactComponent as SwapIcon } from '@/assets/images/UI/swap_icon.svg'; -import { ReactComponent as PersonsIcon } from '@/assets/images/UI/persons_icon.svg'; +import TradeIcon from '@/assets/images/UI/trade_icon.svg'; +import SwapIcon from '@/assets/images/UI/swap_icon.svg'; +import PersonsIcon from '@/assets/images/UI/persons_icon.svg'; import NavItemProps from '@/interfaces/props/components/default/Header/NavBar/NavItemProps'; import NavBarProps from '@/interfaces/props/components/default/Header/NavBar/NavBarProps'; import NotificationIndicator from '@/components/UI/NotificationIndicator/NotificationIndicator'; diff --git a/src/components/default/MainPageTitle/MainPageTitle.tsx b/src/components/default/MainPageTitle/MainPageTitle.tsx index 6886714..eb441c4 100644 --- a/src/components/default/MainPageTitle/MainPageTitle.tsx +++ b/src/components/default/MainPageTitle/MainPageTitle.tsx @@ -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 { useContext } from 'react'; import MainPageTitleProps from '@/interfaces/props/components/default/MainPageTitle/MainPageTitleProps'; diff --git a/src/components/default/Offers/Offers.js b/src/components/default/Offers/Offers.js index eeda3a3..7f0f2bb 100644 --- a/src/components/default/Offers/Offers.js +++ b/src/components/default/Offers/Offers.js @@ -1,10 +1,10 @@ -import arrowIcon from '@/assets/images/UI/arrow.svg'; -import lockIcon from '@/assets/images/UI/lock.svg'; -import crossIcon from '@/assets/images/UI/cross_icon.svg'; -import deleteIcon from '@/assets/images/UI/delete.svg'; -import editIcon from '@/assets/images/UI/edit.svg'; -import noOffersIcon from '@/assets/images/UI/no_offers.svg'; -import noChatsIcon from '@/assets/images/UI/no_chats.svg'; +import arrowIcon from '@/assets/images/UI/arrow.svg?url'; +import lockIcon from '@/assets/images/UI/lock.svg?url'; +import crossIcon from '@/assets/images/UI/cross_icon.svg?url'; +import deleteIcon from '@/assets/images/UI/delete.svg?url'; +import editIcon from '@/assets/images/UI/edit.svg?url'; +import noOffersIcon from '@/assets/images/UI/no_offers.svg?url'; +import noChatsIcon from '@/assets/images/UI/no_chats.svg?url'; import Link from 'next/link'; import Button from '@/components/UI/Button/Button'; import Input from '@/components/UI/Input/Input'; diff --git a/src/components/default/OrderNotification/OrderNotification.tsx b/src/components/default/OrderNotification/OrderNotification.tsx index dfa4d2f..e50f402 100644 --- a/src/components/default/OrderNotification/OrderNotification.tsx +++ b/src/components/default/OrderNotification/OrderNotification.tsx @@ -1,6 +1,6 @@ import { OrderDataWithPair } from '@/interfaces/responses/orders/GetOrdersPageRes'; 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 { notationToString, tradingKnownCurrencies } from '@/utils/utils'; import Link from 'next/link'; diff --git a/src/components/default/PairsTable/PairsTable.tsx b/src/components/default/PairsTable/PairsTable.tsx index 94611b7..b7d6e53 100644 --- a/src/components/default/PairsTable/PairsTable.tsx +++ b/src/components/default/PairsTable/PairsTable.tsx @@ -3,7 +3,7 @@ import { memo, useContext, useMemo } from 'react'; import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'; import { useRouter } from 'next/router'; 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 PairData from '@/interfaces/common/PairData'; import { ContextState } from '@/interfaces/common/ContextValue'; diff --git a/src/components/dex/InputPanelItem/index.tsx b/src/components/dex/InputPanelItem/index.tsx index 950c601..2012a96 100644 --- a/src/components/dex/InputPanelItem/index.tsx +++ b/src/components/dex/InputPanelItem/index.tsx @@ -10,7 +10,7 @@ import InputPanelItemProps from '@/interfaces/props/pages/dex/trading/InputPanel import CreateOrderData from '@/interfaces/fetch-data/create-order/CreateOrderData'; import Decimal from 'decimal.js'; 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 { useAlert } from '@/hook/useAlert'; import { buySellValues } from '@/constants'; diff --git a/src/components/dex/MatrixConnectionBadge/index.tsx b/src/components/dex/MatrixConnectionBadge/index.tsx index 1d28078..002f881 100644 --- a/src/components/dex/MatrixConnectionBadge/index.tsx +++ b/src/components/dex/MatrixConnectionBadge/index.tsx @@ -1,7 +1,7 @@ import Tooltip from '@/components/UI/Tooltip/Tooltip'; import { useEffect, useRef, useState } from 'react'; 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 styles from './styles.module.scss'; import { MatrixConnectionBadgeProps } from './types'; diff --git a/src/components/dex/TradingHeader/index.tsx b/src/components/dex/TradingHeader/index.tsx index b75f657..56e889f 100644 --- a/src/components/dex/TradingHeader/index.tsx +++ b/src/components/dex/TradingHeader/index.tsx @@ -1,10 +1,10 @@ -import { ReactComponent as ClockIcon } from '@/assets/images/UI/clock_icon.svg'; -import { ReactComponent as UpIcon } from '@/assets/images/UI/up_icon.svg'; -import { ReactComponent as DownIcon } from '@/assets/images/UI/down_icon.svg'; -import { ReactComponent as VolumeIcon } from '@/assets/images/UI/volume_icon.svg'; +import ClockIcon from '@/assets/images/UI/clock_icon.svg'; +import UpIcon from '@/assets/images/UI/up_icon.svg'; +import DownIcon from '@/assets/images/UI/down_icon.svg'; +import VolumeIcon from '@/assets/images/UI/volume_icon.svg'; import BackButton from '@/components/default/BackButton/BackButton'; 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 { useTour } from '@/store/guide-provider'; import styles from './styles.module.scss'; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 188d61a..af4b68f 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,4 +1,6 @@ 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/dark.scss'; import Head from 'next/head'; diff --git a/src/pages/dex/DexHeader/DexHeader.tsx b/src/pages/dex/DexHeader/DexHeader.tsx index d996307..d8e2fad 100644 --- a/src/pages/dex/DexHeader/DexHeader.tsx +++ b/src/pages/dex/DexHeader/DexHeader.tsx @@ -1,10 +1,10 @@ import React, { Dispatch, SetStateAction, useCallback, useState } from 'react'; import styles from '@/styles/Dex.module.scss'; -import { ReactComponent as SearchLogo } from '@/assets/images/UI/search_icon.svg'; -import { ReactComponent as RefreshIcon } from '@/assets/images/UI/refrash_small_icon.svg'; -import { ReactComponent as InfoSmallIcon } from '@/assets/images/UI/info_outlined.svg'; -import { ReactComponent as DropdownArrowIcon } from '@/assets/images/UI/dropdown_arrow_small.svg'; -import { ReactComponent as FilterIcon } from '@/assets/images/UI/filter_icon.svg'; +import SearchLogo from '@/assets/images/UI/search_icon.svg'; +import RefreshIcon from '@/assets/images/UI/refrash_small_icon.svg'; +import InfoSmallIcon from '@/assets/images/UI/info_outlined.svg'; +import DropdownArrowIcon from '@/assets/images/UI/dropdown_arrow_small.svg'; +import FilterIcon from '@/assets/images/UI/filter_icon.svg'; import Input from '@/components/UI/Input/Input'; import { Switch } from '@/components/UI/Switch/Switch'; import { IconDropdown } from '@/components/UI/IconDropdown/IconDropdown'; diff --git a/src/pages/dex/index.tsx b/src/pages/dex/index.tsx index b64e2cd..0a48b28 100644 --- a/src/pages/dex/index.tsx +++ b/src/pages/dex/index.tsx @@ -1,7 +1,6 @@ import styles from '@/styles/Dex.module.scss'; -import Footer from '@/components/default/Footer/Footer'; 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 Button from '@/components/UI/Button/Button'; import Link from 'next/link'; @@ -14,8 +13,7 @@ import { useInView } from 'react-intersection-observer'; import Preloader from '@/components/UI/Preloader/Preloader'; import { PairSortOption } from '@/interfaces/enum/pair'; import PairsTable from '@/components/default/PairsTable/PairsTable'; -import axios from 'axios'; -import { API_URL } from '@/constants'; +import { Footer } from '@/zano_ui/src'; import DexHeader from './DexHeader/DexHeader'; import PairsList from './pairs/PairsList/PairsList'; diff --git a/src/pages/dex/orders/OrdersTable/OrdersTable.tsx b/src/pages/dex/orders/OrdersTable/OrdersTable.tsx index 1519ef2..dda4b21 100644 --- a/src/pages/dex/orders/OrdersTable/OrdersTable.tsx +++ b/src/pages/dex/orders/OrdersTable/OrdersTable.tsx @@ -1,7 +1,7 @@ import { nanoid } from 'nanoid'; import Button from '@/components/UI/Button/Button'; -import { ReactComponent as DeleteIcon } from '@/assets/images/UI/delete.svg'; -import { ReactComponent as NoOffersIcon } from '@/assets/images/UI/no_offers.svg'; +import DeleteIcon from '@/assets/images/UI/delete.svg'; +import NoOffersIcon from '@/assets/images/UI/no_offers.svg'; import EmptyLink from '@/components/UI/EmptyLink/EmptyLink'; import { notationToString, toStandardDateString } from '@/utils/utils'; import { cancelOrder, getUserOrders } from '@/utils/methods'; diff --git a/src/pages/dex/orders/index.tsx b/src/pages/dex/orders/index.tsx index 0e24402..f05238e 100644 --- a/src/pages/dex/orders/index.tsx +++ b/src/pages/dex/orders/index.tsx @@ -1,6 +1,5 @@ import styles from '@/styles/Orders.module.scss'; import Header from '@/components/default/Header/Header'; -import Footer from '@/components/default/Footer/Footer'; import PageTitle from '@/components/default/PageTitle/PageTitle'; import HorizontalSelect from '@/components/UI/HorizontalSelect/HorizontalSelect'; 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 DateState from '@/interfaces/common/DateState'; import useUpdateUser from '@/hook/useUpdateUser'; +import { Footer } from '@/zano_ui/src'; import OrdersTable from './OrdersTable/OrdersTable'; function Orders() { diff --git a/src/pages/dex/pairs/PairsCard/PairsCard.tsx b/src/pages/dex/pairs/PairsCard/PairsCard.tsx index 9e92456..b1f02e2 100644 --- a/src/pages/dex/pairs/PairsCard/PairsCard.tsx +++ b/src/pages/dex/pairs/PairsCard/PairsCard.tsx @@ -1,7 +1,7 @@ import { useContext } from 'react'; import Image from 'next/image'; 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 PairData from '@/interfaces/common/PairData'; import { getAssetIcon, notationToString, roundTo } from '@/utils/utils'; diff --git a/src/pages/dex/trading/[id].tsx b/src/pages/dex/trading/[id].tsx index 61c196b..84b061f 100644 --- a/src/pages/dex/trading/[id].tsx +++ b/src/pages/dex/trading/[id].tsx @@ -1,5 +1,4 @@ import styles from '@/styles/Trading.module.scss'; -import Footer from '@/components/default/Footer/Footer'; import Header from '@/components/default/Header/Header'; import HorizontalSelect from '@/components/UI/HorizontalSelect/HorizontalSelect'; import { useCallback, useState } from 'react'; @@ -39,6 +38,7 @@ import useUpdateUser from '@/hook/useUpdateUser'; import { GuideProvider } from '@/store/guide-provider'; import { GetServerSidePropsContext } from 'next'; import { TradingProps } from '@/interfaces/props/pages/dex/trading/TradingProps'; +import { Footer } from '@/zano_ui/src'; function Trading({ initialOrders, diff --git a/src/pages/maintenance/index.tsx b/src/pages/maintenance/index.tsx index ce9903f..08e2913 100644 --- a/src/pages/maintenance/index.tsx +++ b/src/pages/maintenance/index.tsx @@ -1,11 +1,11 @@ import React from 'react'; -import logoImg from '@/assets/images/UI/logo_block.svg'; -import logoImgWhite from '@/assets/images/UI/logo_block_dark.svg'; +import logoImg from '@/assets/images/UI/logo_block.svg?url'; +import logoImgWhite from '@/assets/images/UI/logo_block_dark.svg?url'; import useAdvancedTheme from '@/hook/useTheme'; import Image from 'next/image'; -import { ReactComponent as TelegramIcon } from '@/assets/images/UI/social/telegram.svg'; -import { ReactComponent as DisconrdIcon } from '@/assets/images/UI/social/discord.svg'; -import { ReactComponent as TwitterIcon } from '@/assets/images/UI/social/twitter.svg'; +import TelegramIcon from '@/assets/images/UI/social/telegram.svg'; +import DisconrdIcon from '@/assets/images/UI/social/discord.svg'; +import TwitterIcon from '@/assets/images/UI/social/twitter.svg'; import Link from 'next/link'; import styles from './styles.module.scss'; diff --git a/src/pages/p2p/components/HomeTable/HomeTable.tsx b/src/pages/p2p/components/HomeTable/HomeTable.tsx index 12c318e..d13637d 100644 --- a/src/pages/p2p/components/HomeTable/HomeTable.tsx +++ b/src/pages/p2p/components/HomeTable/HomeTable.tsx @@ -1,6 +1,6 @@ import EmptyLink from '@/components/UI/EmptyLink/EmptyLink'; -import { ReactComponent as ArrowIcon } from '@/assets/images/UI/arrow.svg'; -import { ReactComponent as NoOffersIcon } from '@/assets/images/UI/no_offers.svg'; +import ArrowIcon from '@/assets/images/UI/arrow.svg'; +import NoOffersIcon from '@/assets/images/UI/no_offers.svg'; import ProfileWidget from '@/components/UI/ProfileWidget/ProfileWidget'; import PairText from '@/components/UI/PairText/PairText'; import Button from '@/components/UI/Button/Button'; diff --git a/src/pages/p2p/components/Pagination/Pagination.tsx b/src/pages/p2p/components/Pagination/Pagination.tsx index 6b511ef..ac5a69e 100644 --- a/src/pages/p2p/components/Pagination/Pagination.tsx +++ b/src/pages/p2p/components/Pagination/Pagination.tsx @@ -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 { nanoid } from 'nanoid'; import PaginationProps from '@/interfaces/props/pages/p2p/components/Pagination/PaginationProps'; diff --git a/src/pages/p2p/index.tsx b/src/pages/p2p/index.tsx index ac10798..7102d48 100644 --- a/src/pages/p2p/index.tsx +++ b/src/pages/p2p/index.tsx @@ -1,9 +1,8 @@ import styles from '@/styles/Home.module.scss'; -import Footer from '@/components/default/Footer/Footer'; import Header from '@/components/default/Header/Header'; import Marketplace from '@/pages/p2p/components/Marketplace/Marketplace'; -import { ReactComponent as OffersIcon } from '@/assets/images/UI/offers.svg'; -import { ReactComponent as PlusIcon } from '@/assets/images/UI/plus.svg'; +import OffersIcon from '@/assets/images/UI/offers.svg'; +import PlusIcon from '@/assets/images/UI/plus.svg'; import { useContext, useEffect, useState } from 'react'; import { getStats } from '@/utils/methods'; import Button from '@/components/UI/Button/Button'; @@ -17,6 +16,7 @@ import { GetServerSidePropsContext } from 'next'; import HomeProps from '@/interfaces/props/pages/p2p/HomeProps'; import OfferData from '@/interfaces/responses/offers/OfferData'; import { useRouter } from 'next/router'; +import { Footer } from '@/zano_ui/src'; function Home(props: HomeProps) { const [offers, setOffers] = useState([]); diff --git a/src/pages/p2p/process/[id].tsx b/src/pages/p2p/process/[id].tsx index 5202cf3..fffaa86 100644 --- a/src/pages/p2p/process/[id].tsx +++ b/src/pages/p2p/process/[id].tsx @@ -1,6 +1,6 @@ import styles from '@/styles/Process.module.scss'; 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'; function Process() { diff --git a/src/pages/p2p/process/components/Messenger/Messenger.tsx b/src/pages/p2p/process/components/Messenger/Messenger.tsx index 66a605a..d81a4bd 100644 --- a/src/pages/p2p/process/components/Messenger/Messenger.tsx +++ b/src/pages/p2p/process/components/Messenger/Messenger.tsx @@ -1,8 +1,8 @@ import Image from 'next/image'; -import { ReactComponent as DetailsIcon } from '@/assets/images/UI/walletsettings_icon.svg'; -import { ReactComponent as PlusIcon } from '@/assets/images/UI/plus.svg'; -import sendIcon from '@/assets/images/UI/send.svg'; -import crossSmallIcon from '@/assets/images/UI/cross_icon_small.svg'; +import DetailsIcon from '@/assets/images/UI/walletsettings_icon.svg'; +import PlusIcon from '@/assets/images/UI/plus.svg'; +import sendIcon from '@/assets/images/UI/send.svg?url'; +import crossSmallIcon from '@/assets/images/UI/cross_icon_small.svg?url'; import Input from '@/components/UI/Input/Input'; import Button from '@/components/UI/Button/Button'; import ProfileWidget from '@/components/UI/ProfileWidget/ProfileWidget'; diff --git a/src/pages/p2p/process/components/ProcessContent/ProcessContent.tsx b/src/pages/p2p/process/components/ProcessContent/ProcessContent.tsx index ed0d31f..fc36fd8 100644 --- a/src/pages/p2p/process/components/ProcessContent/ProcessContent.tsx +++ b/src/pages/p2p/process/components/ProcessContent/ProcessContent.tsx @@ -1,6 +1,6 @@ -import depositSentIcon from '@/assets/images/UI/deposit_sent.svg'; -import fundsConfirmedIcon from '@/assets/images/UI/funds_confirmed.svg'; -import offerCanceledIcon from '@/assets/images/UI/offer_canceled.svg'; +import depositSentIcon from '@/assets/images/UI/deposit_sent.svg?url'; +import fundsConfirmedIcon from '@/assets/images/UI/funds_confirmed.svg?url'; +import offerCanceledIcon from '@/assets/images/UI/offer_canceled.svg?url'; import Button from '@/components/UI/Button/Button'; import Messenger from '@/pages/p2p/process/components/Messenger/Messenger'; import PageTitle from '@/components/default/PageTitle/PageTitle'; diff --git a/src/pages/p2p/profile/ProfileTable/ProfileTable.tsx b/src/pages/p2p/profile/ProfileTable/ProfileTable.tsx index 89f618b..fe13d29 100644 --- a/src/pages/p2p/profile/ProfileTable/ProfileTable.tsx +++ b/src/pages/p2p/profile/ProfileTable/ProfileTable.tsx @@ -1,12 +1,12 @@ import EmptyLink from '@/components/UI/EmptyLink/EmptyLink'; import DepositTitle from '@/components/UI/DepositTitle/DepositTitle'; -import { ReactComponent as NoOffersIcon } from '@/assets/images/UI/no_offers.svg'; -import { ReactComponent as NoChatsIcon } from '@/assets/images/UI/no_chats.svg'; +import NoOffersIcon from '@/assets/images/UI/no_offers.svg'; +import NoChatsIcon from '@/assets/images/UI/no_chats.svg'; import { toStandardDateString } from '@/utils/utils'; import ProfileWidget from '@/components/UI/ProfileWidget/ProfileWidget'; import PairText from '@/components/UI/PairText/PairText'; 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 { useContext, useState } from 'react'; import { Store } from '@/store/store-reducer'; @@ -156,7 +156,7 @@ function ProfileTable(props: ProfileTableProps) { )} - {/* {categoryState === "my-offers" && + {/* {categoryState === "my-offers" &&