Frontend Integration

import { ethers } from 'ethers';

// Connect to Ettios using a provider
const provider = new ethers.providers.JsonRpcProvider("https://rpc.ettiosblockchain.io");

// Or connect via MetaMask if available in the browser
async function connectToMetaMask() {
  if (window.ethereum) {
    try {
      // Request account access
      await window.ethereum.request({ method: 'eth_requestAccounts' });
      return new ethers.providers.Web3Provider(window.ethereum);
    } catch (error) {
      console.error("User denied account access");
    }
  } else {
    console.error("MetaMask is not installed");
  }
}

// Contract ABI (Application Binary Interface)
const abi = [
  "function greet() view returns (string)",
  "function setGreeting(string _greeting)"
];

// Contract address (replace with your deployed contract address)
const contractAddress = "0x1234567890123456789012345678901234567890";

// Create a contract instance
const contract = new ethers.Contract(contractAddress, abi, provider);

// If you want to make state-changing calls, connect with a signer
async function getContractWithSigner() {
  const metaMaskProvider = await connectToMetaMask();
  const signer = metaMaskProvider.getSigner();
  return new ethers.Contract(contractAddress, abi, signer);
}

// Read data from the contract (view functions)
async function readGreeting() {
  try {
    const greeting = await contract.greet();
    console.log("Current greeting:", greeting);
    return greeting;
  } catch (error) {
    console.error("Error reading greeting:", error);
  }
}

// Write data to the contract (state-changing functions)
async function setNewGreeting(newGreeting) {
  try {
    const contractWithSigner = await getContractWithSigner();
    const tx = await contractWithSigner.setGreeting(newGreeting);
    
    // Wait for the transaction to be mined
    console.log("Transaction sent, waiting for confirmation...");
    const receipt = await tx.wait();
    console.log("Transaction confirmed:", receipt);
    return receipt;
  } catch (error) {
    console.error("Error setting greeting:", error);
  }
}

// src/wagmi.ts
import { configureChains, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
import { publicProvider } from 'wagmi/providers/public'
import { MetaMaskConnector } from 'wagmi/connectors/metaMask'

// Define the Ettios chain
const ettios = {
  id: 2237,
  name: 'Ettios',
  network: 'ettios',
  nativeCurrency: {
    name: 'ETTIA',
    symbol: 'ETTIA',
    decimals: 18,
  },
  rpcUrls: {
    default: {
      http: ['https://rpc.ettiosblockchain.io'],
    },
    public: {
      http: ['https://rpc.ettiosblockchain.io'],
    },
  },
  blockExplorers: {
    default: {
      name: 'EttiosScan',
      url: 'https://scan.ettiosblockchain.io',
    },
  },
}

// Configure chains & providers
const { chains, publicClient } = configureChains(
  [ettios, mainnet, sepolia],
  [publicProvider()]
)

// Set up wagmi config
export const config = createConfig({
  autoConnect: true,
  connectors: [
    new MetaMaskConnector({ chains }),
  ],
  publicClient,
})

export { chains }

// src/App.tsx or _app.tsx
import { WagmiConfig } from 'wagmi'
import { config } from './wagmi'

function App() {
  return (
    <WagmiConfig config={config}>
      {/* Your app components */}
    </WagmiConfig>
  )
}

// ContractInteraction.tsx
import { useContractRead, useContractWrite, useAccount, useConnect, useDisconnect } from 'wagmi'
import { MetaMaskConnector } from 'wagmi/connectors/metaMask'

function ContractInteraction() {
  // Contract configuration
  const contractConfig = {
    address: '0x1234567890123456789012345678901234567890',
    abi: [
      "function greet() view returns (string)",
      "function setGreeting(string _greeting)"
    ],
  }

  // Connection state
  const { address, isConnected } = useAccount()
  const { connect } = useConnect({
    connector: new MetaMaskConnector(),
  })
  const { disconnect } = useDisconnect()

  // Read from contract
  const { data: greeting, isLoading: isLoadingGreeting } = useContractRead({
    ...contractConfig,
    functionName: 'greet',
  })

  // Write to contract
  const { write: setGreeting, isLoading: isWriting } = useContractWrite({
    ...contractConfig,
    functionName: 'setGreeting',
  })

  // Connect wallet button
  if (!isConnected) {
    return <button onClick={() => connect()}>Connect Wallet</button>
  }

  return (
    <div>
      <div>Connected to {address}</div>
      <button onClick={() => disconnect()}>Disconnect</button>
      
      <div>
        <h3>Current Greeting</h3>
        {isLoadingGreeting ? 'Loading...' : greeting}
      </div>
      
      <div>
        <h3>Update Greeting</h3>
        <input
          id="greeting"
          placeholder="New greeting"
          onChange={(e) => setNewGreeting(e.target.value)}
        />
        <button
          onClick={() => setGreeting({ args: [newGreeting] })}
          disabled={isWriting}
        >
          {isWriting ? 'Updating...' : 'Update'}
        </button>
      </div>
    </div>
  )
}