Fix critical bugs: wallet truncation, filtering logic, price sync, and styling consistency

Co-authored-by: 0xrinegade <[email protected]>

Author: Copilot

src/App.js

@@ -31,7 +31,7 @@ const SVM_NETWORKS = {
   'solana': {
     name: 'Solana',
     endpoint: clusterApiUrl('devnet'),
-    programId: 'YOUR_SOLANA_PROGRAM_ID',
+    programId: 'FKkTQLgBE9vDZqgXKWrXZfAv5HgCQdsjDZDzPfJosPt9',
     icon: '/images/solana-logo.svg',
     color: '#9945FF',
     explorerUrl: 'https://explorer.solana.com',

src/components/OfferCreation.js

@@ -203,6 +203,19 @@ const OfferCreation = ({ onStartGuidedWorkflow }) => {
     }
   };
 
+  // Calculate SOL amount based on fiat amount using real prices
+  const handleFiatAmountChange = (e) => {
+    const fiat = e.target.value;
+    setFiatAmount(fiat);
+    
+    if (fiat && !isNaN(fiat) && prices && prices[fiatCurrency] && prices[fiatCurrency] > 0) {
+      const calculatedSol = (parseFloat(fiat) / prices[fiatCurrency]).toFixed(6);
+      setSolAmount(calculatedSol);
+    } else if (!fiat) {
+      setSolAmount('');
+    }
+  };
+  
   // Update fiat amount when currency changes using real prices
   const handleCurrencyChange = (e) => {
     setFiatCurrency(e.target.value);
@@ -327,7 +340,7 @@ const OfferCreation = ({ onStartGuidedWorkflow }) => {
                 id="fiatAmount"
                 type="number"
                 value={fiatAmount}
-                onChange={(e) => setFiatAmount(e.target.value)}
+                onChange={handleFiatAmountChange}
                 placeholder="0.00"
                 min={VALIDATION_CONSTRAINTS.FIAT_AMOUNT.min}
                 max={VALIDATION_CONSTRAINTS.FIAT_AMOUNT.max}
@@ -441,16 +454,20 @@ const OfferCreation = ({ onStartGuidedWorkflow }) => {
         }
 
         .guided-workflow-button {
-          background-color: var(--color-primary);
-          color: white;
-          border: none;
+          background-color: var(--ascii-neutral-700);
+          color: var(--ascii-white);
+          border: 1px solid var(--ascii-neutral-800);
           padding: 8px 16px;
           border-radius: 0;
           cursor: pointer;
           font-size: 0.9rem;
           display: flex;
           align-items: center;
           gap: 8px;
+          font-family: 'Courier New', Courier, monospace;
+          text-transform: uppercase;
+          transition: all var(--transition-normal);
+          box-shadow: var(--shadow-sm);
         }
 
         .guided-workflow-button::before {
@@ -460,14 +477,17 @@ const OfferCreation = ({ onStartGuidedWorkflow }) => {
           justify-content: center;
           width: 18px;
           height: 18px;
-          background-color: rgba(255, 255, 255, 0.3);
+          background-color: var(--ascii-neutral-500);
+          border: 1px solid var(--ascii-neutral-600);
           border-radius: 0;
           font-size: 0.8rem;
           font-weight: bold;
         }
 
         .guided-workflow-button:hover {
-          background-color: var(--color-primary-dark);
+          background-color: var(--ascii-neutral-600);
+          transform: translateY(-1px);
+          box-shadow: var(--shadow-md);
         }
 
         .input-error {

src/components/OfferList.js

@@ -149,7 +149,7 @@ const OfferRow = React.memo(({ offer, type, processingAction, handleOfferAction,
         <div className="offer-card-header">
           <div className="seller-info">
             <span className="seller-name">
-              {offer.seller.substring(0, 8)}...{offer.seller.substring(offer.seller.length - 4)}
+              {offer.seller.substring(0, 8)}...{offer.seller.slice(-4)}
             </span>
           </div>
           <div className="time-info">
@@ -344,11 +344,11 @@ const OfferList = ({ type = 'buy', onStartGuidedWorkflow}) => {
 
   // Calculate rate for each offer for sorting purposes
   const offersWithRate = useMemo(() => {
-    return filteredOffers.map(offer => ({
+    return offers.map(offer => ({
       ...offer,
       rate: offer.fiatAmount / offer.solAmount
     }));
-  }, [filteredOffers]);
+  }, [offers]);
 
   // Sort the filtered offers
   const sortedOffers = useMemo(() => {

src/components/UserStatistics.js

@@ -117,7 +117,7 @@ const UserStatistics = () => {
         <h2>Your Trading Statistics</h2>
         <div className="user-wallet-info">
           <span className="wallet-address">
-            {wallet.publicKey?.toString().substring(0, 8)}...{wallet.publicKey?.toString().substring(-4)}
+            {wallet.publicKey?.toString().substring(0, 8)}...{wallet.publicKey?.toString().slice(-4)}
           </span>
           {renderReputationBadge()}
         </div>