refactor: refactor widget configurator

.eslintrc-common.json

@@ -0,0 +1,123 @@
+{
+  "root": true,
+  "ignorePatterns": ["**/*"],
+  "plugins": ["@nx", "unused-imports"],
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "off",
+    "no-prototype-builtins": "off",
+    "react/jsx-no-useless-fragment": "off",
+    "no-irregular-whitespace": "off",
+    "no-case-declarations": "off",
+    "no-dupe-else-if": "off",
+    "jsx-a11y/accessible-emoji": "off",
+    "no-async-promise-executor": "off",
+    "no-constant-condition": "off",
+    "no-restricted-imports": [
+      "error",
+      {
+        "paths": [
+          {
+            "name": "ethers",
+            "message": "Please import from '@ethersproject/module' directly to support tree-shaking."
+          },
+          {
+            "name": "styled-components",
+            "message": "Please import from styled-components/macro."
+          }
+        ],
+        "patterns": [
+          {
+            "group": ["**/dist"],
+            "message": "Do not import from dist/ - this is an implementation detail, and breaks tree-shaking."
+          },
+          {
+            "group": ["!styled-components/macro"]
+          }
+        ]
+      }
+    ],
+    "no-unused-vars": "off",
+    "unused-imports/no-unused-imports": "error",
+    "unused-imports/no-unused-vars": [
+      "error",
+      {
+        "vars": "all",
+        "varsIgnorePattern": "^_",
+        "args": "after-used",
+        "argsIgnorePattern": "^_"
+      }
+    ],
+    "import/order": [
+      "error",
+      {
+        "pathGroups": [
+          {
+            "pattern": "{react,jotai,jotai/*}",
+            "group": "external",
+            "position": "before"
+          },
+          {
+            "pattern": "{@cowprotocol,@cowprotocol,@uniswap,@safe-global,@ethersproject,@web3-react}/**",
+            "group": "external",
+            "position": "before"
+          },
+          {
+            "pattern": "legacy/**",
+            "group": "external",
+            "position": "after"
+          },
+          {
+            "pattern": "modules/**",
+            "group": "builtin",
+            "position": "after"
+          },
+          {
+            "pattern": "{api,abis,common,constants,legacy,lib,pages,types,utils}/**",
+            "group": "internal",
+            "position": "before"
+          }
+        ],
+        "pathGroupsExcludedImportTypes": ["react"],
+        "groups": ["external", "builtin", "internal", "sibling", "parent", "object", "index", "type"],
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        },
+        "newlines-between": "always"
+      }
+    ],
+    "prefer-const": "error",
+    "no-unneeded-ternary": "error",
+    "no-var": "error"
+  },
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {
+        "@nx/enforce-module-boundaries": [
+          "error",
+          {
+            "enforceBuildableLibDependency": true,
+            "allow": [],
+            "depConstraints": [
+              {
+                "sourceTag": "*",
+                "onlyDependOnLibsWithTags": ["*"]
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "extends": ["plugin:@nx/typescript"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "extends": ["plugin:@nx/javascript"],
+      "rules": {}
+    }
+  ]
+}

apps/cowswap-frontend/.eslintrc.json

@@ -1,94 +1,8 @@
 {
-  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
+  "extends": ["plugin:@nx/react", "../../.eslintrc-common.json"],
   "ignorePatterns": ["!**/*", "public/cosmos/*", "dev-dist/*"],
-  "plugins": ["unused-imports"],
   "rules": {
-    "@typescript-eslint/no-explicit-any": "off",
-    "no-prototype-builtins": "off",
-    "react/jsx-no-useless-fragment": "off",
-    "no-irregular-whitespace": "off",
-    "no-case-declarations": "off",
-    "no-dupe-else-if": "off",
-    "jsx-a11y/accessible-emoji": "off",
-    "no-async-promise-executor": "off",
-    "no-constant-condition": "off",
-    "no-restricted-imports": [
-      "error",
-      {
-        "paths": [
-          {
-            "name": "ethers",
-            "message": "Please import from '@ethersproject/module' directly to support tree-shaking."
-          },
-          {
-            "name": "styled-components",
-            "message": "Please import from styled-components/macro."
-          }
-        ],
-        "patterns": [
-          {
-            "group": ["**/dist"],
-            "message": "Do not import from dist/ - this is an implementation detail, and breaks tree-shaking."
-          },
-          {
-            "group": ["!styled-components/macro"]
-          }
-        ]
-      }
-    ],
-    "no-unused-vars": "off",
-    "unused-imports/no-unused-imports": "error",
-    "unused-imports/no-unused-vars": [
-      "error",
-      {
-        "vars": "all",
-        "varsIgnorePattern": "^_",
-        "args": "after-used",
-        "argsIgnorePattern": "^_"
-      }
-    ],
-    "import/order": [
-      "error",
-      {
-        "pathGroups": [
-          {
-            "pattern": "{react,jotai,jotai/*}",
-            "group": "external",
-            "position": "before"
-          },
-          {
-            "pattern": "{@cowprotocol,@cowprotocol,@uniswap,@safe-global,@ethersproject,@web3-react}/**",
-            "group": "external",
-            "position": "before"
-          },
-          {
-            "pattern": "legacy/**",
-            "group": "external",
-            "position": "after"
-          },
-          {
-            "pattern": "modules/**",
-            "group": "builtin",
-            "position": "after"
-          },
-          {
-            "pattern": "{api,abis,common,constants,legacy,lib,pages,types,utils}/**",
-            "group": "internal",
-            "position": "before"
-          }
-        ],
-        "pathGroupsExcludedImportTypes": ["react"],
-        "groups": ["external", "builtin", "internal", "sibling", "parent", "object", "index", "type"],
-        "alphabetize": {
-          "order": "asc",
-          "caseInsensitive": true
-        },
-        "newlines-between": "always"
-      }
-    ],
-    "prefer-const": "error",
-    "no-unneeded-ternary": "error",
-    "no-var": "error"
+    "@typescript-eslint/no-explicit-any": "off"
   },
   "overrides": [
     {

apps/cowswap-frontend/src/common/updaters/ListsUpdater.ts

@@ -65,9 +65,8 @@ export function ListsUpdater(): null {
             throw new Error('unexpected no version bump')
           case VersionUpgrade.PATCH:
           case VersionUpgrade.MINOR:
-            const min = minVersionBump(list.current.tokens, list.pendingUpdate.tokens)
             // automatically update minor/patch as long as bump matches the min update
-            if (bump >= min) {
+            if (bump >= minVersionBump(list.current.tokens, list.pendingUpdate.tokens)) {
               dispatch(acceptListUpdate({ chainId, url: listUrl }))
             } else {
               console.error(

apps/cowswap-frontend/src/cow-react/index.tsx

@@ -9,6 +9,7 @@ import { StrictMode } from 'react'
 import { BlockNumberProvider } from '@cowprotocol/common-hooks'
 import { isInjectedWidget } from '@cowprotocol/common-utils'
 import { nodeRemoveChildFix } from '@cowprotocol/common-utils'
+import { IframeResizer } from '@cowprotocol/common-utils'
 import { jotaiStore } from '@cowprotocol/core'
 import { SnackbarsWidget } from '@cowprotocol/snackbars'
 
@@ -30,11 +31,9 @@ import { WithLDProvider } from 'modules/application/containers/WithLDProvider'
 import { FortuneWidget } from 'modules/fortune/containers/FortuneWidget'
 
 import { FeatureGuard } from 'common/containers/FeatureGuard'
-import { IframeResizer } from 'utils/iframeResizer'
 
 import { WalletUnsupportedNetworkBanner } from '../common/containers/WalletUnsupportedNetworkBanner'
 
-
 // Node removeChild hackaround
 // based on: https://github.com/facebook/react/issues/11538#issuecomment-417504600
 nodeRemoveChildFix()

apps/cowswap-frontend/src/legacy/theme/baseTheme.tsx

@@ -476,7 +476,7 @@ export const UniThemedGlobalStyle = css`
     color: var(${UI.COLOR_TEXT1});
   }
   body {
-    min-height: 100vh;
+    min-height: ${({ theme }) => (theme.isInjectedWidgetMode ? 'auto' : '100vh')};
     scrollbar-color: ${({ theme }) => theme.colorScrollbar};
   }
 `

apps/cowswap-frontend/src/lib/hooks/useTokenList/validateTokenList.ts

@@ -7,20 +7,23 @@ enum ValidationSchema {
   TOKENS = 'tokens',
 }
 
-const validator = new Promise<Ajv>(async (resolve) => {
-  const [ajv, schema] = await Promise.all([import('ajv'), import('@uniswap/token-lists/src/tokenlist.schema.json')])
-  const validator = new ajv.default({ allErrors: true })
-    .addSchema(schema, ValidationSchema.LIST)
-    // Adds a meta scheme of Pick<TokenList, 'tokens'>
-    .addSchema(
-      {
-        ...schema,
-        $id: schema.$id + '#tokens',
-        required: ['tokens'],
-      },
-      ValidationSchema.TOKENS
-    )
-  resolve(validator)
+const validator = new Promise<Ajv>((resolve) => {
+  Promise.all([import('ajv'), import('@uniswap/token-lists/src/tokenlist.schema.json')]).then((res) => {
+    const [ajv, schema] = res
+
+    const validator = new ajv.default({ allErrors: true })
+      .addSchema(schema, ValidationSchema.LIST)
+      // Adds a meta scheme of Pick<TokenList, 'tokens'>
+      .addSchema(
+        {
+          ...schema,
+          $id: schema.$id + '#tokens',
+          required: ['tokens'],
+        },
+        ValidationSchema.TOKENS
+      )
+    resolve(validator)
+  })
 })
 
 function getValidationErrors(validate: ValidateFunction | undefined): string {

apps/cowswap-frontend/src/modules/application/containers/App/styled.ts

@@ -5,8 +5,8 @@ export const AppWrapper = styled.div<Partial<CSS.Properties>>`
   display: flex;
   flex-flow: column;
   align-items: flex-start;
-  min-height: 100vh;
-  height: 100vh;
+  min-height: ${({ theme }) => (theme.isInjectedWidgetMode ? '400px' : '100vh')};
+  height: ${({ theme }) => (theme.isInjectedWidgetMode ? 'initial' : '100vh')};
 `
 
 export const HeaderWrapper = styled.div`

apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTableContainer/index.tsx

@@ -175,6 +175,7 @@ export function OrdersTableContainer({
   pendingActivities,
   ordersPermitStatus,
 }: OrdersProps) {
+
   const content = () => {
     if (!isWalletConnected) {
       return (

apps/cowswap-frontend/src/modules/wallet/pure/Web3StatusInner/index.tsx

@@ -45,7 +45,7 @@ export function Web3StatusInner(props: Web3StatusInnerProps) {
     return (
       <Web3StatusConnected id="web3-status-connected" pending={hasPendingTransactions}>
         {hasPendingTransactions ? (
-          <RowBetween>
+          <RowBetween gap="6px">
             <FollowPendingTxPopup>
               <Text>
                 <Trans>{pendingCount} Pending</Trans>

apps/widget-configurator/.eslintrc.json

@@ -1,5 +1,5 @@
 {
-  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
+  "extends": ["plugin:@nx/react", "../../.eslintrc-common.json"],
   "ignorePatterns": ["!**/*"],
   "overrides": [
     {

apps/widget-configurator/src/app/WidgetIframe/index.tsx

@@ -0,0 +1,24 @@
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+
+import { ContentStyled, IframeInfo } from './styled'
+
+import { EmbedDialog } from '../configurator/embedDialog'
+
+export interface WidgetIframeProps {
+  id: string
+  src: string
+}
+
+export function WidgetIframe({ id, src }: WidgetIframeProps) {
+  return (
+    <Box sx={ContentStyled}>
+      <iframe id={id} src={src} width="400px" height="640px" title="widget" />
+
+      <Box sx={IframeInfo}>
+        <Typography variant="body2">URL: {src}</Typography>
+        <EmbedDialog iframeUrl={src} />
+      </Box>
+    </Box>
+  )
+}