From 479daa3672c2dff12f3daf6cd145f63a21bef3f9 Mon Sep 17 00:00:00 2001 From: jaredvu Date: Mon, 29 Jan 2024 17:27:13 -0800 Subject: [PATCH] Add BrowserRouter support --- .env.example | 1 + README.md | 27 ++++++++++++++++++++------- src/main.tsx | 6 ++++-- vercel.json | 3 +++ 4 files changed, 28 insertions(+), 9 deletions(-) create mode 100644 vercel.json diff --git a/.env.example b/.env.example index cbfc529..26570fe 100644 --- a/.env.example +++ b/.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= diff --git a/README.md b/README.md index 983ebc4..2313c05 100644 --- a/README.md +++ b/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 diff --git a/src/main.tsx b/src/main.tsx index e8a6619..c73a8ac 100644 --- a/src/main.tsx +++ b/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( - } /> + } /> diff --git a/vercel.json b/vercel.json new file mode 100644 index 0000000..0f32683 --- /dev/null +++ b/vercel.json @@ -0,0 +1,3 @@ +{ + "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }] +}