diff --git a/src/components/dex/TradingHeader/components/DexGuide/index.tsx b/src/components/dex/TradingHeader/components/DexGuide/index.tsx
new file mode 100644
index 0000000..6dd75ed
--- /dev/null
+++ b/src/components/dex/TradingHeader/components/DexGuide/index.tsx
@@ -0,0 +1,102 @@
+import GuideRegistrator from '@/components/default/GuideRegistrator';
+import GuideContent from '@/components/UI/GuideContent';
+import { useMediaQuery } from '@/hook/useMediaQuery';
+import { usePathname, useSearchParams } from 'next/navigation';
+import { useRouter } from 'next/router';
+import React from 'react';
+import { Placement, Step } from 'react-joyride';
+
+const DexGuide = () => {
+ const router = useRouter();
+ const searchParams = useSearchParams();
+ const pathname = usePathname();
+ const isMobile = useMediaQuery(`(max-width: 620px)`);
+
+ const getPlacement = (position: 'auto' | Placement | 'center' | undefined) => {
+ if (isMobile) return 'auto';
+
+ return position;
+ };
+
+ const changeTab = (name?: string) => {
+ const params = new URLSearchParams(searchParams.toString());
+
+ if (name) {
+ params.set('tab', name);
+ } else {
+ params.delete('tab');
+ }
+
+ const qs = params.toString();
+ router.replace(qs ? `${pathname}?${qs}` : pathname, undefined, {
+ shallow: true,
+ scroll: false,
+ });
+ };
+
+ const steps: Step[] = [
+ {
+ target: '[data-tour="orders-pool"]',
+ placement: getPlacement('right-start'),
+ content: (
+
+ ),
+ disableBeacon: true,
+ },
+ {
+ target: '[data-tour="input-panel"]',
+ placement: getPlacement('left-start'),
+ content: (
+
+ ),
+ },
+ {
+ target: '[data-tour="user-orders"]',
+ placement: getPlacement('top-start'),
+ content: (
+
changeTab()}
+ text="This tab shows all of your active orders. You can track price, quantity, and cancel them anytime."
+ />
+ ),
+ },
+ {
+ target: '[data-tour="user-orders"]',
+ placement: getPlacement('top-start'),
+ content: (
+ changeTab('matches')}
+ text="Here you see orders that have been successfully matched and executed."
+ />
+ ),
+ },
+ {
+ target: '[data-tour="user-orders"]',
+ placement: getPlacement('top-start'),
+ content: (
+ changeTab('requests')}
+ text="This section lists your pending requests that are waiting for approval or fulfillment."
+ />
+ ),
+ },
+ {
+ target: '[data-tour="user-orders"]',
+ placement: getPlacement('top-start'),
+ content: (
+ changeTab('offers')}
+ text="In this tab you can find offers you’ve made to other traders that are not yet matched."
+ />
+ ),
+ },
+ ];
+
+ return (
+ <>
+
+
+ );
+};
+
+export default DexGuide;
diff --git a/src/components/dex/TradingHeader/index.tsx b/src/components/dex/TradingHeader/index.tsx
index 554f744..b75f657 100644
--- a/src/components/dex/TradingHeader/index.tsx
+++ b/src/components/dex/TradingHeader/index.tsx
@@ -4,13 +4,15 @@ import { ReactComponent as DownIcon } from '@/assets/images/UI/down_icon.svg';
import { ReactComponent as 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 Image from 'next/image';
+import questionIcon from '@/assets/images/UI/question.svg';
+import Image from 'next/image';
+import { useTour } from '@/store/guide-provider';
import styles from './styles.module.scss';
import StatItem from './components/StatItem';
import { TradingHeaderProps } from './types';
import CurrencyIcon from './components/CurrencyIcon';
import AssetRow from './components/AssetRow';
+import DexGuide from './components/DexGuide';
const TradingHeader = ({
pairStats,
@@ -21,6 +23,8 @@ const TradingHeader = ({
secondAssetId,
pairData,
}: TradingHeaderProps) => {
+ const { start, isRunning } = useTour('dex-onboarding');
+
const currencyNames = {
firstCurrencyName: pairData?.first_currency?.name || '',
secondCurrencyName: pairData?.second_currency?.name || '',
@@ -59,76 +63,85 @@ const TradingHeader = ({
];
return (
-
-
-
-
-
-
+ <>
+
+
+
+
+
+
+
-
-
- {!pairData ? (
- '...'
- ) : (
- <>
- {firstCurrencyName}
- /{secondCurrencyName}
-
- )}
-
-
-
-
= 0 ? styles.green : styles.red,
+
+
+ {!pairData ? (
+ '...'
+ ) : (
+ <>
+ {firstCurrencyName}
+ /{secondCurrencyName}
+
)}
- >
- {roundTo(notationToString(pairStats?.rate || 0, 8))}
- {pairRateUsd &&
~ ${pairRateUsd}
}
+
+
+
= 0 ? styles.green : styles.red,
+ )}
+ >
+ {roundTo(notationToString(pairStats?.rate || 0, 8))}
+
+ {pairRateUsd && (
+
~ ${pairRateUsd}
+ )}
+
+
+ {pairData && firstAssetLink && secondAssetLink && (
+
+ )}
+
+ {stats.map(({ Img, title, value, coefficient }) => (
+
+ ))}
- {pairData && firstAssetLink && secondAssetLink && (
-
- )}
+
+
- {stats.map(({ Img, title, value, coefficient }) => (
-
- ))}
+
+
-
-
- {/* */}
-
-
-
-
+
);
};
diff --git a/src/components/dex/UserOrders/index.tsx b/src/components/dex/UserOrders/index.tsx
index 61e56df..89e1a9b 100644
--- a/src/components/dex/UserOrders/index.tsx
+++ b/src/components/dex/UserOrders/index.tsx
@@ -373,7 +373,7 @@ const UserOrders = ({
return (
<>
-
+
+
@@ -238,7 +239,7 @@ function Trading() {
)}
-
+
);
}
diff --git a/src/pages/dex/trading/find-pair/index.tsx b/src/pages/dex/trading/find-pair/index.tsx
new file mode 100644
index 0000000..24f94cf
--- /dev/null
+++ b/src/pages/dex/trading/find-pair/index.tsx
@@ -0,0 +1,51 @@
+import { GetServerSideProps } from 'next';
+
+import { findPairID } from '@/utils/methods';
+import styles from '@/styles/404.module.scss';
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL;
+
+export const getServerSideProps: GetServerSideProps = async (context) => {
+ const { first, second } = context.query;
+
+ if (!first || !second) {
+ return {
+ notFound: true, // Show a 404 page if parameters are missing
+ };
+ }
+
+ try {
+ const idFound = await findPairID(first as string, second as string, API_URL);
+
+ console.log('ID found:', idFound);
+
+ if (typeof idFound === 'number') {
+ return {
+ redirect: {
+ destination: `/dex/trading/${idFound}`,
+ permanent: false,
+ },
+ };
+ }
+
+ return {
+ notFound: true,
+ };
+ } catch (error) {
+ console.error('Error fetching pair ID:', error);
+ return {
+ props: {
+ error: 'Failed to resolve the pair.',
+ },
+ };
+ }
+};
+
+const Page = ({ error }: { error?: string }) => {
+ return (
+
+
Error: {error}
+
+ );
+};
+export default Page;
diff --git a/src/store/guide-provider.tsx b/src/store/guide-provider.tsx
new file mode 100644
index 0000000..9e8021b
--- /dev/null
+++ b/src/store/guide-provider.tsx
@@ -0,0 +1,191 @@
+import GuideTooltip from '@/components/UI/GuideTooltip';
+import React, { createContext, useCallback, useContext, useMemo, useRef, useState } from 'react';
+import { CallBackProps, EVENTS, STATUS, Step } from 'react-joyride';
+import dynamic from 'next/dynamic';
+
+const JoyrideNoSSR = dynamic(() => import('react-joyride'), { ssr: false });
+
+type TourName = string;
+type Registry = Record;
+
+type Ctx = {
+ register: (_name: TourName, _steps: Step[]) => void;
+ start: (_name: TourName) => void;
+ startOnce: (_name: TourName, _version?: string) => void;
+ stop: () => void;
+ isRunning: boolean;
+ active?: TourName;
+};
+
+const TourCtx = createContext(null);
+const STORAGE_PREFIX = 'tour.seen:';
+
+export function GuideProvider({ children }: { children: React.ReactNode }) {
+ const registryRef = useRef({});
+ const [run, setRun] = useState(false);
+ const [active, setActive] = useState(undefined);
+ const [stepIndex, setStepIndex] = useState(0);
+
+ const register = useCallback((name, steps) => {
+ registryRef.current[name] = steps;
+ }, []);
+
+ const start = useCallback((name: TourName) => {
+ if (!registryRef.current[name]?.length) return;
+ setActive(name);
+ setStepIndex(0);
+ setRun(true);
+ }, []);
+
+ const startOnce = useCallback(
+ (name: TourName, version = 'v1') => {
+ const key = `${STORAGE_PREFIX}${name}:${version}`;
+ if (!localStorage.getItem(key)) {
+ localStorage.setItem(key, '1');
+ start(name);
+ }
+ },
+ [start],
+ );
+
+ const stop = useCallback(() => {
+ setRun(false);
+ setActive(undefined);
+ setStepIndex(0);
+ }, []);
+
+ const waitForEl = useCallback(
+ (selector: string | Element, { timeout = 2000, interval = 50 } = {}) =>
+ new Promise((resolve) => {
+ const startT = performance.now();
+ const tick = () => {
+ let found: Element | null | string = selector;
+
+ if (selector === 'body') {
+ found = document.body;
+ } else if (typeof selector === 'string') {
+ found = document.querySelector(selector);
+ } else {
+ found = selector;
+ }
+
+ if (found) return resolve(true);
+ if (performance.now() - startT > timeout) return resolve(false);
+ setTimeout(tick, interval);
+ };
+ tick();
+ }),
+ [],
+ );
+
+ const advancingRef = useRef(false);
+
+ const safeAdvanceTo = useCallback(
+ async (nextIndex: number) => {
+ if (advancingRef.current) return;
+ advancingRef.current = true;
+
+ const steps = active ? (registryRef.current[active] ?? []) : [];
+ const next = steps[nextIndex];
+
+ if (!next || next.target === 'body') {
+ setStepIndex(nextIndex);
+ advancingRef.current = false;
+ return;
+ }
+
+ const ok = await waitForEl(String(next.target), { timeout: 2000 });
+ if (ok) setStepIndex(nextIndex);
+
+ advancingRef.current = false;
+ },
+ [active, waitForEl],
+ );
+
+ const callback = useCallback(
+ (data: CallBackProps) => {
+ const { status, index, type } = data;
+
+ if (type === EVENTS.STEP_AFTER && typeof index === 'number') {
+ void safeAdvanceTo(index + 1);
+ return;
+ }
+
+ if (type === EVENTS.TARGET_NOT_FOUND && typeof index === 'number') {
+ void safeAdvanceTo(index + 1);
+ return;
+ }
+
+ if (status === STATUS.FINISHED || status === STATUS.SKIPPED) {
+ stop();
+ setStepIndex(0);
+ }
+ },
+ [safeAdvanceTo, stop],
+ );
+
+ const steps = active ? (registryRef.current[active] ?? []) : [];
+
+ const value = useMemo(
+ () => ({
+ register,
+ start,
+ startOnce,
+ stop,
+ isRunning: run,
+ active,
+ }),
+ [register, start, startOnce, stop, run, active],
+ );
+
+ return (
+
+ {children}
+
+
+ );
+}
+
+export function useTour(name?: TourName) {
+ const ctx = useContext(TourCtx);
+ if (!ctx) throw new Error('useTour must be used within GuideProvider');
+ const { register, start, startOnce, stop, isRunning, active } = ctx;
+ return {
+ register,
+ start: () => (name ? start(name) : stop()),
+ startOnce: (version?: string) => (name ? startOnce(name, version) : undefined),
+ stop,
+ isRunning,
+ active,
+ };
+}
+
+export const dataTour = (id: string) => ({ 'data-tour': id }) as const;
diff --git a/src/styles/FindPair.module.scss b/src/styles/FindPair.module.scss
new file mode 100644
index 0000000..13e1f82
--- /dev/null
+++ b/src/styles/FindPair.module.scss
@@ -0,0 +1,6 @@
+.title {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
diff --git a/src/styles/themes/dark.scss b/src/styles/themes/dark.scss
index de9a109..0001323 100644
--- a/src/styles/themes/dark.scss
+++ b/src/styles/themes/dark.scss
@@ -56,4 +56,5 @@
--table-group-header-bg: #0c1940;
--tab-bg-color: #1f8feb1a;
--selector-bg-color: #0c1940;
+ --guide-skip-btn: #1f8feb;
}
diff --git a/src/styles/themes/light.scss b/src/styles/themes/light.scss
index 8a639d6..c4fdac0 100644
--- a/src/styles/themes/light.scss
+++ b/src/styles/themes/light.scss
@@ -56,4 +56,5 @@
--table-group-header-bg: #f2f5f9;
--tab-bg-color: #1f8feb;
--selector-bg-color: #e7eff8;
+ --guide-skip-btn: #ffffff;
}
diff --git a/src/utils/methods.ts b/src/utils/methods.ts
index 89d6a41..5e86cfb 100644
--- a/src/utils/methods.ts
+++ b/src/utils/methods.ts
@@ -81,7 +81,7 @@ export async function findPairID(
second: string,
host: string | undefined = undefined,
): Promise {
- const findPairURL = `${host ? `https://${host}` : ''}/api/dex/find-pair`;
+ const findPairURL = `${host ?? ''}/api/dex/find-pair`;
console.log('Find pair URL:', findPairURL);