- {getStatusIcon()}
-
-
+ {ENSName}
-
+ {getStatusIcon()}
+
) : (
- <>
- {ENSName}
+
- {getStatusIcon()}
-
-
+ {isMobile && account ? shortenAddress(account, 10) : account}
-
+ {getStatusIcon()}
+
)}
{isMobile && account ? shortenAddress(account, 10) : account}
+
+ {data.map((item, index) => {
+ const isActive = expandedIndex === index
+ return (
+
+ {
+ setExpandedIndex(isActive ? -1 : index)
+ }}
+ >
+ {item.title}
+
+
+
+ {item.content}
+
+ )
+ })}
+
+ )
+}
+
+export default ToggleCollapse
diff --git a/src/components/FarmIssueAnnouncement.tsx b/src/components/FarmIssueAnnouncement.tsx
new file mode 100644
index 0000000000..a7e85ffa08
--- /dev/null
+++ b/src/components/FarmIssueAnnouncement.tsx
@@ -0,0 +1,102 @@
+import { useState } from 'react'
+import { Flex, Text } from 'rebass'
+import styled from 'styled-components'
+
+import { ReactComponent as DropdownSVG } from 'assets/svg/down.svg'
+import useTheme from 'hooks/useTheme'
+import { ButtonText, ExternalLink } from 'theme'
+
+const Wrapper = styled.div`
+ border-radius: 20px;
+ padding: 16px;
+ font-size: 14px;
+ border: 1px solid ${({ theme }) => theme.warning};
+ margin-bottom: 16px;
+ color: ${({ theme }) => theme.subText};
+
+ li {
+ line-height: 20px;
+ }
+`
+
+function FarmIssueAnnouncement() {
+ const theme = useTheme()
+ const [show, setShow] = useState(true)
+ return (
+ stopPropagationMouseDown && e.stopPropagation()}
+ >
+
+ {hasPointer &&
+
+ )
+}
+
+export default CustomMask
diff --git a/src/components/Tutorial/TutorialSwap/CustomPopup.tsx b/src/components/Tutorial/TutorialSwap/CustomPopup.tsx
new file mode 100644
index 0000000000..9d7fe0a7c4
--- /dev/null
+++ b/src/components/Tutorial/TutorialSwap/CustomPopup.tsx
@@ -0,0 +1,200 @@
+import { Trans, t } from '@lingui/macro'
+import { CSSProperties, useMemo } from 'react'
+import { X } from 'react-feather'
+import { Flex, Text } from 'rebass'
+import styled, { css } from 'styled-components'
+import { CardinalOrientation, OrientationCoords, WalktourLogic } from 'walktour'
+
+import { ButtonPrimary } from 'components/Button'
+import useTheme from 'hooks/useTheme'
+
+import { StepCustom, TOTAL_STEP } from './constant'
+
+const PopupWrapper = styled.div<{ center: boolean }>`
+ background-color: ${({ theme }) => theme.tableHeader};
+ padding: 20px;
+ border-radius: 20px;
+ position: relative;
+
+ ${({ center }) =>
+ center &&
+ css`
+ width: 500px;
+ position: fixed;
+ left: 0;
+ right: 0;
+ margin: auto;
+ top: 50%;
+ transform: translateY(-50%);
+ `};
+`
+type Direction = 'left' | 'right' | 'bottom' | 'top'
+
+const ARROW_SIZE = 16
+const BORDER_TRANSPARENT = `${ARROW_SIZE}px solid transparent`
+
+const getStyleArrow = (arrowColor: string, dir: string) =>
+ ({
+ left: {
+ borderTop: BORDER_TRANSPARENT,
+ borderRight: arrowColor,
+ borderBottom: BORDER_TRANSPARENT,
+ },
+ right: {
+ borderBottom: BORDER_TRANSPARENT,
+ borderLeft: arrowColor,
+ borderTop: BORDER_TRANSPARENT,
+ },
+ top: {
+ borderLeft: BORDER_TRANSPARENT,
+ borderBottom: arrowColor,
+ borderRight: BORDER_TRANSPARENT,
+ },
+ bottom: {
+ borderLeft: BORDER_TRANSPARENT,
+ borderTop: arrowColor,
+ borderRight: BORDER_TRANSPARENT,
+ },
+ }[dir])
+
+const Arrow = ({
+ color,
+ tooltipPosition,
+ target,
+}: {
+ tooltipPosition: OrientationCoords
+ color: string
+ target: string
+}) => {
+ const targetElement = useMemo(() => {
+ return document.querySelector(target)
+ }, [target])
+
+ if (!tooltipPosition?.orientation) return null
+ const { orientation } = tooltipPosition
+ let arrowDir: Direction = 'top'
+ let position: CSSProperties = {}
+
+ const paddingV = (targetElement?.clientHeight || 0) / 2 ?? 15
+ const paddingH = (targetElement?.clientWidth || 0) / 2 ?? 15
+ switch (orientation) {
+ case CardinalOrientation.SOUTH:
+ position = { display: 'flex', justifyContent: 'center', top: -ARROW_SIZE, left: 0, right: 0 }
+ arrowDir = 'top'
+ break
+ case CardinalOrientation.SOUTHEAST:
+ position = { right: paddingH, top: -ARROW_SIZE }
+ arrowDir = 'top'
+ break
+ case CardinalOrientation.SOUTHWEST:
+ position = { top: -ARROW_SIZE, left: paddingH }
+ arrowDir = 'top'
+ break
+ case CardinalOrientation.EAST:
+ position = { left: -ARROW_SIZE, top: 0, bottom: 0, display: 'flex', alignItems: 'center' }
+ arrowDir = 'left'
+ break
+ case CardinalOrientation.EASTNORTH:
+ position = { left: -ARROW_SIZE, top: paddingV }
+ arrowDir = 'left'
+ break
+ case CardinalOrientation.EASTSOUTH:
+ position = { left: -ARROW_SIZE, bottom: paddingV }
+ arrowDir = 'left'
+ break
+ case CardinalOrientation.WESTNORTH:
+ position = { right: -ARROW_SIZE, top: paddingV }
+ arrowDir = 'right'
+ break
+ case CardinalOrientation.WEST:
+ position = { right: -ARROW_SIZE, top: 0, bottom: 0, display: 'flex', alignItems: 'center' }
+ arrowDir = 'right'
+ break
+ case CardinalOrientation.WESTSOUTH:
+ position = { right: -ARROW_SIZE, bottom: paddingV }
+ arrowDir = 'right'
+ break
+ case CardinalOrientation.NORTHWEST:
+ position = { bottom: -ARROW_SIZE, left: paddingH }
+ arrowDir = 'bottom'
+ break
+ case CardinalOrientation.NORTH:
+ position = { display: 'flex', justifyContent: 'center', bottom: -ARROW_SIZE, left: 0, right: 0 }
+ arrowDir = 'bottom'
+ break
+ case CardinalOrientation.NORTHEAST:
+ position = { bottom: -ARROW_SIZE, right: paddingH }
+ arrowDir = 'bottom'
+ break
+ case CardinalOrientation.CENTER:
+ return null
+ }
+
+ return (
+
+
+
+ )
+}
+
+export default function CustomPopup(props: WalktourLogic | undefined): JSX.Element {
+ const { stepContent, stepIndex, next, prev, close } = props || ({} as WalktourLogic)
+ const theme = useTheme()
+ const {
+ customFooterRenderer,
+ popupStyle,
+ title,
+ center = false,
+ stopPropagationMouseDown,
+ } = stepContent as StepCustom
+ const isLastStep = stepIndex - 1 === TOTAL_STEP
+ return (
+ {stepContent.description}
+ {customFooterRenderer ? (
+ customFooterRenderer(props)
+ ) : (
+
+
+
+ Welcome to KyberSwap!
+
+
+
+ {TOTAL_STEP} easy ways to get started with KyberSwap
+
+
+
+
+ .default})
+ 
+ {item.name}
+
+
+ {/** because we need tracking we user click video, iframe youtube not fire any event for us. */}
+ {!playedVideo &&
+ setShow(true)}>
- {props.customIcon}
+ {customIcon}
) : (
diff --git a/src/components/Vesting/ProMMVesting.tsx b/src/components/Vesting/ProMMVesting.tsx
index 158bfb71b9..d7df6a7534 100644
--- a/src/components/Vesting/ProMMVesting.tsx
+++ b/src/components/Vesting/ProMMVesting.tsx
@@ -1,7 +1,6 @@
import { CurrencyAmount, Token } from '@kyberswap/ks-sdk-core'
import { Trans } from '@lingui/macro'
import { BigNumber } from 'ethers'
-import React from 'react'
import { Text } from 'rebass'
import LocalLoader from 'components/LocalLoader'
diff --git a/src/components/WalletModal/InstallBraveNote.tsx b/src/components/WalletModal/InstallBraveNote.tsx
new file mode 100644
index 0000000000..27a957f473
--- /dev/null
+++ b/src/components/WalletModal/InstallBraveNote.tsx
@@ -0,0 +1,51 @@
+import { Trans } from '@lingui/macro'
+import { AlertTriangle } from 'react-feather'
+import { Flex, Text } from 'rebass'
+
+import useTheme from 'hooks/useTheme'
+import { ExternalLink } from 'theme'
+
+const InstallBraveNote: React.FC = () => {
+ const theme = useTheme()
+
+ return (
+
- {(eligiblePositions as UserPositionFarm[]).map(pos => (
- {
- if (selected) setSeletedNFTs(prev => [...prev, pos.tokenId.toString()])
- else {
- setSeletedNFTs(prev => prev.filter(item => item !== pos.tokenId.toString()))
- }
- }}
- />
- ))}
+ {(eligiblePositions as UserPositionFarm[])
+ .filter(pos => {
+ if (forced) {
+ return failedNFTs.includes(pos.tokenId.toString())
+ }
+
+ return true
+ })
+ .map(pos => (
+ {
+ if (selected) setSeletedNFTs(prev => [...prev, pos.tokenId.toString()])
+ else {
+ setSeletedNFTs(prev => prev.filter(item => item !== pos.tokenId.toString()))
+ }
+ }}
+ />
+ ))}
'), + __html: description.replace(/\r\n\r\n/g, '
'), }} />