From 309adca9192d7b4ec07f5d9d0f9f20648fe6a461 Mon Sep 17 00:00:00 2001
From: impelcrypto <92044428+impelcrypto@users.noreply.github.com>
Date: Mon, 15 Jan 2024 13:46:33 +0800
Subject: [PATCH] fix: refactor PolkadotWalletService (#1125)

* feat: updated checkIsSubstrateConnectInstalled function

* refactor: PolkadotWalletService

* fix: background color
---
 src/config/api/polkadot/connectApi.ts         |  2 +-
 src/css/app.scss                              |  8 -----
 src/layouts/DashboardLayout.vue               |  6 ++++
 src/pages/StakeManage.vue                     |  3 --
 .../implementations/PolkadotWalletService.ts  | 30 ++++++++++++++-----
 5 files changed, 30 insertions(+), 19 deletions(-)

diff --git a/src/config/api/polkadot/connectApi.ts b/src/config/api/polkadot/connectApi.ts
index 19200c9d6..f2187684b 100644
--- a/src/config/api/polkadot/connectApi.ts
+++ b/src/config/api/polkadot/connectApi.ts
@@ -17,7 +17,7 @@ type Provider = WsProvider | ScProvider;
 
 export const checkIsLightClient = (endpoint: string): boolean => endpoint.startsWith('light://');
 export const checkIsSubstrateConnectInstalled = (): boolean =>
-  !!document.getElementById('substrateConnectExtensionAvailable');
+  !!document.getElementById('substrateConnectExtensionAvailableV2');
 
 const getParachainSpec = (networkIdx: endpointKey): string => {
   switch (networkIdx) {
diff --git a/src/css/app.scss b/src/css/app.scss
index 6215dd8af..955cac697 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -17,10 +17,6 @@ body {
   overflow: hidden;
 }
 
-main {
-  background: #fff;
-}
-
 .screen--phone {
   @media (min-width: $sm) {
     display: none !important;
@@ -75,10 +71,6 @@ main {
 }
 
 .body--dark {
-  main {
-    background: $body-bg-dark;
-  }
-
   .border--separator {
     border-top: 1px solid $border-separator-dark;
   }
diff --git a/src/layouts/DashboardLayout.vue b/src/layouts/DashboardLayout.vue
index 606d5cc17..f8175529e 100644
--- a/src/layouts/DashboardLayout.vue
+++ b/src/layouts/DashboardLayout.vue
@@ -84,4 +84,10 @@ export default defineComponent({
     padding: 0 40px;
   }
 }
+
+.body--dark {
+  .wrapper--dashboard-layout__inner {
+    background: $body-bg-dark;
+  }
+}
 </style>
diff --git a/src/pages/StakeManage.vue b/src/pages/StakeManage.vue
index 9930cc3af..e210f730d 100644
--- a/src/pages/StakeManage.vue
+++ b/src/pages/StakeManage.vue
@@ -21,8 +21,5 @@ export default defineComponent({
 <style lang="scss" scoped>
 .stake-top {
   padding: 0 16px;
-  @media (min-width: $lg) {
-    margin-top: 50px;
-  }
 }
 </style>
diff --git a/src/v2/services/implementations/PolkadotWalletService.ts b/src/v2/services/implementations/PolkadotWalletService.ts
index 82ee84f75..79120d5f5 100644
--- a/src/v2/services/implementations/PolkadotWalletService.ts
+++ b/src/v2/services/implementations/PolkadotWalletService.ts
@@ -46,7 +46,7 @@ export class PolkadotWalletService extends WalletService implements IWalletServi
    * Signs given transaction.
    * @param extrinsic Transaction to sign.
    * @param senderAddress Sender address.
-   * @param successMessage Mesage to be displayed to user in case of successful tansaction.
+   * @param successMessage Mesage to be displayed to user in case of successful transaction.
    * If not defined, default message will be shown.
    * @param tip Transaction tip, If not provided it will be fetched from gas price provider,
    */
@@ -61,9 +61,7 @@ export class PolkadotWalletService extends WalletService implements IWalletServi
     Guard.ThrowIfUndefined('extrinsic', extrinsic);
     Guard.ThrowIfUndefined('senderAddress', senderAddress);
 
-    const isSnap =
-      String(localStorage.getItem(LOCAL_STORAGE.SELECTED_WALLET)) === SupportWallet.Snap;
-    const isDetectExtensionsAction = !isMobileDevice || !isSnap;
+    const isDetectExtensionsAction = this.checkIsDetectableWallet();
 
     let result: string | null = null;
     try {
@@ -119,8 +117,10 @@ export class PolkadotWalletService extends WalletService implements IWalletServi
               },
               (result) => {
                 try {
-                  isDetectExtensionsAction && this.detectExtensionsAction(false);
-                  isSnap && this.eventAggregator.publish(new BusyMessage(true));
+                  isDetectExtensionsAction
+                    ? this.detectExtensionsAction(false)
+                    : this.eventAggregator.publish(new BusyMessage(true));
+
                   if (result.isCompleted) {
                     if (!this.isExtrinsicFailed(result.events)) {
                       if (result.isError) {
@@ -230,8 +230,24 @@ export class PolkadotWalletService extends WalletService implements IWalletServi
     }
   }
 
+  // Memo: this helper method is used to display the loading animation while sending transactions
+  private checkIsDetectableWallet(): boolean {
+    const selectedWallet = String(
+      localStorage.getItem(LOCAL_STORAGE.SELECTED_WALLET)
+    ) as SupportWallet;
+
+    // Memo: Wallets which are not be able to tell the sending transaction status via events
+    const notDetectableWallet = [
+      SupportWallet.EnkryptNative,
+      SupportWallet.Snap,
+      SupportWallet.Math,
+    ];
+
+    const isDetectable = !notDetectableWallet.includes(selectedWallet);
+    return !isMobileDevice && isDetectable;
+  }
+
   // Memo: detects status in the wallet extension
-  // Fixme: doesn't work on MathWallet Mobile
   // Ref: https://github.com/polkadot-js/extension/issues/674
   // Ref: https://github.com/polkadot-js/extension/blob/297b2af14c68574b24bb8fdeda2208c473eccf43/packages/extension/src/page.ts#L10-L22
   private detectExtensionsAction(isMonitorExtension: boolean): void {