From 96b82b27feb59b200bf0981c4aa106a41816f1ab Mon Sep 17 00:00:00 2001
From: Daniel Shanahan <dshanahan1@students.ccu.edu>
Date: Thu, 28 May 2026 20:26:08 -0400
Subject: [PATCH 1/7] fix: apply solution for issue #13

---
 src/components/WelcomeModal.js | 83 ++++++++++++++++++++++++++++++++++
 1 file changed, 83 insertions(+)
 create mode 100644 src/components/WelcomeModal.js

diff --git a/src/components/WelcomeModal.js b/src/components/WelcomeModal.js
new file mode 100644
index 0000000..a0275a0
--- /dev/null
+++ b/src/components/WelcomeModal.js
@@ -0,0 +1,83 @@
+import React, { useState, useEffect } from 'react';
+import './WelcomeModal.css';
+
+const WelcomeModal = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [currentStep, setCurrentStep] = useState(0);
+  
+  const steps = [
+    {
+      title: "Welcome to CAP",
+      content: "CAP is a decentralized trading platform that allows you to trade digital assets with low fees and high performance."
+    },
+    {
+      title: "How to Use the Dashboard",
+      content: "Navigate through the dashboard using the sidebar. You can view your positions, trading history, and portfolio performance."
+    },
+    {
+      title: "Bridging Funds",
+      content: "To deposit funds, use the integrated bridge to move assets from Arbitrum to CAP. You can access the bridge anytime from the 'Bridge' tab."
+    }
+  ];
+
+  const openModal = () => {
+    setIsOpen(true);
+    // Load the appropriate step content
+    if (localStorage.getItem('welcomeModalStep')) {
+      setCurrentStep(parseInt(localStorage.getItem('welcomeModalStep')));
+    }
+  };
+
+  const closeModal = () => {
+    setIsOpen(false);
+    localStorage.setItem('welcomeModalStep', currentStep);
+  };
+
+  const nextStep = () => {
+    if (currentStep < steps.length - 1) {
+      setCurrentStep(currentStep + 1);
+    } else {
+      closeModal();
+    }
+  };
+
+  const prevStep = () => {
+    if (currentStep > 0) {
+      setCurrentStep(currentStep - 1);
+    }
+  };
+
+  // When the component mounts, check if the welcome modal has been shown
+  useEffect(() => {
+    if (!localStorage.getItem('hasShownWelcomeModal')) {
+      openModal();
+      localStorage.setItem('hasShownWelcomeModal', 'true');
+    }
+  }, []);
+
+  return (
+    <div className="welcome-modal">
+      {isOpen && (
+        <div className="modal-overlay">
+          <div className="modal-content">
+            <h2>{steps[currentStep]?.title}</h2>
+            <p>{steps[currentStep]?.content}</p>
+            
+            <div className="step-navigation">
+              {currentStep > 0 && (
+                <button onClick={prevStep}>Previous</button>
+              )}
+              {currentStep < steps.length - 1 ? (
+                <button onClick={nextStep}>Next</button>
+              ) : (
+                <button onClick={closeModal}>Close</button>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default WelcomeModal;
\ No newline at end of file

From 9e684a927ab6c3e5da66640d38cecd6637c4e589 Mon Sep 17 00:00:00 2001
From: Daniel Shanahan <dshanahan1@students.ccu.edu>
Date: Thu, 28 May 2026 20:26:09 -0400
Subject: [PATCH 2/7] fix: apply solution for issue #13

---
 src/components/WelcomeModal.css | 103 ++++++++++++++++++++++++++++++++
 1 file changed, 103 insertions(+)
 create mode 100644 src/components/WelcomeModal.css

diff --git a/src/components/WelcomeModal.css b/src/components/WelcomeModal.css
new file mode 100644
index 0000000..1777081
--- /dev/null
+++ b/src/components/WelcomeModal.css
@@ -0,0 +1,103 @@
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background: white;
+  padding: 2rem;
+  border-radius: 8px;
+  max-width: 500px;
+  width: 90%;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.step-navigation {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 1rem;
+}
+
+button {
+  padding: 0.5rem 1rem;
+  background: #007bff;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1rem;
+}
+
+button:hover {
+  background: #0056b3;
+}
+
+.step-indicators {
+  display: flex;
+  justify-content: center;
+  margin-top: 1rem;
+}
+
+.step-indicator {
+  height: 8px;
+  width: 8px;
+  border-radius: 50%;
+  background: #ccc;
+  margin: 0 5px;
+  cursor: pointer;
+}
+
+.step-indicator.active {
+  background: #007bff;
+}
+
+.modal-navigation-buttons {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 1rem;
+}
+
+@media (max-width: 768px) {
+  .modal-content {
+    width: 95%;
+    padding: 1rem;
+  }
+  
+  .modal-navigation-buttons {
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .modal-navigation-buttons button {
+    margin: 0.5rem 0;
+    width: 100%;
+  }
+}
+
+@media (min-width: 769px) {
+  .modal-content {
+    width: 500px;
+  }
+}
+
+.welcome-modal {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  width: 100%;
+  max-width: 500px;
+  margin: auto;
+}
\ No newline at end of file

From 4c38569e1bcc894bfc67549af2d6cb2b3b27cc37 Mon Sep 17 00:00:00 2001
From: Daniel Shanahan <dshanahan1@students.ccu.edu>
Date: Thu, 28 May 2026 20:26:11 -0400
Subject: [PATCH 3/7] fix: apply solution for issue #13

---
 src/App.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 src/App.js

diff --git a/src/App.js b/src/App.js
new file mode 100644
index 0000000..9d7c6eb
--- /dev/null
+++ b/src/App.js
@@ -0,0 +1,13 @@
+import WelcomeModal from './components/WelcomeModal';
+
+function App() {
+  return (
+    <div className="App">
+
+export default App;
+
+function WelcomeModal() {
+  return (
+    <WelcomeModal />
+  );
+}
\ No newline at end of file

From c6b79e9fc8af051f42c4c3b8d5eae76eaa251439 Mon Sep 17 00:00:00 2001
From: Daniel Shanahan <dshanahan1@students.ccu.edu>
Date: Thu, 28 May 2026 20:31:10 -0400
Subject: [PATCH 4/7] fix: apply solution for issue #13

---
 src/components/WelcomeModal.jsx | 101 ++++++++++++++++++++++++++++++++
 1 file changed, 101 insertions(+)
 create mode 100644 src/components/WelcomeModal.jsx

diff --git a/src/components/WelcomeModal.jsx b/src/components/WelcomeModal.jsx
new file mode 100644
index 0000000..36390b3
--- /dev/null
+++ b/src/components/WelcomeModal.jsx
@@ -0,0 +1,101 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Modal,
+  Box,
+  Button,
+  Card,
+  CardContent,
+  Typography,
+  Stepper,
+  Step,
+  StepLabel,
+  Paper,
+  IconButton
+} from '@mui/material';
+import { Close as CloseIcon } from '@mui/icons-material';
+import { useTranslation } from 'react-i18next';
+
+const WelcomeModal = () => {
+  const { t } = useTranslation();
+  const [open, setOpen] = useState(false);
+  const [step, setStep] = useState(0);
+
+  const handleNext = () => {
+    setStep((prevStep) => prevStep + 1);
+  };
+
+  const handleBack = () => {
+    setStep((prevStep) => prevStep - 1);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  useEffect(() => {
+    // Show modal on first visit
+    const hasSeenWelcome = localStorage.getItem('hasSeenWelcome');
+    if (!hasSeenWelcome) {
+      setOpen(true);
+      localStorage.setItem('hasSeenWelcome', 'true');
+    }
+  }, []);
+
+  const steps = [
+    {
+      title: t('welcome.whatIsCap'),
+      content: t('welcome.capExplanation')
+    },
+    {
+      title: t('welcome.howToUse'),
+      content: t('welcome.howToUseContent')
+    },
+    {
+      title: t('welcome.bridgingFunds'),
+      content: t('welcome.bridgingContent')
+    }
+  ];
+
+  return (
+    <Modal open={open} onClose={handleClose}>
+      <Box sx={{
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        width: 600,
+        bgcolor: 'background.paper',
+        border: '2px solid #000',
+0, boxShadow: 24,
+        p: 3,
+      }}>
+        <Box display="flex" justifyContent="space-between" alignItems="center">
+          <Typography variant="h5">{t('welcome.title')}</Typography>
+          <IconButton onClick={handleClose}>
+            <CloseIcon />
+          </IconButton>
+        </Box>
+        <Stepper activeStep={step} alternativeLabel>
+          {steps.map((step, index) => (
+            <Step key={index}>
+              <StepLabel>{step.title}</StepLabel>
+            </Step>
+          ))}
+        </Stepper>
+        <Box mt={2} mb={2}>
+          <Typography>{steps[step]?.content}</Typography>
+        </Box>
+        <Box>
+          <Button onClick={handleBack} disabled={step === 0}>
+            {t('button.back')}
+          </Button>
+          <Button onClick={handleNext} disabled={step === steps.length - 1}>
+            {t('button.next')}
+          </Button>
+        </Box>
+      </Box>
+    </Modal>
+  );
+};
+
+export default WelcomeModal;
\ No newline at end of file

From 1e754199b7e385df724b7554e0d5084a5ca2ea85 Mon Sep 17 00:00:00 2001
From: Daniel Shanahan <dshanahan1@students.ccu.edu>
Date: Thu, 28 May 2026 20:31:47 -0400
Subject: [PATCH 5/7] fix: apply solution for issue #13

---
 src/components/WelcomeModal.jsx | 189 ++++++++++++++++----------------
 1 file changed, 96 insertions(+), 93 deletions(-)

diff --git a/src/components/WelcomeModal.jsx b/src/components/WelcomeModal.jsx
index 36390b3..a7804dd 100644
--- a/src/components/WelcomeModal.jsx
+++ b/src/components/WelcomeModal.jsx
@@ -1,99 +1,102 @@
-import React, { useState, useEffect } from 'react';
-import {
-  Modal,
-  Box,
-  Button,
-  Card,
-  CardContent,
-  Typography,
-  Stepper,
-  Step,
-  StepLabel,
-  Paper,
-  IconButton
-} from '@mui/material';
-import { Close as CloseIcon } from '@mui/icons-material';
-import { useTranslation } from 'react-i18next';
+import React, { useState } from 'react';
+import { Modal, Button, Tabs, Tab } from 'react-bootstrap';
+import './WelcomeModal.css';
 
-const WelcomeModal = () => {
-  const { t } = useTranslation();
-  const [open, setOpen] = useState(false);
-  const [step, setStep] = useState(0);
-
-  const handleNext = () => {
-    setStep((prevStep) => prevStep + 1);
-  };
-
-  const handleBack = () => {
-    setStep((prevStep) => prevStep - 1);
-  };
-
-  const handleClose = () => {
-    setOpen(false);
-  };
-
-  useEffect(() => {
-    // Show modal on first visit
-    const hasSeenWelcome = localStorage.getItem('hasSeenWelcome');
-    if (!hasSeenWelcome) {
-      setOpen(true);
-      localStorage.setItem('hasSeenWelcome', 'true');
-    }
-  }, []);
-
-  const steps = [
-    {
-      title: t('welcome.whatIsCap'),
-      content: t('welcome.capExplanation')
-    },
-    {
-      title: t('welcome.howToUse'),
-      content: t('welcome.howToUseContent')
-    },
-    {
-      title: t('welcome.bridgingFunds'),
-      content: t('welcome.bridgingContent')
-    }
-  ];
+const WelcomeModal = ({ show, onHide }) => {
+  const [key, setKey] = useState('welcome');
 
   return (
-    <Modal open={open} onClose={handleClose}>
-      <Box sx={{
-        position: 'absolute',
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%, -50%)',
-        width: 600,
-        bgcolor: 'background.paper',
-        border: '2px solid #000',
-0, boxShadow: 24,
-        p: 3,
-      }}>
-        <Box display="flex" justifyContent="space-between" alignItems="center">
-          <Typography variant="h5">{t('welcome.title')}</Typography>
-          <IconButton onClick={handleClose}>
-            <CloseIcon />
-          </IconButton>
-        </Box>
-        <Stepper activeStep={step} alternativeLabel>
-          {steps.map((step, index) => (
-            <Step key={index}>
-              <StepLabel>{step.title}</StepLabel>
-            </Step>
-          ))}
-        </Stepper>
-        <Box mt={2} mb={2}>
-          <Typography>{steps[step]?.content}</Typography>
-        </Box>
-        <Box>
-          <Button onClick={handleBack} disabled={step === 0}>
-            {t('button.back')}
-          </Button>
-          <Button onClick={handleNext} disabled={step === steps.length - 1}>
-            {t('button.next')}
-          </Button>
-        </Box>
-      </Box>
+    <Modal show={show} onHide={onHide} centered size="lg">
+      <Modal.Header closeButton>
+        <Modal.Title>Welcome to CAP Trading Dashboard</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <Tabs
+          id="welcome-modal-tabs"
+          activeKey={key}
+          onSelect={(k) => setKey(k)}
+        >
+          <Tab eventKey="welcome" title="Welcome">
+            <div className="tab-content">
+              <h5>What is CAP?</h5>
+              <p>CAP is a decentralized trading protocol that allows users to trade assets with low fees and high efficiency.</p>
+              
+              <h5>Getting Started</h5>
+              <ul>
+                <li>Connect your wallet using the button in the top right</li>
+                <li>Bridge funds from Arbitrum using the Bridge tab</li>
+                <li>Start trading using the trading dashboard</li>
+              </ul>
+            </div>
+          </Tab>
+          
+          <Tab eventKey="bridge" title="Bridge Funds">
+            <div className="tab-content">
+              <h5>Bridge Funds from Arbitrum</h5>
+              <p>To start trading, you'll need to bridge your funds from Arbitrum to CAP.</p>
+              
+              <div className="bridge-steps">
+                <div className="step">
+                  <h6>Step 1: Connect Wallet</h6>
+                  <p>Make sure your wallet is connected to the Arbitrum network.</p>
+                </div>
+                <div className="step">
+                  <h6>Step 2: Select Assets</h6>
+                  <p>Choose which assets you want to bridge to CAP.</p>
+                </div>
+                <div className="step">
+                  <h6>Step 3: Confirm Transaction</h6>
+                  <p>Confirm the bridge transaction in your wallet.</p>
+                </div>
+                <div className="step">
+                  <h6>Step 4: Wait for Confirmation</h6>
+                  <p>Wait for the bridge to complete (usually 1-5 minutes).</p>
+                </div>
+              </div>
+              
+              <Button variant="primary" className="mt-3">
+                Open Bridge Interface
+              </Button>
+            </div>
+          </Tab>
+          
+          <Tab eventKey="instructions" title="Instructions">
+            <div className="tab-content">
+              <h5>Using the Trading Dashboard</h5>
+              
+              <div className="instruction-section">
+                <h6>1. Market Selection</h6>
+                <p>Choose which trading pair you want to trade from the market selector dropdown.</p>
+              </div>
+              
+              <div className="instruction-section">
+                <h6>2. Order Placement</h6>
+                <p>Enter your order details in the order form on the left panel. You can place market orders, limit orders, and stop orders.</p>
+              </div>
+              
+              <div className="instruction-section">
+                <h6>3. Order Book</h6>
+                <p>View the current buy and sell orders in the order book in the center of the screen.</p>
+              </div>
+              
+              <div className="instruction-section">
+                <h6>4. Trade History</h6>
+                <p>See your recent trades and order history in the right panel.</p>
+              </div>
+              
+              <div className="instruction-section">
+                <h6>5. Portfolio</h6>
+                <p>Check your current holdings and account balances at the bottom of the screen.</p>
+              </div>
+            </div>
+          </Tab>
+        </Tabs>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button variant="secondary" onClick={onHide}>
+          Close
+        </Button>
+      </Modal.Footer>
     </Modal>
   );
 };

From e876835fb39ee36e216c1e98bac9bbf8b40c4939 Mon Sep 17 00:00:00 2001
From: Daniel Shanahan <dshanahan1@students.ccu.edu>
Date: Thu, 28 May 2026 20:31:48 -0400
Subject: [PATCH 6/7] fix: apply solution for issue #13

---
 src/components/WelcomeModal.css | 110 +++++++-------------------------
 1 file changed, 24 insertions(+), 86 deletions(-)

diff --git a/src/components/WelcomeModal.css b/src/components/WelcomeModal.css
index 1777081..0eb62dc 100644
--- a/src/components/WelcomeModal.css
+++ b/src/components/WelcomeModal.css
@@ -1,103 +1,41 @@
-.modal-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
+.tab-content {
+  padding: 20px 0;
 }
 
-.modal-content {
-  background: white;
-  padding: 2rem;
-  border-radius: 8px;
-  max-width: 500px;
-  width: 90%;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+.tab-content h5 {
+  margin-bottom: 15px;
+  font-weight: 600;
 }
 
-.step-navigation {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 1rem;
+.tab-content h6 {
+  margin-bottom: 10px;
+  font-weight: 600;
 }
 
-button {
-  padding: 0.5rem 1rem;
-  background: #007bff;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 1rem;
+.tab-content p {
+  margin-bottom: 15px;
+  line-height: 1.5;
 }
 
-button:hover {
-  background: #0056b3;
+.tab-content ul {
+  margin-bottom: 20px;
 }
 
-.step-indicators {
-  display: flex;
-  justify-content: center;
-  margin-top: 1rem;
+.tab-content li {
+  margin-bottom: 8px;
 }
 
-.step-indicator {
-  height: 8px;
-  width: 8px;
-  border-radius: 50%;
-  background: #ccc;
-  margin: 0 5px;
-  cursor: pointer;
+.bridge-steps .step,
+.instruction-section {
+  margin-bottom: 20px;
 }
 
-.step-indicator.active {
-  background: #007bff;
+.bridge-steps .step:last-child,
+.instruction-section:last-child {
+  margin-bottom: 0;
 }
 
-.modal-navigation-buttons {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 1rem;
-}
-
-@media (max-width: 768px) {
-  .modal-content {
-    width: 95%;
-    padding: 1rem;
-  }
-  
-  .modal-navigation-buttons {
-    flex-direction: column;
-    align-items: center;
-  }
-  
-  .modal-navigation-buttons button {
-    margin: 0.5rem 0;
-    width: 100%;
-  }
-}
-
-@media (min-width: 769px) {
-  .modal-content {
-    width: 500px;
-  }
-}
-
-.welcome-modal {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 2rem;
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  width: 100%;
-  max-width: 500px;
-  margin: auto;
+.bridge-steps .step h6,
+.instruction-section h6 {
+  color: #007bff;
 }
\ No newline at end of file

From 1613d352919ea43d52338e6d52333f71d09eb3c4 Mon Sep 17 00:00:00 2001
From: Daniel Shanahan <dshanahan1@students.ccu.edu>
Date: Thu, 28 May 2026 20:31:50 -0400
Subject: [PATCH 7/7] fix: apply solution for issue #13

---
 src/App.js | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/App.js b/src/App.js
index 9d7c6eb..39bbe2e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,13 +1,23 @@
+import React, { useState, useEffect } from 'react';
 import WelcomeModal from './components/WelcomeModal';
 
 function App() {
-  return (
-    <div className="App">
+  const [showWelcomeModal, setShowWelcomeModal] = useState(false);
 
-export default App;
+  useEffect(() => {
+    // Check if user has visited before
+    const hasVisited = localStorage.getItem('hasVisitedCAP');
+    if (!hasVisited) {
+      setShowWelcomeModal(true);
+      localStorage.setItem('hasVisitedCAP', 'true');
+    }
+  }, []);
 
-function WelcomeModal() {
   return (
-    <WelcomeModal />
+    <div className="App">
+      <WelcomeModal show={showWelcomeModal} onHide={() => setShowWelcomeModal(false)} />
+    </div>
   );
-}
\ No newline at end of file
+}
+
+export default App;
\ No newline at end of file