102 lines
3.7 KiB
Markdown
102 lines
3.7 KiB
Markdown
# wormhole explorer
|
|
|
|
A web app built with:
|
|
- [GatsbyJS](https://www.gatsbyjs.com/)
|
|
- [gatsby-plugin-intl](https://www.gatsbyjs.com/plugins/gatsby-plugin-intl/)
|
|
- [Typescript](https://www.typescriptlang.org/)
|
|
- [Ant Design](https://ant.design/)
|
|
|
|
|
|
## Notable files
|
|
|
|
- Supported Languages - add/remove supported languages here [./src/utils/i18n/supportedLanguages.js](../src/utils/i18n/supportedLanguages.js)
|
|
- Multilangual copy [./src/locales](./src/locales)
|
|
- Top level pages & client side routes. Adding a file here creates a @reach-router route [./src/pages](./src/pages)
|
|
- SEO config, inherited by all pages [./src/components/SEO/SEO.tsx](./src/components/SEO/SEO.tsx)
|
|
- Main layout HOC, contains top-menu nav and footer [./src/components/Layout/DefaultLayout.tsx](./src/components/Layout/DefaultLayout.tsx)
|
|
- Gatsby plugins [./gatsby-config.js](./gatsby-config.js)
|
|
- Ant Design theme variables, overrides Antd defaults [./src/AntdTheme.js](./src/AntdTheme.js)
|
|
|
|
|
|
## Repo setup
|
|
|
|
Installing dependencies with npm:
|
|
|
|
npm install
|
|
|
|
Create a `.env` file for your development environment, from the `.env.sample`:
|
|
|
|
cp .env.sample .env.development
|
|
|
|
## Developing
|
|
|
|
Start the development server with the npm script:
|
|
|
|
npm run dev
|
|
|
|
Then open the web app in your browser at [http://localhost:8000](http://localhost:8000)
|
|
|
|
## Debugging
|
|
### NodeJs debugging with VSCode
|
|
|
|
You can debug the Gatsby dev server or build process using VSCode's debbuger. Checkout [.vscode/launch.json](./.vscode/launch.json) to see the NodeJS debugging options.
|
|
|
|
These debugger configs will let you set breakpoints in the Gatsby node programs ([./gatsby-config.js](./gatsby-config.js), [./gatsby-node.js](./gatsby-node.js)) to debug webpack, Gatsby plugins, etc.
|
|
|
|
### Browser debugging with VSCode
|
|
|
|
With the [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) extension installed, you can inspect the web app and set broswer breakpoints from VSCode. With the dev server (`npm run dev`) running, select & run [Debug in Chrome](./.vscode/launch.json#L12) from the debugger pane.
|
|
|
|
## Storybook component rendering
|
|
|
|
[Storybook](https://storybook.js.org/) can render components with sytles and locales, for UI component development.
|
|
|
|
Run Storybook with:
|
|
|
|
npm run storybook
|
|
|
|
See [./src/components/Button/button.stories.tsx](./src/components/Button/button.stories.tsx)
|
|
|
|
## eslint linting & formatting
|
|
|
|
Check linting:
|
|
|
|
npm run lint
|
|
|
|
Fix linting errors:
|
|
|
|
npm run format
|
|
|
|
## Ant Design Theming
|
|
|
|
Ant Design [default less variables](https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less) can be overridden in [./src/AntdTheme.js](./src/AntdTheme.js), which is used in [./gatsby-config.js#L51](./gatsby-config.js#L51).
|
|
|
|
|
|
## Programmatic Translations
|
|
|
|
Translations can be made for the supported languages ([./src/utils/i18n/supportedLanguages.js](../src/utils/i18n/supportedLanguages.js)). The English language definition file ([./src/locales/en.json](./src/locales/en.json)) will be read and used as the source, using either DeepL or Google Translate to supply the translations.
|
|
|
|
### Translating with DeepL
|
|
|
|
Pass your DeepL Pro api key to the npm script:
|
|
|
|
npm run translate:deepl -- your-DeepL-Pro-api-key-here
|
|
|
|
### Translating with Google Translate
|
|
|
|
With your Service Account [credentials](https://github.com/leolabs/json-autotranslate#google-translate) saved to a file locally, pass the path to the .json file to the npm script:
|
|
|
|
npm run translate:google -- ./your-GCP-service-account.json
|
|
|
|
### Protobuf generation
|
|
|
|
You'll need to generate proto files by running:
|
|
|
|
npm run generate-protos
|
|
|
|
### WASM generation
|
|
|
|
To generate WASM files run:
|
|
|
|
npm run generate-wasm
|