After you’ve successfully deployed a Hyperlane Warp Route (HWR), you have three out-of-the-box options for setting up a frontend UI to support interchain token transfers:
By default, the app will use the canonical Hyperlane registry published on NPM. To use a different registry, you can set a URL using the NEXT_PUBLIC_REGISTRY_URL environment variable.
Here’s an example config for a HWR that connects USDC on Sepolia to Alfajores. You can use Typescript or YAML for your route configs.
{ tokens: [ { // The ChainName of the token chainName: "sepolia", // See https://github.com/hyperlane-xyz/hyperlane-monorepo/blob/main/typescript/sdk/src/token/TokenStandard.ts standard: TokenStandard.EvmHypCollateral, // The token metadata (decimals, symbol, name) decimals: 6, symbol: "USDC", name: "USD Coin", // The router address addressOrDenom: "YOUR_ROUTER_ADDRESS_1", // The address of the underlying collateral token collateralAddress: "0x1c7D4B196Cb0C7B01d743Fbc6116a902379C7238", // A path to a token logo image logoURI: "/logos/usdc.png", // The list of tokens this one is connected to connections: [{ token: "ethereum|alfajores|YOUR_ROUTER_ADDRESS_2" }], }, { chainName: "alfajores", standard: TokenStandard.EvmHypSynthetic, decimals: 6, symbol: "USDC", name: "USD Coin", addressOrDenom: "YOUR_ROUTER_ADDRESS_2", logoURI: "/logos/usdc.png", connections: [{ token: "ethereum|alfajores|YOUR_ROUTER_ADDRESS_2" }], }, ];}
Chain metadata can also be configured as needed. These are the same configs as those used with the CLI for any of its deploy or send command (for example, those from the deploy guide).
Since the UI is a Next.js app, you can use your favorite hosting service to host it. We recommend Vercel, which works well with Next. AWS Amplify is another popular option.
Create a new project and connect it to your GitHub repo
Hit Deploy!
And that’s it! Now you and your users can use the UI to send tokens from the collateral chain to remote chains, from one remote chain to another, and from any remote chain back to the collateral chain.
If there is no production relayer running for these chains, you can run a lightweight CLI relayer that delivers only for your HWR in the background with:
hyperlane relayer -w TOKEN/chain1-chain2
This will allow you to test the warp UI locally or for a quick demo without needing to run a full production relayer in the cloud.
A common problem with token bridges like HWRs is that a user may transfer a token like USDC to a new chain, but only afterwards realize that they do not have the native gas token to move those tokens anywhere including back.To improve the user experience, you could provide some native gas tokens via a faucet, in addition to UI warnings. To create a faucet, modify the HWR contracts to hold a balance of the native token to share with recipients.
For developers looking to further customize the Warp UI for their own projects
or build their own interchain applications, we encourage you to explore the
Typescript SDK. The SDK contains a growing set of an utilities and
abstractions for interacting with Hyperlane across different protocols (EVM,
Cosmos, Solana).
Superbridge is a custom bridge provider, they manage bridge frontends for hundreds of rollups, various tokens and different ecosystems.Getting a managed Superbridge for your HWR is a hassle-free approach to operating your bridge. A few of their most popular Hyperlane powered bridges are Renzo’s ezETH bridge and Elixir’s deUSD bridge. With a managed bridge instance, Superbridge will handle hosting, theming, upgrades & user support requests for your HWR.They’ve also built a handy feature that allows for self-service testing of recently deployed HWRs.
Paste in the YAML file you generated when deploying your HWRs
The specified tokens and networks will now be available for bridging.
If any tokens or networks are missing after you’ve pasted in the YAML file,
it’s possible Superbridge doesn’t support Hyperlane on this network just yet.
Reach out to Superbridge to see what the
timeline is for adding support.
In addition to the hosted UI, Superbridge offers a bridging widget, so you can embed your bridge in your own site. Checkout their Widget Demos site for an overview of all the configuration options available.
To bring your HWR to production with Superbridge, reach out to the Superbridge team. They can typically get a frontend up and running in about a day.
Was this page helpful?
{"docsConfig":{"theme":"mint","$schema":"https://mintlify.com/docs.json","name":"Hyperlane Docs","colors":{"primary":"#7B2FBE","light":"#A855F7","dark":"#5B21B6"},"logo":{"light":"https://mintcdn.com/hyperlane/efOyQbSK6s3b_vQ3/logo/light.svg?fit=max\u0026auto=format\u0026n=efOyQbSK6s3b_vQ3\u0026q=85\u0026s=1501f37d33661a127cab46650dfaa40d","dark":"https://mintcdn.com/hyperlane/efOyQbSK6s3b_vQ3/logo/dark.svg?fit=max\u0026auto=format\u0026n=efOyQbSK6s3b_vQ3\u0026q=85\u0026s=6a75553605a617363a0c44ea88bbd01c"},"favicon":"https://mintcdn.com/hyperlane/efOyQbSK6s3b_vQ3/favicon.svg?fit=max\u0026auto=format\u0026n=efOyQbSK6s3b_vQ3\u0026q=85\u0026s=8b51aff6dfdde0fd2b8ed700bdf3ecea","footer":{"socials":{"x":"https://x.com/hyperlane","github":"https://github.com/hyperlane-xyz"},"links":[{"header":"Developers","items":[{"label":"Careers","href":"https://jobs.lever.co/Hyperlane"},{"label":"Bounties","href":"https://github.com/search?q=org%3Ahyperlane-xyz+label%3Abounty+is%3Aopen+is%3Aissue\u0026type=issues\u0026s=\u0026o=desc"},{"label":"Blog","href":"https://hyperlane.xyz/blog"}]},{"header":"Community","items":[{"label":"GitHub Discussions","href":"https://github.com/hyperlane-xyz/hyperlane-monorepo/discussions"},{"label":"Twitter","href":"https://x.com/hyperlane"}]},{"header":"Legal","items":[{"label":"Privacy Policy","href":"https://hyperlane.xyz/privacy-policy"},{"label":"Terms of Service","href":"https://hyperlane.xyz/terms-of-service"}]}]},"seo":{"metatags":{"og:image":"/images/hero.jpg","twitter:image":"/images/hero.jpg","twitter:card":"summary_large_image"}},"integrations":{"plausible":{"domain":"docs.hyperlane.xyz"}},"contextual":{"options":["copy","view","chatgpt","claude"],"display":"header"},"styling":{"latex":true},"navigation":{"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"hyperlane","hasAudioNarration":false,"actualSubdomain":"hyperlane","customDomains":["docs.hyperlane.xyz"],"gitSource":{"type":"github","owner":"hyperlane-xyz","repo":"v4-docs","deployBranch":"main","contentDirectory":"","isPrivate":true,"mountPath":"","label":""},"chroma":{"liveDeploymentHistoryId":"6acce4e691989ecf9269daa5","collectionId":"85b06ba7-2af4-4e1f-8dae-e402492a3ce6","schemaVersion":"v3","latestBuiltDeploymentHistoryId":"6acce4e691989ecf9269daa5"},"feedback":{"thumbs":true},"entitlements":{"AI_CHAT":{"status":"DISABLED"}},"buildId":"6acce4e691989ecf9269daa5","clientVersion":"0.0.3908","searchFilterCounts":[{"language":"default","tag":"Home","count":75},{"language":"default","tag":"Learn","count":34},{"language":"default","tag":"Guides","count":32},{"language":"default","tag":"Agent Operators","count":25},{"language":"default","tag":"Protocol","count":18},{"language":"default","tag":"Overview","count":16},{"language":"default","tag":"Hyperlane Warp Routes (HWR)","count":16},{"language":"default","tag":"Relayer","count":15},{"language":"default","tag":"Applications","count":14},{"language":"default","tag":"Deployments","count":13}]},"assistantConfig":{},"hasChatPermissions":false,"hasWebMcpPermissions":false,"toggles":[{"name":"kill-isr","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-mintlify-slack","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-v7-file-tree","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-integrations-settings","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-pr-grouping","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-prefix","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"analytics-v7","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"user-flows-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"no-publish-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-onboarding","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"llms-txt-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"pause-universal-search-reconcile","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving-live","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"stripTemperatureMiddleware","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"per-site-search-delta","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"support-platform-pylon-zendesk","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-branches-v2-autocommit","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-branches-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"instant-rollback","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications-server","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-private-page-search","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-fable","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fixed-ai-action-pricing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automation-resolve-merge-conflict","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"scoped-publishing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"mintql","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"page-level-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"teamspace","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-version-history-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"vite-origin","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-nav-generations","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-page-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workspace-projects","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"assistant-v5","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"byok-sep-25","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fork-pr-previews","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"revalidation-jwt","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-agent-model-picker","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"client-snapshot-docs-config","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"hobby-abuse-scan","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"dashboard-inbox","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false}],"isAtlas":false,"googleFontsInlined":false},"customCss":[],"page":{"pagePath":"docs/guides/warp-routes/bridge-ui-guide","slug":"/docs/guides/warp-routes/bridge-ui-guide","pageMetadata":{"title":"Deploying a Bridge UI for your HWR","description":null,"href":"/docs/guides/warp-routes/bridge-ui-guide"},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{Fragment:_Fragment,jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];function _createMdxContent(props){const _components={a:`a`,code:`code`,li:`li`,ol:`ol`,p:`p`,pre:`pre`,span:`span`,strong:`strong`,ul:`ul`,..._provideComponents(),...props.components},{CodeBlock,Heading,OptimizedImage,Tip}=_components;if(!CodeBlock)_missingMdxReference(`CodeBlock`,true);if(!Heading)_missingMdxReference(`Heading`,true);if(!OptimizedImage)_missingMdxReference(`OptimizedImage`,true);if(!Tip)_missingMdxReference(`Tip`,true);return _jsxs(_Fragment,{children:[_jsxs(_components.p,{children:[`After you’ve successfully `,_jsx(_components.a,{href:`/docs/guides/quickstart/deploy-warp-route`,children:`deployed a Hyperlane Warp Route (HWR)`}),`, you have three out-of-the-box options for setting up a frontend UI to support interchain token transfers:`]}),`\n`,_jsxs(_components.ol,{children:[`\n`,_jsx(_components.li,{children:_jsx(_components.strong,{children:_jsx(_components.a,{href:`#fork--customize-the-ui`,children:`Fork, customize, and deploy the Hyperlane Warp UI template`})})}),`\n`,_jsx(_components.li,{children:_jsx(_components.strong,{children:_jsx(_components.a,{href:`#superbridge`,children:`Use a managed Superbridge instance`})})}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:_jsx(_components.a,{href:`/docs/guides/warp-routes/embed-widget`,children:`Embed the bridge widget in your existing site`})}),` — drop a React component or iframe into your app`]}),`\n`]}),`\n`,_jsx(Heading,{level:`2`,id:`1-hyperlane-warp-ui-template`,children:`1. Hyperlane Warp UI Template`}),`\n`,_jsxs(_components.p,{children:[`The `,_jsx(_components.a,{href:`https://github.com/hyperlane-xyz/hyperlane-warp-ui-template`,children:`Hyperlane Warp UI template`}),` is a prebuilt Next.JS app you can easily customize and deploy.`]}),`\n`,_jsxs(_components.ul,{children:[`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Configuration`}),`: Follow the `,_jsx(_components.a,{href:`https://github.com/hyperlane-xyz/hyperlane-warp-ui-template/blob/main/README.md`,children:`configuration instructions`}),` for details on how to configure the Warp UI Web application and run it locally.`]}),`\n`,_jsxs(_components.li,{children:[_jsx(_components.strong,{children:`Customization`}),`: Follow the `,_jsx(_components.a,{href:`https://github.com/hyperlane-xyz/hyperlane-warp-ui-template/blob/main/CUSTOMIZE.md`,children:`customization instructions`}),` for details on how to configure the UI’s tokens and change the default branding assets/theme.`]}),`\n`]}),`\n`,_jsx(Heading,{level:`3`,id:`registry`,children:`Registry`}),`\n`,_jsxs(_components.p,{children:[`By default, the app will use the canonical Hyperlane registry published on NPM. To use a different registry, you can set a URL using the `,_jsx(_components.code,{children:`NEXT_PUBLIC_REGISTRY_URL`}),` environment variable.`]}),`\n`,_jsx(Heading,{level:`3`,id:`hwr-config-example`,children:`HWR Config Example`}),`\n`,_jsx(_components.p,{children:`Here’s an example config for a HWR that connects USDC on Sepolia to Alfajores. You can use Typescript or YAML for your route configs.`}),`\n`,_jsx(CodeBlock,{filename:``,numberOfLines:`32`,language:`typescript`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`typescript`,children:_jsxs(_components.code,{language:`typescript`,numberOfLines:`32`,children:[_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`{`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#C8C8C8`},children:` tokens`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`: [`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` {`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` // The ChainName of the token`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` chainName:`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` \"sepolia\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`,`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` // See https://github.com/hyperlane-xyz/hyperlane-monorepo/blob/main/typescript/sdk/src/token/TokenStandard.ts`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` standard:`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` TokenStandard`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`EvmHypCollateral`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`,`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` // The token metadata (decimals, symbol, name)`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` decimals:`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#B5CEA8`},children:` 6`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`,`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` symbol:`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` \"USDC\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`,`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` name:`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` \"USD Coin\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`,`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` // The router address`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` addressOrDenom:`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` \"YOUR_ROUTER_ADDRESS_1\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`,`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` // The address of the underlying collateral token`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` collateralAddress:`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` \"0x1c7D4B196Cb0C7B01d743Fbc6116a902379C7238\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`,`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` // A path to a token logo image`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` logoURI:`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` \"/logos/usdc.png\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`,`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#6E7781`,\"--shiki-dark\":`#6A9955`},children:` // The list of tokens this one is connected to`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` connections:`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` [{ `}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`token:`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` \"ethereum|alfajores|YOUR_ROUTER_ADDRESS_2\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` }],`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` },`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` {`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` chainName:`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` \"alfajores\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`,`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` standard:`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` TokenStandard`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`.`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`EvmHypSynthetic`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`,`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` decimals:`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#B5CEA8`},children:` 6`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`,`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` symbol:`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` \"USDC\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`,`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` name:`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` \"USD Coin\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`,`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` addressOrDenom:`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` \"YOUR_ROUTER_ADDRESS_2\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`,`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` logoURI:`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` \"/logos/usdc.png\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`,`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:` connections:`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` [{ `}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`token:`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` \"ethereum|alfajores|YOUR_ROUTER_ADDRESS_2\"`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` }],`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` },`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` ];`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`}`})}),`\n`]})})}),`\n`,_jsx(Heading,{level:`4`,id:`chain-config-example`,children:`Chain Config Example`}),`\n`,_jsxs(_components.p,{children:[`Chain metadata can also be configured as needed. These are the same configs as those used with the CLI for any of its deploy or send command (for example, those from the `,_jsx(_components.a,{href:`/docs/guides/chains/deploy-hyperlane`,children:`deploy guide`}),`).`]}),`\n`,_jsx(CodeBlock,{filename:``,numberOfLines:`15`,language:`typescript`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`typescript`,children:_jsxs(_components.code,{language:`typescript`,numberOfLines:`15`,children:[_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`{`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#C8C8C8`},children:`anvil1`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`: {`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#C8C8C8`},children:` chainId`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`: `}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#B5CEA8`},children:`31337`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`,`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#C8C8C8`},children:` name`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`: `}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`'anvil1'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`,`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#C8C8C8`},children:` displayName`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`: `}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`'Anvil 1 Local'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`,`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#C8C8C8`},children:` nativeToken`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`: { `}),_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#C8C8C8`},children:`name`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`: `}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`'Ether'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`, `}),_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#C8C8C8`},children:`symbol`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`: `}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`'ETH'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`, `}),_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#C8C8C8`},children:`decimals`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`: `}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#B5CEA8`},children:`18`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` },`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#C8C8C8`},children:` publicRpcUrls`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`: [{ `}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#9CDCFE`},children:`http:`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` 'http://127.0.0.1:8545'`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` }],`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#C8C8C8`},children:` blocks`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`: {`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#C8C8C8`},children:` confirmations`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`: `}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#B5CEA8`},children:`1`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`,`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#C8C8C8`},children:` reorgPeriod`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`: `}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#B5CEA8`},children:`0`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`,`})]}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#C8C8C8`},children:` estimateBlockTime`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`: `}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#B5CEA8`},children:`10`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`,`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` },`})}),`\n`,_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#C8C8C8`},children:` logoURI`}),_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`: `}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:`'/logo.svg'`})]}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:` }`})}),`\n`,_jsx(_components.span,{className:`line`,children:_jsx(_components.span,{style:{color:`#1F2328`,\"--shiki-dark\":`#D4D4D4`},children:`}`})}),`\n`]})})}),`\n`,_jsx(Heading,{level:`3`,id:`deploy-the-ui`,children:`Deploy the UI`}),`\n`,_jsxs(_components.p,{children:[`Since the UI is a Next.js app, you can use your favorite hosting service to host it. We recommend `,_jsx(_components.a,{href:`https://vercel.com`,children:`Vercel`}),`, which works well with Next. `,_jsx(_components.a,{href:`https://aws.amazon.com/amplify`,children:`AWS Amplify`}),` is another popular option.`]}),`\n`,_jsxs(_components.ol,{children:[`\n`,_jsxs(_components.li,{children:[`Sign up for `,_jsx(_components.a,{href:`https://vercel.com/`,children:`Vercel`})]}),`\n`,_jsx(_components.li,{children:`Create a new project and connect it to your GitHub repo`}),`\n`,_jsx(_components.li,{children:`Hit Deploy!`}),`\n`]}),`\n`,_jsx(_components.p,{children:`And that’s it! Now you and your users can use the UI to send tokens from the collateral chain to remote chains, from one remote chain to another, and from any remote chain back to the collateral chain.`}),`\n`,_jsxs(Tip,{children:[_jsx(_components.p,{children:`If there is no production relayer running for these chains, you can run a lightweight CLI relayer that delivers only for your HWR in the background with:`}),_jsx(CodeBlock,{filename:``,numberOfLines:`1`,language:`shellscript`,children:_jsx(_components.pre,{className:`shiki shiki-themes github-light-default dark-plus`,style:{backgroundColor:`#ffffff`,\"--shiki-dark-bg\":`#0B0C0E`,color:`#1f2328`,\"--shiki-dark\":`#D4D4D4`},language:`shellscript`,children:_jsxs(_components.code,{language:`shellscript`,numberOfLines:`1`,children:[_jsxs(_components.span,{className:`line`,children:[_jsx(_components.span,{style:{color:`#953800`,\"--shiki-dark\":`#DCDCAA`},children:`hyperlane`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` relayer`}),_jsx(_components.span,{style:{color:`#0550AE`,\"--shiki-dark\":`#569CD6`},children:` -w`}),_jsx(_components.span,{style:{color:`#0A3069`,\"--shiki-dark\":`#CE9178`},children:` TOKEN/chain1-chain2`})]}),`\n`]})})}),_jsx(_components.p,{children:`This will allow you to test the warp UI locally or for a quick demo without needing to run a full production relayer in the cloud.`})]}),`\n`,_jsx(Heading,{level:`3`,id:`return-gas`,children:`Return gas`}),`\n`,_jsx(_components.p,{children:`A common problem with token bridges like HWRs is that a user may transfer a token like USDC to a new chain, but only afterwards realize that they do not have the native gas token to move those tokens anywhere including back.`}),`\n`,_jsx(_components.p,{children:`To improve the user experience, you could provide some native gas tokens via a faucet, in addition to UI warnings. To create a faucet, modify the HWR contracts to hold a balance of the native token to share with recipients.`}),`\n`,_jsx(Tip,{children:_jsx(_components.p,{children:`For developers looking to further customize the Warp UI for their own projects\nor build their own interchain applications, we encourage you to explore the\nTypescript SDK. The SDK contains a growing set of an utilities and\nabstractions for interacting with Hyperlane across different protocols (EVM,\nCosmos, Solana).`})}),`\n`,_jsx(Heading,{level:`2`,id:`2-superbridge`,children:`2. Superbridge`}),`\n`,_jsxs(_components.p,{children:[_jsx(_components.a,{href:`https://superbridge.app`,children:`Superbridge`}),` is a custom bridge provider, they manage bridge frontends for hundreds of rollups, various tokens and different ecosystems.`]}),`\n`,_jsxs(_components.p,{children:[`Getting a managed Superbridge for your HWR is a hassle-free approach to operating your bridge. A few of their most popular Hyperlane powered bridges are `,_jsx(_components.a,{href:`https://renzo.superbridge.app`,children:`Renzo’s ezETH bridge`}),` and `,_jsx(_components.a,{href:`https://elixir.superbridge.app`,children:`Elixir’s deUSD bridge`}),`. With a managed bridge instance, Superbridge will handle hosting, theming, upgrades \u0026 user support requests for your HWR.`]}),`\n`,_jsx(_components.p,{children:`They’ve also built a handy feature that allows for self-service testing of recently deployed HWRs.`}),`\n`,_jsx(Heading,{level:`3`,id:`testing-your-hwr`,children:`Testing your HWR`}),`\n`,_jsxs(_components.ol,{children:[`\n`,_jsxs(_components.li,{children:[`Navigate to the `,_jsx(_components.a,{href:`https://hyperlane.superbridge.app`,children:`Superbridge Hyperlane Playground`})]}),`\n`,_jsxs(_components.li,{children:[`Click the settings cog and then click Customize `,_jsx(OptimizedImage,{src:`https://mintcdn.com/hyperlane/HBAL3yXYYCHzpGeJ/images/docs/guides/deploy-warp-ui/superbridge-settings.png?fit=max\u0026auto=format\u0026n=HBAL3yXYYCHzpGeJ\u0026q=85\u0026s=827cd9417abeebb4c2582e7b7b2e06aa`,alt:``,\"data-og-width\":`1096`,width:`1096`,\"data-og-height\":`976`,height:`976`,\"data-path\":`images/docs/guides/deploy-warp-ui/superbridge-settings.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/hyperlane/HBAL3yXYYCHzpGeJ/images/docs/guides/deploy-warp-ui/superbridge-settings.png?w=280\u0026fit=max\u0026auto=format\u0026n=HBAL3yXYYCHzpGeJ\u0026q=85\u0026s=69a26a3e1b736c25de8882259fbd381f 280w, https://mintcdn.com/hyperlane/HBAL3yXYYCHzpGeJ/images/docs/guides/deploy-warp-ui/superbridge-settings.png?w=560\u0026fit=max\u0026auto=format\u0026n=HBAL3yXYYCHzpGeJ\u0026q=85\u0026s=a12ea3d366f5a7c756375f826877cae7 560w, https://mintcdn.com/hyperlane/HBAL3yXYYCHzpGeJ/images/docs/guides/deploy-warp-ui/superbridge-settings.png?w=840\u0026fit=max\u0026auto=format\u0026n=HBAL3yXYYCHzpGeJ\u0026q=85\u0026s=01e8afda818b938b6a89add0340cd880 840w, https://mintcdn.com/hyperlane/HBAL3yXYYCHzpGeJ/images/docs/guides/deploy-warp-ui/superbridge-settings.png?w=1100\u0026fit=max\u0026auto=format\u0026n=HBAL3yXYYCHzpGeJ\u0026q=85\u0026s=485bfb1801d3c85bd8deb70b388b50e7 1100w, https://mintcdn.com/hyperlane/HBAL3yXYYCHzpGeJ/images/docs/guides/deploy-warp-ui/superbridge-settings.png?w=1650\u0026fit=max\u0026auto=format\u0026n=HBAL3yXYYCHzpGeJ\u0026q=85\u0026s=e174a97593e1514f756b2b2a3e3c9d61 1650w, https://mintcdn.com/hyperlane/HBAL3yXYYCHzpGeJ/images/docs/guides/deploy-warp-ui/superbridge-settings.png?w=2500\u0026fit=max\u0026auto=format\u0026n=HBAL3yXYYCHzpGeJ\u0026q=85\u0026s=31e43c38bb08c0f66f002bb4fd8746dd 2500w`})]}),`\n`,_jsxs(_components.li,{children:[`Paste in the YAML file you generated when deploying your HWRs `,_jsx(OptimizedImage,{src:`https://mintcdn.com/hyperlane/HBAL3yXYYCHzpGeJ/images/docs/guides/deploy-warp-ui/superbridge-paste-yaml.png?fit=max\u0026auto=format\u0026n=HBAL3yXYYCHzpGeJ\u0026q=85\u0026s=441121b7795b21a487e578bf250f7371`,alt:``,\"data-og-width\":`1164`,width:`1164`,\"data-og-height\":`1006`,height:`1006`,\"data-path\":`images/docs/guides/deploy-warp-ui/superbridge-paste-yaml.png`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/hyperlane/HBAL3yXYYCHzpGeJ/images/docs/guides/deploy-warp-ui/superbridge-paste-yaml.png?w=280\u0026fit=max\u0026auto=format\u0026n=HBAL3yXYYCHzpGeJ\u0026q=85\u0026s=649ce2bbfb73c9297aee4f6c7bd23c78 280w, https://mintcdn.com/hyperlane/HBAL3yXYYCHzpGeJ/images/docs/guides/deploy-warp-ui/superbridge-paste-yaml.png?w=560\u0026fit=max\u0026auto=format\u0026n=HBAL3yXYYCHzpGeJ\u0026q=85\u0026s=508e2a2761bc205c9d3c6b89bdf6525c 560w, https://mintcdn.com/hyperlane/HBAL3yXYYCHzpGeJ/images/docs/guides/deploy-warp-ui/superbridge-paste-yaml.png?w=840\u0026fit=max\u0026auto=format\u0026n=HBAL3yXYYCHzpGeJ\u0026q=85\u0026s=216adae84a576f269e7f3e0a4893bd94 840w, https://mintcdn.com/hyperlane/HBAL3yXYYCHzpGeJ/images/docs/guides/deploy-warp-ui/superbridge-paste-yaml.png?w=1100\u0026fit=max\u0026auto=format\u0026n=HBAL3yXYYCHzpGeJ\u0026q=85\u0026s=11f53592949ddc75f020c6c534ef4ed0 1100w, https://mintcdn.com/hyperlane/HBAL3yXYYCHzpGeJ/images/docs/guides/deploy-warp-ui/superbridge-paste-yaml.png?w=1650\u0026fit=max\u0026auto=format\u0026n=HBAL3yXYYCHzpGeJ\u0026q=85\u0026s=c49627936629f8a66c691b82de305637 1650w, https://mintcdn.com/hyperlane/HBAL3yXYYCHzpGeJ/images/docs/guides/deploy-warp-ui/superbridge-paste-yaml.png?w=2500\u0026fit=max\u0026auto=format\u0026n=HBAL3yXYYCHzpGeJ\u0026q=85\u0026s=c15cbe3c6950c6346e1a0d7edf295e00 2500w`})]}),`\n`,_jsx(_components.li,{children:`The specified tokens and networks will now be available for bridging.`}),`\n`]}),`\n`,_jsx(Tip,{children:_jsxs(_components.p,{children:[`If any tokens or networks are missing after you’ve pasted in the YAML file,\nit’s possible Superbridge doesn’t support Hyperlane on this network just yet.\n`,_jsx(_components.a,{href:`mailto:support@superbridge.app`,children:`Reach out`}),` to Superbridge to see what the\ntimeline is for adding support.`]})}),`\n`,_jsx(Heading,{level:`3`,id:`bridging-widget`,children:`Bridging Widget`}),`\n`,_jsxs(_components.p,{children:[`In addition to the hosted UI, Superbridge offers a bridging widget, so you can embed your bridge in your own site. Checkout their `,_jsx(_components.a,{href:`https://widget-demos.superbridge.app/`,children:`Widget Demos`}),` site for an overview of all the configuration options available.`]}),`\n`,_jsx(Heading,{level:`3`,id:`go-to-production`,children:`Go to Production`}),`\n`,_jsxs(_components.p,{children:[`To bring your HWR to production with Superbridge, `,_jsx(_components.a,{href:`mailto:alex@superbridge.app`,children:`reach out to the Superbridge team`}),`. They can typically get a frontend up and running in about a day.`]})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{default:MDXContent};function _missingMdxReference(id,component){throw new Error(`Expected `+(component?`component`:`object`)+\" `\"+id+\"` to be defined: you likely forgot to import, pass, or provide it.\")}","frontmatter":{},"scope":{"config":{},"pageMetadata":{"title":"Deploying a Bridge UI for your HWR","description":null,"href":"/docs/guides/warp-routes/bridge-ui-guide"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"1. Hyperlane Warp UI Template","slug":"1-hyperlane-warp-ui-template","depth":2,"children":[{"title":"Registry","slug":"registry","depth":3,"children":[]},{"title":"HWR Config Example","slug":"hwr-config-example","depth":3,"children":[]},{"title":"Chain Config Example","slug":"chain-config-example","depth":4,"children":[]},{"title":"Deploy the UI","slug":"deploy-the-ui","depth":3,"children":[]},{"title":"Return gas","slug":"return-gas","depth":3,"children":[]}]},{"title":"2. Superbridge","slug":"2-superbridge","depth":2,"children":[{"title":"Testing your HWR","slug":"testing-your-hwr","depth":3,"children":[]},{"title":"Bridging Widget","slug":"bridging-widget","depth":3,"children":[]},{"title":"Go to Production","slug":"go-to-production","depth":3,"children":[]}]}],"codeExamples":{}},"jsLinks":["/_mintlify/custom/hyperlane/205c50ae939dcfb6/scripts/generate-all.js","/_mintlify/custom/hyperlane/94f90f9f076a1524/scripts/generate-deployments.js","/_mintlify/custom/hyperlane/24594f925ecf76e1/scripts/generate-ism-validators.js","/_mintlify/custom/hyperlane/02cfc05971294e54/scripts/generate-latencies.js","/_mintlify/custom/hyperlane/86a119bc64c138d2/scripts/registry.js","/_mintlify/custom/hyperlane/444bb374b7e460ba/scripts/generate-domains.js"],"subdomain":"hyperlane","siteName":"Hyperlane Docs","title":"Deploying a Bridge UI for your HWR - Hyperlane Docs","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"lastModified":"2026-09-07T15:58:05.352Z","originalFileLocation":"docs/guides/warp-routes/bridge-ui-guide.mdx"},"headHtml":"\u003cscript data-mint-head>(function(){var d=document.documentElement,p=null;if(!p){try{p=localStorage.getItem(\"isDarkMode\")}catch(e){}if(p==='true')p='dark';else if(p==='false')p='light';if(p!=='light'\u0026\u0026p!=='dark'\u0026\u0026p!=='system')p=\"system\"}var r=p==='system'?(matchMedia(\"(prefers-color-scheme: dark)\").matches?'dark':'light'):p;d.classList.remove(r==='dark'?'light':'dark');d.classList.add(r);d.setAttribute(\"data-theme-preference\",p)})();\u003c/script>\u003cmeta data-mint-head name=\"application-name\" content=\"Hyperlane Docs\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/hyperlane/b-b0rvNA5nj7cNLv/_generated/favicon/android-chrome-192x192.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"/mintlify-assets/_mintlify/favicons/hyperlane/b-b0rvNA5nj7cNLv/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/hyperlane/b-b0rvNA5nj7cNLv/_generated/favicon/favicon-16x16.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/hyperlane/b-b0rvNA5nj7cNLv/_generated/favicon/favicon-32x32.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/hyperlane/b-b0rvNA5nj7cNLv/_generated/favicon/favicon.ico\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/hyperlane/b-b0rvNA5nj7cNLv/_generated/favicon-dark/android-chrome-192x192.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/hyperlane/b-b0rvNA5nj7cNLv/_generated/favicon-dark/favicon-16x16.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/hyperlane/b-b0rvNA5nj7cNLv/_generated/favicon-dark/favicon-32x32.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/hyperlane/b-b0rvNA5nj7cNLv/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Deploying a Bridge UI for your HWR - Hyperlane Docs\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Hyperlane Docs\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://docs.hyperlane.xyz/docs/guides/warp-routes/bridge-ui-guide\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://hyperlane.mintlify.app/images/hero.jpg\">\u003cmeta data-mint-head property=\"og:image:width\" content=\"1200\">\u003cmeta data-mint-head property=\"og:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"Deploying a Bridge UI for your HWR - Hyperlane Docs\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://hyperlane.mintlify.app/images/hero.jpg\">\u003cmeta data-mint-head name=\"twitter:image:width\" content=\"1200\">\u003cmeta data-mint-head name=\"twitter:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"/mintlify-assets/_mintlify/favicons/hyperlane/b-b0rvNA5nj7cNLv/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"Hyperlane Docs\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#7B2FBE\">\u003clink data-mint-head rel=\"canonical\" href=\"https://docs.hyperlane.xyz/docs/guides/warp-routes/bridge-ui-guide\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/docs/guides/warp-routes/bridge-ui-guide.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://docs.hyperlane.xyz/#organization\",\"name\":\"Hyperlane Docs\",\"url\":\"https://docs.hyperlane.xyz\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/hyperlane/efOyQbSK6s3b_vQ3/logo/light.svg?fit=max\u0026auto=format\u0026n=efOyQbSK6s3b_vQ3\u0026q=85\u0026s=1501f37d33661a127cab46650dfaa40d\"}},{\"@type\":\"WebSite\",\"@id\":\"https://docs.hyperlane.xyz#website\",\"name\":\"Hyperlane Docs\",\"url\":\"https://docs.hyperlane.xyz\",\"publisher\":{\"@id\":\"https://docs.hyperlane.xyz/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://docs.hyperlane.xyz/docs/guides/warp-routes/bridge-ui-guide#webpage\",\"url\":\"https://docs.hyperlane.xyz/docs/guides/warp-routes/bridge-ui-guide\",\"name\":\"Deploying a Bridge UI for your HWR\",\"dateModified\":\"2026-09-07T15:58:05.352Z\",\"isPartOf\":{\"@id\":\"https://docs.hyperlane.xyz#website\"},\"breadcrumb\":{\"@id\":\"https://docs.hyperlane.xyz/docs/guides/warp-routes/bridge-ui-guide#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://docs.hyperlane.xyz/docs/guides/warp-routes/bridge-ui-guide#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Guides\",\"item\":\"https://docs.hyperlane.xyz/docs/guides/chains/deploy-hyperlane\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Hyperlane Warp Routes (HWR)\",\"item\":\"https://docs.hyperlane.xyz/docs/guides/warp-routes/evm/deploy-yield-routes\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Deploying a Bridge UI for your HWR\",\"item\":\"https://docs.hyperlane.xyz/docs/guides/warp-routes/bridge-ui-guide\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://docs.hyperlane.xyz/docs/guides/warp-routes/bridge-ui-guide#article\",\"headline\":\"Deploying a Bridge UI for your HWR\",\"name\":\"Deploying a Bridge UI for your HWR\",\"url\":\"https://docs.hyperlane.xyz/docs/guides/warp-routes/bridge-ui-guide\",\"mainEntityOfPage\":{\"@id\":\"https://docs.hyperlane.xyz/docs/guides/warp-routes/bridge-ui-guide#webpage\"},\"image\":\"https://docs.hyperlane.xyz/images/hero.jpg\",\"dateModified\":\"2026-09-07T15:58:05.352Z\",\"publisher\":{\"@id\":\"https://docs.hyperlane.xyz/#organization\"},\"isPartOf\":{\"@id\":\"https://docs.hyperlane.xyz#website\"}}]}\u003c/script>\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"Hyperlane Docs\",\"creator\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","siteName":"Hyperlane Docs","nav":{"global":null,"tabs":[{"tab":"Home","groups":[{"group":"Overview","pages":[{"title":"Introduction","href":""},{"title":"Intro to Hyperlane","href":"/docs/intro"},{"group":"Deployments","pages":[{"group":"Contract Addresses","pages":[{"title":"Mailbox","href":"/docs/reference/addresses/deployments/mailbox"},{"title":"InterchainGasPaymaster","href":"/docs/reference/addresses/deployments/interchainGasPaymaster"},{"title":"StorageGasOracle","href":"/docs/reference/addresses/deployments/storageGasOracle"},{"title":"MerkleTreeHook","href":"/docs/reference/addresses/deployments/merkleTreeHook"},{"title":"ValidatorAnnounce","href":"/docs/reference/addresses/deployments/validatorAnnounce"},{"title":"ProxyAdmin","href":"/docs/reference/addresses/deployments/proxyAdmin"},{"title":"TestRecipient","href":"/docs/reference/addresses/deployments/testRecipient"},{"title":"InterchainAccountRouter","href":"/docs/reference/addresses/deployments/interchainAccountRouter"}]},{"group":"Default ISM Validators","pages":[{"title":"Mainnet","href":"/docs/reference/addresses/validators/mainnet-default-ism-validators"},{"title":"Testnet","href":"/docs/reference/addresses/validators/testnet-default-ism-validators"}]},{"title":"Domain Identifiers","href":"/docs/reference/domains"},{"title":"Hyperlane Registries","href":"/docs/reference/registries"},{"title":"Deprecated Chains","href":"/docs/reference/deprecated-chains"}]},{"title":"Ecosystem","href":"/docs/ecosystem"}]},{"group":"Quickstart","pages":[{"title":"Get Started Building with Hyperlane","href":"/docs/get-started-building"},{"title":"Bridge a Token","href":"/docs/guides/quickstart/deploy-warp-route"},{"title":"Local Setup: Sending Messages between Anvil Nodes","href":"/docs/guides/quickstart/local-testnet-setup"}]},{"group":"Applications","pages":[{"group":"Hyperlane Warp Routes","pages":[{"title":"HWRs Overview","href":"/docs/applications/warp-routes/overview"},{"title":"HWR Interface","href":"/docs/applications/warp-routes/interface"},{"title":"HWR Types","href":"/docs/applications/warp-routes/types"},{"title":"HWR Example Usage","href":"/docs/applications/warp-routes/example-usage"},{"title":"HWR 2.0","href":"/docs/applications/warp-routes/multi-collateral-warp-routes"},{"title":"HWR 2.0: Native Rebalancing","href":"/docs/guides/warp-routes/evm/multi-collateral-warp-routes-rebalancing"},{"title":"Yield Routes","href":"/docs/applications/warp-routes/yield-routes"}]},{"group":"Interchain Accounts","pages":[{"title":"Overview","href":"/docs/applications/interchain-account/overview"},{"title":"Example Usage","href":"/docs/applications/interchain-account/example-usage"},{"title":"Overrides","href":"/docs/applications/interchain-account/overrides"}]},{"group":"Metastable","pages":[{"title":"Metastable","sidebarTitle":"Overview","href":"/docs/applications/metastable/overview"},{"title":"Technical Details","href":"/docs/applications/metastable/technical-details"}]},{"group":"Use Cases","pages":[{"title":"Superswaps: One-Click Cross-Chain Token Swaps","href":"/docs/applications/use-cases/cross-chain-swaps"},{"title":"TaoFi: Cross-Chain Swaps with User-controlled Recovery","href":"/docs/applications/use-cases/cross-chain-swaps-with-recovery"}]}]},{"group":"Guides","pages":[{"group":"Setup Hyperlane on your Chain","pages":[{"title":"Deploy to a New Chain","href":"/docs/guides/chains/deploy-hyperlane"},{"title":"Deploy to a Cosmos Chain","href":"/docs/guides/chains/deploy-hyperlane-cosmos"},{"title":"Deploy Hyperlane with Local Agents","href":"/docs/guides/chains/deploy-hyperlane-with-local-agents"}]},{"group":"Hyperlane Warp Routes (HWR)","pages":[{"group":"EVM HWR","pages":[{"title":"Deploy Yield Routes","href":"/docs/guides/warp-routes/evm/deploy-yield-routes"},{"title":"Fast Native Transfers via Custom Gas Tokens","href":"/docs/guides/warp-routes/evm/fast-native-transfer-via-gas-token"},{"title":"Extending an Hyperlane Warp Route","href":"/docs/guides/warp-routes/evm/extending-warp-routes"},{"title":"Create your xERC20 Token Bridge","href":"/docs/guides/warp-routes/evm/xerc20-warp-route"},{"title":"Managing HWR Limits","href":"/docs/guides/warp-routes/evm/managing-warp-route-limits"},{"title":"Deploy HWR 2.0","href":"/docs/guides/warp-routes/evm/deploy-multi-collateral-warp-routes"},{"title":"Transfer and Call Pattern","href":"/docs/guides/warp-routes/evm/transfer-and-call-pattern"}]},{"group":"SVM HWR","pages":[{"title":"Deploy an SVM HWR","href":"/docs/guides/warp-routes/svm/svm-warp-route-guide"},{"group":"Using Squads","pages":[{"title":"Alt SVMs: Using Squads","href":"/docs/guides/production/using-squads/alt-svm-using-sqauds"},{"title":"Using Squads with Solana","href":"/docs/guides/production/using-squads/using-squads-solana"}]}]},{"title":"Deploy a Cosmos HWR","href":"/docs/guides/warp-routes/cosmos/cosmos-warp-route-guide"},{"title":"Deploy an EVM ↔ SVM HWR","href":"/docs/guides/warp-routes/evm-svm-warp-route-guide"},{"title":"Deploy an EVM ↔ Cosmos HWR","href":"/docs/guides/warp-routes/evm-cosmos-warp-route-guide"},{"title":"Deploy a Cosmos ↔ SVM HWR","description":"Deploy a Hyperlane Warp Route between a Cosmos SDK chain and an SVM chain","href":"/docs/guides/warp-routes/cosmos-svm-warp-route-guide"},{"title":"Deploying a Bridge UI for your HWR","href":"/docs/guides/warp-routes/bridge-ui-guide"},{"title":"Embedding the Bridge Widget","description":"Embed Hyperlane's bridge widget in your app using the @hyperlane-xyz/warp-widget SDK or a plain iframe","href":"/docs/guides/warp-routes/embed-widget"}]},{"group":"Go to Production","pages":[{"title":"Overview","href":"/docs/guides/production/prod-overview"},{"group":"Core Deployment","pages":[{"title":"Update Mailbox Default ISM","href":"/docs/guides/production/core-deployment/update-mailbox-default-ism"},{"title":"Transfer Mailbox Ownership","href":"/docs/guides/production/core-deployment/transfer-mailbox-ownership"}]},{"group":"HWR Deployment","pages":[{"title":"Remove Trusted Relayer","href":"/docs/guides/production/warp-route-deployment/remove-trusted-relayer"},{"title":"Transfer Ownership","href":"/docs/guides/production/warp-route-deployment/transfer-warp-route-ownership"},{"title":"Govern with Timelocks","href":"/docs/guides/production/warp-route-deployment/govern-with-timelocks"},{"title":"Configure Rate Limit ISM","href":"/docs/guides/production/warp-route-deployment/configure-rate-limit-ism"},{"title":"Configure Pausable ISM","href":"/docs/guides/production/warp-route-deployment/configure-pausable-ism"}]}]},{"title":"Create your own Hook \u0026 ISM","href":"/docs/guides/create-custom-hook-and-ism"},{"title":"Troubleshooting Guide","href":"/docs/guides/deploy-hyperlane-troubleshooting"}]},{"group":"Developer Tools","pages":[{"title":"Hyperlane CLI","href":"/docs/reference/developer-tools/cli"},{"group":"Libraries","pages":[{"title":"MailboxClient Library","href":"/docs/reference/developer-tools/libraries/mailbox-client"},{"title":"Router Library","href":"/docs/reference/developer-tools/libraries/router"},{"title":"Typecasts Library","href":"/docs/reference/developer-tools/libraries/typecasts"},{"title":"Message Library","href":"/docs/reference/developer-tools/libraries/message"},{"title":"StandardHookMetadata Library","href":"/docs/reference/developer-tools/libraries/hookmetadata"}]},{"group":"Typescript SDK","pages":[{"title":"Hyperlane Typescript SDK","href":"/docs/reference/developer-tools/typescript-sdk/overview"},{"title":"Message Transfer Fee Calculations","href":"/docs/reference/developer-tools/typescript-sdk/transfer-fee-calculation"}]},{"group":"Developer Tips","pages":[{"title":"Unit testing - EVM","href":"/docs/reference/developer-tips/unit-testing"}]}]},{"group":"Resources","pages":[{"group":"Hyperlane Explorer","pages":[{"title":"Overview","href":"/docs/reference/explorer/overview"},{"title":"Configuring New Chains in the Hyperlane Explorer","href":"/docs/reference/explorer/configuring-pi-chains"},{"title":"GraphQL API","href":"/docs/reference/explorer/graphql-api"},{"title":"Explorer Debugging","href":"/docs/reference/explorer/explorer-debugging"}]}]}]},{"tab":"Learn","pages":[{"title":"Learn","href":"/docs/protocol/protocol-overview"}]},{"tab":"Agent Operators","pages":[{"title":"Agent Operators","href":"/docs/operate/overview-agents"}]}]},"title":"Deploying a Bridge UI for your HWR - Hyperlane Docs","buildId":"dpl_CUnGQP1HgFUzoxatVC37y4zP83Vx","deploymentId":"dpl_CUnGQP1HgFUzoxatVC37y4zP83Vx","dynamics":["a74be98ba7"],"chunks":["zoom-image-lightbox-DQ5W4Q2v.js","PlusIcon-jZ8vgk6R.js","lightbox-handle-r17bVUz3.js"]}