fix(ord-connect): mobile and ssr (#289)

* fix(mobile): always enable mobile * fix(ssr): disable ssr for OrdConnectKit due to hydration error
ordzaar · Apr 23, 2024 · 4c537a6 · 4c537a6
1 parent 746eff0
commit 4c537a6
Show file tree

Hide file tree

Showing 4 changed files with 2,806 additions and 3,428 deletions.
diff --git a/packages/ord-connect/src/components/OrdConnectKit.tsx b/packages/ord-connect/src/components/OrdConnectKit.tsx
@@ -1,5 +1,6 @@
 import { ReactNode } from "react";
 
+import useHasMounted from "../hooks/useHasMounted";
 import { useOrdConnect } from "../providers/OrdConnectProvider";
 
 import { PostConnectButton } from "./PostConnectButton";
@@ -32,6 +33,8 @@ export function OrdConnectKit({
   const { address, network, isModalOpen, openModal, closeModal } =
     useOrdConnect();
 
+  const hasMounted = useHasMounted();
+
   const renderConnectButton = () => {
     if (hideConnectButton) {
       return null;
@@ -50,7 +53,7 @@ export function OrdConnectKit({
     );
   };
 
-  return (
+  return hasMounted ? (
     <>
       {renderConnectButton()}
       <SelectWalletModal
@@ -59,5 +62,5 @@ export function OrdConnectKit({
         renderAvatar={renderAvatar}
       />
     </>
-  );
+  ) : null;
 }
diff --git a/packages/ord-connect/src/components/SelectWalletModal/index.tsx b/packages/ord-connect/src/components/SelectWalletModal/index.tsx
@@ -55,7 +55,6 @@ export function SelectWalletModal({
   } = useOrdConnect();
   const [errorMessage, setErrorMessage] = useState<string>("");
   const isMobile = isMobileUserAgent();
-  const isSupportedDevice = !isMobile;
 
   const onError = useCallback(
     (
@@ -426,9 +425,7 @@ export function SelectWalletModal({
               <Dialog.Panel className="panel">
                 <section className="panel-title-container">
                   <Dialog.Title as="h3" className="panel-title">
-                    {isSupportedDevice
-                      ? "Choose Bitcoin wallet to connect"
-                      : "Unsupported device"}
+                    Choose Bitcoin wallet to connect
                   </Dialog.Title>
                   <button
                     type="button"
@@ -440,74 +437,68 @@ export function SelectWalletModal({
                 </section>
 
                 <section className="panel-content-container">
-                  {isSupportedDevice ? (
-                    <section className="panel-content-inner-container">
-                      {!isMobile && ( // TODO:: remove this once unisat supported on mobile devices
-                        <>
-                          <WalletButton
-                            wallet={Wallet.UNISAT}
-                            subtitle="Coming soon on mobile browsing"
-                            onConnect={onConnectUnisatWallet}
-                            icon={UnisatWalletIcon}
-                            setErrorMessage={setErrorMessage}
-                            isDisabled={isMobile} // disable unisat on mobile until it is supported
-                            isMobileDevice={isMobile}
-                            renderAvatar={renderAvatar}
-                          />
-                          <hr className="horizontal-separator" />
-                        </>
-                      )}
-                      <WalletButton
-                        wallet={Wallet.XVERSE}
-                        subtitle="Available on Xverse app"
-                        onConnect={onConnectXverseWallet}
-                        icon={XverseWalletIcon}
-                        setErrorMessage={setErrorMessage}
-                        isMobileDevice={isMobile}
-                        renderAvatar={renderAvatar}
-                      />
-                      {!isMobile && (
-                        <>
-                          <hr className="horizontal-separator" />
-                          <WalletButton
-                            wallet={Wallet.MAGICEDEN}
-                            subtitle="Coming soon on mobile browsing"
-                            onConnect={onConnectMagicEdenWallet}
-                            icon={MagicEdenWalletIcon}
-                            setErrorMessage={setErrorMessage}
-                            isDisabled={isMobile}
-                            isMobileDevice={isMobile}
-                            renderAvatar={renderAvatar}
-                          />
-                          <hr className="horizontal-separator" />
-                          <WalletButton
-                            wallet={Wallet.LEATHER}
-                            subtitle="Coming soon on mobile browsing"
-                            onConnect={onConnectLeatherWallet}
-                            icon={LeatherWalletIcon}
-                            setErrorMessage={setErrorMessage}
-                            isDisabled={isMobile}
-                            isMobileDevice={isMobile}
-                            renderAvatar={renderAvatar}
-                          />
-                          <hr className="horizontal-separator" />
-                          <WalletButton
-                            wallet={Wallet.OKX}
-                            subtitle="Available on OKX"
-                            onConnect={onConnectOKXWallet}
-                            icon={OKXWalletIcon}
-                            setErrorMessage={setErrorMessage}
-                            isMobileDevice={isMobile}
-                            renderAvatar={renderAvatar}
-                          />
-                        </>
-                      )}
-                    </section>
-                  ) : (
-                    <Dialog.Description className="unsupported-browser-message">
-                      This website does not support mobile devices.
-                    </Dialog.Description>
-                  )}
+                  <section className="panel-content-inner-container">
+                    {!isMobile && ( // TODO: remove this once unisat supported on mobile devices
+                      <>
+                        <WalletButton
+                          wallet={Wallet.UNISAT}
+                          subtitle="Coming soon on mobile browsing"
+                          onConnect={onConnectUnisatWallet}
+                          icon={UnisatWalletIcon}
+                          setErrorMessage={setErrorMessage}
+                          isDisabled={isMobile} // disable unisat on mobile until it is supported
+                          isMobileDevice={isMobile}
+                          renderAvatar={renderAvatar}
+                        />
+                        <hr className="horizontal-separator" />
+                      </>
+                    )}
+                    <WalletButton
+                      wallet={Wallet.XVERSE}
+                      subtitle="Available on Xverse app"
+                      onConnect={onConnectXverseWallet}
+                      icon={XverseWalletIcon}
+                      setErrorMessage={setErrorMessage}
+                      isMobileDevice={isMobile}
+                      renderAvatar={renderAvatar}
+                    />
+                    {!isMobile && (
+                      <>
+                        <hr className="horizontal-separator" />
+                        <WalletButton
+                          wallet={Wallet.MAGICEDEN}
+                          subtitle="Coming soon on mobile browsing"
+                          onConnect={onConnectMagicEdenWallet}
+                          icon={MagicEdenWalletIcon}
+                          setErrorMessage={setErrorMessage}
+                          isDisabled={isMobile}
+                          isMobileDevice={isMobile}
+                          renderAvatar={renderAvatar}
+                        />
+                        <hr className="horizontal-separator" />
+                        <WalletButton
+                          wallet={Wallet.LEATHER}
+                          subtitle="Coming soon on mobile browsing"
+                          onConnect={onConnectLeatherWallet}
+                          icon={LeatherWalletIcon}
+                          setErrorMessage={setErrorMessage}
+                          isDisabled={isMobile}
+                          isMobileDevice={isMobile}
+                          renderAvatar={renderAvatar}
+                        />
+                        <hr className="horizontal-separator" />
+                        <WalletButton
+                          wallet={Wallet.OKX}
+                          subtitle="Available on OKX"
+                          onConnect={onConnectOKXWallet}
+                          icon={OKXWalletIcon}
+                          setErrorMessage={setErrorMessage}
+                          isMobileDevice={isMobile}
+                          renderAvatar={renderAvatar}
+                        />
+                      </>
+                    )}
+                  </section>
                   <p className="error-message">{errorMessage}</p>
                 </section>
               </Dialog.Panel>

diff --git a/packages/ord-connect/src/hooks/useHasMounted.ts b/packages/ord-connect/src/hooks/useHasMounted.ts
@@ -0,0 +1,9 @@
+import { useEffect, useState } from "react";
+
+export default function useHasMounted() {
+  const [hasMounted, setHasMounted] = useState(false);
+  useEffect(() => {
+    setHasMounted(true);
+  }, []);
+  return hasMounted;
+}