Merge pull request #18 from Agent-BossFighters/migration_testnet_mainnet

Check network and minor improvement

Author: AlexandreTedesco

dist/index.es.js

@@ -1,6 +1,6 @@
 {
   "name": "player-map",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

dist/index.umd.js

@@ -8,8 +8,18 @@ interface PlayerMapGraphProps {
   walletAddress?: string;
 }
 
+// Définir les types pour les props des composants
+interface GraphVisualizationProps {
+  endpoint: string;
+  onNodeSelect: (node: any) => void;
+  onLoadingChange: (isLoading: boolean) => void;
+  walletAddress?: string;
+}
+
+interface LoadingAnimationProps {}
+
 const PlayerMapGraph: React.FC<PlayerMapGraphProps> = ({ walletAddress }) => {
-  const [selectedNode, setSelectedNode] = useState(null);
+  const [selectedNode, setSelectedNode] = useState<any>(null);
   const [selectedEndpoint, setSelectedEndpoint] = useState("base"); // TODO: change to mainnet
   const [isLoading, setIsLoading] = useState(false);
 

package-lock.json

@@ -9,6 +9,8 @@ import {
 import { ipfsToHttpUrl, isIpfsUrl, uploadToPinata } from "./utils/pinata";
 import PlayerCreationProgress from "./PlayerCreationProgress";
 import { usePlayerCreationService } from "./services/playerCreationService";
+import { useNetworkCheck } from "./shared/hooks/useNetworkCheck";
+import { NetworkSwitchMessage } from "./shared/components/NetworkSwitchMessage";
 
 interface RegistrationFormProps {
   isOpen: boolean;
@@ -70,6 +72,11 @@ const RegistrationForm: React.FC<RegistrationFormProps> = ({
     publicClient
   );
 
+  const { isCorrectNetwork, currentChainId, targetChainId } = useNetworkCheck({
+    walletConnected,
+    publicClient: wagmiConfig?.publicClient
+  });
+
   useEffect(() => {
     const checkExistingAtom = async () => {
       if (!walletAddress || !walletConnected) return;
@@ -178,6 +185,7 @@ const RegistrationForm: React.FC<RegistrationFormProps> = ({
       // Close the form after 3 seconds
       setTimeout(() => {
         onClose();
+        window.location.reload();
       }, 3000);
     } catch (error) {
       console.error("Error creating player:", error);
@@ -271,24 +279,31 @@ const RegistrationForm: React.FC<RegistrationFormProps> = ({
           Create Your Player
         </h2>
 
-        <PlayerCreationProgress
-          step={step}
-          isCreatingAtom={isCreatingAtom}
-          isCreatingTriples={isCreatingTriples}
-          creationSuccess={creationSuccess}
-          atomId={atomId}
-          tripleCreated={tripleCreated}
-          walletAddress={walletAddress}
-          hasExistingAtom={hasExistingAtom}
-          formData={formData}
-          handleInputChange={handleInputChange}
-          handleSelectChange={handleSelectChange}
-          handleFileUpload={handleFileUpload}
-          handleSubmit={handleSubmit}
-          isLoading={isLoading}
-          isUploading={isUploading}
-          fileInputRef={fileInputRef}
-        />
+        {!isCorrectNetwork ? (
+          <NetworkSwitchMessage
+            currentChainId={currentChainId}
+            targetChainId={targetChainId}
+          />
+        ) : (
+          <PlayerCreationProgress
+            step={step}
+            isCreatingAtom={isCreatingAtom}
+            isCreatingTriples={isCreatingTriples}
+            creationSuccess={creationSuccess}
+            atomId={atomId}
+            tripleCreated={tripleCreated}
+            walletAddress={walletAddress}
+            hasExistingAtom={hasExistingAtom}
+            formData={formData}
+            handleInputChange={handleInputChange}
+            handleSelectChange={handleSelectChange}
+            handleFileUpload={handleFileUpload}
+            handleSubmit={handleSubmit}
+            isLoading={isLoading}
+            isUploading={isUploading}
+            fileInputRef={fileInputRef}
+          />
+        )}
       </div>
     </div>
   );

package.json

@@ -11,6 +11,8 @@ import { ConnectWalletModal, CreatePlayerModal } from "../modals";
 import { useTripleByCreator } from "../../hooks/useTripleByCreator";
 import { PLAYER_TRIPLE_TYPES } from "../../utils/constants";
 import RegistrationForm from "../../RegistrationForm";
+import { useNetworkCheck } from '../../shared/hooks/useNetworkCheck';
+import { NetworkSwitchMessage } from '../../shared/components/NetworkSwitchMessage';
 
 interface ClaimVotingProps {
   walletConnected?: any;
@@ -139,6 +141,11 @@ export const ClaimVoting: React.FC<ClaimVotingProps> = ({
     }
   };
 
+  const { isCorrectNetwork, currentChainId, targetChainId } = useNetworkCheck({
+    walletConnected,
+    publicClient
+  });
+
   // Si l'utilisateur n'a pas connecté son wallet, afficher juste la modale de connexion
   if (!isWalletReady) {
     return (
@@ -240,6 +247,13 @@ export const ClaimVoting: React.FC<ClaimVotingProps> = ({
         numberOfTransactions={numberOfTransactions}
       />
       <TransactionStatusDisplay transactionStatus={transactionStatus} />
+      
+      {!isCorrectNetwork && (
+        <NetworkSwitchMessage
+          currentChainId={currentChainId}
+          targetChainId={targetChainId}
+        />
+      )}
     </div>
   );
 }; 

src/PlayerMapGraph.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+interface NetworkSwitchMessageProps {
+  currentChainId: number | null;
+  targetChainId: number;
+}
+
+export const NetworkSwitchMessage: React.FC<NetworkSwitchMessageProps> = ({
+  currentChainId,
+  targetChainId
+}) => {
+  return (
+    <div style={{
+      padding: '15px',
+      backgroundColor: '#2e2e40',
+      borderRadius: '8px',
+      margin: '10px 0',
+      textAlign: 'center'
+    }}>
+      <p style={{ color: '#ff4444', marginBottom: '10px' }}>
+        You are not on the correct network
+      </p>
+      <p style={{ color: '#aaa', fontSize: '0.9em', marginBottom: '10px' }}>
+        Current network: {currentChainId || 'Not connected'}<br />
+        Required network: Base (Chain ID: {targetChainId})
+      </p>
+      <p style={{ color: '#fff', fontSize: '0.9em' }}>
+        Please switch to Base network in your wallet to continue
+      </p>
+    </div>
+  );
+}; 

src/RegistrationForm.tsx

@@ -0,0 +1,85 @@
+import { useEffect, useState } from 'react';
+import { ATOM_CONTRACT_CHAIN_ID } from '../../abi';
+
+interface UseNetworkCheckProps {
+  walletConnected?: any;
+  publicClient?: any;
+}
+
+interface NetworkCheckResult {
+  isCorrectNetwork: boolean;
+  currentChainId: number | null;
+  targetChainId: number;
+}
+
+interface WalletError {
+  code: number;
+  message: string;
+}
+
+// Configuration pour Base
+const BASE_CONFIG = {
+  chainId: Number(ATOM_CONTRACT_CHAIN_ID),
+  chainName: 'Base',
+  nativeCurrency: {
+    name: 'ETH',
+    symbol: 'ETH',
+    decimals: 18,
+  },
+  rpcUrls: ['https://mainnet.base.org'],
+  blockExplorerUrls: ['https://basescan.org'],
+};
+
+export const useNetworkCheck = ({ walletConnected, publicClient }: UseNetworkCheckProps): NetworkCheckResult => {
+  const [currentChainId, setCurrentChainId] = useState<number | null>(null);
+  const targetChainId = Number(ATOM_CONTRACT_CHAIN_ID);
+
+  useEffect(() => {
+    const checkNetwork = async () => {
+      if (!walletConnected || !publicClient) return;
+
+      try {
+        const chainId = await publicClient.getChainId();
+        setCurrentChainId(Number(chainId));
+      } catch (error) {
+        console.error('Error checking network:', error);
+        setCurrentChainId(null);
+      }
+    };
+
+    checkNetwork();
+  }, [walletConnected, publicClient]);
+
+  const switchNetwork = async () => {
+    if (!walletConnected) return;
+
+    try {
+      console.log('Attempting switchChain with chainId:', targetChainId);
+      await walletConnected.switchChain({ chainId: targetChainId });
+    } catch (error) {
+      console.error('Error switching network:', error);
+      const walletError = error as WalletError;
+
+      if (walletError.code === 4902) {
+        try {
+          console.log('Network not found, attempting to add it');
+          await walletConnected.addChain(BASE_CONFIG);
+
+          console.log('Network added, attempting switch again');
+          await walletConnected.switchChain({ chainId: targetChainId });
+        } catch (addError) {
+          console.error('Error adding Base network:', addError);
+          throw new Error('Unable to add Base network to your wallet. Please add it manually.');
+        }
+      } else {
+        throw new Error('Unable to switch network. Please check your wallet.');
+      }
+    }
+  };
+
+  return {
+    isCorrectNetwork: currentChainId === targetChainId,
+    currentChainId,
+    targetChainId
+  };
+}; 

src/components/vote/ClaimVoting.tsx

@@ -0,0 +1,11 @@
+declare module 'playermap_graph' {
+  interface GraphVisualizationProps {
+    endpoint: string;
+    onNodeSelect: (node: any) => void;
+    onLoadingChange: (isLoading: boolean) => void;
+    walletAddress?: string;
+  }
+
+  export const GraphVisualization: React.FC<GraphVisualizationProps>;
+  export const LoadingAnimation: React.FC;
+}