refetch csrf token after login and fix connect wallet from contract page

lib/hooks/useGetCsrfToken.tsx

@@ -10,7 +10,7 @@ import useFetch from 'lib/hooks/useFetch';
 export default function useGetCsrfToken() {
   const nodeApiFetch = useFetch();
 
-  useQuery({
+  return useQuery({
     queryKey: getResourceKey('csrf'),
     queryFn: async() => {
       if (!isNeedProxy()) {

ui/address/contract/methods/ContractConnectWallet.tsx

@@ -5,15 +5,29 @@ import config from 'configs/app';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useWeb3Wallet from 'lib/web3/useWallet';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import useIsAuth from 'ui/snippets/auth/useIsAuth';
+import useSignInWithWallet from 'ui/snippets/auth/useSignInWithWallet';
 
 interface Props {
   isLoading?: boolean;
 }
 
 const ContractConnectWallet = ({ isLoading }: Props) => {
+  const signInWithWallet = useSignInWithWallet({ source: 'Smart contracts' });
+  const isAuth = useIsAuth();
   const web3Wallet = useWeb3Wallet({ source: 'Smart contracts' });
   const isMobile = useIsMobile();
 
+  const shouldSignIn = config.features.account.isEnabled && !isAuth;
+
+  const handleConnectClick = React.useCallback(() => {
+    if (shouldSignIn) {
+      signInWithWallet.start();
+    } else {
+      web3Wallet.connect();
+    }
+  }, [ signInWithWallet, web3Wallet, shouldSignIn ]);
+
   const content = (() => {
     if (!web3Wallet.isConnected) {
       return (
@@ -21,10 +35,10 @@ const ContractConnectWallet = ({ isLoading }: Props) => {
           <span>Disconnected</span>
           <Button
             ml={ 3 }
-            onClick={ web3Wallet.connect }
+            onClick={ handleConnectClick }
             size="sm"
             variant="outline"
-            isLoading={ web3Wallet.isOpen }
+            isLoading={ shouldSignIn ? signInWithWallet.isPending : web3Wallet.isOpen }
             loadingText="Connect wallet"
           >
             Connect wallet

ui/snippets/auth/AuthModal.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 
 import type { Screen, ScreenSuccess } from './types';
 
+import useGetCsrfToken from 'lib/hooks/useGetCsrfToken';
 import * as mixpanel from 'lib/mixpanel';
 import IconSvg from 'ui/shared/IconSvg';
 
@@ -34,6 +35,7 @@ const AuthModal = ({ initialScreen, onClose, mixpanelConfig }: Props) => {
 
   const router = useRouter();
   const profileQuery = useProfileQuery();
+  const csrfQuery = useGetCsrfToken();
 
   React.useEffect(() => {
     if ('isAuth' in initialScreen && initialScreen.isAuth) {
@@ -79,11 +81,12 @@ const AuthModal = ({ initialScreen, onClose, mixpanelConfig }: Props) => {
     }
 
     const { data } = await profileQuery.refetch();
+    await csrfQuery.refetch();
     if (data) {
       onNextStep({ ...screen, profile: data });
     }
     // TODO @tom2drum handle error case
-  }, [ initialScreen, mixpanelConfig?.account_link_info.source, onNextStep, profileQuery ]);
+  }, [ initialScreen, mixpanelConfig?.account_link_info.source, onNextStep, profileQuery, csrfQuery ]);
 
   const onModalClose = React.useCallback(() => {
     onClose(isSuccess);

ui/snippets/user/wallet/UserWalletDesktop.tsx

@@ -14,7 +14,7 @@ interface Props {
   buttonVariant?: ButtonProps['variant'];
 }
 
-const WalletDesktop = ({ buttonSize, buttonVariant = 'header' }: Props) => {
+const UserWalletDesktop = ({ buttonSize, buttonVariant = 'header' }: Props) => {
   const walletMenu = useDisclosure();
 
   const web3Wallet = useWeb3Wallet({ source: 'Header' });
@@ -65,4 +65,4 @@ const WalletDesktop = ({ buttonSize, buttonVariant = 'header' }: Props) => {
   );
 };
 
-export default React.memo(WalletDesktop);
+export default React.memo(UserWalletDesktop);