import React, { useEffect } from 'react'
import * as anchor from '@project-serum/anchor'
import { SocialProtocol } from '@spling/social-protocol'
import { AnchorWallet, useWallet, Keypair } from '@solana/wallet-adapter-react'

export default function SocialProtocol() {
  const wallet = useWallet()

  useEffect(() => {
    ;(async () => {
      if (wallet?.publicKey) {
        const payerWallet: Keypair = Keypair.generate()
        const options = { 
          rpcUrl: "https://api.mainnet-beta.solana.com/", 
          useIndexer: true
        } as ProtocolOptions

        // Initialize the social protocol
        const socialProtocol = await new SocialProtocol(wallet, payerWallet, options).init()

        // You can call now functions like:
        const user = await socialProtocol.getUser(42) 
      }
    })()
  }, [wallet?.publicKey])
  return <div></div>
}

import React, { useEffect } from 'react'
import { SocialProtocol } from '@spling/social-protocol'
import { Keypair } from "@solana/web3.js";

export default function SocialProtocol() {
  useEffect(() => {
    ;(async () => {
      const wallet: Keypair = Keypair.generate()
      const payerWallet: Keypair = Keypair.generate()
      const options = { 
        rpcUrl: "https://api.mainnet-beta.solana.com/", 
        useIndexer: true
      } as ProtocolOptions

      // Initialize the social protocol
      const socialProtocol = await new SocialProtocol(wallet, payerWallet, options).init()

      // You can call now functions like:
      const user = await socialProtocol.getUser(42) 
    })()
  }, [])
  
  return <View></View>;
}