feat: sort supported chains to top of the chain selector list (#6800)

* feat: sort supported chains to top of the chain selector list

* pr feedback

---------

Co-authored-by: Jordan Frankfurt <jordan@CORN-Jordan-949.frankfurt>
This commit is contained in:
Jordan Frankfurt 2023-06-21 16:10:46 -05:00 committed by GitHub
parent 54b4567a81
commit 45a5ca3b88
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 7 deletions

@ -21,7 +21,7 @@ import { Box } from 'nft/components/Box'
import { Portal } from 'nft/components/common/Portal'
import { Column, Row } from 'nft/components/Flex'
import { useIsMobile } from 'nft/hooks'
import { useCallback, useRef, useState } from 'react'
import { useCallback, useMemo, useRef, useState } from 'react'
import { AlertTriangle, ChevronDown, ChevronUp } from 'react-feather'
import { useTheme } from 'styled-components/macro'
@ -69,9 +69,15 @@ export const ChainSelector = ({ leftAlign }: ChainSelectorProps) => {
const theme = useTheme()
const showTestnets = useAtomValue(showTestnetsAtom)
const chains = showTestnets
? NETWORK_SELECTOR_CHAINS
: NETWORK_SELECTOR_CHAINS.filter((chain) => !TESTNET_CHAIN_IDS.has(chain))
const walletSupportsChain = useWalletSupportedChains()
const chains = useMemo(
() =>
NETWORK_SELECTOR_CHAINS.filter((chain) => showTestnets || !TESTNET_CHAIN_IDS.has(chain)).sort((a) =>
walletSupportsChain.includes(a) ? -1 : 1
),
[showTestnets, walletSupportsChain]
)
const ref = useRef<HTMLDivElement>(null)
const modalRef = useRef<HTMLDivElement>(null)
@ -94,8 +100,6 @@ export const ChainSelector = ({ leftAlign }: ChainSelectorProps) => {
[selectChain, setIsOpen]
)
const walletSupportsChain = useWalletSupportedChains()
if (!chainId) {
return null
}

@ -18,7 +18,7 @@ const Container = styled.button<{ disabled: boolean }>`
display: grid;
grid-template-columns: min-content 1fr min-content;
justify-content: space-between;
line-height: 24px;
line-height: 20px;
opacity: ${({ disabled }) => (disabled ? 0.6 : 1)};
padding: 10px 8px;
text-align: left;