From 0ac3ae28193a8623aaf7faf84e56001f3367e6e6 Mon Sep 17 00:00:00 2001
From: Rick Staa <rick.staa@outlook.com>
Date: Tue, 16 Jun 2026 17:04:24 +0200
Subject: [PATCH 1/2] feat: add Bridge LPT menu option and generalize embed
 modal

Add a "Bridge LPT" entry to the desktop nav popover (new-window link)
and mobile drawer (embedded bridge.arbitrum.io iframe modal), letting
users bridge LPT from Ethereum to Arbitrum One.

Rename LlamaswapModal -> EmbedModal since it now hosts both the
DefiLlama swap and the Arbitrum bridge embeds.

Closes #704

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 components/Drawer/index.tsx                   | 33 +++++++++++++++++--
 .../{LlamaswapModal => EmbedModal}/index.tsx  |  4 +--
 layouts/main.tsx                              |  6 ++++
 3 files changed, 38 insertions(+), 5 deletions(-)
 rename components/{LlamaswapModal => EmbedModal}/index.tsx (80%)

diff --git a/components/Drawer/index.tsx b/components/Drawer/index.tsx
index 860eb764..a5509203 100644
--- a/components/Drawer/index.tsx
+++ b/components/Drawer/index.tsx
@@ -6,7 +6,7 @@ import Router, { useRouter } from "next/router";
 import { useEffect } from "react";
 
 import Account from "../Account";
-import LlamaswapModal from "../LlamaswapModal";
+import EmbedModal from "../EmbedModal";
 import Logo from "../Logo";
 
 const Index = ({
@@ -159,7 +159,7 @@ const Index = ({
               Docs
             </A>
 
-            <LlamaswapModal
+            <EmbedModal
               trigger={
                 <A
                   as={Text}
@@ -184,7 +184,34 @@ const Index = ({
                 }}
                 src={`https://swap.defillama.com/?chain=arbitrum&from=0x0000000000000000000000000000000000000000&to=0x289ba1701c2f088cf0faf8b3705246331cb8a839`}
               />
-            </LlamaswapModal>
+            </EmbedModal>
+
+            <EmbedModal
+              trigger={
+                <A
+                  as={Text}
+                  css={{
+                    cursor: "pointer",
+                    fontSize: "$2",
+                    marginBottom: "$2",
+                    display: "block",
+                  }}
+                >
+                  Bridge LPT
+                </A>
+              }
+            >
+              <Box
+                as="iframe"
+                css={{
+                  backgroundColor: "$panel",
+                  width: "100%",
+                  height: "100%",
+                  border: "0",
+                }}
+                src={`https://bridge.arbitrum.io/?destinationChain=arbitrum-one&sourceChain=ethereum&token=0x58b6a8a3302369daec383334672404ee733ab239`}
+              />
+            </EmbedModal>
             <A
               css={{ fontSize: "$2", marginBottom: "$2", display: "block" }}
               href="https://discord.gg/livepeer"
diff --git a/components/LlamaswapModal/index.tsx b/components/EmbedModal/index.tsx
similarity index 80%
rename from components/LlamaswapModal/index.tsx
rename to components/EmbedModal/index.tsx
index 18c2845b..7ab63712 100644
--- a/components/LlamaswapModal/index.tsx
+++ b/components/EmbedModal/index.tsx
@@ -1,6 +1,6 @@
 import { Dialog, DialogContent, DialogTrigger } from "@livepeer/design-system";
 
-const Index = ({ trigger, children }) => {
+const EmbedModal = ({ trigger, children }) => {
   return (
     <Dialog>
       <DialogTrigger asChild>{trigger}</DialogTrigger>
@@ -11,4 +11,4 @@ const Index = ({ trigger, children }) => {
   );
 };
 
-export default Index;
+export default EmbedModal;
diff --git a/layouts/main.tsx b/layouts/main.tsx
index e3c203f2..3f4722ab 100644
--- a/layouts/main.tsx
+++ b/layouts/main.tsx
@@ -734,6 +734,12 @@ const Layout = ({ children, title = "Livepeer Explorer" }) => {
                                 >
                                   Get LPT
                                 </PopoverLink>
+                                <PopoverLink
+                                  newWindow={true}
+                                  href={`https://bridge.arbitrum.io/?destinationChain=arbitrum-one&sourceChain=ethereum&token=0x58b6a8a3302369daec383334672404ee733ab239`}
+                                >
+                                  Bridge LPT
+                                </PopoverLink>
                                 <PopoverLink
                                   newWindow={true}
                                   href={`https://discord.gg/livepeer`}

From 7e052e1a544a39e3a79e2a98ae1909796c81f710 Mon Sep 17 00:00:00 2001
From: Rick Staa <rick.staa@outlook.com>
Date: Tue, 16 Jun 2026 17:56:32 +0200
Subject: [PATCH 2/2] fix: a11y and DRY cleanup for LPT menu embeds

- Add title attributes to the Get LPT / Bridge LPT iframes.
- Render modal triggers as real buttons so they are keyboard-focusable.
- Extract the swap/bridge URLs into constants/links.ts to keep the
  desktop and mobile surfaces in sync.
- Use portal.arbitrum.io for the bridge link (the embeddable Arbitrum
  portal; the earlier framing concern was a Cloudflare bot-challenge
  artifact, not the real app's headers).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Co-Authored-By: Copilot <copilot@github.com>
Co-Authored-By: coderabbitai[bot] <coderabbitai[bot]@users.noreply.github.com>
---
 components/Drawer/index.tsx | 23 ++++++++++++++++++-----
 constants/links.ts          |  9 +++++++++
 layouts/main.tsx            |  5 +++--
 3 files changed, 30 insertions(+), 7 deletions(-)
 create mode 100644 constants/links.ts

diff --git a/components/Drawer/index.tsx b/components/Drawer/index.tsx
index a5509203..b486bf6f 100644
--- a/components/Drawer/index.tsx
+++ b/components/Drawer/index.tsx
@@ -1,5 +1,6 @@
 import { DrawerItem } from "@layouts/main";
-import { Box, Flex, Link as A, Text } from "@livepeer/design-system";
+import { Box, Flex, Link as A } from "@livepeer/design-system";
+import { BRIDGE_LPT_URL, GET_LPT_URL } from "constants/links";
 import { IS_L2 } from "lib/chains";
 import Link from "next/link";
 import Router, { useRouter } from "next/router";
@@ -162,12 +163,17 @@ const Index = ({
             <EmbedModal
               trigger={
                 <A
-                  as={Text}
+                  as="button"
                   css={{
                     cursor: "pointer",
                     fontSize: "$2",
                     marginBottom: "$2",
                     display: "block",
+                    padding: 0,
+                    border: 0,
+                    background: "transparent",
+                    textAlign: "left",
+                    color: "inherit",
                   }}
                 >
                   Get LPT
@@ -176,25 +182,31 @@ const Index = ({
             >
               <Box
                 as="iframe"
+                title="Get LPT"
                 css={{
                   backgroundColor: "$panel",
                   width: "100%",
                   height: "100%",
                   border: "0",
                 }}
-                src={`https://swap.defillama.com/?chain=arbitrum&from=0x0000000000000000000000000000000000000000&to=0x289ba1701c2f088cf0faf8b3705246331cb8a839`}
+                src={GET_LPT_URL}
               />
             </EmbedModal>
 
             <EmbedModal
               trigger={
                 <A
-                  as={Text}
+                  as="button"
                   css={{
                     cursor: "pointer",
                     fontSize: "$2",
                     marginBottom: "$2",
                     display: "block",
+                    padding: 0,
+                    border: 0,
+                    background: "transparent",
+                    textAlign: "left",
+                    color: "inherit",
                   }}
                 >
                   Bridge LPT
@@ -203,13 +215,14 @@ const Index = ({
             >
               <Box
                 as="iframe"
+                title="Bridge LPT"
                 css={{
                   backgroundColor: "$panel",
                   width: "100%",
                   height: "100%",
                   border: "0",
                 }}
-                src={`https://bridge.arbitrum.io/?destinationChain=arbitrum-one&sourceChain=ethereum&token=0x58b6a8a3302369daec383334672404ee733ab239`}
+                src={BRIDGE_LPT_URL}
               />
             </EmbedModal>
             <A
diff --git a/constants/links.ts b/constants/links.ts
new file mode 100644
index 00000000..4c82ec32
--- /dev/null
+++ b/constants/links.ts
@@ -0,0 +1,9 @@
+// LPT token addresses used to pre-fill external acquisition flows.
+const ARBITRUM_LPT_ADDRESS = "0x289ba1701c2f088cf0faf8b3705246331cb8a839";
+const ETHEREUM_LPT_ADDRESS = "0x58b6a8a3302369daec383334672404ee733ab239";
+
+// Swap ETH -> LPT on Arbitrum via the DefiLlama aggregator.
+export const GET_LPT_URL = `https://swap.defillama.com/?chain=arbitrum&from=0x0000000000000000000000000000000000000000&to=${ARBITRUM_LPT_ADDRESS}`;
+
+// Bridge LPT from Ethereum to Arbitrum One via the Arbitrum bridge portal.
+export const BRIDGE_LPT_URL = `https://portal.arbitrum.io/bridge?destinationChain=arbitrum-one&sourceChain=ethereum&token=${ETHEREUM_LPT_ADDRESS}`;
diff --git a/layouts/main.tsx b/layouts/main.tsx
index 3f4722ab..9c7659de 100644
--- a/layouts/main.tsx
+++ b/layouts/main.tsx
@@ -39,6 +39,7 @@ import {
   useProtocolQuery,
   useTreasuryProposalsQuery,
 } from "apollo";
+import { BRIDGE_LPT_URL, GET_LPT_URL } from "constants/links";
 import { BigNumber } from "ethers";
 import { CHAIN_INFO, DEFAULT_CHAIN_ID } from "lib/chains";
 import dynamic from "next/dynamic";
@@ -730,13 +731,13 @@ const Layout = ({ children, title = "Livepeer Explorer" }) => {
                                 </PopoverLink>
                                 <PopoverLink
                                   newWindow={true}
-                                  href={`https://swap.defillama.com/?chain=arbitrum&from=0x0000000000000000000000000000000000000000&to=0x289ba1701c2f088cf0faf8b3705246331cb8a839`}
+                                  href={GET_LPT_URL}
                                 >
                                   Get LPT
                                 </PopoverLink>
                                 <PopoverLink
                                   newWindow={true}
-                                  href={`https://bridge.arbitrum.io/?destinationChain=arbitrum-one&sourceChain=ethereum&token=0x58b6a8a3302369daec383334672404ee733ab239`}
+                                  href={BRIDGE_LPT_URL}
                                 >
                                   Bridge LPT
                                 </PopoverLink>