Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Profile improvement #2071

Merged
merged 20 commits into from
Jul 17, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions src/components/Announcement/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -143,9 +143,9 @@ export default function AnnouncementComponent() {
numberOfUnread,
pagination: { totalItems: totalPrivateAnnouncement },
} = isError ? responseDefault : respPrivateAnnouncement
const refreshAnnouncement = () => {
const refreshAnnouncement = useCallback(() => {
fetchAnnouncementsByTab(true)
}
}, [fetchAnnouncementsByTab])

const loadMoreAnnouncements = useCallback(() => {
fetchAnnouncementsByTab()
Expand Down Expand Up @@ -226,8 +226,9 @@ export default function AnnouncementComponent() {
useEffect(() => {
if (userInfo?.identityId) {
invalidateTag(ANNOUNCEMENT_TAGS)
refreshAnnouncement()
nguyenhoaidanh marked this conversation as resolved.
Show resolved Hide resolved
}
}, [userInfo?.identityId, invalidateTag])
}, [userInfo?.identityId, invalidateTag, refreshAnnouncement])

useInterval(prefetchPrivateAnnouncements, 10_000)

Expand Down
4 changes: 2 additions & 2 deletions src/components/Header/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ export default function Header() {
const [holidayMode] = useHolidayMode()
const theme = useTheme()
const { mixpanelHandler } = useMixpanel()
const uptoSmall = useMedia(`(max-width: ${MEDIA_WIDTHS.upToSmall}px)`)
const upToExtraSmall = useMedia(`(max-width: ${MEDIA_WIDTHS.upToExtraSmall}px)`)
const menu = (
<HeaderElementWrap>
<Announcement />
Expand Down Expand Up @@ -228,7 +228,7 @@ export default function Header() {
</HeaderLinks>
</HeaderRow>
<HeaderControls>
{uptoSmall ? (
{upToExtraSmall ? (
<HeaderElement>
<SelectNetwork />
<SelectWallet />
Expand Down
7 changes: 3 additions & 4 deletions src/components/Header/web3/SelectWallet.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -163,17 +163,16 @@ function Web3StatusInner() {
text={
<Text style={{ fontSize: '12px', textAlign: 'left', whiteSpace: 'normal' }}>
<Trans>
You are not signed in with this wallet address. If you wish, you can
<Text
as="span"
You are not signed in with this wallet address. If you wish, you can{' '}
<span
nguyenhoaidanh marked this conversation as resolved.
Show resolved Hide resolved
style={{ cursor: 'pointer', fontSize: '12px', color: theme.primary }}
onClick={e => {
e.stopPropagation()
signIn(account)
}}
>
sign-in
</Text>
</span>{' '}
to link your wallet to a profile. This will allow us to offer you a better experience
</Trans>
</Text>
Expand Down
7 changes: 6 additions & 1 deletion src/components/Header/web3/SignWallet/ProfileContent.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,12 @@ const ProfileContent = ({ scroll, toggleModal }: { scroll?: boolean; toggleModal
</Column>
<ActionWrapper hasBorder={profiles.length > 1}>
{!KyberOauth2.getConnectedAccounts().includes(account?.toLowerCase() ?? '') && isEVM && (
<ActionItem onClick={() => signIn()}>
<ActionItem
onClick={() => {
toggleModal()
signIn()
}}
>
<UserPlus size={18} /> <Trans>Add Account</Trans>
</ActionItem>
)}
Expand Down
1 change: 1 addition & 0 deletions src/components/Menu/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -102,6 +102,7 @@ const NavLinkBetween = styled(MenuItem)`
justify-content: space-between;
position: unset !important;
max-height: 40px;
cursor: pointer;
svg {
margin: 0;
width: unset;
Expand Down
2 changes: 1 addition & 1 deletion src/components/SearchModal/CurrencyList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -304,7 +304,7 @@ function CurrencyList({
<div style={{ flex: 1 }}>
<AutoSizer>
{({ height, width }) => (
<InfiniteLoader isItemLoaded={isItemLoaded} itemCount={itemCount} loadMoreItems={loadMoreItems}>
<InfiniteLoader isItemLoaded={isItemLoaded} itemCount={itemCount} loadMoreItems={loadMoreItems} threshold={3}>
{({ onItemsRendered, ref }) => (
<FixedSizeList
height={height}
Expand Down
2 changes: 1 addition & 1 deletion src/components/swapv2/LimitOrder/LimitOrderForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -653,7 +653,7 @@ const LimitOrderForm = function LimitOrderForm({
messages.push(
<Text>
<Trans>
Your order may only be filled when market price of {currencyIn?.symbol} to {currencyOut?.symbol} is &lt;
Your order may only be filled when market price of {currencyIn?.symbol} to {currencyOut?.symbol} is &lt;{' '}
<HightLight>{formattedNum(String(tradeInfo?.marketRate), true)}</HightLight>, as estimated gas fee to fill
your order is ~<HightLight>${removeTrailingZero(tradeInfo?.gasFee?.toPrecision(6) ?? '0')}</HightLight>.
</Trans>
Expand Down
24 changes: 15 additions & 9 deletions src/hooks/useLogin.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,16 @@ const useLogin = (autoLogin = false) => {
[setLoading, signInAnonymous, getProfile, saveSignedAccount, showSignInSuccess],
)

const redirectSignIn = useCallback(
(account: string) => {
setLoginRedirectUrl(window.location.href)
setTimeout(() => {
KyberOauth2.authenticate(isEVM ? { wallet_address: account } : {}) // navigate to login page
}, 1000)
},
[isEVM, setLoginRedirectUrl],
)

// check account info and redirect if needed
const [, setAutoSignIn] = useIsAutoLoginAfterConnectWallet()
const signIn = useCallback(
Expand All @@ -186,26 +196,21 @@ const useLogin = (autoLogin = false) => {
return
}

const redirectSignIn = () => {
setLoginRedirectUrl(window.location.href)
setTimeout(() => {
KyberOauth2.authenticate(isEVM ? { wallet_address: desireAccount || account || '' } : {}) // navigate to login page
}, 1000)
}
const formatAccount = desireAccount || account || ''
if (showSessionExpired && isSelectAccount && !isTokenExist) {
showConfirm({
isOpen: true,
content: t`Your session has expired. Please sign-in to continue.`,
title: t`Session Expired`,
confirmText: t`Sign-in`,
onConfirm: () => redirectSignIn(),
onConfirm: () => redirectSignIn(formatAccount),
cancelText: t`Cancel`,
})
return
}
redirectSignIn()
redirectSignIn(formatAccount)
},
[account, isEVM, checkSessionSignIn, toggleWalletModal, showConfirm, setLoginRedirectUrl, setAutoSignIn],
[account, checkSessionSignIn, toggleWalletModal, showConfirm, setAutoSignIn, redirectSignIn],
)

const showSignOutSuccess = useCallback(() => {
Expand Down Expand Up @@ -307,6 +312,7 @@ const useLogin = (autoLogin = false) => {
return {
signOut: signOutWrapped,
signIn: signInWrapped,
redirectSignIn,
signOutAll,
importGuestAccount,
checkSessionSignIn,
Expand Down
9 changes: 6 additions & 3 deletions src/hooks/useSessionExpire.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { useSignedAccountInfo } from 'state/profile/hooks'
export default function useSessionExpiredGlobal() {
const { pathname } = useLocation()
const showConfirm = useShowConfirm()
const { signIn } = useLogin()
const { signIn, redirectSignIn, signInAnonymous } = useLogin()
const navigate = useNavigate()
const { signedAccount, signedMethod } = useSignedAccountInfo()

Expand All @@ -25,7 +25,10 @@ export default function useSessionExpiredGlobal() {
title: t`Session Expired`,
confirmText: t`Sign-in`,
cancelText: t`Cancel`,
onConfirm: () => signIn(),
onConfirm: () => redirectSignIn(accountId || signedAccount),
onCancel: () => {
signInAnonymous(KyberOauth2.getConnectedAnonymousAccounts()[0])
},
}
const isKyberAIPage =
pathname.toLowerCase().startsWith(APP_PATHS.KYBERAI.toLowerCase()) &&
Expand All @@ -38,7 +41,7 @@ export default function useSessionExpiredGlobal() {
}
KyberOauth2.on(KyberOauth2Event.SESSION_EXPIRED, listener)
return () => KyberOauth2.off(KyberOauth2Event.SESSION_EXPIRED, listener)
}, [pathname, showConfirm, signIn, navigate, signedAccount])
}, [pathname, showConfirm, redirectSignIn, navigate, signedAccount, signInAnonymous])

useEffect(() => {
const listener = () => {
Expand Down
28 changes: 19 additions & 9 deletions src/pages/Bridge/ComfirmBridgeModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -426,16 +426,26 @@ export const ConfirmCrossChainModal = memo(function ConfirmCrossChainModal({
outputAmount &&
currencyIn &&
currencyOut && (
<Flex alignItems={'center'} color={theme.text} sx={{ gap: '4px' }}>
<TokenLogoWithChain currency={currencyIn} size={16} />
&nbsp;
{uint256ToFraction(inputAmount, currencyIn?.decimals).toSignificant(RESERVE_USD_DECIMALS)}
<Text as="span"> {currencyIn?.symbol}</Text>
<Flex
alignItems={'center'}
color={theme.text}
sx={{ rowGap: '6px', columnGap: '4px', flexWrap: 'wrap', justifyContent: 'center' }}
>
<Flex sx={{ gap: '4px' }}>
<TokenLogoWithChain currency={currencyIn} size={16} />
&nbsp;
{uint256ToFraction(inputAmount, currencyIn?.decimals).toSignificant(RESERVE_USD_DECIMALS)}
<Text as="span"> {currencyIn?.symbol}</Text>
</Flex>

<ArrowRight size={14} />
<TokenLogoWithChain currency={currencyOut} size={16} />
&nbsp;
{uint256ToFraction(outputAmount, currencyOut?.decimals).toSignificant(RESERVE_USD_DECIMALS)}
<Text as="span">{currencyOut?.symbol}</Text>

<Flex sx={{ gap: '4px' }}>
<TokenLogoWithChain currency={currencyOut} size={16} />
&nbsp;
{uint256ToFraction(outputAmount, currencyOut?.decimals).toSignificant(RESERVE_USD_DECIMALS)}
<Text as="span">{currencyOut?.symbol}</Text>
</Flex>
</Flex>
)
}
Expand Down
18 changes: 9 additions & 9 deletions src/pages/NotificationCenter/PriceAlerts/ActiveAlerts/index.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
import { t } from '@lingui/macro'
import { useEffect, useState } from 'react'
import { Flex } from 'rebass'
import priceAlertApi, { useGetAlertStatsQuery, useGetListAlertsQuery } from 'services/priceAlert'
import { useGetAlertStatsQuery, useGetListAlertsQuery } from 'services/priceAlert'

import { useInvalidateTags } from 'components/Announcement/helper'
import { PrivateAnnouncementType } from 'components/Announcement/type'
import { RTK_QUERY_TAGS } from 'constants/index'
import useDebounce from 'hooks/useDebounce'
import NoData from 'pages/NotificationCenter/NoData'
import CommonPagination from 'pages/NotificationCenter/PriceAlerts/CommonPagination'
import { ITEMS_PER_PAGE } from 'pages/NotificationCenter/const'
Expand All @@ -17,20 +16,21 @@ import SingleAlert from './SingleAlert'
const ActiveAlerts = ({ setDisabledClearAll }: { setDisabledClearAll: (v: boolean) => void }) => {
const { userInfo } = useSessionInfo()
const [page, setPage] = useState(1)
const { data, isLoading, refetch } = useGetListAlertsQuery({
const { data, isFetching, refetch } = useGetListAlertsQuery({
page,
pageSize: ITEMS_PER_PAGE,
sort: 'is_enabled:desc,created_at:desc',
})
const isLoading = useDebounce(isFetching, 300)
const { data: alertStat, refetch: refetchStat } = useGetAlertStatsQuery()
const isMaxQuotaActiveAlert = alertStat ? alertStat.totalActiveAlerts >= alertStat.maxActiveAlerts : false

const invalidateTag = useInvalidateTags(priceAlertApi.reducerPath)
useEffect(() => {
if (userInfo?.identityId) {
invalidateTag([RTK_QUERY_TAGS.GET_ALERTS, RTK_QUERY_TAGS.GET_ALERTS_STAT])
}
}, [userInfo?.identityId, invalidateTag])
try {
refetch()
refetchStat()
} catch (error) {}
}, [userInfo?.identityId, refetch, refetchStat])

useEffect(() => {
setDisabledClearAll(!data?.alerts?.length)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const WarningWrapper = styled.div`
padding: 12px 14px;
`}
`
const DOC_URL = 'https://docs.kyberswap.com/kyberswap-solutions/kyberswap-interface/profiles/profile-customization'
const DOC_URL = 'https://docs.kyberswap.com/kyberswap-solutions/kyberswap-interface/profiles'
const WarningSignMessage = () => {
const { signIn } = useLogin()
const { pendingAuthentication } = useSessionInfo()
Expand Down
8 changes: 5 additions & 3 deletions src/state/user/hooks.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -524,12 +524,14 @@ export const useIsWhiteListKyberAI = () => {
const loadingDebounced = useDebounce(isLoading, 500) || connectingWallet

const participantInfo = isError || loadingDebounced || !account ? participantDefault : rawData

// isWhitelist, isWaitList check account is hotfix for now, will remove utils backend fixed bug
return {
loading: loadingDebounced,
isWhiteList:
isLogin && (participantInfo?.status === ParticipantStatus.WHITELISTED || userInfo?.data?.hasAccessToKyberAI),
isWaitList: isLogin && participantInfo?.status === ParticipantStatus.WAITLISTED,
!!account &&
isLogin &&
(participantInfo?.status === ParticipantStatus.WHITELISTED || userInfo?.data?.hasAccessToKyberAI),
isWaitList: !!account && isLogin && participantInfo?.status === ParticipantStatus.WAITLISTED,
refetch,
}
}
Expand Down
7 changes: 6 additions & 1 deletion src/utils/iamError.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,9 @@ const sendError = (name: string, apiUrl: string, trackData: any) => {
captureException(error, { level: 'fatal', extra: { args: JSON.stringify(trackData, null, 2) } })
}

// hot fix to prevent spam for now.
const blacklistPathBff = ['/v1/notification/me']

/**
* check error status: blocked, maybe cors issues or server down
* only check bff api + 2 route apis
Expand All @@ -47,13 +50,15 @@ export const checkIamDown = (axiosErr: AxiosError) => {
},
response,
statusCode,
message: axiosErr?.message,
code: axiosErr?.code,
}
const apiUrl = axiosErr?.config?.url ?? ''

const isRouteApiDie =
isDie && (apiUrl.endsWith(AGGREGATOR_API_PATHS.GET_ROUTE) || apiUrl.endsWith(AGGREGATOR_API_PATHS.BUILD_ROUTE))

const isIamDie = isDie && apiUrl.startsWith(BFF_API)
const isIamDie = isDie && apiUrl.startsWith(BFF_API) && !blacklistPathBff.some(path => apiUrl.endsWith(path))

if (isRouteApiDie) {
ErrorInfo.routeApiError++
Expand Down
2 changes: 1 addition & 1 deletion src/utils/string.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export const escapeScriptHtml = (str: string) => {
return str.replace(/<.*?script.*?>.*?<\/.*?script.*?>/gim, '')
}

export const isEmailValid = (value: string | undefined) => value?.match(/\S+@\S+\.\S+/)
export const isEmailValid = (value: string | undefined) => value?.match(/^\w+([\.-]?\w)*@\w+([\.-]?\w)*(\.\w{2,10})+$/)

export const getChainIdFromSlug = (network: string | undefined) => {
return Object.values(NETWORKS_INFO).find(n => n.route === network)?.chainId
Expand Down
Loading