From 98d6bd528cdba6352688877c3be158ed125faad8 Mon Sep 17 00:00:00 2001 From: blushi Date: Tue, 6 Feb 2024 17:22:11 +0100 Subject: [PATCH 1/3] fix: use cosmos-kit provider custom modal to display qr code --- .../AccountConnectWalletModal.stories.tsx | 2 - .../AccountConnectWalletModal.tsx | 13 +----- .../organisms/LoginButton/LoginButton.tsx | 4 -- .../LoginButton/hooks/useConnectToWallet.tsx | 8 ++-- .../LoginButton/hooks/useLoginData.tsx | 28 +----------- .../organisms/LoginFlow/LoginFlow.tsx | 3 -- .../organisms/LoginModal/LoginModal.mock.ts | 10 +---- .../LoginModal/LoginModal.stories.tsx | 12 +---- .../organisms/LoginModal/LoginModal.tsx | 6 --- .../organisms/LoginModal/LoginModal.types.ts | 2 +- .../components/LoginModal.Mobile.tsx | 34 +++++++++----- .../RegistryLayout/RegistryLayout.Header.tsx | 4 -- web-marketplace/src/index.tsx | 44 ++++++++++--------- web-marketplace/src/lib/wallet/wallet.tsx | 6 ++- .../ProfileEdit/ProfileEdit.Settings.tsx | 2 - web-marketplace/vite.config.ts | 1 + 16 files changed, 63 insertions(+), 116 deletions(-) diff --git a/web-marketplace/src/components/organisms/AccountConnectWalletModal/AccountConnectWalletModal.stories.tsx b/web-marketplace/src/components/organisms/AccountConnectWalletModal/AccountConnectWalletModal.stories.tsx index 0f7d702420..83224e439f 100644 --- a/web-marketplace/src/components/organisms/AccountConnectWalletModal/AccountConnectWalletModal.stories.tsx +++ b/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, }; diff --git a/web-marketplace/src/components/organisms/AccountConnectWalletModal/AccountConnectWalletModal.tsx b/web-marketplace/src/components/organisms/AccountConnectWalletModal/AccountConnectWalletModal.tsx index 99d43f7108..6a1f0c0e44 100644 --- a/web-marketplace/src/components/organisms/AccountConnectWalletModal/AccountConnectWalletModal.tsx +++ b/web-marketplace/src/components/organisms/AccountConnectWalletModal/AccountConnectWalletModal.tsx @@ -6,14 +6,11 @@ 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 = ({ @@ -21,19 +18,11 @@ const AccountConnectWalletModal = ({ onClose, state = 'select', wallets, - qrCodeUri, - connecting, }: Props): JSX.Element => { const isSelectState = state === 'select'; - const isMobileState = state === 'wallet-mobile'; return ( - - {isSelectState && } - {isMobileState && ( - - )} - + {isSelectState && } ); }; diff --git a/web-marketplace/src/components/organisms/LoginButton/LoginButton.tsx b/web-marketplace/src/components/organisms/LoginButton/LoginButton.tsx index a5212ec264..64724dc9b1 100644 --- a/web-marketplace/src/components/organisms/LoginButton/LoginButton.tsx +++ b/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} /> diff --git a/web-marketplace/src/components/organisms/LoginButton/hooks/useConnectToWallet.tsx b/web-marketplace/src/components/organisms/LoginButton/hooks/useConnectToWallet.tsx index 3ec6416863..531142205d 100644 --- a/web-marketplace/src/components/organisms/LoginButton/hooks/useConnectToWallet.tsx +++ b/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 => { 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; diff --git a/web-marketplace/src/components/organisms/LoginButton/hooks/useLoginData.tsx b/web-marketplace/src/components/organisms/LoginButton/hooks/useLoginData.tsx index 395725bb3a..038b305691 100644 --- a/web-marketplace/src/components/organisms/LoginButton/hooks/useLoginData.tsx +++ b/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.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('select'); - const [connecting, setConnecting] = useState(false); - const [qrCodeUri, setQrCodeUri] = useState(); - - 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, }; diff --git a/web-marketplace/src/components/organisms/LoginFlow/LoginFlow.tsx b/web-marketplace/src/components/organisms/LoginFlow/LoginFlow.tsx index 9b1219f7f3..246c4e41e5 100644 --- a/web-marketplace/src/components/organisms/LoginFlow/LoginFlow.tsx +++ b/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} /> 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, }, ]; diff --git a/web-marketplace/src/components/organisms/LoginModal/LoginModal.stories.tsx b/web-marketplace/src/components/organisms/LoginModal/LoginModal.stories.tsx index e951a3f7de..ee877aad09 100644 --- a/web-marketplace/src/components/organisms/LoginModal/LoginModal.stories.tsx +++ b/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 = { @@ -32,13 +28,10 @@ const Template = (args: Props) => { }, 1000); }; - const walletsConfig = getWalletsMock({ - onWalletConnectClick: () => setModalState('wallet-mobile'), - }); return ( { Default.args = { onClose: () => undefined, qrCodeUri: uriMock, - connecting: false, }; Default.argTypes = { diff --git a/web-marketplace/src/components/organisms/LoginModal/LoginModal.tsx b/web-marketplace/src/components/organisms/LoginModal/LoginModal.tsx index 0ca2f08b55..417f952337 100644 --- a/web-marketplace/src/components/organisms/LoginModal/LoginModal.tsx +++ b/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; } @@ -23,11 +22,9 @@ const LoginModal = ({ wallets, socialProviders, qrCodeUri, - connecting, onEmailSubmit, }: Props): JSX.Element => { const isSelectState = state === 'select'; - const isMobileState = state === 'wallet-mobile'; return ( @@ -38,9 +35,6 @@ const LoginModal = ({ onEmailSubmit={onEmailSubmit} /> )} - {isMobileState && ( - - )} ); diff --git a/web-marketplace/src/components/organisms/LoginModal/LoginModal.types.ts b/web-marketplace/src/components/organisms/LoginModal/LoginModal.types.ts index 76097ecd18..a214291e56 100644 --- a/web-marketplace/src/components/organisms/LoginModal/LoginModal.types.ts +++ b/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; diff --git a/web-marketplace/src/components/organisms/LoginModal/components/LoginModal.Mobile.tsx b/web-marketplace/src/components/organisms/LoginModal/components/LoginModal.Mobile.tsx index 9606bb4f29..1b10264066 100644 --- a/web-marketplace/src/components/organisms/LoginModal/components/LoginModal.Mobile.tsx +++ b/web-marketplace/src/components/organisms/LoginModal/components/LoginModal.Mobile.tsx @@ -1,29 +1,39 @@ +import { WalletModalProps } 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 wallet = walletRepo?.wallets[0]; + const qrCodeUri = wallet?.qrUrl?.data; return ( - - - {connecting && CONNECTING_LABEL} - {qrCodeUri && QR_CODE_LABEL} - -
- {connecting && } - {qrCodeUri && } -
- + + + + {qrCodeUri ? QR_CODE_LABEL : CONNECTING_LABEL} + +
+ {qrCodeUri ? : } +
+ + ); }; diff --git a/web-marketplace/src/components/organisms/RegistryLayout/RegistryLayout.Header.tsx b/web-marketplace/src/components/organisms/RegistryLayout/RegistryLayout.Header.tsx index 4df6e0e262..ed5a0c3651 100644 --- a/web-marketplace/src/components/organisms/RegistryLayout/RegistryLayout.Header.tsx +++ b/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} /> ); diff --git a/web-marketplace/src/index.tsx b/web-marketplace/src/index.tsx index 29a9409dfb..63b709a67d 100644 --- a/web-marketplace/src/index.tsx +++ b/web-marketplace/src/index.tsx @@ -35,6 +35,7 @@ import { } from 'lib/wallet/wallet.constants'; import PageLoader from 'components/atoms/PageLoader'; +import { LoginModalMobile } from 'components/organisms/LoginModal/components/LoginModal.Mobile'; import { AuthApolloProvider } from './apollo'; import { LedgerProvider } from './ledger'; @@ -117,33 +118,34 @@ root.render( - chain.chain_name === 'regen')} - assetLists={assets.filter( - chain => chain.chain_name === 'regen', - )} - wallets={wallets} - walletConnectOptions={{ - signClient: { - projectId: import.meta.env.VITE_WALLET_CONNECT_PROJECT_ID, - relayUrl: WALLET_CONNECT_RELAY_URL, - metadata: walletConnectClientMeta, - }, - }} - > - - - + + chain.chain_name === 'regen')} + assetLists={assets.filter( + chain => chain.chain_name === 'regen', + )} + wallets={wallets} + walletModal={LoginModalMobile} + walletConnectOptions={{ + signClient: { + projectId: import.meta.env.VITE_WALLET_CONNECT_PROJECT_ID, + relayUrl: WALLET_CONNECT_RELAY_URL, + metadata: walletConnectClientMeta, + }, + }} + > + + }> - - - - + + + + diff --git a/web-marketplace/src/lib/wallet/wallet.tsx b/web-marketplace/src/lib/wallet/wallet.tsx index 1f93bb2eb7..6f940a6126 100644 --- a/web-marketplace/src/lib/wallet/wallet.tsx +++ b/web-marketplace/src/lib/wallet/wallet.tsx @@ -8,6 +8,7 @@ import { StdSignature } from '@cosmjs/launchpad'; import { OfflineSigner } from '@cosmjs/proto-signing'; import { WalletStatus } from '@cosmos-kit/core'; import { + useChain, useManager, useWallet as useCosmosKitWallet, useWalletClient, @@ -115,6 +116,8 @@ export const WalletProvider: React.FC> = ({ const { client: walletConnectClient } = useWalletClient(KEPLR_MOBILE); const { mainWallet } = useCosmosKitWallet(KEPLR_MOBILE); const { walletRepos } = useManager(); + const { closeView } = useChain('regen'); + const address = mainWallet?.getChainWallet('regen')?.address; const walletStatus = walletRepos[0]?.current?.walletStatus; @@ -123,6 +126,7 @@ export const WalletProvider: React.FC> = ({ const offlineSigner = walletConnectClient?.getOfflineSignerAmino?.('regen-1'); if (offlineSigner && address) { + closeView(); setWallet({ offlineSigner, address, @@ -131,7 +135,7 @@ export const WalletProvider: React.FC> = ({ setWalletConnect(true); } } - }, [address, walletStatus, walletConnectClient]); + }, [address, walletStatus, walletConnectClient, closeView]); const signArbitrary = useSignArbitrary({ setError, diff --git a/web-marketplace/src/pages/ProfileEdit/ProfileEdit.Settings.tsx b/web-marketplace/src/pages/ProfileEdit/ProfileEdit.Settings.tsx index 4addd2c500..d471aa5678 100644 --- a/web-marketplace/src/pages/ProfileEdit/ProfileEdit.Settings.tsx +++ b/web-marketplace/src/pages/ProfileEdit/ProfileEdit.Settings.tsx @@ -20,7 +20,6 @@ export const ProfileEditSettings = () => { const hasKeplrAccount = !!activeAccount?.addr; const { connect } = useWallet(); const { - connecting, isModalOpen, modalState, onButtonClick, @@ -75,7 +74,6 @@ export const ProfileEditSettings = () => { }, ]} state={modalState} - connecting={connecting} /> ); diff --git a/web-marketplace/vite.config.ts b/web-marketplace/vite.config.ts index 98ee1f4583..8b19cbc330 100644 --- a/web-marketplace/vite.config.ts +++ b/web-marketplace/vite.config.ts @@ -47,6 +47,7 @@ export default defineConfig(({ mode }) => { vitePluginRequire(), visualizer(), ], + sourcemap: true, define: isDev ? { global: {} } : { 'process.env': {} }, optimizeDeps: { esbuildOptions: { From 82eaeb83f027eb0169eb39510efaad68094a7e5a Mon Sep 17 00:00:00 2001 From: blushi Date: Tue, 6 Feb 2024 17:25:03 +0100 Subject: [PATCH 2/3] chore: rm sourceMap vite --- web-marketplace/vite.config.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/web-marketplace/vite.config.ts b/web-marketplace/vite.config.ts index 8b19cbc330..98ee1f4583 100644 --- a/web-marketplace/vite.config.ts +++ b/web-marketplace/vite.config.ts @@ -47,7 +47,6 @@ export default defineConfig(({ mode }) => { vitePluginRequire(), visualizer(), ], - sourcemap: true, define: isDev ? { global: {} } : { 'process.env': {} }, optimizeDeps: { esbuildOptions: { From 6bffaa4eb36180ea1f51ad2d871e09b8b19f1f93 Mon Sep 17 00:00:00 2001 From: blushi Date: Wed, 7 Feb 2024 10:58:50 +0100 Subject: [PATCH 3/3] fix: add WalletStatus.Connecting logic --- .../components/LoginModal.Mobile.tsx | 45 ++++++++++++++++--- 1 file changed, 40 insertions(+), 5 deletions(-) diff --git a/web-marketplace/src/components/organisms/LoginModal/components/LoginModal.Mobile.tsx b/web-marketplace/src/components/organisms/LoginModal/components/LoginModal.Mobile.tsx index 1b10264066..ad2d821e6f 100644 --- a/web-marketplace/src/components/organisms/LoginModal/components/LoginModal.Mobile.tsx +++ b/web-marketplace/src/components/organisms/LoginModal/components/LoginModal.Mobile.tsx @@ -1,4 +1,5 @@ -import { WalletModalProps } from '@cosmos-kit/core'; +import { useEffect, useState } from 'react'; +import { State, WalletModalProps, WalletStatus } from '@cosmos-kit/core'; import { Box } from '@mui/material'; import QRCode from 'qrcode.react'; @@ -21,16 +22,50 @@ const LoginModalMobile = ({ const onCloseModal = () => { setOpen(false); }; - const wallet = walletRepo?.wallets[0]; - const qrCodeUri = wallet?.qrUrl?.data; + const [qrState, setQRState] = useState(State.Init); // state of QRCode + const [qrMsg, setQRMsg] = useState(''); // message of QRCode error + const [connecting, setConnecting] = useState(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 ( - {qrCodeUri ? QR_CODE_LABEL : CONNECTING_LABEL} + {connecting ? CONNECTING_LABEL : qrCodeUri && QR_CODE_LABEL}
- {qrCodeUri ? : } + {connecting ? ( + + ) : ( + qrCodeUri && + )}