fix chain select

latticexyz · Apr 18, 2024 · c07a1d3 · c07a1d3
1 parent 926691f
commit c07a1d3
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 61 deletions.
diff --git a/packages/account-kit/src/AccountButton.tsx b/packages/account-kit/src/AccountButton.tsx
@@ -39,7 +39,7 @@ export function AccountButton() {
 
   if (requirement != null) {
     return (
-      <Shadow>
+      <Shadow mode="child">
         <button
           type="button"
           className={twMerge(

diff --git a/packages/account-kit/src/steps/gas-tank/components/ChainSelect.tsx b/packages/account-kit/src/steps/gas-tank/components/ChainSelect.tsx
@@ -1,7 +1,8 @@
-import { ReactNode, Ref, forwardRef } from "react";
+import { ReactNode, Ref, forwardRef, useMemo } from "react";
 import { twMerge } from "tailwind-merge";
 import * as Select from "@radix-ui/react-select";
-import { Shadow } from "../../../ui/Shadow";
+import { useFrame } from "../../../ui/FrameProvider";
+import { CheckIcon } from "../../../icons/CheckIcon";
 
 type SelectItemProps = {
   value: string;
@@ -27,13 +28,14 @@ const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(function SelectIt
     >
       <Select.ItemText>{children}</Select.ItemText>
       <Select.ItemIndicator className="absolute left-0 w-[25px] inline-flex items-center justify-center">
-        {/* <CheckIcon /> */}
-        CheckIcon
+        <CheckIcon />
       </Select.ItemIndicator>
     </Select.Item>
   );
 });
 export function ChainSelect() {
+  const { frame } = useFrame();
+  const container = useMemo(() => frame.contentDocument!.body, [frame]);
   return (
     <Select.Root defaultValue="17069">
       <Select.Trigger
@@ -50,34 +52,34 @@ export function ChainSelect() {
         <Select.Icon>{/* <ChevronDownIcon /> */}</Select.Icon>
       </Select.Trigger>
 
-      <Select.Portal>
-        <Shadow>
-          <Select.Content
-            className={twMerge(
-              // Add `z-index` to match `Modal`. Internally, Radix copies this `z-index` to the popover, so we don't need to set `position` here:
-              // https://github.com/radix-ui/primitives/blob/b32a93318cdfce383c2eec095710d35ffbd33a1c/packages/react/select/src/Select.tsx#L919-L923
-              "z-[2147483646]",
-              "overflow-hidden bg-white rounded-md shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)]",
-            )}
-          >
-            <Select.ScrollUpButton className="flex items-center justify-center h-[25px] bg-white text-violet11 cursor-default">
-              {/* <ChevronUpIcon /> */}
-              Up
-            </Select.ScrollUpButton>
-            <Select.Viewport className="p-[5px]">
-              <Select.Group>
-                <Select.Label className="px-[25px] text-xs leading-[25px]">Select chain:</Select.Label>
-                <SelectItem value="17069">Redstone</SelectItem>
-                <SelectItem value="1">Ethereum</SelectItem>
-                <SelectItem value="7777777">Zora</SelectItem>
-              </Select.Group>
-            </Select.Viewport>
-            <Select.ScrollDownButton className="flex items-center justify-center h-[25px] bg-white text-violet11 cursor-default">
-              {/* <ChevronDownIcon /> */}
-              Down
-            </Select.ScrollDownButton>
-          </Select.Content>
-        </Shadow>
+      <Select.Portal container={container}>
+        <Select.Content
+          // `popper` and `container` are necessary for this to work with the iframe.
+          position="popper"
+          className={twMerge(
+            // Add `z-index` to match `Modal`. Internally, Radix copies this `z-index` to the popover, so we don't need to set `position` here:
+            // https://github.com/radix-ui/primitives/blob/b32a93318cdfce383c2eec095710d35ffbd33a1c/packages/react/select/src/Select.tsx#L919-L923
+            "z-[2147483646]",
+            "overflow-hidden bg-white rounded-md shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)]",
+          )}
+        >
+          <Select.ScrollUpButton className="flex items-center justify-center h-[25px] bg-white text-violet11 cursor-default">
+            {/* <ChevronUpIcon /> */}
+            Up
+          </Select.ScrollUpButton>
+          <Select.Viewport className="p-[5px]">
+            <Select.Group>
+              <Select.Label className="px-[25px] text-xs leading-[25px]">Select chain:</Select.Label>
+              <SelectItem value="17069">Redstone</SelectItem>
+              <SelectItem value="1">Ethereum</SelectItem>
+              <SelectItem value="7777777">Zora</SelectItem>
+            </Select.Group>
+          </Select.Viewport>
+          <Select.ScrollDownButton className="flex items-center justify-center h-[25px] bg-white text-violet11 cursor-default">
+            {/* <ChevronDownIcon /> */}
+            Down
+          </Select.ScrollDownButton>
+        </Select.Content>
       </Select.Portal>
     </Select.Root>
   );

diff --git a/packages/account-kit/src/ui/Modal.tsx b/packages/account-kit/src/ui/Modal.tsx
@@ -10,17 +10,6 @@ export type Props = {
 };
 
 export function Modal({ open, onOpenChange, children }: Props) {
-  // console.log("frame id", document.querySelector("[data-frame-id]"));
-
-  (window.top ?? window).postMessage(
-    {
-      event: "mud-account-kit-frame",
-      frameId: document.querySelector("[data-frame-id]")?.getAttribute("data-frame-id"),
-      mode: "modal",
-    },
-    "*",
-  );
-
   return (
     <Dialog.Root open={open} onOpenChange={onOpenChange}>
       {/* This intentionally does not use `Dialog.Trigger` because it doesn't play nicely with `<Shadow>` trigger (our primary use case). */}

diff --git a/packages/account-kit/src/ui/Shadow.tsx b/packages/account-kit/src/ui/Shadow.tsx
@@ -4,6 +4,7 @@ import css from "tailwindcss/tailwind.css?inline";
 import { useMediaQuery, useResizeObserver } from "usehooks-ts";
 import { useConfig } from "../AccountKitProvider";
 import { mergeRefs } from "react-merge-refs";
+import { FrameProvider } from "./FrameProvider";
 
 export type Props = {
   mode: "modal" | "child";
@@ -48,23 +49,25 @@ export const Shadow = forwardRef<HTMLIFrameElement, Props>(function Shadow({ mod
     <iframe ref={mergeRefs([forwardedRef, frameRef])} style={{ border: "0", ...modeStyle }}>
       {frameRef.current
         ? ReactDOM.createPortal(
-            <>
-              {mode === "modal" ? (
-                <div data-theme={theme}>{children}</div>
-              ) : (
-                <Resizer
-                  data-theme={theme}
-                  onSize={({ width, height }) => {
-                    if (width != null && height != null) {
-                      setFrameSize({ width, height });
-                    }
-                  }}
-                >
-                  {children}
-                </Resizer>
-              )}
-              <style dangerouslySetInnerHTML={{ __html: css }} />
-            </>,
+            <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>,
             frameRef.current.contentWindow!.document.body,
           )
         : null}