Ipfs

.github/workflows/ipfs.yml

@@ -0,0 +1,42 @@
+name: Deploy to IPFS
+
+permissions:
+  contents: read
+  pull-requests: write
+  statuses: write
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v5
+
+      - uses: pnpm/action-setup@v4
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: 22
+          cache: pnpm
+
+      - name: Install dependencies
+        run: pnpm i
+
+      - name: Build project
+        run: VITE_HASH_ROUTER=1 pnpm build
+
+      - name: Deploy to IPFS
+        uses: ipfs/ipfs-deploy-action@v1
+        id: deploy
+        with:
+          path-to-deploy: dist
+          storacha-key: ${{ secrets.STORACHA_KEY }}
+          storacha-proof: ${{ secrets.STORACHA_PROOF }}
+          github-token: ${{ github.token }}

package.json

@@ -39,7 +39,7 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-responsive": "^10.0.1",
-    "react-router-dom": "^7.9.6",
+    "react-router": "^7.9.6",
     "react-svg": "^16.3.0",
     "react-toastify": "^11.0.5",
     "react-virtuoso": "^4.14.1",

pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+patchedDependencies:
+  react-router@7.9.6: patches/react-router@7.9.6.patch

src/App.tsx

@@ -1,4 +1,4 @@
-import { Navigate, Route, Routes } from "react-router-dom"
+import { Navigate, Route, Routes } from "react-router"
 import { distinctUntilChanged, map, merge, Observable, switchMap } from "rxjs"
 import { Header } from "./components/Header/Header"
 import { Dashboard, dashboardSub$ } from "./pages/Dashboard"

src/components/Header/ChainSelector.tsx

@@ -3,7 +3,7 @@ import { knownChains, type KnownChains } from "@/state/chainConfig"
 import { withSubscribe } from "@/util/rxjs"
 import { useStateObservable } from "@react-rxjs/core"
 import { Button } from "@/components/ui/button"
-import { useNavigate } from "react-router-dom"
+import { useNavigate } from "react-router"
 import { codeSplit } from "@/util/codeSplit"
 
 export const chainNameByChain: Record<KnownChains, string> = {

src/components/Header/Header.tsx

@@ -1,4 +1,4 @@
-import { Link, useParams } from "react-router-dom"
+import { Link, useParams } from "react-router"
 import { ChainSelector } from "./ChainSelector"
 import { SelectAccount } from "./SelectAccount"
 import { ChopsticksController } from "../ChopsticksController"

src/components/NavMenu/NavMenu.tsx

@@ -1,7 +1,7 @@
 import { cn } from "@polkahub/ui-components"
 import { GitFork, Home, ShieldCheck, Star } from "lucide-react"
 import { type FC, type PropsWithChildren } from "react"
-import { Link, matchPath, useLocation, useParams } from "react-router-dom"
+import { Link, matchPath, useLocation, useParams } from "react-router"
 
 const pages = [
   {

src/main.tsx

@@ -1,7 +1,7 @@
 import { PolkaHubProvider } from "polkahub"
 import { StrictMode } from "react"
 import { createRoot } from "react-dom/client"
-import { Navigate, Route, Routes } from "react-router-dom"
+import { Navigate, Route, Routes } from "react-router"
 import App, { appSub$ } from "./App.tsx"
 import { Transactions } from "./components/Transactions.tsx"
 import "./index.css"

src/pages/AccountStatus.tsx

@@ -9,7 +9,7 @@ import { CardPlaceholder } from "@/components/CardPlaceholder"
 import { accountStatus$ } from "@/state/account"
 import { useStateObservable } from "@react-rxjs/core"
 import { Suspense, type FC } from "react"
-import { Link } from "react-router-dom"
+import { Link } from "react-router"
 import { EMPTY, merge, switchMap, tap } from "rxjs"
 import { minBond$ } from "./Nominate/MinBondingAmounts"
 import {

src/pages/Nominate/Nominate.tsx

@@ -2,7 +2,7 @@ import { CardPlaceholder } from "@/components/CardPlaceholder"
 import { isNominating$ } from "@/state/nominate"
 import { useStateObservable } from "@react-rxjs/core"
 import { Suspense } from "react"
-import { Navigate, Route, Routes } from "react-router-dom"
+import { Navigate, Route, Routes } from "react-router"
 import { merge } from "rxjs"
 import { NominatingContent, nominatingContentSub$ } from "./Nominating"
 import {

src/pages/Nominate/NominateStatus.tsx

@@ -7,7 +7,7 @@ import type { FC } from "react"
 import { merge } from "rxjs"
 import { NominateLocks, nominateLocksSub$ } from "./NominateLocks"
 import { StopNominating } from "./StopNominating"
-import { useNavigate, useParams } from "react-router-dom"
+import { useNavigate, useParams } from "react-router"
 import { Button } from "@polkahub/ui-components"
 import { Badge } from "@/components/ui/badge"
 import { Target } from "lucide-react"

src/pages/Nominate/Nominating.tsx

@@ -16,7 +16,7 @@ import { roundToDecimalPlaces } from "@/util/format"
 import { state, useStateObservable } from "@react-rxjs/core"
 import { type SS58String } from "polkadot-api"
 import { lazy, Suspense, type FC } from "react"
-import { Link, useParams } from "react-router-dom"
+import { Link, useParams } from "react-router"
 import {
   combineLatest,
   debounceTime,

src/pages/Nominate/UpsertNomination/ManageNomination.tsx

@@ -8,7 +8,7 @@ import { PayeePicker, payeePicker$ } from "./PayeePicker"
 import { Nominations } from "../PickValidators/PickValidators"
 import { isNominating$ } from "@/state/nominate"
 import { useStateObservable } from "@react-rxjs/core"
-import { useNavigate } from "react-router-dom"
+import { useNavigate } from "react-router"
 import { StopNominating } from "../StopNominating"
 
 export const manageNomination$ = merge(

src/pages/Nominate/UpsertNomination/UpsertNomination.tsx

@@ -9,7 +9,7 @@ import { currentNominationPoolStatus$ } from "@/state/nominationPool"
 import { liftSuspense, useStateObservable } from "@react-rxjs/core"
 import { GitFork } from "lucide-react"
 import { lazy, Suspense } from "react"
-import { Link } from "react-router-dom"
+import { Link } from "react-router"
 import { merge } from "rxjs"
 import {
   bondableAmount$,

src/pages/Pools/AccountPoolStatus.tsx

@@ -6,7 +6,7 @@ import { currentNominationPoolStatus$ } from "@/state/nominationPool"
 import { NominationPoolsBondExtra } from "@polkadot-api/descriptors"
 import { liftSuspense, useStateObservable } from "@react-rxjs/core"
 import type { FC } from "react"
-import { Link, useParams } from "react-router-dom"
+import { Link, useParams } from "react-router"
 import { merge } from "rxjs"
 import { ManageBond } from "./ManageBond"
 import { ManageLocks, manageLocksSub$ } from "./ManageUnlocks"

src/pages/Pools/PoolDetail.tsx

@@ -28,7 +28,7 @@ import {
   type ReactElement,
   type ReactNode,
 } from "react"
-import { Link, useParams } from "react-router-dom"
+import { Link, useParams } from "react-router"
 import { combineLatest, map, merge, switchMap } from "rxjs"
 import { aggregatedValidators$ } from "../Validators/validatorList.state"
 import { JoinPool, joinPoolSub$ } from "./JoinPool"

src/pages/Pools/PoolList.tsx

@@ -8,7 +8,7 @@ import { useStateObservable } from "@react-rxjs/core"
 import { Search } from "lucide-react"
 import type { FC } from "react"
 import { useMediaQuery } from "react-responsive"
-import { Link } from "react-router-dom"
+import { Link } from "react-router"
 import { TableVirtuoso, Virtuoso, type ItemProps } from "react-virtuoso"
 import { merge } from "rxjs"
 import { MaParams, maParamsSub$ } from "../Validators/Params"

src/pages/Pools/Pools.tsx

@@ -12,7 +12,7 @@ import { currentNominationPoolStatus$ } from "@/state/nominationPool"
 import { liftSuspense, useStateObservable } from "@react-rxjs/core"
 import { GitFork, Star } from "lucide-react"
 import { lazy, Suspense } from "react"
-import { Link, matchPath, Route, Routes } from "react-router-dom"
+import { Link, matchPath, Route, Routes } from "react-router"
 import { defer, map, merge, switchMap } from "rxjs"
 import { AccountStatus, accountStatusSub$ } from "../AccountStatus"
 import { minPoolJoin$ } from "./JoinPool"

src/pages/Pools/TopPools.tsx

@@ -6,7 +6,7 @@ import { state, useStateObservable } from "@react-rxjs/core"
 import { combineLatest, map, switchMap } from "rxjs"
 import { validatorRewardsToHistoric } from "../Validators/validatorList.state"
 import { calculatePoolApy, pools$ } from "./poolList.state"
-import { Link } from "react-router-dom"
+import { Link } from "react-router"
 
 const topPools$ = state(
   combineLatest([

src/pages/Validators/TopValidators.tsx

@@ -3,7 +3,7 @@ import { activeEraNumber$ } from "@/state/era"
 import { validatorsEra$ } from "@/state/validators"
 import { formatPercentage } from "@/util/format"
 import { state, useStateObservable } from "@react-rxjs/core"
-import { Link } from "react-router-dom"
+import { Link } from "react-router"
 import { combineLatest, filter, map, switchMap } from "rxjs"
 import { validatorPrefs$ } from "./validatorList.state"
 

src/pages/Validators/Validator.tsx

@@ -5,7 +5,7 @@ import { cn } from "@/lib/utils"
 import { formatPercentage } from "@/util/format"
 import { useStateObservable } from "@react-rxjs/core"
 import { createContext, useContext, type FC, type ReactElement } from "react"
-import { Link, useParams } from "react-router-dom"
+import { Link, useParams } from "react-router"
 import { validatorPrefs$, type PositionValidator } from "./validatorList.state"
 
 const whiteCtx = createContext(false)

src/pages/Validators/ValidatorDetail.tsx

@@ -21,7 +21,7 @@ import {
 } from "lucide-react"
 import type { SS58String } from "polkadot-api"
 import { lazy, Suspense, type FC } from "react"
-import { Link, useParams } from "react-router-dom"
+import { Link, useParams } from "react-router"
 import { combineLatest, debounceTime, map, merge, switchMap } from "rxjs"
 import { Stat } from "../Pools/PoolDetail"
 

src/pages/Validators/Validators.tsx

@@ -1,7 +1,7 @@
 import { CardPlaceholder } from "@/components/CardPlaceholder"
 import { location$ } from "@/router"
 import { lazy, Suspense } from "react"
-import { matchPath, Route, Routes } from "react-router-dom"
+import { matchPath, Route, Routes } from "react-router"
 import { map, switchMap } from "rxjs"
 import { ValidatorDetailPage, validatorDetailPageSub$ } from "./ValidatorDetail"
 

src/router.tsx

@@ -1,11 +1,17 @@
 import { type FC, type PropsWithChildren } from "react"
 import {
+  createHashHistory,
   unstable_HistoryRouter as HistoryRouter,
   UNSAFE_createBrowserHistory,
-} from "react-router-dom"
+} from "react-router"
 import { concat, defer, map, Observable, of, share } from "rxjs"
 
-export const history = UNSAFE_createBrowserHistory({
+const createHistory = import.meta.env.VITE_HASH_ROUTER
+  ? createHashHistory
+  : UNSAFE_createBrowserHistory
+
+export const history = createHistory({
+  window,
   v5Compat: true,
 })
 export type HistoryUpdate = Parameters<

src/state/chain.ts

@@ -8,7 +8,7 @@ import { createClient, type PolkadotClient } from "polkadot-api"
 import { getSmProvider } from "polkadot-api/sm-provider"
 import type { Client as Smoldot } from "polkadot-api/smoldot"
 import SmWorker from "polkadot-api/smoldot/worker?worker"
-import { matchPath } from "react-router-dom"
+import { matchPath } from "react-router"
 import {
   combineLatest,
   concat,
@@ -64,7 +64,7 @@ let smoldot: Promise<Smoldot> | null = null
 
 export const [useSmoldot$, setUseSmoldot] = createLocalStorageState(
   "use-smoldot",
-  false,
+  !!import.meta.env.VITE_HASH_ROUTER,
 )
 useSmoldot$.pipe(skip(1)).subscribe(() => location.reload())