+ {
+ setOnboardingScreen(null);
+ refetchGasTankBalance();
+ }}
+ initialBalance={totalBalance}
+ setSearching={() => {
+ setIsSearchingFromTopup(true);
+ setSearching(true);
+ }}
+ selectedToken={topupToken}
+ portfolioTokens={portfolioTokens}
+ setOnboardingScreen={setOnboardingScreen}
+ markOnboardingComplete={() => {}}
+ isPortfolioLoading={isPortfolioLoading}
+ hasPortfolioData={hasPortfolioLoaded}
+ showCloseButton={true}
+ />
+
+ );
+ }
+
+
+// ... existing code ...
+
+ // Main Gas Tank display
+ return (
+
+
+ {/* PillarX Logo */}
+
+ );
+};
diff --git a/src/apps/gas-tank/components/Balance/GasTankBalanceCard.tsx b/src/apps/gas-tank/components/Balance/GasTankBalanceCard.tsx
new file mode 100755
index 00000000..c9cbc5dd
--- /dev/null
+++ b/src/apps/gas-tank/components/Balance/GasTankBalanceCard.tsx
@@ -0,0 +1,100 @@
+import { ProcessedGasTankTransaction } from '../../types/gasTank';
+import { TailSpin } from 'react-loader-spinner';
+import GasTankIcon from '../../../pulse/assets/gas-tank-icon.svg';
+
+interface GasTankBalanceCardProps {
+ balance: number;
+ isLoading: boolean;
+ transactions: ProcessedGasTankTransaction[];
+ onTopUpClick: () => void;
+}
+
+/**
+ * Gas tank balance card component
+ * Displays: balance, "On All Networks" subtitle, total spend, and top-up button
+ */
+export const GasTankBalanceCard: React.FC
+ 
+
+
+ {/* Container with specific gradient background */}
+
+ {/* Main content - Flex column on mobile, Row on larger screens */}
+
+
+ {/* Left card - Balance */}
+ {isBalanceLoading ? (
+ setOnboardingScreen('topup')}
+ />
+ )}
+
+ {/* Right card - History */}
+ {isHistoryLoading && transactions.length === 0 ? (
+
+
+ {/* Background Vectors Removed */}
+
+ {/* Header with icon */}
+
+ );
+};
diff --git a/src/apps/gas-tank/components/History/GasTankHistoryCard.tsx b/src/apps/gas-tank/components/History/GasTankHistoryCard.tsx
new file mode 100755
index 00000000..595d5664
--- /dev/null
+++ b/src/apps/gas-tank/components/History/GasTankHistoryCard.tsx
@@ -0,0 +1,252 @@
+import { useMemo, useState, useEffect, useRef } from 'react';
+import { ProcessedGasTankTransaction } from '../../types/gasTank';
+import { TransactionRow } from './TransactionRow';
+import { SkeletonTransactionRow } from './GasTankSkeleton';
+import HistoryIcon from '../../assets/history.svg';
+
+interface GasTankHistoryCardProps {
+ transactions: ProcessedGasTankTransaction[];
+ isLoading: boolean;
+ error: Error | null;
+ onRetry: () => void;
+}
+
+type SortKey = 'date' | 'type' | 'amount' | 'token';
+type SortDirection = 'asc' | 'desc';
+
+interface SortConfig {
+ key: SortKey;
+ direction: SortDirection;
+}
+
+/**
+ * Gas tank history card with sortable columns
+ * Displays transactions with Date, Type, Amount, and Token columns
+ */
+export const GasTankHistoryCard: React.FC
+ {/* Group 1171278651 */}
+
+
+ {/* Balance display */}
+
+ 
+
+
+ Universal Gas Tank
+
+
+ {isLoading ? (
+
+
+ {/* Top up button */}
+
+
+ ) : (
+
+
+ ${balance.toFixed(2)}
+
+
+ On All Networks
+
+
+ )}
+
+
+
+
+ {/* Subtitle */}
+
+
+ Top up your Gas Tank so you pay for network fees on every chain.
+
+
+
+ {/* Total spend badge - If user meant "balance needs to be on bottom", maybe they meant "Total Spend"? Positioned here. */}
+ {totalSpend > 0 && (
+
+
+ Total Spend: ${totalSpend.toFixed(2)}
+
+
+ )}
+
+ {/* Description */}
+
+
+ + The PillarX Gas Tank is your universal balance for covering transaction + fees across all networks. When you top up your Tank, you’re allocating + tokens specifically for paying gas. You can increase your balance + anytime, and the tokens in your Tank can be used to pay network fees on + any supported chain. +
+
+ {/* Up arrow */}
+
+ {/* Down arrow */}
+
+
+ );
+ };
+
+ const visibleTransactions = sortedTransactions.slice(0, displayedLimit);
+ const loaderRef = useRef
+ {/* Background Vectors Removed */}
+
+ {/* Header */}
+
+ );
+};
diff --git a/src/apps/gas-tank/components/History/GasTankSkeleton.tsx b/src/apps/gas-tank/components/History/GasTankSkeleton.tsx
new file mode 100755
index 00000000..e92d513d
--- /dev/null
+++ b/src/apps/gas-tank/components/History/GasTankSkeleton.tsx
@@ -0,0 +1,85 @@
+/**
+ * Skeleton loading components for gas tank
+ */
+
+/**
+ * Skeleton row for transaction history loading state
+ */
+export const SkeletonTransactionRow: React.FC = () => (
+
+
+
+ {/* Column Headers */}
+
+ 
+
+ + Gas Tank History +
+
+
+
+
+
+
+
+ {/* Content */}
+
+ {error ? (
+
+
+
+ ) : isLoading ? (
+ + Failed to load history +
+ +
+ {[...Array(4)].map((_, i) => (
+
+ ) : sortedTransactions.length === 0 ? (
+
+
+ ) : (
+ <>
+ {visibleTransactions.map((tx) => (
+ No transactions yet
+
+ {/* Date skeleton */}
+
+);
+
+/**
+ * Skeleton balance card
+ */
+export const SkeletonBalanceCard: React.FC = () => (
+
+
+
+
+
+ {/* Type skeleton */}
+
+
+
+
+ {/* Amount skeleton */}
+
+
+
+
+ {/* Token skeleton */}
+
+
+
+
+
+ {/* Header skeleton */}
+
+);
+
+/**
+ * Skeleton history card
+ */
+export const SkeletonHistoryCard: React.FC = () => (
+
+
+
+
+
+ {/* Balance skeleton */}
+
+
+
+
+
+ {/* Button skeleton */}
+
+
+ {/* Total spend skeleton */}
+
+
+ {/* Header skeleton */}
+
+);
diff --git a/src/apps/gas-tank/components/History/TransactionRow.tsx b/src/apps/gas-tank/components/History/TransactionRow.tsx
new file mode 100755
index 00000000..5239926c
--- /dev/null
+++ b/src/apps/gas-tank/components/History/TransactionRow.tsx
@@ -0,0 +1,95 @@
+import { ProcessedGasTankTransaction } from '../../types/gasTank';
+import { getLogoForChainId, getBlockScan } from '../../../../utils/blockchain';
+import moment from 'moment';
+
+interface TransactionRowProps {
+ transaction: ProcessedGasTankTransaction;
+}
+
+/**
+ * Individual transaction row component
+ * Displays: Date | Type | Amount | Chain Icon
+ * Clickable to open block explorer if transaction hash is available
+ */
+export const TransactionRow: React.FC
+
+
+
+
+ {/* Column headers skeleton */}
+
+
+
+
+
+
+
+ {/* Transaction rows skeleton */}
+
+ {[...Array(3)].map((_, i) => (
+
+
+ {/* Date Column */}
+
+ );
+};
diff --git a/src/apps/gas-tank/hooks/useGasTankHistory.ts b/src/apps/gas-tank/hooks/useGasTankHistory.ts
new file mode 100755
index 00000000..cf599462
--- /dev/null
+++ b/src/apps/gas-tank/hooks/useGasTankHistory.ts
@@ -0,0 +1,145 @@
+import { useState, useEffect } from 'react';
+import { utils } from 'ethers';
+import {
+ GasTankHistoryTransaction,
+ GasTankHistoryResponse,
+ ProcessedGasTankTransaction,
+ UseGasTankHistoryReturn,
+} from '../types/gasTank';
+
+/**
+ * Hook for fetching and processing gas tank transaction history
+ * Handles API calls, data transformation, and USDC amount conversion
+ */
+export const useGasTankHistory = (
+ walletAddress: string | null
+): UseGasTankHistoryReturn => {
+ const [transactions, setTransactions] = useState
+
+ {formattedDate},
+
+
+ {formattedTime}
+
+
+
+ {/* Type Column */}
+
+
+ {transaction.type}
+
+
+
+ {/* Amount Column */}
+
+
+ {transaction.displayAmount}
+
+
+
+ {/* Token with Chain Icon Column */}
+
+
+
+ {/* Main Token Logo - using provided logo or default generic icon if missing */}
+ 
+
+ {/* Chain Badge - Bottom Right */}
+ {chainLogo && (
+
+
+ {transaction.usdcAmount} {transaction.tokenSymbol}
+
+
+ 
+
+ )}
+
+ {/* Header with icon */}
+
+
+ {/* Right Panel: History */}
+
+
+
+ {/* Balance */}
+
+
+
+
+ Universal Gas Tank
+
+
+ {isBalanceLoading ? (
+
+
+ {/* Description */}
+
+
+ ${totalBalance.toFixed(2)}
+
+
+ On All Networks
+
+
+ )}
+
+
+ + The PillarX Gas Tank is your universal balance for covering transaction + fees across all networks. +
+
+ {/* Column Headers */}
+
+
+
+
+ {/* List */}
+
+ Date
+
+
+ Type
+
+
+ Amount
+
+
+ Token
+
+
+ {isHistoryLoading ? (
+ No recent transactions
+ ) : (
+
+
+ {[...Array(3)].map((_, i) => (
+
+ ) : formatTransactions.length === 0 ? (
+
+ {formatTransactions.map((tx) => (
+
+ )}
+