fix: disconnect and connect remote wallet

cardano-foundation · Jul 3, 2024 · 65edea6 · 65edea6
1 parent 9fb7cc4
commit 65edea6
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 33 deletions.
diff --git a/ui/summit-2024/src/components/ConnectWalletModal/ConnectWalletModal.tsx b/ui/summit-2024/src/components/ConnectWalletModal/ConnectWalletModal.tsx
@@ -17,6 +17,7 @@ import {
   setWalletIdentifier,
 } from "../../store/reducers/userCache";
 import { ToastType } from "../common/Toast/Toast.types";
+import {initialConnectedWallet} from "../../store/reducers/userCache/initialState";
 
 const ConnectWalletModal = (props: ConnectWalletProps) => {
   const dispatch = useAppDispatch();
@@ -40,8 +41,7 @@ const ConnectWalletModal = (props: ConnectWalletProps) => {
     dAppConnect,
     meerkatAddress,
     initDappConnect,
-    disconnect,
-    stakeAddress,
+    disconnect
   } = useCardano({
     limitNetwork: resolveCardanoNetwork(env.TARGET_NETWORK),
   });
@@ -80,32 +80,59 @@ const ConnectWalletModal = (props: ConnectWalletProps) => {
         walletInfo: IWalletInfo,
         callback: (granted: boolean, autoconnect: boolean) => void,
       ) => {
-        console.log("verifyConnection");
-        console.log(walletInfo);
         setPeerConnectWalletInfo(walletInfo);
         setCurrentPath(ConnectWalletFlow.ACCEPT_CONNECTION);
 
         setOnPeerConnectAccept(() => () => callback(true, true));
         setOnPeerConnectReject(() => () => callback(false, false));
       };
 
-      const onApiInject = (name: string): void => {
-        connect(
-          name,
-          () => {
-            props.handleCloseConnectWalletModal();
+      const onApiInject = async (name: string) => {
+        if (name === "idw_p2p") {
+          const api =
+              window.cardano && window.cardano[name];
+          if (api) {
+            const enabledApi = await api.enable();
+            const keriIdentifier =
+                await enabledApi.experimental.getKeriIdentifier();
+            dispatch(setWalletIdentifier(keriIdentifier.id));
+            dispatch(setConnectedWallet({
+              address: api.identifier,
+              name: api.name,
+              icon: api.icon,
+              requestAutoconnect: true,
+              version: api.version
+            }));
             eventBus.publish(
-              EventName.ShowToast,
-              `${name} Wallet connected successfully`,
+                EventName.ShowToast,
+                `${name} Wallet connected successfully`,
             );
-          },
-          (e: Error) => {
-            eventBus.publish(EventName.ShowToast, e.message, ToastType.Error);
-          },
-        ).catch((e) => console.error(e));
+          } else {
+            eventBus.publish(
+                EventName.ShowToast,
+                `Timeout while connecting P2P ${name} wallet`,
+                ToastType.Error,
+            );
+          }
+        } else {
+          connect(
+              name,
+              () => {
+                eventBus.publish(
+                    EventName.ShowToast,
+                    `${name} Wallet connected successfully`,
+                );
+              },
+              (e: Error) => {
+                eventBus.publish(EventName.ShowToast, e.message, ToastType.Error);
+              },
+          ).catch((e) => console.error(e));
+        }
       };
 
       const onApiEject = (name: string): void => {
+        dispatch(setWalletIdentifier(""));
+        dispatch(setConnectedWallet(initialConnectedWallet));
         setPeerConnectWalletInfo(undefined);
         eventBus.publish(
           EventName.ShowToast,
@@ -140,9 +167,6 @@ const ConnectWalletModal = (props: ConnectWalletProps) => {
     if (peerConnectWalletInfo) {
       onPeerConnectAccept();
       connect(peerConnectWalletInfo.name).then(async () => {
-        console.log("handleAccept peerConnectWalletInfo:");
-        console.log(peerConnectWalletInfo);
-
         if (peerConnectWalletInfo.name === "idw_p2p") {
           const start = Date.now();
           const interval = 100;

diff --git a/ui/summit-2024/src/components/common/Header/Header.tsx b/ui/summit-2024/src/components/common/Header/Header.tsx
@@ -40,21 +40,10 @@ const Header = () => {
     const openConnectWalletModal = () => {
       setShowConnectWalletModal(true);
     };
-    eventBus.subscribe("openConnectWalletModal", openConnectWalletModal);
+    eventBus.subscribe(EventName.OpenConnectWalletModal, openConnectWalletModal);
 
     return () => {
-      eventBus.unsubscribe("openConnectWalletModal", openConnectWalletModal);
-    };
-  }, []);
-
-  useEffect(() => {
-    const openConnectWalletModal = () => {
-      setShowConnectWalletModal(true);
-    };
-    eventBus.subscribe("openConnectWalletModal", openConnectWalletModal);
-
-    return () => {
-      eventBus.unsubscribe("openConnectWalletModal", openConnectWalletModal);
+      eventBus.unsubscribe(EventName.OpenConnectWalletModal, openConnectWalletModal);
     };
   }, []);
 

diff --git a/ui/summit-2024/src/global.d.ts b/ui/summit-2024/src/global.d.ts
@@ -0,0 +1,9 @@
+declare global {
+    interface Window {
+        cardano: {
+            [key: string]: any;
+        };
+    }
+}
+
+export {};
diff --git a/ui/summit-2024/src/store/reducers/userCache/initialState.ts b/ui/summit-2024/src/store/reducers/userCache/initialState.ts
@@ -31,4 +31,4 @@ const initialStateData: UserCacheProps = {
   isVerified: false,
 };
 
-export { initialStateData };
+export { initialStateData, initialConnectedWallet };