Find below instructions for customizing the token list and branding assets of this app.
By default, this branch uses the Hyperlane GitHub registry at https://github.com/hyperlane-xyz/hyperlane-registry on branch nambrot/multi-collateral-deploy.
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).
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.
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.
By default, if there are multiples multi-collateral routes surfacing the same asset, the application will pick the token with the lowest fee and the highest collateral in the destination.
You can override this behavior by updating the file ./src/consts/defaultMultiCollateralRoutes.ts with an object that includes the chainName, collateralAddressOrDenom (or just native as key) and the default addressOrDenom. If there is a matching origin and destination, getTransferToken will pick this route as a priority.
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
The values to describe the app itself (e.g. to WalletConnect) are in ./src/consts/app.ts
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
The HTML metadata tags are located in ./src/pages/_document.tsx
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 images are primarily used in the header and footer files:
./src/components/nav/Header.tsx./src/components/nav/Footer.tsx
The links used in the footer can be found here: ./src/consts/links.ts
The images and manifest files under ./public should also be updated.