Add BrowserRouter support

.env.example

@@ -3,6 +3,7 @@ VITE_BASE_URL=
 VITE_ALCHEMY_API_KEY=
 
 VITE_PK_ENCRYPTION_KEY=
+VITE_ROUTER_TYPE=
 
 VITE_V3_TOKEN_ADDRESS=
 VITE_TOKEN_MIGRATION_URI=

README.md

@@ -66,10 +66,12 @@ This will automatically open your default browser at `http://localhost:61000`.
 
 Add or modify the relevant endpoints, links and options in `/public/configs/env.json`.
 You'll need to provide a Wallet Connect project id to enable onboarding and wallet connection:
+
 - Create a project on https://cloud.walletconnect.com/app
 - Copy over the project ID into this [field](https://github.com/dydxprotocol/v4-web/blob/67ecbd75b43e0c264b7b4d2d9b3d969830b0621c/public/configs/env.json#L822C33-L822C46)
 
 ## Part 4: Set Enviornment variables
+
 Set environment variables via `.env`.
 
 - `VITE_BASE_URL` (required): The base URL of the deployment (e.g., `https://www.example.com`).
@@ -83,7 +85,6 @@ Set environment variables via `.env`.
 - `INTERCOM_APP_ID` (optional): Used for enabling Intercom; utilized with `pnpm run build:inject-intercom`.
 - `STATUS_PAGE_SCRIPT_URI` (optional): Used for enabling the status page; used with `pnpm run build:inject-statuspage`.
 
-
 # Deployments
 
 ## Deploying with Vercel
@@ -95,10 +96,12 @@ Select "Import Git Repository" from your dashboard, and provide the URL of this
 ### Step 2: Configure your project
 
 For the "Build & Development Settings", we recommend the following:
+
 - Framework Preset: `Vite`
 - Build Command (override): `pnpm run build`
 
 By default, the dev server runs in development mode and the build command runs in production mode. To override the default mode, you can pass in the `--mode` option flag. For example, if you want to build your app for testnet:
+
 ```
 pnpm run build --mode testnet
 ```
@@ -110,6 +113,14 @@ For more details, check out Vercel's [official documentation](https://vercel.com
 
 ## Deploying to IPFS
 
+### Enable HashRouting
+
+Add the following to `.env` file
+
+```
+VITE_ROUTER_TYPE=hash
+```
+
 ### web3.storage: deploy to IPFS via web3.storage using the provided script
 
 Export the API token as an environment variable (replace `your_token` with the generated token), and run the script to build and deploy to IPFS:
@@ -146,12 +157,14 @@ Replace `your_cid` with the actual CID.
 We recommend that you add your website to Cloudflare for additional security settings.
 
 To block OFAC Sanctioned countries:
+
 1. Navigate Websites > Domain > Security > WAF
 
 2. Create Rule with the following settings:
-  * If incoming requests match
-`(ip.geoip.country eq "CU") or (ip.geoip.country eq "IR") or (ip.geoip.country eq "KP") or (ip.geoip.country eq "SY") or (ip.geoip.country eq "MM") or (ip.geoip.subdivision_1_iso_code eq "UA-09") or (ip.geoip.subdivision_1_iso_code eq "UA-14") or (ip.geoip.subdivision_1_iso_code eq "UA-43")`
-  * This rule will bring up a Cloudflare page when a restricted geography tries to access your site. You will have the option to display:
-    1. Custom Text
-      - (e.g. `Because you appear to be a resident of, or trading from, a jurisdiction that violates our terms of use, or have engaged in activity that violates our terms of use, you have been blocked. You may withdraw your funds from the protocol at any time.`)
-    2. Default Cloudflare WAF block page
+
+- If incoming requests match
+  `(ip.geoip.country eq "CU") or (ip.geoip.country eq "IR") or (ip.geoip.country eq "KP") or (ip.geoip.country eq "SY") or (ip.geoip.country eq "MM") or (ip.geoip.subdivision_1_iso_code eq "UA-09") or (ip.geoip.subdivision_1_iso_code eq "UA-14") or (ip.geoip.subdivision_1_iso_code eq "UA-43")`
+- This rule will bring up a Cloudflare page when a restricted geography tries to access your site. You will have the option to display:
+  1. Custom Text
+  - (e.g. `Because you appear to be a resident of, or trading from, a jurisdiction that violates our terms of use, or have engaged in activity that violates our terms of use, you have been blocked. You may withdraw your funds from the protocol at any time.`)
+  2. Default Cloudflare WAF block page

src/main.tsx

@@ -1,7 +1,7 @@
 import './polyfills';
 import { StrictMode } from 'react';
 import ReactDOM from 'react-dom/client';
-import { HashRouter } from 'react-router-dom';
+import { BrowserRouter, HashRouter } from 'react-router-dom';
 import { Provider } from 'react-redux';
 
 import { store } from '@/state/_store';
@@ -12,11 +12,13 @@ import './index.css';
 
 import App from './App';
 
+const Router = import.meta.env.VITE_ROUTER_TYPE === 'hash' ? HashRouter : BrowserRouter;
+
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <ErrorBoundary>
     <StrictMode>
       <Provider store={store}>
-        <HashRouter children={<App />} />
+        <Router children={<App />} />
       </Provider>
     </StrictMode>
   </ErrorBoundary>

vercel.json

@@ -0,0 +1,3 @@
+{
+  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
+}