Skip to content

Commit f2069f8

Browse files
Merge pull request #17 from Nuklai/piotr-replace-with-tanstack-router
Replace with tanstack router
2 parents 687134d + 5fadbbe commit f2069f8

File tree

10 files changed

+152
-79
lines changed

10 files changed

+152
-79
lines changed

.vscode/settings.json

+6-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,9 @@
11
{
2-
"cSpell.words": ["Nuklai", "tailwindcss", "wailsjs"],
2+
"cSpell.words": [
3+
"Nuklai",
4+
"tailwindcss",
5+
"tanstack",
6+
"wailsjs"
7+
],
38
"editor.defaultFormatter": "biomejs.biome"
49
}

frontend/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@
1212
"dependencies": {
1313
"@ant-design/icons": "^5.2.5",
1414
"@ant-design/plots": "^1.2.5",
15+
"@tanstack/react-router": "^1.43.12",
1516
"antd": "^5.8.4",
1617
"react": "^18.3.1",
1718
"react-dom": "^18.3.1",
18-
"react-router-dom": "^6.15.0",
1919
"tailwind-merge": "^2.3.0"
2020
},
2121
"devDependencies": {

frontend/package.json.md5

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
9e93899b1ad4a37715ca6687c4d288f2
1+
dad6bbc3af838b3161e7b4e612a91a2f

frontend/src/App.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33

44
import { App as AApp, FloatButton, Layout, Row, Typography } from 'antd';
55
import { useEffect, useState } from 'react';
6-
import { Outlet } from 'react-router-dom';
6+
import { Outlet } from '@tanstack/react-router';
77
import { GetCommitHash, OpenLink } from '../wailsjs/go/main/App';
88
import logo from './assets/images/nuklai-footer.png';
99
import NavBar from './components/NavBar';

frontend/src/components/FundsCheck.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
// See the file LICENSE for licensing terms.
33

44
import { Alert } from 'antd';
5-
import { Link } from 'react-router-dom';
5+
import { Link } from '@tanstack/react-router';
66

77
const FundsCheck = () => {
88
return (

frontend/src/components/NavBar.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import {
2929
Typography,
3030
} from 'antd';
3131
import { useCallback, useEffect, useRef, useState } from 'react';
32-
import { Link as RLink, useLocation } from 'react-router-dom';
32+
import { Link as RLink, useLocation } from '@tanstack/react-router';
3333
import type { backend } from 'wailsjs/go/models';
3434

3535
import {
@@ -249,27 +249,27 @@ const NavBar = () => {
249249
selectedKeys={[location.pathname.slice(1) || 'explorer']}
250250
items={[
251251
{
252-
label: <RLink to={'explorer'}>Explorer</RLink>,
252+
label: <RLink to='/explorer'>Explorer</RLink>,
253253
key: 'explorer',
254254
icon: <DashboardOutlined />,
255255
},
256256
{
257-
label: <RLink to={'faucet'}>Faucet</RLink>,
257+
label: <RLink to='/faucet'>Faucet</RLink>,
258258
key: 'faucet',
259259
icon: <GoldOutlined />,
260260
},
261261
{
262-
label: <RLink to={'mint'}>Mint</RLink>,
262+
label: <RLink to='/mint'>Mint</RLink>,
263263
key: 'mint',
264264
icon: <BankOutlined />,
265265
},
266266
{
267-
label: <RLink to={'transfer'}>Transfer</RLink>,
267+
label: <RLink to="/transfer">Transfer</RLink>,
268268
key: 'transfer',
269269
icon: <SendOutlined />,
270270
},
271271
{
272-
label: <RLink to={'feed'}>Feed</RLink>,
272+
label: <RLink to="/feed">Feed</RLink>,
273273
key: 'feed',
274274
icon: <ContainerOutlined />,
275275
},

frontend/src/main.tsx

+4-5
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
// Copyright (C) 2024, Nuklai. All rights reserved.
22
// See the file LICENSE for licensing terms.
33

4-
import routes from '@/routes';
54
import React from 'react';
6-
import { createRoot } from 'react-dom/client';
7-
import { RouterProvider, createHashRouter } from 'react-router-dom';
8-
9-
const router = createHashRouter(routes, { basename: '/' });
5+
import { routeTree } from '@/routes';
6+
import { createRoot } from 'react-dom/client'
7+
import { RouterProvider, createRouter, createHashHistory } from '@tanstack/react-router';
8+
const router = createRouter( { routeTree, history: createHashHistory() });
109

1110
// biome-ignore lint/style/noNonNullAssertion: root always exists
1211
createRoot(document.getElementById('root')!).render(

frontend/src/routes.tsx

+62-31
Original file line numberDiff line numberDiff line change
@@ -3,40 +3,71 @@
33

44
import App from './App';
55

6+
import {
7+
createRootRoute,
8+
createRoute,
9+
createRouter,
10+
} from "@tanstack/react-router";
11+
612
import Explorer from '@/components/Explorer';
713
import Faucet from '@/components/Faucet';
814
import Feed from '@/components/Feed';
915
import Mint from '@/components/Mint';
1016
import Transfer from '@/components/Transfer';
1117

12-
const routes = [
13-
{
14-
path: '/',
15-
element: <App />,
16-
children: [
17-
{ index: true, element: <Explorer /> },
18-
{
19-
path: 'explorer',
20-
element: <Explorer />,
21-
},
22-
{
23-
path: 'faucet',
24-
element: <Faucet />,
25-
},
26-
{
27-
path: 'mint',
28-
element: <Mint />,
29-
},
30-
{
31-
path: 'transfer',
32-
element: <Transfer />,
33-
},
34-
{
35-
path: 'feed',
36-
element: <Feed />,
37-
},
38-
],
39-
},
40-
];
41-
42-
export default routes;
18+
const rootRoute = createRootRoute({
19+
component: App,
20+
});
21+
22+
const indexRoute = createRoute({
23+
path: "/",
24+
getParentRoute: () => rootRoute,
25+
component: Explorer,
26+
});
27+
28+
const explorerRoute = createRoute({
29+
path: "/explorer",
30+
getParentRoute: () => rootRoute,
31+
component: Explorer,
32+
})
33+
34+
const faucetRoute = createRoute({
35+
path: "/faucet",
36+
getParentRoute: () => rootRoute,
37+
component: Faucet,
38+
});
39+
40+
const mintRoute = createRoute({
41+
path: "/mint",
42+
getParentRoute: () => rootRoute,
43+
component: Mint,
44+
});
45+
46+
const transferRoute = createRoute({
47+
path: "/transfer",
48+
getParentRoute: () => rootRoute,
49+
component: Transfer,
50+
});
51+
52+
const feedRoute = createRoute({
53+
path: "/feed",
54+
getParentRoute: () => rootRoute,
55+
component: Feed,
56+
});
57+
58+
export const routeTree = rootRoute.addChildren([
59+
indexRoute,
60+
explorerRoute,
61+
faucetRoute,
62+
mintRoute,
63+
transferRoute,
64+
feedRoute
65+
]);
66+
67+
const router = createRouter({ routeTree });
68+
69+
declare module "@tanstack/react-router" {
70+
interface Register {
71+
router: typeof router;
72+
}
73+
}

frontend/yarn.lock

+66-32
Original file line numberDiff line numberDiff line change
@@ -1135,13 +1135,6 @@ __metadata:
11351135
languageName: node
11361136
linkType: hard
11371137

1138-
"@remix-run/router@npm:1.17.1":
1139-
version: 1.17.1
1140-
resolution: "@remix-run/router@npm:1.17.1"
1141-
checksum: 10c0/bee1631feb03975b64e1c7b574da432a05095dda2ff0f164c737e4952841a58d7b9861de87bd13a977fd970c74dcf8c558fc2d26c6ec01a9ae9041b1b4430869
1142-
languageName: node
1143-
linkType: hard
1144-
11451138
"@rollup/rollup-android-arm-eabi@npm:4.18.0":
11461139
version: 4.18.0
11471140
resolution: "@rollup/rollup-android-arm-eabi@npm:4.18.0"
@@ -1254,6 +1247,48 @@ __metadata:
12541247
languageName: node
12551248
linkType: hard
12561249

1250+
"@tanstack/history@npm:1.43.12":
1251+
version: 1.43.12
1252+
resolution: "@tanstack/history@npm:1.43.12"
1253+
checksum: 10c0/fc682e29f1d0fa3522496d37646075c8c0b265f3a04694547cc294f3de323ab75646fdb864c16c06bae5ba146416d710922f4faf48c7fe123ac4baf57bbd0dad
1254+
languageName: node
1255+
linkType: hard
1256+
1257+
"@tanstack/react-router@npm:^1.43.12":
1258+
version: 1.43.12
1259+
resolution: "@tanstack/react-router@npm:1.43.12"
1260+
dependencies:
1261+
"@tanstack/history": "npm:1.43.12"
1262+
"@tanstack/react-store": "npm:^0.2.1"
1263+
tiny-invariant: "npm:^1.3.1"
1264+
tiny-warning: "npm:^1.0.3"
1265+
peerDependencies:
1266+
react: ">=18"
1267+
react-dom: ">=18"
1268+
checksum: 10c0/7f982e7b78f52edb21f3a68b00ecba7774f7780175455c395ac4e7eedea072c10ce689fa35db56448bf4b9bc2c7cb13a44dfa8fa00c5970ebc01c1fcd65033b3
1269+
languageName: node
1270+
linkType: hard
1271+
1272+
"@tanstack/react-store@npm:^0.2.1":
1273+
version: 0.2.1
1274+
resolution: "@tanstack/react-store@npm:0.2.1"
1275+
dependencies:
1276+
"@tanstack/store": "npm:0.1.3"
1277+
use-sync-external-store: "npm:^1.2.0"
1278+
peerDependencies:
1279+
react: ">=16"
1280+
react-dom: ">=16"
1281+
checksum: 10c0/b4feb33c4eea6a1185cd8a9401864a02601cb833c8cde221bf8bca657b0d9b90aeab87775500dcf1417f724ea33f28a9728cd9d4acbed4619068048cc089bb3f
1282+
languageName: node
1283+
linkType: hard
1284+
1285+
"@tanstack/store@npm:0.1.3":
1286+
version: 0.1.3
1287+
resolution: "@tanstack/store@npm:0.1.3"
1288+
checksum: 10c0/e56b2576cd963a7c4ca945fb16f2adf6692143aff1fb62c7a6739c7c004c3e3848d66d6838109f56236ee8988c69d3c807389db39011c59a53abc761df1b9ac0
1289+
languageName: node
1290+
linkType: hard
1291+
12571292
"@types/babel__core@npm:^7.20.5":
12581293
version: 7.20.5
12591294
resolution: "@types/babel__core@npm:7.20.5"
@@ -3392,6 +3427,7 @@ __metadata:
33923427
"@ant-design/icons": "npm:^5.2.5"
33933428
"@ant-design/plots": "npm:^1.2.5"
33943429
"@biomejs/biome": "npm:1.8.3"
3430+
"@tanstack/react-router": "npm:^1.43.12"
33953431
"@types/node": "npm:^20.14.10"
33963432
"@types/react": "npm:^18.3.3"
33973433
"@types/react-dom": "npm:^18.3.0"
@@ -3402,7 +3438,6 @@ __metadata:
34023438
postcss: "npm:^8.4.39"
34033439
react: "npm:^18.3.1"
34043440
react-dom: "npm:^18.3.1"
3405-
react-router-dom: "npm:^6.15.0"
34063441
tailwind-merge: "npm:^2.3.0"
34073442
tailwindcss: "npm:^3.4.4"
34083443
typescript: "npm:^5.5.3"
@@ -4280,30 +4315,6 @@ __metadata:
42804315
languageName: node
42814316
linkType: hard
42824317

4283-
"react-router-dom@npm:^6.15.0":
4284-
version: 6.24.1
4285-
resolution: "react-router-dom@npm:6.24.1"
4286-
dependencies:
4287-
"@remix-run/router": "npm:1.17.1"
4288-
react-router: "npm:6.24.1"
4289-
peerDependencies:
4290-
react: ">=16.8"
4291-
react-dom: ">=16.8"
4292-
checksum: 10c0/458c6c539304984c47b0ad8d5d5b1f8859cc0845e47591d530cb4fcb13498f70a89b42bc4daeea55d57cfa08408b453bcf601cabb2c987f554cdcac13805caa8
4293-
languageName: node
4294-
linkType: hard
4295-
4296-
"react-router@npm:6.24.1":
4297-
version: 6.24.1
4298-
resolution: "react-router@npm:6.24.1"
4299-
dependencies:
4300-
"@remix-run/router": "npm:1.17.1"
4301-
peerDependencies:
4302-
react: ">=16.8"
4303-
checksum: 10c0/f50c78ca52c5154ab933c17708125e8bf71ccf2072993a80302526a0a23db9ceac6e36d5c891d62ccd16f13e60cd1b6533a2036523d1b09e0148ac49e34b2e83
4304-
languageName: node
4305-
linkType: hard
4306-
43074318
"react@npm:^18.3.1":
43084319
version: 18.3.1
43094320
resolution: "react@npm:18.3.1"
@@ -4960,6 +4971,20 @@ __metadata:
49604971
languageName: node
49614972
linkType: hard
49624973

4974+
"tiny-invariant@npm:^1.3.1":
4975+
version: 1.3.3
4976+
resolution: "tiny-invariant@npm:1.3.3"
4977+
checksum: 10c0/65af4a07324b591a059b35269cd696aba21bef2107f29b9f5894d83cc143159a204b299553435b03874ebb5b94d019afa8b8eff241c8a4cfee95872c2e1c1c4a
4978+
languageName: node
4979+
linkType: hard
4980+
4981+
"tiny-warning@npm:^1.0.3":
4982+
version: 1.0.3
4983+
resolution: "tiny-warning@npm:1.0.3"
4984+
checksum: 10c0/ef8531f581b30342f29670cb41ca248001c6fd7975ce22122bd59b8d62b4fc84ad4207ee7faa95cde982fa3357cd8f4be650142abc22805538c3b1392d7084fa
4985+
languageName: node
4986+
linkType: hard
4987+
49634988
"to-fast-properties@npm:^2.0.0":
49644989
version: 2.0.0
49654990
resolution: "to-fast-properties@npm:2.0.0"
@@ -5160,6 +5185,15 @@ __metadata:
51605185
languageName: node
51615186
linkType: hard
51625187

5188+
"use-sync-external-store@npm:^1.2.0":
5189+
version: 1.2.2
5190+
resolution: "use-sync-external-store@npm:1.2.2"
5191+
peerDependencies:
5192+
react: ^16.8.0 || ^17.0.0 || ^18.0.0
5193+
checksum: 10c0/23b1597c10adf15b26ade9e8c318d8cc0abc9ec0ab5fc7ca7338da92e89c2536abd150a5891bf076836c352fdfa104fc7231fb48f806fd9960e0cbe03601abaf
5194+
languageName: node
5195+
linkType: hard
5196+
51635197
"util-deprecate@npm:^1.0.2":
51645198
version: 1.0.2
51655199
resolution: "util-deprecate@npm:1.0.2"

yarn.lock

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
2+
# yarn lockfile v1
3+
4+

0 commit comments

Comments
 (0)