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,6 +133,7 @@ const WalletDropdown = ({ setMenu }: { setMenu: (state: MenuState) => void }) =>
       )}
       <Divider />
       {isAuthenticated && (
+        <>
           <ToggleMenuItem data-testid="wallet-transactions" onClick={() => setMenu(MenuState.TRANSACTIONS)}>
             <DefaultText>
               <Trans>Transactions</Trans>{' '}
@@ -133,6 +147,16 @@ const WalletDropdown = ({ setMenu }: { setMenu: (state: MenuState) => void }) =>
               <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>