Feature/disable blade wallet (#57)

Signed-off-by: norbert-kulus-arianelabs <[email protected]>
hashgraph · Nov 13, 2023 · 9a8f05c · 9a8f05c
1 parent 516b464
commit 9a8f05c
Show file tree

Hide file tree

Showing 4 changed files with 170 additions and 108 deletions.
diff --git a/src/assets/styles/components/modals/_connection.scss b/src/assets/styles/components/modals/_connection.scss
@@ -88,16 +88,28 @@
     }
 
     &--disabled {
-      background-color: $smoke;
+      background-color: $lightGrey;
+      color: $vapor;
+      border: unset !important;
+      border-top: 1px solid transparent !important;
 
       &:hover, &:active, &:focus {
-        background-color: $smoke;
+        background-color: $lightGrey;
         cursor: not-allowed;
+        color: $vapor !important;
+        border: unset !important;
+        border-top: 1px solid #8C8C8C !important;
 
         p {
           color: $vapor;
         }
       }
     }
+
+    &--blur-logo-image {
+      img {
+        filter: blur(2px);
+      }
+    }
   }
 }
diff --git a/src/components/shared/modals/ConnectionModal/ConnectToWalletButton.tsx b/src/components/shared/modals/ConnectionModal/ConnectToWalletButton.tsx
@@ -19,6 +19,7 @@
 
 import { useCallback, useContext, useMemo } from 'react';
 import classNames from 'classnames';
+import isString from 'lodash/isString';
 import { isMobile } from 'react-device-detect';
 import useHederaWallets, { ConnectionStateType } from '@utils/hooks/useHederaWallets';
 import { ModalContext } from '@utils/context/ModalContext';
@@ -27,10 +28,14 @@ export default function ConnectToWalletButton({
     isEnabled = true,
     walletType,
     logoImageSrc,
+    blurLogoImage,
+    staticLabel
   }: {
     isEnabled?: boolean,
     walletType: ConnectionStateType.HASHPACK | ConnectionStateType.BLADEWALLET
-    logoImageSrc?: string
+    logoImageSrc?: string,
+    blurLogoImage?: boolean,
+    staticLabel?: string
 }) {
   const { userWalletId, connectedWalletType, connect, disconnect, isIframeParent } = useHederaWallets();
   const { closeModal } = useContext(ModalContext)
@@ -39,7 +44,7 @@ export default function ConnectToWalletButton({
     if (!isEnabled) {
       return
     }
-    
+
     if (connectedWalletType === walletType) {
       disconnect()
     } else {
@@ -70,6 +75,10 @@ export default function ConnectToWalletButton({
   }, [walletType])
 
   const connectToWalletButtonContent = useMemo(() => {
+    if (isString(staticLabel)) {
+      return staticLabel;
+    }
+
     if (isEnabled && connectedWalletType === walletType) {
       return `Disconnect from account ${ userWalletId }`
     }
@@ -87,7 +96,7 @@ export default function ConnectToWalletButton({
         return `${ walletName } not supported on mobile`
       }
     }
-    
+
     if (!isEnabled) {
       return 'Coming soon'
     }
@@ -97,13 +106,14 @@ export default function ConnectToWalletButton({
     ) : (
       'Click to connect'
     )
-  }, [isEnabled, connectedWalletType, walletType, isIframeParent, userWalletId, walletName])
+  }, [isEnabled, staticLabel, connectedWalletType, walletType, isIframeParent, userWalletId, walletName])
 
   const connectToWalletButtonClassNames = useMemo(() => (
     classNames('connection-modal__button', {
-      'connection-modal__button--disabled': !isEnabled
+      'connection-modal__button--disabled': !isEnabled,
+      'connection-modal__button--blur-logo-image': blurLogoImage
     })
-  ), [isEnabled])
+  ), [isEnabled, blurLogoImage])
 
   return (
     <button

diff --git a/src/components/shared/modals/ConnectionModal/index.tsx b/src/components/shared/modals/ConnectionModal/index.tsx
@@ -37,7 +37,7 @@ export default function ConnectionModal() {
     if (!isIframeParent && !isMobile) {
       return true
     }
-    
+
     if (isIframeParent) {
       return isHashPackConnectionButtonEnabledInDAppExplorer
     }
@@ -64,7 +64,9 @@ export default function ConnectionModal() {
           <ConnectToWalletButton
             walletType={ConnectionStateType.BLADEWALLET}
             logoImageSrc={BladeWalletLogo}
-            isEnabled={!isMobile}
+            blurLogoImage
+            staticLabel='Blade wallet currently unavailable'
+            isEnabled={false}
           />
         )}
       </div>