Handle wallet connection cancellation, timeouts and errors (#27)

nix/gen/npm-deps-hash.nix

@@ -1,2 +1,2 @@
 # This file was generated by prefetch-npm-deps
-"sha256-pZ5QQgWs5ymu+2Vieurq/B84uU1bIM2abwIcdnt0U8U="
+"sha256-3sDbVhLjIYiSICPJZfjneW6s2nNKsKSJxtkOt+xTKKQ="

nix/gen/spago-packages.nix

@@ -199,11 +199,11 @@ let
 
     "cardano-wallet-client" = pkgs.stdenv.mkDerivation {
       name = "cardano-wallet-client";
-      version = "v0.1.0";
+      version = "v0.1.1";
       src = pkgs.fetchgit {
         url = "https://github.com/input-output-hk/purescript-cardano-wallet-client.git";
-        rev = "a2b08694d2c9d5e55e0707a1ce7d292503ee1eca";
-        sha256 = "1pin92qfjm8lvirkrc9n8i38940nsa12cfadz2m9drrzr0z45m29";
+        rev = "d6c4be8bc24d285e700264ad29cf6b6b7623c6ed";
+        sha256 = "09vqahbsawzp8qjcylvpcy1yrk0b489c4hd9z22jabs8mpai624r";
       };
       phases = "installPhase";
       installPhase = "ln -s $src $out";

package.json

@@ -18,6 +18,7 @@
     "react-bootstrap": "^2.7.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.7.1",
+    "react-loading-overlay-ts": "^2.0.2",
     "react-markdown": "^8.0.5",
     "react-syntax-highlighter": "^15.5.0",
     "reactflow": "^11.7.2",

packages.dhall

@@ -321,7 +321,7 @@ in  upstream
         , "web-encoding"
         ]
         "https://github.com/input-output-hk/purescript-cardano-wallet-client.git"
-        "v0.1.0"
+        "v0.1.1"
 
   -- with marlowe-runtime-client = ../purescript-marlowe-runtime-client/spago.dhall as Location
   with marlowe-runtime-client =

public/style.scss

@@ -209,6 +209,10 @@ $link-color: #511CF7;
   min-height: 100%;
 }
 
+.min-height-250px {
+  min-height: 250px;
+}
+
 .shadow-bottom {
   box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.1);
 }
@@ -342,7 +346,6 @@ $link-color: #511CF7;
 }
 
 .blur-bg {
-  background: rgba(255, 255, 255, 0.7);
   backdrop-filter: blur(5px);
 }
 

spago.dhall

@@ -27,7 +27,6 @@
   , "foreign-generic"
   , "foreign-object"
   , "formatters"
-  , "free"
   , "functions"
   , "functors"
   , "halogen-subscriptions"

src/Component/App.purs

@@ -13,10 +13,12 @@ import Component.LandingPage (mkLandingPage)
 import Component.MessageHub (mkMessageBox, mkMessagePreview)
 import Component.Testing (mkDataTestAttrs)
 import Component.Types (ConfigurationError(..), ContractInfo(..), ContractJsonString, MessageHub(MessageHub), MkComponentMBase, Page(..), WalletInfo(..))
+import Component.Types as MessageHub
 import Component.Types.ContractInfo (ContractCreated(..), ContractUpdated(..)) as ContractInfo
 import Component.Types.ContractInfo (SomeContractInfo)
 import Component.Types.ContractInfoMap as ContractInfoMap
 import Component.Widgets (linkWithIcon)
+import Component.Widgets as Widgets
 import Contrib.React.Svg (svgImg)
 import Control.Monad.Error.Class (catchError)
 import Control.Monad.Loops (untilJust)
@@ -37,6 +39,7 @@ import Data.String.Extra (upperCaseFirst) as String
 import Data.Time.Duration (Milliseconds(..))
 import Data.Traversable (for, traverse)
 import Data.Tuple.Nested (type (/\), (/\))
+import Debug (traceM)
 import Effect (Effect)
 import Effect.Aff (Aff, delay, forkAff, launchAff_, supervise)
 import Effect.Class (liftEffect)
@@ -60,6 +63,7 @@ import ReactBootstrap.Modal (modal, modalBody, modalHeader)
 import ReactBootstrap.Offcanvas (offcanvas)
 import ReactBootstrap.Offcanvas as Offcanvas
 import Record as Record
+import Runner.Contrib.Effect.Aff (withTimeout, withTimeout_)
 import Type.Prelude (Proxy(..))
 import Utils.React.Basic.Hooks (useLoopAff, useStateRef, useStateRef')
 import Wallet as Wallet
@@ -69,18 +73,20 @@ import Web.HTML (window)
 
 -- | Debugging helpers which allow us to automatically connect wallet
 data WalletBrand
-  = Lace
-  | Yoroi
+  = Eternl
+  | Gero
+  | Lace
   | Nami
-  | Eternl
   | Typhon
+  | Yoroi
 
 instance Show WalletBrand where
-  show Yoroi = "Yoroi"
-  show Nami = "Nami"
-  show Lace = "Lace"
   show Eternl = "Eternl"
+  show Gero = "Gero"
+  show Lace = "Lace"
+  show Nami = "Nami"
   show Typhon = "Typhon"
+  show Yoroi = "Yoroi"
 
 autoConnectWallet :: WalletBrand -> (WalletInfo Wallet.Api -> Effect Unit) -> Aff Unit
 autoConnectWallet walletBrand onSuccess = liftEffect (window >>= Wallet.cardano) >>= case _ of
@@ -90,12 +96,13 @@ autoConnectWallet walletBrand onSuccess = liftEffect (window >>= Wallet.cardano)
   Just cardano -> do
     let
       extractWallet = case walletBrand of
+        Eternl -> Wallet.eternl
+        Gero -> Wallet.gerowallet
         Lace -> Wallet.lace
         Nami -> Wallet.nami
-        Yoroi -> Wallet.yoroi
-        Eternl -> Wallet.eternl
         Typhon -> Wallet.typhon
-    liftEffect (extractWallet cardano) >>= traverse walletInfo >>= case _ of
+        Yoroi -> Wallet.yoroi
+    liftEffect (extractWallet cardano) >>= traverse walletInfo >>= join >>> case _ of
       Nothing -> do
         liftEffect $ throw $ "Unable to extract wallet " <> show walletBrand
       Just walletInfo@(WalletInfo { wallet }) -> do
@@ -272,16 +279,19 @@ mkApp = do
         Nothing, Just _ -> do
           liftEffect $ setWalletContext Nothing
         Just (WalletInfo walletInfo), _ -> do
-          let
-            action = do
-              walletContext <- WalletContext.walletContext cardanoMultiplatformLib walletInfo.wallet
-              liftEffect $ setWalletContext walletContext
-              -- FIXME: Another work around the rounting issue.
-              when (isNothing pwc) do
-                liftEffect $ props.setPage ContractListPage
-          action `catchError` \_ -> do
-            -- FIXME: Report back (to the reporting backend) a wallet problem?
-            pure unit
+          res <- withTimeout (Milliseconds 7000.0) do
+            traceM "TRYING TO FETCH WALLET CONTEXT"
+            walletContext <- WalletContext.walletContext cardanoMultiplatformLib walletInfo.wallet
+            traceM "FAILED"
+            liftEffect $ setWalletContext walletContext
+            -- FIXME: Another work around the rounting issue.
+            when (isNothing pwc) do
+              liftEffect $ props.setPage ContractListPage
+          case res of
+            Nothing -> liftEffect do
+              msgHubProps.add $ MessageHub.Error $ DOOM.text "Wallet is not responding. Please check its configuration or try another wallet"
+              setWalletInfo Nothing
+            Just _ -> pure unit
 
     disconnectingWallet /\ setDisconnectingWallet <- useState' false
     checkingNotifications /\ setCheckingNotifications <- useState' false
@@ -475,9 +485,12 @@ mkApp = do
             }
         , footer
         ]
-      _, _ -> DOM.div {} $
-        [ topNavbar
-        , appError
-        , landingPage { setWalletInfo: setWalletInfo <<< Just }
-        ]
+      _, _ ->
+        Widgets.loadingOverlay { active: isJust possibleWalletInfo, showSpinner: false }
+          [ DOM.div {} $
+              [ topNavbar
+              , appError
+              , landingPage { setWalletInfo: setWalletInfo <<< Just }
+              ]
+          ]