Pulling refs/heads/staging into test-staging

components/account/WalletSelect.tsx

@@ -75,22 +75,38 @@ const WalletSelect = () => {
       <h3 className="my-4 text-lg font-bold">Crypto Wallet</h3>
       <div className="flex justify-between gap-6">
         {isMobileDevice ? (
-          <Link
-            href="https://novawallet.io/"
-            className="flex h-[56px] w-full items-center justify-center rounded-md border text-center"
-            target="_blank"
-          >
-            <Image
-              src="/icons/nova.png"
-              alt={"wallet.logo.alt"}
-              width={30}
-              height={30}
-              quality={100}
-            />
-            <div className="relative ml-4 font-medium">
-              <span>Nova Wallet</span>
+          <div>
+            <Link
+              href="https://novawallet.io/"
+              className="flex h-[56px] w-full items-center justify-center rounded-md border text-center"
+              target="_blank"
+            >
+              <Image
+                src="/icons/nova.png"
+                alt={"wallet.logo.alt"}
+                width={30}
+                height={30}
+                quality={100}
+              />
+              <div className="relative ml-4 font-medium">
+                <span>Nova Wallet</span>
+              </div>
+            </Link>
+            <div className="mt-2">
+              <span className="mb-2 text-sm font-semibold">
+                Nova Wallet instructions:
+              </span>
+              <ol className="list-decimal pl-4 text-xs">
+                <li>Open Nova Wallet app on your mobile device.</li>
+                <li>Navigate to "Browser" on the bottom menu.</li>
+                <li>Search for and select "Zeitgeist".</li>
+                <li>
+                  Once inside Zeitgeist: press "Connect Wallet" in the top menu
+                  and allow access when prompted.
+                </li>
+              </ol>
             </div>
-          </Link>
+          </div>
         ) : (
           supportedWallets
             .filter((w) => w.extensionName !== "web3auth")

lib/state/wallet-connect.ts

@@ -8,7 +8,7 @@ import {
 import { WalletConnectSigner } from "lib/util/wallet-connect-signer";
 import { ZTG_CHAIN_ID } from "lib/constants";
 
-const WC_PROJECT_ID = process.env.NEXT_PUBLIC_WC_PROJECT_ID;
+const WC_PROJECT_ID = process.env.NEXT_PUBLIC_WC_PROJECT_ID ?? "";
 const DOMAIN_URL = "https://app.zeitgeist.pm/";
 
 const walletConnectParams = {
@@ -34,16 +34,12 @@ const chains = Object.values(requiredNamespaces)
   .map((namespace) => namespace.chains)
   .flat();
 
-if (!WC_PROJECT_ID) {
-  throw new Error("Missing WalletConnect project ID");
-}
-
-const modal = new WalletConnectModal({
-  projectId: WC_PROJECT_ID,
-  chains,
-});
+let provider;
+let modal;
 
-const provider = await UniversalProvider.init(walletConnectParams);
+const setProvider = async () => {
+  provider = await UniversalProvider.init(walletConnectParams);
+};
 
 export class WalletConnect implements Wallet {
   extensionName = "walletconnect";
@@ -65,6 +61,15 @@ export class WalletConnect implements Wallet {
     onModalOpen?: () => void;
     onModalClose?: () => void;
   } = {}) {
+    if (!WC_PROJECT_ID) return;
+
+    setProvider();
+
+    modal = new WalletConnectModal({
+      projectId: WC_PROJECT_ID,
+      chains,
+    });
+
     modal.subscribeModal((state) => {
       state.open ? onModalOpen?.() : onModalClose?.();
     });

lib/state/wallet.tsx

@@ -26,6 +26,7 @@ import { web3AuthWalletInstance } from "./util/web3auth-config";
 import { WalletConnect } from "./wallet-connect";
 
 const DAPP_NAME = "zeitgeist";
+const WC_PROJECT_ID = process.env.NEXT_PUBLIC_WC_PROJECT_ID;
 
 export type UseWallet = WalletState & {
   /**
@@ -222,7 +223,7 @@ export const supportedWallets = [
   new PolkadotjsWallet(),
   new SubWallet(),
   new TalismanWallet(),
-  new WalletConnect(),
+  ...(WC_PROJECT_ID ? [new WalletConnect()] : []),
   web3AuthWalletInstance,
 ];