Feature/445 use appropriate cta

.github/workflows/integrate.yml

@@ -42,11 +42,20 @@ jobs:
         run: echo "##[set-output name=NVMRC;]$(cat .nvmrc)"
         id: nvm
 
-      - name: Install and Build 🔧
+      - name: Setup Node
         uses: actions/setup-node@f1f314fca9dfce2769ece7d933488f076716723e
         with:
           node-version: "${{ steps.nvm.outputs.NVMRC }}"
-      - run: |
+
+      - name: Build for staging 🔧
+        if: vars.IS_STAGING == 'true'
+        run: |
+          yarn
+          yarn deploy:dev
+
+      - name: Build for production 🔧
+        if: ${{ !vars.IS_STAGING }}
+        run: |
           yarn
           yarn deploy
 

package.json

@@ -23,6 +23,7 @@
     "@mdx-js/mdx": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
     "@metamask/logo": "^3.1.0",
+    "@metamask/sdk": "^0.14.1",
     "@nx-js/observer-util": "^4.2.2",
     "@rive-app/react-canvas": "^3.0.53",
     "@studio-freight/hamo": "^0.6.18",

src/components/FullWidthCta.js

@@ -10,6 +10,8 @@ import classnames from 'classnames'
 import ParseMD from './ParseMD'
 import getWebpImage from '../lib/utils/getWebpImage'
 import ContextClientSide from '../Context/ContextClientSide'
+import isEmpty from 'lodash/isEmpty'
+import { useMetamaskDetect } from '../hooks/useMetamaskDetect'
 
 const LogoAnimation = Loadable(() => import('./LogoAnimation/'))
 
@@ -39,6 +41,8 @@ const FullWidthCta = props => {
     headlineMarginTop0,
   } = props
 
+  const isMetaMaskInstalled = useMetamaskDetect()
+
   const { darkMode: darkModeContextValue } = useContext(ContextClientSide)
   const { isDarkMode } = darkModeContextValue || {}
 
@@ -128,14 +132,12 @@ const FullWidthCta = props => {
                 {contentfulModuleToComponent({ ...embedHtml, previewMode })}
               </div>
             ) : null}
-            {ctas ? (
+            {!isEmpty(ctas) ? (
               <CTAWrapper>
-                {ctas.map(cta =>
-                  contentfulModuleToComponent({
-                    ...cta,
-                    previewMode,
-                  })
-                )}
+                {contentfulModuleToComponent({
+                  ...ctas[ctas.length > 1 && isMetaMaskInstalled ? 1 : 0],
+                  previewMode,
+                })}
               </CTAWrapper>
             ) : null}
           </FullWidthCtaInner>
@@ -172,7 +174,7 @@ const FullWidthCtaWrapper = styled.div`
   justify-content: center;
   align-items: center;
   text-align: center;
-  
+
   ${({ $bordered }) =>
     $bordered
       ? `
@@ -231,7 +233,7 @@ const FullWidthCtaInner = styled.div`
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: space-between;
-    
+
     #logo-container{
       width: 30%;
       padding: 24px 0 8px 0;
@@ -240,18 +242,18 @@ const FullWidthCtaInner = styled.div`
         display: none;
       }
     }
-    
+
     #html-container {
       width: 60%;
       background-color: #F2F4F6;
       border-radius: 8px;
       padding-bottom: 32px;
       margin-left: auto;
-      
+
       .dark-mode & {
         background-color: #24292E;
       }
-      
+
       .uninstallSurvey {
         padding: 32px;
         border-radius: 8px;
@@ -291,7 +293,7 @@ const FullWidthCtaInner = styled.div`
             margin-top: 2px;
           }
         }
-        input:checked + label:before { 
+        input:checked + label:before {
           background-color: #037DD6;
           border-color: #037DD6;
         }
@@ -311,12 +313,12 @@ const FullWidthCtaInner = styled.div`
           display: none;
         }
       }
-      
+
       .buttonSurvey > button {
         width: calc(100% - 64px);
         cursor: pointer;
         transition: all 0.3s ease;
-        
+
         &:disabled {
           background-color: #6A737D;
           cursor: not-allowed;
@@ -325,27 +327,27 @@ const FullWidthCtaInner = styled.div`
           opacity: 0.8;
         }
       }
-      
+
       @media (max-width: ${({ theme }) => theme.device.tabletMediaMax}) {
         width: 100%;
         background-color: transparent;
         padding-bottom: 0;
         .dark-mode & {
           background-color: transparent;
         }
-        
+
         .uninstallSurvey {
           padding: 24px 42px;
           h6 {
             text-align: center;
           }
         }
-        
+
         .buttonSurvey {
           padding: 40px 0 20px 0;
         }
       }
-      
+
       @media (max-width: ${({ theme }) => theme.device.mobileMediaMax}) {
         .uninstallSurvey {
           padding: 24px;
@@ -413,7 +415,7 @@ const CTAWrapper = styled.div`
       }
   `
       : ``}
-  
+
   @media (max-width: ${({ theme }) => theme.device.mobileMediaMax}) {
     .button {
       margin: 0 0 16px 0;

src/components/HeroContainer.js

@@ -12,6 +12,7 @@ import Context from '../Context/ContextPage'
 import Loadable from '@loadable/component'
 import ParseMD from './ParseMD'
 import GatsbyBackgroundImage from './GatsbyBackgroundImage'
+import { useMetamaskDetect } from '../hooks/useMetamaskDetect'
 
 const FoxAnimation = Loadable(() => import('./FoxAnimation/'))
 
@@ -44,17 +45,20 @@ const HeroContainerComponent = props => {
     customClass,
     previewMode = false,
   } = props
+
+  const isMetaMaskInstalled = useMetamaskDetect()
+
   const { darkMode: darkModeContextValue } = useContext(ContextClientSide)
   const { isDarkMode } = darkModeContextValue || {}
+
   const isHome = customClass?.includes('page-home')
   const isAbout = customClass?.includes('page-about')
   const isFlask = customClass?.includes('page-flask')
   const isSDK = customClass?.includes('page-sdk')
   const isInstitutions = customClass?.includes('page-institutions')
   const isInstitutionalChild = customClass?.includes('page-institutional-child')
   const isThankYou = customClass?.includes('page-thank-you')
-  const isMetaMaskInstalled =
-    typeof window !== 'undefined' && window.ethereum?.isMetaMask
+
   let hubspotWrapper
   if (hubSpotForm) {
     hubspotWrapper = (
@@ -66,8 +70,10 @@ const HeroContainerComponent = props => {
       </HubSpotDefault>
     )
   }
+
   const isStyleHubspot = hubSpotForm
   const isStyleCenterSimple = contentAlignment === 'center' && !sideImage
+
   let heroTitleFontsize = ''
   if (isStyleHubspot) {
     heroTitleFontsize = '16px'
@@ -77,6 +83,7 @@ const HeroContainerComponent = props => {
   ) {
     heroTitleFontsize = '30px'
   }
+
   const { heroContainer: heroContainerREF } = useContext(Context)
   const { heroContainerRef } = heroContainerREF || {}
 
@@ -405,7 +412,7 @@ const HeroContainer = styled(Section)`
   @media (max-width: ${({ theme }) => theme.device.tabletMediaMax}){
     padding-top: 0;
     &.custom-newsHero.bg-default:not(.noPaddingBottom) + div{
-      padding-top: 64px !important; 
+      padding-top: 64px !important;
     }
   }
 
@@ -427,7 +434,7 @@ const HeroContainer = styled(Section)`
     @media (max-width: ${({ theme }) => theme.device.tabletMediaMax}){
       padding-bottom: 0;
     }
-  }  
+  }
 `
 
 const HeroContentContainer = styled.div`
@@ -571,7 +578,7 @@ const HeroContentContainer = styled.div`
         }
       }
     }
-    
+
     @media (max-width: ${theme.device.tabletMediaMax}){
       ${EyebrowWrapper} {
         img {
@@ -591,7 +598,7 @@ const HeroContentContainer = styled.div`
       ? `
     max-width: 500px;
     margin: 0 auto!important;
-    
+
      @media (min-width: ${theme.device.mobile}){
       ${EyebrowWrapper} {
         img {
@@ -713,7 +720,7 @@ const HeroTitle = styled.h1`
       padding-bottom: 8px;
     }
   }
-  
+
   ${({ hideHeadline }) =>
     hideHeadline
       ? `
@@ -736,7 +743,7 @@ const HeroTitle = styled.h1`
     margin-right: auto;
   `
       : ''}
-  
+
   ${({ isFlask, isSDK }) =>
     isFlask || isSDK
       ? `
@@ -758,13 +765,13 @@ const HeroTitle = styled.h1`
       text-align: left;
   `
       : ''}
-  
+
   .titleFontSize64 & {
     @media (min-width: ${({ theme }) => theme.device.miniDesktop}) {
       font-size: 64px;
     }
   }
-  
+
   @media (max-width: ${({ theme }) => theme.device.miniDesktopMediaMax}) {
     font-size: 46px;
   }
@@ -870,7 +877,7 @@ const HeroSideImage = styled.div`
     height: auto;
     width: 100%;
     max-width: 960px;
-    
+
   `
       : ''}
 
@@ -885,14 +892,14 @@ const HeroSideImage = styled.div`
     left: 0;
   `
       : ''}
-  
+
   .sideImageOverflow &,
   .sideImageOverflowRight & {
     img {
       filter: drop-shadow(-15px 15px 24px rgba(0, 0, 0, 0.05)) drop-shadow(-3px 3px 10px rgba(0, 0, 0, 0.07));
       border-radius: 5px;
     }
-    
+
     @media (min-width: ${({ theme }) =>
       theme.device.miniDesktop}) and (max-width: ${({ theme }) =>
   theme.device.twoKResolutionMax}) {
@@ -917,7 +924,7 @@ const HeroSideImage = styled.div`
         margin-right: unset;
         width: 100%;
       }
-    } 
+    }
   }
   .sideImageMobileOverflowHiddenBottom100 & {
     @media (max-width: ${({ theme }) => theme.device.mobileMediaMax}) {
@@ -938,19 +945,19 @@ const HeroSideImage = styled.div`
     filter: none;
     border-radius: 0;
   }
-  
+
   .sideImageFlex45 & {
     @media (min-width: ${({ theme }) => theme.device.desktop}) {
       width: 45%;
     }
   }
-  
+
   .sideImageFlex40 & {
     @media (min-width: ${({ theme }) => theme.device.desktop}) {
       width: 40%;
     }
   }
-  
+
   .sideImageFlex35 & {
     @media (min-width: ${({ theme }) => theme.device.desktop}) {
       width: 35%;
@@ -962,11 +969,11 @@ const HeroSideImage = styled.div`
       width: 100%;
     }
   }
-  
+
   @media (min-width: ${({ theme }) => theme.device.desktop}) {
     padding: 0 !important;
   }
-  
+
   @media (max-width: ${({ theme }) => theme.device.tabletMediaMax}) {
     height: 220px;
     margin-bottom: 10px;