diff --git a/src/components/Announcement/Popups/CenterPopup.tsx b/src/components/Announcement/Popups/CenterPopup.tsx
index 23e6422dbf..d69b843ca4 100644
--- a/src/components/Announcement/Popups/CenterPopup.tsx
+++ b/src/components/Announcement/Popups/CenterPopup.tsx
@@ -1,7 +1,7 @@
import { t } from '@lingui/macro'
import { X } from 'react-feather'
import { useMedia } from 'react-use'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
import CtaButton from 'components/Announcement/Popups/CtaButton'
import {
@@ -10,13 +10,14 @@ import {
PopupItemType,
PopupType,
} from 'components/Announcement/type'
+import Column from 'components/Column'
import Modal from 'components/Modal'
import Row, { RowBetween } from 'components/Row'
import { Z_INDEXS } from 'constants/styles'
import useMixpanel, { MIXPANEL_TYPE } from 'hooks/useMixpanel'
import useTheme from 'hooks/useTheme'
import { MEDIA_WIDTHS } from 'theme'
-import { useNavigateToUrl } from 'utils/redirect'
+import { useNavigateToUrl, validateRedirectURL } from 'utils/redirect'
import { escapeScriptHtml } from 'utils/string'
const Wrapper = styled.div`
@@ -31,13 +32,23 @@ const Wrapper = styled.div`
padding: 20px;
`}
`
-const ContentWrapper = styled.div`
+const ContentWrapper = styled.div<{ isVertical: boolean }>`
display: flex;
- flex-direction: column;
- overflow-y: auto;
overflow-x: hidden;
gap: 24px;
flex: 1;
+ max-width: 100%;
+ ${({ isVertical }) =>
+ isVertical
+ ? css`
+ flex-direction: column;
+ overflow-y: auto;
+ `
+ : css`
+ flex-direction: row;
+ gap: 24px;
+ overflow-y: hidden;
+ `}
${({ theme }) => theme.mediaWidth.upToMedium`
gap: 20px;
`}
@@ -73,9 +84,9 @@ const Image = styled.img`
const StyledCtaButton = styled(CtaButton)`
width: fit-content;
- min-width: 220px;
- height: 36px;
+ min-width: min(220px, 100%);
max-width: 100%;
+ height: 36px;
${({ theme }) => theme.mediaWidth.upToSmall`
width: fit-content;
min-width: 100px;
@@ -87,8 +98,48 @@ const Desc = styled.div`
word-break: break-word;
font-size: 14px;
line-height: 20px;
+ &::-webkit-scrollbar {
+ display: block;
+ width: 4px;
+ }
+ &::-webkit-scrollbar-thumb {
+ background: ${({ theme }) => theme.border};
+ }
+`
+
+const VIDEO_SIZE = `360px`
+const VideoWrapper = styled.div`
+ width: 640px;
+ height: ${VIDEO_SIZE};
+ ${({ theme }) => theme.mediaWidth.upToSmall`
+ max-width: 100%;
+ `}
`
+const whitelistDomains = ['drive.google.com', 'www.youtube.com']
+const Video = ({ url, title }: { url: string; title: string }) => {
+ try {
+ const { host } = new URL(url)
+ if (!whitelistDomains.includes(host) || !validateRedirectURL(url, { _dangerousSkipCheckWhitelist: true }))
+ return null
+ } catch (error) {
+ return null
+ }
+ return (
+
+
+
+ )
+}
+
export default function CenterPopup({
onDismiss,
data,
@@ -106,6 +157,7 @@ export default function CenterPopup({
content,
ctas = [],
thumbnailImageURL,
+ thumbnailVideoURL,
} = templateBody as AnnouncementTemplatePopup
const navigate = useNavigateToUrl()
@@ -120,8 +172,41 @@ export default function CenterPopup({
})
}
+ const isVertical = !!thumbnailVideoURL && !isMobile
+
+ const renderContent = () => (
+ <>
+
+
+ {ctas.length > 0 ? (
+ ctas.map(item => (
+ {
+ onClickCta(item.url)
+ }}
+ />
+ ))
+ ) : (
+ onClickCta()} />
+ )}
+
+ >
+ )
+
return (
-
+
{name}
@@ -135,35 +220,19 @@ export default function CenterPopup({
style={{ minWidth: '24px' }}
/>
-
- {thumbnailImageURL && }
-
-
- {ctas.length > 0 ? (
- ctas.map(item => (
- {
- onClickCta(item.url)
- }}
- />
- ))
- ) : (
- {
- onClickCta()
- }}
- />
- )}
-
+
+ {thumbnailVideoURL ? (
+
+ ) : (
+ thumbnailImageURL &&
+ )}
+ {isVertical ? (
+
+ {renderContent()}
+
+ ) : (
+ renderContent()
+ )}
diff --git a/src/components/Announcement/helper.ts b/src/components/Announcement/helper.ts
index 0ba391456d..5dbd31a435 100644
--- a/src/components/Announcement/helper.ts
+++ b/src/components/Announcement/helper.ts
@@ -1,7 +1,7 @@
import { ChainId } from '@kyberswap/ks-sdk-core'
import { AnnouncementTemplatePopup, PopupContentAnnouncement, PopupItemType } from 'components/Announcement/type'
-import { TIMES_IN_SECS } from 'constants/index'
+import { APP_PATHS, TIMES_IN_SECS } from 'constants/index'
const LsKey = 'ack-announcements'
export const getAnnouncementsAckMap = () => JSON.parse(localStorage[LsKey] || '{}')
@@ -28,6 +28,9 @@ export const isPopupCanShow = (
chainId: ChainId,
account: string | undefined,
) => {
+ if ([APP_PATHS.IAM_CONSENT, APP_PATHS.IAM_LOGIN, APP_PATHS.IAM_LOGOUT].includes(window.location.pathname))
+ return false
+
const { templateBody = {}, metaMessageId } = popupInfo.content
const { endAt, startAt, chainIds = [] } = templateBody as AnnouncementTemplatePopup
const isRightChain = chainIds.includes(chainId + '')
diff --git a/src/components/Announcement/type.ts b/src/components/Announcement/type.ts
index 07223ebf08..930de7225b 100644
--- a/src/components/Announcement/type.ts
+++ b/src/components/Announcement/type.ts
@@ -112,6 +112,7 @@ export type AnnouncementTemplatePopup = {
name: string
content: string
thumbnailImageURL: string
+ thumbnailVideoURL?: string
type: 'NORMAL' | 'CRITICAL'
startAt: number
endAt: number
diff --git a/src/constants/env.ts b/src/constants/env.ts
index 63d42ec001..a11cbe6734 100644
--- a/src/constants/env.ts
+++ b/src/constants/env.ts
@@ -74,13 +74,13 @@ export const FIREBASE: { [key in EnvKeys]: { DEFAULT: FirebaseConfig; LIMIT_ORDE
appId: '1:522790089501:web:524403003ae65c09c727f4',
},
DEFAULT: {
- apiKey: 'AIzaSyD1UhS2D-a5D6e20SuKgx87FGitbQUL_V8',
- authDomain: 'notification-local-73771.firebaseapp.com',
- projectId: 'notification-local-73771',
- storageBucket: 'notification-local-73771.appspot.com',
- messagingSenderId: '227120017035',
- appId: '1:227120017035:web:36592ab3e81b5614b7ae8e',
- measurementId: 'G-Q3EPQSWMM5',
+ apiKey: 'AIzaSyDszHtJ4CJq0mwjBJ1pTt5OOzG5tiooEsg',
+ authDomain: 'test-bace2.firebaseapp.com',
+ databaseURL: 'https://test-bace2-default-rtdb.asia-southeast1.firebasedatabase.app',
+ projectId: 'test-bace2',
+ storageBucket: 'test-bace2.appspot.com',
+ messagingSenderId: '337703820408',
+ appId: '1:337703820408:web:2fb16ef71941817dec618d',
},
},
staging: {