diff --git a/src/App.tsx b/src/App.tsx index 82761bf..8ed4412 100644 --- a/src/App.tsx +++ b/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", diff --git a/src/common/Common.constants.tsx b/src/common/Common.constants.tsx index eb34ff8..76cd3d6 100644 --- a/src/common/Common.constants.tsx +++ b/src/common/Common.constants.tsx @@ -59,7 +59,7 @@ export const walletCategories: WalletCategoriesType[] = [ icon: , }, { - value: "binance", + value: "bsc", label: "Connect Binance Wallet", icon: , }, diff --git a/src/context/AppContext.tsx b/src/context/AppContext.tsx index 53c1e95..212c619 100644 --- a/src/context/AppContext.tsx +++ b/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; + 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(""); return ( - + {children} ); diff --git a/src/context/EventEmitterContext.tsx b/src/context/EventEmitterContext.tsx index fbe2554..a4a977e 100644 --- a/src/context/EventEmitterContext.tsx +++ b/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(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" diff --git a/src/modules/Authentication/components/WalletSelection.tsx b/src/modules/Authentication/components/WalletSelection.tsx index 9f26f1e..cb67962 100644 --- a/src/modules/Authentication/components/WalletSelection.tsx +++ b/src/modules/Authentication/components/WalletSelection.tsx @@ -37,8 +37,8 @@ type WalletSelectionProps = { }; const WalletSelection: FC = ({ setConnectMethod }) => { - const [selectedWalletCategory, setSelectedWalletCategory] = - useState(""); + // const [selectedWalletCategory, setSelectedWalletCategory] = + // useState(""); const { primaryWallet } = useDynamicContext(); const { walletOptions, selectWalletOption } = useWalletOptions(); const navigate = useNavigate(); @@ -46,6 +46,8 @@ const WalletSelection: FC = ({ setConnectMethod }) => { const { dispatch, state: { externalWalletAuthState }, + selectedWalletCategory, + setSelectedWalletCategory, } = useAppState(); const persistQuery = usePersistedQuery(); @@ -93,7 +95,7 @@ const WalletSelection: FC = ({ 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 = ({ setConnectMethod }) => { customScrollbar > {!primaryWallet && - (!selectedWalletCategory ? ( + (selectedWalletCategory === "" ? ( @@ -222,6 +224,7 @@ const WalletSelection: FC = ({ setConnectMethod }) => { /> )} + {externalWalletAuthState === "rejected" && ( = () => { const params = new URLSearchParams(location.search); const externalOrigin = params.get("app"); const { primaryWallet } = useDynamicContext(); + const switchNetwork = useSwitchNetwork(); const [showConnectionSuccess, setConnectionSuccess] = useState(false); diff --git a/src/modules/wallet/components/WalletProfile.tsx b/src/modules/wallet/components/WalletProfile.tsx index 02bb0e8..0e5233d 100644 --- a/src/modules/wallet/components/WalletProfile.tsx +++ b/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 = ({ 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 = ({ selectedWallet }) => { navigate(persistQuery(APP_ROUTES.AUTH)); handleLogOutEvent(); + + setSelectedWalletCategory(""); }; return (