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,6 +162,7 @@ export default function Widget({
 
   return (
     <>
+      <div style={{ zIndex: 1, position: 'relative' }}>
         <SwapWidget
           hideConnectionUI
           brandedFooter={false}
@@ -183,10 +185,15 @@ export default function Widget({
           onSwapApprove={onApproveToken}
           onInitialSwapQuote={onInitialSwapQuote}
           onSwapPriceUpdateAck={onSwapPriceUpdateAck}
+          dialogOptions={{
+            pageCentered: true,
+            animationType: DialogAnimationType.FADE,
+          }}
           onError={(error, errorInfo) => {
             sendAnalyticsEvent(SwapEventName.SWAP_ERROR, { error, errorInfo, ...trace })
           }}
         />
+      </div>
       {tokenSelector}
     </>
   )