fix(tangle-dapp): Tangle dApp Mainnet Iteration Apr 10 (#2225)

apps/bridge-dapp/src/App.tsx

@@ -10,7 +10,7 @@ export const appEvent = new AppEvent();
 const App: FC = () => {
   return (
     <WebbUIProvider hasErrorBoudary>
-      <WebbProvider appEvent={appEvent} applicationName={'Webb DApp'}>
+      <WebbProvider appEvent={appEvent} applicationName={'Hubble Bridge dApp'}>
         <AppRoutes />
       </WebbProvider>
     </WebbUIProvider>

apps/tangle-dapp/components/NetworkSelector/NetworkSelectionButton.tsx

@@ -20,6 +20,7 @@ export const TANGLE_TESTNET_CHAIN_NAME = 'Tangle Testnet Native';
 const NetworkSelectionButton: FC = () => {
   const { network, setNetwork, isCustom } = useNetworkState();
 
+  // TODO: Handle switching network on EVM wallet here
   const switchToCustomNetwork = useCallback(
     (customRpcEndpoint: string) =>
       setNetwork(createCustomNetwork(customRpcEndpoint), true),
@@ -28,9 +29,7 @@ const NetworkSelectionButton: FC = () => {
 
   return (
     <Dropdown>
-      <DropdownBasicButton>
-        <TriggerButton networkName={network?.name ?? 'Loading'} />
-      </DropdownBasicButton>
+      <TriggerButton networkName={network?.name ?? 'Loading'} />
 
       <DropdownBody className="mt-1 bg-mono-0 dark:bg-mono-180">
         <NetworkSelectorDropdown
@@ -46,7 +45,7 @@ const NetworkSelectionButton: FC = () => {
 
 const TriggerButton: FC<{ networkName: string }> = ({ networkName }) => {
   return (
-    <button
+    <DropdownBasicButton
       type="button"
       className={twMerge(
         'rounded-lg border-2 p-2',
@@ -74,7 +73,7 @@ const TriggerButton: FC<{ networkName: string }> = ({ networkName }) => {
 
         <ChevronDown size="lg" className="shrink-0 grow-0" />
       </div>
-    </button>
+    </DropdownBasicButton>
   );
 };
 

apps/tangle-dapp/containers/TransferTxContainer/TransferTxContainer.tsx

@@ -81,14 +81,16 @@ const TransferTxContainer: FC<TransferTxContainerProps> = ({
     execute: executeTransferTx,
     status,
     error: txError,
+    reset: resetTransferTx,
   } = useTransferTx();
 
   // TODO: Likely would ideally want to control this from the parent component.
   const reset = useCallback(() => {
     setIsModalOpen(false);
     setAmount(null);
     setReceiverAddress('');
-  }, [setIsModalOpen]);
+    resetTransferTx?.();
+  }, [resetTransferTx, setIsModalOpen]);
 
   // Reset state when the transaction is complete.
   useEffect(() => {
@@ -144,12 +146,13 @@ const TransferTxContainer: FC<TransferTxContainerProps> = ({
         isCenter
         isOpen={isModalOpen}
         className="w-full max-w-[550px] rounded-2xl bg-mono-0 dark:bg-mono-180"
+        onCloseAutoFocus={reset}
       >
-        <ModalHeader titleVariant="h4" onClose={reset}>
+        <ModalHeader titleVariant="h4" onClose={() => setIsModalOpen(false)}>
           Transfer {nativeTokenSymbol} Tokens
         </ModalHeader>
 
-        <div className="p-9 flex flex-col gap-4">
+        <div className="flex flex-col gap-4 p-9">
           <Typography variant="body1" fw="normal">
             Quickly transfer your {nativeTokenSymbol} tokens to an account on
             the Tangle Network. You can choose to send to either an EVM or a

apps/tangle-dapp/containers/WalletModalContainer/WalletModalContainer.tsx

@@ -6,7 +6,18 @@ import {
 } from '@webb-tools/api-provider-environment';
 import getPlatformMetaData from '@webb-tools/browser-utils/platform/getPlatformMetaData';
 import { PresetTypedChainId } from '@webb-tools/dapp-types';
+import {
+  calculateTypedChainId,
+  ChainType,
+} from '@webb-tools/sdk-core/typed-chain-id';
 import { useWebbUI, WalletModal } from '@webb-tools/webb-ui-components';
+import {
+  Network,
+  NetworkId,
+} from '@webb-tools/webb-ui-components/constants/networks';
+import { useMemo } from 'react';
+
+import useNetworkStore from '../../context/useNetworkStore';
 
 export const WalletModalContainer = () => {
   const {
@@ -21,10 +32,17 @@ export const WalletModalContainer = () => {
     supportedWallets,
   } = useConnectWallet({ useAllWallets: true });
 
+  const { network } = useNetworkStore();
+
   const { notificationApi } = useWebbUI();
 
   const { apiConfig } = useWebContext();
 
+  const targetTypedChainIds = useMemo(
+    () => networkToTypedChainIds(network),
+    [network]
+  );
+
   return (
     <WalletModal
       connectingWalletId={connectingWalletId}
@@ -39,11 +57,39 @@ export const WalletModalContainer = () => {
       supportedWallets={supportedWallets}
       notificationApi={notificationApi}
       apiConfig={apiConfig}
-      targetTypedChainIds={{
-        evm: PresetTypedChainId.TangleTestnetEVM,
-        substrate: PresetTypedChainId.TangleTestnetNative,
-      }}
+      targetTypedChainIds={targetTypedChainIds}
       contentDefaultText="Connect your EVM or Substrate wallet to interact on the Tangle Network"
     />
   );
 };
+
+const networkToTypedChainIds = (network: Network) => {
+  switch (network.id) {
+    case NetworkId.TANGLE_MAINNET:
+      return {
+        evm: PresetTypedChainId.TangleMainnetEVM,
+        substrate: PresetTypedChainId.TangleMainnetNative,
+      };
+
+    case NetworkId.TANGLE_TESTNET:
+    case NetworkId.TANGLE_LOCAL_DEV:
+      return {
+        evm: PresetTypedChainId.TangleTestnetEVM,
+        substrate: PresetTypedChainId.TangleTestnetNative,
+      };
+
+    case NetworkId.CUSTOM: {
+      if (typeof network.chainId !== 'number') {
+        return;
+      }
+
+      return {
+        evm: calculateTypedChainId(ChainType.EVM, network.chainId),
+        substrate: calculateTypedChainId(ChainType.Substrate, network.chainId),
+      };
+    }
+
+    default:
+      return;
+  }
+};

apps/tangle-dapp/hooks/useAgnosticTx.ts

@@ -41,12 +41,14 @@ function useAgnosticTx<PrecompileT extends Precompile, Context = void>({
     execute: executeSubstrateTx,
     status: substrateTxStatus,
     error: substrateError,
+    reset: substrateReset,
   } = useSubstrateTx(substrateTxFactory);
 
   const {
     execute: executeEvmPrecompileAbiCall,
     status: evmTxStatus,
     error: evmError,
+    reset: evmReset,
   } = useEvmPrecompileAbiCall(precompile, evmTxFactory);
 
   const isEvmAccount =
@@ -116,6 +118,8 @@ function useAgnosticTx<PrecompileT extends Precompile, Context = void>({
     status: agnosticStatus,
     error:
       isEvmAccount === null ? null : isEvmAccount ? evmError : substrateError,
+    reset:
+      isEvmAccount === null ? null : isEvmAccount ? evmReset : substrateReset,
     execute:
       // Only provide the executor when all its requirements are met.
       // This is useful, for example, to force the consumer of this hook

apps/tangle-dapp/hooks/useEvmPrecompileAbiCall.ts

@@ -60,6 +60,7 @@ function useEvmPrecompileAbiCall<
 ) {
   const [status, setStatus] = useState(TxStatus.NOT_YET_INITIATED);
   const [error, setError] = useState<Error | null>(null);
+
   const activeEvmAddress = useEvmAddress();
   const viemPublicClient = useViemPublicClient();
   const viemWalletClient = useViemWalletClient();
@@ -127,9 +128,19 @@ function useEvmPrecompileAbiCall<
     ]
   );
 
+  const reset = useCallback(() => {
+    setStatus(TxStatus.NOT_YET_INITIATED);
+    setError(null);
+  }, []);
+
   // Prevent the consumer from executing the call if the active
   // account is not an EVM account.
-  return { execute: activeEvmAddress !== null ? execute : null, status, error };
+  return {
+    execute: activeEvmAddress !== null ? execute : null,
+    reset,
+    status,
+    error,
+  };
 }
 
 export default useEvmPrecompileAbiCall;

apps/tangle-dapp/hooks/useSubstrateTx.ts

@@ -37,6 +37,7 @@ function useSubstrateTx<Context = void>(
   const [status, setStatus] = useState(TxStatus.NOT_YET_INITIATED);
   const [hash, setHash] = useState<string | null>(null);
   const [error, setError] = useState<Error | null>(null);
+
   const { notificationApi } = useWebbUI();
   const { isEvm: isEvmAccount } = useAgnosticAccountInfo();
   const activeSubstrateAddress = useSubstrateAddress();
@@ -148,6 +149,12 @@ function useSubstrateTx<Context = void>(
     ]
   );
 
+  const reset = useCallback(() => {
+    setStatus(TxStatus.NOT_YET_INITIATED);
+    setHash(null);
+    setError(null);
+  }, []);
+
   // Timeout the transaction if it's taking too long. This
   // won't cancel it, but it will alert the user that something
   // may have gone wrong, and also unlock anything waiting for
@@ -170,7 +177,7 @@ function useSubstrateTx<Context = void>(
 
   // Prevent the consumer from executing the transaction if
   // the active account is an EVM account.
-  return { execute: isEvmAccount ? null : execute, status, error, hash };
+  return { execute: isEvmAccount ? null : execute, reset, status, error, hash };
 }
 
 export default useSubstrateTx;

libs/api-provider-environment/src/ConnectWallet/index.ts

@@ -105,7 +105,7 @@ const useConnectWallet = (options?: {
   const connectError = useObservableState(subjects.connectErrorSubject);
   const typedChainId = useObservableState(subjects.walletTypedChainIdSubject);
 
-  const { appEvent, setActiveAccount, switchChain } = useWebContext();
+  const { appEvent, appName, setActiveAccount, switchChain } = useWebContext();
 
   const [, setActiveWallet] = useActiveWallet();
   const [, setActiveChain] = useActiveChain();
@@ -192,7 +192,7 @@ const useConnectWallet = (options?: {
         subjects.setSelectedWallet(nextWallet);
         subjects.setWalletState(WalletState.CONNECTING);
 
-        const provider = await nextWallet.detect();
+        const provider = await nextWallet.detect(appName);
 
         if (!provider) {
           subjects.setWalletState(WalletState.FAILED);
@@ -251,7 +251,7 @@ const useConnectWallet = (options?: {
       }
     },
     // prettier-ignore
-    [setActiveAccount, setActiveChain, setActiveWallet, switchChain, typedChainId]
+    [appName, setActiveAccount, setActiveChain, setActiveWallet, switchChain, typedChainId]
   );
 
   /**

libs/api-provider-environment/src/WebbProvider/index.tsx

@@ -14,7 +14,6 @@ import {
 } from '@webb-tools/browser-utils/storage';
 import {
   ApiConfig,
-  HUBBLE_BRIDGE_DAPP_NAME,
   chainsConfig,
   chainsPopulated,
   parseOnChainData,
@@ -85,7 +84,11 @@ const apiConfig = ApiConfig.init({
 
 const appNetworkStoragePromise = netStorageFactory();
 
-const WebbProviderInner: FC<WebbProviderProps> = ({ children, appEvent }) => {
+const WebbProviderInner: FC<WebbProviderProps> = ({
+  children,
+  appEvent,
+  applicationName,
+}) => {
   const [activeWallet, setActiveWallet] = useActiveWallet();
   const [activeChain, setActiveChain] = useActiveChain();
   const [activeAccount, setActiveAccount] = useActiveAccount();
@@ -355,7 +358,7 @@ const WebbProviderInner: FC<WebbProviderProps> = ({ children, appEvent }) => {
               }
 
               const webbPolkadot = await WebbPolkadot.init(
-                HUBBLE_BRIDGE_DAPP_NAME,
+                applicationName,
                 Array.from(webSocketUrls),
                 {
                   onError: (feedback: InteractiveFeedback) => {
@@ -602,7 +605,7 @@ const WebbProviderInner: FC<WebbProviderProps> = ({ children, appEvent }) => {
       }
     },
     // prettier-ignore
-    [activeApi, appEvent, catchWebbError, noteManager, notificationApi, setActiveApiWithAccounts, setActiveChain, setActiveWallet]
+    [activeApi, appEvent, applicationName, catchWebbError, noteManager, notificationApi, setActiveApiWithAccounts, setActiveChain, setActiveWallet]
   );
 
   /// a util will store the network/wallet config before switching
@@ -759,6 +762,7 @@ const WebbProviderInner: FC<WebbProviderProps> = ({ children, appEvent }) => {
   return (
     <WebbContext.Provider
       value={{
+        appName: applicationName,
         loading,
         wallets: walletsConfig,
         chains: chains,

libs/api-provider-environment/src/webb-context/webb-context.ts

@@ -99,6 +99,9 @@ export interface WebbContextState<T = unknown> {
     interactiveFeedback: InteractiveFeedback
   ) => void;
 
+  /** The application's name */
+  appName: string;
+
   /** App event */
   appEvent: TAppEvent;
 
@@ -135,6 +138,7 @@ export const WebbContext = React.createContext<WebbContextState<unknown>>({
   activeFeedback: null,
   apiConfig: ApiConfig.init({}),
   registerInteractiveFeedback: noop,
+  appName: '',
   appEvent: new AppEvent(),
   txQueue: {
     txQueue: [],

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

@@ -181,6 +181,33 @@ export const chainsConfig: Record<number, ChainConfig> = {
     },
   }),
 
+  [PresetTypedChainId.TangleMainnetEVM]: {
+    chainType: ChainType.EVM,
+    id: EVMChainId.TangleMainnetEVM,
+    name: 'Tangle Mainnet EVM',
+    group: 'tangle',
+    tag: 'live',
+    nativeCurrency: {
+      name: 'Tangle Network Token',
+      symbol: 'TNT',
+      decimals: 18,
+    },
+    blockExplorers: {
+      default: {
+        name: 'Tangle Mainnet EVM Explorer',
+        url: 'https://explorer.tangle.tools/',
+      },
+    },
+    rpcUrls: {
+      default: {
+        http: ['https://rpc.tangle.tools'],
+      },
+      public: {
+        http: ['https://rpc.tangle.tools'],
+      },
+    },
+  } satisfies ChainConfig,
+
   [PresetTypedChainId.TangleTestnetEVM]: {
     chainType: ChainType.EVM,
     id: EVMChainId.TangleTestnetEVM,