fix: QR code not displayed on first attempt to connect via Wallet Connect on desktop / chromium browsers

web-marketplace/src/components/organisms/AccountConnectWalletModal/AccountConnectWalletModal.stories.tsx

@@ -44,6 +44,4 @@ const Template = (args: Props) => {
 
 Default.args = {
   onClose: () => undefined,
-  qrCodeUri: uriMock,
-  connecting: false,
 };

web-marketplace/src/components/organisms/AccountConnectWalletModal/AccountConnectWalletModal.tsx

@@ -6,34 +6,23 @@ import {
   AccountConnectModalState,
   LoginProvider,
 } from './AccountConnectWalletModal.types';
-import { LoginModalMobile } from './components/AccountConnectWalletModal.Mobile';
 import { LoginModalSelect } from './components/AccountConnectWalletModal.Select';
 
 export interface Props extends RegenModalProps {
   state?: AccountConnectModalState;
   wallets: LoginProvider[];
-  qrCodeUri?: string;
-  connecting: boolean;
 }
 
 const AccountConnectWalletModal = ({
   open,
   onClose,
   state = 'select',
   wallets,
-  qrCodeUri,
-  connecting,
 }: Props): JSX.Element => {
   const isSelectState = state === 'select';
-  const isMobileState = state === 'wallet-mobile';
   return (
     <Modal open={open} onClose={onClose}>
-      <Box>
-        {isSelectState && <LoginModalSelect wallets={wallets} />}
-        {isMobileState && (
-          <LoginModalMobile qrCodeUri={qrCodeUri} connecting={connecting} />
-        )}
-      </Box>
+      <Box>{isSelectState && <LoginModalSelect wallets={wallets} />}</Box>
     </Modal>
   );
 };

web-marketplace/src/components/organisms/LoginButton/LoginButton.tsx

@@ -23,11 +23,9 @@ const LoginButton = ({ size = 'small' }: Props) => {
   const styles = useLoginButtonStyles();
   const { wallet } = useWallet();
   const {
-    connecting,
     isModalOpen,
     modalState,
     onModalClose,
-    qrCodeUri,
     walletsUiConfig,
     onButtonClick,
   } = useLoginData();
@@ -59,8 +57,6 @@ const LoginButton = ({ size = 'small' }: Props) => {
           onModalClose={onModalClose}
           wallets={walletsUiConfig}
           modalState={modalState}
-          qrCodeUri={qrCodeUri}
-          connecting={connecting}
         />
       </div>
     </>

web-marketplace/src/components/organisms/LoginButton/hooks/useConnectToWallet.tsx

@@ -1,5 +1,6 @@
 import { useCallback } from 'react';
 import { WalletRepo } from '@cosmos-kit/core';
+import { useChain } from '@cosmos-kit/react-lite';
 
 import { UseStateSetter } from 'types/react/use-state';
 import { WalletContextType } from 'lib/wallet/wallet';
@@ -22,8 +23,8 @@ export const useConnectToWallet = ({
   connect,
   connectWalletConnect,
   onModalClose,
-  setModalState,
 }: Props): Response => {
+  const { openView } = useChain('regen');
   const connectToWallet = useCallback(
     async ({ walletType }: ConnectParams): Promise<void> => {
       if (connect && walletType === WalletType.Keplr) {
@@ -34,11 +35,12 @@ export const useConnectToWallet = ({
         connectWalletConnect &&
         walletType === WalletType.WalletConnectKeplr
       ) {
-        setModalState('wallet-mobile');
+        onModalClose();
+        openView();
         await connectWalletConnect(KEPLR_MOBILE, true);
       }
     },
-    [connect, connectWalletConnect, onModalClose, setModalState],
+    [connect, connectWalletConnect, onModalClose, openView],
   );
 
   return connectToWallet;

web-marketplace/src/components/organisms/LoginButton/hooks/useLoginData.tsx

@@ -1,5 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { State, WalletStatus } from '@cosmos-kit/core';
+import { useCallback, useMemo, useState } from 'react';
 import { useManager } from '@cosmos-kit/react-lite';
 
 import { useWallet } from 'lib/wallet/wallet';
@@ -14,32 +13,9 @@ export const useLoginData = () => {
   const { wallet, connect } = useWallet();
 
   const { walletRepos } = useManager();
-  const [qrState, setQRState] = useState<State>(State.Init); // state of QRCode
-
-  const current = walletRepos[0]?.current;
-  (current?.client as any)?.setActions?.({
-    qrUrl: {
-      state: setQRState,
-    },
-  });
-
-  const walletStatus = current?.walletStatus;
-  const message = current?.message;
-  const qrUrl = current?.qrUrl;
 
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [modalState, setModalState] = useState<LoginModalState>('select');
-  const [connecting, setConnecting] = useState<boolean>(false);
-  const [qrCodeUri, setQrCodeUri] = useState<string | undefined>();
-
-  useEffect(() => {
-    if (isModalOpen) {
-      setConnecting(
-        walletStatus === WalletStatus.Connecting && qrState === State.Init,
-      );
-      setQrCodeUri(qrUrl?.data);
-    }
-  }, [isModalOpen, qrState, walletStatus, qrUrl?.data, message]);
 
   const onButtonClick = useCallback(
     (): void => setIsModalOpen(true),
@@ -72,8 +48,6 @@ export const useLoginData = () => {
     isModalOpen,
     walletsUiConfig,
     modalState,
-    qrCodeUri,
-    connecting,
     onButtonClick,
     onModalClose,
   };

web-marketplace/src/components/organisms/LoginFlow/LoginFlow.tsx

@@ -22,7 +22,6 @@ type Props = {
   wallets: LoginProvider[];
   modalState: LoginModalState;
   qrCodeUri?: string;
-  connecting: boolean;
 };
 
 const LoginFlow = ({
@@ -31,7 +30,6 @@ const LoginFlow = ({
   wallets,
   modalState,
   qrCodeUri,
-  connecting,
 }: Props) => {
   const {
     isConfirmationModalOpen,
@@ -59,7 +57,6 @@ const LoginFlow = ({
         }}
         state={modalState}
         qrCodeUri={qrCodeUri}
-        connecting={connecting}
       />
       <EmailConfirmationModal
         resendText={getResendCodeLabel({ resendTimeLeft })}

web-marketplace/src/components/organisms/LoginModal/LoginModal.mock.ts

@@ -1,12 +1,6 @@
 import { LoginProvider } from './LoginModal.types';
 
-type GetWalletsMockParams = {
-  onWalletConnectClick: () => void;
-};
-
-export const getWalletsMock = ({
-  onWalletConnectClick,
-}: GetWalletsMockParams): LoginProvider[] => [
+export const wallets: LoginProvider[] = [
   {
     name: 'Keplr Wallet',
     description: 'Keplr Chrome Extension',
@@ -18,7 +12,7 @@ export const getWalletsMock = ({
     name: 'WalletConnect',
     description: 'Keplr Mobile',
     imageUrl: '/wallets/walletconnect-keplr.png',
-    onClick: onWalletConnectClick,
+    onClick: () => void 0,
   },
 ];
 

web-marketplace/src/components/organisms/LoginModal/LoginModal.stories.tsx

@@ -2,11 +2,7 @@ import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { LoginModal, Props } from './LoginModal';
-import {
-  getWalletsMock,
-  socialProvidersMock,
-  uriMock,
-} from './LoginModal.mock';
+import { socialProvidersMock, uriMock, wallets } from './LoginModal.mock';
 import { LoginModalState } from './LoginModal.types';
 
 const meta: Meta<typeof LoginModal> = {
@@ -32,13 +28,10 @@ const Template = (args: Props) => {
     }, 1000);
   };
 
-  const walletsConfig = getWalletsMock({
-    onWalletConnectClick: () => setModalState('wallet-mobile'),
-  });
   return (
     <LoginModal
       {...args}
-      wallets={walletsConfig}
+      wallets={wallets}
       socialProviders={socialProvidersMock}
       state={modalState}
       open={open}
@@ -50,7 +43,6 @@ const Template = (args: Props) => {
 Default.args = {
   onClose: () => undefined,
   qrCodeUri: uriMock,
-  connecting: false,
 };
 
 Default.argTypes = {

web-marketplace/src/components/organisms/LoginModal/LoginModal.tsx

@@ -12,7 +12,6 @@ export interface Props extends RegenModalProps {
   wallets: LoginProvider[];
   socialProviders: LoginProvider[];
   qrCodeUri?: string;
-  connecting: boolean;
   onEmailSubmit: (values: EmailFormSchemaType) => Promise<void>;
 }
 
@@ -23,11 +22,9 @@ const LoginModal = ({
   wallets,
   socialProviders,
   qrCodeUri,
-  connecting,
   onEmailSubmit,
 }: Props): JSX.Element => {
   const isSelectState = state === 'select';
-  const isMobileState = state === 'wallet-mobile';
   return (
     <Modal open={open} onClose={onClose}>
       <Box>
@@ -38,9 +35,6 @@ const LoginModal = ({
             onEmailSubmit={onEmailSubmit}
           />
         )}
-        {isMobileState && (
-          <LoginModalMobile qrCodeUri={qrCodeUri} connecting={connecting} />
-        )}
       </Box>
     </Modal>
   );

web-marketplace/src/components/organisms/LoginModal/LoginModal.types.ts

@@ -1,4 +1,4 @@
-export type LoginModalState = 'select' | 'wallet-mobile';
+export type LoginModalState = 'select';
 
 export type LoginProvider = {
   name: string;

web-marketplace/src/components/organisms/LoginModal/components/LoginModal.Mobile.tsx

@@ -1,29 +1,74 @@
+import { useEffect, useState } from 'react';
+import { State, WalletModalProps, WalletStatus } from '@cosmos-kit/core';
 import { Box } from '@mui/material';
 import QRCode from 'qrcode.react';
 
 import { Center } from 'web-components/src/components/box';
 import { Loading } from 'web-components/src/components/loading';
+import Modal from 'web-components/src/components/modal';
 import { Title } from 'web-components/src/components/typography';
 
 import { CONNECTING_LABEL, QR_CODE_LABEL } from './LoginModal.Mobile.constants';
 
 export interface Props {
   qrCodeUri?: string;
-  connecting: boolean;
 }
 
-const LoginModalMobile = ({ qrCodeUri, connecting }: Props): JSX.Element => {
+const LoginModalMobile = ({
+  isOpen,
+  setOpen,
+  walletRepo,
+}: WalletModalProps) => {
+  const onCloseModal = () => {
+    setOpen(false);
+  };
+  const [qrState, setQRState] = useState<State>(State.Init); // state of QRCode
+  const [qrMsg, setQRMsg] = useState<string>(''); // message of QRCode error
+  const [connecting, setConnecting] = useState<boolean>(false);
+
+  const current = walletRepo?.current;
+
+  (current?.client as any)?.setActions?.({
+    qrUrl: {
+      state: setQRState,
+      message: setQRMsg,
+    },
+  });
+
+  const walletStatus = current?.walletStatus;
+  const message = current?.message;
+
+  useEffect(() => {
+    if (isOpen) {
+      switch (walletStatus) {
+        case WalletStatus.Connecting:
+          if (qrState === State.Init) {
+            setConnecting(true);
+          } else {
+            setConnecting(false);
+          }
+          break;
+      }
+    }
+  }, [qrState, walletStatus, qrMsg, message, isOpen]);
+
+  const qrCodeUri = current?.qrUrl?.data;
+
   return (
-    <Box sx={{ minHeight: 400 }}>
-      <Title variant="h5" sx={{ mb: 7.5, textAlign: 'center' }}>
-        {connecting && CONNECTING_LABEL}
-        {qrCodeUri && QR_CODE_LABEL}
-      </Title>
-      <Center sx={{ pt: 9, height: 340 }}>
-        {connecting && <Loading />}
-        {qrCodeUri && <QRCode size={300} value={qrCodeUri} />}
-      </Center>
-    </Box>
+    <Modal open={isOpen} onClose={onCloseModal}>
+      <Box sx={{ minHeight: 400 }}>
+        <Title variant="h5" sx={{ mb: 7.5, textAlign: 'center' }}>
+          {connecting ? CONNECTING_LABEL : qrCodeUri && QR_CODE_LABEL}
+        </Title>
+        <Center sx={{ pt: 9, height: 340 }}>
+          {connecting ? (
+            <Loading />
+          ) : (
+            qrCodeUri && <QRCode size={300} value={qrCodeUri} />
+          )}
+        </Center>
+      </Box>
+    </Modal>
   );
 };
 

web-marketplace/src/components/organisms/RegistryLayout/RegistryLayout.Header.tsx

@@ -80,12 +80,10 @@ const RegistryLayoutHeader: React.FC = () => {
     : theme.palette.primary.light;
 
   const {
-    connecting,
     isModalOpen,
     modalState,
     onButtonClick,
     onModalClose,
-    qrCodeUri,
     walletsUiConfig,
   } = useLoginData();
 
@@ -147,8 +145,6 @@ const RegistryLayoutHeader: React.FC = () => {
         // so there's no wallet available on mobile and only Keplr on desktop
         wallets={checkIsMobile() ? [] : [walletsUiConfig[0]]}
         modalState={modalState}
-        qrCodeUri={qrCodeUri}
-        connecting={connecting}
       />
     </>
   );