From 4a480645e02c7a42e2782186e64995c6887c9cbc Mon Sep 17 00:00:00 2001
From: Nur Fikri <codingki@gmail.com>
Date: Wed, 27 Nov 2024 00:04:08 +0700
Subject: [PATCH] refactor: modal registration after WalletProvider (#503)

---
 .changeset/happy-bees-smile.md                |  5 ++
 packages/widget/src/hooks/useGetAccount.ts    | 24 ++++++-
 .../widget/src/pages/SwapPage/SwapPage.tsx    | 10 +--
 .../src/widget/ShadowDomAndProviders.tsx      | 50 +++++++--------
 packages/widget/src/widget/Widget.tsx         | 64 +++++++++++++++----
 5 files changed, 110 insertions(+), 43 deletions(-)
 create mode 100644 .changeset/happy-bees-smile.md

diff --git a/.changeset/happy-bees-smile.md b/.changeset/happy-bees-smile.md
new file mode 100644
index 00000000..c901aa45
--- /dev/null
+++ b/.changeset/happy-bees-smile.md
@@ -0,0 +1,5 @@
+---
+'@skip-go/widget': patch
+---
+
+rendering bugfixes
diff --git a/packages/widget/src/hooks/useGetAccount.ts b/packages/widget/src/hooks/useGetAccount.ts
index 1f60462f..324fecdd 100644
--- a/packages/widget/src/hooks/useGetAccount.ts
+++ b/packages/widget/src/hooks/useGetAccount.ts
@@ -9,7 +9,7 @@ import {
 } from "@/state/wallets";
 import { useAccount as useCosmosAccount, WalletType } from "graz";
 import { useAtom, useAtomValue } from "jotai";
-import { useCallback } from "react";
+import { useCallback, useEffect } from "react";
 import { useAccount as useEvmAccount, useConnectors } from "wagmi";
 
 export const useGetAccount = () => {
@@ -30,6 +30,28 @@ export const useGetAccount = () => {
   const evmAccount = useEvmAccount();
   const connectors = useConnectors();
 
+  useEffect(() => {
+    if (walletType && cosmosWallet === undefined) {
+      setCosmosWallet({
+        walletName: walletType,
+        chainType: "cosmos",
+      });
+    }
+    if (solanaWallet && svmWallet === undefined) {
+      setSvmWallet({
+        walletName: solanaWallet.name,
+        chainType: "svm",
+      });
+    }
+    if (evmAccount.connector && evmWallet === undefined) {
+      setEvmWallet({
+        walletName: evmAccount.connector.id,
+        chainType: "evm",
+      });
+    }
+
+  }, [walletType, cosmosWallet, solanaWallet, svmWallet, evmAccount.connector, evmWallet]);
+
   const getAccount = useCallback(
     // if checkChainType is true, it only check wallet connected no chainId is dependent
     (chainId?: string, checkChainType?: boolean) => {
diff --git a/packages/widget/src/pages/SwapPage/SwapPage.tsx b/packages/widget/src/pages/SwapPage/SwapPage.tsx
index 3409fa0b..ff82bb9a 100644
--- a/packages/widget/src/pages/SwapPage/SwapPage.tsx
+++ b/packages/widget/src/pages/SwapPage/SwapPage.tsx
@@ -74,9 +74,11 @@ export const SwapPage = () => {
   const isSwapOperation = useIsSwapOperation(route);
 
   const { chainId: evmChainId, connector } = useAccount();
-  const evmAddress = evmChainId
-    ? getAccount(String(evmChainId))?.address
-    : undefined;
+  const evmAddress = useMemo(() => {
+    return evmChainId
+      ? getAccount(String(evmChainId))?.address
+      : undefined;
+  }, [evmChainId, getAccount]);
 
   const getClientAsset = useCallback(
     (denom?: string, chainId?: string) => {
@@ -339,7 +341,7 @@ export const SwapPage = () => {
                 onClick: () => setCurrentPage(Routes.TransactionHistoryPage),
               }
           }
-          rightContent={<ConnectedWalletContent />}
+          rightContent={sourceAccount ? <ConnectedWalletContent /> : null}
         />
         <Column align="center">
           <SwapPageAssetChainInput
diff --git a/packages/widget/src/widget/ShadowDomAndProviders.tsx b/packages/widget/src/widget/ShadowDomAndProviders.tsx
index 0efd5ca5..29895921 100644
--- a/packages/widget/src/widget/ShadowDomAndProviders.tsx
+++ b/packages/widget/src/widget/ShadowDomAndProviders.tsx
@@ -9,13 +9,9 @@ import {
 import { StyleSheetManager, ThemeProvider } from "styled-components";
 import { Scope } from "react-shadow-scope";
 import { defaultTheme, PartialTheme } from "./theme";
-import { QueryClientProvider } from "@tanstack/react-query";
-import { QueryClient } from "@tanstack/react-query";
 import isPropValid from "@emotion/is-prop-valid";
-import { WalletProviders } from "@/providers/WalletProviders";
 import { useInjectFontsToDocumentHead } from "@/hooks/useInjectFontsToDocumentHead";
 import { globalStyles } from "./globalStyles";
-export const queryClient = new QueryClient();
 
 function shouldForwardProp(
   propName: string,
@@ -35,7 +31,6 @@ export const ShadowDomAndProviders = ({
   theme?: PartialTheme;
 }) => {
   useInjectFontsToDocumentHead();
-  const [isClient, setIsClient] = useState<boolean>(false);
 
   const [, setShadowDom] = useState<HTMLElement>();
   const [styledComponentContainer, setStyledComponentContainer] =
@@ -52,9 +47,6 @@ export const ShadowDomAndProviders = ({
     []
   );
 
-  useEffect(() => {
-    setIsClient(true);
-  }, []);
 
   const mergedThemes = useMemo(() => {
     return {
@@ -63,21 +55,29 @@ export const ShadowDomAndProviders = ({
     };
   }, [theme]);
 
-  return isClient ? (
-    <Scope ref={onShadowDomLoaded} stylesheet={globalStyles}>
-      <div ref={onStyledComponentContainerLoaded}></div>
-      <StyleSheetManager
-        shouldForwardProp={shouldForwardProp}
-        target={styledComponentContainer}
-      >
-        <ThemeProvider theme={mergedThemes}>
-          <WalletProviders>
-            <QueryClientProvider client={queryClient} key={"skip-widget"}>
-              {children}
-            </QueryClientProvider>
-          </WalletProviders>
-        </ThemeProvider>
-      </StyleSheetManager>
-    </Scope>
-  ) : null;
+  return (
+    <ClientOnly>
+      <Scope ref={onShadowDomLoaded} stylesheet={globalStyles}>
+        <div ref={onStyledComponentContainerLoaded}></div>
+        <StyleSheetManager
+          shouldForwardProp={shouldForwardProp}
+          target={styledComponentContainer}
+        >
+          <ThemeProvider theme={mergedThemes}>
+            {children}
+          </ThemeProvider>
+        </StyleSheetManager>
+      </Scope>
+    </ClientOnly>
+  )
+};
+
+export const ClientOnly = ({ children }: { children: ReactNode }) => {
+  const [isHydrated, setIsHydrated] = useState(false);
+
+  useEffect(() => {
+    setIsHydrated(true);
+  }, []);
+
+  return <>{isHydrated ? children : null}</>;
 };
diff --git a/packages/widget/src/widget/Widget.tsx b/packages/widget/src/widget/Widget.tsx
index 546d76ad..296e6f80 100644
--- a/packages/widget/src/widget/Widget.tsx
+++ b/packages/widget/src/widget/Widget.tsx
@@ -1,8 +1,8 @@
-import { ShadowDomAndProviders } from "./ShadowDomAndProviders";
+import { ClientOnly, ShadowDomAndProviders } from "./ShadowDomAndProviders";
 import NiceModal, { useModal } from "@ebay/nice-modal-react";
 import { styled } from "styled-components";
 import { createModal } from "@/components/Modal";
-import { cloneElement, ReactElement, useLayoutEffect, useMemo } from "react";
+import { cloneElement, ReactElement, ReactNode, useEffect, useMemo } from "react";
 import { defaultTheme, lightTheme, PartialTheme, Theme } from "./theme";
 import { Router } from "./Router";
 import { useSetAtom } from "jotai";
@@ -26,6 +26,9 @@ import {
 import { routeConfigAtom } from "@/state/route";
 import { RouteConfig } from "@skip-go/client";
 import { registerModals } from "@/modals/registerModals";
+import { WalletProviders } from "@/providers/WalletProviders";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
 
 export type WidgetRouteConfig =
   Omit<RouteConfig, "swapVenues" | "swapVenue"> & {
@@ -64,15 +67,26 @@ type NewSkipClientOptions = Omit<SkipClientOptions, "apiURL" | "chainIDsToAffili
   chainIdsToAffiliates?: Record<string, ChainAffiliates>;
 }
 
+export const queryClient = new QueryClient();
+
 export const Widget = (props: WidgetProps) => {
+  const { theme } = useInitWidget(props);
   return (
-    <NiceModal.Provider>
-      <WidgetWithoutNiceModalProvider {...props} />
-    </NiceModal.Provider>
+    <WalletProviders>
+      <QueryClientProvider client={queryClient} key={"skip-widget"}>
+        <NiceModal.Provider>
+          <ShadowDomAndProviders theme={theme}>
+            <WidgetWrapper>
+              <Router />
+            </WidgetWrapper>
+          </ShadowDomAndProviders>
+        </NiceModal.Provider>
+      </QueryClientProvider>
+    </WalletProviders>
   );
 };
 
-const WidgetWithoutNiceModalProvider = (props: WidgetProps) => {
+const useInitWidget = (props: WidgetProps) => {
   useInitDefaultRoute(props.defaultRoute);
   const setSkipClientConfig = useSetAtom(skipClientConfigAtom);
   const setTheme = useSetAtom(themeAtom);
@@ -111,17 +125,16 @@ const WidgetWithoutNiceModalProvider = (props: WidgetProps) => {
     return theme;
   }, [props.brandColor, props.theme]);
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     setSkipClientConfig({
       apiURL: mergedSkipClientConfig.apiURL,
       endpointOptions: mergedSkipClientConfig.endpointOptions,
       chainIDsToAffiliates: mergedSkipClientConfig.chainIDsToAffiliates,
     });
     setTheme(mergedTheme);
-    registerModals();
   }, [setSkipClientConfig, mergedSkipClientConfig, setTheme, mergedTheme]);
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (props.settings) {
       setSwapSettings({
         ...defaultSwapSettings,
@@ -154,15 +167,26 @@ const WidgetWithoutNiceModalProvider = (props: WidgetProps) => {
     setSwapSettings,
   ]);
 
+  return { theme: mergedTheme }
+}
+
+export const WidgetWithoutNiceModalProvider = (props: WidgetProps) => {
+  const { theme } = useInitWidget(props);
+
   return (
-    <ShadowDomAndProviders theme={mergedTheme}>
-      <WidgetContainer>
-        <Router />
-      </WidgetContainer>
+    <ShadowDomAndProviders theme={theme}>
+      <WalletProviders>
+        <QueryClientProvider client={queryClient} key={"skip-widget"}>
+          <WidgetWrapper>
+            <Router />
+          </WidgetWrapper>
+        </QueryClientProvider>
+      </WalletProviders>
     </ShadowDomAndProviders>
   );
 };
 
+
 export type ShowSwapWidget = {
   button?: ReactElement;
 } & WidgetProps;
@@ -184,6 +208,20 @@ export const ShowWidget = ({
   return <>{Element}</>;
 };
 
+
+const WidgetWrapper = ({ children }: { children: ReactNode }) => {
+  useEffect(() => {
+    registerModals();
+  }, []);
+  return (
+    <WidgetContainer>
+      <ClientOnly>
+        {children}
+      </ClientOnly>
+    </WidgetContainer>
+  )
+}
+
 const WidgetContainer = styled.div`
   width: 100%;
   position: relative;