From 58e20c980c3b9b1f237339b95d1c807029fa2c90 Mon Sep 17 00:00:00 2001 From: abhishek-01k Date: Wed, 5 Feb 2025 00:58:23 +0530 Subject: [PATCH 1/2] Fixed the arbitrum and bnb wallet fix --- src/App.tsx | 12 +++- src/context/AppContext.tsx | 3 +- src/context/GlobalContext.tsx | 8 +-- .../components/SwitchNetwork.tsx | 59 +++++++++++++++++++ .../components/WalletSelection.tsx | 23 +++++--- src/modules/wallet/Wallet.tsx | 16 ++++- 6 files changed, 105 insertions(+), 16 deletions(-) create mode 100644 src/modules/Authentication/components/SwitchNetwork.tsx diff --git a/src/App.tsx b/src/App.tsx index 82761bf..7bbec0c 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", @@ -77,10 +78,19 @@ export default function App() { }); }, onAuthSuccess: (args) => { + console.log( + "User has successfully authenticated, check the network" + ); + dispatch({ type: "SET_EXTERNAL_WALLET_AUTH_LOAD_STATE", - payload: "success", + payload: "check_network", }); + + // dispatch({ + // type: "SET_EXTERNAL_WALLET_AUTH_LOAD_STATE", + // payload: "success", + // }); }, }, }} diff --git a/src/context/AppContext.tsx b/src/context/AppContext.tsx index 53c1e95..411df2f 100644 --- a/src/context/AppContext.tsx +++ b/src/context/AppContext.tsx @@ -7,7 +7,8 @@ export type AppState = { | "success" | "loading" | "rejected" - | "timeout"; + | "timeout" + | "check_network"; }; // Define actions for state management diff --git a/src/context/GlobalContext.tsx b/src/context/GlobalContext.tsx index f3bbaea..0baff24 100644 --- a/src/context/GlobalContext.tsx +++ b/src/context/GlobalContext.tsx @@ -163,10 +163,10 @@ export const GlobalProvider: React.FC<{ children: ReactNode }> = ({ } // This condition is valid for continue with wallet for during login and reload - if (primaryWallet) { - dispatch({ type: "SET_WALLET_LOAD_STATE", payload: "success" }); - dispatch({ type: "SET_DYNAMIC_WALLET", payload: primaryWallet }); - } + // if (primaryWallet) { + // dispatch({ type: "SET_WALLET_LOAD_STATE", payload: "success" }); + // dispatch({ type: "SET_DYNAMIC_WALLET", payload: primaryWallet }); + // } if (!stateParam && !storedToken && !primaryWallet && sdkHasLoaded) { dispatch({ type: "SET_WALLET_LOAD_STATE", payload: "rejected" }); diff --git a/src/modules/Authentication/components/SwitchNetwork.tsx b/src/modules/Authentication/components/SwitchNetwork.tsx new file mode 100644 index 0000000..86e5fb4 --- /dev/null +++ b/src/modules/Authentication/components/SwitchNetwork.tsx @@ -0,0 +1,59 @@ +import { DrawerWrapper, LoadingContent } from "common"; +import React from "react"; +import { useAppState } from "../../../context/AppContext"; +import { + getNetwork, + useDynamicContext, + useSwitchNetwork, +} from "@dynamic-labs/sdk-react-core"; +import { base } from "viem/chains"; +import { Button } from "blocks"; + +const SwitchNetwork = () => { + const { dispatch } = useAppState(); + + const switchNetwork = useSwitchNetwork(); + const { primaryWallet } = useDynamicContext(); + + const checkAndSwitchNetwork = async () => { + if (!primaryWallet) { + console.log("No primary wallet connected"); + return; + } + + const currentNetwork = await primaryWallet.connector.getNetwork(); + console.log("currentNetwork", currentNetwork); + + if (primaryWallet.connector.supportsNetworkSwitching()) { + try { + await switchNetwork({ wallet: primaryWallet, network: base.id }); + console.log("Successfully switched to Base network"); + } catch (error) { + if (error.code === 4001) { + console.log("User rejected the network switch"); + } else { + console.error("Error switching network:", error); + } + } + } else { + console.log("This wallet does not support network switching"); + } + }; + return ( + + + + // dispatch({ + // type: "SET_EXTERNAL_WALLET_AUTH_LOAD_STATE", + // payload: "rejected", + // }) + // } + /> + + ); +}; + +export default SwitchNetwork; diff --git a/src/modules/Authentication/components/WalletSelection.tsx b/src/modules/Authentication/components/WalletSelection.tsx index 9f26f1e..f2100f1 100644 --- a/src/modules/Authentication/components/WalletSelection.tsx +++ b/src/modules/Authentication/components/WalletSelection.tsx @@ -31,6 +31,7 @@ import { useNavigate } from "react-router-dom"; import { APP_ROUTES } from "../../../constants"; import { useAppState } from "../../../context/AppContext"; import { usePersistedQuery } from "../../../common/hooks/usePersistedQuery"; +import SwitchNetwork from "./SwitchNetwork"; type WalletSelectionProps = { setConnectMethod: React.Dispatch>; @@ -49,14 +50,14 @@ const WalletSelection: FC = ({ setConnectMethod }) => { } = useAppState(); const persistQuery = usePersistedQuery(); - useEffect(() => { - (async () => { - if (primaryWallet) { - const url = persistQuery(APP_ROUTES.WALLET); - navigate(url); - } - })(); - }, [primaryWallet]); + // useEffect(() => { + // (async () => { + // if (primaryWallet) { + // const url = persistQuery(APP_ROUTES.WALLET); + // navigate(url); + // } + // })(); + // }, [primaryWallet]); const wallets = useMemo(() => { const installedEthereumWallets: WalletKeyPairType = getInstalledWallets( @@ -86,6 +87,8 @@ const WalletSelection: FC = ({ setConnectMethod }) => { }; }, [walletOptions]); + console.log("walletOptions", walletOptions); + const walletsToShow = selectedWalletCategory === "ethereum" ? wallets.ethereumWallets @@ -117,6 +120,8 @@ const WalletSelection: FC = ({ setConnectMethod }) => { // } }; + console.log("primaryWallet", primaryWallet); + const FallBackWalletIcon = ({ walletKey }: { walletKey: string }) => { return ( @@ -222,6 +227,8 @@ const WalletSelection: FC = ({ setConnectMethod }) => { /> )} + + {externalWalletAuthState === "check_network" && } {externalWalletAuthState === "rejected" && ( = () => { const params = new URLSearchParams(location.search); const externalOrigin = params.get("app"); const { primaryWallet } = useDynamicContext(); + const switchNetwork = useSwitchNetwork(); const [showConnectionSuccess, setConnectionSuccess] = useState(false); @@ -282,6 +287,13 @@ const Wallet: FC = () => { gap="spacing-sm" position="relative" > + Date: Tue, 11 Feb 2025 16:24:19 +0530 Subject: [PATCH 2/2] Fixed the arbitrum and bsc wallet fix --- src/App.tsx | 11 +--- src/common/Common.constants.tsx | 2 +- src/context/AppContext.tsx | 23 +++++++- src/context/EventEmitterContext.tsx | 27 +++++++++ src/context/GlobalContext.tsx | 8 +-- .../components/SwitchNetwork.tsx | 59 ------------------- .../components/WalletSelection.tsx | 32 +++++----- src/modules/wallet/Wallet.tsx | 8 --- .../wallet/components/WalletProfile.tsx | 4 ++ 9 files changed, 72 insertions(+), 102 deletions(-) delete mode 100644 src/modules/Authentication/components/SwitchNetwork.tsx diff --git a/src/App.tsx b/src/App.tsx index 7bbec0c..8ed4412 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -78,19 +78,10 @@ export default function App() { }); }, onAuthSuccess: (args) => { - console.log( - "User has successfully authenticated, check the network" - ); - dispatch({ type: "SET_EXTERNAL_WALLET_AUTH_LOAD_STATE", - payload: "check_network", + payload: "success", }); - - // dispatch({ - // type: "SET_EXTERNAL_WALLET_AUTH_LOAD_STATE", - // payload: "success", - // }); }, }, }} 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 411df2f..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 = { @@ -39,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 @@ -58,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/context/GlobalContext.tsx b/src/context/GlobalContext.tsx index 0baff24..f3bbaea 100644 --- a/src/context/GlobalContext.tsx +++ b/src/context/GlobalContext.tsx @@ -163,10 +163,10 @@ export const GlobalProvider: React.FC<{ children: ReactNode }> = ({ } // This condition is valid for continue with wallet for during login and reload - // if (primaryWallet) { - // dispatch({ type: "SET_WALLET_LOAD_STATE", payload: "success" }); - // dispatch({ type: "SET_DYNAMIC_WALLET", payload: primaryWallet }); - // } + if (primaryWallet) { + dispatch({ type: "SET_WALLET_LOAD_STATE", payload: "success" }); + dispatch({ type: "SET_DYNAMIC_WALLET", payload: primaryWallet }); + } if (!stateParam && !storedToken && !primaryWallet && sdkHasLoaded) { dispatch({ type: "SET_WALLET_LOAD_STATE", payload: "rejected" }); diff --git a/src/modules/Authentication/components/SwitchNetwork.tsx b/src/modules/Authentication/components/SwitchNetwork.tsx deleted file mode 100644 index 86e5fb4..0000000 --- a/src/modules/Authentication/components/SwitchNetwork.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { DrawerWrapper, LoadingContent } from "common"; -import React from "react"; -import { useAppState } from "../../../context/AppContext"; -import { - getNetwork, - useDynamicContext, - useSwitchNetwork, -} from "@dynamic-labs/sdk-react-core"; -import { base } from "viem/chains"; -import { Button } from "blocks"; - -const SwitchNetwork = () => { - const { dispatch } = useAppState(); - - const switchNetwork = useSwitchNetwork(); - const { primaryWallet } = useDynamicContext(); - - const checkAndSwitchNetwork = async () => { - if (!primaryWallet) { - console.log("No primary wallet connected"); - return; - } - - const currentNetwork = await primaryWallet.connector.getNetwork(); - console.log("currentNetwork", currentNetwork); - - if (primaryWallet.connector.supportsNetworkSwitching()) { - try { - await switchNetwork({ wallet: primaryWallet, network: base.id }); - console.log("Successfully switched to Base network"); - } catch (error) { - if (error.code === 4001) { - console.log("User rejected the network switch"); - } else { - console.error("Error switching network:", error); - } - } - } else { - console.log("This wallet does not support network switching"); - } - }; - return ( - - - - // dispatch({ - // type: "SET_EXTERNAL_WALLET_AUTH_LOAD_STATE", - // payload: "rejected", - // }) - // } - /> - - ); -}; - -export default SwitchNetwork; diff --git a/src/modules/Authentication/components/WalletSelection.tsx b/src/modules/Authentication/components/WalletSelection.tsx index f2100f1..cb67962 100644 --- a/src/modules/Authentication/components/WalletSelection.tsx +++ b/src/modules/Authentication/components/WalletSelection.tsx @@ -31,15 +31,14 @@ import { useNavigate } from "react-router-dom"; import { APP_ROUTES } from "../../../constants"; import { useAppState } from "../../../context/AppContext"; import { usePersistedQuery } from "../../../common/hooks/usePersistedQuery"; -import SwitchNetwork from "./SwitchNetwork"; type WalletSelectionProps = { setConnectMethod: React.Dispatch>; }; const WalletSelection: FC = ({ setConnectMethod }) => { - const [selectedWalletCategory, setSelectedWalletCategory] = - useState(""); + // const [selectedWalletCategory, setSelectedWalletCategory] = + // useState(""); const { primaryWallet } = useDynamicContext(); const { walletOptions, selectWalletOption } = useWalletOptions(); const navigate = useNavigate(); @@ -47,17 +46,19 @@ const WalletSelection: FC = ({ setConnectMethod }) => { const { dispatch, state: { externalWalletAuthState }, + selectedWalletCategory, + setSelectedWalletCategory, } = useAppState(); const persistQuery = usePersistedQuery(); - // useEffect(() => { - // (async () => { - // if (primaryWallet) { - // const url = persistQuery(APP_ROUTES.WALLET); - // navigate(url); - // } - // })(); - // }, [primaryWallet]); + useEffect(() => { + (async () => { + if (primaryWallet) { + const url = persistQuery(APP_ROUTES.WALLET); + navigate(url); + } + })(); + }, [primaryWallet]); const wallets = useMemo(() => { const installedEthereumWallets: WalletKeyPairType = getInstalledWallets( @@ -87,8 +88,6 @@ const WalletSelection: FC = ({ setConnectMethod }) => { }; }, [walletOptions]); - console.log("walletOptions", walletOptions); - const walletsToShow = selectedWalletCategory === "ethereum" ? wallets.ethereumWallets @@ -96,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(""); @@ -120,8 +119,6 @@ const WalletSelection: FC = ({ setConnectMethod }) => { // } }; - console.log("primaryWallet", primaryWallet); - const FallBackWalletIcon = ({ walletKey }: { walletKey: string }) => { return ( @@ -155,7 +152,7 @@ const WalletSelection: FC = ({ setConnectMethod }) => { customScrollbar > {!primaryWallet && - (!selectedWalletCategory ? ( + (selectedWalletCategory === "" ? ( @@ -228,7 +225,6 @@ const WalletSelection: FC = ({ setConnectMethod }) => { )} - {externalWalletAuthState === "check_network" && } {externalWalletAuthState === "rejected" && ( = () => { gap="spacing-sm" position="relative" > - = ({ 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 (