+
@@ -54,7 +51,7 @@ function TransactionURL(props: TransactionURLProps) {
- >
+
);
})}
>
diff --git a/components/detail/SwapSteps/TransactionURLMobileItem.tsx b/app/swap/[id]/_components/SwapSteps/TransactionURLMobileItem.tsx
similarity index 100%
rename from components/detail/SwapSteps/TransactionURLMobileItem.tsx
rename to app/swap/[id]/_components/SwapSteps/TransactionURLMobileItem.tsx
diff --git a/components/detail/SwapSteps/index.tsx b/app/swap/[id]/_components/SwapSteps/index.tsx
similarity index 100%
rename from components/detail/SwapSteps/index.tsx
rename to app/swap/[id]/_components/SwapSteps/index.tsx
diff --git a/app/swap/[id]/page.tsx b/app/swap/[id]/page.tsx
new file mode 100644
index 0000000..fb1b078
--- /dev/null
+++ b/app/swap/[id]/page.tsx
@@ -0,0 +1,37 @@
+import { ChevronRightIcon } from 'components/icons';
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+import { getTxDetails } from 'services';
+import SwapDetailSummary from './_components/SwapDetailSummary';
+import SwapSteps from './_components/SwapSteps';
+
+const Page = async ({ params }: { params: { id: string } }) => {
+ const details = await getTxDetails(params.id);
+
+ if (details.message === 'Transaction not found!') {
+ notFound();
+ }
+
+ return (
+
+
+
+
+
+ Home
+
+
+
+ Swap Details
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Page;
diff --git a/components/common/Button/LinkButton.tsx b/components/common/Button/LinkButton.tsx
index 4589d0c..e0d51e1 100644
--- a/components/common/Button/LinkButton.tsx
+++ b/components/common/Button/LinkButton.tsx
@@ -1,3 +1,5 @@
+'use client';
+
/* eslint-disable @typescript-eslint/restrict-plus-operands */
import Link from 'next/link';
import { LinkButtonProps } from './Button.types';
diff --git a/components/common/ButtonCopyIcon/index.tsx b/components/common/ButtonCopyIcon/index.tsx
index 69c1fba..84b3de7 100644
--- a/components/common/ButtonCopyIcon/index.tsx
+++ b/components/common/ButtonCopyIcon/index.tsx
@@ -1,3 +1,5 @@
+'use client';
+
import { CopyIcon, CheckIcon } from 'components/icons';
import { PropsType } from './ButtonCopyIcon.type';
import { CopyText } from 'utils/common';
diff --git a/components/common/Error/index.tsx b/components/common/Error/index.tsx
deleted file mode 100644
index 62a0b9b..0000000
--- a/components/common/Error/index.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import Image from 'next/image';
-import { useRouter } from 'next/router';
-import errorImage from 'public/img/error.png';
-import Layout from '../Layout';
-
-function Error() {
- const router = useRouter();
-
- return (
-
-
-
-
-
-
- Sorry, something went wrong
-
-
- An unexpected error has occurred. If reloading the page does not fix
- it, please contact Rango support.
-
-
-
-
- );
-}
-
-export default Error;
diff --git a/components/common/Footer/Footer.helper.ts b/components/common/Footer/Footer.constants.ts
similarity index 100%
rename from components/common/Footer/Footer.helper.ts
rename to components/common/Footer/Footer.constants.ts
diff --git a/components/common/Footer/index.tsx b/components/common/Footer/index.tsx
index 170748d..c81fa1d 100644
--- a/components/common/Footer/index.tsx
+++ b/components/common/Footer/index.tsx
@@ -1,11 +1,11 @@
-import { documentation, products, socialMedia } from './Footer.helper';
+import { documentation, products, socialMedia } from './Footer.constants';
import ListItem from './ListItem';
-import { LinkButton } from 'components/common/Button/LinkButton';
+import { LinkButton } from '../Button/LinkButton';
-function Footer() {
+export function Footer() {
return (
-
);
}
-
-export default Footer;
diff --git a/components/common/Navbar/DesktopNavbar.tsx b/components/common/Header/DesktopHeader.tsx
similarity index 87%
rename from components/common/Navbar/DesktopNavbar.tsx
rename to components/common/Header/DesktopHeader.tsx
index 7f46dec..0e027f9 100644
--- a/components/common/Navbar/DesktopNavbar.tsx
+++ b/components/common/Header/DesktopHeader.tsx
@@ -1,16 +1,22 @@
+'use client';
+
import { useState } from 'react';
import Image from 'next/image';
import Link from 'next/link';
import coloredLogo from 'public/logo.svg';
import rangoLogo from 'public/logo-with-text.svg';
import Menu from './Menu';
-import { DeviceProps } from './Navbar.type';
+import { DeviceProps } from './Header';
import SearchInput from '../SearchBox/SearchInput';
+import { getSearchInputVisibility } from './Header.helper';
+import { usePathname } from 'next/navigation';
-function DesktopNavbar(props: DeviceProps) {
- const { links, renderChildren, theme, className, hasSearchInput } = props;
+function DesktopHeader(props: DeviceProps) {
+ const { links, renderChildren, theme, className } = props;
const [showSubMenu, setShowSubMenu] = useState
(0);
+ const pathname = usePathname();
+
return (
- {hasSearchInput && (
+ {getSearchInputVisibility(pathname) && (
{
+ return pathname !== '/';
+};
export const links: Array = [
{
diff --git a/components/common/Navbar/Navbar.type.ts b/components/common/Header/Header.ts
similarity index 93%
rename from components/common/Navbar/Navbar.type.ts
rename to components/common/Header/Header.ts
index 7797469..c31b1a1 100644
--- a/components/common/Navbar/Navbar.type.ts
+++ b/components/common/Header/Header.ts
@@ -18,9 +18,8 @@ export type SubMenuTypes = Pick<
'location' | 'title' | 'openInNewTab'
> & { icon: React.ComponentType };
-export interface NavbarProps {
+export interface HeaderProps {
theme: 'dark' | 'light';
- hasSearchInput?: boolean;
}
export interface DeviceProps {
diff --git a/components/common/Navbar/Menu.tsx b/components/common/Header/Menu.tsx
similarity index 97%
rename from components/common/Navbar/Menu.tsx
rename to components/common/Header/Menu.tsx
index 30e020f..1b19704 100644
--- a/components/common/Navbar/Menu.tsx
+++ b/components/common/Header/Menu.tsx
@@ -1,5 +1,5 @@
import Link from 'next/link';
-import { MenuProps } from './Navbar.type';
+import { MenuProps } from './Header';
function Menu(props: MenuProps) {
const { subMenu, showSubMenu, title, theme } = props;
diff --git a/components/common/Navbar/MobileNavbar.tsx b/components/common/Header/MobileHeader.tsx
similarity index 90%
rename from components/common/Navbar/MobileNavbar.tsx
rename to components/common/Header/MobileHeader.tsx
index 153a098..890649d 100644
--- a/components/common/Navbar/MobileNavbar.tsx
+++ b/components/common/Header/MobileHeader.tsx
@@ -1,21 +1,24 @@
+'use client';
+
import Image from 'next/image';
import Link from 'next/link';
import coloredLogo from 'public/logo.svg';
import rangoLogo from 'public/logo-with-text.svg';
-import { DeviceProps } from './Navbar.type';
+import { DeviceProps } from './Header';
import MobileMenu from './MobileMenu';
import { useEffect, useState } from 'react';
-import { useRouter } from 'next/router';
+import { usePathname } from 'next/navigation';
import { SearchIcon } from 'components/icons';
import SearchInput from '../SearchBox/SearchInput';
+import { getSearchInputVisibility } from './Header.helper';
function MobileNavbar(props: DeviceProps) {
- const { theme, renderChildren, links, className, hasSearchInput } = props;
+ const { theme, renderChildren, links, className } = props;
const [showMenu, setShowMenu] = useState(false);
const [showSearchInput, setShowSearchInput] = useState(false);
- const { pathname } = useRouter();
+ const pathname = usePathname();
useEffect(() => {
setShowMenu(false);
@@ -54,7 +57,7 @@ function MobileNavbar(props: DeviceProps) {
/>
- {hasSearchInput && (
+ {getSearchInputVisibility(pathname) && (