add walletconnect branch for signer popup #5285

packages/next-common/components/popupWithSigner/maybeWalletConnectSigner.jsx

@@ -0,0 +1,12 @@
+import { useWalletConnectAccounts } from "next-common/context/walletconnect";
+import MaybeSignerConnected from "./maybeSignerConnected";
+
+export default function MaybeWalletConnectSigner({ children }) {
+  const accounts = useWalletConnectAccounts();
+
+  return (
+    <MaybeSignerConnected extensionAccounts={accounts}>
+      {children}
+    </MaybeSignerConnected>
+  );
+}

packages/next-common/components/popupWithSigner/signerPopupWrapper.js

@@ -8,6 +8,7 @@ import CanBeAnyWalletSigner from "./canBeAnyWalletSigner";
 import { isKeyRegisteredUser } from "next-common/utils";
 import { PopupParamsProvider, usePopupParams } from "./context";
 import LoginPopup from "next-common/components/login/popup";
+import MaybeWalletConnectSigner from "./maybeWalletConnectSigner";
 
 function PopupImpl({ children }) {
   const user = useUser();
@@ -31,6 +32,10 @@ function PopupImpl({ children }) {
     return <MaybeSignetSigner>{children}</MaybeSignetSigner>;
   }
 
+  if (lastConnectedAccount?.wallet === WalletTypes.WALLETCONNECT) {
+    return <MaybeWalletConnectSigner>{children}</MaybeWalletConnectSigner>;
+  }
+
   return <MaybePolkadotSigner>{children}</MaybePolkadotSigner>;
 }
 

packages/next-common/context/walletconnect/index.jsx

@@ -7,6 +7,8 @@ import dayjs from "dayjs";
 import useChainInfo from "next-common/hooks/connect/useChainInfo";
 import { createContext, useContext, useEffect, useRef, useState } from "react";
 import { useChain } from "../chain";
+import { normalizedSubstrateAccounts } from "next-common/utils/substrate";
+import WalletTypes from "next-common/utils/consts/walletTypes";
 
 // FIXME: use company project id
 // `projectId` is configured on `https://cloud.walletconnect.com/`
@@ -29,6 +31,26 @@ export function useWalletConnect() {
   return useContext(WalletConnectContext);
 }
 
+export function useWalletConnectAccounts() {
+  const { fetchAddresses } = useWalletConnect();
+  const [accounts, setAccounts] = useState([]);
+
+  useEffect(() => {
+    fetchAddresses().then((addresses) => {
+      setAccounts(
+        normalizedSubstrateAccounts(
+          addresses.map((address) => {
+            return { address };
+          }),
+          WalletTypes.WALLETCONNECT,
+        ),
+      );
+    });
+  }, [fetchAddresses]);
+
+  return accounts;
+}
+
 export default function WalletConnectProvider({ children }) {
   const chain = useChain();
   const chainInfo = useChainInfo();