fix: do not trigger create shared wallet more than once [LW-12780] (#1884)

Author: vetalcore

apps/browser-extension-wallet/src/views/browser-view/features/shared-wallet/SharedWallet.tsx

@@ -61,24 +61,27 @@ export const SharedWallet = (): JSX.Element => {
     if (isSharedWallet) setBackgroundPage();
   }, [isSharedWallet, setBackgroundPage]);
 
-  const handleCreateWallet = async (data: CreateWalletParams) => {
-    const activeWalletId = cardanoWallet.source.wallet.walletId;
+  const handleCreateWallet = useCallback(
+    async (data: CreateWalletParams) => {
+      const activeWalletId = cardanoWallet.source.wallet.walletId;
 
-    try {
-      await createInMemorySharedWallet({
-        name: data.name,
-        chainId: Wallet.Cardano.ChainIds[environmentName],
-        ownSignerWalletId: activeWalletId,
-        quorumRules: data.quorumRules,
-        coSigners: data.coSigners
-      });
-    } catch (error: unknown) {
-      if (error instanceof WalletConflictError) {
-        setIsWalletConflictModalVisible(true);
+      try {
+        await createInMemorySharedWallet({
+          name: data.name,
+          chainId: Wallet.Cardano.ChainIds[environmentName],
+          ownSignerWalletId: activeWalletId,
+          quorumRules: data.quorumRules,
+          coSigners: data.coSigners
+        });
+      } catch (error: unknown) {
+        if (error instanceof WalletConflictError) {
+          setIsWalletConflictModalVisible(true);
+        }
+        throw error;
       }
-      throw error;
-    }
-  };
+    },
+    [cardanoWallet.source.wallet.walletId, environmentName, createInMemorySharedWallet]
+  );
 
   const generateKey = useCallback(
     async (enteredPassword?: string) => {
@@ -97,6 +100,7 @@ export const SharedWallet = (): JSX.Element => {
   );
 
   const navigateToRoot = useCallback(() => history.push(walletRoutePaths.sharedWallet.root), [history]);
+  const navigateToAppHome = useCallback(() => setBackgroundPage(), [setBackgroundPage]);
 
   return (
     <>
@@ -131,7 +135,7 @@ export const SharedWallet = (): JSX.Element => {
                   walletKind={isHardwareWallet ? 'cold' : 'hot'}
                   activeWalletName={walletInfo?.name || ''}
                   initialWalletName={initialWalletName}
-                  navigateToAppHome={() => setBackgroundPage()}
+                  navigateToAppHome={navigateToAppHome}
                   exitTheFlow={navigateToRoot}
                   sharedWalletKey={sharedWalletKey}
                   onCreateSharedWallet={handleCreateWallet}
@@ -174,7 +178,7 @@ export const SharedWallet = (): JSX.Element => {
                   }}
                   sharedKeys={sharedWalletKey}
                   exitTheFlow={navigateToRoot}
-                  navigateToAppHome={() => setBackgroundPage()}
+                  navigateToAppHome={navigateToAppHome}
                   onImportJsonError={async () =>
                     await analytics.sendEventToPostHog(PostHogAction.SharedWalletsLocateWalletImportJsonError)
                   }

packages/core/src/shared-wallets/add-shared-wallet/creation-flow/SharedWalletCreationStore.tsx

@@ -3,6 +3,7 @@ import React, {
   ReactElement,
   ReactNode,
   createContext,
+  useCallback,
   useContext,
   useEffect,
   useMemo,
@@ -279,7 +280,7 @@ export const SharedWalletCreationStore = ({
   sharedWalletKey,
 }: SharedWalletCreationStoreProps): ReactElement => {
   const initialState = useInitialState(makeInitialState(activeWalletName));
-  const [state, dispatch] = useReducer(
+  const reducer = useCallback(
     (prevState: CreationFlowState, action: SharedWalletCreationAction): CreationFlowState => {
       const stateMachine = makeStateMachine({
         exitTheFlow,
@@ -290,9 +291,11 @@ export const SharedWalletCreationStore = ({
       const handler = stateMachine[prevState.step] as Handler<CreationFlowState>;
       return handler(prevState, action);
     },
-    initialState,
+    [exitTheFlow, navigateToAppHome, onCreateSharedWallet, sharedWalletKey],
   );
 
+  const [state, dispatch] = useReducer(reducer, initialState);
+
   useEffect(() => {
     if (state.walletName !== undefined || initialWalletName === undefined) return;
     dispatch({ type: SharedWalletCreationActionType.CHANGE_WALLET_NAME, walletName: initialWalletName });