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

* it looks good

* sort by latest timestamp and show latest only

* jordan comment

src/components/WalletDropdown/DefaultMenu.tsx

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