fix(ssr): ux (#339)

packages/ord-connect/src/components/OrdConnectKit.tsx

@@ -68,18 +68,20 @@ export function OrdConnectKit({
         renderAvatar={renderAvatar}
       />
     ) : (
-      <PreConnectButton openModal={openModal} />
+      <PreConnectButton disabled={!hasMounted} openModal={openModal} />
     );
   };
 
-  return hasMounted ? (
+  return (
     <>
       {renderConnectButton()}
-      <SelectWalletModal
-        isOpen={isModalOpen}
-        closeModal={closeModal}
-        renderAvatar={renderAvatar}
-      />
+      {hasMounted ? (
+        <SelectWalletModal
+          isOpen={isModalOpen}
+          closeModal={closeModal}
+          renderAvatar={renderAvatar}
+        />
+      ) : null}
     </>
-  ) : null;
+  );
 }

packages/ord-connect/src/components/PreConnectButton/index.tsx

@@ -2,13 +2,18 @@ import type { OrdConnectKitProp } from "../OrdConnectKit";
 
 interface PreConnectButtonProp extends OrdConnectKitProp {
   openModal: () => void;
+  disabled?: boolean;
 }
 
-export function PreConnectButton({ openModal }: PreConnectButtonProp) {
+export function PreConnectButton({
+  openModal,
+  disabled,
+}: PreConnectButtonProp) {
   return (
     <button
       type="button"
       onClick={openModal}
+      disabled={disabled}
       data-testid="connect-wallet-button"
       className="ord-connect-font ord-connect-wallet-button"
     >

packages/ord-connect/src/components/PreConnectButton/style.css

@@ -9,6 +9,11 @@
   border: 0px;
 }
 
+.ord-connect-wallet-button:disabled {
+  background-color: #888;
+  cursor: not-allowed;
+}
+
 .ord-connect-wallet-button span::before {
   content: "Connect";
 }
@@ -23,10 +28,10 @@
   }
 }
 
-.ord-connect-wallet-button:hover {
+.ord-connect-wallet-button:enabled:hover {
   background-color: #f2f2f2;
 }
 
-.ord-connect-wallet-button:active {
+.ord-connect-wallet-button:enabled:active {
   opacity: 0.7;
 }

packages/ord-connect/src/hooks/useLocalStorage.ts

@@ -1,4 +1,10 @@
-import { Dispatch, SetStateAction, useCallback, useState } from "react";
+import {
+  Dispatch,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useState,
+} from "react";
 
 const KEY_PREFIX = "ord-connect";
 
@@ -43,18 +49,23 @@ function setItemToLocalStorage<T>(_key: string, value: T) {
 export function useLocalStorage<T>(
   key: string,
   initialValue: T,
+  options: { initializeWithValue?: boolean } = {},
 ): [T, Dispatch<SetStateAction<T>>] {
-  const [state, setInnerState] = useState<T>(() => {
-    if (typeof window === "undefined") {
-      return initialValue;
-    }
-
+  const { initializeWithValue = true } = options;
+  const readValue = useCallback(() => {
     const value = getItemFromLocalStorage<T>(key);
     if (!value) {
       setItemToLocalStorage(key, initialValue);
       return initialValue;
     }
     return value;
+  }, [initialValue, key]);
+
+  const [state, setInnerState] = useState<T>(() => {
+    if (initializeWithValue) {
+      return readValue();
+    }
+    return initialValue;
   });
 
   const setState: Dispatch<SetStateAction<T>> = useCallback(
@@ -65,5 +76,10 @@ export function useLocalStorage<T>(
     [key],
   );
 
+  useEffect(() => {
+    setInnerState(readValue());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key]);
+
   return [state, setState];
 }

packages/ord-connect/src/providers/OrdConnectProvider.tsx

@@ -65,6 +65,7 @@ const FORMAT = "format";
 
 export type OrdConnectProviderProps = {
   initialNetwork: Network;
+  ssr?: boolean;
 };
 
 /**
@@ -88,11 +89,13 @@ export type OrdConnectProviderProps = {
  *
  * @param props - Props object.
  * @param props.initialNetwork - Initial network state if network is not set.
+ * @param props.ssr - Enable SSR.
  * @returns Provider component for OrdConnect.
  */
 export function OrdConnectProvider({
   children,
   initialNetwork,
+  ssr = false,
 }: PropsWithChildren<OrdConnectProviderProps>) {
   if (!initialNetwork) {
     throw new Error("Initial network cannot be empty");
@@ -102,17 +105,20 @@ export function OrdConnectProvider({
   const [address, setAddress] = useLocalStorage<BiAddressString>(
     ADDRESS,
     EMPTY_BIADDRESS_OBJECT,
+    { initializeWithValue: !ssr },
   );
 
   const [wallet, setWallet] = useLocalStorage<Wallet | null>(WALLET, null);
   const [publicKey, setPublicKey] = useLocalStorage<BiAddressString>(
     PUBLIC_KEY,
     EMPTY_BIADDRESS_OBJECT,
+    { initializeWithValue: !ssr },
   );
 
   const [format, setFormat] = useLocalStorage<BiAddressFormat>(
     FORMAT,
     EMPTY_BIADDRESS_OBJECT,
+    { initializeWithValue: !ssr },
   );
 
   const [isModalOpen, setIsModalOpen] = useState(false);