UmbraJs and frontend support for Base network

frontend/.env.example

@@ -14,6 +14,7 @@ OPTIMISM_RPC_URL=yourRpcUrlHere
 GNOSIS_CHAIN_RPC_URL=yourRpcUrlHere
 ARBITRUM_ONE_RPC_URL=yourRpcUrlHere
 SEPOLIA_RPC_URL=yourSepoliaRpcUrl
+BASE_RPC_URL=yourBaseRpcUrl
 WALLET_CONNECT_PROJECT_ID=yourId
 
 LOG_LEVEL=DEBUG

frontend/src/components/AccountReceiveTableWithdrawConfirmation.vue

@@ -61,7 +61,7 @@
           <!-- Custom fees not allowed on L2s, since gas price is affected by
           both L1 and L2 costs, so users will likely not estimate it properly -->
           <q-icon
-            v-if="isNativeToken && loaded && ![10, 42161].includes(chainId)"
+            v-if="isNativeToken && loaded && ![10, 8453, 42161].includes(chainId)"
             @click="toggleCustomFee"
             class="cursor-pointer"
             color="primary"
@@ -220,9 +220,9 @@ export default defineComponent({
         const from = propsRef.activeAnnouncement.value.receiver;
         const to = await toAddress(propsRef.destinationAddress.value, provider.value!);
 
-        // On Optimism, we use Umbra's getEthSweepGasInfo method to ensure L1 fees are accounted for.
+        // On Optimism or Base, we use Umbra's getEthSweepGasInfo method to ensure L1 fees are accounted for.
         // Otherwise we use the standard gasPrice * gasLimit as the default.
-        if (network.value?.chainId === 10) {
+        if (network.value?.chainId === 10 || network.value?.chainId === 8453) {
           const { getEthSweepGasInfo } = umbraUtils;
           const sweepGasInfo = await getEthSweepGasInfo(from, to, provider.value!);
           gasLimit.value = sweepGasInfo.gasLimit;

frontend/src/components/models.ts

@@ -10,6 +10,7 @@ import {
   SEPOLIA_RPC_URL,
   ARBITRUM_ONE_RPC_URL,
   GNOSIS_CHAIN_RPC_URL,
+  BASE_RPC_URL,
 } from 'src/utils/constants';
 
 export type { TokenList, TokenInfo } from '@uniswap/token-lists/dist/types';
@@ -123,6 +124,21 @@ export const supportedChains: Array<Chain> = [
     iconUrls: ['/networks/polygon.svg'],
     logoURI: '/networks/polygon.svg',
   },
+  {
+    chainId: '0x2105', // 8453 as hex
+    chainName: 'Base',
+    nativeCurrency: {
+      address: NATIVE_TOKEN_ADDRESS,
+      name: 'Ether',
+      symbol: 'ETH',
+      decimals: 18,
+      logoURI: ETH_NETWORK_LOGO,
+    },
+    rpcUrls: ['https://mainnet.base.org', BASE_RPC_URL],
+    blockExplorerUrls: ['https://basescan.org'],
+    iconUrls: ['/networks/base.svg'],
+    logoURI: '/networks/base.svg',
+  },
   {
     chainId: '0xa4b1', // 42161 as hex
     chainName: 'Arbitrum One',
@@ -141,7 +157,7 @@ export const supportedChains: Array<Chain> = [
 ];
 
 // Set comprised of intersection of Chain IDs present for all contracts in src/contracts, supported by umbra-js, and by relayer
-export type SupportedChainId = '1' | '10' | '100' | '137' | '42161' | '11155111'; // strings for indexing into JSON files
+export type SupportedChainId = '1' | '10' | '100' | '137' | '8453' | '42161' | '11155111'; // strings for indexing into JSON files
 export const supportedChainIds = supportedChains.map((chain) => Number(chain.chainId)); // numbers for verifying the chainId user is connected to
 
 // CNS names owned by wallet are queried from The Graph, so these types help parse the response

frontend/src/pages/AccountSend.vue

@@ -573,7 +573,7 @@ function useSendForm() {
   // Batch Send Form Parameters
   const batchSends = ref<BatchSendData[]>([]);
   const tab = ref('send');
-  const batchSendSupportedChains = [1, 10, 100, 137, 42161, 11155111];
+  const batchSendSupportedChains = [1, 10, 100, 137, 8453, 42161, 11155111];
   const batchSendIsSupported = ref(false);
 
   // Computed form parameters.

frontend/src/utils/constants.ts

@@ -8,6 +8,7 @@ export const OPTIMISM_RPC_URL = String(process.env.OPTIMISM_RPC_URL);
 export const ARBITRUM_ONE_RPC_URL = String(process.env.ARBITRUM_ONE_RPC_URL);
 export const SEPOLIA_RPC_URL = String(process.env.SEPOLIA_RPC_URL);
 export const GNOSIS_CHAIN_RPC_URL = String(process.env.GNOSIS_CHAIN_RPC_URL);
+export const BASE_RPC_URL = String(process.env.BASE_RPC_URL);
 
 console.log(`MAINNET_RPC_URL ${MAINNET_RPC_URL}`);
 

umbra-js/.env.example

@@ -10,3 +10,5 @@ GNOSIS_CHAIN_RPC_URL=yourGnosisChainRpcUrl
 POLYGON_RPC_URL=yourPolygonRpcUrl
 ARBITRUM_ONE_RPC_URL=yourArbitrumOneRpcUrl
 SEPOLIA_RPC_URL=yourSepoliaRpcUrl
+BASE_RPC_URL=yourBaseRpcUrl
+

umbra-js/src/classes/Umbra.ts

@@ -46,6 +46,7 @@ const subgraphs = {
   10: 'https://api.goldsky.com/api/public/project_clfmn098ebuoc3svybn2l2tvp/subgraphs/umbra-optimism/v1.1.0/gn',
   100: 'https://api.goldsky.com/api/public/project_clfmn098ebuoc3svybn2l2tvp/subgraphs/umbra-xdai/v1.1.0/gn',
   137: 'https://api.goldsky.com/api/public/project_clfmn098ebuoc3svybn2l2tvp/subgraphs/umbra-polygon/v1.1.0/gn',
+  8453: 'https://api.goldsky.com/api/public/project_clfmn098ebuoc3svybn2l2tvp/subgraphs/umbra-base/v1.1.0/gn',
   42161: 'https://api.goldsky.com/api/public/project_clfmn098ebuoc3svybn2l2tvp/subgraphs/umbra-arbitrum-one/v1.1.0/gn',
   11155111: 'https://api.goldsky.com/api/public/project_clfmn098ebuoc3svybn2l2tvp/subgraphs/umbra-sepolia/v1.1.0/gn',
 };
@@ -56,6 +57,7 @@ const chainConfigs: Record<number, ChainConfig> = {
   100: { chainId: 100, umbraAddress, batchSendAddress, startBlock: 28237950, subgraphUrl: subgraphs[100] }, // Gnosis Chain
   137: { chainId: 137, umbraAddress, batchSendAddress, startBlock: 20717318, subgraphUrl: subgraphs[137] }, // Polygon
   1337: { chainId: 1337, umbraAddress, batchSendAddress, startBlock: 8505089, subgraphUrl: false }, // Local
+  8453: { chainId: 8453, umbraAddress, batchSendAddress, startBlock: 0, subgraphUrl: subgraphs[8453] }, // Base
   42161: { chainId: 42161, umbraAddress, batchSendAddress, startBlock: 7285883, subgraphUrl: subgraphs[42161] }, // Arbitrum
   11155111: {
     chainId: 11155111,
@@ -128,6 +130,7 @@ const rpcUrlFromChain = (chainId: BigNumberish) => {
   if (chainId === 10) return String(process.env.OPTIMISM_RPC_URL);
   if (chainId === 100) return String(process.env.GNOSIS_CHAIN_RPC_URL);
   if (chainId === 137) return String(process.env.POLYGON_RPC_URL);
+  if (chainId === 8453) return String(process.env.BASE_RPC_URL);
   if (chainId === 42161) return String(process.env.ARBITRUM_ONE_RPC_URL);
   if (chainId === 11155111) return String(process.env.SEPOLIA_RPC_URL);
   throw new Error(`No RPC URL for chainId ${chainId}.`);
@@ -492,6 +495,7 @@ export class Umbra {
     const errMsg = (network: string) => `Cannot fetch Announcements from logs on ${network}, please try again later`;
     if (this.chainConfig.chainId === 10) throw new Error(errMsg('Optimism'));
     if (this.chainConfig.chainId === 137) throw new Error(errMsg('Polygon'));
+    if (this.chainConfig.chainId === 10) throw new Error(errMsg('Base'));
 
     // Get list of all Announcement events
     const announcementFilter = this.umbraContract.filters.Announcement(null, null, null, null, null);
@@ -809,10 +813,10 @@ async function tryEthWithdraw(
       throw new Error('Stealth address ETH balance is not enough to pay for withdrawal gas cost');
     }
 
-    // If on Optimism, reduce the value sent to add margin for the variable L1 gas costs. The margin added is
+    // If on Optimismj or Base, reduce the value sent to add margin for the variable L1 gas costs. The margin added is
     // proportional to the retryCount, i.e. the more retries, the more margin is added, capped at 20% added cost
     let adjustedValue = ethToSend;
-    if (chainId === 10) {
+    if (chainId === 10 || chainId === 8453) {
       const costWithMargin = txCost.mul(100 + Math.min(retryCount, 20)).div(100);
       adjustedValue = adjustedValue.sub(costWithMargin);
     }