{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-pages/developers/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["admonition"]},"type":"markdown"},"seo":{"title":"Wormhole Connect Widget","siteUrl":"https://docs.xrplevm.org/","llmstxt":{"hide":false,"sections":[{"title":"Table of contents","includeFiles":["**/*"],"excludeFiles":[]}],"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"wormhole-connect-widget","__idx":0},"children":["Wormhole Connect Widget"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Wormhole Connect"]}," is a drop-in React widget that gives your dApp a complete bridging UI: chain and token selection, wallet connections, quoting, and transfer tracking. On the XRPL EVM, Connect is available on ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Mainnet"]}," (Testnet is not currently supported)."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"install","__idx":1},"children":["Install"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"bash","header":{"controls":{"copy":{}}},"source":"npm install @wormhole-foundation/wormhole-connect\n","lang":"bash"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"add-the-widget","__idx":2},"children":["Add the Widget"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Configure Connect with the chains you want to expose. The XRPL EVM's chain name is ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["XRPLEVM"]},":"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"tsx","header":{"controls":{"copy":{}}},"source":"import WormholeConnect, {\n  type config,\n  WormholeConnectTheme,\n} from \"@wormhole-foundation/wormhole-connect\";\n\nfunction App() {\n  const config: config.WormholeConnectConfig = {\n    network: \"Mainnet\",\n    chains: [\"XRPLEVM\", \"Ethereum\", \"Solana\"],\n    ui: {\n      title: \"XRPL EVM Bridge\",\n    },\n  };\n\n  const theme: WormholeConnectTheme = {\n    mode: \"dark\",\n    primary: \"#32dbc7\",\n  };\n\n  return <WormholeConnect config={config} theme={theme} />;\n}\n\nexport default App;\n","lang":"tsx"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info","name":"Verify chain support in your installed version"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Chain availability in Connect follows the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://wormhole.com/docs/products/reference/chain-ids/"},"children":["Wormhole SDK chain names"]}," and the routes enabled for each network. If the widget rejects the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["XRPLEVM"]}," chain string, upgrade ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@wormhole-foundation/wormhole-connect"]}," to the latest release and check the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://wormhole.com/docs/products/connect/reference/supported-networks/"},"children":["Connect supported networks"]}," table."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"customize","__idx":3},"children":["Customize"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Custom RPCs"]},": Point Connect at your own XRPL EVM RPC (for example ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["https://rpc.xrplevm.org"]},") via the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://wormhole.com/docs/products/connect/configuration/data/"},"children":["data configuration"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Theming"]},": Adjust colors, fonts, and layout with the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://wormhole.com/docs/products/connect/configuration/theme/"},"children":["theme configuration"]},"."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Routes and tokens"]},": Restrict which tokens and routes appear, including NTT tokens you have deployed."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"next-steps","__idx":4},"children":["Next Steps"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://wormhole.com/docs/products/connect/overview/"},"children":["Connect overview"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://wormhole.com/docs/products/connect/get-started/"},"children":["Connect get-started guide"]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://portalbridge.com"},"children":["Portal Bridge"]},": the hosted app built on the same stack."]}]}]},"headings":[{"value":"Wormhole Connect Widget","id":"wormhole-connect-widget","depth":1},{"value":"Install","id":"install","depth":2},{"value":"Add the Widget","id":"add-the-widget","depth":2},{"value":"Customize","id":"customize","depth":2},{"value":"Next Steps","id":"next-steps","depth":2}],"frontmatter":{"seo":{"title":"Wormhole Connect Widget"}},"editPage":{"to":"https://github.com/ripple/docs.xrplevm.org/tree/main/pages/developers/interacting-with-evm/advanced-guides/cross-chain-transactions/wormhole/connect-widget.md"},"lastModified":"2026-08-07T10:03:44.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/pages/developers/interacting-with-evm/advanced-guides/cross-chain-transactions/wormhole/connect-widget","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}