{"id":47861881,"url":"https://github.com/hyperlane-xyz/hyperlane-warp-ui-template","last_synced_at":"2026-04-03T23:47:13.888Z","repository":{"id":74930540,"uuid":"574173538","full_name":"hyperlane-xyz/hyperlane-warp-ui-template","owner":"hyperlane-xyz","description":"A web app template for building Hyperlane Warp Route UIs","archived":false,"fork":false,"pushed_at":"2026-04-02T15:27:41.000Z","size":30407,"stargazers_count":184,"open_issues_count":76,"forks_count":204,"subscribers_count":20,"default_branch":"main","last_synced_at":"2026-04-03T23:47:08.328Z","etag":null,"topics":["hyperlane","interchain","route","template","warp"],"latest_commit_sha":null,"homepage":"https://hyperlane-warp-template.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hyperlane-xyz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-04T16:49:36.000Z","updated_at":"2026-03-31T14:42:09.000Z","dependencies_parsed_at":null,"dependency_job_id":"f1da8770-193e-4e6d-babf-ffc0fd33461e","html_url":"https://github.com/hyperlane-xyz/hyperlane-warp-ui-template","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/hyperlane-xyz/hyperlane-warp-ui-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperlane-xyz%2Fhyperlane-warp-ui-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperlane-xyz%2Fhyperlane-warp-ui-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperlane-xyz%2Fhyperlane-warp-ui-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperlane-xyz%2Fhyperlane-warp-ui-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hyperlane-xyz","download_url":"https://codeload.github.com/hyperlane-xyz/hyperlane-warp-ui-template/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperlane-xyz%2Fhyperlane-warp-ui-template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31382355,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-03T23:20:52.058Z","status":"ssl_error","status_checked_at":"2026-04-03T23:20:51.675Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hyperlane","interchain","route","template","warp"],"created_at":"2026-04-03T23:47:12.902Z","updated_at":"2026-04-03T23:47:13.881Z","avatar_url":"https://github.com/hyperlane-xyz.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Hyperlane Warp Route UI Template\n\nThis repo contains an example web interface for interchain tokens built with [Hyperlane Warp Route](https://docs.hyperlane.xyz/docs/reference/applications/warp-routes). Warp is a framework to permissionlessly bridge tokens to any chain.\n\n## Architecture\n\nThis app is built with Next \u0026 React, Wagmi, RainbowKit, and the Hyperlane SDK.\n\n- Constants that you may want to change are in `./src/consts/`, see the following Customization section for details.\n- The index page is located at `./src/pages/index.tsx`\n- The primary features are implemented in `./src/features/`\n\n## Customization\n\nSee [CUSTOMIZE.md](./CUSTOMIZE.md) for details about adjusting the tokens and branding of this app.\n\n## Development\n\n### Setup\n\n#### Configure\n\nYou need a `projectId` from the WalletConnect Cloud to run the Hyperlane Warp Route UI. Sign up to [WalletConnect Cloud](https://cloud.walletconnect.com) to create a new project.\n\n#### Build\n\n```sh\n# Install dependencies\npnpm install\n\n# Build Next project\npnpm run build\n```\n\n### Run\n\nYou can add `.env.local` file next to `.env.example` where you set `projectId` copied from WalletConnect Cloud.\n\n```sh\n# Start the Next dev server\npnpm run dev\n# Or with a custom projectId\nNEXT_PUBLIC_WALLET_CONNECT_ID=\u003cprojectId\u003e pnpm run dev\n```\n\n### Test\n\n```sh\n# Run unit tests\npnpm test\n\n# Run E2E tests (reuses running dev server, or starts one via Playwright)\npnpm test:e2e\n\n# Run E2E tests with headed browser and slow motion for debugging\nSLOW_MO=2000 pnpm test:e2e --headed --workers=1\n\n# Run a single E2E test file with headed browser\nSLOW_MO=2000 pnpm test:e2e --headed --workers=1 tests/wallet-connect/protocol-wallet-modals.spec.ts\n\n# Lint check code\npnpm run lint\n\n# Check code types\npnpm run typecheck\n```\n\n### Format\n\n```sh\n# Format code using Prettier\npnpm run prettier\n```\n\n### Clean / Reset\n\n```sh\n# Delete build artifacts to start fresh\npnpm run clean\n```\n\n### Local package linking to hyperlane-monorepo\n\nIf you have to make changes to the widgets package to edit e.g. the Connect Button or other components linking\nthe widgets package locally to test it is necessary. To do that you can run the following commands\n\n```sh\n# Link monorepo packages with the warp-ui\npnpm link:monorepo\n# Unlink packages again after testing\npnpm unlink:monorepo\n```\n\n## Embed Widget\n\nThe Warp UI can be embedded as an iframe on any website, giving your users a bridge experience directly in your app.\n\n### Setup\n\nOnce deployed (e.g., to Vercel), the embed is available at `/embed`:\n\n```html\n\u003ciframe\n  src=\"https://your-domain.com/embed\"\n  width=\"420\"\n  height=\"600\"\n  style=\"border: none; border-radius: 12px;\"\n/\u003e\n```\n\nYou can pre-select transfer routes using query params:\n\n```text\n/embed?origin=ethereum\u0026destination=arbitrum\u0026originToken=USDC\u0026destinationToken=USDC\n```\n\n### Theme Customization\n\nCustomize colors via URL params (hex values without `#`):\n\n| Param        | Description                                    | Default (light) |\n| ------------ | ---------------------------------------------- | --------------- |\n| `accent`     | Primary/accent color (buttons, headers, links) | `9A0DFF`        |\n| `bg`         | Page background                                | transparent     |\n| `card`       | Card/surface background                        | `ffffff`        |\n| `text`       | Text color                                     | `010101`        |\n| `buttonText` | Button text color                              | `ffffff`        |\n| `border`     | Border color                                   | `BFBFBF40`      |\n| `error`      | Error state color                              | `dc2626`        |\n| `mode`       | `dark` or `light` — applies preset defaults    | `light`         |\n\n**Examples:**\n\n```html\n\u003c!-- Blue accent --\u003e\n\u003ciframe src=\"https://your-domain.com/embed?accent=3b82f6\" ... /\u003e\n\n\u003c!-- Dark mode with green accent --\u003e\n\u003ciframe src=\"https://your-domain.com/embed?mode=dark\u0026accent=22c55e\" ... /\u003e\n\n\u003c!-- Fully custom theme --\u003e\n\u003ciframe\n  src=\"https://your-domain.com/embed?bg=0f172a\u0026card=1e293b\u0026text=e2e8f0\u0026accent=8b5cf6\u0026buttonText=ffffff\u0026border=334155\"\n  ...\n/\u003e\n```\n\n### PostMessage Events\n\nThe embed page sends events to the parent window via `postMessage`:\n\n```js\nwindow.addEventListener('message', (event) =\u003e {\n  if (event.data?.type !== 'hyperlane-warp-widget') return;\n\n  const { type, payload } = event.data.event;\n  if (type === 'ready') {\n    console.log('Widget ready at', payload.timestamp);\n  }\n});\n```\n\n### Solving CSP Issues\n\nIf your site has a Content Security Policy that blocks iframes, you'll need to allow the Warp UI origin in your CSP `frame-src` directive:\n\n```text\nContent-Security-Policy: frame-src https://your-warp-ui-domain.com;\n```\n\nFor sites where you can't modify CSP headers (e.g., WordPress, Shopify), check if the platform has an iframe allowlist setting, or use a reverse proxy to serve the embed from your own domain.\n\nIf you self-host the Warp UI and want to restrict which sites can embed it, set the `NEXT_PUBLIC_EMBED_ALLOWED_ORIGINS` environment variable:\n\n```text\nNEXT_PUBLIC_EMBED_ALLOWED_ORIGINS=https://app-a.com https://app-b.com\n```\n\nIf not set, any site can embed the widget (default: `*`).\n\n## Deployment\n\nThe easiest hosting solution for this Next.JS app is to create a project on Vercel.\n\n## Learn more\n\nFor more information, see the [Hyperlane documentation](https://docs.hyperlane.xyz/docs/protocol/warp-routes/warp-routes-overview).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyperlane-xyz%2Fhyperlane-warp-ui-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhyperlane-xyz%2Fhyperlane-warp-ui-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyperlane-xyz%2Fhyperlane-warp-ui-template/lists"}