Skip to content

Commit 8beac44

Browse files
ltthiennltthienn
committed
Merge branch 'main' of github.com:KyberNetwork/kyberswap-interface into e2e-qa62
2 parents cc8b65d + 7a3388a commit 8beac44

File tree

107 files changed

+704
-1126
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

107 files changed

+704
-1126
lines changed

‎.eslintrc.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ module.exports = {
4242
'plugin:prettier/recommended',
4343
'plugin:storybook/recommended',
4444
],
45-
plugins: ['better-styled-components', 'unused-imports', 'jsx-a11y'],
45+
plugins: ['better-styled-components', 'unused-imports', 'jsx-a11y', 'lingui'],
4646
rules: {
4747
'unused-imports/no-unused-imports': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
4848
'@typescript-eslint/explicit-function-return-type': 'off',
@@ -72,5 +72,12 @@ module.exports = {
7272
],
7373
'no-empty-function': 'off',
7474
'@typescript-eslint/no-empty-function': 'off',
75+
76+
'lingui/no-unlocalized-strings': 0,
77+
'lingui/t-call-in-function': 2,
78+
'lingui/no-single-variables-to-translate': 2,
79+
'lingui/no-expression-in-message': 2,
80+
'lingui/no-single-tag-to-translate': 2,
81+
'lingui/no-trans-inside-trans': 2,
7582
},
7683
}

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -189,6 +189,7 @@
189189
"eslint-config-prettier": "^8.5.0",
190190
"eslint-plugin-better-styled-components": "^1.1.2",
191191
"eslint-plugin-jsx-a11y": "^6.7.1",
192+
"eslint-plugin-lingui": "^0.2.0",
192193
"eslint-plugin-prettier": "^4.2.1",
193194
"eslint-plugin-react": "^7.31.10",
194195
"eslint-plugin-react-hooks": "^4.6.0",

‎src/components/Announcement/Popups/PopupTopRightDescriptions/DescriptionCrossChain.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const DescriptionCrossChain = (
2626
const amountOut = formatAmountBridge(dstAmount)
2727

2828
return {
29-
title: PRIVATE_ANN_TITLE[templateType] ?? '',
29+
title: PRIVATE_ANN_TITLE()[templateType] ?? '',
3030
type: isSuccess ? NotificationType.SUCCESS : NotificationType.WARNING,
3131
link: `${APP_PATHS.CROSS_CHAIN}?tab=${CrossChainTab.HISTORY}`,
3232
summary: isSuccess

‎src/components/Announcement/Popups/PopupTopRightDescriptions/DescriptionPriceAlert.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const DescriptionPriceAlert = (
3535
const isAbove = type === PriceAlertType.ABOVE
3636

3737
return {
38-
title: PRIVATE_ANN_TITLE[templateType] ?? '',
38+
title: PRIVATE_ANN_TITLE()[templateType] ?? '',
3939
type: NotificationType.SUCCESS,
4040
link: `${APP_PATHS.PROFILE_MANAGE}${PROFILE_MANAGE_ROUTES.PRICE_ALERTS}?tab=${Tab.HISTORY}`,
4141
icon: <Clock size={20} />,

‎src/components/Announcement/Popups/TransactionPopup.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,10 +113,11 @@ const summaryCrossChain = (txs: TransactionDetails) => {
113113

114114
const summaryDelegateDao = (txs: TransactionDetails) => {
115115
const { contract = '' } = (txs.extraInfo || {}) as TransactionExtraBaseInfo
116+
const shortenAddress = getShortenAddress(contract)
116117
const summary =
117118
txs.type === TRANSACTION_TYPE.KYBERDAO_UNDELEGATE
118119
? t`undelegated your voting power`
119-
: t`delegated voting power to ${contract.slice(0, 6)}...${contract.slice(-4)}`
120+
: t`delegated voting power to ${shortenAddress}`
120121

121122
return { success: t`You have successfully ${summary}`, error: t`Error ${summary}.` }
122123
}

‎src/components/Announcement/PrivateAnnoucement/NotificationCenter/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export default function InboxItemNotificationCenter({ announcement }: PrivateAnn
3535
const { templateType } = announcement
3636
try {
3737
const component = ANNOUNCEMENT_MAP_IN_CENTER[templateType]
38-
const props: PrivateAnnouncementPropCenter = { announcement, title: PRIVATE_ANN_TITLE[templateType] }
38+
const props: PrivateAnnouncementPropCenter = { announcement, title: PRIVATE_ANN_TITLE()[templateType] }
3939
return component ? React.createElement(component, props) : null
4040
} catch (error) {
4141
return null

‎src/components/Announcement/PrivateAnnoucement/index.tsx

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -26,18 +26,19 @@ export type PrivateAnnouncementProp<T extends AnnouncementTemplate = Announcemen
2626
type PrivateAnnouncementMap = Partial<{
2727
[type in PrivateAnnouncementType]: (data: PrivateAnnouncementProp) => JSX.Element
2828
}>
29-
const ANNOUNCEMENT_MAP: PrivateAnnouncementMap = {
30-
[PrivateAnnouncementType.ELASTIC_POOLS]: InboxItemPoolPosition,
31-
[PrivateAnnouncementType.LIMIT_ORDER]: InboxItemLO,
32-
[PrivateAnnouncementType.KYBER_AI]: InboxItemTrendingSoon,
33-
[PrivateAnnouncementType.BRIDGE_ASSET]: InboxItemBridge,
34-
[PrivateAnnouncementType.CROSS_CHAIN]: InboxItemCrossChain,
35-
[PrivateAnnouncementType.PRICE_ALERT]: InboxItemPriceAlert,
36-
[PrivateAnnouncementType.DIRECT_MESSAGE]: InboxItemPrivateMessage,
37-
[PrivateAnnouncementType.KYBER_AI_WATCHLIST]: InboxItemKyberAIWatchList,
38-
} as PrivateAnnouncementMap
29+
const ANNOUNCEMENT_MAP: () => PrivateAnnouncementMap = () =>
30+
({
31+
[PrivateAnnouncementType.ELASTIC_POOLS]: InboxItemPoolPosition,
32+
[PrivateAnnouncementType.LIMIT_ORDER]: InboxItemLO,
33+
[PrivateAnnouncementType.KYBER_AI]: InboxItemTrendingSoon,
34+
[PrivateAnnouncementType.BRIDGE_ASSET]: InboxItemBridge,
35+
[PrivateAnnouncementType.CROSS_CHAIN]: InboxItemCrossChain,
36+
[PrivateAnnouncementType.PRICE_ALERT]: InboxItemPriceAlert,
37+
[PrivateAnnouncementType.DIRECT_MESSAGE]: InboxItemPrivateMessage,
38+
[PrivateAnnouncementType.KYBER_AI_WATCHLIST]: InboxItemKyberAIWatchList,
39+
} as PrivateAnnouncementMap)
3940

40-
export const PRIVATE_ANN_TITLE: Partial<{ [type in PrivateAnnouncementType]: string }> = {
41+
export const PRIVATE_ANN_TITLE: () => Partial<{ [type in PrivateAnnouncementType]: string }> = () => ({
4142
[PrivateAnnouncementType.BRIDGE_ASSET]: t`Cross-Chain Bridge`,
4243
[PrivateAnnouncementType.CROSS_CHAIN]: t`Cross-Chain Swaps`,
4344
[PrivateAnnouncementType.LIMIT_ORDER]: t`Limit Orders`,
@@ -46,7 +47,7 @@ export const PRIVATE_ANN_TITLE: Partial<{ [type in PrivateAnnouncementType]: str
4647
[PrivateAnnouncementType.PRICE_ALERT]: t`Price Alerts`,
4748
[PrivateAnnouncementType.ELASTIC_POOLS]: t`Elastic Liquidity Positions`,
4849
[PrivateAnnouncementType.DIRECT_MESSAGE]: t`Notification`,
49-
}
50+
})
5051

5152
export default function InboxItem({ announcement, onRead, style }: PrivateAnnouncementProp) {
5253
const { templateType, sentAt, isRead } = announcement
@@ -56,10 +57,10 @@ export default function InboxItem({ announcement, onRead, style }: PrivateAnnoun
5657
style,
5758
time: <InboxItemTime color={isRead ? theme.border : theme.subText}>{formatTime(sentAt)}</InboxItemTime>,
5859
announcement,
59-
title: PRIVATE_ANN_TITLE[templateType],
60+
title: PRIVATE_ANN_TITLE()[templateType],
6061
}
6162
try {
62-
const component = ANNOUNCEMENT_MAP[templateType]
63+
const component = ANNOUNCEMENT_MAP()[templateType]
6364
return component ? React.createElement(component, props) : null
6465
} catch (error) {
6566
return null

‎src/components/ClassicElasticTab.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,9 @@ function ClassicElasticTab() {
3535
const tab = isInEnum(tabQS, VERSION) ? tabQS : VERSION.ELASTIC
3636

3737
const { chainId } = useActiveWeb3React()
38-
const notSupportedElasticMsg = ELASTIC_NOT_SUPPORTED[chainId]
38+
const notSupportedElasticMsg = ELASTIC_NOT_SUPPORTED()[chainId]
3939

40-
const notSupportedClassicMsg = CLASSIC_NOT_SUPPORTED[chainId]
40+
const notSupportedClassicMsg = CLASSIC_NOT_SUPPORTED()[chainId]
4141

4242
const theme = useTheme()
4343
const location = useLocation()

‎src/components/ConfirmModal.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ const ModalConfirm: React.FC = () => {
5454
</RowBetween>
5555

5656
<Text as="span" fontSize="14px" color={theme.subText}>
57-
<Trans>{content}</Trans>
57+
{content}
5858
</Text>
5959

6060
<Flex

‎src/components/EarningPieChart/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -185,7 +185,7 @@ type Props = {
185185

186186
const customStyles: React.CSSProperties = { transition: 'all .3s', cursor: 'pointer' }
187187

188-
const LoadingData = [
188+
const LoadingData = () => [
189189
{
190190
title: t`loading`,
191191
value: 100,
@@ -206,7 +206,7 @@ const EarningPieChart: React.FC<Props> = ({
206206

207207
const chartData = useMemo(() => {
208208
if (isLoading || !data) {
209-
return LoadingData
209+
return LoadingData()
210210
}
211211

212212
if (data.length === 0) {

‎src/components/ElasticZap/RangeSelector.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { FeeSelectorWrapper, SelectWrapper, SelectWrapperOuter } from 'component
99
import { TwoWayArrow } from 'components/Icons'
1010
import { useOnClickOutside } from 'hooks/useOnClickOutside'
1111
import useTheme from 'hooks/useTheme'
12-
import { RANGE_LIST, rangeData } from 'pages/AddLiquidityV2/constants'
12+
import { RANGE_LIST, getRangeData } from 'pages/AddLiquidityV2/constants'
1313
import { ElasticFarmV2 } from 'state/farms/elasticv2/types'
1414
import { Bound, RANGE } from 'state/mint/proamm/type'
1515
import { getRecommendedRangeTicks } from 'state/mint/proamm/utils'
@@ -116,6 +116,8 @@ export default function RangeSelector({
116116
[pool.fee],
117117
)
118118

119+
const rangeData = getRangeData()
120+
119121
return (
120122
<FeeSelectorWrapper role="button" onClick={() => setShow(prev => !prev)} ref={ref}>
121123
<div>

‎src/components/ErrorBoundary/FallbackView.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { ExternalLink } from 'theme'
1313
const parser = new UAParser(window.navigator.userAgent)
1414
const userAgent = parser.getResult()
1515

16-
const predefinedErrors = [
16+
const predefinedErrors = () => [
1717
{
1818
name: 'LocalStorageAccessDenied',
1919
match: (e: Error) => {
@@ -90,19 +90,19 @@ type Props = {
9090
}
9191
const FallbackView: React.FC<Props> = ({ error }) => {
9292
const encodedBody = encodeURIComponent(issueBody(error))
93-
const foundError = predefinedErrors.find(err => err.match(error))
93+
const foundError = predefinedErrors().find(err => err.match(error))
9494

9595
return (
9696
<FallbackWrapper>
9797
<BodyWrapper>
9898
<AutoColumn gap={'lg'} justify="center">
9999
<Text textAlign="center" fontSize="24px" maxWidth={'600px'}>
100-
<Trans>{foundError?.title || 'Oops! Something went wrong'}</Trans>
100+
{foundError?.title || <Trans>Oops! Something went wrong</Trans>}
101101
</Text>
102102

103103
{foundError?.description ? (
104104
<Text textAlign="center" fontSize="16px" maxWidth={'600px'} marginTop="16px">
105-
<Trans>{foundError.description}</Trans>
105+
{foundError.description}
106106
</Text>
107107
) : (
108108
<>

‎src/components/Header/groups/EarnNavGroup.tsx

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { Flex } from 'rebass'
55

66
import { MoneyBag } from 'components/Icons'
77
import Icon from 'components/Icons/Icon'
8-
import { NewLabel } from 'components/Menu'
98
import { TutorialIds } from 'components/Tutorial/TutorialSwap/constant'
109
import { APP_PATHS } from 'constants/index'
1110
import { useActiveWeb3React } from 'hooks'
@@ -63,16 +62,6 @@ const EarnNavGroup = () => {
6362
</Flex>
6463
</StyledNavLink>
6564

66-
<StyledNavLink id="my-earnings-link" to={APP_PATHS.MY_EARNINGS}>
67-
<Flex sx={{ gap: '12px' }} alignItems="center">
68-
<Icon id="pig" size={16} />
69-
<Trans>My Earnings</Trans>
70-
<NewLabel>
71-
<Trans>New</Trans>
72-
</NewLabel>
73-
</Flex>
74-
</StyledNavLink>
75-
7665
<StyledNavLink
7766
id="my-pools-nav-link"
7867
data-testid="my-pools-nav-link"

‎src/components/Header/web3/SignWallet/ConfirmModal.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -165,7 +165,7 @@ const ModalConfirmProfile: React.FC = () => {
165165
</RowBetween>
166166

167167
<Text as="span" fontSize="14px" color={theme.subText}>
168-
<Trans>{connectSuccess ? renderContentSuccess() : renderContent()}</Trans>
168+
{connectSuccess ? renderContentSuccess() : renderContent()}
169169
</Text>
170170

171171
<Flex

‎src/components/Menu/FaucetModal.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -88,13 +88,13 @@ function FaucetModal() {
8888
body: JSON.stringify({ wallet: account, program: rewardData.program }),
8989
})
9090
const content = await rawResponse.json()
91+
9192
if (content) {
93+
const amount = rewardData?.amount ? getFullDisplayBalance(rewardData?.amount, token?.decimals) : 0
9294
notify({
9395
title: t`Request to Faucet - Submitted`,
9496
type: NotificationType.SUCCESS,
95-
summary: t`You will receive ${
96-
rewardData?.amount ? getFullDisplayBalance(rewardData?.amount, token?.decimals) : 0
97-
} ${tokenSymbol} soon!`,
97+
summary: t`You will receive ${amount} ${tokenSymbol} soon!`,
9898
})
9999
setRewardData(rw => {
100100
if (rw) {

‎src/components/Menu/NavDropDown.tsx

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { Trans } from '@lingui/macro'
21
import { ReactNode, useRef, useState } from 'react'
32
import { NavLink } from 'react-router-dom'
43
import { Text } from 'rebass'
@@ -65,9 +64,7 @@ export default function NavDropDown({
6564
<Wrapper>
6665
<TitleWrapper to={link} onClick={handleClick}>
6766
{icon}
68-
<Text flex={1}>
69-
<Trans>{title}</Trans>
70-
</Text>
67+
<Text flex={1}>{title}</Text>
7168
<DropdownIcon $isShow={isShowOptions} />
7269
</TitleWrapper>
7370
<LinkContainer $isShow={isShowOptions} ref={ref} $height={ref.current?.scrollHeight || 0}>

‎src/components/Modal/Drawer.tsx

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { Trans } from '@lingui/macro'
21
import { DialogContent, DialogOverlay } from '@reach/dialog'
32
import '@reach/dialog/styles.css'
43
import { AnimatePresence, motion } from 'framer-motion'
@@ -108,7 +107,7 @@ export default function Drawer({
108107
<Column width={'100%'} gap="12px">
109108
<Row width={'100%'} justify="space-between">
110109
<Text fontWeight={'500'} color={theme.text}>
111-
<Trans>{title}</Trans>
110+
{title}
112111
</Text>
113112
<X style={{ cursor: 'pointer' }} size={18} color={theme.subText} onClick={onDismiss} />
114113
</Row>

‎src/components/PoolList/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,7 @@ const PoolList = ({ currencies, searchValue, isShowOnlyActiveFarmPools, onlyShow
201201
<ClickableText>
202202
<Trans>Pool | AMP</Trans>
203203
</ClickableText>
204-
<InfoHelper text={AMP_HINT} />
204+
<InfoHelper text={AMP_HINT()} />
205205
</Flex>
206206
<Flex alignItems="center" justifyContent="flex-end">
207207
<ClickableText
@@ -212,7 +212,7 @@ const PoolList = ({ currencies, searchValue, isShowOnlyActiveFarmPools, onlyShow
212212
>
213213
<Flex>
214214
<Trans>AMP LIQUIDITY</Trans>
215-
<InfoHelper text={AMP_LIQUIDITY_HINT} />
215+
<InfoHelper text={AMP_LIQUIDITY_HINT()} />
216216
</Flex>
217217
{upToLarge ? <span /> : <span style={{ marginLeft: '0.25rem' }}>|</span>}
218218
<Flex>

‎src/components/PositionCard/index.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -512,6 +512,9 @@ export default function FullPositionCard({
512512
)
513513
}
514514

515+
const feeApr = tradingFeeAPR.toFixed(2)
516+
const farmApr = farmAPR.toFixed(2)
517+
515518
return (
516519
<StyledPositionCard border={border}>
517520
<Flex justifyContent="space-between">
@@ -575,10 +578,7 @@ export default function FullPositionCard({
575578
</Text>
576579
<Flex fontSize={12} color={theme.subText} marginTop="2px" alignItems="baseline" sx={{ gap: '4px' }}>
577580
<Flex alignItems="center" flexDirection="row">
578-
APR{' '}
579-
{tab === 'STAKED' && (
580-
<InfoHelper text={t`${tradingFeeAPR.toFixed(2)}% LP Fee + ${farmAPR.toFixed(2)}% Rewards`} size={14} />
581-
)}
581+
APR {tab === 'STAKED' && <InfoHelper text={t`${feeApr}% LP Fee + ${farmApr}% Rewards`} size={14} />}
582582
</Flex>
583583
<Text as="span" color={theme.apr} fontSize="20px" fontWeight={500}>
584584
{apr ? `${apr.toFixed(2)}%` : '--'}

‎src/components/ProAmm/ListPositions.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -253,14 +253,14 @@ const ListPositions = ({
253253
)}
254254

255255
<RowItem alignItems="flex-end">
256-
<Trans>
257-
<Text>
256+
<Text>
257+
<Trans>
258258
PRICE RANGE{' '}
259259
<Text as="span" sx={{ whiteSpace: 'nowrap' }}>
260260
({quoteCurrency.symbol} per {baseCurrency.symbol})
261261
</Text>
262-
</Text>
263-
</Trans>
262+
</Trans>
263+
</Text>
264264
</RowItem>
265265
</TableHeader>
266266
)

‎src/components/ProAmm/ProAmmPoolInfo.tsx

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -131,12 +131,13 @@ export default function ProAmmPoolInfo({
131131
{narrow && (
132132
<Flex sx={{ gap: '4px' }}>
133133
<Text fontSize={12}>
134-
<Trans>
135-
<Flex>
136-
<Text color={theme.subText}>Current Price:</Text>&nbsp;1 {tokenB.currency.symbol} ={' '}
137-
{position.pool.priceOf(tokenB.currency).toSignificant(10)} {tokenA.currency.symbol}
138-
</Flex>
139-
</Trans>
134+
<Flex>
135+
<Text color={theme.subText}>
136+
<Trans>Current Price:</Trans>
137+
</Text>
138+
&nbsp;1 {tokenB.currency.symbol} = {position.pool.priceOf(tokenB.currency).toSignificant(10)}{' '}
139+
{tokenA.currency.symbol}
140+
</Flex>
140141
</Text>
141142
<span onClick={onReversePrice} style={{ cursor: 'pointer' }}>
142143
<RotateSwapIcon rotated={rotated} size={12} />

‎src/components/ProAmm/ProAmmPriceRange.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@ export default function ProAmmPriceRange({
4141
setBaseCurrency(quoteCurrency)
4242
}, [quoteCurrency])
4343

44+
const baseSymbol = baseCurrency?.symbol
45+
const quoteSymbol = quoteCurrency?.symbol
4446
return (
4547
<OutlineCard marginTop="1rem" padding="1rem">
4648
<AutoColumn gap="12px">
@@ -94,7 +96,7 @@ export default function ProAmmPriceRange({
9496
<Trans>Min Price</Trans>
9597
</Text>
9698
<InfoHelper
97-
text={t`Your position will be 100% composed of ${baseCurrency?.symbol} at this price.`}
99+
text={t`Your position will be 100% composed of ${baseSymbol} at this price.`}
98100
placement={'right'}
99101
size={12}
100102
/>
@@ -112,7 +114,7 @@ export default function ProAmmPriceRange({
112114
<Trans>Max Price</Trans>
113115
</Text>
114116
<InfoHelper
115-
text={t`Your position will be 100% composed of ${quoteCurrency?.symbol} at this price.`}
117+
text={t`Your position will be 100% composed of ${quoteSymbol} at this price.`}
116118
placement={'right'}
117119
size={12}
118120
/>

0 commit comments

Comments
 (0)