feat: Embedded SDK

shim.d.ts

@@ -60,13 +60,10 @@ declare module "@arconnect/webext-bridge" {
 
     // EMBEDDED:
 
-    embedded_open: any;
-    embedded_close: any;
-    embedded_resize: any;
-    // TODO: Maybe yes, maybe not (we should not drift too far away from the BE wallet API)
-    // embedded_auth: any;
-    // embedded_balance: any;
-    // embedded_info: any;
+    embedded_auth: EmbeddedAuthMessageData;
+    embedded_balance: EmbeddedBalanceMessageData;
+    embedded_resize: EmbeddedResizeMessageData;
+    embedded_close: void;
 
     // OTHER:
 

src/components/dev/figma-screen/figma-screen.module.scss

@@ -1,9 +1,7 @@
 .root {
   position: relative;
-  margin: 16px auto;
-  min-height: calc(100dvh - 32px);
+  margin: 0 auto;
   border-radius: 4px;
-  border: 2px solid rgba(255, 255, 255, 0.25);
   font-family: monospace;
 }
 

src/components/page/page.component.tsx

@@ -1,24 +1,82 @@
 import { type Variants, motion } from "framer-motion";
-import type { PropsWithChildren } from "react";
+import { useEffect, useRef, useState, type PropsWithChildren } from "react";
 import styled from "styled-components";
+import { postEmbeddedMessage } from "~utils/embedded/utils/messages/embedded-messages.utils";
+import {
+  locationToRouteType,
+  routeTypeToPreferredLayout
+} from "~utils/embedded/utils/routes/embedded-routes.utils";
+import type { ArConnectRoutePath } from "~wallets/router/router.types";
 
 export interface PageProps extends PropsWithChildren {}
 
 export function Page({ children }: PageProps) {
+  const mainRef = useRef<HTMLDivElement>(null);
+
   const opacityAnimation: Variants = {
     initial: { opacity: 0 },
     enter: { opacity: 1 },
     exit: { opacity: 0, y: 0, transition: { duration: 0.2 } }
   };
 
+  const [height, setHeight] = useState(0);
+
+  useEffect(() => {
+    const mainElement = mainRef.current;
+
+    if (!mainElement || import.meta.env?.VITE_IS_EMBEDDED_APP !== "1") return;
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      const size = entries?.[0]?.contentBoxSize?.[0] || {
+        inlineSize: 0,
+        blockSize: 0
+      };
+      const width = Math.ceil(size.inlineSize);
+      const height = Math.ceil(size.blockSize);
+
+      if (width > 0 && height > 0) {
+        // We get the path manually to avoid causing duplicate re-renders of the `Page` component if using the
+        // `useLocation` hook:
+        const path = location.hash.replace("#", "") as ArConnectRoutePath;
+        const routeType = locationToRouteType(path);
+        const preferredLayout = routeTypeToPreferredLayout(routeType);
+
+        postEmbeddedMessage({
+          type: "embedded_resize",
+          data: {
+            routeType,
+            preferredLayout,
+            width,
+            height
+          }
+        });
+
+        // For debugging only:;
+        setHeight(height);
+      }
+    });
+
+    resizeObserver.observe(mainElement);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+
   return (
     <Main
+      ref={mainRef}
       initial="initial"
       animate="enter"
       exit="exit"
       variants={opacityAnimation}
       data-test-id="Page"
     >
+      {process.env.NODE_ENV === "development" &&
+      import.meta.env?.VITE_IS_EMBEDDED_APP === "1" ? (
+        <DivLine style={{ top: `${height}px` }} data-height={`${height}px`} />
+      ) : null}
+
       {children}
     </Main>
   );
@@ -28,6 +86,30 @@ const Main = styled(motion.main)`
   position: relative;
   top: 0;
   width: 100%;
-  min-height: 100vh;
-  max-height: max-content;
+  min-height: ${import.meta.env?.VITE_IS_EMBEDDED_APP === "1"
+    ? "none"
+    : "100vh"};
+  max-height: ${import.meta.env?.VITE_IS_EMBEDDED_APP === "1"
+    ? "none"
+    : "max-content"};
+`;
+
+const DivLine = styled(motion.div)`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  border-bottom: 2px dashed red;
+
+  &::before {
+    content: attr(data-height);
+    position: absolute;
+    top: 2px;
+    left: 16px;
+    transform: translate(0, -50%);
+    padding: 4px 8px;
+    background: red;
+    font: bold 11px monospace;
+    border-radius: 16px;
+  }
 `;

src/iframe/iframe.tsx

@@ -11,6 +11,7 @@ import {
   useEmbeddedLocation
 } from "~wallets/router/iframe/iframe-router.hook";
 import { EmbeddedProvider } from "~utils/embedded/embedded.provider";
+import { BodyScroller } from "~wallets/router/router.utils";
 
 export function ArConnectEmbeddedApp() {
   useEffect(() => {

src/utils/auth/auth.provider.tsx

@@ -35,9 +35,11 @@ import type { IBridgeMessage } from "@arconnect/webext-bridge";
 import { log, LOG_GROUP } from "~utils/log/log.utils";
 import { isError } from "~utils/error/error.utils";
 import type {
+  ArConnectRoutePath,
   RouteOverride,
   RouteRedirect
 } from "~wallets/router/router.types";
+import { postEmbeddedMessage } from "~utils/embedded/utils/messages/embedded-messages.utils";
 
 interface AuthRequestsContextState {
   authRequests: AuthRequest[];
@@ -88,13 +90,19 @@ export function AuthRequestsProvider({
   );
 
   const closeAuthPopup = useCallback((delay: number = 0) => {
-    // TODO: In the embedded wallet, maybe we need to store (but not show) unlock requests so that this doesn't
-    // clear automatically.
-
     function closeOrClear() {
       if (import.meta.env?.VITE_IS_EMBEDDED_APP === "1") {
         // TODO: This might cause an infinite loop in the embedded wallet:
-        setAuthRequestContextState(AUTH_REQUESTS_CONTEXT_INITIAL_STATE);
+        // setAuthRequestContextState(AUTH_REQUESTS_CONTEXT_INITIAL_STATE);
+
+        // TODO: We could improve this to detect if we opened the wallet to show an AuthRequest, or if it was already
+        // open. In the former case, when all AuthRequests are handled, we close it. In the latter, we just clear the
+        // AuthRequests from the state but leave it open.
+
+        postEmbeddedMessage({
+          type: "embedded_close",
+          data: null
+        });
       } else {
         window.top.close();
       }

src/utils/embedded/embedded.provider.tsx

@@ -28,8 +28,8 @@ import type {
   TempWalletPromise,
   RecoveryJSON
 } from "~utils/embedded/embedded.types";
-import { isTempWalletPromiseExpired } from "~utils/embedded/embedded.utils";
 import { log, LOG_GROUP } from "~utils/log/log.utils";
+import { isTempWalletPromiseExpired } from "~utils/embedded/utils/wallets/embedded-wallets.utils";
 
 const EMBEDDED_CONTEXT_INITIAL_STATE: EmbeddedContextState = {
   authStatus: "unknown",

src/utils/embedded/sdk/domains/authentication/sdk-authentication.utils.ts

@@ -0,0 +1,101 @@
+// TODO: Please, add TS Docs. Not all interfaces here are needed.
+
+import { setAuthorization } from "~utils/embedded/sdk/utils/axios-client/sdk-axios-client.utils";
+import { postEmbeddedMessage } from "~utils/embedded/utils/messages/embedded-messages.utils";
+
+export interface AuthenticateParams {}
+
+export interface AuthenticateReturn {}
+
+export function authenticate() {
+  // TODO: Authenticate...
+
+  const authToken = "";
+  const userDetails = {};
+
+  setAuthorization(authToken);
+
+  postEmbeddedMessage({
+    type: "embedded_auth",
+    data: {
+      userDetails
+    }
+  });
+}
+
+export interface RefreshSessionParams {}
+
+export interface RefreshSessionReturn {}
+
+export function refreshSession() {
+  // TODO: Refresh session...
+
+  const authToken = "";
+  const userDetails = {};
+
+  setAuthorization(authToken);
+
+  postEmbeddedMessage({
+    type: "embedded_auth",
+    data: {
+      userDetails
+    }
+  });
+}
+
+export interface SignOutParams {}
+
+export interface SignOutReturn {}
+
+export function signOut() {
+  // TODO: Sign out...
+
+  setAuthorization(null);
+
+  postEmbeddedMessage({
+    type: "embedded_auth",
+    data: {
+      userDetails: null
+    }
+  });
+}
+
+export interface FakeAuthenticateParams {}
+
+export interface FakeAuthenticateReturn {}
+
+export function fakeAuthenticate() {
+  // TODO: Fake authenticate...
+
+  const authToken = "";
+  const userDetails = {};
+
+  setAuthorization(authToken);
+
+  postEmbeddedMessage({
+    type: "embedded_auth",
+    data: {
+      userDetails
+    }
+  });
+}
+
+export interface FakeRefreshSessionParams {}
+
+export interface FakeRefreshSessionReturn {}
+
+export function fakeRefreshSession() {
+  // TODO: Fake refresh session...
+
+  const authToken = "";
+  const userDetails = {};
+
+  setAuthorization(authToken);
+
+  postEmbeddedMessage({
+    type: "embedded_auth",
+    data: {
+      userDetails
+    }
+  });
+}

src/utils/embedded/sdk/domains/backup/sdk-backup.utils.ts

@@ -0,0 +1,13 @@
+// TODO: Please, add TS Docs. Not all interfaces here are needed.
+
+export interface RegisterRecoveryShareParams {}
+
+export interface RegisterRecoveryShareReturn {}
+
+export function registerRecoveryShare() {}
+
+export interface RegisterWalletExportParams {}
+
+export interface RegisterWalletExportReturn {}
+
+export function registerWalletExport() {}

src/utils/embedded/sdk/domains/share-recovery/sdk-share-recovery.utils.ts

@@ -0,0 +1,25 @@
+// TODO: Please, add TS Docs. Not all interfaces here are needed.
+
+export interface GenerateWalletRecoveryChallengeParams {}
+
+export interface GenerateWalletRecoveryChallengeReturn {}
+
+export function generateWalletRecoveryChallenge() {}
+
+export interface FetchRecoverableAccountsParams {}
+
+export interface FetchRecoverableAccountsReturn {}
+
+export function fetchRecoverableAccounts() {}
+
+export interface GenerateAccountRecoveryChallengeParams {}
+
+export interface GenerateAccountRecoveryChallengeReturn {}
+
+export function generateAccountRecoveryChallenge() {}
+
+export interface RecoverAccountParams {}
+
+export interface RecoverAccountReturn {}
+
+export function recoverAccount() {}

src/utils/embedded/sdk/domains/shares/sdk-shares.utils.ts

@@ -0,0 +1,19 @@
+// TODO: Please, add TS Docs. Not all interfaces here are needed.
+
+export interface GenerateAuthShareChallengeParams {}
+
+export interface GenerateAuthShareChallengeReturn {}
+
+export function generateAuthShareChallenge() {}
+
+export interface ActivateWalletParams {}
+
+export interface ActivateWalletReturn {}
+
+export function activateWallet() {}
+
+export interface RotateAuthShareParams {}
+
+export interface RotateAuthShareReturn {}
+
+export function rotateAuthShare() {}

src/utils/embedded/sdk/domains/wallet-recovery/sdk-wallet-recovery.utils.ts

@@ -0,0 +1,13 @@
+// TODO: Please, add TS Docs. Not all interfaces here are needed.
+
+export interface GenerateShareRecoveryChallengeParams {}
+
+export interface GenerateShareRecoveryChallengeReturn {}
+
+export function generateShareRecoveryChallenge() {}
+
+export interface RecoverWalletParams {}
+
+export interface RecoverWalletReturn {}
+
+export function recoverWallet() {}