From f3244c4f362d197455f6eff029e66732a732e959 Mon Sep 17 00:00:00 2001
From: Saad Ahmed <48211799+saadjhk@users.noreply.github.com>
Date: Fri, 8 Mar 2024 20:20:56 +0500
Subject: [PATCH] feat: Retry loading bridge routes (#136)

## Description

Added retry sdk initialization

## Related Issue Or Context

https://github.com/sygmaprotocol/sygma-widget/issues/96

Closes: #96

## How Has This Been Tested? Testing details.

- Tested locally

## Types of changes

Changes:


- [x] Added state in widget component to keep track of sdk
initialization
- [x] Added event to be fired when sdk is initialized
- [x] Retry sdk init method
---
 .../transfers/fungible-token-transfer.ts      | 23 ++++++++++++++++++-
 packages/widget/src/interfaces/index.ts       |  8 +++++++
 packages/widget/src/widget.ts                 |  8 ++++++-
 3 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/packages/widget/src/controllers/transfers/fungible-token-transfer.ts b/packages/widget/src/controllers/transfers/fungible-token-transfer.ts
index afcfab9f..a0a28532 100644
--- a/packages/widget/src/controllers/transfers/fungible-token-transfer.ts
+++ b/packages/widget/src/controllers/transfers/fungible-token-transfer.ts
@@ -13,6 +13,7 @@ import type { ReactiveController, ReactiveElement } from 'lit';
 import { MAINNET_EXPLORER_URL, TESTNET_EXPLORER_URL } from '../../constants';
 import { walletContext } from '../../context';
 
+import { SdkInitializedEvent } from '../../interfaces';
 import { buildEvmFungibleTransactions, executeNextEvmTransaction } from './evm';
 
 export enum FungibleTransferState {
@@ -82,10 +83,30 @@ export class FungibleTokenTransferController implements ReactiveController {
     this.reset();
   }
 
+  /**
+   * Infinite Try/catch wrapper around
+   * {@link Config} from `@buildwithsygma/sygma-sdk-core`
+   * and emits a {@link SdkInitializedEvent}
+   * @param {number} time to wait before retrying request in ms
+   * @returns {void}
+   */
+  async retryInitSdk(retryMs = 100): Promise<void> {
+    try {
+      await this.config.init(1, this.env);
+      this.host.dispatchEvent(
+        new SdkInitializedEvent({ hasInitialized: true })
+      );
+    } catch (error) {
+      setTimeout(() => {
+        this.retryInitSdk(retryMs * 2).catch(console.error);
+      }, retryMs);
+    }
+  }
+
   async init(env: Environment): Promise<void> {
     this.host.requestUpdate();
     this.env = env;
-    await this.config.init(1, env);
+    await this.retryInitSdk();
     this.supportedSourceNetworks = this.config.getDomains();
     //remove once we have proper substrate transfer support
     // .filter((n) => n.type === Network.EVM);
diff --git a/packages/widget/src/interfaces/index.ts b/packages/widget/src/interfaces/index.ts
index b4cc43fe..f02bf4c1 100644
--- a/packages/widget/src/interfaces/index.ts
+++ b/packages/widget/src/interfaces/index.ts
@@ -34,3 +34,11 @@ export interface ISygmaProtocolWidget {
   customLogo?: SVGElement;
   theme?: Theme;
 }
+
+export class SdkInitializedEvent extends CustomEvent<{
+  hasInitialized: boolean;
+}> {
+  constructor(update: { hasInitialized: boolean }) {
+    super('sdk-initialized', { detail: update, composed: true, bubbles: true });
+  }
+}
diff --git a/packages/widget/src/widget.ts b/packages/widget/src/widget.ts
index 74dfc2dd..930b6f59 100644
--- a/packages/widget/src/widget.ts
+++ b/packages/widget/src/widget.ts
@@ -21,6 +21,7 @@ import './context/wallet';
 import type {
   Eip1193Provider,
   ISygmaProtocolWidget,
+  SdkInitializedEvent,
   Theme
 } from './interfaces';
 import { styles } from './styles';
@@ -59,6 +60,9 @@ class SygmaProtocolWidget
   @state()
   private isLoading = false;
 
+  @state()
+  private sdkInitialized = false;
+
   @state()
   private sourceNetwork?: Domain;
 
@@ -85,6 +89,8 @@ class SygmaProtocolWidget
           </section>
           <section class="widgetContent">
             <sygma-fungible-transfer
+              @sdk-initialized=${(event: SdkInitializedEvent) =>
+                (this.sdkInitialized = event.detail.hasInitialized)}
               .onSourceNetworkSelected=${(domain: Domain) =>
                 (this.sourceNetwork = domain)}
               .whitelistedSourceResources=${this.whitelistedSourceNetworks}
@@ -94,7 +100,7 @@ class SygmaProtocolWidget
           </section>
           <section class="poweredBy">${sygmaLogo} Powered by Sygma</section>
           ${when(
-            this.isLoading,
+            this.isLoading || !this.sdkInitialized,
             () => html`<sygma-overlay-component></sygma-overlay-component>`
           )}
         </section>