base support

Author: evan-gray

package-lock.json

@@ -3,11 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@certusone/wormhole-sdk": "^0.9.4",
-    "@injectivelabs/sdk-ts": "^1.0.211",
-    "@injectivelabs/ts-types": "^1.0.14",
-    "@injectivelabs/tx-ts": "^1.0.43",
-    "@injectivelabs/wallet-ts": "^1.0.185",
+    "@certusone/wormhole-sdk": "^0.9.11",
+    "@injectivelabs/sdk-ts": "^1.0.368",
+    "@injectivelabs/ts-types": "^1.0.27",
+    "@injectivelabs/wallet-ts": "^1.0.346",
     "@manahippo/aptos-wallet-adapter": "^1.0.2",
     "@material-ui/core": "^4.12.2",
     "@material-ui/icons": "^4.11.2",

package.json

@@ -21,6 +21,7 @@ import {
   CHAIN_ID_APTOS,
   CHAIN_ID_ARBITRUM,
   CHAIN_ID_INJECTIVE,
+  CHAIN_ID_BASE,
 } from "@certusone/wormhole-sdk";
 import { Button, makeStyles, Typography } from "@material-ui/core";
 import { Transaction } from "../store/transferSlice";
@@ -121,6 +122,10 @@ export default function ShowTx({
       ? `https://${CLUSTER === "testnet" ? "moonbase." : ""}moonscan.io/tx/${
           tx?.id
         }`
+      : chainId === CHAIN_ID_BASE
+      ? `https://${CLUSTER === "testnet" ? "goerli." : ""}basescan.org/tx/${
+          tx?.id
+        }`
       : chainId === CHAIN_ID_XPLA
       ? `https://explorer.xpla.io/${
           CLUSTER === "testnet" ? "testnet/" : ""

src/components/ShowTx.tsx

@@ -24,6 +24,7 @@ import {
   CHAIN_ID_INJECTIVE,
   terra,
   CHAIN_ID_NEAR,
+  CHAIN_ID_BASE,
 } from "@certusone/wormhole-sdk";
 import { Button, makeStyles, Tooltip, Typography } from "@material-ui/core";
 import { FileCopy, OpenInNew } from "@material-ui/icons";
@@ -155,6 +156,10 @@ export default function SmartAddress({
     ? `https://${CLUSTER === "testnet" ? "moonbase." : ""}moonscan.io/${
         isAsset ? "token" : "address"
       }/${useableAddress}`
+    : chainId === CHAIN_ID_BASE
+    ? `https://${CLUSTER === "testnet" ? "goerli." : ""}basescan.org/${
+        isAsset ? "token" : "address"
+      }/${useableAddress}`
     : chainId === CHAIN_ID_KARURA
     ? `https://${
         CLUSTER === "testnet"

src/components/SmartAddress.tsx

@@ -3,6 +3,7 @@ import {
   CHAIN_ID_ACALA,
   CHAIN_ID_ARBITRUM,
   CHAIN_ID_AURORA,
+  CHAIN_ID_BASE,
   CHAIN_ID_CELO,
   CHAIN_ID_FANTOM,
   CHAIN_ID_KARURA,
@@ -97,6 +98,8 @@ export default function TransactionProgress({
       ? 32
       : chainId === CHAIN_ID_ARBITRUM
       ? 64 // something to show progress
+      : chainId === CHAIN_ID_BASE
+      ? 124 // something to show progress
       : isEVMChain(chainId)
       ? 15
       : 1;
@@ -116,6 +119,8 @@ export default function TransactionProgress({
         <Typography variant="body2" className={classes.message}>
           {chainId === CHAIN_ID_ARBITRUM
             ? `Waiting for Ethereum finality on Arbitrum block ${tx?.block}` //TODO: more advanced finality checking for Arbitrum
+            : chainId === CHAIN_ID_BASE
+            ? `Waiting for Ethereum finality on Base block ${tx?.block}` //TODO: more advanced finality checking for Base
             : blockDiff < expectedBlocks
             ? `Waiting for ${blockDiff} / ${expectedBlocks} confirmations on ${CHAINS_BY_ID[chainId].name}...`
             : `Waiting for Wormhole Network consensus...`}

src/components/TransactionProgress.tsx

@@ -418,7 +418,7 @@ async function injective(
       msg,
       "Wormhole - Create Wrapped"
     );
-    dispatch(setCreateTx({ id: tx.txhash, block: tx.height }));
+    dispatch(setCreateTx({ id: tx.txHash, block: tx.height }));
     enqueueSnackbar(null, {
       content: <Alert severity="success">Transaction confirmed</Alert>,
     });

src/hooks/useHandleCreateWrapped.tsx

@@ -374,7 +374,7 @@ async function injective(
       msg,
       "Wormhole - Complete Transfer"
     );
-    dispatch(setRedeemTx({ id: tx.txhash, block: tx.height }));
+    dispatch(setRedeemTx({ id: tx.txHash, block: tx.height }));
     enqueueSnackbar(null, {
       content: <Alert severity="success">Transaction confirmed</Alert>,
     });

src/hooks/useHandleRedeem.tsx

@@ -637,7 +637,7 @@ async function injective(
       msgs,
       "Wormhole - Initiate Transfer"
     );
-    dispatch(setTransferTx({ id: tx.txhash, block: tx.height }));
+    dispatch(setTransferTx({ id: tx.txHash, block: tx.height }));
     enqueueSnackbar(null, {
       content: <Alert severity="success">Transaction confirmed</Alert>,
     });

src/hooks/useHandleTransfer.tsx

@@ -6,6 +6,7 @@ import {
   CHAIN_ID_ARBITRUM,
   CHAIN_ID_AURORA,
   CHAIN_ID_AVAX,
+  CHAIN_ID_BASE,
   CHAIN_ID_BSC,
   CHAIN_ID_CELO,
   CHAIN_ID_ETH,
@@ -37,6 +38,7 @@ import aptosIcon from "../icons/aptos.svg";
 import arbitrumIcon from "../icons/arbitrum.svg";
 import auroraIcon from "../icons/aurora.svg";
 import avaxIcon from "../icons/avax.svg";
+import baseIcon from "../icons/base.svg";
 import bscIcon from "../icons/bsc.svg";
 import celoIcon from "../icons/celo.svg";
 import ethIcon from "../icons/eth.svg";
@@ -54,7 +56,6 @@ import xplaIcon from "../icons/xpla.svg";
 import injectiveIcon from "../icons/injective.svg";
 import { AptosNetwork } from "./aptos";
 import { getNetworkInfo, Network } from "@injectivelabs/networks";
-import { ChainId as InjectiveChainId } from "@injectivelabs/ts-types";
 import nearIcon from "../icons/near.svg";
 import { ConnectConfig, keyStores } from "near-api-js";
 
@@ -101,6 +102,11 @@ export const CHAINS: ChainInfo[] =
           name: "Avalanche",
           logo: avaxIcon,
         },
+        {
+          id: CHAIN_ID_BASE,
+          name: "Base Goerli",
+          logo: baseIcon,
+        },
         {
           id: CHAIN_ID_BSC,
           name: "Binance Smart Chain",
@@ -240,7 +246,8 @@ export const CHAINS_WITH_NFT_SUPPORT = CHAINS.filter(
     id === CHAIN_ID_CELO ||
     id === CHAIN_ID_NEON ||
     id === CHAIN_ID_ARBITRUM ||
-    id === CHAIN_ID_MOONBEAM
+    id === CHAIN_ID_MOONBEAM ||
+    id === CHAIN_ID_BASE
 );
 export type ChainsById = { [key in ChainId]: ChainInfo };
 export const CHAINS_BY_ID: ChainsById = CHAINS.reduce((obj, chain) => {
@@ -290,6 +297,8 @@ export const getDefaultNativeCurrencySymbol = (chainId: ChainId) =>
     ? "ETH"
     : chainId === CHAIN_ID_MOONBEAM
     ? "GLMR"
+    : chainId === CHAIN_ID_BASE
+    ? "ETH"
     : "";
 
 export const getDefaultNativeCurrencyAddressEvm = (chainId: ChainId) => {
@@ -347,6 +356,8 @@ export const getExplorerName = (chainId: ChainId) =>
     ? "Arbiscan"
     : chainId === CHAIN_ID_MOONBEAM
     ? "Moonscan"
+    : chainId === CHAIN_ID_BASE
+    ? "BaseScan"
     : "Explorer";
 export const WORMHOLE_RPC_HOSTS =
   CLUSTER === "testnet"
@@ -367,6 +378,7 @@ export const CELO_NETWORK_CHAIN_ID = CLUSTER === "testnet" ? 44787 : 1381;
 export const NEON_NETWORK_CHAIN_ID = CLUSTER === "testnet" ? 245022926 : 1381;
 export const ARBITRUM_NETWORK_CHAIN_ID = CLUSTER === "testnet" ? 421613 : 1381;
 export const MOONBEAM_NETWORK_CHAIN_ID = CLUSTER === "testnet" ? 1287 : 1381;
+export const BASE_NETWORK_CHAIN_ID = CLUSTER === "testnet" ? 84531 : 1381;
 export const getEvmChainId = (chainId: ChainId) =>
   chainId === CHAIN_ID_ETH
     ? ETH_NETWORK_CHAIN_ID
@@ -396,6 +408,8 @@ export const getEvmChainId = (chainId: ChainId) =>
     ? ARBITRUM_NETWORK_CHAIN_ID
     : chainId === CHAIN_ID_MOONBEAM
     ? MOONBEAM_NETWORK_CHAIN_ID
+    : chainId === CHAIN_ID_BASE
+    ? BASE_NETWORK_CHAIN_ID
     : undefined;
 export const SOLANA_HOST = process.env.REACT_APP_SOLANA_API_URL
   ? process.env.REACT_APP_SOLANA_API_URL
@@ -445,8 +459,8 @@ export const APTOS_NETWORK =
 export const APTOS_NATIVE_DECIMALS = 8;
 export const APTOS_NATIVE_TOKEN_KEY = "0x1::aptos_coin::AptosCoin";
 
-export const INJECTIVE_NETWORK = getNetworkInfo(Network.TestnetK8s);
-export const INJECTIVE_NETWORK_CHAIN_ID = InjectiveChainId.Testnet;
+export const INJECTIVE_NETWORK = Network.TestnetK8s;
+export const INJECTIVE_NETWORK_INFO = getNetworkInfo(Network.TestnetK8s);
 
 export const ALGORAND_HOST =
   CLUSTER === "testnet"
@@ -528,6 +542,8 @@ export const COVALENT_ARBITRUM =
 
 export const COVALENT_MOONBEAM =
   CLUSTER === "devnet" ? null : MOONBEAM_NETWORK_CHAIN_ID; // Covalent only supports mainnet
+export const COVALENT_BASE =
+  CLUSTER === "devnet" ? null : BASE_NETWORK_CHAIN_ID;
 
 export const COVALENT_GET_TOKENS_URL = (
   chainId: ChainId,
@@ -556,6 +572,8 @@ export const COVALENT_GET_TOKENS_URL = (
       ? COVALENT_ARBITRUM
       : chainId === CHAIN_ID_MOONBEAM
       ? COVALENT_MOONBEAM
+      : chainId === CHAIN_ID_BASE
+      ? COVALENT_BASE
       : "";
   // https://www.covalenthq.com/docs/api/#get-/v1/{chain_id}/address/{address}/balances_v2/
   return chainNum

src/icons/base.svg

@@ -6,20 +6,20 @@ import {
   TxGrpcClient,
 } from "@injectivelabs/sdk-ts";
 import { MsgBroadcaster, WalletStrategy } from "@injectivelabs/wallet-ts";
-import { INJECTIVE_NETWORK, INJECTIVE_NETWORK_CHAIN_ID } from "./consts";
+import { INJECTIVE_NETWORK, INJECTIVE_NETWORK_INFO } from "./consts";
 
 export const NATIVE_INJECTIVE_DECIMALS = 18;
 
 export const INJECTIVE_NATIVE_DENOM = "inj";
 
 export const getInjectiveWasmClient = () =>
-  new ChainGrpcWasmApi(INJECTIVE_NETWORK.sentryGrpcApi);
+  new ChainGrpcWasmApi(INJECTIVE_NETWORK_INFO.grpc);
 
 export const getInjectiveBankClient = () =>
-  new ChainGrpcBankApi(INJECTIVE_NETWORK.sentryGrpcApi);
+  new ChainGrpcBankApi(INJECTIVE_NETWORK_INFO.grpc);
 
 export const getInjectiveTxClient = () =>
-  new TxGrpcClient(INJECTIVE_NETWORK.sentryGrpcApi);
+  new TxGrpcClient(INJECTIVE_NETWORK_INFO.grpc);
 
 export const isValidInjectiveAddress = (address: string) => {
   if (isNativeDenomInjective(address)) {
@@ -45,22 +45,19 @@ export const broadcastInjectiveTx = async (
   memo: string = ""
 ) => {
   const client = getInjectiveTxClient();
+  const network = INJECTIVE_NETWORK;
   const broadcaster = new MsgBroadcaster({
-    endpoints: {
-      indexerApi: INJECTIVE_NETWORK.indexerApi,
-      sentryGrpcApi: INJECTIVE_NETWORK.sentryGrpcApi,
-      sentryHttpApi: INJECTIVE_NETWORK.sentryHttpApi,
-    },
-    chainId: INJECTIVE_NETWORK_CHAIN_ID,
+    network,
     walletStrategy,
     simulateTx: true,
   });
-  const txHash = await broadcaster.broadcast({
+  const txResponse = await broadcaster.broadcast({
+    //@ts-ignore
     msgs,
     address: walletAddress,
     memo,
   });
-  const tx = await client.fetchTx(txHash);
+  const tx = await client.fetchTxPoll(txResponse.txHash);
   if (!tx) {
     throw new Error("Unable to fetch transaction");
   }

src/utils/consts.ts

@@ -125,6 +125,13 @@ export const METAMASK_CHAIN_PARAMETERS: {
     rpcUrls: ["https://rpc.api.moonbase.moonbeam.network"],
     blockExplorerUrls: ["https://moonbase.moonscan.io"],
   },
+  84531: {
+    chainId: "0x14A33",
+    chainName: "Base Goerli",
+    nativeCurrency: { name: "Ether", symbol: "ETH", decimals: 18 },
+    rpcUrls: ["https://goerli.base.org"],
+    blockExplorerUrls: ["https://goerli.basescan.org"],
+  },
 };
 
 export interface EvmRpcMap {