Fix flickering when opening profile (#777)

packages/controller/src/iframe/base.ts

@@ -23,11 +23,13 @@ export class IFrame<CallSender extends {}> implements Modal {
     colorMode,
     onClose,
     onConnect,
+    methods = {},
   }: Pick<ControllerOptions, "theme" | "config" | "colorMode"> & {
     id: string;
     url: URL;
     onClose?: () => void;
     onConnect: (child: AsyncMethodReturns<CallSender>) => void;
+    methods?: { [key: string]: (...args: any[]) => void };
   }) {
     if (typeof document === "undefined") {
       return;
@@ -81,7 +83,7 @@ export class IFrame<CallSender extends {}> implements Modal {
 
     connectToChild<CallSender>({
       iframe: this.iframe,
-      methods: { close: () => this.close() },
+      methods: { close: () => this.close(), ...methods },
     }).promise.then(onConnect);
 
     this.resize();
@@ -99,15 +101,6 @@ export class IFrame<CallSender extends {}> implements Modal {
     this.onClose = onClose;
   }
 
-  currentUrl() {
-    return this.iframe ? new URL(this.iframe.src) : undefined;
-  }
-
-  updateUrl(url: URL) {
-    if (!this.iframe) return;
-    this.iframe.src = url.toString();
-  }
-
   open() {
     if (!this.container) return;
     document.body.style.overflow = "hidden";

packages/controller/src/iframe/profile.ts

@@ -1,5 +1,5 @@
 import { PROFILE_URL } from "../constants";
-import { Profile, ProfileOptions, ProfileContextTypeVariant } from "../types";
+import { Profile, ProfileOptions } from "../types";
 import { IFrame, IFrameOptions } from "./base";
 
 export type ProfileIFrameOptions = IFrameOptions<Profile> &
@@ -28,14 +28,4 @@ export class ProfileIFrame extends IFrame<Profile> {
       url: _url,
     });
   }
-
-  openTab(tab: ProfileContextTypeVariant) {
-    const url = super.currentUrl();
-    if (!url) return;
-
-    url.searchParams.set("tab", tab);
-
-    super.updateUrl(url);
-    super.open();
-  }
 }

packages/controller/src/index.ts

@@ -188,7 +188,8 @@ export default class Controller {
       return;
     }
 
-    this.iframes.profile.openTab(tab);
+    this.profile.goTo(tab);
+    this.iframes.profile.open();
   }
 
   async disconnect() {

packages/controller/src/types.ts

@@ -133,7 +133,9 @@ export interface Keychain {
   delegateAccount(): string;
 }
 
-export interface Profile {}
+export interface Profile {
+  goTo(tab: ProfileContextTypeVariant): void;
+}
 
 export interface Modal {
   open: () => void;

packages/keychain/src/hooks/policy.ts

@@ -5,7 +5,7 @@ import { constants } from "starknet";
 import { Policy } from "@cartridge/controller";
 
 import { diff } from "utils/controller";
-import { normalize as normalizeOrigin } from "utils/url";
+import { normalizeOrigin } from "@cartridge/utils";
 
 export function useUrlPolicys(): {
   chainId?: constants.StarknetChainId;

packages/keychain/src/utils/connection/index.ts

@@ -2,7 +2,6 @@ export * from "./types";
 
 import { ConnectError, Policy, ResponseCodes } from "@cartridge/controller";
 import { connectToParent } from "@cartridge/penpal";
-import { normalize as normalizeOrigin } from "utils/url";
 import Controller from "utils/controller";
 import { connectFactory, disconnectFactory } from "./connect";
 import { execute } from "./execute";
@@ -15,6 +14,7 @@ import { ConnectionCtx } from "./types";
 import { deployFactory } from "./deploy";
 import { openSettingsFactory } from "./settings";
 import { delegateAccount } from "./delegate";
+import { normalize } from "@cartridge/utils";
 
 export function connectToController<ParentMethods extends {}>({
   setOrigin,
@@ -56,12 +56,6 @@ export function connectToController<ParentMethods extends {}>({
   });
 }
 
-function normalize<Promise>(
-  fn: (origin: string) => Promise,
-): (origin: string) => Promise {
-  return (origin: string) => fn(normalizeOrigin(origin));
-}
-
 function validate<T>(
   fn: (controller: Controller, origin: string) => T,
 ): (origin: string) => T | (() => Promise<ConnectError>) {

packages/keychain/src/utils/url.ts

@@ -20,58 +20,6 @@ export const StarkscanUrl = (chainId: constants.StarknetChainId) => ({
     `${BASE_URL[chainId]}/class/${address}${fragment ? `#${fragment}` : ""}`,
 });
 
-const DEFAULT_PORT_BY_PROTOCOL: { [index: string]: string } = {
-  "http:": "80",
-  "https:": "443",
-};
-
-const URL_REGEX = /^(https?:)?\/\/([^/:]+)?(:(\d+))?/;
-
-const opaqueOriginSchemes = ["file:", "data:"];
-
-/**
- * Converts a src value into an origin.
- */
-export const normalize = (src: string): string => {
-  if (src && opaqueOriginSchemes.find((scheme) => src.startsWith(scheme))) {
-    // The origin of the child document is an opaque origin and its
-    // serialization is "null"
-    // https://html.spec.whatwg.org/multipage/origin.html#origin
-    return "null";
-  }
-
-  // Note that if src is undefined, then srcdoc is being used instead of src
-  // and we can follow this same logic below to get the origin of the parent,
-  // which is the origin that we will need to use.
-
-  const location = document.location;
-
-  const regexResult = URL_REGEX.exec(src);
-  let protocol: string;
-  let hostname: string;
-  let port: string;
-
-  if (regexResult) {
-    // It's an absolute URL. Use the parsed info.
-    // regexResult[1] will be undefined if the URL starts with //
-    protocol = regexResult[1] ? regexResult[1] : location.protocol;
-    hostname = regexResult[2];
-    port = regexResult[4];
-  } else {
-    // It's a relative path. Use the current location's info.
-    protocol = location.protocol;
-    hostname = location.hostname;
-    port = location.port;
-  }
-
-  // If the port is the default for the protocol, we don't want to add it to the origin string
-  // or it won't match the message's event.origin.
-
-  const portSuffix =
-    port && port !== DEFAULT_PORT_BY_PROTOCOL[protocol] ? `:${port}` : "";
-  return `${protocol}//${hostname}${portSuffix}`;
-};
-
 export const PopupCenter = (
   url: string,
   title: string,

packages/profile/src/components/inventory.tsx

@@ -29,9 +29,9 @@ export function Inventory() {
           <CardHeader>
             <CardTitle>Token</CardTitle>
           </CardHeader>
-          {ERC_20_TOKENS.map((t) => (
+          {ERC_20_TOKENS.map((t, i) => (
             <CardContent
-              key={t.address}
+              key={t.address + i}
               className="flex gap-x-1.5 items-center"
             >
               <img src={t.logoUrl} className="w-5 h-5" />
@@ -49,9 +49,8 @@ export function Inventory() {
 
           <CardContent className="grid grid-cols-3 gap-2 place-items-center">
             {Array.from({ length: 28 }).map((_, i) => (
-              <div className="w-32 h-32">
+              <div className="w-32 h-32" key={i}>
                 <img
-                  key={i}
                   src={
                     "https://github.com/BibliothecaDAO/loot-survivor/blob/main/ui/public/golden-token.png?raw=true"
                   }

packages/profile/src/components/provider/connection.tsx

@@ -8,6 +8,7 @@ import {
 } from "react";
 import { useQueryParams } from "./hooks";
 import { ProfileContextTypeVariant } from "@cartridge/controller";
+import { normalize } from "@cartridge/utils";
 
 type ConnectionContextType = {
   parent: ParentMethods;
@@ -42,30 +43,12 @@ export const ConnectionContext =
 export function ConnectionProvider({ children }: { children: ReactNode }) {
   const [state, setState] = useState<ConnectionContextType>(initialState);
 
-  useEffect(() => {
-    const connection = connectToParent<ParentMethods>({
-      // methods: {}
-    });
-    connection.promise.then((parent) => {
-      setState((state) => ({ ...state, parent }));
-    });
-
-    return () => {
-      connection.destroy();
-    };
-  }, []);
-
   const searchParams = useQueryParams();
   useEffect(() => {
     setState((state) => ({
       ...state,
       address: decodeURIComponent(searchParams.get("address")!),
       username: decodeURIComponent(searchParams.get("username")!),
-      context: {
-        type:
-          (searchParams.get("tab") as ProfileContextTypeVariant) ??
-          state.context,
-      },
     }));
   }, [searchParams]);
 
@@ -76,6 +59,23 @@ export function ConnectionProvider({ children }: { children: ReactNode }) {
     }));
   }, []);
 
+  useEffect(() => {
+    const connection = connectToParent<ParentMethods>({
+      methods: {
+        goTo: normalize(() => (tab: ProfileContextTypeVariant) => {
+          setContext({ type: tab });
+        }),
+      },
+    });
+    connection.promise.then((parent) => {
+      setState((state) => ({ ...state, parent }));
+    });
+
+    return () => {
+      connection.destroy();
+    };
+  }, [setContext]);
+
   return (
     <ConnectionContext.Provider value={{ ...state, setContext }}>
       {children}

packages/utils/src/index.ts

@@ -35,3 +35,61 @@ function sizeLen(size: FormatAddressSize) {
       return 20;
   }
 }
+
+export function normalize<Promise>(
+  fn: (origin: string) => Promise,
+): (origin: string) => Promise {
+  return (origin: string) => fn(normalizeOrigin(origin));
+}
+
+const DEFAULT_PORT_BY_PROTOCOL: { [index: string]: string } = {
+  "http:": "80",
+  "https:": "443",
+};
+
+const URL_REGEX = /^(https?:)?\/\/([^/:]+)?(:(\d+))?/;
+
+const opaqueOriginSchemes = ["file:", "data:"];
+
+/**
+ * Converts a src value into an origin.
+ */
+export function normalizeOrigin(src: string): string {
+  if (src && opaqueOriginSchemes.find((scheme) => src.startsWith(scheme))) {
+    // The origin of the child document is an opaque origin and its
+    // serialization is "null"
+    // https://html.spec.whatwg.org/multipage/origin.html#origin
+    return "null";
+  }
+
+  // Note that if src is undefined, then srcdoc is being used instead of src
+  // and we can follow this same logic below to get the origin of the parent,
+  // which is the origin that we will need to use.
+
+  const location = document.location;
+
+  const regexResult = URL_REGEX.exec(src);
+  let protocol: string;
+  let hostname: string;
+  let port: string;
+
+  if (regexResult) {
+    // It's an absolute URL. Use the parsed info.
+    // regexResult[1] will be undefined if the URL starts with //
+    protocol = regexResult[1] ? regexResult[1] : location.protocol;
+    hostname = regexResult[2];
+    port = regexResult[4];
+  } else {
+    // It's a relative path. Use the current location's info.
+    protocol = location.protocol;
+    hostname = location.hostname;
+    port = location.port;
+  }
+
+  // If the port is the default for the protocol, we don't want to add it to the origin string
+  // or it won't match the message's event.origin.
+
+  const portSuffix =
+    port && port !== DEFAULT_PORT_BY_PROTOCOL[protocol] ? `:${port}` : "";
+  return `${protocol}//${hostname}${portSuffix}`;
+}