chore(release): 2024-03-28 #4103 from cowprotocol/release/2024-03-28

chore(release): 2024-03-28
cowprotocol · Mar 28, 2024 · 1a97379 · 1a97379
2 parents c231a38 + 895991b
commit 1a97379
Show file tree

Hide file tree

Showing 92 changed files with 1,734 additions and 397 deletions.
diff --git a/apps/cowswap-frontend/.env b/apps/cowswap-frontend/.env
@@ -56,13 +56,13 @@
 # To set your own `AppData`, change `REACT_APP_FULL_APP_DATA_<environment>`
 
 # AppData, build yours at https://explorer.cow.fi/appdata
-REACT_APP_FULL_APP_DATA_PRODUCTION='{"version":"1.0.0","appCode":"CoW Swap","environment":"production","metadata":{}}'
-REACT_APP_FULL_APP_DATA_ENS='{"version":"1.0.0","appCode":"CoW Swap","environment":"ens","metadata":{}}'
-REACT_APP_FULL_APP_DATA_BARN='{"version":"1.0.0","appCode":"CoW Swap","environment":"barn","metadata":{}}'
-REACT_APP_FULL_APP_DATA_STAGING='{"version":"1.0.0","appCode":"CoW Swap","environment":"staging","metadata":{}}'
-REACT_APP_FULL_APP_DATA_PR='{"version":"1.0.0","appCode":"CoW Swap","environment":"pr","metadata":{}}'
-REACT_APP_FULL_APP_DATA_DEVELOPMENT='{"version":"1.0.0","appCode":"CoW Swap","environment":"development","metadata":{}}'
-REACT_APP_FULL_APP_DATA_LOCAL='{"version":"1.0.0","appCode":"CoW Swap","environment":"local","metadata":{}}'
+REACT_APP_FULL_APP_DATA_PRODUCTION='{"version":"1.1.0","appCode":"CoW Swap","environment":"production","metadata":{}}'
+REACT_APP_FULL_APP_DATA_ENS='{"version":"1.1.0","appCode":"CoW Swap","environment":"ens","metadata":{}}'
+REACT_APP_FULL_APP_DATA_BARN='{"version":"1.1.0","appCode":"CoW Swap","environment":"barn","metadata":{}}'
+REACT_APP_FULL_APP_DATA_STAGING='{"version":"1.1.0","appCode":"CoW Swap","environment":"staging","metadata":{}}'
+REACT_APP_FULL_APP_DATA_PR='{"version":"1.1.0","appCode":"CoW Swap","environment":"pr","metadata":{}}'
+REACT_APP_FULL_APP_DATA_DEVELOPMENT='{"version":"1.1.0","appCode":"CoW Swap","environment":"development","metadata":{}}'
+REACT_APP_FULL_APP_DATA_LOCAL='{"version":"1.1.0","appCode":"CoW Swap","environment":"local","metadata":{}}'
 
 
 

diff --git a/apps/cowswap-frontend/public/audio/slot-machine.mp3 b/apps/cowswap-frontend/public/audio/slot-machine.mp3
diff --git a/apps/cowswap-frontend/src/common/hooks/featureFlags/useIsAprilFoolsEnabled.ts b/apps/cowswap-frontend/src/common/hooks/featureFlags/useIsAprilFoolsEnabled.ts
@@ -0,0 +1,8 @@
+import { useFeatureFlags } from '@cowprotocol/common-hooks'
+import { isInjectedWidget } from '@cowprotocol/common-utils'
+
+export function useIsAprilFoolsEnabled(): boolean {
+  const { isAprilFoolsEnabled } = useFeatureFlags()
+
+  return isAprilFoolsEnabled && !isInjectedWidget()
+}
diff --git a/apps/cowswap-frontend/src/common/hooks/useCategorizeRecentActivity.ts b/apps/cowswap-frontend/src/common/hooks/useCategorizeRecentActivity.ts
@@ -3,13 +3,15 @@ import { useMemo } from 'react'
 import { UiOrderType } from '@cowprotocol/types'
 
 import { useRecentActivity } from 'legacy/hooks/useRecentActivity'
-import { Order, OrderStatus, PENDING_STATES } from 'legacy/state/orders/actions'
+import { CREATING_STATES, Order, OrderStatus, PENDING_STATES } from 'legacy/state/orders/actions'
 
 import { getIsFinalizedOrder } from 'utils/orderUtils/getIsFinalizedOrder'
 import { getUiOrderType } from 'utils/orderUtils/getUiOrderType'
 
 export const isPending = ({ status }: { status: OrderStatus }) => PENDING_STATES.includes(status)
 
+export const isCreating = ({ status }: { status: OrderStatus }) => CREATING_STATES.includes(status)
+
 export function useCategorizeRecentActivity() {
   // Returns all RECENT (last day) transaction and orders in 2 arrays: pending and confirmed
   const allRecentActivity = useRecentActivity()

diff --git a/apps/cowswap-frontend/src/common/pure/ConfirmationPendingContent/styled.tsx b/apps/cowswap-frontend/src/common/pure/ConfirmationPendingContent/styled.tsx
@@ -207,7 +207,7 @@ export const StepsWrapper = styled.div`
       max-width: 25%;
     `}
 
-    ${({ theme }) => theme.mediaWidth.upToVerySmall`
+    ${({ theme }) => theme.mediaWidth.upToExtraSmall`
       max-width: 20%;
     `}
   }

diff --git a/apps/cowswap-frontend/src/common/pure/CurrencyInputPanel/CurrencyInputPanel.tsx b/apps/cowswap-frontend/src/common/pure/CurrencyInputPanel/CurrencyInputPanel.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 
 import { setMaxSellTokensAnalytics } from '@cowprotocol/analytics'
 import { NATIVE_CURRENCIES } from '@cowprotocol/common-const'
@@ -45,6 +45,7 @@ export interface CurrencyInputPanelProps extends Partial<BuiltItProps> {
   onUserInput: (field: Field, typedValue: string) => void
   openTokenSelectWidget(selectedToken: string | undefined, onCurrencySelection: (currency: Currency) => void): void
   topLabel?: string
+  wasImFeelingLuckyClicked?: boolean
 }
 
 export function CurrencyInputPanel(props: CurrencyInputPanelProps) {
@@ -72,6 +73,7 @@ export function CurrencyInputPanel(props: CurrencyInputPanelProps) {
       },
     },
     topLabel,
+    wasImFeelingLuckyClicked,
   } = props
 
   const { field, currency, balance, fiatAmount, amount, isIndependent, receiveAmountInfo } = currencyInfo
@@ -157,6 +159,7 @@ export function CurrencyInputPanel(props: CurrencyInputPanelProps) {
               currency={disabled ? undefined : currency || undefined}
               loading={areCurrenciesLoading || disabled}
               readonlyMode={tokenSelectorDisabled}
+              wasImFeelingLuckyClicked={wasImFeelingLuckyClicked}
             />
           </div>
           <div>

diff --git a/apps/cowswap-frontend/src/common/pure/CurrencySelectButton/index.tsx b/apps/cowswap-frontend/src/common/pure/CurrencySelectButton/index.tsx
@@ -12,10 +12,11 @@ export interface CurrencySelectButtonProps {
   loading: boolean
   readonlyMode?: boolean
   onClick?(): void
+  wasImFeelingLuckyClicked?: boolean
 }
 
 export function CurrencySelectButton(props: CurrencySelectButtonProps) {
-  const { currency, onClick, loading, readonlyMode = false } = props
+  const { currency, onClick, loading, readonlyMode = false, wasImFeelingLuckyClicked = false } = props
   const $stubbed = !currency || false
 
   return (
@@ -26,6 +27,7 @@ export function CurrencySelectButton(props: CurrencySelectButtonProps) {
       onClick={onClick}
       isLoading={loading}
       $stubbed={$stubbed}
+      wasImFeelingLuckyClicked={wasImFeelingLuckyClicked}
     >
       {currency ? <TokenLogo token={currency} size={24} /> : <div></div>}
       <styledEl.CurrencySymbol className="token-symbol-container" $stubbed={$stubbed}>

diff --git a/apps/cowswap-frontend/src/common/pure/CurrencySelectButton/styled.tsx b/apps/cowswap-frontend/src/common/pure/CurrencySelectButton/styled.tsx
@@ -1,7 +1,7 @@
 import { ReactComponent as DropDown } from '@cowprotocol/assets/images/dropdown.svg'
 import { UI } from '@cowprotocol/ui'
 
-import styled from 'styled-components/macro'
+import styled, { css } from 'styled-components/macro'
 
 export const ArrowDown = styled(DropDown)<{ $stubbed?: boolean }>`
   margin: 0 3px;
@@ -21,7 +21,12 @@ export const ArrowDown = styled(DropDown)<{ $stubbed?: boolean }>`
   `};
 `
 
-export const CurrencySelectWrapper = styled.button<{ isLoading: boolean; $stubbed: boolean; readonlyMode: boolean }>`
+export const CurrencySelectWrapper = styled.button<{
+  isLoading: boolean
+  $stubbed: boolean
+  readonlyMode: boolean
+  wasImFeelingLuckyClicked?: boolean
+}>`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -54,6 +59,45 @@ export const CurrencySelectWrapper = styled.button<{ isLoading: boolean; $stubbe
     transition: stroke var(${UI.ANIMATION_DURATION}) ease-in-out;
     stroke: ${({ $stubbed }) => ($stubbed ? 'currentColor' : `var(${UI.COLOR_BUTTON_TEXT})`)};
   }
+
+  ${({ wasImFeelingLuckyClicked }) =>
+    wasImFeelingLuckyClicked &&
+    css`
+      animation: buzz-out 1s ease-in-out;
+      animation-iteration-count: 1;
+      @keyframes buzz-out {
+        10% {
+          transform: translateX(3px) rotate(2deg);
+        }
+        20% {
+          transform: translateX(-3px) rotate(-2deg);
+        }
+        30% {
+          transform: translateX(3px) rotate(2deg);
+        }
+        40% {
+          transform: translateX(-3px) rotate(-2deg);
+        }
+        50% {
+          transform: translateX(2px) rotate(1deg);
+        }
+        60% {
+          transform: translateX(-2px) rotate(-1deg);
+        }
+        70% {
+          transform: translateX(2px) rotate(1deg);
+        }
+        80% {
+          transform: translateX(-2px) rotate(-1deg);
+        }
+        90% {
+          transform: translateX(1px) rotate(0);
+        }
+        100% {
+          transform: translateX(-1px) rotate(0);
+        }
+      }
+    `}
 `
 
 export const CurrencySymbol = styled.div<{ $stubbed: boolean }>`

diff --git a/apps/cowswap-frontend/src/cow-react/index.tsx b/apps/cowswap-frontend/src/cow-react/index.tsx
@@ -20,6 +20,7 @@ import * as serviceWorkerRegistration from 'serviceWorkerRegistration'
 
 import AppziButton from 'legacy/components/AppziButton'
 import Web3Provider from 'legacy/components/Web3Provider'
+import { upToMedium, useMediaQuery } from 'legacy/hooks/useMediaQuery'
 import { cowSwapStore } from 'legacy/state'
 import ThemeProvider, { FixedGlobalStyle, ThemedGlobalStyle } from 'legacy/theme'
 
@@ -51,6 +52,8 @@ function Main() {
     }
   }, [])
 
+  const isUpToMedium = useMediaQuery(upToMedium)
+
   return (
     <StrictMode>
       <FixedGlobalStyle />
@@ -66,7 +69,7 @@ function Main() {
                       <WalletUnsupportedNetworkBanner />
                       <Updaters />
 
-                      {!isInjectedWidgetMode && (
+                      {!isInjectedWidgetMode && !isUpToMedium && (
                         <>
                           <FeatureGuard featureFlag="cowFortuneEnabled">
                             <FortuneWidget />

diff --git a/apps/cowswap-frontend/src/legacy/components/AppziButton/index.tsx b/apps/cowswap-frontend/src/legacy/components/AppziButton/index.tsx
@@ -26,7 +26,23 @@ const Wrapper = styled.div`
   transition: background 0.5s ease-in-out, transform 0.5s ease-in-out;
 
   ${({ theme }) => theme.mediaWidth.upToMedium`
-    background: ${({ theme }) => transparentize(theme.bg2, 0.1)};
+    left: initial;
+    bottom: initial;
+    position: relative;
+    width: 100%;
+    right: initial;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-radius: 0px;
+    margin: 0px;
+    font-weight: 600;
+    font-size: 17px;
+    padding: 15px 10px;
+    color: inherit;
+    border-bottom: 1px solid var(--cow-color-text-opacity-10);
+    height: auto;
+    background: none;
   `};
 
   > svg {
@@ -40,38 +56,50 @@ const Wrapper = styled.div`
 
     ${({ theme }) => theme.mediaWidth.upToMedium`
       fill: ${({ theme }) => theme.white};
+      background: ${({ theme }) => transparentize(theme.bg2, 0.1)};
+      --size: 46px;
+      height: var(--size);
+      width: var(--size);
+      transform: none;
+      border-radius: calc(var(--size) / 3);
     `};
   }
 
   &:hover {
     background: ${({ theme }) => transparentize(theme.bg2, 0.1)};
     transform: translateY(-3px);
 
+    ${({ theme }) => theme.mediaWidth.upToMedium`
+      background: none;
+      transform: none;
+    `};
+
     > svg {
       fill: ${({ theme }) => theme.white};
       transform: rotate(-360deg);
+
+      ${({ theme }) => theme.mediaWidth.upToMedium`
+        transform: none;
+    `};
     }
   }
-
-  ${({ theme }) => theme.mediaWidth.upToMedium`
-    left: 14px;
-    height: 38px;
-    width: 38px;
-    bottom: 11px;
-    right: initial;
-    z-index: 10;
-    box-shadow: none;
-    border-width: 3px;
-  `};
 `
 
-export default function Appzi() {
+interface AppziButtonProps {
+  menuTitle?: string
+  onClick?: () => void
+  isUpToMedium?: boolean
+}
+
+export default function Appzi({ menuTitle, onClick, isUpToMedium }: AppziButtonProps) {
   if (!isAppziEnabled) {
     return null
   }
 
   return (
-    <Wrapper onClick={openFeedbackAppzi}>
+    // <Wrapper onClick={openFeedbackAppzi}>
+    <Wrapper onClick={isUpToMedium ? onClick && openFeedbackAppzi : openFeedbackAppzi}>
+      {menuTitle && <span>{menuTitle}</span>}
       <SVG src={FeedbackIcon} description="Provide Feedback" />
     </Wrapper>
   )

diff --git a/apps/cowswap-frontend/src/legacy/components/CowBalanceButton/index.tsx b/apps/cowswap-frontend/src/legacy/components/CowBalanceButton/index.tsx
@@ -25,14 +25,15 @@ export const Wrapper = styled.div<{ isLoading: boolean }>`
   transition: width var(${UI.ANIMATION_DURATION}) ease-in-out, border var(${UI.ANIMATION_DURATION}) ease-in-out;
   cursor: pointer;
 
-  ${({ theme }) => theme.mediaWidth.upToMedium`
-    height: 100%;
-    width: auto;
-    padding: 6px 12px 6px 8px;
+  ${({ theme }) => theme.mediaWidth.upToLarge`
+    position: absolute;
+    z-index: 1001;
+    right: 76px;
+    background: var(${UI.COLOR_PAPER_DARKER});
   `};
 
   ${({ theme }) => theme.mediaWidth.upToSmall`
-    padding: 6px 8px;
+    right: 66px;
   `};
 
   &:hover {
@@ -77,26 +78,24 @@ interface CowBalanceButtonProps {
   account?: string | null | undefined
   chainId: ChainId | undefined
   onClick?: Command
-  isUpToSmall?: boolean
 }
 
-export default function CowBalanceButton({ onClick, isUpToSmall }: CowBalanceButtonProps) {
+export default function CowBalanceButton({ onClick }: CowBalanceButtonProps) {
   const { balance, isLoading } = useCombinedBalance()
 
   return (
     <Wrapper isLoading={isLoading} onClick={onClick}>
       <CowProtocolLogo />
-      {!isUpToSmall && (
-        <b>
-          <TokenAmount
-            round={true}
-            hideTokenSymbol={true}
-            amount={balance}
-            defaultValue="0"
-            tokenSymbol={{ symbol: '(v)COW' }}
-          />
-        </b>
-      )}
+
+      <b>
+        <TokenAmount
+          round={true}
+          hideTokenSymbol={true}
+          amount={balance}
+          defaultValue="0"
+          tokenSymbol={{ symbol: '(v)COW' }}
+        />
+      </b>
     </Wrapper>
   )
 }
diff --git a/apps/cowswap-frontend/src/legacy/components/Header/AccountElement/index.tsx b/apps/cowswap-frontend/src/legacy/components/Header/AccountElement/index.tsx
@@ -5,6 +5,8 @@ import { NATIVE_CURRENCIES } from '@cowprotocol/common-const'
 import { TokenAmount } from '@cowprotocol/ui'
 import { useWalletInfo } from '@cowprotocol/wallet'
 
+import { upToLarge, useMediaQuery } from 'legacy/hooks/useMediaQuery'
+
 import { useToggleAccountModal } from 'modules/account'
 import { Web3Status } from 'modules/wallet/containers/Web3Status'
 
@@ -24,10 +26,11 @@ export function AccountElement({ className, standaloneMode, pendingActivities }:
   const userEthBalance = useNativeCurrencyAmount(chainId, account)
   const toggleAccountModal = useToggleAccountModal()
   const nativeToken = NATIVE_CURRENCIES[chainId].symbol
+  const isUpToLarge = useMediaQuery(upToLarge)
 
   return (
     <Wrapper className={className} active={!!account} onClick={() => account && toggleAccountModal()}>
-      {standaloneMode !== false && account && !isChainIdUnsupported && userEthBalance && chainId && (
+      {standaloneMode !== false && account && !isChainIdUnsupported && userEthBalance && chainId && !isUpToLarge && (
         <BalanceText>
           <TokenAmount amount={userEthBalance} tokenSymbol={{ symbol: nativeToken }} />
         </BalanceText>

diff --git a/apps/cowswap-frontend/src/legacy/components/Header/MobileMenuIcon/index.tsx b/apps/cowswap-frontend/src/legacy/components/Header/MobileMenuIcon/index.tsx
@@ -7,10 +7,16 @@ const Wrapper = styled.div<{ isMobileMenuOpen: boolean; height?: number; width?:
   z-index: 102;
   display: flex;
   cursor: pointer;
-  margin: 0 6px 0 16px;
+  margin: 0;
   position: relative;
   width: ${({ width = 34 }) => `${width}px`};
   height: ${({ height = 18 }) => `${height}px`};
+  flex: 0 0 auto;
+
+  ${({ theme }) => theme.mediaWidth.upToExtraSmall`
+    max-width: 24px;
+    width: 100%;
+  `}
 
   span {
     background-color: var(${UI.COLOR_TEXT});