Merge branch 'master' of github.com:MetaMask/website

.github/workflows/security-code-scanner.yml

@@ -39,5 +39,5 @@ jobs:
             storybook/
             test*/
           rules_excluded: example
-          mixpanel_project_token: ${{ secrets.SECURITY_CODE_SCANNER_MIXPANEL_TOKEN }}
+          project_metrics_token: ${{ secrets.SECURITY_SCAN_METRICS_TOKEN }}
           slack_webhook: ${{ secrets.APPSEC_BOT_SLACK_WEBHOOK }}

gatsby-node.js

@@ -425,6 +425,11 @@ exports.onPostBuild = ({ graphql, store, pathPrefix, reporter }) => {
         slug
       }
     }
+    allContentfulLayoutNonCanonical: allContentfulLayout(filter: {seo: {canonicalUrl: {ne: null}}}) {
+      nodes {
+        slug
+      }
+    }
     allContentfulNews(filter: {isPrivate: {eq: false}}) {
       nodes {
         title
@@ -464,13 +469,17 @@ exports.onPostBuild = ({ graphql, store, pathPrefix, reporter }) => {
           resolvePages: ({
             allSitePage,
             allPrivateContentfulLayout,
+            allContentfulLayoutNonCanonical,
             allPrivateContentfulNews,
             allContentfulNews,
           }) => {
             let privatePages = ['/preview/', '/news/latest/']
             allPrivateContentfulLayout.nodes.forEach(page => {
               privatePages.push(page.slug)
             })
+            allContentfulLayoutNonCanonical.nodes.forEach(page => {
+              privatePages.push(page.slug)
+            })
             allContentfulNews.nodes.forEach(page => {
               const newsUrl = getNewsUrl(page)
               privatePages.push(newsUrl)

src/components/CTA.js

@@ -42,6 +42,7 @@ const CTA = props => {
     socialLink,
     previewMode = false,
     showCaretRight,
+    hideButtonIcon,
   } = props
 
   const [keyBrowser, setKeyBrowser] = React.useState('chrome')
@@ -211,7 +212,7 @@ const CTA = props => {
         buttonGradient={buttonGradient}
         eventCategory={eventCategory}
         eventLabel={eventLabel}
-        iconUrl={!delayShow ? iconBrowser : ''}
+        iconUrl={!delayShow && !hideButtonIcon ? iconBrowser : ''}
         iconPosition={['ios', 'android'].includes(keyBrowser) ? 'start' : 'end'}
         hide={delayShow}
       />

src/components/Card/CardFeatureHorizontal.js

@@ -7,6 +7,7 @@ import Link from '../Link'
 import CTAAngleIcon from './CTAAngleIcon'
 import { contentfulModuleToComponent } from '../../lib/utils/moduleToComponent'
 import GatsbyBackgroundImage from '../GatsbyBackgroundImage'
+import ParseMD from '../ParseMD'
 
 /**
  * @name Card
@@ -31,6 +32,7 @@ const StyledCard = props => {
     contentAlignment,
     hubSpotForm,
     cta,
+    embed,
     customClass,
     previewMode = false,
   } = props
@@ -62,11 +64,16 @@ const StyledCard = props => {
               />
             </ImageWrapper>
           ) : null}
+          {embed ? (
+            <EmbedWrapper>
+              {contentfulModuleToComponent({ ...embed, previewMode })}
+            </EmbedWrapper>
+          ) : null}
           <Inner>
             {title ? <Title>{title}</Title> : null}
             {description ? (
               <Description>
-                <div dangerouslySetInnerHTML={{ __html: description }}></div>
+                <ParseMD>{description}</ParseMD>
               </Description>
             ) : null}
             {hubSpotForm ? (
@@ -121,6 +128,15 @@ const CardInner = styled(Link)`
   `
       : null}
 
+  &.tabletBreak {
+    ${({ theme }) =>
+      `
+      @media (max-width: ${theme.device.tabletMediaMax}){
+        flex-direction: column;
+      }
+    `}
+  }
+
   ${({ theme }) =>
     `
   @media (max-width: ${theme.device.mobileMediaMax}){
@@ -166,6 +182,10 @@ const Inner = styled.div`
   width: 100%;
   padding: 44px 32px;
 
+  .cardPadding24 & {
+    padding: 24px;
+  }
+
   ${({ theme }) =>
     `
   @media (max-width: ${theme.device.mobileMediaMax}){
@@ -195,6 +215,10 @@ const Title = styled.div`
 const Description = styled.div`
   display: block;
 
+  ul {
+    text-align: left;
+  }
+
   p:last-child {
     margin-bottom: 0;
   }
@@ -238,3 +262,15 @@ const CTA = styled.div`
     }
   }
 `
+
+const EmbedWrapper = styled.div`
+  flex-grow: 1;
+  background-color: #f2f4f6;
+  display: flex;
+  align-items: center;
+  justify-content: centers;
+
+  & > div {
+    padding: 24px;
+  }
+`

src/components/ContentWrapper.js

@@ -81,6 +81,10 @@ const ContainerInner = styled.div`
   max-width: var(--container-width);
   width: 100%;
 
+  .normalContainer & {
+    max-width: 992px;
+  }
+
   .scrolled.custom-newsHero & {
     max-width: calc(992px + 200px);
   }

src/components/Contentful/ContentfulCard.js

@@ -21,6 +21,7 @@ const ContentfulCard = props => {
       layoutType,
       layoutSize,
       hubSpotForm,
+      video,
     },
   } = props
   const { childMarkdownRemark: { html } = {} } = description || {}
@@ -41,6 +42,7 @@ const ContentfulCard = props => {
       layoutType={layoutType}
       layoutSize={layoutSize}
       cta={cta}
+      embed={video}
       hubSpotForm={hubSpotForm}
       previewMode={previewMode}
     />

src/components/Contentful/ContentfulCta.js

@@ -2,17 +2,23 @@ import withProcessPreviewData from '../../lib/utils/withProcessPreviewData'
 import { MetaMaskContext } from '../../Context/MetaMaskContextProvider'
 import React, { useContext } from 'react'
 import isEmpty from 'lodash/isEmpty'
+import { isMobile } from 'react-device-detect'
 import PropTypes from 'prop-types'
 import CTA from '../CTA'
 
 const ContentfulCta = props => {
   const { isMetaMaskInstalled } = useContext(MetaMaskContext)
 
-  const activeCta =
+  const selectedCta =
     isMetaMaskInstalled && !isEmpty(props.moduleConfig.alternativeCta)
       ? props.moduleConfig.alternativeCta
       : props.moduleConfig
 
+  let activeCta = selectedCta
+  if (isMobile && selectedCta.mobileCta) {
+    activeCta = selectedCta.mobileCta
+  }
+
   // check work with preview
   const extractBrowsers = item =>
     item?.internal?.content ? JSON.parse(item.internal.content) : item
@@ -51,6 +57,7 @@ const ContentfulCta = props => {
       buttonSecondary={activeCta.buttonSecondary}
       socialLink={activeCta.socialLink}
       showCaretRight={activeCta.showCaretRight}
+      hideButtonIcon={activeCta.hideButtonIcon}
       previewMode={activeCta.previewMode}
     />
   )
@@ -84,6 +91,7 @@ ContentfulCta.propTypes = {
     hubSpotForm: PropTypes.object,
     embedHTML: PropTypes.object,
     buttonSecondary: PropTypes.bool,
+    hideButtonIcon: PropTypes.bool,
     previewMode: PropTypes.bool,
   }),
 }

src/components/Contentful/ContentfulLayoutModuleContainer.js

@@ -26,6 +26,7 @@ const ContentfulModuleContainer = props => {
       headlineAlignCenter,
       contentAlignCenter,
       headlineMarginTop0,
+      noPaddingTop,
       noPaddingBottom,
       modules,
       sectionPadding,
@@ -72,6 +73,7 @@ const ContentfulModuleContainer = props => {
       <Container
         sectionPadding={sectionPadding}
         className={classnames({
+          noPaddingTop: noPaddingTop,
           noPaddingBottom: noPaddingBottom,
           [customClass]: customClass,
           [`bg-${backgroundColor}`]: backgroundColor,
@@ -115,6 +117,7 @@ const ContentfulModuleContainer = props => {
       bgUrl={bgUrl}
       backgroundSize={backgroundSize}
       className={classnames({
+        noPaddingTop: noPaddingTop,
         noPaddingBottom: noPaddingBottom,
         [customClass]: customClass,
         [`bg-${backgroundColor}`]: backgroundColor,
@@ -256,6 +259,7 @@ ContentfulModuleContainer.propTypes = {
     contentAlignCenter: PropTypes.bool,
     headlineMarginTop0: PropTypes.bool,
     displayHeadline: PropTypes.bool,
+    noPaddingTop: PropTypes.bool,
     noPaddingBottom: PropTypes.bool,
   }),
 }

src/components/Contentful/ContentfulLogo.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import classnames from 'classnames'
 import { Wrapper, Image } from '../Logo'
 import withProcessPreviewData from '../../lib/utils/withProcessPreviewData'
 
@@ -16,6 +17,7 @@ const ContentfulLogo = props => {
       widthLogo,
       backgroundColor,
       previewMode = false,
+      customClass,
     },
   } = props
   const { title: titleFile, description: descriptionFile } = logo || {}
@@ -27,6 +29,9 @@ const ContentfulLogo = props => {
       child={hasModuleContainer}
       cleanStyle={cleanStyle}
       backgroundColor={backgroundColor}
+      className={classnames({
+        [customClass]: customClass,
+      })}
     >
       {logo ? (
         <Image

src/components/Contentful/ContentfulModuleContainer.js

@@ -228,6 +228,12 @@ const Wrapper = styled.div`
     margin: 0 auto 40px;
     line-height: 24px;
   }
+
+  &#sell-crypto-transact-providers {
+    @media (max-width: ${({ theme }) => theme.device.tabletMediaMax}) {
+      padding-top: 0 !important;
+    }
+  }
 `
 const Inner = styled.div`
   display: block;

src/components/Logo/LogoWrapper.js

@@ -4,10 +4,17 @@ import styled from 'styled-components'
 import Link from '../Link'
 
 const Wrapper = props => {
-  const { children, opensNewTab, link, cleanStyle, backgroundColor } = props
+  const {
+    children,
+    opensNewTab,
+    link,
+    cleanStyle,
+    backgroundColor,
+    ...rest
+  } = props
 
   return (
-    <Item cleanStyle={cleanStyle} backgroundColor={backgroundColor}>
+    <Item cleanStyle={cleanStyle} backgroundColor={backgroundColor} {...rest}>
       {backgroundColor ? (
         <Background backgroundColor={backgroundColor}>
           <Link newTab={opensNewTab} to={link}>
@@ -32,6 +39,11 @@ Wrapper.propTypes = {
 const Item = styled.div`
   display: block;
 
+  .logoMH45 & img {
+    max-height: 45px;
+    width: auto;
+  }
+
   ${({ backgroundColor }) =>
     backgroundColor
       ? `
@@ -40,11 +52,37 @@ const Item = styled.div`
       : null}
 `
 const Background = styled.div`
+  position: relative;
   padding: 32px 64px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 12px;
+  width: 100%;
+
+  .usOnlyLabel &:before {
+    position: absolute;
+    content: 'US ONLY';
+    right: 12px;
+    top: 12px;
+    background-color: #1098fc;
+    color: #fff;
+    font-size: 8px;
+    font-weight: 600;
+    padding: 0 6px;
+    border-radius: 6px;
+  }
+
+  .cashOutMethod & {
+    padding: 32px 24px;
+    @media (min-width: ${({ theme }) => theme.device.tablet}) {
+      justify-content: flex-start;
+    }
+  }
+
+  .logoShadow & {
+    box-shadow: 0px 4px 12px 0px #037dd61a;
+  }
 
   ${({ backgroundColor, theme }) =>
     backgroundColor === 'blue'

src/components/StyledGeneral.js

@@ -37,6 +37,13 @@ export const Section = styled.div`
     padding-bottom: 48px;
   }
 
+  &.sectionPb48 {
+    padding-bottom: 48px;
+  }
+  &.sectionPt48 {
+    padding-top: 48px;
+  }
+
   &.noPaddingBottom, &.custom-noPaddingBottom {
     padding-bottom: 0 !important;
   }