Merge pull request #3173 from OlympusDAO/baseBridge

Base bridge support
OlympusDAO · May 1, 2024 · 361c87e · 361c87e
2 parents 1c14eb2 + f6404ae
commit 361c87e
Show file tree

Hide file tree

Showing 10 changed files with 111 additions and 14 deletions.
diff --git a/public/assets/images/base.svg b/public/assets/images/base.svg
diff --git a/src/constants/addresses.ts b/src/constants/addresses.ts
@@ -80,6 +80,8 @@ export const OHM_ADDRESSES = {
   [NetworkId.TESTNET_GOERLI]: "0x0595328847AF962F951a4f8F8eE9A3Bf261e4f6b",
   [NetworkId.MAINNET]: "0x64aa3364f17a4d01c6f1751fd97c2bd3d7e7f1d5",
   [NetworkId.ARBITRUM]: "0xf0cb2dc0db5e6c66B9a70Ac27B06b878da017028",
+  [NetworkId.BASE]: "0x060cb087a9730E13aa191f31A6d86bFF8DfcdCC0",
+  [NetworkId.BASE_TESTNET]: "",
   [NetworkId.ARBITRUM_GOERLI]: "0x69da0a4ace14c0befe906f18881a35670e7568ac",
 };
 
@@ -202,13 +204,15 @@ export const ZERO_EX_EXCHANGE_PROXY_ADDRESSES = {
 export const CROSS_CHAIN_BRIDGE_ADDRESSES = {
   [NetworkId.MAINNET]: "0x45e563c39cddba8699a90078f42353a57509543a",
   [NetworkId.ARBITRUM]: "0x20B3834091f038Ce04D8686FAC99CA44A0FB285c",
+  [NetworkId.BASE]: "0x6CA1a916e883c7ce2BFBcF59dc70F2c1EF9dac6e",
   [NetworkId.TESTNET_GOERLI]: "0xefffab0Aa61828c4af926E039ee754e3edE10dAc",
   [NetworkId.ARBITRUM_GOERLI]: "0xB01432c01A9128e3d1d70583eA873477B2a1f5e1",
 };
 /** the testnet abi is different than the mainnet */
 export const CROSS_CHAIN_BRIDGE_ADDRESSES_TESTNET = {
   [NetworkId.MAINNET]: "",
   [NetworkId.ARBITRUM]: "",
+  [NetworkId.BASE]: "",
   [NetworkId.TESTNET_GOERLI]: "0xefffab0Aa61828c4af926E039ee754e3edE10dAc",
   [NetworkId.ARBITRUM_GOERLI]: "0xB01432c01A9128e3d1d70583eA873477B2a1f5e1",
 };
@@ -219,6 +223,7 @@ export const MINTER_ADDRESSES = {
   [NetworkId.ARBITRUM]: "0x8f6406eDbFA393e327822D4A08BcF15503570D87",
   [NetworkId.TESTNET_GOERLI]: "0xefffab0Aa61828c4af926E039ee754e3edE10dAc",
   [NetworkId.ARBITRUM_GOERLI]: "0x78f84998c73655ac2da0aa1e1270f6cb985a343e",
+  [NetworkId.BASE]: "0x623164A9Ee2556D524b08f34F1d2389d7B4e1A1C",
 };
 
 /** for display purposes */
@@ -231,6 +236,10 @@ export const BRIDGE_CHAINS = {
     name: "Arbitrum",
     token: "ARBITRUM",
   },
+  [NetworkId.BASE]: {
+    name: "Base",
+    token: "BASE",
+  },
   [NetworkId.TESTNET_GOERLI]: {
     name: "Goerli",
     token: "MAINNET",
@@ -244,12 +253,16 @@ export const BRIDGE_CHAINS = {
 export const BRIDGEABLE_CHAINS = {
   [NetworkId.MAINNET]: {
     defaultRecChain: NetworkId.ARBITRUM,
-    availableChains: [NetworkId.ARBITRUM],
+    availableChains: [NetworkId.ARBITRUM, NetworkId.BASE],
   },
   [NetworkId.ARBITRUM]: {
     defaultRecChain: NetworkId.MAINNET,
     availableChains: [NetworkId.MAINNET],
   },
+  [NetworkId.BASE]: {
+    defaultRecChain: NetworkId.MAINNET,
+    availableChains: [NetworkId.MAINNET],
+  },
   [NetworkId.TESTNET_GOERLI]: {
     defaultRecChain: NetworkId.ARBITRUM_GOERLI,
     availableChains: [NetworkId.ARBITRUM_GOERLI],

diff --git a/src/helpers/environment/Environment/Environment.ts b/src/helpers/environment/Environment/Environment.ts
@@ -126,6 +126,16 @@ export class Environment {
           key: `VITE_BOBA_TESTNET_NODE_URL`,
           fallback: "https://rinkeby.boba.network/",
         });
+      case NetworkId.BASE:
+        return this._get({
+          key: `VITE_BASE_NODE_URL`,
+          fallback: "https://rpc.ankr.com/base",
+        });
+      case NetworkId.BASE_TESTNET:
+        return this._get({
+          key: `VITE_BASE_TESTNET_NODE_URL`,
+          fallback: "https://sepolia.base.org",
+        });
     }
   };
 }
diff --git a/src/hooks/useTestableNetworks.ts b/src/hooks/useTestableNetworks.ts
@@ -20,5 +20,6 @@ export const useTestableNetworks = () => {
     ARBITRUM: getTestnet(NetworkId.ARBITRUM, NetworkId.ARBITRUM_GOERLI, chain.id),
     POLYGON: getTestnet(NetworkId.POLYGON, NetworkId.POLYGON_TESTNET, chain.id),
     FANTOM: getTestnet(NetworkId.FANTOM, NetworkId.FANTOM_TESTNET, chain.id),
+    BASE: getTestnet(NetworkId.BASE, NetworkId.BASE_TESTNET, chain.id),
   };
 };
diff --git a/src/hooks/wagmi.ts b/src/hooks/wagmi.ts
@@ -55,6 +55,50 @@ export const { chains, provider, webSocketProvider } = configureChains(
     {
       ...fantom,
     },
+    {
+      id: 8453,
+      name: "Base",
+      network: "base",
+      iconUrl: "/assets/images/base.svg",
+      nativeCurrency: { name: "Ether", symbol: "ETH", decimals: 18 },
+      rpcUrls: {
+        default: {
+          http: ["https://rpc.ankr.com/base"],
+        },
+        public: {
+          http: ["https://rpc.ankr.com/base"],
+        },
+      },
+      blockExplorers: {
+        default: {
+          name: "Basescan",
+          url: "https://basescan.org",
+        },
+      },
+      contracts: {
+        l2OutputOracle: {
+          [1]: {
+            address: "0x56315b90c40730925ec5485cf004d835058518A0",
+          },
+        },
+        multicall3: {
+          address: "0xca11bde05977b3631167028862be2a173976ca11",
+          blockCreated: 5022,
+        },
+        portal: {
+          [1]: {
+            address: "0x49048044D57e1C92A77f79988d21Fa8fAF74E97e",
+            blockCreated: 17482143,
+          },
+        },
+        l1StandardBridge: {
+          [1]: {
+            address: "0x3154Cf16ccdb4C6d922629664174b904d80F2C35",
+            blockCreated: 17482143,
+          },
+        },
+      },
+    },
     goerli,
     arbitrumGoerli,
   ],

diff --git a/src/networkDetails.ts b/src/networkDetails.ts
@@ -2,6 +2,9 @@ export enum NetworkId {
   MAINNET = 1,
   TESTNET_GOERLI = 5,
 
+  BASE = 8453,
+  BASE_TESTNET = 84532,
+
   ARBITRUM = 42161,
   ARBITRUM_GOERLI = 421613,
 

diff --git a/src/views/Bridge/components/BridgeInputArea.tsx b/src/views/Bridge/components/BridgeInputArea.tsx
@@ -1,4 +1,4 @@
-import { Typography, useTheme } from "@mui/material";
+import { Avatar, Typography, useTheme } from "@mui/material";
 import { Box } from "@mui/system";
 import { Icon, OHMTokenProps, PrimaryButton, SwapCard, SwapCollection, Token } from "@olympusdao/component-library";
 import { ConnectButton as RainbowConnectButton } from "@rainbow-me/rainbowkit";
@@ -40,6 +40,10 @@ export const BridgeInputArea = () => {
     if (bridgeMutation.isSuccess) setConfirmOpen(false);
   }, [bridgeMutation.isSuccess]);
 
+  useEffect(() => {
+    setReceivingChain(chainDefaults?.defaultRecChain || 1);
+  }, [chain.id]);
+
   return (
     <Box display="flex" flexDirection="column">
       <Box display="flex" flexDirection="row" width="100%" justifyContent="center" mt="24px">
@@ -50,10 +54,14 @@ export const BridgeInputArea = () => {
                 <SwapCard
                   id="from"
                   token={
-                    <Token
-                      name={BRIDGE_CHAINS[chain.id as keyof typeof BRIDGE_CHAINS].token as OHMTokenProps["name"]}
-                      sx={{ width: "21px", height: "21px" }}
-                    />
+                    BRIDGE_CHAINS[chain.id as keyof typeof BRIDGE_CHAINS].token === "BASE" ? (
+                      <Avatar src="/assets/images/base.svg" sx={{ width: "20px", height: "20px" }} />
+                    ) : (
+                      <Token
+                        name={BRIDGE_CHAINS[chain.id as keyof typeof BRIDGE_CHAINS].token as OHMTokenProps["name"]}
+                        sx={{ width: "21px", height: "21px" }}
+                      />
+                    )
                   }
                   tokenName={BRIDGE_CHAINS[chain.id as keyof typeof BRIDGE_CHAINS].name}
                   tokenOnClick={() => setSendChainOpen(true)}
@@ -70,10 +78,16 @@ export const BridgeInputArea = () => {
                 <SwapCard
                   id="to"
                   token={
-                    <Token
-                      name={BRIDGE_CHAINS[receivingChain as keyof typeof BRIDGE_CHAINS].token as OHMTokenProps["name"]}
-                      sx={{ width: "21px", height: "21px" }}
-                    />
+                    BRIDGE_CHAINS[receivingChain as keyof typeof BRIDGE_CHAINS].token === "BASE" ? (
+                      <Avatar src="/assets/images/base.svg" sx={{ width: "20px", height: "20px" }} />
+                    ) : (
+                      <Token
+                        name={
+                          BRIDGE_CHAINS[receivingChain as keyof typeof BRIDGE_CHAINS].token as OHMTokenProps["name"]
+                        }
+                        sx={{ width: "21px", height: "21px" }}
+                      />
+                    )
                   }
                   tokenName={BRIDGE_CHAINS[receivingChain as keyof typeof BRIDGE_CHAINS].name}
                   tokenOnClick={() => setRecChainOpen(true)}
@@ -109,8 +123,8 @@ export const BridgeInputArea = () => {
                   {bridgeMutation.isLoading
                     ? "Bridging..."
                     : Number(amount) > 0
-                    ? "Bridge"
-                    : "Enter an amount to bridge"}
+                      ? "Bridge"
+                      : "Enter an amount to bridge"}
                 </PrimaryButton>
               </TokenAllowanceGuard>
             </WalletConnectedGuard>

diff --git a/src/views/Bridge/components/ChainPickerModal.tsx b/src/views/Bridge/components/ChainPickerModal.tsx
@@ -1,4 +1,4 @@
-import { Box, Typography, useTheme } from "@mui/material";
+import { Avatar, Box, Typography, useTheme } from "@mui/material";
 import { Icon, Modal, OHMTokenProps, Token } from "@olympusdao/component-library";
 import { BRIDGE_CHAINS } from "src/constants/addresses";
 import { NetworkId } from "src/networkDetails";
@@ -77,7 +77,11 @@ export const ChainPickerModal = ({
                 }}
               >
                 <Box display="flex" gap={1} alignItems="center">
-                  <Token name={chain.token as OHMTokenProps["name"]} />
+                  {chain.token === "BASE" ? (
+                    <Avatar src="/assets/images/base.svg" sx={{ width: "36px", height: "36px" }} />
+                  ) : (
+                    <Token name={chain.token as OHMTokenProps["name"]} />
+                  )}
                   <Typography variant="body1" sx={{ fontWeight: "400" }}>
                     {chain.name && chain.name}
                   </Typography>

diff --git a/src/views/Bridge/helpers/index.ts b/src/views/Bridge/helpers/index.ts
@@ -23,6 +23,9 @@ export const useBridgeableTestableNetwork = () => {
   const { chain = { id: 1 } } = useNetwork();
   const networks = useTestableNetworks();
   switch (chain.id) {
+    case NetworkId.BASE:
+    case NetworkId.BASE_TESTNET:
+      return networks.BASE;
     case NetworkId.ARBITRUM_GOERLI:
     case NetworkId.ARBITRUM:
       return networks.ARBITRUM;
@@ -47,6 +50,8 @@ export const layerZeroChainIdsFromEVM = ({ evmChainId }: { evmChainId: number })
       return 110;
     case NetworkId.OPTIMISM:
       return 111;
+    case NetworkId.BASE:
+      return 184;
     case NetworkId.MAINNET:
     default:
       return 101;

diff --git a/src/views/Bridge/index.tsx b/src/views/Bridge/index.tsx
@@ -66,7 +66,9 @@ const Bridge = () => {
 
   const isSmallScreen = useMediaQuery("(max-width: 705px)");
   const { chain = { id: 1, name: "Mainnet" } } = useNetwork();
+
   const { data: transferEvents } = useGetBridgeTransferredEvents(chain.id);
+
   const gohmBalances = useGohmBalance();
   const gohmTokens = [
     // gohmBalances[networks.MAINNET].data,