fix account button dropdown

latticexyz · Apr 18, 2024 · 12006ec · 12006ec
1 parent c002251
commit 12006ec
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 80 deletions.
diff --git a/packages/account-kit/src/AccountButton.tsx b/packages/account-kit/src/AccountButton.tsx
@@ -121,43 +121,44 @@ export function AccountButton() {
         </Shadow>
       </DropdownMenu.Trigger>
       <DropdownMenu.Portal>
-        <Shadow mode="child">
-          <DropdownMenu.Content
-            align="start"
-            className={twMerge(
-              containerClassNames,
-              secondaryClassNames,
-              menuClassNames,
-              "-mt-px flex-col animate-in fade-in slide-in-from-top-2 animate-duration-200",
-            )}
-          >
-            <DropdownMenu.Item className={twMerge(secondaryInteractiveClassNames, "flex gap-2.5 p-3 items-center")}>
-              <CashIcon className="flex-shrink-0 opacity-50" />
-              <span className="flex-grow">Gas tank</span>
-            </DropdownMenu.Item>
-            <DropdownMenu.Item className={twMerge(secondaryInteractiveClassNames, "flex gap-2.5 p-3 items-center")}>
-              <CopyIcon className="flex-shrink-0 opacity-50" />
-              <span className="flex-grow">Copy address</span>
-            </DropdownMenu.Item>
-            <DropdownMenu.Item className={twMerge(secondaryInteractiveClassNames, "flex gap-2.5 p-3 items-center")}>
-              <GlobeIcon className="flex-shrink-0 opacity-50" />
-              <span className="flex-grow">Switch chain</span>
-            </DropdownMenu.Item>
-            <DropdownMenu.Item
+        <DropdownMenu.Content align="start" style={{ zIndex: "2147483646" }}>
+          <Shadow mode="child">
+            <div
               className={twMerge(
-                secondaryInteractiveClassNames,
-                "flex gap-2.5 p-3 items-center",
-                // TODO: better pending state
-                "aria-busy:opacity-50",
+                containerClassNames,
+                secondaryClassNames,
+                menuClassNames,
+                "-mt-px flex-col animate-in fade-in slide-in-from-top-2 animate-duration-200",
               )}
-              aria-busy={disconnectPending}
-              onSelect={() => disconnect()}
             >
-              <LogoutIcon className="flex-shrink-0 text-red-500" />
-              <span className="flex-grow">Disconnect</span>
-            </DropdownMenu.Item>
-          </DropdownMenu.Content>
-        </Shadow>
+              <DropdownMenu.Item className={twMerge(secondaryInteractiveClassNames, "flex gap-2.5 p-3 items-center")}>
+                <CashIcon className="flex-shrink-0 opacity-50" />
+                <span className="flex-grow">Gas tank</span>
+              </DropdownMenu.Item>
+              <DropdownMenu.Item className={twMerge(secondaryInteractiveClassNames, "flex gap-2.5 p-3 items-center")}>
+                <CopyIcon className="flex-shrink-0 opacity-50" />
+                <span className="flex-grow">Copy address</span>
+              </DropdownMenu.Item>
+              <DropdownMenu.Item className={twMerge(secondaryInteractiveClassNames, "flex gap-2.5 p-3 items-center")}>
+                <GlobeIcon className="flex-shrink-0 opacity-50" />
+                <span className="flex-grow">Switch chain</span>
+              </DropdownMenu.Item>
+              <DropdownMenu.Item
+                className={twMerge(
+                  secondaryInteractiveClassNames,
+                  "flex gap-2.5 p-3 items-center",
+                  // TODO: better pending state
+                  "aria-busy:opacity-50",
+                )}
+                aria-busy={disconnectPending}
+                onSelect={() => disconnect()}
+              >
+                <LogoutIcon className="flex-shrink-0 text-red-500" />
+                <span className="flex-grow">Disconnect</span>
+              </DropdownMenu.Item>
+            </div>
+          </Shadow>
+        </DropdownMenu.Content>
       </DropdownMenu.Portal>
     </DropdownMenu.Root>
   );

diff --git a/packages/account-kit/src/bundle/mountButton.tsx b/packages/account-kit/src/bundle/mountButton.tsx
@@ -26,6 +26,9 @@ export function mountButton(element: HTMLElement, { wagmiConfig, accountKitConfi
 
     const queryClient = new QueryClient();
 
+    // RainbowKit renders an outer <div>
+    // TODO: move to rendering the actual button into a portal as a sibling of the tree
+
     const root = ReactDOM.createRoot(element);
     root.render(
       <React.StrictMode>

diff --git a/packages/account-kit/src/ui/FrameConfig.tsx b/packages/account-kit/src/ui/FrameConfig.tsx
diff --git a/packages/account-kit/src/ui/Shadow.tsx b/packages/account-kit/src/ui/Shadow.tsx
@@ -19,12 +19,21 @@ function Resizer({
 } & HTMLProps<HTMLDivElement>) {
   const ref = useRef<HTMLDivElement | null>(null);
   useResizeObserver({ ref, onResize: onSize });
-  return <div ref={ref} style={{ ...props.style, display: "inline-block" }} {...props} />;
+  return <div ref={ref} {...props} style={{ ...props.style, display: "inline-block" }} />;
 }
 
+// TODO: make a container inside the iframe that is at least the size of the window, render content into that so we can correctly measure size relative to window
+//       otherwise as the iframe shrinks, the measurement will be based on that shrunk value and it'll never get bigger, only smaller
+
 export const Shadow = forwardRef<HTMLIFrameElement, Props>(function Shadow({ mode, children }, forwardedRef) {
   const frameRef = useRef<HTMLIFrameElement | null>(null);
-  const [frameSize, setFrameSize] = useState<{ width: number; height: number } | null>(null);
+  const [loaded, setLoaded] = useState(false);
+  const frame = loaded ? frameRef.current : null;
+
+  const [frameSize, setFrameSize] = useState<{ width: number | undefined; height: number | undefined }>({
+    width: undefined,
+    height: undefined,
+  });
 
   const { theme: initialTheme } = useConfig();
   const darkMode = useMediaQuery("(prefers-color-scheme: dark)");
@@ -33,7 +42,7 @@ export const Shadow = forwardRef<HTMLIFrameElement, Props>(function Shadow({ mod
   const modeStyle: CSSProperties =
     mode === "modal"
       ? { display: "block", position: "fixed", inset: "0", width: "100vw", height: "100vh", zIndex: "2147483646" }
-      : frameSize
+      : frameSize.width && frameSize.height
         ? { display: "inline-block", width: `${frameSize.width}px`, height: `${frameSize.height}px` }
         : {
             display: "block",
@@ -46,29 +55,25 @@ export const Shadow = forwardRef<HTMLIFrameElement, Props>(function Shadow({ mod
           };
 
   return (
-    <iframe ref={mergeRefs([forwardedRef, frameRef])} style={{ border: "0", ...modeStyle }}>
-      {frameRef.current
+    <iframe
+      ref={mergeRefs([forwardedRef, frameRef])}
+      style={{ border: "0", ...modeStyle }}
+      onLoad={() => setLoaded(true)}
+      srcDoc="<!doctype html><title>…</title>"
+    >
+      {frame?.contentDocument
         ? ReactDOM.createPortal(
-            <FrameProvider frame={frameRef.current}>
-              <>
-                {mode === "modal" ? (
-                  <div data-theme={theme}>{children}</div>
-                ) : (
-                  <Resizer
-                    data-theme={theme}
-                    onSize={({ width, height }) => {
-                      if (width && height) {
-                        setFrameSize({ width, height });
-                      }
-                    }}
-                  >
-                    {children}
-                  </Resizer>
-                )}
-                <style dangerouslySetInnerHTML={{ __html: css }} />
-              </>
+            <FrameProvider frame={frame}>
+              {mode === "modal" ? (
+                <div data-theme={theme}>{children}</div>
+              ) : (
+                <Resizer data-theme={theme} onSize={setFrameSize}>
+                  {children}
+                </Resizer>
+              )}
+              <style dangerouslySetInnerHTML={{ __html: css }} />
             </FrameProvider>,
-            frameRef.current.contentWindow!.document.body,
+            frame.contentDocument.body,
           )
         : null}
     </iframe>