Merge remote-tracking branch 'origin/develop' into 2440/uni-merge

.env

@@ -35,7 +35,7 @@ REACT_APP_FORTMATIC_SITE_VERIFICATION="LzjrtdM7hqVJfvvA"
 
 # Domain regex (to detect environment)
 REACT_APP_DOMAIN_REGEX_LOCAL="^(:?localhost:\d{2,5}|(?:127|192)(?:\.[0-9]{1,3}){3})"
-REACT_APP_DOMAIN_REGEX_PR="^pr\d+--gpswapui\.review"
+REACT_APP_DOMAIN_REGEX_PR="^pr\d+--cowswap\.review"
 REACT_APP_DOMAIN_REGEX_DEV="^cowswap\.dev"
 REACT_APP_DOMAIN_REGEX_STAGING="^cowswap\.staging"
 REACT_APP_DOMAIN_REGEX_PROD="^cowswap\.exchange$"

.env.production

@@ -36,7 +36,7 @@ REACT_APP_FORTMATIC_KEY_PROD="pk_live_7BD8004CBBF5CDD6"
 
 # Domain regex (to detect environment)
 REACT_APP_DOMAIN_REGEX_LOCAL="^(:?localhost:\d{2,5}|(?:127|192)(?:\.[0-9]{1,3}){3})"
-REACT_APP_DOMAIN_REGEX_PR="^pr\d+--gpswapui\.review"
+REACT_APP_DOMAIN_REGEX_PR="^pr\d+--cowswap\.review"
 REACT_APP_DOMAIN_REGEX_DEV="^cowswap\.dev"
 REACT_APP_DOMAIN_REGEX_STAGING="^cowswap\.staging"
 REACT_APP_DOMAIN_REGEX_PROD="^cowswap\.exchange$"

.github/workflows/ci.yml

@@ -1,16 +1,16 @@
 name: CI
 
 on:
-  # build on PR creation/updates, also when pushing to master/develop, or create a release
+  # build on PR creation/updates, also when pushing to main/develop, or create a release
   pull_request:
     types: [opened, synchronize]
   push:
-    branches: [master, develop]
+    branches: [main, develop]
     tags: [v*]
 
 
 env:
-  REPO_NAME_SLUG: gpswapui
+  REPO_NAME_SLUG: cowswap
   PR_NUMBER: ${{ github.event.number }}
   REACT_APP_SENTRY_DSN: ${{ secrets.SENTRY_DSN }}
   REACT_APP_PINATA_API_KEY: ${{ secrets.REACT_APP_PINATA_API_KEY }}
@@ -237,7 +237,7 @@ jobs:
         run: aws s3 sync website s3://${{ secrets.AWS_DEV_BUCKET_NAME }} --delete
 
       - name: 'Deploy to S3: Staging'
-        if: github.ref == 'refs/heads/master'
+        if: github.ref == 'refs/heads/main'
         run: aws s3 sync website s3://${{ secrets.AWS_STAGING_BUCKET_NAME }}/current --delete
 
       - name: Get the version

.github/workflows/cla.yml

@@ -19,7 +19,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:
           path-to-signatures: 'signatures/version1/cla.json'
-          path-to-cla-document: 'https://github.com/gnosis/cowswap/blob/develop/docs/GNOSIS_CLA.md'
+          path-to-cla-document: 'https://github.com/cowprotocol/cla/blob/main/Cow%20Services%20CLA.md'
           branch: 'cla-signatures'
           allowlist: dependabot,mergify,alfetopito,anxolin,W3stside,nenadV91,annamsgeorge,avsavsavs,c3rnst,cmagan,josojo,davidalbela,fedgiac,fleupold,giacomolicari,GabrielCamba,nlordell,alongoni,elena-zh,henrypalacios,matextrem,ramirotw,fairlighteth
           empty-commit-flag: false

.github/workflows/ipfs.yml

@@ -5,7 +5,7 @@ on:
     tags: [v*]
 
 env:
-  REPO_NAME_SLUG: gpswapui
+  REPO_NAME_SLUG: cowswap
   REACT_APP_PINATA_API_KEY: ${{ secrets.REACT_APP_PINATA_API_KEY }}
   REACT_APP_PINATA_SECRET_API_KEY: ${{ secrets.REACT_APP_PINATA_SECRET_API_KEY }}
 

README.md

@@ -1,7 +1,7 @@
 [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/gnosis/gp-swap-ui)
 
 <p align="center">
-  <img width="400" src="docs/images/logo-cow-swap.png">
+  <img height="120" src="https://bafybeig5h43icn326c45qmwl4mpimskfaqa3o2pnkuht5pqb6gfcfjzlxi.ipfs.dweb.link/">
 </p>
 
 [![Lint](https://github.com/gnosis/dex-swap/workflows/Lint/badge.svg)](https://github.com/gnosis/dex-swap/actions?query=workflow%3ALint)
@@ -21,7 +21,7 @@ It allows you to buy and sell tokens using gas-less orders that are settled peer
 - Stats: <https://dune.xyz/gnosis.protocol/Gnosis-Protocol-V2>
 - Twitter: [@gnosisPM](https://twitter.com/gnosisPM)
 - Reddit: [/r/gnosisPM](https://www.reddit.com/r/gnosisPM)
-- Discord: <https://chat.cowswap.exchange>
+- Discord: <https://discord.com/invite/cowprotocol>
 
 Please see the:
 

package.json

@@ -19,7 +19,7 @@
   },
   "types": "./dist/widgets.d.ts",
   "private": true,
-  "version": "1.12.10",
+  "version": "1.13.1",
   "engines": {
     "node": ">=14.0.0"
   },

src/custom/components/AddToMetamask/index.tsx

@@ -10,9 +10,10 @@ import MetaMaskLogo from 'assets/images/metamask.png'
 
 export type AddToMetamaskProps = {
   currency: Currency | undefined
+  shortLabel?: boolean
 }
 
-const ButtonCustom = styled.button`
+export const ButtonCustom = styled.button`
   display: flex;
   flex: 1 1 auto;
   align-self: center;
@@ -59,7 +60,7 @@ const CheckCircleCustom = styled(CheckCircle)`
 `
 
 export default function AddToMetamask(props: AddToMetamaskProps) {
-  const { currency } = props
+  const { currency, shortLabel } = props
   const theme = useContext(ThemeContext)
   const { library } = useActiveWeb3React()
   const { addToken, success } = useAddTokenToMetamask(currency)
@@ -72,7 +73,7 @@ export default function AddToMetamask(props: AddToMetamaskProps) {
     <ButtonCustom onClick={addToken}>
       {!success ? (
         <RowFixed>
-          <StyledIcon src={MetaMaskLogo} /> Add {currency.symbol} to Metamask
+          <StyledIcon src={MetaMaskLogo} /> {shortLabel ? 'Add token' : `Add ${currency.symbol} to Metamask`}
         </RowFixed>
       ) : (
         <RowFixed>

src/custom/components/CowBalanceButton/index.tsx

@@ -0,0 +1,64 @@
+import { Trans } from '@lingui/macro'
+import styled from 'styled-components/macro'
+import CowProtocolLogo from 'components/CowProtocolLogo'
+import { useCombinedBalance } from 'state/cowToken/hooks'
+import { ChainId } from 'state/lists/actions/actionsMod'
+import { formatMax, formatSmartLocaleAware } from 'utils/format'
+import { AMOUNT_PRECISION } from 'constants/index'
+import { COW } from 'constants/tokens'
+
+export const Wrapper = styled.div`
+  ${({ theme }) => theme.card.boxShadow};
+  color: ${({ theme }) => theme.text1};
+  padding: 0 12px;
+  font-size: 15px;
+  font-weight: 500;
+  height: 38px;
+  display: flex;
+  align-items: center;
+  position: relative;
+  border-radius: 12px;
+  pointer-events: auto;
+
+  > b {
+    margin: 0 0 0 5px;
+    color: inherit;
+    font-weight: inherit;
+    white-space: nowrap;
+
+    ${({ theme }) => theme.mediaWidth.upToMedium`
+      overflow: hidden;
+      max-width: 100px;
+      text-overflow: ellipsis;
+    `};
+
+    ${({ theme }) => theme.mediaWidth.upToSmall`
+      overflow: visible;
+      max-width: initial;
+    `};
+  }
+`
+
+interface CowBalanceButtonProps {
+  account?: string | null | undefined
+  chainId: ChainId | undefined
+  onClick?: () => void
+}
+
+const COW_DECIMALS = COW[ChainId.MAINNET].decimals
+
+export default function CowBalanceButton({ onClick }: CowBalanceButtonProps) {
+  const combinedBalance = useCombinedBalance()
+
+  const formattedBalance = formatSmartLocaleAware(combinedBalance, AMOUNT_PRECISION)
+  const formattedMaxBalance = formatMax(combinedBalance, COW_DECIMALS)
+
+  return (
+    <Wrapper onClick={onClick}>
+      <CowProtocolLogo />
+      <b title={formattedMaxBalance && `${formattedMaxBalance} (v)COW`}>
+        <Trans>{formattedBalance || 0}</Trans>
+      </b>
+    </Wrapper>
+  )
+}

src/custom/components/Header/index.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import { SupportedChainId as ChainId } from 'constants/chains'
 // import { ExternalLink } from 'theme'
-import { useHistory, useLocation } from 'react-router-dom'
+import { useHistory } from 'react-router-dom'
 
 import HeaderMod, {
   Title as TitleMod,
@@ -43,8 +43,7 @@ import {
 
 // import Modal from 'components/Modal'
 // import ClaimModal from 'components/claim/ClaimModal'
-// import UniBalanceContent from 'components/Header/UniBalanceContent' // TODO: no longer exists, should probably remove
-import CowClaimButton from 'components/CowClaimButton'
+import CowBalanceButton from 'components/CowBalanceButton'
 
 export const NETWORK_LABELS: { [chainId in ChainId]?: string } = {
   [ChainId.RINKEBY]: 'Rinkeby',
@@ -221,9 +220,6 @@ const VCowWrapper = styled(UNIWrapper)`
 `
 
 export default function Header() {
-  const location = useLocation()
-  const isClaimPage = location.pathname === '/claim'
-
   const { account, chainId: connectedChainId } = useActiveWeb3React()
   const chainId = supportedChainId(connectedChainId)
 
@@ -242,7 +238,7 @@ export default function Header() {
   const isMenuOpen = useModalOpen(ApplicationModal.MENU)
 
   const history = useHistory()
-  const handleOnClickClaim = () => history.push('/claim')
+  const handleBalanceButtonClick = () => history.push('/profile')
 
   // Toggle the 'noScroll' class on body, whenever the orders panel or flyout menu is open.
   // This removes the inner scrollbar on the page body, to prevent showing double scrollbars.
@@ -276,12 +272,7 @@ export default function Header() {
           </HeaderElement>
           <HeaderElement>
             <VCowWrapper>
-              <CowClaimButton
-                isClaimPage={isClaimPage}
-                account={account}
-                chainId={chainId}
-                handleOnClickClaim={handleOnClickClaim}
-              />
+              <CowBalanceButton onClick={handleBalanceButtonClick} account={account} chainId={chainId} />
             </VCowWrapper>
 
             <AccountElement active={!!account} style={{ pointerEvents: 'auto' }}>
@@ -303,7 +294,7 @@ export default function Header() {
               {darkMode ? <Moon size={20} /> : <Sun size={20} />}
             </StyledMenuButton>
           </HeaderElementWrap>
-          <Menu isClaimPage={isClaimPage} darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
+          <Menu darkMode={darkMode} toggleDarkMode={toggleDarkMode} />
         </HeaderControls>
         {isOrdersPanelOpen && <OrdersPanel closeOrdersPanel={closeOrdersPanel} />}
       </HeaderModWrapper>