332/Store slippage info on appData

.env

@@ -72,3 +72,7 @@ REACT_APP_MOCK=true
 
 # Locales
 REACT_APP_LOCALES="locales"
+
+# IPFS uploading
+REACT_APP_PINATA_API_KEY=
+REACT_APP_PINATA_SECRET_API_KEY=

.env.production

@@ -73,3 +73,7 @@ REACT_APP_MOCK=false
 
 # Locales
 REACT_APP_LOCALES="locales"
+
+# IPFS uploading
+#REACT_APP_PINATA_API_KEY=
+#REACT_APP_PINATA_SECRET_API_KEY=

cypress-custom/integration/swapMod.ts

@@ -12,22 +12,22 @@ describe('Swap (mod)', () => {
 
   it('can enter an amount into input', () => {
     cy.get('#swap-currency-input .token-amount-input')
-      .clear()
-      .type('0.001', { delay: 400, force: true })
+      .type('{selectall}{backspace}{selectall}{backspace}')
+      .type('0.001')
       .should('have.value', '0.001')
   })
 
   it('zero swap amount', () => {
     cy.get('#swap-currency-input .token-amount-input')
-      .clear()
-      .type('0.0', { delay: 400, force: true })
+      .type('{selectall}{backspace}{selectall}{backspace}')
+      .type('0.0')
       .should('have.value', '0.0')
   })
 
   it('invalid swap amount', () => {
     cy.get('#swap-currency-input .token-amount-input')
-      .clear()
-      .type('\\', { delay: 400, force: true })
+      .type('{selectall}{backspace}{selectall}{backspace}')
+      .type('\\')
       .should('have.value', '')
   })
 

package.json

@@ -34,7 +34,7 @@
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
-    "@cowprotocol/cow-sdk": "^0.0.14",
+    "@cowprotocol/cow-sdk": "^0.0.15-RC.0",
     "@craco/craco": "^5.7.0",
     "@ethersproject/experimental": "^5.4.0",
     "@graphql-codegen/cli": "1.21.5",

src/custom/components/AffiliateStatusCheck/index.tsx

@@ -2,11 +2,8 @@ import React, { useCallback, useEffect, useState, useRef, useMemo } from 'react'
 import { useHistory, useLocation } from 'react-router-dom'
 import { useActiveWeb3React } from 'hooks/web3'
 import NotificationBanner from 'components/NotificationBanner'
-import { useReferralAddress, useResetReferralAddress } from 'state/affiliate/hooks'
-import { updateAppDataHash } from 'state/affiliate/actions'
-import { useAppDispatch } from 'state/hooks'
+import { useReferralAddress, useResetReferralAddress, useSetReferralAddressActive } from 'state/affiliate/hooks'
 import { hasTrades } from 'utils/trade'
-import { generateReferralMetadataDoc, uploadMetadataDocToIpfs } from 'utils/metadata'
 import { retry, RetryOptions } from 'utils/retry'
 import { SupportedChainId } from 'constants/chains'
 import useParseReferralQueryParam from 'hooks/useParseReferralQueryParam'
@@ -26,39 +23,59 @@ const STATUS_TO_MESSAGE_MAPPING: Record<AffiliateStatus, string> = {
 const DEFAULT_RETRY_OPTIONS: RetryOptions = { n: 3, minWait: 1000, maxWait: 3000 }
 
 export default function AffiliateStatusCheck() {
-  const appDispatch = useAppDispatch()
   const resetReferralAddress = useResetReferralAddress()
+  const setReferralAddressActive = useSetReferralAddressActive()
   const history = useHistory()
   const location = useLocation()
   const { account, chainId } = useActiveWeb3React()
   const referralAddress = useReferralAddress()
   const referralAddressQueryParam = useParseReferralQueryParam()
   const allRecentActivity = useRecentActivity()
-  const [affiliateState, setAffiliateState] = useState<AffiliateStatus | null>()
+  const [affiliateState, _setAffiliateState] = useState<AffiliateStatus | null>()
+
+  /**
+   * Wrapper around setAffiliateState (local) and setReferralAddressActive (global)
+   * Need to keep track when affiliate is ACTIVE to know whether it should be included in the
+   * metadata, no longer uploaded to IPFS here
+   */
+  const setAffiliateState = useCallback(
+    (state: AffiliateStatus | null) => {
+      _setAffiliateState(state)
+      setReferralAddressActive(state === 'ACTIVE')
+    },
+    [setReferralAddressActive]
+  )
+
+  // De-normalized to avoid unnecessary useEffect triggers
+  const isReferralAddressNotSet = !referralAddress
+  const referralAddressAccount = referralAddress?.value
+  const referralAddressIsValid = referralAddress?.isValid
+
   const [error, setError] = useState('')
   const isFirstTrade = useRef(false)
   const fulfilledOrders = allRecentActivity.filter((data) => {
     return 'appData' in data && data.status === OrderStatus.FULFILLED
   })
 
   const notificationBannerId = useMemo(() => {
-    if (!referralAddress?.value) {
+    if (!referralAddressAccount) {
       return
     }
 
     if (!account) {
-      return `referral-${referralAddress.value}`
+      return `referral-${referralAddressAccount}`
     }
 
-    return `wallet-${account}:referral-${referralAddress.value}:chain-${chainId}`
-  }, [account, chainId, referralAddress?.value])
+    return `wallet-${account}:referral-${referralAddressAccount}:chain-${chainId}`
+  }, [account, chainId, referralAddressAccount])
 
   const handleAffiliateState = useCallback(async () => {
-    if (!chainId || !account || !referralAddress) {
+    if (!chainId || !account) {
       return
     }
 
-    if (!referralAddress.isValid) {
+    // Note: comparing with `false` because in case `undefined` msg shouldn't be displayed
+    if (referralAddressIsValid === false) {
       setError('Affiliate program: The referral address is invalid.')
       return
     }
@@ -85,28 +102,23 @@ export default function AffiliateStatusCheck() {
 
     setAffiliateState('ACTIVE')
     isFirstTrade.current = true
-  }, [referralAddress, chainId, account, fulfilledOrders.length, history, resetReferralAddress])
-
-  useEffect(() => {
-    async function handleReferralAddress(referralAddress: { value: string; isValid: boolean } | undefined) {
-      if (!referralAddress?.value) return
-      try {
-        const appDataHash = await uploadMetadataDocToIpfs(generateReferralMetadataDoc(referralAddress.value))
-        appDispatch(updateAppDataHash(appDataHash))
-      } catch (e) {
-        console.error(e)
-        setError('Affiliate program: There was an error while uploading your referral data. Please try again later.')
-      }
-    }
-    if (affiliateState === 'ACTIVE') handleReferralAddress(referralAddress)
-  }, [referralAddress, affiliateState, appDispatch])
+  }, [
+    account,
+    chainId,
+    fulfilledOrders.length,
+    history,
+    referralAddressIsValid,
+    resetReferralAddress,
+    setAffiliateState,
+  ])
 
   useEffect(() => {
-    if (!referralAddress) {
+    if (isReferralAddressNotSet) {
       return
     }
 
     setError('')
+    setAffiliateState(null)
 
     if (!account) {
       setAffiliateState('NOT_CONNECTED')
@@ -118,7 +130,7 @@ export default function AffiliateStatusCheck() {
       return
     }
 
-    if (referralAddress.value === account) {
+    if (referralAddressAccount === account) {
       // clean-up saved referral address if the user follows its own referral link
       setAffiliateState('OWN_LINK')
 
@@ -129,7 +141,17 @@ export default function AffiliateStatusCheck() {
     }
 
     handleAffiliateState()
-  }, [referralAddress, account, history, chainId, handleAffiliateState, location.search, referralAddressQueryParam])
+  }, [
+    account,
+    history,
+    chainId,
+    handleAffiliateState,
+    location.search,
+    referralAddressQueryParam,
+    setAffiliateState,
+    referralAddressAccount,
+    isReferralAddressNotSet,
+  ])
 
   if (error) {
     return (

src/custom/components/Header/URLWarning/index.tsx

@@ -71,6 +71,7 @@ export default function URLWarning() {
 
   const announcementVisible = useAnnouncementVisible(contentHash)
   const closeAnnouncement = useCloseAnnouncement()
+
   const announcement = announcementVisible && announcementText && (
     <>
       <div style={{ display: 'flex' }}>

src/custom/components/Popups/PopupItemMod.tsx

@@ -11,6 +11,7 @@ import TransactionPopup from './TransactionPopupMod'
 
 // MOD imports
 import ListUpdatePopup from 'components/Popups/ListUpdatePopup'
+import { WarningPopup } from 'components/Popups/WarningPopup'
 
 export const StyledClose = styled(X)`
   position: absolute;
@@ -84,6 +85,7 @@ export default function PopupItem({
   const isListUpdate = 'listUpdate' in content
   const isUnsupportedNetwork = 'unsupportedNetwork' in content
   const isMetaTxn = 'metatxn' in content
+  const isWarningTxn = 'warning' in content
 
   let popupContent
   if (isTxn) {
@@ -105,6 +107,8 @@ export default function PopupItem({
     popupContent = <FailedNetworkSwitchPopup chainId={content.failedSwitchNetwork} isUnsupportedNetwork />
   } else if ('failedSwitchNetwork' in content) {
     popupContent = <FailedNetworkSwitchPopup chainId={content.failedSwitchNetwork} />
+  } else if (isWarningTxn) {
+    popupContent = <WarningPopup warning={content.warning} />
   }
 
   const faderStyle = useSpring({

src/custom/components/Popups/WarningPopup.tsx

@@ -0,0 +1,28 @@
+import { useContext } from 'react'
+import styled, { ThemeContext } from 'styled-components/macro'
+
+import { ThemedText } from 'theme'
+import { AutoColumn } from 'components/Column'
+import { AutoRow } from 'components/Row'
+import { AlertCircle } from 'react-feather'
+
+const RowNoFlex = styled(AutoRow)`
+  flex-wrap: nowrap;
+`
+
+export function WarningPopup({ warning }: { warning: string | JSX.Element }) {
+  const theme = useContext(ThemeContext)
+
+  return (
+    <RowNoFlex>
+      <div style={{ paddingRight: 16 }}>
+        <AlertCircle color={theme.red1} size={24} />
+      </div>
+      <AutoColumn gap="sm">
+        <ThemedText.Body fontWeight={'bold'} color={theme.danger}>
+          {warning}
+        </ThemedText.Body>
+      </AutoColumn>
+    </RowNoFlex>
+  )
+}

src/custom/constants/index.ts

@@ -32,6 +32,9 @@ export const SHORT_LOAD_THRESHOLD = 500
 export const LONG_LOAD_THRESHOLD = 2000
 
 export const APP_DATA_HASH = getAppDataHash()
+export const DEFAULT_APP_CODE = 'CowSwap'
+export const SAFE_APP_CODE = `${DEFAULT_APP_CODE}-SafeApp`
+
 export const PRODUCTION_URL = 'cowswap.exchange'
 export const BARN_URL = `barn.${PRODUCTION_URL}`
 
@@ -170,6 +173,7 @@ export const SWR_OPTIONS = {
   revalidateOnFocus: false,
 }
 
+// TODO: show banner warning when PINATA env vars are missing
 const COW_SDK_OPTIONS = {
   ipfs: { pinataApiKey: PINATA_API_KEY, pinataApiSecret: PINATA_SECRET_API_KEY },
 }

src/custom/constants/ipfs.ts

@@ -1,4 +1,2 @@
 export const PINATA_API_KEY = process.env.REACT_APP_PINATA_API_KEY as string
 export const PINATA_SECRET_API_KEY = process.env.REACT_APP_PINATA_SECRET_API_KEY as string
-export const PINATA_API_URL = process.env.REACT_APP_PINATA_API_URL || 'https://api.pinata.cloud'
-export const IPFS_URI = process.env.REACT_APP_IPFS_URI || 'https://ipfs.infura.io:5001/api/v0'

src/custom/hooks/useAppCode.ts

@@ -0,0 +1,15 @@
+import { useIsGnosisSafeApp } from 'hooks/useWalletInfo'
+import { DEFAULT_APP_CODE, SAFE_APP_CODE } from 'constants/index'
+
+const APP_CODE = process.env.REACT_APP_APP_CODE
+
+export function useAppCode(): string {
+  const isSafeApp = useIsGnosisSafeApp()
+
+  if (APP_CODE) {
+    // appCode coming from env var has priority
+    return APP_CODE
+  }
+
+  return isSafeApp ? SAFE_APP_CODE : DEFAULT_APP_CODE
+}