fix: APP-833 fix wallet connect (#2779)

Author: blushi

bun.lock

@@ -11,13 +11,13 @@
     "@cosmjs/launchpad": "^0.27.0",
     "@cosmjs/proto-signing": "^0.36.1",
     "@cosmjs/stargate": "^0.36.1",
-    "@cosmos-kit/keplr-mobile": "^2.6.7",
-    "@cosmos-kit/react-lite": "^2.6.7",
     "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
     "@google-cloud/translate": "^8.5.0",
     "@hookform/resolvers": "^5.0.1",
+    "@interchain-kit/core": "^0.7.0",
+    "@interchain-kit/react": "^0.7.0",
     "@keplr-wallet/provider": "^0.11.10",
     "@keplr-wallet/stores": "^0.11.10",
     "@lingui/core": "^5.1.2",
@@ -53,7 +53,7 @@
     "analytics-plugin-do-not-track": "^0.1.5",
     "auth0-js": "^9.18.0",
     "axios": "^0.21.1",
-    "chain-registry": "^1.18.0",
+    "chain-registry": "^2.0.125",
     "clientjs": "^0.1.11",
     "dayjs": "^1.10.7",
     "formik": "^2.4.6",
@@ -177,8 +177,5 @@
     "vite-plugin-svgr": "^3.2.0",
     "vite-tsconfig-paths": "^4.2.0",
     "vitest": "^2.0.5"
-  },
-  "overrides": {
-    "@walletconnect/sign-client": "2.10.4"
   }
 }

web-marketplace/package.json

@@ -1,29 +1,27 @@
 'use client';
-import { wallets } from '@cosmos-kit/keplr-mobile';
-import { ChainProvider } from '@cosmos-kit/react-lite';
-import { assets, chains } from 'chain-registry';
+import { WCCosmosWallet, WCWallet } from '@interchain-kit/core';
+import { ChainProvider } from '@interchain-kit/react';
+import { assetLists, chains } from 'chain-registry';
 
 import {
-  WALLET_CONNECT_RELAY_URL,
   walletConnectClientMeta,
+  walletConnectOption,
 } from 'lib/wallet/wallet.constants';
 
 import { LoginModalMobile } from 'components/organisms/LoginModal/components/LoginModal.Mobile';
 
+const desktopWalletConnect = new WCWallet(walletConnectOption, {
+  metadata: walletConnectClientMeta,
+});
+desktopWalletConnect.setNetworkWallet('cosmos', new WCCosmosWallet());
+
 export function ChainWrapper({ children }: React.PropsWithChildren) {
   return (
     <ChainProvider
-      chains={chains.filter(chain => chain.chain_name === 'regen')}
-      assetLists={assets.filter(chain => chain.chain_name === 'regen')}
-      wallets={wallets}
-      walletModal={LoginModalMobile}
-      walletConnectOptions={{
-        signClient: {
-          projectId: process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID || '',
-          relayUrl: WALLET_CONNECT_RELAY_URL,
-          metadata: walletConnectClientMeta,
-        },
-      }}
+      chains={chains.filter(chain => chain.chainName === 'regen')}
+      assetLists={assetLists.filter(chain => chain.chainName === 'regen')}
+      wallets={[desktopWalletConnect]}
+      walletModal={props => <LoginModalMobile {...props} />}
     >
       {children}
     </ChainProvider>

web-marketplace/src/app/ChainWrapper.tsx

@@ -1,6 +1,7 @@
 import { msg } from '@lingui/core/macro';
 
 import { TranslatorType } from 'lib/i18n/i18n.types';
+import { WALLET_CONNECT } from 'lib/wallet/wallet.constants';
 import { ConnectParams } from 'lib/wallet/wallet.types';
 import { WalletType } from 'lib/wallet/walletsConfig/walletsConfig.types';
 
@@ -25,8 +26,7 @@ export const getAllWalletsUiConfig = ({
     onClick: () => connectToWallet({ walletType: WalletType.Keplr }),
   },
   {
-    // eslint-disable-next-line lingui/no-unlocalized-strings
-    name: 'WalletConnect',
+    name: WALLET_CONNECT,
     description: _(msg`Keplr Mobile`),
     image: walletConnectKeplr,
     onClick: () =>

web-marketplace/src/components/organisms/LoginButton/LoginButton.config.ts

@@ -1,7 +1,8 @@
 import { msg } from '@lingui/core/macro';
 
-// eslint-disable-next-line lingui/no-unlocalized-strings
-export const mobileWalletsName = ['WalletConnect'];
+import { WALLET_CONNECT } from 'lib/wallet/wallet.constants';
+
+export const mobileWalletsName = [WALLET_CONNECT];
 
 export const RESEND_TEXT = msg`Don’t see anything?`;
 export const RESEND_SUCCES = msg`New confirmation code sent`;

web-marketplace/src/components/organisms/LoginButton/LoginButton.constants.ts

@@ -1,18 +1,16 @@
 import { useCallback } from 'react';
-import { WalletRepo } from '@cosmos-kit/core';
-import { useChain } from '@cosmos-kit/react-lite';
+import { useChain, useChainWallet } from '@interchain-kit/react';
 
 import { UseStateSetter } from 'types/react/use-state';
 import { WalletContextType } from 'lib/wallet/wallet';
-import { KEPLR_MOBILE } from 'lib/wallet/wallet.constants';
+import { WALLET_CONNECT } from 'lib/wallet/wallet.constants';
 import { ConnectParams } from 'lib/wallet/wallet.types';
 import { WalletType } from 'lib/wallet/walletsConfig/walletsConfig.types';
 
 import { LoginModalState } from 'components/organisms/LoginModal/LoginModal.types';
 
 type Props = {
   connect?: WalletContextType['connect'];
-  connectWalletConnect?: WalletRepo['connect'];
   setModalState: UseStateSetter<LoginModalState>;
   onModalClose: () => void;
   isConnectingRef?: React.MutableRefObject<boolean>;
@@ -22,11 +20,14 @@ type Response = ({ walletType }: ConnectParams) => Promise<void>;
 
 export const useConnectToWallet = ({
   connect,
-  connectWalletConnect,
   onModalClose,
   isConnectingRef,
 }: Props): Response => {
   const { openView } = useChain('regen');
+  const { connect: connectWalletConnect } = useChainWallet(
+    'regen',
+    WALLET_CONNECT,
+  );
 
   const connectToWallet = useCallback(
     async ({ walletType }: ConnectParams): Promise<void> => {
@@ -35,13 +36,10 @@ export const useConnectToWallet = ({
         if (isConnectingRef) isConnectingRef.current = true;
         onModalClose();
       }
-      if (
-        connectWalletConnect &&
-        walletType === WalletType.WalletConnectKeplr
-      ) {
+      if (walletType === WalletType.WalletConnectKeplr) {
         onModalClose();
         openView();
-        await connectWalletConnect(KEPLR_MOBILE, true);
+        await connectWalletConnect();
       }
     },
     [connect, connectWalletConnect, isConnectingRef, onModalClose, openView],

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

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useManager } from '@cosmos-kit/react-lite';
 import { useLingui } from '@lingui/react';
 import { DRAFT_ID } from 'legacy-pages/Dashboard/MyProjects/MyProjects.constants';
 import { useRouter } from 'next/navigation';
@@ -22,7 +21,7 @@ export const useLoginData = ({
 }) => {
   const { _ } = useLingui();
   const { wallet, connect } = useWallet();
-  const { walletRepos } = useManager();
+  // const { walletRepos } = useManager();
 
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [modalState, setModalState] = useState<LoginModalState>('select');
@@ -45,7 +44,6 @@ export const useLoginData = ({
     onModalClose,
     setModalState,
     connect,
-    connectWalletConnect: walletRepos[0]?.connect, // only one walletRepos for regen
   });
 
   const walletsUiConfig = useMemo(