Fix ui issues and refactor

front/index.html

@@ -6,8 +6,16 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <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=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=Darker+Grotesque:wght@300..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap"
       rel="stylesheet"
     />
     <title>Massa Tips</title>

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();

front/src/components/AllowanceButton.tsx

@@ -0,0 +1,35 @@
+import useToken from '@/hooks/useToken';
+import { ScheduleInfo } from '@/store/scheduler';
+import { commonButton } from '@/styles/buttons';
+import { Button, formatAmount } from '@massalabs/react-ui-kit';
+
+export function AllowanceButton({
+  scheduleInfo,
+  disabled,
+}: {
+  scheduleInfo: ScheduleInfo;
+  disabled: boolean;
+}) {
+  const { increaseAllowance } = useToken();
+
+  if (disabled) {
+    return;
+  }
+
+  return (
+    <Button
+      variant="secondary"
+      onClick={() =>
+        increaseAllowance(scheduleInfo.amount * scheduleInfo.occurrences)
+      }
+      customClass={['border-primary text-primary ', ...commonButton].join(' ')}
+    >
+      {`Allow spending ${
+        formatAmount(
+          scheduleInfo.amount * scheduleInfo.occurrences,
+          scheduleInfo.asset.decimals,
+        ).preview
+      } ${scheduleInfo.asset.name}`}
+    </Button>
+  );
+}

front/src/components/ArrowButton.tsx

@@ -0,0 +1,12 @@
+export function ArrowButton({ onClick }: { onClick: () => void }) {
+  return (
+    <button
+      className="p-2 rounded-full bg-white hover:bg-gray-200 
+                 text-primary hover:ring-1 ring-primary transition-all 
+                 duration-100 ease-in-out active:translate-y-1"
+      onClick={onClick}
+    >
+      ↓
+    </button>
+  );
+}

front/src/components/CheckBox.tsx

@@ -12,20 +12,17 @@ const CheckBox: React.FC<CheckBoxProps> = ({
   isSelected,
 }: CheckBoxProps) => {
   return (
-    <div>
-      <legend className="sr-only">Checkboxes</legend>
-      <div className="space-y-2 ">
-        <label htmlFor="Option1" className="flex items-start gap-4">
-          <div className="flex items-center">
-            <input
-              checked={isSelected}
-              onChange={(val) => onChange(id, val.target.checked)}
-              type="checkbox"
-              className="cursor-pointer size-4 rounded border-gray-300 text-primary focus:ring-primary"
-            />
-          </div>
-        </label>
-      </div>
+    <div className="space-y-2">
+      <label htmlFor="Option1" className="flex items-start gap-4">
+        <div className="flex items-center">
+          <input
+            checked={isSelected}
+            onChange={(val) => onChange(id, val.target.checked)}
+            type="checkbox"
+            className="cursor-pointer size-4 rounded border-gray-300 text-primary focus:ring-primary"
+          />
+        </div>
+      </label>
     </div>
   );
 };

front/src/components/ConnectWalletPopup/ConnectButton.tsx

@@ -15,7 +15,7 @@ export function ConnectButton() {
       <Button
         disabled={isFetching}
         variant="secondary"
-        customClass="h-[54px] text-primary"
+        customClass="h-[54px] text-primary relative"
         onClick={() => setOpen(true)}
       >
         {truncateAddress(connectedAccount?.address)}
@@ -30,7 +30,7 @@ export function ConnectButton() {
         <Button
           variant="secondary"
           disabled={isFetching}
-          customClass="h-[54px] dark:text-gray"
+          customClass="h-[54px] dark:text-gray relative"
           onClick={() => setOpen(true)}
         >
           {Intl.t('connect-wallet.title')}
@@ -53,7 +53,7 @@ export function ConnectButton() {
 // TODO: To move in ui-kit
 function PingAnimation() {
   return (
-    <span className="absolute flex h-3 w-3 top-0 right-0 -mr-1 -mt-1">
+    <span className="absolute flex h-3 w-3 top-0 right-0 -mr-2 -mt-2">
       <span
         className="animate-ping absolute inline-flex h-full w-full
                     rounded-full bg-s-error opacity-75 "

front/src/components/CreateScheduleButton.tsx

@@ -0,0 +1,27 @@
+import useSchedule from '@/hooks/useSchedule';
+import { commonButton } from '@/styles/buttons';
+import { Button, toast } from '@massalabs/react-ui-kit';
+
+export function CreateScheduleButton({ disabled }: { disabled: boolean }) {
+  const { createSchedule } = useSchedule();
+
+  const handleCreateSchedule = async () => {
+    try {
+      createSchedule();
+    } catch (error) {
+      console.error(error);
+      toast.error('Failed to create schedule');
+    }
+  };
+
+  return (
+    <Button
+      customClass={`bg-primary text-white ${commonButton}`}
+      onClick={handleCreateSchedule}
+      disabled={disabled}
+      variant="secondary"
+    >
+      Create Schedule
+    </Button>
+  );
+}

front/src/components/ModeRadioButton.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { Tooltip } from '@massalabs/react-ui-kit';
+import { FiInfo } from 'react-icons/fi';
+
+interface ModeRadioButtonProps {
+  isVesting: boolean;
+  handleModeChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  mode: string;
+  modeDesc: string;
+  disabled?: boolean;
+}
+
+const ModeRadioButton: React.FC<ModeRadioButtonProps> = ({
+  isVesting,
+  handleModeChange,
+  mode,
+  modeDesc,
+  disabled,
+}) => {
+  return (
+    <label className="flex items-center gap-2">
+      <input
+        disabled={disabled}
+        type="radio"
+        value={mode}
+        className="w-4 h-4 text-primary bg-gray-100 border-gray-300 
+            focus:ring-primary dark:focus:ring-primary 
+            dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 
+            dark:border-gray-600 disabled:bg-gray-200 disabled:cursor-not-allowed disabled:opacity-50"
+        checked={isVesting}
+        onChange={handleModeChange}
+      />
+      <p className="text-sm text-gray-700">{mode}</p>
+      <Tooltip customClass="py-2" body={modeDesc}>
+        <FiInfo className="mr-1" size={12} />
+      </Tooltip>
+    </label>
+  );
+};
+
+export default ModeRadioButton;

front/src/components/NavBar.tsx

@@ -0,0 +1,18 @@
+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">
+      <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>
+  );
+}

front/src/components/NumericInput.tsx

@@ -9,11 +9,11 @@ type NumericInputProps = {
   onValueChange: (e: string) => void;
   asset?: Asset;
   error?: string;
+  disabled?: boolean;
 };
 
-// TODO: To add in ui-kit
 export function NumericInput(props: NumericInputProps) {
-  const { value, placeholder, asset, onValueChange, error } = props;
+  let { value, placeholder, asset, onValueChange, error, disabled } = props;
 
   const [amountError, setAmountError] = useState('');
 
@@ -31,7 +31,11 @@ export function NumericInput(props: NumericInputProps) {
   return (
     <div>
       <Money
-        customClass="border-none focus:ring-1 focus:ring-primary focus:outline-none h-14"
+        customClass={`border-slate-200 focus:ring-1 focus:ring-primary focus:outline-none h-14 ${
+          disabled
+            ? 'cursor-not-allowed opacity-50 focus:ring-0 pointer-events-none'
+            : ''
+        }`}
         value={value}
         onValueChange={(o) => onValueChange(o.value)}
         placeholder={placeholder}

front/src/components/RecipientAddressInput.tsx

@@ -1,18 +1,21 @@
-import { Input } from '@massalabs/react-ui-kit';
+import { Input, useAccountStore } from '@massalabs/react-ui-kit';
 import { useState } from 'react';
 import { isValidAddress } from '../utils/address';
+import { InputLabel } from './InputLabel';
 
 interface RecipientAddressInputProps {
   value: string;
   onAddressChange: (address: string) => void;
-  error?: string;
+  disabled?: boolean;
 }
 
 export function RecipientAddressInput({
   value,
   onAddressChange,
+  disabled,
 }: RecipientAddressInputProps) {
   const [error, setError] = useState<string>('');
+  const { connectedAccount } = useAccountStore();
   function onChange(e: React.ChangeEvent<HTMLInputElement>) {
     onAddressChange(e.target.value);
     setError('');
@@ -27,15 +30,26 @@ export function RecipientAddressInput({
     if (!isValidAddress(value)) {
       setError('Invalid address');
     }
+
+    if (value === connectedAccount?.address) {
+      setError('Spender can not be the same as recipient');
+    }
   }
 
   return (
-    <Input
-      error={error}
-      value={value}
-      onChange={onChange}
-      onBlur={onBlur}
-      customClass="border-none p-5 mb-0 h-14 focus:ring-1 focus:ring-primary focus:outline-none"
-    />
+    <>
+      <InputLabel label="Recipient Address" />
+      <Input
+        error={error}
+        value={value}
+        onChange={onChange}
+        onBlur={onBlur}
+        disabled={disabled}
+        customClass="
+          border-slate-200 h-14 focus:ring-1 
+          focus:ring-primary focus:outline-none 
+          disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none"
+      />
+    </>
   );
 }