[ShanaBoo] Welcome modal with integrated bridge and/or instructions

src/App.js

@@ -0,0 +1,23 @@
+import React, { useState, useEffect } from 'react';
+import WelcomeModal from './components/WelcomeModal';
+
+function App() {
+  const [showWelcomeModal, setShowWelcomeModal] = useState(false);
+
+  useEffect(() => {
+    // Check if user has visited before
+    const hasVisited = localStorage.getItem('hasVisitedCAP');
+    if (!hasVisited) {
+      setShowWelcomeModal(true);
+      localStorage.setItem('hasVisitedCAP', 'true');
+    }
+  }, []);
+
+  return (
+    <div className="App">
+      <WelcomeModal show={showWelcomeModal} onHide={() => setShowWelcomeModal(false)} />
+    </div>
+  );
+}
+
+export default App;

src/components/WelcomeModal.css

@@ -0,0 +1,41 @@
+.tab-content {
+  padding: 20px 0;
+}
+
+.tab-content h5 {
+  margin-bottom: 15px;
+  font-weight: 600;
+}
+
+.tab-content h6 {
+  margin-bottom: 10px;
+  font-weight: 600;
+}
+
+.tab-content p {
+  margin-bottom: 15px;
+  line-height: 1.5;
+}
+
+.tab-content ul {
+  margin-bottom: 20px;
+}
+
+.tab-content li {
+  margin-bottom: 8px;
+}
+
+.bridge-steps .step,
+.instruction-section {
+  margin-bottom: 20px;
+}
+
+.bridge-steps .step:last-child,
+.instruction-section:last-child {
+  margin-bottom: 0;
+}
+
+.bridge-steps .step h6,
+.instruction-section h6 {
+  color: #007bff;
+}

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;

src/components/WelcomeModal.jsx

@@ -0,0 +1,104 @@
+import React, { useState } from 'react';
+import { Modal, Button, Tabs, Tab } from 'react-bootstrap';
+import './WelcomeModal.css';
+
+const WelcomeModal = ({ show, onHide }) => {
+  const [key, setKey] = useState('welcome');
+
+  return (
+    <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>
+  );
+};
+
+export default WelcomeModal;