diff --git a/frontend/src/assets/icons/deposited_dynamic.svg b/frontend/src/assets/icons/deposited_dynamic.svg new file mode 100644 index 00000000..922e8131 --- /dev/null +++ b/frontend/src/assets/icons/deposited_dynamic.svg @@ -0,0 +1,11 @@ + + + + + + + \ No newline at end of file diff --git a/frontend/src/assets/icons/usdc-icon.svg b/frontend/src/assets/icons/usdc-icon.svg new file mode 100644 index 00000000..b01dfa40 --- /dev/null +++ b/frontend/src/assets/icons/usdc-icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/components/dashboard/dashboard-tab/DashboardTabs.jsx b/frontend/src/components/dashboard/dashboard-tab/DashboardTabs.jsx new file mode 100644 index 00000000..5850e678 --- /dev/null +++ b/frontend/src/components/dashboard/dashboard-tab/DashboardTabs.jsx @@ -0,0 +1,38 @@ +import './dashboardTabs.css'; +import { ReactComponent as DepositIcon } from '../../../assets/icons/deposited_dynamic.svg'; +import { ReactComponent as CollateralIcon } from '../../../assets/icons/collateral_dynamic.svg'; +import { ReactComponent as BorrowIcon } from '../../../assets/icons/borrow_dynamic.svg'; +import { DASHBOARD_TABS } from 'utils/constants'; + +function DashboardTabs({ activeTab, switchTab }) { + const { COLLATERAL, BORROW, DEPOSITED } = DASHBOARD_TABS; + + return ( +
+ + +
+ + + +
+ + + +
+
+
+
+ ); +} + +export default DashboardTabs; diff --git a/frontend/src/components/dashboard/dashboard-tab/dashboardTabs.css b/frontend/src/components/dashboard/dashboard-tab/dashboardTabs.css new file mode 100644 index 00000000..a2c7a8ab --- /dev/null +++ b/frontend/src/components/dashboard/dashboard-tab/dashboardTabs.css @@ -0,0 +1,149 @@ +.tabs { + display: flex; + justify-content: space-between; + position: relative; + align-items: center; +} + +.tab { + flex: 1; + text-align: center; + padding: 0.5rem 0; + color: var(--gray); + cursor: pointer; + border: none; + background: none; + display: flex; + align-items: center; + justify-content: center; +} + +.tab.active { + color: var(--brand); +} + +.tab-indicator-container { + position: absolute; + bottom: -16px; + left: 0; + width: calc(100% - 20px); + height: 1px; + overflow: hidden; + background-color: var(--light-purple); +} + +.tab-indicator { + position: absolute; + bottom: 0; + left: 0; + height: 100%; + transition: transform 0.3s ease; +} + +.tab-indicator.collateral { + width: 180px; + background: var(--brand); + position: absolute; +} + +.tab-indicator.borrow { + width: 155px; + background: var(--brand); + position: absolute; + left: 38%; +} + +.tab-indicator.deposited { + width: 155px; + background: var(--brand); + position: absolute; + left: 78%; +} + +.tab-icon { + margin-right: 0.5rem; +} + +.tab-title { + font-size: 14px; + font-weight: 600; +} + +.tab-divider { + width: 3px; + height: 18px; + border-radius: 8px; + background-color: var(--border-color); + margin: 0 1rem; +} + +@media (max-width: 768px) { + .tab-title { + font-size: 14px; + font-weight: 600; + white-space: nowrap; + } + + .tab { + padding: 8px 0px; + font-size: 14px; + white-space: nowrap; + } + + .tab-divider { + width: 2px; + height: 16px; + margin: 0 4px; + background-color: var(--border-color); + } + + .tab-icon { + width: 20px; + height: 20px; + margin-right: 4px; + } + + .tab-indicator-container { + bottom: -12px; + width: calc(100% - 16px); + } +} + +@media (max-width: 550px) { + .tab-divider { + width: 2px; + height: 16px; + margin: 0 30px; + background-color: var(--border-color); + } +} + +@media (max-width: 480px) { + .tab-divider { + width: 2px; + height: 16px; + margin: 0 18px; + background-color: var(--border-color); + } + + .tab-title { + font-size: 14px; + } + + .tab { + padding: 6px 0px; + font-size: 12px; + } +} + +@media (max-width: 400px) { + .tab-title { + font-size: 12px; + } +} + +@media (max-width: 350px) { + .tabs { + padding: 0; + } +} diff --git a/frontend/src/components/dashboard/deposited/Deposited.jsx b/frontend/src/components/dashboard/deposited/Deposited.jsx new file mode 100644 index 00000000..5c33493b --- /dev/null +++ b/frontend/src/components/dashboard/deposited/Deposited.jsx @@ -0,0 +1,53 @@ +import './deposited.css'; +import { ReactComponent as EthIcon } from '../../../assets/icons/ethereum.svg'; +import { ReactComponent as StrkIcon } from '../../../assets/icons/strk.svg'; +import { ReactComponent as UsdIcon } from '../../../assets/icons/usdc-icon.svg'; + +function Deposited({ data }) { + return ( +
+
+
+
+ +

ETH

+
+

{data.eth}

+
+ +
+ +
+
+ +

STRK

+
+

{data.strk}

+
+ +
+ +
+
+ +

USDC

+
+ +

{data.usdc}

+
+ +
+ +
+
+ +

USDT

+
+

{data.usdt}

+
+
+
+ ); +} + +export default Deposited; diff --git a/frontend/src/components/dashboard/deposited/deposited.css b/frontend/src/components/dashboard/deposited/deposited.css new file mode 100644 index 00000000..9309f857 --- /dev/null +++ b/frontend/src/components/dashboard/deposited/deposited.css @@ -0,0 +1,86 @@ +.tab-content { + text-align: left; + width: 580px; + height: 190px; + padding: 0px 40px 0 20px; + margin: 16px auto 0; +} + +.tab-content p { + margin: 0; +} + +.deposited-info { + display: flex; + flex-direction: column; + gap: 8px; + justify-content: center; +} + +.deposited-item { + display: flex; + align-items: center; + justify-content: space-between; + font-size: 16px; + font-weight: 600; +} + +.currency-name { + color: var(--warning-text-color); + display: flex; + align-items: center; + gap: 4px; + font-size: 16px; + font-weight: 600; +} + +.currency-value { + color: var(--gray); +} + +.info-divider { + height: 3px; + width: 100%; + border-radius: 8px; + background-color: var(--border-color); +} + +.icon { + width: 32px; + height: 32px; + margin-right: 8px; + background: var(--border-color); + border-radius: 900px; + display: flex; + align-items: center; + justify-content: center; + padding: 7px; +} + +@media (max-width: 768px) { + .icon { + width: 24px; + height: 24px; + margin-right: 4px; + padding: 3px; + } + + .tab-content { + width: 100%; + height: auto; + padding: 16px; + margin-top: 0; + } +} + +@media (max-width: 480px) { + .tab-content { + width: fit-content; + font-size: 14px; + } + + .icon { + width: 20px; + height: 20px; + } +} diff --git a/frontend/src/pages/dashboard/Dashboard.jsx b/frontend/src/pages/dashboard/Dashboard.jsx index d8b436fe..efee2971 100644 --- a/frontend/src/pages/dashboard/Dashboard.jsx +++ b/frontend/src/pages/dashboard/Dashboard.jsx @@ -22,10 +22,12 @@ import clockIcon from 'assets/icons/clock.svg'; import computerIcon from 'assets/icons/computer-icon.svg'; import depositIcon from 'assets/icons/deposit.svg'; import withdrawIcon from 'assets/icons/withdraw.svg'; +import Deposited from 'components/dashboard/deposited/Deposited'; +import DashboardTabs from 'components/dashboard/dashboard-tab/DashboardTabs'; +import { DASHBOARD_TABS } from 'utils/constants'; export default function Component({ telegramId }) { const { walletId } = useWalletStore(); - const [isCollateralActive, setIsCollateralActive] = useState(true); const [showModal, setShowModal] = useState(false); const handleOpen = () => setShowModal(true); const handleClose = () => setShowModal(false); @@ -39,6 +41,7 @@ export default function Component({ telegramId }) { const { subscribe } = useTelegramNotification(); const hasOpenedPosition = positionData?.has_opened_position; + const { COLLATERAL, BORROW, DEPOSITED } = DASHBOARD_TABS; const handleSubscribe = () => subscribe({ telegramId, walletId }); @@ -63,6 +66,7 @@ export default function Component({ telegramId }) { const [startSum, setStartSum] = useState(0); const [currentSum, setCurrentSum] = useState(0); const [loading, setLoading] = useState(true); + const [activeTab, setActiveTab] = useState(COLLATERAL); useEffect(() => { console.log('Fetching data for walletId:', walletId); @@ -166,6 +170,8 @@ export default function Component({ telegramId }) { }, ]; + const depositedData = { eth: 1, strk: 12, usdc: 4, usdt: 9 }; + return (
@@ -180,38 +186,20 @@ export default function Component({ telegramId }) {
-
- - -
- - -
-
-
-
- {isCollateralActive ? ( + + + {activeTab === COLLATERAL && ( - ) : ( - )} + + {activeTab === BORROW && } + + {activeTab === DEPOSITED && }