fix rendering

src/components/AssetSelectModal/AssetSelectModal.tsx

@@ -12,7 +12,7 @@ import {
 } from '@chakra-ui/react'
 import type { ChainId } from '@shapeshiftoss/caip'
 import type { ChangeEvent } from 'react'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import AssetData from 'lib/generatedAssetData.json'
 import { isNft } from 'lib/utils'
 import type { Asset } from 'types/Asset'
@@ -25,13 +25,15 @@ import { filterAssetsBySearchTerm } from './helpers/filterAssetsBySearchTerm'
 type AssetSelectModalProps = {
   isOpen: boolean
   onClose: () => void
+  onClick: (asset: Asset) => void
 }
 
-export const AssetSelectModal: React.FC<AssetSelectModalProps> = ({ isOpen, onClose }) => {
+export const AssetSelectModal: React.FC<AssetSelectModalProps> = ({ isOpen, onClose, onClick }) => {
   const [searchQuery, setSearchQuery] = useState('')
   const assets = Object.values(AssetData)
   const [activeChain, setActiveChain] = useState<ChainId | 'All'>('All')
   const [searchTermAssets, setSearchTermAssets] = useState<Asset[]>([])
+  const iniitalRef = useRef(null)
 
   const filteredAssets = useMemo(
     () =>
@@ -43,10 +45,6 @@ export const AssetSelectModal: React.FC<AssetSelectModalProps> = ({ isOpen, onCl
 
   const searching = useMemo(() => searchQuery.length > 0, [searchQuery])
 
-  const handleClick = useCallback((asset: Asset) => {
-    console.info(asset.assetId)
-  }, [])
-
   const handleSearchQuery = useCallback((value: ChangeEvent<HTMLInputElement>) => {
     setSearchQuery(value.target.value)
   }, [])
@@ -59,8 +57,23 @@ export const AssetSelectModal: React.FC<AssetSelectModalProps> = ({ isOpen, onCl
     setActiveChain('All')
   }, [])
 
+  const handleClose = useCallback(() => {
+    // Reset state on close
+    setActiveChain('All')
+    setSearchQuery('')
+    onClose()
+  }, [onClose])
+
+  const handleClick = useCallback(
+    (asset: Asset) => {
+      onClick(asset)
+      handleClose()
+    },
+    [handleClose, onClick],
+  )
+
   useEffect(() => {
-    if (filteredAssets) {
+    if (filteredAssets && searching) {
       setSearchTermAssets(
         searching ? filterAssetsBySearchTerm(searchQuery, filteredAssets) : filteredAssets,
       )
@@ -101,7 +114,7 @@ export const AssetSelectModal: React.FC<AssetSelectModalProps> = ({ isOpen, onCl
   }, [activeChain, handleChainClick, uniqueChainIds])
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} isCentered>
+    <Modal isOpen={isOpen} onClose={handleClose} isCentered initialFocusRef={iniitalRef}>
       <ModalOverlay />
       <ModalContent>
         <ModalHeader
@@ -120,6 +133,7 @@ export const AssetSelectModal: React.FC<AssetSelectModalProps> = ({ isOpen, onCl
           <Input
             size='lg'
             placeholder='Search name or paste address'
+            ref={iniitalRef}
             onChange={handleSearchQuery}
           />
           <Flex mt={4} flexWrap='wrap' gap={2} justifyContent='space-between'>

src/components/AssetSelectModal/ChainButton.tsx

@@ -20,7 +20,7 @@ export const ChainButton: React.FC<ChainButtonProps> = ({
   isActive,
 }) => {
   const chainIcon = useMemo(() => {
-    return <Avatar size='sm' src={icon} />
+    return <Avatar size='xs' src={icon} />
   }, [icon])
 
   const handleClick = useCallback(() => {

src/components/AssetSelectModal/types.ts

@@ -0,0 +1,4 @@
+export enum AssetType {
+  BUY = 'buy',
+  SELL = 'sell',
+}

src/components/AssetSelection.tsx

@@ -1,23 +1,20 @@
 import { Avatar, Button, Text } from '@chakra-ui/react'
+import type { Asset } from 'types/Asset'
 
 type AssetSelectionProps = {
   onClick: () => void
   label: string
-  assetIcon: string
-  assetName: string
+  asset?: Asset
 }
 
-export const AssetSelection: React.FC<AssetSelectionProps> = ({
-  label,
-  onClick,
-  assetIcon,
-  assetName,
-}) => {
+export const AssetSelection: React.FC<AssetSelectionProps> = ({ label, onClick, asset }) => {
   return (
     <Button flexDir='column' height='auto' py={4} gap={4} flex={1} onClick={onClick}>
       <Text color='text.subtle'>{label}</Text>
-      <Avatar src={assetIcon} />
-      <Text>{assetName}</Text>
+      <Avatar src={asset ? asset.icon : ''} />
+      <Text textOverflow='ellipsis' overflow='hidden' width='full'>
+        {asset ? asset.name : 'Select Asset'}
+      </Text>
     </Button>
   )
 }

src/components/SelectPair.tsx

@@ -1,15 +1,19 @@
 import { Button, Card, CardBody, Flex, Heading, IconButton, useDisclosure } from '@chakra-ui/react'
-import { useCallback, useMemo } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { FaArrowRightArrowLeft } from 'react-icons/fa6'
 import { useNavigate } from 'react-router-dom'
-import { BTCImage, ETHImage } from 'lib/const'
 import { mixpanel, MixPanelEvent } from 'lib/mixpanel'
+import type { Asset } from 'types/Asset'
 
 import { AssetSelection } from './AssetSelection'
 import { AssetSelectModal } from './AssetSelectModal/AssetSelectModal'
+import { AssetType } from './AssetSelectModal/types'
 
 export const SelectPair = () => {
   const { isOpen, onClose, onOpen } = useDisclosure()
+  const [sellAsset, setSellAsset] = useState<Asset>()
+  const [buyAsset, setBuyAsset] = useState<Asset>()
+  const [assetSelectType, setAssetSelectType] = useState<AssetType>(AssetType.BUY)
   const navigate = useNavigate()
   const switchIcon = useMemo(() => <FaArrowRightArrowLeft />, [])
   const handleSubmit = useCallback(() => {
@@ -21,39 +25,43 @@ export const SelectPair = () => {
   }, [navigate])
 
   const handleFromAssetClick = useCallback(() => {
+    setAssetSelectType(AssetType.SELL)
     onOpen()
-    console.info('asset click')
   }, [onOpen])
+
   const handleToAssetClick = useCallback(() => {
+    setAssetSelectType(AssetType.BUY)
     onOpen()
   }, [onOpen])
 
+  const handleAssetSelect = useCallback(
+    (asset: Asset) => {
+      if (assetSelectType === AssetType.BUY) {
+        setBuyAsset(asset)
+      }
+      if (assetSelectType === AssetType.SELL) {
+        setSellAsset(asset)
+      }
+    },
+    [assetSelectType],
+  )
+
   return (
     <Card width='full' maxWidth='450px'>
       <CardBody display='flex' flexDir='column' gap={8}>
         <Heading as='h4' fontSize='md' textAlign='center'>
           Choose which assets to trade
         </Heading>
         <Flex alignItems='center' gap={4} color='text.subtle' width='full'>
-          <AssetSelection
-            label='Deposit'
-            onClick={handleFromAssetClick}
-            assetIcon={BTCImage}
-            assetName='Bitcoin'
-          />
+          <AssetSelection label='Deposit' onClick={handleFromAssetClick} asset={sellAsset} />
           <IconButton variant='ghost' icon={switchIcon} aria-label='Switch assets' />
-          <AssetSelection
-            label='Receive'
-            onClick={handleToAssetClick}
-            assetIcon={ETHImage}
-            assetName='Ethereum'
-          />
+          <AssetSelection label='Receive' onClick={handleToAssetClick} asset={buyAsset} />
         </Flex>
         <Button size='lg' colorScheme='blue' onClick={handleSubmit}>
           Continue
         </Button>
       </CardBody>
-      <AssetSelectModal isOpen={isOpen} onClose={onClose} />
+      <AssetSelectModal isOpen={isOpen} onClose={onClose} onClick={handleAssetSelect} />
     </Card>
   )
 }