You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
2.5 KiB
62 lines
2.5 KiB
# Customizing tokens and branding
|
|
|
|
Find below instructions for customizing the token list and branding assets of this app.
|
|
|
|
## Registry
|
|
|
|
By default, the app will use the canonical Hyperlane registry published on NPM. See `package.json` for the precise version.
|
|
|
|
To use custom chains or custom warp routes, you can either configure a different registry using the `NEXT_PUBLIC_REGISTRY_URL` environment variable or define them manually (see the next two sections).
|
|
|
|
## Custom Warp Route Configs
|
|
|
|
This app requires a set of warp route configs to function. The configs are located in `./src/consts/warpRoutes.yaml` and `./src/consts/warpRoutes.ts`. The output artifacts of a warp route deployment using the [Hyperlane CLI](https://www.npmjs.com/package/@hyperlane-xyz/cli) can be used here.
|
|
|
|
In addition to defining your warp route configs, you can control which routes display in the UI via the `warpRouteWhitelist.ts` file.
|
|
|
|
## Custom Chain Configs
|
|
|
|
By default, the app will use only the chains that are included in the configured registry and included in your warp routes.
|
|
|
|
To add support for additional chains, or to override a chain's properties (such as RPC URLs), add chain metadata to either `./src/consts/chains.ts` or `./src/consts/chains.yaml`. The same chain configs used in the [Hyperlane CLI](https://www.npmjs.com/package/@hyperlane-xyz/cli) will work here. You may also add an optional `logoURI` field to a chain config to show a custom logo image in the app.
|
|
|
|
## Tip Card
|
|
|
|
The content of the tip card above the form can be customized in `./src/components/tip/TipCard.tsx`
|
|
Or it can be hidden entirely with the `showTipBox` setting in `./src/consts/config.ts`
|
|
|
|
## Branding
|
|
|
|
## App name and description
|
|
|
|
The values to describe the app itself (e.g. to WalletConnect) are in `./src/consts/app.ts`
|
|
|
|
### Color Scheme
|
|
|
|
To update the color scheme, make changes in the Tailwind config file at `./tailwind.config.js`
|
|
To modify just the background color, that can be changed in `./src/consts/app.ts`
|
|
|
|
### Metadata
|
|
|
|
The HTML metadata tags are located in `./src/pages/_document.tsx`
|
|
|
|
### Title / Name Images
|
|
|
|
The logo images you should change are:
|
|
|
|
- `./src/images/logos/app-logo.svg`
|
|
- `./src/images/logos/app-name.svg`
|
|
- `./src/images/logos/app-title.svg`
|
|
|
|
These are images are primarily used in the header and footer files:
|
|
|
|
- `./src/components/nav/Header.tsx`
|
|
- `./src/components/nav/Footer.tsx`
|
|
|
|
### Social links
|
|
|
|
The links used in the footer can be found here: `./src/consts/links.ts`
|
|
|
|
### Public assets / Favicons
|
|
|
|
The images and manifest files under `./public` should also be updated.
|
|
|