fix: fixed error when switch instance as email user

src/components/Login/Login.tsx

@@ -75,7 +75,7 @@ export const Login: React.FC<LoginProps> = props => {
   const [loading, setLoading] = useState(false);
   const [walletLoading, setWalletLoading] = useState(Boolean(redirectAuth));
   const [initialEntries, setInitialEntries] = useState<string[]>([
-    query.network ? '/options' : query.switchInstance ? '/magiclink' : '/',
+    query.network ? '/options' : query.switchInstance ? '/magiclink' : query.email ? '/email' : '/',
   ]);
   const [email, setEmail] = useState<string>('');
   const [disableSignIn, setDisableSignIn] = useState<boolean>(false);

src/components/Login/render/Email/LoginByEmail.tsx

@@ -1,6 +1,8 @@
-import {useState} from 'react';
+import {useState, useEffect} from 'react';
 import {useNavigate} from 'react-router';
 
+import {useRouter} from 'next/router';
+
 import {Button, TextField, Typography} from '@material-ui/core';
 
 import {useStyles} from './LoginByEmail.style';
@@ -16,6 +18,8 @@ type LoginByEmailProps = {
 
 const LoginByEmail = ({onNext}: LoginByEmailProps) => {
   const styles = useStyles();
+  const router = useRouter();
+
   const {requestLink} = useAuthLinkHook();
 
   const [email, setEmail] = useState('');
@@ -24,6 +28,19 @@ const LoginByEmail = ({onNext}: LoginByEmailProps) => {
     message: '',
   });
 
+  useEffect(() => {
+    const email = router?.query?.email?.toString() ?? '';
+
+    if (!validator.isEmail(email)) {
+      setError({
+        isError: true,
+        message: 'Please enter a valid email!',
+      });
+    }
+
+    setEmail(email);
+  }, [router.query.email]);
+
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const input = event.target.value;
 

src/components/Login/render/Options/Options.tsx

@@ -55,7 +55,7 @@ export const Options: React.FC<OptionProps> = props => {
   const styles = useStyles();
 
   const {query} = useQueryParams();
-  const {network} = query;
+  const {network, platform, walletType} = query;
 
   const {onConnect, onConnectNear, isMobileSignIn} = props;
 
@@ -200,24 +200,17 @@ export const Options: React.FC<OptionProps> = props => {
 
   useEffect(() => {
     const doSelectAccount = async () => {
-      if (network) {
-        if (network === NetworkIdEnum.DEBIO) {
-          const installed = await checkPolkdostExtensionInstalled();
-          if (!installed) {
-            setHideOptions(true);
-            return;
-          }
-          setSelectedNetwork(NetworkIdEnum.DEBIO, BlockchainPlatform.SUBSTRATE)();
-          setSelectedWallet(WalletTypeEnum.POLKADOT)();
-          setTimeout(() => {
-            handleConnect();
-          }, 100);
-          return;
-        }
-        setHideOptions(true);
-        return;
-      }
-      setHideOptions(true);
+      if (!network) return;
+      const installed = await checkPolkdostExtensionInstalled();
+      if (!installed) return;
+      setSelectedNetwork(
+        network.toString() as NetworkIdEnum,
+        (platform?.toString() as BlockchainPlatform) ?? BlockchainPlatform.SUBSTRATE,
+      )();
+      setSelectedWallet((walletType?.toString() as WalletTypeEnum) ?? WalletTypeEnum.POLKADOT)();
+      return setTimeout(() => {
+        handleConnect();
+      }, 100);
     };
     doSelectAccount();
   }, [handleConnect]);

src/components/Menu/Menu.tsx

@@ -50,6 +50,8 @@ export const Menu: React.FC<MenuProps> = props => {
   const handleSwitchInstance = async (server: ServerListProps, callback?: () => void) => {
     try {
       await switchInstance(server);
+
+      callback && callback();
     } catch (err) {
       if (err.message === 'AccountNotFound') {
         setRegister(true);
@@ -58,8 +60,6 @@ export const Menu: React.FC<MenuProps> = props => {
       }
 
       onLoadingSwitch(false);
-    } finally {
-      callback && callback();
     }
   };
 

src/components/SelectServer/index.tsx

@@ -5,6 +5,8 @@ import React, {useState, useEffect} from 'react';
 import {useCookies} from 'react-cookie';
 import {useDispatch, useSelector} from 'react-redux';
 
+import {useSession} from 'next-auth/react';
+import getConfig from 'next/config';
 import Image from 'next/image';
 import {useRouter} from 'next/router';
 
@@ -30,7 +32,9 @@ import {unionBy} from 'lodash';
 import ShowIf from 'src/components/common/show-if.component';
 import {useAuthHook} from 'src/hooks/auth.hook';
 import {useInstances} from 'src/hooks/use-instances.hooks';
+import {useUserHook} from 'src/hooks/use-user.hook';
 import {ServerListProps} from 'src/interfaces/server-list';
+import {BlockchainPlatform, WalletTypeEnum} from 'src/interfaces/wallet';
 import initialize from 'src/lib/api/base';
 import i18n from 'src/locale';
 import {RootState} from 'src/reducers';
@@ -46,7 +50,11 @@ type SelectServerProps = {
   page?: string;
 };
 
-export const COOKIE_INSTANCE_URL = 'cookie-instance-url';
+const {publicRuntimeConfig} = getConfig();
+
+export const COOKIE_INSTANCE_URL = 'cookie-instance-url-'.concat(
+  publicRuntimeConfig.appEnvironment,
+);
 
 const SelectServer = ({
   title,
@@ -60,8 +68,10 @@ const SelectServer = ({
 
   const {server, apiURL} = useSelector<RootState, ServerState>(state => state.serverState);
 
+  const {data: session} = useSession();
   const {servers, getAllInstances, loading} = useInstances();
   const {logout} = useAuthHook();
+  const {currentWallet} = useUserHook();
 
   const [, setCookies] = useCookies([COOKIE_INSTANCE_URL]);
   const [selectedServer, setSelectedServer] = useState<ServerListProps | null>(null);
@@ -85,7 +95,8 @@ const SelectServer = ({
     setSelectedServer(server);
 
     if (page === 'login') {
-      await router.replace({query: {rpc: `${server.apiUrl}`}}, undefined, {shallow: true});
+      const query = {...router.query, rpc: server.apiUrl};
+      await router.replace({query}, undefined, {shallow: true});
       setCookies(COOKIE_INSTANCE_URL, server.apiUrl);
 
       initialize({apiURL: server.apiUrl});
@@ -108,7 +119,17 @@ const SelectServer = ({
 
   const onLogout = async (server: ServerListProps) => {
     setCookies(COOKIE_INSTANCE_URL, server.apiUrl);
-    await logout(`/login?rpc=${server.apiUrl}`);
+    if (session?.user?.email) {
+      await logout(`/login?rpc=${server.apiUrl}&email=${session.user.email}`);
+    } else {
+      const walletType =
+        currentWallet.blockchainPlatform === BlockchainPlatform.NEAR
+          ? WalletTypeEnum.MYNEAR
+          : WalletTypeEnum.POLKADOT;
+
+      const query = `&network=${currentWallet.networkId}&platform=${currentWallet.blockchainPlatform}&walletType=${walletType}`;
+      await logout(`/login?rpc=${server.apiUrl}${query}`);
+    }
   };
 
   return (

src/hooks/use-instances.hooks.ts

@@ -201,12 +201,11 @@ export const useInstances = () => {
   };
 
   const loginWithEmail = async (apiURL: string, email: string) => {
-    setCookies(COOKIE_INSTANCE_URL, apiURL);
-
     const registered = await getCheckEmail(email, apiURL);
     if (!registered) throw new Error('AccountNotFound');
 
     await requestLink(email, apiURL);
+    setCookies(COOKIE_INSTANCE_URL, apiURL);
     await logout(`/login?rpc=${apiURL}&switchInstance=true&email=${email}`);
   };
 

src/lib/api/user.ts

@@ -117,7 +117,7 @@ export const getWalletAddress = async (userId: string): Promise<WalletDetail> =>
 export const getCheckEmail = async (email: string, apiURL?: string): Promise<boolean> => {
   if (apiURL) {
     const {data} = await axios({
-      url: `/users/email/${email}`,
+      url: `${apiURL}/users/email/${email}`,
       method: 'GET',
     });
     return data.status;