diff --git a/client/app/root/package.json b/client/app/root/package.json
index 881479a..0923462 100644
--- a/client/app/root/package.json
+++ b/client/app/root/package.json
@@ -10,13 +10,15 @@
},
"devDependencies": {
"@mui/material": "^5.14.12",
- "@types/react": "^18.2.27"
+ "@types/react": "^18.2.27",
+ "react-router-dom": "^6.16.0"
},
"peerDependencies": {
"@emotion/react": "11",
"@emotion/styled": "11",
"@mui/material": "5",
"react": "18",
- "react-dom": "18"
+ "react-dom": "18",
+ "react-router-dom": "6"
}
}
diff --git a/client/app/root/src/index.tsx b/client/app/root/src/index.tsx
index e9198e1..21833a2 100644
--- a/client/app/root/src/index.tsx
+++ b/client/app/root/src/index.tsx
@@ -1,15 +1,20 @@
-import type { FC } from 'react'
+import type { FC } from "react";
-import { withProviders } from '@app/providers'
-import { Routes } from '@app/routes'
-import { Container } from '@ui/container'
-import { Header } from '@ui/header'
+import { withProviders } from "@app/providers";
+import { Routes } from "@app/routes";
+import { Container } from "@ui/container";
+import { Header } from "@ui/header";
+import { useParams } from "react-router-dom";
-const App: FC = () => (
-
-
-
-
-)
+const App: FC = () => {
+ const { wallet } = useParams();
+ console.log(wallet);
+ return (
+
+
+
+
+ );
+};
-export default withProviders(App)
+export default withProviders(App);
diff --git a/client/shared/ui/header/src/index.tsx b/client/shared/ui/header/src/index.tsx
index 839d397..e55e3bf 100644
--- a/client/shared/ui/header/src/index.tsx
+++ b/client/shared/ui/header/src/index.tsx
@@ -1,17 +1,39 @@
-import { FC } from 'react'
-import { useState } from 'react'
+import { FC, KeyboardEvent } from "react";
+import { useState, useEffect } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
-import Box from '@mui/material/Box'
-import Typography from '@mui/material/Typography'
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
-import { Search } from '@ui/search'
+import { Search } from "@ui/search";
export const Header: FC = () => {
- const [wallet, setWallet] = useState('')
+ const { pathname } = useLocation();
+ const searchParams = pathname.split("/")[2];
+ const navigate = useNavigate();
+
+ const [wallet, setWallet] = useState("");
+
+ const handleSubmit = (e: KeyboardEvent) => {
+ if (e.key === "Enter") {
+ navigate(`/portfolio/${wallet}`);
+ }
+ };
+
+ useEffect(() => {
+ setWallet(searchParams ? searchParams : "");
+ }, [searchParams]);
+
return (
-
- OrdiTracker
-
+
+ OrdiTracker
+
- )
-}
+ );
+};
diff --git a/client/shared/ui/search/package.json b/client/shared/ui/search/package.json
index c3d6113..9d6a0f5 100644
--- a/client/shared/ui/search/package.json
+++ b/client/shared/ui/search/package.json
@@ -4,13 +4,15 @@
"type": "module",
"devDependencies": {
"@mui/material": "^5.14.12",
- "@types/react": "^18.2.27"
+ "@types/react": "^18.2.27",
+ "react-router-dom": "^6.16.0"
},
"peerDependencies": {
"@emotion/react": "11",
"@emotion/styled": "11",
"@mui/material": "5",
"react": "18",
- "react-dom": "18"
+ "react-dom": "18",
+ "react-router-dom": "6"
}
}
diff --git a/client/shared/ui/search/src/index.tsx b/client/shared/ui/search/src/index.tsx
index 1861445..52b3485 100644
--- a/client/shared/ui/search/src/index.tsx
+++ b/client/shared/ui/search/src/index.tsx
@@ -1,36 +1,43 @@
-import { ChangeEvent } from 'react'
-import { FC } from 'react'
+import { ChangeEvent, KeyboardEvent } from "react";
+import { FC } from "react";
-import FormControl from '@mui/material/FormControl'
-import Input from '@mui/material/Input'
-import InputAdornment from '@mui/material/InputAdornment'
+import FormControl from "@mui/material/FormControl";
+import Input from "@mui/material/Input";
+import InputAdornment from "@mui/material/InputAdornment";
export interface SearchProps {
- value: string
- handleChange: (e: string) => void
+ value: string;
+ handleChange: (e: string) => void;
+ handleSubmit?: (e: KeyboardEvent) => void;
}
-export const Search: FC = ({ value, handleChange }) => (
+export const Search: FC = ({ value, handleChange, handleSubmit }) => (
) => e.keyCode === 13 ? navigate(`/portfolio/${value}`) : handleChange(e.target.value)} .
onChange={(e: ChangeEvent) => handleChange(e.target.value)}
- placeholder='Search'
+ onKeyDown={(e: KeyboardEvent) => (handleSubmit ? handleSubmit(e) : null)}
+ placeholder="Search"
startAdornment={
-
-
-)
+);
diff --git a/yarn.lock b/yarn.lock
index b1052fb..f7d5bbc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -197,12 +197,14 @@ __metadata:
"@types/react": "npm:^18.2.27"
"@ui/container": "workspace:^"
"@ui/header": "workspace:^"
+ react-router-dom: "npm:^6.16.0"
peerDependencies:
"@emotion/react": 11
"@emotion/styled": 11
"@mui/material": 5
react: 18
react-dom: 18
+ react-router-dom: 6
languageName: unknown
linkType: soft
@@ -2932,12 +2934,14 @@ __metadata:
dependencies:
"@mui/material": "npm:^5.14.12"
"@types/react": "npm:^18.2.27"
+ react-router-dom: "npm:^6.16.0"
peerDependencies:
"@emotion/react": 11
"@emotion/styled": 11
"@mui/material": 5
react: 18
react-dom: 18
+ react-router-dom: 6
languageName: unknown
linkType: soft