From b97b336fe6268c4813e4e8ce32ac34fc109907ef Mon Sep 17 00:00:00 2001 From: JY20 Date: Thu, 22 May 2025 20:45:26 -0400 Subject: [PATCH 1/2] updating the connect UI and readme --- README.md | 209 ++++++++++++++---- trivex_frontend/src/components/Alert.jsx | 90 ++++++-- trivex_frontend/src/components/Navbar.jsx | 62 +----- .../src/components/WalletConnectButton.jsx | 155 +++++++++++++ trivex_frontend/src/index.js | 1 + trivex_frontend/src/pages/StakePage.js | 101 ++++++--- .../src/styles/WalletConnectOverride.css | 170 ++++++++++++++ 7 files changed, 648 insertions(+), 140 deletions(-) create mode 100644 trivex_frontend/src/components/WalletConnectButton.jsx create mode 100644 trivex_frontend/src/styles/WalletConnectOverride.css diff --git a/README.md b/README.md index e63475e..533806b 100644 --- a/README.md +++ b/README.md @@ -1,69 +1,202 @@ -# Trivex Web +# Trivex: Next-Generation DeFi Trading Platform -Repository for **Trivex**, a next-generation decentralized strategy analysis and trading platform built on Starknet Layer 3. +![Trivex](trivex_frontend/src/assets/trivex1.png) -## 🌐 What is Trivex? +## Overview -Trivex is the ultimate Web3 DApp that supports every trade on Starknet. Designed for speed, security, and scalability, Trivex enables users to trade crypto assets with minimal friction, reduced costs, and robust infrastructure. +Trivex is a decentralized trading platform built on Starknet, designed to empower traders with a comprehensive suite of tools and assets within a single, unified ecosystem. The platform offers a wide range of cryptocurrencies alongside advanced algorithmic and AI-powered trading strategies, enabling users to analyze and execute trades with confidence and efficiency. -Key Features: -- **Internal Order Book (IOB)**: Internal trade matching engine for trade execution. -- **Automated Market Balancer (AMB)**: Manages liquidity flows and fees algorithmically. -- **Margin Trading**: Execute various trading strategies securely and efficiently. -- **Strategy Marketplace**: Design and deploy automated trading strategies using STRK tokens. -- **Portfolio Tracking**: Real-time balance, open positions, and transaction history display. -- **Dynamic Yield Staking**: Lend USDC to earn APY from trading interest, dynamically adjusted by the AMB system so you can earn more. -- **ZK-Rollup Security**: Starknet-native, privacy-preserving, and gas-efficient. +Trivex's mission is to make crypto trading on Starknet more accessible, affordable, and versatile by lowering transaction fees and expanding the range of supported assets. The platform combines options trading, strategy signals, and portfolio management tools to help both everyday users and professional investors manage risk, diversify holdings, and identify profitable opportunities without leaving the Starknet ecosystem. -Trivex is designed to onboard both crypto-native users and traditional traders seeking access to powerful decentralized infrastructure. +By offering a broader asset selection than typical DeFi platforms and continuously improving infrastructure, Trivex aims to foster a more liquid, sophisticated, and user-driven trading environment, retaining existing users while attracting new institutional participants. ---- +## Project Structure + +The Trivex platform consists of several key components, each with specific responsibilities: + +### 📱 `trivex_frontend` + +The web application that users interact with, built with React. +- User interface for trading, portfolio management, and strategy execution +- Real-time market data visualization and charting tools +- Account management and authentication +- Responsive design for desktop and mobile users + +### 📝 `trivex_contract` + +Smart contracts written in Cairo and deployed on Starknet. +- Core business logic implementation +- Order book and trading functions +- Staking and yield generation mechanisms +- Strategy marketplace infrastructure +- Security protocols and access controls + +### 🤖 `strategy_api` + +API infrastructure for strategy execution and analysis. +- Trading strategies implementation +- Strategy backtesting and validation endpoints +- Data processing for historical performance metrics +- Real-time signal generation for trading opportunities + +### 🛡️ `titan` + +Automated hedging bot that manages platform risk. +- Interfaces with external brokers and liquidity providers +- Hedges platform exposure to maintain solvency +- Manages order routing for optimal execution +- Provides liquidity during high volatility periods + +## Core Technology + +Trivex leverages Starknet's robust infrastructure to provide: + +- **ZK-Rollup Security**: Privacy-preserving transactions with enhanced security and reduced gas costs +- **High Throughput**: Process thousands of transactions per second +- **Minimal Fees**: Significantly lower gas costs compared to Layer 1 solutions +- **Cross-Chain Compatibility**: Designed for seamless integration with various blockchain networks + +## Key Features + +### 🔄 Trading Infrastructure + +- **Internal Order Book (IOB)** + - Proprietary trade matching engine for rapid execution + - Optimized for minimal slippage and maximum efficiency + - Advanced order types including limit, market, and conditional orders + +- **Automated Market Balancer (AMB)** + - Algorithmic management of liquidity pools + - Dynamic fee adjustment based on market conditions + - Intelligent risk management system + +- **Margin Trading** + - Up to 100x leverage on select trading pairs + - Cross-collateral functionality + - Advanced risk controls and liquidation protection + +### 📊 Strategy Marketplace + +- Design, deploy, and monetize automated trading strategies +- Strategy validation and backtesting tools +- STRK token integration for strategy execution and governance +- Marketplace for discovering and subscribing to proven strategies + +### 💼 Portfolio Management + +- Comprehensive dashboard for real-time portfolio tracking +- Performance analytics and reporting +- Historical trade analysis and visualization +- Tax reporting and documentation export + +### 💰 Yield Generation + +- **Dynamic Yield Staking** + - Variable APY based on platform trading volume + - Automatic compounding options + - Multiple staking tiers with enhanced benefits + - USDC-based staking with seamless deposit/withdrawal + +## Technical Architecture + +Trivex operates on a multi-layered architecture: -## Quickstart for Trivex Frontend +1. **User Interface Layer**: Intuitive React-based frontend +2. **API Layer**: RESTful and WebSocket endpoints for data access +3. **Smart Contract Layer**: Cairo-based contracts on Starknet +4. **Settlement Layer**: ZK-rollup technology for transaction finality -### 1. Clone the Repository +## Getting Started + +### Prerequisites + +- Node.js v16+ +- npm or yarn +- Git + +### Frontend Setup ```bash +# Clone the repository git clone https://github.com/your-org/trivex_web.git cd trivex_web -``` -### 2. Install Dependencies - -```bash +# Install dependencies npm install -``` -### 3. Start the Development Server - -```bash +# Start the development server npm run start + +# Build for production +npm run build ``` -## Trivex Smart Contracts +### Smart Contract Development -Contains all the smart contracts used by Trivex created with Cairo on Starknet +The Trivex platform is powered by Cairo smart contracts deployed on Starknet. ```bash -cd trivex_contract -cd src +# Navigate to the contracts directory +cd trivex_contract/src + +# Explore the contract structure +# - Main.cairo: Core contract functionality +# - OrderBook.cairo: Internal order matching +# - Staking.cairo: Yield generation mechanism +# - Strategy.cairo: Strategy marketplace implementation ``` -## Trivex Titan Bot +### Titan Bot Setup -Contains the code for titan bot, a bot used to hedge out the orders from users to external broker +Titan is our automated hedging system that balances platform risk by interfacing with external brokers. ```bash +# Navigate to the Titan directory cd titan -py titan.py + +# Install Python dependencies +pip install -r requirements.txt + +# Run the Titan bot +python titan.py ``` -## 🌐 Community & Support +## Security + +Trivex is committed to maintaining the highest security standards: -- Website: [https://official-trivex.xyz](https://official-trivex.xyz) -- X (Twitter): [https://x.com/trivex_xyz](https://x.com/trivex_xyz) -- Telegram: [https://t.me/trivexxyz](https://t.me/trivexxyz) -- Discord: [https://discord.com/invite/EQGmqBkBfj](https://discord.com/invite/EQGmqBkBfj) -- Email: [info@official-trivex.xyz](mailto:info@official-trivex.xyz) +- Regular security audits by leading blockchain security firms +- Bug bounty program for responsible disclosure +- Multi-signature deployment and treasury management +- Comprehensive testing framework for all platform updates + +## Tokenomics + +The STRK token powers the Trivex ecosystem: + +- **Utility**: Required for strategy deployment and premium features +- **Governance**: Holders participate in platform decisions and parameter adjustments +- **Value Accrual**: Fee sharing for token stakers +- **Incentives**: Rewards for liquidity providers and strategy creators + +## Community & Support + +Join our thriving community: + +- **Website**: [https://official-trivex.xyz](https://official-trivex.xyz) +- **X (Twitter)**: [https://x.com/trivex_xyz](https://x.com/trivex_xyz) +- **Telegram**: [https://t.me/trivexxyz](https://t.me/trivexxyz) +- **Discord**: [https://discord.com/invite/EQGmqBkBfj](https://discord.com/invite/EQGmqBkBfj) +- **Email**: [info@official-trivex.xyz](mailto:info@official-trivex.xyz) + +## Contributing + +We welcome contributions from the community. Please see our [Contributing Guidelines](CONTRIBUTING.md) for details on how to get involved. + +## License + +Trivex is licensed under the [MIT License](LICENSE). + +--- -Feel free to reach out, join the conversation, or contribute to the project! +© 2023 Trivex Labs. All Rights Reserved. diff --git a/trivex_frontend/src/components/Alert.jsx b/trivex_frontend/src/components/Alert.jsx index a78da6f..7322766 100644 --- a/trivex_frontend/src/components/Alert.jsx +++ b/trivex_frontend/src/components/Alert.jsx @@ -1,5 +1,28 @@ import React from 'react'; -import {Typography, Box} from '@mui/material'; +import { Typography, Box, Paper, Button } from '@mui/material'; +import { styled } from '@mui/material/styles'; +import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet'; + +const GlassCard = styled(Paper)(({ theme }) => ({ + background: 'rgba(28, 25, 38, 0.85)', + backdropFilter: 'blur(10px)', + borderRadius: '16px', + border: '1px solid rgba(126, 87, 194, 0.3)', + boxShadow: '0 8px 32px 0 rgba(31, 38, 135, 0.25)', + padding: theme.spacing(4), + maxWidth: '500px', + width: '90%', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + gap: theme.spacing(3), +})); + +const WalletIcon = styled(AccountBalanceWalletIcon)(({ theme }) => ({ + fontSize: '4rem', + color: '#9B6DFF', + filter: 'drop-shadow(0 0 8px rgba(155, 109, 255, 0.5))', +})); export const Connected = () => { return ( @@ -10,18 +33,31 @@ export const Connected = () => { justifyContent: 'center', alignItems: 'center', textAlign: 'center', + background: 'linear-gradient(135deg, #2A0F55 0%, #1A0033 100%)', }} > - - Please connect your wallet to access the application. - + + + + Connect Your Wallet + + + Please connect your wallet to access all features of the Trivex platform. + + ); }; @@ -35,18 +71,30 @@ export const Whitelisted = () => { justifyContent: 'center', alignItems: 'center', textAlign: 'center', + background: 'linear-gradient(135deg, #2A0F55 0%, #1A0033 100%)', }} > - - Your wallet is not on the whitelist. - + + + Wallet Not Whitelisted + + + Your wallet is not on the whitelist. Please contact support for assistance. + + ); }; diff --git a/trivex_frontend/src/components/Navbar.jsx b/trivex_frontend/src/components/Navbar.jsx index c6bc82c..4dde838 100644 --- a/trivex_frontend/src/components/Navbar.jsx +++ b/trivex_frontend/src/components/Navbar.jsx @@ -21,6 +21,7 @@ import { connect, disconnect } from "get-starknet"; import { encode } from "starknet"; import { AppContext } from './AppProvider'; import MenuIcon from '@mui/icons-material/Menu'; +import WalletConnectButton from './WalletConnectButton'; // Styled components with enhanced web3 styling const StyledToolbar = styled(Toolbar)({ @@ -80,7 +81,7 @@ const NavLink = styled(Typography)(({ theme }) => ({ const StyledButton = styled(Button)(({ theme }) => ({ background: 'linear-gradient(135deg, #9B6DFF 0%, #6A4BA1 100%)', - color: 'white', + color: '#FFFFFF', fontWeight: 'bold', borderRadius: '12px', padding: '10px 20px', @@ -89,9 +90,11 @@ const StyledButton = styled(Button)(({ theme }) => ({ boxShadow: '0 4px 20px rgba(106, 75, 161, 0.25)', position: 'relative', overflow: 'hidden', + border: '1px solid rgba(155, 109, 255, 0.5)', '&:hover': { boxShadow: '0 6px 25px rgba(106, 75, 161, 0.4)', - transform: 'translateY(-2px)' + transform: 'translateY(-2px)', + background: 'linear-gradient(135deg, #8A5CF7 0%, #5A3A91 100%)', }, '&::after': { content: '""', @@ -168,10 +171,7 @@ const theme = createTheme({ const Navbar = () => { const info = useContext(AppContext); - const [connected, setConnected] = useState('Connect'); const [openDrawer, setOpenDrawer] = useState(false); - const [walletName, setWalletName] = useState(""); - const [wallet, setWallet] = useState(""); const [scrolled, setScrolled] = useState(false); const isMobile = useMediaQuery(theme.breakpoints.down('sm')); const location = useLocation(); @@ -191,39 +191,6 @@ const Navbar = () => { }; }, [scrolled]); - const handleDisconnect = async () => { - await disconnect({ clearLastWallet: true }); - setWallet(""); - info.setWalletAddress(null); - setWalletName(""); - setConnected('Connect'); - }; - - const handleConnect = async () => { - try { - const getWallet = await connect(); - await getWallet?.enable({ starknetVersion: "v5" }); - setWallet(getWallet); - const addr = encode.addHexPrefix(encode.removeHexPrefix(getWallet?.selectedAddress ?? "0x").padStart(64, "0")); - info.setWalletAddress(addr); - const profile = addr.substring(0, 2) + "..." + addr.substring(addr.length - 4); - setConnected(profile); - setWalletName(getWallet?.name || ""); - info.setWallet(getWallet); - info.setRouteTrigger(false); - } catch (e) { - console.log(e); - } - }; - - const handleConnectButton = async () => { - if (info.walletAddress == null) { - handleConnect(); - } else { - handleDisconnect(); - } - }; - const handleRouteClick = () => { info.setRouteTrigger(false); }; @@ -365,11 +332,7 @@ const Navbar = () => { {!isMobile && ( - - {connected} - + )} { - { - handleConnectButton(); - setOpenDrawer(false); - }} - sx={{ width: '100%' }} - > - {connected} - + setOpenDrawer(false)} + /> diff --git a/trivex_frontend/src/components/WalletConnectButton.jsx b/trivex_frontend/src/components/WalletConnectButton.jsx new file mode 100644 index 0000000..9eb6560 --- /dev/null +++ b/trivex_frontend/src/components/WalletConnectButton.jsx @@ -0,0 +1,155 @@ +import React, { useEffect, useContext } from 'react'; +import { Button, styled } from '@mui/material'; +import { connect, disconnect } from "get-starknet"; +import { encode } from "starknet"; +import { AppContext } from './AppProvider'; + +// Styled button component to match the app's design +const StyledButton = styled(Button)(({ theme }) => ({ + background: 'linear-gradient(135deg, #9B6DFF 0%, #6A4BA1 100%)', + color: '#FFFFFF', + fontWeight: 'bold', + borderRadius: '12px', + padding: '10px 20px', + transition: 'all 0.3s ease', + textTransform: 'none', + boxShadow: '0 4px 20px rgba(106, 75, 161, 0.25)', + position: 'relative', + overflow: 'hidden', + border: '1px solid rgba(155, 109, 255, 0.5)', + '&:hover': { + boxShadow: '0 6px 25px rgba(106, 75, 161, 0.4)', + transform: 'translateY(-2px)', + background: 'linear-gradient(135deg, #8A5CF7 0%, #5A3A91 100%)', + }, + '&::after': { + content: '""', + position: 'absolute', + top: '-50%', + left: '-50%', + width: '200%', + height: '200%', + background: 'linear-gradient(to bottom right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 100%)', + transform: 'rotate(30deg)', + transition: 'transform 0.7s ease', + }, + '&:hover::after': { + transform: 'rotate(30deg) translate(50%, 50%)', + } +})); + +const WalletConnectButton = ({ fullWidth, onClick }) => { + const info = useContext(AppContext); + + // Apply custom styling to the get-starknet dialog + useEffect(() => { + // Function to apply dark theme to wallet connect dialog + const applyDarkThemeToWalletDialog = () => { + // Target the dialog when it appears in the DOM + const observer = new MutationObserver((mutations) => { + mutations.forEach((mutation) => { + if (mutation.addedNodes.length) { + mutation.addedNodes.forEach((node) => { + if (node.nodeType === 1) { // Element node + // Check if this is a dialog + if (node.getAttribute('role') === 'dialog' || + node.querySelector('[role="dialog"]')) { + + // Apply dark theme styles + const dialog = node.getAttribute('role') === 'dialog' + ? node + : node.querySelector('[role="dialog"]'); + + if (dialog) { + dialog.classList.add('starknet-connect-modal'); + + // Style all buttons in the dialog + const buttons = dialog.querySelectorAll('button'); + buttons.forEach(button => { + button.style.backgroundColor = 'rgba(41, 21, 71, 0.75)'; + button.style.color = '#FFFFFF'; + button.style.border = '1px solid rgba(126, 87, 194, 0.3)'; + button.style.borderRadius = '12px'; + }); + + // Style all text elements + const textElements = dialog.querySelectorAll('p, h1, h2, h3, h4, h5, h6, span'); + textElements.forEach(el => { + el.style.color = '#FFFFFF'; + }); + + // Set dialog background + dialog.style.backgroundColor = 'rgba(28, 25, 38, 0.95)'; + dialog.style.backdropFilter = 'blur(10px)'; + dialog.style.border = '1px solid rgba(126, 87, 194, 0.3)'; + dialog.style.borderRadius = '16px'; + + // Style the dialog content background + const dialogContent = dialog.querySelector('div'); + if (dialogContent) { + dialogContent.style.backgroundColor = 'rgba(28, 25, 38, 0.95)'; + } + } + } + } + }); + } + }); + }); + + // Start observing the document body + observer.observe(document.body, { childList: true, subtree: true }); + + // Return cleanup function + return () => observer.disconnect(); + }; + + const cleanup = applyDarkThemeToWalletDialog(); + return cleanup; + }, []); + + const handleDisconnect = async () => { + await disconnect({ clearLastWallet: true }); + info.setWalletAddress(null); + info.setWallet(null); + if (onClick) onClick(); + }; + + const handleConnect = async () => { + try { + const getWallet = await connect(); + await getWallet?.enable({ starknetVersion: "v5" }); + const addr = encode.addHexPrefix(encode.removeHexPrefix(getWallet?.selectedAddress ?? "0x").padStart(64, "0")); + info.setWalletAddress(addr); + info.setWallet(getWallet); + info.setRouteTrigger(false); + if (onClick) onClick(); + } catch (e) { + console.log(e); + } + }; + + const handleConnectButton = async () => { + if (info.walletAddress == null) { + handleConnect(); + } else { + handleDisconnect(); + } + }; + + // Display wallet address in shortened form if connected + const buttonText = info.walletAddress + ? `${info.walletAddress.substring(0, 4)}...${info.walletAddress.substring(info.walletAddress.length - 4)}` + : 'Connect'; + + return ( + + {buttonText} + + ); +}; + +export default WalletConnectButton; \ No newline at end of file diff --git a/trivex_frontend/src/index.js b/trivex_frontend/src/index.js index d563c0f..1374903 100644 --- a/trivex_frontend/src/index.js +++ b/trivex_frontend/src/index.js @@ -1,6 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; +import './styles/WalletConnectOverride.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; diff --git a/trivex_frontend/src/pages/StakePage.js b/trivex_frontend/src/pages/StakePage.js index fec76d7..61cdd16 100644 --- a/trivex_frontend/src/pages/StakePage.js +++ b/trivex_frontend/src/pages/StakePage.js @@ -1,6 +1,7 @@ -import React, { useState, useEffect, useContext } from 'react'; -import { Grid, Box, Typography, Button, Paper, Container, Stack } from '@mui/material'; +import React, { useState, useEffect, useContext, useCallback } from 'react'; +import { Grid, Box, Typography, Button, Paper, Container, Stack, IconButton, Tooltip } from '@mui/material'; import { styled } from '@mui/material/styles'; +import RefreshIcon from '@mui/icons-material/Refresh'; import { Connected } from '../components/Alert'; import { AppContext } from '../components/AppProvider'; import StakePopup from '../components/Stake'; // Used as StakePopup @@ -76,6 +77,18 @@ const OutlinedButton = styled(Button)(({ theme }) => ({ } })); +const RefreshIconButton = styled(IconButton)(({ theme }) => ({ + color: '#9B6DFF', + background: 'rgba(155, 109, 255, 0.1)', + borderRadius: '50%', + padding: '8px', + transition: 'all 0.3s ease', + '&:hover': { + background: 'rgba(155, 109, 255, 0.2)', + transform: 'rotate(180deg)', + } +})); + const StakePage = () => { const info = useContext(AppContext); @@ -90,19 +103,20 @@ const StakePage = () => { const [poolBalance, setPoolBalance] = useState(0); const [totalPoolBalance, setTotalPoolBalance] = useState(0); const [apy, setApy] = useState(0); + const [isRefreshing, setIsRefreshing] = useState(false); const contract = new AppContract(); - const getBalance = async () => { + const getBalance = useCallback(async () => { try { return await contract.getWalletBalance(info.walletAddress); } catch (error) { console.error('Error fetching balance:', error); throw error; } - }; + }, [contract, info.walletAddress]); - const fetchPoolBalance = async () => { + const fetchPoolBalance = useCallback(async () => { try { const result = await contract.getStakedBalance(info.walletAddress); setPoolBalance(result); @@ -110,9 +124,9 @@ const StakePage = () => { console.error('Error fetching staked balance:', err); setPoolBalance(0); } - }; + }, [contract, info.walletAddress]); - const fetchTotalPool = async () => { + const fetchTotalPool = useCallback(async () => { try { const result = await contract.getTotalStaked(); setTotalPoolBalance(result); @@ -120,9 +134,9 @@ const StakePage = () => { console.error('Error fetching staked balance:', err); setTotalPoolBalance(0); } - }; + }, [contract]); - const fetchApy = async () => { + const fetchApy = useCallback(async () => { try { const result = await contract.getApy(); setApy(result); @@ -130,7 +144,7 @@ const StakePage = () => { console.error('Error fetching staked balance:', err); setApy(0); } - }; + }, [contract]); const handleStakePopUp = async () => { try { @@ -156,6 +170,8 @@ const StakePage = () => { const result = await contract.stake(info.wallet.account, amount); console.log("Stake Result:", result); alert("Stake completed successfully!"); + setStakePopupOpen(false); + await refreshData(); } catch (error) { console.error("An error occurred during the stake process:", error); if (error.message.includes("User abort")) { @@ -173,25 +189,42 @@ const StakePage = () => { console.log('Unstake Result:', result); alert('Unstake completed successfully!'); setUnstakePopupOpen(false); - - await fetchPoolBalance(); + await refreshData(); } catch (err) { console.error('An error occurred during unstaking:', err); alert(err.message.includes('User abort') ? 'Transaction aborted.' : 'Unexpected error.'); } }; - const refreshData = async () => { - fetchPoolBalance(); - fetchApy(); - fetchTotalPool(); - }; + const refreshData = useCallback(async () => { + if (!info.walletAddress) return; + + setIsRefreshing(true); + try { + await Promise.all([ + fetchPoolBalance(), + fetchApy(), + fetchTotalPool() + ]); + } catch (error) { + console.error("Error refreshing data:", error); + } finally { + setIsRefreshing(false); + info.setRouteTrigger(true); + } + }, [info.walletAddress, fetchPoolBalance, fetchApy, fetchTotalPool]); useEffect(() => { if (info.walletAddress && !info.routeTrigger) { refreshData(); } - }, [info, refreshData]); + }, [info.walletAddress, info.routeTrigger, refreshData]); + + useEffect(() => { + if (!isStakePopupOpen && !isUnstakePopupOpen && info.walletAddress && !info.routeTrigger) { + refreshData(); + } + }, [isStakePopupOpen, isUnstakePopupOpen, info.walletAddress, refreshData]); if (info.walletAddress != null) { return ( @@ -201,14 +234,14 @@ const StakePage = () => { - + - {stakeData.title} - + {stakeData.title} + { fontWeight: 'bold', fontSize: '1.1rem' }}> - {apy}% - - - - + {apy}% + + + + + + + + + Stake @@ -288,9 +331,9 @@ const StakePage = () => { color: '#B19EE3' }}> USD - - - + + + diff --git a/trivex_frontend/src/styles/WalletConnectOverride.css b/trivex_frontend/src/styles/WalletConnectOverride.css new file mode 100644 index 0000000..85cfc32 --- /dev/null +++ b/trivex_frontend/src/styles/WalletConnectOverride.css @@ -0,0 +1,170 @@ +/* Wallet Connect Dialog Override Styles */ + +/* Target the wallet connect dialog */ +.wallet-connect-dialog { + background-color: rgba(28, 25, 38, 0.95) !important; + border: 1px solid rgba(126, 87, 194, 0.3) !important; + border-radius: 16px !important; + color: #FFFFFF !important; + box-shadow: 0 8px 32px rgba(31, 38, 135, 0.25) !important; + backdrop-filter: blur(10px) !important; +} + +/* Target the wallet options */ +.wallet-option { + background-color: rgba(41, 21, 71, 0.75) !important; + border: 1px solid rgba(126, 87, 194, 0.3) !important; + border-radius: 12px !important; + color: #FFFFFF !important; + transition: all 0.3s ease !important; +} + +.wallet-option:hover { + background-color: rgba(155, 109, 255, 0.2) !important; + transform: translateY(-2px) !important; + box-shadow: 0 4px 12px rgba(106, 75, 161, 0.2) !important; +} + +/* Target text elements */ +.wallet-connect-dialog h1, +.wallet-connect-dialog h2, +.wallet-connect-dialog h3, +.wallet-connect-dialog p, +.wallet-connect-dialog span { + color: #FFFFFF !important; +} + +/* Target secondary text */ +.wallet-connect-dialog .secondary-text { + color: #B19EE3 !important; +} + +/* Override any white backgrounds */ +div[role="dialog"] { + background-color: rgba(28, 25, 38, 0.95) !important; + color: #FFFFFF !important; +} + +/* Target the specific wallet connect modal from get-starknet */ +.starknet-connect-modal { + background-color: rgba(28, 25, 38, 0.95) !important; + color: #FFFFFF !important; + border-radius: 16px !important; + border: 1px solid rgba(126, 87, 194, 0.3) !important; +} + +/* Target all modal content from get-starknet */ +.starknet-connect-modal * { + color: #FFFFFF !important; + background-color: transparent !important; +} + +/* Target the wallet buttons */ +.starknet-connect-modal button { + background-color: rgba(41, 21, 71, 0.75) !important; + border: 1px solid rgba(126, 87, 194, 0.3) !important; + border-radius: 12px !important; + color: #FFFFFF !important; + transition: all 0.3s ease !important; +} + +.starknet-connect-modal button:hover { + background-color: rgba(155, 109, 255, 0.2) !important; + transform: translateY(-2px) !important; +} + +/* Target the modal backdrop */ +.MuiBackdrop-root { + background-color: rgba(0, 0, 0, 0.7) !important; + backdrop-filter: blur(5px) !important; +} + +/* Specifically target the wallet connect dialog */ +[data-rk] { + --rk-colors-bg-1: rgba(28, 25, 38, 0.95) !important; + --rk-colors-bg-2: rgba(41, 21, 71, 0.75) !important; + --rk-colors-bg-3: rgba(41, 21, 71, 0.85) !important; + --rk-colors-text-1: #FFFFFF !important; + --rk-colors-text-2: #B19EE3 !important; + --rk-colors-text-3: #9B6DFF !important; + --rk-colors-border-1: rgba(126, 87, 194, 0.3) !important; + --rk-radii-actionButton: 12px !important; + --rk-radii-connectButton: 12px !important; + --rk-radii-menuButton: 12px !important; + --rk-radii-modal: 16px !important; + --rk-shadows-connectButton: 0 4px 12px rgba(106, 75, 161, 0.2) !important; +} + +/* Additional styles for wallet connect dialog */ + +/* Target the modal container */ +.MuiModal-root { + background-color: rgba(0, 0, 0, 0.7) !important; +} + +/* Target the dialog paper */ +.MuiPaper-root[role="dialog"] { + background-color: rgba(28, 25, 38, 0.95) !important; + color: #FFFFFF !important; + border: 1px solid rgba(126, 87, 194, 0.3) !important; + border-radius: 16px !important; + box-shadow: 0 8px 32px rgba(31, 38, 135, 0.25) !important; +} + +/* Target all divs inside the dialog */ +.MuiPaper-root[role="dialog"] div { + background-color: transparent !important; +} + +/* Target all wallet option buttons */ +.MuiPaper-root[role="dialog"] button { + background-color: rgba(41, 21, 71, 0.75) !important; + color: #FFFFFF !important; + border: 1px solid rgba(126, 87, 194, 0.3) !important; + border-radius: 12px !important; + transition: all 0.3s ease !important; +} + +.MuiPaper-root[role="dialog"] button:hover { + background-color: rgba(155, 109, 255, 0.2) !important; + transform: translateY(-2px) !important; +} + +/* Target all text elements */ +.MuiPaper-root[role="dialog"] p, +.MuiPaper-root[role="dialog"] h1, +.MuiPaper-root[role="dialog"] h2, +.MuiPaper-root[role="dialog"] h3, +.MuiPaper-root[role="dialog"] h4, +.MuiPaper-root[role="dialog"] h5, +.MuiPaper-root[role="dialog"] h6, +.MuiPaper-root[role="dialog"] span { + color: #FFFFFF !important; +} + +/* Target specific get-starknet dialog elements */ +[data-testid="starknet-windowlayer"] { + background-color: rgba(0, 0, 0, 0.7) !important; + backdrop-filter: blur(5px) !important; +} + +[data-testid="starknet-window"] { + background-color: rgba(28, 25, 38, 0.95) !important; + border: 1px solid rgba(126, 87, 194, 0.3) !important; + border-radius: 16px !important; + box-shadow: 0 8px 32px rgba(31, 38, 135, 0.25) !important; +} + +[data-testid="starknet-window"] * { + color: #FFFFFF !important; +} + +[data-testid="starknet-window"] button { + background-color: rgba(41, 21, 71, 0.75) !important; + border: 1px solid rgba(126, 87, 194, 0.3) !important; + border-radius: 12px !important; +} + +[data-testid="starknet-window"] button:hover { + background-color: rgba(155, 109, 255, 0.2) !important; +} \ No newline at end of file From 1ba34f0bffe037a137ebae1d031c8a5b8db4737e Mon Sep 17 00:00:00 2001 From: JY20 Date: Thu, 22 May 2025 21:07:15 -0400 Subject: [PATCH 2/2] rename dir --- .gitignore | 2 +- README.md | 1 + {trivex_frontend => trivex_web}/package-lock.json | 0 {trivex_frontend => trivex_web}/package.json | 0 {trivex_frontend => trivex_web}/public/Titan.png | Bin {trivex_frontend => trivex_web}/public/_redirects | 0 {trivex_frontend => trivex_web}/public/favicon.ico | Bin {trivex_frontend => trivex_web}/public/index.html | 0 {trivex_frontend => trivex_web}/public/logo192.png | Bin {trivex_frontend => trivex_web}/public/logo5.png | Bin {trivex_frontend => trivex_web}/public/logo512.png | Bin .../public/logo_color.png | Bin .../public/logo_round.png | Bin {trivex_frontend => trivex_web}/public/logo_t.png | Bin .../public/manifest.json | 0 {trivex_frontend => trivex_web}/public/robots.txt | 0 .../public/trivex_round.png | Bin {trivex_frontend => trivex_web}/src/App.css | 0 {trivex_frontend => trivex_web}/src/App.js | 0 {trivex_frontend => trivex_web}/src/App.test.js | 0 .../src/assets/Trivex1.png | Bin .../src/assets/data.json | 0 .../src/assets/starknet.png | Bin .../src/assets/tokens.csv | 0 .../src/components/Alert.jsx | 0 .../src/components/AppContract.jsx | 0 .../src/components/AppProvider.jsx | 0 .../src/components/CloseOrder.jsx | 0 .../src/components/Footer.jsx | 0 .../src/components/Information.jsx | 0 .../src/components/Loading.jsx | 0 .../src/components/Navbar.jsx | 0 .../src/components/OpenOrder.jsx | 0 .../src/components/Result.jsx | 0 .../src/components/Selection.jsx | 0 .../src/components/Stake.jsx | 0 .../src/components/TradingViewWidget.js | 0 .../src/components/Unstake.jsx | 0 .../src/components/WalletConnectButton.jsx | 0 .../src/components/paramCreator.jsx | 0 {trivex_frontend => trivex_web}/src/index.css | 0 {trivex_frontend => trivex_web}/src/index.js | 0 {trivex_frontend => trivex_web}/src/logo.svg | 0 .../src/pages/SettingPage.js | 0 .../src/pages/StakePage.js | 0 .../src/pages/StrategyPage.js | 0 .../src/pages/TradePage.js | 0 .../src/reportWebVitals.js | 0 {trivex_frontend => trivex_web}/src/setupTests.js | 0 .../src/styles/WalletConnectOverride.css | 0 50 files changed, 2 insertions(+), 1 deletion(-) rename {trivex_frontend => trivex_web}/package-lock.json (100%) rename {trivex_frontend => trivex_web}/package.json (100%) rename {trivex_frontend => trivex_web}/public/Titan.png (100%) rename {trivex_frontend => trivex_web}/public/_redirects (100%) rename {trivex_frontend => trivex_web}/public/favicon.ico (100%) rename {trivex_frontend => trivex_web}/public/index.html (100%) rename {trivex_frontend => trivex_web}/public/logo192.png (100%) rename {trivex_frontend => trivex_web}/public/logo5.png (100%) rename {trivex_frontend => trivex_web}/public/logo512.png (100%) rename {trivex_frontend => trivex_web}/public/logo_color.png (100%) rename {trivex_frontend => trivex_web}/public/logo_round.png (100%) rename {trivex_frontend => trivex_web}/public/logo_t.png (100%) rename {trivex_frontend => trivex_web}/public/manifest.json (100%) rename {trivex_frontend => trivex_web}/public/robots.txt (100%) rename {trivex_frontend => trivex_web}/public/trivex_round.png (100%) rename {trivex_frontend => trivex_web}/src/App.css (100%) rename {trivex_frontend => trivex_web}/src/App.js (100%) rename {trivex_frontend => trivex_web}/src/App.test.js (100%) rename {trivex_frontend => trivex_web}/src/assets/Trivex1.png (100%) rename {trivex_frontend => trivex_web}/src/assets/data.json (100%) rename {trivex_frontend => trivex_web}/src/assets/starknet.png (100%) rename {trivex_frontend => trivex_web}/src/assets/tokens.csv (100%) rename {trivex_frontend => trivex_web}/src/components/Alert.jsx (100%) rename {trivex_frontend => trivex_web}/src/components/AppContract.jsx (100%) rename {trivex_frontend => trivex_web}/src/components/AppProvider.jsx (100%) rename {trivex_frontend => trivex_web}/src/components/CloseOrder.jsx (100%) rename {trivex_frontend => trivex_web}/src/components/Footer.jsx (100%) rename {trivex_frontend => trivex_web}/src/components/Information.jsx (100%) rename {trivex_frontend => trivex_web}/src/components/Loading.jsx (100%) rename {trivex_frontend => trivex_web}/src/components/Navbar.jsx (100%) rename {trivex_frontend => trivex_web}/src/components/OpenOrder.jsx (100%) rename {trivex_frontend => trivex_web}/src/components/Result.jsx (100%) rename {trivex_frontend => trivex_web}/src/components/Selection.jsx (100%) rename {trivex_frontend => trivex_web}/src/components/Stake.jsx (100%) rename {trivex_frontend => trivex_web}/src/components/TradingViewWidget.js (100%) rename {trivex_frontend => trivex_web}/src/components/Unstake.jsx (100%) rename {trivex_frontend => trivex_web}/src/components/WalletConnectButton.jsx (100%) rename {trivex_frontend => trivex_web}/src/components/paramCreator.jsx (100%) rename {trivex_frontend => trivex_web}/src/index.css (100%) rename {trivex_frontend => trivex_web}/src/index.js (100%) rename {trivex_frontend => trivex_web}/src/logo.svg (100%) rename {trivex_frontend => trivex_web}/src/pages/SettingPage.js (100%) rename {trivex_frontend => trivex_web}/src/pages/StakePage.js (100%) rename {trivex_frontend => trivex_web}/src/pages/StrategyPage.js (100%) rename {trivex_frontend => trivex_web}/src/pages/TradePage.js (100%) rename {trivex_frontend => trivex_web}/src/reportWebVitals.js (100%) rename {trivex_frontend => trivex_web}/src/setupTests.js (100%) rename {trivex_frontend => trivex_web}/src/styles/WalletConnectOverride.css (100%) diff --git a/.gitignore b/.gitignore index 9e27562..aedb4ff 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,7 @@ # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies -trivex_frontend/node_modules/ +*/node_modules/ /.pnp .pnp.js diff --git a/README.md b/README.md index 533806b..f72c6b9 100644 --- a/README.md +++ b/README.md @@ -122,6 +122,7 @@ git clone https://github.com/your-org/trivex_web.git cd trivex_web # Install dependencies +npm install react-scripts --save npm install # Start the development server diff --git a/trivex_frontend/package-lock.json b/trivex_web/package-lock.json similarity index 100% rename from trivex_frontend/package-lock.json rename to trivex_web/package-lock.json diff --git a/trivex_frontend/package.json b/trivex_web/package.json similarity index 100% rename from trivex_frontend/package.json rename to trivex_web/package.json diff --git a/trivex_frontend/public/Titan.png b/trivex_web/public/Titan.png similarity index 100% rename from trivex_frontend/public/Titan.png rename to trivex_web/public/Titan.png diff --git a/trivex_frontend/public/_redirects b/trivex_web/public/_redirects similarity index 100% rename from trivex_frontend/public/_redirects rename to trivex_web/public/_redirects diff --git a/trivex_frontend/public/favicon.ico b/trivex_web/public/favicon.ico similarity index 100% rename from trivex_frontend/public/favicon.ico rename to trivex_web/public/favicon.ico diff --git a/trivex_frontend/public/index.html b/trivex_web/public/index.html similarity index 100% rename from trivex_frontend/public/index.html rename to trivex_web/public/index.html diff --git a/trivex_frontend/public/logo192.png b/trivex_web/public/logo192.png similarity index 100% rename from trivex_frontend/public/logo192.png rename to trivex_web/public/logo192.png diff --git a/trivex_frontend/public/logo5.png b/trivex_web/public/logo5.png similarity index 100% rename from trivex_frontend/public/logo5.png rename to trivex_web/public/logo5.png diff --git a/trivex_frontend/public/logo512.png b/trivex_web/public/logo512.png similarity index 100% rename from trivex_frontend/public/logo512.png rename to trivex_web/public/logo512.png diff --git a/trivex_frontend/public/logo_color.png b/trivex_web/public/logo_color.png similarity index 100% rename from trivex_frontend/public/logo_color.png rename to trivex_web/public/logo_color.png diff --git a/trivex_frontend/public/logo_round.png b/trivex_web/public/logo_round.png similarity index 100% rename from trivex_frontend/public/logo_round.png rename to trivex_web/public/logo_round.png diff --git a/trivex_frontend/public/logo_t.png b/trivex_web/public/logo_t.png similarity index 100% rename from trivex_frontend/public/logo_t.png rename to trivex_web/public/logo_t.png diff --git a/trivex_frontend/public/manifest.json b/trivex_web/public/manifest.json similarity index 100% rename from trivex_frontend/public/manifest.json rename to trivex_web/public/manifest.json diff --git a/trivex_frontend/public/robots.txt b/trivex_web/public/robots.txt similarity index 100% rename from trivex_frontend/public/robots.txt rename to trivex_web/public/robots.txt diff --git a/trivex_frontend/public/trivex_round.png b/trivex_web/public/trivex_round.png similarity index 100% rename from trivex_frontend/public/trivex_round.png rename to trivex_web/public/trivex_round.png diff --git a/trivex_frontend/src/App.css b/trivex_web/src/App.css similarity index 100% rename from trivex_frontend/src/App.css rename to trivex_web/src/App.css diff --git a/trivex_frontend/src/App.js b/trivex_web/src/App.js similarity index 100% rename from trivex_frontend/src/App.js rename to trivex_web/src/App.js diff --git a/trivex_frontend/src/App.test.js b/trivex_web/src/App.test.js similarity index 100% rename from trivex_frontend/src/App.test.js rename to trivex_web/src/App.test.js diff --git a/trivex_frontend/src/assets/Trivex1.png b/trivex_web/src/assets/Trivex1.png similarity index 100% rename from trivex_frontend/src/assets/Trivex1.png rename to trivex_web/src/assets/Trivex1.png diff --git a/trivex_frontend/src/assets/data.json b/trivex_web/src/assets/data.json similarity index 100% rename from trivex_frontend/src/assets/data.json rename to trivex_web/src/assets/data.json diff --git a/trivex_frontend/src/assets/starknet.png b/trivex_web/src/assets/starknet.png similarity index 100% rename from trivex_frontend/src/assets/starknet.png rename to trivex_web/src/assets/starknet.png diff --git a/trivex_frontend/src/assets/tokens.csv b/trivex_web/src/assets/tokens.csv similarity index 100% rename from trivex_frontend/src/assets/tokens.csv rename to trivex_web/src/assets/tokens.csv diff --git a/trivex_frontend/src/components/Alert.jsx b/trivex_web/src/components/Alert.jsx similarity index 100% rename from trivex_frontend/src/components/Alert.jsx rename to trivex_web/src/components/Alert.jsx diff --git a/trivex_frontend/src/components/AppContract.jsx b/trivex_web/src/components/AppContract.jsx similarity index 100% rename from trivex_frontend/src/components/AppContract.jsx rename to trivex_web/src/components/AppContract.jsx diff --git a/trivex_frontend/src/components/AppProvider.jsx b/trivex_web/src/components/AppProvider.jsx similarity index 100% rename from trivex_frontend/src/components/AppProvider.jsx rename to trivex_web/src/components/AppProvider.jsx diff --git a/trivex_frontend/src/components/CloseOrder.jsx b/trivex_web/src/components/CloseOrder.jsx similarity index 100% rename from trivex_frontend/src/components/CloseOrder.jsx rename to trivex_web/src/components/CloseOrder.jsx diff --git a/trivex_frontend/src/components/Footer.jsx b/trivex_web/src/components/Footer.jsx similarity index 100% rename from trivex_frontend/src/components/Footer.jsx rename to trivex_web/src/components/Footer.jsx diff --git a/trivex_frontend/src/components/Information.jsx b/trivex_web/src/components/Information.jsx similarity index 100% rename from trivex_frontend/src/components/Information.jsx rename to trivex_web/src/components/Information.jsx diff --git a/trivex_frontend/src/components/Loading.jsx b/trivex_web/src/components/Loading.jsx similarity index 100% rename from trivex_frontend/src/components/Loading.jsx rename to trivex_web/src/components/Loading.jsx diff --git a/trivex_frontend/src/components/Navbar.jsx b/trivex_web/src/components/Navbar.jsx similarity index 100% rename from trivex_frontend/src/components/Navbar.jsx rename to trivex_web/src/components/Navbar.jsx diff --git a/trivex_frontend/src/components/OpenOrder.jsx b/trivex_web/src/components/OpenOrder.jsx similarity index 100% rename from trivex_frontend/src/components/OpenOrder.jsx rename to trivex_web/src/components/OpenOrder.jsx diff --git a/trivex_frontend/src/components/Result.jsx b/trivex_web/src/components/Result.jsx similarity index 100% rename from trivex_frontend/src/components/Result.jsx rename to trivex_web/src/components/Result.jsx diff --git a/trivex_frontend/src/components/Selection.jsx b/trivex_web/src/components/Selection.jsx similarity index 100% rename from trivex_frontend/src/components/Selection.jsx rename to trivex_web/src/components/Selection.jsx diff --git a/trivex_frontend/src/components/Stake.jsx b/trivex_web/src/components/Stake.jsx similarity index 100% rename from trivex_frontend/src/components/Stake.jsx rename to trivex_web/src/components/Stake.jsx diff --git a/trivex_frontend/src/components/TradingViewWidget.js b/trivex_web/src/components/TradingViewWidget.js similarity index 100% rename from trivex_frontend/src/components/TradingViewWidget.js rename to trivex_web/src/components/TradingViewWidget.js diff --git a/trivex_frontend/src/components/Unstake.jsx b/trivex_web/src/components/Unstake.jsx similarity index 100% rename from trivex_frontend/src/components/Unstake.jsx rename to trivex_web/src/components/Unstake.jsx diff --git a/trivex_frontend/src/components/WalletConnectButton.jsx b/trivex_web/src/components/WalletConnectButton.jsx similarity index 100% rename from trivex_frontend/src/components/WalletConnectButton.jsx rename to trivex_web/src/components/WalletConnectButton.jsx diff --git a/trivex_frontend/src/components/paramCreator.jsx b/trivex_web/src/components/paramCreator.jsx similarity index 100% rename from trivex_frontend/src/components/paramCreator.jsx rename to trivex_web/src/components/paramCreator.jsx diff --git a/trivex_frontend/src/index.css b/trivex_web/src/index.css similarity index 100% rename from trivex_frontend/src/index.css rename to trivex_web/src/index.css diff --git a/trivex_frontend/src/index.js b/trivex_web/src/index.js similarity index 100% rename from trivex_frontend/src/index.js rename to trivex_web/src/index.js diff --git a/trivex_frontend/src/logo.svg b/trivex_web/src/logo.svg similarity index 100% rename from trivex_frontend/src/logo.svg rename to trivex_web/src/logo.svg diff --git a/trivex_frontend/src/pages/SettingPage.js b/trivex_web/src/pages/SettingPage.js similarity index 100% rename from trivex_frontend/src/pages/SettingPage.js rename to trivex_web/src/pages/SettingPage.js diff --git a/trivex_frontend/src/pages/StakePage.js b/trivex_web/src/pages/StakePage.js similarity index 100% rename from trivex_frontend/src/pages/StakePage.js rename to trivex_web/src/pages/StakePage.js diff --git a/trivex_frontend/src/pages/StrategyPage.js b/trivex_web/src/pages/StrategyPage.js similarity index 100% rename from trivex_frontend/src/pages/StrategyPage.js rename to trivex_web/src/pages/StrategyPage.js diff --git a/trivex_frontend/src/pages/TradePage.js b/trivex_web/src/pages/TradePage.js similarity index 100% rename from trivex_frontend/src/pages/TradePage.js rename to trivex_web/src/pages/TradePage.js diff --git a/trivex_frontend/src/reportWebVitals.js b/trivex_web/src/reportWebVitals.js similarity index 100% rename from trivex_frontend/src/reportWebVitals.js rename to trivex_web/src/reportWebVitals.js diff --git a/trivex_frontend/src/setupTests.js b/trivex_web/src/setupTests.js similarity index 100% rename from trivex_frontend/src/setupTests.js rename to trivex_web/src/setupTests.js diff --git a/trivex_frontend/src/styles/WalletConnectOverride.css b/trivex_web/src/styles/WalletConnectOverride.css similarity index 100% rename from trivex_frontend/src/styles/WalletConnectOverride.css rename to trivex_web/src/styles/WalletConnectOverride.css