Skip to content

Commit

Permalink
hotfix: crash kyberAI when wrong chain
Browse files Browse the repository at this point in the history
  • Loading branch information
@nguyenhoaidanh
nguyenhoaidanh committed Nov 28, 2023
1 parent d721191 commit 998ced3
Showing 1 changed file with 142 additions and 120 deletions.
262 changes: 142 additions & 120 deletions src/pages/TrueSightV2/components/SearchWithDropDown.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { Trans, t } from '@lingui/macro'
import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
import React, { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { X } from 'react-feather'
import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'
import { useLocation, useNavigate } from 'react-router-dom'
Expand Down Expand Up @@ -322,11 +322,14 @@ const SearchWithDropdown = () => {
{ skip: debouncedSearch === '' },
)
const [history, setHistory] = useLocalStorage<Array<ITokenSearchResult>>('kyberai-search-history')
const saveToHistory = (token: ITokenSearchResult) => {
if (!(history && history.some(t => t.assetId === token.assetId))) {
setHistory([token, ...(history || [])].slice(0, 3))
}
}
const saveToHistory = useCallback(
(token: ITokenSearchResult) => {
if (!(history && history.some(t => t.assetId === token.assetId))) {
setHistory([token, ...(history || [])].slice(0, 3))
}
},
[history, setHistory],
)

const [getTokenData] = useLazySearchTokenQuery()
useEffect(() => {
Expand Down Expand Up @@ -396,132 +399,151 @@ const SearchWithDropdown = () => {
}
}, [])

const DropdownContent = () => (
<div ref={contentRef} style={{ height: 'fit-content' }}>
{isLoading ? (
<>
<SearchResultTableWrapper>
<SkeletonRows />
</SearchResultTableWrapper>
</>
) : haveSearchResult ? (
<>
<SearchResultTableWrapper>
{searchResult.map(item => (
<TokenItem
key={item.assetId}
token={item}
onClick={() => {
setExpanded(false)
saveToHistory(item)
mixpanelHandler(MIXPANEL_TYPE.KYBERAI_SEARCH_TOKEN_SUCCESS, {
token_name: item.symbol?.toUpperCase(),
source: pathname.includes(APP_PATHS.KYBERAI_EXPLORE)
? 'explore'
: KYBERAI_LISTYPE_TO_MIXPANEL[listType],
search_term: search,
})
}}
/>
))}
</SearchResultTableWrapper>
</>
) : noSearchResult ? (
<>
<Row justify="center" height="360px">
<Text
fontSize={above768 ? '14px' : '12px'}
lineHeight={above768 ? '20px' : '16px'}
maxWidth="75%"
textAlign="center"
>
<Trans>
Oops, we couldnt find your token! We will regularly add new tokens that have achieved a certain trading
volume
</Trans>
</Text>
</Row>
</>
) : (
<>
{history && (
<SearchResultTableWrapper
header={
<RowFit color={theme.subText} gap="10px">
<History />
<Text fontSize="12px">Search History</Text>
</RowFit>
}
>
{history.slice(0, 3).map((item, index) => (
<TokenItem key={index} token={item} onClick={() => setExpanded(false)} />
))}
const content = useMemo(() => {
return (
<div ref={contentRef} style={{ height: 'fit-content' }}>
{isLoading ? (
<>
<SearchResultTableWrapper>
<SkeletonRows />
</SearchResultTableWrapper>
)}
<SearchResultTableWrapper
header={
<RowFit color={theme.subText} gap="10px">
<Icon id="bullish" size={16} />
<Text fontSize="12px">Bullish Tokens</Text>
</RowFit>
}
>
{isBullishLoading ? (
<SkeletonRows count={3} />
) : (
top5bullish?.data?.slice(0, 3).map((item, index) => (
</>
) : haveSearchResult ? (
<>
<SearchResultTableWrapper>
{searchResult.map(item => (
<TokenItem
key={index}
token={formatTokenType(item)}
key={item.assetId}
token={item}
onClick={() => {
setExpanded(false)
saveToHistory(formatTokenType(item))
saveToHistory(item)
mixpanelHandler(MIXPANEL_TYPE.KYBERAI_SEARCH_TOKEN_SUCCESS, {
token_name: item.symbol?.toUpperCase(),
source: pathname.includes(APP_PATHS.KYBERAI_EXPLORE)
? 'explore'
: KYBERAI_LISTYPE_TO_MIXPANEL[listType],
token_type: 'bullish',
search_term: debouncedSearch,
})
}}
/>
))
)}
</SearchResultTableWrapper>
<SearchResultTableWrapper
header={
<RowFit color={theme.subText} gap="10px">
<Icon id="bearish" size={16} />
<Text fontSize="12px">Bearish Tokens</Text>
</RowFit>
}
>
{isBearishLoading ? (
<SkeletonRows count={3} />
) : (
top5bearish?.data?.slice(0, 3).map((item, index) => (
<TokenItem
key={index}
token={formatTokenType(item)}
onClick={() => {
setExpanded(false)
saveToHistory(formatTokenType(item))
mixpanelHandler(MIXPANEL_TYPE.KYBERAI_SEARCH_TOKEN_SUCCESS, {
token_name: item.symbol?.toUpperCase(),
source: pathname.includes(APP_PATHS.KYBERAI_EXPLORE)
? 'explore'
: KYBERAI_LISTYPE_TO_MIXPANEL[listType],
token_type: 'bearish',
})
}}
/>
))
))}
</SearchResultTableWrapper>
</>
) : noSearchResult ? (
<>
<Row justify="center" height="360px">
<Text
fontSize={above768 ? '14px' : '12px'}
lineHeight={above768 ? '20px' : '16px'}
maxWidth="75%"
textAlign="center"
>
<Trans>
Oops, we couldnt find your token! We will regularly add new tokens that have achieved a certain
trading volume
</Trans>
</Text>
</Row>
</>
) : (
<>
{history && (
<SearchResultTableWrapper
header={
<RowFit color={theme.subText} gap="10px">
<History />
<Text fontSize="12px">Search History</Text>
</RowFit>
}
>
{history.slice(0, 3).map((item, index) => (
<TokenItem key={index} token={item} onClick={() => setExpanded(false)} />
))}
</SearchResultTableWrapper>
)}
</SearchResultTableWrapper>
</>
)}
</div>
)
<SearchResultTableWrapper
header={
<RowFit color={theme.subText} gap="10px">
<Icon id="bullish" size={16} />
<Text fontSize="12px">Bullish Tokens</Text>
</RowFit>
}
>
{isBullishLoading ? (
<SkeletonRows count={3} />
) : (
top5bullish?.data?.slice(0, 3).map((item, index) => (
<TokenItem
key={index}
token={formatTokenType(item)}
onClick={() => {
setExpanded(false)
saveToHistory(formatTokenType(item))
mixpanelHandler(MIXPANEL_TYPE.KYBERAI_SEARCH_TOKEN_SUCCESS, {
token_name: item.symbol?.toUpperCase(),
source: pathname.includes(APP_PATHS.KYBERAI_EXPLORE)
? 'explore'
: KYBERAI_LISTYPE_TO_MIXPANEL[listType],
token_type: 'bullish',
})
}}
/>
))
)}
</SearchResultTableWrapper>
<SearchResultTableWrapper
header={
<RowFit color={theme.subText} gap="10px">
<Icon id="bearish" size={16} />
<Text fontSize="12px">Bearish Tokens</Text>
</RowFit>
}
>
{isBearishLoading ? (
<SkeletonRows count={3} />
) : (
top5bearish?.data?.slice(0, 3).map((item, index) => (
<TokenItem
key={index}
token={formatTokenType(item)}
onClick={() => {
setExpanded(false)
saveToHistory(formatTokenType(item))
mixpanelHandler(MIXPANEL_TYPE.KYBERAI_SEARCH_TOKEN_SUCCESS, {
token_name: item.symbol?.toUpperCase(),
source: pathname.includes(APP_PATHS.KYBERAI_EXPLORE)
? 'explore'
: KYBERAI_LISTYPE_TO_MIXPANEL[listType],
token_type: 'bearish',
})
}}
/>
))
)}
</SearchResultTableWrapper>
</>
)}
</div>
)
}, [
above768,
haveSearchResult,
isBearishLoading,
isLoading,
theme,
listType,
isBullishLoading,
pathname,
saveToHistory,
history,
noSearchResult,
searchResult,
top5bullish,
top5bearish,
mixpanelHandler,
debouncedSearch,
])

return (
<>
Expand Down Expand Up @@ -549,7 +571,7 @@ const SearchWithDropdown = () => {
</RowFit>
</RowFit>
<DropdownWrapper expanded={expanded} ref={dropdownRef} height={height}>
<DropdownContent />
{content}
{expanded && <AnimationOnFocus />}
</DropdownWrapper>
</Wrapper>
Expand Down

0 comments on commit 998ced3

Please sign in to comment.