Merge pull request #223 from cowprotocol/upgrade_develop

Update develop branch with Release v2.13.0
cowprotocol · Sep 26, 2022 · 80b6cb4 · 80b6cb4
2 parents 46b87fd + e36b192
commit 80b6cb4
Show file tree

Hide file tree

Showing 11 changed files with 118 additions and 107 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gnosis.pm/gp-v1",
-  "version": "2.12.0",
+  "version": "2.13.0",
   "description": "",
   "main": "src/index.js",
   "sideEffects": false,

diff --git a/src/apps/explorer/const.ts b/src/apps/explorer/const.ts
@@ -42,7 +42,7 @@ export const DOCS_LINK = 'https://docs.cow.fi'
 export const PROTOCOL_LINK = 'https://cow.fi'
 export const CONTRACTS_CODE_LINK = 'https://github.com/cowprotocol/contracts'
 export const DISCORD_LINK = 'https://discord.gg/cowprotocol'
-export const DUNE_DASHBOARD_LINK = 'https://dune.com/gnosis.protocol/Gnosis-Protocol-V2'
+export const DUNE_DASHBOARD_LINK = 'https://dune.com/cowprotocol/Gnosis-Protocol-V2'
 export const TWITTER_LINK = 'https://twitter.com/CoWSwap'
 export const COWWIKI_LINK = 'https://en.wikipedia.org/wiki/Coincidence_of_wants'
 export const GNOSIS_FORUM_ROADTODECENT_LINK = 'https://forum.gnosis.io/t/gpv2-road-to-decentralization/1245'

diff --git a/src/apps/explorer/pages/AppData/EncodePage.tsx b/src/apps/explorer/pages/AppData/EncodePage.tsx
@@ -177,9 +177,12 @@ const EncodePage: React.FC<EncodeProps> = ({ tabData, setTabData, handleTabChang
     <>
       <div className="info-header box">
         <p>
-          The <strong>appData</strong> optional field part of CoW Protocol orders is the hex digest of an IPFS
-          document’s CID of a JSON file.
+          The <strong>appData</strong> is an optional field part of CoW Protocol orders. It allows users/dapps/wallets
+          to attach meta-information to orders. This is useful for giving context to your orders, like crediting the
+          order to a specific UI, adding affiliate information, or even signalling your order should be treated in a
+          special way.
         </p>
+        <p>This field is the hexadecimal digest of an IPFS document’s CID of a JSON file.</p>
         <p>
           The JSON file follows a
           <a target="_blank" href="https://json-schema.org" rel="noreferrer">
@@ -190,10 +193,6 @@ const EncodePage: React.FC<EncodeProps> = ({ tabData, setTabData, handleTabChang
             repo.
           </a>
         </p>
-        <p>
-          This page offers an easy way to create such JSON with the most up to date version and offers a way to upload
-          it to IPFS.
-        </p>
       </div>
       <div className="form-container">
         <Form

diff --git a/src/apps/explorer/pages/AppData/styled.ts b/src/apps/explorer/pages/AppData/styled.ts
@@ -226,6 +226,7 @@ export const Wrapper = styled(WrapperTemplate)`
     padding: 0.8rem 1.5rem;
     transition-duration: 0.2s;
     transition-timing-function: ease-in-out;
+    font-family: 'Inter var', sans-serif;
 
     ${media.mobile} {
       margin: 1rem 0 0 0;

diff --git a/src/components/common/MenuDropdown/InternalExternalLink.tsx b/src/components/common/MenuDropdown/InternalExternalLink.tsx
@@ -18,14 +18,15 @@ function MenuImage(props: MenuImageProps): JSX.Element | null {
   }
 }
 
-interface InternalExternalLinkProps {
+interface InternalExternalLinkProps extends React.HTMLAttributes<HTMLAnchorElement> {
   link: MenuLink
   handleMobileMenuOnClick?: () => void
 }
 
 export default function InternalExternalMenuLink({
   link,
   handleMobileMenuOnClick,
+  className,
 }: InternalExternalLinkProps): JSX.Element {
   const { kind, title, url, iconSVG, icon } = link
   const menuImage = <MenuImage title={title} icon={icon} iconSVG={iconSVG} />
@@ -42,7 +43,7 @@ export default function InternalExternalMenuLink({
     )
   } else {
     return (
-      <LinkWithPrefixNetwork to={url} target="_self" onClickOptional={handleMobileMenuOnClick}>
+      <LinkWithPrefixNetwork className={className} to={url} target="_self" onClickOptional={handleMobileMenuOnClick}>
         {menuImage}
         {title}
       </LinkWithPrefixNetwork>

diff --git a/src/components/common/MenuDropdown/MenuTree.tsx b/src/components/common/MenuDropdown/MenuTree.tsx
@@ -1,8 +1,7 @@
 import React from 'react'
 
-import InternalExternalMenuLink from 'components/common/MenuDropdown/InternalExternalLink'
 import { MAIN_MENU } from 'components/common/MenuDropdown/mainMenu'
-import { Wrapper, MenuContainer } from 'components/common/MenuDropdown/styled'
+import { Wrapper, MenuContainer, AnchorMenuLink } from 'components/common/MenuDropdown/styled'
 import { MenuItemKind, MenuTreeItem } from 'components/common/MenuDropdown/types'
 import DropDown from '.'
 import MobileMenuIcon from 'components/common/MenuDropdown/MobileMenuIcon'
@@ -22,7 +21,7 @@ function MenuItemWithDropDown(props: MenuItemWithDropDownProps): JSX.Element | n
     case undefined: // INTERNAL
     case MenuItemKind.EXTERNAL_LINK: // EXTERNAL
       // Render Internal/External links
-      return <InternalExternalMenuLink link={menuItem} handleMobileMenuOnClick={context.handleMobileMenuOnClick} />
+      return <AnchorMenuLink link={menuItem} handleMobileMenuOnClick={context.handleMobileMenuOnClick} />
     default:
       return null
   }

diff --git a/src/components/common/MenuDropdown/index.tsx b/src/components/common/MenuDropdown/index.tsx
@@ -1,5 +1,5 @@
 import React, { useState, createRef } from 'react'
-import { MenuFlyout, Content, MenuSection, MenuTitle } from 'components/common/MenuDropdown/styled'
+import { MenuFlyout, Content, MenuSection, MenuTitle, ButtonMenuItem } from 'components/common/MenuDropdown/styled'
 import IMAGE_CARRET_DOWN from 'assets/img/carret-down.svg'
 import SVG from 'react-inlinesvg'
 import { useMediaBreakpoint } from 'hooks/useMediaBreakPoint'
@@ -29,9 +29,9 @@ export function MenuItemsPanel({ title, children }: MenuProps): JSX.Element {
 
   return (
     <MenuFlyout ref={node as never}>
-      <button onClick={handleOnClick} className={showMenu ? 'expanded' : ''}>
+      <ButtonMenuItem onClick={handleOnClick} className={showMenu ? 'expanded' : ''}>
         {title} <SVG src={IMAGE_CARRET_DOWN} description="dropdown icon" className={showMenu ? 'expanded' : ''} />
-      </button>
+      </ButtonMenuItem>
       {showMenu && <Content onClick={handleOnClick}>{children}</Content>}
     </MenuFlyout>
   )

diff --git a/src/components/common/MenuDropdown/styled.ts b/src/components/common/MenuDropdown/styled.ts
@@ -1,6 +1,7 @@
 import styled, { css, FlattenSimpleInterpolation } from 'styled-components'
-import { media } from 'theme/styles/media'
+import { media, ResetButtonCSS } from 'theme/styles'
 import Icon from 'components/Icon'
+import InternalExternalMenuLink from 'components/common/MenuDropdown/InternalExternalLink'
 
 export const Wrapper = styled.div<{ isMobileMenuOpen: boolean }>`
   width: 100%;
@@ -52,6 +53,7 @@ export const MenuContainer = styled.nav`
   display: flex;
   position: relative;
   justify-content: flex-end;
+  align-items: center;
   gap: 2rem;
 
   ${media.mobile}, ${media.mediumOnly} {
@@ -71,117 +73,112 @@ export const MenuContainer = styled.nav`
     overflow: hidden auto;
     display: none;
   }
-
-  a {
-    font-size: 1.6rem;
-    font-weight: 600;
-    appearance: none;
-    outline: 0;
-    border-radius: 1.6rem;
-    padding: 1.1rem 1.2rem;
-    cursor: pointer;
-    background: transparent;
-    transition: background 0.15s ease-in-out 0s, color 0.15s ease-in-out 0s;
+`
+export const MenuItemCSS = css`
+  font-size: 1.6rem;
+  font-weight: 600;
+  appearance: none;
+  outline: 0;
+  border-radius: 1.6rem;
+  padding: 1.3rem 1.2rem;
+  cursor: pointer;
+  background: transparent;
+  transition: background 0.15s ease-in-out 0s, color 0.15s ease-in-out 0s;
+  color: ${({ theme }): string => theme.textSecondary2};
+  :visited,
+  :link {
     color: ${({ theme }): string => theme.textSecondary2};
+  }
+
+  :hover {
+    background: ${({ theme }): string => theme.bg2};
+    text-decoration: none;
+    color: ${({ theme }): string => theme.textSecondary1};
+  }
+  ${media.mobile} {
+    width: 100%;
+    border-bottom: 0.1rem solid ${({ theme }): string => theme.bg3};
+    border-radius: 0;
+    padding: 2.8rem 1rem;
+    font-size: 1.8rem;
     :hover {
-      background: ${({ theme }): string => theme.bg2};
-      text-decoration: none;
-      color: ${({ theme }): string => theme.textSecondary1};
-    }
-    ${media.mobile} {
-      width: 100%;
-      border-bottom: 0.1rem solid ${({ theme }): string => theme.bg3};
-      border-radius: 0;
-      padding: 2.8rem 1rem;
-      font-size: 1.8rem;
-      :hover {
-        background: none;
-      }
+      background: none;
     }
   }
 `
+export const AnchorMenuLink = styled(InternalExternalMenuLink)`
+  ${MenuItemCSS}
+`
 
-export const MenuFlyout = styled.ol`
+export const ButtonMenuItem = styled.button`
+  ${ResetButtonCSS}
+  ${MenuItemCSS}
   display: flex;
-  padding: 0;
-  margin: 0;
-  position: relative;
-  justify-content: flex-end;
+  align-items: center;
 
   ${media.mobile} {
-    display: flex;
-    flex-direction: column;
     width: 100%;
+    border-bottom: 0.1rem solid ${({ theme }): string => theme.bg3};
+    border-radius: 0;
+    padding: 2.8rem 1rem;
+    font-size: 1.8rem;
   }
 
-  > button {
-    font-size: 1.6rem;
-    position: relative;
-    border-radius: 1.6rem;
-    display: flex;
-    align-items: center;
-    font-weight: 600;
-    appearance: none;
-    outline: 0;
-    padding: 0.8rem 1.2rem;
-    border: 0;
-    cursor: pointer;
-    background: transparent;
-    transition: background 0.15s ease-in-out 0s, color 0.15s ease-in-out 0s;
-    color: ${({ theme }): string => theme.textSecondary2};
+  &.expanded {
+    border: none;
+  }
 
+  &:hover {
+    background: ${({ theme }): string => theme.bg2};
+    color: ${({ theme }): string => theme.textSecondary1};
     ${media.mobile} {
+      background: none;
+    }
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      height: 1.8rem;
       width: 100%;
-      border-bottom: 0.1rem solid ${({ theme }): string => theme.bg3};
-      border-radius: 0;
-      padding: 2.8rem 1rem;
-      font-size: 1.8rem;
+      ${media.desktopLarge} {
+        content: none;
+      }
     }
+  }
 
-    &.expanded {
-      border: none;
+  > svg {
+    margin: 0 0 0 0.6rem;
+    object-fit: contain;
+    transition: transform 0.3s ease-in-out;
+    ${media.mobile} {
+      margin: 0 0 0 auto;
     }
+  }
 
-    &:hover {
-      background: ${({ theme }): string => theme.bg2};
-      color: ${({ theme }): string => theme.textSecondary1};
-      ${media.mobile} {
-        background: none;
-      }
-      &::after {
-        content: '';
-        display: block;
-        position: absolute;
-        height: 1.8rem;
-        width: 100%;
-        ${media.desktopLarge} {
-          content: none;
-        }
-      }
-    }
+  > svg.expanded {
+    transition: transform 0.3s ease-in-out;
+    transform: rotate(180deg);
+  }
 
-    > svg {
-      margin: 0 0 0 0.3rem;
-      width: 1.6rem;
-      height: 0.6rem;
-      object-fit: contain;
-      ${media.mobile} {
-        margin: 0 0 0 auto;
-        height: 1rem;
-      }
-    }
+  svg > path {
+    fill: ${({ theme }): string => theme.textSecondary2};
+  }
+  :hover > svg > path {
+    fill: ${({ theme }): string => theme.textSecondary1};
+  }
+`
 
-    > svg.expanded {
-      transition: transform 0.3s ease-in-out;
-      transform: rotate(180deg);
-    }
+export const MenuFlyout = styled.ol`
+  display: flex;
+  padding: 0;
+  margin: 0;
+  position: relative;
+  justify-content: flex-end;
 
-    svg > path {
-      fill: ${({ theme }): string => theme.textSecondary2};
-    }
-    :hover > svg > path {
-      fill: ${({ theme }): string => theme.textSecondary1};
-    }
+  ${media.mobile} {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
   }
 `
 

diff --git a/src/hooks/useGetTokens.ts b/src/hooks/useGetTokens.ts
@@ -178,7 +178,7 @@ export type Token = {
 
 function addHistoricalData(tokens: Token[], prices: { [tokenId: string]: TokenData }): Token[] {
   for (const address of Object.keys(prices)) {
-    const token = tokens.find((token) => token.address === address)
+    const token = tokens.find((token) => token.address.toLowerCase() === address.toLowerCase())
     const values = prices[address]
     if (token) {
       token.timestamp = values.timestamp

diff --git a/src/theme/styles/index.ts b/src/theme/styles/index.ts
@@ -2,3 +2,5 @@ export * from './global'
 export * from './colours'
 export * from './fonts'
 export * from './mediaQueries'
+export * from './reset'
+export * from './media'
diff --git a/src/theme/styles/reset.ts b/src/theme/styles/reset.ts
@@ -0,0 +1,12 @@
+import { css } from 'styled-components'
+
+export const ResetButtonCSS = css`
+  background-color: transparent;
+  border-width: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  padding: 0;
+`