Add EXA token bridge references

components/BridgeContent/HyperlaneBridge/index.tsx

@@ -0,0 +1,43 @@
+import React, { memo } from 'react';
+import { Box, Button, Typography } from '@mui/material';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import { useTranslation } from 'react-i18next';
+
+import { track } from 'utils/mixpanel';
+import { EXA_BRIDGE_URL } from 'utils/const';
+
+const HyperlaneBridge = () => {
+  const { t } = useTranslation();
+
+  return (
+    <Box
+      display="flex"
+      flexDirection={{ xs: 'column', sm: 'row' }}
+      alignItems={{ xs: 'start', sm: 'center' }}
+      justifyContent="space-between"
+      gap={2}
+      p={3}
+      borderRadius={1}
+      bgcolor="components.bg"
+      boxShadow="0px 3px 4px 0px #61666B1A"
+    >
+      <Typography fontSize={16}>
+        {t('Bridge your EXA tokens between OP Mainnet and Base, powered by Hyperlane.')}
+      </Typography>
+      <Button
+        component="a"
+        href={EXA_BRIDGE_URL}
+        target="_blank"
+        rel="noreferrer noopener"
+        variant="contained"
+        endIcon={<OpenInNewIcon sx={{ height: 14, width: 14 }} />}
+        sx={{ whiteSpace: 'nowrap', minWidth: 168 }}
+        onClick={() => track('Button Clicked', { location: 'Bridge', name: 'hyperlane bridge', href: EXA_BRIDGE_URL })}
+      >
+        {t('Bridge EXA')}
+      </Button>
+    </Box>
+  );
+};
+
+export default memo(HyperlaneBridge);

components/BridgeContent/index.tsx

@@ -6,6 +6,7 @@ import { ActiveRoute } from 'types/Bridge';
 import { useWeb3 } from 'hooks/useWeb3';
 import { fetchActiveRoutes } from './utils';
 import SocketTxHistory from './SocketTxHistory';
+import HyperlaneBridge from './HyperlaneBridge';
 
 const BridgeContent = () => {
   const [activeRoutes, setActiveRoutes] = useState<ActiveRoute[] | undefined>();
@@ -26,6 +27,12 @@ const BridgeContent = () => {
 
   return (
     <Box display="flex" justifyContent="center" flexDirection="column" mx="auto" mt={5} gap={2}>
+      <Box mb={4}>
+        <Typography variant="h2" fontSize={24} mb={2}>
+          {t('EXA Token Bridge')}
+        </Typography>
+        <HyperlaneBridge />
+      </Box>
       <Box>
         <Typography variant="h2" fontSize={24} mb={2}>
           {t('Bridge & Swap')}

i18n/es/translation.json

@@ -432,6 +432,10 @@
   "Provide liquidity to the EXA/wETH pool.": "Proporciona liquidez al pool EXA/wETH.",
   "Go to Velodrome": "Ir a Velodrome",
   "Bridge & Swap with Socket": "Bridge & Swap con Socket",
+  "Bridge EXA with Hyperlane": "Pase EXA con Hyperlane",
+  "Bridge your EXA tokens between OP Mainnet and Base, powered by Hyperlane.": "Pase sus tokens EXA entre OP Mainnet y Base, impulsado por Hyperlane.",
+  "Bridge EXA": "Pase EXA",
+  "EXA Token Bridge": "EXA Token Bridge",
   "Seamlessly bridge and swap assets to OP Mainnet from many different networks.": "Pase y cambie activos de manera fluida a OP Mainnet desde muchas redes diferentes.",
   "Cross Network": "Multired",
   "Featured Strategies": "Estrategias Destacadas",

pages/strategies.tsx

@@ -23,6 +23,7 @@ import { useWeb3 } from 'hooks/useWeb3';
 import FeaturedStrategies from 'components/strategies/FeaturedStrategies';
 import { useModal } from '../contexts/ModalContext';
 import { track } from 'utils/mixpanel';
+import { EXA_BRIDGE_URL } from 'utils/const';
 
 const Strategies: NextPage = () => {
   const { t } = useTranslation();
@@ -422,6 +423,31 @@ const Strategies: NextPage = () => {
   const thirdPartyStrategies: (Strategy & { chainId?: number })[] = useMemo(
     () =>
       [
+        {
+          chainId: optimism.id,
+          title: t('Bridge EXA with Hyperlane'),
+          description: t('Bridge your EXA tokens between OP Mainnet and Base, powered by Hyperlane.'),
+          tags: [{ text: t('Cross Network') }, { text: t('Basic'), size: 'small' as const }],
+          button: (
+            <a href={EXA_BRIDGE_URL} target="_blank" rel="noreferrer noopener" style={{ width: '100%' }}>
+              <Button
+                fullWidth
+                variant="contained"
+                onClick={() =>
+                  track('Button Clicked', {
+                    location: 'Strategies',
+                    name: 'exa bridge',
+                    isNew: false,
+                    href: EXA_BRIDGE_URL,
+                  })
+                }
+              >
+                {t('Bridge EXA')}
+              </Button>
+            </a>
+          ),
+          imgPath: '/img/strategies/hyperlane-logo.svg',
+        },
         {
           title: t('Bridge & Swap with Socket'),
           description: t('Seamlessly bridge and swap assets to OP Mainnet from many different networks.'),

utils/const.ts

@@ -7,3 +7,5 @@ export const DEFAULT_AMOUNT = BigInt(numbers.defaultAmount);
 export const ETH_ROUTER_SLIPPAGE = parseUnits(String(numbers.ethRouterSlippage), 18);
 
 export const GAS_LIMIT_MULTIPLIER = parseUnits(String(numbers.gasLimitMultiplier), 18);
+
+export const EXA_BRIDGE_URL = 'https://bridge.exact.ly/';