fix: break unnecessary hierarchical deps (#3629)

src/lib/components/Error/WidgetsPropsValidator.tsx

@@ -26,5 +26,5 @@ export default function WidgetsPropsValidator(props: PropsWithChildren<WidgetPro
     }
   }, [locale])
 
-  return <>{props.children}</>
+  return null
 }

src/lib/components/Swap/SwapPropValidator.tsx

@@ -81,5 +81,5 @@ export default function SwapPropValidator(props: ValidatorProps) {
     }
   }, [defaultInputTokenAddress, defaultInputAmount, defaultOutputTokenAddress, defaultOutputAmount])
 
-  return <>{props.children}</>
+  return null
 }

src/lib/components/Swap/index.tsx

@@ -47,11 +47,15 @@ export interface SwapProps extends TokenDefaults, FeeOptions {
   onConnectWallet?: () => void
 }
 
-export default function Swap(props: SwapProps) {
+function Updaters(props: SwapProps & { disabled: boolean }) {
   useSyncTokenList(props.tokenList)
   useSyncTokenDefaults(props)
   useSyncConvenienceFee(props)
 
+  return props.disabled ? null : <SwapInfoUpdater />
+}
+
+export default function Swap(props: SwapProps) {
   const { active, account } = useActiveWeb3React()
   const [wrapper, setWrapper] = useState<HTMLDivElement | null>(null)
 
@@ -71,8 +75,9 @@ export default function Swap(props: SwapProps) {
   const isInteractive = Boolean(active && onSupportedNetwork)
 
   return (
-    <SwapPropValidator {...props}>
-      {isSwapSupported && <SwapInfoUpdater />}
+    <>
+      <SwapPropValidator {...props} />
+      <Updaters {...props} disabled={!isSwapSupported} />
       <Header title={<Trans>Swap</Trans>}>
         {active && <Wallet disabled={!account} onClick={props.onConnectWallet} />}
         <Settings disabled={!isInteractive} />
@@ -92,6 +97,6 @@ export default function Swap(props: SwapProps) {
           <StatusDialog tx={displayTx} onClose={() => setDisplayTxHash()} />
         </Dialog>
       )}
-    </SwapPropValidator>
+    </>
   )
 }

src/lib/components/Widget.tsx

@@ -117,27 +117,26 @@ export default function Widget(props: PropsWithChildren<WidgetProps>) {
   const [dialog, setDialog] = useState<HTMLDivElement | null>(null)
   return (
     <StrictMode>
-      <I18nProvider locale={locale}>
-        <ThemeProvider theme={theme}>
-          <WidgetWrapper width={width} className={className}>
+      <ThemeProvider theme={theme}>
+        <WidgetWrapper width={width} className={className}>
+          <I18nProvider locale={locale}>
             <DialogWrapper ref={setDialog} />
             <DialogProvider value={userDialog || dialog}>
               <ErrorBoundary onError={onError}>
-                <WidgetPropValidator {...props}>
-                  <ReduxProvider store={multicallStore}>
-                    <AtomProvider>
-                      <ActiveWeb3Provider provider={provider} jsonRpcEndpoint={jsonRpcEndpoint}>
-                        <Updaters />
-                        {children}
-                      </ActiveWeb3Provider>
-                    </AtomProvider>
-                  </ReduxProvider>
-                </WidgetPropValidator>
+                <WidgetPropValidator {...props} />
+                <ReduxProvider store={multicallStore}>
+                  <AtomProvider>
+                    <ActiveWeb3Provider provider={provider} jsonRpcEndpoint={jsonRpcEndpoint}>
+                      <Updaters />
+                      {children}
+                    </ActiveWeb3Provider>
+                  </AtomProvider>
+                </ReduxProvider>
               </ErrorBoundary>
             </DialogProvider>
-          </WidgetWrapper>
-        </ThemeProvider>
-      </I18nProvider>
+          </I18nProvider>
+        </WidgetWrapper>
+      </ThemeProvider>
     </StrictMode>
   )
 }