feat: add Bridge LPT menu option

components/Drawer/index.tsx

@@ -1,12 +1,13 @@
 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";
 import { useEffect } from "react";
 
 import Account from "../Account";
-import LlamaswapModal from "../LlamaswapModal";
+import EmbedModal from "../EmbedModal";
 import Logo from "../Logo";
 
 const Index = ({
@@ -159,15 +160,20 @@ const Index = ({
               Docs
             </A>
 
-            <LlamaswapModal
+            <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,15 +182,49 @@ 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}
               />
-            </LlamaswapModal>
+            </EmbedModal>
+
+            <EmbedModal
+              trigger={
+                <A
+                  as="button"
+                  css={{
+                    cursor: "pointer",
+                    fontSize: "$2",
+                    marginBottom: "$2",
+                    display: "block",
+                    padding: 0,
+                    border: 0,
+                    background: "transparent",
+                    textAlign: "left",
+                    color: "inherit",
+                  }}
+                >
+                  Bridge LPT
+                </A>
+              }
+            >
+              <Box
+                as="iframe"
+                title="Bridge LPT"
+                css={{
+                  backgroundColor: "$panel",
+                  width: "100%",
+                  height: "100%",
+                  border: "0",
+                }}
+                src={BRIDGE_LPT_URL}
+              />
+            </EmbedModal>
             <A
               css={{ fontSize: "$2", marginBottom: "$2", display: "block" }}
               href="https://discord.gg/livepeer"

components/LlamaswapModal/index.tsx → 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;

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}`;

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,10 +731,16 @@ 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={BRIDGE_LPT_URL}
+                                >
+                                  Bridge LPT
+                                </PopoverLink>
                                 <PopoverLink
                                   newWindow={true}
                                   href={`https://discord.gg/livepeer`}