Add Tangle EVM Testnet and update contract addresses (#1473)

Co-authored-by: AtelyPham <[email protected]>

.env.example

@@ -14,6 +14,7 @@ NOTION_API_KEY="<NOTION_API_KEY>"
 
 # Faucet DApp
 NEXT_PUBLIC_AMOUNT="20"
+NEXT_PUBLIC_NATIVE_AMOUNT="0.5"
 NEXT_PUBLIC_FAUCET_BACKEND_URL="http://127.0.0.1:8000"
 NEXT_PUBLIC_TWITTER_CLIENT_ID="<YOUR_TWITTER_CLIENT_ID>"
 TWITTER_CLIENT_SECRET="<YOUR_TWITTER_CLIENT_SECRET>"

apps/bridge-dapp/src/index.tsx

@@ -1,7 +1,7 @@
 import './styles.css';
 import '@webb-tools/webb-ui-components/tailwind.css';
 import * as Sentry from '@sentry/react';
-import { BrowserTracing } from '@sentry/tracing';
+import { BrowserTracing } from '@sentry/browser';
 import { createRoot } from 'react-dom/client';
 
 import App from './App';

apps/faucet/src/components/TokenDropdown.tsx

@@ -1,4 +1,5 @@
 import { RadioGroup, RadioItem } from '@radix-ui/react-dropdown-menu';
+import { ZERO_BIG_INT } from '@webb-tools/dapp-config/constants';
 import { TokenIcon } from '@webb-tools/icons';
 import {
   Dropdown,
@@ -12,10 +13,11 @@ import { useObservableState } from 'observable-hooks';
 import React, { useCallback, useEffect, useMemo } from 'react';
 import { map } from 'rxjs';
 
+import constants from '../config/shared';
 import { useFaucetContext } from '../provider';
 
 const TokenDropdown = () => {
-  const { config, inputValues$ } = useFaucetContext();
+  const { config, inputValues$, amount$ } = useFaucetContext();
 
   const token = useObservableState(
     inputValues$.pipe(map((inputValues) => inputValues.token))
@@ -24,13 +26,21 @@ const TokenDropdown = () => {
   const setToken = useCallback(
     (token: string | undefined, contractAddress?: string) => {
       const currentVal = inputValues$.getValue();
+
+      // If the contract address is 0, then we are using the native token
+      if (contractAddress && BigInt(contractAddress) === ZERO_BIG_INT) {
+        amount$.next(constants.nativeAmount);
+      } else if (contractAddress) {
+        amount$.next(constants.amount);
+      }
+
       inputValues$.next({
         ...currentVal,
         contractAddress,
         token,
       });
     },
-    [inputValues$]
+    [amount$, inputValues$]
   );
 
   const selectedChain = useObservableState(

apps/faucet/src/config/shared.ts

@@ -11,6 +11,10 @@ const amount = process.env.NEXT_PUBLIC_AMOUNT
   ? +process.env.NEXT_PUBLIC_AMOUNT
   : 20;
 
+const nativeAmount = process.env.NEXT_PUBLIC_NATIVE_AMOUNT
+  ? +process.env.NEXT_PUBLIC_NATIVE_AMOUNT
+  : 0.5;
+
 const twitterClientId = process.env.NEXT_PUBLIC_TWITTER_CLIENT_ID || '';
 if (!twitterClientId) {
   throw FaucetError.from(FaucetErrorCode.MISSING_ENV_VAR, {
@@ -21,6 +25,7 @@ if (!twitterClientId) {
 const config = {
   amount,
   faucetBackendUrl,
+  nativeAmount,
   twitterClientId,
 };
 

apps/faucet/src/config/tokens.ts

@@ -1,18 +1,26 @@
 import { PresetTypedChainId } from '@webb-tools/dapp-types/ChainId';
+import { zeroAddress } from 'viem';
 
 // Record of token symbol to token address
 type TokenConfigType = Record<string, string>;
 
 // TODO: We should fetch the token info (e.g. symbol, decimals, name, ...) from the chain
 const tokens: Record<string, TokenConfigType> = {
   [PresetTypedChainId.AthenaOrbit]: {
-    webbWETH: '0x915EbFAd9c4Af2F420782a5F03BD544f9a1FF1d1',
+    ETH: zeroAddress,
+    webbtTNT: '0x6aBC6e8E4E4a1fcB43341CeC49cBd5FA3b494520',
   },
   [PresetTypedChainId.HermesOrbit]: {
-    webbWETH: '0x915EbFAd9c4Af2F420782a5F03BD544f9a1FF1d1',
+    ETH: zeroAddress,
+    webbtTNT: '0x6aBC6e8E4E4a1fcB43341CeC49cBd5FA3b494520',
   },
   [PresetTypedChainId.DemeterOrbit]: {
-    webbWETH: '0x915EbFAd9c4Af2F420782a5F03BD544f9a1FF1d1',
+    ETH: zeroAddress,
+    webbtTNT: '0x6aBC6e8E4E4a1fcB43341CeC49cBd5FA3b494520',
+  },
+  [PresetTypedChainId.TangleTestnet]: {
+    tTNT: zeroAddress,
+    webbtTNT: '0x6aBC6e8E4E4a1fcB43341CeC49cBd5FA3b494520',
   },
 };
 

apps/faucet/src/containers/InputsContainer.tsx

@@ -1,4 +1,5 @@
 import { chainsConfig } from '@webb-tools/dapp-config/chains/chain-config';
+import { ZERO_BIG_INT } from '@webb-tools/dapp-config/constants';
 import { ExternalLinkLine } from '@webb-tools/icons';
 import {
   Button,
@@ -79,10 +80,12 @@ const InputWrapper = ({
 };
 
 const AmountChip = () => {
-  const { amount, inputValues$ } = useFaucetContext();
+  const { amount$, inputValues$ } = useFaucetContext();
 
   const [getStore] = useStore();
 
+  const amount = useObservableState(amount$);
+
   const token = useObservableState(
     inputValues$.pipe(map((inputValues) => inputValues.token))
   );
@@ -92,6 +95,14 @@ const AmountChip = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [getStore(StoreKey.twitterHandle)]);
 
+  if (Number.isNaN(amount)) {
+    return (
+      <Typography variant="mkt-body2" className="font-black">
+        --
+      </Typography>
+    );
+  }
+
   return (
     <Chip isDisabled={!twitterHandle} color="blue" className="rounded-lg">
       {amount} {token}
@@ -117,7 +128,7 @@ const TokenAddressLink = () => {
     return `${chainsConfig[typedChainId]?.blockExplorers?.default.url}/token/${tokenAddress}`;
   }, [tokenAddress, typedChainId]);
 
-  return tokenAddress ? (
+  return tokenAddress && BigInt(tokenAddress) !== ZERO_BIG_INT ? (
     <Button
       variant="link"
       size="sm"

apps/faucet/src/containers/MintButtonContainer.tsx

@@ -1,4 +1,5 @@
 import { LoggerService } from '@webb-tools/browser-utils';
+import { ZERO_BIG_INT } from '@webb-tools/dapp-config/constants';
 import isValidAddress from '@webb-tools/dapp-types/utils/isValidAddress';
 import { Button } from '@webb-tools/webb-ui-components';
 import { err, ok, Result } from 'neverthrow';
@@ -26,10 +27,19 @@ const logger = LoggerService.get('MintButtonContainer');
 
 const mintTokens = async (
   accessToken: string,
-  { chain: typedChainId, recepient, recepientAddressType }: InputValuesType,
+  {
+    chain: typedChainId,
+    recepient,
+    recepientAddressType,
+    contractAddress,
+  }: InputValuesType,
   config: FaucetContextType['config'],
   abortSignal?: AbortSignal
 ): Promise<Result<MintTokenBody, FaucetError<MintTokenErrorCodes>>> => {
+  if (!contractAddress) {
+    return err(FaucetError.from(FaucetErrorCode.MISSING_CONTRACT_ADDRESS));
+  }
+
   if (!typedChainId) {
     return err(FaucetError.from(FaucetErrorCode.INVALID_SELECTED_CHAIN));
   }
@@ -49,8 +59,11 @@ const mintTokens = async (
     'Content-Type': 'application/x-www-form-urlencoded',
   } as const satisfies HeadersInit;
 
+  const onlyNativeToken = BigInt(contractAddress) === ZERO_BIG_INT;
+
   const body = {
     faucet: {
+      onlyNativeToken,
       typedChainId: {
         [chain.type]: chain.chainId,
       },

apps/faucet/src/errors/FaucetError.ts

@@ -8,6 +8,8 @@ const errorMessages: {
   [FaucetErrorCode.INVALID_STORE_KEY]: 'Invalid store key',
   [FaucetErrorCode.TWITTER_LOGIN_FAILED]: 'Twitter login failed',
   [FaucetErrorCode.INVALID_RESPONSE]: 'Invalid response',
+  [FaucetErrorCode.MISSING_CONTRACT_ADDRESS]:
+    'Missing contract address in the operation',
   [FaucetErrorCode.INVALID_REQUEST_BODY]: 'Invalid request body',
   [FaucetErrorCode.REFRESH_TOKENS_FAILED]: 'Refresh tokens failed',
   [FaucetErrorCode.TWITTER_LOGIN_DENIED]: 'Twitter login denied',

apps/faucet/src/errors/FaucetErrorCode.ts

@@ -24,6 +24,11 @@ enum FaucetErrorCode {
    */
   INVALID_REQUEST_BODY,
 
+  /**
+   * Missing contract address in the operation
+   */
+  MISSING_CONTRACT_ADDRESS,
+
   /**
    * Inavlid selected chain
    */

apps/faucet/src/errors/FaucetErrorPayload.ts

@@ -67,6 +67,11 @@ type ErrorPayload = {
     context: string;
   };
 
+  /**
+   * No payload for this error
+   */
+  [FaucetErrorCode.MISSING_CONTRACT_ADDRESS]: undefined;
+
   /**
    * Extra info for the mint tokens failed error
    */

apps/faucet/src/provider/index.tsx

@@ -45,7 +45,7 @@ export type FaucetContextType = {
   /**
    * The default amount to send
    */
-  amount: number;
+  amount$: BehaviorSubject<number>;
 
   /**
    * The faucet config contains the supported chains and tokens
@@ -98,13 +98,13 @@ const config = Object.entries(tokens).reduce(
 );
 
 const defaultContextValue = {
-  amount: sharedConfig.amount,
+  amount$: new BehaviorSubject(NaN),
   config,
   inputValues$: new BehaviorSubject<InputValuesType>({}),
   isMintingModalOpen$: new BehaviorSubject<boolean>(false),
   isMintingSuccess$: new BehaviorSubject<boolean>(false),
   mintTokenResult$: new BehaviorSubject<MintTokenResult | null>(null),
-};
+} satisfies FaucetContextType;
 
 const FaucetContext = createContext<FaucetContextType>(defaultContextValue);
 

apps/faucet/src/types/index.ts

@@ -188,7 +188,8 @@ export type MintTokenErrorCodes =
   | FaucetErrorCode.INVALID_SELECTED_CHAIN
   | FaucetErrorCode.MINT_TOKENS_FAILED
   | FaucetErrorCode.JSON_PARSE_ERROR
-  | FaucetErrorCode.TOO_MANY_CLAIM_REQUESTS;
+  | FaucetErrorCode.TOO_MANY_CLAIM_REQUESTS
+  | FaucetErrorCode.MISSING_CONTRACT_ADDRESS;
 
 /**
  * The mint token result type

libs/dapp-config/src/anchors/anchor-config.ts

@@ -52,13 +52,16 @@ export const anchorDeploymentBlock: Record<number, Record<string, number>> = {
   },
 
   [PresetTypedChainId.HermesOrbit]: {
-    '0xDa68464c391Da8ff60b40273F2Ef0a9971694F99': 25,
+    '0x19E60bbC8b19CBBA2936BEC4B5CE6542013DF02c': 70,
   },
   [PresetTypedChainId.AthenaOrbit]: {
-    '0xDa68464c391Da8ff60b40273F2Ef0a9971694F99': 25,
+    '0x19E60bbC8b19CBBA2936BEC4B5CE6542013DF02c': 70,
   },
   [PresetTypedChainId.DemeterOrbit]: {
-    '0xDa68464c391Da8ff60b40273F2Ef0a9971694F99': 25,
+    '0x19E60bbC8b19CBBA2936BEC4B5CE6542013DF02c': 70,
+  },
+  [PresetTypedChainId.TangleTestnet]: {
+    '0x19E60bbC8b19CBBA2936BEC4B5CE6542013DF02c': 158_874,
   },
 
   ...localAnchorRecord,

libs/dapp-config/src/chains/evm/index.tsx

@@ -221,6 +221,37 @@ export const chainsConfig: Record<number, ChainConfig> = {
     },
   },
 
+  [PresetTypedChainId.TangleTestnet]: {
+    chainType: ChainType.EVM,
+    id: EVMChainId.TangleTestnet,
+    name: 'Tangle Testnet',
+    network: 'Tangle',
+    group: 'webb-dev',
+    tag: 'test',
+    nativeCurrency: {
+      name: 'Test Tangle Network Token',
+      symbol: 'tTNT',
+      decimals: 18,
+    },
+    blockExplorers: {
+      default: {
+        name: 'Tangle Testnet Explorer',
+        url: 'https://tangle-testnet-explorer.webb.tools',
+      },
+    },
+    rpcUrls: {
+      default: {
+        http: ['https://tangle-standalone-archive.webb.tools'],
+      },
+      public: {
+        http: ['https://tangle-standalone-archive.webb.tools'],
+      },
+    },
+    env: ['development', 'test'],
+    contracts: {
+      multicall3: undefined,
+    },
+  },
   // Localnet
   [PresetTypedChainId.HermesLocalnet]: {
     chainType: ChainType.EVM,

libs/dapp-types/src/ChainId.ts

@@ -116,6 +116,11 @@ export enum PresetTypedChainId {
     ChainType.EVM,
     EVMChainId.DemeterLocalnet
   ),
+
+  TangleTestnet = calculateTypedChainId(
+    ChainType.EVM,
+    EVMChainId.TangleTestnet
+  ),
 }
 
 export { EVMChainId, SubstrateChainId };

libs/dapp-types/src/EVMChainId.ts

@@ -16,6 +16,7 @@ export enum EVMChainId {
   MoonbaseAlpha = 1287,
   AvalancheFuji = 43113,
   ScrollAlpha = 534353,
+  TangleTestnet = 4006,
 
   /** Self hosted EVM */
   AthenaOrbit = 3884533461,