Skip to content

Commit e2a7eec

Browse files
tienkanetienkane
authored
Feat/remove tx and remove localization (#2561)
1 parent 8318738 commit e2a7eec

File tree

6 files changed

+162
-94
lines changed

6 files changed

+162
-94
lines changed

‎src/components/Menu/index.tsx

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import { ReactComponent as LightIcon } from 'assets/svg/light.svg'
1414
import { ReactComponent as RoadMapIcon } from 'assets/svg/roadmap.svg'
1515
import { ButtonEmpty, ButtonPrimary } from 'components/Button'
1616
import { AutoColumn } from 'components/Column'
17-
import ArrowRight from 'components/Icons/ArrowRight'
1817
import CampaignIcon from 'components/Icons/CampaignIcon'
1918
import Faucet from 'components/Icons/Faucet'
2019
import Icon from 'components/Icons/Icon'
@@ -28,7 +27,6 @@ import Toggle from 'components/Toggle'
2827
import { TutorialIds } from 'components/Tutorial/TutorialSwap/constant'
2928
import { ENV_LEVEL, TAG } from 'constants/env'
3029
import { AGGREGATOR_ANALYTICS_URL, APP_PATHS, TERM_FILES_PATH } from 'constants/index'
31-
import { getLocaleLabel } from 'constants/locales'
3230
import { FAUCET_NETWORKS } from 'constants/networks'
3331
import { ENV_TYPE } from 'constants/type'
3432
import { useActiveWeb3React } from 'hooks'
@@ -39,7 +37,7 @@ import { PROFILE_MANAGE_ROUTES } from 'pages/NotificationCenter/const'
3937
import { ApplicationModal } from 'state/application/actions'
4038
import { useModalOpen, useToggleModal } from 'state/application/hooks'
4139
import { useTutorialSwapGuide } from 'state/tutorial/hooks'
42-
import { useHolidayMode, useUserLocale } from 'state/user/hooks'
40+
import { useHolidayMode } from 'state/user/hooks'
4341
import { ExternalLink, MEDIA_WIDTHS } from 'theme'
4442
import { isChristmasTime } from 'utils'
4543

@@ -207,7 +205,6 @@ export default function Menu() {
207205
const [holidayMode, toggleHolidayMode] = useHolidayMode()
208206
const [isSelectingLanguage, setIsSelectingLanguage] = useState(false)
209207

210-
const userLocale = useUserLocale()
211208
const location = useLocation()
212209

213210
const { mixpanelHandler } = useMixpanel()
@@ -523,22 +520,6 @@ export default function Menu() {
523520
<Trans>Notification Center</Trans>
524521
<MailIcon size={17} color={theme.text} />
525522
</NavLinkBetween>
526-
<NavLinkBetween
527-
onClick={() => {
528-
setIsSelectingLanguage(true)
529-
handlePreferenceClickMixpanel('Language')
530-
}}
531-
>
532-
<Trans>Language</Trans>
533-
<ButtonEmpty
534-
padding="0"
535-
width="fit-content"
536-
style={{ color: theme.text, textDecoration: 'none', fontSize: '14px' }}
537-
>
538-
{getLocaleLabel(userLocale, true)}&nbsp;&nbsp;
539-
<ArrowRight fill={theme.text} />
540-
</ButtonEmpty>
541-
</NavLinkBetween>
542523

543524
<Divider />
544525

‎src/components/WalletPopup/Transactions/index.tsx

Lines changed: 143 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,33 @@
11
import { Trans, t } from '@lingui/macro'
22
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
3-
import { Info } from 'react-feather'
3+
import { Info, X } from 'react-feather'
4+
import { useMedia } from 'react-use'
45
import AutoSizer from 'react-virtualized-auto-sizer'
56
import { VariableSizeList } from 'react-window'
67
import { Flex, Text } from 'rebass'
78
import styled, { CSSProperties } from 'styled-components'
89

10+
import { ButtonOutlined, ButtonPrimary } from 'components/Button'
11+
import InfoHelper from 'components/InfoHelper'
12+
import Modal from 'components/Modal'
13+
import Row, { RowBetween } from 'components/Row'
914
import Tab from 'components/WalletPopup/Transactions/Tab'
1015
import { NUMBERS } from 'components/WalletPopup/Transactions/helper'
1116
import useCancellingOrders, { CancellingOrderInfo } from 'components/swapv2/LimitOrder/useCancellingOrders'
1217
import { useActiveWeb3React } from 'hooks'
1318
import { fetchListTokenByAddresses, findCacheToken, useIsLoadedTokenDefault } from 'hooks/Tokens'
1419
import { isSupportKyberDao } from 'hooks/kyberdao'
1520
import useTheme from 'hooks/useTheme'
21+
import { useAppDispatch } from 'state/hooks'
22+
import { clearAllPendingTransactions } from 'state/transactions/actions'
1623
import { useSortRecentTransactions } from 'state/transactions/hooks'
1724
import {
1825
TRANSACTION_GROUP,
1926
TransactionDetails,
2027
TransactionExtraInfo1Token,
2128
TransactionExtraInfo2Token,
2229
} from 'state/transactions/type'
30+
import { MEDIA_WIDTHS } from 'theme'
2331

2432
import TransactionItem from './TransactionItem'
2533

@@ -50,6 +58,28 @@ const Wrapper = styled.div`
5058
gap: 12px;
5159
`
5260

61+
const ClearTxButton = styled.div`
62+
cursor: pointer;
63+
color: ${({ theme }) => theme.primary};
64+
font-size: 14px;
65+
display: flex;
66+
align-items: center;
67+
gap: 5px;
68+
`
69+
70+
const ClearTxWrapper = styled.div`
71+
padding: 20px;
72+
border-radius: 20px;
73+
background-color: ${({ theme }) => theme.tableHeader};
74+
display: flex;
75+
flex-direction: column;
76+
align-items: center;
77+
justify-content: center;
78+
gap: 24px;
79+
width: 100%;
80+
color: ${({ theme }) => theme.subText};
81+
`
82+
5383
function RowItem({
5484
index,
5585
style,
@@ -107,24 +137,23 @@ function RowItem({
107137
// This is intentional, we don't need to persist in localStorage
108138
let storedActiveTab = ''
109139
function ListTransaction({ isMinimal }: { isMinimal: boolean }) {
110-
const listTab = useMemo(
111-
() => [
112-
{ title: t`All`, value: '' },
113-
{ title: t`Swaps`, value: TRANSACTION_GROUP.SWAP },
114-
{ title: t`Liquidity`, value: TRANSACTION_GROUP.LIQUIDITY },
115-
{ title: t`KyberDAO`, value: TRANSACTION_GROUP.KYBERDAO },
116-
{ title: t`Others`, value: TRANSACTION_GROUP.OTHER },
117-
],
118-
[],
119-
)
120-
121140
const transactions = useSortRecentTransactions(false)
122-
const { chainId } = useActiveWeb3React()
123-
const [activeTab, setActiveTab] = useState<TRANSACTION_GROUP | string>(storedActiveTab)
124141
const theme = useTheme()
125142
const cancellingOrderInfo = useCancellingOrders()
143+
const dispatch = useAppDispatch()
144+
const { chainId } = useActiveWeb3React()
145+
146+
const [activeTab, setActiveTab] = useState<TRANSACTION_GROUP | string>(storedActiveTab)
147+
const [openClearTxModal, setOpenClearTxModal] = useState(false)
148+
const upToExtraSmall = useMedia(`(max-width: ${MEDIA_WIDTHS.upToExtraSmall}px)`)
126149

127150
const listTokenAddress = useRef<string[]>([])
151+
const rowHeights = useRef<{ [key: string]: number }>({})
152+
const listRef = useRef<any>(null)
153+
154+
const total = listTokenAddress.current
155+
const isLoadedTokenDefault = useIsLoadedTokenDefault()
156+
128157
const pushAddress = (address: string) => {
129158
if (address && !listTokenAddress.current.includes(address)) listTokenAddress.current.push(address)
130159
}
@@ -147,22 +176,34 @@ function ListTransaction({ isMinimal }: { isMinimal: boolean }) {
147176
return result
148177
}, [transactions, activeTab])
149178

150-
const total = listTokenAddress.current
151-
const isLoadedTokenDefault = useIsLoadedTokenDefault()
152-
useEffect(() => {
153-
if (!isLoadedTokenDefault) return
154-
const list: string[] = listTokenAddress.current.filter(address => !findCacheToken(address))
155-
if (list.length) fetchListTokenByAddresses(list, chainId).catch(console.error)
156-
}, [total, isLoadedTokenDefault, chainId])
179+
const pendingTransactions = formatTransactions.filter(tx => !tx.receipt)
180+
181+
const listTab = useMemo(
182+
() => [
183+
{ title: t`All`, value: '' },
184+
{ title: t`Swaps`, value: TRANSACTION_GROUP.SWAP },
185+
{ title: t`Liquidity`, value: TRANSACTION_GROUP.LIQUIDITY },
186+
{ title: t`KyberDAO`, value: TRANSACTION_GROUP.KYBERDAO },
187+
{ title: t`Others`, value: TRANSACTION_GROUP.OTHER },
188+
],
189+
[],
190+
)
191+
192+
const filterTab = useMemo(() => {
193+
return listTab.filter(tab => {
194+
if (tab.value === TRANSACTION_GROUP.KYBERDAO) {
195+
return isSupportKyberDao(chainId)
196+
}
197+
return true
198+
})
199+
}, [chainId, listTab])
157200

158201
const onRefChange = useCallback((node: HTMLDivElement) => {
159202
if (!node?.classList.contains('scrollbar')) {
160203
node?.classList.add('scrollbar')
161204
}
162205
}, [])
163206

164-
const rowHeights = useRef<{ [key: string]: number }>({})
165-
const listRef = useRef<any>(null)
166207
const setRowHeight = useCallback((index: number, size: number) => {
167208
listRef.current?.resetAfterIndex(0)
168209
rowHeights.current = { ...rowHeights.current, [index]: size }
@@ -172,59 +213,92 @@ function ListTransaction({ isMinimal }: { isMinimal: boolean }) {
172213
return rowHeights.current[index] || 100
173214
}
174215

216+
const toggleClearTxModal = () => setOpenClearTxModal(prev => !prev)
217+
const onClearAllPendingTransactions = () => {
218+
dispatch(clearAllPendingTransactions({ chainId }))
219+
toggleClearTxModal()
220+
}
221+
222+
useEffect(() => {
223+
if (!isLoadedTokenDefault) return
224+
const list: string[] = listTokenAddress.current.filter(address => !findCacheToken(address))
225+
if (list.length) fetchListTokenByAddresses(list, chainId).catch(console.error)
226+
}, [total, isLoadedTokenDefault, chainId])
227+
175228
useEffect(() => {
176229
storedActiveTab = activeTab
177230
}, [activeTab])
178231

179-
const filterTab = useMemo(() => {
180-
return listTab.filter(tab => {
181-
if (tab.value === TRANSACTION_GROUP.KYBERDAO) {
182-
return isSupportKyberDao(chainId)
183-
}
184-
return true
185-
})
186-
}, [chainId, listTab])
187-
188232
return (
189-
<Wrapper>
190-
<Tab<TRANSACTION_GROUP | string> activeTab={activeTab} setActiveTab={setActiveTab} tabs={filterTab} />
191-
<ContentWrapper>
192-
{formatTransactions.length === 0 ? (
193-
<Flex flexDirection="column" alignItems="center" color={theme.subText} sx={{ gap: 10, marginTop: '20px' }}>
194-
<Info size={32} />
195-
<Text fontSize={'14px'}>
196-
<Trans>You have no Transaction History.</Trans>
233+
<>
234+
<Modal isOpen={openClearTxModal} onDismiss={toggleClearTxModal}>
235+
<ClearTxWrapper>
236+
<RowBetween align="start">
237+
<Text fontSize={20} fontWeight={500} color={theme.text}>
238+
{t`Clear All Pending Transactions`}
239+
</Text>
240+
<X color={theme.text} style={{ cursor: 'pointer' }} onClick={toggleClearTxModal} />
241+
</RowBetween>
242+
<Row gap="12px">
243+
<Text fontSize={14} color={theme.text} lineHeight="16px">
244+
{t`Are you sure you want to clear all pending transactions? This will remove them from your list but will not affect their status on-chain.`}
197245
</Text>
198-
</Flex>
199-
) : (
200-
<AutoSizer>
201-
{({ height, width }) => (
202-
<VariableSizeList
203-
height={height}
204-
width={width}
205-
itemSize={getRowHeight}
206-
ref={listRef}
207-
outerRef={onRefChange}
208-
itemCount={formatTransactions.length}
209-
itemData={formatTransactions}
210-
>
211-
{({ data, index, style }) => (
212-
<RowItem
213-
isMinimal={isMinimal}
214-
style={style}
215-
transaction={data[index]}
216-
index={index}
217-
key={data[index].hash}
218-
setRowHeight={setRowHeight}
219-
cancellingOrderInfo={cancellingOrderInfo}
220-
/>
221-
)}
222-
</VariableSizeList>
223-
)}
224-
</AutoSizer>
246+
</Row>
247+
<Row gap="16px" flexDirection={upToExtraSmall ? 'column' : 'row'}>
248+
<ButtonOutlined onClick={toggleClearTxModal}>{t`Cancel`}</ButtonOutlined>
249+
<ButtonPrimary onClick={onClearAllPendingTransactions}>{t`Clear All`}</ButtonPrimary>
250+
</Row>
251+
</ClearTxWrapper>
252+
</Modal>
253+
<Wrapper>
254+
<Tab<TRANSACTION_GROUP | string> activeTab={activeTab} setActiveTab={setActiveTab} tabs={filterTab} />
255+
<ContentWrapper>
256+
{formatTransactions.length === 0 ? (
257+
<Flex flexDirection="column" alignItems="center" color={theme.subText} sx={{ gap: 10, marginTop: '20px' }}>
258+
<Info size={32} />
259+
<Text fontSize={'14px'}>
260+
<Trans>You have no Transaction History.</Trans>
261+
</Text>
262+
</Flex>
263+
) : (
264+
<AutoSizer>
265+
{({ height, width }) => (
266+
<VariableSizeList
267+
height={height}
268+
width={width}
269+
itemSize={getRowHeight}
270+
ref={listRef}
271+
outerRef={onRefChange}
272+
itemCount={formatTransactions.length}
273+
itemData={formatTransactions}
274+
>
275+
{({ data, index, style }) => (
276+
<RowItem
277+
isMinimal={isMinimal}
278+
style={style}
279+
transaction={data[index]}
280+
index={index}
281+
key={data[index].hash}
282+
setRowHeight={setRowHeight}
283+
cancellingOrderInfo={cancellingOrderInfo}
284+
/>
285+
)}
286+
</VariableSizeList>
287+
)}
288+
</AutoSizer>
289+
)}
290+
</ContentWrapper>
291+
{pendingTransactions.length !== 0 && (
292+
<ClearTxButton>
293+
<Text fontSize={14} onClick={toggleClearTxModal}>{t`Clear Pending Transactions`}</Text>
294+
<InfoHelper
295+
color={theme.primary}
296+
text={t`Manually clear this transaction from the pending list. This will not affect its on-chain status.`}
297+
/>
298+
</ClearTxButton>
225299
)}
226-
</ContentWrapper>
227-
</Wrapper>
300+
</Wrapper>
301+
</>
228302
)
229303
}
230304

‎src/components/WalletPopup/WalletView.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,8 @@ const Wrapper = styled.div.attrs<WrapperProps>(props => ({
5555
'data-blur': props.$blur,
5656
}))<WrapperProps>`
5757
width: 100%;
58-
height: 100%;
58+
/* height: 100%; */
59+
height: unset;
5960
padding-top: 0px;
6061
6162
display: flex;
@@ -77,7 +78,6 @@ const Wrapper = styled.div.attrs<WrapperProps>(props => ({
7778
7879
${({ theme }) => theme.mediaWidth.upToMedium`
7980
padding-bottom: 0;
80-
height: unset;
8181
`};
8282
`
8383

‎src/state/transactions/actions.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ export const addTransaction = createAction<TransactionPayload>('transactions/add
77

88
export const clearAllTransactions = createAction<{ chainId: ChainId }>('transactions/clearAllTransactions')
99

10+
export const clearAllPendingTransactions = createAction<{ chainId: ChainId }>(
11+
'transactions/clearAllPendingTransactions',
12+
)
13+
1014
export const finalizeTransaction = createAction<{
1115
chainId: ChainId
1216
hash: string

‎src/state/transactions/reducer.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { getTransactionGroupByType } from 'utils/transaction'
77
import {
88
addTransaction,
99
checkedTransaction,
10+
clearAllPendingTransactions,
1011
clearAllTransactions,
1112
finalizeTransaction,
1213
modifyTransaction,
@@ -65,6 +66,14 @@ export default createReducer(initialState, builder =>
6566
if (!transactions[chainId]) return
6667
transactions[chainId] = {}
6768
})
69+
.addCase(clearAllPendingTransactions, (transactions, { payload: { chainId } }) => {
70+
if (!transactions[chainId]) return
71+
const pendingTxHash: string[] = []
72+
Object.keys(transactions[chainId] || {}).forEach(txHash => {
73+
if (!transactions[chainId]?.[txHash]?.find(tx => tx.receipt)) pendingTxHash.push(txHash)
74+
})
75+
pendingTxHash.forEach(txHash => delete transactions[chainId]?.[txHash])
76+
})
6877
.addCase(checkedTransaction, (transactions, { payload: { chainId, hash, blockNumber } }) => {
6978
const tx = findTx(transactions[chainId], hash)
7079
if (!tx) return

0 commit comments

Comments
 (0)