Working confirmation prompt

packages/secure-client/src/SecureUI/SecureUI.tsx

@@ -1,15 +1,20 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { UserClient } from "@coral-xyz/secure-background/clients";
 import type {
   SECURE_EVENTS,
+  SecureRequest,
   TransportReceiver,
   TransportSender,
 } from "@coral-xyz/secure-background/types";
 import {
   config as tamaguiConfig,
+  PrimaryButton,
+  SecondaryButton,
+  Sheet,
   Stack,
   TamaguiProvider,
   Text,
+  TwoButtonFooter,
 } from "@coral-xyz/tamagui";
 import { RecoilRoot } from "recoil";
 
@@ -25,6 +30,12 @@ export function SecureUI({
   secureUIReceiver: TransportReceiver<SECURE_EVENTS, "confirmation">;
   secureBackgroundSender: TransportSender<SECURE_EVENTS>;
 }) {
+  const [position, setPosition] = useState(0);
+  const [open, setOpen] = useState<{
+    request: SecureRequest<SECURE_EVENTS>;
+    resolve: (resonse: any) => void;
+  } | null>(null);
+
   useEffect(() => {
     const user = new UserClient(secureBackgroundSender, {
       address: "EXTENSION",
@@ -33,16 +44,27 @@ export function SecureUI({
 
     secureUIReceiver.setHandler(async (request) => {
       await new Promise((resolve) => setTimeout(resolve, 1000));
-      const response = await user.unlockKeyring({
-        uuid: "uuid",
-        password: "password",
+      let resolve;
+      const promise = new Promise<any>((_resolve) => {
+        resolve = _resolve;
       });
-      console.log("PCA unlock response", response);
-      return {
-        ...request,
-        request: undefined,
-        response: { confirmed: true },
+
+      const resolver = async (response: any) => {
+        const unlockResponse = await user.unlockKeyring({
+          uuid: "uuid",
+          password: "password",
+        });
+        console.log("PCA unlock response", unlockResponse);
+        setOpen(null);
+        resolve(response);
       };
+
+      setOpen({
+        request,
+        resolve: resolver,
+      });
+
+      return promise;
     });
   }, [secureUIReceiver, secureBackgroundSender]);
 
@@ -54,8 +76,54 @@ export function SecureUI({
       }}
     >
       <TamaguiProvider config={tamaguiConfig}>
-        <Stack margin={10}>
-          <Text color="$accentPurple">Hello</Text>
+        <Stack
+          zIndex={10}
+          position="absolute"
+          top="0px"
+          left="0px"
+          height="100%"
+          width="100%"
+          pointerEvents="none"
+        >
+          <Sheet
+            forceRemoveScrollEnabled
+            open={!!open}
+            modal={false}
+            dismissOnSnapToBottom={false}
+            position={position}
+            onPositionChange={setPosition}
+            zIndex={100_000}
+            animation="bouncy"
+          >
+            <Sheet.Overlay backgroundColor="rgba(0,0,0,0.3)" />
+            <Sheet.Handle />
+            <Sheet.Frame>
+              <TwoButtonFooter
+                leftButton={
+                  <SecondaryButton
+                    label="Deny"
+                    onPress={() =>
+                      open?.resolve({
+                        name: open.request.name,
+                        response: { confirmed: false },
+                      })
+                    }
+                  />
+                }
+                rightButton={
+                  <PrimaryButton
+                    label="Approve"
+                    onPress={() =>
+                      open?.resolve({
+                        name: open.request.name,
+                        response: { confirmed: true },
+                      })
+                    }
+                  />
+                }
+              />
+            </Sheet.Frame>
+          </Sheet>
         </Stack>
       </TamaguiProvider>
     </RecoilRoot>

packages/secure-client/src/transports/ToSecureUITransportSender.ts

@@ -66,8 +66,9 @@ export class ToSecureUITransportSender<
     // remove listeners & reference
     try {
       port.disconnect();
-    } catch (_e) {
-      /* this is okay to fail, means no listeners anyways. */
+    } catch (e) {
+      /* this is okay to fail, as it means no listeners left. */
+      console.error(e);
     }
     this.port = null;