Arbitrum and bsc wallet fix

src/App.tsx

@@ -65,6 +65,7 @@ export default function App() {
             });
           },
           onAuthFailure: (method, reason) => {
+            console.log("Auth failed ", reason);
             dispatch({
               type: "SET_EXTERNAL_WALLET_AUTH_LOAD_STATE",
               payload: "rejected",

src/common/Common.constants.tsx

@@ -59,7 +59,7 @@ export const walletCategories: WalletCategoriesType[] = [
     icon: <Arbitrum width={24} height={24} />,
   },
   {
-    value: "binance",
+    value: "bsc",
     label: "Connect Binance Wallet",
     icon: <BnbIcon width={24} height={24} />,
   },

src/context/AppContext.tsx

@@ -1,4 +1,10 @@
-import { createContext, ReactNode, useContext, useReducer } from "react";
+import {
+  createContext,
+  ReactNode,
+  useContext,
+  useReducer,
+  useState,
+} from "react";
 
 // Define the shape of the app state
 export type AppState = {
@@ -7,7 +13,8 @@ export type AppState = {
     | "success"
     | "loading"
     | "rejected"
-    | "timeout";
+    | "timeout"
+    | "check_network";
 };
 
 // Define actions for state management
@@ -38,9 +45,13 @@ function appReducer(state: AppState, action: AppAction): AppState {
 const AppContext = createContext<{
   state: AppState;
   dispatch: React.Dispatch<AppAction>;
+  selectedWalletCategory: string;
+  setSelectedWalletCategory: (selectedWalletCategory: string) => void;
 }>({
   state: initialState,
   dispatch: () => null, // Placeholder function for initial context
+  selectedWalletCategory: "",
+  setSelectedWalletCategory: () => {},
 });
 
 // Custom hook to use the AppContext
@@ -57,9 +68,18 @@ export const AppProvider: React.FC<{ children: ReactNode }> = ({
   children,
 }) => {
   const [state, dispatch] = useReducer(appReducer, initialState);
+  const [selectedWalletCategory, setSelectedWalletCategory] =
+    useState<string>("");
 
   return (
-    <AppContext.Provider value={{ state, dispatch }}>
+    <AppContext.Provider
+      value={{
+        state,
+        dispatch,
+        selectedWalletCategory,
+        setSelectedWalletCategory,
+      }}
+    >
       {children}
     </AppContext.Provider>
   );

src/context/EventEmitterContext.tsx

@@ -28,6 +28,8 @@ import {
   useReinitialize,
 } from "@dynamic-labs/sdk-react-core";
 import { getAuthWindowConfig } from "../modules/Authentication/Authentication.utils";
+import { arbitrum, base, bsc, mainnet } from "viem/chains";
+import { useAppState } from "./AppContext";
 
 // Define the shape of the app state
 export type EventEmitterState = {
@@ -63,6 +65,7 @@ export const EventEmitterProvider: React.FC<{ children: ReactNode }> = ({
   children,
 }) => {
   const { dispatch, state } = useGlobalState();
+  const { selectedWalletCategory } = useAppState();
 
   const [isLoggedEmitterCalled, setLoginEmitterStatus] = useState(false);
 
@@ -88,9 +91,33 @@ export const EventEmitterProvider: React.FC<{ children: ReactNode }> = ({
   // for external wallets
   const externalWalletRef = useRef<Signer | null>(null);
 
+  let networkToSwitch;
+  switch (selectedWalletCategory) {
+    case "mainnet":
+      networkToSwitch = mainnet;
+      break;
+    case "arbitrum":
+      networkToSwitch = arbitrum;
+      break;
+    case "base":
+      networkToSwitch = base;
+      break;
+    case "bsc":
+      networkToSwitch = bsc;
+      break;
+    default:
+      networkToSwitch = mainnet;
+      break;
+  }
+
   useEffect(() => {
     if (state.dynamicWallet && !isLoggedEmitterCalled) {
       (async () => {
+        const chainId = await state.dynamicWallet.getNetwork();
+        if (chainId !== networkToSwitch.id) {
+          await state.dynamicWallet.switchNetwork(networkToSwitch.id);
+        }
+
         externalWalletRef.current = await PushSigner.initialize(
           state.dynamicWallet,
           "DYNAMIC"

src/modules/Authentication/components/WalletSelection.tsx

@@ -37,15 +37,17 @@ type WalletSelectionProps = {
 };
 
 const WalletSelection: FC<WalletSelectionProps> = ({ setConnectMethod }) => {
-  const [selectedWalletCategory, setSelectedWalletCategory] =
-    useState<string>("");
+  // const [selectedWalletCategory, setSelectedWalletCategory] =
+  //   useState<string>("");
   const { primaryWallet } = useDynamicContext();
   const { walletOptions, selectWalletOption } = useWalletOptions();
   const navigate = useNavigate();
 
   const {
     dispatch,
     state: { externalWalletAuthState },
+    selectedWalletCategory,
+    setSelectedWalletCategory,
   } = useAppState();
   const persistQuery = usePersistedQuery();
 
@@ -93,7 +95,7 @@ const WalletSelection: FC<WalletSelectionProps> = ({ setConnectMethod }) => {
       ? wallets.solanaWallets
       : selectedWalletCategory === "arbitrum"
       ? wallets.arbitrumWallets
-      : selectedWalletCategory === "binance" && wallets.binanceWallets;
+      : selectedWalletCategory === "bsc" && wallets.binanceWallets;
 
   const handleBack = () => {
     if (selectedWalletCategory) setSelectedWalletCategory("");
@@ -150,7 +152,7 @@ const WalletSelection: FC<WalletSelectionProps> = ({ setConnectMethod }) => {
             customScrollbar
           >
             {!primaryWallet &&
-              (!selectedWalletCategory ? (
+              (selectedWalletCategory === "" ? (
                 <WalletCategories
                   setSelectedWalletCategory={setSelectedWalletCategory}
                 />
@@ -222,6 +224,7 @@ const WalletSelection: FC<WalletSelectionProps> = ({ setConnectMethod }) => {
           />
         </DrawerWrapper>
       )}
+
       {externalWalletAuthState === "rejected" && (
         <DrawerWrapper>
           <ErrorContent

src/modules/wallet/Wallet.tsx

@@ -1,5 +1,5 @@
 import { FC, useEffect, useState } from "react";
-import { Box, Info } from "../../blocks";
+import { Box, Button, Info } from "../../blocks";
 import {
   BoxLayout,
   ContentLayout,
@@ -18,7 +18,10 @@ import { PushWallet } from "../../services/pushWallet/pushWallet";
 import { APP_ROUTES, ENV } from "../../constants";
 import secrets from "secrets.js-grempe";
 import { useGlobalState } from "../../context/GlobalContext";
-import { useDynamicContext } from "@dynamic-labs/sdk-react-core";
+import {
+  useDynamicContext,
+  useSwitchNetwork,
+} from "@dynamic-labs/sdk-react-core";
 import { getWalletlist } from "./Wallet.utils";
 import { WalletListType } from "./Wallet.types";
 import { PushWalletAppConnection } from "../../common";
@@ -36,6 +39,7 @@ const Wallet: FC<WalletProps> = () => {
   const params = new URLSearchParams(location.search);
   const externalOrigin = params.get("app");
   const { primaryWallet } = useDynamicContext();
+  const switchNetwork = useSwitchNetwork();
   const [showConnectionSuccess, setConnectionSuccess] =
     useState<boolean>(false);
 

src/modules/wallet/components/WalletProfile.tsx

@@ -24,6 +24,7 @@ import { useDynamicContext } from "@dynamic-labs/sdk-react-core";
 import { WalletListType } from "../Wallet.types";
 import { APP_ROUTES } from "../../../constants";
 import { useEventEmitterContext } from "../../../context/EventEmitterContext";
+import { useAppState } from "../../../context/AppContext";
 
 export type WalletProfileProps = {
   selectedWallet: WalletListType;
@@ -35,6 +36,7 @@ const WalletProfile: FC<WalletProfileProps> = ({ selectedWallet }) => {
   const walletName = selectedWallet?.name ?? "External Wallet";
   const [copied, setCopied] = useState(false);
   const { dispatch } = useGlobalState();
+  const { setSelectedWalletCategory } = useAppState();
 
   const { handleLogOutEvent } = useEventEmitterContext();
 
@@ -53,6 +55,8 @@ const WalletProfile: FC<WalletProfileProps> = ({ selectedWallet }) => {
     navigate(persistQuery(APP_ROUTES.AUTH));
 
     handleLogOutEvent();
+
+    setSelectedWalletCategory("");
   };
 
   return (