Skip to content

Latest commit

 

History

History
69 lines (38 loc) · 2.61 KB

CUSTOMIZE.md

File metadata and controls

69 lines (38 loc) · 2.61 KB
Raw

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 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 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

The values to describe the app itself (e.g. to WalletConnect) are 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.

Fonts

The web-formatted font files are located in ./public/fonts And the CSS to configure them is in ./src/styles/fonts.css

Color Scheme

To update the color scheme, make changes in the Tailwind config and Color consts file:

  • ./tailwind.config.js
  • ./src/styles/Color.ts