text: import { useEffect, useState } from 'react';
  import twitterLogo from './assets/twitter-logo.svg';
  import './App.css';
  import { Connection, PublicKey, clusterApiUrl } from '@solana/web3.js';
  import { Program, Provider, web3 } from '@project-serum/anchor';
  import kp from './keypair.json';
  import idl from './idl.json';
  
  const {SystemProgram, Keypair} = web3;
  
  const arr = Object.values(kp._keypair.secretKey);
  const secret = new Uint8Array(arr);
  const baseAccount = web3.Keypair.fromSecretKey(secret);
  
  const programID = new PublicKey(idl.metadata.address);
  
  const network = clusterApiUrl('devnet');
  
  const opts = {
    preflightCommitment: "processed"
  }
  
  // Constants
  const TWITTER_HANDLE = 'clarkezone';
  const TWITTER_LINK = `https://twitter.com/${TWITTER_HANDLE}`;
  const TEST_GIFS = [
  	'https://i.giphy.com/media/eIG0HfouRQJQr1wBzz/giphy.webp',
  	'https://media3.giphy.com/media/L71a8LW2UrKwPaWNYM/giphy.gif?cid=ecf05e47rr9qizx2msjucl1xyvuu47d7kf25tqt2lvo024uo&rid=giphy.gif&ct=g',
  	'https://media4.giphy.com/media/AeFmQjHMtEySooOc8K/giphy.gif?cid=ecf05e47qdzhdma2y3ugn32lkgi972z9mpfzocjj6z1ro4ec&rid=giphy.gif&ct=g',
  	'https://i.giphy.com/media/PAqjdPkJLDsmBRSYUp/giphy.webp'
  ]
  
  const App = () => {
    const [walletAddress, setWalletAddress] = useState(null);
    const [inputValue, setInputValue] = useState('');
    const [gifList, setGifList] = useState([]);
    const checkIfWalletIsConnected = async () => {
      try {
        const { solana } = window;
  
        if (solana) {
          if (solana.isPhantom) {
            console.log('Phantom wallet found!');
  
            const response = await solana.connect({ onlyIfTrusted: true });
          console.log(
            'Connected with Public Key:',
            response.publicKey.toString()
          );
          setWalletAddress(response.publicKey.toString());
          }
        } else {
          alert('Solana object not found! Get a Phantom Wallet 👻');
        }
      } catch (error) {
        console.error(error);
      }
    };
  
   
  
    const connectWallet = async () => {
      const { solana } = window;
  
      if (solana) {
        const response = await solana.connect();
        console.log('Connected with Public Key:', response.publicKey.toString());
        setWalletAddress(response.publicKey.toString());
      }
  
    };
  
    useEffect(() => {
      window.addEventListener('load', async (event) => {
        await checkIfWalletIsConnected();
      });
    }, []);
  
  
    const getGifList = async() => {
      try {
          const provider = getProvider();
          const program = new Program(idl, programID, provider);
          const account = await program.account.baseAccount.fetch(baseAccount.publicKey);
  
          console.log("got the account", account);
          setGifList(account.pictureList);
      } catch (error) {
        console.log("Error in getFigs: ", error);
        setGifList(null);
      }
  
    }
  
    useEffect(() => {
      if (walletAddress) {
        console.log('Fetching GIF list...');
        getGifList()
      }
    }, [walletAddress]);
  
    const renderConnectedContainer = () => {
      // If we hit this, it means the program account hasn't be initialized.
      if (gifList === null) {
        return (
          <div className="connected-container">
            <button className="cta-button submit-gif-button" onClick={createGifAccount}>
              Do One-Time Initialization For GIF Program Account
            </button>
          </div>
        )
      } 
      // Otherwise, we're good! Account exists. User can submit GIFs.
      else {
        return(
          <div className="connected-container">
            <form
              onSubmit={(event) => {
                event.preventDefault();
                sendGif();
              }}
            >
              <input
                type="text"
                placeholder="Enter gif link!"
                value={inputValue}
                onChange={onInputChange}
              />
              <button type="submit" className="cta-button submit-gif-button">
                Submit
              </button>
            </form>
            <div className="gif-grid">
              {/* We use index as the key instead, also, the src is now item.gifLink */}
              {gifList.map((item, index) => (
                <div className="gif-item" key={index}>
                  <img src={item.pictureLink} />
                </div>
              ))}
            </div>
          </div>
        )
      }
    }
  
    const onInputChange = (event) => {
      const { value } = event.target;
      setInputValue(value);
    };
  
    const getProvider = () => {
      const connection = new Connection(network, opts.preflightCommitment);
      const provider = new Provider(
        connection, window.solana, opts.preflightCommitment,
      );
      return provider;
    }
  
    const createGifAccount = async () => {
      try {
        const provider = getProvider();
        const program = new Program(idl, programID, provider);
        console.log("ping")
        await program.rpc.startStuffOff({
          accounts: {
            baseAccount: baseAccount.publicKey,
            user: provider.wallet.publicKey,
            systemProgram: SystemProgram.programId,
          },
          signers: [baseAccount]
        });
        console.log("Created a new BaseAccount w/ address:", baseAccount.publicKey.toString())
        await getGifList();
    
      } catch(error) {
        console.log("Error creating BaseAccount account:", error)
      }
    } 
  
    const sendGif = async () => {
      if (inputValue.length === 0) {
        console.log("No gif link given!")
        return
      }
      console.log('Gif link:', inputValue);
      try {
        const provider = getProvider();
        const program = new Program(idl, programID, provider);
    
        await program.rpc.addPicture(inputValue, {
          accounts: {
            baseAccount: baseAccount.publicKey,
            user: provider.wallet.publicKey,
          },
        });
        console.log("GIF successfully sent to program", inputValue)
    
        await getGifList();
      } catch (error) {
        console.log("Error sending GIF:", error)
      }
    };
  
    const renderNotConnectedContainer = () => (
      <button
        className="cta-button connect-wallet-button"
        onClick={connectWallet}
      >
        Connect to Wallet
      </button>
    );
  
    return (
      <div className="App">
        <div className={walletAddress ? 'authed-container' : 'container'}>
          <div className="header-container">
            <p className="header">🖼 Photoverse</p>
            <p className="sub-text">
              View the Clarkezone photoverse ✨
            </p>
            {/* Render your connect to wallet button right here */}
            {!walletAddress && renderNotConnectedContainer()}
            {walletAddress && renderConnectedContainer()}
          </div>
          <div className="footer-container">
            <img alt="Twitter Logo" className="twitter-logo" src={twitterLogo} />
            <a
              className="footer-text"
              href={TWITTER_LINK}
              target="_blank"
              rel="noreferrer"
            >{`@${TWITTER_HANDLE}`}</a>
          </div>
        </div>
      </div>
    );
  };
  
  export default App;
  