FE: add marketinfo, and trading components for MAXIMILIAN, edit app-l…

…ayout to display components
bgoober · Jan 11, 2025 · 3f4bae5 · 3f4bae5
1 parent af109ef
commit 3f4bae5
Show file tree

Hide file tree

Showing 6 changed files with 345 additions and 21 deletions.
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -30,11 +30,9 @@
     "bs58": "5.0.0",
     "buffer": "6.0.3",
     "crypto-browserify": "3.12.0",
-    "process": "^0.11.10",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-router-dom": "6.11.2",
-    "stream-browserify": "3.0.0",
     "tmp-promise": "^3.0.3",
     "vm-browserify": "^1.1.2"
   },
@@ -59,6 +57,7 @@
     "@types/react-dom": "18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.3.0",
     "@typescript-eslint/parser": "^7.3.0",
+    "assert": "^2.1.0",
     "dotenv": "^16.4.7",
     "eslint": "~8.57.0",
     "eslint-config-prettier": "^9.0.0",
@@ -67,8 +66,12 @@
     "eslint-plugin-react": "7.32.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "nx": "^20.2.2",
+    "path-browserify": "^1.0.1",
     "prettier": "^2.6.2",
+    "process": "^0.11.10",
     "react-refresh": "^0.10.0",
-    "typescript": "~5.4.2"
+    "stream-browserify": "^3.0.0",
+    "typescript": "~5.4.2",
+    "util": "^0.12.5"
   }
 }
diff --git a/app/web/src/app/app-layout.tsx b/app/web/src/app/app-layout.tsx
@@ -10,6 +10,8 @@ import { PublicKey } from '@solana/web3.js';
 import { useWallet } from '@solana/wallet-adapter-react';
 import { useWalletModal } from '@solana/wallet-adapter-react-ui';
 import { HeroSwap } from './components/HeroSwap';
+import { MarketInfo } from './components/MarketInfo';
+import { Trading } from './components/Trading';
 
 export function AppLayout({ children }: { children: ReactNode }) {
   const [isCollapsed, setIsCollapsed] = useState(false);
@@ -75,10 +77,30 @@ export function AppLayout({ children }: { children: ReactNode }) {
           top: '5px',
           left: '5px',
           alignItems: 'left',
+          // zIndex: -1,
+          flexDirection: 'column',
+          gap: '20px',
+          // outline: '1px solid #14F195',
         }}
       >
         <TokenCounter />
+        {/* <MarketInfo /> */}
+        <Trading />
       </div>
+      {/* <div
+        style={{
+          position: 'absolute',
+          top: '100px',  // Adjust based on your layout
+          right: '6px',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '20px',
+          zIndex: -1,
+        }}
+      >
+        <MarketInfo />
+        <Trading />
+      </div> */}
       <div style={{ position: 'absolute', bottom: '5px', left: '5px' }}>
         <button
           onClick={toggleModal}
@@ -91,6 +113,7 @@ export function AppLayout({ children }: { children: ReactNode }) {
             fontSize: '10px',
             fontFamily: 'Arial, sans-serif',
             textDecoration: 'none',
+            cursor: 'pointer',
           }}
         >
           Disclaimer / Terms / How it Works
@@ -249,6 +272,24 @@ export function AppLayout({ children }: { children: ReactNode }) {
                   program.
                 </li>
                 <li>Use both of these services at your own risk.</li> */}
+                <li>
+                  The "Trade on Jupiter" link is a referral link. We receive
+                  0.10% referral fees on any swaps you make through the link.
+                  This referrer code was created using Jupiter's {' '}
+                  <a
+                    href="https://referral.jup.ag/dashboard"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    style={{ color: '#14F195' }}
+                  >
+                    referral dashboard
+                  </a>
+                  .
+                </li>
+                <li>
+                  You can voluntarily remove this 0.10% referral fee on
+                  Jupiter's trading interface.
+                </li>
               </ul>
             </li>
           </ul>