Privy

npm install @privy-io/react-auth @privy-io/wagmi @tanstack/react-query @rhinestone/sdk@3.0.0 viem wagmi

'use client'

import { PrivyProvider } from '@privy-io/react-auth'
import { createConfig, WagmiProvider } from '@privy-io/wagmi'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { http } from 'wagmi'
import { arbitrum, base } from 'viem/chains'

const queryClient = new QueryClient()
const wagmiConfig = createConfig({
  chains: [arbitrum, base],
  transports: {
    [arbitrum.id]: http(),
    [base.id]: http(),
  },
})

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <PrivyProvider
      appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID!}
      config={{
        loginMethods: ['email', 'wallet'],
        embeddedWallets: {
          ethereum: { createOnLogin: 'users-without-wallets' },
        },
        defaultChain: base,
        supportedChains: [arbitrum, base],
      }}
    >
      <QueryClientProvider client={queryClient}>
        <WagmiProvider config={wagmiConfig}>{children}</WagmiProvider>
      </QueryClientProvider>
    </PrivyProvider>
  )
}

import { RhinestoneSDK } from '@rhinestone/sdk'

export const rhinestone = new RhinestoneSDK({
  auth: {
    mode: 'experimental_jwt',
    accessToken: async () => {
      const response = await fetch('/api/auth/access-token', {
        credentials: 'include',
      })
      if (!response.ok) throw new Error('Unable to authenticate with Rhinestone')
      return ((await response.json()) as { token: string }).token
    },
  },
})

import { usePrivy } from '@privy-io/react-auth'
import { useWalletClient } from 'wagmi'
import { walletClientToAccount } from '@rhinestone/sdk/evm'
import { rhinestone } from './rhinestone'

export function ConnectRhinestoneButton() {
  const { ready, authenticated, login } = usePrivy()
  const { data: walletClient } = useWalletClient()

  async function connect() {
    if (!ready || !authenticated || !walletClient) return

    const owner = walletClientToAccount(walletClient)
    const account = await rhinestone.createAccount({
      evm: { owners: { type: 'ecdsa', accounts: [owner] } },
    })

    console.log(account.getAddress('evm'))
  }

  if (!ready) return <button disabled>Loading…</button>
  if (!authenticated) return <button onClick={login}>Sign in</button>
  return <button onClick={connect}>Create account</button>
}