diff --git a/src/App.jsx b/src/App.jsx index b09988b..dd0b6ae 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -19,6 +19,7 @@ import { observer } from 'mobx-react-lite'; import Delegates from './pages/services/Delegates'; import VPNServers from './pages/services/VPNServers'; import VPNPrepare from './pages/services/VPNPrepare'; +import { NotificationContainer } from './components/NotificationContainer'; const App = observer(() => { const location = useLocation(); @@ -39,6 +40,7 @@ const App = observer(() => { return ( <> {store.loading && } + } /> } /> diff --git a/src/components/DropdownTransaction.jsx b/src/components/DropdownTransaction.jsx index c15874d..5d724b8 100644 --- a/src/components/DropdownTransaction.jsx +++ b/src/components/DropdownTransaction.jsx @@ -89,9 +89,9 @@ function DropdownTransaction({ align, value, onChange }) {
  • changeValue('Unvoiting')} + onClick={() => changeValue('Unlocking')} > - Unvoiting + Unlocking
    • diff --git a/src/components/NotificationContainer.jsx b/src/components/NotificationContainer.jsx new file mode 100644 index 0000000..e477aed --- /dev/null +++ b/src/components/NotificationContainer.jsx @@ -0,0 +1,14 @@ +import React from 'react'; +import { observer } from 'mobx-react-lite'; +import { Toast } from './Toast2'; +import { store } from '../store/store'; + +export const NotificationContainer = observer(() => ( +
    + {store.notifications.map((e) => ( + + {e.message} + + ))} +
    +)); diff --git a/src/components/Toast2.jsx b/src/components/Toast2.jsx new file mode 100644 index 0000000..6ecac81 --- /dev/null +++ b/src/components/Toast2.jsx @@ -0,0 +1,90 @@ +import React, { useEffect } from 'react'; +import { store } from '../store/store'; +import { observer } from 'mobx-react-lite'; + +export const Toast = observer(({ children, className, type, id }) => { + const typeIcon = (type) => { + switch (type) { + case 'warning': + return ( + + + + ); + case 'error': + return ( + + + + ); + case 'success': + return ( + + + + ); + default: + return ( + + + + ); + } + }; + + const typeColor = (type) => { + switch (type) { + case 'warning': + return 'bg-amber-100 border-amber-200 text-amber-600'; + case 'error': + return 'bg-rose-100 border-rose-200 text-rose-600'; + case 'success': + return 'bg-emerald-100 border-emerald-200 text-emerald-600'; + default: + return 'bg-indigo-100 border-indigo-200 text-indigo-500'; + } + }; + + useEffect(() => { + const timerId = setTimeout(() => store.removeNotification(id), 3000); + return () => clearTimeout(timerId); + }, []); + + return ( +
    +
    +
    +
    + {typeIcon(type)} +
    {children}
    +
    + +
    +
    +
    + ); +}); diff --git a/src/pages/services/Delegates.jsx b/src/pages/services/Delegates.jsx index 1371751..c7a93f5 100644 --- a/src/pages/services/Delegates.jsx +++ b/src/pages/services/Delegates.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useMemo, useState } from 'react'; import Sidebar from '../../partials/Sidebar'; import Header from '../../partials/Header'; @@ -10,7 +10,7 @@ import TransactionPanel from '../../partials/finance/TransactionPanel'; import { Filters } from '../../components/Filters'; const filters = { - 'View All': '', + 'View All': 'all', Voted: 'Unvote', Pending: 'Pending', }; @@ -22,17 +22,24 @@ const Delegates = observer(() => { const [lockedFor, setLockedFor] = useState('Voiting'); - const lockedLabel = Object.values( - lockedFor === 'Voiting' ? store.processedVotes : store.accountLockedVotes + const delegates = useMemo(() => { + if (filters[currentFilter] === 'all') return store.delegates; + return store.delegates.filter((e) => e.status === filters[currentFilter]); + }, [store.delegates, currentFilter]); + + const lockedLabel = ( + lockedFor === 'Voiting' + ? Object.values(store.accountSentVotes) + : Object.values(store.accountLockedVotesCanReturn) + .flat() + .map((e) => e.amount) ) .reduce((sum, e) => sum + e, 0n) .toString(); - const [fetchOffset, setFetchOffset] = useState(0); - useEffect(() => { - store.fetchDelegates(fetchOffset); - }, [fetchOffset]); + store.fetchDelegates(0); + }, []); return (
    @@ -72,20 +79,21 @@ const Delegates = observer(() => { {/* Table */} setCurrentDelegate(delegate)} /> - {/* Pagination */} -
    - setFetchOffset((prev) => prev + 10)} - onPrevPage={() => setFetchOffset((prev) => prev - 10)} - /> -
    + {/*/!* Pagination *!/*/} + {/*
    */} + {/* setFetchOffset((prev) => prev + 10)}*/} + {/* onPrevPage={() => setFetchOffset((prev) => prev - 10)}*/} + {/* />*/} + {/*
    */} { if (store.canVPN) navigate('/services/vpn/servers'); }, [store.canVPN]); + if (store.loading && !store.canVPN) return null; + return (
    {/* Sidebar */} diff --git a/src/pages/services/VPNServers.jsx b/src/pages/services/VPNServers.jsx index 9236f67..ee6e200 100644 --- a/src/pages/services/VPNServers.jsx +++ b/src/pages/services/VPNServers.jsx @@ -95,7 +95,7 @@ PersistentKeepalive = 25