ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add inline preview of pending txn in wallet dropdown (#5616)

Browse Source 
* it looks good

* sort by latest timestamp and show latest only

* jordan comment
This commit is contained in:
lynn 2022-12-09 15:34:55 -05:00 committed by GitHub
parent 185c1f6772
commit dd5a22ce83
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 38 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/WalletDropdown/DefaultMenu.tsx
View File

@ -1,5 +1,6 @@
import { Trans } from '@lingui/macro' import { Trans } from '@lingui/macro'
import { useWeb3React } from '@web3-react/core' import { useWeb3React } from '@web3-react/core'
import { TransactionSummary } from 'components/AccountDetailsV2'
import { ButtonPrimary } from 'components/Button' import { ButtonPrimary } from 'components/Button'
import { useActiveLocale } from 'hooks/useActiveLocale' import { useActiveLocale } from 'hooks/useActiveLocale'
import { useMemo } from 'react' import { useMemo } from 'react'
@ -63,9 +64,17 @@ const FlexContainer = styled.div`
display: flex; display: flex;
` `
const LatestPendingTxnBox = styled(FlexContainer)`
display: flex;
border-radius: 12px;
background-color: ${({ theme }) => theme.backgroundModule};
align-items: center;
gap: 8px;
`
const PendingBadge = styled.span` const PendingBadge = styled.span`
background-color: ${({ theme }) => theme.accentActionSoft}; background-color: ${({ theme }) => theme.accentActionSoft};
color: ${({ theme }) => theme.deprecated_primary3}; color: ${({ theme }) => theme.accentAction};
font-weight: 600; font-weight: 600;
padding: 4px 8px; padding: 4px 8px;
border-radius: 4px; border-radius: 4px;
@ -108,6 +117,10 @@ const WalletDropdown = ({ setMenu }: { setMenu: (state: MenuState) => void }) =>
() => Object.values(allTransactions).filter((tx) => !tx.receipt), () => Object.values(allTransactions).filter((tx) => !tx.receipt),
[allTransactions] [allTransactions]
) )
const latestPendingTransaction =
pendingTransactions.length > 0
? pendingTransactions.sort((tx1, tx2) => tx2.addedTime - tx1.addedTime)[0]
: undefined
return ( return (
<DefaultMenuWrap> <DefaultMenuWrap>
@ -120,19 +133,30 @@ const WalletDropdown = ({ setMenu }: { setMenu: (state: MenuState) => void }) =>
)} )}
<Divider /> <Divider />
{isAuthenticated && ( {isAuthenticated && (
<ToggleMenuItem data-testid="wallet-transactions" onClick={() => setMenu(MenuState.TRANSACTIONS)}> <>
<DefaultText> <ToggleMenuItem data-testid="wallet-transactions" onClick={() => setMenu(MenuState.TRANSACTIONS)}>
<Trans>Transactions</Trans>{' '} <DefaultText>
{pendingTransactions.length > 0 && ( <Trans>Transactions</Trans>{' '}
<PendingBadge> {pendingTransactions.length > 0 && (
{pendingTransactions.length} <Trans>Pending</Trans> <PendingBadge>
</PendingBadge> {pendingTransactions.length} <Trans>Pending</Trans>
)} </PendingBadge>
</DefaultText> )}
<IconWrap> </DefaultText>
<ChevronRight size={16} strokeWidth={3} /> <IconWrap>
</IconWrap> <ChevronRight size={16} strokeWidth={3} />
</ToggleMenuItem> </IconWrap>
</ToggleMenuItem>
{!!latestPendingTransaction && (
<LatestPendingTxnBox>
<TransactionSummary
key={latestPendingTransaction.hash}
transactionDetails={latestPendingTransaction}
isLastTransactionInList={true}
/>
</LatestPendingTxnBox>
)}
</>
)} )}
<ToggleMenuItem data-testid="wallet-select-language" onClick={() => setMenu(MenuState.LANGUAGE)}> <ToggleMenuItem data-testid="wallet-select-language" onClick={() => setMenu(MenuState.LANGUAGE)}>
<DefaultText> <DefaultText>