zeekayandHanzo Dev
35cec0ca87
TypeScript 7 is the native Go compiler and removes `baseUrl` and `moduleResolution: node|node10`. Both appear here, so `tsc` from TS7 refuses the config outright (TS5102 / TS5108) and cannot typecheck. `paths` targets resolve relative to `baseUrl` when it is set and relative to the tsconfig file otherwise. Every `baseUrl` folded here already pointed at the config's own directory, so dropping it moves nothing and the targets are left byte-identical. Where a baseUrl pointed elsewhere, each affected target was rewritten as join(baseUrl, target). `moduleResolution` was chosen from the declared `module`: commonjs -> node16, esnext/preserve -> bundler. Configs whose `module` is unset or exotic were left alone rather than guessed at. The result is accepted by BOTH toolchains, so nothing has to upgrade TypeScript in lockstep. Verified on hanzo/chat packages/api: tsc 5.9 779 -> 778 errors (no regression), and tsc 7.0.2 now runs the project in 2s where it previously refused the config. Co-authored-by: Hanzo Dev <[email protected]>
DAO Interface
Local Development
Clone the repository
$ git clone [email protected]:luxdao/interface.git
Change to application's Node.js version
$ nvm use
Install the dependencies
$ npm install
Running development environment
$ npm run dev
Cloudflare Pages functions
We're using Cloudflare Pages functions for retrieving various off-chain data.
Currently it's being used to fetch abstract address's ERC-20, ERC-721 and DeFi balances through Moralis.
It is crucial to have Cloudflare Pages functions running locally to work with anything related to DAO treasury, for instance
- Treasury page
- Payments feature
Environment Variables
The application uses two sets of environment variables:
-
Functions Environment Variables (
.dev.vars)- Copy
.dev.vars.exampleto.dev.varsfor local development - Contains variables needed for Cloudflare Pages Functions (e.g., Moralis API key)
- In production, these need to be manually configured as "secrets" in the Cloudflare Dashboard
- Copy
-
Application Environment Variables (
.env.local)- Copy
.envto.env.localfor local development - Contains Vite-injected variables for the React application
- In production, these also need to be manually configured as "secrets" in the Cloudflare Dashboard
- Copy
Localization
API Key
Obtain your API key from https://www.deepl.com/pro-api?cta=header-pro-api Set it to VITE_APP_DEEPL_API_KEY in .env.local
Localize
Run npm run localize
Only new strings are automatically translated. Translations can be manually updated, based on professional reviews or community feedback. The script does not modify existing translations.
Localization Verifications
Run npm run localize
This script is also used by Git Action as a precheck at merge.
Feature flags
Setup
Start with adding a new Feature Flag to the app. In https://github.com/luxdao/interface/src/helpers/featureFlags.ts, Add a flag.
export const FEATURE_FLAGS = ['flag_dev', 'flag_feature_a'] as const;
Remote Configuration
Two Firebase projects were set up. "DAODAO" for production, and "DAODAO Develop" for development.
During develop, set the feature flag to "on" on "DAODAO Develop".
After the feature is completed, tested, and ready to release, set the flag to "on" on "DAODAO".
Usage
In consumer of the flag, use the useFeatureFlag hook
import useFeatureFlag from '../../helpers/environmentFeatureFlags';
const featureAEnabled = useFeatureFlag('flag_feature_a');
Injecting flags via your environment
During development, add a flag environment variable in your (local) .env(.local) file. It must be a string value of "ON" or "OFF". The syntax of the environment variable is VITE_APP_<FLAG_NAME>.
VITE_APP_FLAG_FEATURE_A="ON"
You can also set the flag in the URL with a query param. Notice how the VITE_APP_ prefix is omitted and the flag name in the query param matches the name you gave it in code:
http://localhost:3000/?flag_feature_a=on
Testing
Override the flag value by adding query params to the URL. Notice how the VITE_APP_ prefix is omitted and the flag name is in lowercase:
https://app.luxdao.org?flag_feature_a=on
From then, the flag holds the value from the URL param until app is refreshed
Deployment and after
Deployment can ship with the flag turned off in .env file.
Change the value in .env file after the feature is completed and thouroughly tested.
Once code under the feature flag has been proven reliable, remove the feature flag and dead code from code base.
Subgraph
We're using Subgraph to index certain "metadata" events to simplify data fetching from application site.
Repository, that implements mapping located here.
If you updated mapping and deployed new version - you might need to rebuild Subgraph artifacts. Use command below.
Build Subgraph artifacts
$ npm run graphql:build
Deployment Notes
This app is deployed on Cloudflare Pages with the following configuration:
- Production deployment (tracking
mainbranch): https://app.new.luxdao.org - All other branches get preview deployments at: https://branch-name.interface.pages.dev