-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: remove deprecated network constants and implement new netwo…
…rk store
- Loading branch information
Showing
12 changed files
with
237 additions
and
104 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import { IoIosClose } from 'react-icons/io'; | ||
|
|
||
| type IntroProps = { | ||
| onClose: () => void; | ||
| }; | ||
|
|
||
| export const Intro = ({ onClose }: IntroProps) => { | ||
| return ( | ||
| <div className="p-6 bg-white text-center text-gray-800 bg-opacity-65 rounded-lg shadow-lg my-6 max-w-2xl mx-auto"> | ||
| <div className="flex justify-end hover:cursor-pointer "> | ||
| <IoIosClose onClick={onClose} size={25} /> | ||
| </div> | ||
| <p className="text-lg font-semibold font-Poppins"> | ||
| Syntra is a cutting-edge dApp powered by Massa's autonomous smart | ||
| contracts, designed to simplify token scheduling like never before. | ||
| </p> | ||
| <p className="text-lg mt-2"> | ||
| Whether you're tipping content creators or managing token vesting, | ||
| Syntra ensures seamless, automated transactions. | ||
| </p> | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,75 @@ | ||
| import { ConnectButton } from './ConnectWalletPopup'; | ||
| import LogoSyntra from '../assets/logo-syntra.svg'; | ||
| import { dappNetwork } from '@/const/network'; | ||
| import { useDappNetworkStore } from '@/store/network'; | ||
| import { Button } from '@massalabs/react-ui-kit'; | ||
| import { useState } from 'react'; | ||
| import { FiSettings } from 'react-icons/fi'; | ||
|
|
||
| export function NavBar() { | ||
| const { network } = useDappNetworkStore(); | ||
| const [showSettings, setShowSettings] = useState(false); | ||
|
|
||
| return ( | ||
| <nav className="flex justify-between items-center px-10 py-5 w-full"> | ||
| <div className="flex flex-col"> | ||
| <img src={LogoSyntra} alt="Syntra" className="w-40 h-14" /> | ||
| <p className="font-caveat text-white self-end -m-5 first-letter:uppercase"> | ||
| {dappNetwork} | ||
| <p className="font-caveat text-white self-end -m-5 flex items-center gap-1"> | ||
| {network === 'mainnet' ? 'Mainnet' : 'Buildnet'} | ||
| </p> | ||
| </div> | ||
| <ConnectButton /> | ||
| <div className="flex items-center relative gap-2"> | ||
| <SettingsButton onClick={() => setShowSettings((prev) => !prev)} /> | ||
| {showSettings && ( | ||
| <Settings onClose={() => setShowSettings(false)} /> | ||
| )} | ||
| <ConnectButton /> | ||
| </div> | ||
| </nav> | ||
| ); | ||
| } | ||
|
|
||
| type SettingsButtonProps = { | ||
| onClick: () => void; | ||
| }; | ||
|
|
||
| export function SettingsButton({ onClick }: SettingsButtonProps) { | ||
| return ( | ||
| <Button | ||
| className="px-2 py-3 hover:rotate-180 transition-transform ease-linear duration-300 bg-transparent" | ||
| onClick={onClick} | ||
| > | ||
| <FiSettings size={15} className="hover sm:text-primary" /> | ||
| </Button> | ||
| ); | ||
| } | ||
|
|
||
| type SettingsProps = { | ||
| onClose: () => void; | ||
| }; | ||
|
|
||
| function Settings({ onClose }: SettingsProps) { | ||
| const { switchNetwork, network } = useDappNetworkStore(); | ||
|
|
||
| const handleNetworkSwitch = () => { | ||
| switchNetwork(); | ||
| onClose(); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <div className="fixed inset-0 bg-black opacity-50 z-10" onClick={onClose}></div> | ||
| <div | ||
| className="absolute top-10 -left-52 bg-white rounded-xl | ||
| shadow-lg z-20 text-primary border border-slate-600 overflow-hidden" | ||
| > | ||
| <div className="p-3 flex justify-center bg-primary text-white cursor-default select-none">Settings</div> | ||
| <Button | ||
| onClick={handleNetworkSwitch} | ||
| className="p-5 rounded-none transition-colors duration-100 hover:bg-slate-100" | ||
| > | ||
| Switch Dapp to {network === 'mainnet' ? 'Buildnet' : 'Mainnet'} | ||
| </Button> | ||
| </div> | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,89 +1,129 @@ | ||
| import React, { useEffect, useState } from 'react'; | ||
| import React, { useEffect, useState, useMemo } from 'react'; | ||
| import { Schedule } from '../serializable/Schedule'; | ||
| import { useAccountStore } from '@massalabs/react-ui-kit'; | ||
| import useSchedule from '../hooks/useSchedule'; | ||
| import { useSchedulerStore } from '@/store/scheduler'; | ||
|
|
||
| interface ScheduleHistoryProps { | ||
| schedule: Schedule; | ||
| } | ||
|
|
||
| interface HistoryItem { | ||
| type HistoryItem = { | ||
| period?: bigint; | ||
| thread?: number; | ||
| index: number; | ||
| processed: boolean; | ||
| isReady: boolean; | ||
| } | ||
| }; | ||
|
|
||
| const ScheduleHistory: React.FC<ScheduleHistoryProps> = ({ schedule }) => { | ||
| const { connectedAccount } = useAccountStore(); | ||
| const { manualTrigger } = useSchedule(); | ||
| const [items, setItems] = useState<HistoryItem[]>(); | ||
| const { showUserPayments } = useSchedulerStore(); | ||
|
|
||
| const [items, setItems] = useState<HistoryItem[]>([]); | ||
|
|
||
| const startPeriod = useMemo(() => schedule.history[0]?.period, [schedule]); | ||
|
|
||
| useEffect(() => { | ||
| if (!connectedAccount) { | ||
| return; | ||
| } | ||
| const startPeriod = schedule.history[0].period; | ||
| if (!connectedAccount || !startPeriod) return; | ||
|
|
||
| connectedAccount.getNodeStatus().then((nodeInfos) => { | ||
| const fetchHistoryItems = async () => { | ||
| const nodeInfos = await connectedAccount.getNodeStatus(); | ||
| const currentPeriod = BigInt(nodeInfos.lastSlot.period); | ||
|
|
||
| let items: HistoryItem[] = []; | ||
| for ( | ||
| let taskIndex = 0; | ||
| taskIndex < Number(schedule.occurrences); | ||
| taskIndex++ | ||
| ) { | ||
| const task = schedule.history.find( | ||
| (h) => h.taskIndex === BigInt(taskIndex), | ||
| ); | ||
| const expectedPeriod = | ||
| startPeriod + | ||
| BigInt(taskIndex) * schedule.interval + | ||
| schedule.tolerance; | ||
| const isReady = !!currentPeriod && currentPeriod > expectedPeriod; | ||
|
|
||
| items[taskIndex] = { | ||
| period: task?.period, | ||
| thread: task?.thread, | ||
| index: taskIndex, | ||
| processed: !!task, | ||
| isReady, | ||
| }; | ||
| if (!isReady) { | ||
| break; | ||
| } | ||
| } | ||
| setItems(items); | ||
| }); | ||
| }, [connectedAccount, schedule]); | ||
| const newItems: HistoryItem[] = Array.from( | ||
| { length: Number(schedule.occurrences) }, | ||
| (_, taskIndex) => { | ||
| const task = schedule.history.find( | ||
| (h) => h.taskIndex === BigInt(taskIndex), | ||
| ); | ||
| const expectedPeriod = | ||
| startPeriod + | ||
| BigInt(taskIndex) * schedule.interval + | ||
| schedule.tolerance; | ||
| const isReady = !!currentPeriod && currentPeriod > expectedPeriod; | ||
|
|
||
| return { | ||
| period: task?.period, | ||
| thread: task?.thread, | ||
| index: taskIndex, | ||
| processed: !!task, | ||
| isReady, | ||
| }; | ||
| }, | ||
| ); | ||
|
|
||
| setItems(newItems); | ||
| }; | ||
|
|
||
| fetchHistoryItems(); | ||
| }, [connectedAccount, schedule, startPeriod]); | ||
|
|
||
| const filteredItems = useMemo( | ||
| () => items.filter((item) => item.processed || item.isReady), | ||
| [items], | ||
| ); | ||
|
|
||
| return ( | ||
| <div> | ||
| {items?.length && | ||
| items | ||
| .filter((item) => item.processed || item.isReady) | ||
| .sort((a, b) => a.index - b.index) | ||
| .map((item) => ( | ||
| <p key={item.index}> | ||
| {`${item.index + 1}: `} | ||
| {item.processed ? ( | ||
| <span title={`Thread: ${item.thread?.toString()}`}> | ||
| {`Period: ${item.period?.toString()}`} | ||
| </span> | ||
| ) : ( | ||
| <button | ||
| className="text-primary border-primary border-2 px-2 py-1 my-1 rounded-lg" | ||
| onClick={() => manualTrigger(schedule.spender, schedule.id)} | ||
| > | ||
| Process task | ||
| </button> | ||
| )} | ||
| </p> | ||
| ))} | ||
| <div className="flex flex-col gap-2"> | ||
| {filteredItems.map((item) => ( | ||
| <HistoryItemComponent | ||
| key={item.index} | ||
| item={item} | ||
| schedule={schedule} | ||
| showUserPayments={showUserPayments} | ||
| manualTrigger={manualTrigger} | ||
| /> | ||
| ))} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| interface HistoryItemComponentProps { | ||
| item: HistoryItem; | ||
| schedule: Schedule; | ||
| showUserPayments: boolean; | ||
| manualTrigger: (spender: string, id: bigint) => void; | ||
| } | ||
|
|
||
| const HistoryItemComponent: React.FC<HistoryItemComponentProps> = ({ | ||
| item, | ||
| schedule, | ||
| showUserPayments, | ||
| manualTrigger, | ||
| }) => { | ||
| if (item.processed) { | ||
| return ( | ||
| <p> | ||
| {`${item.index + 1}: `} | ||
| <span title={`Thread: ${item.thread?.toString()}`}> | ||
| {`Period: ${item.period?.toString()}`} | ||
| </span> | ||
| </p> | ||
| ); | ||
| } | ||
|
|
||
| if (showUserPayments) { | ||
| return ( | ||
| <p> | ||
| {`${item.index + 1}: `} | ||
| <button | ||
| className="text-primary border-primary border-2 px-2 py-1 my-1 rounded-lg" | ||
| onClick={() => manualTrigger(schedule.spender, schedule.id)} | ||
| > | ||
| Process task | ||
| </button> | ||
| </p> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <p> | ||
| {`${item.index + 1}: `} | ||
| <span title={`Thread: ${item.thread?.toString()}`}>Not processed</span> | ||
| </p> | ||
| ); | ||
| }; | ||
|
|
||
| export default ScheduleHistory; |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.