feat: setup widget integration update (#6045)

* feat: setup widget integration update

* feat: preview of widget token selector

* feat: upgrade widget again for token selector

* fix: add back legacy token selector

* fix: token

* fix: upgrade again

* fix: tooltip bug

* fix: for real

* fix: updates

src/components/NetworkAlert/NetworkAlert.tsx

@@ -24,7 +24,6 @@ const BodyText = styled.div`
   font-size: 14px;
 `
 const RootWrapper = styled.div`
-  position: relative;
   margin-top: 16px;
 `
 
@@ -101,7 +100,6 @@ const ContentWrapper = styled.div<{ chainId: NetworkAlertChains; darkMode: boole
     position: absolute;
     transform: rotate(25deg) translate(-90px, -40px);
     width: 300px;
-    z-index: -1;
   }
 `
 const Header = styled.h2`

src/components/Widget/index.tsx

@@ -9,6 +9,7 @@ import { Trade } from '@uniswap/router-sdk'
 import { Currency, TradeType } from '@uniswap/sdk-core'
 import {
   AddEthereumChainParameter,
+  DialogAnimationType,
   EMPTY_TOKEN_LIST,
   OnReviewSwapClick,
   SwapWidget,
@@ -161,32 +162,38 @@ export default function Widget({
 
   return (
     <>
-      <SwapWidget
-        hideConnectionUI
-        brandedFooter={false}
-        permit2={permit2Enabled}
-        routerUrl={WIDGET_ROUTER_URL}
-        locale={locale}
-        theme={theme}
-        width={width}
-        defaultChainId={chainId}
-        onConnectWalletClick={onConnectWalletClick}
-        provider={provider}
-        onSwitchChain={onSwitchChain}
-        tokenList={EMPTY_TOKEN_LIST} // prevents loading the default token list, as we use our own token selector UI
-        {...inputs}
-        {...settings}
-        {...transactions}
-        onExpandSwapDetails={onExpandSwapDetails}
-        onReviewSwapClick={onReviewSwapClick}
-        onSubmitSwapClick={onSubmitSwapClick}
-        onSwapApprove={onApproveToken}
-        onInitialSwapQuote={onInitialSwapQuote}
-        onSwapPriceUpdateAck={onSwapPriceUpdateAck}
-        onError={(error, errorInfo) => {
-          sendAnalyticsEvent(SwapEventName.SWAP_ERROR, { error, errorInfo, ...trace })
-        }}
-      />
+      <div style={{ zIndex: 1, position: 'relative' }}>
+        <SwapWidget
+          hideConnectionUI
+          brandedFooter={false}
+          permit2={permit2Enabled}
+          routerUrl={WIDGET_ROUTER_URL}
+          locale={locale}
+          theme={theme}
+          width={width}
+          defaultChainId={chainId}
+          onConnectWalletClick={onConnectWalletClick}
+          provider={provider}
+          onSwitchChain={onSwitchChain}
+          tokenList={EMPTY_TOKEN_LIST} // prevents loading the default token list, as we use our own token selector UI
+          {...inputs}
+          {...settings}
+          {...transactions}
+          onExpandSwapDetails={onExpandSwapDetails}
+          onReviewSwapClick={onReviewSwapClick}
+          onSubmitSwapClick={onSubmitSwapClick}
+          onSwapApprove={onApproveToken}
+          onInitialSwapQuote={onInitialSwapQuote}
+          onSwapPriceUpdateAck={onSwapPriceUpdateAck}
+          dialogOptions={{
+            pageCentered: true,
+            animationType: DialogAnimationType.FADE,
+          }}
+          onError={(error, errorInfo) => {
+            sendAnalyticsEvent(SwapEventName.SWAP_ERROR, { error, errorInfo, ...trace })
+          }}
+        />
+      </div>
       {tokenSelector}
     </>
   )