Solved lint warning

.env.example

@@ -1,2 +1,5 @@
 VITE_APP_BASE_URL=/
-VITE_LOCAL_IPFS_URL=http://localhost:5001
+VITE_LOCAL_IPFS_API_URL=http://localhost:5001
+VITE_LOCAL_IPFS_GATEWAY_URL=http://localhost:8080
+VITE_DEDICATED_IPFS_URL= 
+VITE_PINATA_JWT=

.github/workflows/deploy.yml

@@ -24,6 +24,9 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
+      - name: Run lint
+        run: npm run lint
+
       - name: Build project
         run: npm run build
 

src/components/Banner/Banner.tsx

@@ -1,5 +1,5 @@
 import './Banner.css'
-import { useState, useEffect } from "react";
+import { useState, useEffect, useCallback, useMemo } from "react";
 import { Container, Row, Col } from "react-bootstrap";
 import headerImg from "../../assets/img/zama_banner.png";
 import { ArrowRightCircle } from 'react-bootstrap-icons';
@@ -13,22 +13,17 @@ export const Banner = () => {
   const [text, setText] = useState('');
   const [delta, setDelta] = useState(300 - Math.random() * 100);
   const [, setIndex] = useState(1);
-  const toRotate = ["Zama"];
   const period = 2000;
 
 
-  useEffect(() => {
-    const ticker = setInterval(() => {
-      tick();
-    }, delta);
-    return () => { clearInterval(ticker) };
-  }, [text])
-
+  const toRotate = useMemo(() => ["Zama"], []);
 
-  const tick = () => {
+  const tick = useCallback(() => {
     const i = loopNum % toRotate.length;
     const fullText = toRotate[i];
-    const updatedText = isDeleting ? fullText.substring(0, text.length - 1) : fullText.substring(0, text.length + 1);
+    const updatedText = isDeleting
+      ? fullText.substring(0, text.length - 1)
+      : fullText.substring(0, text.length + 1);
 
     setText(updatedText);
 
@@ -48,7 +43,16 @@ export const Banner = () => {
     } else {
       setIndex(prevIndex => prevIndex + 1);
     }
-  }
+  }, [isDeleting, loopNum, period, text.length, toRotate]);
+
+  useEffect(() => {
+    const ticker = setInterval(() => {
+      tick();
+    }, delta);
+
+    return () => clearInterval(ticker);
+  }, [delta, tick]);
+
 
   const handleNavigation = () => {
     const anchor = document.querySelector('#mint');

src/components/Blockchain/contract.ts

@@ -32,7 +32,7 @@ async function initializeProviderAndSigner() {
 }
 
 // Call the function to initialize provider and signer
-initializeProviderAndSigner();
+void initializeProviderAndSigner();
 
 // Create a contract instance with a signer, which enables sending transactions
 // const contract = new ethers.Contract(contractAddress, contractABI, signer);
@@ -69,6 +69,7 @@ async function getEvent(
 	const receipt = await tx.wait();
 	if (receipt?.logs) {
 		for (const log of receipt.logs) {
+			// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
 			const event = contract?.interface.parseLog(log);
 			if (event?.name === eventName) {
 				return event;
@@ -246,13 +247,13 @@ export async function getSharedWithSupply(): Promise<number> {
 
 
 export async function reencrypt(tokenId: number,
-	publicKey: Uint8Array | undefined,
-	signature: string | undefined,
+	publicKey: Uint8Array,
+	signature: string,
 
 ): Promise<string[]> {
 
 	try {
-		const data = await contract?.reencrypt(tokenId, publicKey, signature);
+		const data: string[] = await contract?.reencrypt(tokenId, publicKey, signature);
 
 		if (!data) {
 			console.error('No return for contract.reencrypt');

src/components/Connect/Connect.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { BrowserProvider, Eip1193Provider } from 'ethers';
-import { useFhevm } from '../Contexts/FhevmContext';
+import { useFhevm } from '../Contexts/useFhevm';
 
 import './Connect.css';
 import { Copy } from 'react-bootstrap-icons';
@@ -15,11 +15,13 @@ export const Connect: React.FC<{
   const [account, setAccount] = useState<string>('');
   const [error, setError] = useState<string | null>(null);
   const [provider, setProvider] = useState<BrowserProvider | null>(null);
-
-
+  //Display a modal
+  const [, setShowMetaMaskModal] = useState<boolean>(false);
+  const [copySuccess, setCopySuccess] = useState<string>('Click to Copy');
   // Use the context to access the FHEVM instance
   const { instance, createInstance } = useFhevm();
 
+
   const refreshAccounts = (accounts: string[]) => {
     setAccount(accounts[0] || '');
     setConnected(accounts.length > 0);
@@ -51,15 +53,7 @@ export const Connect: React.FC<{
     const eth = window.ethereum;
     if (!eth) {
       setError('No wallet has been found');
-      //Display a modal
-      const [, setShowMetaMaskModal] = useState<boolean>(false);
-
-      useEffect(() => {
-        // Check for MetaMask or any Web3 provider
-        if (typeof window.ethereum === 'undefined') {
-          setShowMetaMaskModal(true);
-        }
-      }, []);
+      setShowMetaMaskModal(true);
       return;
     }
 
@@ -78,6 +72,7 @@ export const Connect: React.FC<{
 
   }, [refreshNetwork]);
 
+
   const connect = async () => {
     if (!provider) {
       return;
@@ -143,9 +138,6 @@ export const Connect: React.FC<{
     return <p className="Connect__error">No wallet has been found.</p>;
   }
 
-
-  const [copySuccess, setCopySuccess] = useState<string>('Click to Copy');
-
   // Function to copy the address to the clipboard
   const copyAddressToClipboard = (account: string) => {
     navigator.clipboard.writeText(account)

src/components/Contexts/FhevmContext.tsx

@@ -1,28 +1,26 @@
 // FhevmContext.tsx
-import React, { createContext, useContext, useState, useEffect, useCallback } from 'react';
+import React, { createContext, useState, useEffect, useCallback } from 'react';
 import { createFhevmInstance, getInstance  } from '../../fhevmjs';  // Ensure path correctness
 
 import {  FhevmInstance } from 'fhevmjs';
 
-interface IFhevmContext {
+export interface IFhevmContext {
   instance: FhevmInstance | null;
   createInstance: () => Promise<void>;
 }
 
-const FhevmContext = createContext<IFhevmContext | undefined>(undefined);
+export const FhevmContext = createContext<IFhevmContext | undefined>(undefined);
 
 export const FhevmProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [instance, setInstance] = useState<FhevmInstance | null>(null);
 
-  const initInstance = useCallback(async () => {
-    await createFhevmInstance();  // This sets the global instance
-    setInstance(getInstance());   // Now fetch it with getInstance
-
+   const initInstance = useCallback(async () => {
+    await createFhevmInstance(); // This sets the global instance
+    setInstance(getInstance());  // Now fetch it with getInstance
   }, []);
 
-
   useEffect(() => {
-
+    void initInstance(); // Call the initInstance function
   }, [initInstance]);
 
   return (
@@ -32,11 +30,4 @@ export const FhevmProvider: React.FC<{ children: React.ReactNode }> = ({ childre
   );
 };
 
-export const useFhevm = (): IFhevmContext => {
-  const context = useContext(FhevmContext);
-  if (!context) {
-    throw new Error('useFhevm must be used within an FhevmProvider');
-  }
-  return context;
-};
 

src/components/Contexts/NFTContext.tsx

@@ -1,19 +1,20 @@
-import React, { createContext, useContext, useState, ReactNode } from 'react';
+// src/components/Contexts/NFTContext.tsx
+import React, { createContext, useState, ReactNode } from 'react';
 
 export interface NFTContent {
     id: number;
     file: File;
 }
 
-interface NFTContextType {
+export interface NFTContextType {
     nfts: NFTContent[];
     addNFT: (nft: NFTContent) => void;
     updateNFTs: (nfts: NFTContent[]) => void;
     removeNFT: (id: number) => void;
     removeAllNFTs: () => void; 
 }
 
-const NFTContext = createContext<NFTContextType | undefined>(undefined);
+export const NFTContext = createContext<NFTContextType | undefined>(undefined);
 
 interface ProviderProps {
     children: ReactNode;
@@ -48,12 +49,3 @@ export const NFTProvider: React.FC<ProviderProps> = ({ children }) => {
         </NFTContext.Provider>
     );
 };
-
-// Custom hook to use the NFT context
-export const useNFTs = (): NFTContextType => {
-    const context = useContext(NFTContext);
-    if (context === undefined) {
-        throw new Error('useNFTs must be used within a NFTProvider');
-    }
-    return context;
-};

src/components/Contexts/useFhevm.ts

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import { IFhevmContext, FhevmContext } from './FhevmContext';
+
+export const useFhevm = (): IFhevmContext => {
+    const context = useContext(FhevmContext);
+    if (!context) {
+      throw new Error('useFhevm must be used within an FhevmProvider');
+    }
+    return context;
+  };
+

src/components/Contexts/useNFTs.ts

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { NFTContext, NFTContextType } from './NFTContext';
+
+export const useNFTs = (): NFTContextType => {
+    const context = useContext(NFTContext);
+    if (context === undefined) {
+        throw new Error('useNFTs must be used within a NFTProvider');
+    }
+    return context;
+};

src/components/Gallery/Helpers.tsx → src/components/Gallery/ActionButtonHelper.tsx

@@ -1,67 +1,7 @@
-import { FileEarmarkPdf, FileEarmarkImage, FileEarmarkPlay, FileEarmarkWord, FileEarmark, ThreeDotsVertical, } from 'react-bootstrap-icons';
 import React, { useState } from 'react';
 import { Dropdown, OverlayTrigger, Tooltip, Modal, Button, Form } from 'react-bootstrap';
 import { SharedWith } from './SharedWith';
-
-
-
-export function getFileIcon(mimeType: string) {
-    switch (mimeType) {
-        case 'application/pdf':
-            return <FileEarmarkPdf />;
-        case 'image/png':
-        case 'image/jpeg':
-        case 'image/gif':
-            return <FileEarmarkImage />;
-        case 'video/mp4':
-            return <FileEarmarkPlay />;
-        case 'application/msword':
-        case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
-            return <FileEarmarkWord />;
-        default:
-            return <FileEarmark />;
-    }
-}
-
-
-export function formatAddress(address: string, charsToShow = 6): string {
-    if (address.length < 2 * charsToShow + 2) {
-        return address;
-    }
-
-    const start = address.substring(0, charsToShow);
-    const end = address.substring(address.length - charsToShow);
-
-    return `${start}...${end}`;
-}
-
-
-export function downloadFile(file: File): void {
-    const link = document.createElement('a');
-    link.href = window.URL.createObjectURL(file);
-    link.download = file.name;
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    window.URL.revokeObjectURL(link.href);
-}
-
-
-export function formatFileSize(bytes: number, decimals = 2): string {
-    if (bytes < 0) return 'Invalid size';  // Handle negative bytes
-    if (bytes === 0) return '0 Bytes';
-
-    const k = 1024;
-    const dm = decimals < 0 ? 0 : decimals;
-    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    const size = (bytes / Math.pow(k, i)).toFixed(dm);
-
-    return `${size} ${sizes[i]}`;
-}
-
-
+import { ThreeDotsVertical} from 'react-bootstrap-icons';
 
 
 interface ActionButtonProps {