add guide page

yimingWOW · Jan 15, 2025 · 27ad80f · 27ad80f
1 parent b1f7083
commit 27ad80f
Show file tree

Hide file tree

Showing 10 changed files with 6,217 additions and 666 deletions.
diff --git a/README.md b/README.md
@@ -28,31 +28,4 @@ By creating two opposing lending pools, users can go long or short on any token
 ### Try the devnet demo
 
 You can try the Devnet demo here: https://yimingwow.github.io/fall/
-(Note:I cannot guarantee that the demo will always work, as I update it occasionally.)
-
-You can get some SOL from https://faucet.solana.com/, and you can get some USDT from https://spl-token-faucet.com/?token-name=USDT.
-
-Also, you may need to transfer SOL to WSOL using the following command:
-
-```
-spl-token wrap 1
-```
-This command requires both spl-token and solana-cli to be installed. For installation instructions, refer to Solana Docs: https://solana.com/docs/intro/installation.
-
-Once done, you can deposit WSOL and USDT into the liquidity pool, like this:
-
-![Fall](https://github.com/yimingWOW/fall/blob/main/images/fall.003.png)
-
-The lending and borrowing pages are shown below:
-
-![Fall](https://github.com/yimingWOW/fall/blob/main/images/fall.004.png)    
-![Fall](https://github.com/yimingWOW/fall/blob/main/images/fall.005.png) 
-
-Finally, here is the liquidation page:
-
-![Fall](https://github.com/yimingWOW/fall/blob/main/images/fall.006.png) 
-
-
-
-
 
diff --git a/app/index.html b/app/index.html
@@ -3,11 +3,10 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/png" href="/favicon.png" />
-    <!-- 如果你使用 .ico 文件，使用下面这行替代上面的 -->
-    <!-- <link rel="icon" type="image/x-icon" href="/favicon.ico" /> -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Fall Protocol</title>
     <meta name="description" content="Fall Protocol - Decentralized Short Selling Protocol" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
   </head>
   <body>
     <div id="root"></div>

diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -29,6 +29,7 @@
   "devDependencies": {
     "@eslint/js": "^9.13.0",
     "@rollup/plugin-inject": "^5.0.5",
+    "@types/bn.js": "^5.1.6",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",

diff --git a/app/public/favicon.png b/app/public/favicon.png
diff --git a/app/src/App.tsx b/app/src/App.tsx
@@ -6,7 +6,7 @@ import { NetworkSelect } from './WalletContextProvider';
 import { useNetwork } from './contexts/NetworkContext';
 import '@solana/wallet-adapter-react-ui/styles.css';
 import './style/App.css';
-import logo from '../public/favicon.png'; // 请确保图片路径正确
+import logo from '../public/favicon.png'; 
 
 
 const App: FC = () => {
@@ -44,6 +44,25 @@ const App: FC = () => {
           <Dashboard />
         )}
       </main>
+
+      <div className="social-links-corner">
+        <a 
+          href="https://github.com/yimingWOW/fall" 
+          target="_blank" 
+          rel="noopener noreferrer"
+          className="social-icon"
+        >
+          <i className="fab fa-github"></i>
+        </a>
+        <a 
+          href="https://x.com/fall_labs" 
+          target="_blank" 
+          rel="noopener noreferrer"
+          className="social-icon"
+        >
+          <i className="fa-brands fa-x-twitter"></i>
+        </a>
+      </div>
     </div>
   );
 };

diff --git a/app/src/components/Dashboard.tsx b/app/src/components/Dashboard.tsx
@@ -9,6 +9,7 @@ import { AmmProvider } from '../contexts/AmmContext';
 import { LenderPoolList } from './LenderPoolList';
 import { BorrowerPoolList } from './BorrowerPoolList';
 import { EXCLUDED_PUBLIC_KEY } from '../utils/constants';
+import { Guide } from './Guide';
 import '../style/Dashboard.css';
 
 interface TabButtonProps {
@@ -38,6 +39,15 @@ const Dashboard: FC = () => {
         <div className="dashboard-container">
           <div className="dashboard-content">
             <nav className="navigation-tabs">
+
+              <TabButton 
+                isActive={activeTab === 'guide'} 
+                onClick={() => setActiveTab('guide')}
+                icon="🧭"
+                label="Guide"
+                data-tab="guide"
+              />
+
               {publicKey?.toBase58() == EXCLUDED_PUBLIC_KEY && (
                 <TabButton 
                   isActive={activeTab === 'amm'} 
@@ -87,7 +97,11 @@ const Dashboard: FC = () => {
                   <AmmList />
                   <CreateAmmForm />
                 </div>
-              ) : activeTab === 'pool' ? (
+              ) : activeTab === 'guide' ? (
+                <div>
+                  <Guide />
+                </div>
+              ): activeTab === 'pool' ? (
                 <div>
                   <div className="pool-header">
                     <CreatePoolForm />

diff --git a/app/src/components/Guide.tsx b/app/src/components/Guide.tsx
@@ -0,0 +1,69 @@
+import { FC } from 'react';
+import '../style/Guide.css';
+
+export const Guide: FC = () => {
+  return (
+    <div className="guide-container">
+      <div className="guide-content">
+        <h1 className="guide-title">Getting Started with Fall Protocol</h1>
+
+        <section className="guide-section">
+          <h2>Prerequisites</h2>
+          <div className="guide-step">
+            <h3>1. Get Devnet SOL</h3>
+            <p>Request Devnet SOL from the <a href="https://faucet.solana.com/" target="_blank" rel="noopener noreferrer">Solana Faucet</a></p>
+          </div>
+
+          <div className="guide-step">
+            <h3>2. Get Test USDT</h3>
+            <p>Obtain test USDT tokens from the <a href="https://spl-token-faucet.com/?token-name=USDT" target="_blank" rel="noopener noreferrer">SPL Token Faucet</a></p>
+          </div>
+        </section>
+
+        <section className="guide-section">
+          <h2>Setup Instructions</h2>
+          <div className="guide-step">
+            <h3>Convert SOL to WSOL</h3>
+            <div className="code-block">
+              <code>spl-token wrap 1</code>
+              <button className="copy-button" onClick={() => navigator.clipboard.writeText('spl-token wrap 1')}>
+                Copy
+              </button>
+            </div>
+            <p className="note">Note: This requires spl-token and solana-cli. Visit the <a href="https://solana.com/docs/intro/installation" target="_blank" rel="noopener noreferrer">Solana Docs</a> for installation guide.</p>
+          </div>
+        </section>
+
+        <section className="guide-section">
+          <h2>Using the Protocol</h2>
+          <div className="guide-step">
+            <h3>1. Connect Your Wallet</h3>
+            <p>Use the "Connect Wallet" button in the top right corner</p>
+          </div>
+          <div className="guide-step">
+            <h3>2. Add Liquidity</h3>
+            <p>Deposit your WSOL and USDT into the liquidity pool to start earning fees</p>
+          </div>
+          <div className="guide-step">
+            <h3>3. Start Trading</h3>
+            <p>Once you have funds in the pool, you can begin trading on the platform</p>
+          </div>
+          <div className="guide-step">
+            <h3>4. Become a Lender</h3>
+            <p>Visit the Lend page to lend out your meme tokens and earn yields. This is a great way to generate passive income from your meme token holdings.</p>
+          </div>
+          <div className="guide-step">
+            <h3>5. Become a Borrower</h3>
+            <p>Head to the Borrow page where you can:</p>
+            <ul className="feature-list">
+              <li>Deposit stablecoins as collateral</li>
+              <li>Borrow meme tokens you're interested in</li>
+              <li>Implement short-selling strategies by selling borrowed tokens when prices are high</li>
+              <li>Buy back tokens at lower prices to profit from price decreases</li>
+            </ul>
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+};
diff --git a/app/src/style/App.css b/app/src/style/App.css
@@ -166,4 +166,43 @@
   width: 64px; /* 调整大小 */
   height: auto;
   margin-bottom: 20px;
+} 
+
+.social-links {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-right: 1rem;
+}
+
+.social-icon {
+  color: #ffffff;
+  font-size: 1.2rem;
+  transition: color 0.2s ease;
+}
+
+.social-icon:hover {
+  color: #9945FF;
+} 
+
+.social-links-corner {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  display: flex;
+  gap: 1rem;
+  z-index: 1000;
+  background-color: rgba(0, 0, 0, 0.5);
+  padding: 10px;
+  border-radius: 8px;
+}
+
+.social-icon {
+  color: #ffffff;
+  font-size: 1.5rem;
+  transition: color 0.2s ease;
+}
+
+.social-icon:hover {
+  color: #9945FF;
 }