fix: connected wallet in redux

cardano-foundation · Aug 5, 2024 · aaa869f · aaa869f
1 parent 5d7ca27
commit aaa869f
Show file tree

Hide file tree

Showing 13 changed files with 102 additions and 653 deletions.
diff --git a/ui/summit-2024/package-lock.json b/ui/summit-2024/package-lock.json
diff --git a/ui/summit-2024/package.json b/ui/summit-2024/package.json
@@ -35,7 +35,6 @@
     "@types/uuid": "^9.0.2",
     "classnames": "^2.3.2",
     "cypress": "^12.14.0",
-    "esbuild": "^0.21.5",
     "eslint-plugin-cypress": "^2.13.3",
     "history": "^5.3.0",
     "i18next": "^22.4.14",

diff --git a/ui/summit-2024/src/components/AppWrapper/AppWrapper.tsx b/ui/summit-2024/src/components/AppWrapper/AppWrapper.tsx
@@ -8,54 +8,48 @@ import { eventDataFixture } from "../../__fixtures__/event";
 import { ToastType } from "../common/Toast/Toast.types";
 import { getIsVerified } from "../../common/api/verificationService";
 import {
-  getWalletIdentifier,
-  setWalletIdentifier,
+  getConnectedWallet,
+  setConnectedWallet,
   setWalletIsVerified,
 } from "../../store/reducers/userCache";
 import { useCardano } from "@cardano-foundation/cardano-connect-with-wallet";
 import { resolveCardanoNetwork } from "../../utils/utils";
 
 const AppWrapper = (props: { children: ReactNode }) => {
   const dispatch = useAppDispatch();
-  const walletIdentifier = useAppSelector(getWalletIdentifier);
-
-  const { stakeAddress } = useCardano({
+  const connectedWallet = useAppSelector(getConnectedWallet);
+  const { stakeAddress, enabledWallet } = useCardano({
     limitNetwork: resolveCardanoNetwork(env.TARGET_NETWORK),
   });
 
   useEffect(() => {
     initApp();
   }, []);
 
-  useEffect(() => {
-    if (stakeAddress) {
-      dispatch(setWalletIdentifier(stakeAddress));
-    }
-  }, [stakeAddress]);
-
   useEffect(() => {
     const checkWalletVerification = async () => {
-      const isVerifiedResult = await getIsVerified(walletIdentifier);
+      const isVerifiedResult = await getIsVerified(connectedWallet.address);
       // @ts-ignore
       if (!isVerifiedResult?.error) {
         // @ts-ignore
         dispatch(setWalletIsVerified(isVerifiedResult.verified));
-      } else {
-        eventBus.publish(
-          EventName.ShowToast,
-          "Failed to check wallet verification",
-          ToastType.Error,
-        );
       }
     };
-    if (walletIdentifier?.length) {
+    if (connectedWallet.address?.length) {
       checkWalletVerification();
     }
-  }, [walletIdentifier]);
+  }, [connectedWallet.address]);
 
   useEffect(() => {
-    if (stakeAddress) {
-      dispatch(setWalletIdentifier(stakeAddress));
+    if (stakeAddress && enabledWallet) {
+      dispatch(
+          setConnectedWallet({
+            address: stakeAddress,
+            name: enabledWallet,
+            icon: window.cardano[enabledWallet].icon,
+            version: window.cardano[enabledWallet].version,
+          }),
+      );
     }
   }, [stakeAddress]);
 

diff --git a/ui/summit-2024/src/components/ConnectWalletButton/ConnectWalletButton.tsx b/ui/summit-2024/src/components/ConnectWalletButton/ConnectWalletButton.tsx
@@ -1,4 +1,3 @@
-import { useCardano } from "@cardano-foundation/cardano-connect-with-wallet";
 import {
   Avatar,
   Box,
@@ -14,19 +13,13 @@ import ExitToAppIcon from "@mui/icons-material/ExitToApp";
 import VerifiedIcon from "@mui/icons-material/Verified";
 import "./ConnectWalletButton.scss";
 import { getUserInSession, tokenIsExpired } from "../../utils/session";
-import {
-  addressSlice,
-  resolveCardanoNetwork,
-  walletIcon,
-} from "../../utils/utils";
-import { env } from "../../common/constants/env";
+import { addressSlice } from "../../utils/utils";
 import { eventBus } from "../../utils/EventBus";
 import { useIsPortrait } from "../../common/hooks/useIsPortrait";
 import { useAppSelector } from "../../store/hooks";
 import { getEventCache } from "../../store/reducers/eventCache";
 import {
   getConnectedWallet,
-  getWalletIdentifier,
   getWalletIsVerified,
 } from "../../store/reducers/userCache";
 import { useNavigate } from "react-router-dom";
@@ -47,20 +40,13 @@ const ConnectWalletButton = (props: ConnectWalletButtonProps) => {
   const isMobile = useIsPortrait();
   const eventCache = useAppSelector(getEventCache);
   const walletIsVerified = useAppSelector(getWalletIsVerified);
-  const walletIdentifier = useAppSelector(getWalletIdentifier);
   const connectedWallet = useAppSelector(getConnectedWallet);
 
   const session = getUserInSession();
   const isExpired = tokenIsExpired(session?.expiresAt);
 
-  const { enabledWallet, stakeAddress } = useCardano({
-    limitNetwork: resolveCardanoNetwork(env.TARGET_NETWORK),
-  });
-
-  const walletName = stakeAddress ? enabledWallet : connectedWallet.name;
-
   const handleConnectWallet = () => {
-    if (!walletIdentifier || !walletIdentifier.length) {
+    if (!connectedWallet.address || !connectedWallet.address .length) {
       onOpenConnectWalletModal();
     }
   };
@@ -78,25 +64,25 @@ const ConnectWalletButton = (props: ConnectWalletButtonProps) => {
       <Button
         sx={{ zIndex: "99", padding: isMobile ? "10px 10px" : "16px 20px" }}
         className={`main-button ${
-          walletIdentifier?.length ? "connected-button" : "connect-button"
+            connectedWallet.address ?.length ? "connected-button" : "connect-button"
         }`}
         color="inherit"
         onClick={() => handleConnectWallet()}
       >
-        {walletIdentifier?.length ? (
+        {connectedWallet.address ?.length ? (
           <Avatar
-            src={walletIcon(walletName)}
+            src={connectedWallet.icon}
             style={{ width: "24px", height: "24px" }}
           />
         ) : (
           <AccountBalanceWalletIcon />
         )}
-        {walletIdentifier?.length ? (
+        {connectedWallet.address ?.length ? (
           <>
             {isMobile
               ? null
-              : walletIdentifier
-                ? addressSlice(walletIdentifier, 5)
+              : connectedWallet.address
+                    ? addressSlice(connectedWallet.address , 5)
                 : null}
             {walletIsVerified ? (
               <VerifiedIcon
@@ -115,7 +101,7 @@ const ConnectWalletButton = (props: ConnectWalletButtonProps) => {
           <>{props.label?.length ? <span>{props.label}</span> : null}</>
         )}
       </Button>
-      {walletIdentifier?.length ? (
+      {connectedWallet.address ?.length ? (
         <Box
           component="div"
           className="disconnect-wrapper"

diff --git a/ui/summit-2024/src/components/ConnectWalletList/ConnectWalletList.tsx b/ui/summit-2024/src/components/ConnectWalletList/ConnectWalletList.tsx
@@ -49,7 +49,6 @@ const ConnectWalletList = (props: ConnectWalletListProps) => {
     setCurrentPath,
     handleOnPeerConnectAccept,
     closeModal,
-
     connectExtensionWallet,
   } = props;
 

diff --git a/ui/summit-2024/src/components/ConnectWalletList/ConnectWalletList.types.ts b/ui/summit-2024/src/components/ConnectWalletList/ConnectWalletList.types.ts
@@ -3,7 +3,7 @@ interface IWalletInfo {
   name: string;
   version: string;
   icon: string;
-  requestAutoconnect: boolean;
+  requestAutoconnect?: boolean;
 }
 
 enum ConnectWalletFlow {

diff --git a/ui/summit-2024/src/components/ConnectWalletModal/ConnectWalletModal.tsx b/ui/summit-2024/src/components/ConnectWalletModal/ConnectWalletModal.tsx
@@ -13,8 +13,7 @@ import { eventBus, EventName } from "../../utils/EventBus";
 import { useIsPortrait } from "../../common/hooks/useIsPortrait";
 import { useAppDispatch } from "../../store/hooks";
 import {
-  setConnectedWallet,
-  setWalletIdentifier,
+  setConnectedWallet
 } from "../../store/reducers/userCache";
 import { ToastType } from "../common/Toast/Toast.types";
 import { initialConnectedWallet } from "../../store/reducers/userCache/initialState";
@@ -36,10 +35,17 @@ const ConnectWalletModal = (props: ConnectWalletProps) => {
     /*TODO */
   });
 
-  const { connect, dAppConnect, meerkatAddress, initDappConnect, disconnect } =
-    useCardano({
-      limitNetwork: resolveCardanoNetwork(env.TARGET_NETWORK),
-    });
+  const {
+    connect,
+    dAppConnect,
+    stakeAddress,
+    enabledWallet,
+    meerkatAddress,
+    initDappConnect,
+    disconnect,
+  } = useCardano({
+    limitNetwork: resolveCardanoNetwork(env.TARGET_NETWORK),
+  });
 
   const isMobile = useIsPortrait();
 
@@ -60,11 +66,6 @@ const ConnectWalletModal = (props: ConnectWalletProps) => {
     return setConnectCurrentPaths([currentPath, ...filteredPaths]);
   };
 
-  const onConnectWallet = () => {
-    eventBus.publish(EventName.CloseConnectWalletModal);
-    eventBus.publish(EventName.ShowToast, "Wallet connected successfully");
-  };
-
   const onConnectError = (e: Error) => {
     eventBus.publish(EventName.ShowToast, e.message, ToastType.Error);
   };
@@ -89,10 +90,9 @@ const ConnectWalletModal = (props: ConnectWalletProps) => {
             const enabledApi = await api.enable();
             const keriIdentifier =
               await enabledApi.experimental.getKeriIdentifier();
-            dispatch(setWalletIdentifier(keriIdentifier.id));
             dispatch(
               setConnectedWallet({
-                address: api.identifier,
+                address: keriIdentifier,
                 name: api.name,
                 icon: api.icon,
                 requestAutoconnect: true,
@@ -115,11 +115,22 @@ const ConnectWalletModal = (props: ConnectWalletProps) => {
           connect(
             name,
             () => {
-              eventBus.publish(
-                EventName.ShowToast,
-                `${name} Wallet connected successfully`,
-              );
-              props.handleCloseConnectWalletModal();
+              if (stakeAddress && enabledWallet) {
+                dispatch(
+                  setConnectedWallet({
+                    address: stakeAddress,
+                    name: enabledWallet,
+                    icon: window.cardano[name].icon,
+                    version: window.cardano[name].version,
+                  }),
+                );
+
+                eventBus.publish(
+                  EventName.ShowToast,
+                  `${name} Wallet connected successfully`,
+                );
+                props.handleCloseConnectWalletModal();
+              }
             },
             (e: Error) => {
               eventBus.publish(EventName.ShowToast, e.message, ToastType.Error);
@@ -129,7 +140,6 @@ const ConnectWalletModal = (props: ConnectWalletProps) => {
       };
 
       const onApiEject = (name: string): void => {
-        dispatch(setWalletIdentifier(""));
         dispatch(setConnectedWallet(initialConnectedWallet));
         setPeerConnectWalletInfo(undefined);
         eventBus.publish(
@@ -141,7 +151,9 @@ const ConnectWalletModal = (props: ConnectWalletProps) => {
 
       const onP2PConnect = (): void => {
         if (peerConnectWalletInfo?.address) {
-          dispatch(setWalletIdentifier(peerConnectWalletInfo.address));
+          dispatch(
+              setConnectedWallet(peerConnectWalletInfo),
+          );
         }
       };
 
@@ -157,8 +169,24 @@ const ConnectWalletModal = (props: ConnectWalletProps) => {
     }
   }, []);
 
-  const handleConnectExtensionWallet = (walletName: string) => {
-    connect(walletName, onConnectWallet, onConnectError);
+  const handleConnectExtensionWallet = async (walletName: string) => {
+    console.log("hey");
+    await connect(
+      walletName,
+      () => {
+        dispatch(
+          setConnectedWallet({
+            address: stakeAddress || "",
+            name: walletName,
+            icon: window.cardano[walletName].icon,
+            version: window.cardano[walletName].version,
+          }),
+        );
+        eventBus.publish(EventName.CloseConnectWalletModal);
+        eventBus.publish(EventName.ShowToast, "Wallet connected successfully");
+      },
+      onConnectError,
+    );
   };
 
   const handleAcceptP2PWallet = () => {
@@ -180,8 +208,10 @@ const ConnectWalletModal = (props: ConnectWalletProps) => {
                 const enabledApi = await api.enable();
                 const keriIdentifier =
                   await enabledApi.experimental.getKeriIdentifier();
-                dispatch(setWalletIdentifier(keriIdentifier.id));
-                dispatch(setConnectedWallet(peerConnectWalletInfo));
+                dispatch(setConnectedWallet({
+                  ...peerConnectWalletInfo,
+                  address: keriIdentifier.id
+                }));
               } else {
                 eventBus.publish(
                   EventName.ShowToast,

diff --git a/ui/summit-2024/src/components/VerifyWalletModal/VerifyWalletModal.tsx b/ui/summit-2024/src/components/VerifyWalletModal/VerifyWalletModal.tsx
@@ -33,10 +33,10 @@ import { CustomCheckBox } from "../common/CustomCheckBox/CustomCheckBox";
 import { validatePhoneNumberLength } from "libphonenumber-js";
 import { eventBus, EventName } from "../../utils/EventBus";
 import {
-  getVerificationStarted,
-  getWalletIdentifier,
-  setVerificationStarted,
-  setWalletIsVerified,
+    getConnectedWallet,
+    getVerificationStarted,
+    setVerificationStarted,
+    setWalletIsVerified,
 } from "../../store/reducers/userCache";
 import { useAppDispatch, useAppSelector } from "../../store/hooks";
 import { VerificationStarted } from "../../store/reducers/userCache/userCache.types";
@@ -50,7 +50,7 @@ import { useSignatures } from "../../common/hooks/useSignatures";
 const excludedCountries: MuiTelInputCountry[] | undefined = [];
 
 const VerifyWalletModal = () => {
-  const walletIdentifier = useAppSelector(getWalletIdentifier);
+    const connectedWallet = useAppSelector(getConnectedWallet);
   const dispatch = useAppDispatch();
 
   const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
@@ -132,13 +132,13 @@ const VerifyWalletModal = () => {
   const handleSendCode = async () => {
     if (matchIsValidTel(phone) && checkImNotARobot) {
       setPhoneCodeIsBeenSending(true);
-      sendSmsCode(walletIdentifier, phone.trim().replace(" ", ""))
+      sendSmsCode(connectedWallet.address, phone.trim().replace(" ", ""))
         // @ts-ignore
         .then((response: VerificationStarted) => {
           handleSetCurrentPath(VerifyWalletFlow.CONFIRM_CODE);
           dispatch(
             setVerificationStarted({
-              walletIdentifier,
+                walletIdentifier: connectedWallet.address,
               ...response,
             }),
           );
@@ -155,7 +155,7 @@ const VerifyWalletModal = () => {
   const handleVerifyPhoneCode = () => {
     setPhoneCodeIsBeenConfirming(true);
     confirmPhoneNumberCode(
-      walletIdentifier,
+        connectedWallet.address,
       phone.trim().replace(" ", ""),
       userVerificationStarted.requestId,
       codes.join(""),
@@ -191,8 +191,8 @@ const VerifyWalletModal = () => {
   const handleVerifyDiscord = async () => {
     const signedMessageResult = await signWithWallet(
       inputSecret.trim(),
-      walletIdentifier,
-      resolveWalletType(walletIdentifier),
+        connectedWallet.address,
+      resolveWalletType(connectedWallet.address),
     );
 
     if (!signedMessageResult.success) {
@@ -201,7 +201,7 @@ const VerifyWalletModal = () => {
     }
     const parsedSecret = inputSecret.split("|")[1];
     const verifyDiscordResult = await verifyDiscord(
-      walletIdentifier,
+        connectedWallet.address,
       parsedSecret,
       // @ts-ignore
       signedMessageResult.result,