From 25d3ab9c8f9c99ed355aa2964517c4fbe1425d36 Mon Sep 17 00:00:00 2001 From: XiaoYhun Date: Thu, 12 Oct 2023 12:48:21 +0700 Subject: [PATCH 01/13] update UI --- .../Header/web3/NetworkModal/Networks.tsx | 10 +-- .../Header/web3/NetworkModal/index.tsx | 63 +++++++++++++------ src/hooks/useChainsConfig.ts | 2 + 3 files changed, 47 insertions(+), 28 deletions(-) diff --git a/src/components/Header/web3/NetworkModal/Networks.tsx b/src/components/Header/web3/NetworkModal/Networks.tsx index 48ecaff5b7..35d628cc94 100644 --- a/src/components/Header/web3/NetworkModal/Networks.tsx +++ b/src/components/Header/web3/NetworkModal/Networks.tsx @@ -79,14 +79,12 @@ const SelectNetworkButton = styled(ButtonEmpty)<{ disabled: boolean }>` } ` const gap = '1rem' -const NetworkList = styled.div<{ mt: number; mb: number }>` +const NetworkList = styled.div` display: flex; align-items: center; gap: ${gap}; flex-wrap: wrap; width: 100%; - margin-top: ${({ mt }) => mt}px; - margin-bottom: ${({ mb }) => mb}px; & > * { width: calc(33.33% - ${gap} * 2 / 3); } @@ -119,8 +117,6 @@ const WalletWrapper = styled.div` const Networks = ({ onChangedNetwork, - mt = 30, - mb = 0, isAcceptedTerm = true, activeChainIds, selectedId, @@ -129,8 +125,6 @@ const Networks = ({ disabledMsg, }: { onChangedNetwork?: () => void - mt?: number - mb?: number isAcceptedTerm?: boolean activeChainIds?: ChainId[] selectedId?: ChainId @@ -174,7 +168,7 @@ const Networks = ({ const { supportedChains } = useChainsConfig() return ( - + {supportedChains.map(({ chainId: itemChainId, icon, name, state }: NetworkInfo, i: number) => { const isMaintenance = state === ChainState.MAINTENANCE const disabled = diff --git a/src/components/Header/web3/NetworkModal/index.tsx b/src/components/Header/web3/NetworkModal/index.tsx index 9d318a475a..979539d548 100644 --- a/src/components/Header/web3/NetworkModal/index.tsx +++ b/src/components/Header/web3/NetworkModal/index.tsx @@ -1,12 +1,16 @@ import { ChainId } from '@kyberswap/ks-sdk-core' import { Trans } from '@lingui/macro' import { X } from 'react-feather' -import { Flex, Text } from 'rebass' +import { Text } from 'rebass' import styled from 'styled-components' +import { ButtonAction } from 'components/Button' +import Column from 'components/Column' import Modal from 'components/Modal' +import Row, { RowBetween } from 'components/Row' import { Z_INDEXS } from 'constants/styles' import { useActiveWeb3React } from 'hooks' +import useTheme from 'hooks/useTheme' import { ApplicationModal } from 'state/application/actions' import { useModalOpen, useNetworkModalToggle } from 'state/application/hooks' import { TYPE } from 'theme' @@ -15,7 +19,7 @@ import Networks from './Networks' const Wrapper = styled.div` width: 100%; - padding: 32px 24px 24px; + padding: 20px; ` export default function NetworkModal({ @@ -33,6 +37,7 @@ export default function NetworkModal({ customToggleModal?: () => void disabledMsg?: string }): JSX.Element | null { + const theme = useTheme() const { isWrongNetwork } = useActiveWeb3React() const networkModalOpen = useModalOpen(ApplicationModal.NETWORK) const toggleNetworkModalGlobal = useNetworkModalToggle() @@ -45,28 +50,46 @@ export default function NetworkModal({ zindex={Z_INDEXS.MODAL} > - + {isWrongNetwork ? Wrong Chain : Select a Chain} - - + - - - {isWrongNetwork && ( - - Please connect to the appropriate chain. - - )} - + + + + + + Favorite Chain(s) + +
+ + + + Drag your favourite chain(s) here + + + + + Chain List + +
+ + {isWrongNetwork && ( + + Please connect to the appropriate chain. + + )} + + ) diff --git a/src/hooks/useChainsConfig.ts b/src/hooks/useChainsConfig.ts index b522619af0..a44c41bf7f 100644 --- a/src/hooks/useChainsConfig.ts +++ b/src/hooks/useChainsConfig.ts @@ -18,7 +18,9 @@ export type ChainStateMap = { [chain in ChainId]: ChainState } const defaultData = MAINNET_NETWORKS.map(chainId => NETWORKS_INFO[chainId]) export default function useChainsConfig() { const { data } = useGetChainsConfigurationQuery() + console.log('🚀 ~ file: useChainsConfig.ts:21 ~ useChainsConfig ~ data:', data) const globalConfig = useKyberswapGlobalConfig() + console.log('🚀 ~ file: useChainsConfig.ts:23 ~ useChainsConfig ~ globalConfig:', globalConfig) return useMemo(() => { const hasConfig = !!data From c46a75203a52ed981319386d721bba45400ef6cc Mon Sep 17 00:00:00 2001 From: XiaoYhun Date: Mon, 16 Oct 2023 16:07:40 +0700 Subject: [PATCH 02/13] update favorite chains UI --- .github/workflows/pr.yaml | 2 +- .../NetworkModal/DraggableNetworkButton.tsx | 298 ++++++++++++++++++ .../Header/web3/NetworkModal/Networks.tsx | 242 -------------- .../Header/web3/NetworkModal/index.tsx | 215 ++++++++++++- src/hooks/useChainsConfig.ts | 2 - .../components/TokenFilter/index.tsx | 4 +- .../TrueSightV2/components/TokenOverview.tsx | 8 +- src/services/identity.ts | 5 +- src/state/authen/reducer.ts | 2 +- 9 files changed, 508 insertions(+), 270 deletions(-) create mode 100644 src/components/Header/web3/NetworkModal/DraggableNetworkButton.tsx delete mode 100644 src/components/Header/web3/NetworkModal/Networks.tsx diff --git a/.github/workflows/pr.yaml b/.github/workflows/pr.yaml index 0f80ebb7bd..e621c974f4 100644 --- a/.github/workflows/pr.yaml +++ b/.github/workflows/pr.yaml @@ -114,7 +114,7 @@ jobs: VITE_TAG: ${{ needs.prepare.outputs.image_tag }} CURRENT_BRANCH: ${{ needs.prepare.outputs.current_branch }} NODE_OPTIONS: '--max_old_space_size=4096' - run: yarn build + run: yarn build-dev - name: Docker build and push uses: docker/build-push-action@v2 diff --git a/src/components/Header/web3/NetworkModal/DraggableNetworkButton.tsx b/src/components/Header/web3/NetworkModal/DraggableNetworkButton.tsx new file mode 100644 index 0000000000..636c7d58de --- /dev/null +++ b/src/components/Header/web3/NetworkModal/DraggableNetworkButton.tsx @@ -0,0 +1,298 @@ +import { ChainId, getChainType } from '@kyberswap/ks-sdk-core' +import { Trans, t } from '@lingui/macro' +import { motion, useAnimationControls, useDragControls } from 'framer-motion' +import { rgba } from 'polished' +import { stringify } from 'querystring' +import { MutableRefObject } from 'react' +import { isMobile } from 'react-device-detect' +import { Minus, Plus } from 'react-feather' +import { useNavigate } from 'react-router-dom' +import { Text } from 'rebass' +import styled, { css } from 'styled-components' + +import Icon from 'components/Icons/Icon' +import { MouseoverTooltip } from 'components/Tooltip' +import { NetworkInfo } from 'constants/networks/type' +import { Z_INDEXS } from 'constants/styles' +import { SUPPORTED_WALLETS } from 'constants/wallets' +import { useActiveWeb3React } from 'hooks' +import { ChainState } from 'hooks/useChainsConfig' +import useParsedQueryString from 'hooks/useParsedQueryString' +import useTheme from 'hooks/useTheme' +import { useChangeNetwork } from 'hooks/web3/useChangeNetwork' + +const NewLabel = styled.span` + font-size: 12px; + color: ${({ theme }) => theme.red}; + margin-left: 2px; + margin-top: -10px; +` + +const MaintainLabel = styled.span` + font-size: 8px; + color: ${({ theme }) => theme.red}; + margin-left: 2px; + margin-top: -10px; +` + +const ListItem = styled(motion.div)<{ selected?: boolean; $disabled?: boolean }>` + width: 100%; + display: flex; + justify-content: center; + align-items: center; + padding: 10px 8px; + border-radius: 999px; + overflow: hidden; + white-space: nowrap; + font-size: 14px; + height: 36px; + color: ${({ theme }) => theme.primary}; + background-color: ${({ theme }) => theme.tableHeader}; + user-select: none; + cursor: pointer; + gap: 6px; + .drag-button { + opacity: 0; + display: none; + } + :hover .drag-button { + opacity: 1; + display: block; + } + + ${({ theme, selected }) => + selected && + css` + background-color: ${theme.buttonBlack}; + & > div { + color: ${theme.text}; + } + `} + ${({ theme }) => theme.mediaWidth.upToSmall` + font-size: 12px; + `}; + + ${({ $disabled }) => + $disabled && + css` + opacity: 0.5 !important; + cursor: not-allowed; + `} +` + +const CircleGreen = styled.div` + height: 16px; + width: 16px; + background-color: ${({ theme }) => theme.primary}; + background-clip: content-box; + border: solid 2px ${({ theme }) => rgba(theme.primary, 0.3)}; + border-radius: 8px; + margin-left: auto; +` +const WalletWrapper = styled.div` + height: 18px; + width: 18px; + margin-left: auto; + margin-right: 4px; + > img { + height: 18px; + width: 18px; + } +` + +export default function DraggableNetworkButton({ + droppableRefs, + networkInfo, + activeChainIds, + selectedId, + disabledMsg, + isEdittingMobile, + isAddButton, + customToggleModal, + customOnSelectNetwork, + onChangedNetwork, + onDrop, + onFavoriteClick, +}: { + droppableRefs: MutableRefObject + networkInfo: NetworkInfo + activeChainIds?: ChainId[] + selectedId?: ChainId + disabledMsg?: string + isEdittingMobile?: boolean + isAddButton?: boolean + customToggleModal?: () => void + customOnSelectNetwork?: (chainId: ChainId) => void + onChangedNetwork?: () => void + onDrop?: (dropIndex: string) => void + onFavoriteClick?: () => void +}) { + const theme = useTheme() + const { isWrongNetwork, walletSolana, walletEVM } = useActiveWeb3React() + const { changeNetwork } = useChangeNetwork() + const qs = useParsedQueryString() + const navigate = useNavigate() + const dragControls = useDragControls() + const animateControls = useAnimationControls() + const { state, icon, chainId, name } = networkInfo + const isMaintenance = state === ChainState.MAINTENANCE + const disabled = (activeChainIds ? !activeChainIds?.includes(chainId) : false) || isMaintenance + const selected = selectedId === chainId && !isWrongNetwork + const walletKey = + chainId === ChainId.SOLANA ? walletSolana.walletKey : walletEVM.chainId === chainId ? walletEVM.walletKey : null + + const handleChainSelect = () => { + if (disabled) return + customToggleModal?.() + if (customOnSelectNetwork) { + customOnSelectNetwork(chainId) + } else if (getChainType(chainId) === getChainType(chainId)) { + changeNetwork(chainId, () => { + const { inputCurrency, outputCurrency, ...rest } = qs + navigate( + { + search: stringify(rest), + }, + { replace: true }, + ) + onChangedNetwork?.() + }) + } else { + changeNetwork(chainId, () => { + navigate( + { + search: '', + }, + { replace: true }, + ) + onChangedNetwork?.() + }) + } + } + + const variants = { + dragging: { + boxShadow: '0 5px 10px #00000060', + filter: 'brightness(0.8)', + scale: 1.05, + zIndex: 2, + }, + normal: { + boxShadow: '0 0px 0px #00000060', + filter: 'brightness(1)', + scale: 1, + zIndex: 'unset', + }, + } + + const handleDragStart = () => { + animateControls.start('dragging') + } + const handleDragEnd = (e: any) => { + animateControls.start('normal') + + const eventTarget = e.target as HTMLDivElement + + if (!eventTarget) return + + const droppedElPosition = [ + eventTarget.getBoundingClientRect().left + eventTarget.getBoundingClientRect().width / 2, + eventTarget.getBoundingClientRect().top + eventTarget.getBoundingClientRect().height / 2, + ] + + const currentEl: HTMLDivElement | undefined = droppableRefs.current?.find((el: HTMLDivElement) => { + const { left, top, right, bottom } = el.getBoundingClientRect() + return ( + left < droppedElPosition[0] && + top < droppedElPosition[1] && + right > droppedElPosition[0] && + bottom > droppedElPosition[1] + ) + }) + if (currentEl) { + onDrop?.(currentEl.id) + } + } + + return ( + + !selected && handleChainSelect()} + $disabled={disabled} + > + Switch Network + + {name} + + {state === ChainState.NEW && ( + + New + + )} + {isMaintenance && ( + + Maintainance + + )} + {selected && !walletKey && } + {walletKey && ( + + {SUPPORTED_WALLETS[walletKey].name + + )} + {isMobile ? ( + isEdittingMobile && ( +
{ + e.stopPropagation() + onFavoriteClick?.() + }} + > + {isAddButton ? : } +
+ ) + ) : ( +
{ + dragControls.start(e) + e.stopPropagation() + }} + onClick={e => e.stopPropagation()} + > + +
+ )} + + + ) +} diff --git a/src/components/Header/web3/NetworkModal/Networks.tsx b/src/components/Header/web3/NetworkModal/Networks.tsx deleted file mode 100644 index 35d628cc94..0000000000 --- a/src/components/Header/web3/NetworkModal/Networks.tsx +++ /dev/null @@ -1,242 +0,0 @@ -import { ChainId, getChainType } from '@kyberswap/ks-sdk-core' -import { Trans, t } from '@lingui/macro' -import { darken, rgba } from 'polished' -import { stringify } from 'querystring' -import React from 'react' -import { useNavigate } from 'react-router-dom' -import { Flex, Text } from 'rebass' -import styled, { css } from 'styled-components' - -import { ButtonEmpty } from 'components/Button' -import { MouseoverTooltip } from 'components/Tooltip' -import { NetworkInfo } from 'constants/networks/type' -import { Z_INDEXS } from 'constants/styles' -import { SUPPORTED_WALLETS } from 'constants/wallets' -import { useActiveWeb3React } from 'hooks' -import useChainsConfig, { ChainState } from 'hooks/useChainsConfig' -import useParsedQueryString from 'hooks/useParsedQueryString' -import useTheme from 'hooks/useTheme' -import { useChangeNetwork } from 'hooks/web3/useChangeNetwork' - -const NewLabel = styled.span` - font-size: 12px; - color: ${({ theme }) => theme.red}; - margin-left: 2px; - margin-top: -10px; -` - -const MaintainLabel = styled.span` - font-size: 8px; - color: ${({ theme }) => theme.red}; - margin-left: 2px; - margin-top: -10px; -` - -const ListItem = styled.div<{ selected?: boolean }>` - width: 100%; - display: flex; - justify-content: flex-start; - align-items: center; - padding: 10px 8px; - border-radius: 999px; - overflow: hidden; - white-space: nowrap; - font-size: 14px; - height: 36px; - ${({ theme, selected }) => - selected && - css` - background-color: ${theme.buttonBlack}; - & > div { - color: ${theme.text}; - } - `} - - ${({ theme }) => theme.mediaWidth.upToSmall` - font-size: 12px; - `} -` - -const SelectNetworkButton = styled(ButtonEmpty)<{ disabled: boolean }>` - color: ${({ theme }) => theme.primary}; - background-color: ${({ theme }) => theme.tableHeader}; - display: flex; - justify-content: center; - align-items: center; - height: fit-content; - text-decoration: none; - transition: all 0.1s ease; - &:hover { - background-color: ${({ theme }) => darken(0.1, theme.tableHeader)}; - color: ${({ theme }) => theme.text} !important; - } - &:disabled { - opacity: 50%; - cursor: not-allowed; - &:hover { - border: 1px solid transparent; - } - } -` -const gap = '1rem' -const NetworkList = styled.div` - display: flex; - align-items: center; - gap: ${gap}; - flex-wrap: wrap; - width: 100%; - & > * { - width: calc(33.33% - ${gap} * 2 / 3); - } - ${({ theme }) => theme.mediaWidth.upToSmall` - & > * { - width: calc(50% - ${gap} / 2); - } - `} -` - -const CircleGreen = styled.div` - height: 16px; - width: 16px; - background-color: ${({ theme }) => theme.primary}; - background-clip: content-box; - border: solid 2px ${({ theme }) => rgba(theme.primary, 0.3)}; - border-radius: 8px; - margin-left: auto; -` -const WalletWrapper = styled.div` - height: 18px; - width: 18px; - margin-left: auto; - margin-right: 4px; - > img { - height: 18px; - width: 18px; - } -` - -const Networks = ({ - onChangedNetwork, - isAcceptedTerm = true, - activeChainIds, - selectedId, - customOnSelectNetwork, - customToggleModal, - disabledMsg, -}: { - onChangedNetwork?: () => void - isAcceptedTerm?: boolean - activeChainIds?: ChainId[] - selectedId?: ChainId - customOnSelectNetwork?: (chainId: ChainId) => void - customToggleModal?: () => void - disabledMsg?: string -}) => { - const { chainId: currentChainId, isWrongNetwork, walletEVM, walletSolana } = useActiveWeb3React() - const { changeNetwork } = useChangeNetwork() - const qs = useParsedQueryString() - const navigate = useNavigate() - const theme = useTheme() - const onSelect = (chainId: ChainId) => { - customToggleModal?.() - if (customOnSelectNetwork) { - customOnSelectNetwork(chainId) - } else if (getChainType(currentChainId) === getChainType(chainId)) { - changeNetwork(chainId, () => { - const { inputCurrency, outputCurrency, ...rest } = qs - navigate( - { - search: stringify(rest), - }, - { replace: true }, - ) - onChangedNetwork?.() - }) - } else { - changeNetwork(chainId, () => { - navigate( - { - search: '', - }, - { replace: true }, - ) - onChangedNetwork?.() - }) - } - } - - const { supportedChains } = useChainsConfig() - - return ( - - {supportedChains.map(({ chainId: itemChainId, icon, name, state }: NetworkInfo, i: number) => { - const isMaintenance = state === ChainState.MAINTENANCE - const disabled = - !isAcceptedTerm || (activeChainIds ? !activeChainIds?.includes(itemChainId) : false) || isMaintenance - const selected = selectedId === itemChainId && !isWrongNetwork - - const imgSrc = icon - const walletKey = - itemChainId === ChainId.SOLANA - ? walletSolana.walletKey - : walletEVM.chainId === itemChainId - ? walletEVM.walletKey - : null - return ( - - !selected && onSelect(itemChainId)} - data-testid="network-button" - disabled={disabled} - > - - Switch Network - - - {name} - - - {state === ChainState.NEW && ( - - New - - )} - {isMaintenance && ( - - Maintainance - - )} - {selected && !walletKey && } - {walletKey && ( - - {SUPPORTED_WALLETS[walletKey].name - - )} - - - - ) - })} - - ) -} - -export default React.memo(Networks) diff --git a/src/components/Header/web3/NetworkModal/index.tsx b/src/components/Header/web3/NetworkModal/index.tsx index 979539d548..4ecb477514 100644 --- a/src/components/Header/web3/NetworkModal/index.tsx +++ b/src/components/Header/web3/NetworkModal/index.tsx @@ -1,26 +1,68 @@ import { ChainId } from '@kyberswap/ks-sdk-core' import { Trans } from '@lingui/macro' -import { X } from 'react-feather' -import { Text } from 'rebass' +import { LegacyRef, ReactNode, forwardRef, useEffect, useRef, useState } from 'react' +import { isMobile } from 'react-device-detect' +import { Save, X } from 'react-feather' +import { Button, Text } from 'rebass' +import { useUpdateProfileMutation } from 'services/identity' import styled from 'styled-components' import { ButtonAction } from 'components/Button' import Column from 'components/Column' import Modal from 'components/Modal' -import Row, { RowBetween } from 'components/Row' +import Row, { RowBetween, RowFit } from 'components/Row' +import { NetworkInfo } from 'constants/networks/type' import { Z_INDEXS } from 'constants/styles' import { useActiveWeb3React } from 'hooks' +import useChainsConfig from 'hooks/useChainsConfig' import useTheme from 'hooks/useTheme' import { ApplicationModal } from 'state/application/actions' import { useModalOpen, useNetworkModalToggle } from 'state/application/hooks' +import { useSessionInfo } from 'state/authen/hooks' import { TYPE } from 'theme' -import Networks from './Networks' +import DraggableNetworkButton from './DraggableNetworkButton' const Wrapper = styled.div` width: 100%; padding: 20px; ` +const gap = isMobile ? '8px' : '16px' + +const NetworkList = styled.div` + display: flex; + align-items: center; + column-gap: ${gap}; + row-gap: 4px; + flex-wrap: wrap; + width: 100%; + & > * { + width: calc(50% - ${gap} / 2); + } +` + +const DropableZone = forwardRef(function DropableZone( + { id, children }: { id: string; children: ReactNode }, + ref: LegacyRef, +) { + const [isDraggingOver, setIsDraggingOver] = useState(false) + return ( +
setIsDraggingOver(true)} + style={ + isDraggingOver + ? { + backgroundColor: 'red', + } + : {} //todo + } + id={id} + > + {children} +
+ ) +}) export default function NetworkModal({ activeChainIds, @@ -39,15 +81,63 @@ export default function NetworkModal({ }): JSX.Element | null { const theme = useTheme() const { isWrongNetwork } = useActiveWeb3React() + const [requestSaveProfile] = useUpdateProfileMutation() + const { userInfo } = useSessionInfo() + + const [favoriteChains, setFavoriteChains] = useState(userInfo?.data?.favouriteChainIds || []) + const [isEdittingMobile, setIsEdittingMobile] = useState(false) + const networkModalOpen = useModalOpen(ApplicationModal.NETWORK) const toggleNetworkModalGlobal = useNetworkModalToggle() const toggleNetworkModal = customToggleModal || toggleNetworkModalGlobal + + const droppableRefs = useRef([]) + const { supportedChains } = useChainsConfig() + + const handleDrop = (chainId: string, dropId: string) => { + if (dropId === 'favorite-dropzone') { + const chainInfo = supportedChains.find(item => item.chainId.toString() === chainId) + if (chainInfo && !favoriteChains.includes(chainInfo)) { + saveFavoriteChains([...favoriteChains, chainInfo.chainId.toString()]) + } + } + if (dropId === 'chains-dropzone') { + if (favoriteChains.some(fChainId => fChainId === chainId)) { + saveFavoriteChains([...favoriteChains.filter(fChainId => fChainId !== chainId)]) + } + } + } + + const handleFavoriteChangeMobile = (chainId: string, isAdding: boolean) => { + if (isAdding) { + const chainInfo = supportedChains.find(item => item.chainId.toString() === chainId) + if (chainInfo && !favoriteChains.includes(chainInfo)) { + saveFavoriteChains([...favoriteChains, chainInfo.chainId.toString()]) + } + } else { + if (favoriteChains.some(fChainId => fChainId === chainId)) { + saveFavoriteChains([...favoriteChains.filter(fChainId => fChainId !== chainId)]) + } + } + } + + const saveFavoriteChains = (chains: string[]) => { + const uniqueArray = Array.from(new Set(chains)) + requestSaveProfile({ data: { favouriteChainIds: uniqueArray } }) + setFavoriteChains(uniqueArray) + } + + useEffect(() => { + setFavoriteChains(userInfo?.data?.favouriteChainIds || []) + }, [userInfo]) + return ( @@ -58,18 +148,85 @@ export default function NetworkModal({ + Favorite Chain(s)
+ {isMobile && + (isEdittingMobile ? ( + + ) : ( + + ))} - - - Drag your favourite chain(s) here - - + { + if (ref) { + droppableRefs.current[0] = ref + } + }} + id="favorite-dropzone" + > + {favoriteChains.length === 0 ? ( + + + Drag your favourite chain(s) here + + + ) : ( + + {supportedChains + .filter(chain => favoriteChains.some(i => i === chain.chainId.toString())) + .map((networkInfo: NetworkInfo) => { + return ( + { + handleDrop(networkInfo.chainId.toString(), dropId) + }} + customToggleModal={customToggleModal} + customOnSelectNetwork={customOnSelectNetwork} + onChangedNetwork={toggleNetworkModal} + isEdittingMobile={isEdittingMobile} + onFavoriteClick={() => handleFavoriteChangeMobile(networkInfo.chainId.toString(), false)} + /> + ) + })} + + )} + + Chain List @@ -81,14 +238,38 @@ export default function NetworkModal({ Please connect to the appropriate chain. )} - + { + if (ref) { + droppableRefs.current[1] = ref + } + }} + id="chains-dropzone" + > + {supportedChains + .filter(chain => !favoriteChains.some(i => i === chain.chainId.toString())) + .map((networkInfo: NetworkInfo) => { + return ( + { + handleDrop(networkInfo.chainId.toString(), dropId) + }} + customToggleModal={customToggleModal} + customOnSelectNetwork={customOnSelectNetwork} + onChangedNetwork={toggleNetworkModal} + isEdittingMobile={isEdittingMobile} + onFavoriteClick={() => handleFavoriteChangeMobile(networkInfo.chainId.toString(), true)} + /> + ) + })} + diff --git a/src/hooks/useChainsConfig.ts b/src/hooks/useChainsConfig.ts index a44c41bf7f..b522619af0 100644 --- a/src/hooks/useChainsConfig.ts +++ b/src/hooks/useChainsConfig.ts @@ -18,9 +18,7 @@ export type ChainStateMap = { [chain in ChainId]: ChainState } const defaultData = MAINNET_NETWORKS.map(chainId => NETWORKS_INFO[chainId]) export default function useChainsConfig() { const { data } = useGetChainsConfigurationQuery() - console.log('🚀 ~ file: useChainsConfig.ts:21 ~ useChainsConfig ~ data:', data) const globalConfig = useKyberswapGlobalConfig() - console.log('🚀 ~ file: useChainsConfig.ts:23 ~ useChainsConfig ~ globalConfig:', globalConfig) return useMemo(() => { const hasConfig = !!data diff --git a/src/pages/TrueSightV2/components/TokenFilter/index.tsx b/src/pages/TrueSightV2/components/TokenFilter/index.tsx index 32e8884f21..7b46915f75 100644 --- a/src/pages/TrueSightV2/components/TokenFilter/index.tsx +++ b/src/pages/TrueSightV2/components/TokenFilter/index.tsx @@ -246,9 +246,9 @@ export default function TokenFilter({ } + activeRender={(item: any) => } options={values} - onChange={value => onChangeFilter(queryKey, value)} + onChange={(value: any) => onChangeFilter(queryKey, value)} optionStyle={{ fontSize: '14px' }} menuStyle={menuStyle} /> diff --git a/src/pages/TrueSightV2/components/TokenOverview.tsx b/src/pages/TrueSightV2/components/TokenOverview.tsx index c8ac42b461..3b4d9cd9ba 100644 --- a/src/pages/TrueSightV2/components/TokenOverview.tsx +++ b/src/pages/TrueSightV2/components/TokenOverview.tsx @@ -204,7 +204,7 @@ export const TokenOverview = ({ data, isLoading }: { data?: IAssetOverview; isLo ({ + updateProfile: builder.mutation< + any, + { nickname?: string; avatarURL?: string; data?: { favouriteChainIds: string[] } } + >({ query: body => ({ url: `/v1/profile/me`, body, diff --git a/src/state/authen/reducer.ts b/src/state/authen/reducer.ts index 7310fcf4f4..74640b4899 100644 --- a/src/state/authen/reducer.ts +++ b/src/state/authen/reducer.ts @@ -6,7 +6,7 @@ export type UserProfile = { telegramUsername: string nickname: string avatarUrl: string - data: { hasAccessToKyberAI: boolean } + data: { hasAccessToKyberAI: boolean; favouriteChainIds?: string[] } } export type ConfirmProfile = { showModal: boolean From 0c88d180a20b488bd6c683bdc2e1e3db68d54640 Mon Sep 17 00:00:00 2001 From: XiaoYhun Date: Tue, 17 Oct 2023 10:17:15 +0700 Subject: [PATCH 03/13] fix same chain name issue --- .../Header/web3/NetworkModal/DraggableNetworkButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Header/web3/NetworkModal/DraggableNetworkButton.tsx b/src/components/Header/web3/NetworkModal/DraggableNetworkButton.tsx index 636c7d58de..7ebb58305d 100644 --- a/src/components/Header/web3/NetworkModal/DraggableNetworkButton.tsx +++ b/src/components/Header/web3/NetworkModal/DraggableNetworkButton.tsx @@ -240,7 +240,7 @@ export default function DraggableNetworkButton({ dragTransition={{ bounceStiffness: 500 }} onDragStart={handleDragStart} onDragEnd={handleDragEnd} - layoutId={networkInfo.route} + layoutId={networkInfo.chainId.toString() + networkInfo.route} selected={selected} animate={animateControls} variants={variants} From 716235e353c32487905ce4a46b673e51868e550e Mon Sep 17 00:00:00 2001 From: XiaoYhun Date: Tue, 17 Oct 2023 11:59:35 +0700 Subject: [PATCH 04/13] some improvements --- .../NetworkModal/DraggableNetworkButton.tsx | 86 +++++++++++-------- src/components/Tooltip/index.tsx | 12 ++- 2 files changed, 63 insertions(+), 35 deletions(-) diff --git a/src/components/Header/web3/NetworkModal/DraggableNetworkButton.tsx b/src/components/Header/web3/NetworkModal/DraggableNetworkButton.tsx index 7ebb58305d..63a1cce273 100644 --- a/src/components/Header/web3/NetworkModal/DraggableNetworkButton.tsx +++ b/src/components/Header/web3/NetworkModal/DraggableNetworkButton.tsx @@ -3,7 +3,7 @@ import { Trans, t } from '@lingui/macro' import { motion, useAnimationControls, useDragControls } from 'framer-motion' import { rgba } from 'polished' import { stringify } from 'querystring' -import { MutableRefObject } from 'react' +import { MutableRefObject, useState } from 'react' import { isMobile } from 'react-device-detect' import { Minus, Plus } from 'react-feather' import { useNavigate } from 'react-router-dom' @@ -11,6 +11,7 @@ import { Text } from 'rebass' import styled, { css } from 'styled-components' import Icon from 'components/Icons/Icon' +import Row from 'components/Row' import { MouseoverTooltip } from 'components/Tooltip' import { NetworkInfo } from 'constants/networks/type' import { Z_INDEXS } from 'constants/styles' @@ -35,7 +36,7 @@ const MaintainLabel = styled.span` margin-top: -10px; ` -const ListItem = styled(motion.div)<{ selected?: boolean; $disabled?: boolean }>` +const ListItem = styled(motion.div)<{ selected?: boolean; $disabled?: boolean; $dragging?: boolean }>` width: 100%; display: flex; justify-content: center; @@ -46,11 +47,12 @@ const ListItem = styled(motion.div)<{ selected?: boolean; $disabled?: boolean }> white-space: nowrap; font-size: 14px; height: 36px; - color: ${({ theme }) => theme.primary}; + color: ${({ theme }) => theme.subText}; background-color: ${({ theme }) => theme.tableHeader}; user-select: none; cursor: pointer; gap: 6px; + transition: background-color 0.2s ease; .drag-button { opacity: 0; display: none; @@ -61,23 +63,29 @@ const ListItem = styled(motion.div)<{ selected?: boolean; $disabled?: boolean }> } ${({ theme, selected }) => - selected && - css` - background-color: ${theme.buttonBlack}; - & > div { - color: ${theme.text}; - } - `} - ${({ theme }) => theme.mediaWidth.upToSmall` - font-size: 12px; - `}; + selected + ? css` + background-color: ${theme.buttonBlack}; + & > div { + color: ${theme.text}; + } + ` + : css` + :hover { + background-color: ${theme.background}; + } + `} ${({ $disabled }) => $disabled && css` - opacity: 0.5 !important; cursor: not-allowed; + color: ${({ theme }) => theme.subText + '72'}; `} + + ${({ theme }) => theme.mediaWidth.upToSmall` + font-size: 12px; + `}; ` const CircleGreen = styled.div` @@ -132,6 +140,7 @@ export default function DraggableNetworkButton({ const { changeNetwork } = useChangeNetwork() const qs = useParsedQueryString() const navigate = useNavigate() + const [isDragging, setIsDragging] = useState(false) const dragControls = useDragControls() const animateControls = useAnimationControls() const { state, icon, chainId, name } = networkInfo @@ -187,6 +196,7 @@ export default function DraggableNetworkButton({ const handleDragStart = () => { animateControls.start('dragging') + setIsDragging(true) } const handleDragEnd = (e: any) => { animateControls.start('normal') @@ -219,7 +229,11 @@ export default function DraggableNetworkButton({ style={{ zIndex: Z_INDEXS.MODAL + 1 }} key={networkInfo.chainId} text={ - disabled ? (isMaintenance ? t`Chain under maintenance. We will be back as soon as possible` : disabledMsg) : '' + disabled && !isDragging + ? isMaintenance + ? t`Chain under maintenance. We will be back as soon as possible` + : disabledMsg + : '' } width="fit-content" placement="top" @@ -240,6 +254,8 @@ export default function DraggableNetworkButton({ dragTransition={{ bounceStiffness: 500 }} onDragStart={handleDragStart} onDragEnd={handleDragEnd} + onLayoutAnimationStart={() => setIsDragging(true)} + onLayoutAnimationComplete={() => setIsDragging(false)} layoutId={networkInfo.chainId.toString() + networkInfo.route} selected={selected} animate={animateControls} @@ -248,25 +264,27 @@ export default function DraggableNetworkButton({ $disabled={disabled} > Switch Network - - {name} - - {state === ChainState.NEW && ( - - New - - )} - {isMaintenance && ( - - Maintainance - - )} - {selected && !walletKey && } - {walletKey && ( - - {SUPPORTED_WALLETS[walletKey].name - - )} + + + {name} + + {state === ChainState.NEW && ( + + New + + )} + {isMaintenance && ( + + Maintainance + + )} + {selected && !walletKey && } + {walletKey && ( + + {SUPPORTED_WALLETS[walletKey].name + + )} + {isMobile ? ( isEdittingMobile && (
{ children?: React.ReactNode } -export default function Tooltip({ text, width, maxWidth, size, onMouseEnter, onMouseLeave, ...rest }: TooltipProps) { +export default function Tooltip({ + text, + width, + maxWidth, + size, + onMouseEnter, + onMouseLeave, + show, + ...rest +}: TooltipProps) { return ( ) : null } + show={!!text && show} {...rest} /> ) From 142552aa95ef5115522e3206424954520ca61028 Mon Sep 17 00:00:00 2001 From: XiaoYhun Date: Tue, 17 Oct 2023 12:12:25 +0700 Subject: [PATCH 05/13] refactor code --- .../NetworkModal/DraggableNetworkButton.tsx | 6 +- .../Header/web3/NetworkModal/index.tsx | 73 ++++++++----------- 2 files changed, 35 insertions(+), 44 deletions(-) diff --git a/src/components/Header/web3/NetworkModal/DraggableNetworkButton.tsx b/src/components/Header/web3/NetworkModal/DraggableNetworkButton.tsx index 63a1cce273..2ad0588589 100644 --- a/src/components/Header/web3/NetworkModal/DraggableNetworkButton.tsx +++ b/src/components/Header/web3/NetworkModal/DraggableNetworkButton.tsx @@ -112,7 +112,7 @@ export default function DraggableNetworkButton({ droppableRefs, networkInfo, activeChainIds, - selectedId, + isSelected, disabledMsg, isEdittingMobile, isAddButton, @@ -125,7 +125,7 @@ export default function DraggableNetworkButton({ droppableRefs: MutableRefObject networkInfo: NetworkInfo activeChainIds?: ChainId[] - selectedId?: ChainId + isSelected?: boolean disabledMsg?: string isEdittingMobile?: boolean isAddButton?: boolean @@ -146,7 +146,7 @@ export default function DraggableNetworkButton({ const { state, icon, chainId, name } = networkInfo const isMaintenance = state === ChainState.MAINTENANCE const disabled = (activeChainIds ? !activeChainIds?.includes(chainId) : false) || isMaintenance - const selected = selectedId === chainId && !isWrongNetwork + const selected = isSelected && !isWrongNetwork const walletKey = chainId === ChainId.SOLANA ? walletSolana.walletKey : walletEVM.chainId === chainId ? walletEVM.walletKey : null diff --git a/src/components/Header/web3/NetworkModal/index.tsx b/src/components/Header/web3/NetworkModal/index.tsx index 4ecb477514..36a14aa74a 100644 --- a/src/components/Header/web3/NetworkModal/index.tsx +++ b/src/components/Header/web3/NetworkModal/index.tsx @@ -64,6 +64,9 @@ const DropableZone = forwardRef(function DropableZone( ) }) +const FAVORITE_DROPZONE_ID = 'favorite-dropzone' +const CHAINS_DROPZONE_ID = 'chains-dropzone' + export default function NetworkModal({ activeChainIds, selectedId, @@ -95,13 +98,13 @@ export default function NetworkModal({ const { supportedChains } = useChainsConfig() const handleDrop = (chainId: string, dropId: string) => { - if (dropId === 'favorite-dropzone') { + if (dropId === FAVORITE_DROPZONE_ID) { const chainInfo = supportedChains.find(item => item.chainId.toString() === chainId) if (chainInfo && !favoriteChains.includes(chainInfo)) { saveFavoriteChains([...favoriteChains, chainInfo.chainId.toString()]) } } - if (dropId === 'chains-dropzone') { + if (dropId === CHAINS_DROPZONE_ID) { if (favoriteChains.some(fChainId => fChainId === chainId)) { saveFavoriteChains([...favoriteChains.filter(fChainId => fChainId !== chainId)]) } @@ -127,6 +130,29 @@ export default function NetworkModal({ setFavoriteChains(uniqueArray) } + const renderNetworkButton = (networkInfo: NetworkInfo, isAdding: boolean) => { + return ( + { + handleDrop(networkInfo.chainId.toString(), dropId) + }} + customToggleModal={customToggleModal} + customOnSelectNetwork={customOnSelectNetwork} + onChangedNetwork={toggleNetworkModal} + // Mobile only props + isAddButton={isAdding} + isEdittingMobile={isEdittingMobile} + onFavoriteClick={() => handleFavoriteChangeMobile(networkInfo.chainId.toString(), isAdding)} + /> + ) + } + useEffect(() => { setFavoriteChains(userInfo?.data?.favouriteChainIds || []) }, [userInfo]) @@ -191,7 +217,7 @@ export default function NetworkModal({ droppableRefs.current[0] = ref } }} - id="favorite-dropzone" + id={FAVORITE_DROPZONE_ID} > {favoriteChains.length === 0 ? ( @@ -204,24 +230,7 @@ export default function NetworkModal({ {supportedChains .filter(chain => favoriteChains.some(i => i === chain.chainId.toString())) .map((networkInfo: NetworkInfo) => { - return ( - { - handleDrop(networkInfo.chainId.toString(), dropId) - }} - customToggleModal={customToggleModal} - customOnSelectNetwork={customOnSelectNetwork} - onChangedNetwork={toggleNetworkModal} - isEdittingMobile={isEdittingMobile} - onFavoriteClick={() => handleFavoriteChangeMobile(networkInfo.chainId.toString(), false)} - /> - ) + return renderNetworkButton(networkInfo, false) })} )} @@ -244,30 +253,12 @@ export default function NetworkModal({ droppableRefs.current[1] = ref } }} - id="chains-dropzone" + id={CHAINS_DROPZONE_ID} > {supportedChains .filter(chain => !favoriteChains.some(i => i === chain.chainId.toString())) .map((networkInfo: NetworkInfo) => { - return ( - { - handleDrop(networkInfo.chainId.toString(), dropId) - }} - customToggleModal={customToggleModal} - customOnSelectNetwork={customOnSelectNetwork} - onChangedNetwork={toggleNetworkModal} - isEdittingMobile={isEdittingMobile} - onFavoriteClick={() => handleFavoriteChangeMobile(networkInfo.chainId.toString(), true)} - /> - ) + return renderNetworkButton(networkInfo, true) })} From 33b5337d0591037942a7a3decee5b102f3df0b00 Mon Sep 17 00:00:00 2001 From: XiaoYhun Date: Wed, 18 Oct 2023 15:47:27 +0700 Subject: [PATCH 06/13] improve animation --- .../NetworkModal/DraggableNetworkButton.tsx | 20 +++++++++---------- .../Header/web3/NetworkModal/index.tsx | 4 +++- 2 files changed, 13 insertions(+), 11 deletions(-) diff --git a/src/components/Header/web3/NetworkModal/DraggableNetworkButton.tsx b/src/components/Header/web3/NetworkModal/DraggableNetworkButton.tsx index 2ad0588589..6d4e806859 100644 --- a/src/components/Header/web3/NetworkModal/DraggableNetworkButton.tsx +++ b/src/components/Header/web3/NetworkModal/DraggableNetworkButton.tsx @@ -3,7 +3,7 @@ import { Trans, t } from '@lingui/macro' import { motion, useAnimationControls, useDragControls } from 'framer-motion' import { rgba } from 'polished' import { stringify } from 'querystring' -import { MutableRefObject, useState } from 'react' +import { MutableRefObject, RefObject, useState } from 'react' import { isMobile } from 'react-device-detect' import { Minus, Plus } from 'react-feather' import { useNavigate } from 'react-router-dom' @@ -116,6 +116,7 @@ export default function DraggableNetworkButton({ disabledMsg, isEdittingMobile, isAddButton, + dragConstraints, customToggleModal, customOnSelectNetwork, onChangedNetwork, @@ -129,6 +130,7 @@ export default function DraggableNetworkButton({ disabledMsg?: string isEdittingMobile?: boolean isAddButton?: boolean + dragConstraints?: RefObject customToggleModal?: () => void customOnSelectNetwork?: (chainId: ChainId) => void onChangedNetwork?: () => void @@ -191,6 +193,8 @@ export default function DraggableNetworkButton({ filter: 'brightness(1)', scale: 1, zIndex: 'unset', + x: 0, + y: 0, }, } @@ -243,14 +247,8 @@ export default function DraggableNetworkButton({ dragListener={false} dragMomentum={false} dragControls={dragControls} - dragSnapToOrigin - dragConstraints={{ - left: 0, - top: 0, - right: 0, - bottom: 0, - }} - dragElastic={1} + dragConstraints={dragConstraints} + dragElastic={0} dragTransition={{ bounceStiffness: 500 }} onDragStart={handleDragStart} onDragEnd={handleDragEnd} @@ -259,8 +257,10 @@ export default function DraggableNetworkButton({ layoutId={networkInfo.chainId.toString() + networkInfo.route} selected={selected} animate={animateControls} + transition={{ type: 'spring', damping: 50, stiffness: 1000 }} variants={variants} - onClick={() => !selected && handleChainSelect()} + style={{ boxShadow: '0 0px 0px #00000060' }} + onClick={() => !selected && !isDragging && handleChainSelect()} $disabled={disabled} > Switch Network diff --git a/src/components/Header/web3/NetworkModal/index.tsx b/src/components/Header/web3/NetworkModal/index.tsx index 36a14aa74a..991042b4fc 100644 --- a/src/components/Header/web3/NetworkModal/index.tsx +++ b/src/components/Header/web3/NetworkModal/index.tsx @@ -89,6 +89,7 @@ export default function NetworkModal({ const [favoriteChains, setFavoriteChains] = useState(userInfo?.data?.favouriteChainIds || []) const [isEdittingMobile, setIsEdittingMobile] = useState(false) + const wrapperRef = useRef(null) const networkModalOpen = useModalOpen(ApplicationModal.NETWORK) const toggleNetworkModalGlobal = useNetworkModalToggle() @@ -135,6 +136,7 @@ export default function NetworkModal({ - + {isWrongNetwork ? Wrong Chain : Select a Chain} From 1f1bc2163f7f49cc803cd7c3191411325be53e3a Mon Sep 17 00:00:00 2001 From: XiaoYhun Date: Wed, 18 Oct 2023 15:51:56 +0700 Subject: [PATCH 07/13] undo test codes --- src/pages/TrueSightV2/components/TokenOverview.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/TrueSightV2/components/TokenOverview.tsx b/src/pages/TrueSightV2/components/TokenOverview.tsx index 3b4d9cd9ba..c8ac42b461 100644 --- a/src/pages/TrueSightV2/components/TokenOverview.tsx +++ b/src/pages/TrueSightV2/components/TokenOverview.tsx @@ -204,7 +204,7 @@ export const TokenOverview = ({ data, isLoading }: { data?: IAssetOverview; isLo Date: Thu, 19 Oct 2023 10:30:28 +0700 Subject: [PATCH 08/13] remove unuse code --- .../Header/web3/NetworkModal/index.tsx | 27 ++----------------- .../components/TokenFilter/index.tsx | 4 +-- 2 files changed, 4 insertions(+), 27 deletions(-) diff --git a/src/components/Header/web3/NetworkModal/index.tsx b/src/components/Header/web3/NetworkModal/index.tsx index 991042b4fc..ef64a2ea44 100644 --- a/src/components/Header/web3/NetworkModal/index.tsx +++ b/src/components/Header/web3/NetworkModal/index.tsx @@ -41,29 +41,6 @@ const NetworkList = styled.div` } ` -const DropableZone = forwardRef(function DropableZone( - { id, children }: { id: string; children: ReactNode }, - ref: LegacyRef, -) { - const [isDraggingOver, setIsDraggingOver] = useState(false) - return ( -
setIsDraggingOver(true)} - style={ - isDraggingOver - ? { - backgroundColor: 'red', - } - : {} //todo - } - id={id} - > - {children} -
- ) -}) - const FAVORITE_DROPZONE_ID = 'favorite-dropzone' const CHAINS_DROPZONE_ID = 'chains-dropzone' @@ -213,7 +190,7 @@ export default function NetworkModal({ ))} - { if (ref) { droppableRefs.current[0] = ref @@ -236,7 +213,7 @@ export default function NetworkModal({ })} )} - +
diff --git a/src/pages/TrueSightV2/components/TokenFilter/index.tsx b/src/pages/TrueSightV2/components/TokenFilter/index.tsx index 7b46915f75..32e8884f21 100644 --- a/src/pages/TrueSightV2/components/TokenFilter/index.tsx +++ b/src/pages/TrueSightV2/components/TokenFilter/index.tsx @@ -246,9 +246,9 @@ export default function TokenFilter({ } + activeRender={item => } options={values} - onChange={(value: any) => onChangeFilter(queryKey, value)} + onChange={value => onChangeFilter(queryKey, value)} optionStyle={{ fontSize: '14px' }} menuStyle={menuStyle} /> From 2a2f22089de2e7b0982078c98c35c4cd397b293f Mon Sep 17 00:00:00 2001 From: XiaoYhun Date: Thu, 19 Oct 2023 10:34:43 +0700 Subject: [PATCH 09/13] pr env --- .github/workflows/pr.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/pr.yaml b/.github/workflows/pr.yaml index e621c974f4..0f80ebb7bd 100644 --- a/.github/workflows/pr.yaml +++ b/.github/workflows/pr.yaml @@ -114,7 +114,7 @@ jobs: VITE_TAG: ${{ needs.prepare.outputs.image_tag }} CURRENT_BRANCH: ${{ needs.prepare.outputs.current_branch }} NODE_OPTIONS: '--max_old_space_size=4096' - run: yarn build-dev + run: yarn build - name: Docker build and push uses: docker/build-push-action@v2 From b46cd4edbf9a0d0e4cd495abb2c4071fc6c49766 Mon Sep 17 00:00:00 2001 From: XiaoYhun Date: Thu, 19 Oct 2023 10:51:42 +0700 Subject: [PATCH 10/13] fix warning --- .../Header/web3/NetworkModal/DraggableNetworkButton.tsx | 6 +++--- src/components/Header/web3/NetworkModal/index.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Header/web3/NetworkModal/DraggableNetworkButton.tsx b/src/components/Header/web3/NetworkModal/DraggableNetworkButton.tsx index 155584247c..c7c496dc1e 100644 --- a/src/components/Header/web3/NetworkModal/DraggableNetworkButton.tsx +++ b/src/components/Header/web3/NetworkModal/DraggableNetworkButton.tsx @@ -192,9 +192,9 @@ export default function DraggableNetworkButton({ boxShadow: '0 0px 0px #00000060', filter: 'brightness(1)', scale: 1, - zIndex: 'unset', - x: 0, - y: 0, + zIndex: [2, 'unset'], + x: [0, 0], + y: [0, 0], }, } diff --git a/src/components/Header/web3/NetworkModal/index.tsx b/src/components/Header/web3/NetworkModal/index.tsx index ef64a2ea44..a62da65fcc 100644 --- a/src/components/Header/web3/NetworkModal/index.tsx +++ b/src/components/Header/web3/NetworkModal/index.tsx @@ -1,6 +1,6 @@ import { ChainId } from '@kyberswap/ks-sdk-core' import { Trans } from '@lingui/macro' -import { LegacyRef, ReactNode, forwardRef, useEffect, useRef, useState } from 'react' +import { useEffect, useRef, useState } from 'react' import { isMobile } from 'react-device-detect' import { Save, X } from 'react-feather' import { Button, Text } from 'rebass' From 95e581dc7c27254fab3c3f0d5918467ca3c608f7 Mon Sep 17 00:00:00 2001 From: XiaoYhun Date: Thu, 19 Oct 2023 11:00:55 +0700 Subject: [PATCH 11/13] revert --- .../Header/web3/NetworkModal/DraggableNetworkButton.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/Header/web3/NetworkModal/DraggableNetworkButton.tsx b/src/components/Header/web3/NetworkModal/DraggableNetworkButton.tsx index c7c496dc1e..155584247c 100644 --- a/src/components/Header/web3/NetworkModal/DraggableNetworkButton.tsx +++ b/src/components/Header/web3/NetworkModal/DraggableNetworkButton.tsx @@ -192,9 +192,9 @@ export default function DraggableNetworkButton({ boxShadow: '0 0px 0px #00000060', filter: 'brightness(1)', scale: 1, - zIndex: [2, 'unset'], - x: [0, 0], - y: [0, 0], + zIndex: 'unset', + x: 0, + y: 0, }, } From 87b5ed5cd87482429211024043e4ce21b05477b3 Mon Sep 17 00:00:00 2001 From: XiaoYhun Date: Thu, 19 Oct 2023 14:46:56 +0700 Subject: [PATCH 12/13] fix comment --- src/components/Header/web3/NetworkModal/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Header/web3/NetworkModal/index.tsx b/src/components/Header/web3/NetworkModal/index.tsx index a62da65fcc..05c2393761 100644 --- a/src/components/Header/web3/NetworkModal/index.tsx +++ b/src/components/Header/web3/NetworkModal/index.tsx @@ -159,7 +159,7 @@ export default function NetworkModal({ Favorite Chain(s) -
+
{isMobile && (isEdittingMobile ? (