added cents to flare components

app/page.tsx

@@ -7,6 +7,7 @@ import GetEventImages from '@/components/sc/getEventImages';
 import GetEventTickets from '@/components/sc/getEventTickets';
 import BuyTicket from '@/components/sc/buyTicket';
 import TransferTicket from '@/components/sc/transferTicket';
+import CentsToFlare from '@/components/sc/centsToFlare';
 
 export default function Home() {
   return (
@@ -47,6 +48,8 @@ export default function Home() {
 
         <TransferTicket />
 
+        <CentsToFlare />
+
         <div className="flex gap-4 items-center flex-col sm:flex-row">
           <a
             className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"

components/sc/centsToFlare.tsx

@@ -0,0 +1,100 @@
+'use client';
+
+import React, { useState } from 'react';
+import { ethers } from 'ethers';
+import { getContract } from '@/lib/ethers';
+
+declare global {
+  interface Window {
+    ethereum: ethers.providers.ExternalProvider;
+  }
+}
+
+const CentsToFlare = () => {
+  const [cents, setCents] = useState('');
+  const [flareValue, setFlareValue] = useState<string | null>(null);
+  const [isWalletConnected, setIsWalletConnected] = useState(false);
+  const [walletAddress, setWalletAddress] = useState<string | null>(null);
+
+  // Connect Wallet
+  const handleConnectWallet = async () => {
+    if (typeof window.ethereum !== 'undefined' && window.ethereum.request) {
+      try {
+        const accounts = await window.ethereum.request({
+          method: 'eth_requestAccounts',
+        });
+        if (accounts.length > 0) {
+          setIsWalletConnected(true);
+          setWalletAddress(accounts[0]);
+          console.log('Wallet connected:', accounts[0]);
+        }
+      } catch (error) {
+        console.error('Error connecting to wallet:', error);
+      }
+    } else {
+      alert('Please install MetaMask or another Ethereum wallet');
+    }
+  };
+
+  // Call centsToFlare function from smart contract
+  const handleConvertCentsToFlare = async () => {
+    if (!cents) {
+      alert('Please enter a value in cents.');
+      return;
+    }
+
+    try {
+      const provider = new ethers.providers.Web3Provider(window.ethereum);
+      const contract = getContract().connect(provider);
+
+      // Convert cents to equivalent FLR
+      const flareValueInWei = await contract.centsToFlare(cents);
+      const flareValueInEth = ethers.utils.formatEther(flareValueInWei); // Convert Wei to FLR (Ether format)
+
+      setFlareValue(flareValueInEth);
+      console.log('Equivalent in FLR:', flareValueInEth);
+    } catch (error) {
+      console.error('Error converting cents to FLR:', error);
+      setFlareValue(null);
+    }
+  };
+
+  return (
+    <div className="p-4">
+      <h2>Cents to FLR Converter</h2>
+      {!isWalletConnected ? (
+        <button
+          onClick={handleConnectWallet}
+          className="bg-blue-500 text-white px-4 py-2 rounded mb-4"
+        >
+          Connect Wallet
+        </button>
+      ) : (
+        <div>
+          <p>Connected Wallet: {walletAddress}</p>
+          <input
+            type="number"
+            placeholder="Enter amount in cents"
+            value={cents}
+            onChange={(e) => setCents(e.target.value)}
+            className="border p-2 mb-2"
+          />
+          <button
+            onClick={handleConvertCentsToFlare}
+            className="bg-green-500 text-white px-4 py-2 rounded"
+          >
+            Convert to FLR
+          </button>
+
+          {flareValue && (
+            <p className="mt-4">
+              Equivalent in FLR: <strong>{flareValue} FLR</strong>
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CentsToFlare;