feat: waiting for installation modal

feat: error handling
web3sp · Apr 26, 2023 · f9a9991 · f9a9991
1 parent 268db8a
commit f9a9991
Show file tree

Hide file tree

Showing 7 changed files with 176 additions and 58 deletions.
diff --git a/examples/react/src/App.tsx b/examples/react/src/App.tsx
@@ -24,8 +24,8 @@ const initTheme = "light" as const;
 const standaloneFallback = () =>
   EverscaleStandaloneClient.create({
     connection: {
-      id: 1,
-      group: "venom_mainnet",
+      id: 1000,
+      group: "venom_testnet",
       type: "jrpc",
       data: {
         endpoint: "https://jrpc.venom.foundation/rpc",
@@ -36,7 +36,7 @@ const standaloneFallback = () =>
 const initVenomConnect = async () => {
   return new VenomConnect({
     theme: initTheme,
-    checkNetworkId: 1,
+    checkNetworkId: 1000,
     providersOptions: {
       venomwallet: {
         links: {
@@ -253,7 +253,7 @@ const App = () => {
 
     if (standalone) {
       const mainnetContractAddress = new Address(
-        "0:", // todo
+        "0:" // todo
       );
 
       const contract = new standalone.Contract(

diff --git a/src/VenomConnect.tsx b/src/VenomConnect.tsx
@@ -65,6 +65,7 @@ class VenomConnect {
 
   private checkNetworkId: number | number[];
   private checkNetworkName: string;
+  private error: string | undefined = undefined;
 
   private themeConfig: ThemeConfig;
   private options: ProviderOptionsListWithOnClick;
@@ -513,6 +514,11 @@ class VenomConnect {
 
     root.render(
       <Modal
+        clearError={() => {
+          this.error = undefined;
+          this.renderModal();
+        }}
+        error={this.error}
         networkName={this.checkNetworkName}
         themeConfig={this.themeConfig}
         options={injectedLinkOptions}
@@ -530,10 +536,12 @@ class VenomConnect {
     );
   }
   private onError = async (error: any) => {
-    if (this.show) {
+    this.error = error;
+    this.renderModal();
+    if (!this.show) {
       await this._toggleModal();
     }
-    this.eventController.trigger(ERROR_EVENT, error);
+    // this.eventController.trigger(ERROR_EVENT, error);
   };
 
   private onProviderSelect = (providerId: string) => {

diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
@@ -16,6 +16,26 @@ import { CardManager } from "./CardManager";
 import { QrCard } from "./InnerCard";
 import { WrongNetworkPopup } from "./WrongNetworkPopup";
 
+const DoneButton = styled.div`
+  background: #11a97d;
+  width: 100%;
+  max-width: 320px;
+  height: 56px;
+  color: white;
+  border-radius: 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 20px;
+
+  font-family: "Poppins";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 20px;
+`;
+
 declare global {
   // tslint:disable-next-line
   interface Window {
@@ -37,6 +57,7 @@ enum Slide {
   walletsList,
   currentWallet,
   innerCard,
+  waitingInstallation,
 }
 
 type Case = {
@@ -55,12 +76,14 @@ const SProviders = styled.div`
 `;
 
 type ModalProps = {
+  error?: string;
   networkName: string;
   themeConfig: ThemeConfig;
   options: ProviderOptionsListWithOnClick;
   onClose: SimpleFunction;
   changeWallet: SimpleFunction;
   disconnect?: SimpleFunction;
+  clearError?: () => void;
 };
 
 export type ModalState = {
@@ -86,6 +109,8 @@ const INITIAL_STATE: ModalState = {
 };
 
 export const Modal = ({
+  error,
+  clearError,
   networkName,
   themeConfig: initThemeConfig,
   options,
@@ -195,6 +220,7 @@ export const Modal = ({
   const onCloseCrossClick = () => {
     if (!getInitialWalletOption()) setWalletId(undefined);
     if (!getInitialWalletWayToConnect()) setWalletWaysToConnect(undefined);
+    clearError?.();
 
     setSlide(getInitialSlide);
     onClose();
@@ -442,6 +468,28 @@ export const Modal = ({
 
   const innerCard = mobileAppsPopUp;
 
+  const waitingInstallation: Case = useMemo(() => {
+    return {
+      type: Slide.waitingInstallation,
+      element: (
+        <>
+          <div style={{ marginTop: 20 }}>
+            We are currently waiting for the installation and configuration of
+            the{" "}
+            {error?.includes("Venom")
+              ? "Venom"
+              : error?.includes("Ever")
+              ? "Ever"
+              : ""}{" "}
+            Wallet extension
+          </div>
+          <DoneButton onClick={() => window.location.reload()}>Done</DoneButton>
+        </>
+      ),
+      title: <>Waiting for the installation </>,
+    };
+  }, [options, themeConfig.theme]);
+
   const cards = [walletCardList, currentWalletCards, innerCard];
 
   const getCard: () => Case | undefined = () =>
@@ -464,6 +512,13 @@ export const Modal = ({
     }
   }, [wrongNetwork, show, isFullProvider]);
 
+  // removed error handling window, only if not found
+  useEffect(() => {
+    if (!!error && !error.includes("wallet is not found")) {
+      onCloseCrossClick();
+    }
+  }, [error]);
+
   return (
     <>
       <link
@@ -478,44 +533,77 @@ export const Modal = ({
           }
         `}
       </style>
-      <AbstractPopUp
-        show={show}
-        onClose={onCloseCrossClick}
-        themeObject={themeConfig.theme}
-        cardHeader={{
-          text: card?.title || "your wallet",
-          // fontSize: card?.type === Slide.currentWallet ? 20 : undefined,
-          textAlign: "left",
-        }}
-        goBack={slide !== getInitialSlide() ? goBack : undefined}
-      >
-        {card?.element}
-      </AbstractPopUp>
-      <AbstractPopUp
-        show={(!!wrongNetwork && !show && !!isFullProvider) || networkPause}
-        hide={!(!!wrongNetwork && !show && !!isFullProvider)}
-        themeObject={themeConfig.theme}
-        cardHeader={{
-          text: "Active network is wrong",
-        }}
-      >
-        <WrongNetworkPopup
-          textColor={themeConfig.theme.common.text.color}
-          changeWallet={changeWallet}
-          disconnect={disconnect}
-          networkName={networkName}
-        />
-      </AbstractPopUp>
-      <AbstractPopUp
-        show={!!isExtensionWindowOpen || extensionPause}
-        hide={!isExtensionWindowOpen}
-        themeObject={themeConfig.theme}
-        cardHeader={{
-          text: popUpText.title,
-        }}
-      >
-        <>{popUpText.text}</>
-      </AbstractPopUp>
+      {error ? (
+        error.includes("wallet is not found") ? (
+          <AbstractPopUp
+            show={!!error}
+            hide={!error}
+            themeObject={themeConfig.theme}
+            cardHeader={{
+              text: waitingInstallation.title,
+            }}
+          >
+            {waitingInstallation?.element}
+          </AbstractPopUp>
+        ) : (
+          <></>
+          // <AbstractPopUp
+          //   show={!!error}
+          //   hide={!error}
+          //   themeObject={themeConfig.theme}
+          //   onClose={onCloseCrossClick}
+          //   cardHeader={{
+          //     text: "Error",
+          //   }}
+          // >
+          //   <>
+          //     <div style={{ marginTop: 20 }}>{error}</div>
+          //     <DoneButton onClick={onCloseCrossClick}>Close</DoneButton>
+          //   </>
+          // </AbstractPopUp>
+        )
+      ) : (
+        <>
+          <AbstractPopUp
+            show={show}
+            onClose={onCloseCrossClick}
+            themeObject={themeConfig.theme}
+            cardHeader={{
+              text: card?.title || "your wallet",
+              // fontSize: card?.type === Slide.currentWallet ? 20 : undefined,
+              textAlign: "left",
+            }}
+            goBack={slide !== getInitialSlide() ? goBack : undefined}
+          >
+            {card?.element}
+          </AbstractPopUp>
+          <AbstractPopUp
+            show={(!!wrongNetwork && !show && !!isFullProvider) || networkPause}
+            hide={!(!!wrongNetwork && !show && !!isFullProvider)}
+            themeObject={themeConfig.theme}
+            cardHeader={{
+              text: "Active network is wrong",
+            }}
+          >
+            <WrongNetworkPopup
+              textColor={themeConfig.theme.common.text.color}
+              changeWallet={changeWallet}
+              disconnect={disconnect}
+              networkName={networkName}
+            />
+          </AbstractPopUp>
+          <AbstractPopUp
+            show={!!isExtensionWindowOpen || extensionPause}
+            hide={!isExtensionWindowOpen}
+            themeObject={themeConfig.theme}
+            cardHeader={{
+              text: popUpText.title,
+            }}
+          >
+            <>{popUpText.text}</>
+          </AbstractPopUp>
+        </>
+      )}
     </>
   );
 };
diff --git a/src/controllers/ProviderController.ts b/src/controllers/ProviderController.ts
@@ -387,6 +387,9 @@ export class ProviderController {
         extensionWindowClosed: () => {
           this.eventController.trigger(EXTENSION_WINDOW_CLOSED_EVENT);
         },
+        extensionWindowError: (error) => {
+          this.eventController.trigger(ERROR_EVENT, error);
+        },
       });
 
       this.currentProvider = provider;

diff --git a/src/providers/connectors/everwallet.ts b/src/providers/connectors/everwallet.ts
@@ -190,14 +190,23 @@ const connectToEverWallet = async (
     });
 
     return everProvider;
-  } catch (error) {
-    // console.error(error);
-    callbacks.extensionWindowClosed();
+  } catch (error: any) {
+    let emessage;
+    if (typeof error === "object") {
+      if (error.message) {
+        emessage = error.message; // get the error message
+      } else {
+        emessage = JSON.stringify(error); // convert the object to a string
+      }
+    } else {
+      emessage = error.toString(); // convert the error to a string
+    }
+    callbacks.extensionWindowError(emessage);
+  } finally {
+    await toggleExtensionWindow({
+      isExtensionWindowOpen: false,
+    });
   }
-
-  await toggleExtensionWindow({
-    isExtensionWindowOpen: false,
-  });
 };
 
 /**

diff --git a/src/providers/connectors/venomwallet.ts b/src/providers/connectors/venomwallet.ts
@@ -190,14 +190,23 @@ const connectToVenomWallet = async (
     });
 
     return venomProvider;
-  } catch (error) {
-    // console.error(error);
-    callbacks.extensionWindowClosed();
+  } catch (error: any) {
+    let emessage;
+    if (typeof error === "object") {
+      if (error.message) {
+        emessage = error.message; // get the error message
+      } else {
+        emessage = JSON.stringify(error); // convert the object to a string
+      }
+    } else {
+      emessage = error.toString(); // convert the error to a string
+    }
+    callbacks.extensionWindowError(emessage);
+  } finally {
+    await toggleExtensionWindow({
+      isExtensionWindowOpen: false,
+    });
   }
-
-  await toggleExtensionWindow({
-    isExtensionWindowOpen: false,
-  });
 };
 
 /**

diff --git a/src/types.ts b/src/types.ts
@@ -241,4 +241,5 @@ export type ProviderControllerOptions = {
 export type Callbacks = {
   authorizationCompleted: (provider: any) => void;
   extensionWindowClosed: () => void;
+  extensionWindowError: (error: any) => void;
 };