From 1a2c1de308c15f28ba34d3014b4fce4e01dab869 Mon Sep 17 00:00:00 2001 From: fairlight <31534717+fairlighteth@users.noreply.github.com> Date: Fri, 20 Oct 2023 10:02:02 +0100 Subject: [PATCH] Widget UI + configurator (#3227) * feat: widget init mods * feat: widget menu links * feat: select menu * feat: select menu * feat: select menu * Update apps/cowswap-frontend/src/modules/trade/containers/TradeWidget/index.tsx Co-authored-by: Alexandr Kazachenko * feat: fix semicolons * feat: menu styling * feat: general styling * feat: connect wallet internal * feat: connect wallet internal * feat: connect wallet internal * feat: widget configurator app * feat: widget configurator app * feat: widget configurator app * feat: widget configurator app * feat: widget configurator app * feat: widget configurator app * feat: widget configurator app * feat: widget configurator app * feat: widget configurator app * feat: widget configurator app * feat: widget configurator app * refactor: extract AccountElement and AccountModalState * chore: update yarn.lock * chore: fix code style --------- Co-authored-by: Michel Co-authored-by: Alexandr Kazachenko --- .../src/assets/icon/carret.svg | 1 + .../src/assets/icon/gas-free.svg | 2 +- .../src/assets/icon/wallet.svg | 1 + .../src/common/constants/theme.ts | 2 + .../ConfirmationPendingContent/styled.tsx | 10 +- .../pure/CurrencySelectButton/styled.tsx | 4 +- apps/cowswap-frontend/src/cow-react/index.tsx | 16 +- .../src/legacy/components/Copy/CopyMod.tsx | 5 +- .../legacy/components/ErrorBoundary/index.tsx | 6 + .../Header/AccountElement/index.tsx | 38 ++ .../Header/AccountElement/styled.tsx | 58 +++ .../src/legacy/components/Header/index.tsx | 54 +-- .../src/legacy/components/Header/styled.tsx | 82 +--- .../SearchModal/CurrencyList/styled.ts | 15 +- .../CurrencySearch/CurrencySearchMod.tsx | 21 +- .../legacy/components/SearchModal/styleds.tsx | 19 +- .../components/Settings/SettingsMod.tsx | 9 +- .../src/legacy/components/Settings/index.tsx | 7 +- .../src/legacy/components/Tokens/styled.ts | 8 +- .../TransactionConfirmationModal/styled.ts | 10 +- .../src/legacy/theme/baseTheme.tsx | 16 +- .../src/legacy/theme/index.tsx | 13 +- .../src/legacy/theme/styled.d.ts | 1 + .../account/containers/OrdersPanel/index.tsx | 19 +- .../account/hooks/useAccountModalState.ts | 7 + .../account/hooks/useToggleAccountModal.ts | 9 + .../src/modules/account/index.ts | 3 + .../account/state/accountModalState.ts | 10 + .../application/containers/App/index.tsx | 18 +- .../application/containers/App/styled.ts | 8 +- .../containers/TradeWidgetLinks/index.tsx | 95 +++-- .../containers/TradeWidgetLinks/styled.ts | 56 ++- .../pure/OrdersTableContainer/index.tsx | 19 +- .../trade/containers/TradeWidget/index.tsx | 12 +- .../trade/containers/TradeWidget/styled.tsx | 5 +- .../wallet/containers/Web3Status/index.tsx | 8 +- .../modules/wallet/pure/StatusIcon/index.tsx | 2 +- .../wallet/pure/Web3StatusInner/index.tsx | 3 + .../wallet/pure/Web3StatusInner/styled.ts | 60 +-- apps/cowswap-frontend/src/test-utils.tsx | 4 +- apps/widget-configurator-e2e/.eslintrc.json | 10 + .../widget-configurator-e2e/cypress.config.ts | 8 + apps/widget-configurator-e2e/project.json | 33 ++ .../widget-configurator-e2e/src/e2e/app.cy.ts | 13 + .../src/fixtures/example.json | 4 + .../src/support/app.po.ts | 1 + .../src/support/commands.ts | 33 ++ .../src/support/e2e.ts | 17 + apps/widget-configurator-e2e/tsconfig.json | 10 + apps/widget-configurator/.eslintrc.json | 18 + apps/widget-configurator/index.html | 14 + apps/widget-configurator/project.json | 78 ++++ apps/widget-configurator/public/favicon.ico | Bin 0 -> 15086 bytes apps/widget-configurator/src/app/app.spec.tsx | 15 + apps/widget-configurator/src/app/app.tsx | 21 ++ .../src/app/configurator/embedDialog.tsx | 65 ++++ .../src/app/configurator/index.tsx | 255 +++++++++++++ .../src/app/configurator/styled.ts | 37 ++ apps/widget-configurator/src/assets/.gitkeep | 0 apps/widget-configurator/src/main.tsx | 149 ++++++++ .../src/mui-theme-custom.d.ts | 15 + apps/widget-configurator/tsconfig.app.json | 19 + apps/widget-configurator/tsconfig.json | 21 ++ apps/widget-configurator/tsconfig.spec.json | 20 + apps/widget-configurator/vite.config.ts | 43 +++ .../src/jotai/atomWithPartialUpdate.ts | 9 +- package.json | 8 +- yarn.lock | 354 +++++++++++++++++- 68 files changed, 1720 insertions(+), 286 deletions(-) create mode 100644 apps/cowswap-frontend/src/assets/icon/carret.svg create mode 100644 apps/cowswap-frontend/src/assets/icon/wallet.svg create mode 100644 apps/cowswap-frontend/src/legacy/components/Header/AccountElement/index.tsx create mode 100644 apps/cowswap-frontend/src/legacy/components/Header/AccountElement/styled.tsx create mode 100644 apps/cowswap-frontend/src/modules/account/hooks/useAccountModalState.ts create mode 100644 apps/cowswap-frontend/src/modules/account/hooks/useToggleAccountModal.ts create mode 100644 apps/cowswap-frontend/src/modules/account/index.ts create mode 100644 apps/cowswap-frontend/src/modules/account/state/accountModalState.ts create mode 100644 apps/widget-configurator-e2e/.eslintrc.json create mode 100644 apps/widget-configurator-e2e/cypress.config.ts create mode 100644 apps/widget-configurator-e2e/project.json create mode 100644 apps/widget-configurator-e2e/src/e2e/app.cy.ts create mode 100644 apps/widget-configurator-e2e/src/fixtures/example.json create mode 100644 apps/widget-configurator-e2e/src/support/app.po.ts create mode 100644 apps/widget-configurator-e2e/src/support/commands.ts create mode 100644 apps/widget-configurator-e2e/src/support/e2e.ts create mode 100644 apps/widget-configurator-e2e/tsconfig.json create mode 100644 apps/widget-configurator/.eslintrc.json create mode 100644 apps/widget-configurator/index.html create mode 100644 apps/widget-configurator/project.json create mode 100644 apps/widget-configurator/public/favicon.ico create mode 100644 apps/widget-configurator/src/app/app.spec.tsx create mode 100644 apps/widget-configurator/src/app/app.tsx create mode 100644 apps/widget-configurator/src/app/configurator/embedDialog.tsx create mode 100644 apps/widget-configurator/src/app/configurator/index.tsx create mode 100644 apps/widget-configurator/src/app/configurator/styled.ts create mode 100644 apps/widget-configurator/src/assets/.gitkeep create mode 100644 apps/widget-configurator/src/main.tsx create mode 100644 apps/widget-configurator/src/mui-theme-custom.d.ts create mode 100644 apps/widget-configurator/tsconfig.app.json create mode 100644 apps/widget-configurator/tsconfig.json create mode 100644 apps/widget-configurator/tsconfig.spec.json create mode 100644 apps/widget-configurator/vite.config.ts diff --git a/apps/cowswap-frontend/src/assets/icon/carret.svg b/apps/cowswap-frontend/src/assets/icon/carret.svg new file mode 100644 index 0000000000..c7374a1dad --- /dev/null +++ b/apps/cowswap-frontend/src/assets/icon/carret.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/cowswap-frontend/src/assets/icon/gas-free.svg b/apps/cowswap-frontend/src/assets/icon/gas-free.svg index 96b8d2d0c0..afd180e2ac 100644 --- a/apps/cowswap-frontend/src/assets/icon/gas-free.svg +++ b/apps/cowswap-frontend/src/assets/icon/gas-free.svg @@ -1 +1 @@ - + \ No newline at end of file diff --git a/apps/cowswap-frontend/src/assets/icon/wallet.svg b/apps/cowswap-frontend/src/assets/icon/wallet.svg new file mode 100644 index 0000000000..a320a3cd8b --- /dev/null +++ b/apps/cowswap-frontend/src/assets/icon/wallet.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apps/cowswap-frontend/src/common/constants/theme.ts b/apps/cowswap-frontend/src/common/constants/theme.ts index 6f4442824d..47cfd98680 100644 --- a/apps/cowswap-frontend/src/common/constants/theme.ts +++ b/apps/cowswap-frontend/src/common/constants/theme.ts @@ -24,6 +24,8 @@ export enum UI { // Icons ICON_SIZE_NORMAL = '--cow-icon-size-normal', + ICON_SIZE_SMALL = '--cow-icon-size-small', + ICON_SIZE_XSMALL = '--cow-icon-size-xsmall', ICON_SIZE_LARGE = '--cow-icon-size-large', ICON_COLOR_NORMAL = '--cow-icon-color-normal', diff --git a/apps/cowswap-frontend/src/common/pure/ConfirmationPendingContent/styled.tsx b/apps/cowswap-frontend/src/common/pure/ConfirmationPendingContent/styled.tsx index c9640e8c95..eabdfe0f55 100644 --- a/apps/cowswap-frontend/src/common/pure/ConfirmationPendingContent/styled.tsx +++ b/apps/cowswap-frontend/src/common/pure/ConfirmationPendingContent/styled.tsx @@ -302,11 +302,19 @@ export const StepsWrapper = styled.div` margin: auto; position: absolute; width: 100%; - max-width: 162px; + max-width: 35%; left: 0; right: 0; top: 32px; z-index: 1; + + ${({ theme }) => theme.mediaWidth.upToSmall` + max-width: 25%; + `} + + ${({ theme }) => theme.mediaWidth.upToVerySmall` + max-width: 20%; + `} } > hr::before { diff --git a/apps/cowswap-frontend/src/common/pure/CurrencySelectButton/styled.tsx b/apps/cowswap-frontend/src/common/pure/CurrencySelectButton/styled.tsx index f03be68b0a..3b77df839d 100644 --- a/apps/cowswap-frontend/src/common/pure/CurrencySelectButton/styled.tsx +++ b/apps/cowswap-frontend/src/common/pure/CurrencySelectButton/styled.tsx @@ -3,6 +3,8 @@ import { ReactComponent as DropDown } from '@cowprotocol/assets/images/dropdown. import { lighten, transparentize } from 'polished' import styled from 'styled-components/macro' +import { UI } from 'common/constants/theme' + export const CurrencySelectWrapper = styled.button<{ isLoading: boolean; $stubbed: boolean; readonlyMode: boolean }>` display: flex; justify-content: space-between; @@ -19,7 +21,7 @@ export const CurrencySelectWrapper = styled.button<{ isLoading: boolean; $stubbe : `0px 4px 8px ${transparentize(0.96, theme.text1)}`}; opacity: ${({ isLoading }) => (isLoading ? 0.6 : 1)}; pointer-events: ${({ readonlyMode }) => (readonlyMode ? 'none' : '')}; - border-radius: 16px; + border-radius: var(${UI.BORDER_RADIUS_NORMAL}); padding: 6px; transition: background-color 0.15s ease-in-out; max-width: 190px; diff --git a/apps/cowswap-frontend/src/cow-react/index.tsx b/apps/cowswap-frontend/src/cow-react/index.tsx index 550ac9907f..eb78e960c7 100644 --- a/apps/cowswap-frontend/src/cow-react/index.tsx +++ b/apps/cowswap-frontend/src/cow-react/index.tsx @@ -7,6 +7,7 @@ import { Provider as AtomProvider } from 'jotai' import { StrictMode } from 'react' import { BlockNumberProvider } from '@cowprotocol/common-hooks' +import { isInjectedWidget } from '@cowprotocol/common-utils' import { nodeRemoveChildFix } from '@cowprotocol/common-utils' import { jotaiStore } from '@cowprotocol/core' import { SnackbarsWidget } from '@cowprotocol/snackbars' @@ -41,6 +42,7 @@ if (window.ethereum) { } const root = createRoot(document.getElementById('root')!) +const isInjectedWidgetMode = isInjectedWidget() root.render( @@ -56,12 +58,18 @@ root.render( - - - + + {!isInjectedWidgetMode && ( + <> + + + + + + )} + - diff --git a/apps/cowswap-frontend/src/legacy/components/Copy/CopyMod.tsx b/apps/cowswap-frontend/src/legacy/components/Copy/CopyMod.tsx index 25d9bea369..22834dc072 100644 --- a/apps/cowswap-frontend/src/legacy/components/Copy/CopyMod.tsx +++ b/apps/cowswap-frontend/src/legacy/components/Copy/CopyMod.tsx @@ -13,6 +13,7 @@ import { UI } from 'common/constants/theme' // MOD imports export const CopyIcon = styled(LinkStyledButton)` + --iconSize: var(${UI.ICON_SIZE_NORMAL}); color: ${({ theme }) => theme.text3}; flex-shrink: 0; display: flex; @@ -22,8 +23,8 @@ export const CopyIcon = styled(LinkStyledButton)` font-size: 0.825rem; border-radius: 50%; background-color: transparent; - min-width: 20px; - min-height: 20px; + min-width: var(--iconSize); + min-height: var(--iconSize); align-self: flex-end; :hover, :active, diff --git a/apps/cowswap-frontend/src/legacy/components/ErrorBoundary/index.tsx b/apps/cowswap-frontend/src/legacy/components/ErrorBoundary/index.tsx index 74d286ca67..6cca9b4af0 100644 --- a/apps/cowswap-frontend/src/legacy/components/ErrorBoundary/index.tsx +++ b/apps/cowswap-frontend/src/legacy/components/ErrorBoundary/index.tsx @@ -1,10 +1,12 @@ import React, { ErrorInfo, PropsWithChildren } from 'react' import { sendError } from '@cowprotocol/analytics' +import { isInjectedWidget } from '@cowprotocol/common-utils' import * as Sentry from '@sentry/react' import styled from 'styled-components/macro' + import { ChunkLoadError } from 'legacy/components/ErrorBoundary/ChunkLoadError' import { ErrorWithStackTrace } from 'legacy/components/ErrorBoundary/ErrorWithStackTrace' import Footer from 'legacy/components/Footer' @@ -128,6 +130,8 @@ export default class ErrorBoundary extends React.Component + + {!isInjectedWidget() && @@ -137,6 +141,8 @@ export default class ErrorBoundary extends React.Component + } + {isChunkLoadError ? : }