feat: wallectConnect preloader (#81)

* feat: wallet connect preloader * feat: connection qr expired * feat: log error if brave
reef-chain · May 27, 2024 · 2bce138 · 2bce138
1 parent 0f406f6
commit 2bce138
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 5 deletions.
diff --git a/public/img/wallets/walletconnect.svg b/public/img/wallets/walletconnect.svg
diff --git a/src/App.tsx b/src/App.tsx
@@ -38,6 +38,7 @@ const App = (): JSX.Element => {
   }
 
   const [selExtensionName, setSelExtensionName] = useState<string | undefined>(selectedWallet || undefined);
+  const [wcPreloader,setWcPreloader] = useState<boolean>(false);
   const {
     loading, error, signers, selectedReefSigner, network, provider, reefState, extension
   } = hooks.useInitReefStateExtension(
@@ -113,12 +114,23 @@ window.addEventListener("unhandledrejection", (event) => {
     }
 });
 
+//handle preloader
+useEffect(()=>{
+  // preloader active
+  if(wcPreloader && signers.length){
+    // if account connected , hide preloader
+    setWcPreloader(false)
+  }
+},[signers])
+
 const connectWalletConnect = async(ident:string)=>{
   const response:reefExt.WcConnection | undefined = await connectWc()
   console.log('connectWalletConnect',response);
       if (response) {
         reefExt.injectWcAsExtension(response, { name: reefExt.REEF_WALLET_CONNECT_IDENT, version: "1.0.0" });
         setSelExtensionName(ident);
+        // display preloader 
+        setWcPreloader(true);
       } else {
         // if proposal expired, recursively call
         Uik.notify.danger("Connection QR expired, reloading")
@@ -130,10 +142,14 @@ const connectWalletConnect = async(ident:string)=>{
 
   const onExtensionSelected = async(ident: string) => {
     console.log('onExtensionSelected', ident);
-    if (ident === reefExt.REEF_WALLET_CONNECT_IDENT) {
-      await connectWalletConnect(ident);
-    } else {
-      setSelExtensionName(ident);
+    try {
+      if (ident === reefExt.REEF_WALLET_CONNECT_IDENT) {
+        await connectWalletConnect(ident);
+      } else {
+        setSelExtensionName(ident);
+      }
+    } catch (error) {
+     console.log(error); 
     }
   }
 
@@ -187,6 +203,18 @@ const connectWalletConnect = async(ident:string)=>{
                           accountSelectorOpen={history.location.pathname !== SNAP_URL} />
                         <ContentRouter />
                         <NetworkSwitching isOpen={isNetworkSwitching} />
+                        <Uik.Modal title="Connecting to Mobile App"
+        isOpen={wcPreloader}>
+          <div>
+          <div className='wc-preloader'>
+            <div className='wc-loader'></div>
+            <img src="/img/wallets/walletconnect.svg" alt="" className='wc-icon-preloader' />
+          </div>
+          <div className='wc-loader-label' >
+            <Uik.Text type="mini" text="wait while we are establishing a connection"/>
+            </div>
+          </div>
+                          </Uik.Modal>
 
                         <ToastContainer
                           draggable

diff --git a/src/assets/index.css b/src/assets/index.css
@@ -341,4 +341,40 @@ input.form-control:focus {
 .modal-backdrop {
     z-index: 999 !important;
     opacity: 0 !important;
-}
+}
+
+.wc-icon-preloader{
+    width: 4rem;
+    height: 4rem;
+    position: absolute;
+}
+
+.wc-preloader{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.wc-loader {
+    border: 5px solid #f3f3f3;
+    border-top: 5px solid #3496ff;
+    border-radius: 50%;
+    width: 120px;
+    height: 120px;
+    animation: spin 2s linear infinite;
+  }
+
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+.wc-loader-label{
+    padding-top: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+}
+