fix: widget theme integration (#5880 )

* fix: add missing colors to widget theme integration * feat: upgrade widget version * fix: conedison in jest tests
fix: Update footer Github and Discord links (#5841 )
2023-01-25 17:12:23 -05:00 · 2023-01-25 16:15:23 -05:00 · 2023-01-24 12:57:08 -05:00 · 2023-01-24 12:36:50 -05:00 · 2023-01-23 09:37:06 -05:00
8 changed files with 67 additions and 36 deletions
--- a/craco.config.cjs
+++ b/craco.config.cjs
@@ -12,9 +12,10 @@ module.exports = {
  jest: {
    configure(jestConfig) {
      return Object.assign({}, jestConfig, {
-        transformIgnorePatterns: ['@uniswap/conedison/format'],
+        transformIgnorePatterns: ['@uniswap/conedison/format', '@uniswap/conedison/provider'],
        moduleNameMapper: {
          '@uniswap/conedison/format': '@uniswap/conedison/dist/format',
+          '@uniswap/conedison/provider': '@uniswap/conedison/dist/provider',
        },
      })
    },
--- a/cypress/e2e/universal-search.test.ts
+++ b/cypress/e2e/universal-search.test.ts
@@ -64,7 +64,7 @@ describe('Universal search bar', () => {
      .should('be.eq', 3)
  })

-  it('should show blocked badge when blocked token is searched for', () => {
+  it.skip('should show blocked badge when blocked token is searched for', () => {
    // Search for mTSLA, which is a blocked token.
    cy.get('[data-cy="search-bar-input"]').last().clear().type('mtsla')
    cy.get('[data-cy="searchbar-token-row-mTSLA"]').find('[data-cy="blocked-icon"]').should('exist')
--- a/package.json
+++ b/package.json
@@ -135,7 +135,7 @@
    "@types/react-window-infinite-loader": "^1.0.6",
    "@uniswap/analytics": "1.2.0",
    "@uniswap/analytics-events": "^2.1.0",
-    "@uniswap/conedison": "^1.1.1",
+    "@uniswap/conedison": "^1.2.1",
    "@uniswap/governance": "^1.0.2",
    "@uniswap/liquidity-staker": "^1.0.2",
    "@uniswap/merkle-distributor": "1.0.1",
@@ -145,14 +145,14 @@
    "@uniswap/sdk-core": "^3.0.1",
    "@uniswap/smart-order-router": "^2.10.0",
    "@uniswap/token-lists": "^1.0.0-beta.30",
-    "@uniswap/universal-router-sdk": "1.3.0",
+    "@uniswap/universal-router-sdk": "1.3.4",
    "@uniswap/v2-core": "1.0.0",
    "@uniswap/v2-periphery": "^1.1.0-beta.0",
    "@uniswap/v2-sdk": "^3.0.1",
    "@uniswap/v3-core": "1.0.0",
    "@uniswap/v3-periphery": "^1.1.1",
    "@uniswap/v3-sdk": "^3.9.0",
-    "@uniswap/widgets": "2.25.1",
+    "@uniswap/widgets": "^2.26.0",
    "@vanilla-extract/css": "^1.7.2",
    "@vanilla-extract/css-utils": "^0.1.2",
    "@vanilla-extract/dynamic": "^2.0.2",
--- a/src/components/About/AboutFooter.tsx
+++ b/src/components/About/AboutFooter.tsx
@@ -120,7 +120,7 @@ const LogoSectionContent = () => {
    <>
      <StyledLogo src={isDarkMode ? darkUnicornImgSrc : lightUnicornImgSrc} alt="Uniswap Logo" />
      <SocialLinks>
-        <SocialLink href="https://github.com/Uniswap" target="_blank" rel="noopener noreferrer">
+        <SocialLink href="https://discord.gg/FCfyBSbCU5" target="_blank" rel="noopener noreferrer">
          <DiscordIcon size={32} />
        </SocialLink>
        <TraceEvent
@@ -132,7 +132,7 @@ const LogoSectionContent = () => {
            <TwitterIcon size={32} />
          </SocialLink>
        </TraceEvent>
-        <SocialLink href="https://discord.gg/FCfyBSbCU5" target="_blank" rel="noopener noreferrer">
+        <SocialLink href="https://github.com/Uniswap" target="_blank" rel="noopener noreferrer">
          <GithubIcon size={32} />
        </SocialLink>
      </SocialLinks>
--- a/src/components/Widget/index.tsx
+++ b/src/components/Widget/index.tsx
@@ -26,6 +26,7 @@ import {
  getTokenAddress,
 } from 'lib/utils/analytics'
 import { useCallback, useState } from 'react'
+import { useToggleWalletModal } from 'state/application/hooks'
 import { useIsDarkMode } from 'state/user/hooks'
 import { computeRealizedPriceImpact } from 'utils/prices'
 import { switchChain } from 'utils/switchChain'
@@ -57,6 +58,12 @@ export default function Widget({ token, onTokenChange, onReviewSwapClick }: Widg
  const { settings } = useSyncWidgetSettings()
  const { transactions } = useSyncWidgetTransactions()

+  const toggleWalletModal = useToggleWalletModal()
+  const onConnectWalletClick = useCallback(() => {
+    toggleWalletModal()
+    return false // prevents the in-widget wallet modal from opening
+  }, [toggleWalletModal])
+
  const onSwitchChain = useCallback(
    // TODO(WEB-1757): Widget should not break if this rejects - upstream the catch to ignore it.
    ({ chainId }: AddEthereumChainParameter) => switchChain(connector, Number(chainId)).catch(() => undefined),
@@ -154,6 +161,7 @@ export default function Widget({ token, onTokenChange, onReviewSwapClick }: Widg
        theme={theme}
        width={WIDGET_WIDTH}
        // defaultChainId is excluded - it is always inferred from the passed provider
+        onConnectWalletClick={onConnectWalletClick}
        provider={provider}
        onSwitchChain={onSwitchChain}
        tokenList={EMPTY_TOKEN_LIST} // prevents loading the default token list, as we use our own token selector UI
--- a/src/components/Widget/settings.ts
+++ b/src/components/Widget/settings.ts
@@ -1,5 +1,5 @@
 import { Percent } from '@uniswap/sdk-core'
-import { Slippage, SwapController, SwapEventHandlers } from '@uniswap/widgets'
+import { RouterPreference, Slippage, SwapController, SwapEventHandlers } from '@uniswap/widgets'
 import { DEFAULT_DEADLINE_FROM_NOW } from 'constants/misc'
 import { useCallback, useMemo, useState } from 'react'
 import { useUserSlippageTolerance, useUserTransactionTTL } from 'state/user/hooks'
@@ -37,6 +37,8 @@ export function useSyncWidgetSettings() {
    [setAppSlippage]
  )

+  const [routerPreference, onRouterPreferenceChange] = useState(RouterPreference.API)
+
  const onSettingsReset = useCallback(() => {
    setWidgetTtl(undefined)
    setAppTtl(DEFAULT_DEADLINE_FROM_NOW)
@@ -46,11 +48,15 @@ export function useSyncWidgetSettings() {

  const settings: SwapController['settings'] = useMemo(() => {
    const auto = appSlippage === 'auto'
-    return { slippage: { auto, max: widgetSlippage }, transactionTtl: widgetTtl }
-  }, [widgetSlippage, widgetTtl, appSlippage])
+    return {
+      slippage: { auto, max: widgetSlippage },
+      transactionTtl: widgetTtl,
+      routerPreference,
+    }
+  }, [appSlippage, widgetSlippage, widgetTtl, routerPreference])
  const settingsHandlers: SwapEventHandlers = useMemo(
-    () => ({ onSettingsReset, onSlippageChange, onTransactionDeadlineChange }),
-    [onSettingsReset, onSlippageChange, onTransactionDeadlineChange]
+    () => ({ onSettingsReset, onSlippageChange, onTransactionDeadlineChange, onRouterPreferenceChange }),
+    [onSettingsReset, onSlippageChange, onTransactionDeadlineChange, onRouterPreferenceChange]
  )

  return { settings: { settings, ...settingsHandlers } }
--- a/src/components/Widget/theme.ts
+++ b/src/components/Widget/theme.ts
@@ -1,21 +1,30 @@
+import { Theme } from '@uniswap/widgets'
 import { darkTheme, lightTheme } from 'theme/colors'

 const fonts = {
  fontFamily: 'Inter custom',
 }

-export const LIGHT_THEME = {
+export const LIGHT_THEME: Theme = {
  // surface
-  container: lightTheme.backgroundSurface,
-  interactive: lightTheme.backgroundInteractive,
-  module: lightTheme.backgroundModule,
  accent: lightTheme.accentAction,
-  dialog: lightTheme.backgroundBackdrop,
+  accentSoft: lightTheme.accentActionSoft,
+  container: lightTheme.backgroundSurface,
+  module: lightTheme.backgroundModule,
+  interactive: lightTheme.backgroundInteractive,
  outline: lightTheme.backgroundOutline,
+  dialog: lightTheme.backgroundBackdrop,
+  scrim: lightTheme.backgroundScrim,
  // text
+  onAccent: lightTheme.white,
  primary: lightTheme.textPrimary,
  secondary: lightTheme.textSecondary,
+  hint: lightTheme.textTertiary,
  onInteractive: lightTheme.accentTextDarkPrimary,
+  // shadow
+  deepShadow: lightTheme.deepShadow,
+  networkDefaultShadow: lightTheme.networkDefaultShadow,
+
  // state
  success: lightTheme.accentSuccess,
  warning: lightTheme.accentWarning,
@@ -24,18 +33,25 @@ export const LIGHT_THEME = {
  ...fonts,
 }

-export const DARK_THEME = {
+export const DARK_THEME: Theme = {
  // surface
-  container: darkTheme.backgroundSurface,
-  interactive: darkTheme.backgroundInteractive,
-  module: darkTheme.backgroundModule,
  accent: darkTheme.accentAction,
-  dialog: darkTheme.backgroundBackdrop,
+  accentSoft: darkTheme.accentActionSoft,
+  container: darkTheme.backgroundSurface,
+  module: darkTheme.backgroundModule,
+  interactive: darkTheme.backgroundInteractive,
  outline: darkTheme.backgroundOutline,
+  dialog: darkTheme.backgroundBackdrop,
+  scrim: darkTheme.backgroundScrim,
  // text
+  onAccent: darkTheme.white,
  primary: darkTheme.textPrimary,
  secondary: darkTheme.textSecondary,
+  hint: darkTheme.textTertiary,
  onInteractive: darkTheme.accentTextLightPrimary,
+  // shadow
+  deepShadow: darkTheme.deepShadow,
+  networkDefaultShadow: darkTheme.networkDefaultShadow,
  // state
  success: darkTheme.accentSuccess,
  warning: darkTheme.accentWarning,
--- a/yarn.lock
+++ b/yarn.lock
@@ -4945,10 +4945,10 @@
    react "^18.2.0"
    react-dom "^18.2.0"

-"@uniswap/conedison@^1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@uniswap/conedison/-/conedison-1.1.1.tgz#affec246613d1f52da3cdd0571ef8195b7b54d17"
-  integrity sha512-xFHAcWRrU+/+/BInXy6SRiiNwUG0vxLWsoYgod66wWifUvnjfpItzlvJHUer1OOpLDsz0CL5Fb70vFJOGAGi8w==
+"@uniswap/conedison@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@uniswap/conedison/-/conedison-1.2.1.tgz#c3dbfe14f4320fc5c60cde23c4bd70ed8a39c782"
+  integrity sha512-ir6j7RQOyREXtW5YlmPjskfl7oDeHWtMFai57snThAkKgrb+8KTX5b0a5nbXeIuaW2RNHAaWTGoSoTneIHCAnQ==

 "@uniswap/default-token-list@^2.0.0":
  version "2.2.0"
@@ -5090,10 +5090,10 @@
  resolved "https://registry.yarnpkg.com/@uniswap/token-lists/-/token-lists-1.0.0-beta.30.tgz#2103ca23b8007c59ec71718d34cdc97861c409e5"
  integrity sha512-HwY2VvkQ8lNR6ks5NqQfAtg+4IZqz3KV1T8d2DlI8emIn9uMmaoFbIOg0nzjqAVKKnZSbMTRRtUoAh6mmjRvog==

-"@uniswap/universal-router-sdk@1.3.0", "@uniswap/universal-router-sdk@^1.3.0":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@uniswap/universal-router-sdk/-/universal-router-sdk-1.3.0.tgz#f44262eafe729651d383f46a647399658d45baf7"
-  integrity sha512-Q7/Gw059JQDO7exxV791QzghEOiWomdvxvqidozDvkiZE7paIlSWq1vDVF4H3zB2GYy5Hu7HM8krl2l0KS9X5g==
+"@uniswap/universal-router-sdk@1.3.4", "@uniswap/universal-router-sdk@^1.3.4":
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/@uniswap/universal-router-sdk/-/universal-router-sdk-1.3.4.tgz#7b6b8e30d6faff812f224d32a832385378568160"
+  integrity sha512-RIWZm48N/fiAssMOj0nMLoeN5JATKOMfbFwyVnCaFHIVMJmKEZtZLKe3QOkl2LMVnQ/nP4LVCDwHU+mdP68jCQ==
  dependencies:
    "@uniswap/permit2-sdk" "^1.2.0"
    "@uniswap/router-sdk" "^1.4.0"
@@ -5194,24 +5194,24 @@
    "@uniswap/v3-core" "1.0.0"
    "@uniswap/v3-periphery" "^1.0.1"

-"@uniswap/widgets@2.25.1":
-  version "2.25.1"
-  resolved "https://registry.yarnpkg.com/@uniswap/widgets/-/widgets-2.25.1.tgz#53d03da44587c0851d2f39516d7f9037d0c65b9d"
-  integrity sha512-Jth8qd7g58W1SVRpSFNiTKjs0HmcOacpxdSKfRSOIJOcYq8vgjZ0k4W3i/bzjf8PDRtLGh4Nn09VLugtIMUVIw==
+"@uniswap/widgets@^2.26.0":
+  version "2.26.0"
+  resolved "https://registry.yarnpkg.com/@uniswap/widgets/-/widgets-2.26.0.tgz#ed2d2b0965fc2139874a5eaca44c8070184d9e74"
+  integrity sha512-LIfd3wgJxNiPXduyxXAihOzye5LrayyPDt0/OErSr1hF3BIiQqdVc3KyHDFJ4PC0pCp4+dfE2HPH1FrClO54Uw==
  dependencies:
    "@babel/runtime" ">=7.17.0"
    "@fontsource/ibm-plex-mono" "^4.5.1"
    "@fontsource/inter" "^4.5.1"
    "@popperjs/core" "^2.4.4"
    "@reduxjs/toolkit" "^1.6.1"
-    "@uniswap/conedison" "^1.1.1"
+    "@uniswap/conedison" "^1.2.1"
    "@uniswap/permit2-sdk" "^1.2.0"
    "@uniswap/redux-multicall" "^1.1.8"
    "@uniswap/router-sdk" "^1.3.0"
    "@uniswap/sdk-core" "^3.0.1"
    "@uniswap/smart-order-router" "^2.10.0"
    "@uniswap/token-lists" "^1.0.0-beta.30"
-    "@uniswap/universal-router-sdk" "^1.3.0"
+    "@uniswap/universal-router-sdk" "^1.3.4"
    "@uniswap/v2-sdk" "^3.0.1"
    "@uniswap/v3-sdk" "^3.8.2"
    "@web3-react/core" "8.0.35-beta.0"
Author	SHA1	Message	Date
eddie	302af21a22	fix: widget theme integration (#5880 ) * fix: add missing colors to widget theme integration * feat: upgrade widget version * fix: conedison in jest tests	2023-01-25 17:12:23 -05:00
Rachel-Eichenberger	b61a2d4111	fix: Update footer Github and Discord links (#5841 ) Update footer github and discord links Discord and github links were reversed	2023-01-25 16:15:23 -05:00
Zach Pomerantz	9be26788a2	test: skip flaky universal search test (#5881 ) test: skip flaky test	2023-01-24 12:57:08 -05:00
Zach Pomerantz	ed393de481	fix: use wallet modal for widget-prompted connection (#5879 ) * fix: use wallet modal for widget-prompted connection * fix: prevent widget modal * fix: invoke modal toggle	2023-01-24 12:36:50 -05:00
Zach Pomerantz	cf5c393d97	fix: sanitize legacy signature format (#5878 ) Upgrades @uniswap/universal-router-sdk to fix a bug where legacy wallets submitted unhandled legacy signature formats, with suffixes that failed to execute when calling estimateGas. See ticket CX-140	2023-01-23 09:37:06 -05:00