feat(wallet): Transactions in Wallet Panel

components/brave_wallet/browser/brave_wallet_constants.h

@@ -450,6 +450,18 @@ constexpr webui::LocalizedString kLocalizedStrings[] = {
      IDS_BRAVE_WALLET_TRANSACTION_STATUS_CONFIRMED},
     {"braveWalletTransactionStatusError",
      IDS_BRAVE_WALLET_TRANSACTION_STATUS_ERROR},
+    {"braveWalletRecentTransactions", IDS_BRAVE_WALLET_RECENT_TRANSACTIONS},
+    {"braveWalletTransactionDetails", IDS_BRAVE_WALLET_TRANSACTION_DETAILS},
+    {"braveWalletTransactionDetailDate",
+     IDS_BRAVE_WALLET_TRANSACTION_DETAIL_DATE},
+    {"braveWalletTransactionDetailSpeedUp",
+     IDS_BRAVE_WALLET_TRANSACTION_DETAIL_SPEEDUP},
+    {"braveWalletTransactionDetailHash",
+     IDS_BRAVE_WALLET_TRANSACTION_DETAIL_HASH},
+    {"braveWalletTransactionDetailNetwork",
+     IDS_BRAVE_WALLET_TRANSACTION_DETAIL_NETWORK},
+    {"braveWalletTransactionDetailStatus",
+     IDS_BRAVE_WALLET_TRANSACTION_DETAIL_STATUS},
     {"braveWalletTransactionPlaceholder",
      IDS_BRAVE_WALLET_TRANSACTION_PLACEHOLDER},
     {"braveWalletTransactionApproveUnlimited",

components/brave_wallet_ui/components/extension/connected-bottom-nav/index.tsx

@@ -6,11 +6,12 @@ import { reduceNetworkDisplayName } from '../../../utils/network-utils'
 // Styled Components
 import {
   StyledWrapper,
-  // AppsIcon,
+  LightningBoltIcon,
   NavButton,
   NavButtonText,
   NavDivider,
-  NavOutline
+  NavOutline,
+  TransactionsButton
 } from './style'
 
 import { BraveWallet, PanelTypes } from '../../../constants/types'
@@ -55,11 +56,10 @@ function ConnectedBottomNav (props: Props) {
             <NavButtonText disabled={isSwapDisabled}>{getLocale('braveWalletSwap')}</NavButtonText>
           </NavButton>
         </PanelTooltip>
-        {/* <NavDivider /> */}
-        {/* Temp commented out for MVP */}
-        {/* <NavButton onClick={navigate('apps')}>
-          <AppsIcon />
-        </NavButton> */}
+        <NavDivider />
+        <TransactionsButton onClick={navigate('transactions')}>
+          <LightningBoltIcon />
+        </TransactionsButton>
       </NavOutline>
     </StyledWrapper>
   )

components/brave_wallet_ui/components/extension/connected-bottom-nav/style.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import UnCheckStar from '../../../assets/svg-icons/star-unchecked.svg'
+import LightningBolt from '../../../assets/svg-icons/lightning-bolt-icon.svg'
 import { WalletButton } from '../../shared/style'
 
 interface StyleProps {
@@ -58,10 +58,22 @@ export const NavButtonText = styled.span<StyleProps>`
   opacity: ${(p) => p.disabled ? '0.6' : '1'};
 `
 
-export const AppsIcon = styled.div`
+export const TransactionsButton = styled(WalletButton) <StyleProps>`
+  display: flex;
+  height: 100%;
+  width: 50px;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  outline: none;
+  border: none;
+  background: none;
+`
+
+export const LightningBoltIcon = styled.div`
   width: 18px;
   height: 18px;
   background-color: ${(p) => p.theme.palette.white};
-  -webkit-mask-image: url(${UnCheckStar});
-  mask-image: url(${UnCheckStar});
+  -webkit-mask-image: url(${LightningBolt});
+  mask-image: url(${LightningBolt});
 `

components/brave_wallet_ui/components/extension/index.ts

@@ -19,6 +19,9 @@ import EditGas from './edit-gas'
 import SitePermissions from './site-permissions-panel'
 import ConnectedAccountItem from './connected-account-item'
 import AddSuggestedTokenPanel from './add-suggested-token-panel'
+import TransactionsPanel from './transactions-panel'
+import TransactionsListItem from './transaction-list-item'
+import TransactionDetailPanel from './transaction-detail-panel'
 import { NavButton } from './buttons'
 
 export {
@@ -43,5 +46,8 @@ export {
   EditGas,
   SitePermissions,
   ConnectedAccountItem,
-  AddSuggestedTokenPanel
+  AddSuggestedTokenPanel,
+  TransactionsPanel,
+  TransactionsListItem,
+  TransactionDetailPanel
 }

components/brave_wallet_ui/components/extension/panel-tooltip/style.ts

@@ -15,7 +15,7 @@ export const Tip = styled.div<StyleProps>`
   position: absolute;
   border-radius: 4px;
   left: 50%;
-  transform: ${(p) => p.position === 'right' ? 'translateX(calc(-50% + 30px))' : 'translateX(calc(-50% - 30px))'} translateY(25%);
+  transform: ${(p) => p.position === 'right' ? 'translateX(calc(-50% + 40px))' : 'translateX(calc(-50% - 40px))'} translateY(25%);
   padding: 6px;
   color: ${(p) => p.theme.palette.white};
   background: ${(p) => p.theme.palette.black};

components/brave_wallet_ui/components/extension/shared-panel-styles.ts

@@ -1,7 +1,9 @@
 import styled from 'styled-components'
+import { BraveWallet } from '../../constants/types'
 
 interface StyleProps {
   orb: string
+  status: BraveWallet.TransactionStatus
 }
 
 export const StyledWrapper = styled.div`
@@ -95,3 +97,44 @@ export const TabRow = styled.div`
   width: 255px;
   margin-bottom: 10px;
 `
+
+export const StatusBubble = styled.div<Partial<StyleProps>>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 10px;
+  height: 10px;
+  border-radius: 100%;
+  opacity: ${(p) => p.status === 3 || p.status === 1 || p.status === 0 ? 0.4 : 1};
+  background-color: ${(p) => p.status === 4 || p.status === 1
+    ? '#2AC194'
+    : p.status === 2 || p.status === 5 ? '#EE6374'
+      : p.status === 0 ? p.theme.color.interactive08 : p.theme.color.warningIcon
+  };
+  margin-right: 6px;
+`
+
+export const DetailTextDarkBold = styled.span`
+  font-family: Poppins;
+  font-size: 12px;
+  line-height: 18px;
+  letter-spacing: 0.01em;
+  font-weight: 600;
+  color: ${(p) => p.theme.color.text02};
+`
+
+export const DetailTextLight = styled.span`
+  font-family: Poppins;
+  font-size: 12px;
+  line-height: 18px;
+  letter-spacing: 0.01em;
+  color: ${(p) => p.theme.color.text03};
+`
+
+export const DetailTextDark = styled.span`
+  font-family: Poppins;
+  font-size: 12px;
+  line-height: 18px;
+  letter-spacing: 0.01em;
+  color: ${(p) => p.theme.color.text02};
+`