332/warning when pinata envs not set locally (#659)

* Added `localWarning` for PINATA keys

* Displaying localWarning if any

* Added alternative warning display:

As a permanent toast notification

* Refactor: Renamed WarningPopupContent `message` to `warning`

* Added warning icon to toast notification

* Moved localWarning from Header to state/application

* Changed warning popup key to a more generic value

* Removed banner with warning in favor of the popup notification

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/state/application/initialState.ts

@@ -0,0 +1,17 @@
+import { ApplicationState } from '@src/state/application/reducer'
+import { localWarning } from 'state/application/localWarning'
+
+const popupList: ApplicationState['popupList'] = []
+
+if (localWarning) {
+  popupList.push({
+    key: 'localWarning',
+    show: true,
+    removeAfterMs: null,
+    content: {
+      warning: localWarning,
+    },
+  })
+}
+
+export const initialState: ApplicationState = { chainId: null, openModal: null, popupList }

src/custom/state/application/localWarning.ts

@@ -0,0 +1,12 @@
+import { PINATA_API_KEY, PINATA_SECRET_API_KEY } from 'constants/ipfs'
+import { isLocal } from 'utils/environments'
+
+let warningMsg
+
+if ((!PINATA_SECRET_API_KEY || !PINATA_API_KEY) && isLocal) {
+  warningMsg =
+    "Pinata env vars not set. Order appData upload won't work! " +
+    'Set REACT_APP_PINATA_API_KEY and REACT_APP_PINATA_SECRET_API_KEY'
+}
+
+export const localWarning = warningMsg

src/state/application/reducer.ts

@@ -2,7 +2,8 @@ import { createSlice, nanoid } from '@reduxjs/toolkit'
 import { DEFAULT_TXN_DISMISS_MS } from 'constants/misc'
 
 import { SupportedChainId } from 'constants/chains'
-import { FlattenInterpolation, ThemeProps, DefaultTheme } from 'styled-components/macro' // mod
+import { FlattenInterpolation, ThemeProps, DefaultTheme } from 'styled-components/macro'
+import { initialState } from 'state/application/initialState' // mod
 
 type BasePopupContent =
   //   | {
@@ -18,7 +19,7 @@ type BasePopupContent =
   }
 
 // MOD: Modified PopupContent. The mod happened directly in the src file, to avoid redefining the state/hoos/etc
-export type PopupContent = (TxPopupContent | MetaTxPopupContent | BasePopupContent) & {
+export type PopupContent = (TxPopupContent | MetaTxPopupContent | BasePopupContent | WarningPopupContent) & {
   // mod: custom styles
   styles?: FlattenInterpolation<ThemeProps<DefaultTheme>>
 }
@@ -39,6 +40,8 @@ export interface MetaTxPopupContent {
   }
 }
 
+export type WarningPopupContent = { warning: string }
+
 export enum ApplicationModal {
   WALLET,
   SETTINGS,
@@ -67,11 +70,11 @@ export interface ApplicationState {
   readonly popupList: PopupList
 }
 
-const initialState: ApplicationState = {
+/* const initialState: ApplicationState = {
   chainId: null,
   openModal: null,
   popupList: [],
-}
+} */
 
 const applicationSlice = createSlice({
   name: 'application',