feat: refactor imports to use hooks directory and enhance network man…

…agement
massalabs · Oct 13, 2024 · 056a0f7 · 056a0f7
1 parent 943fdbf
commit 056a0f7
Show file tree

Hide file tree

Showing 17 changed files with 141 additions and 64 deletions.
diff --git a/front/index.html b/front/index.html
@@ -12,6 +12,12 @@
       href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
       rel="stylesheet"
     />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Caveat:[email protected]&display=swap"
+      rel="stylesheet"
+    />
     <title>Massa Tips</title>
   </head>
   <body>

diff --git a/front/src/App.tsx b/front/src/App.tsx
@@ -9,7 +9,7 @@ import { Toast } from '@massalabs/react-ui-kit';
 
 import HomePage from './pages/HomePage';
 import useAccountSync from './hooks/useAccountAsync';
-import { useInit } from './services/useInit';
+import { useInit } from './hooks/useInit';
 
 function App() {
   useAccountSync();

diff --git a/front/src/components/AllowanceButton.tsx b/front/src/components/AllowanceButton.tsx
@@ -1,4 +1,4 @@
-import useToken from '@/services/useToken';
+import useToken from '@/hooks/useToken';
 import { ScheduleInfo } from '@/store/scheduler';
 import { commonButton } from '@/styles/buttons';
 import { Button, formatAmount } from '@massalabs/react-ui-kit';

diff --git a/front/src/components/CreateScheduleButton.tsx b/front/src/components/CreateScheduleButton.tsx
@@ -1,4 +1,4 @@
-import useSchedule from '@/services/useSchedule';
+import useSchedule from '@/hooks/useSchedule';
 import { commonButton } from '@/styles/buttons';
 import { Button, toast } from '@massalabs/react-ui-kit';
 

diff --git a/front/src/components/NavBar.tsx b/front/src/components/NavBar.tsx
@@ -1,10 +1,17 @@
 import { ConnectButton } from './ConnectWalletPopup';
 import LogoSyntra from '../assets/logo-syntra.svg';
+import { useNetworkStore } from '@/store/network';
 
 export function NavBar() {
+  const { network } = useNetworkStore();
   return (
     <nav className="flex justify-between items-center px-10 py-5 w-full">
-      <img src={LogoSyntra} alt="Syntra" className="w-40 h-20" />
+      <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">
+          {network}
+        </p>
+      </div>
       <ConnectButton />
     </nav>
   );

diff --git a/front/src/components/Recurrence.tsx b/front/src/components/Recurrence.tsx
@@ -7,14 +7,56 @@ import { NumericInput } from './NumericInput';
 const periodInMilliseconds = 16 * 1000; // 16 seconds
 
 const recurrenceUnits = [
-  { name: Intl.t('recurrence.minute'), milliseconds: 60 * 1000 },
-  { name: Intl.t('recurrence.hour'), milliseconds: 60 * 60 * 1000 },
-  { name: Intl.t('recurrence.day'), milliseconds: 24 * 60 * 60 * 1000 },
-  { name: Intl.t('recurrence.week'), milliseconds: 7 * 24 * 60 * 60 * 1000 },
-  { name: Intl.t('recurrence.month'), milliseconds: 30 * 24 * 60 * 60 * 1000 },
-  { name: Intl.t('recurrence.year'), milliseconds: 365 * 24 * 60 * 60 * 1000 },
+  { name: Intl.t('recurrence.minute'), milliseconds: 60 * 1000, periods: 225 },
+  {
+    name: Intl.t('recurrence.hour'),
+    milliseconds: 60 * 60 * 1000,
+    periods: 225,
+  },
+  {
+    name: Intl.t('recurrence.day'),
+    milliseconds: 24 * 60 * 60 * 1000,
+    periods: 5400,
+  },
+  {
+    name: Intl.t('recurrence.week'),
+    milliseconds: 7 * 24 * 60 * 60 * 1000,
+    periods: 37800,
+  },
+  {
+    name: Intl.t('recurrence.month'),
+    milliseconds: 30 * 24 * 60 * 60 * 1000,
+    periods: 162000,
+  },
+  {
+    name: Intl.t('recurrence.year'),
+    milliseconds: 365 * 24 * 60 * 60 * 1000,
+    periods: 1971000,
+  },
 ];
 
+export function getRecurrenceFromPeriods(periods: bigint) {
+  const totalMilliseconds = BigInt(periods) * BigInt(periodInMilliseconds);
+
+  // Iterate from largest to smallest unit
+  for (let i = recurrenceUnits.length - 1; i >= 0; i--) {
+    const unit = recurrenceUnits[i];
+    const unitMilliseconds = BigInt(unit.milliseconds);
+
+    if (totalMilliseconds >= unitMilliseconds) {
+      const numUnits = Number(totalMilliseconds / unitMilliseconds);
+      return { unit: unit.name, value: numUnits };
+    }
+  }
+
+  // Fallback to the smallest unit (should rarely happen with given units)
+  const smallestUnit = recurrenceUnits[0];
+  return {
+    unit: smallestUnit.name,
+    value: Number(totalMilliseconds / BigInt(smallestUnit.milliseconds)),
+  };
+}
+
 export function Recurrence({
   onRecurrenceChange,
   disabled,

diff --git a/front/src/components/ScheduleForm.tsx b/front/src/components/ScheduleForm.tsx
@@ -6,7 +6,7 @@ import { Recurrence } from './Recurrence';
 import { SelectAmount } from './SelectAmount';
 import SelectAsset from './SelectAsset';
 import { SelectMode } from './SelectMode';
-import useSchedule from '@/services/useSchedule';
+import useSchedule from '@/hooks/useSchedule';
 import { useTokenStore } from '@/store/token';
 import { isValidAddress } from '@/utils/address';
 import { useState } from 'react';

diff --git a/front/src/components/ScheduleHistory.tsx b/front/src/components/ScheduleHistory.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Schedule } from '../serializable/Schedule';
 import { useAccountStore } from '@massalabs/react-ui-kit';
-import useSchedule from '../services/useSchedule';
+import useSchedule from '../hooks/useSchedule';
 
 interface ScheduleHistoryProps {
   schedule: Schedule;

diff --git a/front/src/components/ScheduleTable.tsx b/front/src/components/ScheduleTable.tsx
@@ -3,10 +3,11 @@ import { Schedule } from '@/serializable/Schedule';
 import { truncateAddress } from '@/utils/address';
 import { formatAmount, toast } from '@massalabs/react-ui-kit';
 import CheckBox from './CheckBox';
-import useSchedule from '@/services/useSchedule';
+import useSchedule from '@/hooks/useSchedule';
 import { MasToken, supportedTokens } from '../const/assets';
 import ScheduleHistory from '@/components/ScheduleHistory';
 import { getTokenInfo } from '@/utils/assets';
+import { getRecurrenceFromPeriods } from './Recurrence';
 
 interface ScheduleTableProps {
   schedules: Schedule[];
@@ -31,29 +32,23 @@ const CopyableAddress: React.FC<{
 
 const TableHeader: React.FC = () => (
   <thead>
-    <tr className="bg-primary text-white">
-      {[
-        '',
-        'ID',
-        'OperationId',
-        'Mode',
-        'Token',
-        'Spender',
-        'Recipient',
-        'Amount',
-        'Interval',
-        'Occurrences',
-        'Remaining',
-        'Tolerance',
-        'Execution history',
-      ].map((header, index) => (
-        <th
-          key={index}
-          className="px-4 py-6 text-left text-xs font-medium uppercase"
-        >
-          {header}
-        </th>
-      ))}
+    <tr className="bg-primary text-white text-sm py-5">
+      <th className="font-normal px-4 py-5"></th>
+      <th className="font-normal hidden xl:table-cell px-4 py-5">
+        OperationId
+      </th>
+      <th className="font-normal hidden lg:table-cell px-4 py-5">Mode</th>
+      <th className="font-normal px-4 py-5">Token</th>
+      <th className="font-normal px-4 py-5">Recipient</th>
+      <th className="font-normal px-4 py-5">Amount</th>
+      <th className="font-normal hidden md:table-cell px-4 py-5">Interval</th>
+      <th className="font-normal hidden md:table-cell px-4 py-5">
+        Occurrences
+      </th>
+      <th className="font-normal px-4 py-5">Remaining</th>
+      <th className="font-normal hidden px-4 py-5 lg:table-cell">
+        Execution history
+      </th>
     </tr>
   </thead>
 );
@@ -74,28 +69,26 @@ const TableRow: React.FC<TableRowProps> = ({
     MasToken;
   const formattedAmount = formatAmount(schedule.amount, asset.decimals);
   const isMas = schedule.tokenAddress === '';
-
   return (
     <tr>
-      <td className="text-center px-2 py-4">
+      <td className=" text-center px-6 py-6">
         <CheckBox
           isSelected={isSelected}
           onChange={onCheckboxChange}
           id={schedule.id}
         />
       </td>
-      <td className="text-center px-2 py-4">{schedule.id.toString()}</td>
-      <td className="text-center px-2 py-4">
+      <td className="text-center hidden xl:table-cell">
         <CopyableAddress
           address={schedule.operationId}
           label="Operation ID"
           value={truncateAddress(schedule.operationId)}
         />
       </td>
-      <td className="text-center px-2 py-4">
+      <td className="text-center px-6 py-6 hidden lg:table-cell">
         {schedule.isVesting ? 'Vesting' : 'Tips'}
       </td>
-      <td className="text-center px-2 py-4">
+      <td className="text-center ">
         {isMas ? (
           'MAS'
         ) : (
@@ -106,30 +99,24 @@ const TableRow: React.FC<TableRowProps> = ({
           />
         )}
       </td>
-      <td className="text-center px-2 py-4">
-        <CopyableAddress
-          address={schedule.spender}
-          label="Spender address"
-          value={truncateAddress(schedule.spender)}
-        />
-      </td>
-      <td className="text-center px-2 py-4">
+      <td className="text-center px-6 py-6">
         <CopyableAddress
           address={schedule.recipient}
           label="Recipient address"
           value={truncateAddress(schedule.recipient)}
         />
       </td>
-      <td className="text-center px-2 py-4">
+      <td className="text-center ">
         <span title={formattedAmount.full}>{formattedAmount.preview}</span>
       </td>
-      <td className="text-center px-2 py-4">{schedule.interval.toString()}</td>
-      <td className="text-center px-2 py-4">
+      <td className="text-center px-6 py-6 hidden md:table-cell">
+        {getRecurrenceFromPeriods(schedule.interval).unit}
+      </td>
+      <td className="text-center px-6 py-6 hidden md:table-cell">
         {schedule.occurrences.toString()}
       </td>
-      <td className="text-center px-2 py-4">{schedule.remaining.toString()}</td>
-      <td className="text-center px-2 py-4">{schedule.tolerance.toString()}</td>
-      <td className="text-center px-2 py-4">
+      <td className="text-center px-6 py-6">{schedule.remaining.toString()}</td>
+      <td className="text-center hidden lg:table-cell">
         <ScheduleHistory schedule={schedule} />
       </td>
     </tr>

diff --git a/front/src/components/SelectAsset.tsx b/front/src/components/SelectAsset.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { supportedTokens, MasToken } from '../const/assets';
 import { Asset } from '@massalabs/react-ui-kit/src/lib/token/models/AssetModel';
 import { AssetSelector } from '@massalabs/react-ui-kit/src/lib/token/AssetSelector';
-import useSchedule from '../services/useSchedule';
+import useSchedule from '../hooks/useSchedule';
 import { InputLabel } from './InputLabel';
 
 export default function SelectAsset({

diff --git a/front/src/const/contracts.ts b/front/src/const/contracts.ts
@@ -1,5 +1,4 @@
-export const schedulerAddress =
-  // buildnet
-  'AS1FmYN5nqeUzNycSZFBYdcno4tFCgNfPfMwhPCxCZLgFJy4YMUp';
-//mainnet
-//'AS1WHog6myEJg1qydeopye6VSaC4yKKhZEjPhEGAgWYMPNLsKfLf';
+export const schedulerAddress = {
+  buildnet: 'AS1FmYN5nqeUzNycSZFBYdcno4tFCgNfPfMwhPCxCZLgFJy4YMUp',
+  mainnet: 'AS1WHog6myEJg1qydeopye6VSaC4yKKhZEjPhEGAgWYMPNLsKfLf',
+};
diff --git a/front/src/services/useInit.ts → front/src/hooks/useInit.ts b/front/src/services/useInit.ts → front/src/hooks/useInit.ts
diff --git a/front/src/services/useSchedule.ts → front/src/hooks/useSchedule.ts b/front/src/services/useSchedule.ts → front/src/hooks/useSchedule.ts
diff --git a/front/src/services/useToken.ts → front/src/hooks/useToken.ts b/front/src/services/useToken.ts → front/src/hooks/useToken.ts
diff --git a/front/src/pages/HomePage.tsx b/front/src/pages/HomePage.tsx
@@ -1,11 +1,12 @@
 import { useRef } from 'react';
-import useSchedule from '@/services/useSchedule';
+import useSchedule from '@/hooks/useSchedule';
 import ScheduleTable from '@/components/ScheduleTable';
 import { useSearchParams } from 'react-router-dom';
 import { ArrowButton } from '@/components/ArrowButton';
 import { ScheduleForm } from '@/components/ScheduleForm';
 import { NavBar } from '@/components/NavBar';
-
+// TODO: Add network and check if the user is connected to the right network
+// TODO: Remove or fix event
 export default function HomePage() {
   const { scheduleInfo, setScheduleInfo, spenderSchedules } = useSchedule();
   const scheduleTableRef = useRef<HTMLDivElement>(null);

diff --git a/front/src/store/network.ts b/front/src/store/network.ts
@@ -0,0 +1,28 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { create } from 'zustand';
+
+type AvailableNetwork = 'mainnet' | 'buildnet';
+
+export interface NetworkStoreState {
+  network: AvailableNetwork;
+  isMainnet: boolean;
+  setNetwork: (network: AvailableNetwork) => void;
+  toggleNetwork: () => void;
+}
+
+export const useNetworkStore = create<NetworkStoreState>((set) => ({
+  network: 'buildnet',
+  isMainnet: false,
+
+  setNetwork: (network: AvailableNetwork) => {
+    set({ network, isMainnet: network === 'mainnet' });
+  },
+
+  toggleNetwork: () => {
+    set((state) => ({
+      network: state.network === 'mainnet' ? 'buildnet' : 'mainnet',
+      isMainnet: !state.isMainnet,
+    }));
+  },
+}));
diff --git a/front/tailwind.config.js b/front/tailwind.config.js
@@ -5,6 +5,13 @@ export default {
     './src/**/*.{js,ts,jsx,tsx}',
     './node_modules/@massalabs/react-ui-kit/src/**/*.{js,ts,jsx,tsx}',
   ],
+  theme: {
+    extend: {
+      fontFamily: {
+        caveat: ['Caveat', 'cursive'],
+      },
+    },
+  },
   presets: [require('./src/themes/default.js')],
   plugins: [require('@tailwindcss/forms')],
 };