dont trigger load event twice (#3356)

Author: artursapek

wormhole-connect/src/AppRouter.tsx

@@ -49,6 +49,7 @@ function AppRouter(props: Props) {
   const routeContext = useContext(RouteContext);
 
   const hasSetSsgConfig = useRef(false);
+  const isInitialLoad = useRef(true);
 
   // We update the global config once when WormholeConnect is first mounted, if a custom
   // config was provided.
@@ -60,8 +61,9 @@ function AppRouter(props: Props) {
       setConfig(customConfig);
     }
 
+    hasSetSsgConfig.current = true;
     config.triggerEvent({
-      type: 'load',
+      type: 'config',
       config: customConfig,
     });
   }, []);
@@ -71,12 +73,20 @@ function AppRouter(props: Props) {
     if (props.config) {
       loadConfig(props.config);
     }
-    hasSetSsgConfig.current = true;
   }
 
   useEffect(() => {
-    if (props.config) {
-      loadConfig(props.config);
+    if (isInitialLoad.current) {
+      isInitialLoad.current = false;
+
+      config.triggerEvent({
+        type: 'load',
+        config: props.config,
+      });
+    } else {
+      if (props.config) {
+        loadConfig(props.config);
+      }
     }
   }, [props.config]);
   // END config loading code

wormhole-connect/src/components/DemoApp/index.tsx

@@ -146,7 +146,6 @@ function DemoApp() {
   const [customConfigInput, setCustomConfigInput] = useState(
     loadInitialConfig(),
   );
-  const [customConfigNonce, setCustomConfigNonce] = useState(1);
   const [isLoadingCustomConfig, setIsLoadingCustomConfig] = useState(true);
 
   const [customTheme, setCustomTheme] = useState<
@@ -168,7 +167,6 @@ function DemoApp() {
     try {
       const parsed = parseConfig(customConfigInput);
       setCustomConfig(parsed);
-      setCustomConfigNonce(customConfigNonce + 1);
     } catch (e) {
       console.error(e);
     }
@@ -206,11 +204,7 @@ function DemoApp() {
       <article>
         <div id="demo-contents">
           {!isLoadingCustomConfig && (
-            <WormholeConnect
-              key={customConfigNonce}
-              config={customConfig}
-              theme={customTheme}
-            />
+            <WormholeConnect config={customConfig} theme={customTheme} />
           )}
         </div>
 

wormhole-connect/src/telemetry/types.ts

@@ -7,6 +7,11 @@ export interface LoadEvent {
   config?: WormholeConnectConfig;
 }
 
+export interface UpdateConfigEvent {
+  type: 'config';
+  config?: WormholeConnectConfig;
+}
+
 export interface TransferDetails {
   route: string;
   fromToken: TokenDetails;
@@ -91,6 +96,7 @@ export interface ConnectWalletEvent {
 
 export type WormholeConnectEventCore =
   | LoadEvent
+  | UpdateConfigEvent
   | TransferEvent
   | TransferErrorEvent
   | ConnectWalletEvent;